/* ==========================================================================
   VERA COFFEE — Public site: kabuk, hero ve bölümler
   main.css'ten SONRA yüklenir; katman sırası orada tanımlıdır.
   ========================================================================== */

@layer components {

  /* ======================================================================
     BAŞLIK (HEADER)
     Hero üzerindeyken şeffaf ve açık renk; kaydırınca beyazlaşır.
     ====================================================================== */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    color: var(--porcelain);
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
  }
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(25 20 17 / .55), transparent);
    opacity: 1;
    transition: opacity var(--dur) var(--ease-out);
    pointer-events: none;
  }
  /* Hero'dan çıkıldığında */
  .site-header.is-solid {
    background: color-mix(in srgb, var(--porcelain) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
  }
  .site-header.is-solid::before { opacity: 0; }
  /* Aşağı kaydırırken gizlen, yukarı kaydırırken göster */
  .site-header.is-hidden { transform: translateY(-100%); }
  /* Hero'su olmayan sayfalarda baştan katı */
  .no-hero .site-header {
    position: sticky;
    background: var(--porcelain);
    color: var(--ink);
    box-shadow: 0 1px 0 var(--line);
  }
  .no-hero .site-header::before { display: none; }

  /* .shell ile birlikte kullanılır — genişliği .shell belirler,
     burada width tanımlamak onu ezer. */
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    z-index: 2;
  }
  .brand { min-height: 32px; }
  .brand img {
    height: 22px;
    width: auto;
    transition: opacity var(--dur) var(--ease-out);
  }
  .brand__light { display: block; }
  .brand__dark  { display: none; }
  .is-solid .brand__light, .no-hero .brand__light { display: none; }
  .is-solid .brand__dark,  .no-hero .brand__dark  { display: block; }
  .nav-open .brand__light { display: block; }
  .nav-open .brand__dark  { display: none; }

  /* --- Ana gezinme ------------------------------------------------------ */
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
  .nav__link {
    position: relative;
    font-size: var(--step--1);
    font-weight: 450;
    letter-spacing: .02em;
    padding-block: .35em;
    white-space: nowrap;
  }
  .nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav__link:hover::after,
  .nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
  .nav__link[aria-current='page'] { font-weight: 550; }

  .header-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

  .header-status {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
  }
  .header-status__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6FA97C;
    box-shadow: 0 0 0 3px color-mix(in srgb, #6FA97C 25%, transparent);
  }
  .header-status--closed .header-status__dot { background: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); }

  /* --- Hamburger -------------------------------------------------------- */
  .nav-toggle {
    display: none;
    width: 44px; height: 44px;
    margin-right: -10px;
    position: relative;
    z-index: 2;
    color: inherit;
  }
  .nav-toggle span {
    position: absolute;
    left: 11px;
    width: 22px; height: 1.5px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .nav-toggle span:nth-child(1) { top: 18px; }
  .nav-toggle span:nth-child(2) { top: 25px; }
  .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

  /* --- Mobil menü paneli ------------------------------------------------ */
  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
    background: var(--ink);
    color: var(--porcelain);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 620ms var(--ease-out);
    visibility: hidden;
    overflow-y: auto;
  }
  .nav-open .nav-panel { clip-path: inset(0 0 0 0); visibility: visible; }

  .nav-panel__list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .nav-panel__link {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.15;
    padding-block: .12em;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color var(--dur-fast) linear;
  }
  .nav-open .nav-panel__link { opacity: 1; transform: none; }
  .nav-panel__link:hover { color: var(--oak); }
  .nav-panel__foot {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid color-mix(in srgb, var(--porcelain) 15%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5) var(--sp-7);
    font-size: var(--step--1);
    opacity: 0;
    transition: opacity 400ms 260ms var(--ease-out);
  }
  .nav-open .nav-panel__foot { opacity: .8; }
  .nav-panel__foot a,
  .nav-panel__foot span { display: inline-flex; align-items: center; min-height: 26px; }

  @media (max-width: 980px) {
    .nav, .header-status { display: none; }
    .nav-toggle { display: block; }
    .header-actions .btn { display: none; }
  }


  /* ======================================================================
     HERO — kaydırmayla ilerleyen video
     ====================================================================== */
  .hero { position: relative; background: var(--ink); }

  /* JS bunu moda ve cihaza göre günceller; burası güvenli varsayılan. */
  .hero__track { height: 185vh; }
  @media (max-width: 860px) { .hero__track { height: 170vh; } }

  .hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .hero__media { position: absolute; inset: 0; z-index: -3; }
  .hero__media video,
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Video kaynağı 848×478 — tam ekranda büyütülüyor.
       Hafif kontrast/doygunluk artışı yükseltme artefaktlarını
       gizleyip sinematik bir doku verir. */
    filter: contrast(1.06) saturate(1.05) brightness(.94);
    /* Kaydırdıkça çok hafif yakınlaşma (JS --zoom'u günceller) */
    transform: scale(var(--zoom, 1));
    transform-origin: center 55%;
    will-change: transform;
  }
  .hero__media video { opacity: 0; transition: opacity 800ms var(--ease-out); }
  .hero.is-video-ready .hero__media video { opacity: 1; }
  .hero.is-video-ready .hero__media > picture { opacity: 0; transition: opacity 800ms var(--ease-out); }

  /* Poster fallback modunda yumuşak Ken Burns */
  .hero.is-static .hero__media img {
    animation: kenburns 24s var(--ease-in-out) infinite alternate;
  }
  @keyframes kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero.is-static .hero__media img { animation: none; }
  }

  /* Okunabilirlik katmanı */
  /* Video her karede farklı parlaklıkta. Metnin HER karede okunabilir kalması
     için katman bilinçli olarak koyu: WCAG AA kontrastı garanti altına alınıyor. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(110% 80% at 50% 50%, rgb(25 20 17 / .34) 0%, rgb(25 20 17 / .62) 100%),
      linear-gradient(to bottom,
        rgb(25 20 17 / .58) 0%,
        rgb(25 20 17 / .30) 28%,
        rgb(25 20 17 / .32) 62%,
        rgb(25 20 17 / .78) 100%);
  }

  /* İnce film greni — düşük çözünürlüklü videoyu "kasıtlı" gösterir */
  .hero__grain {
    position: absolute;
    inset: -100%;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    animation: grain 6s steps(6) infinite;
  }
  @keyframes grain {
    0%   { transform: translate(0, 0); }
    16%  { transform: translate(-2%, -3%); }
    33%  { transform: translate(-4%, 2%); }
    50%  { transform: translate(2%, -4%); }
    66%  { transform: translate(-1%, 3%); }
    83%  { transform: translate(3%, 1%); }
    100% { transform: translate(0, 0); }
  }
  @media (prefers-reduced-motion: reduce) { .hero__grain { animation: none; } }

  /* --- Hero metinleri --------------------------------------------------- */
  .hero__copy {
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--shell));
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--porcelain);
  }
  .hero__slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out), visibility 0s 620ms;
    will-change: opacity, transform;
  }
  .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out), visibility 0s;
  }
  /* Sonraki slayta geçerken yukarı değil aşağı doğru çıksın */
  .hero__slide.is-past { transform: translateY(-26px); }

  .hero__eyebrow {
    font-size: clamp(.66rem, 1.6vw, .78rem);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--porcelain) 92%, transparent);
    text-shadow: 0 1px 16px rgb(25 20 17 / .7);
  }
  .hero__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-6);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--porcelain);
    max-width: 16ch;
    text-shadow: 0 2px 40px rgb(25 20 17 / .35);
  }
  /* Wordmark harf aralığı çok geniş olduğu için font boyutunu doğrudan
     görünüm genişliğine bağlıyoruz: 11 karakter × (0.62 + 0.26em aralık)
     ≈ 9.7em genişlik eder, bu yüzden 8.2vw güvenli üst sınır.
     nowrap + fit-content ile asla iki satıra düşmez ve asla taşmaz. */
  .hero__title--wordmark {
    font-family: var(--font-body);
    font-weight: 350;
    letter-spacing: .26em;
    font-size: min(8.2vw, 4.6rem);
    text-indent: .26em;
    max-width: none;
    white-space: nowrap;
    text-shadow: 0 2px 50px rgb(25 20 17 / .5);
  }
  @media (max-width: 560px) {
    .hero__title--wordmark { letter-spacing: .2em; text-indent: .2em; font-size: min(9vw, 2.6rem); }
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }

  /* --- Alt bilgi çubuğu -------------------------------------------------- */
  .hero__foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 var(--gutter) clamp(1.25rem, 3vw, 2.25rem);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    color: color-mix(in srgb, var(--porcelain) 80%, transparent);
    font-size: var(--step--2);
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .hero__hint { display: flex; align-items: center; gap: var(--sp-3); }
  .hero__hint-line {
    display: block;
    width: 1px; height: 30px;
    background: currentColor;
    opacity: .5;
    transform-origin: top;
    animation: hintPulse 2.4s var(--ease-in-out) infinite;
  }
  @keyframes hintPulse {
    0%, 100% { transform: scaleY(.35); opacity: .25; }
    50%      { transform: scaleY(1);   opacity: .7; }
  }
  .hero__amenities { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: flex-end; }

  /* İlerleme çizgisi */
  .hero__progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: color-mix(in srgb, var(--porcelain) 14%, transparent);
  }
  .hero__progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--oak);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
  }

  /* Video devre dışıysa / azaltılmış hareket */
  .hero.is-static .hero__track { height: 100svh; }
  @media (prefers-reduced-motion: reduce) {
    .hero__track { height: 100svh !important; }
    .hero__slide { position: static; opacity: 1; visibility: visible; transform: none; }
    .hero__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
  }

  @media (max-width: 720px) {
    .hero__amenities { display: none; }
    .hero__foot { justify-content: center; }
  }


  /* ======================================================================
     ALT BİLGİ (FOOTER)
     ====================================================================== */
  .site-footer {
    background: var(--ink);
    color: color-mix(in srgb, var(--porcelain) 70%, transparent);
    padding-block: var(--sp-9) var(--sp-6);
    font-size: var(--step--1);
  }
  .site-footer a { transition: color var(--dur-fast) var(--ease-out); }
  .site-footer a:hover { color: var(--porcelain); }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
    gap: var(--sp-8) var(--sp-6);
  }
  @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

  .footer-brand img { height: 26px; width: auto; margin-bottom: var(--sp-5); }
  .footer-brand p { max-width: 34ch; line-height: 1.7; }

  .footer-col__title {
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--porcelain);
    margin-bottom: var(--sp-4);
  }
  .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
  /* WCAG 2.5.8 — dokunma hedefi en az 24×24 px. Metin bağlantıları
     satır yüksekliği kadar olduğu için dikey nefes payı veriyoruz. */
  .footer-col ul a,
  .footer-col ul li { display: inline-flex; align-items: center; min-height: 24px; }

  .footer-hours { display: grid; gap: .4em; }
  .footer-hours__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    font-variant-numeric: tabular-nums;
  }
  .footer-hours__row.is-today { color: var(--porcelain); }
  .footer-hours__row.is-today .footer-hours__day::after {
    content: ' •';
    color: var(--oak);
  }

  .footer-social { display: flex; gap: var(--sp-3); }
  .footer-social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid color-mix(in srgb, var(--porcelain) 16%, transparent);
    border-radius: 50%;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .footer-social a:hover { border-color: var(--porcelain); background: color-mix(in srgb, var(--porcelain) 8%, transparent); }
  .footer-social svg { width: 17px; height: 17px; }

  .footer-bottom {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid color-mix(in srgb, var(--porcelain) 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    justify-content: space-between;
    align-items: center;
    font-size: var(--step--2);
    color: color-mix(in srgb, var(--porcelain) 48%, transparent);
  }
  .footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 24px; }


  /* ======================================================================
     YÜZEN WHATSAPP
     ====================================================================== */
  .wa-float {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.85em 1.25em;
    border-radius: var(--radius-pill);
    background: #1F7A4D;
    color: #fff;
    font-size: var(--step--1);
    font-weight: 500;
    box-shadow: 0 6px 24px rgb(31 122 77 / .3);
    transform: translateY(140%);
    transition: transform 560ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .wa-float.is-in { transform: none; }
  .wa-float:hover { box-shadow: 0 10px 32px rgb(31 122 77 / .42); }
  .wa-float svg { width: 20px; height: 20px; flex: none; }
  @media (max-width: 560px) {
    .wa-float { padding: 0.9em; }
    .wa-float span { display: none; }
  }
}


/* ==========================================================================
   @layer sections — sayfaya özel bölümler
   ========================================================================== */
@layer sections {

  /* --- Manifesto -------------------------------------------------------- */
  .manifesto { text-align: center; }
  .manifesto__title {
    font-size: var(--step-5);
    font-weight: 300;
    max-width: 18ch;
    margin-inline: auto;
    line-height: 1.06;
  }
  .manifesto__body {
    max-width: 58ch;
    margin: var(--sp-6) auto 0;
    font-size: var(--step-1);
    line-height: 1.7;
    color: var(--fg);
  }
  .manifesto__body > * + * { margin-top: 1em; }

  /* --- İki Dünya (yapışkan bölünmüş) ------------------------------------ */
  .worlds { display: grid; gap: var(--sp-9); }
  .world {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
  }
  .world__media { grid-column: 1 / 7; }
  .world__text  { grid-column: 8 / 13; }
  .world:nth-child(even) .world__media { grid-column: 7 / 13; order: 2; }
  .world:nth-child(even) .world__text  { grid-column: 1 / 6; order: 1; }
  .world__media img { aspect-ratio: 5 / 4; }
  @media (max-width: 900px) {
    .world { grid-template-columns: 1fr; gap: var(--sp-6); }
    .world__media, .world__text,
    .world:nth-child(even) .world__media,
    .world:nth-child(even) .world__text { grid-column: 1 / -1; order: 0; }
    .world__media img { aspect-ratio: 4 / 3; }
  }

  /* --- Manifesto altı görsel şeridi -------------------------------------- */
  .manifesto__strip {
    margin-top: clamp(3rem, 6vw, 5rem);
    height: clamp(220px, 32vw, 460px);
    overflow: hidden;
  }
  .manifesto__strip picture,
  .manifesto__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* --- Bölünmüş düzen (görsel + metin) ----------------------------------- */
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__text  { order: 1; }
  .split--narrow-media { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }

  .split__media {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sand);
    height: clamp(340px, 40vw, 620px);
  }
  .split__media picture,
  .split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .split__text { min-width: 0; }

  @media (max-width: 900px) {
    .split, .split--narrow-media { grid-template-columns: 1fr; gap: var(--sp-6); }
    .split--reverse .split__media,
    .split--reverse .split__text { order: 0; }
    .split__media { height: clamp(240px, 56vw, 380px); }
  }

  /* --- Editoryal menü kartı ---------------------------------------------- */
  .menu-card {
    list-style: none;
    padding: 0;
    margin: var(--sp-6) 0 0;
    border-top: 1px solid var(--line);
  }
  .menu-card__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0 var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
  }
  .menu-card__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.25;
    color: var(--heading);
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .menu-card__dots {
    border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent);
    transform: translateY(-.25em);
  }
  .menu-card__price {
    font-weight: 550;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .menu-card__desc {
    grid-column: 1 / -1;
    margin-top: .35em;
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.55;
  }

  /* --- Güvence listesi (koyu bölüm) --------------------------------------- */
  .assure-list { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
  .assure-list__item {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
  }
  .assure-list__num {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1;
    color: var(--accent);
  }
  .assure-list__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--heading); line-height: 1.25; }
  .assure-list__body { margin-top: .4em; font-size: var(--step--1); line-height: 1.65; color: var(--fg); }

  /* --- Yorumlar ----------------------------------------------------------- */
  .quotes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-7);
  }
  .quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--gutter);
  }
  .dish {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .dish__media { border-radius: var(--radius-lg); }
  .dish__media img { aspect-ratio: 4 / 5; }
  .dish__media--empty {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--cream), var(--sand));
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--step-4);
    color: color-mix(in srgb, var(--oak) 80%, var(--ink));
    padding: var(--sp-5);
    text-align: center;
    line-height: 1.1;
  }
  .dish__cat {
    font-size: var(--step--2);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .dish__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--heading);
  }
  .dish__desc { font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
  .dish__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .dish__price { font-weight: 550; color: var(--heading); font-variant-numeric: tabular-nums; }

  /* --- Ebeveyn güvencesi ------------------------------------------------ */
  .assurance__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--sp-7);
  }
  .assure {
    background: var(--bg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: background-color var(--dur) var(--ease-out);
  }
  .assure:hover { background: var(--cream); }
  .assure__num {
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: color-mix(in srgb, var(--oak) 90%, var(--ink));
    line-height: 1;
  }
  .assure__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--heading); line-height: 1.2; }
  .assure__body { font-size: var(--step--1); line-height: 1.65; color: var(--muted); }

  /* --- Mekân (editoryal galeri) ----------------------------------------- */
  /* Editoryal mozaik.
     Satır yüksekliklerini SATIRIN KENDİSİ belirler (grid-template-rows),
     görseller o kutuyu doldurur. Böylece hiçbir görsel kendi doğal
     yüksekliğiyle düzeni patlatamaz ve altta boşluk kalmaz. */
  .space-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 30vw 18vw;
    gap: var(--gutter);
    margin-top: var(--sp-7);
    max-height: 62rem;
  }
  .space-grid > * {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 0;
    background: var(--sand);
  }
  .space-grid picture { display: block; width: 100%; height: 100%; }
  .space-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .space-grid > :nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
  .space-grid > :nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .space-grid > :nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
  .space-grid > :nth-child(4) { grid-column: 5 / 9;  grid-row: 2; }
  .space-grid > :nth-child(5) { grid-column: 9 / 13; grid-row: 2; }

  @media (max-width: 860px) {
    .space-grid {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 58vw 34vw;
      max-height: none;
    }
    .space-grid > :nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
    .space-grid > :nth-child(2) { grid-column: 1 / 4; grid-row: 2; }
    .space-grid > :nth-child(3) { grid-column: 4 / 7; grid-row: 2; }
    .space-grid > :nth-child(4),
    .space-grid > :nth-child(5) { display: none; }
  }

  /* --- Atölye programı --------------------------------------------------- */
  .schedule { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
  .schedule__day {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 3fr;
    gap: var(--gutter);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .schedule__label {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--heading);
    align-self: start;
  }
  .schedule__label.is-today { color: var(--accent); }
  .schedule__label.is-today::after {
    content: 'Bugün';
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--2);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: .35em;
  }
  .schedule__items { display: grid; gap: var(--sp-4); }
  .slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-4);
    align-items: baseline;
  }
  .slot__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--step--1);
    color: var(--muted);
    white-space: nowrap;
  }
  .slot__title { color: var(--heading); font-weight: 500; }
  .slot__desc { font-size: var(--step--1); color: var(--muted); margin-top: .2em; line-height: 1.55; }
  @media (max-width: 700px) {
    .schedule__day { grid-template-columns: 1fr; gap: var(--sp-4); }
    .slot { grid-template-columns: 1fr; gap: var(--sp-1); }
    .slot__age { justify-self: start; }
  }

  /* --- Yorumlar --------------------------------------------------------- */
  .quote {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg);
    height: 100%;
  }
  .quote__body {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--heading);
    flex: 1;
  }
  .quote__stars { display: flex; gap: 2px; color: var(--oak); }
  .quote__stars svg { width: 14px; height: 14px; }
  .quote__author { font-size: var(--step--1); }
  .quote__author strong { display: block; color: var(--heading); font-weight: 550; }
  .quote__author span { color: var(--muted); }

  /* --- Ziyaret ---------------------------------------------------------- */
  .visit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .visit__info { grid-column: 1 / 6; }
  .visit__map  { grid-column: 6 / 13; }
  @media (max-width: 900px) {
    .visit { grid-template-columns: 1fr; }
    .visit__info, .visit__map { grid-column: 1 / -1; }
  }

  .info-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .info-row svg { width: 1.15rem; height: 1.15rem; color: var(--accent); margin-top: .2em; }
  .info-row__label {
    font-size: var(--step--2);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .25em;
  }
  .info-row__value { color: var(--heading); line-height: 1.55; }
  .info-row__value a { display: inline-flex; align-items: center; min-height: 26px; }

  /* Harita: tıklanana kadar yüklenmez — 800 KB tasarruf */
  .map-embed {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--sand);
    border: 1px solid var(--line);
  }
  .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .map-embed__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: var(--sp-4);
    cursor: pointer;
    background:
      linear-gradient(rgb(25 20 17 / .18), rgb(25 20 17 / .38)),
      repeating-linear-gradient(45deg, var(--sand) 0 12px, var(--cream) 12px 24px);
    color: var(--porcelain);
    text-align: center;
    padding: var(--sp-6);
  }
  @media (max-width: 700px) { .map-embed { aspect-ratio: 4 / 3; } }

  /* --- CTA bandı --------------------------------------------------------- */
  .cta-band { text-align: center; position: relative; isolation: isolate; }
  .cta-band__title { font-size: var(--step-4); max-width: 20ch; margin-inline: auto; }
  .cta-band__body { max-width: 48ch; margin: var(--sp-5) auto var(--sp-6); font-size: var(--step-0); }

  /* Görselli varyant: fotoğrafın üstüne şarap rengi katman */
  .cta-band--image {
    color: color-mix(in srgb, var(--porcelain) 84%, transparent);
    padding-block: clamp(5rem, 11vw, 9rem);
  }
  .cta-band--image .cta-band__title { color: var(--porcelain); }
  .cta-band__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .cta-band__bg picture,
  .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cta-band__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgb(110 34 48 / .93), rgb(74 22 32 / .88));
  }

  /* --- Sayfa başlığı (iç sayfalar) --------------------------------------- */
  .page-head {
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
  }
  .page-head__title { font-size: var(--step-4); max-width: 18ch; margin-top: var(--sp-4); }
  .page-head__lead { max-width: 52ch; font-size: var(--step-0); line-height: 1.72; color: var(--fg); }
  .page-head__lead > * + * { margin-top: .9em; }

  /* Başlık solda, açıklama sağda — genişliği doldurur, editoryal durur */
  .page-head__grid { display: grid; gap: var(--sp-5) clamp(2rem, 5vw, 4.5rem); }
  .page-head__grid--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
  }
  @media (max-width: 860px) {
    .page-head__grid--split { grid-template-columns: 1fr; align-items: start; }
  }

  .page-cover {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sand);
    height: clamp(220px, 32vw, 460px);
  }
  .page-cover picture,
  .page-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--sp-5);
  }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
  .breadcrumb a:hover { color: var(--accent); }
  .breadcrumb li + li::before { content: '/'; margin-right: var(--sp-2); opacity: .5; }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }


  /* ======================================================================
     MENÜ SAYFASI
     ====================================================================== */
  .menu-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-8);
  }
  .menu-nav__list {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: var(--sp-3);
    scroll-padding-inline: var(--gutter);
  }
  .menu-nav__list::-webkit-scrollbar { display: none; }
  .menu-nav__link {
    flex: none;
    padding: .55em 1.1em;
    font-size: var(--step--1);
    border-radius: var(--radius-pill);
    color: var(--muted);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .menu-nav__link:hover { color: var(--heading); }
  .menu-nav__link.is-active { background: var(--ink); color: var(--porcelain); }

  .menu-cover {
    border-radius: var(--radius);
    overflow: hidden;
    height: clamp(220px, 30vw, 420px);
    background: var(--sand);
  }
  .menu-cover picture,
  .menu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .menu-cat + .menu-cat { margin-top: var(--sp-9); }
  .menu-cat__head { margin-bottom: var(--sp-6); }
  .menu-cat__title { font-size: var(--step-3); }
  .menu-cat__desc { max-width: 52ch; margin-top: var(--sp-3); color: var(--muted); }

  .menu-list { display: grid; gap: 0; }
  .menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-5);
    align-items: start;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
  }
  .menu-item__thumb {
    width: 84px; height: 84px;
    border-radius: var(--radius);
    overflow: hidden;
    flex: none;
  }
  .menu-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .menu-item__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.25;
    color: var(--heading);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
  }
  .menu-item__desc { margin-top: .4em; font-size: var(--step--1); line-height: 1.6; color: var(--muted); max-width: 58ch; }
  .menu-item__meta { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .menu-item__price {
    font-size: var(--step-0);
    font-weight: 550;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
  }
  .menu-item__price small { display: block; font-weight: 400; font-size: var(--step--2); color: var(--muted); }
  .allergen {
    font-size: var(--step--2);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .15em .5em;
  }
  @media (max-width: 640px) {
    .menu-item { grid-template-columns: 1fr auto; gap: var(--sp-4); }
    .menu-item__thumb { display: none; }
  }

  /* QR modu — mağaza içi hızlı menü */
  .qr-mode .menu-item__thumb,
  .qr-mode .site-header,
  .qr-mode .site-footer,
  .qr-mode .wa-float { display: none; }
  .qr-mode .menu-item__desc { display: none; }
  .qr-mode .menu-nav { top: 0; }
  .qr-mode .page-head { padding-top: var(--sp-6); }


  /* ======================================================================
     KIDS CLUB
     ====================================================================== */
  .age-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gutter);
    margin-top: var(--sp-7);
  }
  .age-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .age-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--age-accent, var(--oak));
  }
  .age-card:nth-child(1) { --age-accent: var(--kids-mist); }
  .age-card:nth-child(2) { --age-accent: var(--kids-blush); }
  .age-card:nth-child(3) { --age-accent: var(--kids-iris); }
  .age-card__range {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
    color: var(--heading);
  }
  .age-card__title {
    font-size: var(--step--2);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .safety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--gutter);
    margin-top: var(--sp-7);
  }
  .safety {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 2px solid var(--accent);
  }
  .safety__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--heading); line-height: 1.25; }
  .safety__body { font-size: var(--step--1); line-height: 1.65; color: var(--muted); }


  /* ======================================================================
     GALERİ
     ====================================================================== */
  .gallery-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }
  .gallery-filter button {
    padding: .55em 1.1em;
    font-size: var(--step--1);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    color: var(--muted);
    transition: all var(--dur-fast) var(--ease-out);
  }
  .gallery-filter button:hover { color: var(--heading); border-color: var(--oak); }
  .gallery-filter button.is-active { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }

  /* Tüm karolar AYNI oranda: değişken oranlar ızgarada boşluk ve
     dağınıklık yaratıyordu. Tek oran = sakin, premium bir ritim. */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--gutter);
  }
  .gallery-tile {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--sand);
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    display: block;
    width: 100%;
  }
  .gallery-tile picture { display: block; width: 100%; height: 100%; }
  .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-out); }
  .gallery-tile:hover img { transform: scale(1.05); }
  .gallery-tile[hidden] { display: none; }
  .gallery-tile__label {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
    background: linear-gradient(transparent, rgb(25 20 17 / .72));
    color: var(--porcelain);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .gallery-tile:hover .gallery-tile__label { opacity: 1; transform: none; }

  /* Lightbox */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgb(15 12 10 / .94);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility 0s var(--dur);
  }
  .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out), visibility 0s; }
  .lightbox img {
    max-width: 100%;
    max-height: 82svh;
    width: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transform: scale(.97);
    transition: transform var(--dur) var(--ease-out);
  }
  .lightbox.is-open img { transform: none; }
  .lightbox__caption {
    margin-top: var(--sp-4);
    color: color-mix(in srgb, var(--porcelain) 70%, transparent);
    font-size: var(--step--1);
    text-align: center;
    max-width: 60ch;
  }
  .lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--porcelain);
    background: rgb(255 255 255 / .08);
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .lightbox__btn:hover { background: rgb(255 255 255 / .18); }
  .lightbox__btn svg { width: 20px; height: 20px; }
  .lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); }
  .lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); }
  .lightbox__close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); transform: none; }
  .lightbox__count {
    position: absolute;
    bottom: clamp(.75rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    color: color-mix(in srgb, var(--porcelain) 55%, transparent);
    font-size: var(--step--2);
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
  }


  /* ======================================================================
     REZERVASYON / İLETİŞİM FORMU
     ====================================================================== */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
  .form-grid .span-2 { grid-column: 1 / -1; }
  @media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
  }

  .form-panel {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg);
  }

  .type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
  .type-picker label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--step--1);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .type-picker label:hover { border-color: var(--oak); }
  .type-picker input { accent-color: var(--wine); }
  .type-picker input:checked + span { color: var(--heading); font-weight: 500; }
  .type-picker label:has(input:checked) { border-color: var(--wine); background: color-mix(in srgb, var(--wine) 4%, transparent); }


  /* ======================================================================
     404 / HATA
     ====================================================================== */
  .error-page {
    min-height: 78svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: var(--sp-9);
  }
  .error-page__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 22vw, 12rem);
    line-height: .85;
    color: var(--sand);
  }
}


/* ==========================================================================
   @layer utilities — kaydırma ile açılma animasyonları
   ========================================================================== */
@layer utilities {
  /* ========================================================================
     AÇILMA ANİMASYONLARI

     TASARIM KURALI: gizleme durumu YALNIZCA `.is-armed` sınıfına bağlıdır.
     Bu sınıfı JavaScript, gözlemciyi kurmayı BAŞARDIKTAN sonra ekler.

     Sonuç: JS çalışmazsa, hata verirse, gözlemci tetiklenmezse ya da
     tarayıcı desteklemezse hiçbir şey gizlenmez. İçeriğin görünmez
     kalması yapısal olarak imkânsızdır.
     ======================================================================== */

  .js [data-reveal] {
    transition:
      opacity 760ms var(--ease-out) var(--reveal-delay, 0ms),
      transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
  }
  .js [data-reveal].is-armed:not(.is-in) {
    opacity: 0;
    transform: translateY(var(--reveal-y, 26px));
  }

  /* Maskeli görsel açılışı */
  .js [data-reveal='clip'] {
    transition: clip-path 1000ms var(--ease-out) var(--reveal-delay, 0ms);
  }
  .js [data-reveal='clip'].is-armed:not(.is-in) {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }
  .js [data-reveal='clip'] img { transition: transform 1300ms var(--ease-out) var(--reveal-delay, 0ms); }
  .js [data-reveal='clip'].is-armed:not(.is-in) img { transform: scale(1.06); }

  /* Satır satır başlık açılışı */
  .reveal-line { display: block; overflow: hidden; }
  .reveal-line > span { display: block; transition: transform 900ms var(--ease-out) var(--reveal-delay, 0ms); }
  .js [data-reveal='lines'].is-armed:not(.is-in) { opacity: 1; transform: none; }
  .js [data-reveal='lines'].is-armed:not(.is-in) .reveal-line > span { transform: translateY(105%); }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal].is-armed:not(.is-in),
    .js [data-reveal='clip'].is-armed:not(.is-in),
    .js [data-reveal='lines'].is-armed:not(.is-in) {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }
    .js [data-reveal='clip'].is-armed:not(.is-in) img { transform: none !important; }
    .reveal-line > span { transform: none !important; }
  }
}