/* hesapdondurma.com — teknik kılavuz / kullanım kılavuzu estetiği
   kâğıt zemin, sert siyah çerçeveler, tehlike bandı, mono etiketler */
:root{
  --paper:#f4f1e8; --card:#fdfcf7; --ink:#161511; --ink2:#5f594b;
  --yl:#ffd200; --rd:#c92f0f;
  --bd:2px solid var(--ink); --sh:5px 5px 0 var(--ink);
  --sans:"Archivo",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.6;
  background:var(--paper);
  background-image:radial-gradient(rgba(22,21,17,.07) 1px,transparent 1px);
  background-size:22px 22px}
a{color:var(--ink)}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.01em}

/* header — siyah şerit */
.top{background:var(--ink);border-bottom:5px solid var(--yl);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px max(24px,calc((100% - 1020px)/2))}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--paper);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.brand svg{width:32px;height:32px;flex:none}
.brand b{color:var(--yl)}
.brand .tld{color:#8d8776;font-weight:700;font-size:.8em}
.top nav{display:flex;gap:7px;flex-wrap:wrap}
.top nav a{font-family:var(--mono);text-transform:uppercase;font-size:.72rem;
  color:var(--paper);text-decoration:none;border:1px solid #4a463c;padding:6px 10px;transition:.12s}
.top nav a:hover{background:var(--yl);color:var(--ink);border-color:var(--yl)}
@media(max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:10px}
}

.wrap{max-width:1020px;margin:0 auto;padding:8px 22px 60px}

/* hero — kılavuz kapağı */
.hero{position:relative;padding:38px 0 8px}
.doc-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink2);
  border-bottom:var(--bd);padding-bottom:10px;margin:0 0 22px}
.hero h1{font-size:clamp(2.2rem,6vw,3.9rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;margin:0 0 16px;max-width:15ch}
.hero h1 mark{background:var(--yl);padding:0 .1em;box-shadow:inset 0 -2px 0 var(--ink)}
.hero .lede{max-width:58ch;color:var(--ink2);font-size:1.04rem;margin:0}
.stamp{position:absolute;right:0;top:110px;font-family:var(--mono);font-weight:700;
  font-size:.8rem;letter-spacing:.12em;text-align:center;line-height:1.7;
  color:var(--rd);border:3px double var(--rd);padding:10px 16px;transform:rotate(7deg);opacity:.8}
@media(max-width:760px){.stamp{display:none}}

/* süre şeridi */
.ticker{margin:28px 0 4px;background:var(--card);border:var(--bd);box-shadow:var(--sh);padding:0}
.ticker ul{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0}
.ticker li{display:flex;flex-direction:column;padding:12px 18px;border-right:var(--bd);flex:1 1 auto}
.ticker li span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink2)}
.ticker li strong{font-weight:900;font-size:.95rem}
.tick-src{margin:0;padding:6px 18px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;color:var(--ink2);border-top:var(--bd);background:var(--paper)}

/* fihrist */
.idx{margin-top:40px}
.idx-h{display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:1.35rem;font-weight:900;text-transform:uppercase;letter-spacing:.01em;scroll-margin-top:20px}
.idx-h span{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  background:var(--ink);color:var(--yl);padding:4px 9px;flex:none}
.rows{border:var(--bd);background:var(--card);box-shadow:var(--sh)}
.row{--c:var(--ink);display:flex;align-items:center;gap:14px;padding:13px 16px;
  text-decoration:none;color:var(--ink);border-bottom:var(--bd);transition:background .1s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--yl)}
.no{font-family:var(--mono);font-size:.74rem;color:var(--ink2);width:22px;flex:none}
.row .tile{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--c);color:#fff;font-weight:900;font-size:.82rem;border:2px solid var(--ink)}
.row-t{min-width:0}
.row-t strong{display:block;font-weight:700;font-size:.98rem}
.row-t em{font-style:normal;color:var(--ink2);font-size:.83rem;display:block}
.arr{margin-left:auto;font-weight:900;font-size:1.1rem;flex:none}
@media(max-width:560px){.row-t em{display:none}.no{display:none}}

/* rehber sayfası */
.crumb{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink2);margin:16px 0 0}
.crumb a{text-decoration:none;color:var(--ink2)}
.g-head{padding:10px 0 4px}
.g-head h1{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.015em;margin:0 0 12px}
.g-head .lede{max-width:62ch;color:var(--ink2);font-size:1.02rem;margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chip{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
  border:1.5px solid var(--ink);background:var(--card);padding:5px 10px}

/* kısa cevap kutusu */
.quick{margin:22px 0 8px;border:var(--bd);background:var(--card);box-shadow:var(--sh);padding:0 0 18px}
.q-label{margin:0;padding:8px 18px;background:var(--ink);color:var(--yl);
  font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.quick>p:not(.q-label){margin:14px 18px 0}
.btn{display:inline-block;margin:16px 18px 0;background:var(--ink);color:var(--yl);
  text-decoration:none;font-family:var(--mono);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;padding:11px 18px;
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--yl);transition:.12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--yl)}

/* adımlar */
.sect-h{font-size:1.2rem;font-weight:900;text-transform:uppercase;margin:34px 0 10px;
  border-left:8px solid var(--yl);padding-left:12px}
.steps{list-style:none;counter-reset:s;margin:10px 0 4px;padding:0;
  border:var(--bd);background:var(--card);box-shadow:var(--sh)}
.steps li{counter-increment:s;position:relative;padding:14px 18px 14px 70px;border-bottom:var(--bd)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;bottom:0;
  width:52px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:1rem;
  background:var(--paper);border-right:2px dashed var(--ink)}

/* uyarı kutusu — tehlike bandı */
.warn{margin:26px 0;border:var(--bd);background:var(--card);box-shadow:var(--sh);padding:0 0 16px}
.warn::before{content:"";display:block;height:14px;border-bottom:var(--bd);
  background:repeating-linear-gradient(-45deg,var(--yl) 0 12px,var(--ink) 12px 24px)}
.warn .q-label{background:transparent;color:var(--rd);padding:12px 18px 0}
.warn ul{margin:8px 0 0;padding:0 18px 0 36px}
.warn li{margin:6px 0}

/* düzyazı */
.prose{max-width:70ch}
.prose h2{font-size:1.2rem;font-weight:900;text-transform:uppercase;margin:32px 0 8px;
  border-left:8px solid var(--yl);padding-left:12px}
.prose p,.prose li{color:#3a362c}
.prose ul{padding-left:20px}

/* karşılaştırma tablosu */
.tbl-scroll{overflow-x:auto;margin:14px 0}
.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:.88rem;
  background:var(--card);border:var(--bd);box-shadow:var(--sh)}
.cmp th,.cmp td{padding:9px 13px;text-align:left;border-bottom:1px solid #c9c3b2}
.cmp th{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border-bottom:var(--bd)}
.cmp tr:last-child td{border-bottom:none}
.cmp td a{white-space:nowrap}

/* sss */
.sect{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);margin:36px 0 12px}
.faq{margin-top:8px}
.faq details{background:var(--card);border:var(--bd);margin-bottom:-2px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;position:relative;padding-right:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:10px;
  font-family:var(--mono);font-weight:700;font-size:1.3rem;transition:.12s}
.faq details[open]{background:var(--paper)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:#3a362c}

.disclaimer{margin-top:32px;font-family:var(--mono);font-size:.68rem;line-height:1.7;
  color:var(--ink2);border-top:2px dashed var(--ink);padding-top:14px}
.related{margin-top:28px}

/* footer */
.foot{background:var(--ink);color:#b5af9e;margin-top:44px;border-top:5px solid var(--yl)}
.foot .inner{max-width:1020px;margin:0 auto;padding:38px 22px 20px;
  display:grid;grid-template-columns:1fr 2fr;gap:30px}
@media(max-width:760px){.foot .inner{grid-template-columns:1fr}}
.foot .brand{color:var(--paper)}
.foot .brand b{color:var(--yl)}
.foot p{font-size:.85rem}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.foot h4{margin:0 0 8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7d776a}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:4px 0}
.foot a{color:#b5af9e;text-decoration:none;font-size:.85rem}
.foot a:hover{color:var(--yl)}
.fine{max-width:1020px;margin:0 auto;padding:14px 22px 26px;font-family:var(--mono);
  font-size:.62rem;line-height:1.8;color:#7d776a;border-top:1px solid #33302a}
.fine a{color:#a29c8b}
.madeby{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid #4a463c;letter-spacing:.1em}
.madeby a{color:var(--yl);text-decoration:none}
.madeby a:hover{text-decoration:underline}