/* Kesit — tanitim yuzeyi.
   Tasarim sistemi: "Obsidian Kinetic" (stitch cikti spesifikasyonundan aktarildi).
   Yuksek kontrastli minimalizm: obsidyen tipografi, kobalt eylem rengi,
   hairline ayrimlar, keskin 4/8px kose, dolgu golge yerine ince kenarlik.

   Tipografi : Plus Jakarta Sans (baslik 800/700/600) + Inter (govde)
   Olcek     : 11 12 13 15 18 20 24 36 48
   Bosluk    : 8pt tabanli — 4 8 12 16 24 40 64 96
   Yaricap   : 4 kontrol · 8 kart · 12/16 panel · 999 rozet
   Renk      : kobalt yalnizca eylem; camgobegi yalnizca canli durum.
*/

:root{
  --ust-h:69px;   /* ust serit: 68 + 1px alt cizgi; koyu kahramanlar tam bu kadar yukari kayar (arada bosluk kalmasin) */
  /* eylem */
  --kobalt:#1d4ed8; --kobalt-koyu:#1e40af; --kobalt-en:#172554; --kobalt-acik:#2563eb;
  --cam:#0891b2; --cam-zemin:#ecfeff; --cam-cizgi:#cffafe;
  /* yapi */
  --obsidyen:#0f172a; --obsidyen2:#1e293b;
  --beyaz:#fff; --zemin:#f8fafc; --mat:#f1f5f9;
  --cizgi:#e2e8f0; --cizgi2:#cbd5e1; --cizgi3:#94a3b8;
  --metin:#334155; --soluk:#64748b; --baslik:#0f172a;
  --yesil:#059669; --yesil-zemin:#f0fdf4; --yesil-cizgi:#dcfce7;
  --kirmizi:#dc2626; --kirmizi-zemin:#fef2f2; --kirmizi-cizgi:#fee2e2;

  --g1:0 1px 2px 0 rgba(15,23,42,.05);
  --g2:0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --g3:0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.04);
  --g4:0 12px 36px rgba(15,23,42,.08);

  --dis:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hero:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --kap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--beyaz); color:var(--metin);
  font:400 15px/1.6 var(--ui); letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0}
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0; font-family:var(--dis); color:var(--baslik); font-weight:700;
  letter-spacing:-.025em; line-height:1.18}
.kap{max-width:var(--kap); margin:0 auto; padding:0 24px}
.mono{font:600 11px/1.3 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--soluk)}

/* ---- kontroller ------------------------------------------------------- */
.dug{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 20px; border:1px solid var(--obsidyen); border-radius:8px;
  background:var(--obsidyen); color:#fff; font:600 14px/1 var(--ui); letter-spacing:.005em;
  cursor:pointer; white-space:nowrap; box-shadow:var(--g1);
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.dug:hover{background:var(--obsidyen2); border-color:var(--obsidyen2); box-shadow:var(--g2)}
.dug:focus-visible{outline:2px solid var(--cam); outline-offset:2px}
.dug[disabled]{opacity:.5; cursor:default}
.dug.mavi{background:var(--kobalt); border-color:var(--kobalt)}
.dug.mavi:hover{background:var(--kobalt-koyu); border-color:var(--kobalt-koyu)}
.dug.sade{background:transparent; color:var(--baslik); border-color:var(--cizgi); box-shadow:none}
.dug.sade:hover{background:var(--zemin); border-color:var(--cizgi2)}
.dug.buyuk{height:48px; padding:0 24px; font-size:15px}
.dug.mor{border:0; color:#fff; background:var(--kobalt); box-shadow:0 8px 24px -8px rgba(37,99,235,.7)}
.dug.mor:hover{background:var(--kobalt-acik)}
.dug.mor .simsek{color:#bfdbfe}
.dug .ok{opacity:.55; font-size:13px}
.dug .simsek{color:#60a5fa; flex:none}

.rozet{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:var(--beyaz); border:1px solid var(--cizgi); box-shadow:var(--g1);
  font:600 12px/1.3 var(--ui); letter-spacing:.01em; color:#1e293b;
}
.nabiz{position:relative; display:inline-flex; width:8px; height:8px; flex:none}
.nabiz::before{content:""; position:absolute; inset:0; border-radius:999px;
  background:var(--kobalt-acik); opacity:.75; animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.nabiz::after{content:""; position:relative; width:8px; height:8px; border-radius:999px;
  background:var(--kobalt)}
@keyframes ping{75%,100%{transform:scale(2.2); opacity:0}}

.etiket{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font:700 11px/1.3 var(--ui); letter-spacing:.045em; text-transform:uppercase}
.etiket.canli{background:var(--cam-zemin); color:var(--cam); border:1px solid var(--cam-cizgi)}
.etiket.iyi{background:var(--yesil-zemin); color:#16a34a; border:1px solid var(--yesil-cizgi)}
.etiket.durgun{background:var(--mat); color:#475569; border:1px solid var(--cizgi)}

.svg{width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

section[id]{scroll-margin-top:76px}

/* ---- ust bar ---------------------------------------------------------- */
.ust{position:sticky; top:0; z-index:40; background:transparent; border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, backdrop-filter .25s}
.ust.kaydi{background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--cizgi)}
.ust .kap{display:flex; align-items:center; gap:20px; height:calc(var(--ust-h) - 1px)}
.marka{display:flex; align-items:center; gap:10px; font:800 18px/1 var(--dis);
  letter-spacing:-.03em; color:var(--baslik)}
.marka i{width:26px; height:26px; border-radius:7px; background:var(--obsidyen);
  position:relative; flex:none}
.marka i::after{content:""; position:absolute; left:7px; top:7px; width:12px; height:12px;
  background:var(--kobalt-acik); clip-path:polygon(0 0,100% 0,100% 100%); border-radius:2px}

/* ana menu: pill hover, araclar acilir */
.ust nav.ana{display:flex; align-items:center; gap:2px; margin-right:auto; margin-left:12px}
.ust nav.ana>a,.ust .madde>.ac{display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 12px;
  border:0; border-radius:8px; background:transparent; cursor:pointer;
  font:500 14px/1 var(--ui); letter-spacing:-.005em; color:var(--metin); transition:background .15s,color .15s}
.ust nav.ana>a:hover,.ust .madde>.ac:hover,.ust .madde.acik>.ac{background:var(--mat); color:var(--baslik)}
.ust .madde{position:relative}
.ust .sev{width:14px; height:14px; stroke-width:2; opacity:.6; transition:transform .2s}
.ust .madde.acik .sev{transform:rotate(180deg)}

.acilir{position:absolute; left:-8px; top:calc(100% + 10px); width:min(840px, calc(100vw - 48px));
  background:#fff; border:1px solid var(--cizgi); border-radius:14px; color:var(--metin); text-align:left;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.02);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s; z-index:50}
.acilir::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.ust .madde.acik .acilir{opacity:1; visibility:visible; transform:none}
.acilir-ic{display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:0 10px; padding:14px}
.acilir .grup+.grup{margin-top:14px}
.acilir .grup>.mono{display:block; padding:8px 10px 6px; color:var(--cizgi3)}
.acilir a[role=menuitem]{display:flex; align-items:flex-start; gap:12px; padding:8px 10px; border-radius:10px; color:var(--baslik)}
.acilir a[role=menuitem]:hover{background:var(--zemin)}
.acilir .ik{width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--mat); border:1px solid var(--cizgi); color:var(--kobalt); transition:background .15s,color .15s,border-color .15s}
.acilir a[role=menuitem]:hover .ik{background:var(--kobalt); border-color:var(--kobalt); color:#fff}
.acilir a[role=menuitem] b{display:block; font:600 14px/1.25 var(--ui); letter-spacing:-.01em}
.acilir a[role=menuitem] small{display:block; margin-top:3px; font-size:12.5px; line-height:1.35; color:var(--soluk)}
.acilir-alt{display:flex; align-items:center; gap:10px; padding:13px 20px; border-top:1px solid var(--cizgi);
  background:var(--zemin); border-radius:0 0 14px 14px; color:var(--baslik); font-size:13.5px}
.acilir-alt .svg{color:var(--kobalt); transition:transform .15s}
.acilir-alt:hover .svg{transform:translateX(3px)}
.acilir-alt b{font-weight:600}
.acilir-alt span{color:var(--soluk); margin-left:auto; text-align:right}

/* devam eden deneme rozeti (misafir) */
.ust .isim{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 10px; margin-right:4px; border-radius:999px;
  border:1px solid var(--cizgi); background:var(--beyaz); font:600 12.5px/1 var(--ui); color:var(--baslik); white-space:nowrap}
.ust .isim i{width:8px; height:8px; border-radius:50%; background:var(--kobalt-acik); flex:none}
.ust .isim.canli i{animation:ping-nokta 1.2s ease-in-out infinite}
.ust .isim.hazir{background:var(--obsidyen); border-color:var(--obsidyen); color:#fff}
.ust .isim.hazir i{background:#4ade80}
.ust:not(.kaydi) .isim{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff}
.ust:not(.kaydi) .isim.hazir{background:#fff; border-color:#fff; color:var(--baslik)}
@keyframes ping-nokta{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.45; transform:scale(.8)}}

/* sag: giris + cta + hamburger */
.ust .sag{display:flex; align-items:center; gap:6px}
.ust .sag a.metin{display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:8px;
  font:500 14px/1 var(--ui); color:var(--metin); transition:background .15s,color .15s}
.ust .sag a.metin:hover{background:var(--mat); color:var(--baslik)}
.ust .sag .dug{height:38px; padding:0 14px 0 16px; gap:8px; margin-left:6px; border-radius:9px}
.ust .sag .dug .svg{width:15px; height:15px; transition:transform .15s}
.ust .sag .dug:hover .svg{transform:translateX(2px)}
.ust .hamb{display:none}

/* dil secici: TR · EN (ust bar + alt bar) */
.dil-sec{display:inline-flex; align-items:center; gap:2px; height:32px; padding:0 2px 0 6px; margin-right:2px;
  font:600 12px/1 var(--ui); letter-spacing:.04em; color:var(--soluk)}
.dil-sec .svg{width:15px; height:15px; margin-right:3px; opacity:.75}
.dil-sec b,.dil-sec a{display:inline-grid; place-items:center; min-width:28px; height:26px; padding:0 6px; border-radius:7px}
.dil-sec b{color:var(--baslik); background:var(--mat)}
.dil-sec a{color:var(--soluk); transition:background .15s,color .15s}
.dil-sec a:hover{color:var(--kobalt); background:var(--zemin)}
.ust:not(.kaydi) .dil-sec{color:rgba(255,255,255,.7)}
.ust:not(.kaydi) .dil-sec b{color:#fff; background:rgba(255,255,255,.14)}
.ust:not(.kaydi) .dil-sec a{color:rgba(255,255,255,.72)}
.ust:not(.kaydi) .dil-sec a:hover{color:#fff; background:rgba(255,255,255,.1)}
.alt .dil-sec{height:auto; padding:0; margin:0; color:var(--cizgi3)}
.alt .dil-sec b,.alt .dil-sec a{height:24px; font-size:11.5px}
.g-dil{height:auto; margin-left:auto; color:#7f8aa3}
.g-dil b{background:rgba(255,255,255,.12); color:#fff}
.g-dil a{color:#a5b4cf}
.g-dil a:hover{background:rgba(255,255,255,.08); color:#fff}

/* koyu hero uzerinde: seffaf bar, beyaz metin, beyaz cta */
.ust:not(.kaydi) .marka{color:#fff}
.ust:not(.kaydi) .marka i{background:#fff}
.ust:not(.kaydi) .marka i::after{background:#3b82f6}
.ust:not(.kaydi) nav.ana>a,.ust:not(.kaydi) .madde>.ac,.ust:not(.kaydi) .sag a.metin{color:rgba(255,255,255,.82)}
.ust:not(.kaydi) nav.ana>a:hover,.ust:not(.kaydi) .madde>.ac:hover,.ust:not(.kaydi) .madde.acik>.ac,
.ust:not(.kaydi) .sag a.metin:hover{background:rgba(255,255,255,.1); color:#fff}
.ust:not(.kaydi) .sag .dug.mavi{background:#fff; border-color:#fff; color:var(--baslik); box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.ust:not(.kaydi) .sag .dug.mavi:hover{background:#e2e8f0; border-color:#e2e8f0}
.ust:not(.kaydi) .hamb{color:#fff; border-color:rgba(255,255,255,.28)}
body.kilitli{overflow:hidden}
/* ---- hero ------------------------------------------------------------- */
/* Sistem ayni (Plus Jakarta Sans, kobalt eylem, hairline, 4/8px kose);
   hero'da sistemin tam paleti kullaniliyor: kobalt · camgobegi · yesil · kehribar. */
.hero{position:relative; overflow:hidden; margin-top:calc(-1 * var(--ust-h)); padding:128px 0 0; text-align:center;
  color:#fff; background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0) 0 0/22px 22px,
    radial-gradient(90% 60% at 50% 0,#0f1d3d 0%,rgba(15,29,61,0) 70%),
    linear-gradient(180deg,#0a1220 0%,#0b162b 60%,#0a1220 100%)}
.hero::after{content:""; position:absolute; inset:auto 0 0; height:120px; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,18,32,0),#0a1220)}
.hero .isik{position:absolute; border-radius:999px; pointer-events:none; z-index:0}
.hero .isik.a{top:-200px; left:50%; transform:translateX(-50%); width:960px; height:520px;
  background:rgba(37,99,235,.42); filter:blur(120px)}
.hero .isik.b{top:6%; right:-200px; width:520px; height:520px;
  background:rgba(96,165,250,.22); filter:blur(120px)}
.hero .isik.c{top:44%; left:-220px; width:480px; height:480px;
  background:rgba(30,64,175,.5); filter:blur(120px)}
.hero .isik.d{top:58%; left:58%; width:420px; height:420px;
  background:rgba(37,99,235,.18); filter:blur(130px); animation:suz2 21s ease-in-out infinite alternate}
.hero .kap{position:relative; z-index:1}

.hero .rozet{background:rgba(255,255,255,.9); backdrop-filter:blur(6px)}
.hero .rozet b{font-weight:700; color:var(--kobalt)}

.hero h1{margin:0 auto; max-width:19ch; font-family:var(--hero); font-weight:800; color:#fff;
  font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.035em}
.hero h1 .satir{display:block}
.hero h1 .vurgu{
  background:linear-gradient(100deg,#dbeafe,#93c5fd 30%,#3b82f6 60%,#93c5fd 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:parla 7s linear infinite}
@keyframes parla{to{background-position:-220% 0}}

/* donen kelime: uc ifade ayni hucrede, sirayla */
.hero h1 .donen{display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; white-space:nowrap}
.hero .donen>span{grid-area:1/1; min-width:0; opacity:0; transform:translateY(.55em) rotateX(-40deg);
  animation:kelime 9s cubic-bezier(.2,.8,.2,1) infinite, parla 7s linear infinite}
.hero .donen>span:nth-child(2){animation-delay:3s,0s}
.hero .donen>span:nth-child(3){animation-delay:6s,0s}
@keyframes kelime{
  0%{opacity:0; transform:translateY(.55em) rotateX(-40deg)}
  5%,29%{opacity:1; transform:none}
  34%,100%{opacity:0; transform:translateY(-.5em) rotateX(40deg)}
}

/* giris: ogeler sirayla belirir */
.giris{animation:belir .8s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--g,0)*110ms)}
@keyframes belir{from{opacity:0; transform:translateY(22px)}}

/* isiklar yavasca suzulur */
.hero .isik.a{animation:suz 16s ease-in-out infinite alternate}
.hero .isik.b{animation:suz 19s ease-in-out infinite alternate-reverse}
.hero .isik.c{animation:suz 23s ease-in-out infinite alternate}
@keyframes suz{to{transform:translate(-50%,0) translate(60px,40px)}}
.hero .isik.b,.hero .isik.c{--x:0}
@keyframes suz2{to{transform:translate(-70px,50px)}}
.hero .isik.b{animation-name:suz2}
.hero .isik.c{animation-name:suz2; animation-direction:alternate-reverse}
.hero .ozet{margin:22px auto 0; max-width:62ch; font-size:18px; line-height:1.6; color:#b8bfdc}

/* konsol: birincil donusum aygiti, renkli hale icinde */
.dene{position:relative; max-width:780px; margin:36px auto 0; text-align:left}
.dene::before{content:""; position:absolute; inset:-26px -18px; border-radius:28px; z-index:-1;
  background:linear-gradient(100deg,rgba(37,99,235,.5),rgba(59,130,246,.35) 55%,rgba(147,197,253,.25));
  filter:blur(30px); animation:nefes 6s ease-in-out infinite alternate}
@keyframes nefes{to{opacity:.55; transform:scale(1.03)}}
.dene label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.konsol{display:flex; align-items:center; gap:8px; padding:6px; border-radius:16px;
  background:var(--beyaz); border:1px solid rgba(255,255,255,.6); box-shadow:0 24px 60px rgba(5,8,25,.45);
  transition:border-color .15s, box-shadow .15s}
.konsol:focus-within{border-color:var(--kobalt); box-shadow:var(--g4),0 0 0 3px rgba(29,78,216,.15)}
.konsol .alan{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0 8px 0 14px}
.konsol .alan .svg{color:var(--kobalt); opacity:.7}
.dene input{flex:1; min-width:0; height:44px; border:0; background:transparent; outline:none;
  font:400 15px/1 var(--ui); color:var(--baslik)}
.dene input::placeholder{color:var(--cizgi3)}
.dene-not{margin:14px 0 0; text-align:center; font-size:13px; color:#8d95b8}
.dene-not.hata{color:#fda4af; font-weight:500}

.guven{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 12px; margin:24px 0 0; font:500 13px/1.4 var(--ui); color:#dfe3f5}
.guven span{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px)}
.guven .svg{width:15px; height:15px}
.guven span:nth-of-type(1) .svg{color:#34d399}
.guven span:nth-of-type(2) .svg{color:#93c5fd}
.guven span:nth-of-type(3) .svg{color:#60a5fa}

/* sahne: uzun kayittan kesitlerin sirayla cikisi (12 sn dongu, tek zaman cizgisi) */
.sahne{position:relative; max-width:760px; margin:52px auto 0; --d:12s}
.kaynak-bar{position:relative; height:54px; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1)}
.dalga{position:absolute; inset:0; display:flex; align-items:center; gap:3px; padding:0 12px}
.dalga i{flex:1; border-radius:2px; background:rgba(255,255,255,.18)}
.seg{position:absolute; top:0; bottom:0; left:var(--p); width:var(--w); border-radius:8px; opacity:.28;
  animation-duration:var(--d); animation-timing-function:linear; animation-iteration-count:infinite}
.seg.kobalt{background:rgba(37,99,235,.55); box-shadow:inset 0 0 0 1px rgba(96,165,250,.6)}
.seg.mor{background:rgba(96,165,250,.45); box-shadow:inset 0 0 0 1px rgba(191,219,254,.6)}
.seg.cam{background:rgba(30,64,175,.6); box-shadow:inset 0 0 0 1px rgba(96,165,250,.6)}
.seg:nth-of-type(1){animation-name:seg1}
.seg:nth-of-type(2){animation-name:seg2}
.seg:nth-of-type(3){animation-name:seg3}
.seg:nth-of-type(4){animation-name:seg4}
.seg:nth-of-type(5){animation-name:seg5}
@keyframes seg1{0%,9.0%{opacity:.28; filter:none} 11.0%{opacity:1; filter:brightness(1.6)} 15.0%,95%{opacity:.75; filter:none} 100%{opacity:.28}}
@keyframes seg2{0%,27.0%{opacity:.28; filter:none} 29.0%{opacity:1; filter:brightness(1.6)} 33.0%,95%{opacity:.75; filter:none} 100%{opacity:.28}}
@keyframes seg3{0%,46.0%{opacity:.28; filter:none} 48.0%{opacity:1; filter:brightness(1.6)} 52.0%,95%{opacity:.75; filter:none} 100%{opacity:.28}}
@keyframes seg4{0%,63.0%{opacity:.28; filter:none} 65.0%{opacity:1; filter:brightness(1.6)} 69.0%,95%{opacity:.75; filter:none} 100%{opacity:.28}}
@keyframes seg5{0%,82.0%{opacity:.28; filter:none} 84.0%{opacity:1; filter:brightness(1.6)} 88.0%,95%{opacity:.75; filter:none} 100%{opacity:.28}}

.kafa{position:absolute; top:-4px; bottom:-4px; width:2px; background:#fff; border-radius:2px;
  box-shadow:0 0 12px 2px rgba(255,255,255,.55); animation:kafaGit var(--d) linear infinite}
.kafa::before{content:""; position:absolute; top:-5px; left:-4px; width:10px; height:10px; border-radius:999px; background:#fff}
@keyframes kafaGit{from{left:0}to{left:100%}}
.cikan{position:relative; height:126px}
.kare{position:absolute; left:var(--p); bottom:0; width:60px; aspect-ratio:9/16; transform:translateX(-50%);
  border-radius:8px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.28); box-shadow:0 18px 30px -14px rgba(5,8,25,.9), 0 0 0 3px rgba(37,99,235,.18);
  opacity:0; animation-duration:var(--d); animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-iteration-count:infinite}
.kare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kare i{position:relative; margin:0 6px 6px; height:4px; border-radius:2px; background:rgba(255,255,255,.92)}
.kare::before{content:""; position:absolute; inset:auto 0 0; height:45%;
  background:linear-gradient(180deg,transparent,rgba(5,8,25,.7))}
.kare:nth-of-type(1){animation-name:kare1}
.kare:nth-of-type(2){animation-name:kare2}
.kare:nth-of-type(3){animation-name:kare3}
.kare:nth-of-type(4){animation-name:kare4}
.kare:nth-of-type(5){animation-name:kare5}
@keyframes kare1{0%,9.0%{opacity:0; transform:translate(-50%,40px) scale(.6)} 13.0%{opacity:1; transform:translate(-50%,-6px) scale(1.06)} 15.0%,95%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,10px) scale(.9)}}
@keyframes kare2{0%,27.0%{opacity:0; transform:translate(-50%,40px) scale(.6)} 31.0%{opacity:1; transform:translate(-50%,-6px) scale(1.06)} 33.0%,95%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,10px) scale(.9)}}
@keyframes kare3{0%,46.0%{opacity:0; transform:translate(-50%,40px) scale(.6)} 50.0%{opacity:1; transform:translate(-50%,-6px) scale(1.06)} 52.0%,95%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,10px) scale(.9)}}
@keyframes kare4{0%,63.0%{opacity:0; transform:translate(-50%,40px) scale(.6)} 67.0%{opacity:1; transform:translate(-50%,-6px) scale(1.06)} 69.0%,95%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,10px) scale(.9)}}
@keyframes kare5{0%,82.0%{opacity:0; transform:translate(-50%,40px) scale(.6)} 86.0%{opacity:1; transform:translate(-50%,-6px) scale(1.06)} 88.0%,95%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,10px) scale(.9)}}

.sahne-alt{display:flex; justify-content:space-between; margin-top:10px;
  font:400 11px/1.3 var(--mono); color:#7f88ad}
.sahne-alt span:nth-child(2){font-family:var(--ui); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#a5adcf}
/* basligin altindaki kucuk hali */
.sahne.kucuk{max-width:560px; margin:26px auto 0}
.sahne.kucuk .cikan{height:96px}
.sahne.kucuk .kare{width:46px; border-radius:7px}
.sahne.kucuk .kare i{height:3px; margin:0 5px 5px}
.sahne.kucuk .kaynak-bar{height:38px; border-radius:9px}
.sahne.kucuk .dalga{gap:2px; padding:0 8px}
.sahne.kucuk .sahne-alt{margin-top:7px; font-size:10px}
.sahne.kucuk + .dene{margin-top:26px}

/* kayan klip seridi: hem renk hem "hangi kayitlarla calisiyor" cevabi */
.akan{position:relative; margin-top:56px; padding:28px 0 60px;
  border-top:1px solid rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.akan .not{font:600 11px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase;
  color:#8d95b8; margin-bottom:22px}
.ray{display:flex; gap:14px; width:max-content; animation:kay 70s linear infinite}
.alt .kredi{flex:1 0 100%; margin:0; font-size:11px; line-height:1.5; color:var(--cizgi3)}
.akan:hover .ray{animation-play-state:paused}
@keyframes kay{to{transform:translateX(-50%)}}
.akart{position:relative; width:132px; aspect-ratio:9/16; flex:none; border-radius:10px;
  overflow:hidden; padding:9px; display:flex; flex-direction:column; text-align:left;
  color:#fff; box-shadow:var(--g2)}
.akart video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.akart::after{content:""; position:absolute; inset:0 0 auto; height:34%; z-index:1;
  background:linear-gradient(180deg,rgba(2,6,23,.55),transparent)}
.akart>*{position:relative; z-index:2}
.akart .tur{align-self:flex-start; padding:3px 8px; border-radius:999px;
  background:rgba(255,255,255,.22); backdrop-filter:blur(4px);
  font:700 8.5px/1.3 var(--ui); letter-spacing:.07em; text-transform:uppercase}
.akart .sure{margin-top:auto; font:400 9px/1 var(--mono); opacity:.85}
.akart .cc{margin-top:5px; font:800 11px/1.22 var(--dis); letter-spacing:-.01em;
  text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.5)}
.akart .skor{position:absolute; top:9px; right:9px; z-index:2; padding:2px 6px; border-radius:4px;
  background:rgba(255,255,255,.92); color:var(--baslik);
  font:700 9px/1.4 var(--ui); font-variant-numeric:tabular-nums}
.akart{background:linear-gradient(165deg,#1e293b,#0f172a)}
.akart.r1{background:linear-gradient(165deg,#1d4ed8,#0f172a)}
.akart.r2{background:linear-gradient(165deg,#0891b2,#0f172a)}
.akart.r3{background:linear-gradient(165deg,#059669,#0f172a)}
.akart.r4{background:linear-gradient(165deg,#d97706,#0f172a)}
.akart.r5{background:linear-gradient(165deg,#334155,#0f172a)}
.akart.r6{background:linear-gradient(165deg,#2563eb,#0891b2)}
.akart.r7{background:linear-gradient(165deg,#0d9488,#0f172a)}
.akart.r8{background:linear-gradient(165deg,#4338ca,#0f172a)}
.akart.r9{background:linear-gradient(165deg,#b45309,#0f172a)}
.akart.r10{background:linear-gradient(165deg,#0369a1,#0f172a)}

/* ---- deneme sonucu ---------------------------------------------------- */
.sonuc-alani{padding:8px 0 40px}
.sonuc-alani .kutu{border:1px solid var(--cizgi); border-radius:12px; background:var(--beyaz);
  box-shadow:var(--g2); overflow:hidden}
.sonuc-bas{display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid var(--mat); background:var(--zemin)}
.sonuc-bas #deneDurum{display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; background:var(--cam-zemin); border:1px solid var(--cam-cizgi);
  color:var(--cam); font:700 11px/1.4 var(--ui); letter-spacing:.045em; text-transform:uppercase}
.sonuc-bas #deneDurum.bitti{background:var(--yesil-zemin); border-color:var(--yesil-cizgi); color:#16a34a}
.sonuc-bas #deneDurum.hata{background:var(--kirmizi-zemin); border-color:var(--kirmizi-cizgi); color:var(--kirmizi)}
.sonuc-bas #deneAdim{margin-left:auto; max-width:60ch; font:400 12px/1.4 var(--mono); color:var(--soluk);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sonuc-bas #deneAdim.hata{font-family:var(--ui); font-size:13px; color:var(--kirmizi);
  white-space:normal; letter-spacing:-.005em}
.sonuc-kapat{flex:none; display:grid; place-items:center; width:28px; height:28px; padding:0;
  border:1px solid var(--cizgi); border-radius:6px; background:var(--beyaz); color:var(--soluk);
  cursor:pointer; transition:.15s}
.sonuc-kapat:hover{border-color:var(--cizgi2); color:var(--baslik); background:var(--mat)}
.cubuk{flex:1; min-width:90px; height:4px; border-radius:999px; background:var(--cizgi); overflow:hidden}
.cubuk i{display:block; height:100%; width:3%; border-radius:999px; background:var(--kobalt);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.klipler{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; padding:20px}
.klipler:empty{display:none}
.klip{border:1px solid var(--cizgi); border-radius:8px; overflow:hidden; background:var(--zemin);
  transition:border-color .15s}
.klip:hover{border-color:var(--cizgi3)}
.klip .pv{aspect-ratio:9/16; background:var(--obsidyen); display:grid; place-items:center}
.klip video{width:100%; height:100%; object-fit:cover}
.klip .bekle{font:600 11px/1.3 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:#64748b}
.klip .bilgi{display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--beyaz);
  border-top:1px solid var(--cizgi)}
.klip .puan{font:700 12px/1 var(--ui); color:var(--yesil); font-variant-numeric:tabular-nums; flex:none}
.klip .ad{font-size:12.5px; color:var(--metin); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kilit{display:flex; align-items:center; gap:24px; padding:20px; background:var(--obsidyen); color:#fff}
.kilit p{font-size:14px; line-height:1.55; color:#cbd5e1; max-width:70ch}
.kilit .dug{margin-left:auto; background:var(--kobalt); border-color:var(--kobalt)}
.kilit .dug:hover{background:var(--kobalt-acik); border-color:var(--kobalt-acik)}

/* ---- urun vitrini ----------------------------------------------------- */
.serit{padding:8px 0 40px}
.cerceve{border:1px solid var(--cizgi); border-radius:12px; background:var(--beyaz);
  box-shadow:var(--g3); overflow:hidden}
.cerceve .bar{display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  border-bottom:1px solid var(--cizgi); background:var(--zemin)}
.cerceve .bar em{width:9px; height:9px; border-radius:999px; background:var(--cizgi2)}
.cerceve .bar .adres{margin-left:10px; padding:3px 12px; border-radius:999px; background:var(--beyaz);
  border:1px solid var(--cizgi); font:400 11px/1.4 var(--mono); color:var(--soluk)}

/* ---- bolum iskeleti --------------------------------------------------- */
.bolum{padding:88px 0}
.bolum.gri{background:var(--zemin); border-block:1px solid var(--cizgi)}
.bas{margin-bottom:48px}
.bas.orta{text-align:center; max-width:64ch; margin-inline:auto}
.bas .mono{display:block; margin-bottom:14px; color:var(--kobalt)}
.bas h2{font-size:clamp(26px,3.4vw,36px); font-weight:700}
.bas p{margin-top:14px; font-size:17px; color:var(--soluk)}

/* donusum: gercek yatay kaynak -> ayni kayittan cikan gercek dikey klipler */
.donusum{display:grid; grid-template-columns:minmax(0,1.15fr) 88px minmax(0,1fr); gap:24px; align-items:center}
.kaynak{border:1px solid var(--cizgi); border-radius:12px; background:var(--beyaz);
  box-shadow:var(--g2); overflow:hidden}
.kaynak .ust-satir{display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--mat); font:600 11px/1.3 var(--ui); color:var(--soluk)}
.kaynak .ust-satir .nokta{width:7px; height:7px; border-radius:999px; background:var(--kirmizi);
  animation:ping 1.8s infinite}
.kaynak .ust-satir .sag{margin-left:auto; font-variant-numeric:tabular-nums}
.kaynak .gorsel{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--obsidyen)}
.kaynak .gorsel video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kaynak .gorsel .kadraj-iz{position:absolute; top:4%; bottom:4%; left:8%; width:calc(92% * 9 / 16);
  border:2px solid rgba(96,165,250,.95); border-radius:8px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.45); animation:kadrajTakip 6s ease-in-out infinite alternate}
.kaynak .gorsel .kadraj-iz::before{content:"9:16 kadraj · konuşanı izliyor"; position:absolute; top:8px; left:50%;
  transform:translateX(-50%); white-space:nowrap; padding:3px 8px; border-radius:999px;
  background:rgba(37,99,235,.95); color:#fff; font:700 9.5px/1.4 var(--ui); letter-spacing:.06em; text-transform:uppercase}
.kaynak .gorsel .kadraj-iz::after{content:""; position:absolute; inset:0; border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@keyframes kadrajTakip{from{left:7%} to{left:11%}}
.kaynak .zaman{padding:14px}
.kaynak .cizelge{position:relative; height:10px; border-radius:3px; background:var(--mat); overflow:hidden}
.kaynak .cizelge i{position:absolute; top:0; bottom:0; border-radius:2px; background:var(--kobalt)}
.kaynak .alt-satir{display:flex; justify-content:space-between; margin-top:9px;
  font:400 11px/1.3 var(--mono); color:var(--soluk)}

.okgecis{display:grid; place-items:center; gap:10px; text-align:center}
.okgecis .halka{width:48px; height:48px; border-radius:999px; background:var(--beyaz);
  border:1px solid var(--cizgi); box-shadow:var(--g2); display:grid; place-items:center; color:var(--kobalt)}
.okgecis p{font:600 11px/1.4 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--soluk)}

.dikeyler{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.dkart{position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:var(--obsidyen);
  border:1px solid var(--cizgi); box-shadow:var(--g2); padding:10px; display:flex; flex-direction:column;
  justify-content:space-between; color:#fff}
.dkart video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dkart::before{content:""; position:absolute; inset:0 0 auto; height:30%;
  background:linear-gradient(180deg,rgba(2,6,23,.6),transparent)}
.dkart>*{position:relative}
.dkart .tepe{display:flex; align-items:center; justify-content:space-between; font:500 10px/1 var(--mono); color:#e2e8f0}
.dkart .stil{padding:3px 7px; border-radius:4px; background:rgba(255,255,255,.92); color:var(--baslik);
  font:700 9.5px/1.3 var(--ui); letter-spacing:.05em; text-transform:uppercase}
.dkart .durum{align-self:flex-start; padding:3px 7px; border-radius:4px; background:rgba(2,6,23,.6);
  backdrop-filter:blur(4px); font:500 9px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:#cbd5e1}
.donusum-not{margin-top:20px; text-align:center; font-size:12.5px; color:var(--soluk)}

/* platform satiri */
.platformlar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  margin:-20px 0 44px}
.platformlar span{display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 11px;
  border-radius:999px; border:1px solid var(--cizgi); background:var(--beyaz); box-shadow:var(--g1);
  font:600 13px/1 var(--ui); color:var(--baslik); transition:border-color .15s, box-shadow .15s}
.platformlar span:hover{border-color:var(--cizgi3); box-shadow:var(--g2)}
.platformlar svg{width:16px; height:16px; flex:none}
.platformlar b{font:600 12px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase;
  color:var(--soluk); margin-right:6px}

/* ornek ciktilar galerisi */
.galeri{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.gkart{position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:var(--obsidyen);
  border:1px solid var(--cizgi); box-shadow:var(--g2); cursor:pointer}
.gkart video,.gkart img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gkart video{opacity:0; transition:opacity .25s}
.gkart.oynuyor video{opacity:1}
.gkart .ust{position:absolute; top:12px; left:12px; right:12px; z-index:2; display:flex;
  align-items:center; justify-content:space-between}
.gkart .etiket{background:rgba(15,23,42,.72); color:#fff; border:0; backdrop-filter:blur(4px)}
.gkart .etiket.stil{background:rgba(255,255,255,.92); color:var(--baslik)}
.gkart .oynat{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:48px; height:48px; border-radius:999px; background:rgba(255,255,255,.94);
  display:grid; place-items:center; box-shadow:var(--g2); transition:opacity .2s}
.gkart .oynat .svg{width:18px; height:18px; fill:var(--obsidyen); stroke:none; margin-left:2px}
.gkart.oynuyor .oynat{opacity:0}
.gkart .alt{position:absolute; inset:auto 0 0; z-index:2; padding:40px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.8)); color:#fff}
.gkart .alt b{display:block; font:600 12px/1.4 var(--ui); letter-spacing:.02em; color:#e2e8f0}
.gkart .alt span{display:block; margin-top:3px; font:400 10.5px/1.4 var(--ui); color:#94a3b8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* kimler icin: 2x2 yatay kartlar, solda gercek klip karesi */
.kimler{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.kkart{display:grid; grid-template-columns:150px minmax(0,1fr); border:1px solid var(--cizgi); border-radius:10px;
  background:var(--beyaz); box-shadow:var(--g1); overflow:hidden; transition:border-color .15s, box-shadow .15s}
.kkart:hover{border-color:var(--cizgi3); box-shadow:var(--g2)}
.kkart .gorsel{position:relative; background:var(--obsidyen)}
.kkart .gorsel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kkart .gorsel .etiket{position:absolute; left:10px; bottom:10px; background:rgba(15,23,42,.72); color:#fff;
  border:0; backdrop-filter:blur(4px)}
.kkart .metin{padding:22px 24px 20px; display:flex; flex-direction:column}
.kkart .simge{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:#fff; margin-bottom:12px}
.kkart.kobalt .simge{background:var(--kobalt)}
.kkart.cam .simge{background:var(--cam)}
.kkart.yesil .simge{background:var(--yesil)}
.kkart.kehribar .simge{background:#d97706}
.kkart .mono{margin-bottom:6px}
.kkart h3{font-size:18px}
.kkart p{margin-top:8px; font-size:14px; color:var(--soluk); line-height:1.6}
.kkart .cipler{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none}
.kkart .cipler li{padding:4px 9px; border-radius:999px; background:var(--mat); border:1px solid var(--cizgi);
  font:500 11.5px/1.3 var(--ui); color:var(--metin)}
.kkart .akis{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px;
  font:600 12.5px/1.4 var(--ui); color:var(--baslik)}
.kkart .akis b{font-weight:600}
.kkart .akis b:last-child{color:var(--kobalt)}
.kkart .akis .svg{width:15px; height:15px; color:var(--cizgi3)}

/* editor onizlemesi: gercek klip + gercek satirlar */
.edmock{display:grid; grid-template-columns:230px minmax(0,1fr) 250px; border:1px solid var(--cizgi);
  border-radius:12px; background:var(--beyaz); box-shadow:var(--g3); overflow:hidden; margin-bottom:28px}
.ed-onizleme{position:relative; background:var(--obsidyen); border-right:1px solid var(--cizgi)}
.ed-onizleme video{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:9/16}
.ed-onizleme .ed-stil{position:absolute; top:12px; left:12px; background:rgba(15,23,42,.72); color:#fff; border:0;
  backdrop-filter:blur(4px)}
.ed-satirlar{display:flex; flex-direction:column; min-width:0}
.ed-bas{display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--mat);
  background:var(--zemin)}
.ed-bas b{font:600 13.5px/1.3 var(--ui); color:var(--baslik)}
.ed-bas span{font-size:12px; color:var(--soluk)}
.ed-liste{margin:0; padding:8px 12px; list-style:none; display:grid; gap:6px; flex:1; align-content:start}
.ed-liste li{display:grid; grid-template-columns:122px minmax(0,1fr); align-items:center; gap:10px}
.ed-liste time{font:400 10.5px/1.3 var(--mono); color:var(--soluk); font-variant-numeric:tabular-nums; white-space:nowrap}
.ed-liste input{width:100%; height:36px; padding:0 10px; border:1px solid var(--cizgi2); border-radius:4px;
  background:var(--beyaz); font:400 14px/1 var(--ui); color:var(--baslik); outline:none}
.ed-liste input:focus{border-color:var(--kobalt); box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.ed-liste li.degisti input{border-color:#f59e0b; background:#fffbeb}
.ed-alt{display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--mat);
  background:var(--zemin)}
.ed-alt span{font-size:12px; color:var(--soluk)}
.ed-yan{padding:16px 18px; border-left:1px solid var(--cizgi); background:var(--zemin)}
.ed-yan h4{font:600 11px/1.3 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--soluk); margin:0 0 10px}
.ed-yan h4+*{margin-bottom:18px}
.ed-cipler{display:flex; flex-wrap:wrap; gap:6px}
.ed-cipler button{padding:6px 10px; border:1px solid var(--cizgi); border-radius:4px; background:var(--beyaz);
  font:600 12px/1.2 var(--ui); color:var(--metin); cursor:pointer; transition:.15s}
.ed-cipler button:hover{border-color:var(--cizgi3)}
.ed-cipler button.aktif{background:var(--kobalt); border-color:var(--kobalt); color:#fff}
.ed-cipler.statik button{cursor:default}
.ed-liste-kucuk{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.ed-liste-kucuk li{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--soluk)}
.ed-liste-kucuk b{display:inline-flex; align-items:center; gap:6px; font:600 12.5px/1.3 var(--ui); color:var(--baslik)}
.ed-liste-kucuk .renk{width:12px; height:12px; border-radius:3px; background:var(--kobalt); display:inline-block}
.editor{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ekart{padding:20px}

/* editor kartlari */
.editor{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.ekart{padding:26px; border:1px solid var(--cizgi); border-radius:8px; background:var(--beyaz);
  box-shadow:var(--g1); transition:border-color .15s, box-shadow .15s}
.ekart:hover{border-color:var(--cizgi3); box-shadow:var(--g2)}
.ekart .simge{width:38px; height:38px; border-radius:8px; background:var(--mat);
  display:grid; place-items:center; color:var(--kobalt); margin-bottom:16px}
.ekart h3{font-size:17px}
.ekart p{margin-top:8px; font-size:14px; color:var(--soluk); line-height:1.6}
.ekart a{display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font:600 13px/1.4 var(--ui); color:var(--kobalt)}
.ekart a:hover{text-decoration:underline}
.diger{margin-top:24px; font-size:13.5px; color:var(--soluk)}
.diger a{color:var(--metin); font-weight:500; border-bottom:1px solid var(--cizgi2)}
.diger a:hover{color:var(--kobalt); border-color:var(--kobalt)}

/* elle vs kesit */
.karsi{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.kcol{padding:28px; border-radius:8px; border:1px solid var(--cizgi); background:var(--beyaz);
  display:flex; flex-direction:column}
.kcol.biz{border-color:#bfdbfe; background:linear-gradient(180deg,#f5f9ff,#fff); box-shadow:var(--g2)}
.kcol .bas-satir{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:16px; border-bottom:1px solid var(--mat)}
.kcol h3{font-size:18px}
.kcol .sure{font:800 24px/1 var(--dis); letter-spacing:-.03em; color:var(--soluk)}
.kcol.biz .sure{color:var(--kobalt)}
.kcol ol{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:a}
.kcol li{display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--metin); line-height:1.5}
.kcol li::before{counter-increment:a; content:counter(a,decimal-leading-zero); flex:none;
  font:600 11px/1.6 var(--ui); letter-spacing:.04em; color:var(--cizgi3); padding-top:1px}
.kcol.biz li::before{color:var(--kobalt)}
.kcol li small{font-size:12.5px; color:var(--soluk)}
.kcol .not{margin-top:auto; padding-top:18px; border-top:1px solid var(--mat);
  font:500 12.5px/1.5 var(--ui); color:var(--soluk)}
.kcol.biz .not{color:var(--kobalt)}

/* ekipler seridi */
.ekip{display:flex; align-items:center; gap:24px; padding:24px 28px; border:1px solid var(--cizgi);
  border-radius:8px; background:var(--obsidyen); color:#fff; margin-bottom:40px}
.ekip .simge{width:44px; height:44px; flex:none; border-radius:8px; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#93c5fd}
.ekip h3{color:#fff; font-size:17px}
.ekip p{margin-top:4px; font-size:14px; color:#cbd5e1}
.ekip .dug{margin-left:auto; background:#fff; color:var(--baslik); border-color:#fff}
.ekip .dug:hover{background:#e2e8f0; border-color:#e2e8f0}

/* ozellik izgarasi */
.ozellikler{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.okart{grid-column:span 3; padding:28px; border:1px solid var(--cizgi); border-radius:8px;
  background:var(--beyaz); box-shadow:var(--g1); transition:border-color .15s, box-shadow .15s}
.okart.kucuk{grid-column:span 2; padding:24px}
.okart:hover{border-color:var(--cizgi3); box-shadow:var(--g2)}
.okart .simge{width:38px; height:38px; border-radius:8px; background:var(--mat);
  display:grid; place-items:center; color:var(--kobalt); margin-bottom:18px}
.okart h3{font-size:19px; font-weight:700}
.okart p{margin-top:10px; font-size:14.5px; color:var(--soluk); line-height:1.6}
.okart .satir{display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--mat); font:500 12.5px/1.4 var(--ui); color:var(--metin)}
.okart .satir .svg{width:16px; height:16px; color:var(--yesil)}
.okart .sayac{display:flex; align-items:baseline; gap:10px; margin-top:18px}
.okart .sayac b{font:800 26px/1 var(--dis); letter-spacing:-.03em; color:var(--baslik);
  font-variant-numeric:tabular-nums}
.okart .sayac span{font-size:13px; color:var(--soluk)}
.okart .stiller{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.okart .stiller i{padding:5px 11px; border-radius:4px; font:800 11px/1.3 var(--dis);
  letter-spacing:.02em; text-transform:uppercase; font-style:normal}
.okart .stiller i:nth-child(1){background:var(--obsidyen); color:#fff}
.okart .stiller i:nth-child(2){background:var(--kobalt); color:#fff}
.okart .stiller i:nth-child(3){background:#fef3c7; color:#b45309}
.okart .stiller i:nth-child(4){background:var(--mat); color:var(--metin)}

/* nasil calisir */
.adimlar{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.adim{padding:28px; border:1px solid var(--cizgi); border-radius:8px; background:var(--beyaz);
  box-shadow:var(--g1); position:relative}
.adim .no{font:800 34px/1 var(--dis); letter-spacing:-.04em; color:var(--cizgi2)}
.adim h3{margin-top:16px; font-size:18px}
.adim p{margin-top:10px; font-size:14.5px; color:var(--soluk); line-height:1.6}
.adim .kenar{margin-top:16px; padding-top:14px; border-top:1px solid var(--mat);
  font:500 12.5px/1.5 var(--ui); color:var(--kobalt)}

/* metrikler */
.metrikler{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--cizgi); border-radius:8px; background:var(--beyaz); overflow:hidden}
.metrikler div{padding:32px 24px; border-left:1px solid var(--cizgi); text-align:center}
.metrikler div:first-child{border-left:0}
.metrikler b{display:block; font:800 clamp(28px,3.2vw,38px)/1 var(--dis); letter-spacing:-.035em;
  color:var(--kobalt); font-variant-numeric:tabular-nums}
.metrikler b.koyu{color:var(--baslik)}
.metrikler b.yesil{color:var(--yesil)}
.metrikler b.kehribar{color:#d97706}
.metrikler span{display:block; margin-top:10px; font-size:13px; color:var(--soluk)}

/* araclar dizini */
.dizin{border:1px solid var(--cizgi); border-radius:8px; overflow:hidden; background:var(--beyaz)}
.dizin a{display:grid; grid-template-columns:48px minmax(160px,.8fr) 1fr 24px; align-items:center;
  gap:16px; min-height:56px; padding:0 20px; border-top:1px solid var(--mat);
  transition:background .12s}
.dizin a:first-child{border-top:0}
.dizin a:hover{background:var(--zemin)}
.dizin .k{font:700 11px/1.3 var(--ui); letter-spacing:.05em; color:var(--cizgi3);
  font-variant-numeric:tabular-nums}
.dizin .ad{font:600 14.5px/1.4 var(--ui); color:var(--baslik)}
.dizin .ac{font-size:13.5px; color:var(--soluk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dizin .ok{text-align:right; color:var(--cizgi3); opacity:0; transition:.15s}
.dizin a:hover .ok{opacity:1; color:var(--kobalt); transform:translateX(2px)}

/* fiyat tablosu */
/* fiyat kartlari */
.fk{max-width:1040px; margin:0 auto}
.fk-donem{display:inline-flex; margin:0 auto 28px; padding:4px; border:1px solid var(--cizgi); border-radius:999px; background:var(--beyaz); position:relative; left:50%; transform:translateX(-50%)}
.fk-donem button{border:0; background:transparent; border-radius:999px; padding:8px 18px; font:600 13.5px/1 var(--ui); color:var(--soluk); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .15s,color .15s}
.fk-donem button.on{background:var(--obsidyen); color:#fff}
.fk-donem button em{font:600 10.5px/1 var(--ui); font-style:normal; letter-spacing:.04em; text-transform:uppercase; color:var(--kobalt); background:#dbeafe; padding:3px 7px; border-radius:999px}
.fk-donem button.on em{background:rgba(255,255,255,.16); color:#bfdbfe}
.fk-kartlar{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.fk-kart{position:relative; display:flex; flex-direction:column; padding:30px 28px 28px; background:var(--beyaz); border:1px solid var(--cizgi); border-radius:16px; box-shadow:var(--g1)}
.fk-kart.one{border-color:var(--kobalt); box-shadow:0 24px 48px -24px rgba(29,78,216,.35), 0 0 0 1px var(--kobalt);
  background:linear-gradient(180deg,#f5f8ff 0%,var(--beyaz) 30%)}
.fk-rozet{position:absolute; top:-13px; left:28px; padding:6px 12px; border-radius:999px; background:var(--kobalt); color:#fff; font:700 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.fk-kart h3{font-size:20px; font-weight:700; letter-spacing:-.015em}
.fk-ozet{margin:6px 0 0; min-height:40px; font-size:13.5px; line-height:1.5; color:var(--soluk)}
.fk-fiyat{margin-top:20px; display:flex; align-items:baseline; gap:6px}
.fk-fiyat b{font:800 40px/1 var(--dis); letter-spacing:-.04em; color:var(--baslik)}
.fk-fiyat small{font:500 14px/1 var(--ui); color:var(--soluk)}
.fk-alt{margin:8px 0 0; min-height:18px; font:500 12.5px/1.4 var(--mono); color:var(--cizgi3)}
.fk-kart .dug{margin-top:20px; width:100%; justify-content:center; gap:8px}
.fk-kart .dug .svg{width:15px; height:15px}
.fk-oz{list-style:none; margin:24px 0 0; padding:22px 0 0; border-top:1px solid var(--mat); display:grid; gap:11px; font-size:14px; color:var(--metin)}
.fk-oz li{display:flex; align-items:flex-start; gap:10px; line-height:1.4}
.fk-oz li::before{content:""; flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:#eff6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.fk-kart.one .fk-oz li::before{background-color:#dbeafe}
.fk-karsi{margin-top:28px}
.fk-karsi summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; margin:0 auto; font:600 14px/1 var(--ui); color:var(--kobalt); padding:10px 16px; border-radius:999px; border:1px solid var(--cizgi); background:var(--beyaz); position:relative; left:50%; transform:translateX(-50%)}
.fk-karsi summary::-webkit-details-marker{display:none}
.fk-karsi summary .svg{width:14px; height:14px; transform:rotate(90deg); transition:transform .2s}
.fk-karsi[open] summary .svg{transform:rotate(-90deg)}
.fk-karsi summary:hover{border-color:var(--kobalt)}
.fk-karsi .fiyat{margin-top:20px}
.fk-not{margin:22px auto 0; text-align:center; font-size:12.5px; color:var(--cizgi3); max-width:60ch}
.fk-not a{color:var(--soluk); text-decoration:underline; text-underline-offset:2px}
.fk-not a:hover{color:var(--kobalt)}
@media (max-width:900px){ .fk-kartlar{grid-template-columns:1fr; max-width:440px; margin:0 auto} .fk-kart.one{order:-1} }

.fiyat{width:100%; border-collapse:separate; border-spacing:0; background:var(--beyaz);
  border:1px solid var(--cizgi); border-radius:8px; overflow:hidden}
.fiyat th,.fiyat td{padding:0 20px; height:52px; text-align:left; font-size:14px;
  border-top:1px solid var(--mat); vertical-align:middle}
.fiyat thead th{height:auto; padding:24px 20px; border-top:0; background:var(--zemin);
  vertical-align:top}
.fiyat thead .ad{display:flex; align-items:center; gap:8px; font:600 14px/1.3 var(--ui); color:var(--metin)}
.fiyat thead .ad i{padding:2px 8px; border-radius:999px; background:var(--kobalt); color:#fff;
  font:700 10px/1.5 var(--ui); font-style:normal; letter-spacing:.05em; text-transform:uppercase}
.fiyat thead .tl{display:block; margin-top:10px; font:800 26px/1 var(--dis); letter-spacing:-.03em;
  color:var(--baslik); font-variant-numeric:tabular-nums}
.fiyat thead .tl small{font:400 13px/1 var(--ui); color:var(--soluk); letter-spacing:0}
.fiyat tbody th{font-weight:500; color:var(--soluk)}
.fiyat tbody td{color:var(--baslik); font-variant-numeric:tabular-nums}
.fiyat .yok{color:var(--yesil); font-weight:600}
.fiyat .one{background:#f7faff; box-shadow:inset 1px 0 0 #dbeafe, inset -1px 0 0 #dbeafe}
.fiyat thead .one{background:#eff6ff; box-shadow:inset 1px 0 0 #dbeafe, inset -1px 0 0 #dbeafe,
  inset 0 3px 0 var(--kobalt)}
.fiyat tfoot td{height:auto; padding:20px; background:var(--zemin)}
.fiyat tfoot .one{background:#eff6ff}
.fiyat tfoot .dug{width:100%}

/* sorular */
.sorular{border-top:1px solid var(--cizgi)}
.soru{display:grid; grid-template-columns:48px minmax(0,1fr) minmax(0,1.25fr); gap:24px;
  padding:24px 0; border-bottom:1px solid var(--cizgi)}
.soru .mono{padding-top:3px; color:var(--cizgi3)}
.soru h3{font:600 15.5px/1.5 var(--ui); letter-spacing:-.01em}
.soru p{font-size:14px; color:var(--soluk); line-height:1.65}

/* kapanis */
.kapanis{padding:0 0 96px}
.kapanis .ic{position:relative; overflow:hidden; border:1px solid var(--cizgi); border-radius:16px;
  background:var(--beyaz); box-shadow:var(--g3); padding:64px 48px; text-align:center}
.kapanis .ic::before{content:""; position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:640px; height:360px; border-radius:999px; background:rgba(219,234,254,.6); filter:blur(120px)}
.kapanis .ic>*{position:relative}
.kapanis h2{font-size:clamp(26px,3.6vw,38px); font-weight:800; max-width:20ch; margin-inline:auto}
.kapanis p{margin:16px auto 30px; max-width:58ch; font-size:16px; color:var(--soluk)}
.kapanis .cagri{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.kapanis .kucuk{margin-top:22px; font-size:12.5px; color:var(--cizgi3)}

/* alt */
.alt{border-top:1px solid var(--cizgi); background:var(--zemin); padding:56px 0 28px}
.alt-ic{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:40px}
.alt-ic h4{font:600 12px/1.3 var(--ui); letter-spacing:.09em; text-transform:uppercase;
  color:var(--baslik); margin-bottom:16px}
.alt-ic ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.alt-ic a{font-size:13.5px; color:var(--soluk)}
.alt-ic a:hover{color:var(--kobalt)}
.alt .tanim{margin-top:16px; font-size:13.5px; color:var(--soluk); max-width:36ch; line-height:1.6}
.alt .son{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:48px;
  padding-top:24px; border-top:1px solid var(--cizgi); font-size:12.5px; color:var(--cizgi3)}
.alt .son nav{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap}

/* ---- dar ekran -------------------------------------------------------- */
@media (max-width:1040px){
  .donusum{grid-template-columns:1fr; gap:20px}
  .edmock{grid-template-columns:200px minmax(0,1fr)}
  .ed-yan{grid-column:1/-1; border-left:0; border-top:1px solid var(--cizgi)}
  .galeri{grid-template-columns:repeat(2,1fr)}
  .kimler{grid-template-columns:1fr}
  .editor{grid-template-columns:repeat(2,1fr)}
  .okgecis{flex-direction:row}
  .okgecis .halka{transform:rotate(90deg)}
  .ozellikler{grid-template-columns:repeat(2,1fr)}
  .okart,.okart.kucuk{grid-column:span 1}
  .alt-ic{grid-template-columns:repeat(2,1fr); gap:32px}
}
@media (max-width:860px){
  :root{--ust-h:61px}
  .ust nav.ana{display:none}
  .ust .hamb{display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; margin-left:4px; border:1px solid var(--cizgi); border-radius:9px; background:transparent;
    color:var(--baslik); cursor:pointer}
  .ust .hamb i{width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s}
  .ust.menu-acik .hamb i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ust.menu-acik .hamb i:nth-child(2){opacity:0}
  .ust.menu-acik .hamb i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .ust.menu-acik{background:#fff; border-bottom-color:var(--cizgi)}
  .ust.menu-acik .marka{color:var(--baslik)}
  .ust.menu-acik .marka i{background:var(--obsidyen)}
  .ust.menu-acik .marka i::after{background:var(--kobalt-acik)}
  .ust.menu-acik .hamb,.ust.menu-acik .sag a.metin{color:var(--baslik); border-color:var(--cizgi)}
  .ust.menu-acik .dil-sec{color:var(--soluk)}
  .ust.menu-acik .dil-sec b{color:var(--baslik); background:var(--mat)}
  .ust.menu-acik .dil-sec a{color:var(--soluk)}
  .ust.menu-acik .sag .dug.mavi{background:var(--kobalt); border-color:var(--kobalt); color:#fff; box-shadow:none}
  .ust.menu-acik nav.ana{display:flex; flex-direction:column; align-items:stretch; gap:2px; margin:0;
    position:fixed; left:0; right:0; top:60px; bottom:0; overflow:auto; z-index:45;
    background:#fff; padding:10px 16px 40px; border-top:1px solid var(--cizgi)}
  .ust.menu-acik nav.ana>a,.ust.menu-acik .madde>.ac{height:auto; width:100%; padding:13px 12px; font-size:16px; color:var(--baslik);
    justify-content:space-between; border-radius:10px}
  .ust.menu-acik .madde>.ac,.ust.menu-acik .madde.acik>.ac{background:var(--zemin); color:var(--baslik)}
  .ust.menu-acik .madde.acik>.ac{background:var(--mat)}
  .ust.menu-acik .acilir{position:static; width:auto; border:0; border-radius:0; box-shadow:none; transform:none;
    opacity:1; visibility:visible; display:none; margin:4px 0 8px}
  .ust.menu-acik .madde.acik .acilir{display:block}
  .ust.menu-acik .acilir-ic{grid-template-columns:1fr; padding:6px 0 10px}
  .ust.menu-acik .acilir .grup+.grup{margin-top:6px}
  .ust.menu-acik .acilir-alt{border:1px solid var(--cizgi); border-radius:10px; flex-wrap:wrap}
  .ust.menu-acik .acilir-alt span{margin-left:0; text-align:left; flex-basis:100%}
  .karsi{grid-template-columns:1fr}
  .ekip{flex-direction:column; align-items:flex-start; gap:14px}
  .ekip .dug{margin-left:0; width:100%}
  .ust .kap{gap:12px}
  .bolum{padding:60px 0}
  .adimlar{grid-template-columns:1fr}
  .metrikler{grid-template-columns:repeat(2,1fr)}
  .metrikler div{border-left:1px solid var(--cizgi); border-top:1px solid var(--cizgi)}
  .metrikler div:nth-child(odd){border-left:0}
  .metrikler div:nth-child(-n+2){border-top:0}
  .dizin a{grid-template-columns:34px 1fr 22px; gap:12px; padding:0 14px}
  .dizin .ac{display:none}
  .soru{grid-template-columns:1fr; gap:10px}
  .soru .mono{display:none}
  .kilit{flex-direction:column; align-items:flex-start; gap:16px}
  .kilit .dug{margin-left:0; width:100%}
  .fiyat{display:block; overflow-x:auto; white-space:nowrap}
  .kapanis .ic{padding:44px 24px}
}
@media (max-width:640px){
  .hero{padding:104px 0 0}
  .ust .sag .dil-sec{display:none}
  .hero h1{font-size:clamp(30px,9vw,34px); max-width:none}
  .hero h1 .donen{white-space:normal}
  .galeri{grid-template-columns:repeat(2,1fr); gap:12px}
  .editor{grid-template-columns:1fr}
  .kkart{grid-template-columns:1fr}
  .kkart .gorsel{aspect-ratio:16/9}
  .dene::before{inset:-14px -8px}
  .sahne.kucuk{display:block; max-width:none; margin-top:20px}
  .sahne.kucuk .cikan{height:70px}
  .sahne.kucuk .kare{width:34px}
  .sahne.kucuk .kaynak-bar{height:32px}
  .sahne.kucuk .dalga i:nth-child(even){display:none}
  .sahne.kucuk .sahne-alt span:nth-child(2){display:none}
  .akart{width:106px}
  .akan{margin-top:40px; padding:22px 0 28px}
  .ozellikler{grid-template-columns:1fr}
  .edmock{grid-template-columns:1fr}
  .ed-onizleme{border-right:0}
  .ed-onizleme video{aspect-ratio:16/10}
  .ed-liste li{grid-template-columns:1fr} .ed-liste time{display:none}
  .konsol{flex-direction:column; align-items:stretch; padding:10px; gap:10px}
  .konsol .alan{padding:0 4px}
  .konsol .dug{width:100%}
  .dikeyler{gap:8px}
  .alt-ic{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:480px){
  .ust .sag a.metin{display:none}
  .ust .sag .dug{height:36px; padding:0 12px 0 14px; font-size:13px}
}

/* ---- ana sayfa: devam eden / biten deneme karti ------------------------ */
.devam{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; max-width:720px; margin:18px auto 0;
  padding:14px 16px 14px 18px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; text-align:left; backdrop-filter:blur(8px)}
.devam .nokta{width:10px; height:10px; border-radius:50%; background:#60a5fa; animation:ping-nokta 1.2s ease-in-out infinite}
.devam.hazir .nokta{background:#4ade80; animation:none}
.devam b{display:block; font:600 14px/1.3 var(--ui)}
.devam small{display:block; margin-top:3px; font-size:12.5px; color:rgba(255,255,255,.7)}
.devam .cubuk{height:4px; margin-top:8px; border-radius:2px; background:rgba(255,255,255,.15); overflow:hidden}
.devam .cubuk i{display:block; height:100%; width:0; background:#60a5fa; transition:width .6s}
.devam.hazir .cubuk{display:none}
.devam .dug{height:36px; padding:0 14px; font-size:13px; background:#fff; border-color:#fff; color:var(--baslik)}
.devam .dug:hover{background:#e2e8f0; border-color:#e2e8f0}
@media (max-width:640px){ .devam{grid-template-columns:auto 1fr} .devam .dug{grid-column:2} }

/* ---- nasil calisir: is gunlugu ------------------------------------------ */
.gunluk{list-style:none; margin:0 auto; padding:0; max-width:880px; position:relative}
.gunluk::before{content:""; position:absolute; left:98px; top:12px; bottom:12px; width:1px; background:var(--cizgi)}
.gunluk .an{display:grid; grid-template-columns:76px minmax(0,1fr); gap:0 44px; padding:0 0 44px; position:relative}
.gunluk .an:last-child{padding-bottom:0}
.gunluk .zaman{text-align:right; padding-top:2px}
.gunluk .zaman b{display:block; font:600 14px/1.2 var(--mono); letter-spacing:.02em; color:var(--baslik); font-variant-numeric:tabular-nums}
.gunluk .zaman span{display:block; margin-top:4px; font:600 10.5px/1.3 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--cizgi3)}
.gunluk .an::after{content:""; position:absolute; left:94px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--beyaz); border:2px solid var(--kobalt)}
.gunluk .an.son::after{background:var(--kobalt)}
.gunluk h3{font-size:19px; font-weight:700; letter-spacing:-.015em}
.gunluk .ic>p{margin:8px 0 0; max-width:56ch; font-size:15px; line-height:1.6; color:var(--soluk)}
.gunluk .parca{margin-top:16px; border:1px solid var(--cizgi); border-radius:10px; background:var(--beyaz); box-shadow:var(--g1)}

.gunluk .adres{display:flex; align-items:center; gap:12px; padding:8px 8px 8px 14px; max-width:560px}
.gunluk .adres .ikon{color:var(--cizgi3); display:flex}
.gunluk .adres .url{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 13.5px/1 var(--mono); color:var(--soluk)}
.gunluk .adres .url b{font-weight:600; color:var(--baslik)}
.gunluk .dug-m{flex:none; height:34px; padding:0 14px; border-radius:7px; background:var(--kobalt); color:#fff; font:600 13px/34px var(--ui)}

.gunluk .ilerleme{max-width:560px; padding:6px 0}
.gunluk .ilerleme .satir{display:grid; grid-template-columns:22px 1fr auto auto; align-items:center; gap:12px; padding:9px 16px; font-size:13.5px}
.gunluk .ilerleme .satir+.satir{border-top:1px solid var(--mat)}
.gunluk .ilerleme i{width:16px; height:16px; border-radius:50%; border:2px solid var(--cizgi2); display:block; position:relative}
.gunluk .ilerleme .bitti i{border-color:var(--kobalt); background:var(--kobalt)}
.gunluk .ilerleme .bitti i::after{content:""; position:absolute; left:4px; top:1.5px; width:4px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.gunluk .ilerleme .surer i{border-color:var(--kobalt); border-top-color:transparent; animation:don .9s linear infinite}
.gunluk .ilerleme b{font-weight:600; color:var(--baslik); white-space:nowrap}
.gunluk .ilerleme .bekler b,.gunluk .ilerleme .bekler span{color:var(--cizgi3)}
.gunluk .ilerleme span{color:var(--soluk)}
.gunluk .ilerleme em{font:500 12px/1 var(--mono); color:var(--cizgi3); font-style:normal; min-width:52px; text-align:right}
@keyframes don{to{transform:rotate(360deg)}}

.gunluk .kelimeler{display:flex; flex-wrap:wrap; align-items:center; gap:6px 5px; padding:14px 16px; max-width:640px; font:500 14px/1 var(--ui)}
.gunluk .kelimeler b{font-weight:500; color:var(--baslik); padding:5px 7px; border-radius:5px; background:var(--zemin); border:1px solid var(--cizgi)}
.gunluk .kelimeler b.vurgu{background:var(--kobalt); border-color:var(--kobalt); color:#fff}
.gunluk .kelimeler span{font:500 11px/1 var(--mono); color:var(--cizgi3); margin:0 4px}

.gunluk .adaylar{max-width:640px; padding:6px 0}
.gunluk .aday{display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:14px; padding:9px 16px}
.gunluk .aday+.aday{border-top:1px solid var(--mat)}
.gunluk .aday>div{min-width:0}
.gunluk .aday img{width:40px; height:54px; object-fit:cover; border-radius:5px; background:var(--mat)}
.gunluk .aday b{display:block; font-size:14px; font-weight:600; color:var(--baslik); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gunluk .aday span{display:block; margin-top:3px; font:500 12px/1 var(--mono); color:var(--soluk)}
.gunluk .aday i{font:800 20px/1 var(--dis); font-style:normal; color:var(--kobalt); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.gunluk .aday.soluk{opacity:.5}
.gunluk .aday.soluk img{filter:grayscale(1)}

.gunluk .gklipler{display:flex; align-items:stretch; gap:14px; padding:14px; max-width:640px}
.gunluk .gklip{position:relative; width:118px; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#0f172a; flex:none}
.gunluk .gklip video{width:100%; height:100%; object-fit:cover; display:block}
.gunluk .gklip .stil{position:absolute; left:8px; top:8px; font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(15,23,42,.72); padding:4px 7px; border-radius:4px}
.gunluk .gklip-not{align-self:center; padding-left:6px}
.gunluk .gklip-not b{display:block; font-size:16px; font-weight:700; color:var(--baslik)}
.gunluk .gklip-not span{display:block; margin-top:6px; font-size:13px; color:var(--soluk)}

.gunluk .yayin{display:flex; flex-wrap:wrap; gap:8px; padding:12px; max-width:640px; border:0; background:transparent; box-shadow:none}
.gunluk .hedef{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--cizgi); border-radius:999px; background:var(--beyaz); font:600 13px/1 var(--ui); color:var(--baslik)}
.gunluk .hedef svg{width:16px; height:16px; flex:none}
.gunluk .hedef em{font:500 11.5px/1 var(--mono); font-style:normal; color:var(--soluk); padding-left:8px; border-left:1px solid var(--cizgi)}
.gunluk .hedef.indir{border-style:dashed; color:var(--soluk)}
.gunluk .hedef.indir .svg{color:var(--kobalt)}
.gunluk-not{margin:40px auto 0; max-width:880px; padding-left:120px; font:400 13px/1.6 var(--ui); color:var(--cizgi3)}

@media (max-width:760px){
  .gunluk .ilerleme .satir{grid-template-columns:22px auto 1fr auto; gap:10px; font-size:13px}
  .gunluk .ilerleme .satir span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .gunluk .ilerleme em{min-width:0}
  .gunluk .aday{grid-template-columns:34px 1fr auto; gap:10px}
  .gunluk .aday span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .gunluk .aday img{width:34px; height:46px}
  .gunluk::before{left:14px}
  .gunluk .an{grid-template-columns:minmax(0,1fr); gap:6px; padding-left:36px}
  .gunluk .an::after{left:10px}
  .gunluk .zaman{text-align:left; display:flex; gap:10px; align-items:baseline}
  .gunluk .zaman span{margin:0}
  .gunluk .gklipler{flex-wrap:wrap}
  .gunluk-not{padding-left:36px}
}


/* ---- ust menude bulunulan sayfa ---------------------------------------- */
.ust nav.ana>a.on,.ust .madde>.ac.on{color:var(--baslik); background:var(--mat); font-weight:600}
.ust:not(.kaydi) nav.ana>a.on,.ust:not(.kaydi) .madde>.ac.on{color:#fff; background:rgba(255,255,255,.14)}

/* ---- ic sayfa basligi (koyu, ana sayfa hero'sunun kisa kardesi) -------- */
.shero{position:relative; overflow:hidden; margin-top:calc(-1 * var(--ust-h)); padding:128px 0 64px; color:#fff; background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0) 0 0/22px 22px,
    radial-gradient(70% 90% at 20% 0,#0f1d3d 0%,rgba(15,29,61,0) 70%),
    linear-gradient(180deg,#0a1220 0%,#0b162b 70%,#0a1220 100%)}
.shero .isik{position:absolute; border-radius:999px; pointer-events:none}
.shero .isik.a{top:-220px; left:-120px; width:760px; height:460px; background:rgba(37,99,235,.4); filter:blur(120px); animation:suz2 18s ease-in-out infinite alternate-reverse}
.shero .isik.b{bottom:-240px; right:-160px; width:560px; height:420px; background:rgba(96,165,250,.18); filter:blur(120px); animation:suz2 21s ease-in-out infinite alternate}
.shero .kap{position:relative; z-index:1}
.shero-ic{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:48px; align-items:end}
.shero .yol{display:flex; align-items:center; gap:8px; margin-bottom:18px; color:#93c5fd}
.shero .yol a{color:#7f8aa3; transition:color .15s}
.shero .yol a:hover{color:#fff}
.shero .yol i{font-style:normal; color:#3b4a6b}
.shero h1{font-family:var(--hero); font-weight:800; font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-.035em; max-width:16ch; color:#fff}
.shero h1 em{font-style:normal; background:linear-gradient(90deg,#60a5fa,#93c5fd 55%,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent}
.shero .ozet{margin-top:18px; max-width:58ch; font-size:17px; line-height:1.6; color:#b8bfdc}
.sgez{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.sgez a{display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:999px; font:600 13.5px/1 var(--ui);
  color:#cbd5e1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:background .15s,border-color .15s,color .15s}
.sgez a:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff}
.sgez a.on{background:#fff; border-color:#fff; color:var(--baslik); box-shadow:0 12px 28px -14px rgba(96,165,250,.9)}
.smetrik{display:grid; gap:10px}
.smetrik>div{display:flex; align-items:baseline; gap:14px; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px)}
.smetrik b{min-width:4.2ch; font:800 28px/1 var(--hero); letter-spacing:-.03em; color:#fff}
.smetrik span{font-size:13.5px; color:#a5b4cf}
.sara-kap{align-self:end}
.sara{display:flex; align-items:center; gap:10px; height:54px; padding:0 10px 0 18px; border-radius:999px; background:#fff;
  box-shadow:0 22px 44px -22px rgba(37,99,235,.9); transition:box-shadow .2s}
.sara:focus-within{box-shadow:0 0 0 6px rgba(96,165,250,.3),0 22px 44px -20px rgba(37,99,235,.9)}
.sara .svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--soluk); stroke-width:2; stroke-linecap:round}
.sara input{flex:1; min-width:0; border:0; outline:none; background:transparent; font:15px var(--ui); color:var(--baslik)}
.sara kbd{font:600 11px var(--ui); color:var(--kobalt); background:#eff6ff; border-radius:999px; padding:4px 10px}
.sara kbd:empty{display:none}

/* ---- sorular sayfasi ---------------------------------------------------- */
.sss-duzen{display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start}
.sss-yan{position:sticky; top:92px; display:grid; gap:18px}
.sss-yan nav{display:grid; gap:2px; margin-top:-6px}
.sss-yan nav a{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:9px; font:500 14px/1.2 var(--ui); color:var(--metin); transition:background .15s,color .15s}
.sss-yan nav a:hover{background:var(--mat); color:var(--baslik)}
.sss-yan nav small{font:600 11px var(--ui); color:var(--cizgi3)}
.sss-yaz{padding:16px; border:1px solid var(--cizgi); border-radius:12px; background:var(--zemin)}
.sss-yaz b{display:block; font:700 14px var(--dis); color:var(--baslik)}
.sss-yaz p{margin:6px 0 8px; font-size:13px; line-height:1.55; color:var(--soluk)}
.sss-yaz a{font:600 13px var(--ui); color:var(--kobalt)}
.sgrup{scroll-margin-top:92px}
.sgrup+.sgrup{margin-top:48px}
.sgrup-bas{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:20px; font-weight:800; letter-spacing:-.02em}
.sgrup-bas small{font:600 11px var(--ui); color:var(--soluk); background:var(--mat); border-radius:999px; padding:3px 9px}
.sss-ana .soru{grid-template-columns:40px minmax(0,1fr) minmax(0,1.3fr)}
.sss-ana .soru[hidden],.sgrup[hidden]{display:none}
.sss-yok{padding:18px; border:1.5px dashed var(--cizgi); border-radius:12px; text-align:center; color:var(--soluk); font-size:14px}
.sss-yok a{color:var(--kobalt); font-weight:600}
.sss-daha{margin-top:22px}
.sss-daha a{display:inline-flex; align-items:center; gap:6px; font:600 14px var(--ui); color:var(--kobalt)}
.sss-daha .svg{width:15px; height:15px}
#planlar .fk{margin-top:0}

/* ---- ana sayfa: kesfet bandi (hero'nun devami, koyu) -------------------- */
.kesfet{position:relative; background:#0a1220; padding:8px 0 96px; color:#fff}
.kesfet::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0) 0 0/22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 85%); mask:linear-gradient(180deg,#000,transparent 85%)}
.kesfet-ic{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.kf{position:relative; display:flex; flex-direction:column; gap:16px; padding:14px 14px 18px; border-radius:18px; color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);
  transition:transform .25s cubic-bezier(.3,1.3,.5,1),border-color .2s,box-shadow .25s,background .2s}
.kf:hover{transform:translateY(-4px); border-color:rgba(147,197,253,.4); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  box-shadow:0 30px 50px -30px rgba(37,99,235,.9)}
.kf-gorsel{position:relative; height:132px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 90% at 50% 0,rgba(37,99,235,.35),rgba(37,99,235,0) 70%),#0d182e; border:1px solid rgba(255,255,255,.06)}
.kf-yazi{display:grid; gap:4px; padding:0 4px; padding-right:36px}
.kf-yazi .mono{color:#60a5fa}
.kf-yazi b{font:800 18px/1.2 var(--dis); letter-spacing:-.02em}
.kf-yazi small{font-size:13px; line-height:1.5; color:#a5b4cf}
.kf-git{position:absolute; right:16px; bottom:18px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); transition:background .2s,transform .2s}
.kf-git .svg{width:15px; height:15px; stroke:#fff}
.kf:hover .kf-git{background:#fff; transform:translateX(2px)}
.kf:hover .kf-git .svg{stroke:var(--baslik)}
/* 01: yatay -> dikey */
.kf-yatay{width:44%; aspect-ratio:16/9; border-radius:6px; background:#111 center/cover; box-shadow:0 10px 20px -10px #000; flex:none}
.kf-ok{margin:0 8px; color:#60a5fa}
.kf-ok .svg{width:16px; height:16px}
.kf-dikey{position:relative; width:74px; height:100px; flex:none}
.kf-dikey i{position:absolute; top:6px; left:50%; height:88px; aspect-ratio:9/16; border-radius:6px; background:#111 center/cover;
  box-shadow:0 10px 18px -8px #000,0 0 0 1.5px #0d182e; transform-origin:50% 100%; transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.kf-dikey i:nth-child(1){transform:translateX(-50%) rotate(-10deg) translateX(-14px)}
.kf-dikey i:nth-child(2){transform:translateX(-50%) rotate(10deg) translateX(14px)}
.kf-dikey i:nth-child(3){transform:translateX(-50%); z-index:1}
.kf:hover .kf-dikey i:nth-child(1){transform:translateX(-50%) rotate(-16deg) translateX(-22px)}
.kf:hover .kf-dikey i:nth-child(2){transform:translateX(-50%) rotate(16deg) translateX(22px)}
/* 02: arac ikonlari */
.kf-ikonlar{display:grid; grid-template-columns:repeat(3,38px); gap:8px}
.kf-ikonlar i{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(96,165,250,.12);
  box-shadow:inset 0 0 0 1px rgba(147,197,253,.22); transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.kf-ikonlar .svg{width:18px; height:18px; stroke:#93c5fd}
.kf:hover .kf-ikonlar i:nth-child(odd){transform:translateY(-3px)}
.kf:hover .kf-ikonlar i:nth-child(even){transform:translateY(3px)}
.kf-arac em{position:absolute; right:10px; top:8px; font:800 13px var(--hero); font-style:normal; color:#60a5fa}
/* 03: fiyat */
.kf-fiyat .kf-gorsel{flex-direction:column; gap:14px}
.kf-tl{display:flex; align-items:baseline; gap:8px}
.kf-tl b{font:800 44px/1 var(--hero); letter-spacing:-.04em; background:linear-gradient(90deg,#fff,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent}
.kf-tl small{font-size:13px; color:#a5b4cf}
.kf-bar{width:62%; height:6px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden}
.kf-bar i{display:block; width:34%; height:100%; border-radius:6px; background:linear-gradient(90deg,#2563eb,#67e8f9); transition:width .6s cubic-bezier(.3,1,.4,1)}
.kf:hover .kf-bar i{width:78%}
/* 04: soru balonlari */
.kf-sss .kf-gorsel{flex-direction:column; align-items:stretch; justify-content:center; gap:8px; padding:0 16px}
.kf-balon{align-self:flex-start; max-width:85%; padding:8px 12px; border-radius:12px 12px 12px 4px; font:500 12.5px/1.3 var(--ui);
  color:#e2e8f0; background:rgba(255,255,255,.1)}
.kf-balon.cvp{align-self:flex-end; border-radius:12px 12px 4px 12px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  opacity:.9; transform:translateY(4px); transition:opacity .3s,transform .3s}
.kf:hover .kf-balon.cvp{opacity:1; transform:none}

@media (max-width:1040px){
  .kesfet-ic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shero-ic{grid-template-columns:1fr; gap:28px; align-items:start}
  .smetrik{grid-template-columns:repeat(3,minmax(0,1fr))}
  .smetrik>div{flex-direction:column; gap:6px}
  .sss-duzen{grid-template-columns:1fr; gap:24px}
  .sss-yan{position:static}
  .sss-yan nav{display:flex; flex-wrap:wrap; gap:6px; margin:0}
  .sss-yan nav a{border:1px solid var(--cizgi); border-radius:999px; padding:7px 12px; gap:8px}
  .sss-yaz{display:none}
}
@media (max-width:640px){
  .kesfet-ic{grid-template-columns:1fr}
  .kf{flex-direction:row; align-items:center; gap:14px; padding:10px}
  .kf-gorsel{width:108px; height:92px; flex:none}
  .kf-yatay,.kf-ok{display:none}
  .kf-ikonlar{grid-template-columns:repeat(3,24px); gap:5px}
  .kf-ikonlar i{width:24px; height:24px; border-radius:7px}
  .kf-ikonlar .svg{width:13px; height:13px}
  .kf-tl b{font-size:30px}
  .kf-sss .kf-gorsel{padding:0 8px}
  .kf-balon{font-size:10.5px; padding:5px 8px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .kf-arac em,.kf-tl small{display:none}
  .kf-git{bottom:auto; top:50%; margin-top:-15px}
  .shero{padding:108px 0 44px}
  .smetrik b{font-size:22px}
  .smetrik>div{padding:12px}
  .sss-ana .soru{grid-template-columns:32px minmax(0,1fr)}
  .sss-ana .soru p{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.shero .isik{animation:none}.kf,.kf *{transition:none!important}}

/* ---- araclar sayfasi ------------------------------------------------------ */
[data-ara][hidden],[data-grup][hidden],.bolum[hidden]{display:none!important}
.sara-alt{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; padding-left:18px; font-size:13px; color:#a5b4cf}
.sara-alt b{font:800 15px var(--hero); color:#fff; margin-right:3px}
/* panelle ayni renkli arac karosu */
.aik{--h:var(--hr,#2563eb); width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,var(--h) 16%,#fff),color-mix(in srgb,var(--h) 5%,#fff));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h) 24%,transparent),0 6px 14px -8px color-mix(in srgb,var(--h) 55%,transparent)}
.aik svg{width:27px; height:27px; fill:none; stroke:var(--h); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.aik svg *{transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.aik .f{fill:color-mix(in srgb,var(--h) 20%,transparent)}
.aik .s{fill:var(--h); stroke:none}
.aik .t{font:800 8.6px/1 var(--hero); fill:var(--h); stroke:none}
.aik .t.w{fill:#fff}
.aik .kesikli{stroke-dasharray:2.2 2.6}
.aik .kesikli.ince{stroke-width:1.3; stroke-dasharray:1.4 2.2; opacity:.7}
.aik .kayit{fill:#ef4444; stroke:none}
.aik .alan{fill:rgba(239,68,68,.12); stroke:#ef4444; stroke-width:1.3; stroke-dasharray:1.6 1.8}
.aik .ia-bicak1{transform-origin:50% 41%}
.aik .ia-bicak2{transform-origin:50% 59%}
:is(.akart3,.avitrin):hover .ia-vurgu{transform:translateX(-8.6px)}
:is(.akart3,.avitrin):hover .ia-satir{stroke-dasharray:12; animation:aikYaz 1.1s ease-out}
:is(.akart3,.avitrin):hover .ia-kabarcik{transform:translate(-1px,-2px) rotate(-4deg)}
:is(.akart3,.avitrin):hover .ia-kadraj{animation:aikKadraj 1.4s ease-in-out infinite alternate}
:is(.akart3,.avitrin):hover .ia-bicak1{transform:rotate(-9deg)}
:is(.akart3,.avitrin):hover .ia-bicak2{transform:rotate(9deg)}
:is(.akart3,.avitrin):hover .ia-p1{transform:translateX(-2px)}
:is(.akart3,.avitrin):hover .ia-p3{transform:translateX(2px)}
:is(.akart3,.avitrin):hover .ia-ust{transform:translate(1.5px,-1.5px)}
:is(.akart3,.avitrin):hover .ia-sag{transform:translateX(-4px)}
:is(.akart3,.avitrin):hover .ia-sol{transform:translateX(1.5px)}
:is(.akart3,.avitrin):hover .ia-bosluk{opacity:0; transform:scaleX(.2)}
:is(.akart3,.avitrin):hover .ia-ok{animation:aikOk .9s ease-in-out infinite}
:is(.akart3,.avitrin):hover .ia-parilti{transform:rotate(45deg) scale(1.3)}
:is(.akart3,.avitrin):hover .ia-kayit{animation:aikKayit 1s ease-in-out infinite}
@keyframes aikYaz{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
@keyframes aikKadraj{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes aikOk{50%{transform:translateY(2.5px)}}
@keyframes aikKayit{50%{opacity:.25}}

.agrup3+.agrup3{margin-top:44px}
.agrup3>h3{display:flex; align-items:center; gap:10px; margin-bottom:16px; font:700 13px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--soluk)}
.agrup3>h3 i{font-style:normal; padding:2px 8px; border-radius:999px; background:var(--mat); font:600 11px/1.4 var(--ui); letter-spacing:0; color:var(--metin)}
.agrid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.akart3{position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; border:1px solid var(--cizgi); border-radius:16px; background:#fff;
  transition:border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.3,1.3,.5,1)}
.akart3::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(120% 80% at 0 0,color-mix(in srgb,var(--hr) 9%,transparent),transparent 60%)}
.akart3:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--hr) 45%,var(--cizgi));
  box-shadow:0 22px 40px -26px color-mix(in srgb,var(--hr) 80%,transparent)}
.akart3:hover::before{opacity:1}
.akart3>*{position:relative}
.akart3 .aik{margin-bottom:4px}
.akart3 b{font:700 16.5px/1.3 var(--dis); letter-spacing:-.015em; color:var(--baslik)}
.akart3 p{flex:1; font-size:13.5px; line-height:1.6; color:var(--soluk)}
.akart3 .git{display:inline-flex; align-items:center; gap:6px; font:600 13px var(--ui); color:color-mix(in srgb,var(--hr) 85%,#0f172a)}
.akart3 .git .svg{width:14px; height:14px; transition:transform .2s}
.akart3:hover .git .svg{transform:translateX(3px)}
/* klip uretici vitrini */
.avitrin{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center;
  padding:30px 32px; margin-bottom:14px; border-radius:20px; color:#fff; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 60px -38px rgba(15,23,42,.8); transition:transform .25s cubic-bezier(.3,1.3,.5,1),box-shadow .25s;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0) 0 0/22px 22px,
    radial-gradient(60% 120% at 0 0,rgba(37,99,235,.45),rgba(37,99,235,0) 65%),linear-gradient(165deg,#0f1d3d,#0b162b 50%,#0a1220)}
.avitrin:hover{transform:translateY(-3px); box-shadow:0 36px 70px -36px rgba(37,99,235,.7)}
.av-yazi{display:grid; justify-items:start; gap:10px}
.av-yazi .mono{color:#93c5fd}
.av-yazi .aik{background:linear-gradient(150deg,#1e3a8a,#172554); box-shadow:inset 0 0 0 1px rgba(147,197,253,.35)}
.av-yazi .aik{--h:#93c5fd}
.av-yazi b{font:800 26px/1.15 var(--hero); letter-spacing:-.03em}
.av-yazi p{max-width:44ch; font-size:14.5px; line-height:1.6; color:#b8bfdc}
.av-yazi .dug{margin-top:8px}
.av-gorsel{display:flex; align-items:center; justify-content:center; gap:4px; min-height:180px}
.av-yatay{width:46%; aspect-ratio:16/9; border-radius:8px; background:#111 center/cover; box-shadow:0 16px 30px -14px #000; flex:none}
.av-ok{margin:0 10px; color:#60a5fa}
.av-ok .svg{width:18px; height:18px}
.av-dikey{position:relative; width:130px; height:180px; flex:none}
.av-dikey i{position:absolute; top:4px; left:50%; height:168px; aspect-ratio:9/16; border-radius:10px; background:#111 center/cover;
  box-shadow:0 16px 28px -12px #000,0 0 0 2px #0b162b; transform-origin:50% 100%; transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.av-dikey i:nth-child(1){transform:translateX(-50%) rotate(-10deg) translateX(-26px)}
.av-dikey i:nth-child(2){transform:translateX(-50%) rotate(10deg) translateX(26px)}
.av-dikey i:nth-child(3){transform:translateX(-50%); z-index:1}
.avitrin:hover .av-dikey i:nth-child(1){transform:translateX(-50%) rotate(-15deg) translateX(-38px)}
.avitrin:hover .av-dikey i:nth-child(2){transform:translateX(-50%) rotate(15deg) translateX(38px)}
/* varyant aileleri */
.vaile3{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.vkutu3{padding:20px 22px; border:1px solid var(--cizgi); border-radius:16px; background:#fff}
.vkutu3.genis{grid-column:1/-1}
.vkutu3 h3{display:flex; align-items:center; gap:10px; font-size:16px}
.vkutu3 h3 span{padding:2px 8px; border-radius:999px; background:var(--mat); font:600 11px/1.4 var(--ui); color:var(--metin)}
.vkutu3 p{margin-top:6px; font-size:13px; color:var(--soluk)}
.vkutu3 .cipler{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.vkutu3 .cipler a{padding:6px 11px; border-radius:999px; border:1px solid var(--cizgi); background:var(--zemin); font:500 12.5px/1.3 var(--ui);
  color:var(--metin); transition:border-color .15s,color .15s,background .15s}
.vkutu3 .cipler a:hover{border-color:var(--kobalt); color:var(--kobalt); background:#f5f8ff}
.arac-yok{margin:32px 0 64px}
@media (max-width:1040px){ .agrid3{grid-template-columns:repeat(2,minmax(0,1fr))} .avitrin{grid-template-columns:1fr; gap:22px} .av-gorsel{min-height:0; justify-content:flex-start} .av-yatay{width:min(46%,280px)} .agrid3 .akart3:last-child:nth-child(odd){grid-column:1/-1} }
@media (max-width:640px){
  .agrid3,.vaile3{grid-template-columns:1fr}
  .avitrin{padding:22px 18px}
  .av-yatay,.av-ok{display:none}
  .av-gorsel{justify-content:center}
  .akart3{flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:14px 16px}
  .akart3 .aik{margin:0; width:40px; height:40px}
  .akart3 b{flex:1}
  .akart3 p{flex-basis:100%; font-size:13px}
  .akart3 .git{display:none}
}
@media (prefers-reduced-motion:reduce){.aik svg *,.akart3,.avitrin,.av-dikey i{transition:none!important; animation:none!important}}

/* araclar acilir menusu: basligin ortasina hizalanir; dar masaustunde sag kenardan tasip yatay kaydirma yaratmasin */
@media (min-width:861px){
  .ust .kap{position:relative}
  .ust .madde{position:static}
  .ust .acilir{left:50%; margin-left:calc(min(840px, 100vw - 48px) / -2)}
}

/* ---- yasal sayfalar: yapiskan icindekiler + okuma duzeni ------------------ */
.yduzen{display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; align-items:start}
.yicindek{position:sticky; top:92px; display:grid; gap:18px}
.yicindek nav{display:grid; gap:2px; margin-top:-6px}
.yicindek nav a{display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:9px; font:500 13.5px/1.35 var(--ui); color:var(--metin);
  transition:background .15s,color .15s}
.yicindek nav a i{font:600 11px var(--mono); font-style:normal; color:var(--cizgi3)}
.yicindek nav a:hover{background:var(--mat); color:var(--baslik)}
.yicindek nav a.on{background:#eff6ff; color:var(--kobalt)}
.yicindek nav a.on i{color:var(--kobalt)}
.yasal{max-width:720px}
.yasal>p:first-child{font-size:17px; line-height:1.7; color:var(--baslik)}
.yasal h2{font-size:21px; font-weight:800; letter-spacing:-.02em; margin:44px 0 12px; scroll-margin-top:92px; display:flex; align-items:center; gap:10px}
.yasal h2::before{content:""; width:4px; height:20px; border-radius:4px; background:linear-gradient(#2563eb,#67e8f9); flex:none}
.yasal h2:first-child{margin-top:0}
.yasal p,.yasal li{font-size:15.5px; line-height:1.75; color:var(--metin); margin:0 0 12px}
.yasal ul{padding-left:22px; margin:0 0 12px}
.yasal li::marker{color:var(--kobalt)}
.yasal b{color:var(--baslik); font-weight:600}
.yasal a{color:var(--kobalt); text-decoration:underline; text-underline-offset:2px}
.yasal code{padding:2px 6px; border-radius:5px; background:var(--mat); border:1px solid var(--cizgi); font:400 13px var(--mono)}
.yasal table{width:100%; border-collapse:separate; border-spacing:0; margin:8px 0 20px; border:1px solid var(--cizgi); border-radius:10px; overflow:hidden; font-size:14px}
.yasal th,.yasal td{padding:10px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--mat)}
.yasal thead th{border-top:0; background:var(--zemin); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--soluk)}
.yasal .box{padding:16px 18px; border:1px solid var(--cizgi); border-radius:12px; background:var(--zemin); margin:22px 0}
.yasal .ok{padding:12px 14px; border-radius:10px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; font-weight:600}
.yasal .err{padding:12px 14px; border-radius:10px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-weight:600}
.yasal footer{margin-top:48px; padding-top:18px; border-top:1px solid var(--cizgi); font-size:13px; color:var(--soluk)}
@media (max-width:1040px){
  .yduzen{grid-template-columns:1fr; gap:28px}
  .yicindek{position:static}
  .yicindek nav{display:flex; flex-wrap:wrap; gap:6px; margin:0}
  .yicindek nav a{border:1px solid var(--cizgi); border-radius:999px; padding:6px 12px}
  .yicindek nav a i{display:none}
  .yicindek .sss-yaz{display:none}
}

/* ---- 404: ortasi kesilmis zaman cizelgesi ------------------------------ */
.y404{padding:18px 18px 16px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px);
  font:500 11.5px var(--mono,ui-monospace,monospace); color:#7f8aa3}
.y404-ust,.y404-alt{display:flex; justify-content:space-between; align-items:center}
.y404-ust span:last-child{color:#fca5a5}
.y404-dalga{position:relative; height:120px; margin:14px 0 12px; display:flex; align-items:center; gap:3px}
.y404-dalga i{flex:1; border-radius:3px; background:linear-gradient(180deg,#93c5fd,#2563eb); opacity:.85}
.y404-dalga i.k{opacity:.12}
.y404-bosluk{position:absolute; top:-6px; bottom:-6px; display:grid; place-items:center; border-left:2px solid #f43f5e; border-right:2px solid #f43f5e;
  background:repeating-linear-gradient(135deg,rgba(244,63,94,.1) 0 6px,transparent 6px 12px)}
.y404-bosluk::before,.y404-bosluk::after{content:""; position:absolute; top:-5px; width:10px; height:10px; border-radius:50%; background:#f43f5e;
  box-shadow:0 0 0 3px rgba(244,63,94,.25)}
.y404-bosluk::before{left:-6px} .y404-bosluk::after{right:-6px}
.y404-bosluk b{font:800 26px/1 var(--hero); letter-spacing:-.03em; color:#fff; text-shadow:0 6px 20px rgba(244,63,94,.6)}
.y404-alt em{font-style:normal; color:#fca5a5}
.y404-yol{padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.08); font:500 14px var(--mono,ui-monospace,monospace); color:#e2e8f0; word-break:break-all}
.y404-oneri{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:44px; padding:18px 22px; border-radius:16px;
  border:1px solid #bfdbfe; background:linear-gradient(100deg,#eff6ff,#fff 70%); color:var(--baslik); transition:box-shadow .2s,transform .2s}
.y404-oneri:hover{transform:translateY(-2px); box-shadow:0 18px 36px -24px rgba(37,99,235,.7)}
.y404-oneri .mono{color:var(--kobalt); flex-basis:100%}
.y404-oneri b{font:800 20px var(--dis); letter-spacing:-.02em}
.y404-oneri code{font:500 13px var(--mono,ui-monospace,monospace); color:var(--soluk)}
.y404-oneri .svg{margin-left:auto; width:18px; height:18px; color:var(--kobalt)}
.y404-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){ .y404-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .y404-grid{grid-template-columns:1fr} .y404-dalga{height:84px} }