/* ============================================================
   HIROSHI SUSHI — Imperial Zen
   Renk imzası: Imperial Red #E20A13 · Shogun Black · Kintsugi Gold
   ============================================================ */

:root {
    --imperial-red: #E20A13;
    --red-deep: #930006;
    --shogun-black: #0D0D0D;
    --washi: #FAF9F6;
    --gold: #D4AF37;

    --surface: #121412;
    --surface-low: #1a1c1a;
    --surface-1: #1f201e;
    --surface-2: #292a29;
    --surface-3: #343533;

    --on-surface: #e3e2e0;
    --on-variant: #b6b3b0;
    --outline: #5e3f3b;

    --ff-serif: 'Noto Serif', Georgia, serif;
    --ff-jp: 'Noto Serif JP', 'Noto Serif', serif;
    --ff-sans: 'Manrope', system-ui, sans-serif;

    --container: 1200px;
    --gutter: 24px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    font-family: var(--ff-sans);
    background: var(--shogun-black);
    color: var(--on-surface);
    line-height: 1.6;
    overflow-x: clip; /* taşan dekor öğeleri (kanji watermark vb.) yatay kaydırma yaratmasın */
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Asanoha (麻の葉) düşük kontrast doku — gövde zemininde */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M30 0v52L0 69m30-17l30 17M0 35l30 17 30-17M0 35v34l30 17 30-17V35M0 69l30-17m30 17L30 52M30 104V52'/%3E%3C/g%3E%3C/svg%3E");
}
#app { position: relative; z-index: 1; }

/* ---------- Tipografi ---------- */
h1, h2, h3, h4 { font-family: var(--ff-serif); font-weight: 600; line-height: 1.15; color: var(--washi); }
.jp-accent, .jp { font-family: var(--ff-jp); }
.eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold); display: inline-block;
}
.section-title { font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.02em; }
.lead { font-size: clamp(16px, 2vw, 19px); color: var(--on-variant); max-width: 60ch; }

/* ---------- Butonlar (keskin köşe, kırmızı/gold) ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
    border-radius: 0; transition: transform .35s var(--ease), background .3s, color .3s;
    position: relative;
}
.btn-primary { background: var(--imperial-red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--gold); color: var(--washi); }
.btn-ghost:hover { background: var(--gold); color: var(--shogun-black); transform: translateY(-2px); }
.btn-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.btn-arrow:hover::after { transform: translateX(5px); }

/* ============================================================
   NOREN PRELOADER — perde aralanır, logo ile açılış
   ============================================================ */
.enso-preloader {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: all;
}
.enso-preloader.is-done {
    pointer-events: none; visibility: hidden;
    transition: visibility 0s 1.4s; /* perdeler kayıp bitince tamamen gizle */
}
.pre-panel {
    position: absolute; top: 0; bottom: 0; width: 50.5%;
    background: linear-gradient(180deg, #b30910, #6e0207);
    overflow: hidden;
    transition: transform 1.3s var(--ease) .12s;
}
.pre-panel::before { /* kumaş şeritleri */
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(25% - 1px),
        rgba(0, 0, 0, .28) calc(25% - 1px), rgba(0, 0, 0, .28) 25%);
}
.pre-left  { left: 0; }
.pre-right { right: 0; }
.is-done .pre-left  { transform: translateX(-101%); }
.is-done .pre-right { transform: translateX(101%); }

/* Ortada logo madalyonu — belirir, perde açılınca yukarı süzülüp kaybolur */
.pre-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.72);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    opacity: 0;
    animation: pre-logo-in .9s var(--ease) .15s forwards;
}
.pre-logo img {
    width: clamp(120px, 16vw, 170px); aspect-ratio: 1;
    background: #fff; border-radius: 50%; padding: 12px;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .7), 0 24px 70px rgba(0, 0, 0, .55);
}
.pre-word {
    font-family: var(--ff-jp); font-size: 14px; letter-spacing: .42em;
    color: rgba(250, 249, 246, .9); text-indent: .42em; /* harf aralığı dengesi */
}
@keyframes pre-logo-in {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.is-done .pre-logo {
    animation: none; opacity: 0;
    transform: translate(-50%, -62%) scale(1.06);
    transition: opacity .45s ease, transform .6s var(--ease);
}

/* ============================================================
   HEADER / NAV — premium siyah bant + taşan logo madalyonu
   ============================================================ */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--shogun-black);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.site-header::after { /* gold üst çizgi — ince premium detay */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .5;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 78px; position: relative;
}

/* ---------- TOPBAR: iletişim · JP→TR söz · şubeler ---------- */
.topbar {
    background: #080908;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    font-size: 12px; height: 36px;
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 100%;
}
.topbar-item, .topbar-branches a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--on-variant); letter-spacing: 0.04em; white-space: nowrap;
    transition: color .3s;
}
.topbar-item:hover, .topbar-branches a:hover { color: var(--washi); }
.topbar-item i, .topbar-branches i { color: var(--gold); font-size: 11px; }
.topbar-branches { display: flex; align-items: center; gap: 12px; }
.topbar-branches .sep { color: rgba(212, 175, 55, .5); }
.topbar-branches a:hover i { color: var(--imperial-red); }

/* JP→TR çözülme efekti alanı */
.topbar-quote {
    flex: 1; min-width: 0; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-quote .quote-jp {
    font-family: var(--ff-jp); color: var(--gold); margin-right: 10px;
    letter-spacing: 0.12em;
}
.topbar-quote .quote-tr {
    font-family: var(--ff-jp); /* çözülme glifleri için; harfler TR'ye dönünce de zarif kalır */
    color: var(--on-surface); font-style: italic; letter-spacing: 0.03em;
}

/* Ortada, header'ı aşağı doğru aşan beyaz madalyon; kırmızı border.
   Logo madalyondan büyük tutulur -> çubuk uçları dışarı taşar. */
.brand-medallion {
    position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    width: 124px; height: 124px; border-radius: 50%;
    background: #fff; border: 3px solid var(--imperial-red);
    display: grid; place-items: center; z-index: 5;
    box-shadow: 0 0 0 5px var(--shogun-black), 0 14px 34px rgba(0, 0, 0, .55);
    transition: transform .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.brand-medallion:hover { transform: translateX(-50%) scale(1.04); }
.site-header.scrolled .brand-medallion { width: 100px; height: 100px; } /* scroll'da zarifçe küçülür */
.brand-medallion img {
    /* Logo tamamen dairenin içinde (taşma yok) */
    width: 86%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25));
    pointer-events: none;
}

/* Sağ aksiyonlar: WhatsApp / Instagram / Rezervasyon */
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid rgba(212, 175, 55, .45); border-radius: 50%;
    color: var(--washi); font-size: 18px;
    transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.icon-btn:hover { background: var(--imperial-red); border-color: var(--imperial-red); color: #fff; transform: translateY(-2px); }

.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
    font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-surface);
    position: relative; padding: 6px 0; transition: color .3s;
}
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--imperial-red); transition: width .35s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--washi); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-cta { padding: 11px 22px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--washi); transition: .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO · "HINOMARU" (日の丸) — tipografi + güneş diski + sakura
   ============================================================ */
.hero {
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 78% 45%, rgba(226, 10, 19, .14), transparent 70%),
        var(--shogun-black);
    padding-top: 130px; padding-bottom: 70px;
}
/* Premium iç çerçeve — ince gold sinematik kadraj */
.hero::before {
    content: ""; position: absolute; inset: clamp(12px, 2vw, 26px); z-index: 3;
    border: 1px solid rgba(212, 175, 55, .2); pointer-events: none;
}

/* Sakura canvas — en arka dekor katmanı (içeriğin ve çerçevenin altında) */
.sakura-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }

/* Dev kontur kanji — arka planda 寿 */
.hero-bg-kanji {
    position: absolute; left: -4vw; bottom: -8vw; z-index: 0;
    font-family: var(--ff-jp); font-weight: 900; line-height: 1;
    font-size: clamp(280px, 42vw, 640px);
    color: transparent; -webkit-text-stroke: 1px rgba(250, 249, 246, .05);
    pointer-events: none; user-select: none;
}

.hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 4vw, 60px); align-items: center;
}

/* ---------- Sol: tipografi ---------- */
.hero-copy { will-change: transform; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.hero .eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--gold); }

.hero-title {
    font-size: clamp(46px, 7.2vw, 96px); line-height: 1.04; letter-spacing: -0.03em;
    margin: 20px 0 26px; color: var(--washi);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span {
    display: inline-block; transform: translateY(118%);
    transition: transform 1.1s var(--ease);
}
.hero-title .line:nth-child(1) > span { transition-delay: .05s; }
.hero-title .line:nth-child(2) > span { transition-delay: .18s; }
.hero-title .line:nth-child(3) > span { transition-delay: .31s; }
body.hero-ready .hero-title .line > span { transform: none; }

/* Dönen kelime + kırmızı fırça vurgusu */
.word-stage { display: inline-block; }
.brush-word {
    display: inline-block; font-style: italic; color: var(--washi); white-space: nowrap;
    background: linear-gradient(100deg,
        transparent 0%, transparent 8%,
        rgba(226, 10, 19, .72) 8%, rgba(226, 10, 19, .72) 94%,
        transparent 94%);
    background-size: 100% 0.42em; background-repeat: no-repeat; background-position: 0 78%;
    padding: 0 0.12em;
}

/* Kademeli içerik girişi (preloader bitince body.hero-ready) */
.hero-fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
body.hero-ready .hero-fade { opacity: 1; transform: none; }
body.hero-ready .hero-fade:nth-of-type(1) { transition-delay: .4s; }
.hero-copy .hero-lead.hero-fade { transition-delay: .5s; }
.hero-copy .hero-actions.hero-fade { transition-delay: .62s; }
.hero-copy .shun-line.hero-fade { transition-delay: .76s; }

.hero-lead { font-size: clamp(16px, 2vw, 19px); color: #d7d4d0; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* Shun satırı — mevsim önerisi linki */
.shun-line {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
    font-size: 13px; color: var(--on-variant); letter-spacing: .02em;
    border-bottom: 1px solid rgba(212, 175, 55, .3); padding-bottom: 6px;
    transition: color .3s, border-color .3s;
}
.shun-line:hover { color: var(--washi); border-color: var(--gold); }
.shun-line .jp { color: var(--gold); font-size: 17px; }
.shun-line b { color: var(--imperial-red); font-weight: 600; }

/* ---------- Sağ: güneş diski ---------- */
.hero-visual { position: relative; display: grid; place-items: center; }
.sun-disc {
    position: relative; width: min(100%, 520px); aspect-ratio: 1;
    will-change: transform; margin-inline: auto;
}
.sun-glow {
    position: absolute; inset: -12%;
    background: radial-gradient(circle, rgba(226, 10, 19, .32) 0%, transparent 65%);
    filter: blur(8px);
}
.sun-photo {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
    border: 4px solid var(--imperial-red);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 0 60px rgba(13, 13, 13, .35);
}
.sun-photo::after { /* gold offset halka */
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .45); pointer-events: none;
}
.sun-photo img {
    width: 100%; height: 100%; object-fit: cover;
    animation: sun-pan 26s ease-in-out infinite alternate;
}
@keyframes sun-pan { from { transform: scale(1.02); } to { transform: scale(1.14) translate(2%, -2%); } }

/* Hanko (判子) — mevsim mührü, damga gibi */
.hanko {
    position: absolute; left: -2%; bottom: 6%; z-index: 2;
    width: 96px; aspect-ratio: 1; transform: rotate(-7deg);
    background: var(--imperial-red);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .35);
    transition: transform .35s var(--ease);
}
.sun-disc:hover .hanko { transform: rotate(-3deg) scale(1.05); }
.hanko-kanji { font-family: var(--ff-jp); font-weight: 900; font-size: 38px; line-height: 1; color: #fff; }
.hanko-sub { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }

/* ---------- Alt: omakase şeridi ---------- */
.omakase-marquee {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    border-top: 1px solid rgba(212, 175, 55, .2);
    background: rgba(8, 9, 8, .65); backdrop-filter: blur(6px);
    overflow: hidden; white-space: nowrap; padding: 13px 0;
    font-size: 13px; letter-spacing: .08em; color: var(--on-variant);
    transition: color .3s;
}
.omakase-marquee:hover { color: var(--washi); }
.omakase-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track { display: inline-block; animation: marquee 36s linear infinite; }
.marquee-track > span { display: inline-block; padding-right: 0; }
.marquee-track .jp { color: var(--gold); }
.marquee-track i { font-style: normal; color: var(--imperial-red); padding: 0 14px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   GENEL BÖLÜM DÜZENİ
   ============================================================ */
.section { position: relative; padding: clamp(72px, 11vw, 140px) 0; overflow-x: clip; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head .section-title { margin-top: 14px; }
.section-head p { margin-top: 18px; }

/* Dev kanji watermark (禅 / 匠 / 寿司) */
.kanji-watermark {
    position: absolute; font-family: var(--ff-jp); font-weight: 900;
    color: rgba(250, 249, 246, 0.03); line-height: 1; pointer-events: none; user-select: none;
    font-size: clamp(180px, 34vw, 460px); z-index: 0;
}
.kanji-watermark.right { right: -4vw; top: 50%; transform: translateY(-50%); }
.kanji-watermark.left { left: -3vw; bottom: -6vw; }
.section > .container { position: relative; z-index: 1; }

/* ---------- MA / Felsefe — üç sütun (三柱) ---------- */
.philosophy { background: var(--surface); border-block: 1px solid rgba(212,175,55,.1); }
.pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.14);
}
.pillar {
    position: relative; background: var(--surface); padding: 44px 34px 40px;
    overflow: hidden; transition: background .5s;
}
.pillar:hover { background: var(--surface-1); }
/* hover'da mürekkep damlası gibi yayılan kırmızı nokta */
.pillar::after {
    content: ""; position: absolute; left: 34px; top: 36px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--imperial-red); opacity: 0;
    transition: transform 1s var(--ease), opacity .4s;
}
.pillar:hover::after { opacity: .12; transform: scale(38); }
.pillar > * { position: relative; z-index: 1; }
.pillar-no {
    position: absolute; right: 18px; top: 6px; z-index: 0;
    font-family: var(--ff-jp); font-weight: 900; font-size: 110px; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(250,249,246,.08);
    user-select: none;
}
.pillar-kanji {
    display: inline-block; font-family: var(--ff-jp); font-size: 34px;
    color: var(--imperial-red); margin-bottom: 14px; line-height: 1;
}
.pillar h3 { font-size: 20px; letter-spacing: .02em; margin-bottom: 12px; }
.pillar p { font-size: 14.5px; color: var(--on-variant); line-height: 1.7; }

/* ============================================================
   ÖNE ÇIKAN ÜRÜNLER
   ============================================================ */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.product-card {
    position: relative; background: var(--surface); display: flex; flex-direction: column;
    border: 1px solid rgba(212,175,55,.16); border-radius: 16px; overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.product-card:hover { transform: translateY(-5px); border-color: rgba(212,175,55,.5); box-shadow: 0 18px 42px rgba(0,0,0,.5); }
.product-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.07); }
/* Görseli olmayan ürün — markalı kanji placeholder (boşluk yok) */
.product-ph { position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(226,10,19,.16), transparent 70%),
                linear-gradient(160deg, #1f211d, #111); }
.product-ph::after { content: ""; position: absolute; inset: 0;
    background: url('../img/logo.png') center/46% no-repeat; opacity: .05; }
.product-ph span { font-family: var(--ff-jp); font-size: clamp(48px, 7vw, 72px);
    color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.5); line-height: 1; }
.product-jp {
    position: absolute; top: 10px; left: 12px; font-family: var(--ff-jp); font-size: 26px;
    color: var(--washi); text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.product-badge {
    position: absolute; top: 12px; right: 12px; background: rgba(13,13,13,.78); backdrop-filter: blur(4px);
    border: 1px solid rgba(212,175,55,.4); color: var(--gold); border-radius: 30px;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; font-weight: 600;
}
.product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-name { font-size: 18px; line-height: 1.25; }
.product-short { font-size: 13.5px; color: var(--on-variant); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.product-price { font-family: var(--ff-serif); font-size: 19px; font-weight: 700; color: var(--gold); }
.product-price small { font-size: 12px; opacity: .7; }
.product-link { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--imperial-red); white-space: nowrap; }
.product-link::after { content: " →"; }

/* ============================================================
   ŞEFİN SEÇKİSİ — imleç takipli tipografik liste
   ============================================================ */
.chef-section { background: var(--shogun-black); }
.hover-list { border-top: 1px solid rgba(212,175,55,.2); }
.list-row {
    position: relative; z-index: 0;
    display: grid; grid-template-columns: 64px 1fr auto auto;
    align-items: center; gap: clamp(14px, 3vw, 32px);
    padding: clamp(20px, 3vw, 30px) 14px;
    border-bottom: 1px solid rgba(212,175,55,.2);
    overflow: hidden;
}
/* hover'da soldan kırmızı silme (wipe) */
.list-row::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--imperial-red);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .5s var(--ease);
}
.list-row:hover::before { transform: scaleX(1); }
.row-index { font-size: 12px; letter-spacing: .22em; color: var(--on-variant); transition: color .3s; }
.row-name {
    font-family: var(--ff-serif); font-size: clamp(22px, 3.4vw, 40px);
    color: var(--washi); line-height: 1.1;
    display: flex; align-items: baseline; gap: 16px;
    transition: transform .5s var(--ease);
}
.row-name .jp { font-style: normal; font-size: .55em; color: var(--gold); transition: color .3s; }
.row-cat {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(212,175,55,.4);
    padding: 5px 11px; white-space: nowrap; transition: color .3s, border-color .3s;
}
.row-price { font-family: var(--ff-serif); font-size: clamp(17px, 2vw, 22px); color: var(--gold); transition: color .3s; }
.list-row:hover .row-name { transform: translateX(16px); }
.list-row:hover .row-index,
.list-row:hover .row-price,
.list-row:hover .row-name .jp { color: #fff; }
.list-row:hover .row-cat { color: #fff; border-color: rgba(255,255,255,.55); }
.chef-more { margin-top: 36px; }

/* İmleci takip eden tabak önizlemesi — yalnızca hassas imleçte */
.float-preview {
    display: none; position: fixed; left: 0; top: 0; z-index: 60;
    width: 280px; aspect-ratio: 4/3; overflow: hidden;
    border: 1px solid rgba(212,175,55,.5);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    opacity: 0; transform: scale(.88) rotate(-2deg);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    pointer-events: none;
}
.float-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (pointer: fine) { .float-preview { display: block; } }
.float-preview.show { opacity: 1; transform: scale(1) rotate(0deg); }

/* ============================================================
   EMAKİMONO (絵巻) — sürüklenen lezzet rulosu
   ============================================================ */
.emaki-track {
    display: flex; gap: clamp(18px, 3vw, 36px);
    overflow-x: auto; scrollbar-width: none;
    padding: 10px var(--gutter) 16px;
    cursor: grab; user-select: none; -webkit-user-select: none;
}
.emaki-track::-webkit-scrollbar { display: none; }
.emaki-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.emaki-item {
    position: relative; flex: 0 0 auto;
    width: min(70vw, 540px); aspect-ratio: 16/10; overflow: hidden;
}
.emaki-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s var(--ease);
}
.emaki-item:hover img { transform: scale(1.05); }
.emaki-cap {
    position: absolute; left: 0; bottom: 0; width: 100%;
    padding: 18px 22px; display: flex; align-items: baseline; gap: 12px;
    background: linear-gradient(transparent, rgba(13,13,13,.85));
}
.emaki-cap .jp { font-family: var(--ff-jp); color: var(--imperial-red); font-size: 24px; }
.emaki-cap b { font-family: var(--ff-serif); font-size: 19px; color: var(--washi); }
.emaki-quote {
    position: relative; flex: 0 0 auto;
    width: min(56vw, 360px); aspect-ratio: 16/10 ;
    background: var(--surface-1); border: 1px solid rgba(212,175,55,.2);
    display: grid; place-content: center; padding: 36px; text-align: center;
    overflow: hidden;
}
.emaki-quote .jp {
    position: absolute; right: -8px; bottom: -22px;
    font-family: var(--ff-jp); font-weight: 900; font-size: 120px; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.16);
    user-select: none;
}
.emaki-quote p {
    font-family: var(--ff-serif); font-style: italic;
    font-size: clamp(15px, 1.6vw, 19px); color: var(--washi); line-height: 1.6;
}
.emaki-progress {
    position: relative; height: 2px; margin-top: 22px;
    background: rgba(212,175,55,.15);
}
.emaki-progress .bar {
    position: absolute; inset-block: 0; left: 0; width: 8%;
    background: var(--imperial-red); transition: width .15s linear;
}

/* ============================================================
   KODAWARI — sayılarla
   ============================================================ */
.kodawari {
    background: #0a0b0a;
    border-block: 1px solid rgba(212,175,55,.14);
    padding: clamp(52px, 8vw, 90px) 0;
}
.kodawari-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 36px; text-align: center;
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--ff-serif); font-size: clamp(44px, 6vw, 76px); line-height: 1; color: var(--washi); }
.stat-jp { font-family: var(--ff-jp); font-size: 16px; color: var(--imperial-red); letter-spacing: .2em; }
.stat-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-variant); }

/* ============================================================
   EMA (絵馬) — tahtaya asılan misafir sözleri
   ============================================================ */
.ema-section { background: var(--surface-low); }
.ema-rope {
    height: 2px; margin-top: 8px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.65) 18%, rgba(212,175,55,.65) 82%, transparent);
}
.ema-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px; padding-top: 44px;
}
.ema-card {
    position: relative;
    background: linear-gradient(165deg, #262017, #191410);
    border: 1px solid rgba(212,175,55,.3);
    padding: 34px 26px 26px;
    display: flex; flex-direction: column; gap: 14px;
    transform: rotate(var(--tilt, 0deg)); transform-origin: top center;
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
/* asma ipi */
.ema-card::before {
    content: ""; position: absolute; top: -44px; left: 50%; margin-left: -0.5px;
    width: 1px; height: 44px; background: rgba(212,175,55,.55);
}
/* ip deliği */
.ema-card::after {
    content: ""; position: absolute; top: 10px; left: 50%; margin-left: -5px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid rgba(212,175,55,.6); background: var(--shogun-black);
}
.ema-card:hover { animation: ema-swing 1.6s var(--ease); }
@keyframes ema-swing {
    0%   { transform: rotate(var(--tilt, 0deg)); }
    25%  { transform: rotate(calc(var(--tilt, 0deg) + 2.4deg)); }
    55%  { transform: rotate(calc(var(--tilt, 0deg) - 1.6deg)); }
    80%  { transform: rotate(calc(var(--tilt, 0deg) + 0.8deg)); }
    100% { transform: rotate(var(--tilt, 0deg)); }
}
.ema-quote-mark { font-family: var(--ff-jp); font-size: 38px; color: var(--imperial-red); line-height: .6; }
.ema-text { font-family: var(--ff-serif); font-style: italic; font-size: 15.5px; color: var(--on-surface); line-height: 1.65; flex: 1; }
.ema-name { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ============================================================
   NOREN (暖簾) — aralanan perde CTA'sı
   ============================================================ */
.noren-cta { position: relative; overflow: hidden; background: var(--shogun-black); }
/* .reveal sınıfı taşısa da bölümün kendisi kaymasın — yalnızca perdeler oynar */
.noren-cta.reveal { opacity: 1; transform: none; }
.noren-content {
    position: relative; z-index: 1; text-align: center;
    padding: clamp(90px, 14vw, 170px) var(--gutter);
}
.noren-content h2 { font-size: clamp(30px, 5vw, 58px); }
.noren-content p { margin: 18px auto 36px; }
.noren-panel {
    position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2;
    background: linear-gradient(180deg, #b30910, #7c0309);
    transition: transform 1.6s var(--ease) .15s;
    overflow: hidden;
}
/* kumaş şeritleri */
.noren-panel::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(25% - 1px),
        rgba(0,0,0,.3) calc(25% - 1px), rgba(0,0,0,.3) 25%);
}
.noren-left  { left: 0; }
.noren-right { right: 0; }
/* perde ortasında beyaz Enso — açılınca ikiye bölünür */
.noren-left::after, .noren-right::after {
    content: ""; position: absolute; top: 50%; margin-top: -80px;
    width: 160px; height: 160px; border-radius: 50%;
    border: 7px solid rgba(250,249,246,.9);
}
.noren-left::after  { right: -80px; }
.noren-right::after { left: -80px; }
.noren-cta.in .noren-left  { transform: translateX(-96%); }
.noren-cta.in .noren-right { transform: translateX(96%); }

.cta-branches { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 44px; }
.cta-branch { font-size: 13px; color: var(--on-variant); }
.cta-branch b { display: block; font-family: var(--ff-serif); color: var(--washi); font-size: 16px; margin-bottom: 4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #0a0b0a; border-top: 1px solid rgba(212,175,55,.14); padding: 56px 0 28px; position: relative; z-index: 1; overflow: hidden; }
/* Dev kontur marka yazısı */
.footer-mega {
    font-family: var(--ff-serif); font-weight: 700; text-align: center;
    font-size: clamp(64px, 11vw, 170px); line-height: .95; letter-spacing: .04em;
    color: transparent; -webkit-text-stroke: 1px rgba(250,249,246,.09);
    user-select: none; white-space: nowrap; margin-bottom: 48px;
}
.footer-mega .jp { -webkit-text-stroke: 1px rgba(226,10,19,.35); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .brand-name { font-family: var(--ff-serif); font-size: 22px; letter-spacing: .12em; color: var(--washi); }
.footer-tagline { color: var(--gold); font-size: 13px; letter-spacing: .14em; margin: 10px 0 14px; }
.footer-desc { color: var(--on-variant); font-size: 14px; max-width: 38ch; }
.footer-h { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col a { display: block; color: var(--on-variant); font-size: 14px; padding: 6px 0; transition: color .3s; }
.footer-col a:hover { color: var(--washi); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; color: var(--on-variant); }
.footer-mantra { font-family: var(--ff-jp); letter-spacing: .1em; }

/* ============================================================
   İMLEÇ HALKASI — masaüstünde linklerde büyüyen Enso
   ============================================================ */
.cursor-ring {
    display: none; position: fixed; left: 0; top: 0; z-index: 9500;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid rgba(226, 10, 19, .85);
    pointer-events: none; opacity: 0;
    transition: width .25s var(--ease), height .25s var(--ease),
                border-color .25s, opacity .4s;
    will-change: transform;
}
@media (pointer: fine) { .cursor-ring { display: block; } }
.cursor-ring.visible { opacity: 1; }
.cursor-ring.on-link { width: 58px; height: 58px; border-color: var(--gold); }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .pillars { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .list-row { grid-template-columns: 44px 1fr auto; }
    .row-cat { display: none; }
    .emaki-item { width: 80vw; }
    .emaki-quote { width: 72vw; }
}
/* ============================================================
   MOBİL MENÜ (off-canvas) — masaüstünde gizli
   ============================================================ */
.mobile-menu { display: none; }
.mm-backdrop {
    position: fixed; inset: 0; z-index: 200; background: rgba(5,5,5,.6);
    opacity: 0; transition: opacity .4s var(--ease);
}
.mm-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(86vw, 360px);
    background: linear-gradient(180deg, #111210, #0a0b0a);
    border-left: 1px solid rgba(212,175,55,.25);
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
    display: flex; flex-direction: column; padding: 22px 24px 28px;
    transform: translateX(100%); transition: transform .45s var(--ease);
    overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu.show .mm-backdrop { opacity: 1; }
.mobile-menu.show .mm-panel { transform: translateX(0); }

.mm-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid rgba(212,175,55,.16); }
.mm-brand { font-family: var(--ff-serif); font-weight: 700; letter-spacing: .14em; color: var(--washi); font-size: 18px; }
.mm-brand .jp { color: var(--gold); }
.mm-close { width: 42px; height: 42px; display: grid; place-items: center; color: var(--washi); font-size: 22px; border: 1px solid rgba(212,175,55,.3); border-radius: 50%; }
.mm-close:active { background: var(--imperial-red); border-color: var(--imperial-red); }

.mm-links { display: flex; flex-direction: column; padding: 14px 0; flex: 1; }
.mm-link {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--ff-serif); font-size: 22px; color: var(--on-surface);
    padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.05);
    transition: color .3s, padding .3s var(--ease);
}
.mm-link .jp { font-family: var(--ff-jp); font-size: 20px; color: var(--gold); width: 26px; text-align: center; }
.mm-link i { margin-left: auto; font-size: 14px; color: var(--imperial-red); opacity: 0; transform: translateX(-8px); transition: .3s var(--ease); }
.mm-link.is-active, .mm-link:active { color: var(--washi); padding-left: 10px; }
.mm-link.is-active i, .mm-link:active i { opacity: 1; transform: none; }

.mm-cta { justify-content: center; width: 100%; margin: 18px 0; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(212,175,55,.16); }
.mm-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--washi); font-size: 15px; }
.mm-phone i { color: var(--gold); }
.mm-social { display: flex; gap: 10px; }
.mm-social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(212,175,55,.3); border-radius: 50%; color: var(--washi); font-size: 17px; }
.mm-social a:active { background: var(--imperial-red); border-color: var(--imperial-red); }

/* ============================================================
   RESPONSIVE — header
   ============================================================ */
@media (max-width: 960px) {
    .header-inner { justify-content: space-between; }
    .site-nav { display: none; }                /* masaüstü nav gizli */
    .nav-toggle { display: flex; }              /* hamburger görünür */
    .hide-mobile { display: none !important; }  /* WhatsApp/Instagram inline gizli */
    .header-actions { gap: 8px; }
    .nav-cta span { display: none; }            /* dar ekranda sadece takvim ikonu */
    .nav-cta { padding: 11px 14px; }
    .brand-medallion { width: 92px; height: 92px; top: 10px; border-width: 2.5px; }
    .site-header.scrolled .brand-medallion { width: 80px; height: 80px; }
    .topbar-quote { display: none; }

    /* Hero: tek kolon — önce yazı, altta disk */
    .hero { padding-top: 150px; padding-bottom: 96px; }
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { order: 2; }
    .sun-disc { width: min(78vw, 420px); }
    .hero-bg-kanji { font-size: clamp(220px, 60vw, 420px); bottom: -12vw; }
}
@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; }
    .topbar { display: none; }                  /* mobilde topbar tamamen gizli */
    .hanko { width: 76px; }
    .hanko-kanji { font-size: 30px; }
    .omakase-marquee { font-size: 12px; padding: 11px 0; }
}

/* ============================================================
   ERİŞİLEBİLİRLİK — hareket azaltma
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .enso-preloader { display: none; }
    .noren-panel { display: none; }   /* perde animasyonu yoksa içerik hep görünür */
    .cursor-ring { display: none; }
    .float-preview { display: none; }
}

/* ============================================================
   İÇ SAYFALAR — ortak page-hero & breadcrumb
   ============================================================ */
.page-hero {
    position: relative; overflow: hidden;
    padding: clamp(140px, 18vw, 200px) 0 clamp(50px, 7vw, 90px);
    background:
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(226,10,19,.12), transparent 70%),
        var(--shogun-black);
    border-bottom: 1px solid rgba(212,175,55,.12);
}
.page-hero-kanji {
    position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
    font-family: var(--ff-jp); font-weight: 900; line-height: 1;
    font-size: clamp(200px, 30vw, 440px);
    color: transparent; -webkit-text-stroke: 1px rgba(250,249,246,.05);
    pointer-events: none; user-select: none; z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title {
    font-size: clamp(40px, 6.6vw, 84px); line-height: 1.04; letter-spacing: -0.03em;
    color: var(--washi); margin: 16px 0 22px;
}
.page-hero-title .accent { color: var(--imperial-red); }
.crumb { font-size: 12px; letter-spacing: .08em; color: var(--on-variant); margin-bottom: 22px; }
.crumb a { transition: color .3s; }
.crumb a:hover { color: var(--gold); }
.crumb i { color: rgba(212,175,55,.5); font-style: normal; margin: 0 8px; }
.crumb span { color: var(--washi); }
.shun-inline { display: inline; color: var(--gold); border-bottom: 1px solid rgba(212,175,55,.35); padding-bottom: 2px; }
.shun-inline b { color: var(--imperial-red); }

/* ============================================================
   HAKKIMIZDA
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-figure { position: relative; }
.about-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid rgba(212,175,55,.25); }
.figure-stamp {
    position: absolute; right: -14px; bottom: -14px;
    width: 80px; height: 80px; display: grid; place-items: center;
    background: var(--imperial-red); color: #fff;
    font-family: var(--ff-jp); font-weight: 900; font-size: 38px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.3);
    transform: rotate(-6deg);
}
.about-copy .section-title { font-size: clamp(26px, 3.6vw, 44px); }

/* Zaman çizelgesi */
.timeline {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.14);
    list-style: none; counter-reset: tl;
}
.tl-item { position: relative; background: var(--surface); padding: 40px 26px 34px; overflow: hidden; transition: background .5s; }
.tl-item:hover { background: var(--surface-1); }
.tl-item::before { /* üstte ilerleyen kırmızı işaret */
    content: ""; position: absolute; left: 26px; top: 0; width: 28px; height: 3px; background: var(--imperial-red);
}
.tl-jp {
    position: absolute; right: 12px; bottom: -8px; font-family: var(--ff-jp); font-weight: 900;
    font-size: 78px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.14);
    user-select: none;
}
.tl-era { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tl-title { font-size: 22px; margin: 10px 0 12px; color: var(--washi); }
.tl-text { font-size: 14px; color: var(--on-variant); line-height: 1.65; position: relative; z-index: 1; }

/* ============================================================
   MENÜ — filtre & ızgara
   ============================================================ */
.menu-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.chip {
    padding: 10px 22px; border: 1px solid rgba(212,175,55,.35); border-radius: 0;
    font-size: 13px; letter-spacing: .08em; color: var(--on-surface);
    transition: background .3s, color .3s, border-color .3s;
}
.chip:hover { border-color: var(--gold); color: var(--washi); }
.chip.is-active { background: var(--imperial-red); border-color: var(--imperial-red); color: #fff; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.product-card.hide { display: none; }
.menu-empty { text-align: center; color: var(--on-variant); padding: 40px; }

/* ============================================================
   ÜRÜN DETAY
   ============================================================ */
.product-detail { position: relative; overflow: hidden; padding-top: clamp(130px, 16vw, 180px); }
.product-bg-jp {
    position: absolute; left: -3vw; top: 8%; font-family: var(--ff-jp); font-weight: 900; line-height: 1;
    font-size: clamp(240px, 38vw, 560px); color: transparent;
    -webkit-text-stroke: 1px rgba(250,249,246,.04); pointer-events: none; user-select: none; z-index: 0;
}
.product-detail .container { position: relative; z-index: 1; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 20px; }
.pd-visual .sun-disc { width: min(100%, 480px); margin-inline: auto; }
.pd-title { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; color: var(--washi); margin: 14px 0 10px; }
.pd-price { font-family: var(--ff-serif); font-size: 30px; color: var(--gold); margin-bottom: 20px; }
.pd-long { font-size: 16px; color: var(--on-variant); line-height: 1.75; max-width: 52ch; }
.pd-block { margin-top: 26px; }
.pd-h { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-tag {
    font-size: 13px; color: var(--on-surface); padding: 7px 14px;
    background: var(--surface-1); border-left: 2px solid var(--imperial-red);
}
.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pd-muted { font-size: 14px; color: var(--on-variant); }
.pd-nutrition { display: flex; gap: 1px; margin-top: 28px; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.14); }
.nut { flex: 1; background: var(--surface); padding: 18px 10px; text-align: center; }
.nut b { display: block; font-family: var(--ff-serif); font-size: 26px; color: var(--washi); }
.nut span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-variant); }
.pd-chefnote {
    position: relative; margin-top: 34px; padding: 22px 24px 22px 64px;
    background: var(--surface-1); border: 1px solid rgba(212,175,55,.18); overflow: hidden;
}
.pd-chefnote .jp {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-family: var(--ff-jp); font-size: 40px; color: var(--imperial-red);
}
.pd-chefnote p { font-size: 14.5px; color: var(--on-surface); line-height: 1.6; }
.pd-chefnote strong { color: var(--gold); }
.related-section { background: var(--surface-low); }

/* ============================================================
   İLETİŞİM — formlar
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-form-wrap .section-title { font-size: clamp(26px, 3.6vw, 44px); margin: 10px 0 26px; }

/* Zen form — alt çizgili, floating label */
.zen-form { display: flex; flex-direction: column; gap: 26px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px; }
.field { position: relative; }
.field input, .field select, .field textarea {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(212,175,55,.35);
    color: var(--washi); font-family: var(--ff-sans); font-size: 16px; padding: 12px 2px;
    transition: border-color .3s;
}
.field textarea { resize: vertical; }
.field select { color: var(--washi); }
.field select option { background: var(--surface-1); color: var(--washi); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--imperial-red); }
.field label {
    position: absolute; left: 2px; top: 12px; color: var(--on-variant); font-size: 16px;
    pointer-events: none; transition: transform .25s var(--ease), color .25s, font-size .25s;
    transform-origin: left top;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field label.label-static {
    transform: translateY(-26px) scale(.78); color: var(--gold); letter-spacing: .08em;
}
.field .label-static { top: 12px; }
/* tarih/saat/select için label hep yukarıda */
.field input[type="date"] + label, .field input[type="time"] + label { transform: translateY(-26px) scale(.78); color: var(--gold); }
.field input[type="date"], .field input[type="time"] { color-scheme: dark; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form-flash { padding: 16px 20px; margin-bottom: 24px; font-size: 14px; border-left: 3px solid; }
.form-flash.success { background: rgba(30,80,40,.25); border-color: #4caf50; color: #cfeacf; }
.form-flash.error { background: rgba(120,20,20,.25); border-color: var(--imperial-red); color: #ffd5d2; }

.contact-aside { display: flex; flex-direction: column; gap: 20px; }
.info-card { background: var(--surface-1); border: 1px solid rgba(212,175,55,.18); padding: 26px; }
.info-line { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--on-surface); font-size: 14.5px; transition: color .3s; }
.info-line:hover { color: var(--washi); }
.info-line i { color: var(--gold); width: 18px; text-align: center; }
.branch-card { position: relative; background: var(--surface); border: 1px solid rgba(212,175,55,.14); padding: 24px; overflow: hidden; }
.branch-jp { position: absolute; right: -6px; bottom: -16px; font-family: var(--ff-jp); font-weight: 900; font-size: 80px; color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.12); }
.branch-card h4 { font-size: 18px; color: var(--washi); margin-bottom: 12px; }
.branch-card p { font-size: 13.5px; color: var(--on-variant); margin: 6px 0; display: flex; align-items: center; gap: 9px; }
.branch-card p i { color: var(--gold); }
.branch-map { display: inline-block; margin-top: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--imperial-red); }
.message-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.message-section { background: var(--surface); }

@media (max-width: 900px) {
    .about-grid, .pd-grid, .contact-grid, .message-grid { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: 1fr 1fr; }
    .figure-stamp { width: 64px; height: 64px; font-size: 30px; }
}
@media (max-width: 600px) {
    .timeline { grid-template-columns: 1fr; }
    .pd-two { grid-template-columns: 1fr; }
}

/* ============================================================
   YASAL SAYFALAR (gizlilik, kvkk, çerez, koşullar)
   ============================================================ */
.legal-content { max-width: 820px; }
.legal-content h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 38px 0 14px; color: var(--washi); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 17px; margin: 24px 0 10px; color: var(--gold); }
.legal-content p { color: var(--on-variant); line-height: 1.8; margin-bottom: 14px; font-size: 15.5px; }
.legal-content ul { margin: 0 0 16px 0; padding-left: 22px; }
.legal-content li { color: var(--on-variant); line-height: 1.8; margin-bottom: 8px; font-size: 15.5px; }
.legal-content a { color: var(--gold); border-bottom: 1px solid rgba(212,175,55,.3); }
.legal-content a:hover { color: var(--imperial-red); }
.legal-content strong { color: var(--washi); }
.legal-content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-content th, .legal-content td { text-align: left; padding: 12px 14px; border: 1px solid rgba(212,175,55,.18); color: var(--on-variant); }
.legal-content th { background: var(--surface-1); color: var(--washi); font-weight: 600; }
.legal-box { background: var(--surface-1); border: 1px solid rgba(212,175,55,.2); border-left: 3px solid var(--imperial-red); padding: 18px 22px; margin: 22px 0; }
.legal-box p:last-child { margin-bottom: 0; }

/* Footer yasal satırı */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.footer-legal a { font-size: 12.5px; color: var(--on-variant); transition: color .3s; }
.footer-legal a:hover { color: var(--gold); }

/* ============================================================
   ÇEREZ ONAY BANNER
   ============================================================ */
.cookie-banner {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
    z-index: 9000; width: min(94vw, 640px);
    background: rgba(18, 19, 17, 0.97); backdrop-filter: blur(14px);
    border: 1px solid rgba(212,175,55,.3); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 22px 24px;
    transition: transform .6s var(--ease); opacity: 0;
}
.cookie-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.cookie-banner::before { content: "🍪"; font-size: 26px; display: block; margin-bottom: 10px; }
.cookie-banner h4 { font-family: var(--ff-serif); font-size: 18px; margin-bottom: 8px; color: var(--washi); }
.cookie-banner p { font-size: 13.5px; color: var(--on-variant); line-height: 1.6; margin-bottom: 16px; }
.cookie-banner p a { color: var(--gold); border-bottom: 1px solid rgba(212,175,55,.3); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 11px 22px; font-size: 13px; flex: 1; justify-content: center; min-width: 120px; }
@media (max-width: 480px){ .cookie-banner { bottom: 12px; padding: 18px 18px; } }

/* 404 */
.err-hero { min-height: 70vh; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.err-kanji { position: absolute; font-family: var(--ff-jp); font-weight: 900; font-size: clamp(220px, 40vw, 520px);
    color: transparent; -webkit-text-stroke: 1px rgba(226,10,19,.14); z-index: 0; user-select: none; }
.err-inner { position: relative; z-index: 1; }
.err-code { font-family: var(--ff-serif); font-size: clamp(64px, 12vw, 140px); font-weight: 700; color: var(--imperial-red); line-height: 1; }

/* Ürün detay galeri şeridi */
.pd-gallery { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.pd-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; padding: 0;
    border: 1px solid rgba(212,175,55,.25); cursor: pointer; transition: border-color .3s, transform .3s var(--ease); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-active { border-color: var(--imperial-red); border-width: 2px; }