/* V, W, X ortak bileşenleri (ortak-869.css'in üstüne): oyuncak raf kareleri, kasa ekranı çerçevesi,
   "ne değişir" maddeleri, hızlı kurulum. görseller logo-sahne/oyuncak ve logo-sahne/kasa-demo'dan. */
:root{--tente:#C2410C;--tente-acik:#FDE8DC;--fosfor:#FFF5B8}

/* oyuncak raf: dört kare üst üste, sayıya göre geçiş */
.oy-raf{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;background:#E9E2D3}
.oy-raf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s linear}
.oy-raf img[data-s="dolu"]{opacity:1}
.oy-rozet{position:absolute;z-index:3;background:#fff;border-radius:12px;padding:7px 12px;font-weight:900;font-size:16px;line-height:1.1;box-shadow:0 2px 0 rgba(20,20,20,.25)}
.oy-sayac{position:absolute;z-index:3;right:12px;bottom:12px;display:flex;gap:6px}
.oy-sayac span{background:#fff;border-radius:12px;padding:6px 11px;font-weight:800;font-size:14px;box-shadow:0 2px 0 rgba(20,20,20,.25);display:flex;align-items:baseline;gap:6px}
.oy-sayac b{font:800 26px/1 var(--sayi)}
.oy-sayac .kacan{background:var(--kirmizi);color:#fff}
.oy-sayac [hidden]{display:none}
.oy-olay{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);background:var(--murekkep);color:#fff;font-weight:900;font-size:clamp(16px,1.8vw,20px);padding:10px 16px;border-radius:14px;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}
.oy-olay.gor{opacity:1;transform:translate(-50%,-50%) scale(1)}
.oy-olay.kirmizi{background:var(--kirmizi)}

/* gerçek kasa ekranı: monitör çerçevesi */
.monitor{background:#1B1D1C;border-radius:22px;padding:clamp(8px,1.2vw,14px);box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.monitor img{border-radius:10px;width:100%}
.monitor-ayak{width:22%;height:28px;margin:0 auto;background:linear-gradient(#2A2C2B,#141514);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.monitor-taban{width:34%;height:10px;margin:0 auto;border-radius:6px;background:#141514}

/* kasanın tasarım dili: tente, defter kâğıdı, kaşe, tuş */
.tente{height:16px;background:radial-gradient(circle at 50% 0,var(--tente) 7px,transparent 7.5px) 0 0/22px 16px repeat-x,radial-gradient(circle at 50% 0,#FFFDF8 7px,transparent 7.5px) 11px 0/22px 16px repeat-x}
.tus{display:inline-grid;place-items:center;min-width:1.9em;height:1.7em;padding:0 .35em;border:1.5px solid currentColor;border-radius:.35em;font:800 .72em/1 var(--sayi);box-shadow:0 2px 0 currentColor;vertical-align:.12em}
.defter{background:#FFFDF8 linear-gradient(transparent calc(100% - 1px),#DBE0E4 0) 0 0/100% 2.6em;border-radius:14px;position:relative}
.defter::before{content:"";position:absolute;top:0;bottom:0;left:3.4em;width:2px;background:#E0705A;opacity:.7}
.kase{display:inline-block;border:3px solid currentColor;border-radius:8px;padding:4px 10px;font:900 15px/1 var(--yazi);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-6deg)}

/* ne değişir: dört madde */
.degisir{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:28px}
.degisir li{list-style:none;border-top:3px solid var(--murekkep);padding-top:14px}
.degisir svg{width:40px;height:40px;display:block;margin-bottom:10px}
.degisir b{display:block;font-weight:900;font-size:20px;line-height:1.15}
.degisir p{color:var(--metin);font-size:16px;margin-top:6px}

/* hızlı kurulum */
.kurulum-ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:28px}
.paket{border-radius:22px;padding:clamp(20px,3vw,30px);background:var(--raf);display:grid;gap:10px;align-content:start}
.paket h3{font-size:clamp(22px,2.4vw,28px)}
.paket p{color:var(--metin)}
.paket ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.paket li{display:flex;gap:10px;align-items:baseline;font-weight:700}
.paket li::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:var(--kirmizi);transform:translateY(-1px)}
.ogrenme{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
.ogrenme div{display:grid;gap:8px}
.ogrenme i{display:block;height:var(--h);background:var(--murekkep);border-radius:10px 10px 4px 4px}
.ogrenme div:last-child i{background:var(--kirmizi)}
.ogrenme b{font-weight:900;font-size:16px;line-height:1.2}
.ogrenme small{color:var(--gri);font-size:14px;line-height:1.3}

@media (max-width:860px){
  .degisir{grid-template-columns:1fr 1fr}
  .kurulum-ikili{grid-template-columns:1fr}
}
@media (max-width:520px){
  .degisir{grid-template-columns:1fr}
  .ogrenme{grid-template-columns:1fr 1fr}
  .oy-sayac b{font-size:20px}
}

/* T'den gelen bölümler (liste, whatsapp, oyun, hesap, pilot); sayfalar gerekirse üstüne yazar */
.ust{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.ust nav{display:flex;gap:22px;font-weight:700;font-size:16px}
.ust nav a{text-decoration:none}
.ust nav a:hover{text-decoration:underline;text-underline-offset:4px}
.bolum{margin-top:var(--bolum)}
.bolum>p.alt-baslik{margin-top:12px;max-width:38em;color:var(--metin)}
.liste-ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:28px}
.not-kagidi{border-radius:18px;padding:22px 24px 18px;background:var(--raf)}
.not-kagidi.kankai{background:#fff;border:3px solid var(--murekkep)}
.not-kagidi h3{font-size:22px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.not-kagidi h3 small{font:700 14px var(--sayi);color:var(--gri)}
.not-kagidi ul{list-style:none;padding:0;margin-top:12px}
.not-kagidi li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--cizgi)}
.not-kagidi li b{font-weight:800}
.not-kagidi li span{font:800 18px var(--sayi);text-align:right}
.not-kagidi li small{grid-column:1/-1;color:var(--gri);font-size:14px}
.not-kagidi li.kotu small{color:var(--kirmizi);font-weight:700}
.not-kagidi .sonu{margin-top:10px;padding-top:12px;border-top:2px solid var(--murekkep);display:flex;justify-content:space-between;font-weight:900}
.not-kagidi .sonu span{font:800 20px var(--sayi)}
.akis{display:flex;flex-direction:column;gap:10px}
.akis .balon{font-size:18px;max-width:min(88%,32em)}
.akis .gun{align-self:center;font:700 13px var(--yazi);background:#fff;border-radius:8px;padding:5px 12px;color:var(--gri);margin:10px 0 4px}
.js .akis>*{opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}
.js .akis>.gor{opacity:1;transform:none}
.sorular{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:28px}
.soru{border-top:3px solid var(--murekkep);padding-top:16px}
.soru legend{font-size:19px;color:var(--murekkep);font-weight:900;line-height:1.25;margin-bottom:14px}
.soru legend small{display:block;font-size:14px;color:var(--gri);font-weight:700;margin-top:4px}
.cevap{margin-top:clamp(28px,4vw,44px);background:var(--murekkep);color:#fff;border-radius:24px;padding:clamp(24px,4vw,44px)}
.cevap p{font-size:clamp(22px,2.6vw,32px);font-weight:900;line-height:1.25;max-width:26em}
.cevap b{font-family:var(--sayi);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.cevap small{display:block;margin-top:18px;color:#B5B5AE;font-size:14px;max-width:46em}
.pilot{padding-bottom:40px}
.pilot h2{font-size:clamp(36px,6vw,72px)}
.pilot p{margin-top:16px;max-width:34em;font-size:clamp(18px,2vw,21px);color:var(--metin)}
.pilot .dugme{margin-top:24px}
.pilot small{display:block;margin-top:10px;color:var(--gri);font-size:14px}
.yuzen{position:fixed;left:18px;bottom:18px;z-index:20;transition:transform .2s,opacity .2s}
.yuzen.saklan{transform:translateY(140%);opacity:0}
.alt{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:var(--bolum);padding-top:28px;padding-bottom:96px;color:var(--gri);font-size:15px;border-top:1px solid var(--cizgi)}
.alt .kelime{font-size:18px;color:var(--murekkep)}
@media (max-width:860px){.liste-ikili,.sorular{grid-template-columns:1fr}}
@media (max-width:560px){.ust nav{display:none}}

/* kaydırmalı kazanç hesabı (oyuncak-raf.js hesap) */
.kh{margin-top:28px;max-width:760px}
.kh-soru{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;font-weight:900;font-size:clamp(19px,2vw,23px)}
.kh-soru output{font:800 clamp(26px,3.2vw,38px)/1 var(--sayi);letter-spacing:-.03em}
.kh-cubuk{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:22px 0 10px;border-radius:999px;background:linear-gradient(to right,var(--yesil) 0 var(--dolu,40%),#E4E1D8 var(--dolu,40%) 100%);cursor:pointer}
.kh-cubuk::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;border-radius:50%;background:#fff;border:5px solid var(--yesil-koyu);box-shadow:0 3px 0 var(--yesil-koyu)}
.kh-cubuk::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:5px solid var(--yesil-koyu);box-shadow:0 3px 0 var(--yesil-koyu)}
.kh-cubuk:focus-visible{outline:3px solid var(--kirmizi);outline-offset:8px}
.kh-uclar{display:flex;justify-content:space-between;font:700 14px var(--yazi);color:var(--gri)}
.kh-ekran{margin-top:clamp(24px,3.5vw,36px);max-width:760px;background:linear-gradient(135deg,var(--yesil) 0%,var(--yesil-koyu) 100%);color:#fff;border-radius:24px;padding:clamp(22px,3.5vw,36px);position:relative;overflow:hidden}
.kh-ekran::before{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.kh-ust{font-weight:800;font-size:15px;color:#D5F2E1}
.kh-tutar{font:800 clamp(52px,8vw,92px)/1 var(--sayi);letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.kh-kalem{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0}
.kh-kalem li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.22);font-weight:700}
.kh-kalem b{font:800 18px var(--sayi);white-space:nowrap;font-variant-numeric:tabular-nums}
.kh-yil{margin-top:14px;font-weight:800;color:#D5F2E1}
.kh-yil b{font:800 22px var(--sayi);color:#fff}
.kh-not{margin-top:14px;max-width:760px}

/* yeşil: kâr ve "iyi" taraf (kullanıcı isteği). kırmızı: logo ve boş raf */
:root{--yesil:#12924F;--yesil-koyu:#0B6B39;--yesil-acik:#E6F5EC}

/* mini raf (oyuncak-raf.js miniRaf) */
.mr{margin:0;position:relative;border-radius:22px;overflow:hidden;background:#F7F1E6;border:3px solid #E9E0CF}
.mr-iyi{border-color:var(--yesil)}
.mr-ad{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 16px 4px}
.mr-ad b{font-weight:900;font-size:18px}
.mr-ad small{color:var(--gri);font-weight:700;font-size:14px}
.mr-iyi .mr-ad b{color:var(--yesil-koyu)}
.mr-svg{display:block;width:100%;height:auto}
.mr-duvar{fill:#F7F1E6}
.mr-direk,.mr-tahta{fill:#B9834F}
.mr-paket{transform-box:fill-box;transform-origin:50% 100%;transition:opacity .22s ease,transform .22s ease}
.mr-paket.yok{opacity:0;transform:translateY(-14px) scale(.6)}
.mr-bos{opacity:0;transition:opacity .25s}
.mr.bos .mr-bos{opacity:1}
.mr-bos-yazi{font:900 22px var(--yazi);fill:#fff}
.mr-koli-on{fill:#C98B4A;transition:fill .3s}
.mr-koli-cizgi{stroke:#8A5A2B;stroke-width:2;fill:none}
.mr-koli-bant{stroke:#EBC48E;stroke-width:5;transition:opacity .3s}
.mr-koli-acik .mr-koli-on{fill:#E7D3B5}
.mr-koli-acik .mr-koli-bant{opacity:0}
.mr-koli-kesik{fill:none;stroke:#C9BEA9;stroke-width:2.5;stroke-dasharray:6 6}
.mr-koli-yazi{font:800 14px var(--yazi);fill:var(--gri)}
.mr-alt{display:flex;gap:8px;flex-wrap:wrap;padding:6px 14px 14px}
.mr-alt span{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border-radius:12px;padding:6px 11px;font-weight:800;font-size:14px;box-shadow:0 2px 0 rgba(20,20,20,.18)}
.mr-alt b{font:800 22px/1 var(--sayi)}
.mr-alt .kacan{background:var(--kirmizi);color:#fff}
.mr-alt [hidden]{display:none}
.mr .oy-olay{top:46%}

/* aynı para, iki liste: banknotlar */
.para{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,24px)}
.para-satir{border-radius:22px;padding:clamp(16px,2.4vw,24px);background:var(--raf)}
.para-iyi{background:var(--yesil-acik);box-shadow:inset 0 0 0 3px var(--yesil)}
.para-bas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.para-bas b{font-weight:900;font-size:clamp(19px,2vw,22px)}
.para-bas span{font-weight:800;color:var(--gri)}
.para-bas strong{font:800 clamp(22px,2.4vw,28px) var(--sayi);color:var(--murekkep)}
.para-iyi .para-bas strong{color:var(--yesil-koyu)}
.para-notlar{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.para-notlar li{min-width:0;overflow:hidden;aspect-ratio:3/2;border-radius:10px;display:grid;place-items:center;align-content:center;gap:0;font-size:clamp(18px,2.2vw,26px);line-height:1;position:relative;border:2px solid transparent}
.para-notlar small{font:800 11px var(--yazi);margin-top:3px;color:inherit;opacity:.85}
.para-notlar .satar{background:#fff;border-color:var(--yesil);color:var(--yesil-koyu)}
.para-notlar .bekler{background:repeating-linear-gradient(45deg,#ECEAE4 0 6px,#E2DFD7 6px 12px);border-color:#C9C4B8;color:#8A867C}
.para-notlar .bekler span{filter:grayscale(1);opacity:.7}
.para-notlar .cep{background:#FFF3C4;border-color:#E2B62E;color:#8A6A00}
.js .para-notlar li{opacity:0;transform:translateY(10px) scale(.9);transition:opacity .25s ease,transform .25s ease;transition-delay:calc(var(--i,0) * 60ms)}
.js .para.gor .para-notlar li{opacity:1;transform:none}
.para-ozet{margin-top:12px;font-weight:700;color:var(--metin)}
.para-ozet .kotu{color:var(--kirmizi);font-family:var(--sayi)}
.para-ozet .iyi{color:var(--yesil-koyu);font-family:var(--sayi)}
.para-anahtar{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--gri)}
.para-anahtar li{display:flex;align-items:center;gap:8px}
.para-anahtar i{width:22px;height:15px;border-radius:4px;border:2px solid}
.para-anahtar .satar{background:#fff;border-color:var(--yesil)}
.para-anahtar .bekler{background:#E6E3DC;border-color:#C9C4B8}
.para-anahtar .cep{background:#FFF3C4;border-color:#E2B62E}

/* hızlı kurulum: dolan halkalar */
.yol{list-style:none;padding:0;margin:clamp(26px,3.4vw,40px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.yol::before{content:'';position:absolute;left:12.5%;right:12.5%;top:38px;height:4px;border-radius:2px;background:linear-gradient(to right,#E4E1D8,var(--yesil))}
.yol li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.halka{position:relative;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--yesil) 0 var(--p),#E4E1D8 0)}
.halka::after{content:'';position:absolute;inset:9px;border-radius:50%;background:#fff}
.halka i{position:relative;z-index:1;font-style:normal;font-size:28px;line-height:1}
.h1{--p:25%}.h2{--p:50%}.h3{--p:75%}.h4{--p:100%}
.yol b{font-weight:900;font-size:17px;margin-top:6px}
.yol small{color:var(--gri);font-size:14px;line-height:1.35;max-width:16em}
.yol-not{margin-top:14px;text-align:center}

/* sıra sende: koli kutuları */
.ko{background:var(--raf);border-radius:28px;padding:clamp(18px,3vw,32px)}
.ko-secim{display:grid;gap:18px}
.ko-sonuc{margin-top:clamp(20px,3vw,28px);background:#fff;border-radius:20px;padding:clamp(16px,2.6vw,26px);display:grid;gap:14px}
.ko-satir{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:14px}
.ko-ad{font-weight:900;font-size:16px}
.ko-iyi .ko-ad{color:var(--yesil-koyu)}
.ko-koliler{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;align-items:center}
.ko-koli{width:44px;height:40px;display:block}
.ko-koli svg{width:100%;height:100%;display:block}
.ko-satir:not(.ko-iyi) .ko-koli{opacity:.55}
.ko-koli.ko-arti{opacity:1;filter:drop-shadow(0 0 0 transparent);position:relative;animation:ko-dus .35s cubic-bezier(.2,.9,.3,1.3) both}
.ko-koli.ko-arti::after{content:'+';position:absolute;right:-4px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--yesil);color:#fff;font:900 14px/18px var(--yazi);text-align:center}
.ko-koli.ko-fazla{opacity:.9;position:relative}
.ko-koli.ko-fazla::after{content:'!';position:absolute;right:-4px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--kirmizi);color:#fff;font:900 13px/18px var(--yazi);text-align:center}
@keyframes ko-dus{from{transform:translateY(-14px);opacity:0}}
.ko-sayi{font-weight:800;font-size:18px;white-space:nowrap}
.ko-sayi b{font:800 34px/1 var(--sayi)}
.ko-iyi .ko-sayi b{color:var(--yesil-koyu)}
.ko-neden{font-weight:800;font-size:clamp(17px,1.8vw,20px);line-height:1.4;border-top:1px solid var(--cizgi);padding-top:12px}
.ko .dipnot{margin-top:14px}

@media (max-width:860px){
  .para-notlar{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .para-notlar small{font-size:9.5px}
  .para-notlar li{aspect-ratio:auto;padding:7px 1px 6px;font-size:22px}
  .yol{grid-template-columns:1fr 1fr;row-gap:26px}
  .yol::before{display:none}
  .ko-satir{grid-template-columns:1fr auto}
  .ko-koliler{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .mr-paket,.mr-bos,.js .para-notlar li{transition:none}
  .ko-koli.ko-arti{animation:none}
}
.kh-kalem small{display:block;font-weight:700;font-size:13px;color:#D5F2E1;margin-top:2px}
.kh-bir{margin-top:8px;font-weight:700;color:#D5F2E1}
.kh-bir b{font:800 18px var(--sayi);color:#fff}

/* geniş ekranda sayfa ekranı doldursun (kullanıcı: "site yarım, ekranı kaplamıyor") */
:root{--en:1440px}
/* kazanç hesabı: masaüstünde solda çubuk ve açıklama, sağda yeşil sonuç */
@media (min-width:900px){
  #hesap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  #hesap>*{grid-column:1}
  #hesap>.kh-ekran{grid-column:2;grid-row:1/span 5;margin-top:0;max-width:none}
  #hesap>.kh,#hesap>.kh-not{max-width:none}
}
/* pilot: ekranı kaplayan koyu bant, sağda büyük whatsapp düğmesi */
.pilot.kap{display:grid;grid-template-columns:minmax(0,1fr);background:var(--murekkep);color:#fff;border-radius:32px;padding:clamp(28px,5vw,64px);margin-bottom:48px}
.pilot h2{color:#fff}
.pilot p{color:#DADAD3}
.pilot .dugme{justify-self:start;background:#25D366;color:#0B3D21;box-shadow:0 4px 0 #128C4A;font-size:19px;padding:16px 28px}
.pilot small{color:#B5B5AE}
@media (min-width:900px){
  .pilot.kap{grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center}
  .pilot.kap>h2,.pilot.kap>p{grid-column:1}
  .pilot.kap>.dugme{grid-column:2;grid-row:1;align-self:end;justify-self:center;margin-top:0}
  .pilot.kap>small{grid-column:2;grid-row:2;align-self:start;justify-self:center}
}