/* otonubul · kabuk: ana tasarımla aynı üst çubuk ve alt bilgi + yeni sayfaların ortak görsel dili.
   Renkler ana tasarımdan: lacivert #001A43/#06265E, mavi #025BFE/#3D7BFF, mor #7C4DFF, yeşil #5BE3A5. */
:root{--lac:#001A43;--lac2:#06265E;--mavi:#025BFE;--mavi2:#3D7BFF;--mor:#7C4DFF;--yesil:#12A06E;--yesil2:#5BE3A5;--turuncu:#FF9500;--kirmizi:#E5484D;--zemin:#EEF2F8;--metin:#0B1A36;--soluk:#5E6677;--cizgi:#E3E8F0;--kart:#fff}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;background:var(--zemin);color:var(--metin);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.025em;line-height:1.15;margin:0;color:inherit}
a{color:var(--mavi)}
img{max-width:100%}
[hidden]{display:none!important}
.ok-sayfa{min-height:100vh;display:flex;flex-direction:column}
.ok-sayfa>main{flex:1}

/* ---------- animasyonlar (ana tasarımdakilerle aynı adlar) ---------- */
@keyframes ot-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ot-fade{from{opacity:0}to{opacity:1}}
@keyframes ot-pulse{0%{box-shadow:0 0 0 0 rgba(2,91,254,.5)}100%{box-shadow:0 0 0 14px rgba(2,91,254,0)}}
@keyframes ot-pulse-y{0%{box-shadow:0 0 0 0 rgba(52,199,89,.6)}100%{box-shadow:0 0 0 9px rgba(52,199,89,0)}}
@keyframes ot-sweep{from{transform:translateX(-120%)}to{transform:translateX(520%)}}
@keyframes ot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ot-spin{to{transform:rotate(360deg)}}
@keyframes ot-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ot-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ot-dash{to{stroke-dashoffset:-240}}
@keyframes ot-draw{to{stroke-dashoffset:0}}
@keyframes ok-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.ok-belir{animation:ot-rise .9s cubic-bezier(.22,1,.36,1) both}
.ok-belir.g1{animation-delay:.08s}.ok-belir.g2{animation-delay:.16s}.ok-belir.g3{animation-delay:.24s}.ok-belir.g4{animation-delay:.32s}
.ok-gorun{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.ok-gorun.goster{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ok-gorun{opacity:1;transform:none}}

/* ---------- üst çubuk (ana tasarımın birebir karşılığı) ---------- */
.ok-ust{position:relative;z-index:30;margin:18px 24px 0;height:66px;padding:0 12px 0 18px;border-radius:22px;background:linear-gradient(#001A43,#06265E) padding-box,linear-gradient(100deg,rgba(124,176,255,.7),rgba(124,77,255,.35) 35%,rgba(255,255,255,.06) 60%,rgba(91,227,165,.55)) border-box;border:1px solid transparent;box-shadow:0 24px 50px -30px rgba(0,26,67,.9);display:flex;align-items:center;gap:10px;overflow:hidden;animation:ot-fade .6s ease both}
.ok-ust .ok-izgara{pointer-events:none;position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 30%,transparent 70%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,transparent 30%,transparent 70%,#000 100%)}
.ok-ust .ok-supur{pointer-events:none;position:absolute;left:0;bottom:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,#7CE0FF,transparent);animation:ot-sweep 5s linear infinite}
.ok-logo{position:relative;display:flex;align-items:center;text-decoration:none}
.ok-logo img{height:40px;width:auto;display:block}
.ok-canli{position:relative;align-self:center;margin:-9px 0 0 -2px;display:flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:99px;background:rgba(91,227,165,.12);box-shadow:inset 0 0 0 1px rgba(91,227,165,.28);font-size:9px;font-weight:800;letter-spacing:.1em;line-height:1;color:#5BE3A5}
.ok-canli i{width:5px;height:5px;border-radius:99px;background:#34C759;box-shadow:0 0 10px #34C759;animation:ot-pulse 1.8s ease-out infinite}
.ok-bosluk{flex-grow:1}
.ok-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:4px;padding:5px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ok-nav a{position:relative;height:38px;padding:0 16px 0 13px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none;transition:background .25s,color .25s;color:rgba(255,255,255,.72);white-space:nowrap}
.ok-nav a svg{stroke:rgba(255,255,255,.6);flex-shrink:0}
.ok-nav a:not([aria-current]):hover{background:rgba(255,255,255,.1);color:#fff}
.ok-nav a[aria-current]{background:linear-gradient(135deg,#025BFE 0%,#3D7BFF 100%);color:#fff;box-shadow:0 8px 22px -8px rgba(61,123,255,.95),inset 0 1px 0 rgba(255,255,255,.25)}
.ok-nav a[aria-current] svg{stroke:#fff}
.ok-ikon,.ok-giris{position:relative;height:42px;border-radius:13px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;flex-shrink:0}
.ok-ikon{width:42px}
.ok-giris{gap:8px;padding:0 14px;font-size:14px;font-weight:700}
.ok-ikon:hover,.ok-giris:hover{background:rgba(255,255,255,.14);color:#fff}
.ok-cta{position:relative;overflow:hidden;height:42px;padding:0 18px;border-radius:13px;background:linear-gradient(135deg,#3D7BFF 0%,#025BFE 55%,#7C4DFF 100%);box-shadow:0 10px 26px -10px rgba(61,123,255,1),inset 0 1px 0 rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;text-decoration:none;flex-shrink:0}
.ok-cta:hover{color:#fff;filter:brightness(1.06)}
.ok-cta>span{pointer-events:none;position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:ot-sweep 3.2s ease-in-out infinite}
@media (max-width:1500px) and (min-width:1101px){.ok-cta{display:none}}
@media (max-width:1260px) and (min-width:1101px){.ok-canli{display:none}.ok-nav a{padding:0 11px 0 9px;gap:6px;font-size:13.5px}}
@media (max-width:1100px){
  .ok-ust{height:auto;flex-wrap:wrap;margin:10px 10px 0;padding:10px 12px;row-gap:10px;gap:8px}
  .ok-logo img{height:32px}
  .ok-nav{position:static;transform:none;order:20;width:100%;overflow-x:auto;justify-content:space-between}
  .ok-nav a{flex:0 0 auto;padding:0 10px;font-size:13px}
}
@media (max-width:760px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .ok-ust{flex-wrap:nowrap;height:58px;margin:8px 8px 0;padding:0 8px 0 14px;border-radius:18px;gap:6px;row-gap:0;overflow:visible}
  .ok-logo img{height:28px}
  .ok-canli,.ok-cta{display:none}
  .ok-giris{width:42px;min-width:42px;padding:0;font-size:0;gap:0}
  .ok-giris[data-oturum]{width:auto;padding:0 5px!important}
  .ok-giris[data-oturum]>span+span,.ok-giris[data-oturum] .ot-hs-ok{display:none}
  .ok-giris svg{width:18px;height:18px}
  .ok-nav{position:fixed;left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;transform:none;z-index:90;order:0;display:flex;gap:4px;padding:6px;border-radius:22px;background:rgba(0,26,67,.94);box-shadow:0 18px 40px -12px rgba(0,26,67,.55),inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:visible;justify-content:space-between}
  .ok-nav a{flex:1 1 0;height:56px;min-width:0;padding:0 2px;flex-direction:column;justify-content:center;gap:4px;font-size:11px;font-weight:700;border-radius:16px;letter-spacing:0}
  .ok-nav a svg{width:20px;height:20px}
}

/* ---------- alt bilgi ---------- */
.ok-alt{margin:40px 40px 40px;border-radius:28px;background:#001A43;color:#fff;padding:48px 48px 28px;display:flex;flex-direction:column;gap:40px;position:relative;overflow:hidden}
.ok-alt:before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(2,91,254,.35),transparent 65%);pointer-events:none}
.ok-alt-izgara{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;position:relative}
.ok-alt-izgara>div{display:flex;flex-direction:column;gap:12px}
.ok-alt-izgara img{height:52px;width:auto;align-self:flex-start}
.ok-alt-izgara p{margin:0;max-width:340px;font-size:14px;line-height:1.6;color:#B9C3D6}
.ok-alt-izgara b{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ok-alt-izgara a{font-size:14px;color:#B9C3D6;text-decoration:none}
.ok-alt-izgara a:hover{color:#fff}
.ok-alt-rozet{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ok-alt-rozet span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:12px;font-weight:700;color:#DCE4F2}
.ok-alt-rozet i{width:6px;height:6px;border-radius:50%;background:#5BE3A5}
.ok-alt-alt{padding-top:20px;border-top:1px solid #24365A;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#A3AEC4;position:relative}
.ok-alt-alt a,.ok-alt-alt button{color:#A3AEC4;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0}
.ok-alt-alt a:hover,.ok-alt-alt button:hover{color:#fff}
.ok-alt-alt .kurumsal{display:flex;flex-wrap:wrap;gap:6px 14px}
@media (max-width:1100px){.ok-alt-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ok-alt{margin:24px 10px 20px;padding:32px 22px 22px;border-radius:24px}.ok-alt-izgara{grid-template-columns:1fr 1fr;gap:28px 18px}.ok-alt-izgara>div:first-child{grid-column:1/-1}}

/* ---------- yerleşim ---------- */
.ok-kap{max-width:1392px;margin:0 auto;padding:0 24px}
.ok-bolum{margin-top:22px}
@media (max-width:760px){.ok-kap{padding:0 10px}}

/* ---------- koyu kahraman ---------- */
.ok-kahraman{position:relative;margin:18px 24px 0;border-radius:32px;overflow:hidden;color:#fff;background:radial-gradient(1000px 500px at 85% -10%,rgba(2,91,254,.55),transparent 60%),radial-gradient(700px 420px at 0% 120%,rgba(124,77,255,.35),transparent 60%),linear-gradient(160deg,#001A43,#06265E);padding:56px 56px 52px;isolation:isolate}
.ok-kahraman:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);z-index:-1}
.ok-kahraman:after{content:"";position:absolute;left:0;bottom:0;width:30%;height:1px;background:linear-gradient(90deg,transparent,#7CE0FF,transparent);animation:ot-sweep 6s linear infinite}
.ok-kahraman .ok-ic{max-width:1392px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.ok-kahraman.tek .ok-ic{grid-template-columns:1fr}
.ok-etiket{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#DCE6FF}
.ok-etiket i{width:7px;height:7px;border-radius:50%;background:#34C759;box-shadow:0 0 10px #34C759;animation:ot-pulse-y 1.8s ease-out infinite}
.ok-kahraman h1{font-size:64px;font-weight:800;letter-spacing:-.045em;line-height:1.02;margin:18px 0 16px}
.ok-parla{background:linear-gradient(100deg,#8FB6FF 0%,#7CE0FF 45%,#B7A2FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ok-kahraman p.ok-alt-yazi{font-size:18px;line-height:1.6;color:rgba(255,255,255,.78);max-width:620px;margin:0}
.ok-istat{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ok-istat>div{min-width:130px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ok-istat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ok-istat span{font-size:12.5px;color:rgba(255,255,255,.66);font-weight:600}
@media (max-width:1100px){.ok-kahraman .ok-ic{grid-template-columns:1fr}.ok-kahraman h1{font-size:50px}}
@media (max-width:760px){.ok-kahraman{margin:10px 10px 0;border-radius:26px;padding:30px 20px 28px}.ok-kahraman h1{font-size:38px}.ok-kahraman p.ok-alt-yazi{font-size:16px}.ok-istat>div{min-width:0;flex:1 1 40%}}

/* ---------- beyaz bölüm kartı (ana tasarımdaki büyük beyaz yüzeyler) ---------- */
.ok-yuzey{background:#fff;border-radius:32px;padding:44px 48px;box-shadow:0 30px 60px -48px rgba(0,26,67,.5)}
.ok-yuzey+.ok-yuzey{margin-top:22px}
.ok-ust-baslik{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.ok-ust-baslik h2{font-size:40px;font-weight:800;letter-spacing:-.04em}
.ok-ust-baslik p{margin:8px 0 0;color:var(--soluk);font-size:16px;max-width:640px}
.ok-ust-yazi{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mavi);margin-bottom:10px;display:block}
.ok-ust-yazi.mor{color:var(--mor)}.ok-ust-yazi.yesil{color:var(--yesil)}.ok-ust-yazi.turuncu{color:#D97A00}
@media (max-width:760px){.ok-yuzey{border-radius:26px;padding:26px 18px}.ok-ust-baslik h2{font-size:28px}}

/* ---------- küçük kart ve öğeler ---------- */
.ok-kart{background:#fff;border-radius:22px;padding:22px;border:1px solid var(--cizgi);box-shadow:0 18px 40px -34px rgba(0,26,67,.45);position:relative}
.ok-kart h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.ok-soluk{color:var(--soluk)}
.ok-ikon-kare{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:#EAF1FF;color:var(--mavi)}
.ok-ikon-kare svg{stroke:currentColor}
.ok-ikon-kare.yesil{background:#E4F7EE;color:#0B8A5C}.ok-ikon-kare.turuncu{background:#FFF1DE;color:#D97A00}.ok-ikon-kare.mor{background:#F0EBFF;color:#6A3FE8}.ok-ikon-kare.kirmizi{background:#FDECEC;color:#C8373C}.ok-ikon-kare.lac{background:#E7ECF6;color:#0B1A36}
.ok-hap{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:800;background:#EEF3FF;color:var(--mavi);white-space:nowrap}
.ok-hap.yesil{background:#E4F7EE;color:#0B7A52}.ok-hap.turuncu{background:#FFF1DE;color:#B35C00}.ok-hap.kirmizi{background:#FDECEC;color:#B42318}.ok-hap.mor{background:#F0EBFF;color:#5B34D6}.ok-hap.gri{background:#F1F4F9;color:#5E6677}
.ok-dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;border:0;background:var(--mavi);color:#fff;font:800 15px 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 14px 30px -14px rgba(2,91,254,.9);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,filter .3s,background .3s}
.ok-dugme:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.05)}
.ok-dugme:active{transform:none}
.ok-dugme.koyu{background:#001A43;box-shadow:0 14px 30px -16px rgba(0,26,67,.9)}
.ok-dugme.acik{background:#fff;color:#001A43;box-shadow:0 14px 30px -18px rgba(0,26,67,.6)}
.ok-dugme.cam{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.ok-dugme.ikincil{background:#EEF3FF;color:var(--mavi);box-shadow:none}
.ok-dugme.kucuk{height:38px;padding:0 14px;font-size:13.5px;border-radius:12px}
.ok-dugme[disabled]{opacity:.55;cursor:default;transform:none}
.ok-girdi{width:100%;height:48px;border:1px solid var(--cizgi);background:#F7F9FC;border-radius:14px;padding:0 14px;font:600 15px 'Plus Jakarta Sans',sans-serif;color:var(--metin);outline:0;transition:border-color .2s,background .2s,box-shadow .2s}
.ok-girdi:focus{border-color:var(--mavi);background:#fff;box-shadow:0 0 0 4px rgba(2,91,254,.12)}
select.ok-girdi{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6677' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.ok-alan{display:block}
.ok-alan>span{display:block;font-size:12.5px;font-weight:800;color:var(--metin);margin-bottom:7px;letter-spacing:.01em}
.ok-bos{text-align:center;padding:44px 20px;color:var(--soluk)}
.ok-bos b{display:block;color:var(--metin);font-size:18px;margin-bottom:6px}
.ok-iskelet{background:linear-gradient(90deg,#EEF2F8 0,#F7F9FC 40%,#EEF2F8 80%);background-size:800px 100%;animation:ok-shimmer 1.4s linear infinite;border-radius:12px}
.ok-not{font-size:12.5px;color:var(--soluk);line-height:1.6}
.ok-not a{color:var(--soluk)}
.ok-kaynak{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:#F5F8FD;border:1px dashed #C9D6EE;font-size:13px;color:#415069;line-height:1.6}
.ok-kaynak svg{flex:none;margin-top:2px}

/* ---------- alt gezinme (topluluk vb. sekme şeridi) ---------- */
.ok-sekmeler{display:flex;gap:6px;padding:6px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -34px rgba(0,26,67,.5);overflow-x:auto;scrollbar-width:none;margin:18px auto 0;max-width:max-content}
.ok-sekmeler::-webkit-scrollbar{display:none}
.ok-sekmeler a{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:13px;text-decoration:none;color:var(--soluk);font-weight:800;font-size:14px;white-space:nowrap;transition:background .2s,color .2s}
.ok-sekmeler a:hover{background:#F2F6FF;color:var(--metin)}
.ok-sekmeler a[aria-current]{background:#001A43;color:#fff}
.ok-sekmeler a svg{stroke:currentColor}

/* ---------- reklam yuvası ---------- */
.reklam{display:none;margin:22px auto;text-align:center;max-width:1392px}
.reklam.aktif{display:block}
.reklam .etiket{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#98A1B3;margin-bottom:6px;font-weight:700}

/* MOBIL-DUZEN-v6 (5 Ekim 2026): telefonda yatay tasma ve alt dugme yigini */
@media (max-width:900px){.sy-izgara{grid-template-columns:minmax(0,1fr)!important}.sy-izgara>*{min-width:0}.sy-icindekiler{max-width:100%;overflow-x:auto}}
@media (max-width:1100px){.ss-izgara{grid-template-columns:minmax(0,1fr)!important}.ss-izgara>*{min-width:0}.ss-yan *{max-width:100%}}
/* MOBIL-YIGIN-v7 */@media (max-width:900px){#ota-ipucu{bottom:calc(126px + env(safe-area-inset-bottom))!important}#mf-dugme{bottom:calc(178px + env(safe-area-inset-bottom))!important}#ot-teklif-btn{bottom:calc(178px + env(safe-area-inset-bottom))!important}}