/* ============================================================
   YÜZMEKOLİK — HESAPLAYICI SAYFALARI (hesap-ui.css)
   Hub · kategori · araç sayfaları. Tek açık tema (color-scheme: light).
   Su temalı, mobil-ilk. Girdi yazısı 16px (iOS odak yakınlaştırması olmasın).
   Üretici: tools/bake-hesaplayici-pages.js · Hesap: scripts/hesap-motoru.js
   ============================================================ */
:root{
  --hs-ink:#0f2942; --hs-mut:#5b6b7c; --hs-line:#e3ecf3; --hs-bg:#f3f8fc;
  --hs-blue:#0EA5E9; --hs-blue-d:#0369a1; --hs-navy:#0b2540; --hs-ice:#e8f5fd;
  --hs-ok:#0f766e; --hs-warn-bg:#fff7e6; --hs-warn:#9a5b00; --hs-r:18px;
  color-scheme:light;
}
body.hs-page{background:var(--hs-bg);color:var(--hs-ink);font-family:'Manrope','Inter',-apple-system,'Segoe UI',sans-serif}
.hs-wrap{max-width:900px;margin:0 auto;padding:0 16px}

/* ── Üst bant (menünün arkası koyu olmalı: şeffaf menü beyaz yazılı) ── */
.hs-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0b2540 0%,#0369a1 58%,#0EA5E9 100%);padding:112px 0 34px}
.hs-hero::before,.hs-hero::after{content:"";position:absolute;left:-10%;right:-10%;border-radius:50%;pointer-events:none}
.hs-hero::before{bottom:-46px;height:90px;background:rgba(255,255,255,.07)}
.hs-hero::after{bottom:-62px;height:90px;background:rgba(255,255,255,.06)}
.hs-hero .hs-wrap{position:relative;z-index:1}
.hs-rozet{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.hs-hero h1{font-family:'Sora','Inter',sans-serif;font-weight:800;font-size:clamp(1.55rem,5.4vw,2.35rem);line-height:1.22;margin:14px 0 0;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.hs-hero .hs-alt{margin:10px 0 0;font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.9);max-width:640px}

.hs-bc{background:#fff;border-bottom:1px solid var(--hs-line)}
.hs-bc nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:6px 16px;max-width:900px;margin:0 auto;font-size:13px;color:var(--hs-mut)}
.hs-bc a{color:var(--hs-blue-d);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.hs-bc strong{color:var(--hs-ink);font-weight:700}

main.hs-main{padding:22px 0 56px}
.hs-bolum{margin:28px 0 0}
.hs-bolum>h2{font-family:'Sora','Inter',sans-serif;font-size:1.28rem;font-weight:800;color:var(--hs-ink);margin:0 0 12px;line-height:1.3}
.hs-bolum p{line-height:1.75;margin:0 0 12px;color:#1e3550}

/* ── Kısa cevap kutusu (GEO: ilk 40-60 kelime doğrudan cevap) ── */
.hs-kisa{background:#fff;border:1px solid var(--hs-line);border-left:5px solid var(--hs-blue);border-radius:var(--hs-r);padding:16px 18px;box-shadow:0 6px 22px rgba(15,41,66,.06)}
.hs-kisa b.hs-kisa-e{display:block;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--hs-blue-d);margin-bottom:6px}
.hs-kisa p{margin:0;line-height:1.7;font-size:1.02rem;color:var(--hs-ink)}

/* ── Araç kartı ── */
.hs-arac{background:#fff;border:1px solid var(--hs-line);border-radius:22px;padding:18px 16px 20px;margin-top:18px;box-shadow:0 10px 30px rgba(15,41,66,.08)}
.hs-arac-baslik{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:'Sora','Inter',sans-serif;font-size:1.05rem;font-weight:800;color:var(--hs-ink)}
.hs-arac-baslik i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--hs-ice);color:var(--hs-blue-d);font-size:1rem}
.hs-form{display:grid;gap:14px}
.hs-grid2{display:grid;gap:14px;grid-template-columns:1fr}
.hs-alan{display:flex;flex-direction:column;gap:6px;min-width:0}
.hs-lbl{font-size:.9rem;font-weight:700;color:var(--hs-ink)}
.hs-alan input,.hs-alan select,.hs-alan textarea{width:100%;box-sizing:border-box;min-height:52px;padding:12px 14px;border:1.5px solid #cfdeea;border-radius:14px;background:#fbfdff;color:var(--hs-ink);font:600 16px/1.3 'Manrope','Inter',sans-serif;appearance:none;-webkit-appearance:none}
.hs-alan select{background-image:linear-gradient(45deg,transparent 50%,#5b6b7c 50%),linear-gradient(135deg,#5b6b7c 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
.hs-alan textarea{min-height:128px;resize:vertical;font-family:ui-monospace,Consolas,monospace;line-height:1.6}
.hs-alan input:focus,.hs-alan select:focus,.hs-alan textarea:focus{outline:none;border-color:var(--hs-blue);box-shadow:0 0 0 4px rgba(14,165,233,.18)}
.hs-ipucu{font-size:.8rem;color:var(--hs-mut);line-height:1.4}
.hs-gelismis{border:1px dashed #b9d2e4;border-radius:14px;padding:0 14px;background:#f7fbfe}
.hs-gelismis>summary{cursor:pointer;list-style:none;min-height:46px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--hs-blue-d)}
.hs-gelismis>summary::-webkit-details-marker{display:none}
.hs-gelismis>summary::after{content:"+";margin-left:auto;font-size:1.2rem}
.hs-gelismis[open]>summary::after{content:"–"}
.hs-gelismis>.hs-grid2{padding:2px 0 14px}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border:0;border-radius:16px;background:linear-gradient(135deg,#0EA5E9,#0284c7);color:#fff;font:800 1rem 'Manrope','Inter',sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(14,165,233,.35);width:100%}
.hs-btn:active{transform:translateY(1px)}
.hs-btn-ikinci{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid #cfdeea;background:#fff;color:var(--hs-blue-d);font:700 .9rem 'Manrope','Inter',sans-serif;cursor:pointer}

/* ── Sonuç ── */
.hs-sonuc{margin-top:16px;border-radius:18px;padding:18px 16px;background:linear-gradient(160deg,#eaf6fe 0%,#f7fcff 100%);border:1px solid #cfe6f5}
.hs-sonuc[hidden]{display:none}
.hs-sonuc.hs-hata{background:var(--hs-warn-bg);border-color:#f2d9a6;color:var(--hs-warn)}
.hs-sonuc.hs-hata p{margin:0;font-weight:600;line-height:1.6}
.hs-etiket{font-size:.8rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--hs-blue-d)}
.hs-ana{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:6px 0 4px}
.hs-deger{font-family:'Sora','Inter',sans-serif;font-weight:800;font-size:clamp(1.7rem,8vw,2.4rem);line-height:1.15;color:var(--hs-navy);overflow-wrap:anywhere}
.hs-birim{font-size:.95rem;font-weight:600;color:var(--hs-mut);overflow-wrap:anywhere}
.hs-ikincil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
.hs-cip{background:#fff;border:1px solid var(--hs-line);border-radius:12px;padding:9px 11px;min-width:0}
.hs-cip-e{display:block;font-size:.74rem;color:var(--hs-mut);font-weight:700}
.hs-cip-d{display:block;margin-top:2px;font-size:.98rem;color:var(--hs-ink);overflow-wrap:anywhere}
.hs-tbaslik{font-family:'Sora','Inter',sans-serif;font-size:.95rem;font-weight:800;margin:16px 0 8px;color:var(--hs-ink)}
.hs-tablo{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hs-line);border-radius:12px;background:#fff}
.hs-tablo table{border-collapse:collapse;width:100%;font-size:.88rem}
.hs-tablo th{background:#eef7fd;color:var(--hs-ink);text-align:left;font-weight:800;white-space:nowrap}
.hs-tablo th,.hs-tablo td{padding:9px 11px;border-bottom:1px solid var(--hs-line);vertical-align:top}
.hs-tablo tr:last-child td{border-bottom:0}
.hs-uyari{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--hs-warn-bg);color:var(--hs-warn);font-size:.86rem;font-weight:600;line-height:1.55}
.hs-notlar{margin:12px 0 0;padding-left:18px;font-size:.84rem;line-height:1.6;color:#41566c}
.hs-notlar li{margin-bottom:4px}
.hs-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ── Katlanabilir bölümler (SSS, nasıl hesaplanır) ── */
.hs-acc{background:#fff;border:1px solid var(--hs-line);border-radius:14px;margin:0 0 10px;overflow:hidden}
.hs-acc>summary{cursor:pointer;list-style:none;padding:0 16px;min-height:52px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:.98rem;color:var(--hs-ink);line-height:1.4}
.hs-acc>summary::-webkit-details-marker{display:none}
.hs-acc>summary::after{content:"+";margin-left:auto;flex:none;font-size:1.3rem;color:var(--hs-blue-d)}
.hs-acc[open]>summary::after{content:"–"}
.hs-acc>div{padding:0 16px 16px;line-height:1.75;color:#1e3550;font-size:.97rem}
.hs-acc>div p{margin:0 0 10px}
.hs-acc ol,.hs-acc ul{margin:0 0 10px;padding-left:20px}

/* ── Örnek hesap ── */
.hs-ornek{background:#fff;border:1px solid var(--hs-line);border-radius:var(--hs-r);padding:16px}
.hs-ornek .hs-yorum{margin:0 0 12px;font-size:.96rem;line-height:1.7}
.hs-ornek .hs-sonuc{margin-top:0}

/* ── Kart ızgarası (hub, kategori, ilgili araçlar) ── */
.hs-kartlar{display:grid;gap:12px;grid-template-columns:1fr}
.hs-kart{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--hs-line);border-radius:var(--hs-r);padding:14px 16px;text-decoration:none;color:var(--hs-ink);box-shadow:0 4px 16px rgba(15,41,66,.05);transition:transform .15s,box-shadow .15s;min-height:72px}
.hs-kart:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,41,66,.1)}
.hs-kart-ik{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#e1f3fd,#cdeafb);color:var(--hs-blue-d);font-size:1.15rem}
.hs-kart b{display:block;font-family:'Sora','Inter',sans-serif;font-size:1rem;font-weight:800;line-height:1.3;color:var(--hs-ink)}
.hs-kart span.hs-kart-ac{display:block;margin-top:4px;font-size:.88rem;line-height:1.5;color:var(--hs-mut)}
.hs-kart small{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:800;color:var(--hs-blue-d)}

.hs-kaynak{margin:0;padding-left:20px;font-size:.9rem;line-height:1.7;color:#41566c}
.hs-kaynak a{color:var(--hs-blue-d);font-weight:600;overflow-wrap:anywhere}
.hs-meta{margin-top:26px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--hs-line);font-size:.84rem;line-height:1.65;color:var(--hs-mut)}
.hs-meta b{color:var(--hs-ink)}

@media (min-width:640px){
  .hs-grid2{grid-template-columns:1fr 1fr}
  .hs-kartlar{grid-template-columns:1fr 1fr}
  .hs-ikincil{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hs-btn{width:auto;min-width:240px}
  .hs-arac{padding:24px 24px 26px}
  .hs-hero{padding-top:128px}
}
@media (min-width:900px){
  .hs-kartlar.hs-uc{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:380px){
  .hs-hero{padding-top:100px}
  .hs-ikincil{grid-template-columns:1fr}
}
@media print{
  .hs-hero,.hs-bc,.hs-act,.hs-btn{display:none!important}
  body.hs-page{background:#fff}
}