/* ---------------------------------------------------------------------------
   OZELLIKLER SAYFASI (/ozellikler). Cizim: Ozellikler.html (sartname).
   docs/tasarim-sistemi.md §21.1. Siniflarin hepsi "oz-" onekli: site.css ile
   cakismaz. Renkler .oz kabindaki degiskenlerden (panelin sistem renkleri);
   sahne kutulari (.oz-sh) cizim oldugu icin iki modda da acik kalir.
   Animasyonlar yalnizca CSS, 6,4 sn dongu; hareket azaltmada durur ve her
   sahne tam gorunur.
   --------------------------------------------------------------------------- */
.oz {
  --zemin:#FBF6EE; --yuzey:#FFFFFF; --metin:#2A211A; --soluk:#7A6A5C;
  --cizgi:#EFE0CC; --vurgu:#E07B39; --dolgu:#B5591C; --dolgu-yazi:#AC5319; --menu:#2A211A;
  --koyu:#16100C; --basari:#2F7A4F; --hata:#B43E28; --uyari:#9E5919; --bilgi:#3E4C6D;
  --basari-zemin:#E6F2EA; --basari-kenar:#9FCDB3;
  --rozet-mod-yazi: var(--dolgu-yazi); --rozet-mod-zemin: #FDF2E6; --rozet-mod-kenar: #E8C9A9;
}
@media (prefers-color-scheme: dark) {
  /* koyu mod: panelin koyu karsiliklari (§6). Sahne kutusu acik kalir. */
  .oz {
    --zemin: #17130F; --yuzey: #1F1A15; --metin: #F5EFE7; --soluk: #A8988A; --cizgi: #2E2620;
    --dolgu-yazi: #E07B39;
    --rozet-mod-yazi: #E07B39; --rozet-mod-zemin: color-mix(in srgb, #E07B39 14%, #1F1A15); --rozet-mod-kenar: color-mix(in srgb, #E07B39 40%, #1F1A15);
  }
  .oz .oz-sh:not(.oz-koyu) {
    --zemin: #FBF6EE; --yuzey: #FFFFFF; --metin: #2A211A; --soluk: #7A6A5C; --cizgi: #EFE0CC; --dolgu-yazi: #AC5319;
    color: var(--metin);
  }
}
html{scroll-behavior:smooth}
.oz{background:var(--zemin);color:var(--metin);
 font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
 font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.oz h1,.oz h2,.oz h3,.oz .oz-fr{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.oz-kap{max-width:1180px;margin:0 auto;padding:0 20px}
.oz-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;
 border-radius:12px;font-weight:700;font-size:15px;border:1px solid transparent}
.oz-btn-a{background:var(--dolgu);color:#fff}
.oz-btn-b{background:var(--yuzey);color:var(--metin);border-color:var(--cizgi)}
.oz-rz{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
 padding:4px 9px;border-radius:999px;border:1px solid var(--cizgi);color:var(--soluk);background:var(--yuzey)}
.oz-rz.oz-mod{color:var(--rozet-mod-yazi);border-color:var(--rozet-mod-kenar);background:var(--rozet-mod-zemin)}

.oz-sh{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:16px;
 padding:20px 18px 16px;border-radius:18px;background:linear-gradient(170deg,#FFF 0%,#FBF4EA 100%);
 border:1px solid var(--cizgi);overflow:hidden}
.oz-cz{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.oz-cp{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--soluk);text-transform:uppercase}
.oz-sh.oz-koyu{background:linear-gradient(170deg,#241A12 0%,#16100C 100%);border-color:#3A2C21}

/* telefon */
.oz-ph{position:relative;width:196px;height:352px;border-radius:26px;background:#1A1410;
 padding:7px;flex:0 0 auto}
.oz-ph:before{content:"";position:absolute;left:50%;top:13px;transform:translateX(-50%);
 width:46px;height:4px;border-radius:3px;background:#3B2F26}
.oz-scr{position:relative;width:100%;height:100%;border-radius:20px;background:#fff;overflow:hidden;
 display:flex;flex-direction:column}
.oz-bar{height:22px;flex:0 0 auto;background:var(--menu);display:flex;align-items:center;
 justify-content:center;color:#F3E6D6;font-size:8px;letter-spacing:.1em;font-weight:700}
.oz-gov{flex:1;padding:9px;overflow:hidden;display:flex;flex-direction:column;gap:7px;position:relative}

/* panel karti */
.oz-pn{position:relative;width:266px;border-radius:16px;background:var(--yuzey);
 border:1px solid var(--cizgi);padding:12px;flex:0 0 auto}
.oz-pn .oz-pnb{font-family:Inter;font-size:11px;font-weight:800;letter-spacing:.05em;
 color:var(--soluk);margin-bottom:9px}
.oz-pr{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;
 background:#FBF6EE;border:1px solid var(--cizgi);font-size:11px}
.oz-pr .oz-nk{width:7px;height:7px;border-radius:50%;background:var(--basari);flex:0 0 auto}
.oz-pr b{font-size:11.5px}
.oz-pr .oz-sag{margin-left:auto;font-weight:800;color:var(--dolgu-yazi);font-size:11px}

/* ortak zaman cizelgesi: her ogeye kendi gecikmesi */
@keyframes kal{0%{opacity:0;transform:translateY(10px) scale(.985)}
 7%{opacity:1;transform:none}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
.oz-an>*{animation:kal 6.4s cubic-bezier(.2,.85,.3,1) infinite both}
.oz-d1{animation-delay:.15s!important}.oz-d2{animation-delay:.5s!important}
.oz-d3{animation-delay:.95s!important}.oz-d4{animation-delay:1.45s!important}
.oz-d5{animation-delay:2.05s!important}.oz-d6{animation-delay:2.75s!important}
.oz-d7{animation-delay:3.5s!important}.oz-d8{animation-delay:4.2s!important}

/* dokunus noktasi */
@keyframes dok{0%,100%{opacity:0;transform:scale(.4)}4%{opacity:.95;transform:scale(1)}
 12%{opacity:.85;transform:scale(.88)}26%{opacity:0;transform:scale(1.5)}}
.oz-tap{position:absolute;width:26px;height:26px;border-radius:50%;
 background:rgba(42,33,26,.28);border:2px solid rgba(42,33,26,.5);
 animation:dok 6.4s infinite both;pointer-events:none;z-index:6}

/* NFC dalgasi */
@keyframes dalga{0%{opacity:0;transform:scale(.35)}10%{opacity:.75}45%{opacity:0;transform:scale(2.3)}100%{opacity:0}}
.oz-dal{position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--vurgu);
 animation:dalga 6.4s infinite both}

/* yazilan mesaj */
@keyframes yaz{0%,28%{width:0}52%{width:100%}100%{width:100%}}
.oz-yz{overflow:hidden;white-space:nowrap;animation:yaz 6.4s steps(34,end) infinite both}

/* panele dusen satir */
@keyframes dus{0%,52%{opacity:0;transform:translateX(26px)}
 60%{opacity:1;transform:none}93%{opacity:1}100%{opacity:0}}
.oz-dus{animation:dus 6.4s cubic-bezier(.2,.85,.3,1) infinite both!important}
@keyframes vurgula{0%,56%{background:#FBF6EE}62%{background:var(--basari-zemin);border-color:var(--basari-kenar)}
 86%{background:var(--basari-zemin)}100%{background:#FBF6EE}}
.oz-vr{animation:dus 6.4s cubic-bezier(.2,.85,.3,1) infinite both,vurgula 6.4s linear infinite both!important}

/* rozet sayaci */
@keyframes pat{0%,44%{transform:scale(0);opacity:0}50%{transform:scale(1.35);opacity:1}
 56%{transform:scale(1)}94%{transform:scale(1);opacity:1}100%{opacity:0}}
.oz-bdg{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;border-radius:9px;
 background:var(--hata);color:#fff;font-size:10px;font-weight:800;display:flex;
 align-items:center;justify-content:center;animation:pat 6.4s cubic-bezier(.3,1.6,.5,1) infinite both}

/* yildizlar */
.oz-yl{display:flex;gap:4px;justify-content:center}
.oz-yl i{width:17px;height:17px;display:block;background:#DED3C6;
 clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes dolsun{0%,18%{background:#DED3C6}24%{background:#E8A33A}100%{background:#E8A33A}}
.oz-yl i.oz-ak{animation:dolsun 6.4s linear infinite both}
.oz-yl i.oz-ak:nth-child(1){animation-delay:.1s}.oz-yl i.oz-ak:nth-child(2){animation-delay:.2s}
.oz-yl i.oz-ak:nth-child(3){animation-delay:.3s}.oz-yl i.oz-ak:nth-child(4){animation-delay:.4s}
.oz-yl i.oz-ak:nth-child(5){animation-delay:.5s}

/* kanal karolari */
.oz-kr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.oz-kr span{height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
 font-size:8.5px;font-weight:800;color:#fff;letter-spacing:.02em;text-align:center;line-height:1.1}
.oz-k-ig{background:linear-gradient(135deg,#B0491F,#C1266B 55%,#7A2A9E)}
.oz-k-wa{background:linear-gradient(180deg,#0E8349,#0A5E37)}
.oz-k-go{background:linear-gradient(180deg,#3E4C6D,#2B3650)}
.oz-k-km{background:linear-gradient(180deg,#107A72,#0A544F)}
.oz-k-mn{background:linear-gradient(180deg,#9A5A28,#70401A)}
.oz-k-rz{background:linear-gradient(180deg,#3C4658,#232A36)}
.oz-k-rd{background:linear-gradient(180deg,#6B4E86,#4B375E)}
.oz-k-tt{background:linear-gradient(180deg,#2A211A,#120D09)}
.oz-k-ws{background:linear-gradient(180deg,#5B6B52,#3C4836)}
.oz-k-ep{background:linear-gradient(180deg,#8A5A3C,#603C26)}

/* kucuk parcalar */
.oz-bl{border-radius:9px;border:1px solid var(--cizgi);background:#FBF6EE;padding:7px 8px;font-size:9.5px}
.oz-bl b{display:block;font-size:10.5px;margin-bottom:1px}
.oz-hd{display:flex;align-items:center;gap:6px}
.oz-lg{width:26px;height:26px;border-radius:7px;background:var(--dolgu);color:#fff;
 font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center}
.oz-ad{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12px}
.oz-sb{font-size:8.5px;color:var(--soluk)}
.oz-hr{height:1px;background:var(--cizgi);margin:1px 0}
.oz-bt{height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
 font-size:9.5px;font-weight:800;color:#fff}
.oz-hrk{display:flex;gap:5px;align-items:center}

/* grafik cubuklari */
@keyframes buyu{0%{transform:scaleY(.05)}22%{transform:scaleY(1)}92%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
.oz-gr{display:flex;align-items:flex-end;gap:5px;height:62px}
.oz-gr i{flex:1;background:var(--vurgu);border-radius:4px 4px 0 0;transform-origin:bottom;
 animation:buyu 6.4s cubic-bezier(.2,.85,.3,1) infinite both;display:block}

@media (prefers-reduced-motion: reduce){
 .oz-an>*,.oz-tap,.oz-dal,.oz-yz,.oz-dus,.oz-vr,.oz-bdg,.oz-yl i.oz-ak,.oz-gr i{animation:none!important;opacity:1!important;
  transform:none!important;width:auto!important;background-color:inherit}
 .oz-yl i.oz-ak{background:#E8A33A!important}
 .oz-tap,.oz-dal{display:none}
}


.oz-hero{padding:62px 0 34px}
.oz-ek{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--dolgu-yazi);margin-bottom:12px}
.oz .oz-hero h1{font-size:clamp(34px,5.4vw,58px);margin-bottom:16px}
.oz-hero .oz-alt{max-width:60ch;color:var(--soluk);font-size:17px}
.oz-hb{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

.oz-son{background:var(--koyu);color:#F3E6D6;padding:58px 0;margin-top:62px}
.oz .oz-son h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:12px}
.oz-son p{max-width:58ch;color:#C6B4A4;margin-bottom:4px}
.oz-son .oz-btn-b{background:transparent;color:#F3E6D6;border-color:#4A3A2C}

.oz-bsl{padding:38px 0 16px}
.oz-bsl:first-child{padding-top:6px}
.oz-bsl .oz-no{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:13px;color:var(--dolgu-yazi)}
.oz .oz-bsl h2{font-size:clamp(23px,3vw,31px);margin-top:4px}
.oz-bsl p{color:var(--soluk);max-width:62ch;margin-top:6px}
.oz-bsl.oz-alt{padding-top:26px;margin-top:10px;border-top:1px solid var(--cizgi)}
.oz .oz-bsl.oz-alt h2{font-size:clamp(19px,2.2vw,23px)}
.oz-izg{display:grid;gap:14px;align-items:start}
.oz-k3{grid-template-columns:repeat(3,1fr)}
.oz-k2{grid-template-columns:repeat(2,1fr)}
.oz-k1{grid-template-columns:1fr}
.oz-kt{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:18px;padding:15px;
 display:flex;flex-direction:column;gap:12px}
.oz-kt .oz-sh{min-height:0;padding:14px 12px 12px;border-radius:14px}
.oz .oz-kt h3{font-size:18px;margin-top:3px}
.oz-kt p{color:var(--soluk);font-size:14px;max-width:72ch}
.oz-kt .oz-ust2{display:flex;align-items:center;gap:8px}
.oz-kt .oz-no{font-family:Fraunces,Georgia,serif;font-weight:700;color:var(--dolgu-yazi);font-size:13px}
.oz-k3 .oz-gen{grid-column:span 2}
.oz-k1 .oz-kt{flex-direction:row;align-items:center;gap:30px;padding:18px}
.oz-k1 .oz-kt>.oz-sh{flex:0 0 auto}
.oz-k1 .oz-kt>div:last-child{flex:1;min-width:0}
.oz .oz-k1 .oz-kt h3{font-size:21px}
.oz-k1 .oz-kt p{font-size:15px}
@media(max-width:1080px){.oz-k3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.oz-k1 .oz-kt{flex-direction:column;align-items:stretch;gap:12px}}
@media(max-width:780px){.oz-k3,.oz-k2{grid-template-columns:1fr}
 .oz-k3 .oz-gen,.oz-k2 .oz-gen{grid-column:span 1}.oz-sh{flex-wrap:wrap}}

/* dar ekran: sabit genislikli panel karti sahneye sigar (kirpilmaz) */
.oz-pn{max-width:100%}
/* hareket azaltma eki: yukaridaki kural (background-color:inherit) grafik
   cubugunun ve sepet rozetinin zeminini de siliyordu (bos grafik, beyaz
   ustune beyaz "1"); SVG'deki yol cizgisi (SMIL) CSS animasyonu olmadigi icin ayrica durur */
@media (prefers-reduced-motion: reduce){
 .oz-gr i:not([style*="background"]){background-color:var(--vurgu)!important}
 .oz-bdg{background-color:var(--hata)!important}
 .oz-sh path[stroke-dasharray]{stroke-dashoffset:0!important}
}