/* ==========================================================================
   layout.css — Ortak yerleşim sistemi
   Bu dosya TEK kaynaktır: kapsayıcı, header, açılır menü, sayfa başlığı,
   bölüm boşlukları ve ızgaralar burada tanımlanır. Sayfa şablonları kendi
   genişlik veya boşluk kuralını yazmaz.
   ========================================================================== */

:root{
  /* Kapsayıcı */
  --container-max: 1200px;
  --container-pad: 24px;

  /* Dikey ritim */
  --section-gap:   44px;   /* bölümler arası */
  --page-head-gap: 28px;   /* sayfa başlığı altı */
  --h1-gap:        12px;

  /* Izgara boşlukları */
  --grid-gap:      16px;
  --grid-gap-lg:   20px;

  /* Yüzeyler — tek düze görünümü kırmak için üç kademe */
  --surface-1:     #F6F3EC;   /* sayfa zemini (ivory) */
  --surface-2:     #FFFDF9;   /* kart: sıcak beyaz */
  --surface-3:     #F0EEE5;   /* ayrışan bölüm: açık bej */
  --surface-4:     #EDF3EE;   /* çok açık yeşilimsi vurgu yüzeyi */

  /* Form denetimleri — tüm site tek ölçü sistemine bağlı */
  --control-h:     48px;
  --control-h-sm:  40px;
  --control-r:     8px;

  /* Hareket */
  --t-fast:        .15s;
  --t-base:        .2s;
  --ease:          cubic-bezier(.4,0,.2,1);

  /* Menü */
  --header-h:      62px;
  --dropdown-w:    244px;
  --z-header:      100;
  --z-dropdown:    120;
}

/* --------------------------------------------------------------- kapsayıcı */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-inline:var(--container-pad);
}

/* Eski .wrap sınıfı aynı sistemi kullanır (header/footer içi) */
.wrap{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-inline:var(--container-pad);
}

/* Kapsayıcı zaten padding verdiği için sayfa gövdesi ek genişlik yaratmaz */
.page-body{width:100%}

/* Son içerik ile footer arasındaki boşluk TEK yerden yönetilir.
   Daha önce buradaki 56px'e footer'ın 56px margin-top'u ekleniyor ve
   ~112px'lik gereksiz boşluk oluşuyordu. */
.page{padding-block:0 32px}

/* ------------------------------------------------------------ sayfa başlığı */
.page-head{margin:0 0 var(--page-head-gap)}
.page-head h1{margin:0 0 var(--h1-gap)}
.page-head .lead,
.page-head .page-lead{margin:0;max-width:68ch;color:var(--muted);
  font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.6}

/* ------------------------------------------------------------------ bölüm */
.section{margin-block:var(--section-gap) 0}
.section:first-of-type{margin-top:calc(var(--section-gap) * .7)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 16px}
.section-head h2{margin:0;font-size:clamp(19px,2.2vw,23px);line-height:1.3}

/* ------------------------------------------------------------------ ızgara */
.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ==========================================================================
   HEADER VE NAVİGASYON
   Menü kuralları YALNIZCA burada tanımlıdır. Başka bir CSS dosyasında
   .site-nav / .nav-sub seçicisi bulunmamalıdır.
   ========================================================================== */
.site-header{
  background:var(--ink);
  border-bottom:1px solid #22332A;
  position:relative;
  z-index:var(--z-header);
}
.site-header .header-inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:36px;                 /* logo, menü ve arama birbirini sıkıştırmasın */
  min-height:var(--header-h);
}

.site-header .brand{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;white-space:nowrap;
  transition:opacity .16s ease;
}
.site-header .brand:hover{opacity:.85}
.site-header .brand-mark{color:#F6F3EC;font-weight:600;font-size:19px;letter-spacing:.1px}
.site-header .brand::before{
  content:"";width:18px;height:20px;flex:none;
  background:
    linear-gradient(var(--gold),var(--gold)) 13px 8px/5px 12px no-repeat,
    linear-gradient(rgba(246,243,236,.72),rgba(246,243,236,.72)) 6.5px 4px/5px 16px no-repeat,
    linear-gradient(#F6F3EC,#F6F3EC) 0 0/5px 20px no-repeat;
}

/* --- üst düzey menü --- */
.site-nav{min-width:0}
.site-nav .nav-list{
  display:flex;align-items:center;justify-content:center;
  gap:6px;list-style:none;margin:0;padding:0;
}
.site-nav .nav-item{position:relative;list-style:none}

.site-nav .nav-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:8px;
  background:none;border:0;cursor:pointer;
  color:#C7D2CA;text-decoration:none;font:inherit;font-size:14.5px;
  white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
  position:relative;
}
.site-nav .nav-link:hover{background:#22332A;color:#fff}

/* Aktif menü: altın alt vurgu — dolu blok yerine daha rafine */
.site-nav .nav-link[aria-current],
.site-nav .nav-link[data-active]{color:#fff}
.site-nav .nav-link[aria-current]::after,
.site-nav .nav-link[data-active]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;border-radius:2px;background:var(--gold);
}

/* --- menü ikonları ---
   Normal durumda ikon ve yazı aynı renkte. Hover'da ikon altın vurgu alır,
   aktif öğede yumuşak köşeli küçük bir kutu içine girer. Metnin altın alt
   çizgisi mevcut sistemle devam eder. */
.site-nav .nav-link__icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:16px;height:16px;
  color:inherit;                       /* yazıyla aynı renk */
  border-radius:7px;
  transition:color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             width var(--t-fast) var(--ease),
             height var(--t-fast) var(--ease);
}
.site-nav .nav-link:hover .nav-link__icon{color:var(--gold)}

/* Aktif öğe: ikon 26×26 kutu içinde, çok hafif amber zeminde */
.site-nav .nav-link[aria-current] .nav-link__icon,
.site-nav .nav-link[data-active] .nav-link__icon{
  width:26px;height:26px;
  margin:-5px 0;                       /* header yüksekliği değişmesin */
  background:rgba(185,151,91,.16);
  color:var(--gold);
}

.nav-caret{opacity:.65;transition:transform .18s ease;flex:none;margin-left:1px}
.has-sub.is-open>.nav-link{background:#22332A;color:#fff}
.has-sub.is-open .nav-caret{transform:rotate(180deg);opacity:1}

/* --- açılır panel: tek sütun, yüzen, parent'a göre konumlu --- */
.site-nav .nav-list ul.nav-sub{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:max-content;
  min-width:240px;
  max-width:min(300px, calc(100vw - 32px));
  z-index:var(--z-dropdown);
  margin:0;padding:6px;
  list-style:none;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(22,34,27,.18);
  /* Kapalı durum: görünmez ama animasyonlanabilir */
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.site-nav .nav-list .has-sub.is-open ul.nav-sub{
  opacity:1;visibility:visible;transform:translateY(0);
}
/* Açılır panelin üstünde ince altın çizgi */
.site-nav .nav-list ul.nav-sub::before{
  content:"";position:absolute;left:12px;right:12px;top:0;
  height:2px;border-radius:0 0 2px 2px;background:var(--gold);opacity:.55;
}

.site-nav .nav-list .has-sub.align-right ul.nav-sub{left:auto;right:0}

.site-nav ul.nav-sub li{position:static;display:block;width:100%}
.site-nav ul.nav-sub a{
  display:block;width:100%;
  padding:9px 12px;border-radius:6px;
  color:var(--text);text-decoration:none;
  font-size:14px;line-height:1.35;white-space:nowrap;border:0;
  transition:background-color .14s ease,color .14s ease;
}
.site-nav ul.nav-sub a:hover{background:var(--surface-3);color:var(--green)}
.site-nav ul.nav-sub a[aria-current]{color:var(--green);font-weight:500;background:#EDF4EF}

/* Hover köprüsü: panel ile buton arasındaki boşlukta fare kaybolmasın */
.site-nav .has-sub::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
  display:none;
}
.site-nav .has-sub.is-open::after{display:block}

/* --- arama: sürekli görünen kutu yerine ikon + panel --- */
.header-search{display:flex;justify-content:flex-end;flex:none}
.search-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  background:none;border:1px solid #33473C;border-radius:8px;
  color:#C7D2CA;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.search-toggle:hover,.search-toggle[aria-expanded="true"]{background:#22332A;color:#fff}

.search-panel{
  background:#1D2C24;
  border-top:1px solid #2C3B33;
  padding-block:12px;
}
.search-panel__form{display:flex;gap:8px;max-width:620px;margin:0 auto}
.search-panel__form input{
  flex:1;min-width:0;height:44px;padding:0 14px;
  border:1px solid #33473C;border-radius:8px;
  background:#16221B;color:#F6F3EC;font:inherit;font-size:15px;
}
.search-panel__form input::placeholder{color:#7B8F82}
.search-panel__form input:focus{outline:2px solid var(--gold);outline-offset:-2px}
.search-panel__form .btn{height:44px;padding-inline:20px;flex:none}

.nav-toggle{display:none}

/* ==========================================================================
   KIRILIM NOKTALARI
   ========================================================================== */

/* 901–1180px: menü metinleri altı öğeyle birlikte satıra sığmıyor.
   Bu bantta ikonlar gizlenir; geniş masaüstünde ve mobil menüde geri gelir. */
@media (max-width:1180px){
  .site-header .header-inner{gap:14px}
  .site-nav .nav-list{gap:4px}
  .site-nav .nav-link{padding:9px 9px;gap:6px;font-size:14px}
  .site-nav .nav-link__icon{display:none}
}

@media (max-width:1024px){
  :root{--container-pad:20px;--section-gap:38px}
  .site-nav .nav-list{gap:2px}
  .site-nav .nav-link{padding:8px 7px;gap:6px;font-size:13.5px}
}

/* --- ≤900px: mobil navigasyon -------------------------------------------
   Grid alanları yerine flex-wrap kullanılır: satır sayısı içeriğe göre
   büyür, sabit yükseklik yoktur, bu yüzden header hiçbir koşulda içeriğin
   üzerine taşamaz. */
@media (max-width:900px){
  .site-header .header-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
    min-height:0;
    height:auto;
    padding-block:10px;
  }

  /* 1. satır: logo solda, hamburger sağda */
  .site-header .brand{flex:1 1 auto;min-width:0}
  .nav-toggle{
    order:1;flex:0 0 44px;
    display:block;width:44px;height:44px;
    background:none;border:1px solid #33473C;border-radius:8px;
    cursor:pointer;position:relative;
    transition:background-color var(--t-fast) var(--ease);
  }
  .nav-toggle:hover{background:#22332A}
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:"";position:absolute;left:12px;width:18px;height:2px;
    background:#F6F3EC;border-radius:2px;
    transition:transform .2s var(--ease),opacity .2s var(--ease);
  }
  .nav-toggle span{top:20px}
  .nav-toggle span::before{top:-6px;left:0}
  .nav-toggle span::after{top:6px;left:0}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

  /* Arama mobilde tamamen gizlenir: header sade ve kompakt kalır */
  .header-search,
  .search-panel{display:none !important}

  /* Hamburger ile açılan dikey menü */
  .site-nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .26s var(--ease);
  }
  .site-nav.is-open{max-height:78vh;overflow-y:auto;padding-block:10px 4px}
  .site-nav .nav-list{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px}
  .site-nav .nav-item{position:static}
  /* İkon ve metin solda yan yana durur; yalnızca açılır menü oku sağa gider.
     (space-between kullanılırsa ikon ile metin iki uca dağılır.) */
  .site-nav .nav-link{
    width:100%;justify-content:flex-start;gap:10px;
    padding:12px;min-height:44px;font-size:15px;border-radius:8px;
  }
  .site-nav .nav-link__icon{display:inline-flex}   /* dar masaüstünde gizlenmişti */
  .site-nav .nav-caret{margin-left:auto}
  .site-nav .nav-link[aria-current]::after,
  .site-nav .nav-link[data-active]::after{left:12px;right:auto;width:20px;bottom:8px}
  /* Mobilde ikon görünür kalır; aktif kutu daha sade ve satır yüksekliğini
     değiştirmeyecek biçimde uygulanır. */
  .site-nav .nav-link[aria-current] .nav-link__icon,
  .site-nav .nav-link[data-active] .nav-link__icon{
    width:24px;height:24px;margin:-4px 0;background:rgba(185,151,91,.14);
  }

  /* Alt menü akordeon: akışa girer, üstte yüzmez */
  .site-nav .nav-list ul.nav-sub{
    position:static;width:auto;min-width:0;max-width:none;
    margin:2px 0 6px 12px;padding-inline:4px;
    background:#1D2C24;border-color:#33473C;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;padding-block:0;
    transition:max-height .24s var(--ease),padding .24s var(--ease);
  }
  .site-nav .nav-list ul.nav-sub::before{display:none}
  .site-nav .nav-list .has-sub.is-open ul.nav-sub{max-height:420px;padding-block:4px}
  .site-nav ul.nav-sub a{
    color:#C7D2CA;min-height:44px;display:flex;align-items:center;
    white-space:normal;font-size:14.5px;
  }
  .site-nav ul.nav-sub a:hover,
  .site-nav ul.nav-sub a[aria-current]{background:#22332A;color:#fff}
  .site-nav .has-sub::after{display:none}

  /* Menü açıkken arka plan kaymasın */
  body.nav-locked{overflow:hidden}
}

@media (max-width:560px){
  :root{--container-pad:16px;--section-gap:32px;--page-head-gap:22px}
}

@media (max-width:380px){
  .site-header .brand-mark{font-size:17px}
}

/* ==========================================================================
   KURUMSAL VE YASAL SAYFALAR — iki kolon
   ========================================================================== */
.doc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:32px;
  align-items:start;
}
.doc-main{max-width:800px}
.doc-main h2{scroll-margin-top:90px}   /* içindekiler bağlantısı başlığı gizlemesin */
.doc-main h2:first-child{margin-top:0}
.doc-updated{
  margin:32px 0 0;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);
}

/* Yan kolon satır yüksekliğini kaplar; yapışkan yığının hareket edeceği
   alan ancak böyle oluşur (align-items:start ile yükseklik içerik kadar
   kalıyordu ve sticky hiç tutmuyordu). */
.doc-side{min-width:0;align-self:stretch;height:100%}

.side-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:16px 18px;
}
/* .side-card--sticky kaldırıldı: yapışkanlık artık .sidebar-stack üzerinde */
.side-card__title{
  margin:0 0 12px;font-size:14px;font-weight:600;color:var(--ink);
  padding-bottom:9px;border-bottom:1px solid var(--line);
}

.side-facts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.side-facts li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--text)}
.side-facts li::before{
  content:"";position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:2px;background:var(--gold);
}

.side-toc{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.side-toc li{font-size:13.8px;line-height:1.45}
.side-toc a{color:var(--text);text-decoration:none}
.side-toc a:hover{color:var(--green);text-decoration:underline}

.side-links{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.side-links a{
  display:block;padding:7px 9px;margin-inline:-9px;border-radius:6px;
  color:var(--text);text-decoration:none;font-size:14px;
}
.side-links a:hover{background:#F1EEE7;color:var(--green)}

.side-dl{margin:0;display:flex;flex-direction:column;gap:12px}
.side-dl dt{font-size:12.5px;color:var(--muted);margin:0 0 3px}
.side-dl dd{margin:0;font-size:14px;line-height:1.5}
.side-dl dd a{color:var(--green);word-break:break-word}

.side-posts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.side-posts li{display:flex;flex-direction:column;gap:3px}
.side-posts a{color:var(--ink);text-decoration:none;font-size:14px;line-height:1.4;font-weight:500}
.side-posts a:hover{color:var(--green)}
.side-posts time{font-size:12.5px;color:var(--muted)}

/* Tablet: yan kolon daralır */
@media (max-width:1024px){
  .doc-layout{grid-template-columns:minmax(0,1fr) 250px;gap:26px}
}

/* Mobil: tek kolon. İçindekiler kartı içeriğin ÜSTÜNE, diğerleri altına. */
@media (max-width:860px){
  .doc-layout{grid-template-columns:1fr;gap:24px}
  .doc-main{max-width:none;order:2}
  .doc-side{order:1;height:auto}
  .doc-side .sidebar-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:560px){
  .doc-side .sidebar-stack{grid-template-columns:1fr}
}

/* ==========================================================================
   FORM BİLEŞEN SİSTEMİ
   Sitedeki tüm girdi alanları bu ölçülere bağlıdır. Tarayıcı varsayılan
   görünümü kaldırılır; yükseklik, köşe yarıçapı ve odak durumu tektir.
   ========================================================================== */
/* [hidden] niteliği, açık bir 'display' değeri taşıyan öğelerde etkisiz kalır
   (ör. .field display:flex). Bu kural onu kesinleştirir; vergi istisnası
   kutusu ve banka notu ancak ilgili sekmede görünür. */
[hidden]{display:none !important}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font-size:13px;font-weight:500;color:var(--muted);line-height:1.3}
.field__hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.field__error{font-size:13px;color:#8C2F26;margin:0}

.control,
.field input[type="text"],
.field input[type="number"],
.field input[type="search"],
.field select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;
  height:var(--control-h);
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:var(--control-r);
  background:var(--surface-2);
  color:var(--text);
  font:inherit;font-size:15.5px;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast) var(--ease),
             box-shadow  var(--t-fast) var(--ease);
}
.control:hover,
.field input:hover,
.field select:hover{border-color:#C3BCAC}
.control:focus,
.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(31,81,58,.14);
}
.control::placeholder{color:#9A9C96}

/* Sağda birim etiketi olan girdi (TL, %, ay) */
.control-affix{position:relative;display:flex;align-items:center}
.control-affix .control{padding-right:52px}
.control-affix__unit{
  position:absolute;right:1px;top:1px;bottom:1px;
  display:flex;align-items:center;padding:0 13px;
  border-left:1px solid var(--line);
  border-radius:0 var(--control-r) var(--control-r) 0;
  background:var(--surface-3);
  color:var(--muted);font-size:13.5px;font-weight:500;
  pointer-events:none;
}

/* Segmented control — kredi türü seçimi */
.segmented-control{
  display:inline-flex;padding:3px;gap:2px;
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:10px;
  width:100%;
}
.segmented-control button{
  flex:1;min-width:0;
  height:calc(var(--control-h) - 8px);
  padding:0 10px;border:0;border-radius:7px;
  background:transparent;color:var(--muted);
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.segmented-control button:hover{color:var(--ink)}
.segmented-control button[aria-checked="true"],
.segmented-control button.is-on{
  background:var(--surface-2);color:var(--green);
  box-shadow:0 1px 3px rgba(22,34,27,.1);
}

/* ==========================================================================
   MİKRO ETKİLEŞİMLER — ölçülü, finans ciddiyetini bozmayan
   ========================================================================== */
.btn{transition:background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}

/* Yükselen kart etkisi */
.lift{transition:transform var(--t-base) var(--ease),
                 border-color var(--t-base) var(--ease),
                 box-shadow var(--t-base) var(--ease)}
.lift:hover{
  transform:translateY(-2px);
  border-color:#C6BFAF;
  box-shadow:0 6px 18px rgba(22,34,27,.08);
}

/* Bölüm başlığında altın vurgu çizgisi */
.section-head h2{position:relative;padding-left:14px}
.section-head h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;
  width:3px;border-radius:2px;background:var(--gold);
}

/* Yüzeyi ayrışan bölüm */
.section--surface{
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px 26px 30px;
}
.section--accent{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:0 0 12px 12px;
  padding:26px;
}

/* Değişen sayısal sonuçta yumuşak geçiş */
[data-out]{transition:color var(--t-base) var(--ease)}
.value-flash{animation:valueFlash .45s var(--ease)}
@keyframes valueFlash{
  0%  {color:var(--gold)}
  100%{color:inherit}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .lift:hover{transform:none}
}

/* ==========================================================================
   BUTON SİSTEMİ
   Aksiyon öğeleri (hesapla, paylaş, yazdır, kart CTA'ları) buton gibi görünür;
   navigasyon bağlantılarından net biçimde ayrışır.
   ========================================================================== */
.btn,
.btn--primary,
.btn--secondary,
.btn--ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 16px;
  border-radius:8px;
  font:inherit;font-size:14.5px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn,
.btn--primary{background:var(--green);border-color:var(--green);color:#fff}
.btn:hover,
.btn--primary:hover{background:#183F2D;border-color:#183F2D;color:#fff}

.btn--secondary{background:var(--surface-4);border-color:#BFD3C6;color:var(--green)}
.btn--secondary:hover{background:#DCE9E0;border-color:#8FAE9B}

.btn--ghost{background:transparent;border-color:var(--green);color:var(--green)}
.btn--ghost:hover{background:var(--surface-4)}

.btn--sm{min-height:34px;padding:0 12px;font-size:13.5px}
.btn:active,.btn--primary:active,.btn--secondary:active,.btn--ghost:active{transform:translateY(1px)}
.btn .icon{transition:transform var(--t-base) var(--ease)}
.btn:hover .icon,
.btn--secondary:hover .icon,
.btn--ghost:hover .icon{transform:translateX(2px)}

/* ==========================================================================
   BAĞLANTI ALT ÇİZGİSİ — global denetim
   Alt çizgi yalnızca içerik metni ve kaynak bağlantılarında kullanılır.
   Kart, CTA ve navigasyon bağlantılarında asla çıkmaz.
   ========================================================================== */
a.bank-card,
a.tool-card,
a.bank-tile,
a.post-card,
a.btn, a.btn--primary, a.btn--secondary, a.btn--ghost,
.nav-link, .nav-sub a, .side-links a, .bank-card *, .tool-card *, .bank-tile *{
  text-decoration:none;
}
a.bank-card:hover,
a.tool-card:hover,
a.bank-tile:hover,
a.post-card:hover,
a.bank-card:hover *,
a.tool-card:hover *,
a.bank-tile:hover *{
  text-decoration:none;
}
/* İçerik metni ve kaynak bağlantılarında alt çizgi korunur */
.prose a:hover,
.post-body a:hover,
.infobox__sources a:hover,
.info-links a:hover,
.rate-sources a:hover{text-decoration:underline}

/* ==========================================================================
   YAPIŞKAN YAN KOLON
   Tek bir dış kapsayıcı sticky olur; kartlar normal akışta alt alta durur.
   Kartların tek tek sticky olması üst üste binmeye yol açıyordu.
   ========================================================================== */
.sidebar-stack{
  display:flex;flex-direction:column;gap:16px;
  position:sticky;
  top:calc(var(--header-h) + 24px);
  max-height:calc(100vh - var(--header-h) - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.sidebar-stack::-webkit-scrollbar{width:6px}
.sidebar-stack::-webkit-scrollbar-thumb{background:#D6D0C2;border-radius:3px}

/* Yapışkanlık yalnızca geniş ekranda; altında normal akış */
@media (max-width:1024px){
  .sidebar-stack{position:static;max-height:none;overflow:visible}
}

/* =============================================================================
   İÇERİK GENİŞLİK SİSTEMİ
   -----------------------------------------------------------------------------
   Sayfa başına ayrı kural yazmak yerine tek yerden yönetilen üç ölçü:

     --measure-head   Sayfa başlığı ve kısa açıklama → container genişliği
     --measure-text   Tek kolonlu sayfalarda uzun metin gövdesi
     --measure-note   Bölüm altı küçük açıklama/uyarı metinleri

   İki kolonlu sayfalarda (rehber, kurumsal/yasal) gövde kolonu kendi ızgara
   hücresini doldurur; genişliği sidebar ve boşluk belirler.

   Yeni bir sayfa eklendiğinde burada tanımlı sınıfları kullanmak yeterlidir;
   ayrıca max-width yazılmamalıdır.
   ============================================================================= */
:root{
  --measure-head: none;      /* başlık/açıklama: container'ı doldurur */
  --measure-text: 1000px;    /* uzun metin gövdesi */
  --measure-note: none;      /* küçük açıklama metinleri: container genişliği */
}

/* --- 1) Sayfa başlığı ve kısa açıklama: container genişliği --------------- */
.page-head h1,
.page-head .page-lead,
.guide-head h1,
.guide-head .lead,
.post-head .lead,
.bank-hero__desc{ max-width: var(--measure-head); }

/* --- 2) Uzun metin gövdesi -------------------------------------------------
   Taban kural main.css içindedir: .prose { max-width: var(--measure-text) }
   Böylece .prose nerede kullanılırsa kullanılsın aynı ölçüye uyar; sayfa
   başına ayrı seçici yazmak gerekmez. */

/* --- 3) İki kolonlu sayfalarda gövde kendi hücresini doldurur -------------
   min-width:0 zorunludur: ızgara öğelerinin varsayılan min-width:auto değeri,
   içerideki geniş bir öğenin (tablo, kod bloğu) kolonu şişirmesine ve dar
   ekranda yatay taşmaya yol açar. */
.guide-main,
.doc-main,
.post-body{ max-width: none; min-width: 0; }

/* --- 4) Bölüm açıklamaları ve alt notlar ---------------------------------- */
.section-intro,
.cmp-intro,
.cmp-note,
.rate-sources,
.trademark-note,
.about-calc p,
.infobox__col p{ max-width: var(--measure-note); }

/* --- 5) Kırılımlar: dar ekranda kolon zaten daralır, sınır kalkar --------- */
@media (max-width:1024px){
  :root{ --measure-text: 100%; }
}