/* Bosphorus Blog — site tasarım diliyle ortak stil */
:root{
  --font-display:"Clash Display","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --bg:#F5F3EF;--surface:#FFFFFF;--ink:#101214;
  --muted:rgba(16,18,20,.56);--hairline:rgba(16,18,20,.1);
  --teak:#C1854D;--teak-deep:#8F5F32;--dark:#07080A;
  --ease-lux:cubic-bezier(.32,.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.02em}
a{color:var(--teak-deep)}
.wrap{width:min(760px,calc(100% - 3rem));margin-inline:auto}
.wrap-wide{width:min(1100px,calc(100% - 3rem));margin-inline:auto}

/* ============================================================
   NAV — ana sayfadaki .nav ile aynı bileşen sözleşmesi   (DEM-25)
   kök .bnav · düğme .nav-toggle · panel #navLinks · açık: .acik
   Davranış ortak/menu.js'te (site.css sayfalarıyla TEK dosya).
   Buradaki iş yalnızca görsel: blog açık zeminli, ana sayfa koyu.
   ============================================================ */
.bnav{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--hairline)}
.bnav-in{display:flex;align-items:center;gap:1rem;padding:.9rem 0}
.bnav a{text-decoration:none}
.bnav-brand{display:inline-flex;align-items:center;flex:none;margin-right:auto;font-family:var(--font-display);font-weight:600;color:var(--ink);white-space:nowrap}
.bnav-brand span{color:var(--teak)}
/* Logo beyaz; blog zemini açık olduğu için her zaman ters çevrilir
   (site.css'te bunu body.theme-light yapıyor — blogda tema sınıfı yok). */
.bnav-logo{height:1.4rem;width:auto;display:block;filter:invert(1) brightness(.28);transition:opacity .4s var(--ease-lux)}
.bnav-brand:hover .bnav-logo{opacity:.75}
.bnav-links{display:flex;gap:1.1rem;align-items:center;font-size:.82rem}
.bnav-links a{color:var(--muted);white-space:nowrap}
.bnav-links a:hover{color:var(--ink)}
.bnav-links a[aria-current="page"]{color:var(--teak-deep)}
.bnav .btn{flex:none;white-space:nowrap}
.btn{display:inline-block;border-radius:999px;padding:.6rem 1.3rem;background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;transition:transform .4s var(--ease-lux)}
.btn:active{transform:scale(.97)}
.btn-teak{background:var(--teak-deep);color:#fff}

/* --- hamburger + açılır panel (≤900px) ---
   Panel .bnav'a göre konumlanır: .bnav position:sticky, yani konumlanmış
   bir eleman — mutlak konumlu çocuğun içerme bloğu odur. */
.nav-toggle{display:none}

@media (max-width:900px){
  .bnav-in{gap:.6rem}

  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    flex-direction:column;
    width:2.6rem;height:2.6rem;padding:0;
    border-radius:999px;border:1px solid var(--hairline);
    background:transparent;color:var(--ink);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .4s var(--ease-lux);
  }
  .nav-toggle:focus-visible{outline:2px solid var(--teak);outline-offset:3px}
  .nav-toggle:active{background:rgba(16,18,20,.06)}
  .nav-toggle .nb{
    display:block;width:1.05rem;height:1.5px;border-radius:2px;
    background:currentColor;
    transition:transform .35s var(--ease-lux),opacity .2s linear;
  }
  .nav-toggle .nb + .nb{margin-top:.28rem}
  .bnav.acik .nav-toggle .nb:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
  .bnav.acik .nav-toggle .nb:nth-child(2){opacity:0}
  .bnav.acik .nav-toggle .nb:nth-child(3){transform:translateY(-.38rem) rotate(-45deg)}

  .bnav-links{
    display:block;position:absolute;
    top:calc(100% + .5rem);left:1rem;right:1rem;
    padding:.4rem;border-radius:1.35rem;
    /* .bnav zaten backdrop-filter taşıyor; panelin kendi bulanıklığı
       hiçbir şeyi bulanıklaştırmaz — bu yüzden neredeyse tam opak. */
    background:rgba(252,252,251,.985);
    border:1px solid rgba(16,18,20,.09);
    box-shadow:0 24px 48px -20px rgba(16,18,20,.28);
    max-height:calc(100dvh - 7rem);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .3s var(--ease-lux),transform .3s var(--ease-lux),visibility .3s;
  }
  .bnav.acik .bnav-links{opacity:1;visibility:visible;transform:none}
  .bnav-links a{
    display:block;padding:.9rem 1rem;border-radius:1rem;
    font-size:.95rem;font-weight:500;color:var(--ink);opacity:.85;
  }
  .bnav-links a + a{box-shadow:inset 0 1px 0 rgba(16,18,20,.07)}
  .bnav-links a[aria-current="page"]{color:var(--teak-deep);opacity:1}
  .bnav-links a:focus-visible{outline:2px solid var(--teak);outline-offset:-2px;border-radius:1rem}
}

/* ≤860px'te alt sabit çubuk (.bctabar) zaten "Teklif" veriyor;
   üstteki düğmeyi kaldır, menüye yer aç. */
@media (max-width:860px){
  .bnav-in > .btn{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bnav-links,.nav-toggle,.nav-toggle .nb{transition:none}
}

/* makale başlığı */
.bhero{padding:4.5rem 0 2.5rem}
.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:1.5rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teak-deep)}
.btag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teak-deep);border:1px solid var(--hairline);border-radius:999px;padding:.35rem .9rem;margin-bottom:1.25rem}
.bhero h1{font-size:clamp(2rem,5vw,3.4rem);max-width:20ch}
.bmeta{margin-top:1.25rem;font-size:.82rem;color:var(--muted)}

/* GEO doğrudan cevap kutusu */
.answer{
  margin:2.5rem 0;padding:1.5rem 1.75rem;border-radius:1.25rem;
  background:var(--surface);border:1px solid var(--hairline);
  box-shadow:0 24px 48px -32px rgba(16,18,20,.18);
}
.answer .alabel{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teak-deep);margin-bottom:.6rem}
.answer p{font-size:1.02rem;font-weight:500}

/* gövde */
.article{padding-bottom:3rem}
.article h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.75rem 0 1rem}
.article h3{font-size:1.2rem;margin:2rem 0 .75rem}
.article p{margin:1rem 0;color:rgba(16,18,20,.78)}
.article ul,.article ol{margin:1rem 0 1rem 1.4rem;color:rgba(16,18,20,.78)}
.article li{margin:.45rem 0}
.article strong{color:var(--ink)}
.article img{max-width:100%;border-radius:1.25rem;margin:1.5rem 0}
.article table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem;background:var(--surface);border-radius:1rem;overflow:hidden}
.article th,.article td{padding:.8rem 1rem;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.article th{font-family:var(--font-display);font-weight:500;background:rgba(16,18,20,.03)}
.tablewrap{overflow-x:auto}

/* SSS */
.bfaq{margin:2.5rem 0;border-top:1px solid var(--hairline)}
.bfaq details{border-bottom:1px solid var(--hairline);padding:1.1rem 0}
.bfaq summary{cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.bfaq summary::-webkit-details-marker{display:none}
.bfaq summary::after{content:"+";color:var(--teak-deep);font-size:1.2rem;transition:transform .4s var(--ease-lux)}
.bfaq details[open] summary::after{transform:rotate(45deg)}
.bfaq details p{margin-top:.6rem;color:rgba(16,18,20,.7);max-width:65ch}

/* CTA kutusu */
.bcta{
  margin:3rem 0;padding:2rem;border-radius:1.5rem;color:#F4F2EE;
  background:radial-gradient(120% 140% at 85% 0%,#1a1d22 0%,var(--dark) 60%);
  border:1px solid rgba(193,133,77,.3);
}
.bcta h2{margin:0 0 .5rem;font-size:1.5rem}
.bcta p{color:rgba(244,242,238,.75);margin:0 0 1.25rem;max-width:52ch}

/* liste sayfası kartları */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin:2.5rem 0 4rem}
.bcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:1.25rem;padding:1.6rem;text-decoration:none;color:inherit;transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux)}
.bcard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(16,18,20,.25)}
.bcard .bkind{font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teak-deep)}
.bcard h3{margin:.6rem 0 .5rem;font-size:1.15rem}
.bcard p{font-size:.88rem;color:var(--muted);flex:1}
.bcard .more{margin-top:1rem;font-size:.82rem;font-weight:600;color:var(--teak-deep)}

footer{border-top:1px solid var(--hairline);padding:2rem 0 3rem;font-size:.8rem;color:var(--muted)}

/* ============================================================
   DÖNÜŞÜM KATMANI (DEM-7)
   Yazı içi mini form + zenginleştirilmiş yazı sonu CTA +
   mobil sabit çubuk. 60 yazının tamamına scripts/blog-donusum.mjs
   ile basıldı; elle tek tek düzenlenmez — şablonu orada değiştir.
   ============================================================ */

/* --- yazı içi mini form --- */
.bform{
  margin:3rem 0;padding:1.75rem;border-radius:1.5rem;
  background:var(--surface);border:1px solid var(--hairline);
  box-shadow:0 24px 48px -32px rgba(16,18,20,.2);
  scroll-margin-top:5rem;
}
.bform-etiket{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teak-deep);margin:0 0 .6rem}
.bform h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:0 0 .5rem}
.bform-lede{font-size:.92rem;color:var(--muted);margin:0 0 1.25rem;max-width:52ch}
.bform-alan{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end}
.bform-satir{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.bform-satir span{font-size:.75rem;font-weight:600;color:var(--muted)}
.bform-satir input{
  font:inherit;font-size:.95rem;width:100%;padding:.75rem .9rem;
  border:1px solid var(--hairline);border-radius:.75rem;
  background:var(--bg);color:var(--ink);
}
.bform-satir input:focus-visible{outline:2px solid var(--teak);outline-offset:1px}
.bform-alan button{border:0;cursor:pointer;font-family:inherit;padding:.8rem 1.5rem;white-space:nowrap}
.bform-alan button[disabled]{opacity:.6;cursor:progress}
.bform-tuzak{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.bform-kvkk{font-size:.72rem;color:var(--muted);margin:.9rem 0 0;line-height:1.6}
.bform-ok,.bform-hata{display:none;margin-top:1rem}
.bform.bitti .bform-alan,.bform.bitti .bform-kvkk,.bform.bitti .bform-lede{display:none}
.bform.bitti .bform-ok{display:block}
.bform-ok p{margin:.35rem 0;font-size:.95rem}
.bform-hata{
  display:block;padding:1rem 1.1rem;border-radius:.9rem;
  background:rgba(193,133,77,.1);border:1px solid rgba(193,133,77,.35);
}
.bform-hata p{margin:0 0 .75rem;font-size:.88rem}
.bform-hata .alt{margin:.75rem 0 0;font-size:.8rem;color:var(--muted)}

@media (max-width:640px){
  .bform-alan{grid-template-columns:1fr}
  .bform-alan button{width:100%}
}

/* --- yazı sonu CTA: eylem satırı --- */
.bcta-eylem{display:flex;flex-wrap:wrap;gap:.6rem}
.bcta-eylem .btn{border:1px solid transparent}
.btn-hat{background:transparent;color:#F4F2EE;border-color:rgba(244,242,238,.35)}
.btn-wa{background:#1FA855;color:#fff}
.bcta-eylem .btn-hat:hover{border-color:rgba(244,242,238,.7)}

/* --- mobil sabit CTA çubuğu --- */
.bctabar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -12px 32px -20px rgba(16,18,20,.5);
}
.bctabar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:.7rem .4rem;background:var(--surface);color:var(--ink);
  font-size:.72rem;font-weight:600;text-decoration:none;
}
.bctabar a svg{width:19px;height:19px}
.bctabar .bctabar-wa{background:#1FA855;color:#fff}
.bctabar .bctabar-tk{background:var(--teak-deep);color:#fff}

/* masaüstünde çubuk yerine WhatsApp düğmesi */
.bfab{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1FA855;color:#fff;text-decoration:none;
  box-shadow:0 16px 32px -14px rgba(16,18,20,.55);
  transition:transform .4s var(--ease-lux);
}
.bfab:hover{transform:translateY(-2px)}
.bfab svg{width:27px;height:27px}

@media (max-width:860px){
  .bctabar{display:grid}
  .bfab{display:none}
  body{padding-bottom:4.6rem}
}