/* iddaa — Kral Oran · 300x600 rich media
   Düzen: marka barı / bülten kartı destesi / kupon kızağı / sarı CTA.
   Renk: iddaa koyu gövdesi #0D1417, beyaz bülten kartı, tek aksan sarı #F3E300, ikincil yeşil #009A44.
   Tipografi: Inter — iddaa.com'un kendi arayüz fontu. */
:root{
  --ink:#0D1417;
  --ink-2:#151D21;
  --ink-3:#1C262A;
  --line:rgba(255,255,255,.08);
  --mut:#8C9AA0;
  --mut-2:#64737A;

  --card:#FFFFFF;
  --card-2:#F1F3F4;
  --card-3:#E6E9EA;
  --card-line:#E2E6E7;
  --card-txt:#1C2427;
  --card-mut:#7D878C;

  --ylw:#F3E300;
  --ylw-hi:#F7ED59;
  --grn:#009A44;
  --grn-dk:#057139;
  --red:#FF4242;

  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--sans);
  font-feature-settings:"cv05" 1,"ss01" 1;
  background:#06090B;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  padding:20px max(16px,env(safe-area-inset-left,0px)) 20px max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:light){body:not([data-theme="dark"]){background:#D9DEE0}}

.stage{width:300px;max-width:100%}

/* ---------- çerçeve ---------- */
.ad{
  position:relative;
  width:300px;height:600px;max-width:100%;
  overflow:hidden;border-radius:10px;
  background:var(--ink);
  display:flex;flex-direction:column;gap:9px;
  padding:12px 12px 10px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  user-select:none;touch-action:pan-y;isolation:isolate;
}

.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:10px}
.bg-top{position:absolute;left:0;right:0;top:0;height:190px;
  background:linear-gradient(180deg,rgba(0,154,68,.3),rgba(0,154,68,0))}
.bg-rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ylw);opacity:.9}
.bg-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.fx{position:absolute;inset:0;z-index:40;pointer-events:none;width:300px;height:600px}

/* ---------- marka ---------- */
.idd{width:60px;height:11.3px;color:#fff;display:block}
.idd-lg{width:116px;height:21.9px}
.idd-fin{width:72px;height:13.6px;opacity:.9}

.bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:22px;flex:0 0 auto}
.logo{display:flex;align-items:center;gap:7px}
.pill{font-size:8px;font-weight:800;letter-spacing:.06em;color:#0D1417;background:var(--ylw);
  padding:3px 5px;border-radius:3px;line-height:1}
.live{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--mut)}
.live i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,66,66,.55)}70%{box-shadow:0 0 0 6px rgba(255,66,66,0)}100%{box-shadow:0 0 0 0 rgba(255,66,66,0)}}

/* ---------- başlık ---------- */
.kicker{position:relative;z-index:5;flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
.kick-line{display:flex;align-items:baseline;justify-content:space-between}
.k-left{font-size:15px;font-weight:800;letter-spacing:-.02em;color:#fff}
.k-count{font-size:10px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.k-count b{color:var(--ylw)}
.rail{height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.rail span{display:block;height:100%;width:0;background:var(--ylw);
  transition:width .45s cubic-bezier(.22,1,.36,1)}

/* ---------- deste ---------- */
.deck{position:relative;z-index:5;flex:1 1 auto;min-height:0;margin-bottom:7px}

.card{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:var(--card);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.8);
  display:flex;flex-direction:column;
  padding:0 10px 9px;
  transform-origin:50% 92%;will-change:transform;
}
.card.s1{z-index:3;cursor:grab}
.card.s1:active{cursor:grabbing}
.card.s2{z-index:2;transform:translateY(6px) scale(.955);filter:brightness(.84) saturate(.85)}
.card.s3{z-index:1;transform:translateY(12px) scale(.912);filter:brightness(.68) saturate(.7)}
.card{touch-action:none}
.card.snap{transition:transform .26s cubic-bezier(.2,1.25,.4,1)}
.card.settle{transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease,opacity .3s ease}
.card.fly{transition:transform .4s cubic-bezier(.3,.7,.3,1),opacity .4s ease;opacity:0}

.c-top{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  height:28px;border-bottom:1px solid var(--card-line);margin:0 -10px;padding:0 10px}
.c-top-l{display:flex;align-items:center;gap:6px;min-width:0}
.lg{font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--grn-dk);
  background:rgba(0,154,68,.1);padding:3px 5px;border-radius:3px;white-space:nowrap}
.code{font-size:8px;font-weight:700;color:#A8B1B5;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tm{font-size:9px;font-weight:600;color:var(--card-mut);font-variant-numeric:tabular-nums;white-space:nowrap}

.c-mid{flex:1 1 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2px;padding:8px 0 4px;min-height:0}
.team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.crest{width:56px;height:56px;object-fit:contain;max-width:100%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.tname{font-size:11px;font-weight:700;color:var(--card-txt);text-align:center;line-height:1.15;max-width:92px;letter-spacing:-.01em}
.form{display:flex;gap:3px}
.form i{width:9px;height:3px;background:#D9DEDF}
.form i.w{background:var(--grn)}
.form i.l{background:#F0A3A3}
.form i.d{background:#D9D08A}
.vs{font-size:9px;font-weight:800;letter-spacing:.08em;color:#B4BCBF;padding-bottom:20px}

.prob{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:0 0 9px}
.prob-cap{display:flex;align-items:baseline;justify-content:space-between;
  font-size:7px;font-weight:800;letter-spacing:.08em;color:var(--card-mut)}
.prob-bar{display:flex;gap:2px;height:3px}
.prob-bar i{display:block;height:100%;background:var(--grn)}
.prob-bar i.x{background:#C7CECF}
.prob-bar i.b{background:#9AA4A8}
.prob-k{display:flex;justify-content:space-between;font-size:7px;font-weight:700;color:#9AA4A8;
  font-variant-numeric:tabular-nums}
.prob-k span:first-child{color:var(--grn-dk)}

.c-mkt{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:4px}
.mk{position:relative;appearance:none;cursor:pointer;font-family:inherit;
  background:var(--card-2);border:1px solid var(--card-line);border-radius:4px;
  padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.mk:hover{background:var(--card-3);border-color:#D2D7D9}
.mk:active{transform:scale(.97)}
.mk:focus-visible{outline:2px solid var(--grn);outline-offset:2px}
.mk-k{display:flex;align-items:center;gap:4px;font-size:7.5px;font-weight:800;letter-spacing:.04em;color:var(--card-mut)}
.mk-v{font-size:14px;font-weight:800;color:#13191C;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em}
.mk-v.up{color:var(--grn)}
.mk-v.down{color:#E02F2F}
.mk.center{background:#FFF9C2;border-color:#E8DA55}
.mk.center .mk-k{color:#6E6500}
.tri{width:0;height:0;border-style:solid;opacity:.9}
.tri.l{border-width:3px 4px 3px 0;border-color:transparent currentColor transparent transparent}
.tri.r{border-width:3px 0 3px 4px;border-color:transparent transparent transparent currentColor}
.tri.u{border-width:0 3px 4px 3px;border-color:transparent transparent currentColor transparent}

/* damga */
.stamp{position:absolute;top:52px;padding:6px 10px;border-radius:4px;
  font-size:16px;font-weight:800;letter-spacing:.01em;line-height:1;
  color:#0D1417;background:var(--ylw);box-shadow:0 5px 14px -6px rgba(0,0,0,.45);
  opacity:0;pointer-events:none}
.stamp.r{left:10px;transform:rotate(-8deg)}
.stamp.l{right:10px;transform:rotate(8deg)}
.stamp.u{left:50%;top:24px;transform:translateX(-50%);background:var(--grn);color:#fff}

/* kaydırma ipucu */
.coach{position:absolute;left:50%;top:292px;z-index:9;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  background:rgba(13,20,23,.92);border-radius:999px;padding:5px 9px;
  font-size:8px;font-weight:800;letter-spacing:.14em;color:#fff;
  pointer-events:none;transition:opacity .3s ease;animation:bob 2.2s ease-in-out infinite}
.coach i{width:0;height:0;border-style:solid;opacity:.5}
.coach i.a{border-width:3.5px 5px 3.5px 0;border-color:transparent var(--ylw) transparent transparent;animation:fadeL 2.2s ease-in-out infinite}
.coach i.b{border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent var(--ylw);animation:fadeR 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%)}35%{transform:translateX(calc(-50% + 7px))}70%{transform:translateX(calc(-50% - 7px))}}
@keyframes fadeL{0%,100%{opacity:.35}70%{opacity:1}}
@keyframes fadeR{0%,100%{opacity:.35}35%{opacity:1}}
.coach.off{opacity:0}

/* ---------- kupon ---------- */
.slip{position:relative;z-index:6;flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.slot{height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:8px;color:#4E5A5F;font-weight:700;letter-spacing:.04em}
.slot.full{border-color:rgba(243,227,0,.45);background:rgba(243,227,0,.1);
  animation:slotIn .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes slotIn{0%{transform:scale(.84);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.slot .s-t{font-size:8px;font-weight:700;color:#BCC6C9;white-space:nowrap;letter-spacing:.01em}
.slot .s-o{font-size:12px;font-weight:800;color:var(--ylw);font-variant-numeric:tabular-nums;line-height:1}

.total{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:5px;position:relative;overflow:hidden;
  background:var(--ink-2);border-left:3px solid var(--ylw)}
.t-l{display:flex;flex-direction:column;gap:2px}
.t-cap{font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--mut)}
.t-note{font-size:9px;font-weight:600;color:var(--mut-2)}
.t-val{font-size:30px;font-weight:800;line-height:.95;letter-spacing:-.04em;color:var(--ylw);
  font-variant-numeric:tabular-nums}
.t-val.bump{animation:bump .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
.total.flash::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 25%,rgba(243,227,0,.14) 50%,transparent 75%);
  animation:sweep .7s ease-out}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;flex:0 0 auto;cursor:pointer;appearance:none;border:0;
  height:42px;border-radius:5px;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ylw);
  transition:background .15s ease,transform .15s ease}
.cta:hover{background:var(--ylw-hi)}
.cta:active{transform:scale(.99)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cta-txt{font-size:12.5px;font-weight:800;letter-spacing:.01em;color:#0D1417}
.cta-ar{width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #0D1417}
.cta-shine{position:absolute;top:0;bottom:0;width:40px;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%{left:-60px}55%{left:120%}100%{left:120%}}

.legal{position:relative;z-index:5;flex:0 0 auto;text-align:center;font-size:7px;letter-spacing:.03em;color:#46545A;font-weight:500}

/* ---------- açılış ---------- */
.intro{position:absolute;inset:0;z-index:50;display:grid;place-items:center;
  background:var(--ink);
  transition:opacity .4s ease}
.intro::before{content:"";position:absolute;left:0;right:0;top:0;height:260px;
  background:linear-gradient(180deg,rgba(0,154,68,.4),rgba(0,154,68,0))}
.intro.off{opacity:0;pointer-events:none}
.intro-mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:markIn .7s cubic-bezier(.2,1,.3,1)}
@keyframes markIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.intro-badge{font-size:17px;font-weight:800;letter-spacing:.04em;color:#0D1417;background:var(--ylw);
  padding:6px 11px;border-radius:4px;line-height:1}
.intro-sub{font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--mut)}

/* ---------- final ---------- */
.finale{position:absolute;inset:0;z-index:45;display:grid;place-items:center;padding:16px;
  background:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.finale::before{content:"";position:absolute;left:0;right:0;top:0;height:300px;
  background:linear-gradient(180deg,rgba(0,154,68,.34),rgba(0,154,68,0))}
.finale.on{opacity:1;pointer-events:auto}
.fin-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.finale.on .fin-in>*{animation:rise .5s cubic-bezier(.2,1,.3,1) backwards}
.finale.on .fin-in>*:nth-child(2){animation-delay:.05s}
.finale.on .fin-in>*:nth-child(3){animation-delay:.1s}
.finale.on .fin-in>*:nth-child(4){animation-delay:.15s}
.finale.on .fin-in>*:nth-child(5){animation-delay:.2s}
.finale.on .fin-in>*:nth-child(6){animation-delay:.25s}
.finale.on .fin-in>*:nth-child(7){animation-delay:.3s}
.finale.on .fin-in>*:nth-child(8){animation-delay:.35s}
.finale.on .fin-in>*:nth-child(9){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fin-badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:#0D1417;background:var(--ylw);padding:4px 8px;border-radius:3px}
.fin-h{font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.fin-odd{font-size:68px;font-weight:800;line-height:.86;letter-spacing:-.055em;color:var(--ylw);
  font-variant-numeric:tabular-nums}
.fin-cap{font-size:8.5px;font-weight:700;letter-spacing:.16em;color:var(--mut);margin-top:-2px}
.fin-crests{display:flex;align-items:center;gap:7px;padding:1px 0 2px}
.fin-crests img{width:22px;height:22px;object-fit:contain}
.fin-crests span{width:1px;height:12px;background:rgba(255,255,255,.14)}
.compare{width:100%;position:relative;margin-top:6px;display:flex;flex-direction:column;gap:5px;
  padding:9px 10px 10px;border-radius:5px;background:var(--ink-2);border:1px solid var(--line)}
.cmp{display:flex;align-items:center;justify-content:space-between}
.cmp-k{font-size:9.5px;font-weight:600;color:var(--mut)}
.cmp-v{font-size:14px;font-weight:800;color:var(--ylw);font-variant-numeric:tabular-nums}
.cmp-v.low{color:#7C8A90;text-decoration:line-through;text-decoration-color:rgba(255,66,66,.8)}
.cmp.hi .cmp-k{color:#DCE3E5;font-weight:700}
.cmp-badge{position:absolute;right:8px;top:-9px;font-size:8px;font-weight:800;letter-spacing:.02em;
  padding:3px 6px;border-radius:3px;color:#fff;background:var(--grn)}
.fin-p{font-size:11px;line-height:1.45;color:#A2AEB2;text-align:center;max-width:214px;text-wrap:balance}
.fin-cta{width:100%;height:44px}
.fin-cta .cta-txt{font-size:11px}
.replay{appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:9.5px;font-weight:600;letter-spacing:.04em;color:#5F6C71;padding:2px 6px;
  text-decoration:underline;text-underline-offset:3px}
.replay:hover{color:#9AA7AB}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.06s!important}
}