@font-face{font-family:'Archivo';src:url(/assets/font/archivo.woff2) format('woff2-variations'),url(/assets/font/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--gece:#0b0f1e;--gece2:#131b38;--yazi:#eef0f7;--soluk:#8d96b5;--sonuk:#5d6685;--mavi:#4b66ff;--mavi-acik:#6d84ff;--ciz:#a9b8ff;--ust:env(safe-area-inset-top,0px);--alt:env(safe-area-inset-bottom,0px);--sol:env(safe-area-inset-left,0px);--sag:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--gece);color:var(--yazi);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html,body{height:100%;overflow:hidden}
body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y;padding-left:var(--sol);padding-right:var(--sag)}
a{color:inherit}
img{display:block;max-width:100%;-webkit-user-drag:none;pointer-events:none}
:focus-visible{outline:2px solid var(--mavi-acik);outline-offset:3px;border-radius:4px}

/* üst bar */
.ust{flex:none;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--ust)) 20px 10px}
.ust-logo{width:50px;height:auto}
.soru{flex:none;padding:0 20px 10px;font-size:15px;line-height:1.4;color:var(--soluk);text-align:center}

/* seçim */
main{flex:1;min-height:0;display:flex;flex-direction:column}
.secim{flex:1;min-height:0;display:grid;grid-template-rows:1fr 1fr}
.yol{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:12px 20px;min-height:0;text-decoration:none;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.yol.marka{background:var(--gece)}
.yol.fenomen{background:var(--gece2)}
.yol p{max-width:40ch;font-size:14px;line-height:1.5;color:var(--soluk)}
.yol p b{display:block;margin-bottom:4px;font-size:15px;font-weight:600;color:var(--yazi)}
.dugme{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:200px;margin-top:4px;padding:0 26px;border-radius:10px;background:var(--mavi);color:#fff;font-size:15px;font-weight:560;letter-spacing:.01em;transition:transform .15s ease,background-color .2s ease,color .2s ease}
.fenomen .dugme{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.yol:active .dugme{transform:scale(.97)}

/* marka: beyaz logo şeridi (adım adım, yarım logo yok) */
.logolar{--yuva:116px;--adet:3;align-self:center;width:calc(var(--yuva) * var(--adet));overflow:hidden;margin:0 0 4px;padding:6px 0}
.logolar ul{display:flex;width:max-content;list-style:none;animation:logo-akis var(--sure,12.6s) infinite}
.logolar li{flex:none;width:var(--yuva);display:flex;align-items:center;justify-content:center}
.logolar img{height:26px;width:auto;max-width:calc(var(--yuva) - 26px);object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.logolar img.kare{height:40px}

/* fenomen: story halkaları */
.storyler{align-self:stretch;margin:0 -20px 4px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.storyler ul{display:flex;gap:12px;width:max-content;list-style:none;padding:4px 0;animation:akis 46s linear infinite}
.storyler li{flex:none;width:54px;height:54px;padding:2.5px;border-radius:50%;background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.storyler img{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--gece2);object-fit:cover}
@keyframes akis{to{transform:translateX(-50%)}}

.tanitim{flex:none;padding:10px 20px 2px;max-width:62ch;margin:0 auto;text-align:center;font-size:12.5px;line-height:1.45;color:var(--soluk)}
footer{flex:none;text-align:center;padding:2px 20px calc(10px + var(--alt));font-size:11.5px;color:var(--sonuk)}

/* tablet dik */
@media (min-width:600px) and (max-width:899px){.dugme{max-width:440px}.yol{padding-left:40px;padding-right:40px}.storyler{margin-left:-40px;margin-right:-40px}.ust,.soru,.tanitim,footer{padding-left:40px;padding-right:40px}}

/* kısa ekranlar: içerik tek ekrana sığsın */
@media (max-height:780px){.yol p .ek{display:none}}
@media (max-height:640px){.storyler li{width:48px;height:48px}.yol{gap:8px}.dugme{min-height:40px}}
@media (max-height:560px){.tanitim,.soru{display:none}}

/* masaüstü */
@media (min-width:900px){
  .ust{padding:calc(18px + var(--ust)) 48px 8px}.ust-logo{width:66px}
  .soru{padding:0 48px 16px;font-size:17px}
  .secim{grid-template-rows:none;grid-template-columns:1fr 1fr;min-height:0;transition:grid-template-columns .7s cubic-bezier(.2,.7,.2,1)}
  .secim:has(.marka:hover){grid-template-columns:1.18fr .82fr}
  .secim:has(.fenomen:hover){grid-template-columns:.82fr 1.18fr}
  .yol{padding:24px 48px;gap:14px}
  .yol p{font-size:15.5px}
  .yol p b{font-size:17px}
  .dugme{min-width:220px;min-height:46px}
  .yol:hover .dugme{background:var(--mavi-acik)}
  .fenomen:hover .dugme{background:#fff;color:var(--gece)}
  .logolar{--yuva:150px;--adet:4;margin:0 0 10px}
  .logolar img{height:34px}
  .logolar img.kare{height:52px}
  .storyler{margin:0 -48px 10px}
  .storyler ul{gap:16px}
  .storyler li{width:72px;height:72px;padding:3px}
  .storyler img{border-width:3px}
  .tanitim{padding:14px 48px 2px;font-size:13.5px}footer{padding:4px 48px 16px;font-size:12px}
}

/* giriş ve geçiş */
#giris{display:none;position:fixed;inset:0;z-index:20;align-items:center;justify-content:center;background-color:var(--gece);transition:background-color .7s ease .1s}
html.giris-var #giris{display:flex}
#giris.cik{background-color:rgba(11,15,30,0);pointer-events:none}
#giris-logo{width:min(250px,58vw);height:auto;transform-origin:center;transition:transform .9s cubic-bezier(.75,0,.2,1)}
#giris-logo path{fill:#fff;fill-opacity:0;stroke:var(--ciz);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;animation:ciz 1.35s cubic-bezier(.6,0,.25,1) .15s forwards,dol .55s ease 1.25s forwards}
html.hizli #giris-logo path{animation:none;fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
@keyframes ciz{to{stroke-dashoffset:0}}
@keyframes dol{to{fill-opacity:1;stroke-opacity:0}}
.gec{position:absolute;right:16px;bottom:calc(18px + var(--alt));min-height:44px;padding:10px 16px;font:inherit;font-size:15px;color:var(--soluk);background:none;border:0;cursor:pointer}
html.hizli .gec{display:none}
#giris.cik .gec{opacity:0;transition:opacity .2s ease}
html.giris-var .ust-logo{visibility:hidden}
html.giris-var .soru,html.giris-var main,html.giris-var footer{opacity:0;transition:opacity .7s ease .3s}
html.acil .soru,html.acil main,html.acil footer{opacity:1}
html.hazir .ust-logo{visibility:visible}

#gecis{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--gece);opacity:0;pointer-events:none;transition:opacity .28s ease}
#gecis.acik{opacity:1;pointer-events:auto}
#gecis svg{width:min(250px,58vw);height:auto}
#gecis path{fill:#fff;fill-opacity:0;stroke:var(--ciz);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1}
#gecis.acik path{animation:ciz .62s cubic-bezier(.6,0,.25,1) .12s forwards,dol .3s ease .58s forwards}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---- form sayfaları ---- */
input,select,textarea{-webkit-user-select:text;user-select:text;font:inherit}
footer a{color:inherit;text-underline-offset:3px}
.form-sayfa{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto;padding:0 20px}
.form-ust{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:32px;font-size:14px;color:var(--soluk)}
.geri-ana{text-decoration:none;color:var(--soluk);padding:6px 0}
.adim-say{font-variant-numeric:tabular-nums}
.ilerleme{flex:none;height:2px;margin:6px 0 14px;background:#1f2849;border-radius:2px;overflow:hidden}
.ilerleme i{display:block;height:100%;width:0;background:var(--mavi);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.form-govde{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.form-govde h1{font-size:24px;line-height:1.15;font-weight:650;font-stretch:88%;margin-bottom:6px}
.form-alt-metin{font-size:14.5px;line-height:1.5;color:var(--soluk);margin-bottom:16px}
.adim{border:0;display:flex;flex-direction:column;gap:12px}
.adim[hidden],.tamam[hidden],.form-dugmeler[hidden],[hidden]{display:none!important}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.alan{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soluk)}
.alan em{font-style:normal;color:var(--sonuk)}
.alan input,.alan select,.alan textarea{width:100%;min-height:46px;padding:11px 14px;font-size:16px;color:var(--yazi);background:var(--gece2);border:1px solid #27305a;border-radius:10px;outline:none;transition:border-color .2s ease;-webkit-appearance:none;appearance:none}
.alan textarea{resize:none;line-height:1.4}
.alan select{background-image:linear-gradient(45deg,transparent 50%,var(--soluk) 50%),linear-gradient(135deg,var(--soluk) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.alan input::placeholder,.alan textarea::placeholder{color:#4d5678}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--mavi-acik)}
.yanlis{border-color:#e5566d!important}
.onay{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--soluk)}
.onay input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--mavi)}
.onay input.yanlis{outline:2px solid #e5566d;outline-offset:1px}
.onay a{color:var(--yazi);text-underline-offset:3px}
.bal{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hata{min-height:18px;margin-top:10px;font-size:13px;color:#ff8a9b}
.form-dugmeler{flex:none;display:flex;gap:10px;justify-content:center;padding:10px 0 calc(14px + var(--alt))}
.form-dugmeler .dugme{flex:1;max-width:280px;border:0;cursor:pointer;font-family:inherit}
.form-dugmeler .dugme:disabled{opacity:.6}
.ikincil{flex:none;min-height:44px;margin-top:4px;padding:0 20px;border-radius:10px;border:0;background:transparent;color:var(--yazi);font:inherit;font-size:15px;box-shadow:inset 0 0 0 1px #3a4470;cursor:pointer}
.tamam{text-align:center;padding-top:8vh}
.tamam .dugme{margin-top:18px}
.tamam-isaret{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--mavi-acik);position:relative}
.tamam-isaret::after{content:"";position:absolute;left:19px;top:13px;width:12px;height:22px;border:solid var(--mavi-acik);border-width:0 2px 2px 0;transform:rotate(45deg)}
.metin{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 2px calc(20px + var(--alt));-webkit-user-select:none;user-select:none}
.metin h1{font-size:21px;line-height:1.25;font-weight:650;margin-bottom:14px}
.metin h2{font-size:15px;font-weight:620;margin:18px 0 6px;color:var(--yazi)}
.metin p{font-size:14px;line-height:1.6;color:var(--soluk)}
.metin .surum{margin-top:20px;font-size:12.5px;color:var(--sonuk)}
@media (max-height:640px){.form-govde h1{font-size:20px}.form-alt-metin{margin-bottom:10px}.adim{gap:9px}.alan input,.alan select{min-height:42px;padding:9px 12px}}
@media (min-width:900px){.form-sayfa{padding:0}.form-govde h1{font-size:30px}}

/* KVKK penceresi */
#kvkk-pencere{width:min(560px,calc(100% - 24px));max-height:min(82dvh,760px);margin:auto;padding:0;border:1px solid #27305a;border-radius:16px;background:var(--gece);color:var(--yazi);overflow:hidden}
#kvkk-pencere[open]{display:flex;flex-direction:column}
#kvkk-pencere::backdrop{background:rgba(5,8,18,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pencere-ust{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 18px;border-bottom:1px solid #1f2849;font-size:14px;font-weight:600}
.pencere-kapat{min-height:40px;padding:0 12px;background:none;border:0;color:var(--mavi-acik);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
#kvkk-pencere .metin{padding:6px 18px 18px}
#kvkk-pencere .metin h1{display:none}

.yol .kapla{position:absolute;inset:0;z-index:1;border-radius:inherit}.yol .kapla:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.reels-lnk{position:relative;z-index:2;margin-top:-4px;padding:4px 12px;font-size:13px;font-weight:500;color:var(--soluk);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;transition:color .2s ease}.reels-lnk:hover{color:#fff}
@media (max-height:640px){.reels-lnk{padding:2px 10px;font-size:12px}}

.asama{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;counter-reset:a}.asama li{position:relative;padding:8px 8px 8px 30px;border-radius:9px;background:rgba(255,255,255,.05);font-size:11.5px;line-height:1.35;color:var(--soluk);counter-increment:a}.asama li::before{content:counter(a);position:absolute;left:9px;top:8px;width:15px;height:15px;border-radius:50%;background:var(--mavi);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.asama b{display:block;font-size:12px;font-weight:600;color:var(--yazi);margin-bottom:2px}.form-sayfa:has(.geri-adim:not([hidden])) .asama{display:none}
@media (max-width:420px){.asama{grid-template-columns:1fr;gap:6px}.asama li{padding:6px 8px 6px 30px}.asama li span{display:none}}
