/* miraç ne demişti?: batu.css'ten türetildi; açık turuncu zemin + yanık turuncu aksan + siyah mürekkep.
 * style.css'in token adları korunur (--green zemin, --deep halftone, --paper kağıt, --pink aksan);
 * sadece değerler değişir, bu yüzden efe'nin bileşenleri olduğu gibi çalışır. */
:root{
  --green:#ffa463;
  --deep:#f07f3c;
  --paper:#fff7ef;
  --pink:#d9480f;
  --rose:#6e2804;
}
main{overflow-x:visible}
.hero{margin-top:14px}
h1{font-size:clamp(120px,min(42vw,33vh),230px);letter-spacing:-.02em;line-height:.8}
h1 span{padding-bottom:.17em;margin-bottom:-.13em} /* shine background-clip: iniş harfleri (g) kesilmesin */
.strip b{font-weight:900;font-variation-settings:"wdth" 72;font-size:1.12em;display:block;margin-bottom:2px}
.cta span{color:var(--green)}
.cta-go{box-shadow:0 0 0 0 rgba(255,164,99,.65)}
@media (prefers-reduced-motion:no-preference){
  @keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(217,72,15,.55)}70%{box-shadow:0 0 0 12px rgba(217,72,15,0)}100%{box-shadow:0 0 0 0 rgba(217,72,15,0)}}
}
.quiz-inner.stage{max-width:600px}
.stage{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.qbar .top-title{flex:1;font-size:14px;font-weight:600}
.pc.now{rotate:3deg;outline:2.5px solid var(--pink);outline-offset:2px}
.btn.pink{background:var(--pink);color:#fff}

/* maskot: efe'nin mührü gibi büyük, ismin boş tarafında; yolu data/mirac.json > mascot.src */
.hero .mascot.by-name{position:absolute;left:var(--mx,60%);top:var(--my,0);width:var(--mw,30vw);height:auto;rotate:-3deg;z-index:3;pointer-events:none}
.mascot{filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 5px 0 #000)}

/* ---------- soru ekranı: foto (esner) / soru / 2x2 şık; hepsi tek ekranda ---------- */
.qbody{display:grid;grid-template-rows:minmax(0,1fr) auto auto;row-gap:clamp(8px,1.5vh,14px);min-height:0;padding-top:clamp(4px,1vh,10px)}
.qphoto{position:relative;min-height:0;padding:4px;margin:0 6px 0 2px;rotate:-1deg;background:var(--paper);border:2.5px solid #000;box-shadow:5px 5px 0 #000}
.qphoto .ph{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#111}
.qphoto .ph :is(img,video){position:absolute;inset:0;width:100%;height:100%}
.qphoto .ph .bg{object-fit:cover;filter:blur(16px) brightness(.6) saturate(1.2);scale:1.15}
.qphoto .ph .fg{object-fit:contain;transition:opacity .35s ease}
.qtext{font-size:clamp(19px,min(6vw,3.4vh),27px);line-height:1.08;font-weight:900;font-variation-settings:"wdth" 74;letter-spacing:-.01em;text-wrap:balance;text-align:center}
.qtext:focus{outline:none}
.opts{margin:0;padding:0 4px 4px 0;grid-template-columns:1fr 1fr;gap:clamp(7px,1.3vh,12px)}
.opt{min-height:clamp(46px,6.6vh,62px);padding:clamp(6px,1vh,10px) 8px 6px 7px;gap:7px;box-shadow:3px 3px 0 #000;font-size:clamp(13px,min(3.9vw,2.2vh),17px);line-height:1.12}
.opt .k{width:24px;height:24px;font-size:12px;background:var(--pink);color:#fff;border-radius:7px}
.opt span:last-child{min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.opt.is-correct{background:#9ef0b8}
.opt.is-correct .k{background:#000;color:#fff}
.opt.is-wrong{background:#ff8a80}
.opt.is-wrong .k{background:#000;color:#fff}
.opt.is-picked{background:var(--paper)}
.feedback{min-height:44px;gap:9px}
.feedback .mini{width:38px;height:38px;flex:none;rotate:-8deg;filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)}
.feedback .react{font-size:clamp(16px,min(5vw,2.7vh),21px)}
.next{width:100%;min-height:48px;padding:9px 18px}
@media (max-height:600px){.feedback .mini{display:none}}

/* ---------- klip: doğru cevaptan sonra fotoğrafın yerine geçer, çerçeveyi doldurur (siyah bant yok) ---------- */
.qphoto .ph.has-clip .fg{opacity:0}
.qphoto .ph .clip{object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);opacity:0;transition:opacity .4s ease;background:#111}
.qphoto .ph .clip.on{opacity:1}
.cliplabel{position:absolute;left:50%;bottom:12px;translate:-50% 0;z-index:2;max-width:calc(100% - 20px);padding:5px 12px;background:var(--paper);color:#000;border:2.5px solid #000;border-radius:8px;box-shadow:3px 3px 0 #000;font-size:clamp(13px,3.6vw,16px);font-weight:800;line-height:1.1;text-align:center;rotate:-1.5deg}
.qtimer{position:absolute;left:4px;right:4px;bottom:4px;height:6px;background:rgba(0,0,0,.35);z-index:2}
.qtimer i{display:block;height:100%;background:var(--pink);transform-origin:left;transition:transform linear}

/* ---------- finale: tanışma röportajı (ekran kararır, koyu gül) ---------- */
.quiz{transition:background 1.6s ease}
.quiz.is-finale{background:#4a1e06;color:var(--paper)}
.quiz.is-finale :is(.opt,.close){color:#000}
.quiz.is-finale .ep{background:var(--paper);color:#000}
.quiz.is-finale .track{border-color:var(--paper);background:transparent}
.quiz.is-finale .track i{background:var(--green)}
.finale-title{text-align:center;font-size:clamp(20px,min(6.4vw,3.6vh),30px);font-weight:900;font-variation-settings:"wdth" 70;color:var(--green);letter-spacing:.01em}
.qbody.finale{grid-template-rows:auto minmax(0,1fr) auto auto}
.qbody.finale .qphoto{rotate:0deg}
.feedback.is-finale{min-height:60px;align-items:flex-start}
.finale-line{font-size:clamp(15px,min(4.4vw,2.5vh),19px);line-height:1.25;font-weight:700;font-variation-settings:"wdth" 80;color:var(--paper);text-wrap:balance;text-align:center;width:100%}

/* ---------- sonuç: tek bütün blok (paylaşım kartının üst yarısı gibi): sol skor + unvan, sağda büyük eğik fotokart, küçük kartın üst kenarında ---------- */
.result{display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.8vh,18px);min-height:0;padding-bottom:clamp(0px,5vh,48px)}
.result .rhero{--pw:clamp(128px,min(46vw,26vh),250px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(10px,3vw,20px);padding-top:calc(var(--pw) * .5)}
.result .who{min-width:0;padding-bottom:4px}
.result .score{margin-top:0}
.result .score b{font-size:clamp(60px,min(21vw,13vh),140px)}
.result .tier-strip{margin:clamp(6px,1.2vh,12px) 10px 0 0;font-size:clamp(16px,min(4.8vw,2.6vh),24px);font-weight:900;font-variation-settings:"wdth" 74;line-height:1.08;padding:8px 12px;rotate:-1.2deg}
.result .tline{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(12.5px,min(3.5vw,2vh),15px);font-weight:600;line-height:1.28}
.result .media-r{position:relative;width:var(--pw);rotate:3deg;margin:0 6px 4px 0;padding:5px 5px 18px}
.result .media-r .wm{font-size:10px;left:6px;bottom:2px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result .media-r>img:not(.mascot){object-fit:contain;background:#111}
.result .media-r .rcat{position:absolute;left:50%;bottom:calc(100% - 16px);translate:-48% 0;width:88%;height:auto;padding:0;border:0;background:none;box-shadow:none;rotate:-2deg;z-index:2}

/* tüm kombinler: yatay kaydırılan şerit (sayfa kaymaz); bilinenler etiketli ve tıklanır, bilinmeyenler "?" ve etiketsiz */
.result>*{min-width:0}
.seen{width:100%;min-width:0}
.seen ul{list-style:none;padding:2px 2px 6px;margin:0;display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
.seen li{flex:none;width:clamp(50px,14vw,66px);scroll-snap-align:start}
.seen li.cap{width:78px;display:flex;align-items:flex-start;font-size:11px;font-weight:800;line-height:1.1;color:var(--rose);padding-top:2px}
.seen li.cap:first-child{width:62px}
.seen .t{position:relative;display:block;width:100%;aspect-ratio:4/5;border:2px solid #000;border-radius:5px;overflow:hidden;background:#111;box-shadow:2px 2px 0 #000;padding:0}
.seen .t img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.seen button.t{cursor:pointer}
.seen button.t::after{content:"▶";position:absolute;right:3px;bottom:2px;font-size:10px;color:#fff;text-shadow:0 0 3px #000}
.seen .miss img{filter:grayscale(.6) brightness(.8)}
.seen .miss b{position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--pink);color:#fff;border:2px solid #000;display:grid;place-items:center;font-size:11px;font-weight:900;line-height:1}
.seen .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:3px;height:21px;overflow:hidden;font-size:9.5px;font-weight:700;line-height:1.05;text-align:center}
.result .actions{margin-top:0;padding-top:0}

/* sonuçta bir kombini tekrar oynat */
.peek{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(40,16,4,.72);padding:16px}
.peek figure{position:relative;width:min(86vw,calc(62vh*.8),420px);aspect-ratio:4/5;background:var(--paper);border:2.5px solid #000;box-shadow:6px 6px 0 #000;padding:5px;rotate:-1deg}
.peek figure>:is(video,img){width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);display:block;background:#111}
.peek .cliplabel{bottom:18px}
.peek .close{position:absolute;right:-8px;top:-16px;z-index:3}

@media (prefers-reduced-motion:no-preference){
  .hero .mascot.by-name{animation:slap .5s 1.2s cubic-bezier(.2,1.25,.3,1) both}
  .qphoto.is-in{animation:dealIn .34s cubic-bezier(.2,.9,.3,1) both}
  .feedback.is-on .mini{animation:slap .4s cubic-bezier(.2,1.25,.3,1) both}
  .result .rcat{animation:soft .6s .4s ease both}
  @keyframes dealIn{from{opacity:0;translate:0 30px;rotate:3deg}to{opacity:1;translate:0 0}}
  @keyframes soft{from{opacity:0}to{opacity:1}}
  .qbody.finale .finale-title{animation:soft 1.4s .2s ease both}
  .qbody.finale .qphoto{animation:soft 1.8s .9s ease both}
  .qbody.finale .qtext,.qbody.finale .opts{animation:soft 1.2s 2s ease both}
  .feedback.is-finale .finale-line{animation:soft 1.6s .5s ease both}
  .qphoto .ph .clip{transition-duration:1.4s}
}
@media (prefers-reduced-motion:reduce){.quiz{transition:none}}

/* favori kombin */
.seen button.t.still::after{content:"+"}
.seen button.t.fav{outline:3px solid var(--pink);outline-offset:1px}
.seen button.t.fav::before{content:"♥";position:absolute;left:2px;top:1px;z-index:1;font-size:13px;color:var(--pink);text-shadow:0 0 2px #fff,0 0 2px #fff}
.result .media-r .wm{max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peekcol{display:grid;gap:18px;justify-items:center}
.peek .favbtn{padding:11px 22px;font-weight:800}


/* favori seçici (finalden sonra) */
.pk-body{display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.8vh,16px);min-height:0;padding-top:4px}
.pk-title{font-size:clamp(18px,min(5.6vw,3.2vh),26px);line-height:1.08;font-weight:900;font-variation-settings:"wdth" 72;text-align:center;text-wrap:balance}
.pk-title:focus{outline:none}
.pk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1.2vh,9px);padding:2px 3px}
.pk{position:relative;aspect-ratio:4/5;padding:0;border:2px solid #000;border-radius:6px;overflow:hidden;background:#111;box-shadow:2px 2px 0 #000;-webkit-tap-highlight-color:transparent;transition:translate .12s ease,box-shadow .12s ease}
.pk img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.pk b{position:absolute;right:3px;top:1px;font-size:15px;color:var(--pink);opacity:0;scale:.4;text-shadow:0 0 3px #fff,0 0 3px #fff;transition:opacity .15s,scale .2s cubic-bezier(.2,1.5,.4,1)}
.pk.on{outline:3px solid var(--pink);outline-offset:1px;translate:-1px -1px;box-shadow:4px 4px 0 #000;z-index:1}
.pk.on b{opacity:1;scale:1}
.pk-cap{text-align:center;font-size:14px;font-weight:800;min-height:20px;color:var(--rose)}
.pk-dock{display:grid;gap:6px;justify-items:center}
.pk-dock .btn:disabled{opacity:.45;cursor:default}
.pk-skip{background:none;border:0;padding:8px 14px;font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){.pk-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-height:760px) and (max-width:759px){.pk-grid{gap:9px}}
.pk-dock .btn{width:100%}

/* finalden sonra: ilk gün / final gecesi seçimi */
.mem-body{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vh,18px);min-height:0}
.mem-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,3vw,18px);width:min(100%,520px);margin:0 auto}
.mem-card{position:relative;padding:5px 5px 34px;background:var(--paper);border:2.5px solid #000;box-shadow:5px 5px 0 #000;cursor:pointer;rotate:-2deg;color:#000}
.mem-card:nth-child(2){rotate:2deg}
.mem-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#111}
.mem-card b{position:absolute;left:0;right:0;bottom:7px;font-size:clamp(15px,4.2vw,19px);font-weight:900;font-variation-settings:"wdth" 74}
.mem-card:active{translate:3px 3px;box-shadow:2px 2px 0 #000}
.mem-card:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.mem-stage{position:relative;width:min(78vw,calc(50vh*.8),400px);aspect-ratio:4/5;margin:0 auto;background:var(--paper);border:2.5px solid #000;box-shadow:6px 6px 0 #000;padding:5px;rotate:-1deg}
.mem-stage[hidden],.mem-cards[hidden]{display:none}
.mem-stage>:is(video,img){width:100%;height:100%;object-fit:cover;display:block;background:#111}
.mem-stage .cliplabel{bottom:14px}
.mem-line:empty{display:none}
.mem-other{color:var(--paper);justify-self:center}
.dock .next[hidden]{display:none}
.mem-stage .mem-snd{position:absolute;right:-8px;top:-14px;z-index:3;width:40px;height:40px;display:grid;place-items:center;background:var(--paper);border:2.5px solid #000;border-radius:999px;box-shadow:2px 2px 0 #000;font-size:18px;line-height:1;cursor:pointer}
.mem-stage .mem-snd:active{translate:2px 2px;box-shadow:none}

/* ---------- video soru ---------- */
.qbody{grid-template-rows:auto auto auto auto}
.qmedia{position:relative;margin:0 6px 0 2px;padding:4px;rotate:-1deg;background:var(--paper);border:2.5px solid #000;box-shadow:5px 5px 0 #000}
.qmedia video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111}
.qmedia.is-held::after{content:"…";position:absolute;right:16px;bottom:12px;padding:0 10px 6px;font-size:34px;font-weight:900;line-height:.9;background:var(--pink);color:#000;border:2.5px solid #000;border-radius:10px;box-shadow:3px 3px 0 #000}
.replay{position:absolute;left:12px;bottom:12px;display:flex;gap:5px;align-items:center;padding:5px 10px;background:var(--paper);border:2.5px solid #000;border-radius:999px;box-shadow:2px 2px 0 #000;font-weight:800;font-size:13px}
.tapplay{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;padding:12px 20px;background:var(--pink);border:2.5px solid #000;border-radius:999px;box-shadow:3px 3px 0 #000;font-weight:900;font-size:18px}
.setup{text-align:center;font-size:clamp(15px,min(4.4vw,2.4vh),19px);font-weight:700;line-height:1.25;text-wrap:balance;padding:0 6px;color:var(--rose)}
.qtext{font-size:clamp(18px,min(5.4vw,3vh),24px)}
.opts{grid-template-columns:1fr}
.opt{min-height:0;padding-top:9px;padding-bottom:9px}
@media (min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opts{transition:opacity .25s ease}
.opts.is-wait{visibility:hidden;opacity:0}


/* geri bildirim kargası: yanlışta kafasını iki yana sallar, doğruda zıplar */
@media (prefers-reduced-motion:no-preference){
  .feedback .mascot.shake{animation:nope .9s .15s ease-in-out both}
  .feedback .mascot.happy{animation:yay .6s .1s cubic-bezier(.2,1.6,.4,1) both}
  @keyframes nope{0%,100%{rotate:0deg}15%{rotate:-14deg}35%{rotate:12deg}55%{rotate:-10deg}75%{rotate:7deg}}
  @keyframes yay{0%{translate:0 0}40%{translate:0 -12px}100%{translate:0 0}}
}

/* sonuç: karga fotoğrafın köşesine konsun, üstte boşluk kalmasın; skor üstte başlasın */
.result{justify-content:center}
.result .rhero{padding-top:calc(var(--pw) * .28);align-items:start}
.result .who{padding-top:calc(var(--pw) * .1)}
.result .media-r .rcat{width:58%;left:auto;right:-14%;translate:0 0;bottom:calc(100% - 22px);rotate:6deg}

/* kısa ekranlarda şıklar alt yuvanın altına kaçmasın: video js ile küçülür (refit), yine sığmazsa soru alanı kendi içinde kayar */
.qbody{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.qbody::-webkit-scrollbar{display:none}
.qmedia{justify-self:center;width:calc(100% - 8px);max-width:calc(100% - 8px)}
/* uygulama içi tarayıcılar (x) sayfa durum çubuğunun altında açıldığı halde üst güvenli alan bildiriyor, ~60px boşa gidiyordu */
.quiz-inner{padding-top:10px}
@media (display-mode:standalone){.quiz-inner{padding-top:max(10px,env(safe-area-inset-top))}}
.dock{pointer-events:none}
.dock .is-on{pointer-events:auto}
@media (max-height:760px){
  .next{min-height:44px;padding-top:8px;padding-bottom:8px}
  .opt{padding-top:7px;padding-bottom:7px}
}
@media (max-height:620px){.qbody .qtext{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}