/* ============================================================
   layout.css — Container, grid, navbar, footer, page shells
   ============================================================ */

/* ── 1. CONTAINER ─────────────────────────────────────── */
.container {
  width:     100%;
  max-width: 1600px;
  margin:    0 auto;
  padding:   0 var(--sp-3);
}
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
}

/* ── 2. PAGE SHELL ─────────────────────────────────────── */
.page-wrapper {
  display:    flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-main {
  flex:    1;
  padding: var(--sp-8) 0 var(--sp-20);
}

/* ── 3. LAYOUT GRIDS ──────────────────────────────────── */
/* Two-column: main content + sidebar */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap:     var(--sp-8);
  align-items: start;
}

/* Three columns (categories grid) */
.layout-cols-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-5);
}
.layout-cols-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-5);
}

/* Post card grid */
.post-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   var(--sp-4);
}

/* ── Feed sonsuz kaydırma (ana sayfa + profil) ───────── */
.post-feed {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.post-feed-divider {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-3);
  width:          100%;
  padding:        var(--sp-4) 0;
  margin:         var(--sp-2) 0;
  color:          var(--color-text-secondary);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.02em;
}
.post-feed-divider::before,
.post-feed-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

.post-grid .post-feed-divider {
  grid-column: 1 / -1;
}

/* ── Sayfa butonları ─────────────────────────────── */
.feed-page-buttons {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             var(--sp-3);
  width:           100%;
  padding:         var(--sp-6) 0 var(--sp-8);
  grid-column:     1 / -1;
}

.feed-page-btn {
  display:     inline-flex;
  align-items: center;
  padding:     0;
  background:  transparent;
  border:      none;
  color:       #4a7c59;
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor:      pointer;
  transition:  color var(--transition-fast);
  line-height: 1.4;
}
.feed-page-btn:hover:not(:disabled) {
  color: #2e7d32;
}
.feed-page-btn:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

@media (max-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }
  .layout-sidebar { display: none; } /* sidebar at wider breakpoints only */
  .layout-cols-3  { grid-template-columns: repeat(2, 1fr); }
  .layout-cols-4  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .layout-cols-3,
  .layout-cols-4 { grid-template-columns: 1fr; }
  .post-grid     { grid-template-columns: 1fr; }
}

/* ── 4. HEADER — iki satırlı yapı ──────────────────────── */
.site-header {
  background: var(--color-bg);
}

/* ── Üst satır — kaydırınca sabit kalır ───────────────── */
.header-top {
  position:   sticky;
  top:        0;
  z-index:    var(--z-sticky);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.header-top__inner {
  display:     flex;
  align-items: center;
  height:      83px;
  gap:         var(--sp-3);
  padding:     0 var(--sp-2);
}

/* Logo */
.navbar-brand {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  text-decoration: none;
  flex-shrink:     0;
  line-height:     1;
}
.navbar-brand:hover .navbar-brand-text { color: var(--color-accent-hover); }
.navbar-brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }

/* PNG logo — şeffaf arka plan, doğal hizalama */
.navbar-brand-img {
  display:        block;
  width:          32px;
  height:         32px;
  max-width:      32px;
  object-fit:     contain;
  flex-shrink:    0;
  background:     transparent;
  border:         none;
  box-shadow:     none;
  filter:         none;
  vertical-align: middle;
}
[data-theme="dark"] .navbar-brand-img {
  filter: none;
}

/* Marka adı metni */
.navbar-brand-text {
  font-size:      var(--text-lg);
  font-weight:    var(--weight-bold);
  color:          var(--color-accent);
  letter-spacing: -0.02em;
  line-height:    1;
  transition:     color var(--transition-fast);
}

/* ── Arama kutusu ───────────────────────── */
.header-search {
  flex:          2 1 0;
  max-width:     none;
  min-width:     160px;
  display:       flex;
  position:      relative;
  align-items:   center;
  gap:           var(--sp-2);
}
.header-search--desktop .js-live-search-form {
  flex:   1;
  width:  100%;
  min-width: 0;
}
.header-search--desktop .js-live-search-form .header-search__input {
  width: 100%;
}
.header-search__input {
  flex:          1;
  min-width:     0;
  height:        39px;
  padding:       0 var(--sp-4);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  background:    var(--color-bg-muted);
  color:         var(--color-text);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.header-search__input::placeholder { color: var(--color-text-muted); }
.header-search__input:focus {
  border-color: var(--color-accent);
  background:   var(--color-bg);
  box-shadow:   0 0 0 3px rgba(46,125,50,.12);
}

/* Eski büyüteç butonu kaldırıldı — arama Enter ile gönderilir */
.header-search__btn { display: none; }

/* ── Üst navigasyon linkleri ─────────────── */
.header-links {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  flex-shrink: 0;
}
.header-link {
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding:         4px var(--sp-2);
  border-radius:   var(--radius-sm);
  white-space:     nowrap;
  transition:      color var(--transition-fast);
}
.header-link:hover      { color: var(--color-text); }
.header-link--active    { color: var(--color-text); font-weight: var(--weight-medium); }
.header-link--test      { color: #c62828; font-weight: var(--weight-bold); }
.header-link--test:hover { color: #b71c1c; }

/* Her link içindeki küçük SVG simge */
.header-link__icon {
  display:      inline-block;
  vertical-align: middle;
  margin-right: 4px;
  margin-top:   -2px;
  flex-shrink:  0;
}

/* Arşiv link (nav içinde) */
.header-link--arsiv       { color: #2d7230; }
.header-link--arsiv:hover { color: #225727; }
.header-link--arsiv.header-link--active { color: #2d7230; font-weight: var(--weight-semibold); }

/* Varoluş Kaynağı — %30 daha koyu yeşil (#1b5e20 → %30 koyulaştırıldı ≈ #133f16) */
.header-link--varolus       { color: #133f16; font-weight: var(--weight-medium); }
.header-link--varolus:hover { color: #0d2b0f; }
.header-link--varolus.header-link--active { color: #133f16; font-weight: var(--weight-semibold); }

/* İçerik Merkezi + Arşiv — aynı renk, #388e3c'den %15 koyu ≈ #2d7230 */
.header-link--merkezi       { color: #2d7230; font-weight: var(--weight-medium); }
.header-link--merkezi:hover { color: #225727; }
.header-link--merkezi.header-link--active { color: #2d7230; font-weight: var(--weight-semibold); }

/* Arşiv — sade link, baloncuk/border yok, merkezi ile aynı renk */
.header-actions__search-btn--arsiv {
  color:        #2d7230 !important;
  border-color: transparent !important;
  background:   transparent !important;
  box-shadow:   none !important;
}
.header-actions__search-btn--arsiv:hover {
  background:   transparent !important;
  color:        #225727 !important;
  border-color: transparent !important;
  text-decoration: underline;
}
.header-link--logout {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  color:       #c62828;
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  padding:     4px var(--sp-2);
}
.header-link--logout:hover { color: #b71c1c; }
.header-logout-form { display: inline; }

/* ── Sağ eylem grubu ─────────────────────── */
.header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Ara butonu */
.header-actions__search-btn {
  font-size:   var(--text-xs);
  padding:     4px 12px;
  height:      30px;
  white-space: nowrap;
}

/* CTA butonu — kalem ikonu + kalın */
.header-cta {
  white-space:  nowrap;
  font-size:    var(--text-sm);
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  font-weight:  var(--weight-bold);
  letter-spacing: 0.01em;
}
.header-cta svg { flex-shrink: 0; }

/* Giriş Yap — soluk link */
.header-link--giris {
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding:         4px var(--sp-1);
  transition:      color var(--transition-fast);
}
.header-link--giris:hover { color: var(--color-text); }

/* İkon butonları */
.header-icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-md);
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      background var(--transition-fast), color var(--transition-fast);
  flex-shrink:     0;
}
.header-icon-btn:hover    { background: var(--color-bg-muted); color: var(--color-text); }
.header-icon-btn--active  { color: var(--color-accent); }

.header-icon-btn--has-badge { position: relative; }

.header-icon-badge {
  position:      absolute;
  top:           2px;
  right:         2px;
  min-width:     16px;
  height:        16px;
  padding:       0 4px;
  border-radius: 999px;
  background:    #c62828;
  color:         #fff;
  font-size:     0.6rem;
  font-weight:   var(--weight-bold);
  line-height:   16px;
  text-align:    center;
  pointer-events: none;
}

/* Hamburger (mobil) */
.header-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           34px;
  height:          34px;
  padding:         6px;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      background var(--transition-fast);
  flex-shrink:     0;
}
.header-hamburger:hover { background: var(--color-bg-muted); }

/* Mobil: "Varoluş Kaynağı" üst satır linki — masaüstünde gizli */
.header-mobile-varolus {
  display:         none;
  align-items:     center;
  gap:             4px;
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           #133f16;
  text-decoration: none;
  white-space:     nowrap;
}
.header-mobile-varolus:hover { color: #0d2b0f; }

/* Mobil arama satırı — masaüstünde gizli */
.header-mobile-search {
  display: none;
}

/* ── Mobil: .header-top içinde 3 satır ───────────────────── */
/* Mobil ikinci satır (giriş yapmış kullanıcı: yaz + ikonlar) */
.header-mobile-row2 {
  display: none;
}
.header-mobile-row2__inner {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  padding:     4px var(--sp-3) 4px;
}
.header-mobile-searchbar {
  flex: 1;
}
.header-mobile-searchbar .header-mobile-search__input {
  width:         100%;
  border-radius: var(--radius-full);
  padding:       8px 14px;
  border:        1px solid var(--color-border);
  background:    var(--color-bg);
  font-size:     var(--text-sm);
  color:         var(--color-text-primary);
  outline:       none;
}
.header-mobile-searchbar .header-mobile-search__input:focus {
  border-color: var(--color-accent);
}
.header-mobile-search__row {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         8px 0 10px;
}
.header-mobile-search__input {
  flex:          1;
  height:        40px;
  padding:       0 var(--sp-4);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  background:    var(--color-bg-muted);
  color:         var(--color-text);
  outline:       none;
}
.header-mobile-search__input:focus {
  border-color: var(--color-accent);
  background:   var(--color-bg);
}
.header-mobile-search__btn {
  flex-shrink:   0;
  width:         40px;
  height:        40px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        none;
  border-radius: 50%;
  background:    var(--color-accent);
  color:         #fff;
  cursor:        pointer;
}

/* Keşfet Drawer */
.mobile-kesfet {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.mobile-kesfet[hidden] { display: none; }
.mobile-kesfet__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.45);
}
.mobile-kesfet__panel {
  position:       absolute;
  top:            0;
  right:          0;
  bottom:         0;
  width:          min(320px, 100vw);
  max-width:      100vw;
  background:     var(--color-bg);
  overflow-y:     auto;
  overflow-x:     hidden;
  display:        flex;
  flex-direction: column;
  animation:      kesfet-slide-in .22s ease;
  box-sizing:     border-box;
}
@keyframes kesfet-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.mobile-kesfet__info strong {
  font-size:   0.95rem;
  font-weight: var(--weight-semibold);
  color:       var(--color-text);
  line-height: 1.3;
}
.mobile-kesfet__info small {
  font-size: 0.78rem;
  color:     var(--color-text-muted);
}
.mobile-kesfet__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--color-border);
}
.mobile-kesfet__title {
  font-size:   1.1rem;
  font-weight: var(--weight-bold);
}
.mobile-kesfet__close {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--color-text-muted);
  padding:    4px;
  display:    flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.mobile-kesfet__close:hover { color: var(--color-text); background: var(--color-bg-muted); }
.mobile-kesfet__list {
  list-style: none;
  margin:     0;
  padding:    8px 0;
}
.mobile-kesfet__item {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  padding:     14px 20px;
  text-decoration: none;
  color:       var(--color-text);
  transition:  background var(--transition-fast);
}
.mobile-kesfet__item:hover { background: var(--color-bg-muted); }
.mobile-kesfet__icon {
  flex-shrink: 0;
  margin-top:  2px;
}
.mobile-kesfet__info {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.mobile-kesfet__info strong {
  font-size:   0.95rem;
  font-weight: var(--weight-semibold);
  color:       var(--color-text);
  line-height: 1.3;
}
.mobile-kesfet__info small {
  font-size: 0.78rem;
  color:     var(--color-text-muted);
}

/* ── CTA metin: mobilde kısalt ── */
.header-cta__text { white-space: nowrap; }

/* ── Alt satır: Kategori pilleri — kaydırınca yukarı çıkar ── */
.header-cats {
  background: var(--color-bg);
}
.header-cats__inner {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  height:      38px;
  overflow-x:  auto;
  scrollbar-width: none;
  flex-wrap:   nowrap;
}
.header-cats__inner::-webkit-scrollbar { display: none; }

.cat-pill {
  display:         inline-flex;
  align-items:     center;
  padding:         4px 14px;
  border-radius:   var(--radius-full);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-muted);
  text-decoration: none;
  white-space:     nowrap;
  border:          1px solid transparent;
  transition:      background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cat-pill:hover {
  background:   var(--color-bg-muted);
  color:        var(--color-text);
  border-color: var(--color-border);
}
.cat-pill--active {
  background:   var(--color-accent);
  color:        #fff;
  border-color: var(--color-accent);
  font-weight:  var(--weight-semibold);
}

/* ── Eski nav-link (geriye dönük uyumluluk) ─ */
.nav-link {
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
  text-decoration: none;
  padding:         4px var(--sp-2);
  border-radius:   var(--radius-sm);
  transition:      color var(--transition-fast);
}
.nav-link:hover { color: var(--color-text); }
.nav-link--active { color: var(--color-accent); font-weight: var(--weight-medium); }

/* ── Eski navbar-actions (geriye dönük) ────── */
.navbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Icon button in navbar */
.navbar-icon-btn {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-md);
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:      background var(--transition), color var(--transition);
}
.navbar-icon-btn:hover {
  background: var(--color-bg-muted);
  color:      var(--color-text-primary);
}

/* Notification badge */
.nav-badge {
  position:    absolute;
  top:         3px;
  right:       3px;
  min-width:   16px;
  height:      16px;
  padding:     0 3px;
  background:  var(--color-error);
  color:       #fff;
  font-size:   10px;
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  display:     flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border:      1.5px solid var(--color-bg);
}

/* Profile dropdown */
.navbar-profile {
  position: relative;
}
.navbar-avatar-btn {
  width:         36px;
  height:        36px;
  padding:       0;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow:      hidden;
  cursor:        pointer;
  transition:    border-color var(--transition);
  background:    var(--color-accent-light);
}
.navbar-avatar-btn:hover { border-color: var(--color-accent); }
.navbar-avatar-btn img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.navbar-avatar-btn .avatar-initial {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  color:           var(--color-accent);
}

.nav-dropdown {
  position:      absolute;
  top:           calc(100% + var(--sp-2));
  right:         0;
  min-width:     192px;
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-xl);
  z-index:       var(--z-dropdown);
  padding:       var(--sp-2) 0;
  animation:     slide-down .15s var(--ease);
  overflow:      hidden;
}
.nav-dropdown[hidden] { display: none; }

.nav-dropdown-item {
  display:    block;
  padding:    var(--sp-2) var(--sp-4);
  font-size:  var(--text-sm);
  color:      var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  cursor:     pointer;
  width:      100%;
  text-align: left;
}
.nav-dropdown-item:hover {
  background: var(--color-bg-subtle);
  color:      var(--color-text-primary);
}
.nav-dropdown-divider {
  height:     1px;
  background: var(--color-border);
  margin:     var(--sp-2) 0;
}
.nav-dropdown-label {
  padding:     var(--sp-2) var(--sp-4) var(--sp-1);
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hamburger */
.navbar-toggle {
  display:        none;
  flex-direction: column;
  justify-content:center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        var(--sp-2);
  border-radius:  var(--radius-md);
  cursor:         pointer;
  transition:     background var(--transition);
}
.navbar-toggle:hover { background: var(--color-bg-muted); }
.hamburger-line {
  display:         block;
  width:           100%;
  height:          1.5px;
  background:      var(--color-text-secondary);
  border-radius:   var(--radius-full);
  transition:      transform .25s var(--ease), opacity .25s;
}
.navbar-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.navbar-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav {
  display:        none; /* JS-controlled */
  flex-direction: column;
  position:       absolute;
  top:            var(--navbar-h);
  left:           0;
  right:          0;
  background:     var(--color-bg);
  border-bottom:  1px solid var(--color-border);
  box-shadow:     var(--shadow-lg);
  z-index:        var(--z-dropdown);
  padding:        var(--sp-4);
  animation:      slide-down .2s var(--ease);
}
.mobile-nav.is-open { display: flex; }

.mobile-nav-link {
  display:       flex;
  align-items:   center;
  padding:       var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  font-size:     var(--text-base);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-secondary);
  text-decoration: none;
  transition:    background var(--transition), color var(--transition);
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: var(--color-bg-subtle);
  color:      var(--color-text-primary);
}
.mobile-nav-divider {
  height:     1px;
  background: var(--color-border);
  margin:     var(--sp-2) 0;
}

/* ── 5. FOOTER — tek satır tam genişlik ─────────────── */
.site-footer {
  border-top:  1px solid var(--color-border);
  margin-top:  var(--sp-10);
  padding:     var(--sp-3) 0;
  background:  var(--color-bg);
}
.site-footer__inner {
  display: block;
  width:   100%;
}

/* Tek satır: tüm öğeler eşit gap, e-posta iki kat boşlukla sağda */
.site-footer__row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--sp-3);
  width:       100%;
}

.site-footer__link {
  font-size:       11px;
  font-weight:     var(--weight-normal);
  color:           var(--color-text-muted);
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      color var(--transition-fast);
}
.site-footer__link:hover { color: var(--color-accent); }

/* E-posta — en sağda, diğerleriyle iki kat boşluk, hafif koyu yeşil */
.site-footer__link--email {
  margin-left: var(--sp-3); /* diğer gap var(--sp-3) + bu = 2× */
  color:       #2d7230;
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}
.site-footer__link--email:hover { color: #1b5e20; }

.site-footer__copy {
  display:     inline-flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  color:       var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.site-footer__sep { opacity: .4; margin: 0 2px; }

/* Eski nav alias */
.site-footer__nav { display: contents; }

@media (max-width: 900px) {
  .site-footer__row   { flex-wrap: wrap; row-gap: 6px; }
  .site-footer__link--email { margin-left: 0; }
}
@media (max-width: 640px) {
  .site-footer__row { gap: var(--sp-2); }
}

/* Eski sınıf geriye uyumluluk */
.footer__link { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; }
.footer-inner { padding: var(--sp-5) 0 var(--sp-4); }
.footer-copy, .footer-note { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── 6. AUTH LAYOUT ────────────────────────────────────── */
.auth-layout {
  display:    flex;
  min-height: 100vh;
}
.auth-sidebar {
  width:          420px;
  flex-shrink:    0;
  background:     var(--color-accent);
  padding:        var(--sp-12);
  display:        flex;
  flex-direction: column;
  justify-content:center;
  gap:            var(--sp-6);
}
.auth-sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  text-decoration: none;
}
.auth-sidebar-brand-icon { font-size: 2.75rem; line-height: 1; }
.auth-sidebar-brand-name {
  font-size:   var(--text-2xl);
  font-weight: var(--weight-bold);
  color:       #fff;
}
.auth-sidebar-tagline {
  font-size:   var(--text-xl);
  color:       rgba(255,255,255,.85);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-medium);
}
.auth-sidebar-features {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  margin-top:     var(--sp-4);
}
.auth-sidebar-feature {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--text-sm);
  color:       rgba(255,255,255,.8);
}
.auth-sidebar-feature-icon { font-size: 1.1rem; flex-shrink: 0; }

.auth-main {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-8) var(--sp-6);
  background:      var(--color-bg-subtle);
}
.auth-card {
  width:         100%;
  max-width:     440px;
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding:       var(--sp-10) var(--sp-8);
  box-shadow:    var(--shadow-lg);
}
.auth-card-title {
  font-size:     var(--text-2xl);
  font-weight:   var(--weight-bold);
  text-align:    center;
  margin-bottom: var(--sp-2);
}
.auth-card-subtitle {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  text-align:    center;
  margin-bottom: var(--sp-8);
}

/* ── 7. BREADCRUMB ─────────────────────────────────────── */
.breadcrumb {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--sp-1);
  padding:       var(--sp-3) 0 var(--sp-5);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
}
.breadcrumb-link {
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition);
}
.breadcrumb-link:hover { color: var(--color-text-primary); }
.breadcrumb-sep  { color: var(--color-text-disabled); user-select: none; }
.breadcrumb-current { color: var(--color-text-secondary); font-weight: var(--weight-medium); }

/* ── 8. TABS ────────────────────────────────────────────── */
.tabs {
  display:        flex;
  gap:            0;
  border-bottom:  1.5px solid var(--color-border);
  overflow-x:     auto;
  scrollbar-width:none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  padding:       var(--sp-3) var(--sp-5);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  white-space:   nowrap;
  cursor:        pointer;
  text-decoration: none;
  transition:    color var(--transition), border-color var(--transition);
  background:    none;
  border-top:    none;
  border-left:   none;
  border-right:  none;
}
.tab-btn:hover  { color: var(--color-text-primary); }
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  color:         var(--color-accent);
  border-color:  var(--color-accent);
  font-weight:   var(--weight-semibold);
}

/* ── 9. SIDEBAR WIDGETS ────────────────────────────────── */
.widget {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow:      hidden;
}
.widget + .widget { margin-top: var(--sp-5); }

.widget-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.widget-title {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}
.widget-body    { padding: var(--sp-3) var(--sp-5); }
.widget-see-all {
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  color:       var(--color-accent);
  text-decoration: none;
}
.widget-see-all:hover { color: var(--color-accent-hover); text-decoration: underline; }

.widget-list-item {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--sp-3);
  padding:         var(--sp-3) 0;
  border-bottom:   1px solid var(--color-border-subtle);
}
.widget-list-item:last-child { border-bottom: none; }

.widget-list-title {
  font-size:       var(--text-sm);
  color:           var(--color-text-secondary);
  text-decoration: none;
  line-height:     var(--leading-snug);
  flex:            1;
  min-width:       0;
}
.widget-list-title:hover { color: var(--color-accent); }

.widget-list-count {
  font-size:   var(--text-xs);
  font-weight: var(--weight-bold);
  color:       var(--color-accent);
  flex-shrink: 0;
  white-space: nowrap;
}
.widget-list-count-up::before { content: '▲ '; font-size: 0.65em; }

/* ── 10. PAGINATION ────────────────────────────────────── */
.pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-1);
  flex-wrap:       wrap;
  margin-top:      var(--sp-10);
}
.page-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 var(--sp-3);
  border-radius:   var(--radius-md);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-secondary);
  border:          1px solid var(--color-border);
  text-decoration: none;
  transition:      background var(--transition), color var(--transition), border-color var(--transition);
  background:      var(--color-bg-card);
  cursor:          pointer;
  line-height:     1;
}
.page-btn:hover {
  background:  var(--color-bg-subtle);
  color:       var(--color-text-primary);
  border-color:var(--color-border-strong);
}
.page-btn.active,
.page-btn[aria-current="page"] {
  background:  var(--color-accent);
  color:       var(--color-accent-text);
  border-color:var(--color-accent);
  font-weight: var(--weight-bold);
  pointer-events: none;
}
.page-btn:disabled,
.page-btn[aria-disabled="true"] {
  opacity:        0.4;
  pointer-events: none;
}

/* ── 11. RESPONSIVE ────────────────────────────────────── */
@media (max-width: 900px) {
  .navbar-nav    { display: none; }
  .navbar-toggle { display: flex; }
  .hide-mobile   { display: none !important; }

  .footer-top  { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-nav  { grid-template-columns: repeat(2, 1fr); }
  .auth-sidebar{ display: none; }
}

@media (max-width: 768px) {
  /* Masaüstü arama + linkler gizle */
  .header-search--desktop { display: none !important; }
  .header-links--desktop  { display: none !important; }

  /* Üst satır yüksekliği: logo + Varoluş Kaynağı */
  .header-top__inner {
    height:          52px;
    padding:         0 var(--sp-3);
    justify-content: space-between;
  }

  .navbar-brand-img {
    height:    28px;
    max-width: 28px;
  }

  .navbar-brand-text {
    font-size: var(--text-base);
  }

  body.user-logged-in .header-mobile-varolus { display: none; }

  /* header-actions: giriş yapmışken gizle (ikonlar 2. satırda ayrı row'da) */
  body.user-logged-in .header-actions {
    display: none;
  }

  /* Giriş yapmamış — üst satır: logo + Varoluş Kaynağı */
  body:not(.user-logged-in) .header-actions {
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
  }
  body:not(.user-logged-in) .header-actions .header-cta,
  body:not(.user-logged-in) .header-actions .header-auth-signup,
  body:not(.user-logged-in) .header-actions .header-auth-login {
    display: none;
  }
  body:not(.user-logged-in) .header-mobile-varolus {
    display:         flex;
    align-items:     center;
    gap:             4px;
    font-size:       var(--text-sm);
    font-weight:     var(--weight-medium);
    color:           var(--color-accent);
    text-decoration: none;
    white-space:     nowrap;
  }

  /* Giriş yapmamış — 2. satır: Seçenekler | Giriş Yap | Üye Ol */
  body:not(.user-logged-in) .header-mobile-row2--guest {
    display:    block;
    background: var(--color-bg);
    width:      100%;
  }
  .header-mobile-row2--guest {
    display: none;
  }
  .header-mobile-row2--guest .header-mobile-row2__inner {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding:         6px var(--sp-3) 8px;
  }
  .header-mobile-guest-actions {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    flex-shrink:     0;
  }
  .header-mobile-row2--guest .header-hamburger--guest {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-direction:   column;
    gap:              5px;
    width:            38px;
    height:           38px;
    padding:          0;
    background:       var(--color-accent);
    border:           none;
    border-radius:    var(--radius-sm);
    cursor:           pointer;
    flex-shrink:      0;
  }
  .header-mobile-row2--guest .header-hamburger--guest:hover {
    background: var(--color-accent-hover, #1b5e20);
  }
  .header-mobile-row2--guest .header-hamburger--guest .hamburger__line {
    display:       block;
    width:         18px;
    height:        2px;
    background:    #fff;
    border-radius: 2px;
  }
  .header-mobile-row2--guest .header-link--giris {
    font-size:       var(--text-sm);
    font-weight:     var(--weight-medium);
    color:           var(--color-text-muted);
    text-decoration: none;
    white-space:     nowrap;
    padding:         0 2px;
  }
  .header-mobile-row2--guest .header-link--giris:hover,
  .header-mobile-row2--guest .header-link--giris.header-link--active {
    color: var(--color-accent);
  }
  .header-mobile-row2--guest .btn--sm {
    padding:    7px 14px;
    font-size:  var(--text-sm);
    min-height: 38px;
    white-space: nowrap;
  }
  body:not(.user-logged-in) .header-actions .header-hamburger { display: none; }
  body:not(.user-logged-in) .header-icon-btn    { display: none; }
  body:not(.user-logged-in) .header-logout-form { display: none; }

  body.user-logged-in .header-mobile-row2 {
    display:    block;
    background: var(--color-bg);
    width:      100%;
    max-width:  100vw;
    overflow:   hidden;
    box-sizing: border-box;
  }
  .header-mobile-row2__inner {
    display:     flex;
    align-items: center;
    gap:         2px;
    padding:     4px var(--sp-2);
    height:      48px;
    width:       100%;
    box-sizing:  border-box;
    overflow:    hidden;
  }

  /* Yaz butonu: yuvarlak yeşil — en solda */
  body.user-logged-in .header-cta {
    width:           40px;
    height:          40px;
    padding:         0;
    border-radius:   50%;
    justify-content: center;
    flex-shrink:     0;
    gap:             0;
    margin-right:    auto; /* sağdaki her şeyi sağa it */
  }
  body.user-logged-in .header-cta__text { display: none; }
  body.user-logged-in .header-cta svg { width: 18px; height: 18px; }

  /* Hamburger: koyu yeşil kare, 3 beyaz çizgi */
  .header-hamburger {
    display:          flex;
    background:       var(--color-accent);
    border-radius:    var(--radius-sm);
    width:            40px;
    height:           40px;
    flex-shrink:      0;
    align-items:      center;
    justify-content:  center;
    flex-direction:   column;
    gap:              5px;
    border:           none;
    cursor:           pointer;
  }
  .header-hamburger .hamburger__line {
    display:      block;
    width:        20px;
    height:       2px;
    background:   #ffffff;
    border-radius: 2px;
    transition:   all 0.2s ease;
  }

  /* İkon butonları */
  .header-icon-btn {
    width:  38px;
    height: 38px;
  }

  /* Çıkış: sadece ikon */
  .header-link--logout { font-size: 0; padding: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
  .header-link--logout::after {
    content:     '↩';
    font-size:   18px;
    color:       #c62828;
    font-weight: var(--weight-bold);
  }

  /* 3. satır: arama barı */
  body.user-logged-in .header-mobile-row2 + .header-mobile-search { display: block; }
  .header-mobile-search { display: none; }
  body:not(.user-logged-in) .header-mobile-search { display: block; }
  body:not(.user-logged-in) .header-mobile-row2--guest + .header-mobile-search { display: block; }

  /* Kategori satırını mobilde gizle */
  .header-cats { display: none !important; }
}

@media (max-width: 640px) {
  .footer-nav           { grid-template-columns: 1fr; }
  .page-main            { padding: var(--sp-6) 0 var(--sp-12); }
  .navbar-actions .btn  { display: none; }
  .navbar-actions .btn.btn-cta { display: inline-flex; }
}

@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}