/* ── Dört küre demosu — perde metinleri + ziyaretçi kontrolleri (yalnız index.html). ──
   acilis.css katman/yedek stillerini tamamlar; onu değiştirmez. */

/* Perde metin bloğu — kürenin altında, alt-orta bantta; dikeyde ortalı, okunur. */
#dk-text {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  width: min(680px, 86vw);
  text-align: center;
  z-index: 4;               /* kanvasın üstünde; pointer-events yok → başlık/dil seçici tıklanır kalır */
  /* not: top yukarıda tanımlı (küre ile başlık/metin arası nefes payı için aşağı alındı) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
  /* Dört perdede AYNI dikey ritim: başlık→paragraf ve paragraf→paragraf boşluğu tek değişkenden. */
  --dk-gap: clamp(16px, 2.1vh, 22px);
}
#dk-text .dk-title {
  font-family: 'Cormorant Garamond', 'Literata', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: rgba(214, 182, 120, 0.92);   /* altın */
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.25;
  margin: 0 0 var(--dk-gap);
  text-wrap: balance;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85);
}
#dk-text .dk-p {
  font-family: 'Cormorant Garamond', 'Literata', serif;
  font-weight: 400;
  color: #E8DCC4;            /* şampanya */
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.5;
  /* Sabit, dar ölçü → satırlar düzenli; ~46-52 karakter, masaüstünde en çok ~560px.
     text-wrap:balance satırları eşitler ve son satırda tek kelime kalmasını önler. */
  width: min(46ch, 560px);
  max-width: 90vw;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}
#dk-text .dk-p + .dk-p { margin-top: var(--dk-gap); }

/* Kapanış satırı — "İyi keşifler." (altın, metnin altında) */
#dk-closing {
  position: fixed;
  left: 50%;
  top: 78%;               /* metin bloğu aşağı alındı → kapanış satırı da onunla birlikte indi */
  transform: translateX(-50%);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  font-family: 'Cormorant Garamond', 'Literata', serif;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: rgba(214, 182, 120, 0.92);
  font-size: clamp(16px, 2vw, 21px);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
  transition: opacity 120ms linear;
}

/* Ziyaretçi kontrolleri — atla (sağ-alt) + yeniden oynat (demo bir kez oynadıktan sonra) */
#dk-skip { display: none; }               /* yalnız canlı animasyon yolunda görünür (aşağıda) */
html.acilis-anim #dk-skip { display: block; }
#dk-skip, #dk-replay {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 6;
  font-family: 'Cormorant Garamond', 'Literata', serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(232, 220, 196, 0.62);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(11, 10, 9, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color 160ms ease, background 160ms ease;
}
#dk-skip:hover, #dk-replay:hover {
  color: rgba(214, 182, 120, 0.95);
  background: rgba(11, 10, 9, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  #dk-text, #dk-closing { transition: none; }
}

/* Mobilde metni biraz yukarı çek (klavye/alt bar payı) ve kenar boşluğu koru. */
@media (max-width: 520px) {
  #dk-text { top: 56%; width: 90vw; }
  #dk-closing { top: 76%; }
}