/* ==========================================================================
   Mizan Beslenme — hafif hareket katmanı (motion.css)

   site.css ve premium.css'in üzerine biner. Açılış ekranı, gren dokusu,
   sabit köşe arayüzü ve kaydırma kilitleri kaldırıldı; hareketler yalnızca
   transform/opacity ile yapılır. Hareketin tamamı `html.film-on` sınıfına
   bağlıdır; JS çalışmazsa ya da "hareketi azalt" açıksa sayfa eksiksiz
   ve durağan görünür.
   ========================================================================== */

:root {
  --film-out: cubic-bezier(0.16, 1, 0.3, 1);
  --film-hud: 0.66rem;
  --rule: 1px;
}

/* ==========================================================================
   1. Üstteki ilerleme çizgisi
   ========================================================================== */
.film-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: 2px;
  pointer-events: none;
}
.film-bar i {
  display: block;
  height: 100%;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   2. Hero girişi — görsel hemen görünür (LCP gecikmez), yalnızca hafifçe
   yerine oturur; yazılar kısa bir gecikmeyle süzülür.
   ========================================================================== */
.hero-media { overflow: hidden; }
html.film-on .hero-img { transform: scale(1.06); transition: transform 1.8s var(--film-out); }
html.film-on .hero.is-in .hero-img { transform: none; }

html.film-on .hero .hero-kicker,
html.film-on .hero .hero-title,
html.film-on .hero .hero-lede,
html.film-on .hero .hero-cta,
html.film-on .hero .next-slot {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--film-out), transform 1s var(--film-out);
}
html.film-on .hero.is-in .hero-kicker { opacity: 1; transform: none; transition-delay: 0.05s; }
html.film-on .hero.is-in .hero-title  { opacity: 1; transform: none; transition-delay: 0.12s; }
html.film-on .hero.is-in .hero-lede   { opacity: 1; transform: none; transition-delay: 0.26s; }
html.film-on .hero.is-in .hero-cta    { opacity: 1; transform: none; transition-delay: 0.34s; }
html.film-on .hero.is-in .next-slot   { opacity: 1; transform: none; transition-delay: 0.42s; }

/* ==========================================================================
   3. Başlıklar — site.js'in [data-reveal] açılışına biraz daha tok bir eğri
   ========================================================================== */
html.film-on.reveal-on .h2[data-reveal] {
  transition: opacity 0.9s var(--film-out), transform 1.1s var(--film-out);
}
html.film-on.reveal-on .h2[data-reveal]:not(.is-in) { transform: translateY(36px); }

/* ==========================================================================
   4. Bölümler arası şerit (sonsuz kayan yazı, saf CSS)
   ========================================================================== */
.ribbon {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 0;
  background: var(--paper);
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  user-select: none;
}
.ribbon--dark { background: var(--bezel); border-color: rgba(247, 245, 239, 0.14); color: #F7F5EF; }
.ribbon--sage { background: var(--sage); border-color: var(--line); }
.ribbon-track {
  display: flex;
  width: max-content;
}
.ribbon.is-ready .ribbon-track { animation: ribbon-loop var(--ribbon-dur, 40s) linear infinite; }
.ribbon--sage.is-ready .ribbon-track { animation-direction: reverse; }
.ribbon.is-off .ribbon-track,
.ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbon-loop { to { transform: translateX(-50%); } }

.ribbon-track > span {
  display: flex;
  align-items: center;
  flex: none;
}
.ribbon-track em {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-inline: 28px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  padding-block: clamp(14px, 2.2vw, 24px);
  white-space: nowrap;
}
.ribbon-track em::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olive);
  flex: none;
}
.ribbon--dark .ribbon-track em::after { background: #D3E3B8; }
.ribbon-track em:nth-child(even) { font-style: italic; color: var(--ink-2); }
.ribbon--dark .ribbon-track em:nth-child(even) { color: rgba(247, 245, 239, 0.7); }

/* ==========================================================================
   5. Yöntem sahnesi
   ========================================================================== */
.scene {
  position: relative;
  background: var(--bezel);
  color: #F7F5EF;
  min-height: 88svh;
  display: grid;
  align-content: center;
  padding: calc(var(--pad-y) * 0.9) var(--pad-x);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.scene::before { display: none !important; }
.scene-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.scene-label {
  font-family: var(--mono);
  font-size: var(--film-hud);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.55);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.scene-label::after {
  content: "";
  flex: 1;
  height: var(--rule);
  background: rgba(247, 245, 239, 0.2);
}
.scene-lines { display: grid; gap: clamp(10px, 1.6vw, 20px); font-weight: 400; text-wrap: balance; }
.scene-lines > span {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.scene-lines em { font-style: italic; color: #D3E3B8; }
.scene-foot {
  margin-top: clamp(36px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  font-family: var(--mono);
  font-size: var(--film-hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, 0.6);
}
.scene-foot b { color: #F7F5EF; font-weight: 400; }

.scene-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  overflow: clip;
}
.scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}
.scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 10, 0.5);
}

/* Satırlar soluk başlar, ekranda yukarı çıktıkça aydınlanır */
html.film-on .scene-lines > span {
  opacity: 0.18;
  transform: translateY(14px);
  transition: opacity 0.9s var(--film-out), transform 1s var(--film-out);
}
html.film-on .scene-lines > span.is-lit { opacity: 1; transform: none; }
html.film-on .scene .scene-label,
html.film-on .scene .scene-foot { opacity: 0; transition: opacity 1s var(--film-out) 0.2s; }
html.film-on .scene.is-in .scene-label,
html.film-on .scene.is-in .scene-foot { opacity: 1; }

/* ==========================================================================
   6. Büyük kelimeler yumuşakça yükselir (kırpma yok; harfler kesilmez)
   ========================================================================== */
html.film-on .sky-word p,
html.film-on .footer-word p {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--film-out), transform 1.2s var(--film-out);
}
html.film-on .sky-word.is-in p,
html.film-on .footer-word.is-in p { opacity: 1; transform: none; }

/* ==========================================================================
   7. Küçük dokunuşlar
   ========================================================================== */
html.film-on .facts-num,
html.film-on .program-total b { font-variant-numeric: tabular-nums; }

/* Yeni üretilen menü ve saat listeleri */
html.film-on .is-fresh > * { animation: film-fresh 0.45s var(--film-out) both; }
@keyframes film-fresh { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   8. Hareketi azalt / yazdırma
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none !important; }
}

@media print {
  .film-bar, .ribbon, .scene { display: none !important; }
}