/* ==========================================================================
   HIZIRBEY PUBLIC APPLICATION STYLES

   Dosya:
   public/themes/default/assets/css/app.css

   Amaç:
   Portalın ziyaretçilere açık public bölümündeki temel sayfa,
   header, navigation, sidebar ve footer görünümünü tanımlar.

   Not:
   AdminCP stilleri bu dosyada bulunmaz.
   AdminCP kendi CSS mimarisini kullanır.
========================================================================== */

/* ==========================================================================
   ---> GLOBAL BASE STYLES
========================================================================== */

body {
  margin: 0;

  background: #dfe5e8;
  color: #222222;

  font-family: Arial, sans-serif;
}

/* <--- GLOBAL BASE STYLES */

/* ==========================================================================
   ---> PUBLIC TOPBAR
========================================================================== */

.topbar {
  padding: 8px 20px;

  background: #263b4a;
  color: #ffffff;

  text-align: right;
  font-size: 14px;
}

/* <--- PUBLIC TOPBAR */

/* ==========================================================================
   ---> PUBLIC SITE HEADER
========================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 25px 20px;

  background: #e8eef2;
}

.site-header h1 {
  margin: 0;

  color: #0b3f53;
}
/* ==========================================================================
   ---> PUBLIC SEARCH BOX
========================================================================== */

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  box-sizing: border-box;

  width: 190px;
  height: 34px;

  padding: 0 10px;

  border: 1px solid #b8c5cc;
  border-right: 0;
  border-radius: 4px 0 0 4px;

  background: #ffffff;
  color: #222222;

  font: inherit;
  font-size: 13px;

  outline: none;
}

.search-box input:focus {
  border-color: #6ca8bb;

  box-shadow: inset 0 0 0 1px #6ca8bb;
}

.search-box button {
  box-sizing: border-box;

  height: 34px;
  padding: 0 14px;

  border: 1px solid #073343;
  border-radius: 0 4px 4px 0;

  background: #073343;
  color: #ffffff;

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.search-box button:hover {
  background: #0f536b;
  border-color: #0f536b;
}
.search-box input::placeholder {
  color: #526b78;
  opacity: 1;
}
/* <--- PUBLIC SEARCH BOX */

/* <--- PUBLIC SITE HEADER */

/* ==========================================================================
   ---> PUBLIC PAGE LAYOUT
========================================================================== */

.page-wrapper {
  display: grid;
  grid-template-columns:
    220px
    minmax(0, 1fr)
    220px;
  gap: 20px;

  padding: 20px;
}

.page-wrapper--left-only {
  grid-template-columns:
    220px
    minmax(0, 1fr);
}

.page-wrapper--right-only {
  grid-template-columns:
    minmax(0, 1fr)
    260px;
}

.page-wrapper--full-width {
  grid-template-columns: minmax(0, 1fr);
}

.content {
  min-width: 0;
  padding: 15px;

  border: 1px solid #dddddd;

  background: #ffffff;
}

.left-sidebar,
.right-sidebar {
  min-width: 0;
  padding: 0;

  border: 0;

  background: transparent;
}

.left-sidebar h3,
.right-sidebar h3 {
  margin-top: 0;
  padding-bottom: 5px;

  border-bottom: 2px solid #222222;
}

/* <--- PUBLIC PAGE LAYOUT */
/* ==========================================================================
   ---> PUBLIC SITE FOOTER
========================================================================== */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-height: 42px;
  padding: 0 20px;

  background: #073343;
  color: #ffffff;

  font-size: 12px;
}

.site-footer-copyright {
  margin-left: 12px;
}

/* <--- PUBLIC SITE FOOTER */

/* ==========================================================================
   ---> PUBLIC RESPONSIVE
========================================================================== */

@media (max-width: 1000px) {
  .page-wrapper {
    grid-template-columns:
      180px
      minmax(0, 1fr);
  }

  .right-sidebar {
    grid-column: 1 / -1;
  }

  .page-wrapper--right-only,
  .page-wrapper--full-width {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-wrapper {
    grid-template-columns: 1fr;

    padding: 12px;
  }

  .left-sidebar,
  .right-sidebar,
  .content {
    grid-column: auto;
  }
}

/* <--- PUBLIC RESPONSIVE */
/* ==========================================================================
   ---> SITE CONTAINER

   Amaç:
   Portal ana gövdesini geniş ekranlarda ortalar ve
   vBulletin benzeri sabit maksimum genişlik sağlar.
========================================================================== */

#site-container {
  box-sizing: border-box;
  width: calc(100% - 80px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background: #f2f2f2;
}

/* <--- SITE CONTAINER */