/* ============================================================
 * KABUK — giraykaya.com.tr hesap araçları · ortak tasarım kabuğu
 * Sürüm: KABUK-1.0.2 (site v34)
 *   1.0.2 (2026-10-14): durum rafına --ak / --ak-zemin (aşırı konsolide, turuncu) eklendi; KDK (G-02) kabuğa geçti.
 *   1.0.1 (2026-10-14): .yardim .madde 360 px altında satır kırabilir (KAZIK köprü, 320 px'te 5 px taşma).
 *
 * Bu dosya sitenin TEK renk, ölçü ve tipografi kaynağıdır.
 * Hesap sayfaları kendi paletini, kap genişliğini veya yazı ölçüsünü
 * TANIMLAMAZ; yalnız aşağıdaki değişkenleri ve sınıfları kullanır.
 * Yeni bir renk gerekiyorsa buraya eklenir (modül kendi rengini icat etmez).
 *
 * İki ölçü takımı:
 *   varsayılan            → dokunma (parmak): girdi 52 px, gövde 17 px
 *   ≥1100 px + fare       → masaüstü: girdi 40 px, gövde 16 px
 * Dokunmatik geniş ekranda (tablet yatay) düzen masaüstü, ölçüler dokunma kalır.
 * Masaüstünde iç içe kaydırma yoktur; sayfa tek parça kayar.
 * ============================================================ */

/* ---------- 1. Sözlük: renk ---------- */
:root {
  /* kabuk */
  --serit: #17304f;
  --serit-yazi: #e8eef6;
  --zemin: #e9eef4;
  --kagit: #ffffff;
  --murekkep: #1c2733;
  --ikincil: #536274;
  --soluk: #7a8796;
  --cizgi: #cfd8e3;
  --cizgi-ince: #e3e9f0;
  --vurgu: #1d5fa6;
  --vurgu-zemin: #e8f0fa;
  --bilgi-zemin: #eef2f7;
  --odak: #1d5fa6;
  /* durum */
  --uygun: #1e7b4f;
  --uygun-zemin: #e6f3ec;
  --dikkat: #9a5f0c;
  --dikkat-zemin: #fbf1e1;
  --red: #b3261e;
  --red-zemin: #fbeaea;
  --ak: #c8610f;          /* aşırı konsolide (KDK); dikkat sarısından ayrı dursun diye turuncu */
  --ak-zemin: #fcebdd;
  /* malzeme (çizimler: kesit, zemin profili) */
  --beton: #e2e7ed;
  --donati: #2c3846;
  --kil: #8b5e34;
  --kil-soluk: #dcc5a8;
  --kil-ao: #e9b98a;
  --kum: #c9a55a;
  --kum-soluk: #f1e5c3;
  --kaya: #7d8588;
  --silt: #a88b6a;
  --su: #2471a3;
  /* tipografi */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Cambria", "Georgia", "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* koyu görünüm: sistem tercihi (sayfa açık'a zorlanmadıysa) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --serit: #0e1d31; --serit-yazi: #dbe4ef; --zemin: #0d141d; --kagit: #141d28; --murekkep: #e5ebf2;
    --ikincil: #a3b0bf; --soluk: #7d8a99; --cizgi: #2b3a4b; --cizgi-ince: #212e3c; --vurgu: #7db3ee;
    --vurgu-zemin: #182a40; --bilgi-zemin: #18222e; --odak: #7db3ee;
    --uygun: #5cc08f; --uygun-zemin: #12291f; --dikkat: #e3a54a; --dikkat-zemin: #2c2212;
    --red: #f08a82; --red-zemin: #2f1716;
    --ak: #f2a15c; --ak-zemin: #45291a;
    --beton: #263243; --donati: #d3dce6; --kaya: #8e979a; --silt: #b79c7c;
    color-scheme: dark;
  }
}
/* koyu görünüm: kullanıcı seçimi */
:root[data-tema="koyu"] {
  --serit: #0e1d31; --serit-yazi: #dbe4ef; --zemin: #0d141d; --kagit: #141d28; --murekkep: #e5ebf2;
  --ikincil: #a3b0bf; --soluk: #7d8a99; --cizgi: #2b3a4b; --cizgi-ince: #212e3c; --vurgu: #7db3ee;
  --vurgu-zemin: #182a40; --bilgi-zemin: #18222e; --odak: #7db3ee;
  --uygun: #5cc08f; --uygun-zemin: #12291f; --dikkat: #e3a54a; --dikkat-zemin: #2c2212;
  --red: #f08a82; --red-zemin: #2f1716;
  --ak: #f2a15c; --ak-zemin: #45291a;
  --beton: #263243; --donati: #d3dce6; --kaya: #8e979a; --silt: #b79c7c;
  color-scheme: dark;
}

/* ---------- 2. Sözlük: ölçü (dokunma takımı) ---------- */
:root {
  --kap: 1360px;          /* hesap sayfası kap genişliği */
  --kap-dar: 1024px;      /* okuma ağırlıklı sayfa (portal) */
  --sutun-form: 400px;    /* masaüstünde girdi sütunu */
  --kenar: 16px;          /* kap iç boşluğu */
  --govde: 17px;          /* gövde yazısı */
  --hedef: 52px;          /* girdi, açılan liste, ikincil düğme */
  --hedef-ana: 56px;      /* ana eylem düğmesi (Hesapla) */
  --hedef-ik: 44px;       /* küçük yardımcı düğme (sil, görünüm) */
  --ara: 18px;            /* sütunlar arası boşluk */
}

/* masaüstü takımı: fare ile kullanılan geniş ekran */
@media (min-width: 1100px) and (pointer: fine) {
  :root { --govde: 16px; --hedef: 40px; --hedef-ana: 44px; --hedef-ik: 32px; }
}

/* ---------- 3. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--govde); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--vurgu); }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 4. Üst şerit ---------- */
.serit { background: var(--serit); color: var(--serit-yazi); }
.serit-ic {
  max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); min-height: 52px;
  display: flex; align-items: center; gap: 12px;
}
.serit a { color: var(--serit-yazi); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--hedef-ik); }
.serit a:hover { text-decoration: underline; }
.serit .alan { margin-left: auto; font-size: .875rem; opacity: .8; }
.tema-dugme {
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--serit-yazi);
  border-radius: 4px; min-width: var(--hedef-ik); min-height: var(--hedef-ik); padding: 0 10px;
  cursor: pointer; font-size: .875rem;
}

/* ---------- 5. Sayfa iskeleti ---------- */
.sayfa { max-width: var(--kap); margin: 0 auto; padding: 20px var(--kenar) 40px; }
.baslik-blok { margin-bottom: 18px; }
.baslik-blok h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); line-height: 1.2; margin: 0 0 6px; font-weight: 650; letter-spacing: -.01em; }
.deneme {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 7px; font-size: .75rem;
  font-weight: 600; color: var(--dikkat); border: 1px solid var(--dikkat); border-radius: 3px; letter-spacing: 0;
}
.ozet { margin: 0; color: var(--ikincil); max-width: 70ch; }
.yasal { margin-top: 12px; font-size: .875rem; color: var(--ikincil); max-width: 80ch; }
.yasal summary { cursor: pointer; color: var(--vurgu); min-height: var(--hedef-ik); display: inline-flex; align-items: center; }
.yasal ol { margin: 8px 0 0; padding-left: 20px; }
.yasal li { margin-bottom: 4px; }

.izgara { display: grid; grid-template-columns: 1fr; gap: var(--ara); align-items: start; }
/* Masaüstü düzeni: iki sütun, iç kaydırma YOK (sayfa tek parça kayar). */
@media (min-width: 1100px) {
  .izgara { grid-template-columns: var(--sutun-form) minmax(0, 1fr); gap: 20px; }
}
.pafta { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 2px; }
.altbilgi {
  max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar) 28px; font-size: .8125rem;
  color: var(--ikincil); display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* ---------- 6. Form ---------- */
fieldset { border: 0; border-top: 1px solid var(--cizgi); margin: 0; padding: 14px 0 6px; }
fieldset:first-of-type { border-top: 0; }
legend { font-weight: 650; font-size: 1rem; padding: 0; margin-bottom: 4px; }
.lejant-not { margin: 0 0 10px; font-size: .8125rem; color: var(--ikincil); }
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.alanlar .tam { grid-column: 1 / -1; }
.alan-k label, .alan-k .etiket { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 3px; }
.alan-k .birim { font-weight: 400; color: var(--soluk); }
input[type="text"], input[type="number"], select {
  width: 100%; min-height: var(--hedef); padding: 8px 10px; border: 1px solid var(--cizgi);
  border-radius: 3px; background: var(--kagit); font-size: 1rem;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ikincil) 50%), linear-gradient(135deg, var(--ikincil) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
select:disabled { opacity: .65; cursor: not-allowed; }
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  border-color: var(--vurgu); outline: none; box-shadow: 0 0 0 2px var(--vurgu-zemin);
}
.alan-k.hatali input, .alan-k.hatali select { border-color: var(--red); }
.yardim { margin: 4px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--ikincil); }
.yardim .madde { white-space: nowrap; color: var(--soluk); }
@media (max-width: 359px) { .yardim .madde { white-space: normal; } }
.ust-bosluk { margin-top: 10px; }

/* iki şıklı seçim (radyo) */
.secim { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cizgi); border-radius: 3px; overflow: hidden; }
.secim-k { position: relative; display: block; margin: 0; }
.secim-k input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secim-k span { display: flex; align-items: center; justify-content: center; min-height: var(--hedef); padding: 6px 10px; font-weight: 600; cursor: pointer; background: var(--kagit); }
.secim-k + .secim-k span { border-left: 1px solid var(--cizgi); }
.secim-k input:checked + span { background: var(--murekkep); color: var(--kagit); }
.secim-k input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--vurgu); }
.alan-k label.onay { display: flex; align-items: center; gap: 10px; min-height: var(--hedef-ik); font-weight: 500; cursor: pointer; margin: 0; }
.onay input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--murekkep); }

/* düğmeler */
.hesapla {
  margin-top: 14px; width: 100%; min-height: var(--hedef-ana); border: 0; border-radius: 3px;
  background: var(--serit); color: #fff; font-weight: 650; font-size: 1.0625rem; cursor: pointer; letter-spacing: .01em;
}
.hesapla[disabled] { opacity: .6; cursor: progress; }
:root[data-tema="koyu"] .hesapla { background: var(--vurgu); color: #0d141d; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .hesapla { background: var(--vurgu); color: #0d141d; } }
.ekle { margin-top: 8px; border: 1px dashed var(--cizgi); background: none; min-height: var(--hedef); width: 100%; cursor: pointer; border-radius: 3px; color: var(--vurgu); }
.sil { border: 0; background: none; color: var(--ikincil); min-height: var(--hedef-ik); min-width: var(--hedef-ik); cursor: pointer; text-decoration: underline; font-size: .8125rem; }
.form-hata { margin-top: 10px; padding: 10px 12px; background: var(--red-zemin); color: var(--red); border-left: 3px solid var(--red); font-size: .875rem; }
.form-hata ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- 7. Sonuç ---------- */
.sonuc-sutun { min-width: 0; }
.bos { padding: 28px 22px; color: var(--ikincil); }
.bos h2 { margin: 0 0 6px; font-size: 1.125rem; color: var(--murekkep); }
.bos p { margin: 0 0 14px; max-width: 60ch; }
.blok { padding: 16px 18px; border-top: 1px solid var(--cizgi); }
.blok:first-child { border-top: 0; }
.blok h2 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 650; }
.blok .neden { margin: 0 0 12px; font-size: .875rem; color: var(--ikincil); max-width: 75ch; }
.sistem-hata { padding: 16px 18px; color: var(--red); background: var(--red-zemin); border-left: 3px solid var(--red); }

.durum { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.damga {
  grid-row: span 2; border: 2px solid currentColor; padding: 6px 12px; font-weight: 750; letter-spacing: .06em;
  font-size: 1.0625rem; border-radius: 2px; white-space: nowrap;
}
.damga.ok { color: var(--uygun); }
.damga.red { color: var(--red); }
.cevap { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 650; line-height: 1.25; }
.cevap-alt { color: var(--ikincil); font-size: .9375rem; }
@media (max-width: 520px) { .durum { grid-template-columns: 1fr; } .damga { grid-row: auto; justify-self: start; } }

/* tablo */
.tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--cizgi-ince); white-space: nowrap; }
th { font-size: .8125rem; font-weight: 600; color: var(--ikincil); border-bottom-color: var(--cizgi); }
th:first-child, td:first-child { text-align: left; }
.tablo-not { margin: 8px 0 0; font-size: .8125rem; color: var(--ikincil); }

/* durum etiketi ve denetim listesi */
.etiket-d { display: inline-block; font-size: .75rem; font-weight: 650; padding: 1px 6px; border-radius: 2px; }
.etiket-d.ok { color: var(--uygun); background: var(--uygun-zemin); }
.etiket-d.red { color: var(--red); background: var(--red-zemin); }
.denetimler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.denetimler li { padding: 9px 12px; border-left: 3px solid var(--cizgi); background: var(--bilgi-zemin); }
.denetimler li.ok { border-left-color: var(--uygun); background: var(--uygun-zemin); }
.denetimler li.warn { border-left-color: var(--dikkat); background: var(--dikkat-zemin); }
.denetimler li.red { border-left-color: var(--red); background: var(--red-zemin); }
.denetimler b { display: block; font-size: .9375rem; }
.denetimler .d-a { font-size: .875rem; }
.denetimler .d-m { display: block; font-size: .75rem; color: var(--ikincil); margin-top: 2px; }

/* ---------- 8. Çizim renk sınıfları (SVG) ---------- */
.f-beton { fill: var(--beton); } .s-beton { stroke: var(--beton); }
.f-murekkep { fill: var(--murekkep); } .s-murekkep { stroke: var(--murekkep); }
.f-ikincil { fill: var(--ikincil); } .s-ikincil { stroke: var(--ikincil); }
.f-donati { fill: var(--donati); } .s-donati { stroke: var(--donati); }
.f-vurgu { fill: var(--vurgu); } .s-vurgu { stroke: var(--vurgu); }
.f-vurgu-zemin { fill: var(--vurgu-zemin); } .s-vurgu-zemin { stroke: var(--vurgu-zemin); }
.f-cizgi-ince { fill: var(--cizgi-ince); } .s-cizgi-ince { stroke: var(--cizgi-ince); }
.f-cizgi { fill: var(--cizgi); } .s-cizgi { stroke: var(--cizgi); }
.f-red { fill: var(--red); } .s-red { stroke: var(--red); }
.f-dikkat { fill: var(--dikkat); } .s-dikkat { stroke: var(--dikkat); }
.f-uygun { fill: var(--uygun); } .s-uygun { stroke: var(--uygun); }
.f-ak { fill: var(--ak); } .s-ak { stroke: var(--ak); }
.f-kagit { fill: var(--kagit); } .s-kagit { stroke: var(--kagit); }
.f-soluk { fill: var(--soluk); } .s-soluk { stroke: var(--soluk); }
.f-kil { fill: var(--kil); } .s-kil { stroke: var(--kil); }
.f-kum { fill: var(--kum); } .s-kum { stroke: var(--kum); }
.f-kaya { fill: var(--kaya); } .s-kaya { stroke: var(--kaya); }
.f-silt { fill: var(--silt); } .s-silt { stroke: var(--silt); }
.f-su { fill: var(--su); } .s-su { stroke: var(--su); }

/* ---------- 9. Hareket ve yazdırma ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sonuc-goster { animation: belir .28s ease-out; }
  @keyframes belir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media print {
  body * { visibility: hidden; }
  body::after { content: "Bu sayfanın yazdırılması desteklenmez."; visibility: visible; position: fixed; top: 40px; left: 40px; }
}