/* saqrena.com v4 · şafak: "göz bebeğinden şafağa" geçişi ve bant (öğeler açılış bölümünün yapışkan kutusunda: kaynak/bolumler/acilis.html).
   Varsayılan (hareket azaltma, betik yok): açılışın altında durgun bir bant (afiş + yazı).
   Geçiş düzeni: bant yapışkan kutunun görünen alanını kaplar; daire js/bolum/safak.js ile göz bebeğinden büyür
   (yalnız clip-path, transform, opacity). Yazı gökyüzünde, sakin alanda; koyu yazı, kontrastı ölçülür (araclar/gecis_kare.py). */
:root { --safak-bant: clamp(380px, 58vw, 88vh); }
@media (max-width: 640px) { :root { --safak-bant: min(120vw, 88vh); } }

.safak-bant { position: relative; height: var(--safak-bant); overflow: hidden; background: #2A1B0E; }
.safak-delik, .safak-zum { position: absolute; inset: 0; }
.safak-zum { will-change: transform; }
.safak-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--safak-x, 50%) var(--safak-y, 50%); }
html[dir="rtl"] .safak-video { transform: scaleX(-1); }
.safak-hale, .safak-kenar, .safak-golge { display: none; pointer-events: none; }
/* bandın altı geceye karışır: sonraki bölüme sert kenar kalmaz */
.safak-taban { position: absolute; inset-inline: 0; bottom: 0; height: 24%; background: linear-gradient(to bottom, rgba(10,8,6,0), rgba(10,8,6,.5) 55%, var(--gece)); pointer-events: none; }

/* yazı: gökyüzünde (bandın üst %40'ı düz, açık renk); koyu sıcak yazı */
.safak-yazi { position: absolute; inset-inline: 0; top: clamp(28px, 7vh, 72px); z-index: 4; display: grid; gap: clamp(8px, 1.3vh, 14px); justify-items: start; color: #1C1710; }
.safak-baslik { font-size: clamp(29px, 3.6vw, 60px); color: #1C1710; max-width: 100%; text-wrap: initial; }
.safak-alt { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; font-weight: 500; color: rgba(28,23,16,.86); }
.safak-yazi .satir { display: inline-block; vertical-align: top; max-width: 100%; }
.safak-yazi .satir-ic { transform: none; }
.safak-baslik .satir:nth-child(2) .satir-ic { --sira: 1; }
.safak-alt .satir-ic { --sira: 2.4; }

/* çapa: #safak, bandın üstüne gelir */
.bolum-safak { padding: 0; height: var(--safak-bant); margin-top: calc(-1 * var(--safak-bant)); pointer-events: none; }

/* ── geçiş düzeni ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .acilis-gecisli:not(.hata) .safak-bant { position: absolute; inset-inline: 0; bottom: 0; height: 100vh; height: 100lvh; z-index: 3; overflow: hidden; background: none; pointer-events: none; }
  /* görüntü katmanları daire açılana dek gizli; yazı gizlenmez (saydam ve satırları maskeli durur): ekran okuyucu başlığı her zaman bulur */
  html.js .acilis-gecisli:not(.hata) .safak-bant:not(.gorunur) > :not(.safak-yazi) { visibility: hidden; }
  html.js .acilis-gecisli:not(.hata) .safak-delik { z-index: 3; clip-path: circle(0 at 50% 50%); will-change: clip-path, opacity; }
  html.js .acilis-gecisli:not(.hata) .safak-kenar { display: block; position: absolute; inset: 0; z-index: 2; clip-path: circle(0 at 50% 50%); will-change: clip-path, opacity;
    background: linear-gradient(135deg, #FCE08C, #E3B341 48%, #B07D2A); }
  html.js .acilis-gecisli:not(.hata) .safak-hale { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(closest-side, rgba(227,179,65,0) 64%, rgba(227,179,65,.34) 78%, rgba(242,198,90,0) 100%); }
  html.js .acilis-gecisli:not(.hata) .safak-golge { display: block; position: absolute; left: 0; top: 0; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%; will-change: transform, opacity;
    background: radial-gradient(closest-side, rgba(6,4,2,0) 46%, rgba(6,4,2,.5) 82%, rgba(6,4,2,.8) 100%); }
  html.js .acilis-gecisli:not(.hata) .safak-yazi { top: calc(var(--ust-boy) + clamp(20px, 5.4vh, 64px)); }
  html.js .acilis-gecisli:not(.hata) .safak-yazi { transition: opacity .2s; }
  html.js .acilis-gecisli:not(.hata) .safak-yazi:not(.acik) { opacity: 0; transition: opacity .2s .4s; }
  html.js .acilis-gecisli:not(.hata) .safak-yazi:not(.acik) .satir-ic { transform: translateY(112%); }
  html.js .acilis-gecisli:not(.hata) .safak-yazi:not(.acik) .satir-ic { transition-duration: .5s; transition-delay: 0ms; }
  html.js .acilis-gecisli:not(.hata) + .bolum-safak { height: 100vh; height: 100lvh; margin-top: -100vh; margin-top: -100lvh; }
}