/* hangi barış? — efe sayfasının poster dilini koyu yeşil zemin + lime aksanla devralır.
 * style.css'teki token adları korunur (--green zemin, --deep halftone, --paper kağıt, --pink etiket);
 * zemin koyu olduğu için metin rengi kağıda çevrilir, kağıt kutuların içi mürekkep kalır. */
:root{
  --green:#0f3d2e;
  --deep:#081f17;
  --paper:#f1f7ee;
  --pink:#b7ff6a;
  --muted:#b9d6c6;
}
html,body{background:var(--green)}
/* style.css'teki landing `main` kuralları (max-width, pad, ≥900 iki sütun) bu sayfada geçersiz */
.quiz{color:var(--paper)}
.strip,.btn,.dcard,.pola,.cta{color:#000}
.ep{background:var(--paper);color:#000}
.track{border-color:var(--paper);background:transparent}
.track i{background:var(--pink)}
.cta{background:var(--paper);box-shadow:5px 5px 0 var(--pink),5px 5px 0 2.5px #000}
.cta b{color:#000}
.cta-go{background:var(--pink);border-color:#000;box-shadow:0 0 0 0 rgba(183,255,106,.6)}
@media (hover:hover){.cta:hover{box-shadow:7px 7px 0 var(--pink),7px 7px 0 2.5px #000}}
.cta:active{box-shadow:1px 1px 0 var(--pink),1px 1px 0 2.5px #000}
.cta:focus-visible,.dcard:focus-visible,.btn:focus-visible,.flip:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.btn.primary{box-shadow:4px 4px 0 var(--pink),4px 4px 0 2.5px #000}
.btn.primary:active{box-shadow:1px 1px 0 var(--pink),1px 1px 0 2.5px #000}
.sticker{filter:drop-shadow(0 0 0 var(--paper)) drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(5px 6px 0 #000)}
.toast{border-color:var(--pink)}
@media (prefers-reduced-motion:no-preference){
  @keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(183,255,106,.7)}70%{box-shadow:0 0 0 12px rgba(183,255,106,0)}100%{box-shadow:0 0 0 0 rgba(183,255,106,0)}}
}

/* quiz overlay: üst satır / içerik / alt satır (landing efe ile aynı iskelet, style.css'ten gelir) */
.stage{grid-template-rows:auto minmax(0,1fr) auto}
.quiz-inner.stage{max-width:600px}
.close{color:#000}

/* ---------- landing (efe'nin sınıfları, koyu zemin uyarlaması) ---------- */
body{color:var(--paper)}
/* Sid fotokartın dışına sarkar; main'in yatay kırpması onu keser (body zaten clip, yatay kaydırma olmaz) */
main{overflow-x:visible}
.shine{background-image:linear-gradient(105deg,var(--paper) 0 42%,#fff 48%,var(--pink) 50%,var(--paper) 56% 100%)}
.hero{margin-top:14px}
h1{letter-spacing:-.02em;line-height:1}
h1 span{padding-bottom:.06em} /* shine background-clip: iniş harfleri (y, ç, ş) kesilmesin */
.strip b{font-weight:900;font-variation-settings:"wdth" 72;font-size:1.12em;display:block;margin-bottom:2px}
.cta span{color:#2f5a46}
.card{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.card small{color:var(--muted)}
/* Sid: fotokartın sağ kenarından sarkar (başlık/şerit/ipucu ile kesişmez; sağ boşluk 360px'te bile yeter) */
.hero .sid-dance{position:absolute;right:-3%;top:-1%;width:clamp(170px,50vw,290px);height:auto;rotate:-7deg;z-index:2;pointer-events:none}
.sid-dance{filter:drop-shadow(0 0 0 var(--paper)) drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.series h2{color:var(--paper)}
.series p{color:var(--muted)}
.pc{color:var(--pink);background:#071a13;border-color:rgba(241,247,238,.35)}
.pc.on{background:var(--paper);border-color:#000;box-shadow:2px 3px 0 #000}
.pc.now{rotate:3deg;outline:2.5px solid var(--pink);outline-offset:2px}
footer{color:var(--muted);opacity:1}
footer .madeby{opacity:.85}
footer .madeby a:focus-visible{outline-color:var(--pink)}
/* sonuç ekranında Sid ismin altında, sol sütunda akışta */
.result .who{display:flex;flex-direction:column;min-width:0}
.result .who .sid-dance{position:static;height:auto;width:min(100%,clamp(110px,min(26vh,38vw),180px));align-self:flex-start;margin:clamp(12px,2vh,18px) 0 0 4px;rotate:-5deg;pointer-events:none}

/* ---------- düello ----------
 * Telefonda üst/alt iki yatay kart; her kart satır yüksekliğini doldurur, fotoğraf cover ile kırpılır.
 * İsim şeridi kartın içinde, sol altta (JS ile en fazla 2 satıra sığdırılır). */
.duel{display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);min-height:0;padding:clamp(8px,1.6vh,18px) 2px 6px}
.dcard{
  position:relative;min-height:0;height:100%;width:100%;overflow:visible;
  padding:4px;background:var(--paper);border:2.5px solid #000;box-shadow:5px 5px 0 #000;
  display:block;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:translate .1s ease,box-shadow .1s ease;
}
.dcard:nth-child(1){rotate:-1.2deg}
.dcard:nth-child(3){rotate:1.2deg}
.dcard .ph{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#111}
.dcard .ph img{position:absolute;inset:0;width:100%;height:100%}
.dcard .ph .bg{object-fit:cover;filter:blur(16px) brightness(.55) saturate(1.2);scale:1.15}
.dcard .ph .fg{object-fit:contain}
.dcard .name{
  position:absolute;left:-8px;bottom:12px;max-width:calc(100% - 8px);padding:5px 10px;background:var(--paper);border:2.5px solid #000;
  box-shadow:3px 3px 0 #000;rotate:-1.5deg;font-size:clamp(14px,min(4.2vw,2.2vh),19px);line-height:1.1;font-weight:900;font-variation-settings:"wdth" 74;
}
.dcard:nth-child(3) .name{left:auto;right:-8px;rotate:1.5deg}
@media (hover:hover){.dcard:hover{translate:-2px -2px;box-shadow:7px 7px 0 #000}}
.dcard:active{translate:3px 3px;box-shadow:1px 1px 0 #000}
.vs{
  justify-self:center;z-index:2;margin:-12px 0;width:44px;height:44px;display:grid;place-items:center;
  background:var(--pink);color:#000;border:2.5px solid #000;border-radius:999px;box-shadow:2px 2px 0 #000;
  font-size:15px;font-weight:900;rotate:-8deg;pointer-events:none;
}
/* yatay ekranlar (tablet yatay, masaüstü): yan yana dik kartlar; boy satır yüksekliğine göre sınırlı */
@media (min-width:760px) and (min-aspect-ratio:1/1){
  .quiz-inner.stage{max-width:880px}
  .duel{grid-template-columns:1fr auto 1fr;grid-template-rows:minmax(0,1fr);padding:clamp(10px,2vh,24px) 0 10px}
  .dcard{height:auto;width:min(94%,calc(0.8 * (100vh - 150px)));aspect-ratio:4/5;justify-self:center;align-self:center}
  .dcard .name{left:10px;right:10px;max-width:none;bottom:14px;font-size:clamp(15px,min(1.8vw,2.6vh),22px)}
  .dcard:nth-child(3) .name{left:10px;right:10px}
  .vs{margin:0 -14px;align-self:center}
}

/* ---------- sonuç ---------- */
.result{justify-content:center;gap:clamp(12px,2.6vh,30px)}
.result .hero-r{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:clamp(10px,3vw,22px);padding:0;min-height:0}
.result .kicker{color:var(--muted)}
.result .winner{
  margin-top:2px;font-size:clamp(26px,min(8.6vw,4.6vh),54px);line-height:.94;font-weight:900;letter-spacing:-.02em;
  font-variation-settings:"wdth" 64;text-wrap:balance;color:var(--paper);
}
/* kazanan fotokartı: büyük, eğik; boyu hem genişlik hem yükseklikle sınırlı */
.result .media-r{position:static;width:clamp(140px,min(44vw,27vh),260px);rotate:4deg;margin:6px 10px 10px 0;padding:5px 5px 18px}
.result .media-r .wm{font-size:10px;left:6px;bottom:2px}
.result .tier{margin-top:0;padding-top:0}
.result .tier .strip{font-size:clamp(15px,min(4.5vw,2.4vh),21px);font-weight:800;font-variation-settings:"wdth" 80;line-height:1.2}
.result .runner{margin-top:clamp(6px,1.4vh,12px);font-size:12px;font-weight:600;color:var(--muted)}
.result .actions{margin-top:0;padding-top:0}

/* ---------- hareket ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero .sid-dance{animation:slap .5s 1.3s cubic-bezier(.2,1.25,.3,1) both}
  .result .sid-dance{animation:slap .45s .4s cubic-bezier(.2,1.25,.3,1) both}
  .dcard.is-in{animation:dealIn .36s cubic-bezier(.2,.9,.3,1) both}
  .dcard.is-win{animation:stamp .34s cubic-bezier(.2,1.3,.3,1) both}
  .dcard.is-out{animation:flyOut .34s cubic-bezier(.5,0,.8,.4) both;pointer-events:none}
  .dcard:nth-child(3).is-out{animation-name:flyOutR}
  .result .winner{animation:slap .5s .1s cubic-bezier(.2,1.2,.3,1) both}
  .result .media-r{animation:slap .5s .25s cubic-bezier(.2,1.25,.3,1) both}
  @keyframes dealIn{from{opacity:0;translate:0 40px;rotate:3deg}to{opacity:1;translate:0 0}}
  @keyframes stamp{0%{scale:1}40%{scale:1.05}100%{scale:1}}
  @keyframes flyOut{to{opacity:0;translate:-110% 0;rotate:-10deg}}
  @keyframes flyOutR{to{opacity:0;translate:110% 0;rotate:10deg}}
}
@media (prefers-reduced-motion:reduce){
  .dcard{transition:none}
  .dcard.is-out{opacity:0}
}

.result .media-r img{object-fit:contain;background:#111}

/* ≥900: efe'nin iki sütunlu düzeni; uzun soyad sütunu genişletmesin diye minmax(0,…) (fitName sonra küçültür) */
@media (min-width:900px){
  main{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero{min-width:0}
  .hero .sid-dance{width:clamp(250px,22vw,330px);right:-4%;top:-3%}
}
.qbar .top-title{flex:1;font-size:14px;font-weight:600}