/* ================= Şükran Günü · "Şükran ağacı" teması ================= */
/* Altın saat: alacakaranlık mavisi gökyüzü, ufukta kehribar; vurgu bal rengi ve krem. Sıcak, sakin (wiki/product-concept.md 4h) */
:root {
  --bg: #2B2A4A;
  --bg-deep: #120E1C;
  --pink: #FFC46B;        /* vurgu: bal / kehribar */
  --pink-deep: #E08A2A;
  --mint: #FFD9B0;        /* etiket: şeftali */
  --lilac: #E6D3C2;
  --cream: #FFF3E0;
  --gold: #FFC46B;
  --text: #FFF8EE;
  --muted: rgba(255, 240, 222, .78);
}
/* Gökyüzü ufka yakın açık (altın saat): yazıların arkasında koyu mürdüm bir hale, altın vurgu da okunsun */
.headline, .label, .sub { text-shadow: 0 1px 2px rgba(50, 16, 40, .45), 0 0 18px rgba(60, 20, 50, .38); }
.headline .accent { text-shadow: 0 1px 2px rgba(60, 18, 30, .6), 0 0 16px rgba(70, 20, 40, .55), 0 0 30px rgba(255, 150, 70, .35); }
.btn.primary {
  background: linear-gradient(180deg, #FFE2A8 0%, #F2A541 100%); color: #2E1603;
  box-shadow: 0 12px 34px -10px rgba(242, 165, 65, .75), inset 0 1px 0 rgba(255, 255, 255, .6);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(242, 165, 65, .75), 0 0 0 0 rgba(255, 200, 120, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 12px 34px -10px rgba(242, 165, 65, .75), 0 0 0 14px rgba(255, 200, 120, 0), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
.flash { background: radial-gradient(circle at 50% 35%, #FFFBF0 0%, #FFE0B0 30%, rgba(255, 200, 140, .35) 60%, rgba(255, 200, 140, 0) 80%); }
.loader { background: radial-gradient(90% 70% at 50% 45%, #5A3A3A 0%, #120E1C 70%); }
.preview-pill { color: #2E1603; background: rgba(255, 205, 130, .92); }
.ad-badge { background: #FFC46B; color: #2E1603; }
.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; }

/* ---------- kaydırma ipucu: ağacı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, 250, 235, .95) 0%, rgba(255, 220, 160, .55) 45%, rgba(255, 200, 120, 0) 72%);
  box-shadow: 0 0 22px rgba(255, 210, 140, .6);
  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(255, 230, 190, 0), rgba(255, 230, 190, .45), rgba(255, 230, 190, 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; } }