/*
 * sezer.in site başlığı — tek satır, kompakt (tüm ön yüz sayfaları).
 *
 * Tema şablonuna dokunmadan themes/reco/partials/header.php DOM'unu yeniden dizer:
 *   masaüstü : logo, menü, arama, sosyal (72 px, yapışkanda 60 px)
 *   tablet/mobil : menü düğmesi, ortada logo, arama (60 px)
 *
 * sezerin-design.css başlığı iki satırlı grid olarak kuruyor (min-width:1024px);
 * bu dosya onun ARKASINDAN basılır (sezerin-fixes.php, wp_head 199) ve aynı
 * seçicileri düz flex satırına çevirir. Yeni token tanımlanmaz.
 */

#header{--szb-yukseklik:72px}

/* Logo 608x125; öznitelikler 250x50 olduğu için oran elle korunur. */
#header div.menu-wrapper .logo a img{width:175px !important;height:36px !important;max-width:none;margin:0}
#header div.menu-wrapper .logo a{display:block;line-height:0}

/* Temanın clearfix yalancı öğeleri flex satırında boş kutu oluşturmasın. */
#header div.menu-wrapper .grid-container::before,
#header div.menu-wrapper .grid-container::after{display:none}

/* ---------- Masaüstü ---------- */
@media screen and (min-width:1024px){
  #header div.menu-wrapper{padding:0 !important}

  #header div.menu-wrapper .grid-container,
  #header.is-sticky div.menu-wrapper .grid-container{
    display:flex;align-items:center;gap:20px;height:var(--szb-yukseklik);
    grid-template-columns:none;grid-template-areas:none;row-gap:0;
  }
  #header div.menu-wrapper .grid-container>.clear,
  #header div.menu-wrapper .grid-container>.border{display:none}

  #header div.menu-wrapper .logo,
  #header.is-sticky div.menu-wrapper .logo{
    order:1;flex:0 0 auto;float:none;margin:0;padding:0;max-width:none;
    justify-self:auto;text-align:left;
  }

  #header nav.main-nav,
  #header.is-sticky nav.main-nav{
    order:2;flex:1 1 auto;min-width:0;width:auto;float:none;height:auto;
    justify-self:auto;text-align:left;
  }
  #header nav ul.menu,
  #header.is-sticky nav ul.menu{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:2px;
  }
  #header nav ul.menu>li,
  #header.is-sticky nav ul.menu>li{padding:0;margin:0}
  #header nav ul.menu>li>a,
  #header.is-sticky nav ul.menu>li>a{
    padding:8px 10px;font-size:14.5px;line-height:1.4;letter-spacing:0;white-space:nowrap;
  }

  /* Alt menü, satırın hemen altından açılsın; 8 px boşlukta hover kopmasın. */
  #header nav ul.menu>li.menu-item-has-children::before{
    content:"";position:absolute;left:0;right:0;top:100%;height:12px;
  }

  /* Arama düğmesi menünün son öğesi: sağa yaslı, sosyal ikonların yanında. */
  #header nav ul.menu>li.hide-on-mobile.hide-on-tablet{margin-left:auto}
  #header nav ul.menu>li.hide-on-mobile.hide-on-tablet>a{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;font-size:16px;
  }

  #header .share-buttons{
    order:3;flex:0 0 auto;float:none;margin:0;padding:0 0 0 12px;
    display:flex;align-items:center;gap:0;
    border-left:1px solid var(--sz-h-hairline);
    justify-self:auto;
  }
  #header .share-buttons a{width:34px;height:34px;margin:0;font-size:15px}

  #header.is-sticky{--szb-yukseklik:60px}
  #header.is-sticky div.menu-wrapper{padding:0 !important}
  #header.is-sticky div.menu-wrapper .logo a img{width:156px !important;height:32px !important}
}

/* Dar masaüstünde sosyal ikonlar menüye yer açar; bağlantılar altbilgide de var. */
@media screen and (min-width:1024px) and (max-width:1179px){
  #header .share-buttons{display:none}
  #header nav ul.menu>li>a,
  #header.is-sticky nav ul.menu>li>a{padding:8px;font-size:14px}
}

/* ---------- Tablet ve mobil ---------- */
@media screen and (max-width:1023px){
  #header{--szb-yukseklik:60px}

  #header div.menu-wrapper{padding:0 !important}
  #header div.menu-wrapper .grid-container{
    position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
    height:var(--szb-yukseklik);gap:0;padding-top:0;padding-bottom:0;
  }
  #header div.menu-wrapper .grid-container>.clear{display:none}

  #header div.menu-wrapper .logo,
  #header.is-sticky div.menu-wrapper .logo{float:none;margin:0 auto;padding:0;max-width:none}
  #header div.menu-wrapper .logo a img{width:156px !important;height:32px !important}

  /* Menü düğmesi ve arama: logoyla aynı eksende, 44 px hedef. */
  #header div.menu-wrapper .menu-mobile{
    position:absolute;left:inherit;top:50%;margin:0;
    transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
  }
  #header div.menu-wrapper .menu-mobile::after{inset:0}
  #header div.menu-wrapper .menu-mobile{left:12px}

  #header a.epcl-search-button{
    position:absolute;right:12px;left:auto;top:50%;margin:0;
    transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;font-size:18px;
  }
  #header a.epcl-search-button::after{inset:0}

  /* Açılır panel: düğüm değil, alt alta net bir liste. */
  #header nav.main-nav{
    left:12px;right:12px;width:auto;top:var(--szb-yukseklik);margin:0;
  }
  #header nav ul.menu{display:block}
  #header nav ul.menu>li{display:block;width:100%;margin:0;padding:0}
  #header nav ul.menu>li>a{display:flex;align-items:center;min-height:44px;padding:10px 12px;font-size:15px;line-height:1.4;text-align:left}
  #header nav ul.menu ul.sub-menu{padding:0 0 4px 12px}
  #header nav ul.menu ul.sub-menu li>a{display:flex;align-items:center;min-height:44px;padding:8px 12px;font-size:14px;line-height:1.4;white-space:normal}
}

@media screen and (max-width:767px){
  #header div.menu-wrapper .grid-container{padding-left:16px;padding-right:16px}
  #header div.menu-wrapper .menu-mobile{left:6px}
  #header a.epcl-search-button{right:6px}
  #header nav.main-nav{left:8px;right:8px}
}

/* ---------- Footer: tek renk, tam genişlik ----------
   .sz-sub tam genişlikti, #footer .widgets ise 1200 px'lik orta kutuydu; yeşilimsi
   zemin kenarlarda bitip sayfa rengine dönüyordu. İkisi aynı nötr yüzeyde birleşir.
   `#wrapper >` seçicisi haber kenar çubuğundaki abonelik formuna dokunmaz. */
#wrapper > .sz-sub{border-top:1px solid var(--sz-border);border-radius:0;background:var(--sz-surface)}
#footer{width:100%;max-width:none;margin:0;padding-left:0;padding-right:0;background:var(--sz-surface)}
#footer .widgets{max-width:1200px;margin-left:auto;margin-right:auto;border-radius:0;background:transparent}

/* ---------- Yazı sonu: "Bu konuda devam et" ---------- */
.sz-devam{margin:40px 0 8px;padding:0}
.sz-devam__bas{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sz-devam .sz-devam__baslik{margin:0;padding:0;color:var(--sz-text);font-family:var(--sz-font-head);font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-transform:none}
.sz-devam .sz-devam__tum{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--sz-border);border-radius:999px;color:var(--sz-text);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.sz-devam .sz-devam__tum:hover{border-color:var(--sz-accent-strong);color:var(--sz-accent-text)}
.sz-devam__izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sz-devam__kart{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sz-border-subtle);border-radius:12px;background:var(--sz-surface);transition:border-color 160ms ease,transform 160ms ease}
.sz-devam__kart:hover{border-color:var(--sz-border-strong);transform:translateY(-2px)}
.sz-devam__kart:focus-within{border-color:var(--sz-accent-strong)}
.sz-devam__gorsel{aspect-ratio:16/9;overflow:hidden;background:var(--sz-surface-2)}
.sz-devam__gorsel img{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover}
.sz-devam__govde{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px}
.sz-devam__konu{color:var(--sz-accent-text);font-size:13px;font-weight:500;line-height:1.3}
.sz-devam .sz-devam__kart-baslik{margin:0;padding:0;font-family:var(--sz-font-head);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:0;text-align:left;text-transform:none}
.sz-devam .sz-devam__kart-baslik a{color:var(--sz-text);text-decoration:none}
.sz-devam .sz-devam__kart-baslik a::after{content:"";position:absolute;inset:0;z-index:1}
.sz-devam .sz-devam__kart:hover .sz-devam__kart-baslik a{color:var(--sz-accent-text)}
.sz-devam__tarih{margin-top:auto;padding-top:4px;color:var(--sz-text-subtle);font-size:13px;text-transform:none}
@media (max-width:767px){
  .sz-devam__izgara{grid-template-columns:minmax(0,1fr);gap:10px}
  .sz-devam__kart{flex-direction:row}
  .sz-devam__gorsel{flex:0 0 118px;aspect-ratio:auto;min-height:104px}
  .sz-devam__govde{min-width:0;padding:10px 12px}
  .sz-devam .sz-devam__kart-baslik{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .sz-devam__kart{transition:none}
  .sz-devam__kart:hover{transform:none}
}

/* ---------- Üst menü: oksuz öğeler de aynı aralıkta ----------
   Tema yalnız açılır menülü öğelere 10 px sağ boşluk veriyor; "Araçlar" gibi oksuz
   öğeler bir sonrakine yapışıyordu. */
@media screen and (min-width:1024px){
  #header nav ul.menu>li.menu-item.menu-item,
  #header.is-sticky nav ul.menu>li.menu-item.menu-item{margin-right:10px}
}

/* ---------- Footer: üst bant ve sütunlar aynı ızgarada ---------- */
@media (min-width:768px){
  #footer .widgets{box-sizing:content-box;max-width:1200px;padding-left:20px;padding-right:20px}
  #footer .widgets .default-sidebar.border-effect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;flex-wrap:nowrap}
  #footer .widgets .default-sidebar>[class*="grid-"]{float:none;flex:none;width:auto;min-width:0;max-width:none;margin:0;padding:0}
  #footer .widgets .default-sidebar .widget{display:block;width:auto}
}

/* ---------- Yazı sonu önceki/sonraki kartlar ----------
   Tema kartları içeriğin dışına taşırıyordu (-60 px) ve görsel katmanı kart kenarına
   oturuyordu; parlak görselde köşede beyaz çizgi kalıyordu. */
@media (min-width:768px){
  #single .left-content section.related{margin-left:0;margin-right:0}
}
#single section.related article .thumb{top:1px;right:1px;bottom:1px;left:1px;width:auto;height:auto;border-radius:17px}
