/* Ana sayfa: hero altindaki ozellik alani. Solda 4 ozellik (otomatik ilerler), sagda telefonda o
   ozelligin canli sahnesi. Renkler hero'nun an renkleri (--r0 kehribar, --r1 pembe, --r2 camgobegi, --mor). */

.oz{position:relative; padding:28px 0 72px; background:#060818; color:#c9cee6; overflow:hidden}
.oz::before{content:""; position:absolute; left:50%; top:0; width:min(1100px,90%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.oz-izgara{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:56px; align-items:center}

/* ---- sol: baslik + liste ------------------------------------------------- */
.oz-ust{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#ffc857}
.oz-ust::before{content:""; width:18px; height:1px; background:currentColor; opacity:.6}
.oz h2{margin:14px 0 26px; max-width:15em; font:800 clamp(26px,3.1vw,40px)/1.12 var(--hero); letter-spacing:-.035em; color:#fff}
.oz h2 em{font-style:normal; background:linear-gradient(95deg,var(--r0),var(--r1) 50%,var(--r2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.oz-liste{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.oz-m{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 14px; width:100%; padding:14px 16px 14px 14px;
  border:0; border-radius:16px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background .25s}
.oz-m:hover{background:rgba(255,255,255,.035)}
.oz-m.on{background:linear-gradient(100deg,color-mix(in srgb,var(--c) 13%,transparent),rgba(255,255,255,.02) 70%)}
.oz-m:focus-visible{outline:2px solid color-mix(in srgb,var(--c) 70%,#fff); outline-offset:2px}
.oz-no{grid-row:1/3; align-self:start; margin-top:2px; display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  font:700 12px var(--mono); color:#8d95b8; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:.25s}
.oz-m.on .oz-no{color:#0a0c18; background:var(--c); box-shadow:0 8px 24px -8px var(--c)}
.oz-m b{font:750 17px/1.3 var(--hero); letter-spacing:-.015em; color:#9aa2c4; transition:color .25s}
.oz-m.on b{color:#fff}
.oz-m small{display:block; max-height:0; overflow:hidden; opacity:0; font:400 14.5px/1.55 var(--ui); color:#aab1cf;
  transition:max-height .45s ease,opacity .35s ease}
.oz-m.on small{max-height:90px; opacity:1}
.oz-ilerle{position:absolute; left:14px; right:16px; bottom:0; height:2px; border-radius:2px; background:rgba(255,255,255,.06); overflow:hidden; opacity:0}
.oz-m.on .oz-ilerle{opacity:1}
.oz-ilerle u{position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--c)}

/* ---- sag: sahne ve telefon ---------------------------------------------- */
.oz-sahne{position:relative; height:510px; display:grid; place-items:center; --c:var(--r0)}
.oz-sahne::before{content:""; position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(60px); opacity:.8;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 70%,transparent),transparent 65%); transition:background .6s}
.oz-tel{position:relative; width:270px; aspect-ratio:9/16; border-radius:36px; padding:7px; background:#0b0e1f;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 110px -40px rgba(0,0,0,.9),0 0 0 9px rgba(255,255,255,.025)}
.oz-ekran{position:relative; width:100%; height:100%; border-radius:29px; overflow:hidden; background:#000; isolation:isolate}
.oz-ekran::after{content:""; position:absolute; top:9px; left:50%; width:74px; height:20px; border-radius:20px; transform:translateX(-50%); background:#000; z-index:9}
.oz-s{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none}
.oz-s.on{opacity:1}
.oz-s video,.oz-s .oz-kare{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0b0e1f center/cover no-repeat}

/* sahne disi etiketler */
.oz-etiket{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:13px;
  font:650 13px/1 var(--ui); color:#fff; white-space:nowrap; background:rgba(14,17,36,.82); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -18px rgba(0,0,0,.8); opacity:0; transform:translateY(8px) scale(.97);
  transition:opacity .4s ease .25s,transform .4s ease .25s}
.oz-etiket i{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c)}
.oz-etiket.on{opacity:1; transform:none}
.oz-etiket.sol{right:calc(50% + 92px); top:150px}
.oz-etiket.sag{left:calc(50% + 92px); bottom:96px}

/* 0 · en iyi an: puan + dalga */
.oz-karart{position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,24,.15) 30%,rgba(6,8,24,.9))}
.oz-puan{position:absolute; left:16px; top:42px; z-index:2}
.oz-puan span{display:block; font:600 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.oz-puan b{font:800 54px/1 var(--hero); letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 6px 30px color-mix(in srgb,var(--r0) 60%,transparent)}
.oz-puan b small{font-size:20px; color:rgba(255,255,255,.55); margin-left:2px}
.oz-ray{position:absolute; left:12px; right:12px; bottom:16px; height:62px; z-index:2; display:flex; align-items:center; gap:2px}
.oz-ray i{flex:1; height:var(--h); border-radius:2px; background:rgba(255,255,255,.28); transition:background .3s,box-shadow .3s}
.oz-ray i.an{background:var(--r0); box-shadow:0 0 10px color-mix(in srgb,var(--r0) 70%,transparent)}
.oz-ray em{position:absolute; top:-6px; bottom:-6px; left:0; width:2px; border-radius:2px; background:#fff; box-shadow:0 0 12px #fff}

/* 1 · konusani takip: tek kadraj kayar, sonra ekran ikiye bolunur */
.oz-genis video{object-position:25% 50%}
.oz-takip{position:absolute; z-index:2; width:46%; height:30%; left:27%; top:20%; border-radius:14px;
  box-shadow:0 0 0 2px var(--r1),0 0 30px -4px var(--r1); opacity:0; transition:opacity .25s,transform .25s}
.oz-bolum{position:absolute; inset:0; z-index:3; display:grid; grid-template-rows:1fr 1fr; gap:3px; background:#0b0e1f; opacity:0}
.oz-bolum div{position:relative; overflow:hidden}
.oz-bolum video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.oz-bolum div:first-child video{object-position:27% 42%; transform:scale(1.5); transform-origin:27% 40%}
.oz-bolum div:last-child video{object-position:90% 42%; transform:scale(1.5); transform-origin:90% 40%}
.oz-konusan{position:absolute; left:10px; bottom:10px; z-index:4; display:inline-flex; gap:6px; align-items:center; padding:6px 9px; border-radius:10px;
  font:650 11px var(--ui); color:#fff; background:rgba(6,8,24,.7); backdrop-filter:blur(6px)}
.oz-konusan span{display:none}.oz-konusan span.on{display:inline}
.oz-konusan::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--r1); animation:oz-nabiz 1s ease-in-out infinite}
@keyframes oz-nabiz{50%{opacity:.35}}

/* 2 · kelime kelime altyazi + ceviri */
.oz-alt{position:absolute; left:10px; right:10px; top:58%; z-index:2; text-align:center; min-height:70px}
.oz-alt p{margin:0; font:850 21px/1.25 var(--hero); letter-spacing:-.01em; color:#fff; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.5)}
.oz-alt p span{display:inline-block; margin:0 3px; opacity:0; transform:translateY(8px) scale(.9); transition:opacity .16s,transform .22s cubic-bezier(.3,1.6,.5,1),color .15s}
.oz-alt p span.gor{opacity:1; transform:none}
.oz-alt p span.su{color:#d9ff3f}
.oz-dil{position:absolute; top:44px; right:12px; z-index:3; display:flex; gap:2px; padding:3px; border-radius:10px; background:rgba(6,8,24,.72); backdrop-filter:blur(6px)}
.oz-dil b{padding:5px 7px; border-radius:7px; font:700 10.5px var(--mono); color:rgba(255,255,255,.55); transition:.25s}
.oz-dil b.on{background:var(--r2); color:#04121a}

/* 3 · dolgu ve sessizlik */
.oz-bulanik{filter:blur(14px) brightness(.45); transform:scale(1.15)}
.oz-dk{position:absolute; inset:46px 12px 14px; z-index:2; display:flex; flex-direction:column; gap:12px}
.oz-dk-bas{display:flex; justify-content:space-between; align-items:baseline; font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.oz-dk-bas b{font:800 26px/1 var(--hero); letter-spacing:-.03em; color:#fff; text-transform:none; font-variant-numeric:tabular-nums}
.oz-dk-metin{display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; min-height:186px}
.oz-dk-metin span{display:inline-block; max-width:140px; padding:8px 10px; border-radius:9px; font:650 15px/1 var(--ui); color:#e7e9f6;
  background:rgba(255,255,255,.1); white-space:nowrap; overflow:hidden;
  transition:background .3s,color .3s,max-width .45s ease,padding .45s ease,margin .45s ease,opacity .45s ease}
.oz-dk-metin span.d{background:rgba(255,61,139,.2); color:#ff8fb8}
.oz-dk-metin span.d.at{text-decoration:line-through; max-width:0; padding-left:0; padding-right:0; margin:0 -3px; opacity:0}
.oz-dk-cizgi{display:flex; gap:3px; height:34px; padding:6px; border-radius:12px; background:rgba(255,255,255,.06)}
.oz-dk-cizgi i{flex:var(--f); border-radius:5px; background:color-mix(in srgb,var(--mor) 75%,#fff 0%); transition:flex .5s ease,opacity .5s,margin .5s}
.oz-dk-cizgi i.b{background:repeating-linear-gradient(45deg,rgba(255,61,139,.55) 0 4px,rgba(255,61,139,.25) 4px 8px)}
.oz-dk-cizgi i.b.at{flex:0.0001; opacity:0; margin:0 -1.5px}
.oz-dk-ozet{margin-top:auto; display:flex; gap:8px}
.oz-dk-ozet span{flex:1; padding:10px; border-radius:12px; background:rgba(255,255,255,.07); font:600 11px var(--ui); color:rgba(255,255,255,.65)}
.oz-dk-ozet b{display:block; margin-top:3px; font:800 18px var(--hero); color:#fff}
.oz-dk-ozet span:first-child b{color:#ff8fb8}

/* ---- duyarli ----------------------------------------------------------- */
.oz-aciklama{display:none}
@media (max-width:980px){
  .oz{padding:20px 0 56px}
  .oz-izgara{grid-template-columns:1fr; gap:14px}
  .oz-sol{display:contents}
  .oz-ust{order:0; justify-self:center}
  .oz h2{order:1; margin:6px auto 4px; text-align:center; font-size:clamp(24px,6.4vw,32px)}
  .oz-liste{order:2; position:relative; display:flex; gap:8px; overflow-x:auto; margin:0 -24px; padding:4px 24px 6px; scroll-snap-type:x mandatory; scrollbar-width:none}
  .oz-liste::-webkit-scrollbar{display:none}
  .oz-liste li{flex:none; scroll-snap-align:center}
  .oz-m{display:flex; align-items:center; gap:8px; width:auto; padding:8px 14px 8px 8px; border-radius:999px; background:rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .oz-m.on{background:color-mix(in srgb,var(--c) 18%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent)}
  .oz-no{width:26px; height:26px; border-radius:50%; font-size:10.5px; margin:0}
  .oz-m b{font-size:14px; white-space:nowrap}
  .oz-m small,.oz-ilerle{display:none}
  .oz-sahne{order:3; height:400px}
  .oz-tel{width:206px; border-radius:30px; padding:6px}
  .oz-ekran{border-radius:24px}
  .oz-sahne::before{width:320px; height:320px}
  .oz-puan b{font-size:42px}
  .oz-alt p{font-size:17px}
  .oz-dk{inset:40px 10px 10px; gap:9px}
  .oz-dk-metin{min-height:130px; gap:5px}
  .oz-dk-metin span{font-size:12.5px; padding:6px 8px}
  .oz-etiket{font-size:12px; padding:8px 11px}
  .oz-etiket.sol{right:calc(50% + 50px); top:46px}
  .oz-etiket.sag{left:calc(50% + 50px); bottom:46px}
  .oz-aciklama{order:4; display:block; max-width:34em; margin:0 auto; min-height:3.1em; text-align:center; font:400 14.5px/1.55 var(--ui); color:#aab1cf}
}
@media (max-width:520px){
  .oz-etiket.sol{right:auto; left:0; top:22px}
  .oz-etiket.sag{left:auto; right:0; bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .oz *,.oz *::before,.oz *::after{animation:none!important; transition:none!important}
  .oz-bolum{opacity:1; transform:none}
}

/* hero altindaki ozellik alanindan sonra gelen ornek klip seridi (hero'dan disari alindi) */
.akan-bolum{position:relative; background:#060818; overflow:hidden}
.akan-bolum .akan{margin-top:0; padding-top:8px}
.oz{padding-bottom:40px}
@media (max-width:980px){.oz{padding-bottom:28px}}