/* Ehliyet Sınavı 2026 sayfası: trafik lambası girişi, yol kenarındaki işaretler ve 3 soruluk mini test.
   style.css'in üstüne yalnız bu sayfanın parçaları eklenir. Giriş, <head>'deki satırın html'e koyduğu
   .signal-on sınıfıyla görünür; lamba evreleri ve geçiş ehliyet.js'ten gelir. */

/* — 1. Giriş: kırmızı → sarı → yeşil, sonra perde yukarı kalkar — */
.signal-intro { display: none; }
html.signal-on .signal-intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(circle at 50% 42%, #2a2d33 0, #17191d 62%);
  color: #f3ecdd; cursor: pointer;
  transition: transform .7s cubic-bezier(.7, 0, .3, 1);
}
html.signal-go .signal-intro { transform: translateY(-100%); }
.signal-light {
  display: grid; gap: 12px; padding: 14px;
  border-radius: 28px; background: #0b0c0e;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px #26282d;
}
.lamp {
  width: 64px; height: 64px; border-radius: 50%;
  transition: background .25s ease, box-shadow .25s ease;
}
.lamp.red { background: #3a1513; }
.lamp.amber { background: #3a2c10; }
.lamp.green { background: #11301d; }
.signal-intro[data-phase="red"] .lamp.red { background: #ff4436; box-shadow: 0 0 36px rgba(255, 68, 54, .7); }
.signal-intro[data-phase="amber"] .lamp.amber { background: #ffbe2e; box-shadow: 0 0 36px rgba(255, 190, 46, .7); }
.signal-intro[data-phase="green"] .lamp.green { background: #2fdc6c; box-shadow: 0 0 36px rgba(47, 220, 108, .7); }
.signal-text { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-style: italic; }
.signal-text .go { display: none; }
.signal-intro[data-phase="green"] .signal-text .wait { display: none; }
.signal-intro[data-phase="green"] .signal-text .go { display: inline; }
.signal-skip { margin: 0; color: #9a948a; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* Perde kalkarken içerik soldan yola çıkar. */
html.signal-on .detail-hero > * { opacity: 0; transform: translateX(-32px); }
html.signal-go .detail-hero > * {
  opacity: 1; transform: none;
  transition: opacity .7s ease .2s, transform .9s cubic-bezier(.2, .7, .2, 1) .2s;
}
html.signal-go .detail-hero > :nth-child(2) { transition-delay: .35s; }

/* — 2. Yol kenarındaki işaretler — */
.road-signs { padding: 86px 0 0; border-top: 1px solid var(--line); }
.road-head h2, .quiz-head h2 { margin: 16px 0 10px; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); font-weight: 400; line-height: 1.05; }
.road-head p, .quiz-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.road { position: relative; margin-top: 44px; padding-bottom: 96px; }
/* Asfalt şerit ve akan orta çizgi. */
.road::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, #f3ecdd 0 46px, transparent 46px 92px) 0 50% / 100% 4px no-repeat,
    linear-gradient(#2b2e33, #202226);
  animation: road-flow 2.4s linear infinite;
}
@keyframes road-flow { to { background-position: 92px 50%, 0 0; } }
.sign-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.sign-row li { display: flex; flex-direction: column; align-items: center; }
/* Levhanın direği asfalta iner. */
.sign-row li::after { content: ""; width: 6px; height: 34px; border-radius: 0 0 3px 3px; background: linear-gradient(#9aa0a6, #6b7076); }
.sign {
  position: relative; width: 100%; max-width: 168px; aspect-ratio: 1;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 800px; font: inherit; color: inherit;
}
.sign-face, .sign-back {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 20px; backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1);
  box-shadow: 0 14px 30px rgba(27, 31, 43, .14);
}
.sign-face { background: #fff; }
.sign-face img { width: 78%; height: auto; }
.sign-back {
  align-content: center; gap: 8px; padding: 14px; text-align: center;
  background: var(--accent); color: #fff; transform: rotateY(180deg);
}
.sign-back strong { font-size: 15px; }
.sign-back span { font-size: 12.5px; line-height: 1.45; opacity: .92; }
.sign[aria-pressed="true"] .sign-face { transform: rotateY(-180deg); }
.sign[aria-pressed="true"] .sign-back { transform: rotateY(0); }
.sign:hover .sign-face { box-shadow: 0 18px 36px rgba(27, 31, 43, .2); }
.sign:focus-visible { outline: none; }
.sign:focus-visible .sign-face, .sign:focus-visible .sign-back { outline: 3px solid var(--accent); outline-offset: 4px; }

/* — 3. Mini test — */
.mini-quiz { margin-top: 86px; padding: 86px 0; border-top: 1px solid var(--line); }
.quiz-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0 0; padding: 0; list-style: none; }
.q { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper-card); }
.q-cat { color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.q-text { margin: 12px 0 18px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.q-options { display: grid; gap: 8px; margin-top: auto; }
.q-options button {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-elevated); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.q-options button b { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.q-options button:hover:not(:disabled) { border-color: var(--accent); }
.q-options button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.q-options button:disabled { cursor: default; }
.q-options button.is-correct { border-color: #1f8a4c; background: #e3f4e9; }
.q-options button.is-wrong { border-color: #b3261e; background: #fbe4e2; }
.q-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.q-note strong { margin-right: 4px; }
.q-note .ok { color: #1f8a4c; }
.q-note .no { color: #b3261e; }
.q.is-right .q-note .no, .q.is-missed .q-note .ok { display: none; }
.quiz-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 30px 0 0; font-size: 17px; }
.quiz-score b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; color: var(--accent); }
.quiz-score a { color: var(--accent); font-weight: 600; }

@media (max-width: 980px) {
  .quiz-list { grid-template-columns: 1fr; }
  /* İşaretler tek sıra; yana kaydırılarak yol boyunca izlenir. */
  .sign-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 6px; scrollbar-width: none; }
  .sign-row::-webkit-scrollbar { display: none; }
  .sign-row li { flex: 0 0 150px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .road::after { animation: none; }
  .sign-face, .sign-back { transition: none; }
}