/* ================= Öğretmenler Günü · "Tebeşir tahtası" teması ================= */
/* Sabah ışığında sınıf: krem duvar, yeşil tahta, bal rengi güneş; vurgu sıcak sarı tebeşir, etiket nane (wiki/product-concept.md 4i) */
:root {
  --bg: #2E3B33;
  --bg-deep: #141A16;
  --pink: #FFD27A;        /* vurgu: sarı tebeşir */
  --pink-deep: #E9A94A;
  --mint: #BFEAD6;        /* etiket: nane */
  --lilac: #E3E9DF;
  --cream: #FFF6E6;
  --gold: #FFD27A;
  --text: #FFFBF2;
  --muted: rgba(255, 248, 232, .8);
}
/* Arkada açık renk duvar: yazıların arkasında koyu yeşil-gri bir hale, sarı vurgu da okunsun */
.headline, .label, .sub { text-shadow: 0 1px 2px rgba(16, 28, 22, .55), 0 0 18px rgba(20, 34, 26, .5); }
.headline .accent { text-shadow: 0 1px 2px rgba(30, 22, 8, .6), 0 0 16px rgba(34, 26, 10, .55), 0 0 30px rgba(255, 200, 110, .3); }
.btn.primary {
  background: linear-gradient(180deg, #FFEAB0 0%, #F2BC52 100%); color: #2B1E04;
  box-shadow: 0 12px 34px -10px rgba(242, 188, 82, .75), inset 0 1px 0 rgba(255, 255, 255, .6);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(242, 188, 82, .75), 0 0 0 0 rgba(255, 220, 140, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 12px 34px -10px rgba(242, 188, 82, .75), 0 0 0 14px rgba(255, 220, 140, 0), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
.flash { background: radial-gradient(circle at 50% 40%, #FFFDF6 0%, #FFF0CC 30%, rgba(255, 230, 170, .35) 60%, rgba(255, 230, 170, 0) 80%); }
.loader { background: radial-gradient(90% 70% at 50% 45%, #3E5446 0%, #141A16 70%); }
.preview-pill { color: #2B1E04; background: rgba(255, 220, 140, .92); }
.ad-badge { background: #FFD27A; color: #2B1E04; }
.grain { display: none; }
#scene { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- silme ipucu: tahtanın üstünde parmak izi gibi bir ışık sağa sola gider ---------- */
.swipe-hint {
  position: fixed; left: 0; top: 0; width: 170px; height: 70px; margin: -35px 0 0 -85px;
  pointer-events: none; opacity: 0; transition: opacity .5s ease; z-index: 4;
}
.swipe-hint.on { opacity: 1; }
.swipe-hint i {
  position: absolute; top: 50%; left: 0; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 250, .95) 0%, rgba(230, 245, 235, .55) 45%, rgba(210, 240, 225, 0) 72%);
  box-shadow: 0 0 22px rgba(220, 245, 230, .55);
  animation: swipe 1.8s cubic-bezier(.45, 0, .35, 1) infinite;
}
.swipe-hint::after {
  content: ''; position: absolute; top: 50%; left: 10px; right: 10px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(235, 250, 240, 0), rgba(235, 250, 240, .45), rgba(235, 250, 240, 0));
  animation: trail 1.8s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes swipe {
  0% { transform: translateX(0) scale(.8); opacity: 0; }
  15% { opacity: 1; transform: translateX(10px) scale(1); }
  70% { opacity: 1; transform: translateX(126px) scale(1); }
  100% { transform: translateX(136px) scale(.8); opacity: 0; }
}
@keyframes trail { 0%, 100% { opacity: 0; } 40%, 70% { opacity: 1; } }