/* ============================================================ v2026.10-zzh · site çapı arayüz katmanı (js/vgui.js)
   Tokenlar, sayfa geçişi, sayfa başlığı (karo + üst etiket + sayaç + başlık + i + ölçü çizgisi), açıklama penceresi, kart i'si,
   yarışma işaretleri (plaka, küre), Milli takım (menü satırı, anasayfa kutucuğu, sınırlı parıltı).
   Hareket yalnız transform/opacity; hareketi azaltınca son hâl. Sonsuz döngü yok. */
:root{--mv-s:260ms;--mv-m:420ms;--mv-l:720ms;--mv-xl:1000ms;
  --e-out:cubic-bezier(.25,1,.5,1);--pop:cubic-bezier(.34,1.4,.64,1);
  --t-disp:28px;--t-h2:20px;--gap-sec:24px;--pad-card:16px;
  --tr-red:#E30A17;--tr-red-d:#B5000E;--tr-hi:#FF3B47;--tr-halo:rgba(227,10,23,.55);
  --ph-rl:color-mix(in srgb,var(--ink) 46%,transparent);--ph-rt:color-mix(in srgb,var(--ink) 22%,transparent)}
@media (min-width:681px){:root{--t-disp:38px;--t-h2:22px;--gap-sec:32px;--pad-card:20px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tr-halo:rgba(255,59,71,.45)}}
:root[data-theme="dark"]{--tr-halo:rgba(255,59,71,.45)}
.pole{background:repeating-linear-gradient(90deg,var(--c) 0 14px,color-mix(in srgb,var(--c) 30%,var(--surface)) 14px 28px)}

/* ---- sayfa geçişi (§3.4): ileri sağdan, geri soldan */
.page{animation:pgIn2 320ms var(--e-out) backwards}
@keyframes pgIn2{from{opacity:0;transform:translate(var(--pgx,14px),6px)}to{opacity:1;transform:none}}

/* ---- sayfa başlığı (§2.2) */
.phead.ph2{--pc:var(--accent);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:0;margin:6px 0 20px}
.phead.ph2 > .ph-ic{grid-column:1;grid-row:1}
.phead.ph2 > .ph-tx{grid-column:2;grid-row:1;min-width:0}
.phead.ph2 > .ph-sh{grid-column:3;grid-row:1;align-self:center}
.phead.ph2 > .sub,.phead.ph2 > .ph-sub{display:none}
.phead.ph2 > :not(.ph-ic):not(.ph-tx):not(.ph-sh):not(.ph-rule){grid-column:1/-1}
.phead.ph2 > .ph-rule{grid-column:1/-1;grid-row:auto;order:99}
.ph-ic{--pc:var(--accent);position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#fff;flex:none;
  background:radial-gradient(120% 120% at 25% 15%,color-mix(in srgb,var(--pc) 55%,#fff) 0%,var(--pc) 52%,color-mix(in srgb,var(--pc) 72%,#000) 100%);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--pc) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.35);animation:phIc 420ms var(--pop) backwards}
.ph-ic.dual{background:radial-gradient(90% 90% at 22% 12%,rgba(255,255,255,.34),transparent 60%),linear-gradient(135deg,var(--e-binici),var(--e-at))}
.ph-ic.trk{background:radial-gradient(70% 70% at 0 0,var(--tr-hi),transparent 70%),linear-gradient(135deg,var(--tr-red),var(--tr-red-d));box-shadow:0 12px 26px -12px var(--tr-halo),inset 0 1px 0 rgba(255,255,255,.3)}
.ph-ic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.9}
.ph-ic .tr-kit{width:36px;height:34px}
.ph-ic::after{content:"";position:absolute;inset:-5px;border-radius:21px;border:1.5px solid color-mix(in srgb,var(--pc) 40%,transparent);opacity:0;animation:phRing 1.1s var(--spring) .25s backwards}
.ph-er{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 4px}
.ph-tx .ph-er .eyebrow,.ph-tx .eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0!important;color:color-mix(in srgb,var(--pc) 72%,var(--ink))!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;animation:phUp 420ms var(--spring) 60ms backwards}
.ph-tx .eyebrow a{color:inherit}
.ph-tx .eyebrow.ph-eb0{display:none}
.ph-n{flex:none;display:inline-block;height:20px;padding:0 8px;border-radius:10px;background:var(--fill);color:var(--ink-2);font:700 12px/20px var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;animation:phUp 420ms var(--spring) 120ms backwards}
.ph-n[hidden]{display:none}
.ph-tl{display:flex;align-items:center;gap:10px;min-width:0}
.phead.ph2 .tt{font-family:var(--f-display);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;min-width:0;color:var(--ink);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;animation:phUp 420ms var(--spring) 100ms backwards}
.ph-rule{display:block;height:8px;margin-top:12px;transform-origin:left;
  background:linear-gradient(var(--ph-rl),var(--ph-rl)) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--ph-rt) 0 1px,transparent 1px 10px) 0 1px/100% 4px no-repeat,
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--pc) 75%,var(--ink)) 0 1.5px,transparent 1.5px 50px) 0 1px/100% 7px no-repeat;
  animation:phRule 600ms var(--e-out) 160ms backwards}
/* i */
.ph-i{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent);
  font:italic 800 14px/1 Georgia,"Times New Roman",serif;animation:phPop 260ms var(--pop) 260ms backwards;transition:transform .2s var(--spring),background .2s}
.ph-i::after{content:"";position:absolute;inset:-8px}
.ph-i:hover{transform:scale(1.08);background:color-mix(in srgb,var(--accent) 20%,var(--surface))}
.ph-i:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.ph-i.shk{animation:phPop 260ms var(--pop) 260ms backwards,phShk 500ms var(--ease) 900ms 1}
.phead.ph-still .ph-ic,.phead.ph-still .ph-ic::after,.phead.ph-still .eyebrow,.phead.ph-still .ph-n,.phead.ph-still .tt,.phead.ph-still .ph-rule,.phead.ph-still .ph-i{animation:none}
@keyframes phIc{from{opacity:0;transform:scale(.7) rotate(-8deg)}}
@keyframes phRing{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.25)}}
@keyframes phUp{from{opacity:0;transform:translateY(8px)}}
@keyframes phPop{from{opacity:0;transform:scale(.4)}}
@keyframes phRule{from{transform:scaleX(0)}}
@keyframes phShk{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}65%{transform:rotate(10deg)}}
@media (max-width:680px){
  .phead.ph2{column-gap:12px;margin:0 0 8px}
  .ph-ic{width:46px;height:46px;border-radius:14px}.ph-ic svg{width:23px;height:23px}.ph-ic::after{border-radius:18px}
  .ph-ic .tr-kit{width:30px;height:28px}
  .phead.ph2 .tt{font-size:28px}
  .ph-tx .ph-er .eyebrow,.ph-tx .eyebrow{font-size:11px}
  .ph-n{font-size:11px;height:18px;line-height:18px;padding:0 7px}
  .ph-er{margin-bottom:2px}
  .ph-i{width:30px;height:30px}.ph-i::after{inset:-7px}
  .ph-rule{margin-top:6px}
}
.phead.ph2.fit1 .tt{font-size:32px}.phead.ph2.fit2 .tt{font-size:27px;line-height:1.1}
@media (max-width:680px){.phead.ph2.fit1 .tt{font-size:24px}.phead.ph2.fit2 .tt{font-size:21px}}
/* lists.js "Devamı" işareti ph2 başlıklarında yok */
.phead.ph2 .sub::after,.phead.ph2 .sub.clamp::after{content:none!important}

/* ---- açıklama penceresi (§2.3): telefonda alt sayfa, masaüstünde 480 px */
.palette.md.ph-md{width:min(480px,94vw);top:12vh;max-height:76vh}
.ph-md .md-h{display:flex;align-items:center;gap:10px}
.ph-md .md-h > b{flex:1;min-width:0}
.ph-md .md-h .ph-ic.sm{width:24px;height:24px;border-radius:7px;animation:none;box-shadow:none}
.ph-md .md-h .ph-ic.sm::after{display:none}
.ph-md .md-h .ph-ic.sm svg{width:14px;height:14px;stroke-width:2.2}
.ph-md .md-h .ph-ic.sm .tr-kit{width:18px;height:17px}
.ph-md .ph-info{padding:4px 2px 6px}
.ph-md .ph-info .sub,.ph-md .ph-info .s{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;padding:0!important;margin:0!important;cursor:default!important;
  font-size:15px;line-height:1.6;color:var(--ink-2);max-width:62ch;white-space:normal!important;text-transform:none!important;letter-spacing:0!important;font-weight:450!important}
.ph-md .ph-info .sub::after,.ph-md .ph-info .s::after{content:none!important}
.ph-md .ph-info .sub a,.ph-md .ph-info .sub button{min-height:36px}
.ph-xi{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}
.ph-xi h4{margin:12px 0 2px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ph-xr{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 6px;margin:0 -6px;border:0;border-radius:12px;background:none;color:var(--ink);font:600 15px/1.3 var(--f-body);text-align:left;cursor:pointer;box-sizing:content-box}
.ph-xr:hover{background:var(--hover)}
.ph-xr:focus-visible{outline:2.5px solid var(--accent);outline-offset:-2px}
.ph-xr > i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--xt) 16%,var(--surface));color:color-mix(in srgb,var(--xt) 80%,var(--ink))}
.ph-xr > i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ph-xr > span{flex:1;min-width:0}
.ph-xr > b{flex:none;color:var(--muted);font-size:22px;font-weight:500;line-height:1;transition:transform .2s var(--spring)}
.ph-xr:hover > b{transform:translateX(2px)}
.ph-src{margin:14px 0 2px;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:680px){
  .palette.md.ph-md{top:auto;bottom:0;left:0;right:0;transform:none;width:100vw;max-height:88vh;border-radius:26px 26px 0 0;animation:sheetUp .42s var(--spring);padding-bottom:env(safe-area-inset-bottom,0px)}
  .ph-md .md-h{position:relative;padding:22px 10px 6px 18px}
  .ph-md .md-h::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--fill-2)}
  .ph-md .md-b{padding:0 18px 18px;overscroll-behavior:contain}
}
/* kart i'si */
.card-h.ci-h{align-items:center}
.ci-i{width:22px;height:22px;font-size:12.5px;margin-left:-2px;align-self:center;animation:none}
.ci-i::after{inset:-11px}
.card-h.ci-h > .ci-sub{display:none}

/* ---- yarışma işareti (§4b): il plaka kutusu, yurt dışı küre + ülke kodu (.av konumuna dokunulmaz: liste kartı onu yerleştirir) */
.av.cm-pl,.av.cm-gl{border-radius:28%;container-type:inline-size;color:color-mix(in srgb,var(--e-yarisma) 85%,var(--ink));
  background:color-mix(in srgb,var(--e-yarisma) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--e-yarisma) 28%,transparent)}
.av.cm-pl > *,.av.cm-gl > *{grid-area:1/1}
.av.cm-pl b,.av.cm-gl b{font:800 12px/1 var(--f-body);font-size:36cqw;font-variant-numeric:tabular-nums;letter-spacing:-.02em;z-index:1}
.av.cm-gl{border-radius:50%}
.av.cm-gl svg{width:78%;height:78%;fill:none;stroke:currentColor;stroke-width:1.5;opacity:.38}
.av.cm-gl b{font-size:30cqw}
.av.cm-gl:not(:has(b)) svg{opacity:1;width:62%;height:62%}

/* ---- Milli takım (§4e): ay-yıldız armalı beyaz forma, kırmızı zemin, 6 döngülük parıltı */
.tr-kit{display:block;overflow:visible}
.tr-kit .tr-kj{fill:#fff!important;stroke:none!important}
.tr-kit .tr-cr{fill:var(--tr-red)!important;stroke:none!important}
.tr-sw{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.tr-sw::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;transform:translateX(-110%);background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%)}
[data-glow="a"] > .tr-sw::before{animation:trSwA 4s linear var(--tr-d,0ms) var(--tr-it,6)}
[data-glow="b"] > .tr-sw::before{animation:trSwB 4s linear var(--tr-d,0ms) var(--tr-it,6)}
[data-glow="a"]::after{animation:trHaA 4s ease-in-out var(--tr-d,0ms) var(--tr-it,6)}
[data-glow="b"]::after{animation:trHaB 4s ease-in-out var(--tr-d,0ms) var(--tr-it,6)}
@keyframes trSwA{0%{transform:translateX(-110%);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.5%,100%{transform:translateX(180%)}}
@keyframes trSwB{0%{transform:translateX(-110%);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.5%,100%{transform:translateX(180%)}}
@keyframes trHaA{0%,100%{opacity:.5}20%{opacity:.7}70%{opacity:.35}}
@keyframes trHaB{0%,100%{opacity:.5}20%{opacity:.7}70%{opacity:.35}}
/* menü satırı */
#rail .nav button[data-v="milli"],#rail.zi .rz .nav button[data-v="milli"],#rail.zi .rz-l.fly .nav button[data-v="milli"]{
  isolation:isolate;min-height:44px;padding:0 12px 0 7px;gap:10px;border-radius:12px;color:#fff;font-weight:700;margin:3px 0;
  background:radial-gradient(56px 44px at 0 0,var(--tr-hi),transparent),linear-gradient(115deg,var(--tr-red) 0%,var(--tr-red-d) 100%);
  box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 1px 0 rgba(255,255,255,.22)}
#rail .nav button[data-v="milli"]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 18px 1px var(--tr-halo);opacity:.5}
#rail .nav button[data-v="milli"] > .ni,#rail.zi .rz .nav button[data-v="milli"] > .ni,#rail.zi .rz-l.fly .nav button[data-v="milli"] > .ni{
  position:relative;z-index:1;display:grid!important;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(110,0,8,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}
#rail .nav button[data-v="milli"] > .ni .tr-kit{width:22px;height:20.5px}
#rail .nav button[data-v="milli"] > .lb,#rail .nav button[data-v="milli"] .lb,#rail .nav button[data-v="milli"] .ls{position:relative;z-index:1;color:#fff!important;font-weight:700!important;font-size:14px}
#rail .nav button[data-v="milli"] .rnew{position:relative;z-index:1;background:#fff!important;color:var(--tr-red-d)!important;font-weight:750}
#rail .nav button[data-v="milli"]:hover{background:radial-gradient(56px 44px at 0 0,var(--tr-hi),transparent),linear-gradient(115deg,#EC1724 0%,var(--tr-red-d) 100%)}
#rail .nav button[data-v="milli"][aria-current="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tr-red),0 10px 28px -10px var(--tr-halo)}
#rail .nav button[data-v="milli"]:focus-visible{outline:2.5px solid var(--tr-red);outline-offset:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #rail .nav button[data-v="milli"]{box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 0 0 1px rgba(255,255,255,.18)}}
:root[data-theme="dark"] #rail .nav button[data-v="milli"]{box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 0 0 1px rgba(255,255,255,.18)}
/* tablet ray (681–1199): satır etiketli dikey düzende değil; açılır panelde aynı kırmızı satır */
/* anasayfa kutucuğu: tam genişlik, 96 px */
a.mil-ht{position:relative;isolation:isolate;box-sizing:border-box;width:100%;min-height:96px;display:grid;grid-template-columns:44px minmax(0,1fr) auto 10px;grid-template-areas:"j k b c" "j v b c" "j x b c";
  align-content:center;align-items:center;gap:1px 14px;padding:10px 16px 10px 14px;border-radius:20px;border:0!important;color:#fff!important;text-decoration:none;
  background:radial-gradient(90px 80px at 0 0,var(--tr-hi),transparent),linear-gradient(115deg,var(--tr-red) 0%,var(--tr-red-d) 100%)!important;
  box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 1px 0 rgba(255,255,255,.22)!important;transition:transform .25s var(--spring)}
a.mil-ht::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 26px 2px var(--tr-halo);opacity:.5}
a.mil-ht > *{position:relative;z-index:1}
a.mil-ht > .tr-sw{position:absolute;z-index:0}
a.mil-ht *{color:#fff!important}
a.mil-ht .mil-hj{grid-area:j;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(110,0,8,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
a.mil-ht .mil-hj .tr-kit{width:40px;height:37px}
a.mil-ht .mil-htk{grid-area:k;font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
a.mil-ht .mil-htv{grid-area:v;display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;min-width:0}
a.mil-ht .mil-htv b{flex:none;font:800 32px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
a.mil-ht .mil-htv b.mil-sm{font-size:20px}
a.mil-ht .mil-htv > span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;opacity:.95}
a.mil-ht .mil-htv > span *{display:inline}
a.mil-ht .mil-htx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
a.mil-ht .mil-htx > span{display:inline}
a.mil-ht .mil-htx > .mil-d{display:inline-grid;vertical-align:-3px;margin-right:6px}
a.mil-ht .mil-htx{grid-area:x;font-size:12.5px;opacity:.9}
a.mil-ht{grid-template-areas:"j k b c" "j v v c" "j x x c"}
a.mil-ht .mil-htb{grid-area:b;align-self:center;justify-self:end;flex-direction:row;align-items:flex-end;gap:4px;--bw:5px;--bh:13px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
a.mil-ht .mil-htb .mil-bg{flex-direction:row;align-self:auto;gap:2px}
a.mil-ht .mil-htc{grid-area:c;border-color:#fff!important;opacity:.9}
a.mil-ht:hover{transform:translateY(-2px)}
a.mil-ht:focus-visible{outline:2.5px solid var(--tr-red);outline-offset:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.mil-ht{box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 0 0 1px rgba(255,255,255,.18)!important}}
:root[data-theme="dark"] a.mil-ht{box-shadow:0 10px 28px -10px var(--tr-halo),inset 0 0 0 1px rgba(255,255,255,.18)!important}
@media (min-width:700px){a.mil-ht{grid-template-areas:"j k b c" "j v b c" "j x b c";grid-template-columns:56px minmax(0,1fr) auto 12px;column-gap:18px;}a.mil-ht .mil-htb{gap:8px;--bw:7px;--bh:30px;padding:9px 12px;border-radius:12px}a.mil-ht{padding:14px 20px 14px 16px}a.mil-ht .mil-hj{width:56px;height:56px;border-radius:16px}a.mil-ht .mil-hj .tr-kit{width:44px;height:41px}a.mil-ht .mil-htv b{font-size:40px}}

/* ---- döngü sınırı (§3.5): sonsuz döngü yalnız yükleme işaretlerinde; süs döngüleri en çok 6 tekrar */
.qa-w .qa-card::before,.hsec[data-sec="sira"]::before,.rk-ar::before,.rk-ar::after,.rk-arg,.axp-sv .xa-ring,.wr-dot{animation-iteration-count:6}

/* ---- hareketi azalt: son hâl, parıltı yok, hale sabit */
@media (prefers-reduced-motion:reduce){
  .page,.ph-ic,.ph-ic::after,.ph-tx .eyebrow,.ph-n,.phead.ph2 .tt,.ph-rule,.ph-i,.ph-i.shk{animation:none!important}
  .tr-sw::before,[data-glow]::after,[data-glow] > .tr-sw::before{animation:none!important}
  #rail .nav button[data-v="milli"]::after,a.mil-ht::after{opacity:.5}
}