/* KombiSeç — tek stil dosyası. Renkler montaj hesaplama arayüzünün mor/sarı tonlarından; yazı tipleri sitenin kendi sunucusundan. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../font/figtree-latin-ext.8811e895c448.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../font/figtree-latin.392aed3eb142.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --zemin: #f6f5fd; --kart: #ffffff; --yazi: #221f3a; --soluk: #5d5975; --cizgi: #e4e1f5;
  --mor: #4933d1; --mor-koyu: #3a24c4; --mor-acik: #ebe8fa; --menekse: #7b5cff;
  --sari: #fbbc34; --sari-acik: #fff4d6; --sicak: #ff8a3d; --soguk: #8ec5ff;
  --ekran: #1d1840; --soguk-koyu: #2f86dc; --golge: 0 10px 30px rgba(73, 51, 209, .10);
  --f-baslik: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-govde: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: only light;   /* site HEP açık tema, tek tip (Emre 7 Eki); Android Chrome otomatik koyulaştırmasın */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* display:grid/flex veren sınıflar gizlemeyi ezmesin (açılır kutu paneli, süzülen iller) */
/* HİZA KURALI (7 Eki 2026, Emre: sayfalar arası geçişte kayma olmasın): kaydırma çubuğunun yeri her sayfada ayrılır;
   üst menü, gövde ve alt bilgi aynı .sarmal kapsayıcısını kullanır (aynı genişlik, aynı sol kenar). vitrin.tests.HizaKuraliTesti denetler. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 18px/1.6 var(--f-govde); }
img, svg { max-width: 100%; }
a { color: var(--mor); }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.sarmal { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--f-baslik); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }

/* Üst menü */
.ust { padding-block: 14px; }
.ust .sarmal { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.menu a { color: var(--yazi); text-decoration: none; font-size: .95rem; padding: 8px 12px; border-radius: 10px; }
.menu a:hover { background: var(--mor-acik); }
.menu a.vurgu { background: var(--mor); color: #fff; font-weight: 600; }

.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 56px; width: auto; }
/* Telefon üst çubuğu (Emre 7 Eki): solda menü düğmesi, ORTADA logo, sağda Hesapla; menü aşağı açılan kart */
.mobil-menu, .mobil-cta { display: none; }
@media (max-width: 560px) {
  .ust { padding-block: 10px; position: relative; z-index: 50; }
  .ust .sarmal { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 8px; }   /* logo iki düğmenin tam ortasında: iki yandaki boşluk eşit (Emre 7 Eki) */
  .ust .menu { display: none; }

  .logo img { height: 40px; }
  .mobil-menu { display: block; justify-self: start; }
  .mobil-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; background: var(--mor-acik); display: grid; place-items: center; }
  .mobil-menu summary::-webkit-details-marker { display: none; }
  .cizgiler { display: grid; gap: 4px; width: 20px; }
  .cizgiler i { display: block; height: 2.5px; border-radius: 2px; background: var(--mor); transition: transform .2s, opacity .2s; }
  .mobil-menu[open] .cizgiler i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mobil-menu[open] .cizgiler i:nth-child(2) { opacity: 0; }
  .mobil-menu[open] .cizgiler i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mobil-panel { position: absolute; left: 12px; right: 12px; top: calc(100% + 2px); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; box-shadow: 0 22px 50px rgba(20, 10, 80, .22); padding: 14px; display: grid; gap: 12px; }
  .mobil-baslik { margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk); text-align: center; }
  .mobil-araclar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .mobil-araclar li { grid-column: span 2; }
  .mobil-araclar li:nth-child(n+4) { grid-column: span 3; }   /* 5 araç: üstte 3, altta 2 geniş; boş hücre kalmasın */
  .mobil-araclar a { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--zemin); color: var(--yazi); text-decoration: none; font-size: .86rem; font-weight: 600; }
  .mobil-baglantilar { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--cizgi); }
  .mobil-baglantilar a { display: block; text-align: center; padding: 13px 8px; color: var(--yazi); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--cizgi); }
  .mobil-baglantilar li:last-child a { border-bottom: 0; }
  .mobil-cta { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--mor); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; }
}

/* Üst menü: Hesaplama Araçları açılır menüsü */
.menu-acilir { position: relative; }
.menu .dar { display: none; }
.menu-acilir summary { list-style: none; cursor: pointer; font-size: .95rem; padding: 8px 28px 8px 12px; border-radius: 10px; position: relative; }
.menu-acilir summary::-webkit-details-marker { display: none; }
.menu-acilir summary::after { content: ""; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.menu-acilir[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.menu-acilir summary:hover, .menu-acilir[open] summary { background: var(--mor-acik); }
.menu-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 240px; list-style: none; margin: 0; padding: 6px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 10, 80, .18); display: grid; gap: 2px; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.menu-panel a:hover { background: var(--mor-acik); }
.yakinda { font-style: normal; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--sari-acik); color: var(--yazi); padding: 2px 7px; border-radius: 99px; margin-left: auto; }

/* Simgeler (static/img/simgeler.svg). Çizgi mor, ana vurgu sarı, ikinci vurgu sıcak turuncu; su/soğuk simgelerinde mavi. */
.sim { width: 1.5em; height: 1.5em; display: block; flex: none; stroke: var(--mor); fill: var(--sari); color: var(--sicak); overflow: visible; }
.sim-klima, .sim-sofben, .sim-ruzgar, .sim-damla { color: var(--soguk-koyu); }
.sim-kutu { position: relative; flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--mor-acik); display: grid; place-items: center; }
.sim-kutu .sim { width: 34px; height: 34px; }
.sim-kutu.kucuk { width: 36px; height: 36px; border-radius: 10px; }
.sim-kutu.kucuk .sim { width: 24px; height: 24px; }
.sim-kutu.buyuk { width: 76px; height: 76px; border-radius: 22px; }
.sim-kutu.buyuk .sim { width: 50px; height: 50px; }
.sim-kutu b { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--mor); color: #fff; font: 800 .8rem/24px var(--f-baslik); text-align: center; }

/* Ana sayfa: kahraman + arama çubuğu */
.kahraman { background: linear-gradient(135deg, #4933d1 0%, #7b5cff 100%); color: #fff; border-radius: 26px; padding: 44px 28px 34px; display: grid; gap: 22px; position: relative; }
.kahraman::after { content: ""; position: absolute; right: 0; top: 0; width: 240px; height: 240px; border-top-right-radius: 26px; background: radial-gradient(circle at 100% 0, rgba(251,188,52,.5), rgba(251,188,52,0) 70%); pointer-events: none; }
.kahraman h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 20ch; position: relative; z-index: 1; }
.kahraman h1 em { color: #fbbc34; font-style: normal; }
.kahraman p { margin: 0; max-width: 58ch; opacity: .93; position: relative; z-index: 1; }
/* Telefonda arama formu ilk ekranda: uzun açıklama gizli, güven satırı formun altında (Emre 7 Eki) */
@media (max-width: 560px) {
  .kahraman:not(.kahraman-hesap) { padding: 22px 16px 20px; gap: 14px; border-radius: 22px; }
  .kahraman:not(.kahraman-hesap) h1 { font-size: 1.75rem; }
  .kahraman:not(.kahraman-hesap) > p { display: none; }   /* uzun açıklama telefonda itici (Emre); masaüstünde kalır */
  .kahraman:not(.kahraman-hesap) .guven { order: 3; }
}
.arama { background: var(--kart); border-radius: 18px; padding: 8px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 6px; box-shadow: 0 18px 40px rgba(20, 10, 80, .28); position: relative; z-index: 5; }   /* açılır panel alttaki güven satırının üstünde kalsın */
@media (max-width: 880px) { .arama { grid-template-columns: 1fr 1fr; } .arama .ara-dugme { grid-column: 1 / -1; } }
@media (max-width: 460px) { .arama { grid-template-columns: 1fr; } }
.alan { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--zemin); border: 2px solid transparent; min-width: 0; }
.alan:focus-within { border-color: var(--sari); }
.alan label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); font-weight: 600; }
.alan select, .alan input { font: 600 1.08rem var(--f-govde); color: var(--yazi); background: transparent; border: 0; padding: 2px 0; width: 100%; min-height: 34px; }
.alan select:focus, .alan input:focus { outline: none; }
.ara-dugme { font: 600 1.12rem var(--f-govde); background: #fbbc34; color: #221f3a; border: 0; border-radius: 12px; padding: 0 28px; min-height: 64px; cursor: pointer; }
.ara-dugme:hover { filter: brightness(1.05); }
.guven { display: flex; gap: 18px; flex-wrap: wrap; font-size: .92rem; position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.guven li::before { content: "✓ "; color: #fbbc34; font-weight: 700; }

/* Açılır kutu (static/js/secim.js) */
.secim { position: relative; min-width: 0; }
.secim-dugme { font: 600 1.08rem var(--f-govde); color: var(--yazi); background: transparent; border: 0; padding: 2px 26px 2px 0; width: 100%; min-height: 34px; text-align: left; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secim-dugme::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2.5px solid var(--soluk); border-bottom: 2.5px solid var(--soluk); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.secim-dugme[aria-expanded="true"]::after { transform: translateY(-20%) rotate(225deg); }
.secim-dugme.bos { color: var(--soluk); font-weight: 500; }
.secim-dugme:focus-visible { outline: none; }
.alan:has(.secim-dugme:focus-visible) { border-color: var(--sari); }
.secim.eksik .secim-dugme { color: #c2410c; }
.secim-panel { position: absolute; z-index: 30; top: calc(100% + 12px); left: -14px; min-width: calc(100% + 28px); width: max-content; max-width: min(340px, 86vw); background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: 0 18px 44px rgba(20, 10, 80, .22); padding: 8px; display: grid; gap: 6px; }
.secim-ara { font: 500 1rem var(--f-govde); color: var(--yazi); background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; width: 100%; }
.secim-ara:focus { outline: none; border-color: var(--mor); }
.secim-liste { max-height: min(320px, 52vh); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; }
.secim-grup { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk); padding: 10px 12px 4px; }
.secim-oge { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 1.02rem; display: flex; justify-content: space-between; gap: 12px; }
.secim-oge:hover, .secim-oge.etkin { background: var(--mor-acik); }
.secim-oge[aria-selected="true"] { color: var(--mor); font-weight: 600; }
.secim-oge[aria-selected="true"]::after { content: "✓"; }
.il-kutu { background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 14px; padding: 12px 16px; }
.il-kutu .secim-dugme { font-size: 1.2rem; min-height: 40px; }
.il-kutu .secim-panel { left: -18px; min-width: calc(100% + 36px); max-width: calc(100% + 36px); }

/* Ana sayfa bölümleri */
.arac-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
/* Simgeli kartlar (araçlar, nasıl çalışır): simge ve yazılar ortalı (Emre 7 Eki) */
.arac-kart { display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; background: var(--kart); border: 2px solid var(--mor); border-radius: 18px; padding: 16px; text-decoration: none; color: var(--yazi); }
.arac-kart.pasif { border: 1px solid var(--cizgi); }
.arac-kart:hover { border-color: var(--menekse); }
.arac-kart strong { font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.arac-kart .yakinda { margin-left: 0; }
.arac-kart > span:last-child { color: var(--soluk); font-size: .92rem; line-height: 1.45; }
.arac-yakinda h1 span { font-size: .9em; }
.cift-dugme { display: flex; gap: 10px; flex-wrap: wrap; }
.icerik { display: grid; gap: 40px; padding-block: 8px 48px; }
.bolum { display: grid; gap: 14px; }
.bolum h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); }
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.adim-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 18px; display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; }
.adim-kart h3 { font: 600 1.1rem var(--f-govde); letter-spacing: 0; }
.adim-kart p { margin: 0; color: var(--soluk); font-size: .95rem; }
.hazirlar { display: flex; flex-wrap: wrap; gap: 8px; }
.hazirlar a { background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; padding: 10px 16px; border-radius: 99px; font-size: .95rem; }
.hazirlar a:hover { border-color: var(--mor); color: var(--mor); }
.sss { display: grid; gap: 10px; }
.sss details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 4px 18px; }
.sss summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--mor); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.sss details[open] summary::after { content: "−"; }
.sss details p { margin: 0 0 14px; color: var(--soluk); max-width: 70ch; }
.firma-bandi { background: var(--ekran); color: #fff; border-radius: 22px; padding: 26px; display: grid; gap: 6px; }
.firma-bandi h2 { color: #fff; font-size: 1.5rem; }
.firma-bandi p { margin: 0; opacity: .86; max-width: 62ch; }
.etiket-cip { justify-self: start; background: #fbbc34; color: #221f3a; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; }

/* Alt bilgi */
.alt { border-top: 1px solid var(--cizgi); padding-block: 22px 32px; color: var(--soluk); font-size: .9rem; }
.alt .sarmal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alt nav { display: flex; gap: 16px; flex-wrap: wrap; }
.alt a { color: var(--soluk); text-decoration: none; }
.alt a:hover { color: var(--mor); }
/* Telefonda bağlantılar üstte, telif satırı en altta; hepsi ortalı (Emre 7 Eki) */
@media (max-width: 560px) { .alt .sarmal { flex-direction: column-reverse; align-items: center; text-align: center; gap: 14px; } .alt nav { justify-content: center; gap: 10px 18px; } }

/* Soru ekranları (sihirbaz) */
.sahne { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; padding-block: 8px 36px; }
@media (max-width: 860px) { .sahne { grid-template-columns: 1fr; } .ev-paneli { order: -1; } }
.soru-paneli { scroll-margin-top: 10px; background: var(--kart); border-radius: 22px; box-shadow: var(--golge); padding: 26px 24px; display: grid; gap: 18px; min-width: 0; }
.ilerleme { display: flex; gap: 6px; }
.ilerleme span { flex: 1; height: 8px; border-radius: 99px; background: var(--mor-acik); transition: background .3s; }
.ilerleme span.dolu { background: var(--mor); }
.adim-yazi { font-size: .85rem; color: var(--soluk); letter-spacing: .04em; text-transform: uppercase; }
.soru-paneli h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.soru-paneli h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.aciklama { margin: 0; color: var(--soluk); max-width: 50ch; }
.secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.secenek { font: 600 1.05rem var(--f-govde); color: var(--yazi); background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 16px; min-height: 96px; padding: 14px 12px; cursor: pointer; display: grid; gap: 6px; justify-items: center; align-content: center; text-align: center; transition: transform .15s, border-color .15s, background .15s; }
.secenek:hover { transform: translateY(-2px); border-color: var(--menekse); }
.secenek.secili { border-color: var(--mor); background: var(--mor-acik); }
.secenek small { font: 400 .82rem var(--f-govde); color: var(--soluk); }
.secenek .ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--kart); box-shadow: 0 2px 8px rgba(73, 51, 209, .08); }
.secenek .ikon .sim { width: 44px; height: 44px; }
.secenekler.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secenek.secili .ikon { background: var(--kart); box-shadow: 0 0 0 2px var(--mor); }
.secenek-ad { line-height: 1.25; }
.secenek.bilmiyorum { border-style: dashed; }
.olcu { display: grid; gap: 10px; justify-items: center; }
.m2-kutu { display: flex; align-items: baseline; gap: 8px; }
.m2-kutu input { font: 800 3rem/1.1 var(--f-baslik); color: var(--mor); width: 4.2ch; text-align: center; border: 0; border-bottom: 3px solid var(--cizgi); background: transparent; padding: 0; }
.m2-kutu input:focus { outline: none; border-bottom-color: var(--mor); }
.m2-kutu span { font-size: 1.3rem; color: var(--soluk); }
.ipucu { margin: 0; color: var(--soluk); font-size: .9rem; max-width: 58ch; }
.kisisel-not { background: var(--mor-acik); border-radius: 14px; padding: 12px 16px; font-size: .95rem; margin: 0; }
input[type=range] { width: 100%; accent-color: var(--mor); height: 34px; }
.sayac { display: flex; align-items: center; gap: 18px; justify-content: center; }
.sayac button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--cizgi); background: var(--zemin); color: var(--yazi); font: 600 1.8rem var(--f-govde); cursor: pointer; }
.sayac output { font: 800 3rem var(--f-baslik); min-width: 2ch; text-align: center; color: var(--mor); }
select.il-sec { font: 500 1.1rem var(--f-govde); padding: 14px; border-radius: 14px; border: 2px solid var(--cizgi); background: var(--zemin); color: var(--yazi); width: 100%; min-height: 60px; }
.alt-dugmeler { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btn { font: 600 1.05rem var(--f-govde); border-radius: 14px; padding: 14px 22px; min-height: 56px; cursor: pointer; border: 2px solid transparent; text-decoration: none; display: inline-flex; align-items: center; }
.btn-ana { background: var(--mor); color: #fff; }
.btn-ana:hover { background: var(--mor-koyu); }
.btn-ana:disabled { opacity: .4; cursor: not-allowed; }
.btn-geri { background: transparent; color: var(--soluk); border-color: var(--cizgi); }
.bekleme { background: var(--sari-acik); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; }
.bekleme strong { font-size: 1.05rem; }
.ozet { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ozet li { background: var(--mor-acik); border-radius: 99px; padding: 4px 12px; font-size: .88rem; }
.ev-paneli { background: var(--kart); border-radius: 22px; box-shadow: var(--golge); padding: 18px; position: sticky; top: env(safe-area-inset-top, 0px); display: grid; gap: 10px; min-width: 0; }
.ev-paneli svg { width: 100%; height: auto; max-height: 360px; display: block; }
.ev-etiketler { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.ev-etiketler button { background: var(--mor-acik); color: var(--yazi); border: 1px solid transparent; border-radius: 99px; padding: 4px 12px; font: 500 .84rem var(--f-govde); cursor: pointer; }
.ev-etiketler button:hover { border-color: var(--mor); }
.ev-etiketler button::after { content: " ✎"; color: var(--soluk); font-size: .8em; }
.ev-not { margin: 0; color: var(--soluk); font-size: .88rem; }
.parca { transition: opacity .45s; }
.gizli-parca { opacity: 0; }
/* Ev çizimi (hesapla.html): renkler temadan; seçilen kat sarı yanar */
.zemin-cim { fill: var(--mor-acik); }
.agac rect { fill: var(--soluk); opacity: .55; }
.agac circle { fill: var(--mor-acik); stroke: var(--menekse); stroke-width: 3; }
.mont rect:first-child { fill: var(--sari); }
.mont-levha { fill: none; stroke: var(--kart); stroke-width: 2; stroke-dasharray: 10 6; opacity: .8; }
.govde { fill: var(--kart); stroke: var(--yazi); stroke-width: 4; }
.kat-zemin { fill: transparent; transition: fill .4s; }
.kat-cizgi { stroke: var(--cizgi); stroke-width: 2; }
.pencere { fill: var(--mor-acik); stroke: var(--yazi); stroke-width: 2.5; transition: fill .4s; }
.pencere-cizgi { stroke: var(--yazi); stroke-width: 2; }
.kat.secili .kat-zemin { fill: var(--sari-acik); }
.kat.secili .pencere { fill: var(--sari); }
.siz-yazi { fill: #fff; font: 700 13px var(--f-govde); }
.radyator-sekli { fill: var(--sicak); }
#siz { transition: opacity .45s, transform .45s; }
@keyframes nefes { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
.sicaklik { animation: nefes 3.5s ease-in-out infinite; }
@keyframes don { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.gunes-isin { animation: don 18s linear infinite; transform-box: fill-box; transform-origin: center; }

/* Sonuç raporu */
.olcutler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* 4 kutucuk hep 2×2; tek kalan olmasın */
.olcut { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; min-width: 0; align-content: start; }
.olcut .etiket { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); }
.olcut .deger { font: 800 1.7rem var(--f-baslik); color: var(--yazi); font-variant-numeric: tabular-nums; }
.olcut .yorum { font-size: .86rem; color: var(--soluk); }
.uyari { background: var(--sari-acik); border-radius: 14px; padding: 12px 16px; font-size: .95rem; margin: 0; }
.varsayimlar { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px; padding: 4px 16px; }
.varsayimlar summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: .95rem; }
.varsayimlar ul { margin: 0 0 12px; padding-left: 20px; color: var(--soluk); font-size: .92rem; }
.paylas { display: flex; gap: 10px; flex-wrap: wrap; }
.dipnot { color: var(--soluk); font-size: .84rem; margin: 0; }

/* Hesaplama sayfası: ana sayfayla aynı kahraman bandı; soru kartları bandın üstüne biner */
/* Soru kartı ilk ekranda görünsün diye bant kısa tutulur (Emre 7 Eki: "form çok altta kalıyor") */
.kahraman-hesap { padding: 26px 28px 136px; gap: 10px; }
.kahraman-hesap h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); max-width: none; }
.yol-acik { position: relative; z-index: 1; }
.yol.yol-acik ol { color: rgba(255,255,255,.82); }
.yol.yol-acik a { color: #fff; }
.hesap-sayfa .sahne { margin-top: -120px; padding: 0 22px; position: relative; z-index: 2; }
.bolum-alt { margin: 0; color: var(--soluk); }
/* Araç sayfası (şofben, termosifon): sağ panel = neyi hesaplıyoruz + cevap etiketleri */
.bilgi-paneli { gap: 14px; padding: 22px; }
.bilgi-bas { display: flex; align-items: center; gap: 14px; }
.bilgi-bas strong { font: 800 1.3rem var(--f-baslik); letter-spacing: -.01em; }
.bilgi-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--soluk); font-size: .95rem; }
.bilgi-liste li { display: flex; gap: 10px; }
.bilgi-liste li::before { content: "✓"; color: var(--mor); font-weight: 700; }
.yonlendir { margin: 0; }
.bilesen-kutu { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.bilesenler { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; }
.bilesenler li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--cizgi); padding-bottom: 6px; }
.bilesenler li:last-child { border-bottom: 0; padding-bottom: 0; }
.bilesenler b { color: var(--mor); font-variant-numeric: tabular-nums; }
.yakinda-bas { display: flex; align-items: center; gap: 16px; }
@media (max-width: 860px) {
  .kahraman-hesap { padding-bottom: 84px; }
  .hesap-sayfa .sahne { margin-top: -96px; padding: 0 10px; }
  .hesap-sayfa .ev-paneli { order: 0; position: static; }
  .hesap-sayfa .ev-paneli svg { max-height: 210px; }
  /* Betik soruyu çizince kart uzar; o ana kadar alttaki panel görünmez (görünmeyen öğenin kayması CLS sayılmaz) */
  .hesap-sayfa .soru-paneli.bekliyor + .ev-paneli { visibility: hidden; }
}
@media (max-width: 560px) {
  .kahraman-hesap { padding: 18px 18px 76px; border-radius: 22px; gap: 10px; }
  .kahraman-hesap h1 { font-size: 1.65rem; }
  .kahraman-hesap > p, .kahraman-hesap .guven li:nth-child(n+3) { display: none; }
  .kahraman-hesap .guven { gap: 6px 14px; font-size: .86rem; }
  .hesap-sayfa .sahne { padding: 0 6px; margin-top: -84px; }
  .soru-paneli { padding: 20px 16px; border-radius: 20px; }
  /* 2 ya da 4 seçenek: iki sütun kart; 3 ya da 5 seçenek: alt alta satır (simge solda) — boş hücre kalmasın */
  .secenekler { grid-template-columns: 1fr 1fr; gap: 10px; }
  .secenek { min-height: 120px; padding: 12px 8px; font-size: 1rem; }
  .secenekler.satir { grid-template-columns: 1fr; }
  .secenekler.satir .secenek { min-height: 76px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 0; padding: 10px 14px; }
  .secenekler.satir .ikon { grid-row: span 2; width: 54px; height: 54px; }
  .secenekler.satir .ikon .sim { width: 38px; height: 38px; }
  .secenekler.satir .secenek-ad { align-self: end; }
  .secenekler.satir .secenek:not(:has(small)) .secenek-ad { align-self: center; grid-row: span 2; }
  .secenekler.satir small { align-self: start; }
  .olcutler { grid-template-columns: 1fr 1fr; gap: 8px; }
  .olcut { padding: 12px; }
  .olcut .deger { font-size: 1.35rem; }
}

/* Rehber */
.bolum-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bolum-bas a { color: var(--mor); font-weight: 600; text-decoration: none; font-size: .95rem; }
.rehber-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rehber-kart { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 16px; text-decoration: none; color: var(--yazi); min-width: 0; }
.rehber-kart:hover { border-color: var(--mor); }
.rehber-metin { display: grid; gap: 4px; min-width: 0; }
.rehber-metin strong { font-size: 1.05rem; line-height: 1.3; }
.rehber-metin span { color: var(--soluk); font-size: .92rem; line-height: 1.45; }
.rehber-sayfa { display: grid; gap: 22px; padding-block: 8px 56px; }
.yol ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--soluk); }
.yol li + li::before { content: "›"; margin-right: 6px; }
.yol a { color: var(--soluk); }
.yazi { display: grid; gap: 16px; justify-items: start; }
.yazi > * { max-width: 760px; width: 100%; }
.yazi-bas { display: grid; gap: 6px; }
.yazi-bas h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.yazi-bilgi { margin: 0; color: var(--soluk); font-size: .9rem; }
.yazi h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-top: 14px; }
.yazi h3 { font-size: 1.15rem; }
.yazi p, .yazi li { line-height: 1.7; }
.yazi p { margin: 0; }
.yazi ul, .yazi ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.yazi .giris { font-size: 1.12rem; background: var(--kart); border-left: 4px solid var(--mor); border-radius: 0 14px 14px 0; padding: 14px 18px; }
.rehber-tablo { margin: 6px 0; display: grid; gap: 8px; }
.rehber-tablo figcaption { font-weight: 700; }
.tablo-kaydir { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); }
.tablo-kaydir:focus-visible { outline: 3px solid var(--sari); }
.rehber-tablo table { border-collapse: collapse; width: 100%; font-size: .95rem; font-variant-numeric: tabular-nums; }
.rehber-tablo th, .rehber-tablo td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.rehber-tablo thead th { background: var(--mor-acik); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.rehber-tablo tbody tr:last-child > * { border-bottom: 0; }
.tablo-not { margin: 0; color: var(--soluk); font-size: .85rem; }
.cta-kutu { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #4933d1, #7b5cff); color: #fff; border-radius: 18px; padding: 18px 20px; }
.cta-kutu div { display: grid; gap: 2px; }
.cta-kutu strong { font-size: 1.15rem; }
.cta-kutu span { opacity: .9; font-size: .95rem; }
.cta-kutu .btn-ana { background: #fbbc34; color: #221f3a; }
.yazi-sss { display: grid; gap: 10px; }

/* Düz metin sayfaları */
.metin-sayfa { padding-block: 12px 56px; display: grid; gap: 14px; justify-items: start; min-width: 0; }
.metin-sayfa > * { max-width: 760px; }   /* dar okuma sütunu (satır ~70 karakter); sağ sütunda İçindekiler + hesapla kutusu */
.metin-sayfa h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.metin-sayfa h2 { font-size: 1.35rem; margin-top: 10px; }
.metin-sayfa p, .metin-sayfa li { color: var(--yazi); }
.metin-sayfa .soluk { color: var(--soluk); }
@media (prefers-reduced-motion: reduce) { .sicaklik, .gunes-isin { animation: none; } .parca, .secenek, .ilerleme span { transition: none; } }

/* Yönetim paneli (panel/): sitenin renkleri, sade iş ekranı */
.panel-ust { padding-block: 14px; border-bottom: 1px solid var(--cizgi); background: var(--kart); }
.panel-ust .sarmal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.panel-ust .logo img { height: 44px; }
.panel-etiket { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mor); background: var(--mor-acik); padding: 4px 10px; border-radius: 99px; }
.panel-cikis { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.panel-cikis .btn { min-height: 40px; padding: 8px 16px; font-size: .95rem; }
.panel-kullanici { color: var(--soluk); font-size: .95rem; }
.panel-ana { display: grid; gap: 20px; padding-block: 28px 56px; }
.panel-bas { display: grid; gap: 4px; }
.panel-bas h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.panel-bas p { margin: 0; color: var(--soluk); }
.panel-bildirim { margin: 0; background: #e6f6ec; color: #17603a; border: 1px solid #bfe5cc; border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.panel-kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .panel-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel-kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 16px; display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.panel-kutu .etiket { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); }
.panel-kutu strong { font: 800 1.35rem var(--f-baslik); color: var(--mor); font-variant-numeric: tabular-nums; }
.panel-kutu span:last-child { font-size: .86rem; color: var(--soluk); }
.panel-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; padding: 22px; display: grid; gap: 14px; min-width: 0; }
.panel-kart h2 { font-size: 1.3rem; }
.panel-not { margin: 0; color: var(--soluk); font-size: .95rem; max-width: 75ch; }
.panel-form { display: grid; gap: 14px; }
.panel-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-izgara .genis { grid-column: 1 / -1; }
@media (max-width: 640px) { .panel-izgara { grid-template-columns: 1fr; } }
.panel-alan { display: grid; gap: 6px; }
.panel-alan > span { font-size: .82rem; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .05em; }
.panel-alan input, .panel-alan textarea { font: 500 1.05rem var(--f-govde); color: var(--yazi); background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; width: 100%; }
.panel-alan input:focus, .panel-alan textarea:focus { outline: none; border-color: var(--mor); }
.panel-alan.hatali input { border-color: #c2410c; }
.panel-ipucu { min-height: 1.2em; font-size: .86rem; color: var(--soluk); }
.panel-alan.hatali .panel-ipucu { color: #c2410c; font-weight: 600; }
.panel-giris { max-width: 420px; width: 100%; margin: 6vh auto 0; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; padding: 28px; display: grid; gap: 16px; box-shadow: var(--golge); }
.panel-giris h1 { font-size: 1.5rem; text-align: center; }
.panel-giris .btn { justify-content: center; }
.panel-tablo { overflow-x: auto; }
.panel-tablo table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.panel-tablo th, .panel-tablo td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--cizgi); vertical-align: top; }
.panel-tablo th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); border-top: 0; }
.panel-tablo tr.gecerli td { background: var(--sari-acik); }
.panel-tablo td.kaynak { color: var(--soluk); font-size: .85rem; min-width: 260px; }
.cip { font-style: normal; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--mor); color: #fff; padding: 2px 7px; border-radius: 99px; margin-left: 6px; }

/* Sonuç kartı (static/js/sonuc-karti.js): cihaza özel küçük hareketli çizim + büyük öneri; her araçta aynı (Emre 7 Eki) */
.sonuc-kart { background: linear-gradient(180deg, var(--mor-acik) 0%, var(--kart) 78%); border: 1px solid var(--cizgi); border-radius: 26px; padding: 22px 18px 20px; display: grid; justify-items: center; text-align: center; gap: 4px; box-shadow: var(--golge); }
.sonuc-cizim { width: 132px; height: auto; margin-bottom: 4px; overflow: visible; }
.sonuc-ust { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mor); }
.sonuc-deger { font: 800 3.4rem/1.05 var(--f-baslik); color: var(--mor); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sonuc-deger small { font-size: 1.35rem; font-weight: 700; color: var(--yazi); letter-spacing: 0; }
.sonuc-rozet { margin-top: 6px; background: var(--sari-acik); color: var(--yazi); font-size: .9rem; font-weight: 600; padding: 5px 14px; border-radius: 99px; }
.sonuc-cizim .c-govde { fill: var(--kart); stroke: var(--mor); stroke-width: 4; }
.sonuc-cizim .c-ekran, .sonuc-cizim .c-yuva { fill: var(--mor-acik); stroke: var(--mor); stroke-width: 3; }
.sonuc-cizim .c-led { fill: var(--sari); }
.sonuc-cizim .c-dugme { fill: var(--mor-acik); stroke: var(--mor); stroke-width: 2.5; }
.sonuc-cizim .c-alev { fill: var(--sari); stroke: var(--sicak); stroke-width: 2.5; stroke-linejoin: round; }
.sonuc-cizim .c-boru, .sonuc-cizim .c-cizgi { fill: none; stroke: var(--mor); stroke-width: 4; stroke-linecap: round; }
.sonuc-cizim .c-pervane { fill: var(--mor); }
.sonuc-cizim .c-serin, .sonuc-cizim .c-kar { fill: none; stroke: var(--soguk-koyu); stroke-width: 4; stroke-linecap: round; }
.sonuc-cizim .c-basi { fill: var(--mor); }
.sonuc-cizim .c-su-damla { fill: none; stroke: var(--soguk-koyu); stroke-width: 3.5; stroke-linecap: round; }
.sonuc-cizim .c-su { fill: var(--soguk); }
.a-alev { transform-box: fill-box; transform-origin: 50% 100%; animation: alev 1.4s ease-in-out infinite; }
@keyframes alev { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.92, 1.1); } }
.a-pervane { transform-box: fill-box; transform-origin: center; animation: don 2.4s linear infinite; }
.a-dalga { animation: dalga 2s ease-in-out infinite; }
@keyframes dalga { 0% { transform: translateY(-4px); opacity: .25; } 50% { opacity: 1; } 100% { transform: translateY(5px); opacity: .25; } }
.a-damla { animation: damla 1.1s linear infinite; }
@keyframes damla { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.a-su { animation: su 3.2s ease-in-out infinite; }
@keyframes su { 0%, 100% { transform: translateY(14px); } 50% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .a-alev, .a-pervane, .a-dalga, .a-damla, .a-su { animation: none; } }
@media (max-width: 560px) { .sonuc-deger { font-size: 2.9rem; } .sonuc-cizim { width: 112px; } }

/* Okuma sayfaları (hesap yöntemi, hakkımızda, KVKK, rehber yazıları): solda yazı, sağda sabit "Bu Sayfada" + hesapla kutusu.
   Emre 7 Eki: sola yaslı yazının sağı boş kalınca hata gibi görünüyordu. Telefonda/dar ekranda sağ sütun yok. */
.okuma-duzen { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; justify-content: space-between; align-items: start; }
.okuma-duzen .yazi { min-width: 0; }
.yan-kutu { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); display: grid; gap: 14px; margin-top: 12px; }
.icindekiler { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sari-acik) 0%, var(--kart) 34%); border: 1px solid var(--cizgi); border-radius: 22px; padding: 18px 14px 14px; box-shadow: var(--golge); }
.okuma-ilerleme { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--mor-acik); }
.okuma-ilerleme span { display: block; height: 100%; background: linear-gradient(90deg, #fbbc34, #ff8a3d); transform: scaleX(0); transform-origin: left; transition: transform .15s linear; }
.yan-baslik { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; padding-left: 4px; font: 800 1.05rem var(--f-baslik); color: var(--yazi); }
.yan-baslik .sim-kutu { background: var(--kart); box-shadow: 0 0 0 2px var(--mor-acik); }
.icindekiler ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: bolum; }
.icindekiler li { counter-increment: bolum; }
.icindekiler a { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 14px; color: var(--yazi); text-decoration: none; font-size: .92rem; line-height: 1.35; transition: background .2s, color .2s; }
.icindekiler a::before { content: counter(bolum); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mor-acik); color: var(--mor); font: 700 .8rem var(--f-govde); transition: background .2s, color .2s; }
.icindekiler a:hover { background: var(--mor-acik); }
.icindekiler a.etkin { background: var(--mor-acik); color: var(--mor); font-weight: 600; }
.icindekiler a.etkin::before { background: var(--mor); color: #fff; }
.yan-cta { background: linear-gradient(135deg, #4933d1 0%, #7b5cff 100%); color: #fff; border-radius: 22px; padding: 20px 18px; display: grid; gap: 8px; justify-items: center; text-align: center; box-shadow: 0 14px 30px rgba(73, 51, 209, .22); }
.yan-cta strong { font: 800 1.15rem var(--f-baslik); }
.yan-cta span { font-size: .9rem; opacity: .92; line-height: 1.45; }
.yan-cta .btn { background: #fbbc34; color: #221f3a; min-height: 48px; padding: 10px 20px; margin-top: 4px; }
.okuma-duzen h2[id] { scroll-margin-top: 20px; }
@media (max-width: 1000px) { .okuma-duzen { grid-template-columns: minmax(0, 1fr); } .yan-kutu { display: none; } }