/* Quiz: kazanan kalibi (kart gorevler/2026-10-26-dp-quiz-kazanan-kalibi.md; kaynak arastirma/kaynaklar/dp-quiz/TABLO.md ve
   sahip/ eMeals kareleri). eMeals cercevesi bizim marka renkleriyle: acik gri zemin, beyaz satir kartlar, solda buyuk emoji,
   golge yok; secilen kart domates cerceveli (eMeals turuncu cerceve), haric'te metin ustu cizili; ince yesil ilerleme cubugu;
   tek vurgu domates dugme (yalniz ara ekran, cok secim ve sayi adimlarinda). styles.css'teki .opt/.progress kurallarini
   yalniz quiz sayfasinda (body.quiz-sayfa) ezer; acilis ve diger sayfalar etkilenmez. */
body.quiz-sayfa { --q-bg: #f1f2f4; --q-kart: #ffffff; --q-cizgi: #e3e6eb; background: var(--q-bg); }
.quiz-sayfa .quiz-top { background: var(--q-bg); }
.quiz-sayfa .bar { background: rgba(241, 242, 244, 0.94); box-shadow: none; }

/* Ilerleme: tek parca ince yesil cubuk, yuvarlak uc (eMeals). */
.quiz-sayfa .progress { height: 5px; background: #dfe3e8; -webkit-mask: none; mask: none; }
.quiz-sayfa .progress > i { background: var(--green); }

.quiz-sayfa .q h2 { font-size: clamp(27px, 7.4vw, 33px); margin: 18px 0 6px; }
.quiz-sayfa .q .help { margin-bottom: 18px; font-size: 16px; }

/* Satir kart: beyaz, golgesiz, 60 px'ten yuksek dokunma alani; solda emoji. */
.quiz-sayfa .options { gap: 10px; }
.quiz-sayfa .opt {
  min-height: 60px; padding: 10px 16px; gap: 14px; border-radius: 14px;
  background: var(--q-kart); box-shadow: inset 0 0 0 1.5px transparent; font-size: 17px; font-weight: 600;
}
.quiz-sayfa .opt:not([aria-checked="true"]):not([aria-pressed="true"]):hover { background: #fafbfc; box-shadow: inset 0 0 0 1.5px var(--q-cizgi); }
.quiz-sayfa .opt:active { transform: scale(0.985); box-shadow: inset 0 0 0 2px var(--cta); }
.quiz-sayfa .opt .ico { width: 40px; height: 40px; background: none; border-radius: 0; font-size: 21px; line-height: 1; }
/* Ana oturum karari (kapi tur 2: emoji "sablon"): tek elden cizgi simge seti (assets/quiz-simge.js), acilis E'nin cizim dili. */
.quiz-sayfa .opt .ico .q-simge { display: block; width: 40px; height: 40px; }
/* Zincir logosu yatay (Kroger 1.8:1): kare kutuya sikistirilmaz, kutu logoya gore genisler (2026-10-26 sahip: "resmi bozulmus"). */
.quiz-sayfa .opt .ico:has(.zincir-logo) { width: auto; min-width: 40px; display: grid; place-items: center; }
.quiz-sayfa .opt .ico .zincir-logo { width: auto; height: 32px; max-width: 72px; object-fit: contain; }
.quiz-sayfa .opt .ico .harf { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #dce9f9; color: #1d4f91; font-family: var(--display); font-size: 17px; font-weight: 800; }
.quiz-sayfa .opt .sub { font-size: 14px; }
/* Tek secimde ok yok (dokunus gecer; eMeals); secilince sagda onay. */
.quiz-sayfa .goal::after, .quiz-sayfa .opt.ok::after { display: none; }
.quiz-sayfa .opt.ok { padding-right: 50px; }
/* Secili: domates cerceve, acik domates zemin, metin lacivert (lacivert dolgu yok). */
.quiz-sayfa .opt[aria-pressed="true"], .quiz-sayfa .opt[aria-checked="true"] { background: var(--cta-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--cta); }
.quiz-sayfa .opt[aria-pressed="true"] .sub, .quiz-sayfa .opt[aria-checked="true"] .sub { color: var(--muted); }
.quiz-sayfa .opt.multi .mark { box-shadow: inset 0 0 0 1.5px #cdd3dc; background: #fff; }
.quiz-sayfa .opt.multi[aria-pressed="true"] .mark { background: var(--cta); box-shadow: none; }
/* Haric: secilen kalem ustu cizili (eMeals alerjen ekrani). */
.quiz-sayfa #step[data-adim="haric"] .opt:not(.hic)[aria-pressed="true"] .txt > span:first-child { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--cta); }
/* Karolar (aksam, sure, gun): beyaz, secilince domates cerceve. */
.quiz-sayfa .opt.tile { min-height: 96px; }

/* Hane: iki sayac satir kart olarak. */
.quiz-sayfa .sayaclar { display: grid; gap: 10px; margin-top: 4px; }
.quiz-sayfa .sayac-satir { display: flex; align-items: center; gap: 12px; background: var(--q-kart); border-radius: 14px; padding: 12px 12px 12px 16px; min-height: 76px; }
.quiz-sayfa .sayac-satir .txt { flex: 1; display: grid; gap: 1px; font-weight: 600; font-size: 17px; color: var(--ink); }
.quiz-sayfa .sayac-satir .sub { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.quiz-sayfa .sayac-satir .stepper { margin: 0; gap: 6px; }
.quiz-sayfa .sayac-satir .stepper button { width: 48px; height: 48px; font-size: 24px; background: var(--q-bg); box-shadow: none; }
.quiz-sayfa .sayac-satir .stepper output { font-size: 34px; min-width: 44px; }
.quiz-sayfa .sofra { margin-top: 22px; }

/* Ara ekranlar: ust satirda kisa tepki, baslik, 1-2 cumle, buyuk yuvarlak koseli kare (eMeals "That's Great!"). */
.quiz-sayfa .ara { padding-top: 2px; }
.quiz-sayfa .ara-ust { margin: 18px 0 0; font-weight: 700; color: var(--green); font-size: 16px; }
.quiz-sayfa .ara-ust + h2 { margin-top: 4px; }
.quiz-sayfa .ara-kare { margin: 18px 0 0; }
.quiz-sayfa .ara-kare img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; background: #e6e9ee; }
.quiz-sayfa .callout { background: var(--q-kart); }
.quiz-sayfa .ara .modes .opt { background: var(--q-kart); }
.quiz-sayfa .toggle-row { background: var(--q-kart); }

/* Riza ekrani: metin beyaz kartta, ikinci secenek metin dugmesi. */
.quiz-sayfa .riza-metin { background: var(--q-kart); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.quiz-sayfa .riza-yok { display: inline-block; margin-top: 14px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--ink); }

/* Yazi ve tercih cipleri beyaz yuzeyde. */
.quiz-sayfa .pick { background: var(--q-kart); box-shadow: inset 0 0 0 1.5px transparent; }
.quiz-sayfa .pick[aria-pressed="true"] { background: var(--cta-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--cta); }
.quiz-sayfa .pick[aria-pressed="true"] .sub { color: var(--muted); }
.quiz-sayfa .amount { background: var(--q-kart); }

/* Fotografli ara ekranlar (sahip gorsel duzeltmeler ek m. 7; eMeals "That's Great!"): kisa baslik, tek satir, 2x2 keskin tabak kolaji
   ekranin kalanini doldurur (alt bant Continue). */
.quiz-sayfa .ara-bas { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.quiz-sayfa .ara-yuz .q-simge { width: 36px; height: 36px; display: block; }
.quiz-sayfa .ara-satir { font-size: 17px; margin: 6px 0 0; color: var(--ink); }
.quiz-sayfa .ara-zincir { display: flex; align-items: center; gap: 10px; }
.quiz-sayfa .ara-kolaj { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; margin-top: 18px; height: clamp(300px, calc(100svh - 300px), 620px); }
.quiz-sayfa .ara-kolaj img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; background: #e6e9ee; }
.quiz-sayfa .ara-sonra { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 3px 9px; border-radius: 999px; background: #ddf1de; color: #1f6b33; font-size: 13px; font-weight: 700; }
.quiz-sayfa .ara-sonra svg { width: 12px; height: 12px; }

/* Acilis F (kart 2026-10-26-dp-acilis-f-kolu; assets/acilis-f.js): ilk ekranin ustunde logo ve tek deger satiri. Quiz'in kucuk
   logosu o ekranda gizli (iki logo olmasin); ilk soru telefonda ilk ekranda kalsin diye ust bosluklar dar. */
.quiz-sayfa .f-ust[hidden] { display: none !important; }
.quiz-sayfa .f-ust { padding: 14px 0 2px; }
.quiz-sayfa .f-ust .brand { font-size: 21px; }
.quiz-sayfa .f-ust .f-deger { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.35; }
.quiz-sayfa.f-ilk .quiz-top { padding-top: 6px; }
.quiz-sayfa.f-ilk .quiz-top .brand-mini { visibility: hidden; }
.quiz-sayfa.f-ilk .q h2 { margin-top: 12px; }