/* =========================================================
   TEKİN MATBAA — BÜTÇE VE MALİYET HESAPLAYICI
   ========================================================= */

.hesap-alani{padding:36px 0 80px}
.hesap-duzen{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start}

/* ---------- ürün sekmeleri ---------- */
.hesap-urunler{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hurun{display:flex;align-items:center;gap:9px;background:var(--kagit-2);border:1px solid var(--cizgi);
  border-radius:100px;padding:9px 16px 9px 9px;cursor:pointer;font-size:14px;font-weight:500;
  transition:border-color var(--gecis),background var(--gecis),color var(--gecis)}
.hurun__kanal{width:22px;height:22px;border-radius:50%;background:var(--nokta);color:#fff;display:grid;
  place-items:center;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700}
.hurun:hover{border-color:var(--nokta)}
.hurun--aktif{background:var(--murekkep);color:#fff;border-color:var(--murekkep);font-weight:600}

/* ---------- sol kolon ---------- */
.hesap-sol{background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:var(--r);padding:28px 30px 30px}
.hesap-baslik{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--cizgi)}
.hesap-baslik h2{font-size:26px;font-weight:700}
.hesap-baslik p{color:var(--murekkep-60);font-size:14.5px;margin-top:4px}

.halan{margin-bottom:24px}
.halan__ad{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--murekkep-40);margin-bottom:10px}
.halan__ipucu{display:block;font-size:12.5px;color:var(--murekkep-40);margin-top:8px}

/* adet ve sayfa */
.hadet{display:flex;align-items:center;gap:16px}
.hadet input[type="range"]{flex:1;accent-color:var(--nokta);height:4px}
.hadet__giris{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.hadet__giris input{width:110px;padding:9px 11px;border:1px solid var(--cizgi);border-radius:var(--r);
  font:inherit;font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;text-align:right;background:var(--kagit)}
.hadet__giris input:focus{outline:none;border-color:var(--nokta);background:#fff}
.hadet__giris span{font-size:13px;color:var(--murekkep-40)}
.hadet__kademe{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hkademe{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r);padding:6px 12px;
  cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:12px;transition:all var(--gecis)}
.hkademe:hover{border-color:var(--nokta)}
.hkademe--aktif{background:var(--nokta);border-color:var(--nokta);color:#fff;font-weight:700}

/* tekli seçim */
.hsecim{display:flex;flex-wrap:wrap;gap:7px}
.hsec{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r);padding:9px 14px;cursor:pointer;
  font-size:13.5px;transition:all var(--gecis)}
.hsec b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--murekkep-40);margin-left:4px}
.hsec:hover{border-color:var(--nokta)}
.hsec--aktif{background:var(--murekkep);border-color:var(--murekkep);color:#fff;font-weight:600}
.hsec--aktif b{color:#a9a9b4}

/* çoklu seçim */
.hkutucuklar{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.hkutu{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:var(--r);cursor:pointer;font-size:13.5px;
  transition:border-color var(--gecis),background var(--gecis)}
.hkutu input{margin-top:3px;accent-color:var(--nokta)}
.hkutu span{display:flex;flex-direction:column;gap:2px}
.hkutu i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--murekkep-40)}
.hkutu:has(input:checked){background:var(--kagit-2);border-color:var(--nokta)}
.hkutu:has(input:checked) i{color:var(--nokta)}

/* paketler */
.hpaketler{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.hpaket{text-align:left;background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:16px 16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:all var(--gecis)}
.hpaket strong{font-family:"Archivo",sans-serif;font-size:17px}
.hpaket b{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--nokta)}
.hpaket span{font-size:12.5px;color:var(--murekkep-60);line-height:1.4}
.hpaket i{font-style:normal;font-size:11px;color:var(--murekkep-40);font-family:"JetBrains Mono",monospace}
.hpaket:hover{border-color:var(--nokta)}
.hpaket--aktif{background:var(--kagit-2);border-color:var(--nokta);box-shadow:inset 0 3px 0 var(--nokta)}

/* ---------- grafik ---------- */
.hgrafik__bas{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:30px 0 14px;padding-top:24px;border-top:1px solid var(--cizgi)}
.hgrafik__bas h3{font-size:17px}
.hgrafik__bas span{font-size:12.5px;color:var(--murekkep-40)}
.hgrafik{display:flex;align-items:flex-end;gap:8px;height:190px}
.hcubuk{flex:1;height:100%;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:6px;padding:0;position:relative}
.hcubuk__dolgu{width:100%;background:var(--cizgi);border-radius:2px 2px 0 0;transition:background var(--gecis),height 260ms cubic-bezier(.2,.7,.2,1)}
.hcubuk:hover .hcubuk__dolgu{background:var(--murekkep-40)}
.hcubuk--aktif .hcubuk__dolgu{background:var(--nokta)}
.hcubuk__birim{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--murekkep-40);white-space:nowrap}
.hcubuk--aktif .hcubuk__birim{color:var(--murekkep);font-weight:700}
.hcubuk__adet{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--murekkep-60);padding-top:6px;
  border-top:1px solid var(--cizgi);width:100%}
.hcubuk--aktif .hcubuk__adet{color:var(--murekkep);font-weight:700}
.hcubuk__fark{position:absolute;top:16px;font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--olumlu);background:#e7f2ee;border-radius:100px;padding:2px 6px}

/* ---------- sonuç paneli ---------- */
.hesap-sag{position:sticky;top:150px}
.hsonuc{background:var(--murekkep);color:#fff;border-radius:var(--r);overflow:hidden}
.hsonuc__ust{padding:26px 26px 22px;border-bottom:1px solid #2c2c37;position:relative}
.hsonuc__ust::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--nokta)}
.hsonuc__etiket{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7d7d8c}
.hsonuc__buyuk{font-family:"Archivo",sans-serif;font-size:clamp(32px,4vw,44px);font-weight:800;
  letter-spacing:-.03em;margin:6px 0 8px;line-height:1}
.hsonuc__alt{font-size:13.5px;color:#a2a2b0}
.hsonuc__alt b{color:#fff}

.hdokum{padding:18px 26px 6px}
.hdokum div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #23232c}
.hdokum dt{font-size:13px;color:#8f8f9e}
.hdokum dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:13px;color:#e8e8ee;text-align:right}

.hsonuc__toplam{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:16px 26px;background:#1b1b24}
.hsonuc__toplam span{font-size:13.5px;color:#a2a2b0}
.hsonuc__toplam b{font-family:"Archivo",sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em}
.hsonuc__dugmeler{display:grid;gap:9px;padding:20px 26px 8px}
.hsonuc .dugme{background:#fff;color:var(--murekkep);border-color:#fff;text-align:center}
.hsonuc .dugme:hover{background:var(--nokta);border-color:var(--nokta);color:#fff}
.hsonuc .dugme--hayalet{background:transparent;color:#fff;border-color:#3a3a46}
.hsonuc .dugme--hayalet:hover{background:#fff;color:var(--murekkep);border-color:#fff}
.hsonuc__not{padding:12px 26px 24px;font-size:12px;color:#7d7d8c;line-height:1.45}

.hesap-uyari{margin-top:16px;background:var(--kagit-2);border:1px solid var(--cizgi);
  border-left:3px solid var(--m);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;font-size:13px;
  color:var(--murekkep-60)}
.hesap-uyari strong{display:block;color:var(--murekkep);margin-bottom:4px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hesap-duzen{grid-template-columns:1fr}
  .hesap-sag{position:static;order:-1}
  .hsonuc__dugmeler{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hesap-sol{padding:22px 18px 24px}
  .hadet{flex-direction:column;align-items:stretch;gap:10px}
  .hadet__giris input{width:100%}
  .hkutucuklar{grid-template-columns:1fr}
  .hgrafik{height:150px;gap:4px}
  .hcubuk__birim{font-size:9px}
  .hcubuk__adet{font-size:9.5px}
  .hcubuk__fark{display:none}
  .hsonuc__dugmeler{grid-template-columns:1fr}
}