/* ==========================================================================
   /hikayemiz · "Vadiden şişeye" sayfa katmanı (scroll-craft)
   Engine (scrollcraft.css/js) değiştirilmez; bu dosya token'ları siteden türetir ve
   yalnız main.pa-yolculuk kapsamını biçimler. Hex yok: renkler probiyotik.css :root'tan.
   Hareket: yalnız transform / opacity / clip-path, --sc-p (act ilerlemesi) üzerinden.
   v2 (2026-09-15): tek plaka hero, sıkı tempo (span ≤ 2.2, sessiz boşluk ≤ 12svh),
   küçültülmüş görseller, yeni act'ler: üretim (pan), sirke anası (pin), etiket (pin).
   ========================================================================== */
:root {
    --sc-canvas: var(--pa-orman-900);
    --sc-surface: var(--pa-orman-800);
    --sc-ink: var(--pa-beyaz);
    --sc-ink-soft: var(--pa-coruh-100);
    --sc-accent: var(--pa-coruh-600);
    --sc-accent-ink: var(--pa-beyaz);
    --sc-font-display: var(--pa-font-baslik);
    --sc-font-text: var(--pa-font-govde);
    --sc-gutter: clamp(24px, 5vw, 80px);
    --sc-maxw: 1240px; /* Bootstrap 3 html{font-size:10px}: engine rem değerleri küçülüyor, px ver */
    --yc-header: 90px;
    --yc-bosluk: 64px;                   /* flow bölümlerinin sıkı iç boşluğu (site 96px) */
    --yc-perde: rgba(12, 42, 33, .8);    /* orman 900 */
    --yc-cizgi: rgba(219, 238, 236, .2); /* çoruh 100 */
    --yc-perde-50: rgba(12, 42, 33, .5);
    --yc-perde-55: rgba(12, 42, 33, .55);
    --yc-perde-45: rgba(12, 42, 33, .45);
    --yc-perde-0: rgba(12, 42, 33, 0);
    --yc-golge: rgba(5, 20, 15, .45);
}
@media only screen and (max-width: 767px) {
    :root { --yc-header: 72px; --yc-bosluk: 48px; }
}

/* Footer dalgası önceki bölümün rengini taşır */
main.pa-yolculuk ~ footer.pa-footer .pa-dalga-ust { color: var(--pa-orman-900); }

main.pa-yolculuk {
    display: block;
    background: var(--sc-canvas);
    color: var(--pa-beyaz);
    font-family: var(--pa-font-govde);
    font-size: var(--pa-fs-govde);
    line-height: 1.6;
}
main.pa-yolculuk :focus-visible { outline: 2px solid var(--pa-coruh-100); outline-offset: 3px; }
main.pa-yolculuk ::selection { background: var(--pa-coruh-100); color: var(--pa-orman-900); }
main.pa-yolculuk p, main.pa-yolculuk figure, main.pa-yolculuk h1, main.pa-yolculuk h2, main.pa-yolculuk h3 { margin: 0; }
main.pa-yolculuk img { max-width: none; }
.yc-gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tipografi: sitenin 5 kademesi ---------- */
main.pa-yolculuk .yc-h1 {
    font-family: var(--pa-font-baslik); font-weight: 700;
    font-size: var(--pa-fs-hero); line-height: 1.08; letter-spacing: -.01em;
    color: var(--pa-beyaz); text-wrap: balance;
}
main.pa-yolculuk .yc-h2 {
    font-family: var(--pa-font-baslik); font-weight: 700;
    font-size: var(--pa-fs-bolum); line-height: 1.15; letter-spacing: -.005em;
    color: var(--pa-beyaz); text-wrap: balance;
}
main.pa-yolculuk .yc-buyuk-2 {
    font-family: var(--pa-font-baslik); font-weight: 700;
    font-size: var(--pa-fs-bolum); line-height: 1.2; color: var(--pa-beyaz); text-wrap: balance;
}
main.pa-yolculuk .yc-lede,
main.pa-yolculuk .yc-buyuk { font-size: var(--pa-fs-baslik); line-height: 1.45; color: var(--pa-beyaz); text-wrap: pretty; }
main.pa-yolculuk .yc-metin { font-size: var(--pa-fs-govde); line-height: 1.7; color: var(--pa-coruh-100); max-width: 34em; text-wrap: pretty; }

/* ==========================================================================
   1 · Hero: tek plaka (ürün çekimi), yavaş ölçek + drift
   ========================================================================== */
.yc-hero [data-sc-stage] { background: var(--pa-orman-900); }
.yc-sahne { position: absolute; inset: 0; display: block; overflow: hidden; }
/* Masaüstünde şişe kapağı saydam header menüsünün altına düşmesin: plaka header yüksekliği kadar aşağıdan başlar */
@media only screen and (min-width: 992px) {
    .yc-hero .yc-sahne { top: var(--yc-header); }
}
.yc-plaka {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 50%; transform-origin: 68% 70%;
}
.yc-hero-scrim {
    position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, var(--yc-perde) 0%, var(--yc-perde-55) 48%, var(--yc-perde-0) 100%);
}
.yc-hero .yc-hero-metin { left: var(--sc-gutter); right: auto; top: calc(var(--yc-header) + 16svh); bottom: auto; max-width: 544px; }
.yc-hero .yc-hero-metin .yc-lede { margin-top: var(--pa-s-6); max-width: 26em; }
.yc-hero .yc-hero-ikinci { left: var(--sc-gutter); right: auto; top: auto; bottom: 14svh; max-width: 480px; }
main.pa-yolculuk .yc-hero .yc-h1,
main.pa-yolculuk .yc-hero .yc-lede,
main.pa-yolculuk .yc-hero .yc-buyuk { text-shadow: 0 1px 3px var(--yc-perde-45); }

@media (prefers-reduced-motion: no-preference) {
    .yc-hero .yc-plaka { transform: translate3d(calc(var(--sc-p, 0) * -1.2%), calc(var(--sc-p, 0) * -1.5%), 0) scale(calc(1.02 + var(--sc-p, 0) * .07)); }
}

/* ==========================================================================
   2 · Yatay raylar (meyveler, üretim)
   ========================================================================== */
.yc-meyveler [data-sc-stage],
.yc-uretim [data-sc-stage] { display: flex; align-items: center; }
.yc-ray {
    align-items: center; gap: var(--pa-s-8);
    padding: calc(var(--yc-header) + var(--pa-s-4)) var(--sc-gutter) var(--pa-s-4);
}
.yc-ray > * { flex: 0 0 auto; }
.yc-ray-bas { width: min(400px, 80vw); }
.yc-ray-bas .yc-metin { margin-top: var(--pa-s-4); }
.yc-meyve { width: clamp(168px, 14vw, 208px); }
.yc-meyve img {
    display: block; width: 100%; height: clamp(112px, 10vw, 152px); object-fit: contain;
    filter: drop-shadow(0 10px 14px var(--yc-golge));
}
.yc-meyve figcaption { margin-top: var(--pa-s-3); padding-top: var(--pa-s-3); border-top: 1px solid var(--yc-cizgi); }
main.pa-yolculuk .yc-meyve h3,
main.pa-yolculuk .yc-adim h3 { font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-baslik); line-height: 1.2; color: var(--pa-beyaz); }
.yc-meyve span { display: block; margin-top: var(--pa-s-1); font-size: var(--pa-fs-kucuk); color: var(--pa-coruh-100); }
.yc-ray-son { width: min(320px, 72vw); }

.yc-adim { width: clamp(280px, 27vw, 400px); }
.yc-adim img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--pa-radius); }
.yc-adim figcaption { margin-top: var(--pa-s-4); }
main.pa-yolculuk .yc-adim p { margin-top: var(--pa-s-2); font-size: var(--pa-fs-govde); line-height: 1.6; color: var(--pa-coruh-100); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
    /* Rayın öğeleri sırayla yerine oturur; ilk ikisi hazır gelir, taban opaklık .55 */
    .yc-meyve {
        --k: clamp(0, calc(var(--sc-p, 0) * 7 - var(--i) + 2.5), 1);
        opacity: calc(.55 + var(--k) * .45);
        transform: translate3d(0, calc((1 - var(--k)) * 16px), 0);
    }
}

/* ==========================================================================
   3 · Tesis: çerçeveli fotoğraf, metin solda
   ========================================================================== */
.yc-tesis [data-sc-stage] { background: var(--pa-orman-800); }
.yc-foto {
    position: absolute; top: calc(var(--yc-header) + 7svh); bottom: 7svh; right: var(--sc-gutter);
    width: 52%; overflow: hidden; border-radius: var(--pa-radius);
}
.yc-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform-origin: 60% 60%; }
.yc-tesis .yc-tesis-metin { left: var(--sc-gutter); right: auto; top: calc(var(--yc-header) + 18svh); bottom: auto; max-width: min(480px, 36vw); }
.yc-tesis .yc-tesis-metin .yc-buyuk { margin-top: var(--pa-s-4); }
@media (prefers-reduced-motion: no-preference) {
    .yc-tesis .yc-foto img { transform: scale(calc(1.08 - var(--sc-p, 0) * .08)); }
}

/* ==========================================================================
   4 · Kiler (flow) + alıntı
   ========================================================================== */
main.pa-yolculuk .yc-bolum { padding: var(--yc-bosluk) 0; }
.yc-bolum-izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--pa-s-16); align-items: start; }
/* main.pa-yolculuk p/figure { margin: 0 } sıfırlamasını ezmek için aynı kapsamla yazılır */
main.pa-yolculuk .yc-bolum-metin > * + * { margin-top: var(--pa-s-4); }
main.pa-yolculuk .yc-metin-buyuk { font-size: var(--pa-fs-govde); line-height: 1.75; color: var(--pa-coruh-100); max-width: 36em; text-wrap: pretty; }
main.pa-yolculuk .yc-bolum-metin .yc-metin-buyuk:first-child { font-size: var(--pa-fs-baslik); line-height: 1.5; color: var(--pa-beyaz); }

main.pa-yolculuk .yc-sessiz { padding: 12svh 0 var(--yc-bosluk); }
main.pa-yolculuk .yc-alinti { margin-top: var(--yc-bosluk); padding-top: var(--pa-s-8); border-top: 1px solid var(--yc-cizgi); max-width: 880px; }
main.pa-yolculuk .yc-alinti blockquote { margin: 0; padding: 0; border: 0; font-size: inherit; }
main.pa-yolculuk .yc-alinti blockquote p {
    font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-bolum); line-height: 1.2;
    color: var(--pa-beyaz); text-wrap: balance;
}
main.pa-yolculuk .yc-alinti figcaption { margin-top: var(--pa-s-4); font-size: var(--pa-fs-govde); color: var(--pa-coruh-100); }

/* ==========================================================================
   5 · Sirke anası: yakın plan, fotoğraf solda, metin sağda
   ========================================================================== */
.yc-anasi [data-sc-stage] { background: var(--pa-orman-800); }
.yc-anasi-foto {
    position: absolute; top: calc(var(--yc-header) + 7svh); bottom: 7svh; left: var(--sc-gutter);
    width: 54%; overflow: hidden; border-radius: var(--pa-radius);
}
.yc-anasi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform-origin: 35% 45%; }
.yc-anasi .yc-anasi-metin { left: auto; right: var(--sc-gutter); top: calc(var(--yc-header) + 22svh); bottom: auto; width: min(400px, 32vw); max-width: none; }
.yc-anasi .yc-anasi-metin .yc-buyuk { margin-top: var(--pa-s-4); color: var(--pa-coruh-100); }
@media (prefers-reduced-motion: no-preference) {
    .yc-anasi .yc-anasi-foto img { transform: scale(calc(1 + var(--sc-p, 0) * .1)); }
}

/* ==========================================================================
   6 · Etikette yazanlar: liste + şişe
   ========================================================================== */
.yc-etiket [data-sc-stage] { display: flex; align-items: center; background: var(--pa-orman-900); }
.yc-etiket-izgara {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--pa-s-12); align-items: center;
    padding-top: var(--yc-header);
}
.yc-ozellik { list-style: none; margin: var(--pa-s-6) 0 0; padding: 0; border-bottom: 1px solid var(--yc-cizgi); max-width: 480px; }
.yc-ozellik li {
    border-top: 1px solid var(--yc-cizgi); padding: var(--pa-s-3) 0;
    font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-baslik); line-height: 1.3; color: var(--pa-beyaz);
}
.yc-etiket-sise { justify-self: center; }
.yc-etiket-sise img {
    display: block; height: min(62svh, 560px); width: auto;
}

/* ==========================================================================
   7 · Doruk: vadi şişeye iner (geometri yolculuk.js'te)
   ========================================================================== */
.yc-doruk [data-sc-stage] { background: var(--pa-orman-900); }
.yc-pencere { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.yc-dizi {
    position: absolute; left: 50%; bottom: 6svh; z-index: 2;
    height: min(50svh, calc(88vw * 866 / 1200));
    aspect-ratio: 1200 / 866;
    transform: translateX(-50%);
}
.yc-dizi img { position: absolute; }
.yc-dizi-diger { inset: 0; width: 100%; height: 100%; opacity: 0; }
.yc-dizi-ahlat { left: 43.3333%; top: 7.2748%; width: 13.25%; height: 76.5589%; opacity: 0; }
.yc-doruk-scrim {
    position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, var(--yc-perde) 0%, var(--yc-perde-45) 55%, var(--yc-perde-0) 100%);
}
.yc-doruk .yc-doruk-bir { left: var(--sc-gutter); right: auto; top: calc(var(--yc-header) + 5svh); bottom: auto; max-width: 640px; }
.yc-doruk .yc-doruk-iki { left: 0; right: 0; top: calc(var(--yc-header) + 6svh); bottom: auto; max-width: none; text-align: center; }

/* ==========================================================================
   8 · Kapanış
   ========================================================================== */
main.pa-yolculuk .yc-kapanis { padding: var(--yc-bosluk) 0 calc(var(--yc-bosluk) + 40px); }
.yc-kapanis-izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--pa-s-16); align-items: start; }
.yc-kapanis-sol .yc-buyuk { margin-top: var(--pa-s-4); color: var(--pa-coruh-100); max-width: 24em; }
.yc-kapanis-sol .yc-eylem { margin-top: var(--pa-s-8); }
main.pa-yolculuk .yc-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s-3) var(--pa-s-6); }
main.pa-yolculuk a.yc-siparis {
    display: inline-flex; align-items: center; min-height: 50px; padding: 0 var(--pa-s-8);
    border-radius: var(--pa-radius); background: var(--pa-beyaz); color: var(--pa-orman-800);
    font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-govde); text-decoration: none; white-space: nowrap;
    transition: background-color 160ms cubic-bezier(.23, 1, .32, 1);
}
main.pa-yolculuk a.yc-siparis:hover,
main.pa-yolculuk a.yc-siparis:focus { background: var(--pa-coruh-100); color: var(--pa-orman-900); }
main.pa-yolculuk a.yc-siparis:active { opacity: .9; }
main.pa-yolculuk a.yc-ikincil {
    display: inline-flex; align-items: center; min-height: var(--pa-dokunma);
    font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-govde); color: var(--pa-beyaz);
    text-decoration: underline; text-decoration-color: var(--yc-cizgi); text-underline-offset: 6px;
}
main.pa-yolculuk a.yc-ikincil:hover,
main.pa-yolculuk a.yc-ikincil:focus { color: var(--pa-coruh-100); text-decoration-color: currentColor; }
.yc-urunler { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--yc-cizgi); }
.yc-urunler li { border-top: 1px solid var(--yc-cizgi); }
main.pa-yolculuk a.yc-urun-bag {
    display: flex; align-items: center; gap: var(--pa-s-4); min-height: 64px; padding: var(--pa-s-2) 0;
    color: var(--pa-beyaz); text-decoration: none;
    font-family: var(--pa-font-baslik); font-weight: 700; font-size: var(--pa-fs-govde);
    transition: color 160ms cubic-bezier(.23, 1, .32, 1);
}
.yc-urun-bag img { width: 48px; height: 48px; object-fit: contain; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.yc-urun-ml { margin-left: auto; font-family: var(--pa-font-govde); font-weight: 400; font-size: var(--pa-fs-kucuk); color: var(--pa-coruh-100); }
main.pa-yolculuk a.yc-urun-bag:hover,
main.pa-yolculuk a.yc-urun-bag:focus { color: var(--pa-coruh-100); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .yc-urun-bag:hover img { transform: translateX(4px); }
}

/* ==========================================================================
   Telefon: ayrı sanat yönetimi
   ========================================================================== */
@media only screen and (max-width: 767px) {
    /* Hero: 9:16 mobil kadraj, başlık üstte (gökyüzü), şişe alt yarıda */
    .yc-plaka { object-position: 60% 50%; transform-origin: 58% 72%; }
    .yc-hero-scrim { width: auto; right: 0; bottom: auto; height: 50%; background: linear-gradient(180deg, var(--yc-perde) 0%, var(--yc-perde-55) 55%, var(--yc-perde-0) 100%); }
    .yc-hero .yc-hero-metin { top: calc(var(--yc-header) + 3svh); right: var(--sc-gutter); max-width: none; }
    .yc-hero .yc-hero-metin .yc-lede { margin-top: var(--pa-s-3); font-size: var(--pa-fs-govde); }
    .yc-hero .yc-hero-ikinci { top: calc(var(--yc-header) + 3svh); bottom: auto; max-width: 80vw; }

    .yc-ray { gap: var(--pa-s-6); }
    .yc-meyve { width: 44vw; }
    .yc-meyve img { height: 28vw; }
    .yc-adim { width: 74vw; }

    .yc-foto { top: calc(var(--yc-header) + 2svh); bottom: auto; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; height: 34svh; }
    .yc-tesis .yc-tesis-metin { top: auto; bottom: 7svh; right: var(--sc-gutter); max-width: none; }
    .yc-tesis .yc-tesis-metin .yc-buyuk { font-size: var(--pa-fs-govde); }

    .yc-bolum-izgara { grid-template-columns: minmax(0, 1fr); gap: var(--pa-s-6); }
    main.pa-yolculuk .yc-sessiz { padding: 8svh 0 var(--yc-bosluk); }
    main.pa-yolculuk .yc-bolum-metin .yc-metin-buyuk:first-child { font-size: var(--pa-fs-govde); color: var(--pa-beyaz); }
    main.pa-yolculuk .yc-alinti blockquote p { font-size: var(--pa-fs-baslik); line-height: 1.35; }

    .yc-anasi-foto { top: calc(var(--yc-header) + 2svh); bottom: auto; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; height: 34svh; }
    .yc-anasi .yc-anasi-metin { top: auto; bottom: 8svh; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
    .yc-anasi .yc-anasi-metin .yc-buyuk { font-size: var(--pa-fs-govde); }

    .yc-etiket-izgara { grid-template-columns: minmax(0, 1fr) 30vw; gap: var(--pa-s-4); align-items: end; }
    .yc-ozellik { margin-top: var(--pa-s-4); }
    .yc-ozellik li { font-size: var(--pa-fs-govde); padding: var(--pa-s-2) 0; }
    .yc-etiket-sise img { height: auto; width: 30vw; }

    .yc-dizi { bottom: 14svh; }
    .yc-doruk .yc-doruk-bir { right: var(--sc-gutter); top: calc(var(--yc-header) + 3svh); max-width: none; }
    .yc-doruk .yc-doruk-iki { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--yc-header) + 6svh); }

    .yc-kapanis-izgara { grid-template-columns: minmax(0, 1fr); gap: var(--pa-s-12); }
}