:root { --paper:#ffbc0b; --ink:#101c22; --muted:#57616a; --line:#d9dedc; --purple:#6652bd; --yellow:#ffbc0b; --white:#fffdf8; --lilac:#eee9ff; }
body { background:var(--yellow); }
.topbar { max-width:1440px; height:76px; margin:16px auto 0; padding:0 27px; border:0; border-radius:22px; background:var(--ink); color:#fff; }
.topbar .brand { position:static; display:flex; flex-direction:column; justify-content:center; width:auto; height:auto; overflow:visible; color:#fff; text-decoration:none; font-size:27px; font-weight:900; line-height:.88; letter-spacing:-.06em; }
.topbar .brand strong { font-size:1.18em; }
.topbar .brand span { font-size:.63em; letter-spacing:.08em; margin-top:5px; }
.edition { color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.1em; }
main { max-width:1240px; min-height:calc(100svh - 92px); padding:43px 30px 68px; }
body:has(.intro-minimal) .topbar { display:flex; }
body:has(.intro-collage) main { min-height:calc(100svh - 92px); }
.intro-collage { min-height:calc(100svh - 92px); background:var(--yellow); }
.collage-wash { background:radial-gradient(ellipse at center,#101c22f5 0%,#101c22df 31%,#101c22a3 55%,#101c2255 82%,#101c2233 100%); }
.collage-tile { border-radius:14px; }
.collage-tile img { filter:saturate(.8) contrast(1.06); }
.intro-content { max-width:770px; gap:25px; padding:48px 26px; }
.intro-collage h1 { color:#fff; font-family:Arial,Helvetica,sans-serif; font-weight:900; font-size:clamp(45px,6.4vw,86px); letter-spacing:-.065em; line-height:.99; text-shadow:none; }
.intro-collage .intro-duration { color:#fff; font-weight:700; font-size:16px; }
.intro-collage .primary { box-shadow:none; }
.collage-toggle { width:46px; height:46px; background:#fff; border:0; }
.primary { background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:100px; min-height:54px; padding:14px 24px; font-weight:800; }
.primary:hover:not(:disabled) { background:#ffe06b; border-color:var(--ink); color:var(--ink); }
.stage { background:#fffdf8; padding:40px 48px 45px; border-radius:28px; box-shadow:0 12px 0 #101c2214; }
.stage-meta .eyebrow,.eyebrow { color:var(--purple); font-weight:800; }
.progress i { height:6px; border-radius:100px; }
.progress i.done { background:var(--purple); }
.question-top h1,.result-title { font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:-.055em; font-size:clamp(34px,4.3vw,58px); line-height:1.06; }
.compact-heading .question-number { font-size:.38em; font-weight:800; }
.choice { border:2px solid #d9dedc; border-radius:16px; background:#fff; }
.choice:hover { background:#fff7d7; border-color:var(--yellow); }
.choice.selected { background:#fff1b6; border-color:var(--ink); }
.selected .letter { background:var(--ink); border-color:var(--ink); }
.scene-image,.painting,.character-card,.result-card { border-radius:17px; }
.nextbar { border-color:#d9dedc; }
.result-card { border:2px solid var(--ink); overflow:hidden; box-shadow:5px 6px 0 var(--ink); }
.result-card.surprise { border-color:var(--purple); box-shadow:5px 6px 0 var(--purple); }
.result-card-body h2 { font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:-.04em; }
.result-header p { font-family:Arial,Helvetica,sans-serif; line-height:1.55; }
.result-shortcuts>a { border:2px solid var(--ink); border-radius:15px; }
.result-shortcuts b { font-family:Arial,Helvetica,sans-serif; font-weight:900; }
.result-overview h2 { font-family:Arial,Helvetica,sans-serif; font-size:22px; font-weight:900; letter-spacing:-.025em; }
dialog { border-radius:20px; }
@media(max-width:800px) {
  .topbar { margin:10px 10px 0; height:68px; padding:0 18px; border-radius:16px; }
  .topbar .brand { font-size:22px; }
  main { padding:25px 14px 44px; }
  .stage { padding:27px 22px 31px; border-radius:22px; }
  .intro-collage { min-height:calc(100svh - 78px); }
}
@media(max-width:480px) {
  .edition { display:block; font-size:9px; max-width:135px; text-align:right; }
  .intro-collage { padding:34px 16px; }
  .intro-content { padding:36px 18px; }
  .intro-collage h1 { font-size:clamp(42px,11vw,60px); }
  .question-top h1,.result-title { font-size:36px; }
  .stage { padding:24px 17px 27px; }
  .choice { padding:15px; }
  .result-shortcuts { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Seçilen B yönü: tek vaat, tek gerçek sahne, sakin soru yüzeyi. */
body,button,a,textarea{font-family:Inter,Arial,Helvetica,sans-serif}
.topbar .brand{display:block;position:relative;width:88px;height:auto;aspect-ratio:727/359;overflow:hidden;flex:none}
.topbar .brand .logo-crop{display:block;position:relative;width:100%;height:100%;overflow:hidden}
.topbar .brand img{display:block;position:absolute;max-width:none;width:148.56%;height:auto;left:-24.35%;top:-100.55%}
.intro-editorial{width:100%;max-width:none;min-height:calc(100svh - 190px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,86px);align-items:center;text-align:left}
.intro-editorial .intro-content{max-width:620px;padding:20px 0;align-items:flex-start;text-align:left;gap:0}
.intro-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--ink)}
.intro-editorial h1{display:flex;flex-direction:column;align-items:flex-start;gap:.16em;margin:22px 0 28px;font:900 clamp(46px,5vw,80px)/1.03 Inter,Arial,sans-serif;letter-spacing:-.075em;text-wrap:initial}
.intro-editorial h1>span{display:block}
.intro-marker{position:relative;isolation:isolate;color:#fff;padding:.025em .14em .09em;white-space:nowrap}
.intro-marker::before{content:"";position:absolute;inset:.015em -.01em;z-index:-1;border-radius:.07em;background:var(--ink);transform:rotate(-1.2deg)}
.intro-lead{font-size:clamp(17px,1.55vw,22px);font-weight:600;line-height:1.48;max-width:550px;margin:0 0 22px}
.intro-editorial .intro-duration{color:#36434a;font-size:13px;font-weight:700;margin:0 0 27px}
.intro-editorial .primary{background:var(--ink);color:#fff;border-color:var(--ink);border-radius:11px;margin:0;min-height:54px;padding:13px 20px;box-shadow:none}
.intro-visual{margin:0;padding:13px;background:var(--ink);color:#fff;border-radius:18px;transform:rotate(1deg);box-shadow:12px 14px 0 #101c2223;min-width:0}
.intro-visual img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#17252d;border-radius:9px}
.intro-visual figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 3px 2px;font-size:10px;line-height:1.3}
.intro-visual figcaption span{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--yellow)}
.intro-visual figcaption b{font-size:10px;text-align:right}
.question-top h1,.result-title,.result-card-body h2,.result-overview h2,.result-shortcuts b{font-family:Inter,Arial,Helvetica,sans-serif}
.stage-meta .eyebrow,.eyebrow{color:var(--ink)}
.progress i.done{background:var(--ink)}
.result-cards{grid-template-columns:1.15fr .85fr}
.result-card.surprise{border-color:var(--ink);box-shadow:5px 6px 0 #101c2250}
.result-shortcuts>a:nth-child(2){background:#fff}
@media(max-width:850px){.intro-editorial{grid-template-columns:1fr;gap:35px;min-height:0}.intro-editorial .intro-content{max-width:700px}.intro-visual{max-width:650px;transform:none}.intro-visual img{aspect-ratio:4/3}.result-cards{grid-template-columns:1fr}}
@media(max-width:480px){.topbar .brand{width:75px}.intro-editorial{gap:25px}.intro-editorial h1{font-size:clamp(37px,10.8vw,51px);margin:17px 0 24px}.intro-editorial .intro-content{padding:10px 0 0}.intro-lead{font-size:16px}.intro-visual{padding:8px}.intro-visual img{aspect-ratio:1/1}.intro-visual figcaption{flex-direction:column;align-items:flex-start}.intro-visual figcaption b{text-align:left}.result-cards{grid-template-columns:1fr}}
@media(max-width:480px){.character-grid{grid-template-columns:1fr;gap:10px}.character-card{display:grid;grid-template-columns:94px minmax(0,1fr);min-height:0;text-align:left}.character-card img{width:94px;height:96px;object-fit:cover}.character-label{padding:12px 15px;align-items:center}.character-label b{font-size:15px}.character-label .detail{font-size:13px;line-height:1.4}}