/* ============================================================
   HESAP CETVELİ — TASARIM SİSTEMİ
   Tek renk paleti, tek tipografi ölçeği. Tüm sayfalar bunu kullanır.
   ============================================================ */

:root{
  --kagit:#F5F4EF;
  --kart:#FFFFFF;
  --cizgi:#E2E0D6;
  --cizgi-ince:#EFEDE5;
  --murekkep:#1A2320;
  --soluk:#6E7770;
  --koyu:#171E1A;
  --koyu-2:#232B26;
  --koyu-3:#2E3830;
  --serit:#E8EDE8;
  --vurgu:#B4342B;
  --turuncu:#E3841F;
  --olumlu:#2F6B4F;
  --uyari-zemin:#FAF3DE;
  --uyari-cizgi:#C9A227;
  --alarm-zemin:#FBEDED;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:4px;
  --en:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kagit);color:var(--murekkep);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,44px)}
h2{font-size:clamp(22px,2.6vw,28px)}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--murekkep);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Klavyeyle gezinenler ve ekran okuyucular için: menüyü atlayıp içeriğe git */
.atla{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--koyu);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;
  font-size:14px;text-decoration:none
}
.atla:focus{left:0}

/* Odak halkası — klavye kullanıcıları nerede olduklarını görsün */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--uyari-cizgi);outline-offset:2px
}
.kap{max-width:var(--en);margin:0 auto;padding:0 20px}
.etiket{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soluk)}
.rakam{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- üst çubuk ---------- */
.ust{background:var(--koyu);color:#EDEFEA;position:sticky;top:0;z-index:40}
.ust-ic{max-width:var(--en);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;height:58px}
.marka{font-family:var(--serif);font-size:20px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}

/* Markadaki "i" harfinin noktası turuncu.
   Yöntem: alta noktalı "i" turuncu yazılır, üstüne noktasız "ı" marka renginde
   bindirilir. Geriye yalnızca turuncu nokta görünür. Font metriklerine bağlı
   değildir; hangi yazı tipi kullanılırsa kullanılsın tam oturur. */
.marka .nokta{position:relative;color:var(--turuncu)}
.marka .nokta::after{
  content:attr(data-ustu);position:absolute;left:0;top:0;
  color:var(--marka-renk,#fff)
}
.ust-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.ust-nav a{
  color:#B9C0B8;text-decoration:none;font-size:13.5px;padding:7px 11px;border-radius:var(--r);
  white-space:nowrap;transition:.15s
}
.ust-nav a:hover{background:var(--koyu-2);color:#fff}
.ust-nav a[aria-current]{background:var(--koyu-3);color:#fff;font-weight:500}
.ust-nav a.tumu{opacity:.7}

/* ---------- mobil menü düğmesi ---------- */
.menu-dugme{
  display:none;margin-left:auto;background:transparent;border:0;
  width:44px;height:44px;padding:10px;flex-direction:column;justify-content:space-between
}
.menu-dugme span{
  display:block;height:2px;background:#EDEFEA;border-radius:2px;
  transition:transform .2s ease,opacity .15s ease
}
.menu-dugme[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-dugme[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-dugme[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- mobil menü paneli ---------- */
.mobil-menu{
  position:fixed;inset:58px 0 0;z-index:39;background:var(--kagit);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease
}
.mobil-menu[hidden]{display:none}
.mobil-menu.acik{transform:none;opacity:1;pointer-events:auto}
.mm-ic{padding:8px 20px calc(40px + env(safe-area-inset-bottom))}
.mm-ic section{padding:16px 0;border-bottom:1px solid var(--cizgi)}
.mm-ic section:last-child{border-bottom:0}
.mm-ic h2{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soluk);font-weight:400;margin-bottom:6px
}
.mm-ic ul{list-style:none;padding:0;margin:0}
.mm-ic li a{
  display:block;padding:12px 0;font-size:16px;color:var(--murekkep);
  text-decoration:none;border-bottom:1px solid var(--cizgi-ince)
}
.mm-ic li:last-child a{border-bottom:0}
.mm-ic li a[aria-current]{color:var(--turuncu);font-weight:500}
.mm-ic li a[aria-current]::after{content:" •";color:var(--turuncu)}
body.menu-acik{overflow:hidden}

@media(max-width:900px){
  .ust-nav{display:none}
  .menu-dugme{display:flex}
}
@media(min-width:901px){
  .mobil-menu{display:none!important}
}
@media print{.menu-dugme,.mobil-menu{display:none!important}}

/* ---------- sayfa başlığı ---------- */
.baslik{padding:34px 0 22px;border-bottom:1px solid var(--cizgi)}
.baslik h1{margin:8px 0 10px}
.baslik .ozet{color:var(--soluk);max-width:62ch;margin:0}
.iz{font-family:var(--mono);font-size:11px;color:var(--soluk);letter-spacing:.06em}
.iz a{color:var(--soluk)}

/* ---------- hesap düzeni ---------- */
.duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:26px 0}
@media(max-width:900px){.duzen{grid-template-columns:1fr;gap:16px}}

.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r)}
.kart-bas{
  background:var(--serit);border-bottom:1px solid var(--cizgi);
  padding:11px 16px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#3D4A42;
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.kart-ic{padding:18px 16px}

/* ---------- form ---------- */
.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alanlar.tek{grid-template-columns:1fr}
@media(max-width:560px){.alanlar{grid-template-columns:1fr}}
.alan{display:block;min-width:0}
.alan>span{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
.alan .ipucu{display:block;font-size:11.5px;color:var(--soluk);font-weight:400;margin-top:3px;line-height:1.45}
.kutu{
  display:flex;align-items:center;border:1px solid var(--cizgi);border-radius:var(--r);
  background:#FCFCFA;height:44px;padding:0 11px;gap:8px
}
.kutu:focus-within{border-color:var(--koyu);box-shadow:0 0 0 3px rgba(23,30,26,.08)}
.kutu input,.kutu select{
  border:0;background:transparent;outline:0;width:100%;min-width:0;
  font-family:var(--mono);font-size:15px
}
.kutu select{font-family:var(--sans);cursor:pointer}
.kutu .birim{font-family:var(--mono);font-size:12px;color:var(--soluk);white-space:nowrap}

/* seçim şeridi (brütten nete / netten brüte) */
.secim{display:flex;border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;background:#FCFCFA}
.secim button{
  flex:1;border:0;background:transparent;padding:10px 8px;font-size:13.5px;color:var(--soluk);
  border-right:1px solid var(--cizgi)
}
.secim button:last-child{border-right:0}
.secim button[aria-pressed="true"]{background:var(--koyu);color:#fff;font-weight:500}

/* detay aç/kapa */
.detay{margin-top:16px;border-top:1px dashed var(--cizgi);padding-top:14px}
.detay-dugme{
  display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soluk)
}
.detay-dugme:hover{color:var(--murekkep)}
.detay-dugme .isaret{
  width:17px;height:17px;border:1px solid var(--cizgi);border-radius:2px;
  display:grid;place-items:center;font-size:12px;line-height:1;background:#fff
}
.detay-govde{margin-top:14px}
.gizli{display:none!important}

.dugmeler{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.dgm{
  border:1px solid var(--koyu);background:var(--koyu);color:#fff;
  padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:500
}
.dgm:hover{background:#0F1512}
.dgm.ikinci{background:transparent;color:var(--murekkep);border-color:var(--cizgi)}
.dgm.ikinci:hover{background:#F0EFE9}
.dgm.kucuk{padding:7px 12px;font-size:12.5px}

/* ---------- sonuç ---------- */
.sonuc-bas{padding:18px 16px 16px;border-bottom:1px solid var(--cizgi-ince)}
.sonuc-buyuk{
  font-family:var(--mono);font-size:clamp(30px,5vw,40px);font-weight:600;
  letter-spacing:-.02em;line-height:1.1;margin-top:4px
}
.sonuc-alt{font-size:13px;color:var(--soluk);margin-top:6px}
.satir{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--cizgi-ince);font-size:14px}
.satir:last-child{border-bottom:0}
.satir>span{color:var(--soluk)}
.satir>b{font-family:var(--mono);font-weight:500;white-space:nowrap}
.satir.eksi>b{color:var(--vurgu)}
.satir.ana{border-top:2px solid var(--murekkep);border-bottom:0;margin-top:6px;padding-top:11px;font-size:15px}
.satir.ana>span{color:var(--murekkep);font-weight:500}
.satir.ana>b{font-size:17px;font-weight:600}

.bos{padding:52px 22px;text-align:center;color:var(--soluk)}
.bos .im{font-family:var(--serif);font-size:34px;color:#C5C9C2;margin-bottom:8px}

/* ---------- tablolar ---------- */
/* Tablolar sonucun ALTINDA, sayfa genişliğinde durur — dar sütuna sıkışmaz. */
.tablo-tam{margin-top:22px}
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
/* Taşma varsa sağ kenarda yumuşak gölge: devamı olduğunu gösterir */
.tablo-tam{position:relative}
.tablo-tam.tasan::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:30px;pointer-events:none;
  background:linear-gradient(to left,rgba(23,30,26,.13),rgba(23,30,26,0));
  border-radius:0 var(--r) var(--r) 0
}
.kaydir-ipucu{
  padding:8px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--soluk);background:#FBFAF6;border-bottom:1px solid var(--cizgi-ince)
}
table.veri{font-size:14px;width:100%}
table.veri th{
  text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soluk);font-weight:400;padding:11px 14px;border-bottom:1px solid var(--cizgi);white-space:nowrap
}
table.veri th:first-child,table.veri td:first-child{text-align:left}
table.veri td{
  padding:10px 14px;border-bottom:1px solid var(--cizgi-ince);text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap
}
table.veri td:first-child{font-family:var(--sans)}
/* İlk sütun kaydırırken sabit kalsın — hangi satırda olduğunuz kaybolmasın */
table.veri th:first-child,table.veri td:first-child{
  position:sticky;left:0;background:var(--kart);z-index:2
}
table.veri tbody tr:hover td{background:#FAFAF7}
table.veri tbody tr:hover td:first-child{background:#FAFAF7}
table.veri tr.gecis td{background:var(--uyari-zemin)}
table.veri tr.secili td{background:#FAFAF7;font-weight:600}
table.veri tfoot td{border-top:2px solid var(--murekkep);border-bottom:0;font-weight:600;background:#FAFAF7}
/* Dar ekranda ikincil sütunları gizle — çoğu tablo kaydırmasız sığar */
@media(max-width:640px){
  .mobil-gizle{display:none}
  table.veri{font-size:13px}
  table.veri th,table.veri td{padding:9px 10px}
}

/* tablo kartlarının alt çubuğu */
.tablo-alt{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:12px 16px;border-top:1px solid var(--cizgi-ince);background:#FCFCFA
}
.tablo-alt:empty{display:none}
@media(max-width:640px){
  .tablo-alt{padding:11px 14px}
  .tablo-alt .dgm{flex:1;justify-content:center}
}

/* ---------- bilgi kutuları ---------- */
.not{border-left:3px solid var(--uyari-cizgi);background:var(--uyari-zemin);padding:13px 15px;font-size:13.5px;line-height:1.6;border-radius:0 var(--r) var(--r) 0}
.not.alarm{border-left-color:var(--vurgu);background:var(--alarm-zemin)}
.not.sade{border-left-color:var(--cizgi);background:#FAFAF7}
.not b{display:block;margin-bottom:2px}
.not+.not{margin-top:10px}

/* ---------- reklam alanları ---------- */
/* Reklam gelmeden ÖNCE de yer kaplar; böylece reklam yüklendiğinde
   sayfa zıplamaz (CLS cezası yenmez). Boşken görünmezdir.        */
/* Reklam YOKKEN alan yer kaplamaz — boş boşluk oluşmaz.
   Reklam yayına alındığında (body.reklam-var) yükseklik ayrılır ve
   reklam yüklenince sayfa zıplamaz. */
.reklam{display:block;margin:0 auto;text-align:center;overflow:hidden;max-width:100%}
.reklam:not(:empty){margin:22px auto}

body.reklam-var .reklam,
body.reklam-goster .reklam{margin:22px auto}
body.reklam-var .reklam[data-yer="ust"],
body.reklam-goster .reklam[data-yer="ust"]{min-height:100px}
body.reklam-var .reklam[data-yer="sonuc-alti"],
body.reklam-goster .reklam[data-yer="sonuc-alti"]{min-height:280px}
body.reklam-var .reklam[data-yer="icerik"],
body.reklam-goster .reklam[data-yer="icerik"]{min-height:280px}
body.reklam-var .reklam[data-yer="alt"],
body.reklam-goster .reklam[data-yer="alt"]{min-height:100px}
body.reklam-var .reklam[data-yer="yan"],
body.reklam-goster .reklam[data-yer="yan"]{min-height:600px;margin:0}
@media(min-width:900px){
  body.reklam-var .reklam[data-yer="ust"],
  body.reklam-goster .reklam[data-yer="ust"]{min-height:90px}
}
@media(max-width:899px){
  .reklam[data-yer="yan"]{display:none}
}
/* Geliştirme modunda alanları göstermek için body'ye .reklam-goster ekleyin */
.reklam-goster .reklam{
  border:1px dashed #C9C6B8;background:repeating-linear-gradient(45deg,#FAFAF7,#FAFAF7 8px,#F2F1EA 8px,#F2F1EA 16px);
  display:grid;place-items:center;color:#A9A79A;font-family:var(--mono);font-size:11px;letter-spacing:.1em
}
.reklam-goster .reklam::after{content:attr(data-yer)" — reklam alanı"}

/* ---------- içerik (SEO metni) ---------- */
.icerik{padding:8px 0 40px}
.icerik>p,.icerik>ul,.icerik>ol,.icerik>h2,.icerik>h3,.icerik>.sss{max-width:74ch}
.icerik h2{margin:34px 0 12px}
.icerik h3{margin:22px 0 8px;font-size:17px}
.icerik ul,.icerik ol{padding-left:20px;margin:0 0 1em}
.icerik li{margin-bottom:6px}
.icerik .tablo-sar{border:1px solid var(--cizgi);border-radius:var(--r);background:var(--kart);margin:0 0 1em}
.icerik table.veri{width:100%;font-size:13.5px}
.sss details{border-bottom:1px solid var(--cizgi);padding:13px 0}
.sss summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";font-family:var(--mono);color:var(--soluk)}
.sss details[open] summary::after{content:"–"}
.sss details p{margin:9px 0 0;color:#3E4A43;font-size:14.5px}

/* ---------- araç ızgarası ---------- */
.izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.izgara{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.izgara{grid-template-columns:1fr}}
a.arac{
  display:block;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:18px 17px;text-decoration:none;transition:.15s
}
a.arac:hover{border-color:var(--koyu);transform:translateY(-1px)}
a.arac h3{margin:7px 0 5px;font-size:18px}
a.arac p{margin:0;font-size:13.5px;color:var(--soluk);line-height:1.55}
a.arac.yakinda{opacity:.55;pointer-events:none}
.rozet{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--vurgu)}

/* ---------- alt bilgi ---------- */
.alt{background:var(--koyu);color:#A8B0A9;margin-top:40px;padding:34px 0 26px;font-size:13.5px}
.alt a{color:#D6DAD4}
.alt-ic{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px}
@media(max-width:900px){.alt-ic{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:600px){.alt-ic{grid-template-columns:1fr;gap:18px}}
.alt h4{color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:10px}
.alt ul{list-style:none;padding:0;margin:0}
.alt li{margin-bottom:6px}
.alt .kucuk{font-size:12px;color:#7E8781;margin-top:22px;border-top:1px solid #2A332C;padding-top:16px}

/* ---------- yazdırma ---------- */
@media print{
  .ust,.alt,.reklam,.dugmeler,.detay-dugme,.tablo-alt,#onizlemeSerit{display:none!important}
  body{background:#fff}
  .kart{border:1px solid #999;break-inside:avoid}
  .tablo-sar{overflow:visible}
  .mobil-gizle{display:table-cell}
  table.veri{font-size:10pt}
  table.veri tr{break-inside:avoid}
}


/* ============================================================
   MOBİL UYUM
   ============================================================ */

/* iOS, 16px'ten küçük yazılı bir alana dokunulduğunda sayfayı
   otomatik yakınlaştırır ve düzeni bozar. Alan yazıları 16px olmalı. */
@media(max-width:900px){
  .kutu{height:50px;padding:0 13px}
  .kutu input,.kutu select{font-size:16px}
  .alan>span{font-size:14px}
  .secim button{padding:13px 8px;font-size:14px}
}

/* Sayı alanlarındaki artır/azalt okları yer kaplıyor ve dokunmatikte işe yaramıyor */
.kutu input[type=number]{-moz-appearance:textfield}
.kutu input[type=number]::-webkit-outer-spin-button,
.kutu input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kutu input[type=date]{min-width:0}

/* Dokunma hedefleri ve geri bildirim */
button,summary,a.arac{-webkit-tap-highlight-color:rgba(23,30,26,.06)}
.dgm{min-height:46px}
.sss summary{padding:6px 0;min-height:44px;align-items:center}
.detay-dugme{min-height:44px}

/* Üst menü: kaydırılabilir olduğunu belli et */
.ust-ic{position:relative}


/* Başlık ve boşluklar dar ekranda sıkışsın */
@media(max-width:640px){
  .kap{padding:0 16px}
  .baslik{padding:22px 0 16px}
  .duzen{padding:18px 0}
  .kart-ic{padding:16px 14px}
  .sonuc-bas{padding:16px 14px 14px}
  .icerik h2{margin:28px 0 10px}
  .alt{padding:28px 0 22px}
}

/* Düğmeler: birincil tam genişlik, diğerleri eşit paylaşsın */
@media(max-width:640px){
  .dugmeler{gap:8px}
  .dugmeler .dgm:first-child{flex:1 0 100%}
  .dugmeler .dgm.ikinci{flex:1;padding:11px 8px;font-size:13px;white-space:nowrap}
}

/* ---------- mobil özet çubuğu ----------
   Telefonda form uzun olduğu için sonuç ekranın dışında kalıyor.
   Bu çubuk sonucu her zaman görünür tutar; sonuç kartı ekrana
   girdiğinde kendiliğinden kaybolur. */
#mobilOzet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--koyu);color:#fff;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:14px;
  box-shadow:0 -3px 16px rgba(23,30,26,.22);
  transform:translateY(100%);transition:transform .22s ease
}
#mobilOzet.acik{transform:translateY(0)}
body.cerez-acik #mobilOzet{bottom:104px}
#mobilOzet .mo-sol{flex:1;min-width:0}
#mobilOzet .mo-etiket{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA69C;display:block;margin-bottom:2px
}
#mobilOzet .mo-deger{
  font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block
}
#mobilOzet button{
  background:#fff;color:var(--koyu);border:0;border-radius:var(--r);
  padding:11px 15px;font-size:13.5px;font-weight:500;white-space:nowrap;min-height:44px
}
@media(min-width:901px){#mobilOzet{display:none!important}}
@media(max-width:900px){
  #mobilOzet{display:flex}
  /* çubuk son içeriği kapatmasın */
  .alt{padding-bottom:calc(26px + 76px)}
}

@media print{
  #mobilOzet{display:none!important}
}