/* ============================================================ Ders Pusulası — Oyun Ortak Stil Kiti Balon oyununda oturttuğumuz TÜM standartlar burada. Her oyun bunu kullanır. 5 Eyl: gunduz/gece DEGISTIRME kaldirildi. body.gece kurallari KALDI ama artik secenek degil, uzay oyunlarinin (sayi-roketi, uzay-yolculugu) sabit kimligi. Tema: her oyun :root'ta --gok1/--gok2 (gökyüzü) ve --tepe1/--tepe2 (zemin) override edebilir. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} body{font-family:'Nunito',system-ui,sans-serif;font-weight:700;color:#1F2937; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} :root{--ana:#0F766E;--koyu:#0B5A54;--altin:#F4A623;--altin-k:#B8801A;--krem:#FBF6EC; --metin:#1F2937;--soluk:#6B7280;--pembe:#FB7AA0;--dogru:#2FA457;--yanlis:#E05B4C;--mor:#8B5CF6; --gok1:#A8DCEC;--gok2:#CDEBE8;--gok3:#E9F6EF;--tepe1:#BFE3C8;--tepe2:#A5D4B2} /* ---- SAHNE ---- */ #sahne{position:fixed;inset:0;overflow:hidden;transition:background 1.1s ease; background:linear-gradient(180deg,var(--gok1) 0%,var(--gok2) 52%,var(--gok3) 100%)} body.gece #sahne{background:linear-gradient(180deg,#16233F 0%,#243A61 55%,#2E4A76 100%)} .yildizfon{position:absolute;inset:0;opacity:0;transition:opacity 1.1s;pointer-events:none} body.gece .yildizfon{opacity:1} .yildizfon .yz{animation:parla var(--p,2.6s) ease-in-out var(--pd,0s) infinite} @keyframes parla{0%,100%{opacity:.35}50%{opacity:1}} .bulut{position:absolute;animation:bulutKay var(--s,90s) linear infinite;transition:filter 1.1s,opacity 1.1s} .bulut svg{display:block} body.gece .bulut{filter:brightness(.55) saturate(.6);opacity:.55} @keyframes bulutKay{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 260px))}} .kus{position:absolute;animation:kusUc var(--s,44s) linear infinite;transition:opacity 1s} .kus .kanat{transform-origin:center;animation:kanatCirp .5s ease-in-out infinite} @keyframes kanatCirp{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px) scaleY(.72)}} @keyframes kusUc{from{transform:translateX(-90px)}50%{transform:translateX(50vw) translateY(-20px)}to{transform:translateX(calc(100vw + 90px))}} body.gece .kus{opacity:0} /* 5 Eyl: zemin seridi Flow illustrasyonu (ustu seffaf + ustten alfa gecisli webp). Serit AYNALANARAK 2x genisletildi (2880px): birlesme noktasi surekli, dikis gorunmez; ayni icerik iki kat genislige yayilinca ekranda YARI YUKSEKLIGE iner (~%20 ekran). Yukseklik seridin KENDI oranina esit (vw) -> kirpilma da bozulma da yok. Seridin ust %34'u gokyuzune eriyerek girdigi icin uzun agac/bina tepeleri sert bir cizgiyle kesilmis gorunmez (ilk denemede cover kullandim, tam bu hatayi verdi). */ .tepe{position:absolute;left:0;right:0;bottom:0;pointer-events:none;transition:filter 1.1s; background-repeat:no-repeat;background-position:bottom center;background-size:100% 100%} /* 7 Eyl: 17 oyuna AYRI serit (Flow, oyunun slug'i ile secilir). Yukseklik = seridin kendi orani (vw); gorsel ayna-genisletilmis 2880px, ust %34 alfa gecisli -> kirpilma/dikis yok. */ .tepe.z-harf-cizme{height:12.3vw;min-height:92px;background-image:url(/oyunlar/zemin/harf-cizme.webp)} .tepe.z-harf-balonu-patlatma{height:14.4vw;min-height:108px;background-image:url(/oyunlar/zemin/harf-balonu-patlatma.webp)} .tepe.z-harf-esi{height:13.3vw;min-height:99px;background-image:url(/oyunlar/zemin/harf-esi.webp)} .tepe.z-ses-treni{height:11.8vw;min-height:88px;background-image:url(/oyunlar/zemin/ses-treni.webp)} .tepe.z-zit-kelimeler{height:18.1vw;min-height:135px;background-image:url(/oyunlar/zemin/zit-kelimeler.webp)} .tepe.z-dengeyi-kur{height:10.9vw;min-height:81px;background-image:url(/oyunlar/zemin/dengeyi-kur.webp)} .tepe.z-balon-saymaca{height:9.9vw;min-height:74px;background-image:url(/oyunlar/zemin/balon-saymaca.webp)} .tepe.z-carpim-carki{height:11.6vw;min-height:87px;background-image:url(/oyunlar/zemin/carpim-carki.webp)} .tepe.z-sekil-dedektifi{height:10.5vw;min-height:78px;background-image:url(/oyunlar/zemin/sekil-dedektifi.webp)} .tepe.z-saat-ustasi{height:12.5vw;min-height:93px;background-image:url(/oyunlar/zemin/saat-ustasi.webp)} .tepe.z-trafik-kahramani{height:12.2vw;min-height:91px;background-image:url(/oyunlar/zemin/trafik-kahramani.webp)} .tepe.z-hayvan-dunyasi{height:12.3vw;min-height:92px;background-image:url(/oyunlar/zemin/hayvan-dunyasi.webp)} /* body.gece .tepe karartmasi KALDIRILDI (7 Eyl): uzay oyunlarinin seridi zaten uzay temali, karartma onu boguyordu. */ /* ---- YERLEŞİM + YÜZEN KONTROLLER ---- */ #uygulama{position:relative;z-index:10;pointer-events:none;height:100%;display:flex;flex-direction:column;max-width:680px;margin:0 auto} .ikon-btn{position:fixed;top:14px;right:14px;width:120px;height:120px;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.92);border:3px solid rgba(15,118,110,.25);border-radius:50%;cursor:pointer;pointer-events:auto; touch-action:manipulation;box-shadow:0 6px 18px rgba(0,0,0,.14);z-index:20} .ikon-btn svg{width:66px;height:66px} @media(max-width:560px){.ikon-btn{width:82px;height:82px;top:10px;right:10px}.ikon-btn svg{width:44px;height:44px}} .ekran{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px;position:relative;z-index:5} .ekran.aktif{display:flex} #ekran-acilis,#ekran-bitis{pointer-events:auto} #ekran-oyun{pointer-events:none} #ekran-oyun>*{pointer-events:auto} @media(max-width:932px) and (min-height:481px){#ekran-oyun{padding-top:140px}} /* ---- AÇILIŞ ---- */ .puslu{width:230px;filter:drop-shadow(0 8px 18px rgba(11,90,84,.28));animation:pusluSalla 3.5s ease-in-out infinite} @keyframes pusluSalla{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}} .puslu-kap{position:relative;display:flex;justify-content:center} .konus{background:#fff;border:3.5px solid var(--ana);border-radius:22px;padding:13px 28px;font-weight:800; font-size:20px;color:var(--metin);position:relative;max-width:380px;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.1);margin-top:-2px} .konus::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(45deg); width:24px;height:24px;background:#fff;border-top:3.5px solid var(--ana);border-left:3.5px solid var(--ana);border-top-left-radius:8px} .baslik{font-family:'Baloo 2';font-weight:800;font-size:46px;text-align:center;letter-spacing:1px; text-shadow:0 3px 0 rgba(255,255,255,.85),0 6px 14px rgba(11,90,84,.18)} .baslik span:nth-child(6n+1){color:#0F766E}.baslik span:nth-child(6n+2){color:#F4A623}.baslik span:nth-child(6n+3){color:#FB7AA0} .baslik span:nth-child(6n+4){color:#8B5CF6}.baslik span:nth-child(6n+5){color:#2FA457}.baslik span:nth-child(6n){color:#FB923C} body.gece .baslik{text-shadow:0 2px 8px rgba(0,0,0,.55),0 0 3px rgba(255,255,255,.45)} body.gece .baslik span:nth-child(6n+1){color:#2DD4BF}body.gece .baslik span:nth-child(6n+4){color:#B7A0FB}body.gece .baslik span:nth-child(6n+5){color:#4ADE80} .secici{display:flex;background:rgba(255,255,255,.9);border-radius:18px;padding:6px;gap:5px;border:2.5px solid rgba(15,118,110,.25);flex-wrap:wrap;justify-content:center} .sec-btn{display:flex;flex-direction:column;align-items:center;gap:1px;border:none;background:transparent;font-family:'Baloo 2'; font-weight:800;font-size:22px;line-height:1.1;color:var(--soluk);padding:8px 15px 6px;border-radius:14px;cursor:pointer; min-width:64px;min-height:52px;touch-action:manipulation;transition:all .2s} .sec-btn small{font-family:'Nunito';font-weight:800;font-size:11px} .sec-btn.aktif{background:var(--ana);color:#fff;box-shadow:0 3px 8px rgba(11,90,84,.3);transform:scale(1.04)} .sec-etiket{font-family:'Baloo 2';font-weight:800;font-size:14px;color:var(--soluk)} body.gece .sec-etiket{color:#CBD5E1} .btn-ana{font-family:'Baloo 2';font-weight:800;font-size:30px;color:#fff;background:linear-gradient(180deg,#16938A,#0F766E); border:none;padding:18px 66px;border-radius:26px;cursor:pointer;box-shadow:0 6px 0 var(--koyu),0 14px 32px rgba(15,118,110,.3); transition:transform .1s,box-shadow .1s;touch-action:manipulation;min-height:66px;letter-spacing:2px} .btn-ana:hover{filter:brightness(1.06)} .btn-ana:active{transform:translateY(5px);box-shadow:0 1px 0 var(--koyu)} /* ---- OYUN ORTAK: hedef kartı (Puslu konuşma balonu) ---- */ #hedef-bolge{display:flex;align-items:center;gap:10px;flex-shrink:0;z-index:6;padding-top:4px} /* 10 Eyl: balon Puslu'nun YANINDA (yuz hizasi), tepesinde degil */ #puslu-oyun{width:150px;filter:drop-shadow(0 6px 12px rgba(11,90,84,.24));margin-top:6px} #puslu-oyun.zipla{animation:miniZipla .55s ease} /* 10 Eyl (patron): Puslu her oyunda AYNI boy - masaustu 150px, mobil 110px. Oyunlar override etmez. */ @media(max-width:560px){#puslu-oyun{width:110px}} /* Secenekleri SABIT katmanda (fixed) tutan oyunlar: soru blogu ustte durur, secenek alani onun altindan baslar. Aksi halde ikisi de ekran ortasinda bulusup ust uste biniyordu (carpim-carki, patron buldu). */ #ekran-oyun.soru-ustte{justify-content:flex-start;padding-top:150px} .secenek-alt{top:380px !important} @media(max-width:560px){#ekran-oyun.soru-ustte{padding-top:100px}.secenek-alt{top:300px !important}} @keyframes miniZipla{30%{transform:translateY(-14px) rotate(-4deg)}60%{transform:translateY(0)}80%{transform:translateY(-6px)}} .hedef-kart{position:relative;background:#fff;border-radius:26px;padding:12px 26px;display:flex;flex-direction:column;align-items:center;gap:4px; box-shadow:0 10px 26px rgba(11,90,84,.18);border:3.5px solid var(--ana);margin-top:2px} /* Kuyruk = TEK PARCA SVG (beyaz dolgu + iki egik kenarda teal cizgi), kartin kenarligini 6px iceriden orter. Onceki iki yontem (dondurulmus kare, iki ucgen) patronun ekraninda kollari kenarlikla birlestiremedi. Renkli kart isteyen oyun --kuyruk ile SVG verir. */ .hedef-kart{--kuyruk:url("data:image/svg+xml;utf8,")} .hedef-kart::before{content:"";position:absolute;left:-20px;top:50%;width:30px;height:36px;transform:translateY(-50%); background:var(--kuyruk) no-repeat center/100% 100%;z-index:1} .hedef-kart::after{content:none} .hedef-etiket{font-family:'Baloo 2';font-size:17px;font-weight:800;color:var(--metin)} /* ---- İLERLEME (balon sayaç) ---- */ .ilerleme{display:flex;gap:9px;padding:6px;flex-shrink:0;z-index:6;flex-wrap:wrap;justify-content:center;max-width:560px} .nokta{position:relative;width:30px;height:38px;border:3px solid rgba(15,118,110,.4);background:rgba(255,255,255,.55); border-radius:50% 50% 48% 48%/56% 56% 44% 44%;transition:all .35s} .nokta::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%); border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(15,118,110,.4);transition:all .35s} .nokta.dolu{background:var(--altin);border-color:var(--altin-k);box-shadow:0 3px 9px rgba(244,166,35,.4);transform:translateY(-2px) scale(1.06)} .nokta.dolu::after{border-top-color:var(--altin-k)} /* ---- KUTLAMA (oyun sonu) ---- */ #ekran-bitis{gap:16px;justify-content:center} .bitis-kart{position:relative;background:linear-gradient(180deg,#FFFFFF,#F1FAF7);border:4px solid var(--ana); border-radius:38px;padding:22px 44px 32px;display:flex;flex-direction:column;align-items:center;gap:12px; max-width:470px;box-shadow:0 24px 60px rgba(11,90,84,.34);animation:kartGel .55s cubic-bezier(.34,1.56,.64,1)} @keyframes kartGel{0%{transform:scale(.72) translateY(28px);opacity:0}100%{transform:scale(1);opacity:1}} .bk-puslu{position:relative;width:272px;height:172px;display:flex;justify-content:center;align-items:flex-end} .bk-puslu img{width:150px;animation:pusluSalla 3s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(11,90,84,.22))} .bk-balon{position:absolute;width:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.14));animation:bkSuzul 3.4s ease-in-out infinite} .bk-balon.b1{left:0;top:44px;animation-delay:-.2s}.bk-balon.b2{right:2px;top:26px;width:46px;animation-delay:-1.4s}.bk-balon.b3{right:16px;top:96px;width:34px;animation-delay:-2.3s} @keyframes bkSuzul{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-11px) rotate(4deg)}} .bitis-baslik{font-family:'Baloo 2';font-weight:800;font-size:50px;color:var(--ana);text-align:center;line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.9)} .bitis-alt{font-weight:800;font-size:19px;color:var(--metin);text-align:center;max-width:330px;line-height:1.4} .bitis-alt b{color:var(--ana)} .bk-oduller{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:4px 0 6px;max-width:340px} .bk-odul{width:44px;opacity:0;animation:harfPat .4s cubic-bezier(.34,1.56,.64,1) forwards} .bk-odul svg{display:block;width:100%} @keyframes harfPat{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1);opacity:1}} #ekran-bitis .btn-ana{margin-top:6px;font-size:30px;padding:18px 64px;min-height:66px} .site-rozet{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.96);border:3px solid rgba(244,166,35,.6); border-radius:999px;padding:13px 30px 13px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15)} .site-rozet img{width:54px;height:58px;flex:none;object-fit:contain} .site-rozet .srmetin{display:flex;flex-direction:column;line-height:1.2} .site-rozet .srmetin b{font-family:'Baloo 2';font-weight:800;font-size:20px;color:var(--ana)} .site-rozet .srmetin small{font-weight:800;font-size:15px;color:var(--altin-k)} /* ---- EFEKTLER ---- */ #efekt{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden} .parca{position:fixed;pointer-events:none;animation:parcaUc .7s ease-out forwards} @keyframes parcaUc{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}} .konfeti{position:fixed;pointer-events:none;top:-14px;animation:kDus var(--s,2.6s) linear var(--g,0s) forwards} @keyframes kDus{to{transform:translateY(105vh) rotate(var(--d,540deg));opacity:0}} .dekor-demet{position:fixed;bottom:-8px;width:150px;z-index:3;pointer-events:none;animation:demetSalla 4.5s ease-in-out infinite} .dekor-demet.sol{left:-14px}.dekor-demet.sag{right:-14px} @keyframes demetSalla{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} body.oyunda .dekor-demet{display:none} @media(max-height:520px){.puslu{width:120px}.baslik{font-size:26px}.bitis-baslik{font-size:34px}.bk-puslu{transform:scale(.8)}}