/* =========================================================================
   Bor Bekiş · ortak katman
   @intent: Üç varyasyonun paylaştığı tek şeyler: sıfırlama, varyasyon seçici,
   ikon ölçüsü, logo renk değişkenleri ve mezun fotoğrafı yer tutucusu (.ph).
   Her varyasyon kendi kökü (.v1 / .v2 / .v3) altında kapsüllüdür.
   ========================================================================= */

:root {
  --vs-h: 52px;
  --page-bg: #FFFFFF;
  --vs-bg: #1E1D21;
  --vs-fg: #F2F1F3;
  --vs-dim: #A9A7AE;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  background: var(--page-bg);
  scroll-padding-top: calc(var(--vs-h) + 96px);
}
html[data-v="v2"] { --page-bg: #0E0D0F; color-scheme: dark; }
html[data-v="v1"], html[data-v="v3"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--page-bg);
  padding-top: var(--vs-h);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#bb-root, #bb-root *, #bb-root *::before, #bb-root *::after { box-sizing: border-box; }
#bb-root :where(img, svg) { max-width: 100%; }
:where(#bb-root a) { color: inherit; }
#bb-root :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
.bb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.logo { display: block; width: 100%; height: auto; }
.logo--dark { --lg-road: #F3EFEE; --lg-sep: #F3EFEE; --lg-dash: transparent; }

/* ---------- Varyasyon seçici ---------- */
.vs {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--vs-bg); color: var(--vs-fg);
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.18);
}
.vs__in {
  height: var(--vs-h);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.vs__label, .vs__note { color: var(--vs-dim); letter-spacing: .02em; }
.vs__note { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); }
.vs__group { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.07); }
.vs__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px 0 6px; border: 0; border-radius: 9px;
  background: transparent; color: var(--vs-fg); font: inherit; cursor: pointer;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.vs__btn b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.1); font-size: 12px;
}
.vs__btn:hover { background: rgba(255,255,255,.08); }
.vs__btn[aria-pressed="true"] { background: var(--vs-fg); color: #17161A; }
.vs__btn[aria-pressed="true"] b { background: #D50000; color: #FFFFFF; }
.vs__btn:focus-visible { outline: 2px solid var(--vs-fg); outline-offset: 2px; }
@media (max-width: 860px) { .vs__note { display: none; } }
@media (max-width: 560px) {
  .vs__label { display: none; }
  .vs__btn { padding: 0 10px 0 5px; gap: 6px; font-size: 12px; }
}
@media (max-width: 380px) { .vs__btn { padding: 0 8px 0 4px; } .vs__btn span { font-size: 11px; } }

/* ---------- Mezun fotoğrafı yer tutucusu ----------
   @intent: Gerçek mezun fotoğrafları gelene kadar alan; kursa önerilen
   "Ehliyetimi aldım!" tabelası da bu kartta tasarlanmış olur. */
.ph {
  --sky-1: #DCE6EF; --sky-2: #F4F1EE; --ground: #C9C4C1; --car: #2A2729;
  --plac-bg: #FFFFFF; --plac-ink: #141113; --plac-red: #D50000;
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 5; max-width: 100%;
  display: grid; place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'%3E%3Cpath d='M28 62 46 30q4-9 14-9h80q10 0 14 9l18 32q16 3 17 17v21H11V79q1-14 17-17z' fill='%23000' fill-opacity='.82'/%3E%3Cpath d='M52 58 63 34q2-4 7-4h60q5 0 7 4l11 24z' fill='%23fff' fill-opacity='.22'/%3E%3Crect x='20' y='72' width='26' height='9' rx='4' fill='%23fff' fill-opacity='.8'/%3E%3Crect x='154' y='72' width='26' height='9' rx='4' fill='%23fff' fill-opacity='.8'/%3E%3Crect x='78' y='84' width='44' height='11' rx='2' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E") center bottom 10% / 74% auto no-repeat,
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--ground) 58.2%, var(--ground) 100%);
}
.ph__plac {
  position: relative; z-index: 1;
  width: 62%; margin-bottom: 22%;
  display: grid; justify-items: center; gap: 4px;
  padding: 10px 10px 9px; border-radius: 6px;
  background: var(--plac-bg); color: var(--plac-ink);
  border: 3px solid var(--plac-red);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: rotate(-3deg);
  text-align: center;
}
.ph__mark { width: 34%; height: auto; }
.ph__plac { --lg-road: #050505; --lg-sep: #050505; --lg-dash: #FDFDFD; }
.ph__plac b { font: 800 clamp(11px, 1.05vw, 15px)/1.05 var(--ph-font, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .01em; }
.ph__plac span { font: 600 9px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--plac-red); }
.ph figcaption {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #FFFFFF;
  font: 600 10px/1.2 system-ui, sans-serif; letter-spacing: .03em;
}
.ph--2 { --sky-1: #E8E1DA; --sky-2: #F6F2EE; --ground: #B9B4B2; }
.ph--3 { --sky-1: #D7E1E8; --sky-2: #EEF2F4; --ground: #A7A3A6; }
.ph--4 { --sky-1: #EFE4DF; --sky-2: #F7F3F0; --ground: #CFC7C2; }

@media (prefers-reduced-motion: reduce) {
  #bb-root *, #bb-root *::before, #bb-root *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}