/* =========================================================== Pırpır Akademi — "Çıkartma Defteri" teması Çocuk-dostu, sticker-book estetiği, bol yay animasyonu. Fontlar HTML 'de ile yüklenir (Baloo 2 + Nunito). =========================================================== */ :root { --kagit: #fef6e4; --kagit-2: #fff9ef; --metin: #3a2a1a; --gri: #9c8d7d; --kirmizi: #ff6b6b; --turkuaz: #2bc4b8; --mor: #6c5ce7; --pembe: #fd79a8; --yesil: #06d6a0; --sari: #ffd166; --turuncu: #ff9f43; --font-baslik: 'Baloo 2', 'Segoe UI', sans-serif; --font-govde: 'Nunito', -apple-system, 'Segoe UI', sans-serif; /* tombul "çıkartma" gölgesi + kenar */ --golge-kart: 0 10px 0 -2px rgba(0,0,0,0.08), 0 16px 30px -8px rgba(0,0,0,0.22); --golge-yumusak: 0 6px 18px rgba(58,42,26,0.10); --kenar: 3px solid rgba(255,255,255,0.85); --yay: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot / zıplama */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-govde); font-weight: 600; color: var(--metin); min-height: 100vh; -webkit-user-select: none; user-select: none; overflow-x: hidden; position: relative; background-color: var(--kagit); /* kağıt dokusu: ince noktalı desen + yumuşak renk yamaları */ background-image: radial-gradient(circle at 12% 18%, rgba(108,92,231,0.07), transparent 38%), radial-gradient(circle at 88% 12%, rgba(43,196,184,0.08), transparent 40%), radial-gradient(circle at 78% 88%, rgba(253,121,168,0.07), transparent 42%), radial-gradient(circle at 20% 92%, rgba(255,209,102,0.10), transparent 40%), radial-gradient(rgba(58,42,26,0.05) 1.4px, transparent 1.4px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 22px 22px; background-attachment: fixed; } /* ===== YÜZEN ARKA PLAN ŞEKİLLERİ ===== */ .dekor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .dekor span { position: absolute; font-size: 30px; opacity: 0.5; animation: yuz 14s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08)); } .dekor span:nth-child(1) { left: 6%; top: 14%; animation-delay: 0s; font-size: 34px; } .dekor span:nth-child(2) { left: 86%; top: 22%; animation-delay: -3s; font-size: 26px; } .dekor span:nth-child(3) { left: 14%; top: 70%; animation-delay: -6s; font-size: 30px; } .dekor span:nth-child(4) { left: 80%; top: 74%; animation-delay: -9s; font-size: 38px; } .dekor span:nth-child(5) { left: 48%; top: 8%; animation-delay: -4.5s;font-size: 22px; } .dekor span:nth-child(6) { left: 92%; top: 52%; animation-delay: -7.5s;font-size: 28px; } body > *:not(.dekor) { position: relative; z-index: 1; } /* ===== ANİMASYONLAR ===== */ @keyframes pop { 0% { opacity: 0; transform: translateY(26px) scale(0.82); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes salla { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes yuz { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(8deg); } } @keyframes parla { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(320%); } } @keyframes nabiz { 0%,100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.45); } 50% { box-shadow: 0 0 0 14px rgba(108,92,231,0); } } @keyframes giris-asagi { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } /* ===== ÜST BAR ===== */ .ust-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,0.82); backdrop-filter: blur(8px); border-bottom: 3px solid rgba(255,209,102,0.55); position: sticky; top: 0; z-index: 100; animation: giris-asagi 0.5s ease both; } .ust-bar > div:nth-child(2) > div:first-child { font-family: var(--font-baslik); font-weight: 800; } .ust-bar .geri { width: 44px; height: 44px; background: linear-gradient(135deg, var(--kirmizi), #ee5a52); border-radius: 14px; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 -1px rgba(238,90,82,0.5), 0 8px 14px rgba(0,0,0,0.15); transition: transform 0.18s var(--yay); -webkit-tap-highlight-color: transparent; } .ust-bar .geri:active { transform: scale(0.86) rotate(-8deg); } /* ===== BAŞLIK (ana sayfa) ===== */ .baslik { text-align: center; padding: 18px 20px 6px; } .baslik .maskot { width: 104px; height: 104px; margin: 0 auto 6px; display: block; border-radius: 28px; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18)); animation: bob 3.4s ease-in-out infinite; } .baslik h1 { font-family: var(--font-baslik); font-weight: 800; font-size: 34px; letter-spacing: 0.5px; line-height: 1.05; background: linear-gradient(120deg, #ff6b6b, #ff9f43, #6c5ce7, #2bc4b8); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kayan-renk 8s ease infinite; } @keyframes kayan-renk { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .baslik p { font-size: 16px; color: var(--gri); font-weight: 700; margin-top: 2px; } /* ===== PUAN KUTUSU ===== */ .puan-kutu { text-align: center; padding: 4px 20px 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .puan-kutu span { background: white; padding: 9px 18px; border-radius: 22px; font-size: 14px; font-weight: 800; color: var(--mor); border: 3px solid var(--sari); box-shadow: 0 5px 0 -1px rgba(255,209,102,0.5); animation: pop 0.5s var(--yay) both; } .puan-kutu span:nth-child(2) { animation-delay: 0.1s; border-color: var(--turkuaz); box-shadow: 0 5px 0 -1px rgba(43,196,184,0.45); } /* ===== SINIF GRID + KARTI ===== */ .sinif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 20px 30px; max-width: 520px; margin: 0 auto; } .sinif-kart { position: relative; border-radius: 26px; padding: 26px 16px 22px; color: white; text-align: center; cursor: pointer; overflow: hidden; border: var(--kenar); box-shadow: var(--golge-kart); transition: transform 0.2s var(--yay), box-shadow 0.2s ease; animation: pop 0.55s var(--yay) both; -webkit-tap-highlight-color: transparent; } .sinif-kart::after { /* parlama */ content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-120%); } .sinif-kart:nth-child(1){animation-delay:.05s} .sinif-kart:nth-child(2){animation-delay:.13s} .sinif-kart:nth-child(3){animation-delay:.21s} .sinif-kart:nth-child(4){animation-delay:.29s} .sinif-kart:hover { transform: translateY(-4px) rotate(-1deg) scale(1.02); } .sinif-kart:hover::after { animation: parla 0.9s ease; } .sinif-kart:active { transform: scale(0.94) rotate(-2deg); } .sinif-kart .numara { font-family: var(--font-baslik); font-size: 56px; font-weight: 800; line-height: 1; margin-bottom: 6px; text-shadow: 0 4px 0 rgba(0,0,0,0.12); } .sinif-kart .adi { font-family: var(--font-baslik); font-size: 18px; font-weight: 700; margin-bottom: 4px; } .sinif-kart .meta { font-size: 13px; font-weight: 700; opacity: 0.9; } .sinif-kart .rozet-emoji { position: absolute; top: 10px; right: 12px; font-size: 24px; animation: salla 3s ease-in-out infinite; } /* ===== DERS GRID + KARTI ===== */ .ders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ders-kart { position: relative; border-radius: 24px; padding: 22px 16px 18px; color: white; overflow: hidden; cursor: pointer; border: var(--kenar); box-shadow: var(--golge-kart); transition: transform 0.2s var(--yay); animation: pop 0.5s var(--yay) both; -webkit-tap-highlight-color: transparent; } .ders-kart:nth-child(1){animation-delay:.05s} .ders-kart:nth-child(2){animation-delay:.12s} .ders-kart:nth-child(3){animation-delay:.19s} .ders-kart:nth-child(4){animation-delay:.26s} .ders-kart:hover { transform: translateY(-4px) rotate(1deg) scale(1.02); } .ders-kart:active { transform: scale(0.95) rotate(-1deg); } .ders-kart .ikon { font-size: 40px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.18)); animation: bob 3s ease-in-out infinite; } .ders-kart:nth-child(even) .ikon { animation-delay: -1.5s; } .ders-kart .adi { font-family: var(--font-baslik); font-weight: 700; font-size: 18px; margin-bottom: 3px; } .ders-kart .meta { font-size: 13px; font-weight: 700; opacity: 0.9; margin-bottom: 12px; } .ders-kart .cubuk { background: rgba(255,255,255,0.28); border-radius: 10px; height: 8px; overflow: hidden; } .ders-kart .cubuk-dolu { background: white; height: 100%; border-radius: 10px; box-shadow: 0 0 8px rgba(255,255,255,0.6); transition: width 0.6s var(--yay); } /* ===== GÖRSEL İKONLAR (emoji yerine PNG) ===== */ .ders-kart .ders-ikon { width: 64px; height: 64px; object-fit: contain; display: block; margin-bottom: 4px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.22)); animation: bob 3s ease-in-out infinite; } .ders-kart:nth-child(even) .ders-ikon { animation-delay: -1.5s; } .sinif-kart .sinif-img { width: 92px; height: 92px; object-fit: contain; display: block; margin: 0 auto 4px; filter: drop-shadow(0 5px 7px rgba(0,0,0,0.25)); animation: bob 3.2s ease-in-out infinite; } .sinif-kart:nth-child(even) .sinif-img { animation-delay: -1.6s; } .sinif-kart .sinif-no { position: absolute; top: 10px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--metin); font-family: var(--font-baslik); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 -1px rgba(0,0,0,0.12); } /* ===== İLERLEME ÇUBUĞU ===== */ .ilerleme-cubuk { background: white; border-radius: 22px; padding: 16px 18px; margin-bottom: 18px; border: 3px solid rgba(108,92,231,0.18); box-shadow: var(--golge-yumusak); animation: pop 0.5s var(--yay) both; } .ilerleme-cubuk span { font-family: var(--font-baslik); } .ilerleme-cubuk .cubuk { position: relative; background: #f1ece3; border-radius: 12px; height: 16px; overflow: hidden; } .ilerleme-cubuk .cubuk-dolu { position: relative; background: linear-gradient(90deg, var(--mor), var(--pembe), var(--turuncu)); height: 100%; border-radius: 12px; transition: width 0.7s var(--yay); } .ilerleme-cubuk .cubuk-dolu::after { content: ''; position: absolute; inset: 0; width: 30px; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent); animation: parla 2.4s ease-in-out infinite; } /* ===== KONU LİSTESİ + KARTI ===== */ .konu-listesi { padding: 4px 16px 90px; max-width: 600px; margin: 0 auto; } .konu-kart { background: white; border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; border: 3px solid #f0eadf; box-shadow: var(--golge-yumusak); transition: transform 0.2s var(--yay), box-shadow 0.2s ease; margin-bottom: 12px; animation: pop 0.45s var(--yay) both; -webkit-tap-highlight-color: transparent; } .konu-kart:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 22px rgba(58,42,26,0.14); } .konu-kart:active { transform: scale(0.98); } .konu-kart.tamamlanmis { border-color: var(--yesil); background: linear-gradient(white, #f3fffb); } .konu-kart.devam { border-color: var(--mor); box-shadow: 0 6px 20px rgba(108,92,231,0.22); } .konu-kart.kilitli { border-color: #eee5d8; opacity: 0.72; background: #faf6ee; cursor: default; } .konu-kart .durum { width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 3px solid #fff; box-shadow: 0 4px 0 -1px rgba(0,0,0,0.08); } .konu-kart.tamamlanmis .durum { background: linear-gradient(135deg, var(--yesil), #04b389); color: white; animation: bob 2.6s ease-in-out infinite; } .konu-kart.devam .durum { background: linear-gradient(135deg, var(--mor), #a29bfe); color: white; animation: nabiz 2s infinite; } .konu-kart.kilitli .durum { background: #ece3d6; color: #b9ab99; } .konu-kart .bilgi { flex: 1; min-width: 0; } .konu-kart .baslik { font-family: var(--font-baslik); font-weight: 700; font-size: 16px; line-height: 1.2; } .konu-kart .alt-bilgi { font-size: 12px; color: var(--gri); font-weight: 700; margin-top: 3px; } .konu-kart .sure { font-size: 12px; color: var(--turuncu); font-weight: 800; margin-top: 3px; } .konu-kart.devam::after, .konu-kart.tamamlanmis::after { content: '›'; font-size: 28px; color: var(--mor); font-weight: 800; margin-left: 2px; } .konu-kart .ilerleme-kucuk { background: #f0ece3; border-radius: 6px; height: 5px; margin-top: 7px; overflow: hidden; } .konu-kart .ilerleme-kucuk .dolu { background: var(--mor); height: 100%; border-radius: 6px; } .konu-kart .yuzde { font-family: var(--font-baslik); font-size: 12px; font-weight: 700; } .konu-kart.tamamlanmis .yuzde { color: var(--yesil); } .konu-kart.devam .yuzde { color: var(--mor); } /* ===== FİLTRE ÇUBUĞU ===== */ .filtre-cubuk { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 14px; -webkit-overflow-scrolling: touch; } .filtre-cubuk::-webkit-scrollbar { display: none; } .filtre-cubuk .sekme { padding: 9px 16px; border-radius: 22px; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; background: white; color: var(--gri); border: 3px solid #f0eadf; transition: transform 0.18s var(--yay), background 0.2s; -webkit-tap-highlight-color: transparent; } .filtre-cubuk .sekme:active { transform: scale(0.92); } .filtre-cubuk .sekme.aktif { background: linear-gradient(135deg, var(--mor), #a29bfe); color: white; border-color: #fff; box-shadow: 0 5px 0 -1px rgba(108,92,231,0.4); } /* ===== KULLANICI BAR ===== */ .kullanici-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); border-bottom: 2px solid rgba(255,209,102,0.4); } .kullanici-bar .kadi { font-size: 14px; font-weight: 800; color: var(--mor); } .kullanici-bar .rol { font-size: 12px; color: var(--metin); background: var(--sari); padding: 3px 10px; border-radius: 12px; font-weight: 800; } .kullanici-bar .cikis { font-size: 13px; color: var(--kirmizi); cursor: pointer; font-weight: 800; } .kullanici-mini { text-align: right; } /* ===== SES BUTONU (kalp atışı) ===== */ @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.4); } 50% { box-shadow: 0 0 0 12px rgba(108,92,231,0); } } .ses-buton { background: linear-gradient(135deg, var(--mor), #a29bfe); border-radius: 18px; padding: 16px; text-align: center; color: white; font-weight: 800; cursor: pointer; border: 3px solid #fff; animation: pulse 2s infinite; -webkit-tap-highlight-color: transparent; } .ses-buton:active { animation: none; transform: scale(0.97); } /* ===== MODAL ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(58,42,26,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .modal-overlay.acik { opacity: 1; pointer-events: auto; } .modal-icerik { background: var(--kagit-2); border-radius: 28px; padding: 28px; max-width: 400px; width: 100%; max-height: 90vh; overflow-y: auto; border: 4px solid #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.3); transform: scale(0.85) translateY(20px); transition: transform 0.35s var(--yay); } .modal-overlay.acik .modal-icerik { transform: scale(1) translateY(0); } /* ===== ROZET / YILDIZ / BUTON / İSTATİSTİK / NAV ===== */ .rozet-kutu { background: linear-gradient(135deg, var(--sari), var(--turuncu)); border-radius: 18px; padding: 16px; display: flex; align-items: center; gap: 16px; color: white; border: 3px solid #fff; } .rozet-kutu .ikon { width: 56px; height: 56px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; } .yildizlar { text-align: center; font-size: 36px; } .buton-kutu { background: linear-gradient(135deg, var(--mor), #a29bfe); border-radius: 18px; padding: 16px; text-align: center; color: white; font-family: var(--font-baslik); font-weight: 700; font-size: 16px; cursor: pointer; border: 3px solid #fff; box-shadow: 0 6px 0 -1px rgba(108,92,231,0.4); transition: transform 0.18s var(--yay); -webkit-tap-highlight-color: transparent; } .buton-kutu:active { transform: translateY(3px) scale(0.98); box-shadow: 0 2px 0 -1px rgba(108,92,231,0.4); } .buton-ikincil { background: white; border: 3px solid #f0eadf; border-radius: 14px; padding: 12px 20px; font-size: 14px; font-weight: 800; cursor: pointer; text-align: center; } .buton-satir { display: flex; gap: 10px; } .istatistik-kutu { text-align: center; border-radius: 14px; padding: 12px; } .istatistik-kutu .deger { font-family: var(--font-baslik); font-size: 26px; font-weight: 800; } .istatistik-kutu .etiket { font-size: 12px; color: var(--gri); font-weight: 700; } .alt-nav { display: flex; justify-content: space-between; padding: 16px; } .alt-nav .buton { padding: 12px 20px; border-radius: 14px; font-size: 14px; font-weight: 800; cursor: pointer; } .alt-nav .buton.onceki { background: white; border: 3px solid #f0eadf; color: var(--gri); } .alt-nav .buton.sonraki { background: linear-gradient(135deg, var(--mor), #a29bfe); color: white; border: 3px solid #fff; } /* ===== ADMIN PANEL ===== */ .admin-panel { background: white; margin: 0 16px 16px; border-radius: 18px; padding: 16px; border: 3px solid rgba(108,92,231,0.18); box-shadow: var(--golge-yumusak); } .admin-panel h3 { font-family: var(--font-baslik); font-size: 15px; color: var(--mor); margin-bottom: 10px; } .admin-btn { display: inline-block; padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer; margin: 3px; border: 3px solid #fff; color: white; box-shadow: 0 4px 0 -1px rgba(0,0,0,0.12); } .admin-btn.ac { background: var(--yesil); } .admin-btn.kilitle { background: var(--kirmizi); } .sayfa-icerik { padding: 16px; padding-bottom: 80px; } /* ===== ERİŞİLEBİLİRLİK: hareket azaltma ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1s !important; } .dekor { display: none; } }