@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* Koyu tema (gece) */
  --night:#12233D;
  --night-deep:#0C1A30;
  --bg-top:#183052; --bg:#12233D; --bg-bottom:#0C1A30;
  --surface:rgba(12,26,48,.7);     /* giriş alanları */
  --panel:#0C1A30;                 /* paylaşım paneli */
  --chip:rgba(227,242,250,.06);
  --chip-on:#E3F2FA; --chip-on-text:#12233D;
  --ice:#E3F2FA;
  --text:#EAF2F7;
  --muted:#93A9BF;
  --lamp:#F2A541;       /* tek sıcak vurgu: sokak lambası (buton) */
  --lamp-text:#F2A541;  /* vurgu rengindeki yazı */
  --error:#FFB4A6;
  --line:rgba(227,242,250,.16);
  --radius-btn:14px;
  --gutter:16px;
  --font:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
/* Açık tema (gündüz): cihaz açık moddaysa */
@media (prefers-color-scheme: light){
  :root{
    --bg-top:#E3EEF6; --bg:#F1F6FA; --bg-bottom:#F6F9FB;
    --surface:#FFFFFF;
    --panel:#FFFFFF;
    --chip:#FFFFFF;
    --chip-on:#12233D; --chip-on-text:#FFFFFF;
    --text:#13233B;
    --muted:#566A80;
    --lamp:#F2A541;
    --lamp-text:#B86A05;
    --error:#B3261E;
    --line:rgba(19,35,59,.14);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:radial-gradient(120% 70% at 50% 0%, var(--bg-top) 0%, var(--bg) 55%, var(--bg-bottom) 100%) fixed;
  background-color:var(--bg);
  color:var(--text); font-family:var(--font); font-size:17px; line-height:1.45;
  font-variation-settings:"opsz" 14;
}
.top{width:100%; max-width:560px; margin:0 auto; padding:16px var(--gutter) 0}
.brand{display:inline-flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; font-weight:800; font-size:17px; letter-spacing:-.01em}
.brand img{border-radius:8px; display:block}
main{flex:1; width:100%; max-width:560px; margin:0 auto; padding:12px var(--gutter) 32px}
.screen{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
.screen[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.headline{
  font-size:clamp(34px, 9vw, 52px); line-height:1.02; font-weight:800; letter-spacing:-.025em;
  margin:4px 0 0; max-width:12ch; font-variation-settings:"opsz" 96;
}
.title{font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.015em; margin:4px 0; font-variation-settings:"opsz" 60}
.lede{margin:0; color:var(--muted); max-width:30ch}

.btn{
  font:inherit; font-weight:600; font-size:18px; border:0; cursor:pointer;
  border-radius:var(--radius-btn); padding:16px 28px; min-height:56px; width:100%; max-width:340px;
}
.btn.primary{background:var(--lamp); color:#1B1405}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
:focus-visible{outline:3px solid var(--lamp); outline-offset:3px}

.back{
  align-self:flex-start; background:none; border:0; color:var(--muted); font:inherit; font-size:15px;
  padding:8px 0; cursor:pointer;
}
.back::before{content:"‹ "; }

/* Buz */
.ice-stage.single{width:min(64vw, 260px)}
.ice{width:100%; height:auto; display:block; overflow:visible}
.ice-stage.pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:4px 0 0}
.ice-stage.pair figure{margin:0; display:flex; flex-direction:column; align-items:center}
.ice-stage.pair figcaption{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:-6px}
.pct{font-size:clamp(44px, 13vw, 68px); font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; font-variation-settings:"opsz" 96}
#r-enag-pct{color:var(--lamp-text)}
.src{font-size:15px; color:var(--muted)}

/* Girdi */
.groups{display:grid; grid-template-columns:1fr; gap:10px; width:100%}
.chip{
  font:inherit; font-size:16px; font-weight:600; color:var(--text); background:var(--chip);
  border:1px solid var(--line); border-radius:var(--radius-btn); padding:14px 10px; min-height:56px; cursor:pointer;
}
.chip[data-group="ozel"]{font-weight:400; background:transparent; border-style:dashed}
.chip[data-group="ozel"][aria-checked="true"]{background:var(--chip-on); border-style:solid}
.chip[aria-checked="true"]{background:var(--chip-on); color:var(--chip-on-text); border-color:var(--chip-on)}
.ytd{
  font:inherit; font-size:17px; font-weight:600; width:100%; min-height:56px; cursor:pointer;
  color:var(--text); background:var(--chip); border:1.5px solid var(--lamp); border-radius:var(--radius-btn); padding:12px 14px;
}
.ytd[hidden]{display:none}
.ytd small{display:block; font-size:14px; font-weight:400; color:var(--muted)}
form{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; margin-top:6px}
form[hidden], #own-fields[hidden]{display:none}
#own-fields{display:flex; flex-direction:column; gap:16px; width:100%}
.field{display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; text-align:left}
.label{font-weight:600}
.hint{font-size:14px; color:var(--muted); margin:0}
select, .money{
  font:inherit; font-size:18px; color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; min-height:54px; width:100%;
}
select{padding:0 14px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.money{display:flex; align-items:center; padding:0 14px; gap:8px}
.money input{flex:1; min-width:0; font:inherit; font-size:20px; font-variant-numeric:tabular-nums; color:var(--text); background:none; border:0; outline:none; height:52px}
.money:focus-within{border-color:var(--lamp)}
.money span{color:var(--muted)}
.error{color:var(--error); margin:0; min-height:1em; font-size:15px}
.trust{font-size:14px; color:var(--muted); margin:0; max-width:34ch}

/* Sonuç */
.context{margin:0; color:var(--muted); font-size:15px}
.calendar{font-size:21px; line-height:1.3; font-weight:600; margin:6px 0 0; max-width:26ch}
.calendar b{color:var(--lamp-text); font-weight:800}
.dollar{margin:0; color:var(--muted); max-width:32ch}
.channels{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; margin-top:4px}
.channels-lede{margin:0; font-size:15px; color:var(--muted); max-width:32ch}
.btn.wa{display:flex; align-items:center; justify-content:center; text-decoration:none; background:transparent; color:var(--text); border:1.5px solid var(--line); font-size:17px; min-height:50px}
.channel{color:var(--text); font-size:15px; max-width:32ch; text-underline-offset:3px; text-decoration-color:var(--lamp)}
.ad-slot{width:100%; max-width:336px; margin-top:20px; border:1px solid var(--line); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px}
.ad-label{font-size:12px; color:var(--muted); text-align:left}
.ad-inner{min-height:250px}
.ad-slot.empty{display:none}
.footnote{font-size:13px; color:var(--muted); margin:8px 0 0; max-width:40ch}
.footnote a{color:var(--muted)}

/* Paylaşım */
dialog{
  border:0; padding:0; background:var(--panel); color:var(--text); border-radius:20px;
  width:min(520px, calc(100vw - 2*var(--gutter))); max-height:calc(100dvh - 32px);
}
dialog::backdrop{background:rgba(5,12,24,.7)}
.share-panel{position:relative; padding:22px 18px; gap:14px}
fieldset{border:0; margin:0; padding:0; width:100%; display:flex; flex-wrap:wrap; gap:8px 16px; text-align:left}
legend{font-weight:600; margin-bottom:6px; width:100%}
fieldset label{display:flex; align-items:center; gap:6px; font-size:16px}
input[type=radio]{accent-color:var(--lamp); width:18px; height:18px}
#card-preview{width:100%; max-height:46dvh; object-fit:contain; border-radius:10px; background:#12233D}
.share-actions{display:flex; flex-direction:column; gap:10px; width:100%; align-items:center}
.close{position:absolute; top:12px; right:12px; background:none; border:0; color:var(--muted); font:inherit; font-size:15px; cursor:pointer; padding:8px}

.site-foot{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px; padding:18px var(--gutter) 28px; font-size:14px}
.site-foot a{color:var(--muted)}

/* İçerik sayfaları */
.doc{max-width:640px; text-align:left; display:block}
.doc h1{font-size:34px; line-height:1.1; letter-spacing:-.02em; font-weight:800; margin:8px 0 18px}
.doc h2{font-size:21px; margin:28px 0 8px}
.doc p, .doc li{max-width:66ch}
.doc a{color:var(--text); text-decoration-color:var(--lamp); text-underline-offset:3px}
.doc table{border-collapse:collapse; width:100%; font-size:14px; font-variant-numeric:tabular-nums}
.doc th, .doc td{border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top}
.doc .table-wrap{overflow-x:auto}

@media (min-width:720px){ main{padding-top:32px} .top{max-width:640px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

[tabindex="-1"]:focus{outline:none}
.doc .table-wrap table{font-size:13px}