/* ==========================================================================
   oyuncumodel.com yeni ziyaretçi kabuğu (Neon). Kaynak: docs/tasarim-yon/4-neon/index.html
   Tek dosya, derleme yok. Sürüm: ?v=filemtime (App\Support\Varlik).
   ========================================================================== */

:root{
  --gece:#040A1A;      /* zemin */
  --derin:#0A1A3F;     /* yüzey */
  --elektrik:#3B8BFF;  /* neon vurgu */
  --buz:#A9D1FF;       /* açık mavi metin vurgusu */
  --kor:#FF9A4D;       /* küredeki turuncu damar, çok az */
  --metin:#EEF4FF;
  --soluk:#A3B5D9;
  --cizgi:rgba(110,170,255,.28);
  --cam:linear-gradient(180deg,rgba(46,110,240,.16),rgba(8,22,58,.55));
  --ease:cubic-bezier(.2,.8,.2,1);
  --yay:cubic-bezier(.34,1.45,.5,1);
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
  --bar:84px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--gece);-webkit-text-size-adjust:100%;scroll-padding-bottom:calc(var(--bar) + var(--sb) + 24px)}
body{min-height:100dvh;overflow-x:clip;background:var(--gece);font:400 17px/1.5 var(--f-govde);color:var(--metin);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button,summary{cursor:pointer}
img{display:block;max-width:100%}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--buz);outline-offset:3px;border-radius:12px}
h1,h2,h3{font-family:var(--f-baslik);font-weight:500;letter-spacing:-.01em;line-height:1.15;overflow-wrap:break-word}
.atla{position:fixed;z-index:60;left:12px;top:calc(var(--st) + 8px);padding:10px 16px;border-radius:999px;background:var(--derin);border:1px solid var(--elektrik);transform:translateY(-200%)}
.atla:focus{transform:none}

/* ---------- sayfalar arası geçiş (cross-document View Transitions) ---------- */
@view-transition{navigation:auto}
.sahne{view-transition-name:sahne}
.cubuk{view-transition-name:cubuk}
.isikli{view-transition-name:sekme-isigi}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}
::view-transition-group(sahne){animation:none;overflow:clip}
::view-transition-group(sekme-isigi){animation-duration:.55s;animation-timing-function:cubic-bezier(.34,1.45,.5,1)}
::view-transition-old(sahne),::view-transition-new(sahne){animation-duration:.48s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;mix-blend-mode:normal;height:auto}
/* eski görüntü, eski sayfanın kaydırma konumunda kalsın (JS --onceki-y yazar) */
::view-transition-old(sahne){translate:0 var(--onceki-y,0px)}
::view-transition-old(sahne){animation-name:cik-ileri}
::view-transition-new(sahne){animation-name:gir-ileri}
html:active-view-transition-type(geri)::view-transition-old(sahne){animation-name:cik-geri}
html:active-view-transition-type(geri)::view-transition-new(sahne){animation-name:gir-geri}
html:active-view-transition-type(it)::view-transition-old(sahne){animation-name:it-cik}
html:active-view-transition-type(it)::view-transition-new(sahne){animation-name:it-gir}
html:active-view-transition-type(cek)::view-transition-old(sahne){animation-name:cek-cik;z-index:2}
html:active-view-transition-type(cek)::view-transition-new(sahne){animation-name:cek-gir}
html:active-view-transition-type(sakin)::view-transition-old(sahne){animation:.2s linear both sonuk}
html:active-view-transition-type(sakin)::view-transition-new(sahne){animation:.2s linear both belir}
@keyframes gir-ileri{from{transform:translateX(42%) scale(.9);opacity:0}}
@keyframes cik-ileri{to{transform:translateX(-28%) scale(.88);opacity:0}}
@keyframes gir-geri{from{transform:translateX(-42%) scale(.9);opacity:0}}
@keyframes cik-geri{to{transform:translateX(28%) scale(.88);opacity:0}}
@keyframes it-gir{from{transform:translateX(100%);box-shadow:-30px 0 60px rgba(0,0,0,.6)}}
@keyframes it-cik{to{transform:scale(.92);opacity:.35;filter:brightness(.6)}}
@keyframes cek-gir{from{transform:scale(.92);opacity:.35;filter:brightness(.6)}}
@keyframes cek-cik{to{transform:translateX(100%)}}
@keyframes sonuk{to{opacity:0}}
@keyframes belir{from{opacity:0}}

/* ---------- arka plan ışıkları ---------- */
.isik{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 70% at 50% -10%,#0D2563 0%,transparent 60%),var(--gece)}
.isik i{position:absolute;border-radius:50%;will-change:transform;opacity:.75}
.isik i:nth-child(1){width:70vmax;height:70vmax;left:-30vmax;top:10vh;background:radial-gradient(closest-side,rgba(40,100,255,.38),transparent);animation:suz1 26s ease-in-out infinite alternate}
.isik i:nth-child(2){width:60vmax;height:60vmax;right:-28vmax;top:-12vh;background:radial-gradient(closest-side,rgba(90,70,255,.28),transparent);animation:suz2 32s ease-in-out infinite alternate}
.isik i:nth-child(3){width:50vmax;height:50vmax;left:20vw;bottom:-28vmax;background:radial-gradient(closest-side,rgba(30,170,255,.25),transparent);animation:suz3 22s ease-in-out infinite alternate}
.isik i:nth-child(4){width:18vmax;height:18vmax;right:8vw;bottom:22vh;background:radial-gradient(closest-side,rgba(255,154,77,.13),transparent);animation:suz2 18s ease-in-out infinite alternate-reverse}
@keyframes suz1{to{transform:translate(18vw,-14vh) scale(1.15)}}
@keyframes suz2{to{transform:translate(-16vw,20vh) scale(.9)}}
@keyframes suz3{to{transform:translate(-22vw,-10vh) scale(1.2)}}
.isik::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- sahne ---------- */
.sahne{position:relative;z-index:1;display:block;min-height:100dvh;padding:calc(var(--st) + 12px) 16px calc(var(--bar) + var(--sb) + 28px);outline:0}
.ic{max-width:1180px;margin-inline:auto}

/* ---------- cam ve neon parçalar ---------- */
.cam{background:var(--cam);border:1px solid var(--cizgi);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -22px rgba(30,100,255,.55)}
.yuvarlak{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--cizgi);
  background:rgba(12,30,74,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .25s var(--yay),box-shadow .25s,color .25s,border-color .25s}
.yuvarlak:active{transform:scale(.9)}
.ust{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.marka{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:600;font-size:17px}
.marka .yuvarlak{color:var(--elektrik);filter:drop-shadow(0 0 6px rgba(59,139,255,.45))}
.yildiz{width:28px;height:28px;fill:currentColor}
/* yazı markası: Chakra Petch anahatlı (sprite #yazi-marka, oran 12.97:1); yazı tipi yüklenmesinden bağımsız */
.yazi-marka{display:block;height:12px;width:155.6px;fill:currentColor;flex:none}

.hap{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:6px 6px 6px 24px;border-radius:999px;
  background:rgba(12,32,82,.75);border:1px solid rgba(110,170,255,.45);font-weight:600;font-size:17px;
  box-shadow:0 0 0 1px rgba(59,139,255,.15),0 0 28px -6px rgba(59,139,255,.6),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .25s var(--yay),box-shadow .3s}
.hap .ok{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7DB4FF,#2F6BFF 60%,#1D4ED8);
  box-shadow:0 0 18px rgba(59,139,255,.9);transition:transform .35s var(--yay)}
.hap:hover .ok{transform:translateX(3px)}
.hap:active{transform:scale(.95)}
.dolu{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 20px;border-radius:999px;font-weight:600;font-size:17px;color:#fff;text-align:center;
  background:linear-gradient(100deg,#1D4ED8,#2F6BFF);box-shadow:0 0 0 1px rgba(169,209,255,.35) inset,0 10px 30px -8px rgba(47,107,255,.8);transition:transform .2s var(--yay),background .3s}
.dolu:active{transform:scale(.97)}
.ikincil{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--cizgi);background:rgba(10,26,63,.55);color:var(--buz);font-weight:500;transition:transform .2s var(--yay),border-color .3s}
.ikincil:active{transform:scale(.96)}
.yazi-dugme{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--buz);font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(169,209,255,.4)}

.rozet{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:999px;font-size:16px;line-height:1.3;
  background:rgba(59,139,255,.14);border:1px solid rgba(110,170,255,.3);color:var(--buz);white-space:nowrap}
.rozet.kor{background:rgba(255,154,77,.12);border-color:rgba(255,154,77,.4);color:#FFC59A}
.selam{color:var(--elektrik);font-weight:500;font-size:17px;text-shadow:0 0 18px rgba(59,139,255,.7)}
.alt{color:var(--soluk)}
.bolum{margin-top:40px}
.bolum-bas{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.bolum-bas h2{font-size:21px}
.bolum-bas a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;color:var(--buz);font-weight:500}
.yazi{display:block}

/* ---------- neon fotoğraf ---------- */
.nf{position:relative;overflow:hidden;isolation:isolate;background:#0B1E4A}
.nf img{width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.js .nf:not(.hemen) img{opacity:0}
.js .nf.ok img{opacity:1}
/* portreler doğal renkte: neon yalnız çevrede (kenar, zemin, alt geçiş) */
.nf .sk{display:none}
.js .nf .sk{display:block;position:absolute;inset:0;z-index:3;overflow:hidden;background:#0C2154}
.nf .sk::after,.iskelet::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 20%,rgba(140,190,255,.16) 50%,transparent 80%);animation:parilti 1.3s ease-in-out infinite}
.js .nf.ok .sk,.js .nf.hemen .sk{opacity:0;transition:opacity .5s;pointer-events:none}
@keyframes parilti{to{transform:translateX(100%)}}
/* fotoğraf yok ya da yüklenemedi: yıldızlı yer tutucu */
.nf.yok{display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 40%,#16357F,#0A1A3F 70%)}
.nf.yok img,.nf.yok .sk{display:none!important}
.nf.yok .yildiz{position:relative;z-index:3;width:34%;height:auto;aspect-ratio:1;color:var(--elektrik);filter:drop-shadow(0 0 14px var(--elektrik));opacity:.9}

/* ---------- derinlikten gelme ---------- */
.js .gel{opacity:0;transform:perspective(900px) translate3d(0,40px,-120px) rotateX(10deg);transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 40ms)}
.js .gel.in{opacity:1;transform:none}
/* geçiş bittikten sonra (ya da kare çizilmeyen ortamda 900 ms sonra) kesin son durum */


/* ---------- KARŞILAMA (ilk ziyaret katmanı, yalnız ana sayfa) ---------- */
@keyframes yaklas{from{transform:scale(1.18)}to{transform:scale(1.02)}}
  box-shadow:0 0 24px rgba(59,139,255,.35),inset 0 0 24px rgba(59,139,255,.2)}
.satir{display:block;opacity:0;transform:translateY(24px);animation:satir .45s var(--ease) forwards;animation-delay:calc(.05s + var(--i) * .05s)}
@keyframes satir{to{opacity:1;transform:none}}

/* ---------- ANA ---------- */
.kahraman{text-align:center;padding-top:8px}
.kahraman h1{font-size:clamp(26px,7.4vw,48px);max-width:10.1em;margin:8px auto 0}
.kure-kutu{position:relative;width:min(84vw,380px);aspect-ratio:1;margin:4px auto -6px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.kure-kutu:active{cursor:grabbing}
.kure-kutu::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(59,139,255,.45),rgba(59,139,255,.1) 60%,transparent);filter:blur(8px);animation:nefes 4.5s ease-in-out infinite}
.kure-kutu canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
/* İlk görünüm: WebGL kürenin önceden çizilmiş 8 sn'lik ileri-geri döngüsü (siyah zemin; screen karışımıyla zemin görünmez).
   three.js yalnız etkileşimde yüklenir ve bu videonun yerini alır (kure.js). */
.kure-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;pointer-events:none;transition:opacity .6s;background:transparent;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 83.5%,transparent 86.5%);mask-image:radial-gradient(circle closest-side at 50% 50%,#000 83.5%,transparent 86.5%)} /* siyah kare zemin kesilir (karışım her yolda güvenilir değil) */
@keyframes nefes{50%{transform:scale(1.1);opacity:.7}}
.kahraman-cta{margin-top:18px}
.ipucu{font-size:16px;color:var(--soluk);margin-top:2px}
.sayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:22px}
.sayi{padding:14px 10px;text-align:center;border-radius:20px}
.sayi b{display:block;font:500 22px/1.2 var(--f-sayi);color:#fff;text-shadow:0 0 16px rgba(59,139,255,.8);font-variant-numeric:tabular-nums}
.sayi span{font-size:16px;color:var(--soluk);line-height:1.3;display:block;margin-top:4px}

.giris{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.giris-kart{position:relative;border-radius:26px;overflow:hidden;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--cizgi);box-shadow:0 20px 40px -24px rgba(59,139,255,.8)}
.giris-kart .nf{position:absolute;inset:0}
.giris-kart .yazi{position:relative;z-index:4;padding:14px;background:linear-gradient(to top,rgba(4,10,26,.95) 40%,transparent)}
.giris-kart .kb{display:block;font:500 19px/1.2 var(--f-baslik)}
.giris-kart .yazi>span:last-child{display:block;font-size:16px;color:#C3D2EE;line-height:1.35;margin-top:4px}
.giris-kart .yuvarlak{position:absolute;top:12px;right:12px;z-index:4;width:44px;height:44px}
.bas{transition:transform .3s var(--yay),box-shadow .3s,border-color .3s}
.bas:active,.bas.basili{transform:scale(.96);box-shadow:0 0 0 1px rgba(110,170,255,.7),0 0 36px -4px rgba(59,139,255,.85)}
@media (hover:hover){.bas:hover{border-color:rgba(140,190,255,.7);box-shadow:0 0 0 1px rgba(110,170,255,.5),0 0 34px -8px rgba(59,139,255,.85)}}
.js .bas.gel.in{transition:opacity .4s var(--ease),transform .3s var(--yay),box-shadow .3s,border-color .3s}

.adimlar{list-style:none;position:relative;display:grid;gap:12px;padding-left:28px}
.adimlar::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;border-radius:2px;background:rgba(110,170,255,.18)}
.adimlar .hat{position:absolute;left:9px;top:12px;width:2px;height:calc(100% - 24px);border-radius:2px;background:linear-gradient(var(--elektrik),#7DB4FF);
  box-shadow:0 0 12px var(--elektrik);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease)}
.no-js .adimlar .hat,.adimlar.in .hat{transform:scaleY(1)}
.adim{position:relative;padding:16px 18px;border-radius:22px}
.adim::before{content:"";position:absolute;left:-25px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--gece);border:2px solid var(--elektrik);box-shadow:0 0 10px var(--elektrik)}
.adim .no{font:500 16px var(--f-sayi);color:var(--elektrik)}
.adim h3{font-size:18px;margin:4px 0}
.adim p{color:var(--soluk);font-size:16px}

.serit{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 18px;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain;list-style:none}
.serit::-webkit-scrollbar{display:none}
.serit>*{scroll-snap-align:start;flex:none;min-width:0} /* şerit kartı içeriği hiçbir zaman kartı genişletmez */
.proje{display:block;width:80vw;max-width:320px;border-radius:24px;overflow:hidden;border:1px solid var(--cizgi);background:rgba(10,26,63,.6)}
.proje .nf{aspect-ratio:16/10}
.proje .yazi{padding:14px 16px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:start;min-width:0}
.proje .pb{display:block;font:600 18px/1.3 var(--f-govde);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;max-width:100%}
.proje time{font-size:16px;color:var(--soluk)}
.yakinda{display:grid;gap:12px;justify-items:start;padding:20px;border-radius:24px}

/* ---------- KADRO ---------- */
.baslik-blok{margin-top:8px}
.baslik-blok h1{font-size:clamp(26px,7vw,40px)}
.baslik-blok p{margin-top:6px}
.suzgec{display:flex;gap:8px;overflow-x:auto;margin:8px -16px 4px;padding:8px 16px 14px;scrollbar-width:none}
.suzgec::-webkit-scrollbar{display:none}
.cip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--cizgi);background:rgba(10,26,63,.5);color:var(--soluk);font-weight:500;white-space:nowrap;transition:color .3s,background .3s,box-shadow .3s,border-color .3s}
.cip[aria-current="true"],.cip[aria-pressed="true"],.cip:has(input:checked){color:#fff;background:rgba(47,107,255,.35);border-color:rgba(140,190,255,.7);box-shadow:0 0 20px -4px rgba(59,139,255,.9)}
.cip input{position:absolute;opacity:0;pointer-events:none}
.cip:has(input:focus-visible){outline:2px solid var(--buz);outline-offset:3px}
.alan-kutu{width:100%;min-height:52px;padding:0 14px;border-radius:16px;background:rgba(10,26,63,.75);border:1px solid rgba(110,170,255,.3);font-size:17px;transition:border-color .3s,box-shadow .3s}
.alan-kutu:focus{outline:none;border-color:var(--elektrik);box-shadow:0 0 0 3px rgba(59,139,255,.25),0 0 22px -4px rgba(59,139,255,.8)}
select.alan-kutu{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--buz) 50%),linear-gradient(135deg,var(--buz) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
select.alan-kutu option{background:var(--derin);color:var(--metin)}
.izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.izgara[aria-busy="true"]{pointer-events:none}
/* sade kart: doğal renkli 3:4 fotoğraf; neon yalnız kenarda; ad ve tek satır yardımcı bilgi */
.kart{position:relative;display:block;min-width:0}
.kart .nf{aspect-ratio:3/4;border-radius:18px;border:1px solid rgba(110,170,255,.22);box-shadow:0 14px 30px -20px rgba(59,139,255,.8);transition:border-color .3s,box-shadow .3s}
.kart .yazi{display:block;padding:9px 2px 0}
.kart b{display:block;font-weight:600;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kart .yardimci{display:block;margin-top:1px;font-size:14px;line-height:1.35;color:var(--soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.js .kart.bas,.kart.bas:active,.kart.bas.basili{box-shadow:none}
.kart.bas:active,.kart.bas.basili{transform:scale(.97)}
.kart.bas:active .nf,.kart.basili .nf{border-color:rgba(140,190,255,.8);box-shadow:0 0 0 1px rgba(110,170,255,.6),0 0 30px -4px rgba(59,139,255,.85)}
@media (hover:hover){.kart.bas:hover{box-shadow:none}.kart.bas:hover .nf{border-color:rgba(140,190,255,.7);box-shadow:0 0 0 1px rgba(110,170,255,.45),0 0 30px -8px rgba(59,139,255,.85)}}
.kart.parla .nf::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;border:1.5px solid rgba(120,180,255,.9);box-shadow:0 0 24px rgba(59,139,255,.8),inset 0 0 18px rgba(59,139,255,.4);opacity:0;animation:parla 1.1s ease-out}
@keyframes parla{30%{opacity:1}to{opacity:0}}
.iskelet{position:relative;overflow:hidden;border-radius:18px}
.iskelet .a{aspect-ratio:3/4;border-radius:18px;background:#0C2154;border:1px solid rgba(110,170,255,.12)}
.iskelet .c{height:13px;margin:12px 2px 0;border-radius:7px;background:rgba(140,190,255,.12)}
.iskelet .c+.c{width:60%;margin-top:8px}
.yuz-serit>li{width:42vw;max-width:200px}

/* ---------- süzgeç düğmesi ve çekmece ---------- */
.suz-ac{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;margin-bottom:18px;border-radius:22px;font-weight:500;color:var(--buz)}
.say-rozet{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;margin-left:auto;border-radius:999px;background:linear-gradient(100deg,#1D4ED8,#2F6BFF);color:#fff;font-size:14px;font-weight:600;box-shadow:0 0 14px rgba(59,139,255,.8)}
.perde{position:fixed;inset:0;z-index:30;background:rgba(2,6,18,.62);opacity:0;transition:opacity .35s}
html.cekmece-acik .perde{opacity:1}
html.cekmece-acik{overflow:hidden}
.cekmece{position:fixed;z-index:31;top:0;right:0;bottom:0;width:100%;max-width:100%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0E2560,#06122F 28%,#040A1A);border-left:1px solid rgba(110,170,255,.45);box-shadow:-10px 0 50px -10px rgba(59,139,255,.55);
  transform:translateX(105%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s;outline:0}
.cekmece:target,html.cekmece-acik .cekmece{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.cekmece-form{display:flex;flex-direction:column;height:100%;min-height:0}
.cekmece-bas{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--st) + 14px) 18px 10px}
.cekmece-bas h2{font-size:22px}
.cekmece-ic{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 24px;display:grid;gap:22px;align-content:start}
.s-grup{border:0;display:grid;gap:10px;min-width:0}
.s-grup legend{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;font-weight:600;font-size:16px;margin-bottom:10px}
.s-grup .satirlar{display:flex;flex-wrap:wrap;gap:8px}
.s-grup .cip{position:relative;min-height:40px;padding:0 14px;font-size:15px}
.aralik-deger{font-weight:500;color:var(--buz);font-variant-numeric:tabular-nums}
.aralik-ray{--a:0%;--u:100%;position:relative;height:44px}
.aralik-ray::before,.aralik-dolu{content:"";position:absolute;left:11px;right:11px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(110,170,255,.22)}
.aralik-dolu{left:calc(11px + (100% - 22px) * var(--a));right:calc(11px + (100% - 22px) * (1 - var(--u)));background:linear-gradient(90deg,var(--elektrik),#7DB4FF);box-shadow:0 0 12px var(--elektrik)}
.aralik-ray input{position:absolute;inset:0;width:100%;height:44px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.aralik-ray input::-webkit-slider-runnable-track{background:none;height:44px}
.aralik-ray input::-moz-range-track{background:none}
.aralik-ray input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9CC6FF,#2F6BFF 65%);border:2px solid #EEF4FF;box-shadow:0 0 14px rgba(59,139,255,.95);cursor:grab}
.aralik-ray input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#2F6BFF;border:2px solid #EEF4FF;box-shadow:0 0 14px rgba(59,139,255,.95);cursor:grab}
.aralik-ray input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--buz);outline-offset:3px}
.s-ara{min-height:46px}
.s-liste{max-height:240px;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:2px;padding:4px;border-radius:16px;background:rgba(10,26,63,.55);border:1px solid rgba(110,170,255,.2)}
.s-satir{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;cursor:pointer}
.s-satir span{flex:1}
.s-satir small{color:var(--soluk);font-size:14px}
.s-satir input{width:18px;height:18px;accent-color:var(--elektrik)}
.s-satir:has(input:checked){background:rgba(47,107,255,.28)}
.anahtar{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.anahtar input{width:22px;height:22px;accent-color:var(--elektrik)}
.cekmece-alt{flex:none;display:flex;gap:10px;align-items:center;padding:12px 18px calc(var(--sb) + 14px);border-top:1px solid rgba(110,170,255,.18);background:rgba(4,10,26,.92)}
.cekmece-alt .dolu{flex:1;width:auto}
.bos{text-align:center;padding:48px 16px;display:grid;gap:14px;justify-items:center;grid-column:1/-1}
.bos .yildiz{width:56px;height:56px;color:var(--elektrik);filter:drop-shadow(0 0 14px var(--elektrik))}
.bos h2{font-size:22px}
.bos p{max-width:24.44em;color:var(--soluk)}
.daha{display:flex;justify-content:center;margin-top:22px}
.daha .hap{padding-left:24px}
.sayfalama{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.sayfalama a,.sayfalama span{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--cizgi);background:rgba(10,26,63,.5);color:var(--soluk);font-variant-numeric:tabular-nums}
.sayfalama [aria-current="page"]{color:#fff;background:rgba(47,107,255,.35);border-color:rgba(140,190,255,.7)}

/* ---------- PROFİL: public/uygulama/css/profil.css (1b) ---------- */

/* ---------- HATA ---------- */
.hata{min-height:calc(100dvh - var(--bar) - 120px);display:grid;place-items:center;text-align:center}
.hata .kod{font:500 clamp(72px,24vw,160px)/1 var(--f-sayi);color:transparent;-webkit-text-stroke:1.5px var(--elektrik);text-shadow:0 0 30px rgba(59,139,255,.6)}
.hata h1{font-size:clamp(24px,6vw,36px);margin-top:12px}
.hata p{color:var(--soluk);max-width:23.22em;margin:10px auto 0}
.hata .eylem{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}

/* ---------- ALT BİLGİ ---------- */
.alt-bilgi{margin-top:56px;padding-top:24px;border-top:1px solid rgba(110,170,255,.16);display:grid;gap:18px;color:var(--soluk)}
.ab-ust .marka{color:var(--metin)}
.ab-ust p{margin-top:4px;max-width:28.11em}
.ab-baglantilar{display:flex;flex-wrap:wrap;gap:4px 18px}
.ab-baglantilar a{display:inline-flex;align-items:center;min-height:44px;color:var(--buz)}
.ab-iletisim{font-style:normal;display:grid;gap:4px}
.ab-iletisim a{display:inline-flex;align-items:center;min-height:44px;color:var(--metin);width:max-content;max-width:100%}
.ab-telif{font-size:16px}

/* ---------- ALT SEKME ÇUBUĞU ---------- */
/* alt çubuk kaydırmada gizlenir (yalnız telefon ve tablet; masaüstü rayında yok). "+" çubukla birlikte gider. */
@media (max-width:1023.98px){
  html.cubuk-oto .cubuk{transition:transform .3s var(--ease),opacity .4s}
  html.cubuk-gizli .cubuk{transform:translateY(calc(100% + var(--sb) + 48px))}
}
@media (prefers-reduced-motion:reduce){html.cubuk-oto .cubuk{transition:none}}

.cubuk{position:fixed;z-index:20;left:12px;right:12px;bottom:calc(var(--sb) + 12px);height:72px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  border-radius:28px;background:rgba(8,20,52,.72);border:1px solid rgba(110,170,255,.32);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 0 0 1px rgba(59,139,255,.08),0 18px 40px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .6s var(--ease),opacity .4s}
.sekme{position:relative;z-index:1;height:56px;display:grid;place-items:center;color:#8FA6D3;transition:color .3s,transform .2s var(--yay)}
.sekme:active{transform:scale(.88)}
.sekme[aria-current="page"]{color:#fff}
.sekme .etk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.isikli{--i:0;position:absolute;z-index:0;left:calc(var(--i) * 20% + 10% - 28px);top:8px;width:56px;height:56px;border-radius:20px;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(59,139,255,.55),rgba(59,139,255,.12) 70%,transparent);transition:left .55s var(--yay),top .55s var(--yay),opacity .3s}
.isikli::after{content:"";position:absolute;left:50%;bottom:-6px;width:22px;height:3px;margin-left:-11px;border-radius:3px;background:var(--elektrik);box-shadow:0 0 10px 2px var(--elektrik)}
.cubuk[data-aktif="0"] .isikli{--i:0;opacity:1}
.cubuk[data-aktif="1"] .isikli{--i:1;opacity:1}
.cubuk[data-aktif="3"] .isikli{--i:3;opacity:1}
.cubuk[data-aktif="4"] .isikli{--i:4;opacity:1}
.arti-yer{display:grid;place-items:center}
.arti{position:relative;width:64px;height:64px;margin-top:-30px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 35% 30%,#3C6FE0,#0E2A72 70%);border:1.5px solid rgba(140,190,255,.8);
  box-shadow:0 0 0 6px rgba(4,10,26,.85),0 0 30px rgba(59,139,255,.9),inset 0 0 18px rgba(120,180,255,.5);transition:transform .45s var(--yay)}
.arti .ico{width:28px;height:28px;stroke-width:2;transition:transform .45s var(--yay)}
.arti:active{transform:scale(.88)}
.arti::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid rgba(110,170,255,.7);animation:halka 2.8s ease-out infinite;pointer-events:none}
@keyframes halka{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}

/* ---------- tost ---------- */
.tost{position:fixed;z-index:50;left:50%;bottom:calc(var(--sb) + 110px);transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:999px;background:rgba(14,37,96,.95);border:1px solid rgba(140,190,255,.6);box-shadow:0 0 24px rgba(59,139,255,.6);transition:.4s var(--ease);pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.tost.gor{opacity:1;transform:translate(-50%,0)}

/* ---------- MASAÜSTÜ ---------- */
@media (min-width:1024px){
  :root{--bar:0px}
  html{scroll-padding-bottom:24px}
  .sahne{padding:32px 48px 64px 152px}
  .cubuk{left:24px;right:auto;top:50%;bottom:auto;width:88px;height:auto;padding:14px 0;transform:translateY(-50%);grid-template-columns:none;grid-template-rows:68px 68px 76px 68px 68px;gap:6px;justify-items:center;border-radius:32px}
  .sekme{width:72px;height:68px;align-content:center;gap:2px}
  .sekme .etk{position:static;width:auto;height:auto;clip:auto;font-size:16px;line-height:1}
  .isikli{left:8px;top:var(--y,14px);width:72px;height:68px}
  .isikli::after{left:-6px;top:50%;bottom:auto;width:3px;height:22px;margin:-11px 0 0}
  .cubuk[data-aktif="0"] .isikli{--y:14px}
  .cubuk[data-aktif="1"] .isikli{--y:88px}
  .cubuk[data-aktif="3"] .isikli{--y:244px}
  .cubuk[data-aktif="4"] .isikli{--y:318px}
  .arti{margin:0}
  .tost{bottom:40px}
  .kahraman{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;text-align:left;gap:24px;min-height:min(78vh,720px)}
  .kahraman h1{margin:10px 0 0;font-size:clamp(36px,3.6vw,56px)}
  .kure-kutu{width:min(40vw,560px);margin:0 auto}
  .sayilar{max-width:520px}
  .ipucu{text-align:center}
  .giris{gap:20px}
  .giris-kart{min-height:380px}
  .giris-kart .kb{font-size:26px}
  .giris-kart .yazi{padding:24px}
  .adimlar{grid-template-columns:repeat(4,1fr);padding:28px 0 0;gap:16px}
  .adimlar::before,.adimlar .hat{left:12px;right:12px;top:6px;bottom:auto;width:auto;height:2px}
  .adimlar .hat{transform:scaleX(0);transform-origin:left}
  .no-js .adimlar .hat,.adimlar.in .hat{transform:scaleX(1)}
  .adim::before{left:18px;top:-28px}
  .serit{margin:0;padding:4px 0 18px;scroll-padding-inline:0;gap:20px}
  .proje{width:320px}
  .suzgec{margin-inline:-12px;padding-inline:12px}
  .izgara{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 16px}
  .cekmece{width:420px;border-radius:28px 0 0 28px}
  .yuz-serit>li{width:200px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .gel{opacity:1;transform:none}
  .satir{opacity:1;transform:none}
  ::view-transition-old(sahne),::view-transition-new(sahne){animation:.16s linear both belir!important}
  ::view-transition-old(sahne){animation-name:sonuk!important}
  ::view-transition-group(*){animation-duration:.01ms!important}
}

/* ---------- LİSTEM ---------- */
.liste-oge{display:grid;gap:8px;align-content:start;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.liste-oge.gidiyor{opacity:0;transform:scale(.9)}
.liste-cikar{width:100%}

/* giriş geçişinin kesin son durumu (JS 900 ms sonra .tamam ekler; kare çizilmeyen ortamda da tam opak) */
.js .gel.in.tamam,.js .bas.gel.in.tamam{opacity:1;transform:none;transition-property:box-shadow,border-color;transition-delay:0s}
.js .bas.gel.in.tamam:active,.js .bas.gel.in.tamam.basili{transform:scale(.96)}
.adimlar.in.tamam .hat{transition:none;transform:none}