:root{
  --red:#ad001d;
  --red-dark:#850015;
  --red-soft:#f8e9ec;
  --ink:#191919;
  --line:#eadfe1;
  --paper:#fffdfd;
  --muted:#71676a;
}

/*
  FONT — Montserrat (variable, latin + latin-ext, TR karakter desteği dahil)
  -----------------------------------------------------------------
  Google Fonts'tan self-host edilmiş değişken (variable) font; tek dosya
  100-900 arası tüm ağırlıkları kapsar. assets/fonts/Montserrat-VF-*.woff2
*/
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-VF-latin.woff2") format("woff2-variations"),url("assets/fonts/Montserrat-VF-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-VF-latin-ext.woff2") format("woff2-variations"),url("assets/fonts/Montserrat-VF-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:transparent;
  font-family:"Montserrat",Inter,Arial,Helvetica,sans-serif;
  color:var(--ink)
}
body{min-height:100vh;display:grid;place-items:start center}
button{font:inherit}
.ad{position:relative;width:300px;height:600px;overflow:hidden;background:var(--paper);border:1px solid #ded7d8;box-shadow:0 10px 36px rgba(0,0,0,.12);isolation:isolate}
.brandbar{height:36px;background:var(--red);display:flex;align-items:center;justify-content:space-between;padding:0 12px;position:absolute;left:0;right:0;top:0;z-index:20}
.brandbar__logo{width:92px;height:auto;display:block}
.brandbar__dots{display:flex;gap:4px}
.brandbar__dots i{display:block;width:11px;height:4px;border-radius:9px;background:#fff}
.brandbar__dots i:last-child{width:4px;opacity:.8}
.screen{position:absolute;inset:36px 0 0;display:none;background:var(--paper);overflow:hidden}
.screen--active{display:block;animation:screenIn .35s cubic-bezier(.2,.75,.25,1)}
.screen__inner{height:100%;padding:17px 14px 13px;display:flex;flex-direction:column}
.eyebrow,.result__kicker{font-size:8px;letter-spacing:.14em;font-weight:700;color:var(--red);margin-bottom:7px}
h1,h2{
  font-family:"Montserrat",Inter,Arial,Helvetica,sans-serif;
  font-weight:700;
  margin:0;
  line-height:1.15;
  letter-spacing:-.01em
}
h1{font-size:22px}
h2{font-size:24px}
.lead{font-size:9px;color:var(--muted);margin:7px 0 12px}
.options{display:grid;gap:7px}
.option{min-height:39px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:8px;color:#292326;font-size:10px;text-align:left;cursor:pointer;transition:.18s ease;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.option:hover{border-color:#cf9ba5;transform:translateY(-1px)}
.option.is-selected{border-color:var(--red);background:#fff7f8;box-shadow:0 0 0 1px rgba(173,0,29,.05) inset}
.check{width:13px;height:13px;border:1px solid #d9c8cc;border-radius:50%;position:relative;flex:0 0 auto;background:#fff}
.option.is-selected .check{border-color:var(--red);background:var(--red)}
.option.is-selected .check:after{content:'✓';position:absolute;color:#fff;font-size:9px;font-weight:700;left:2px;top:-1px}
.questionBanner{width:100%;height:160px;object-fit:cover;object-position:center;border-radius:9px;display:block;margin-top:9px}
.primary,.secondary,.ghost,.restart{border:0;cursor:pointer}
.primary{height:38px;border-radius:7px;background:linear-gradient(180deg,#bd0827,var(--red));color:#fff;font-weight:600;font-size:10px;margin-top:auto;box-shadow:0 6px 14px rgba(173,0,29,.15)}
.primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.primary:not(:disabled):active{transform:scale(.985)}
.ghost{background:none;color:#9c8c90;font-size:8px;text-decoration:underline;margin-top:8px;padding:3px}
.screen--result{background:linear-gradient(155deg,#b40020 0%,#a6001c 52%,#920016 100%);color:#fff}
.screen--result .screen__inner{padding:18px 13px 11px}
.result{position:relative;z-index:2}
.resultGlow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 67%);right:-110px;top:-90px;pointer-events:none}
.result__kicker{color:#ffd7df;margin-bottom:5px}
.result__text{font-size:9px;line-height:1.4;margin:8px 0 10px;color:#ffeef1;max-width:255px}
.campaign{border:1px solid rgba(255,255,255,.18);background:rgba(96,0,15,.25);border-radius:9px;padding:8px 9px;margin-bottom:8px;position:relative}
.campaign__tag{position:absolute;right:7px;top:7px;font-size:7px;letter-spacing:.1em;background:#fff;color:var(--red);padding:4px 6px;border-radius:99px;font-weight:700}
.campaign strong{display:block;font-size:15px;line-height:1.2;padding-right:58px}
.campaign small{display:block;font-size:9px;line-height:1.35;color:#ffd9df;margin-top:5px;max-width:245px}
.shelf{background:rgba(101,0,17,.45);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px;margin-bottom:8px}
.shelf__top{display:flex;align-items:center;justify-content:space-between;font-size:7px;letter-spacing:.11em;font-weight:600;color:#ffdce2}
.liveBadge{font-size:6px;border:1px solid rgba(255,255,255,.35);padding:2px 5px;border-radius:9px}
.chips{display:flex;gap:4px;overflow:hidden;margin-top:6px}
.chip{white-space:nowrap;font-size:7px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);padding:4px 6px;border-radius:99px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px;min-height:118px}
.product{background:#fff;border-radius:9px;color:#2c2225;overflow:hidden;min-width:0;position:relative;cursor:pointer;
  animation:placeOnShelf .5s cubic-bezier(.22,.9,.32,1.1) both, productPulse 1.8s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 110ms), calc(var(--i,0) * 110ms + 900ms);
  transition:transform .16s cubic-bezier(.22,.9,.32,1.1),box-shadow .16s ease}
.product[data-url]:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.08);box-shadow:0 10px 20px rgba(0,0,0,.18);z-index:2}
.product[data-url]:active{animation-play-state:paused;transform:scale(.94);box-shadow:0 4px 10px rgba(0,0,0,.14)}
.product__visual{height:70px;overflow:hidden;background:linear-gradient(145deg,#fff,#f7edef);position:relative}
.product__visual img{display:block;width:100%;height:100%;object-fit:contain}
.product__emoji{font-size:28px;filter:saturate(.8);display:grid;place-items:center;height:100%}
.product__pick{position:absolute;left:50%;top:-8px;font-size:15px;transform:translate(-50%,-10px);opacity:0;animation:pickAndPlace .5s ease-out both;animation-delay:calc(var(--i,0) * 110ms)}
.product__cta{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:2px;background:rgba(173,0,29,.94);color:#fff;font-size:6.5px;font-weight:700;letter-spacing:.02em;padding:3px 6px 3px 6px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.2);opacity:0;transform:translateY(4px);animation:ctaIn .4s ease-out both;animation-delay:calc(var(--i,0) * 110ms + 420ms)}
.product__meta{padding:6px 6px 8px}
.product__name{font-size:9px;font-weight:700;line-height:1.25;height:22px;overflow:hidden}
.product__price{font-size:11px;color:var(--red);font-weight:600;margin-top:3px}
.product__skeleton{height:118px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.22),rgba(255,255,255,.08));background-size:200% 100%;animation:shimmer 1.2s infinite}
.primary--light{background:#fff;color:var(--red);box-shadow:none;height:34px;margin-top:0}
.secondary{height:30px;border-radius:7px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);font-size:9px;font-weight:600;margin-top:6px}
.legal{font-family:"Montserrat",Inter,Arial,Helvetica,sans-serif;font-weight:400;font-size:10px;line-height:1.35;margin:9px 0 0}
.legal strong{font-weight:700}
.restart{margin-top:auto;background:none;color:#ffd7df;text-decoration:underline;font-size:7px;padding:2px}
.toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#111;color:#fff;padding:7px 10px;border-radius:99px;font-size:8px;z-index:30;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes screenIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes placeOnShelf{0%{opacity:0;transform:translateY(-16px) scale(.92)}70%{opacity:1;transform:translateY(2px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes pickAndPlace{0%{opacity:0;transform:translate(-50%,-10px) scale(.8)}35%{opacity:1;transform:translate(-50%,-4px) scale(1)}70%{opacity:1;transform:translate(-50%,2px) scale(1)}100%{opacity:0;transform:translate(-50%,6px) scale(.9)}}
@keyframes productPulse{0%,100%{transform:scale(1)}10%{transform:scale(1.06)}20%{transform:scale(1)}30%{transform:scale(1.045)}40%{transform:scale(1)}}
@keyframes ctaIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}