/* ============================================================================
   hum — site gorunumu (butun sayfalar)

   DUVARDAKI EKRANLA AYNI DIL. Renkler node-b/ui/src/tema.c'nin GUNDUZ ve
   GECE paletleri; yazi tipleri cihazdakiyle ayni: metin IBM Plex Sans,
   olculen sayi IBM Plex Mono (sifirindaki nokta kaldirilmis kopya).
   Yazi tipleri SITENIN KENDISINDEN yukleniyor: ziyaretcinin tarayicisi
   ucuncu bir sirkete istek atmiyor. "Hicbir sey evden cikmaz" diyen bir
   urunun sitesi, ilk satirda Google'a istek atmamali.

   Onceki sitede Geist ve uc noktali bir guven gostergesi vardi. Noktalar
   urunun her yerinden kaldirildi; yerine KELIME.
   ========================================================================== */
@font-face{font-family:"Plex";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url(/fonts/plex-mono-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --kagit:#F2F1ED; --yuzey:#FFFFFF; --murekkep:#121A1F;
  --solgun:#55646B; --silik:#647178; --hat:#DEDDD7;
  --bakir:#A2542B; --bakir-koyu:#83421F; --bakir-zemin:#F4EBE4; --bakir-uzeri:#FFFFFF;
  --iyi:#2F6B53; --uyari:#84611F; --uyari-zemin:#F5F1E6;
  --cerceve:#0E1316;
  --yay:cubic-bezier(.16,1,.3,1);
  --metin:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sayi:"PlexMono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --kagit:#111619; --yuzey:#1B2226; --murekkep:#E7EDEF;
    --solgun:#A3B3B9; --silik:#8A9BA1; --hat:#2C3439;
    --bakir:#D2824F; --bakir-koyu:#E09A6B; --bakir-zemin:#2A1F19; --bakir-uzeri:#0F1519;
    --iyi:#5FA986; --uyari:#C89B49; --uyari-zemin:#241E13;
    --cerceve:#05080A;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--kagit);color:var(--murekkep);font-family:var(--metin);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--bakir);outline-offset:3px;border-radius:6px}
.bag{color:var(--bakir);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--bakir) 40%,transparent);transition:text-decoration-color .3s var(--yay)}
.bag:hover{text-decoration-color:var(--bakir)}
.kap{max-width:1120px;margin:0 auto;padding-inline:24px}
.dar-kap{max-width:760px;margin:0 auto;padding-inline:24px}
.orta{text-align:center}
.orta .lede{margin-inline:auto}
.atla{position:absolute;left:-9999px}
.atla:focus{left:12px;top:12px;background:var(--yuzey);padding:10px 16px;border-radius:10px;z-index:99}
.sayi{font-family:var(--sayi);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- ust */
.ust{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--kagit) 84%,transparent);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .35s var(--yay)}
.ust.kaydi{border-bottom-color:var(--hat)}
.ust-ic{max-width:1120px;margin:0 auto;padding-inline:24px;height:60px;display:flex;align-items:center;gap:24px}
.marka{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:500;letter-spacing:-.03em}
.marka svg{width:26px;height:26px;flex:none}
.baglar{margin-left:auto;display:flex;align-items:center;gap:22px}
.baglar a:not(.dugme){font-size:14.5px;color:var(--solgun);transition:color .18s}
.baglar a:not(.dugme):hover,.baglar a[aria-current="page"]{color:var(--murekkep)}
@media (max-width:860px){.baglar a:not(.dugme){display:none}}

/* -------------------------------------------------------------- dugme */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;
  border-radius:14px;border:1px solid transparent;font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;
  transition:background-color .3s var(--yay),border-color .3s var(--yay),color .3s var(--yay),transform .18s var(--yay)}
.dugme.ana{background:var(--bakir);color:var(--bakir-uzeri)}
.dugme.ana:hover{background:var(--bakir-koyu)}
.dugme.sade{border-color:var(--hat);color:var(--murekkep);background:var(--yuzey)}
.dugme.sade:hover{border-color:var(--solgun)}
.dugme.ufak{height:38px;padding:0 16px;font-size:14.5px;border-radius:11px}
.dugme:active{transform:scale(.982)}
.eylem{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.orta .eylem{justify-content:center}

/* --------------------------------------------------------------- yazi */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,68px)}
h2{font-size:clamp(30px,4.2vw,46px)}
h3{font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.ust-etiket{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--silik);margin:0 0 16px;font-weight:600}
.lede{color:var(--solgun);font-size:clamp(17px,1.9vw,19px);line-height:1.62;margin:22px 0 0;max-width:60ch}
.not{color:var(--silik);font-size:14px;line-height:1.62;margin:18px 0 0;max-width:64ch}
.vurgu{color:var(--bakir)}
.buyuk-soz{font-size:clamp(30px,4.4vw,52px);font-weight:400;line-height:1.14;letter-spacing:-.032em;
  text-wrap:balance;max-width:22ch;margin:0 auto}

/* ------------------------------------------------------------- bolum */
.bolum{padding-block:clamp(72px,10vw,128px);border-top:1px solid var(--hat)}
.bolum-yuzey{background:var(--yuzey)}
.bolum-basi{margin-bottom:clamp(36px,5vw,56px)}
.bolum-basi h2{margin-bottom:4px}

/* --------------------------------------------------------------- giris */
.giris{padding-block:clamp(56px,9vw,104px) clamp(56px,8vw,96px)}
.giris-izgara{display:grid;gap:clamp(40px,6vw,72px);align-items:center;grid-template-columns:1fr}
@media (min-width:980px){.giris-izgara{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.giris-not{margin-top:20px;font-size:14px;color:var(--silik)}

/* ----------------------------------------------------- cihaz cercevesi */
.cerceve{margin:0;background:var(--cerceve);border-radius:26px;padding:clamp(12px,1.6vw,18px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.cerceve img{border-radius:10px;width:100%;aspect-ratio:5/3;object-fit:cover}
.cerceve-alt{margin:14px 4px 0;font-size:13px;color:var(--silik);text-align:center}
.telefon{margin:0;background:var(--cerceve);border-radius:40px;padding:10px;max-width:280px}
.telefon img{border-radius:31px;width:100%;aspect-ratio:9/16;object-fit:cover}

/* ------------------------------------------------------------- imza */
.imza{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.imza path{fill:none;stroke:var(--bakir);stroke-linecap:round;stroke-width:4.5}
.imza .isaret{stroke:var(--silik);stroke-width:1.5;stroke-dasharray:3 5}
html.js .imza .dalga{stroke-dasharray:1600;stroke-dashoffset:1600}
html.js .imza.gorunur .dalga{transition:stroke-dashoffset 2.2s var(--yay);stroke-dashoffset:0}
.orta-not{margin:16px auto 0;max-width:50ch;font-size:14px;color:var(--silik);line-height:1.62;text-align:center}

.imza-izgara{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.imza-kart{background:var(--yuzey);border:1px solid var(--hat);border-radius:22px;padding:24px 24px 20px;overflow:hidden}
.bolum-yuzey .imza-kart{background:var(--kagit)}
.imza-kart .k{color:var(--silik);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin:0 0 12px}
.imza-kart h3{margin-bottom:10px}
.imza-kart p{margin:14px 0 0;color:var(--solgun);font-size:15px;line-height:1.6}
.imza-kart svg{display:block;width:100%;height:auto}
.imza-kart svg path{fill:none;stroke:var(--bakir);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.imza-kart svg .taban{stroke:var(--hat);stroke-width:1.5}
html.js .imza-kart svg path.egri{stroke-dasharray:2200;stroke-dashoffset:2200}
html.js .imza-kart.gorunur svg path.egri{transition:stroke-dashoffset 1.8s var(--yay) var(--gg,0ms);stroke-dashoffset:0}

/* ------------------------------------------------ ornek cihaz listesi */
.ornek{max-width:520px;margin:0 auto;background:var(--yuzey);border:1px solid var(--hat);border-radius:22px;overflow:hidden}
.bolum-yuzey .ornek{background:var(--kagit)}
.ornek-bas{display:flex;justify-content:space-between;align-items:baseline;padding:20px 22px 14px;border-bottom:1px solid var(--hat)}
.ornek-bas small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--silik);font-weight:600}
.ornek-toplam{font-family:var(--sayi);font-weight:300;font-size:40px;letter-spacing:-.04em}
.ornek-toplam i{font-style:normal;font-family:var(--metin);font-size:18px;color:var(--bakir);margin-left:6px;letter-spacing:0}
.sat{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--hat)}
.sat:last-child{border-bottom:0}
.sat .ad{flex:1;min-width:0}
.sat .ad b{display:block;font-weight:500}
.sat .ad em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--silik);margin-top:2px}
.sat .ad em span{color:var(--bakir)}
.sat .w{font-family:var(--sayi);font-size:17px;white-space:nowrap}
.sat .w i{font-style:normal;font-family:var(--metin);font-size:14px;color:var(--bakir);margin-left:4px}
.sat.tahmin .ad b,.sat.tahmin .w,.sat.tahmin .w i{color:var(--solgun)}
.sat.bilinmez{background:color-mix(in srgb,var(--kagit) 60%,transparent)}
.sat.bilinmez .ad b,.sat.bilinmez .w,.sat.bilinmez .w i{color:var(--solgun)}
.ornek-etiket{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--silik)}

/* ---------------------------------------------------------------- kart */
.izgara{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.izgara+.izgara{margin-top:16px}
.kart{background:var(--yuzey);border:1px solid var(--hat);border-radius:22px;padding:26px}
.bolum-yuzey .kart{background:var(--kagit)}
.kart h3{margin-bottom:10px}
.kart p{margin:0;color:var(--solgun);font-size:15px;line-height:1.62}
.kart .rakam{font-family:var(--sayi);font-weight:300;font-size:34px;letter-spacing:-.04em;color:var(--bakir);display:block;margin-bottom:8px}

/* -------------------------------------------------------------- galeri */
.galeri{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,520px);gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 24px 18px;margin-inline:-24px;scrollbar-width:thin}
.galeri figure{margin:0;scroll-snap-align:start}
.galeri figcaption{margin-top:14px;padding-inline:4px}
.galeri figcaption b{display:block;font-weight:500}
.galeri figcaption span{display:block;color:var(--solgun);font-size:14.5px;line-height:1.55;margin-top:2px}

/* ------------------------------------------------------------ uc adim */
.adim-izgara{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start}
.adim-izgara figure{margin:0}
.adim-izgara .telefon{margin:0 auto}
.adim-izgara figcaption{margin-top:18px;text-align:center}
.adim-izgara figcaption .no{font-family:var(--sayi);color:var(--bakir);font-size:15px}
.adim-izgara figcaption b{display:block;font-weight:500;font-size:18px;margin-top:4px}
.adim-izgara figcaption span{display:block;color:var(--solgun);font-size:15px;line-height:1.58;margin:6px auto 0;max-width:34ch}

/* ------------------------------------------------------------- tablo */
.sar{width:100%;overflow-x:auto}
.tablo{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tablo th,.tablo td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--hat);vertical-align:top}
.tablo thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--silik);font-weight:600}
.tablo td:first-child{font-weight:500}
.tablo .evet{color:var(--bakir)}
.tablo .hayir{color:var(--silik)}
.tablo th.hum,.tablo td.hum{background:color-mix(in srgb,var(--bakir) 6%,transparent)}

/* ----------------------------------------------------- teknik liste */
.tek-liste{margin:0;display:grid}
.tek-liste>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px 28px;padding:18px 0;border-top:1px solid var(--hat)}
.tek-liste>div:last-child{border-bottom:1px solid var(--hat)}
.tek-liste dt{font-weight:500}
.tek-liste dd{margin:0;color:var(--solgun);font-size:15.5px;line-height:1.6}
@media (max-width:640px){.tek-liste>div{grid-template-columns:1fr}}

/* ------------------------------------------------------------ ozellik */
.ozellik{display:grid;gap:clamp(30px,4vw,48px) 48px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ozellik h3{font-size:clamp(20px,2.2vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.22;margin-bottom:10px}
.ozellik p{color:var(--solgun);font-size:15.5px;line-height:1.64;margin:0;max-width:46ch}
.etiketcik{display:inline-block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--bakir);margin-bottom:10px}

/* ----------------------------------------------------------------- sss */
.sss details{border-bottom:1px solid var(--hat)}
.sss summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-size:17.5px;position:relative;transition:color .25s var(--yay)}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--bakir)}
.sss summary::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--silik);border-bottom:1.5px solid var(--silik);transform:rotate(45deg);transition:transform .35s var(--yay)}
.sss details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.sss .cevap{color:var(--solgun);font-size:15.5px;line-height:1.7;padding:0 40px 22px 0;margin:0}

/* ---------------------------------------------------------------- form */
.haber{display:flex;gap:10px;max-width:460px;margin:30px auto 0;flex-wrap:wrap}
.haber input{flex:1 1 230px;height:48px;padding:0 16px;font:inherit;font-size:16px;border:1px solid var(--hat);
  border-radius:14px;background:var(--yuzey);color:inherit;transition:border-color .3s var(--yay),box-shadow .3s var(--yay)}
.haber input:focus{outline:none;border-color:var(--bakir);box-shadow:0 0 0 4px color-mix(in srgb,var(--bakir) 14%,transparent)}
.haber-not{margin:16px auto 0;max-width:46ch;font-size:14px;color:var(--silik);line-height:1.62;text-align:center;min-height:1.6em}
.haber-not.tamam{color:var(--iyi)}

/* ------------------------------------------------------- kurulum adim */
.kurulum{list-style:none;margin:0;padding:0}
.kurulum li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:28px 0;border-top:1px solid var(--hat)}
.kurulum li:last-child{border-bottom:1px solid var(--hat)}
.kurulum .no{font-family:var(--sayi);font-weight:300;font-size:30px;line-height:1;color:var(--bakir)}
.kurulum h3{margin:2px 0 8px;font-size:20px}
.kurulum p{margin:0;color:var(--solgun);font-size:15.5px;line-height:1.64;max-width:62ch}
.kurulum .uyari{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--uyari-zemin);color:var(--murekkep);font-size:14.5px;line-height:1.55;max-width:62ch}

/* ------------------------------------------------------------- sahne */
.sahne-bolum{position:relative;border-top:1px solid var(--hat)}
.sahne-yol{height:300vh}
.sahne{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sahne-ic{display:grid;gap:clamp(28px,5vw,64px);align-items:center;width:100%;grid-template-columns:1fr}
@media (min-width:900px){.sahne-ic{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.sahne-an{font-family:var(--sayi);font-size:14px;color:var(--silik);margin:0 0 14px}
.sahne-baslik{font-size:clamp(30px,3.8vw,46px);margin:0 0 14px}
.sahne-metin{color:var(--solgun);font-size:17px;line-height:1.62;max-width:42ch;margin:0;min-height:5.2em}
.sahne-sag{display:grid;gap:18px}
.sahne-dalga{width:100%;height:auto;overflow:visible}
.sahne-dalga .taban{stroke:var(--hat);stroke-width:1.5}
.sahne-dalga .yol{fill:none;stroke:var(--bakir);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.sahne-dalga .an{stroke:var(--silik);stroke-width:1;stroke-dasharray:3 4}
.sahne .ornek{max-width:none;margin:0}
.sahne .sat{transition:background-color .5s var(--yay)}
.sahne-kaynak{font-size:12.5px;color:var(--silik);margin:0}
@media (prefers-reduced-motion:reduce){.sahne-yol{height:0}.sahne{position:relative;height:auto;padding-block:80px}}

/* ------------------------------------------------------ alt serit */
.alt-serit{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--kagit) 90%,transparent);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);border-top:1px solid var(--hat);
  transform:translateY(100%);transition:transform .32s var(--yay)}
.alt-serit.gorunur{transform:none}
.alt-serit-ic{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;font-size:14.5px;color:var(--solgun)}
.alt-serit-ic b{color:var(--murekkep);font-weight:500}
@media (prefers-reduced-motion:reduce){.alt-serit{transition:none}}

/* ----------------------------------------------------------------- alt */
.alt{border-top:1px solid var(--hat);padding-block:48px 64px;color:var(--solgun);font-size:14.5px}
.alt-ic{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.alt-baglar{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.alt-baglar a:hover{color:var(--murekkep)}
.alt-not{margin:22px 0 0;color:var(--silik);font-size:13.5px;max-width:70ch}

/* ------------------------------------------------------------ hareket */
html.js .belir{opacity:0;transform:translateY(14px);transition:opacity .7s var(--yay),transform .7s var(--yay);transition-delay:var(--gg,0ms)}
html.js .belir.gorunur{opacity:1;transform:none}
body.hazir .yuksel{animation:yuksel .72s var(--yay) both;animation-delay:var(--g,0ms)}
@keyframes yuksel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js .belir{opacity:1!important;transform:none!important;transition:none!important}
  body.hazir .yuksel{animation:none}
  html.js .imza .dalga,html.js .imza-kart svg path.egri{stroke-dashoffset:0!important;transition:none!important}
  .dugme,.dugme:active{transition:none;transform:none}
}

/* ---------------------------------------------------------------- FIYAT */
/* Iki cihaz, iki kart. Ucuncu bir "kurumsal" sutun YOK: iki urun var ve
   secenek yok; sayfa da oyle duruyor. */
.plan-izgara{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.plan{background:var(--kagit);border:1px solid var(--hat);border-radius:24px;padding:30px 28px 26px}
.plan.one-cikan{border-color:var(--bakir)}
.plan h2{font-size:clamp(24px,2.6vw,30px);margin:0}
.plan-rozet{display:inline-block;margin:0 0 10px;padding:5px 12px;border-radius:999px;
  background:var(--bakir);color:var(--bakir-uzeri);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
.plan-alt{color:var(--solgun);font-size:15.5px;line-height:1.55;margin:8px 0 0;max-width:34ch}
.plan-fiyat{font-family:var(--sayi);font-size:clamp(38px,4.6vw,52px);line-height:1;margin:22px 0 0;
  letter-spacing:-.02em}
.plan-fiyat-not{color:var(--silik);font-size:13.5px;margin:8px 0 22px}
.plan .dugme{width:100%}
.plan-liste{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--hat)}
.plan-liste li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--hat);
  font-size:15px;line-height:1.5;color:var(--murekkep)}
.plan-liste li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--bakir)}
.plan-not{color:var(--silik);font-size:13.5px;line-height:1.6;margin:18px 0 0}

/* ------------------------------------------------------------ FORMLAR */
/* Rezervasyon, kayda bakma ve yonetim ekrani ayni parcalari kullaniyor.
   Alan basligi INPUT'UN USTUNDE duruyor, icinde degil: yer tutucu metin
   yazmaya baslayinca kayboluyor ve kullanici neyi doldurdugunu
   unutabiliyor. */
.form-izgara{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.form-izgara{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}}

.alan{display:block;margin:0 0 20px}
.alan>span{display:block;font-size:14px;font-weight:500;margin:0 0 7px}
.alan>small{display:block;color:var(--silik);font-size:13px;line-height:1.5;margin:6px 0 0}
.alan input,.alan select,.alan textarea{width:100%;font:inherit;font-size:16px;color:var(--murekkep);
  background:var(--yuzey);border:1px solid var(--hat);border-radius:13px;padding:13px 15px}
.alan input,.alan select{height:50px;padding-block:0}
.alan textarea{min-height:104px;resize:vertical;line-height:1.55}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;border-color:var(--bakir);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--bakir) 14%,transparent)}
.alan.kisa{max-width:180px}

/* Secim kartlari: radyo dugmesi gorunuyor ama kartin TAMAMI tiklanabilir.
   Dokunma hedefi kucuk daire degil, kartin kendisi. */
.secim-izgara{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 22px}
.secim{position:relative;display:block;background:var(--yuzey);border:1px solid var(--hat);
  border-radius:18px;padding:18px 18px 16px;cursor:pointer;transition:border-color .18s}
.secim:hover{border-color:var(--solgun)}
.secim input{position:absolute;opacity:0;width:0;height:0}
.secim b{display:block;font-weight:500;font-size:18px}
.secim .fiyat{font-family:var(--sayi);font-size:22px;letter-spacing:-.02em;margin:8px 0 0;display:block}
.secim span.aciklama{display:block;color:var(--solgun);font-size:14px;line-height:1.5;margin:8px 0 0}
.secim:has(input:checked){border-color:var(--bakir);box-shadow:0 0 0 1px var(--bakir) inset}
.secim:has(input:focus-visible){outline:2px solid var(--bakir);outline-offset:3px}

/* Ozet: solda ne secildigi, sagda ne olacagi. Fiyat toplaniyor ama
   TAHSIL EDILMIYOR ve bu, toplamin hemen altinda yaziyor. */
.ozet-kart{background:var(--yuzey);border:1px solid var(--hat);border-radius:22px;padding:24px;
  position:sticky;top:76px}
.bolum-yuzey .ozet-kart{background:var(--kagit)}
.ozet-kart h3{margin:0 0 4px;font-size:19px}
.ozet-sat{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--hat);font-size:15px}
.ozet-sat:first-of-type{border-top:1px solid var(--hat);margin-top:16px}
.ozet-sat span:last-child{font-family:var(--sayi);white-space:nowrap}
.ozet-sat.toplam{font-size:17px;font-weight:500;border-bottom:0}
.ozet-not{color:var(--silik);font-size:13.5px;line-height:1.6;margin:14px 0 0}

/* Sonuc kutusu: kod, durum ya da hata. Renk TEK BASINA bilgi tasimiyor;
   her durumda kelime de yaziyor (renk korlugu). */
.durum-kutu{border:1px solid var(--hat);border-radius:18px;padding:22px 22px 20px;margin:24px 0 0;
  background:var(--yuzey)}
.bolum-yuzey .durum-kutu{background:var(--kagit)}
.durum-kutu.iyi{border-color:var(--iyi)}
.durum-kutu.kotu{border-color:var(--bakir)}
.durum-kutu h3{margin:0 0 8px;font-size:19px}
.durum-kutu p{margin:10px 0 0;color:var(--solgun);font-size:15px;line-height:1.6}
.durum-kutu .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--silik);
  font-weight:600;margin:0}
.kod{font-family:var(--sayi);font-size:clamp(26px,3.4vw,34px);letter-spacing:.02em;margin:6px 0 0;
  display:block;color:var(--bakir)}
.gizli{display:none}

/* Yonetim: sayi kartlari ve tablo. Kayit yoksa sifir yaziyor. */
.sayi-izgara{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 26px}
.sayi-kart{background:var(--yuzey);border:1px solid var(--hat);border-radius:18px;padding:18px 20px}
.bolum-yuzey .sayi-kart{background:var(--kagit)}
.sayi-kart .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--silik);
  font-weight:600;margin:0 0 6px}
.sayi-kart .v{font-family:var(--sayi);font-size:30px;line-height:1;letter-spacing:-.03em;margin:0}
.tablo td.kod-h{font-family:var(--sayi);white-space:nowrap}

/* Form icindeki bolum basligi: sayfa basligiyla yarismiyor. Once h2
   olceginde denendi ve formun kendisini bastirdi (ekranda gorundu). */
.form-baslik{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:34px 0 14px}
.form-baslik:first-child{margin-top:0}