/* =====================================================================
   Mevzuat Bankası — arayüz stili

   Renk ve tipografi ana siteden (vergibulustayi.com/assets/theme.css)
   alınmıştır: aynı lacivert (#0e3f83), aynı Inter yüzü, aynı köşe ve
   gölge ölçeği. Amaç iki sitenin tek bir ürün gibi okunması.

   Ana siteden ayrılan tek yer gövde yoğunluğu: burada ekranda çok belge
   ve uzun hukuk metni var, o yüzden satır yüksekliği ve kart iç boşluğu
   ana siteye göre daha sıkı tutuldu.
   ===================================================================== */

:root {
  /* Ana sitenin marka ölçeği (theme.css ile birebir) */
  --vb-primary:      #0e3f83;
  --vb-primary-dark: #0a2f63;
  --vb-primary-light:#1a5fb4;
  --vb-primary-050:  #eef4fd;
  --vb-primary-100:  #dbe8fa;
  --vb-primary-200:  #bfd6f3;

  /* Bu arayüzün anlamsal adları — eski sınıflar bunlara bakıyor */
  --bg:        #f2f4f8;
  --yuzey:     #ffffff;
  --kenar:     #e2e8f0;
  --kenar-soft:#eef2f7;
  --metin:     #0f172a;
  --metin-2:   #334155;
  --soluk:     #64748b;
  --vurgu:     var(--vb-primary);
  --vurgu-bg:  var(--vb-primary-050);
  --isaret:    #fde68a;
  --mulga-bg:  #fee2e2;
  --mulga-fg:  #b91c1c;
  --basari:    #16a34a;
  --basari-bg: #dcfce7;

  --golge-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --golge:    0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
  --golge-md: 0 4px 10px rgba(15, 23, 42, .07), 0 12px 32px rgba(15, 23, 42, .07);
  --golge-lg: 0 12px 24px rgba(15, 23, 42, .10), 0 24px 56px rgba(15, 23, 42, .10);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --halka: 0 0 0 3px rgba(26, 95, 180, .28);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

/* Koyu tema — üst şerit bilerek lacivert kalır: marka her iki temada aynı. */
@media (prefers-color-scheme: dark) {
  :root {
    --vb-primary-200: #35516f;
    --bg:        #0f1319;
    --yuzey:     #171b22;
    --kenar:     #262d38;
    --kenar-soft:#1e242d;
    --metin:     #e6e9ef;
    --metin-2:   #c2c8d4;
    --soluk:     #94a3b8;
    --vurgu:     #7cb3f2;
    --vurgu-bg:  #16273c;
    --isaret:    #665012;
    --mulga-bg:  #3b1a1a;
    --mulga-fg:  #f3a2a2;
    --basari:    #4ade80;
    --basari-bg: #14301f;
    --golge-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --golge:    0 1px 3px rgba(0, 0, 0, .35);
    --golge-md: 0 6px 20px rgba(0, 0, 0, .45);
    --golge-lg: 0 12px 34px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
mark { background: var(--isaret); color: inherit; padding: 0 2px; border-radius: 3px; }

::selection { background: var(--vb-primary-100); color: var(--vb-primary-dark); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--halka);
  border-radius: var(--r-sm);
}

/* =====================================================================
   ÜST ŞERİT — ana sitenin başlığıyla aynı lacivert degrade
   ===================================================================== */
.ust {
  background: linear-gradient(180deg, #0d3a78 0%, var(--vb-primary-dark) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
              0 8px 24px rgba(8, 37, 72, .28);
  position: sticky; top: 0; z-index: 40;
}
.ust-ic {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 1320px; margin: 0 auto; padding: 11px 24px;
}

/* ----- marka ----- */
.marka { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.marka:hover { text-decoration: none; }
/* Ana site logosu — oranı 137:120, yüksekliğe göre ölçeklenir. */
.marka-isaret {
  height: 40px; width: auto; flex: 0 0 auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}
.marka-yazi { display: flex; flex-direction: column; line-height: 1.12; }
.marka-yazi b {
  font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: #fff;
}
.marka-yazi b span { font-weight: 400; color: var(--vb-primary-100); }
.marka-yazi i {
  font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58); margin-top: 2px;
}

/* ----- gezinme ----- */
.gezinme { display: flex; gap: 2px; }
.gezinme a {
  padding: 7px 13px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  transition: background .18s ease, color .18s ease;
}
.gezinme a:hover { text-decoration: none; background: rgba(255, 255, 255, .13); color: #fff; }
.gezinme a.etkin { background: rgba(255, 255, 255, .17); color: #fff; }
.gezinme a.dis { color: rgba(255, 255, 255, .55); font-weight: 500; }

/* ----- arama ----- */
.arama { display: flex; flex: 1; min-width: 260px; gap: 8px; }
.arama input[type=search] {
  flex: 1; min-width: 0;
  padding: 10px 16px 10px 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dbe8fa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    no-repeat 14px center;
  color: #fff; font-family: inherit; font-size: 13.5px;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.arama input[type=search]::placeholder { color: rgba(255, 255, 255, .6); }
.arama input[type=search]:focus {
  outline: none;
  background-color: rgba(255, 255, 255, .98);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e3f83' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  border-color: transparent; color: var(--vb-primary-dark);
  box-shadow: var(--golge-md);
}
.arama input[type=search]:focus::placeholder { color: #64748b; }
.arama button {
  padding: 10px 20px; border: 0; border-radius: var(--r);
  background: #fff; color: var(--vb-primary);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  letter-spacing: .2px; cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.arama button:hover { background: var(--vb-primary-050); box-shadow: var(--golge); }

/* ----- üye alanı ----- */
.uye { margin-left: auto; }
.giris-dugme {
  display: inline-block; padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r);
  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
  transition: background .18s ease, border-color .18s ease;
}
.giris-dugme:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7);
}

.uye-kutu { position: relative; }
.uye-dugme {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 6px; border: 1px solid transparent;
  border-radius: var(--r); background: transparent;
  color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .18s ease;
}
.uye-dugme:hover { background: rgba(255, 255, 255, .12); }
.uye-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .35); flex: 0 0 30px;
}
.uye-harf {
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .2); color: #fff;
  font-size: 13px; font-weight: 700;
}
.uye-ad { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uye-ok { width: 15px; height: 15px; opacity: .7; }

.uye-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 244px; padding: 7px;
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r); box-shadow: var(--golge-lg);
  animation: menuAc .16s ease-out;
}
@keyframes menuAc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.uye-menu-basi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px 11px; margin-bottom: 5px;
  border-bottom: 1px solid var(--kenar-soft);
}
.uye-menu-basi strong { font-size: 14px; color: var(--metin); }
.uye-menu-basi span {
  font-size: 12px; color: var(--soluk);
  overflow: hidden; text-overflow: ellipsis;
}
.uye-menu a {
  display: block; padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--metin-2); font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.uye-menu a:hover { text-decoration: none; background: var(--vurgu-bg); color: var(--vurgu); }
.uye-menu a.cikis { color: var(--mulga-fg); }
.uye-menu a.cikis:hover { background: var(--mulga-bg); color: var(--mulga-fg); }
.uye-menu-ayrac { height: 1px; margin: 5px 11px; background: var(--kenar-soft); }

@media (max-width: 900px) {
  .ust-ic { gap: 12px; padding: 10px 16px; }
  .gezinme { order: 3; width: 100%; overflow-x: auto; }
  .arama { order: 4; width: 100%; flex-basis: 100%; }
  .uye-ad { display: none; }
  .marka-yazi i { display: none; }
  .marka-isaret { height: 34px; }
}

/* =====================================================================
   YERLEŞİM
   ===================================================================== */
.govde {
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 22px; max-width: 1320px; margin: 22px auto; padding: 0 24px;
}
@media (max-width: 900px) {
  .govde { grid-template-columns: 1fr; padding: 0 16px; }
  .yan { order: 2; }
}

/* ----- yan panel ----- */
.blok {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 14px; margin-bottom: 14px;
  box-shadow: var(--golge-xs);
}
.blok h3 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
}

.facet { list-style: none; margin: 0; padding: 0; }
.facet li a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--metin-2); font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.facet li a:hover { background: var(--vurgu-bg); color: var(--vurgu); text-decoration: none; }
.facet li.secili a { background: var(--vurgu-bg); color: var(--vurgu); font-weight: 600; }
.facet li a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet li a > b { color: var(--soluk); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.facet .no { font-variant-numeric: tabular-nums; color: var(--vurgu); }
.facet.yillar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }

.tarih-form { display: grid; gap: 8px; }
.tarih-form label { display: grid; gap: 3px; font-size: 12px; color: var(--soluk); }
.tarih-form input[type=date] {
  padding: 7px 9px; border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--bg); color: var(--metin); font-size: 13px; font-family: inherit;
}
.tarih-form input[type=date]:focus { outline: none; border-color: var(--vurgu); box-shadow: var(--halka); }
.tarih-form button {
  padding: 8px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--vurgu-bg); color: var(--vurgu);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.tarih-form button:hover { filter: brightness(.96); }

/* ----- maddeye git (yan panel) ----- */
.madde-form { display: grid; gap: 7px; }
.madde-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.madde-satir input {
  min-width: 0; padding: 7px 9px; border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--bg); color: var(--metin); font-family: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.madde-satir input:focus { outline: none; border-color: var(--vurgu); box-shadow: var(--halka); }
.madde-satir button {
  padding: 8px 14px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--vurgu-bg); color: var(--vurgu);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.madde-satir button:hover { filter: brightness(.96); }
.madde-ipucu { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--soluk); }
.madde-ipucu code {
  padding: 1px 5px; border-radius: 4px; background: var(--bg);
  font-size: 11px; white-space: nowrap;
}
.madde-ipucu.uyari-metin { color: var(--metin-2); font-size: 12.5px; }

.etiketler { display: flex; flex-wrap: wrap; gap: 6px; }
.etiket {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500;
  background: var(--vurgu-bg); color: var(--vurgu);
}
.etiket span { font-weight: 700; opacity: .55; }
.etiket:hover { text-decoration: none; filter: brightness(.96); }
.temizle { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--soluk); }

/* =====================================================================
   SONUÇ LİSTESİ
   ===================================================================== */
.ozet {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.ozet p { margin: 0; color: var(--soluk); font-size: 14px; }
.ozet strong { color: var(--metin); font-size: 16px; }
.sure { margin-left: 8px; font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }

.siralama {
  display: flex; gap: 2px; padding: 3px;
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r-sm);
}
.siralama a { padding: 5px 13px; border-radius: 6px; font-size: 13px; color: var(--soluk); }
.siralama a:hover { text-decoration: none; color: var(--metin); }
.siralama a.etkin { background: var(--vurgu-bg); color: var(--vurgu); font-weight: 600; }

.kart {
  position: relative;
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 15px 17px; margin-bottom: 10px;
  box-shadow: var(--golge-xs);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kart:hover { border-color: var(--vb-primary-200, #bfd6f3); box-shadow: var(--golge); }
.kart h2 { margin: 7px 0 7px; font-size: 15.5px; line-height: 1.42; font-weight: 650; }
.kart h2 a { color: var(--metin); }
.kart h2 a:hover { color: var(--vurgu); }

.rozetler { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rozet {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--bg); color: var(--soluk);
  border: 1px solid var(--kenar); white-space: nowrap;
}
.rozet.t-teblig   { background: var(--vurgu-bg); color: var(--vurgu); border-color: transparent; }
.rozet.t-ozelge   { background: #eef7ee; color: #2f7a34; border-color: transparent; }
.rozet.t-sirkuler { background: #f5eefb; color: #7238a8; border-color: transparent; }
.rozet.t-madde    { background: #fdf3e6; color: #9a6212; border-color: transparent; }
.rozet.mulga      { background: var(--mulga-bg); color: var(--mulga-fg); border-color: transparent; }
.rozet.kanun      { color: var(--metin-2); }
.rozet.kanun:hover{ text-decoration: none; border-color: var(--vurgu); color: var(--vurgu); }
@media (prefers-color-scheme: dark) {
  .rozet.t-ozelge   { background: #16281a; color: #86cf8e; }
  .rozet.t-sirkuler { background: #251a30; color: #c39ae8; }
  .rozet.t-madde    { background: #2e2210; color: #dfae62; }
}

.ozet-metin { margin: 0 0 9px; color: var(--metin-2); font-size: 13.5px; line-height: 1.62; }
.ustveri { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--soluk); }
.ustveri span { white-space: nowrap; }

.bos {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 46px 30px; text-align: center;
}
.bos p { margin: 0 0 6px; }
.bos .ipucu { color: var(--soluk); font-size: 13.5px; }

.sayfalama { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 22px 0; }
.sayfalama a, .sayfalama .atla {
  padding: 8px 13px; border-radius: var(--r-sm); font-size: 13.5px;
  border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-2);
}
.sayfalama a:hover { text-decoration: none; border-color: var(--vurgu); color: var(--vurgu); }
.sayfalama a.etkin {
  background: var(--vurgu); color: #fff; border-color: var(--vurgu); font-weight: 600;
}
.sayfalama .atla { border: 0; background: none; color: var(--soluk); }

.uyari {
  max-width: 1320px; margin: 16px auto; padding: 13px 17px;
  background: var(--mulga-bg); color: var(--mulga-fg);
  border-radius: var(--r); font-size: 14px;
}
.uyari code { display: block; margin-top: 6px; font-size: 12px; opacity: .8; word-break: break-all; }

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.alt { margin-top: 34px; border-top: 1px solid var(--kenar); background: var(--yuzey); }
.alt-ic {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  max-width: 1320px; margin: 0 auto; padding: 20px 24px;
  color: var(--soluk); font-size: 12.5px;
}
.alt-ic p { margin: 0; max-width: 720px; }
.alt-ic strong { color: var(--metin-2); }
.alt-baglantilar { display: flex; gap: 16px; }

/* =====================================================================
   BELGE DETAYI
   ===================================================================== */
.belge { max-width: 1040px; margin: 22px auto; padding: 0 24px; }
.geri { display: inline-block; margin-bottom: 12px; font-size: 13.5px; }

.belge-basi {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r) var(--r) 0 0; border-bottom: 0; padding: 22px 28px;
}
.belge-basi h1 { margin: 11px 0 12px; font-size: 22px; line-height: 1.34; font-weight: 700; letter-spacing: -.01em; }

.kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 20px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--kenar-soft);
}
.kunye div { font-size: 13.5px; }
.kunye dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin-bottom: 2px; }
.kunye dd { margin: 0; font-weight: 500; }

.belge-govde {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: 0 0 var(--r) var(--r); padding: 26px 34px 34px;
  font-size: 15.5px; line-height: 1.78; color: var(--metin-2);
  /* Kaynak HTML üçüncü taraf: kartı aşan bir şey kalırsa sayfa değil kart
     kaydırılsın; kesintisiz uzun dizgiler (URL, dosya adı) satır kırsın. */
  overflow-x: auto; overflow-wrap: break-word;
}
.belge-govde p { margin: 0 0 1em; }
.belge-govde table {
  /* GİB editöründen gelen inline width/height ölçüleri govdeTemizle()'de
     ayıklanıyor; !important gözden kaçan bir varyantın kartı taşırmasına
     ya da içeriği kırpmasına karşı son güvence. */
  width: 100% !important; max-width: 100% !important; height: auto !important;
  border-collapse: collapse; margin: 1.2em 0;
  font-size: 14px; display: block; overflow-x: auto;
}
.belge-govde pre { white-space: pre-wrap; }
.belge-govde td, .belge-govde th { border: 1px solid var(--kenar); padding: 8px 11px; vertical-align: top; }
.belge-govde th { background: var(--bg); font-weight: 600; }
.belge-govde img { max-width: 100%; height: auto; }
.belge-govde ul, .belge-govde ol { margin: 0 0 1em; padding-left: 1.6em; }
.belge-govde a { word-break: break-word; }
.belge-govde h1, .belge-govde h2, .belge-govde h3 {
  font-size: 1.1em; margin: 1.5em 0 .6em; color: var(--metin);
}

.ekler, .ilgili { list-style: none; padding: 0; margin: 0; }
.ekler li, .ilgili li {
  padding: 8px 0; border-bottom: 1px solid var(--kenar-soft); font-size: 13.5px; line-height: 1.45;
}
.ekler li:last-child, .ilgili li:last-child { border-bottom: 0; }
.kucuk { color: var(--soluk); font-size: 12px; }

/* Kanun sayfasındaki madde listesinin bölüm başlıkları ve süzgeci */
.ilgili li.bolum {
  margin: 6px -14px; padding: 7px 14px; border-bottom: 0;
  background: var(--bg); color: var(--soluk); font-weight: 600; font-size: 12.5px;
}
.madde-ara { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.madde-ara input {
  flex: 1 1 auto; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--bg); color: var(--metin); font-family: inherit; font-size: 13.5px;
}
.madde-ara input:focus { outline: none; border-color: var(--vurgu); box-shadow: var(--halka); }
.madde-sayac { flex: 0 0 auto; font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.madde-bos { margin: 10px 0 0; font-size: 13px; color: var(--soluk); }
@media (max-width: 560px) {
  .madde-ara { flex-wrap: wrap; }
  .madde-sayac { order: -1; }
}

.kaynak-not {
  margin-top: 16px; padding: 13px 17px; border-radius: var(--r);
  background: var(--vurgu-bg); color: var(--metin-2); font-size: 13px;
}

/* =====================================================================
   KİTAPLIK — kaydet / favori / not
   ===================================================================== */

/* Belge sayfasındaki eylem çubuğu */
.eylemler {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 14px 0 0; padding-top: 15px; border-top: 1px solid var(--kenar-soft);
}
.eylem {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--yuzey); color: var(--metin-2);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .16s ease;
}
.eylem:hover { text-decoration: none; border-color: var(--vurgu); color: var(--vurgu); background: var(--vurgu-bg); }
.eylem[disabled] { opacity: .55; cursor: progress; }
.eylem .ikon { font-size: 15px; line-height: 1; }
.eylem.etkin { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.eylem.etkin:hover { background: var(--vb-primary-dark); border-color: var(--vb-primary-dark); color: #fff; }
.eylem.favori.etkin { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.eylem.favori.etkin:hover { background: #d97706; border-color: #d97706; color: #fff; }
.eylem-ipucu { margin-left: auto; font-size: 12.5px; color: var(--soluk); }

/* Not paneli */
.not-panel {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r); padding: 16px 18px; margin-top: 16px; box-shadow: var(--golge-xs);
}
.not-panel h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
}
.not-yaz { display: grid; gap: 9px; }
.not-yaz textarea, .not-duzenle textarea {
  width: 100%; min-height: 84px; resize: vertical;
  padding: 11px 13px; border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--bg); color: var(--metin);
  font-family: inherit; font-size: 14px; line-height: 1.6;
}
.not-yaz textarea:focus, .not-duzenle textarea:focus {
  outline: none; border-color: var(--vurgu); box-shadow: var(--halka); background: var(--yuzey);
}
.not-yaz-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dugme {
  padding: 9px 18px; border: 0; border-radius: var(--r-sm);
  background: var(--vurgu); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter .16s ease;
}
.dugme:hover { filter: brightness(1.1); }
.dugme[disabled] { opacity: .6; cursor: progress; }
.dugme.sade {
  background: transparent; color: var(--soluk); border: 1px solid var(--kenar);
}
.dugme.sade:hover { color: var(--metin); border-color: var(--soluk); filter: none; }

.notlar { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.notlar li {
  padding: 13px 15px; border: 1px solid var(--kenar); border-left: 3px solid var(--vurgu);
  border-radius: var(--r-sm); background: var(--bg);
}
.not-metin { margin: 0; font-size: 14px; line-height: 1.62; white-space: pre-wrap; word-wrap: break-word; }
.not-alt {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 9px; font-size: 12px; color: var(--soluk);
}
.not-eylem { display: flex; gap: 4px; }
.not-eylem button {
  padding: 3px 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--soluk); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.not-eylem button:hover { background: var(--vurgu-bg); color: var(--vurgu); }
.not-eylem button.sil:hover { background: var(--mulga-bg); color: var(--mulga-fg); }
.not-duzenle { display: grid; gap: 8px; }
.not-duzenle-alt { display: flex; gap: 6px; }

/* Giriş çağrısı */
.giris-cagri {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding: 16px 20px;
  background: var(--vurgu-bg); border: 1px solid var(--kenar); border-radius: var(--r);
}
.giris-cagri p { margin: 0; font-size: 13.5px; color: var(--metin-2); }
.giris-cagri strong { color: var(--metin); }
.giris-cagri .dugme { white-space: nowrap; }

/* Bildirim baloncuğu */
.bildirim {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  z-index: 90; padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--metin); color: var(--yuzey);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--golge-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.bildirim.gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }
.bildirim.hata { background: var(--mulga-fg); color: #fff; }

/* =====================================================================
   KİTAPLIĞIM SAYFASI
   ===================================================================== */
.kitaplik { max-width: 1040px; margin: 22px auto; padding: 0 24px; }
.kitaplik-basi {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
}
.kitaplik-basi h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.kitaplik-basi p { margin: 0; color: var(--soluk); font-size: 13.5px; }

.sekmeler {
  display: flex; gap: 3px; padding: 4px; margin-bottom: 14px;
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r);
  overflow-x: auto;
}
.sekmeler a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--r-sm);
  color: var(--metin-2); font-size: 13.5px; font-weight: 600;
}
.sekmeler a:hover { text-decoration: none; background: var(--vurgu-bg); color: var(--vurgu); }
.sekmeler a.etkin { background: var(--vurgu); color: #fff; }
.sekmeler a b {
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--soluk);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sekmeler a.etkin b { background: rgba(255, 255, 255, .22); color: #fff; }

.kitaplik-ara { display: flex; gap: 8px; margin-bottom: 16px; }
.kitaplik-ara input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--yuzey); color: var(--metin); font-family: inherit; font-size: 14px;
}
.kitaplik-ara input:focus { outline: none; border-color: var(--vurgu); box-shadow: var(--halka); }

.kitap-kart {
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 15px 17px; margin-bottom: 10px; box-shadow: var(--golge-xs);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kitap-kart:hover { border-color: var(--vb-primary-200, #bfd6f3); box-shadow: var(--golge); }
.kitap-kart h2 { margin: 8px 0 7px; font-size: 15.5px; line-height: 1.42; font-weight: 650; }
.kitap-kart h2 a { color: var(--metin); }
.kitap-kart h2 a:hover { color: var(--vurgu); }
.kitap-notlar {
  margin: 10px 0 0; padding: 11px 13px;
  background: var(--bg); border-left: 3px solid var(--vurgu); border-radius: var(--r-sm);
}
.kitap-notlar p { margin: 0 0 7px; font-size: 13px; line-height: 1.6; color: var(--metin-2); white-space: pre-wrap; }
.kitap-notlar p:last-child { margin-bottom: 0; }
.kitap-alt {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-top: 11px;
  font-size: 12.5px; color: var(--soluk);
}
.yildiz { color: #f59e0b; }