/* Okuma Kulübü öğrenci dünyası: ortak tasarım dili (taslak/tasarim.css ile aynı kaynaktan).
   Kural: dünya düz vektör (img/vektor.svg), yalnız yol arkadaşı Pıtır 3D. Emoji yok.
   Renk adları her taslakta aynı; basılı düğme hissi tek bir gölge tonundan gelir. */
:root {
  --bg: #f7f5f0; --card: #fff; --ink: #141414; --ink-2: #5f5f63; --ink-3: #9a9aa0; --line: #ececec;
  --orange: #ff7a2f; --orange-d: #d9601c; --yellow: #ffc845; --yellow-d: #c98f00; --blue: #4a8cff; --blue-d: #2f6bd6;
  --green: #2fbf84; --green-d: #1f9466; --purple: #9b7be0; --purple-d: #7656c2; --pink: #ff6f91; --pink-d: #e04b70;
  --mint: #8fdcc0; --navy: #23213a; --navy-d: #000; --lock: #e5e2dc; --lock-d: #cdc8bf; --mark: #c8102e;
  --r-card: 28px; --r-btn: 999px;
  --ease-pop: cubic-bezier(.3, 1.5, .5, 1); --ease-soft: cubic-bezier(.3, .7, .4, 1);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; }

/* Basılabilir düğme: tek bileşen, renk değişkenle */
.b3 { --c: var(--navy); --cd: var(--navy-d); --t: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; text-decoration: none; color: var(--t); background: var(--c); border-radius: var(--r-btn); padding: 13px 22px;
  box-shadow: 0 5px 0 var(--cd); transition: transform .08s, box-shadow .08s; }
.b3:active { transform: translateY(5px); box-shadow: 0 0 0 var(--cd); }
.b3.orange { --c: var(--orange); --cd: var(--orange-d); } .b3.green { --c: var(--green); --cd: var(--green-d); }
.b3.light { --c: #fff; --cd: #e2dbcd; --t: var(--ink); }

/* Ses düğmesi */
.sound-toggle { position: fixed; left: 16px; top: 16px; z-index: 90; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink-2); font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.sound-toggle.inline { position: static; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* Köşedeki ses düğmesi tablet ve telefonda başlığa binmesin: üstte düğme kadar boşluk */
@media (max-width: 1180px) { html.has-sound body { padding-top: 52px; } }

/* Duygusal anlar: tam ekran, kısa, dokununca geçilir */
.moment { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 40%, var(--m1, #ff9a5c), var(--m2, #ff7a2f) 60%, var(--m3, #d9601c)); animation: m-in .35s ease-out; cursor: pointer; overflow: hidden; }
.moment.out { animation: m-out .3s ease-in forwards; }
@keyframes m-in { from { opacity: 0; } } @keyframes m-out { to { opacity: 0; } }
.moment .rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; opacity: .18;
  background: repeating-conic-gradient(#fff 0 10deg, transparent 10deg 30deg); animation: spin 30s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.moment .inner { position: relative; max-width: 460px; }
.moment .hero-img { height: 230px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.25)); animation: hero 0.7s var(--ease-pop); }
@keyframes hero { from { transform: scale(.3) translateY(40px); opacity: 0; } }
.moment small { display: block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-top: 12px; }
.moment h2 { font-size: 38px; font-weight: 900; letter-spacing: -.03em; margin: 6px 0 8px; line-height: 1.05; }
.moment p { font-weight: 600; font-size: 17px; opacity: .95; margin: 0 0 22px; }
.moment .tap { display: block; margin-top: 18px; font-size: 13px; opacity: .75; font-weight: 700; }
.moment .confetti { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; animation: fall-c linear forwards; }
@keyframes fall-c { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
/* evre atlama: eski hâl parlayıp kaybolur, yenisi gelir */
.evolve { position: relative; height: 230px; width: 260px; margin: 0 auto; }
.evolve img { position: absolute; left: 50%; bottom: 0; height: 230px; transform: translateX(-50%); filter: drop-shadow(0 18px 24px rgba(0,0,0,.25)); }
.evolve .old { animation: ev-old 1.6s ease-in forwards; }
.evolve .new { opacity: 0; animation: ev-new .9s var(--ease-pop) 1.5s forwards; }
.evolve .flash { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255,255,255,0) 65%); opacity: 0; animation: ev-flash .7s ease-out 1.2s; }
@keyframes ev-old { 0%, 30% { filter: brightness(1); } 25%, 55%, 85% { transform: translateX(-50%) scale(1.04); } 100% { filter: brightness(6); opacity: 0; transform: translateX(-50%) scale(1.1); } }
@keyframes ev-new { from { opacity: 0; transform: translateX(-50%) scale(.4); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes ev-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .moment, .moment *, .evolve * { animation-duration: .01s !important; animation-delay: 0s !important; } .moment .rays, .moment .confetti { display: none; } }

/* Ortak arka plan: gökyüzü ve süzülen bulutlar (kutlama.js her sayfaya ekler). İçerik üstte kalır. */
html.sky body { background: linear-gradient(180deg, color-mix(in srgb, var(--day, #7fb8ff) 34%, #fff) 0, color-mix(in srgb, var(--day, #7fb8ff) 18%, #fff) 50%, color-mix(in srgb, var(--day, #7fb8ff) 8%, #fff) 100%) fixed !important; }  /* gökyüzü günün renginin açık tonunda (kartla uyumlu) */
.sky-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-bg .cl { position: absolute; left: 0; height: 34px; background: #fff; border-radius: 30px; animation: sky-drift linear infinite; }
.sky-bg .cl::before, .sky-bg .cl::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.sky-bg .cl::before { width: 46px; height: 46px; left: 16px; top: -22px; } .sky-bg .cl::after { width: 58px; height: 58px; left: 42px; top: -30px; }
@keyframes sky-drift { from { transform: translateX(-220px); } to { transform: translateX(calc(100vw + 220px)); } }
@media (prefers-reduced-motion: reduce) { .sky-bg .cl { animation: none; left: var(--x); } }