/* ==========================================================================
   Vvedlock Story — stil dosyası

   Katmanlar: reset → tokens → base → layout → components → pages → utilities
   Renk ve tipografi yalnızca aşağıdaki değişkenlerden okunur; bileşenler
   kendi başına renk ya da yazı tipi tanımlamaz.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ---- Yazı tipleri (değişken, Türkçe karakterlere göre küçültülmüş, OFL) -- */

@font-face {
    font-family: "Gilda Display";
    src: url("../fonts/gilda-display.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    img,
    picture,
    svg,
    video,
    iframe {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

    input,
    button,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    ul[role="list"],
    ol[role="list"] {
        list-style: none;
        padding: 0;
    }

    button {
        background: none;
        border: 0;
        padding: 0;
    }

    [hidden] {
        display: none !important;
    }
}

/* ==========================================================================
   Tokens
   ========================================================================== */

@layer tokens {
    :root {
        /* Renk — kağıt, taş, mürekkep ve tek bir bronz vurgu */
        --paper: #ffffff;
        --stone: #f5f3ef;
        --stone-2: #ebe7e1;
        --ink: #1c1a18;
        --ink-hover: #3b3732;
        --ink-2: #57524c;
        --ink-3: #6e6963;
        --line: rgb(28 26 24 / 0.13);
        --line-strong: #8f8880;
        --accent: #8b6b4a;
        --dark: #1c1a18;
        --on-dark: #f5f3ef;
        --on-dark-2: #b5aea5;
        --line-on-dark: rgb(245 243 239 / 0.14);
        --error: #a1281c;
        --error-bg: #fbf1ef;
        --selection: #e9dfd2;

        /* Tipografi */
        --font-display: "Gilda Display", "Bodoni 72", Didot, Georgia, serif;
        --font-text: "Albert Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

        --step--2: 0.8125rem;
        --step--1: 0.875rem;
        --text-label: 0.9375rem;
        --step-0: 1.0625rem;
        --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
        --step-2: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
        --step-3: clamp(1.5rem, 1.27rem + 1.05vw, 2.25rem);
        --step-4: clamp(2rem, 1.5rem + 2.2vw, 3.375rem);
        --step-5: clamp(2.5rem, 1.7rem + 3.5vw, 4.75rem);
        --step-6: clamp(3rem, 1.75rem + 5.4vw, 6rem);

        /* Boşluk */
        --space-2xs: 0.5rem;
        --space-xs: 0.75rem;
        --space-s: 1rem;
        --space-m: 1.5rem;
        --space-l: 2rem;
        --space-xl: 3rem;
        --space-2xl: 4.5rem;
        --section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
        --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

        /* Ritim: sitedeki her boşluk bu değerlerden gelir. */
        --section-sm: clamp(2.5rem, 1.6rem + 3.5vw, 5.5rem); /* sayfa başlığı, alt bilgi, kısa bölüm */
        --head-gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);      /* bölüm başlığı → içerik */
        --col-gap: clamp(2rem, 1rem + 4vw, 5rem);             /* iki sütunlu düzenlerde sütun arası */
        --stack-gap: var(--space-xl);                         /* sütunlar alt alta düştüğünde */
        --card-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);        /* kart ızgaralarında yatay */
        --card-row-gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);    /* kart ızgaralarında dikey */
        --tile-gap: clamp(0.5rem, 1vw, 1rem);                 /* fotoğraf kareleri arası */
        --inset: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);     /* kutu ve kare iç boşluğu */

        --container: 96rem;
        --container-narrow: 46rem;
        --measure: 66ch;
        --bar-h: 4rem;                                      /* ana çubuk */
        --topbar-h: 2.5rem;                                 /* iletişim şeridi */
        --header-h: calc(var(--topbar-h) + var(--bar-h));   /* yapışık üst bilginin tamamı */

        /* Hareket */
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
        --fast: 180ms;
        --base: 320ms;
        --slow: 700ms;

        --shadow-float: 0 8px 24px rgb(28 26 24 / 0.18), 0 2px 6px rgb(28 26 24 / 0.12);
    }

    @media (min-width: 64em) {
        :root {
            --bar-h: 4.75rem;
        }
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
    html {
        color-scheme: light;
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-h) + 1rem);
        scrollbar-color: var(--line-strong) var(--stone);
        scrollbar-width: thin;
        interpolate-size: allow-keywords;
    }

    /* Kaydırma çubukları: ince ve düz köşeli; taş zemin üzerinde sıcak gri
       tutamaç (iç alanlar da html'deki rengi devralır). Chromium ve Firefox
       standart özellikleri, Safari aşağıdaki ::-webkit-scrollbar kurallarını
       kullanır; orada tutamaç üzerine gelince mürekkebe döner. */
    ::-webkit-scrollbar {
        width: 11px;
        height: 11px;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background: var(--stone);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--line-strong);
        border: 3px solid var(--stone);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ink-2);
    }

    html.is-locked {
        overflow: hidden;
    }

    body {
        min-height: 100vh;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--font-text);
        font-size: var(--step-0);
        line-height: 1.65;
        /* Başlık yazı tipi tek ağırlıklıdır; tarayıcı sahte kalınlık üretmesin. */
        font-synthesis: none;
        font-kerning: normal;
        text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: 400;
        line-height: 1.1;
        text-wrap: balance;
    }

    p,
    li,
    dd {
        text-wrap: pretty;
    }

    a {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
        transition: color var(--fast), text-decoration-color var(--fast);
    }

    strong {
        font-weight: 600;
    }

    ::selection {
        background: var(--selection);
        color: var(--ink);
    }

    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    input,
    textarea {
        caret-color: var(--accent);
    }

    main:focus {
        outline: none;
    }

    .icon {
        width: 1.25em;
        height: 1.25em;
        flex: none;
    }

    .nums {
        font-variant-numeric: tabular-nums lining-nums;
    }

    .h2 {
        font-family: var(--font-display);
        font-size: var(--step-4);
        line-height: 1.06;
        letter-spacing: -0.015em;
    }

    .h3 {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
        letter-spacing: -0.01em;
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

@layer layout {
    /* Sitenin tek hizalama çizgisi: her bölümün sol kenarı aynı yerdedir.
       Okuma genişliği gerekiyorsa içerik daraltılır, çizgi değişmez. */
    .container {
        width: 100%;
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .container--narrow > * {
        max-width: var(--container-narrow);
    }

    .section {
        padding-block: var(--section);
    }

    .section--tight {
        padding-block: var(--section-sm);
    }

    .section--flush-top {
        padding-top: 0;
    }

    .section--stone {
        background: var(--stone);
    }

    /* Bölüm başlığı (tek kalıp): ortalanmış klasik düzen. Başlık, altında
       açıklama, altında bağlantı; hepsi ortada ve dar bir okuma genişliğinde. */
    .section-head {
        display: grid;
        justify-items: center;
        max-width: 48rem;
        margin-inline: auto;
        margin-bottom: var(--head-gap);
        text-align: center;
    }

    .section-head__text {
        max-width: 38rem;
        margin-top: var(--space-s);
        font-size: var(--step-1);
        color: var(--ink-2);
    }

    .section-head__link {
        margin-top: var(--space-m);
    }

    .split {
        display: grid;
        gap: var(--stack-gap);
    }

    .split__aside:not(.panel) > * + * {
        margin-top: var(--space-l);
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-s) var(--space-l);
        margin-top: var(--space-l);
    }

    @media (min-width: 64em) {
        .split {
            grid-template-columns: repeat(12, minmax(0, 1fr));
            column-gap: var(--col-gap);
            align-items: start;
        }

        .split__aside {
            grid-column: 1 / span 5;
        }

        .split__main {
            grid-column: 7 / -1;
        }

        .split--main-left .split__main {
            grid-column: 1 / span 8;
        }

        .split--main-left .split__aside {
            grid-column: 9 / -1;
            grid-row: 1;
        }
    }
}

/* ==========================================================================
   Components
   ========================================================================== */

@layer components {
    /* ---- Marka ----------------------------------------------------------- */

    .brand {
        display: inline-flex;
        align-items: center;
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Logo yükseklikle boyutlanır; "Wedlock" yazısı bağlantının rengini alır
       (ana sayfada fotoğraf üzerinde beyaz, yapışık modda mürekkep). */
    .brand__logo {
        display: block;
        width: auto;
        height: 2.75rem;
    }

    @media (min-width: 64em) {
        .brand__logo {
            height: 3rem;
        }
    }

    .brand--light {
        color: var(--on-dark);
    }

    /* ---- Sayı çipi ---------------------------------------------------------- */

    /* Süzgeç ve konu listelerindeki adetler (blog kategorileri, albüm kumaşları,
       SSS konuları): düz köşeli küçük kutu, `stone-2` zemin, tabular rakam.
       Seçili öğede (aria-current / aria-pressed) mürekkep zemin, kâğıt rakam. */
    .count-chip {
        display: inline-grid;
        place-items: center;
        min-width: 1.6rem;
        height: 1.35rem;
        padding: 0 0.4rem;
        background: var(--stone-2);
        color: var(--ink-2);
        font-size: var(--step--2);
        font-weight: 500;
        line-height: 1;
        font-variant-numeric: lining-nums tabular-nums;
        transition: background-color var(--fast), color var(--fast);
    }

    [aria-current] > .count-chip,
    [aria-pressed="true"] > .count-chip {
        background: var(--ink);
        color: var(--paper);
    }

    /* ---- Düğmeler ve bağlantılar ------------------------------------------ */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6em;
        min-height: 3rem;
        padding: 0.8rem 1.6rem;
        border: 1px solid transparent;
        border-radius: 0;
        font-family: var(--font-text);
        font-size: var(--text-label);
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.01em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color var(--base) var(--ease-out),
            color var(--base) var(--ease-out),
            border-color var(--base) var(--ease-out);
    }

    .btn .icon {
        width: 1.2em;
        height: 1.2em;
    }

    .btn--primary {
        background: var(--ink);
        color: var(--paper);
    }

    .btn--primary:hover {
        background: var(--ink-hover);
    }

    .btn--light {
        background: var(--paper);
        color: var(--ink);
    }

    .btn--light:hover {
        background: var(--stone-2);
    }

    .btn--outline {
        border-color: var(--line-strong);
        color: var(--ink);
    }

    .btn--outline:hover {
        border-color: var(--ink);
        background: var(--stone);
    }

    .btn--small {
        min-height: 2.5rem;
        padding: 0.55rem 1.1rem;
        font-size: var(--step--1);
    }

    .btn--block {
        width: 100%;
    }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        padding-bottom: 0.2em;
        border-bottom: 1px solid currentColor;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
    }

    .link-arrow .icon {
        width: 1.1em;
        height: 1.1em;
        transition: transform var(--base) var(--ease-out);
    }

    .link-arrow:hover .icon,
    a:hover > .link-arrow .icon {
        transform: translateX(4px);
    }

    .link-arrow:hover .icon-arrow-up-right {
        transform: translate(2px, -2px);
    }

    .link-arrow--light {
        color: #ffffff;
    }

    /* ---- Görsel çerçeveleri (sabit oranlı kırpma) ------------------------- */

    .frame {
        position: relative;
        overflow: hidden;
        background: var(--stone-2);
    }

    .frame > picture,
    .frame > a > picture {
        position: absolute;
        inset: 0;
    }

    .frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .frame--4x5 {
        aspect-ratio: 4 / 5;
    }

    .frame--3x2 {
        aspect-ratio: 3 / 2;
    }

    .pos-left {
        object-position: 28% 50%;
    }

    .pos-right {
        object-position: 72% 50%;
    }

    .pos-top {
        object-position: 50% 22%;
    }

    .pos-bottom {
        object-position: 50% 86%;
    }

    /* Dikey fotoğraf yatay çerçevede: yüzlerin bulunduğu üst üçte bir görünür
       (konum verilmemişse Images::picture ekler). */
    .pos-portrait {
        object-position: 50% 30%;
    }

    /* Fotoğraf şeridi: kenardan kenara bantlarda yan yana dikey kareler; kareler
       arasında 3px koyu çizgi. Dar ekranda yalnızca ilk kare; dörtlü şerit 40em
       üstünde iki, 64em üstünde bütün kareler (açılış üç, film ve kapanış dört). */
    .strip {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 3px;
        background: var(--dark);
    }

    .strip__frame {
        position: relative;
        min-width: 0;
        overflow: hidden;
    }

    .strip__frame picture,
    .strip__frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .strip__frame + .strip__frame {
        display: none;
    }

    @media (min-width: 40em) {
        .strip--4 .strip__frame:nth-child(2) {
            display: block;
        }
    }

    @media (min-width: 64em) {
        .strip__frame + .strip__frame {
            display: block;
        }
    }

    .media-missing {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--stone-2);
    }

    .frame img,
    .gallery img {
        transition: transform 1.2s var(--ease-out);
    }

    /* ---- Üst bilgi ------------------------------------------------------- */

    /* Üst bilgi, iletişim şeridiyle birlikte sayfanın üstüne yapışır; yapışık
       bölümler ve çapa kaydırmaları ikisinin toplamını (--header-h) kullanır. */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        transition:
            background-color var(--base) var(--ease-out),
            border-color var(--base) var(--ease-out),
            color var(--base) var(--ease-out);
    }

    .site-header__bar {
        display: flex;
        align-items: center;
        gap: var(--space-l);
        height: var(--bar-h);
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    /* Üst şerit: solda telefon ve e-posta, en sağda adres (Google Haritalar).
       Dar ekranda e-posta (40em altında) ve adres (64em altında) yalnızca
       simgeyle görünür; metin ekran okuyucuda kalır. */
    .site-header__top {
        height: var(--topbar-h);
        border-bottom: 1px solid var(--line);
        font-size: var(--step--1);
        color: var(--ink-2);
        transition:
            color var(--base) var(--ease-out),
            border-color var(--base) var(--ease-out);
    }

    .topbar {
        display: flex;
        align-items: center;
        gap: var(--space-m);
        height: 100%;
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin: 0 auto;
        padding: 0 var(--gutter);
        list-style: none;
    }

    .topbar__end {
        margin-left: auto;
    }

    .topbar__link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 1.5rem;
        min-height: calc(var(--topbar-h) - 1px);
        color: inherit;
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--base) var(--ease-out);
    }

    .topbar__link:hover {
        color: var(--ink);
    }

    .topbar__icon {
        flex: none;
        width: 1rem;
        height: 1rem;
        color: var(--accent);
    }

    @media (max-width: 39.99em) {
        .topbar__label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
    }

    @media (max-width: 63.99em) {
        .topbar__label--wide {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
    }

    @media (min-width: 40em) {
        .topbar {
            gap: var(--space-l);
        }
    }

    .site-header .brand {
        margin-right: auto;
    }

    .primary-nav {
        display: none;
    }

    .primary-nav__list {
        display: flex;
        gap: clamp(1.25rem, 2.2vw, 2.5rem);
    }

    .primary-nav__link {
        position: relative;
        display: inline-block;
        padding-block: 0.5rem;
        font-size: var(--text-label);
        font-weight: 500;
        text-decoration: none;
    }

    .primary-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.2rem;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--base) var(--ease-out);
    }

    .primary-nav__link:hover::after,
    .primary-nav__link[aria-current]::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .site-header__cta {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 2.75rem;
        padding-inline: 0.25rem;
        font-size: var(--text-label);
        font-weight: 500;
        text-decoration: none;
    }

    .menu-toggle__bars {
        display: grid;
        gap: 6px;
        width: 1.5rem;
    }

    .menu-toggle__bars span {
        display: block;
        height: 1px;
        background: currentColor;
    }

    @media (min-width: 40em) {
        .site-header__cta {
            display: inline-flex;
        }
    }

    /* Masaüstünde bağlantılar sayfanın tam ortasında; logo ve düğme eşit yan sütunlarda. */
    @media (min-width: 64em) {
        .site-header__bar {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
        }

        .site-header__cta {
            justify-self: end;
        }

        .primary-nav {
            display: block;
        }

        .menu-toggle {
            display: none;
        }
    }

    /* Fotoğrafın üzerinde başlayan üst bilgi (ana sayfa). JS yoksa sayfayla
       birlikte kayar; JS varsa sabitlenir ve sayfa kaydırılır kaydırılmaz beyazlaşır. */
    .site-header--overlay {
        position: absolute;
        inset: 0 0 auto;
        background: transparent;
        border-color: transparent;
        color: #ffffff;
    }

    .site-header--overlay .site-header__cta {
        background: #ffffff;
        color: var(--ink);
    }

    .site-header--overlay:not(.is-solid) .site-header__cta:hover {
        background: var(--stone-2);
    }

    .site-header--overlay:not(.is-solid) .site-header__top {
        border-color: rgb(255 255 255 / 0.2);
        color: rgb(255 255 255 / 0.86);
    }

    .site-header--overlay:not(.is-solid) .topbar__icon {
        color: currentColor;
    }

    .site-header--overlay:not(.is-solid) .topbar__link:hover {
        color: #ffffff;
    }

    .js .site-header--overlay {
        position: fixed;
    }

    .js .site-header--overlay.is-solid {
        background: var(--paper);
        border-color: var(--line);
        color: var(--ink);
    }

    .js .site-header--overlay.is-solid .site-header__cta {
        background: var(--ink);
        color: var(--paper);
    }

    /* ---- Mobil menü ------------------------------------------------------ */

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 100;
        overflow-y: auto;
        background: var(--paper);
        color: var(--ink);
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path var(--slow) var(--ease-out),
            visibility 0s linear var(--slow);
    }

    .mobile-menu:target,
    .mobile-menu.is-open {
        visibility: visible;
        clip-path: inset(0);
        transition: clip-path var(--slow) var(--ease-out), visibility 0s;
    }

    .mobile-menu__panel {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 0 var(--gutter) max(2rem, env(safe-area-inset-bottom));
    }

    .mobile-menu__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--bar-h);
        border-bottom: 1px solid var(--line);
    }

    .mobile-menu__close {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        font-size: var(--text-label);
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-menu__list {
        display: grid;
        margin-top: var(--space-l);
    }

    .mobile-menu__link {
        display: block;
        padding-block: 0.35rem;
        font-family: var(--font-display);
        font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
        line-height: 1.15;
        text-decoration: none;
    }

    .mobile-menu__link[aria-current] {
        color: var(--accent);
    }

    .mobile-menu__footer {
        display: grid;
        gap: var(--space-m);
        margin-top: auto;
        padding-top: var(--space-xl);
    }

    .mobile-menu__contact {
        display: grid;
        gap: var(--space-xs);
    }

    .mobile-menu__contact a {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 2.75rem;
        text-decoration: none;
    }

    @media (min-width: 64em) {
        .mobile-menu {
            display: none;
        }
    }

    /* ---- İçerik haritası ---------------------------------------------------- */

    .breadcrumbs__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.6rem;
        padding: 0;
        list-style: none;
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .breadcrumbs__list li + li::before {
        content: "/";
        margin-right: 0.6rem;
        color: var(--line-strong);
    }

    .breadcrumbs a {
        text-decoration: none;
    }

    .breadcrumbs a:hover {
        color: var(--ink);
        text-decoration: underline;
    }

    /* ---- Sayfa başlığı (ana sayfa dışındaki bütün sayfalar) ----------------- */

    /* Altında kenardan kenara ince ayırıcı; ayırıcının iki yanında aynı boşluk. */
    .page-hero {
        margin-bottom: var(--section-sm);
        padding-block: var(--section-sm);
        border-bottom: 1px solid var(--line);
    }

    /* Ardından kenardan kenara bir sahne geliyorsa (Hizmetler) ayırıcıya ve alt
       boşluğa gerek kalmaz; sahne başlığın hemen altında başlar. */
    .page-hero:has(+ .service-slides) {
        margin-bottom: 0;
        border-bottom: 0;
    }

    .page-hero__grid {
        display: grid;
        gap: var(--stack-gap);
        align-items: center;
    }

    /* Başlık ve giriş dengeli kırılır: ikinci satır kısa kalmaz, ilk satır kadar uzar. */
    .page-hero__title {
        margin-top: var(--space-m);
        max-width: 16ch;
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1.02;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    /* Ölçü yazı tipine bağlı: 115–122 karakterlik giriş iki tam satıra sığar. */
    .page-hero__lead {
        margin-top: var(--space-m);
        max-width: 62ch;
        font-size: var(--step-1);
        line-height: 1.55;
        color: var(--ink-2);
        text-wrap: balance;
    }

    /* Yatay 3:2 kare başlığı alçak tutar. Dikey kaynaklarda kırpım yüzlerin
       bulunduğu üst üçte bire yaslanır; pos-* sınıfları bunu geçersiz kılabilir. */
    :where(.page-hero__media) img {
        object-position: 50% 35%;
    }

    @media (min-width: 64em) {
        .page-hero--media .page-hero__grid {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            column-gap: var(--col-gap);
        }
    }

    /* ---- Hizmetler sayfası ----------------------------------------------------- */

    /* Hizmet sahnesi: her hizmet kenardan kenara fotoğraflı bir slayt; sol altta
       numara, başlık, açıklama ve bağlantı. Dar ekranda ya da JS yoksa slaytlar
       alt alta sıralanır. */
    .service-slide {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: end;
        min-height: max(30rem, 75svh);
        overflow: hidden;
        background: var(--dark);
        color: #ffffff;
    }

    .service-slide__media {
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .service-slide__media picture,
    .service-slide__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .service-slide__image {
        object-position: 50% 35%;
    }

    .service-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(to top, rgb(18 16 14 / 0.8) 0%, rgb(18 16 14 / 0.42) 40%, rgb(18 16 14 / 0) 70%),
            linear-gradient(90deg, rgb(18 16 14 / 0.4) 0%, rgb(18 16 14 / 0) 55%),
            linear-gradient(to bottom, rgb(18 16 14 / 0.45) 0%, rgb(18 16 14 / 0) 24%);
    }

    .service-slide__content {
        padding-block: var(--section-sm);
    }

    .service-slide__number {
        display: block;
        font-size: var(--text-label);
        color: rgb(255 255 255 / 0.72);
    }

    .service-slide__title {
        max-width: 16ch;
        margin-top: var(--space-s);
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1.04;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    /* Hizmetin giriş metni (115–122 karakter): sayfa başlığındaki gibi 62ch
       ölçüde iki tam, dengeli satır. */
    .service-slide__text {
        max-width: 62ch;
        margin-top: var(--space-m);
        font-size: var(--step-1);
        line-height: 1.55;
        color: rgb(255 255 255 / 0.88);
        text-wrap: balance;
    }

    .service-slide .link-arrow {
        margin-top: var(--space-l);
    }

    .service-slide :focus-visible {
        outline-color: #ffffff;
    }

    .service-slides__nav {
        display: none;
    }

    /* 64em üstünde fotoğraf sağda, slayt yüksekliğinde dikey bir panelde durur;
       metin solda koyu zeminde okunur. Yalnızca panelin üstünde gezinme için
       ince bir karartma kalır. */
    @media (min-width: 64em) {
        .service-slide__media {
            inset: 0 0 0 auto;
            width: 42%;
        }

        .service-slide::after {
            inset: 0 0 0 auto;
            width: 42%;
            background: linear-gradient(to bottom, rgb(18 16 14 / 0.5) 0%, rgb(18 16 14 / 0) 26%);
        }

        .service-slide__content {
            width: 100%;
        }

        .service-slide__title,
        .service-slide__text {
            max-width: min(62ch, 48vw);
        }
    }

    /* Sahne (64em üstü, JS varsa): bölüm ekrana sabitlenir, slaytlar üst üste
       durur; kaydırdıkça sonraki slayt alttan yukarı açılan bir perdeyle gelir.
       Sağda dikey hizmet menüsü. */
    @media (min-width: 64em) {
        .js .service-slides {
            height: calc(100svh - var(--header-h) + (var(--count, 6) - 1) * 80vh);
        }

        .js .service-slides__stage {
            position: sticky;
            top: var(--header-h);
            height: calc(100svh - var(--header-h));
            overflow: hidden;
        }

        .js .service-slide {
            position: absolute;
            inset: 0;
            min-height: 0;
        }

        .js .service-slide:not(:first-child) {
            clip-path: inset(100% 0 0 0);
        }

        /* Perdenin altında kalan slayt kararır (JS --dim verir). */
        .js .service-slide::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: rgb(18 16 14);
            opacity: var(--dim, 0);
            pointer-events: none;
        }

        /* Sahneye gelen hizmetin numarası, başlığı, metni ve bağlantısı sırayla
           aşağıdan yükselir; sahneden çıkan hizmetinki söner. */
        .js .service-slide__content > * {
            opacity: 0;
            transform: translateY(1.25rem);
            transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
        }

        .js .service-slide.is-current .service-slide__content > * {
            opacity: 1;
            transform: none;
        }

        .js .service-slide.is-current .service-slide__content > :nth-child(2) {
            transition-delay: 0.08s;
        }

        .js .service-slide.is-current .service-slide__content > :nth-child(3) {
            transition-delay: 0.16s;
        }

        .js .service-slide.is-current .service-slide__content > :nth-child(4) {
            transition-delay: 0.24s;
        }

        /* Hizmet menüsü: sahnenin üstünde, raya yayılan parçalı ilerleme şeridi;
           her parçanın altında numara ve kısa ad. Etkin hizmetin parçası
           kaydırdıkça soldan sağa beyazla dolar, geçilenler dolu kalır. */
        .js .service-slides__nav {
            position: absolute;
            top: var(--space-l);
            left: 50%;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(var(--count, 6), minmax(0, 1fr));
            gap: var(--space-s);
            width: min(var(--container), 100% - 2 * var(--gutter));
            transform: translateX(-50%);
        }
    }

    .service-slides__jump {
        display: grid;
        gap: var(--space-xs);
        min-width: 0;
        padding: 0 0 var(--space-2xs);
        border: 0;
        background: none;
        color: rgb(255 255 255 / 0.62);
        font-size: var(--text-label);
        text-align: left;
        cursor: pointer;
        transition: color var(--base) var(--ease-out);
    }

    /* Parçanın başı: kare çerçeveli numara ve hemen ardından ilerleme çizgisi. */
    .service-slides__head {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .service-slides__index {
        display: grid;
        flex: none;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid rgb(255 255 255 / 0.45);
        font-size: 0.75rem;
        line-height: 1;
        transition:
            background-color var(--base) var(--ease-out),
            border-color var(--base) var(--ease-out),
            color var(--base) var(--ease-out);
    }

    .service-slides__jump:hover .service-slides__index {
        border-color: #ffffff;
    }

    /* Etkin hizmette kare beyazla dolar, numara koyulaşır. */
    .service-slides__jump.is-active .service-slides__index {
        border-color: #ffffff;
        background: #ffffff;
        color: var(--ink);
    }

    .service-slides__track {
        position: relative;
        display: block;
        flex: 1;
        height: 2px;
        overflow: hidden;
        background: rgb(255 255 255 / 0.3);
    }

    .service-slides__fill {
        position: absolute;
        inset: 0;
        background: #ffffff;
        transform: scaleX(0);
        transform-origin: left center;
    }

    .service-slides__name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .service-slides__jump:hover,
    .service-slides__jump.is-active {
        color: #ffffff;
    }

    .service-slides__jump:focus-visible {
        outline-color: #ffffff;
        outline-offset: 4px;
    }

    /* Kapsam seçenekleri: üç seçenek; 48em üstünde yan yana, ortalı ve aralarında
       dikey ince çizgi. */
    .coverage-options {
        display: grid;
        gap: var(--space-xl);
        padding: 0;
        list-style: none;
    }

    .coverage-options__item {
        padding-top: var(--space-m);
        border-top: 1px solid var(--line-strong);
    }

    .coverage-options__title {
        font-family: var(--font-display);
        font-size: var(--step-4);
        line-height: 1.06;
    }

    .coverage-options__text {
        max-width: 30rem;
        margin-top: var(--space-s);
        color: var(--ink-2);
    }

    @media (min-width: 48em) {
        .coverage-options {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            text-align: center;
        }

        .coverage-options__item {
            padding: var(--space-xs) var(--card-gap);
            border-top: 0;
            border-left: 1px solid var(--line-strong);
        }

        .coverage-options__item:first-child {
            border-left: 0;
        }

        .coverage-options__text {
            margin-inline: auto;
        }
    }

    /* ---- Panel ----------------------------------------------------------- */

    .panel {
        display: grid;
        gap: var(--space-m);
        align-content: start;
        padding: var(--inset);
        background: var(--stone);
    }

    /* Panel ızgarası öğeleri satır boyunca yayar; ok bağlantısı yayılırsa alt
       çizgisi de yayılır. Bağlantı yalnızca kendi metni kadar yer kaplar. */
    .panel > .link-arrow {
        justify-self: start;
    }

    .section--stone .panel {
        background: var(--paper);
    }

    .panel__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .panel__text {
        color: var(--ink-2);
    }

    @media (min-width: 64em) {
    }

    /* ---- Metin akışı ------------------------------------------------------- */

    .prose {
        max-width: var(--measure);
    }

    .prose > * + * {
        margin-top: 1.1em;
    }

    .prose p,
    .prose li {
        line-height: 1.7;
    }

    .prose--large p,
    .prose--large li {
        font-size: var(--step-1);
        line-height: 1.6;
    }

    .prose h2,
    .prose .h3 {
        margin-top: 2em;
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.15;
    }

    .prose ul {
        padding-left: 1.2rem;
    }

    .prose li + li {
        margin-top: 0.45em;
    }

    .prose li::marker {
        color: var(--accent);
    }

    .prose a {
        text-decoration-color: var(--accent);
    }

    .prose a:hover {
        color: var(--accent);
    }

    /* ---- SSS --------------------------------------------------------------- */

    .faq-list {
        border-top: 1px solid var(--line);
    }

    .faq-item {
        border-bottom: 1px solid var(--line);
    }

    .faq-item::details-content {
        block-size: 0;
        overflow: clip;
        transition:
            block-size var(--slow) var(--ease-out),
            content-visibility var(--slow) allow-discrete;
    }

    .faq-item[open]::details-content {
        block-size: auto;
    }

    .faq-item__question {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-m);
        padding-block: 1.3rem;
        font-size: var(--step-1);
        font-weight: 500;
        line-height: 1.4;
        list-style: none;
        cursor: pointer;
    }

    .faq-item__question::-webkit-details-marker {
        display: none;
    }

    .faq-item__question:hover {
        color: var(--accent);
    }

    .faq-item__sign {
        position: relative;
        flex: none;
        width: 0.9rem;
        height: 0.9rem;
        margin-top: 0.35em;
    }

    .faq-item__sign::before,
    .faq-item__sign::after {
        content: "";
        position: absolute;
        inset: 50% 0 auto;
        height: 1px;
        background: currentColor;
        transition: transform var(--base) var(--ease-out);
    }

    .faq-item__sign::after {
        transform: rotate(90deg);
    }

    .faq-item[open] .faq-item__sign::after {
        transform: rotate(0deg);
    }

    .faq-item__answer {
        max-width: 62ch;
        padding-bottom: var(--space-m);
        color: var(--ink-2);
    }

    .faq-item__answer > * + * {
        margin-top: 0.8em;
    }

    .faq-item__answer a {
        color: var(--ink);
        text-decoration-color: var(--accent);
    }

    /* ---- Kapanış çağrısı ---------------------------------------------------- */

    /* Her sayfanın sonunda aynı bölüm: kenardan kenara fotoğraf, üzerinde sıcak
       siyah karartma; ortada başlık, açıklama ve iki eylem. Fotoğraf onu koyu alt
       bilgiden ayırır. */
    .cta {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: center;
        min-height: clamp(30rem, 72vh, 46rem);
        overflow: hidden;
        background: var(--dark);
        color: #ffffff;
        text-align: center;
    }

    .cta__media {
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .cta__media picture,
    .cta__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Karartma her yerde aynı; ortalanmış metnin arkasında biraz daha koyu,
       kenarlarda fotoğraf nefes alır. */
    .cta::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(ellipse 60% 70% at 50% 50%, rgb(18 16 14 / 0.38) 0%, rgb(18 16 14 / 0) 100%),
            rgb(18 16 14 / 0.5);
    }

    .cta__content {
        display: grid;
        justify-items: center;
        padding-block: var(--section);
    }

    .cta__title {
        max-width: 20ch;
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1.04;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .cta__text {
        max-width: 38rem;
        margin-top: var(--space-m);
        font-size: var(--step-1);
        line-height: 1.55;
        color: rgb(255 255 255 / 0.88);
    }

    .cta__actions {
        justify-content: center;
    }

    .cta :focus-visible {
        outline-color: #ffffff;
    }

    /* ---- Alt bilgi --------------------------------------------------------- */

    /* Koyu zeminde dört kat, aralarında ince `line-on-dark` çizgi: logo, kısa
       tanıtım ve eylemler; iletişim künyesi (iletişim sayfasındaki gibi küçük
       büyük harfli terim ve Display değer; 40em üstünde iki, 64em üstünde dört
       sütun); sayfa ve hizmet bağlantıları ile sosyal hesaplar; en altta telif,
       yasal metinler ve tasarım imzası. WhatsApp düğmesi alt şeridin sağını
       kapatmasın diye şeridin sağında ve telefonda altında boşluk bırakılır. */
    .site-footer {
        padding-top: var(--section-sm);
        background: var(--dark);
        color: var(--on-dark);
    }

    .site-footer :focus-visible {
        outline-color: var(--on-dark);
    }

    .site-footer a {
        color: inherit;
        text-decoration: none;
    }

    .site-footer__head {
        display: grid;
        gap: var(--space-m);
        justify-items: start;
        padding-bottom: var(--space-xl);
    }

    .site-footer__head .brand__logo {
        height: 5rem;
    }

    .site-footer__text {
        max-width: 34rem;
        color: var(--on-dark-2);
    }

    .site-footer__facts {
        display: grid;
        gap: var(--space-l) var(--col-gap);
        margin: 0;
        padding-block: var(--space-xl);
        border-top: 1px solid var(--line-on-dark);
    }

    .site-footer__fact dt {
        font-size: var(--step--2);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--on-dark-2);
    }

    .site-footer__fact dd {
        margin: var(--space-xs) 0 0;
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.3;
    }

    .site-footer__fact a {
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.2em;
        text-decoration-thickness: 1px;
        transition: text-decoration-color var(--fast);
    }

    .site-footer__fact a:hover {
        text-decoration-color: currentColor;
    }

    .site-footer__nav {
        display: grid;
        gap: var(--space-s);
        padding-block: var(--space-l);
        border-top: 1px solid var(--line-on-dark);
    }

    .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs) var(--space-l);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-footer__links a:hover,
    .site-footer__links a[aria-current] {
        text-decoration: underline;
        text-underline-offset: 0.25em;
        text-decoration-thickness: 1px;
    }

    .site-footer__links--quiet {
        font-size: var(--step--1);
    }

    .site-footer__links--quiet a {
        color: var(--on-dark-2);
    }

    .site-footer__links--quiet a:hover {
        color: var(--on-dark);
    }

    .site-footer__social {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs) var(--space-m);
        margin: var(--space-2xs) 0 0;
        padding: 0;
        list-style: none;
    }

    .site-footer__social a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--step--1);
        color: var(--on-dark-2);
        transition: color var(--fast);
    }

    .site-footer__social a:hover {
        color: var(--on-dark);
    }

    .site-footer__social .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs) var(--space-l);
        padding-block: var(--space-m) calc(max(var(--space-m), env(safe-area-inset-bottom)) + 4.5rem);
        border-top: 1px solid var(--line-on-dark);
        font-size: var(--step--1);
        color: var(--on-dark-2);
    }

    .site-footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs) var(--space-m);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-footer__legal a:hover {
        color: var(--on-dark);
    }

    .site-footer__credit {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

    .site-footer__credit a {
        opacity: 0.88;
        transition: opacity var(--fast);
    }

    .site-footer__credit a:hover {
        opacity: 1;
    }

    .site-footer__credit img {
        display: block;
        width: auto;
        height: 1.15rem;
    }

    .site-footer__demo {
        flex-basis: 100%;
        font-size: var(--step--2);
    }

    @media (min-width: 40em) {
        .site-footer__facts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .site-footer__bottom {
            padding-bottom: max(var(--space-m), env(safe-area-inset-bottom));
            padding-right: 5rem;
        }
    }

    @media (min-width: 64em) {
        .site-footer__head {
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            column-gap: var(--col-gap);
        }

        .site-footer__facts {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .site-footer__nav {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
        }

        .site-footer__nav > nav {
            grid-column: 1;
        }

        .site-footer__social {
            grid-column: 2;
            grid-row: 1;
            margin-top: 0;
        }

        .site-footer__credit {
            margin-left: auto;
        }
    }

    /* ---- İletişim listesi ---------------------------------------------------- */

    .contact-list {
        display: grid;
        gap: 0.85rem;
        font-size: var(--text-label);
    }

    .contact-list li,
    .contact-list a {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        line-height: 1.45;
    }

    .contact-list a {
        text-decoration: none;
    }

    .contact-list a:hover span {
        text-decoration: underline;
    }

    .contact-list .icon {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.05em;
        color: var(--accent);
    }

    .contact-list--light .icon {
        color: var(--on-dark-2);
    }

    .social-list {
        display: flex;
        gap: var(--space-xs);
        margin-top: var(--space-m);
    }

    .social-list a {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--line-on-dark);
    }

    .social-list .icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    /* ---- WhatsApp düğmesi ---------------------------------------------------- */

    .wa-fab {
        position: fixed;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 40;
        display: grid;
        place-items: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background: var(--ink);
        color: var(--paper);
        box-shadow: var(--shadow-float);
        transition: transform var(--base) var(--ease-out), background-color var(--fast);
    }

    .wa-fab .icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    .wa-fab:hover {
        transform: translateY(-2px);
        background: var(--ink-hover);
    }

    .wa-fab__label {
        position: absolute;
        right: calc(100% + 0.75rem);
        padding: 0.5rem 0.85rem;
        background: var(--ink);
        color: var(--paper);
        font-size: var(--step--1);
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(6px);
        pointer-events: none;
        transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
    }

    .wa-fab:hover .wa-fab__label,
    .wa-fab:focus-visible .wa-fab__label {
        opacity: 1;
        transform: none;
    }

    .is-locked .wa-fab {
        visibility: hidden;
    }

    /* ---- Form -------------------------------------------------------------- */

    .form {
        display: grid;
        gap: var(--space-m);
    }

    .form__row {
        display: grid;
        gap: var(--space-m);
    }

    @media (min-width: 40em) {
        .form__row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .field {
        display: grid;
        gap: 0.5rem;
        align-content: start;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .field__label {
        padding: 0;
        font-size: var(--text-label);
        font-weight: 500;
        line-height: 1.4;
    }

    .field__input {
        width: 100%;
        min-height: 3rem;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--line-strong);
        border-radius: 0;
        background: var(--paper);
        color: var(--ink);
        font-size: 1rem;
        line-height: 1.4;
        appearance: none;
        transition: border-color var(--fast), box-shadow var(--fast), background-color var(--fast);
    }

    .field__input:hover {
        border-color: var(--ink-2);
    }

    .field__input:focus {
        outline: none;
        border-color: var(--ink);
        box-shadow: 0 0 0 1px var(--ink);
    }

    .field__input::placeholder {
        color: var(--ink-3);
    }

    .field__input--area {
        min-height: 8.5rem;
        resize: vertical;
        line-height: 1.55;
    }

    .field__select,
    .field__date {
        position: relative;
    }

    .field__select .field__input,
    .field__date .field__input {
        padding-right: 2.75rem;
    }

    .field__select .field__input {
        cursor: pointer;
    }

    .field__chevron,
    .field__icon {
        position: absolute;
        top: 50%;
        right: 0.9rem;
        width: 1.1rem;
        height: 1.1rem;
        translate: 0 -50%;
        pointer-events: none;
    }

    /* Tarih: tarayıcının kendi takvimi açılır. Chromium ve Safari'de tarayıcının
       simgesi görünmez ama alanın tamamını kaplar; alanın her yerine tıklamak
       takvimi açar, sağda sitenin takvim simgesi durur. Firefox kendi takvim
       düğmesini gösterdiği için sitenin simgesi orada gizlenir. */
    .field__date .field__input {
        position: relative;
    }

    .field__date .field__input::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        opacity: 0;
        cursor: pointer;
    }

    .field__date .field__input::-webkit-date-and-time-value {
        text-align: start;
    }

    .field__date .field__input::-webkit-datetime-edit-day-field:focus,
    .field__date .field__input::-webkit-datetime-edit-month-field:focus,
    .field__date .field__input::-webkit-datetime-edit-year-field:focus {
        background: var(--selection);
        color: var(--ink);
    }

    /* Boşken tarayıcının gün/ay/yıl kalıbı ipucu renginde (app.js "is-empty"). */
    .field__date .field__input.is-empty:not(:focus) {
        color: var(--ink-3);
    }

    @supports (-moz-appearance: none) {
        .field__date .field__input {
            padding-right: 0.9rem;
        }

        .field__date .field__icon {
            display: none;
        }
    }

    .form__submit {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-s) var(--space-m);
        margin-top: var(--space-2xs);
    }

    /* ---- Bildirimler -------------------------------------------------------- */

    .notice {
        margin-bottom: var(--space-m);
        padding: var(--space-s) 1.25rem;
        border: 1px solid var(--line);
        background: var(--stone);
        font-size: var(--text-label);
        color: var(--ink-2);
    }

    .notice {
        max-width: 64ch;
    }

    /* ---- Hata sayfası ---------------------------------------------------------- */

    /* Sayfa başlığının altındaki devam bağlantıları. */
    .next-links__title {
        font-weight: 600;
    }

    .next-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s) var(--space-l);
        margin-top: var(--space-s);
    }

    .debug {
        margin-top: var(--space-l);
        padding: var(--space-s);
        overflow: auto;
        background: var(--stone);
        font-size: var(--step--2);
        white-space: pre-wrap;
    }

    /* ---- Atla bağlantısı ------------------------------------------------------ */

    .skip-link {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 200;
        padding: 0.75rem 1rem;
        background: var(--ink);
        color: var(--paper);
        font-weight: 500;
        text-decoration: none;
        transform: translateY(-200%);
        transition: transform var(--base) var(--ease-out);
    }

    .skip-link:focus {
        transform: none;
    }
}

/* ==========================================================================
   Pages
   ========================================================================== */

@layer pages {
    /* ---- Ana sayfa: açılış ------------------------------------------------- */

    .hero {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: end;
        min-height: max(34rem, 100svh);
        overflow: hidden;
        background: var(--dark);
        color: #ffffff;
    }

    .hero__media {
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .hero__media picture,
    .hero__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(to top, rgb(18 16 14 / 0.74) 0%, rgb(18 16 14 / 0.4) 36%, rgb(18 16 14 / 0) 64%),
            linear-gradient(to bottom, rgb(18 16 14 / 0.42) 0%, rgb(18 16 14 / 0) 24%);
    }

    @media (max-width: 39.99em) {
        .hero::after {
            background:
                linear-gradient(to top, rgb(18 16 14 / 0.86) 0%, rgb(18 16 14 / 0.62) 42%, rgb(18 16 14 / 0.18) 72%, rgb(18 16 14 / 0) 86%),
                linear-gradient(to bottom, rgb(18 16 14 / 0.42) 0%, rgb(18 16 14 / 0) 24%);
        }
    }

    @media (orientation: portrait) {
        .hero__image.pos-right {
            object-position: 56% 50%;
        }
    }

    .hero__content {
        width: 100%;
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding: calc(var(--header-h) + 2rem) var(--gutter) var(--section-sm);
    }

    .hero__title {
        max-width: 11ch;
        font-family: var(--font-display);
        font-size: var(--step-6);
        line-height: 0.98;
        letter-spacing: -0.025em;
    }

    .hero__line {
        display: block;
        overflow: hidden;
        padding-block: 0.08em 0.12em;
        margin-block: -0.08em -0.12em;
    }

    .hero__line > span {
        display: inline-block;
    }

    .hero__lead {
        max-width: 37rem;
        margin-top: var(--space-m);
        font-size: var(--step-1);
        line-height: 1.55;
        color: rgb(255 255 255 / 0.88);
    }

    .hero__actions {
        margin-top: var(--space-l);
    }

    .hero :focus-visible {
        outline-color: #ffffff;
    }

    /* İmza hareketi: fotoğraf yerine oturur, başlık satırları maskeden yükselir. */
    .hero__image {
        transform-origin: 62% 50%;
        animation: hero-settle 1.8s var(--ease-out) both;
    }

    .strip__frame:nth-child(2) .hero__image {
        animation-delay: 120ms;
    }

    .strip__frame:nth-child(3) .hero__image {
        animation-delay: 240ms;
    }

    .hero__line > span {
        animation: line-rise 1.15s var(--ease-out) both;
        animation-delay: 0.25s;
    }

    .hero__line:nth-child(2) > span {
        animation-delay: 0.34s;
    }

    .hero__line:nth-child(3) > span {
        animation-delay: 0.43s;
    }

    .hero__lead {
        animation: fade-up 0.9s var(--ease-out) 0.62s both;
    }

    .hero__actions {
        animation: fade-up 0.9s var(--ease-out) 0.74s both;
    }

    /* ---- Ana sayfa: yaklaşım (üç büyük kare) ----------------------------- */

    /* Mobilde yatay kaydırılan şerit; sonraki kare kenardan görünür. */
    .approaches {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: var(--tile-gap);
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .approaches::-webkit-scrollbar {
        display: none;
    }

    .approach {
        position: relative;
        isolation: isolate;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background: var(--stone-2);
        color: #ffffff;
        scroll-snap-align: start;
    }

    .approach picture,
    .approach__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .approach::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(18 16 14 / 0.8) 0%, rgb(18 16 14 / 0.42) 32%, rgb(18 16 14 / 0) 58%);
    }

    .approach__body {
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        padding: var(--inset);
    }

    .approach__title {
        font-family: var(--font-display);
        font-size: var(--step-4);
        line-height: 1.04;
        letter-spacing: -0.01em;
    }

    .approach__text {
        max-width: 34ch;
        margin-top: 0.6rem;
        line-height: 1.5;
        color: rgb(255 255 255 / 0.86);
    }

    @media (min-width: 48em) {
        .approaches {
            grid-auto-flow: row;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-inline: 0;
            padding-inline: 0;
            overflow: visible;
        }
    }

    /* ---- Ana sayfa: hizmetler (fotoğraf ızgarası) ---------------------------
       Stüdyonun fotoğrafları dikey olduğu için bütün kareler eşit ve dikeydir
       (4:5; telefonda 1:1): 64em üstünde üç, 40em üstünde iki sütun. Kareler üç
       bakış bölümüyle aynı dili kullanır: koyu geçiş üzerinde başlık, kısa metin ve ok. */
    .service-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tile-gap);
    }

    .service-tile {
        position: relative;
        min-width: 0;
        aspect-ratio: 1;
    }

    .service-tile__link {
        position: absolute;
        inset: 0;
        isolation: isolate;
        display: block;
        overflow: hidden;
        background: var(--stone-2);
        color: #ffffff;
        text-decoration: none;
    }

    .service-tile picture,
    .service-tile__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .service-tile__image {
        transition: transform 1.2s var(--ease-out);
    }

    .service-tile__link::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(18 16 14 / 0.8) 0%, rgb(18 16 14 / 0.42) 32%, rgb(18 16 14 / 0) 58%);
    }

    .service-tile__body {
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        display: grid;
        gap: 0.5rem;
        padding: var(--inset);
        padding-right: calc(var(--inset) + 3.5rem);
    }

    .service-tile__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.08;
        letter-spacing: -0.01em;
    }

    .service-tile__text {
        max-width: 40ch;
        font-size: var(--text-label);
        line-height: 1.5;
        color: rgb(255 255 255 / 0.86);
    }

    .service-tile__go {
        position: absolute;
        right: var(--inset);
        bottom: var(--inset);
        z-index: 1;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid rgb(255 255 255 / 0.5);
        transition: background-color var(--base) var(--ease-out), color var(--base) var(--ease-out), border-color var(--base) var(--ease-out);
    }

    .service-tile__go .icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .service-tile__link:hover .service-tile__image {
        transform: scale(1.04);
    }

    .service-tile__link:hover .service-tile__go {
        border-color: #ffffff;
        background: #ffffff;
        color: var(--ink);
    }

    .service-tile__link:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: -6px;
    }

    @media (min-width: 40em) {
        .service-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .service-tile {
            aspect-ratio: 4 / 5;
        }
    }

    @media (min-width: 64em) {
        .service-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* ---- Ana sayfa: seçilmiş kareler (süzülen ve toplanan fotoğraflar) ------
       JS yoksa: düzgün bir ızgara. JS varsa: sahne ekrana sabitlenir, fotoğraflar
       dağınık ve havada süzülürken başlar; kaydırdıkça ızgarada toplanır. */
    .gather__photos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--tile-gap);
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .gather__photo {
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--stone-2);
    }

    .gather__frame,
    .gather__frame picture,
    .gather__frame img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .gather__frame img {
        object-fit: cover;
        transition: transform 1s var(--ease-out);
    }

    /* Her kare ışık kutusunu (kartpostal) açan bağlantıdır. */
    .gather__frame {
        cursor: zoom-in;
    }

    .gather__frame:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

    @media (min-width: 40em) {
        .gather__photos {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
    }

    .js .gather {
        position: relative;
        height: 220vh;
    }

    .js .gather__stage {
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        height: calc(100svh - var(--header-h));
        overflow: hidden;
    }

    .js .gather__photos {
        position: absolute;
        inset: 0;
        display: block;
        max-width: none;
        padding: 0;
    }

    .js .gather__photo {
        position: absolute;
        top: 0;
        left: 0;
        aspect-ratio: auto;
        overflow: visible;
        background: none;
        transform-origin: 50% 50%;
        will-change: transform;
    }

    .js .gather__frame {
        overflow: hidden;
        background: var(--stone-2);
        /* Havadaki kare gölge taşır; öndeki büyük kareler daha yüksekte süzülür.
           Kare yerine indikçe (--lift 1'den 0'a) gölge yumuşakça kaybolur. */
        box-shadow:
            0 calc((4px + 16px * var(--depth, 0.5)) * var(--lift, 1)) calc((12px + 32px * var(--depth, 0.5)) * var(--lift, 1)) rgb(28 26 24 / 0.16),
            0 calc(2px * var(--lift, 1)) calc(6px * var(--lift, 1)) rgb(28 26 24 / 0.08);
    }

    /* Arkadaki küçük kareler havadayken hafifçe silikleşir. Kare zemini opak
       olduğundan üst üste binen kareler birbirinin içinden görünmez. */
    .js .gather__frame img {
        opacity: calc(1 - (1 - var(--depth, 0.5)) * 0.18 * var(--lift, 1));
    }

    /* Kareler ızgarada yerine oturduktan sonra (JS .is-settled ekler) üzerine
       gelinen kare ikinci bir kareye kayarak geçer: yeni kare sağdan perdeyle
       gelir ve içinde daha yavaş kayıp yerine oturur, eski kare sola çekilip
       kararır, üzerinden bir parlama geçer; imleç ayrılınca geri kayar. Yalnızca
       fareyle gezinilen ekranlarda; dokunmatikte ve JS yokken ikinci kare
       gizlidir, yüklenmez. */
    .gather__next {
        display: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .js .gather__frame {
            position: relative;
        }

        .js .gather__frame img {
            transition: transform 1s var(--ease-out), filter 1s var(--ease-out);
        }

        .js .gather__next {
            position: absolute;
            inset: 0;
            display: block;
            overflow: hidden;
            transform: translateX(100%);
            transition: transform 1s var(--ease-out);
        }

        .js .gather__next img {
            transform: translateX(-40%) scale(1.08);
        }

        .js .gather.is-settled .gather__photo:hover .gather__frame > picture img {
            transform: translateX(-24%);
            filter: brightness(0.6);
        }

        .js .gather.is-settled .gather__photo:hover .gather__next,
        .js .gather.is-settled .gather__photo:hover .gather__next img {
            transform: none;
        }

        /* Parlama: kare kayarken üzerinden ince, eğik bir ışık geçer; imleç
           ayrılınca ışık görünmeden başa döner. */
        .js .gather__frame::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
            transform: translateX(-100%);
            pointer-events: none;
        }

        .js .gather.is-settled .gather__photo:hover .gather__frame::after {
            transform: translateX(100%);
            transition: transform 1.1s var(--ease-in-out) 0.25s;
        }
    }

    /* ---- Ana sayfa: film bandı ---------------------------------------------- */

    .film-band {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: end;
        min-height: clamp(32rem, 82vh, 54rem);
        overflow: hidden;
        background: var(--dark);
        color: #ffffff;
    }

    .film-band__media {
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .film-band__media picture,
    .film-band__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .film-band__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1.2s var(--ease-out);
    }

    .film-band__video.is-playing {
        opacity: 1;
    }

    /* Karartma açılıştaki dille aynı: alttan ve soldan gelir. Uzun başlığın uzandığı
       kadraj ortası da parlak karelerde okunur kalacak kadar koyulur; sağ üst açık
       kalır, üstteki ince karartma köşedeki düğmeyi okunur tutar. */
    .film-band::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(to top, rgb(18 16 14 / 0.84) 0%, rgb(18 16 14 / 0.52) 42%, rgb(18 16 14 / 0) 78%),
            linear-gradient(90deg, rgb(18 16 14 / 0.6) 0%, rgb(18 16 14 / 0.36) 45%, rgb(18 16 14 / 0) 80%),
            linear-gradient(to bottom, rgb(18 16 14 / 0.36) 0%, rgb(18 16 14 / 0) 22%);
    }

    @media (max-width: 39.99em) {
        .film-band::after {
            background:
                linear-gradient(to top, rgb(18 16 14 / 0.86) 0%, rgb(18 16 14 / 0.62) 44%, rgb(18 16 14 / 0.18) 74%, rgb(18 16 14 / 0) 88%),
                linear-gradient(to bottom, rgb(18 16 14 / 0.36) 0%, rgb(18 16 14 / 0) 22%);
        }
    }

    .film-band__content {
        padding-block: var(--section) var(--section-sm);
    }

    .film-band__title {
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1.04;
        letter-spacing: -0.02em;
    }

    /* Her cümle kendi satırında; dar ekranda satır kendi içinde dengeli kırılır. */
    .film-band__line {
        display: block;
        text-wrap: balance;
    }

    .film-band__text {
        max-width: 32rem;
        margin-top: var(--space-m);
        font-size: var(--step-1);
        line-height: 1.55;
        color: rgb(255 255 255 / 0.88);
    }

    /* Duraklat/oynat: kadrajın sağ üst köşesinde, rayın sağ kenarına hizalı kare
       düğme (sağ alttaki WhatsApp düğmesiyle çakışmaz). İnce çerçeve döngünün
       ilerleyişiyle dolar. */
    .film-band__toggle {
        position: absolute;
        top: var(--gutter);
        right: max(var(--gutter), (100% - var(--container)) / 2);
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        background: none;
        color: #ffffff;
        cursor: pointer;
        transition: background-color var(--fast);
    }

    .film-band__toggle:hover {
        background: rgb(255 255 255 / 0.12);
    }

    /* Simge çizgisi kare çerçeveyle aynı kalınlıkta (1.5px). */
    .film-band__toggle .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .film-band__toggle[data-state="playing"] .film-band__icon-play,
    .film-band__toggle[data-state="paused"] .film-band__icon-pause {
        display: none;
    }

    .film-band__progress {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .film-band__progress rect {
        fill: none;
        stroke: rgb(255 255 255 / 0.36);
        stroke-width: 1.5px;
        vector-effect: non-scaling-stroke;
    }

    .film-band__progress .film-band__progress-bar {
        stroke: #ffffff;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }

    .film-band :focus-visible {
        outline-color: #ffffff;
    }

    /* ---- Ana sayfa: süreç ---------------------------------------------------- */

    /* Dört eşit yükseklikte taş kart (panel). Numara sol üstte; başlıklar bütün
       kartlarda aynı hizada başlar, metin altında. */
    .process__steps {
        display: grid;
        gap: var(--tile-gap);
        padding: 0;
        list-style: none;
    }

    /* Üzerine gelince imlecin girdiği noktadan karta bir tık koyu taş rengi
       daire biçiminde dolar; imleç çıktığı noktaya doğru geri çekilir. Konumu
       JS verir (--x, --y; anında), yalnızca büyüme canlandırılır. */
    .process__step {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        row-gap: 0.75rem;
    }

    .process__step::before {
        content: "";
        position: absolute;
        top: var(--y, 50%);
        left: var(--x, 50%);
        z-index: -1;
        width: 400%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--stone-2);
        transform: translate(-50%, -50%) scale(0);
        transition: transform var(--slow) var(--ease-out);
        pointer-events: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .process__step:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .process__number {
        margin-bottom: var(--space-l);
        font-family: var(--font-display);
        font-size: var(--step-4);
        line-height: 1;
        color: var(--ink-3);
        font-variant-numeric: lining-nums tabular-nums;
    }

    .process__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    /* Dört açıklama eşit uzunlukta yazıldı (masaüstünde üçer satır); metni
       değiştirirken uzunlukları eşit tutun. */
    .process__text {
        color: var(--ink-2);
    }

    @media (min-width: 40em) {
        .process__steps {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64em) {
        .process__steps {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    /* ---- Hizmet ayrıntısı -------------------------------------------------- */

    /* İçerik ana sütunu doldurur (satır başına en çok ~80 karakter). */
    .service-content {
        max-width: 52rem;
    }

    /* Çekimin anları: başlık ve kısa açıklama, ince çizgilerle ayrılır. */
    .moment-list {
        border-top: 1px solid var(--line);
    }

    .moment-list > div {
        padding-block: var(--space-s);
        border-bottom: 1px solid var(--line);
    }

    .moment-list dt {
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.2;
    }

    .moment-list dd {
        margin-top: 0.25rem;
        font-size: var(--step-1);
        line-height: 1.6;
        color: var(--ink-2);
    }

    /* ---- Kenar çubuğu (hizmet ayrıntısı, SSS) ------------------------------- */

    /* Kenar çubuğu 64em üstünde içeriği kadar uzar, kendi içinde kaymaz.
       Ekrana sığıyorsa üst bilginin altında yapışık kalır; sığmıyorsa sayfayla
       birlikte kayar ve alt kenarı ekranın altına gelince yapışır (app.js
       --aside-top değerini kutunun yüksekliğine göre verir). */
    @media (min-width: 64em) {
        .aside-stack {
            position: sticky;
            top: var(--aside-top, calc(var(--header-h) + var(--space-l)));
        }
    }

    /* Sıkı kutular: küçük başlık, dar satırlar, kutular arasında az boşluk. */
    .split__aside.aside-stack > * + * {
        margin-top: var(--space-m);
    }

    .aside-stack .panel {
        gap: var(--space-s);
    }

    .aside-stack .panel__title {
        font-size: var(--step-2);
    }

    .aside-nav {
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--line-strong);
    }

    .aside-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-s);
        padding-block: 0.6rem;
        border-bottom: 1px solid var(--line-strong);
        color: var(--ink-2);
        text-decoration: none;
        transition: color var(--fast);
    }

    .aside-nav__link .icon {
        width: 1rem;
        height: 1rem;
        transition: transform var(--base) var(--ease-out);
    }

    .aside-nav__link:hover {
        color: var(--ink);
    }

    .aside-nav__link:hover .icon {
        transform: translateX(3px);
    }

    /* Bulunulan sayfa ya da konu: mürekkep ve kalın, solunda kısa bronz çizgi. */
    .aside-nav__link[aria-current] {
        justify-content: flex-start;
        color: var(--ink);
        font-weight: 600;
    }

    .aside-nav__link[aria-current]::before {
        content: "";
        flex: none;
        width: 0.75rem;
        height: 1px;
        background: var(--accent);
    }

    /* SSS konularında soru sayısı satırın sağında. */
    .aside-nav__count {
        margin-left: auto;
    }

    /* ---- Hakkımızda --------------------------------------------------------- */

    /* Manifesto iki katlıdır: üstte solda beyan, sağda düzyazı; altta aynı ince
       çizgiyle başlayan çağrı bloğu (sol) ve 2×2 stüdyo künyesi (sağ).
       Dar ekranda sıra: beyan, düzyazı, künye, çağrı. */
    .manifesto {
        display: grid;
        grid-template-areas: "title" "body" "facts" "cta";
        gap: var(--stack-gap);
        align-items: start;
    }

    .manifesto__body {
        grid-area: body;
    }

    .manifesto__cta {
        grid-area: cta;
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }

    .manifesto__cta-text {
        max-width: 30rem;
        font-size: var(--step-1);
        line-height: 1.55;
        color: var(--ink-2);
    }

    .manifesto__cta .actions {
        margin-top: var(--space-m);
    }

    .manifesto__title {
        grid-area: title;
        max-width: 14ch;
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1.04;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    /* Beyan iki satırdır ve her satır tek parça kalır; alan, eski dört satırlık
       beyanın yüksekliğini korur (4 satır × 1.04). Satırlar üstten başlar,
       sağdaki düzyazının ilk satırıyla hizalı. */
    .manifesto__title {
        min-height: 4.16em;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .manifesto__line {
        display: block;
        white-space: nowrap;
    }

    .manifesto__body p {
        font-size: var(--step-1);
        line-height: 1.6;
        color: var(--ink-2);
    }

    .manifesto__body p + p {
        margin-top: var(--space-m);
    }

    .studio-facts {
        grid-area: facts;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l) var(--card-gap);
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }

    .studio-facts dt {
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .studio-facts dd {
        margin-top: var(--space-2xs);
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.15;
    }

    @media (min-width: 64em) {
        .manifesto {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            grid-template-areas: "title body" "cta facts";
            column-gap: var(--col-gap);
            row-gap: var(--space-xl);
        }
    }

    /* Çekim günü şeridi: üstte kesintisiz çizgi ve kare bronz işaretler; her
       durakta saat, başlık, 3:4 fotoğraf ve metin. Dar ekranda yatay kaydırılır. */
    .day-line {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        column-gap: var(--card-gap);
        margin-inline: calc(-1 * var(--gutter));
        padding: 0 var(--gutter) var(--space-2xs);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        list-style: none;
    }

    .day-line__step {
        position: relative;
        padding-top: var(--space-l);
        border-top: 1px solid var(--line-strong);
        scroll-snap-align: start;
    }

    .day-line__step::before {
        content: "";
        position: absolute;
        top: calc(-0.3125rem - 0.5px);
        left: 0;
        width: 0.625rem;
        height: 0.625rem;
        background: var(--accent);
    }

    /* Duraklar arasındaki boşlukta da çizgi sürer. */
    .day-line__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 100%;
        width: var(--card-gap);
        height: 1px;
        background: var(--line-strong);
    }

    .day-line__path {
        display: none;
    }

    .day-line__time {
        display: block;
        margin-bottom: var(--space-2xs);
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .day-line__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .day-line__shot {
        position: relative;
        margin-top: var(--space-m);
    }

    .day-line__media {
        aspect-ratio: 3 / 4;
    }

    .day-line__text {
        margin-top: var(--space-m);
        color: var(--ink-2);
    }

    @media (min-width: 64em) {
        .day-line {
            position: relative;
            grid-auto-flow: row;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            margin-inline: 0;
            padding: 0;
            overflow: visible;
        }

        /* Gün ilerledikçe duraklar, işaretleri ve çizgileriyle birlikte eşit
           basamaklarla aşağı iner; güneşin alçalması gibi. */
        .day-line__step {
            border-top: 0;
        }

        .day-line__step:not(:last-child)::after {
            display: none;
        }

        .day-line__step:nth-child(2) {
            margin-top: var(--space-xl);
        }

        .day-line__step:nth-child(3) {
            margin-top: calc(var(--space-xl) * 2);
        }

        .day-line__step:nth-child(4) {
            margin-top: calc(var(--space-xl) * 3);
        }

        /* Basamaklı çizgi: her durağın üstünde yatay; duraklar arasındaki boşluğu
           geçip bir basamak aşağı, sonraki durağın işaretine iner. */
        .day-line__path {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: calc(100% + var(--card-gap));
            height: var(--space-xl);
            overflow: visible;
        }

        .day-line__step:last-child .day-line__path {
            width: 100%;
        }

        .day-line__path line {
            stroke: var(--line-strong);
            stroke-width: 1px;
        }

        /* Kaydırdıkça bronz çizgi basamaklar boyunca dolar; çizginin ulaştığı
           işaretlerin içi dolar. JS yoksa çizgi ve işaretler sabit kalır. */
        .day-line__path .day-line__fill {
            stroke: none;
        }

        .js .day-line__path .day-line__fill {
            stroke: var(--accent);
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            transition: stroke-dashoffset 0.45s var(--ease-out);
        }

        .js .day-line__step::before {
            z-index: 2;
            background: var(--stone);
            box-shadow: inset 0 0 0 1px var(--accent);
            transition: background-color var(--base) var(--ease-out);
        }

        .js .day-line__step.is-reached::before {
            background: var(--accent);
        }
    }

    /* Kare yakalanıyor: fotoğraf hafif flu ve %6 büyük bekler, köşelerinin biraz
       dışında ince bronz köşe işaretleri durur. Çizgi durağa varınca (dar ekranda
       kart göründüğünde) işaretler köşelere kapanır, fotoğraf netleşip yerine
       oturur, ardından işaretler söner. Bekleme hâlini JS kurar; JS yoksa
       fotoğraflar net, işaretler gizlidir. */
    .day-line__focus {
        display: none;
    }

    .day-line.is-armed .day-line__focus {
        --corner: linear-gradient(var(--accent), var(--accent));
        display: block;
        position: absolute;
        inset: calc(var(--card-gap) / -3);
        background:
            var(--corner) left top / 1rem 1px no-repeat,
            var(--corner) left top / 1px 1rem no-repeat,
            var(--corner) right top / 1rem 1px no-repeat,
            var(--corner) right top / 1px 1rem no-repeat,
            var(--corner) left bottom / 1rem 1px no-repeat,
            var(--corner) left bottom / 1px 1rem no-repeat,
            var(--corner) right bottom / 1rem 1px no-repeat,
            var(--corner) right bottom / 1px 1rem no-repeat;
        pointer-events: none;
        transition: inset var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
    }

    .day-line.is-armed .day-line__media img {
        filter: blur(6px);
        transform: scale(1.06);
        transition: transform 1.2s var(--ease-out), filter var(--slow) var(--ease-out);
    }

    .day-line.is-armed .is-captured .day-line__focus {
        inset: 0;
        opacity: 0;
        transition: inset var(--base) var(--ease-out), opacity var(--slow) var(--ease-out) 0.9s;
    }

    .day-line.is-armed .is-captured .day-line__media img {
        filter: none;
        transform: none;
        transition: transform 1.2s var(--ease-out), filter var(--slow) var(--ease-out) 0.12s;
    }

    /* Sayfa açılırken geçilmiş duraklar geçişsiz, doğrudan net gelir. */
    .day-line.is-armed.is-still .day-line__step .day-line__focus,
    .day-line.is-armed.is-still .day-line__step .day-line__media img {
        transition: none;
    }

    /* İlkeler: ortada dikey fotoğraf, dört köşesinde ilkeler. Soldakiler fotoğrafa
       doğru sağa, sağdakiler sola yaslanır. Dar ekranda fotoğraf üstte. */
    .principles {
        display: grid;
        gap: var(--space-xl) var(--card-gap);
    }

    .principles__media {
        aspect-ratio: 3 / 2;
    }

    .principles__item::before {
        content: "";
        display: block;
        width: 2rem;
        height: 1px;
        margin-bottom: var(--space-m);
        background: var(--accent);
    }

    .principles__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .principles__text {
        max-width: 30rem;
        margin-top: 0.75rem;
        color: var(--ink-2);
    }

    @media (min-width: 40em) {
        .principles {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .principles__media {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 64em) {
        .principles {
            grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) minmax(0, 1fr);
            column-gap: var(--col-gap);
            align-items: center;
        }

        .principles__media {
            grid-column: 2;
            grid-row: 1 / span 2;
            aspect-ratio: 4 / 5;
        }

        .principles__item:nth-child(2) {
            grid-area: 1 / 1;
        }

        .principles__item:nth-child(3) {
            grid-area: 1 / 3;
        }

        .principles__item:nth-child(4) {
            grid-area: 2 / 1;
        }

        .principles__item:nth-child(5) {
            grid-area: 2 / 3;
        }

        .principles__item:nth-child(2),
        .principles__item:nth-child(4) {
            justify-self: end;
            text-align: right;
        }

        .principles__item:nth-child(2)::before,
        .principles__item:nth-child(4)::before,
        .principles__item:nth-child(2) .principles__text,
        .principles__item:nth-child(4) .principles__text {
            margin-left: auto;
        }
    }

    /* ---- İletişim -------------------------------------------------------------- */

    /* Tek bölüm: 64em üstünde solda form (7 birim); sağda iletişim künyesi ve
       altında, formun boyuna kadar uzayan harita (5 birim). Dar ekranda sıra:
       künye, form, harita. */
    .contact-hub {
        display: grid;
        grid-template-areas: "facts" "form" "map";
        gap: var(--space-xl);
    }

    .contact-hub__form {
        grid-area: form;
    }

    .contact-hub__facts {
        grid-area: facts;
    }

    .contact-hub__map {
        grid-area: map;
    }

    @media (min-width: 64em) {
        .contact-hub {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            grid-template-rows: auto minmax(14rem, 1fr);
            grid-template-areas: "form facts" "form map";
            gap: var(--space-l) var(--col-gap);
        }
    }

    /* İletişim künyesi (Hakkımızda'daki stüdyo künyesinin dili): üstte tek ince
       çizgi; her kalemde küçük etiket, altında Display değer ve gerekiyorsa ok
       bağlantısı. Simge ve satır çizgisi yoktur. Yer varsa ikişer sütun; tek
       kalan son kalem satırı boydan boya kaplar. */
    .contact-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: var(--space-l) var(--card-gap);
        align-content: start;
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }

    .contact-facts__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .contact-facts dt {
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .contact-facts dd {
        display: grid;
        justify-items: start;
        gap: var(--space-xs);
        margin-top: var(--space-2xs);
    }

    .contact-facts__value {
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.2;
        color: var(--ink);
        overflow-wrap: break-word;
    }

    a.contact-facts__value {
        text-decoration: underline 1px transparent;
        text-underline-offset: 0.2em;
        transition: text-decoration-color var(--fast);
    }

    a.contact-facts__value:hover {
        text-decoration-color: var(--accent);
    }

    .contact-facts__link {
        font-size: var(--step--1);
    }

    /* Harita: düz köşeli taş çerçeve (dar ekranda 4:3). Leaflet yüklenince
       içini doldurur; yüklenene kadar ya da JS yoksa adres ve bağlantı görünür.
       Kendi katman bağlamını kurar: Leaflet'in iç katmanları (z-index 400–1000)
       yapışkan üst bilginin, mobil menünün ve WhatsApp düğmesinin üstüne çıkmaz. */
    .contact-map {
        position: relative;
        isolation: isolate;
        min-height: 14rem;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--stone);
    }

    .contact-map__canvas,
    .contact-map__fallback {
        position: absolute;
        inset: 0;
    }

    .contact-map__fallback {
        display: grid;
        align-content: center;
        justify-items: center;
        gap: var(--space-xs);
        padding: var(--inset);
        text-align: center;
    }

    .contact-map__pin {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--accent);
    }

    .contact-map__address {
        max-width: 26rem;
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.25;
    }

    .contact-map.is-ready .contact-map__fallback {
        display: none;
    }

    @media (min-width: 64em) {
        .contact-map {
            aspect-ratio: auto;
        }
    }

    /* Form: kâğıt zeminde taş kart. */
    .inquiry-card {
        min-width: 0;
        padding: var(--inset);
        background: var(--stone);
        scroll-margin-top: calc(var(--header-h) + var(--space-l));
    }

    /* Kısa WhatsApp formu: alanlar 40em üstünde ikişerli, mesaj tam genişlikte;
       düğme küçük ekranda tam genişlik. */
    .wa-form .form__submit {
        display: grid;
    }

    .wa-form .form__submit .btn {
        width: 100%;
    }

    @media (min-width: 40em) {
        .inquiry-card {
            padding: var(--space-l);
        }

        .wa-form .form__submit .btn {
            width: fit-content;
            min-width: 12rem;
        }
    }

    /* ---- SSS sayfası ------------------------------------------------------------ */

    .faq-group {
        scroll-margin-top: calc(var(--header-h) + var(--space-l));
    }

    .faq-group + .faq-group {
        margin-top: var(--section-sm);
    }

    .faq-group__title {
        margin-bottom: var(--space-s);
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    /* ---- Yasal metinler -------------------------------------------------------- */

    .legal__intro {
        font-size: var(--step-1);
    }

    /* ---- Paketler ---------------------------------------------------------------- */

    /* Paket grupları ve kartları. Her grup üstte `line-strong` çizgiyle başlar:
       solda step-3 Display başlık, sağda ok bağlantıları.
       Kartlar kâğıt zeminde taş kutulardır. Aynı sıradaki kartların başlık,
       fiyat, madde ve düğme satırları hizalıdır (subgrid): fiyatlar ve maddeler
       aynı yükseklikten başlar, düğmeler aynı çizgide biter. Fiyat step-5
       Display (₺ yarım boy), maddelerin önünde bronz onay işareti, altta dış
       çizgili düğme. Öne çıkan paket koyu banttır (açık düğme). 40em üstünde
       iki, 64em üstünde üç sütun; iki paketli grup 64em üstünde iki sütundur. */
    .package-group + .package-group {
        margin-top: var(--section-sm);
    }

    .package-group__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-xs) var(--space-l);
        margin-bottom: var(--space-l);
        padding-top: var(--space-m);
        border-top: 1px solid var(--line-strong);
    }

    .package-group__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .package-grid {
        display: grid;
        gap: var(--tile-gap);
        padding: 0;
        list-style: none;
    }

    .package-card {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 0;
        padding: var(--inset);
        background: var(--stone);
        scroll-margin-top: calc(var(--header-h) + var(--space-l));
    }

    .package-card__head {
        padding-bottom: var(--space-m);
    }

    .package-card__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: var(--space-xs);
        font-size: var(--step--1);
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--accent);
    }

    .package-card__badge::before {
        content: "";
        width: 1.5rem;
        height: 1px;
        background: var(--accent);
    }

    .package-card__name {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .package-card__summary {
        margin-top: var(--space-2xs);
        color: var(--ink-2);
    }

    .package-card__price {
        display: grid;
        align-content: start;
        gap: 0.35rem;
        padding-block: var(--space-m);
        border-top: 1px solid var(--line-strong);
    }

    .package-card__amount {
        font-family: var(--font-display);
        font-size: var(--step-5);
        line-height: 1;
        letter-spacing: -0.015em;
    }

    .package-card__currency {
        margin-left: 0.18em;
        font-size: 0.5em;
        letter-spacing: 0;
    }

    .package-card__note {
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .package-card__features {
        display: grid;
        align-content: start;
        gap: var(--space-xs);
        margin: 0;
        padding: var(--space-m) 0 0;
        border-top: 1px solid var(--line);
        list-style: none;
    }

    .package-card__features li {
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        column-gap: 0.7rem;
        line-height: 1.45;
    }

    .package-card__check {
        width: 1rem;
        height: 1rem;
        margin-top: 0.2em;
        color: var(--accent);
    }

    .package-card__cta {
        align-self: end;
        margin-top: var(--space-l);
    }

    .package-card .btn--outline:hover {
        background: var(--paper);
    }

    .package-card--featured {
        background: var(--dark);
        color: var(--on-dark);
    }

    .package-card--featured .package-card__badge {
        color: var(--on-dark);
    }

    .package-card--featured .package-card__summary,
    .package-card--featured .package-card__note,
    .package-card--featured .package-card__check {
        color: var(--on-dark-2);
    }

    .package-card--featured .package-card__price,
    .package-card--featured .package-card__features {
        border-color: var(--line-on-dark);
    }

    .package-card--featured :focus-visible {
        outline-color: var(--on-dark);
    }

    .package-group__links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs) var(--space-l);
    }

    @media (min-width: 40em) {
        .package-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64em) {
        .package-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .package-grid--pair {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* ---- Albüm seçenekleri (/paketler/albumler) ------------------------------------ */

    /* Bölüm başlığı: solda Headline başlık ve kısa açıklama, sağda (yer varsa
       aynı satırda, alta hizalı) ok bağlantısı. */
    .albums-head {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--space-m) var(--col-gap);
        margin-bottom: var(--head-gap);
    }

    .albums-head__text {
        max-width: 36rem;
        margin-top: var(--space-s);
        color: var(--ink-2);
    }

    /* Kumaş süzgeci (JS ile görünür): ince çizgi üzerinde metin düğmeleri,
       yanlarında `ink-3` model sayısı; seçili olan mürekkep, kalın ve altında
       bronz çizgi (blog kategori süzgeciyle aynı dil). */
    .album-filter {
        display: flex;
        gap: var(--space-l);
        margin-bottom: var(--space-l);
        overflow-x: auto;
        border-bottom: 1px solid var(--line);
        scrollbar-width: none;
    }

    .album-filter[hidden] {
        display: none;
    }

    .album-filter__item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: -1px;
        padding: 0.75rem 0;
        border: 0;
        border-bottom: 1px solid transparent;
        background: none;
        color: var(--ink-2);
        font: inherit;
        white-space: nowrap;
        cursor: pointer;
        transition: color var(--fast), border-color var(--fast);
    }

    .album-filter__item:hover {
        color: var(--ink);
    }

    .album-filter__item[aria-pressed="true"] {
        border-bottom-color: var(--accent);
        color: var(--ink);
        font-weight: 600;
    }

    /* Modeller: 4:3 kareler (kırpılır), altında Display ad ve `ink-3` kumaş;
       2/3/4/5 sütun. */
    .album-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l) var(--tile-gap);
        padding: 0;
        list-style: none;
    }

    .album-card {
        min-width: 0;
    }

    .album-card__media {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--stone-2);
    }

    .album-card__media picture {
        display: block;
        height: 100%;
    }

    .album-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .album-card__name {
        margin-top: var(--space-xs);
        font-family: var(--font-display);
        font-size: var(--step-1);
        line-height: 1.2;
    }

    .album-card__meta {
        margin-top: 0.15rem;
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    /* Kapak kumaşları (taş bant): her kumaş kâğıt bir kutu; üstte ince çizgiyle
       ayrılmış Display ad ve `ink-3` renk sayısı, altında dörderli renk örnekleri
       (düz köşeli kare, altında ad). 64em üstünde üç sütun. */
    .album-fabrics {
        display: grid;
        gap: var(--card-gap);
        padding: 0;
        list-style: none;
    }

    .album-fabric {
        display: grid;
        align-content: start;
        gap: var(--space-m);
        padding: var(--inset);
        background: var(--paper);
    }

    .album-fabric__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-s);
        padding-bottom: var(--space-s);
        border-bottom: 1px solid var(--line);
    }

    .album-fabric__name {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .album-fabric__count {
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .album-swatches {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-s) var(--space-xs);
        padding: 0;
        list-style: none;
    }

    .album-swatch {
        display: grid;
        align-content: start;
        gap: 0.4rem;
        min-width: 0;
    }

    .album-swatch__chip {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        outline: 1px solid var(--line);
        outline-offset: -1px;
    }

    .album-swatch__name {
        font-size: var(--step--1);
        line-height: 1.25;
        color: var(--ink-2);
    }

    @media (min-width: 40em) {
        .album-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 64em) {
        .album-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .album-fabrics {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 80em) {
        .album-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }

    /* Her pakette (taş bant): solda başlık ve hemen altında kâğıt özel teklif
       kutusu; sağda üstü ve altı `line-strong` çizgili numaralı
       liste: Display numara (`ink-3`), Display başlık, gövde boyunda açıklama.
       64em üstünde sol sütun yapışkandır (aside-stack): sayfa kaydıkça listeyle
       birlikte iner ve alt kenarı listenin sonunda durur. Dar ekranda sarmalayıcı
       yok sayılır; sıra başlık, liste, kutu. */
    .package-terms {
        display: grid;
        gap: var(--head-gap) var(--col-gap);
    }

    .package-terms__aside {
        display: contents;
    }

    .package-terms__lead {
        max-width: 30rem;
        margin-top: var(--space-s);
        color: var(--ink-2);
    }

    .package-terms__list {
        padding: 0;
        list-style: none;
        border-bottom: 1px solid var(--line-strong);
    }

    .package-terms__item {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        align-items: baseline;
        column-gap: var(--space-m);
        padding-block: var(--space-l);
        border-top: 1px solid var(--line-strong);
    }

    .package-terms__index {
        grid-row: span 2;
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1;
        color: var(--ink-3);
    }

    .package-terms__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .package-terms__text {
        grid-column: 2;
        max-width: 34rem;
        margin-top: var(--space-xs);
        color: var(--ink-2);
    }

    .package-terms__custom {
        order: 1;
        display: grid;
        justify-items: start;
        gap: var(--space-s);
        padding: var(--inset);
        background: var(--paper);
    }

    .package-terms__custom-title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .package-terms__custom-text {
        max-width: 30rem;
        color: var(--ink-2);
    }

    .package-terms__custom .actions {
        margin-top: var(--space-2xs);
    }

    @media (min-width: 64em) {
        .package-terms {
            grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
            align-items: start;
        }

        .package-terms__aside {
            display: grid;
            gap: var(--space-xl);
        }

        .package-terms__custom {
            order: 0;
        }

        .package-terms__item {
            grid-template-columns: 4rem minmax(0, 1fr);
        }
    }

    /* ---- Blog ---------------------------------------------------------------------- */

    /* Kategori süzgeci: ince çizgi üzerinde yatay kayan metin bağlantıları;
       bulunulan kategori mürekkep, kalın ve altında bronz çizgi. */
    .blog-filter {
        margin-bottom: var(--head-gap);
        border-bottom: 1px solid var(--line);
    }

    .blog-filter__list {
        display: flex;
        gap: var(--space-l);
        padding: 0;
        overflow-x: auto;
        list-style: none;
        scrollbar-width: none;
    }

    .blog-filter__link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: -1px;
        padding-block: 0.75rem;
        border-bottom: 1px solid transparent;
        color: var(--ink-2);
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--fast), border-color var(--fast);
    }

    .blog-filter__link:hover {
        color: var(--ink);
    }

    .blog-filter__link[aria-current] {
        border-bottom-color: var(--accent);
        color: var(--ink);
        font-weight: 600;
    }

    /* Yazı bilgisi: kategori · tarih · okuma süresi. */
    .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.6rem;
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .post-meta > * + *::before {
        content: "·";
        margin-right: 0.6rem;
        color: var(--line-strong);
    }

    .post-meta a {
        text-decoration: none;
    }

    .post-meta a:hover {
        color: var(--ink);
        text-decoration: underline;
    }

    .post-meta__accent {
        font-weight: 500;
        color: var(--accent);
    }

    /* Öne çıkan yazı (ilk sayfa): 64em üstünde solda büyük 3:2 kapak, sağda
       başlık, özet ve bağlantı; altında ince ayırıcı. */
    .post-feature {
        display: grid;
        gap: var(--space-l);
        margin-bottom: var(--card-row-gap);
        padding-bottom: var(--card-row-gap);
        border-bottom: 1px solid var(--line);
    }

    .post-feature__body {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: var(--space-s);
    }

    .post-feature__title {
        font-family: var(--font-display);
        font-size: var(--step-4);
        line-height: 1.08;
        letter-spacing: -0.01em;
    }

    .post-feature__excerpt {
        max-width: 34rem;
        font-size: var(--step-1);
        color: var(--ink-2);
    }

    .post-feature__title a,
    .post-card__title a {
        text-decoration: none;
    }

    .post-feature__title a:hover,
    .post-card__title a:hover {
        text-decoration: underline;
        text-decoration-color: var(--accent);
    }

    /* Yazı ızgarası: 40em üstünde iki, 64em üstünde üç sütun. */
    .post-grid {
        display: grid;
        gap: var(--card-row-gap) var(--card-gap);
        padding: 0;
        list-style: none;
    }

    .post-card {
        display: grid;
        align-content: start;
        gap: var(--space-s);
    }

    .post-card__media {
        display: block;
        margin-bottom: var(--space-2xs);
    }

    .post-card__title {
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.2;
    }

    .post-card__excerpt {
        display: -webkit-box;
        overflow: hidden;
        color: var(--ink-2);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    @media (hover: hover) and (pointer: fine) {
        .post-feature:hover .post-feature__media img,
        .post-card:hover .post-card__media img {
            transform: scale(1.03);
        }
    }

    /* Sayfalama: solda önceki, ortada konum, sağda sonraki. */
    .pager {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-m);
        margin-top: var(--card-row-gap);
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }

    .pager > :first-child {
        justify-self: start;
    }

    .pager > :last-child {
        justify-self: end;
    }

    .pager__status {
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .link-arrow--back:hover .icon {
        transform: translateX(-4px);
    }

    .blog-empty {
        display: grid;
        justify-items: center;
        gap: var(--space-s);
        max-width: 38rem;
        margin-inline: auto;
        text-align: center;
    }

    .blog-empty__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        line-height: 1.12;
    }

    .blog-empty__text {
        color: var(--ink-2);
    }

    .blog-empty .actions {
        justify-content: center;
    }

    @media (min-width: 40em) {
        .post-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64em) {
        .post-feature {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            column-gap: var(--col-gap);
        }

        .post-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Yazı sayfası: başlık uzun olabileceğinden bir basamak küçük ve daha
       geniş; gövde okuma ölçüsünde, ara başlıklar "Bu yazıda" listesine bağlı. */
    .page-hero--article .page-hero__title {
        max-width: 24ch;
        font-size: var(--step-4);
        line-height: 1.06;
    }

    .article {
        min-width: 0;
    }

    .article__meta {
        margin-bottom: var(--space-l);
    }

    .article__body {
        max-width: 46rem;
    }

    .article__body h3 {
        margin-top: 1.6em;
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.2;
    }

    .article__body h4 {
        margin-top: 1.4em;
        font-weight: 600;
    }

    .article__body ol {
        padding-left: 1.4rem;
    }

    .article__body ol li::marker {
        font-family: var(--font-display);
        color: var(--accent);
    }

    .article__body blockquote {
        padding-left: var(--space-m);
        border-left: 1px solid var(--accent);
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.35;
    }

    .article__body hr {
        margin-block: 2em;
        border: 0;
        border-top: 1px solid var(--line);
    }

    .article__body table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--step--1);
    }

    .article__body th,
    .article__body td {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

    .article__body th {
        font-weight: 600;
    }

    .article__body figcaption {
        margin-top: 0.5rem;
        font-size: var(--step--1);
        color: var(--ink-3);
    }

    .article__back {
        margin-top: var(--head-gap);
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }

    /* Panelden açılan önizleme: yazının henüz yayında olmadığını söyleyen şerit. */
    .preview-bar {
        padding: 0.6rem var(--gutter);
        background: var(--ink);
        color: var(--on-dark);
        font-size: var(--step--1);
        text-align: center;
    }

}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ==========================================================================
   Hareket anahtar kareleri
   ========================================================================== */

@keyframes hero-settle {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

@keyframes line-rise {
    from {
        transform: translateY(108%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Galeriden açılan resmin kısa süreli yer vurgusu. */
.media-spotlight {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: rgb(28 26 24 / 0.72);
    opacity: 1;
    transition: opacity 160ms ease-out;
}

.media-spotlight.is-leaving {
    opacity: 0;
}

.gather__frame.is-media-next {
    position: relative;
}

.gather__frame.is-media-next .gather__next {
    position: absolute;
    inset: 0;
    display: block;
    transform: none;
    transition: none;
}

.gather__frame.is-media-next .gather__next img,
.gather__frame.is-media-primary > picture img {
    transform: none;
    filter: none;
    opacity: 1;
    transition: none;
}

.gather__frame.is-media-primary .gather__next,
.film-band.is-media-preview .film-band__video {
    visibility: hidden;
}

/* Çekim günü animasyonundaki netleme, önizlenen resmi bulanık bırakmasın. */
.day-line__media img.is-media-preview-image {
    filter: none;
    transform: none;
    transition: none;
}