/* css/blog.css — blog bolumunun KENDI tasarimi (23.09.2026)
 *
 * Ahmet: "blog tasarimi komple farkli olacak; ana sayfadaki tasarim eski,
 * oturmus diye bozmadim; blog UniConnectly web sitesi gibi modern olacak."
 *
 * Bu yuzden blog sayfalari ana temanin (Edumy) hicbir varligini yuklemez:
 * Bootstrap yok, jQuery yok, tema betikleri yok, style-az.css yok. Sayfa
 * bu tek dosya + iki yazi tipi ile ayakta. Olculen sonuc: blog sayfasi
 * ~60 KB, ana sayfa 602 KB.
 *
 * Tipografi UniConnectly ile ayni ikili: Outfit (baslik) + Inter (govde),
 * kendi sunucumuzda ve YALNIZ Turkce karakterlerle alt kumelenmis (52 KB).
 *
 * EV KURALI: dekoratif gradyan, parilti/glow ve yildiz ikonu YOK. Derinlik
 * kenarlik ve cok hafif golgeyle verilir.
 */

:root {
  /* Palet KAPAK GORSELLERINDEN olculdu (blog-gorselleri/01-*.png):
     canli mavi #1860f0, lacivert #0d2560, acik mavi doku #c8e0f8.
     Blog kapaklariyla sayfa ayni marka dilinde dursun. */
  --mor: #1860f0;
  --mor-koyu: #1250d0;
  --mor-acik: #eaf1fe;
  --murekkep: #0d2560;
  --govde: #334155;
  --soluk: #64748b;
  --cizgi: #e2e8f0;
  --cizgi-acik: #f1f5f9;
  --zemin: #f8fafc;
  --yuzey: #ffffff;
  --golge: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --r: 14px;
  --r-kucuk: 10px;
  --en: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--govde);
  font: 400 17px/1.75 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--mor); text-decoration: none; }
a:hover { color: var(--mor-koyu); }
h1, h2, h3, h4 {
  font-family: Outfit, Inter, -apple-system, sans-serif;
  color: var(--murekkep);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}
.kap { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 20px; }

/* ── ust serit ─────────────────────────────────────────────────────── */
.bs-ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.bs-ust .kap { display: flex; align-items: center; gap: 22px; height: 64px; }
/* Marka kilidi KAPAKLARDAKI yatay duzen: solda resmi AÇ monogrami
   (blog-logo.png'den kirpildi, yeniden cizilmedi), yaninda lacivert ad ve
   altinda kisa mavi cizgi. Kare logo bu seritte okunmuyordu. */
.bs-logo { display: flex; align-items: center; gap: 9px; font-family: Outfit, sans-serif;
  font-weight: 700; font-size: 17.5px; color: var(--murekkep); letter-spacing: -.02em; }
.bs-logo img { width: 34px; height: 26px; }
.bs-logo span { position: relative; padding-bottom: 4px; }
.bs-logo span::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: var(--mor); border-radius: 2px;
}
.bs-alt-logo { width: 80px; height: auto; margin-bottom: 10px; }
.bs-menu { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.bs-menu a {
  padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--soluk);
}
.bs-menu a:hover { background: var(--cizgi-acik); color: var(--murekkep); }
.bs-menu a.etkin { color: var(--mor); background: var(--mor-acik); }
.bs-ara {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 6px;
  padding: 8px 14px; border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--yuzey); color: var(--soluk); font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.bs-ara:hover { border-color: #cbd5e1; color: var(--murekkep); }
.bs-ara kbd {
  border: 1px solid var(--cizgi); border-radius: 5px; padding: 0 5px;
  font: 500 11px/1.6 Inter, monospace; color: var(--soluk); background: var(--zemin);
}
@media (max-width: 860px) {
  .bs-menu a { display: none; }
  .bs-menu a.hep { display: inline-block; }
  .bs-ara kbd { display: none; }
}

/* okuma ilerleme cubugu */
.bs-ilerleme {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--mor); z-index: 50; transition: width .08s linear;
}

/* ── hub ───────────────────────────────────────────────────────────── */
/* Yan bosluk 20px: `.kap` ile ayni ogede; `0` yazilinca kapin yan boslugu
   eziliyordu (25.09, Ahmet: "dengesiz yerlesme"). Baslik suzgecten ve
   kartlardan 20px solda duruyor, 1180px altinda kenara yapisiyordu. */
.bs-hero { padding: 54px 20px 30px; }
.bs-hero h1 { font-size: 42px; font-weight: 700; margin-bottom: 12px; }
.bs-hero p { font-size: 18.5px; color: var(--soluk); max-width: 640px; margin: 0; }
.bs-suzgec { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 28px; }
.bs-suzgec button {
  --kat: var(--murekkep);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px 7px 12px; border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--yuzey); color: var(--soluk); font: 600 14px Inter, sans-serif; cursor: pointer;
}
.bs-suzgec button:hover { border-color: color-mix(in srgb, var(--kat) 40%, #fff); color: var(--kat); }
.bs-suzgec button[aria-pressed="true"] { background: var(--kat); border-color: var(--kat); color: #fff; }
.bs-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; padding-bottom: 60px; }
.bs-kart {
  --kat: var(--mor);
  position: relative; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 24px; box-shadow: var(--golge); display: flex; flex-direction: column;
}
.bs-kart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kat);
}
.bs-kart:hover { border-color: color-mix(in srgb, var(--kat) 35%, var(--cizgi)); }
.bs-kart h2 { font-size: 20px; font-weight: 600; margin: 10px 0 8px; }
.bs-kart h2 a { color: var(--murekkep); }
.bs-kart h2 a:hover { color: var(--mor); }
.bs-kart p { font-size: 15px; color: var(--soluk); margin: 0 0 16px; line-height: 1.65; }
.bs-kart .bs-kunye { margin-top: auto; }
/* Kart kapaklari (23.09): gorsel ustte, 16:9; ilk kart genis ekranda
   yatay "one cikan". Kategori rengi rozette; ustteki renk seridi gorselle
   cakistigi icin kaldirildi. Hover'da yalniz hafif buyume (parilti yok). */
.bs-kart { padding: 0; }
.bs-kart::before { display: none; }
.bs-kart-ic { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.bs-kart .bs-etiket { align-self: flex-start; }
.bs-kart h2 { margin-top: 12px; }
.bs-kart-gorsel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cizgi-acik); line-height: 0; }
.bs-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bs-kart:hover .bs-kart-gorsel img { transform: scale(1.03); }
@media (min-width: 900px) {
  .bs-kart-one { grid-column: 1 / -1; flex-direction: row; }
  .bs-kart-one .bs-kart-gorsel { flex: 0 0 56%; aspect-ratio: auto; min-height: 320px; }
  .bs-kart-one .bs-kart-ic { justify-content: center; padding: 30px 34px; }
  .bs-kart-one h2 { font-size: 27px; }
  .bs-kart-one p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bs-kart-gorsel img { transition: none; } }
/* Kategori rozeti. Renk satir ici `--kat` degiskeninden gelir; kategori
   basina ayri CSS kurali yazilmiyor, tek kural her renge uyuyor.
   color-mix ile ayni renkten cok acik bir zemin uretiliyor. */
.bs-etiket {
  --kat: var(--mor);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--kat) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--kat) 20%, #fff);
  color: var(--kat); font-size: 12.5px; font-weight: 600;
}
.bs-etiket-mini { padding: 2px 9px 2px 7px; font-size: 11.5px; margin-bottom: 8px; }
.bs-ikon { width: 16px; height: 16px; flex: none; }
.bs-etiket .bs-ikon { width: 15px; height: 15px; }
.bs-rozet {
  display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 6px;
  background: var(--cizgi-acik); color: var(--soluk); font-size: 12px; font-weight: 500;
}
.bs-kunye { font-size: 13.5px; color: var(--soluk); }
.bs-bos { color: var(--soluk); padding: 0 0 60px; }

/* ── yazi ──────────────────────────────────────────────────────────── */
.bs-yazi-ust { padding: 38px 0 0; }
.bs-kirinti { font-size: 13.5px; color: var(--soluk); margin-bottom: 18px; }
.bs-kirinti a { color: var(--soluk); }
.bs-kirinti a:hover { color: var(--mor); }
.bs-duzen { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 70px; }
@media (min-width: 1060px) {
  .bs-duzen { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.bs-icerik { min-width: 0; max-width: 720px; }
.bs-baslik { font-size: 37px; font-weight: 700; margin-bottom: 14px; }
/* 23.09: giris paragrafi 19,5 px'ten 18 px'e indi; govdeden (17 px)
   ayrilsin ama one firlamasin. */
.bs-ozet { font-size: 18px; line-height: 1.72; color: #475569; margin: 18px 0 26px; }
.bs-ayrac { border: 0; border-top: 1px solid var(--cizgi); margin: 0 0 30px; }

.bs-icerik h2 {
  font-size: 27px; font-weight: 600; margin: 46px 0 14px; scroll-margin-top: 84px;
}
.bs-h2-ikon { display: flex; align-items: center; gap: 10px; }
.bs-h2-ikon .bs-ikon { width: 22px; height: 22px; color: var(--mor); flex: none; }
.bs-icerik h3 { font-size: 20.5px; font-weight: 600; margin: 30px 0 10px; scroll-margin-top: 84px; }
.bs-icerik p { margin: 0 0 16px; }
.bs-icerik ul, .bs-icerik ol { margin: 0 0 18px; padding-left: 24px; }
.bs-icerik li { margin-bottom: 7px; }
.bs-icerik strong { color: var(--murekkep); font-weight: 600; }
.bs-icerik a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* icindekiler: genis ekranda yanda yapisik, darda ustte kutu */
.bs-yan { position: sticky; top: 84px; }
.bs-toc { font-size: 14px; }
.bs-toc p { font-family: Outfit, sans-serif; font-weight: 600; color: var(--murekkep);
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.bs-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--cizgi); }
.bs-toc li { margin: 0; }
.bs-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--soluk); line-height: 1.45; }
.bs-toc a:hover { color: var(--murekkep); }
.bs-toc a.etkin { color: var(--mor); border-left-color: var(--mor); font-weight: 500; }
@media (max-width: 1059px) {
  .bs-yan { position: static; }
  .bs-toc { background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r); padding: 18px 20px; }
  .bs-toc ol { border-left: 0; }
  .bs-toc a { padding-left: 0; border-left: 0; }
}

/* kutular */
.bs-hap, .bs-dikkat, .bs-ornek, .bs-onkosul, .bs-sinavda {
  border-radius: var(--r-kucuk); padding: 18px 20px; margin: 22px 0;
  border: 1px solid var(--cizgi); background: var(--yuzey);
}
.bs-hap { border-left: 3px solid var(--mor); background: var(--mor-acik); border-color: #e0e7ff; }
.bs-dikkat { border-left: 3px solid #d97706; background: #fffbeb; border-color: #fde68a; }
.bs-ornek { border-left: 3px solid #0f766e; background: #f0fdfa; border-color: #99f6e4; }
/* 23.09 (Ahmet): onkosul rengi degisti. Gri, kutuyu duz metinden
   ayirmiyordu. Mor: diger dort kutunun (mavi hap, amber dikkat, teal
   ornek, lacivert sinav) hicbiriyle karismiyor. */
.bs-onkosul { border-left: 3px solid #7c3aed; background: #f5f3ff; border-color: #e4dcfd; }
.bs-sinavda { border-left: 3px solid #0d2560; background: #f5f8ff; border-color: #dbe6fb; }
.bs-onkosul b { color: #6d28d9; }
.bs-sinavda b { color: #0d2560; }
.bs-onkosul p:last-child, .bs-sinavda p:last-child { margin-bottom: 0; }
.bs-hap b, .bs-dikkat b, .bs-ornek b, .bs-onkosul b, .bs-sinavda b {
  display: flex; align-items: center; gap: 7px; font-family: Outfit, sans-serif; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px;
}
.bs-hap b { color: var(--mor-koyu); }
.bs-dikkat b { color: #b45309; }
.bs-ornek b { color: #0f766e; }
.bs-hap p:last-child, .bs-dikkat p:last-child, .bs-ornek p:last-child { margin-bottom: 0; }

/* formul */
math.mtml { font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", serif; font-size: 1.08em; }
.mtml-blok {
  margin: 20px 0; padding: 16px 18px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  text-align: center; overflow-x: auto;
}
.mtml-blok math { font-size: 1.22em; }

/* tablo */
.bs-tablo { overflow-x: auto; margin: 22px 0; }
.bs-tablo table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--yuzey); }
.bs-tablo th, .bs-tablo td { border: 1px solid var(--cizgi); padding: 10px 14px; text-align: left; vertical-align: top; }
.bs-tablo th { background: var(--cizgi-acik); font-weight: 600; color: var(--murekkep); font-size: 14px; }

/* grafik (25.09): satir ici SVG, scripts/blog_ogeler.py sutun/cizgi/daire_grafik */
.bs-grafik { margin: 22px 0; padding: 16px 12px 12px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); }
.bs-grafik svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.bs-grafik text { fill: var(--soluk); font: 500 14px Inter, system-ui, sans-serif; }
.bs-grafik .g-deger { fill: var(--murekkep); font-weight: 700; }
.bs-grafik .g-izgara { stroke: var(--cizgi); stroke-width: 1; }
.bs-grafik .g-eksen { stroke: var(--soluk); stroke-width: 1.5; }
.bs-grafik .g-sutun { fill: var(--mor); }
.bs-grafik .g-cizgi { fill: none; stroke: var(--mor); stroke-width: 3; stroke-linejoin: round; }
.bs-grafik .g-nokta { fill: var(--yuzey); stroke: var(--mor); stroke-width: 3; }
.bs-grafik .g-dilim { stroke: var(--yuzey); stroke-width: 2; }
.bs-grafik figcaption { margin-top: 8px; text-align: center; font-size: 14px; color: var(--soluk); }
.bs-grafik .g-kucuk { font-size: 12px; paint-order: stroke; stroke: var(--yuzey); stroke-width: 3px; }
.bs-grafik .g-egri { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.bs-grafik .g-nokta-dolu { fill: var(--murekkep); }
.bs-grafik .g-lejant-zemin { fill: var(--yuzey); opacity: .9; stroke: var(--cizgi); }
.bs-grafik .g-yardimci { stroke: var(--soluk); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bs-grafik .g-lejant { fill: var(--murekkep); font-weight: 600; paint-order: stroke; stroke: var(--yuzey); stroke-width: 4px; }

/* sss */
.bs-sss details {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  padding: 15px 18px; margin-bottom: 9px;
}
.bs-sss summary {
  cursor: pointer; font-weight: 600; color: var(--murekkep); font-size: 16.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.bs-sss summary::-webkit-details-marker { display: none; }
.bs-sss summary::after { content: "+"; color: var(--soluk); font-weight: 400; font-size: 20px; line-height: 1; }
.bs-sss details[open] summary::after { content: "\2212"; }
.bs-sss details p { margin: 11px 0 0; }

/* ── tiklanabilir kontrol listesi ──────────────────────────────────────
   Ahmet: "kontrol listesi tiklanabilir checklist gibi olsun."
   Isaretler js/blog.js ile tarayicida saklanir; sunucuya veri gitmez.
   JS calismazsa liste yine okunur: kutular islevsiz kalir, maddeler durur. */
.bs-kontrol-sar {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 18px 20px 8px;
}
.bs-kontrol-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bs-kontrol-durum { font-size: 14px; color: var(--soluk); margin: 0; }
.bs-kontrol-durum strong { color: var(--mor); font-size: 16px; }
.bs-kontrol-sifirla {
  border: 1px solid var(--cizgi); background: var(--zemin); color: var(--soluk);
  border-radius: 8px; padding: 5px 12px; font: 500 13px Inter, sans-serif; cursor: pointer;
}
.bs-kontrol-sifirla:hover { color: var(--murekkep); border-color: #cbd5e1; }
.bs-kontrol-cubuk {
  height: 5px; border-radius: 3px; background: var(--cizgi-acik); margin: 12px 0 4px; overflow: hidden;
}
.bs-kontrol-cubuk span {
  display: block; height: 100%; background: var(--mor); border-radius: 3px;
  transition: width .18s ease;
}
.bs-kontrol { list-style: none !important; padding-left: 0 !important; margin: 0; }
.bs-kontrol li { margin: 0; border-top: 1px solid var(--cizgi-acik); }
.bs-kontrol li:first-child { border-top: 0; }
.bs-kontrol label {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; cursor: pointer;
}
.bs-kontrol input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 21px; height: 21px; margin: 1px 0 0; border: 1.8px solid #cbd5e1;
  border-radius: 6px; background: #fff; cursor: pointer; position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.bs-kontrol input:hover { border-color: var(--mor); }
.bs-kontrol input:focus-visible { outline: 2px solid var(--mor); outline-offset: 2px; }
.bs-kontrol input:checked { background: var(--mor); border-color: var(--mor); }
.bs-kontrol input:checked::after {
  content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(42deg);
}
.bs-kontrol .bs-madde { font-size: 16px; line-height: 1.55; }
.bs-kontrol input:checked ~ .bs-madde { color: var(--soluk); text-decoration: line-through; }
.bs-kontrol .bs-kutu { display: none; }
/* Hepsi isaretlenince kutu kenarligi yesile doner: kucuk ama gorunur
   bir tamamlandi sinyali. */
.bs-kontrol-sar.bs-bitti { border-color: #86efac; background: #f6fef9; }
.bs-kontrol-sar.bs-bitti .bs-kontrol-cubuk span { background: #16a34a; }
.bs-kontrol-sar.bs-bitti .bs-kontrol-durum strong { color: #16a34a; }

/* kaynaklar + ilgili */
.bs-kaynaklar { font-size: 15px; }
.bs-kaynaklar li { margin-bottom: 8px; }
.bs-ilgili { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.bs-ilgili a {
  display: block; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk); padding: 16px 18px; text-decoration: none;
}
.bs-ilgili a:hover { border-color: var(--mor); }
.bs-ilgili a { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bs-ilgili-gorsel { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cizgi-acik); margin: 0; border-radius: 0; }
.bs-ilgili-ic { padding: 14px 16px 16px; }
.bs-ilgili .bs-etiket { margin-bottom: 8px; display: inline-flex; }
.bs-ilgili strong { display: block; color: var(--murekkep); font-size: 15.5px; line-height: 1.4; margin-bottom: 5px; font-weight: 600; }
.bs-ilgili span { display: block; color: var(--soluk); font-size: 13.5px; line-height: 1.55; }

/* ── alt bilgi ─────────────────────────────────────────────────────── */
.bs-alt { border-top: 1px solid var(--cizgi); background: var(--yuzey); padding: 38px 0; }
.bs-alt .kap { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
.bs-alt p { font-size: 14px; color: var(--soluk); margin: 0; }
.bs-alt nav { display: flex; flex-wrap: wrap; gap: 18px; }
.bs-alt nav a { font-size: 14px; color: var(--soluk); }
.bs-alt nav a:hover { color: var(--mor); }

/* ── arama katmani (js/arama.js ile ORTAK; burada modern deri) ─────── */
.mk-fullscreen-search-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .55);
  opacity: 0; visibility: hidden; transition: opacity .16s ease;
  backdrop-filter: blur(3px); padding: 0 16px;
}
.mk-fullscreen-search-overlay.mk-fullscreen-search-overlay-show { opacity: 1; visibility: visible; }
#mk-fullscreen-search-wrapper { width: min(640px, 100%); margin: 12vh auto 0; }
#mk-fullscreen-searchform { position: relative; }
#mk-fullscreen-search-input {
  width: 100%; padding: 17px 20px; font: 400 17px Inter, sans-serif; color: var(--murekkep);
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px;
}
#mk-fullscreen-search-input:focus { outline: 2px solid var(--mor); outline-offset: 1px; }
#mk-fullscreen-searchform .fullscreen-search-icon { display: none; }
.mk-fullscreen-close {
  position: absolute; top: 18px; right: 20px; color: #fff; font-size: 15px;
}
.arama-kutu { margin-top: 12px; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.arama-bilgi { color: #e2e8f0; font-size: 13.5px; margin: 10px 2px; }
ul.arama-sonuc { list-style: none; margin: 0; padding: 0; }
ul.arama-sonuc li { margin-bottom: 7px; }
ul.arama-sonuc li a {
  display: block; background: var(--yuzey); border: 1px solid transparent;
  border-radius: var(--r-kucuk); padding: 12px 15px; text-decoration: none;
}
ul.arama-sonuc li a:hover, ul.arama-sonuc li[aria-selected="true"] a { border-color: var(--mor); }
.arama-baslik { display: block; color: var(--murekkep); font-size: 15px; font-weight: 600; line-height: 1.35; }
.arama-dis { color: var(--soluk); font-weight: 400; }
.arama-tur { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 5px;
  background: var(--cizgi-acik); color: var(--soluk); font-size: 11.5px; }
.arama-alt { display: block; margin-top: 3px; color: var(--soluk); font-size: 12.5px; line-height: 1.4; word-break: break-word; }

@media (max-width: 767px) {
  .bs-hero { padding: 36px 20px 20px; }
  .bs-hero h1 { font-size: 31px; }
  .bs-hero p { font-size: 16.5px; }
  .bs-baslik { font-size: 29px; }
  .bs-ozet { font-size: 17.5px; }
  .bs-icerik h2 { font-size: 23px; margin-top: 36px; }
  .bs-icerik h3 { font-size: 19px; }
  body { font-size: 16.5px; }
}

/* ── sağ blok (23.09) ──────────────────────────────────────────────────
   Ahmet: "sağda kategoriler vs olsun, en üstte uniconnectly reklam alanı
   olsun sağ blokta" + "içindekiler böyle güzel olsun".
   Sıra: tanıtım → içindekiler → kategoriler. Tanıtım en üstte çünkü sayfa
   açıldığında görünen tek sağ öğe o; içindekiler zaten kaydırma boyunca
   yapışık kalıyor. */
.bs-yan-baslik {
  font-family: Outfit, sans-serif; font-weight: 600; color: var(--murekkep);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px;
}

.bs-uc {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 18px; margin-bottom: 22px; text-align: center;
}
.bs-uc-logo { display: block; margin-bottom: 12px; }
.bs-uc-logo img { width: 132px; height: auto; }
.bs-uc p { font-size: 13.5px; line-height: 1.55; color: var(--soluk); margin: 0 0 14px; }
.bs-uc-dugme {
  display: block; padding: 9px 14px; border-radius: 9px;
  background: var(--mor); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
}
.bs-uc-dugme:hover { background: var(--mor-koyu); color: #fff; }
/* Magaza rozetleri: ana dugmenin altinda tek satir, esit yukseklik.
   object-fit: rozetlerin en-boy orani farkli (3,0 / 3,4), kirpilmaz. */
.bs-uc-magazalar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.bs-uc-magazalar a { display: block; line-height: 0; border-radius: 6px; }
.bs-uc-magazalar a:focus-visible { outline: 2px solid var(--mor); outline-offset: 2px; }
.bs-uc-magazalar img { width: 100%; height: 30px; object-fit: contain; }

.bs-kategori-blok { margin-top: 24px; }
.bs-kategori-blok ul { list-style: none; margin: 0; padding: 0; }
.bs-kategori-blok a {
  --kat: var(--mor);
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  color: var(--soluk); font-size: 14px; font-weight: 500; text-decoration: none;
}
.bs-kategori-blok a .bs-ikon { color: var(--kat); width: 17px; height: 17px; }
.bs-kategori-blok a:hover { background: var(--cizgi-acik); color: var(--murekkep); }
.bs-kategori-blok a.etkin {
  background: color-mix(in srgb, var(--kat) 9%, #fff); color: var(--kat); font-weight: 600;
}

/* Popüler / En yeni (24.09): kart; solda kapak küçük resmi, sağda başlık + tarih.
   Seçim düğmesi yalnız popüler verisi gelince görünür. */
.bs-yazilar-blok {
  margin-top: 24px; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 18px 14px 8px;
}
.bs-yazilar-baslik { font-family: Outfit, sans-serif; font-weight: 700; font-size: 18px; color: var(--murekkep); margin: 0 4px 12px; }
.bs-yazilar-sekme { display: flex; gap: 4px; padding: 3px; margin: 0 4px 10px; background: var(--cizgi-acik); border-radius: 9px; }
.bs-yazilar-sekme button {
  flex: 1; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--soluk); font-weight: 600; font-size: 13px;
}
.bs-yazilar-sekme button[aria-pressed="true"] { background: var(--yuzey); color: var(--murekkep); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.bs-yazilar-sekme[hidden], .bs-yazilar[hidden], .bs-yazilar li[hidden] { display: none !important; }
.bs-yazilar { list-style: none; margin: 0; padding: 0; }
.bs-yazilar a { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-radius: 10px; text-decoration: none; }
.bs-yazilar img {
  flex: none; width: 72px; height: 60px; border-radius: 10px;
  object-fit: cover; object-position: left center; background: var(--cizgi-acik);
}
.bs-yazilar-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-yazilar strong {
  font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--murekkep);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bs-yazilar time { font-size: 12.5px; color: var(--soluk); }
.bs-yazilar a:hover strong, .bs-yazilar a[aria-current="page"] strong { color: var(--mor); }

/* içindekiler: numaralı, sol rayda etkin bölüm işaretli */
.bs-toc ol { counter-reset: toc; }
.bs-toc li { counter-increment: toc; }
.bs-toc a { display: flex; gap: 9px; align-items: baseline; border-radius: 0 7px 7px 0; }
.bs-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
  color: #b6c2d2; flex: none; padding-top: 1px;
}
.bs-toc a:hover { background: var(--cizgi-acik); }
.bs-toc a.etkin::before { color: var(--mor); }

/* hap bilgi özeti */
.bs-hap-ozet { counter-reset: hapoz; list-style: none !important; padding-left: 0 !important; }
.bs-hap-ozet > li {
  counter-increment: hapoz; position: relative; padding: 14px 16px 14px 52px;
  background: var(--mor-acik); border: 1px solid #dbe6fb; border-radius: var(--r-kucuk);
  margin-bottom: 8px;
}
.bs-hap-ozet > li::before {
  content: counter(hapoz); position: absolute; left: 16px; top: 13px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--mor); color: #fff;
  font: 600 12.5px Inter, sans-serif; display: grid; place-items: center;
}
.bs-hap-ozet > li > p:last-child { margin-bottom: 0; }

/* ── paylaş alanı (23.09) ──────────────────────────────────────────────
   Üçüncü taraf paylaşım betiği YÜKLENMEZ (her biri izleme çerezi taşır).
   Önce tarayıcının kendi paylaşım penceresi denenir; yoksa bağlantı
   panoya kopyalanır. */
/* Düzen ve düğmeler 26.09'da "yazı sonu kartı" bölümüne taşındı (.bs-son). */

/* ── süzgeç satırları (23.09) ──────────────────────────────────────────
   Ahmet: "sağda kategoriler ve sınavlar diye ayrı bloklar olsun."
   Hub'da da iki eksen var: Konu ve Sınav. İkisi birlikte süzüyor (VE). */
.bs-suzgec-satir { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0; scroll-margin-top: 84px; }
.bs-suzgec-etiket {
  flex: none; width: 52px; padding-top: 14px;
  font-family: Outfit, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--soluk); text-transform: uppercase; letter-spacing: .06em;
}
.bs-suzgec-satir .bs-suzgec { padding: 10px 0; margin: 0; flex: 1; }
.bs-suzgec-sinav button { font-size: 13.5px; padding: 6px 13px 6px 10px; }
.bs-suzgec-sinav .bs-ikon { width: 15px; height: 15px; }
.bs-sinav-blok { margin-top: 22px; }
.bs-izgara { margin-top: 18px; }
@media (max-width: 640px) {
  .bs-suzgec-satir { flex-direction: column; gap: 0; }
  .bs-suzgec-etiket { width: auto; padding-top: 10px; }
}

/* yan bloktaki sayı rozeti ve henüz yazısı olmayan kategori */
.bs-kategori-blok a, .bs-bos-kat { justify-content: flex-start; }
.bs-kategori-blok em, .bs-bos-kat em {
  margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--soluk); background: var(--cizgi-acik); border-radius: 20px; padding: 1px 8px;
}
.bs-bos-kat {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  color: #a8b3c2; font-size: 14px; font-weight: 500;
}
.bs-bos-kat .bs-ikon { width: 17px; height: 17px; }
.bs-bos-kat em { background: transparent; color: #b6c2d2; font-size: 11px; }

/* yan bloktaki bölümler arası nefes */
.bs-yan .bs-toc { margin-top: 24px; }

/* ── kırıntı yolu (23.09 yeniden tasarlandı) ───────────────────────────
   Ahmet: "üst tarafta > yolları daha güzel tasarlanabilir." Düz eğik
   çizgi yerine ikonlu ayraç; ilk adımda ev ikonu. */
.bs-kirinti { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 18px; }
.bs-kirinti a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 7px; color: var(--soluk); text-decoration: none;
}
.bs-kirinti a:hover { background: var(--cizgi-acik); color: var(--murekkep); }
.bs-kirinti a:last-child { color: var(--mor); font-weight: 600; }
.bs-kirinti > .bs-ikon { width: 15px; height: 15px; color: #c3cedc; flex: none; }
.bs-kirinti a .bs-ikon { width: 15px; height: 15px; }

/* künye: okuma süresi ve tarih ikonlu */
.bs-kunye { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.bs-kunye-oge { display: inline-flex; align-items: center; gap: 6px; }
.bs-kunye-oge .bs-ikon { width: 15px; height: 15px; color: #94a3b8; }

/* ── içindekiler artık YAZININ BAŞINDA (23.09) ─────────────────────────
   Ahmet: "bu içindekiler kısmını yazının başına koysak yönlendirmeli
   gitse daha güzel olur." Yan tarafa da iyi geldi: sağ blok kısaldığı
   için kaydırınca artık içerikle uyumlu ilerliyor (önce sağ sütun
   ekrandan uzundu, yapışkan davranış bozuluyordu). */
.bs-toc-ust {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 20px 22px; margin: 0 0 30px;
}
.bs-toc-ust .bs-yan-baslik { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bs-toc-ust .bs-yan-baslik .bs-ikon { width: 16px; height: 16px; color: var(--mor); }
.bs-toc-ust ol {
  columns: 2; column-gap: 26px; list-style: none; margin: 0; padding: 0; border-left: 0;
}
.bs-toc-ust li { break-inside: avoid; }
.bs-toc-ust a {
  border-left: 0; margin-left: 0; padding: 6px 8px; border-radius: 7px;
  font-size: 14.5px; color: #475569;
}
.bs-toc-ust a:hover { background: var(--mor-acik); color: var(--mor); }
.bs-toc-ust a.etkin { background: var(--mor-acik); color: var(--mor); font-weight: 600; }
@media (max-width: 720px) { .bs-toc-ust ol { columns: 1; } }

/* sağ blok kısaldı; yine de ekrandan uzun kalırsa kendi içinde kaysın */
@media (min-width: 1060px) {
  .bs-yan { max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
}

/* ── içindekiler yeniden (23.09) ───────────────────────────────────────
   Ahmet: "o içindekiler kısmının tasarımı iyi olmamış" — kutu 329 px
   yer kaplıyordu (ölçüldü). Satır yüksekliği ve iç boşluk sıkıştırıldı,
   başlığa bölüm sayısı eklendi. */
.bs-toc-ust { padding: 15px 18px 12px; margin-bottom: 26px; }
.bs-toc-ust .bs-yan-baslik { margin-bottom: 8px; }
.bs-toc-ust .bs-yan-baslik em {
  margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; color: var(--soluk); font-weight: 500;
}
.bs-toc-ust ol { column-gap: 22px; }
.bs-toc-ust a { padding: 4px 7px; font-size: 13.8px; line-height: 1.45; }
.bs-toc-ust a::before { font-size: 10.5px; padding-top: 2px; }

/* ── sağ blok: akıllı okuma konumu (23.09) ─────────────────────────────
   Ahmet: "en sağdaki en alta da içindekiler kısmı, neredeyse orayı da
   gösterecek şekilde akıllı bi tasarım."
   Ondört başlığı yan sütuna sığdırmak sütunu yine ekrandan uzun yapardı
   (kaydırma uyumunu bozan tam da buydu). Bu yüzden liste TAM basılıyor
   ama js/blog.js yalnız BULUNDUĞUN bölümün çevresindeki beşini açık
   bırakıyor; üstte kaçıncı bölümde olduğun ve bir ilerleme çubuğu var. */
.bs-toc-yan { margin-top: 24px; }
.bs-toc-yan .bs-yan-baslik { display: flex; align-items: center; }
.bs-toc-yan .bs-yan-baslik em {
  margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 600; color: var(--mor);
}
.bs-toc-cubuk { height: 4px; border-radius: 3px; background: var(--cizgi-acik); overflow: hidden; margin: 0 0 10px; }
.bs-toc-cubuk span { display: block; height: 100%; background: var(--mor); transition: width .18s ease; }
.bs-toc-yan ol { border-left: 2px solid var(--cizgi); }
.bs-toc-yan li[hidden] { display: none !important; }
.bs-toc-yan a { font-size: 13.5px; padding: 5px 0 5px 13px; }
.bs-toc-yan a::before { display: none; }

/* ── alt şerit sıkıştırıldı (23.09) ────────────────────────────────────
   Ahmet: "bu görseldeki en alt kısmı da güzelleştirelim, dikey çok yer
   kaplamasın." Ölçüldü: paylaş 118 px + alt bilgi 199 px = 317 px.
   Paylaş başlığı düğmelerle aynı satıra alındı, alt bilgi tek satıra. */

.bs-alt { padding: 20px 0; }
.bs-alt .kap { align-items: center; gap: 12px 26px; }
.bs-alt p { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.bs-alt-logo { width: 46px; margin-bottom: 0; }
.bs-alt nav { gap: 14px; }
.bs-alt nav a { font-size: 13.5px; }
@media (max-width: 640px) {
  .bs-alt .kap { flex-direction: column; align-items: flex-start; }
}

/* ── sağ içindekiler gezintisi (23.09) ─────────────────────────────────
   Ahmet: "sağdaki içindekilerde 1.ciye dönüş olmuyor, ileri gidiş daha
   kolay olmalı." Pencere yalnız çevreyi gösterdiği için uzak bölüme
   ulaşmak zordu: önceki / sonraki, tüm bölümler ve başa dön. */
.bs-toc-gezinti { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.bs-toc-gezinti button, .bs-toc-alt button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--govde);
  border-radius: 8px; padding: 7px 8px; font: 600 12.5px Inter, sans-serif; cursor: pointer;
}
.bs-toc-gezinti button:hover:not(:disabled), .bs-toc-alt button:hover { border-color: var(--mor); color: var(--mor); }
.bs-toc-gezinti button:disabled { opacity: .4; cursor: default; }
.bs-toc-gezinti .bs-ikon, .bs-toc-alt .bs-ikon { width: 14px; height: 14px; }
.bs-toc-alt { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; }
.bs-toc-alt button { flex: 1; background: transparent; border-color: transparent; color: var(--soluk); font-weight: 500; }
.bs-toc-alt button:hover { background: var(--cizgi-acik); }

/* kontrol listesi tamamlanınca tebrik satırı */
.bs-kontrol-tebrik {
  display: flex; align-items: center; gap: 9px; margin: 6px 0 10px; padding: 11px 14px;
  border-radius: var(--r-kucuk); background: #ecfdf3; border: 1px solid #a7f3c4;
  color: #15803d; font-weight: 600; font-size: 15px;
}
.bs-kontrol-tebrik[hidden] { display: none; }
.bs-kontrol-tebrik .bs-ikon { width: 18px; height: 18px; }

/* ⚠️ 23.09 ölçümle yakalandı: beş kutunun kuralında `border-color`
   `border-left`ten SONRA geliyordu ve sol vurgu çizgisini de açık renge
   boyuyordu (önkoşulun sol kenarı mor yerine rgb(228,220,253) ölçüldü).
   Kutuların sol çizgisi baştan beri görünmüyormuş. Sol renk burada
   ayrıca ve en sonda veriliyor. */
.bs-hap      { border-left-color: var(--mor); }
.bs-dikkat   { border-left-color: #d97706; }
.bs-ornek    { border-left-color: #0f766e; }
.bs-onkosul  { border-left-color: #7c3aed; }
.bs-sinavda  { border-left-color: #0d2560; }

/* 23.09 (Ahmet): "altı çizili çirkin duruyor, tıklanabilir oldukları
   zaten belli." Yazı gövdesindeki bağlantı kuralı (.bs-icerik a →
   underline) İçindekiler'e ve paylaş düğmelerine de sızıyordu (ölçüldü:
   14 + 2 bağlantı). Gezinti bileşenleri kutu, hover ve renkle zaten
   tıklanabilir görünüyor; alt çizgi yalnız düz metin içindeki
   bağlantılarda kalır (renk tek başına yetmez, erişilebilirlik). */
.bs-icerik .bs-toc a,
.bs-icerik .bs-paylas a,
.bs-icerik .bs-ilgili a { text-decoration: none; }

/* ── süzgeç düzeltmeleri (25.09, Ahmet: "kategorilendirme çalışmıyor") ──
   `.bs-kart{display:flex}` tarayıcının `[hidden]{display:none}` kuralını
   eziyordu: blog.js kartı gizliyor ama kart ekranda kalıyordu. */
.bs-kart[hidden], .bs-suzgec-bos[hidden] { display: none !important; }
.bs-suzgec-bos { color: var(--soluk); padding: 10px 0 60px; margin: 0; }
/* Öne çıkan kartın görseli 16:9'dan kısa kutuda kırpılıyor. Kapaklarda
   yazı solda, fotoğraf sağda: kırpma sağdan yapılsın, başlık kesilmesin. */
.bs-kart-one .bs-kart-gorsel img { object-position: left center; }

/* ── yazı sonu etkileşimi (25.09) ──────────────────────────────────────
   Ahmet: "dengeli, rahatsız etmeden". Tek sade kart: soru + iki düğme,
   altında ince çizgiyle ayrılmış beş ifade. Kayan pencere, açılır kutu,
   animasyon YOK. Yorumlar yazının en sonunda, form düğmeyle açılır.
   Bölümler depo bağlı değilse gizli kalır (js/etkilesim.js). */
.bs-etk[hidden], .bs-yorumlar[hidden], .bs-etk-geri[hidden], .bs-yorum-form[hidden],
.bs-yorum-bos[hidden], .bs-yorum-ac[hidden] { display: none !important; }
.bs-etk { margin: 0; }
.bs-etk-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bs-icerik .bs-etk-soru { margin: 0; font-weight: 600; color: var(--murekkep); font-size: 15.5px; }
.bs-etk-oy { display: flex; gap: 8px; }
.bs-etk button, .bs-yorumlar button { font: 600 14px Inter, sans-serif; cursor: pointer; }
.bs-etk-oy button, .bs-dugme-ikincil {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--cizgi); background: var(--zemin); color: var(--govde);
}
.bs-etk-oy button:hover, .bs-dugme-ikincil:hover { border-color: var(--mor); color: var(--mor); }
.bs-etk-oy button[aria-pressed="true"], .bs-etk-ifade button[aria-pressed="true"] {
  background: var(--mor-acik); border-color: var(--mor); color: var(--mor);
}
.bs-etk-oy .bs-ikon, .bs-dugme-ikincil .bs-ikon { width: 18px; height: 18px; flex: none; }
.bs-etk-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-etk-n:empty { display: none; }
.bs-etk-ifade { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bs-etk-ifade button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--govde); line-height: 1;
}
.bs-etk-ifade button:hover { border-color: var(--mor); }
.bs-etk-ifade button > span { font-size: 18px; line-height: 1; }
.bs-etk[aria-busy="true"] button { cursor: progress; }
.bs-etk-geri, .bs-yorum-form { display: grid; gap: 12px; }
.bs-etk-geri { margin-top: 14px; }
.bs-etk-geri label, .bs-yorum-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--murekkep); }
.bs-etk textarea, .bs-yorum-form textarea, .bs-yorum-form input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--zemin); color: var(--govde); font: 400 15px/1.55 Inter, sans-serif; resize: vertical;
}
.bs-etk textarea:focus, .bs-yorum-form textarea:focus, .bs-yorum-form input:focus {
  outline: 2px solid var(--mor); outline-offset: 1px; border-color: var(--mor); background: var(--yuzey);
}
.bs-etk-geri-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-dugme-ana {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 9px;
  border: 1px solid var(--mor); background: var(--mor); color: #fff;
}
.bs-dugme-ana:hover { background: var(--mor-koyu); border-color: var(--mor-koyu); }
.bs-dugme-ana:disabled { opacity: .6; cursor: progress; }
.bs-icerik .bs-etk-durum, .bs-icerik .bs-yorum-durum { margin: 10px 0 0; font-size: 14px; color: var(--soluk); }
.bs-etk-durum:empty, .bs-yorum-durum:empty { display: none; }
/* yorumlar */
.bs-yorumlar { margin-top: 32px; scroll-margin-top: 84px; }
.bs-yorumlar h2 em {
  margin-left: 4px; font: 600 13px Inter, sans-serif; color: var(--soluk);
  background: var(--cizgi-acik); border-radius: 20px; padding: 2px 9px;
}
.bs-yorumlar h2 em:empty { display: none; }
.bs-icerik .bs-yorum-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.bs-yorum-liste li { padding: 14px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); }
.bs-icerik .bs-yorum-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; }
.bs-yorum-ust strong { color: var(--murekkep); font-size: 15px; }
.bs-yorum-ust time { font-size: 13px; color: var(--soluk); }
.bs-icerik .bs-yorum-metin { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.bs-icerik .bs-yorum-bos { color: var(--soluk); margin: 0 0 14px; }
.bs-yorum-form { margin-top: 4px; padding: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.bs-icerik .bs-yorum-not { margin: 0; font-size: 13px; line-height: 1.55; color: var(--soluk); }
.bs-bal { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) {
  .bs-etk-oy { width: 100%; }
  .bs-etk-oy button { flex: 1; justify-content: center; }
}

/* gündelik hayatla ilişki kuran hap bilgi (25.09): kutu aynı, başta küçük
   etiket. Etiket kutunun iç gövdesinde; hap bilgi özetinde de görünür. */
.bs-gunluk {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 20px;
  background: #ccfbf1; color: #0f766e; font: 600 12px Inter, sans-serif; letter-spacing: .01em;
}
.bs-hap-ozet > li > .bs-gunluk { margin-bottom: 6px; }

/* ── yazı sonu kartı (26.09) ────────────────────────────────────────────
   Ahmet: "bu tasarım hiç olmamış". İki kutu üst üsteydi, paylaş düğmeleri
   ikinci satırda sağa kayıyordu. Artık TEK kart: solda "faydalı oldu mu?"
   ve ifadeler, sağda ikonlu paylaş düğmeleri. Depo bağlı değilse sol bölme
   gizli kalır, kart yalnız paylaş satırı olur. Ardından yorumlar, en sonda
   önerilenler gelir. */
.bs-son {
  margin-top: 40px; display: flex; align-items: flex-start; gap: 16px 24px;
  padding: 18px 22px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r);
}
.bs-son > .bs-etk { flex: 1 1 auto; min-width: 0; }
.bs-son > .bs-paylas { flex: none; }
.bs-son > .bs-etk:not([hidden]) + .bs-paylas { padding-left: 24px; border-left: 1px solid var(--cizgi-acik); }
.bs-son > .bs-etk[hidden] + .bs-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bs-son > .bs-etk[hidden] + .bs-paylas .bs-paylas-baslik { margin: 0; }
.bs-icerik .bs-paylas-baslik { margin: 0 0 10px; font: 600 13px Inter, sans-serif; color: var(--soluk); }
.bs-paylas-dugmeler { display: flex; gap: 8px; }
.bs-paylas-dugmeler > * {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--cizgi); background: var(--zemin); color: var(--govde);
  cursor: pointer; text-decoration: none;
}
.bs-paylas-dugmeler .bs-ikon { width: 18px; height: 18px; }
.bs-paylas-dugmeler > *:hover { border-color: var(--mor); color: var(--mor); }
.bs-paylas-dugmeler .bs-paylas-ana { background: var(--mor); border-color: var(--mor); color: #fff; }
.bs-paylas-dugmeler .bs-paylas-ana:hover { background: var(--mor-koyu); border-color: var(--mor-koyu); color: #fff; }
.bs-paylas-dugmeler .bs-kopyalandi { border-color: #16a34a; color: #16a34a; }
.bs-icerik .bs-paylas-durum { margin: 8px 0 0; font-size: 13px; color: #15803d; flex-basis: 100%; }
.bs-paylas-durum:empty { display: none; }
@media (max-width: 640px) {
  .bs-son { flex-direction: column; align-items: stretch; padding: 16px; gap: 14px; }
  .bs-son > .bs-etk:not([hidden]) + .bs-paylas {
    padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--cizgi-acik);
  }
  .bs-son > .bs-paylas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
  .bs-son .bs-paylas-baslik { margin: 0; }
}

/* ── PDF merkezi, indirme ve dogrulama (28.09) — scripts/pdf_sayfalar.py ──
   Renkler mevcut paletten; dekoratif gradyan/parilti YOK. Guncel = yesil,
   eski = amber, hata = kirmizi (dogrulama sayfasi QR hedefi). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pdf-merkez, .pdf-indirme, .pdf-dogrula { padding-bottom: 56px; }
.pdf-merkez .bs-dugme-ana, .pdf-indirme .bs-dugme-ana, .pdf-dogrula .bs-dugme-ana,
.pdf-merkez .bs-dugme-ikincil, .pdf-indirme .bs-dugme-ikincil, .pdf-dogrula .bs-dugme-ikincil {
  gap: 7px; font: 600 14.5px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.pdf-merkez .bs-ikon, .pdf-indirme .bs-dugme-ana .bs-ikon, .pdf-dogrula .bs-dugme-ana .bs-ikon { width: 17px; height: 17px; }
.pdf-merkez h2, .pdf-indirme h2, .pdf-dogrula h2 { font-size: 22px; margin: 36px 0 14px; }
.pdf-ust-etiket { margin: 0 0 6px; font: 600 13px Inter, sans-serif; color: var(--mor); letter-spacing: .02em; }
.pdf-tur { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px Inter, sans-serif;
  background: var(--mor-acik); color: var(--mor-koyu); white-space: nowrap; }
.pdf-tur-hata { background: #fee2e2; color: #b91c1c; }
.pdf-tur-ilk { background: #dcfce7; color: #15803d; }
.pdf-tur-bicim, .pdf-tur-duzeltme { background: var(--cizgi-acik); color: var(--soluk); }

/* merkez */
.pdf-ara { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; position: sticky; top: 64px; z-index: 5;
  background: var(--zemin); padding: 10px 0; }
.pdf-ara input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--cizgi); border-radius: 12px;
  background: var(--yuzey); font: 400 16px Inter, sans-serif; color: var(--govde); }
.pdf-ara input:focus { outline: 2px solid var(--mor); outline-offset: 1px; border-color: var(--mor); }
.pdf-ara-sayi { font: 600 14px Inter, sans-serif; color: var(--soluk); white-space: nowrap; }
.pdf-bos { color: var(--soluk); }
.pdf-grup h2 .bs-ikon { color: var(--kat); }
.pdf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 1000px) { .pdf-liste { grid-template-columns: 1fr 1fr; } }
.pdf-satir { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); }
.pdf-satir[hidden], .pdf-grup[hidden] { display: none !important; }
.pdf-kod { flex: none; font: 700 12.5px Inter, sans-serif; color: var(--kat, var(--mor)); padding: 4px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--kat, var(--mor)) 9%, #fff); font-variant-numeric: tabular-nums; }
.pdf-satir-ic { flex: 1; min-width: 0; }
.pdf-satir-baslik { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--murekkep); line-height: 1.35; }
.pdf-satir-baslik:hover { color: var(--mor); }
.pdf-satir-kunye { display: block; font-size: 13.5px; color: var(--soluk); margin-top: 2px; }
.pdf-satir-eylem { display: flex; gap: 6px; flex: none; }
.pdf-satir-eylem .bs-dugme-ana, .pdf-satir-eylem .bs-dugme-ikincil { padding: 7px 12px; font-size: 13.5px; }
@media (max-width: 640px) {
  .pdf-satir { flex-wrap: wrap; }
  .pdf-satir-eylem { width: 100%; }
  .pdf-satir-eylem a { flex: 1; justify-content: center; }
}

/* duyurular: uptime seridi */
.pdf-duyurular { margin: 0 0 8px; padding: 18px 20px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.pdf-duyurular h2 { margin-top: 0 !important; }
.pdf-tum-degisiklik { margin: 10px 0 0; font-size: 14.5px; }
.pdf-dogrula .pdf-duyurular { margin-top: 28px; }
.pdf-durum-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; font-size: 15px; }
.pdf-durum-ozet span:last-child { color: var(--soluk); }
.pdf-nokta { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px #dcfce7; }
.pdf-serit { display: flex; gap: 2px; height: 34px; }
.pdf-gun { flex: 1; border-radius: 2px; min-width: 2px; }
.pdf-gun-once { background: var(--cizgi-acik); }
.pdf-gun-sorunsuz { background: #22c55e; }
.pdf-gun-surum { background: var(--mor); }
.pdf-gun-hata { background: #dc2626; }
.pdf-serit-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--soluk); }
.pdf-lejant { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; }
.pdf-lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.pdf-duyuru-liste { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--cizgi); }
.pdf-duyuru { display: grid; grid-template-columns: 130px auto 1fr; gap: 6px 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.pdf-duyuru time { color: var(--soluk); font-size: 14px; }
.pdf-duyuru p { margin: 2px 0 0; color: var(--soluk); font-size: 14px; }
.pdf-duyuru details summary { cursor: pointer; color: var(--murekkep); }
.pdf-duyuru details ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; columns: 2; column-gap: 24px; }
@media (max-width: 640px) {
  .pdf-duyuru { grid-template-columns: 1fr; }
  .pdf-duyuru details ul { columns: 1; }
  .pdf-serit { gap: 1px; }
}

/* indirme sayfasi */
.pdf-indirme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.pdf-gecmis { grid-column: 1 / -1; }
.pdf-belge { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px; }
.pdf-kapak { display: block; width: 100%; height: auto; border-radius: var(--r-kucuk); margin-bottom: 14px; }
.pdf-belge h1 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; }
.pdf-kunye { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.pdf-kunye dt { color: var(--soluk); }
.pdf-kunye dd { margin: 0; color: var(--murekkep); font-weight: 600; }
.pdf-ucretsiz { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--mor-acik); border: 1px solid #dbe6fb;
  color: var(--murekkep); font-weight: 600; font-size: 14.5px; }
.pdf-baglantilar { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: 14.5px; }
.pdf-bekleme { display: grid; gap: 14px; }
.pdf-sayac-kutu { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 22px 18px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.pdf-sayac { position: relative; width: 84px; height: 84px; }
.pdf-sayac svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pdf-sayac circle { fill: none; stroke: var(--cizgi); stroke-width: 3.5; }
.pdf-sayac .pdf-sayac-ilerle { stroke: var(--mor); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  animation: pdf-halka 10s linear forwards; }
.pdf-sayac span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 26px Outfit, sans-serif; color: var(--murekkep); }
.pdf-bekle-metin { margin: 0; color: var(--soluk); }
/* JS yoksa: dugme 10 sn sonra CSS ile gorunur. JS varsa sinifla yonetilir. */
.pdf-indir { visibility: hidden; animation: pdf-goster 0s linear 10s forwards; font-size: 16px !important; padding: 12px 20px !important; }
.pdf-bekleme.js .pdf-indir { animation: none; visibility: hidden; }
.pdf-bekleme.hazir .pdf-indir { visibility: visible; }
.pdf-bekleme.doldu .pdf-indir { display: none; }
.pdf-yeniden { font-size: 15px !important; }
.pdf-yeniden[hidden], [data-pdf-indirme][hidden], [data-pdf-indirme-kutu][hidden] { display: none !important; }
.pdf-kunye > div { display: contents; }
.bs-pdf-not { margin: 10px 0 0 !important; font-size: 13.5px; color: var(--soluk); }
.pdf-bekleme.hazir .pdf-sayac .pdf-sayac-ilerle { stroke: #16a34a; animation: none; stroke-dashoffset: 0; }
.pdf-bekleme.hazir .pdf-sayac span { color: #16a34a; }
@keyframes pdf-goster { to { visibility: visible; } }
@keyframes pdf-halka { to { stroke-dashoffset: 0; } }
.pdf-uc { position: relative; padding: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.pdf-uc-etiket { position: absolute; top: 12px; right: 14px; font: 600 11px Inter, sans-serif; color: var(--soluk);
  text-transform: uppercase; letter-spacing: .06em; }
.pdf-uc-logo img { height: 40px; width: auto; }
.pdf-uc-giris { margin: 8px 0 10px; color: var(--govde); }
.pdf-uc-faydalar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pdf-uc-faydalar b { display: block; color: var(--murekkep); font-size: 14.5px; }
.pdf-uc-faydalar span { display: block; font-size: 13.5px; color: var(--soluk); line-height: 1.45; }
.pdf-uc-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.pdf-uc-magaza { display: flex; flex-wrap: wrap; gap: 6px; }
.pdf-uc-magaza img { height: 36px; width: auto; max-width: 100%; display: block; }
@media (max-width: 860px) {
  .pdf-indirme { grid-template-columns: minmax(0, 1fr); }
  .pdf-bekleme { grid-template-columns: minmax(0, 1fr); }
  .pdf-bekleme { order: -1; }
  .pdf-uc-faydalar { grid-template-columns: 1fr; }
}

/* dogrulama */
.pdf-dogrula { max-width: 860px; }
.pdf-dogrula h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; }
.pdf-giris { color: var(--soluk); font-size: 16.5px; }
.pdf-sonuc { display: flex; gap: 20px; align-items: flex-start; padding: 22px; border-radius: var(--r); border: 1px solid; margin: 8px 0 18px; }
.pdf-sonuc-guncel { background: #f0fdf4; border-color: #bbf7d0; }
.pdf-sonuc-eski { background: #fffbeb; border-color: #fde68a; }
.pdf-sonuc-hata { background: #fef2f2; border-color: #fecaca; }
.pdf-sonuc h1 { margin: 0 0 6px; }
.pdf-sonuc-guncel h1 { color: #15803d; } .pdf-sonuc-eski h1 { color: #b45309; } .pdf-sonuc-hata h1 { color: #b91c1c; }
.pdf-sonuc-ic p { margin: 0 0 10px; }
.pdf-sonuc-kucuk { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pdf-sonuc-kucuk strong { display: block; color: #15803d; font-size: 18px; }
.pdf-sonuc-kucuk span { color: var(--soluk); font-size: 14.5px; }
.pdf-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.pdf-onay, .pdf-uyari { flex: none; width: 76px; height: 76px; }
.pdf-onay-daire { fill: #dcfce7; stroke: #16a34a; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: pdf-ciz .7s ease-out forwards, pdf-nabiz 2.4s ease-out .9s 2; transform-origin: center; }
.pdf-onay-isaret { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36; animation: pdf-ciz .45s ease-out .6s forwards; }
.pdf-uyari circle { fill: #fef3c7; stroke: #d97706; stroke-width: 2.5; }
.pdf-uyari path { stroke: #b45309; stroke-width: 4; stroke-linecap: round; }
.pdf-sonuc-hata .pdf-uyari circle { fill: #fee2e2; stroke: #dc2626; }
.pdf-sonuc-hata .pdf-uyari path { stroke: #b91c1c; }
@keyframes pdf-ciz { to { stroke-dashoffset: 0; } }
@keyframes pdf-nabiz { 0% { transform: scale(1); } 20% { transform: scale(1.06); } 40%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pdf-onay-daire, .pdf-onay-isaret { animation: none; stroke-dashoffset: 0; }
  .pdf-sayac .pdf-sayac-ilerle { animation: none; }
}
.pdf-yonlendir { font-size: 14.5px; color: var(--govde); }
.pdf-kal { border: 0; background: none; color: var(--mor); font: 600 14.5px Inter, sans-serif; cursor: pointer; text-decoration: underline; padding: 0; }
.pdf-kunye-yatay { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 14px 16px; }
.pdf-iz-not { font-size: 13.5px; color: var(--soluk); }
.pdf-degisiklik { list-style: none; margin: 0; padding: 0; }
.pdf-degisiklik li { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.pdf-degisiklik p { margin: 4px 0 0; color: var(--soluk); }
.pdf-kod-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.pdf-kod-form label { font-weight: 600; color: var(--murekkep); }
.pdf-kod-form input { width: 180px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; font: 600 16px Inter, sans-serif;
  text-transform: uppercase; }
.pdf-kod-sonuc { width: 100%; margin: 0; color: #b91c1c; font-size: 14.5px; }
.pdf-kod-sonuc:empty { display: none; }
.pdf-dosya { margin-top: 12px; }
.pdf-dosya-sec { display: grid; place-items: center; min-height: 96px; padding: 18px; border: 2px dashed #c7d6f5; border-radius: var(--r);
  background: var(--yuzey); color: var(--mor-koyu); font-weight: 600; text-align: center; cursor: pointer; }
.pdf-dosya-sec.uzerinde { border-color: var(--mor); background: var(--mor-acik); }
.pdf-dosya-sec input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdf-dosya-sec:focus-within { outline: 2px solid var(--mor); outline-offset: 2px; }
.pdf-dosya-sonuc { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-kucuk); border: 1px solid var(--cizgi); background: var(--yuzey); }
.pdf-dosya-sonuc.guncel { background: #f0fdf4; border-color: #bbf7d0; }
.pdf-dosya-sonuc.eski { background: #fffbeb; border-color: #fde68a; }
.pdf-dosya-sonuc.hata, .pdf-dosya-sonuc.yok { background: #fef2f2; border-color: #fecaca; }
.pdf-dosya-sonuc p { margin: 0 0 6px; } .pdf-dosya-sonuc p:last-child { margin: 0; }
.pdf-liste-bag { margin-top: 26px; }

/* yazi sayfasindaki PDF seridi */
.bs-pdf { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #dbe6fb; background: #f5f8ff; border-radius: var(--r-kucuk); }
.bs-pdf-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bs-pdf-ust > .bs-ikon { width: 26px; height: 26px; color: var(--mor); }
.bs-pdf-bilgi { flex: 1; min-width: 180px; }
.bs-pdf-bilgi strong { display: block; color: var(--murekkep); font-size: 15.5px; }
.bs-pdf-bilgi span { font-size: 13.5px; color: var(--soluk); }
.bs-icerik .bs-pdf a.bs-dugme-ana { gap: 7px; font: 600 14.5px Inter, sans-serif; text-decoration: none; color: #fff; }
.bs-pdf details { margin-top: 10px; font-size: 14px; }
.bs-pdf summary { cursor: pointer; color: var(--mor-koyu); font-weight: 600; }
.bs-pdf details ul { margin: 8px 0 0; padding-left: 18px; }
.bs-pdf details li { margin-bottom: 4px; }