/* ─────────── tokens ─────────── */
  :root {
    --bg: #FAF7F2;
    --ink: #1A1A1A;
    --ink-2: #5A5A5A;
    --ink-3: #9A9A9A;
    --line: #1A1A1A;
    --line-soft: #E6E1D7;
    --paper: #FFFFFF;

    --peach: #F5D5B8;
    --peach-deep: #ECB791;
    --serve-blue: #1B2D6B;
    --serve-blue-2: #2A3F8F;
    --serve-pink: #F4B8C5;
    --serve-pink-deep: #E89AAE;
    --serve-gray: #333F48;   /* Pantone 432 C — Serve logosunun kendi rengi (Ceylin, 20 Eki 2026) */
    --light-blue: #C5DCEA;
    --light-blue-2: #B3D0E2;
    --cream: #F4E9D2;
    --butter: #F5E6A8;

    --r-sm: 6px;
    --r-md: 14px;
    --r-lg: 24px;

    --gap: 24px;
    --maxw: 1440px;
    --pad: clamp(20px, 4vw, 64px);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "DM Sans", system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
  }
  img { display: block; max-width: 100%; }

  /* kâğıt greni — kırtasiye markasının yüzey malzemesi; multiply koyu sahnelerde kendiliğinden kaybolur */
  body::after {
    content: "";
    position: fixed; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .028;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 280px;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

  /* ─────────── shell ─────────── */
  .shell {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
  }
  .full-bleed { width: 100%; }

  /* ─────────── type ─────────── */
  .eyebrow {
    font-family: "DM Sans";
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: transparent;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .section-tag.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
  .section-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  .display {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 0.96;
  }
  .h-jumbo { font-size: clamp(56px, 9.5vw, 152px); }
  .h-xl    { font-size: clamp(40px, 6vw, 88px); }
  .h-lg    { font-size: clamp(32px, 4vw, 56px); }
  .h-md    { font-size: clamp(24px, 2.6vw, 36px); }

  .upper {
    font-family: "DM Sans";
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  /* el yazısı aksan — kicker gramerini kıran sıcak nota (az kullan) */
  .handnote {
    display: inline-block;
    font-family: "Caveat", cursive;
    font-size: 27px;
    font-weight: 700;
    color: var(--serve-blue);
    transform: rotate(-2deg);
  }

  /* ─────────── route sayfaları (hash-route placeholder iskeleti) ─────────── */
  /* Zemin sayfanın KENDİSİNDEN (krem, background-image — sahne kuralı yalnız background-COLOR'ı
     şeffaflaştırır). Sahne rengi ekranın ortasına bakıyor: footer ortaya gelince üstte hâlâ
     görünen içerik (Koleksiyonlar'daki ürün adları, Global'deki fuar notu, ürün ızgarası)
     footer'ın mürekkep rengine boyanıp okunmaz oluyordu (Hikayemiz'de görülüp çözülmüştü,
     5 Eki 2026'da tüm iç sayfalara genellendi). Header tonu bu zemini görür (scroll-fx). */
  .route-page { min-height: 72vh; padding: clamp(72px, 9vw, 130px) 0; background-image: linear-gradient(var(--bg), var(--bg)); }
  .route-page .rp-sub {
    color: var(--ink-2);
    font-size: clamp(15px, 1.2vw, 18px);
    max-width: 56ch;
    margin: 20px 0 0;
    line-height: 1.6;
  }
  .rp-body { margin-top: 48px; }
  .rp-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px 40px;
    margin-top: 8px;
  }
  .rp-group-name { display: block; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; margin-bottom: 10px; }
  .rp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .rp-items li { font-size: 14px; color: var(--ink-2); }
  .rp-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 8px;
  }
  .rp-cat-card {
    display: block;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 28px;
    background: var(--paper);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .rp-cat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -22px rgba(27,45,107,.2); }
  .rp-cat-label { display: block; font-family: "Fraunces", serif; font-style: italic; font-weight: 600; font-size: 30px; color: var(--serve-pink-deep); }
  .rp-cat-tag { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
  .rp-note { margin: 44px 0 24px; font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; color: var(--ink-2); transform: rotate(-1.2deg); display: inline-block; }
  .rp-actions { margin-top: 8px; }

  /* View Transitions — sayfa geçişi: kâğıt çevirir gibi (header sabit kalır) */
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vtOut .22s ease both; }
  ::view-transition-new(root) { animation: vtIn .32s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  }

  /* ─────────── header ─────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    height: 88px;
    padding: 0 var(--pad);
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .nav-group { display: flex; gap: 24px; align-items: center; }
  .nav-group.left { justify-self: start; }
  .nav-group.right { justify-self: end; }
  .nav-link {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding: 6px 0;
    white-space: nowrap;
  }
  .nav-link::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .nav-link:hover::after { transform: scaleX(1); }
  /* GERÇEK Serve wordmark'ı (assets/brand/serve-wordmark.svg — katalog logosundan
     vektörleştirildi). CSS mask kullanılıyor, inline SVG değil: 180 prerender sayfanın
     her birine ~5KB gömmek yerine tek dosya bir kez indirilip cache'lenir; renk
     currentColor'dan gelir, böylece header açık/koyu sahnede kendini uyarlar. */
  .logo-mark {
    display: block;
    width: 104px;
    aspect-ratio: 1640 / 892;
    background-color: currentColor;
    -webkit-mask: url("/assets/brand/serve-wordmark.svg") center / contain no-repeat;
    mask: url("/assets/brand/serve-wordmark.svg") center / contain no-repeat;
  }

  .lang-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 2px;
    margin-left: 8px;
  }
  .lang-switch button {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 600;
  }
  .lang-switch button.on { background: var(--ink); color: #fff; }

  .icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
  }
  .icon-btn:hover { border-color: var(--line); }

  /* kalem çizgisi scroll progress — sayfayı okumak = sayfayı çizmek (--scroll'u Lenis yazıyor) */
  .site-header::after {
    content: "";
    position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 2px;
    background: currentColor;
    opacity: .85;
    transform: scaleX(var(--scroll, 0));
    transform-origin: left;
    pointer-events: none;
  }

  /* ─────────── mobil menü (hamburger + tam ekran sheet) ─────────── */
  .nav-group.right.mobile { display: none; justify-self: end; }
  /* Logo 1fr|auto|1fr grid'iyle ortalanır — yalnız iki küme de kendi 1fr sütununa sığdıkça
     (sığmazsa sütun büyür, logo kayar). 26 Eki: Blog sola geçti, sosyal ikonlar üst menüden
     kalktı (footer'da) → sol ≈340px, sağ ≈349px; her genişlikte simetrik. */
  .mobile-sheet {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg); color: var(--ink);
    padding: 0 var(--pad) 48px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s .4s;
  }
  .mobile-sheet.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .ms-top { display: flex; align-items: center; justify-content: space-between; height: 88px; }
  .ms-top .logo-mark { color: var(--serve-gray); width: 92px; }
  .ms-nav { display: flex; flex-direction: column; padding-top: 8px; }
  .ms-link {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: 28px; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--serve-blue);
  }
  .ms-chevron { transition: transform .3s cubic-bezier(.2,.8,.2,1); opacity: .6; }
  .ms-acc.open .ms-chevron { transform: rotate(180deg); }
  .ms-cats {
    display: flex; flex-direction: column; gap: 20px;
    padding: 16px 0 20px;
    border-bottom: 1px solid var(--line-soft);
  }
  .ms-cat-label {
    display: block; position: relative; padding-left: 12px; margin-bottom: 8px;
    font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: 18px; color: var(--serve-blue);
  }
  .ms-cat-label::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 70%; border-radius: 3px; background: var(--serve-pink-deep);
  }
  .ms-groups { display: flex; flex-direction: column; }
  .ms-groups a { font-size: 14px; color: var(--ink-2); padding: 7px 0; }
  .ms-all {
    padding: 10px 0;
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--serve-blue);
  }
  .ms-lang { margin-top: 28px; }

  /* koyu bölümlerde header otomatik koyu mod (açık yazı) */
  .site-header { transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
  .site-header.header-dark {
    background: rgba(8, 11, 20, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    color: #fff;
  }
  .site-header.header-dark .lang-switch { border-color: rgba(255, 255, 255, 0.45); }
  .site-header.header-dark .lang-switch button.on { background: #fff; color: #0a0d16; }
  .site-header.header-dark .icon-btn:hover { border-color: rgba(255, 255, 255, 0.45); }

  /* ─────────── ürünler mega-menü ─────────── */
  /* bölünmüş tetikleyici: .nav-link (ÜRÜNLER → /urunler/) + ok düğmesi (mega aç-kapa).
     Düğme 24×24 dokunma alanı; eksi sağ boşluk görsel aralığı eski 6px'e yakın tutar. */
  .nav-trigger { display: inline-flex; align-items: center; gap: 1px; }
  .nav-chevron-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-right: -8px;
  }
  .nav-chevron { transition: transform .3s cubic-bezier(.2,.8,.2,1); opacity: .7; }
  .nav-trigger.open .nav-chevron { transform: rotate(180deg); }

  /* açıkken header her zaman açık tema */
  .site-header.mega-active {
    background: var(--paper);
    color: var(--ink);
    border-bottom-color: var(--line-soft);
  }
  .site-header.mega-active .lang-switch { border-color: var(--line); }
  .site-header.mega-active .lang-switch button.on { background: var(--ink); color: #fff; }
  /* logo kendi grisinde (432 C, Eren 26 Eki 2026); video üstündeki koyu header'da beyaz kalır */
  .site-header .logo-mark { color: var(--serve-gray); transition: color .45s ease; }
  .site-header.header-dark .logo-mark { color: #fff; }
  .site-header.mega-active .logo-mark { color: var(--serve-gray); }

  .mega {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 32px 60px -28px rgba(26,26,26,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility .28s;
    z-index: 2;
  }
  .site-header.mega-active .mega { opacity: 1; visibility: visible; transform: translateY(0); }

  .mega-inner {
    display: grid;
    grid-template-columns: 260px 1.25fr 1.35fr;
    gap: clamp(28px, 3.5vw, 64px);
    padding-top: 40px;
    padding-bottom: 44px;
    align-items: start;
  }

  /* sol: kategoriler (pembe başlıklar) */
  .mega-cats { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line-soft); padding-right: 8px; }
  .mega-cat {
    display: block; text-align: left;
    color: inherit; text-decoration: none; /* artık <a>: kategori sayfasına gider */
    padding: 12px 14px; border-radius: var(--r-sm);
    position: relative;
    transition: background .2s ease;
  }
  .mega-cat::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 3px; height: 60%; border-radius: 3px; background: var(--serve-pink-deep);
    transform: translateY(-50%) scaleY(0);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .mega-cat:hover { background: var(--bg); }
  .mega-cat.active { background: var(--bg); }
  .mega-cat.active::before { transform: translateY(-50%) scaleY(1); }
  .mega-cat-label {
    display: block;
    font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: 22px; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--serve-pink-deep);
  }
  .mega-cat.active .mega-cat-label { color: var(--serve-blue); }
  .mega-cat-tag { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-2); letter-spacing: 0.02em; }

  /* orta: alt kategoriler + ürün adları */
  /* grid DEĞİL sütun akışı: grid'de satır hizası, kısa grubun (Minler) yanındaki
     uzun grup (Jel Kalemler) kadar yer kaplamasına ve büyük dikey boşluklara yol
     açıyordu (kullanıcı raporu). columns akışı grupları doğal yükseklikleriyle
     uniform 20px aralıkla dizer. */
  .mega-groups {
    columns: 2; column-gap: 28px;
  }
  .mega-group { break-inside: avoid; margin-bottom: 20px; }
  .mega-group-name {
    display: block; font-weight: 600; font-size: 13px;
    letter-spacing: 0.04em; color: var(--ink); margin-bottom: 8px;
  }
  .mega-group-name:hover { color: var(--serve-blue); }
  .mega-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .mega-items a { font-size: 13px; color: var(--ink-2); transition: color .15s; }
  .mega-items a:hover { color: var(--serve-pink-deep); }

  /* sağ: ürün önizleme kartları (dikey/çapraz) */
  .mega-preview { display: flex; flex-direction: column; gap: 16px; }
  .mega-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .mega-card { display: block; }
  /* menü açılırken kartlar fizikli doğrulur (stagger); kategori değişiminde içerik yumuşak süzülür */
  .mega-card {
    opacity: 0;
    transform: translateY(14px) rotate(-2deg);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .site-header.mega-active .mega-card { opacity: 1; transform: none; }
  .site-header.mega-active .mega-card:nth-child(1) { transition-delay: .05s; }
  .site-header.mega-active .mega-card:nth-child(2) { transition-delay: .09s; }
  .site-header.mega-active .mega-card:nth-child(3) { transition-delay: .13s; }
  @keyframes megaSwap { from { opacity: 0; transform: translateX(10px); } }
  .mega-groups, .mega-preview-grid { animation: megaSwap .28s cubic-bezier(.2,.7,.2,1); }
  /* beyaz ürün plakası: ürün kendi stüdyo fonunda (beyaz) durur — site rengi
     ürünün arkasına sızmaz; eğik duruş (rotate -9deg) kaldırıldı (kullanıcı). */
  .mega-card-img {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: center;
  }
  .mega-card-img img {
    width: 78%; height: 78%; object-fit: contain; /* düz 2D — gölge yok */
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .mega-card:hover .mega-card-img img { transform: scale(1.06); }
  .mega-card-ph {
    font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: 18px; color: rgba(26,26,26,.55); padding: 12px; text-align: center;
  }
  .mega-award {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: "Fraunces", serif; font-style: italic; font-size: 13px; font-weight: 600;
  }
  .mega-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
  .mega-card-cat { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .mega-card-title { font-size: 14px; font-weight: 600; color: var(--ink); }
  .mega-more {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--serve-blue);
    border-bottom: 1px solid currentColor; padding-bottom: 3px;
  }
  .mega-more svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .mega-more:hover svg { transform: translateX(4px); }

  /* arka plan karartma (sadece görsel, tıklamayı geçirir) */
  .mega-dim {
    position: fixed; top: 88px; left: 0; right: 0; bottom: 0;
    background: rgba(10, 13, 22, .28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility .28s;
    z-index: 1;
  }
  .site-header.mega-active .mega-dim { opacity: 1; visibility: visible; }

  @media (max-width: 900px) {
    .mega-inner { grid-template-columns: 1fr; gap: 24px; }
    .mega-cats { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
    .mega-cats .mega-cat-tag { display: none; }
  }

  /* ─────────── hero ─────────── */
  .hero {
    position: relative;
    /* serve-blue drenched hero — kendi zeminini boyar (gradient katmanı: sahne sistemi
       background-color'ı siliyor). Cesur, premium açılış; şeftali/ten tonu emekli. */
    background-image:
      radial-gradient(ellipse 70% 60% at 78% 30%, rgba(42,63,143,.55), transparent 70%),
      linear-gradient(var(--serve-blue), var(--serve-blue));
    overflow: hidden;
  }
  /* lacivert zeminde hero tipografi/etiket/buton dili açık renge döner */
  .hero .section-tag { border-color: rgba(250,247,242,.45); color: var(--bg); }
  .hero .cta-pill { background: var(--bg); color: var(--serve-blue); }
  .hero .cta-pill:hover { background: #fff; }
  .hero .cta-ghost { border-color: rgba(250,247,242,.55); color: var(--bg); }
  .hero .cta-ghost:hover { background: var(--bg); color: var(--serve-blue); }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-block: clamp(60px, 9vw, 140px) clamp(60px, 9vw, 120px); /* yatay padding .shell'den gelir */
  }
  .hero-eyebrow-row {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 20px;
  }

  /* hero tipografik koreografi — tek seferlik yükleme girişi (scroll-reveal DEĞİL).
     KURAL: gizli başlangıç keyframe'in İÇİNDE (fill-mode both) — statik gizli-durum
     yok; animasyonlar kapalıyken (headless/print/bot) içerik görünür kalır */
  .line-mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; /* italik descender kırpılmasın */ }
  .line-mask > span {
    display: block;
    animation: lineUp .9s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-title .line-mask:nth-child(1) > span { animation-delay: .08s; }
  .hero-title .line-mask:nth-child(2) > span { animation-delay: .2s; }
  @keyframes lineUp { from { transform: translateY(112%); } to { transform: none; } }
  .hero-eyebrow-row, .hero-sub, .hero-cta-row {
    animation: heroFade .8s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-eyebrow-row { animation-delay: .05s; }
  .hero-sub { animation-delay: .34s; }
  .hero-cta-row { animation-delay: .46s; }
  @keyframes heroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero-title {
    margin: 0 0 24px;
    color: var(--bg);
  }
  .hero-title em {
    font-style: italic;
    color: var(--serve-pink); /* 'keşfet.' — lacivertte pembe neşe vurgusu */
  }
  .hero-sub {
    max-width: 460px;
    font-size: clamp(15px, 1.2vw, 18px);
    color: rgba(250,247,242,.82);
    margin-bottom: 36px;
    line-height: 1.55;
  }
  .cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: var(--serve-blue);
    color: #fff;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s;
  }
  .cta-pill:hover { transform: translateY(-2px); background: var(--serve-blue-2); }
  .cta-pill .arrow { transition: transform .2s ease; }
  .cta-pill:hover .arrow { transform: translateX(4px); }
  .cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border: 1px solid var(--ink);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: transparent;
    transition: background .2s, color .2s;
  }
  .cta-ghost:hover { background: var(--ink); color: #fff; }

  .hero-stage {
    position: relative;
    aspect-ratio: 5/4;
  }
  /* ürün ailesi üçlüsü — şeffaf kesimler lacivert zeminde yüzer (beyaz kutu/glow yok) */
  .hp {
    position: absolute;
    filter: drop-shadow(0 30px 36px rgba(0,0,0,.45));
    animation: hpFloat 7s ease-in-out infinite;
    transform: rotate(var(--rot));
  }
  .hp-1 { height: 90%; right: 8%; top: 2%; --rot: 14deg; z-index: 2; }
  .hp-2 { height: 74%; left: 4%; top: 8%; --rot: -14deg; z-index: 1; opacity: .92; animation-delay: 1.1s; }
  .hp-3 { height: 32%; left: 24%; bottom: 0; --rot: -30deg; z-index: 1; animation-delay: 2.2s; } /* sol alta indi — Axium'la çarpışma yok */
  @keyframes hpFloat {
    0%, 100% { transform: rotate(var(--rot)) translateY(0); }
    50% { transform: rotate(calc(var(--rot) + 2deg)) translateY(-12px); }
  }

  /* hero arka plan videosu (19 Eki 2026, Ceylin "Ana sayfa banner"; Eren: çerçevesiz, yazının
     arkasında tam ekran). Katmanlar: poster+video (0) → lacivert perde (1) → metin (2) →
     kontroller (3). Geniş ekranda perde soldan (metin solda), dikey ekranda (≤ 4:5, video da
     9:16 dosyaya geçer) alttan; metin alta iner. */
  .hero-main { position: relative; }
  .hero-has-video .hero-main {
    display: flex; align-items: center;
    min-height: clamp(560px, 86vh, 960px);
    isolation: isolate;
  }
  @supports (height: 1svh) { .hero-has-video .hero-main { min-height: clamp(560px, 86svh, 960px); } }
  .hero-has-video .hero-grid {
    position: relative; z-index: 2;
    width: 100%;
    grid-template-columns: 1fr;
    padding-block: clamp(110px, 12vw, 170px) clamp(96px, 10vw, 140px);
  }
  .hero-has-video .hero-text { max-width: 620px; }
  /* lacivert perde yok (Eren, 19 Eki 2026: "mavi gradyanı kaldır") → okunurluk yalnız metin gölgesiyle */
  /* gölge filter ile başlığın TAMAMINA: text-shadow .line-mask'in overflow:hidden kutusunda kesilip
     yazının arkasında dikdörtgen leke bırakıyordu */
  .hero-has-video .hero-title { filter: drop-shadow(0 2px 12px rgba(0,0,0,.38)) drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
  .hero-has-video .hero-sub { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.60), 0 1px 2px rgba(0,0,0,.40); }
  .hv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--serve-blue); }
  .hv-poster, .hv-poster img, .hv-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .hv-poster { display: block; }
  .hv-media { opacity: 0; transition: opacity .7s ease; }
  .hv-media.is-on { opacity: 1; }
  .hv-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; }
  /* .shell sınıfı KULLANILMAZ: scroll-fx "section .shell > *" reveal'i kontrolleri 28px aşağıda
     bekletiyordu (dikey ekranın dibinde tetiklenmiyor) → aynı hizalama burada elle. */
  .hv-ctrl-row {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px;
    max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
    display: flex; justify-content: flex-end;
    pointer-events: none;
  }
  .hv-ctrl { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
  .hv-bars { display: flex; gap: 5px; width: clamp(140px, 16vw, 220px); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
  .hv-bar { flex: 1; padding: 9px 0; border: 0; background: none; cursor: pointer; } /* dokunma alanı > çizgi */
  .hv-bar i { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.38); }
  .hv-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; }
  .hv-bar.is-done i::after { width: 100%; }
  .hv-bar.is-on i::after { width: var(--p, 0%); }
  .hv-label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 100px;
    background: rgba(250,247,242,.94);
    color: var(--serve-blue);
    font-size: 11px; font-weight: 600; letter-spacing: .16em; /* metin zaten büyük harf (copy.jsx) */
    white-space: nowrap;
  }
  a.hv-label:hover { background: #fff; }
  .hv-toggle {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(12,18,48,.55); color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hv-toggle:hover { background: rgba(12,18,48,.78); }
  .hv-bar:focus-visible, .hv-toggle:focus-visible, .hv-label:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  @media (max-aspect-ratio: 4/5) {
    /* hero = ekranın navbar'dan (89px, sticky, üst üste binmez) kalanı → kontroller ve durdur
       düğmesi küçük telefonda da (375×667) ilk ekranda kalır */
    .hero-has-video .hero-main { align-items: flex-end; min-height: max(520px, calc(100vh - 89px)); }
    @supports (height: 1svh) { .hero-has-video .hero-main { min-height: max(520px, calc(100svh - 89px)); } }
    .hero-has-video .hero-grid { padding-block: 48px 88px; }
    .hv-ctrl-row { bottom: 18px; justify-content: stretch; }
    .hv-ctrl { width: 100%; }
    .hv-bars { flex: 1; width: auto; }
  }
  .hero-meta {
    position: absolute;
    bottom: 28px; right: 28px;
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250,247,242,.85);
    font-weight: 500;
    z-index: 4;
  }
  .hero-meta strong { display: block; font-size: 40px; /* editör: "160+" daha büyük punto (28→40) */ font-family: "Fraunces"; font-style: italic; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--bg); }

  .hero-marquee {
    border-top: 1px solid rgba(250,247,242,.22);
    padding: 16px 0;
    overflow: hidden;
    color: var(--bg);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .marquee-track {
    display: flex; gap: 48px;
    white-space: nowrap;
    animation: scroll 38s linear infinite;
  }
  .hero-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
  .marquee-track span::after {
    content: "★"; color: var(--serve-pink);
    display: inline-block;
    animation: starSpin 12s linear infinite;
  }
  @keyframes starSpin { to { transform: rotate(360deg); } }
  .hero-marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% / 3)); } /* 3 kopya → tam 1 set = dikişsiz döngü */
  }

  /* ─────────── vintage banner ─────────── */
  .vintage-banner {
    width: 100%;
    aspect-ratio: 1605 / 243;
    background: url("/assets/farmers-market.webp") center/cover no-repeat;
    background-color: var(--cream);
    border-top: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* ─────────── sections ─────────── */
  section { position: relative; }
  .section-pad { padding: clamp(80px, 9vw, 140px) 0; }
  .section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
  }
  .section-title {
    margin: 0;
    color: var(--ink);
  }
  .section-sub {
    max-width: 380px;
    color: var(--ink-2);
    font-size: 15px;
  }

  /* ─────────── product family grid ─────────── */
  /* vertical/diagonal — tiles staircase down */
  .pf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 280px;
    gap: 18px;
  }
  .pf-card {
    position: relative;
    background: var(--light-blue);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .pf-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(27,45,107,.25); }
  /* SERVE FAVS: 5 gerçek kart — card-3 eskiden card-6'nın kapladığı hücreyi de
     yutacak şekilde 3 satıra uzuyor (5×3 = 15 hücre yine boşluksuz döşeniyor). */
  .pf-card-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .pf-card-2 { grid-column: 3 / span 1; grid-row: 1 / span 1; background: var(--serve-blue); color: #fff; }
  .pf-card-3 { grid-column: 4 / span 2; grid-row: 1 / span 3; background: var(--light-blue-2); }
  .pf-card-4 { grid-column: 3 / span 1; grid-row: 2 / span 2; background: var(--serve-pink); }
  .pf-card-5 { grid-column: 1 / span 2; grid-row: 3 / span 1; background: var(--cream); }
  /* KIŞ TEMASI (26 Eki 2026, sections-1.jsx SF_FAVS_THEME = "kis"): buz mavisi · gece laciverti ·
     kırağı · alacakaranlık lilası · buzul mavisi. Ürünler gri/siyah olduğu için zeminler açık;
     gümüş Axium yine lacivert kartta (yazı rengi kuralı: 2. kart koyu). */
  .pf-tema-kis .pf-card-1 { background: #D4E5F0; }
  .pf-tema-kis .pf-card-2 { background: var(--serve-blue); }
  .pf-tema-kis .pf-card-3 { background: #E5ECF2; }
  .pf-tema-kis .pf-card-4 { background: #D8D2EC; }
  .pf-tema-kis .pf-card-5 { background: #B9CFE0; }
  .pf-label {
    position: absolute;
    left: 28px; top: 28px; right: 24px;
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: clamp(22px, 3.4vw, 48px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .pf-meta {
    position: absolute;
    left: 28px; bottom: 24px; right: 76px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.5;
  }
  .pf-arrow {
    position: absolute;
    right: 24px; bottom: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    display: grid; place-items: center;
    transition: transform .35s ease, background .25s;
  }
  .pf-card:hover .pf-arrow { transform: rotate(-45deg); background: var(--ink); color: #fff; }
  /* Öne Çıkanlar: plakasız — ürün, multiply ile pastel karta erir (kullanıcı
     tercihi: vitrin kartlarında beyaz kutu istenmedi). Duruş düz, gölge yok. */
  /* görsel kutusu: ürün kesimi + arkasında ürüne özel çelenk (.pf-art). Kesimler sıkı
     kırpıldığı için contain kutuyu tam doldurur — kutu biraz küçük tutulur. */
  .pf-visual {
    position: absolute;
    inset: auto 9% 15% auto;
    width: 45%; height: 53%;
  }
  .pf-label, .pf-meta, .pf-arrow { z-index: 2; } /* yazı her zaman çelengin üstünde */
  .pf-thumb {
    position: absolute; inset: 0; z-index: 1;
    background-position: center; /* çelengin ortasında dursun (eskiden alta yaslıydı) */
    background-repeat: no-repeat;
    background-size: contain;
    /* multiply KALKTI: görseller artık şeffaf kesim. Multiply, ürünün rengini pastel
       zemine emiyordu (sarı kalem soluyor, lacivert kartta metalik kalem kayboluyordu). */
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .pf-card:hover .pf-thumb { transform: scale(1.04) translateY(-4px); }
  /* Çelenk (Higgsfield · Recraft vektör, assets/favs/): ürün kutusuna bağlı → her kırılımda
     ürünle birlikte hareket eder, kartın başlık köşesine taşmaz. Kart görünüme girince
     dönerek açılır (backwards dolgu: animasyon bitince hover dönüşü serbest kalır);
     üzerine gelince yavaşça döner. Kart başına boyut --art-inset ile (aşağıda). */
  .pf-art {
    position: absolute; inset: var(--art-inset, -42%);
    background: center / contain no-repeat;
    pointer-events: none;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .pf-card:hover .pf-art { transform: rotate(10deg) scale(1.06); }
  .pf-card.fx:not(.fx-in) .pf-art { opacity: 0; }
  .pf-card.fx-in .pf-art { animation: pfArtIn 1s cubic-bezier(.2,.8,.2,1) .25s backwards; }
  @keyframes pfArtIn { from { opacity: 0; transform: scale(.82) rotate(-16deg); } }
  /* masaüstü 5×3 mozaik — hücre şekli + ürün şekline göre */
  @media (min-width: 1025px) {
    .pf-card-2 { --art-inset: -22%; }
    .pf-card-2 .pf-visual { right: 4%; bottom: 22%; width: 50%; height: 60%; }
    .pf-card-3 { --art-inset: -62% -70%; }
    .pf-card-3 .pf-visual { right: 22%; bottom: 20%; width: 50%; height: 46%; }
    .pf-card-4 { --art-inset: -46%; }
    .pf-card-4 .pf-visual { right: 22%; bottom: 22%; width: 56%; height: 34%; }
    .pf-card-5 { --art-inset: -20% -14%; }
    .pf-card-5 .pf-visual { right: 7%; bottom: 14%; width: 40%; height: 62%; }
  }
  /* tablet: 2-4-5 geniş şerit (başlık tek satır tüm genişliği kaplar) → küçük çelenk; 3 uzun */
  @media (min-width: 769px) and (max-width: 1024px) {
    .pf-card-2, .pf-card-5 { --art-inset: -14%; }
    .pf-card-4 { --art-inset: -30%; } /* defter şeritte küçük kalıyor — taçlar görünsün */
    .pf-card-3 { --art-inset: -50% -60%; }
    .pf-card-3 .pf-visual { right: 20%; bottom: 20%; width: 52%; height: 44%; }
  }
  /* kış teması yerleşimi: Aurora çapraz-yatay (eski Deep dikeydi) → kutu geniş ve ortada,
     çelenk kartın içinde kalır; Dobby Burgo'dan geniş → çelenk kart genişliğine sığdırıldı. */
  @media (min-width: 1025px) {
    .pf-tema-kis .pf-card-1 { --art-inset: -32%; }
    .pf-tema-kis .pf-card-1 .pf-visual { right: 18%; bottom: 20%; width: 56%; height: 50%; }
    .pf-tema-kis .pf-card-3 { --art-inset: -56% -50%; }
    .pf-tema-kis .pf-card-3 .pf-visual { right: 25%; bottom: 21%; width: 50%; height: 42%; }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .pf-tema-kis .pf-card-1 { --art-inset: -24%; }
    .pf-tema-kis .pf-card-1 .pf-visual { right: 18%; bottom: 24%; width: 56%; height: 48%; }
    /* geniş şeritte "Note — Uzay Temalı Renkler" defterin üstüne biniyordu → başlık sol yarıda sarar */
    .pf-tema-kis .pf-card-4 .pf-label { right: 48%; }
    .pf-tema-kis .pf-card-3 { --art-inset: -50% -46%; }
    .pf-tema-kis .pf-card-3 .pf-visual { right: 24%; }
  }
  @media (max-width: 768px) {
    .pf-tema-kis .pf-card-1 { --art-inset: -26%; }
    .pf-tema-kis .pf-card-1 .pf-visual { right: 17%; bottom: 17%; width: 66%; height: 52%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pf-art { transition: none; animation: none !important; }
  }
  /* multiply'lı öğe hover transform'unda katmana terfi ederken bir kare blend'siz
     çizilmesin (beyaz parlama) — kalıcı katman */
  @media (hover: hover) {
    .pf-card, .pf-thumb { will-change: transform; }
  }
  /* Hover'da beyaz parlama fix'i: blend'li (multiply) öğe, transform geçişi
     BAŞLARKEN compositor katmanına terfi ediyor ve o karede blend'siz (beyaz JPG
     fonuyla) çizilebiliyor; kartın hover transform'u da stacking context'i aç/kapa
     yapıyor. will-change ikisini de KALICI katman yapar — terfi anı hiç yaşanmaz.
     Yalnız hover'lı cihazlarda: mobilde gereksiz katman/bellek istemiyoruz. */
  @media (hover: hover) {
    .pf-card, .pf-thumb { will-change: transform; }
  }
  /* not: koyu (card-2) hücre eskiden şeffaf kesim (serve-deep-cut) için normal blend + gölge
     kullanıyordu; SERVE FAVS artık gerçek katalog paket görselleri (beyaz stüdyo fonu) kullandığı
     için tüm kartlarda aynı multiply davranışı geçerli — özel override kaldırıldı. */
  .pf-placeholder {
    position: absolute; inset: 18% 10% 22% 38%;
    border: 1px dashed rgba(0,0,0,.25);
    border-radius: 8px;
    display: grid; place-items: center;
    color: rgba(0,0,0,.45);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* ─────────── archive ─────────── */
  .archive { background: var(--paper); }
  .archive .head-row {
    display: flex; flex-wrap: wrap; align-items: end;
    justify-content: space-between; gap: 24px;
    margin-bottom: 40px;
  }
  .archive-tabs {
    display: flex; gap: 0; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
    position: relative;
  }
  /* mürekkep çizgisi: aktif sekme altındaki çizgi sekmeden sekmeye KAYAR (width yerine scaleX) */
  .tab-ink {
    position: absolute; left: 0; bottom: -1px;
    width: 100px; height: 2px;
    background: var(--ink);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .archive-tab {
    padding: 18px 24px;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
  }
  .archive-tab.active { color: var(--ink); font-weight: 600; } /* alt çizgi artık .tab-ink'te */
  .archive-tab:hover { color: var(--ink); }

  .archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  /* Arşiv bölümünün sahne rengi BEYAZ; kart zemini de beyaz olunca kartın sınırı
     kayboluyor ve ürünler sayfaya "akıyor" gibi görünüyordu (kullanıcı raporu).
     Çözüm: kartı her zaman görünür bir kenar + yumuşak gölgeyle tanımla —
     bölümün açık/koyu ritmine dokunmadan kart yüzeyi ayrışır. */
  .product-card {
    display: flex; flex-direction: column;
    background: var(--paper);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    border: 1px solid var(--line-soft);
    box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 10px 24px -18px rgba(26,26,26,.22);
  }
  .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 50px -24px rgba(27,45,107,.18), 0 4px 10px -4px rgba(26,26,26,.08); /* ambient + temas: iki katmanlı gölge */
  }
  .product-img {
    aspect-ratio: 3/4;
    position: relative;
    background: #fff; /* beyaz ürün plakası — site rengi ürün arkasına sızmaz */
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  /* Görseller tek standarda normalize edildi (ürün karenin %80'ini kaplar).
     Bu yüzden artık yükseklik yüzdesi değil, kutuyu doldurup contain ile
     ortalamak doğru: her kartta ürün AYNI görsel ağırlıkta durur. */
  .product-img img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 8%;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) {
    .product-card:hover .product-img img {
      transform: translateY(-4px); /* düz duruş — eğim kaldırıldı (kullanıcı) */
    }
  }
  .product-color-strip {
    position: absolute;
    left: 16px; bottom: 16px;
    display: flex; gap: 6px;
  }
  .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
  .product-body {
    padding: 18px;
    display: flex; flex-direction: column; gap: 6px;
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
    flex: 1; /* kısa kartlarda altta krem şerit kalmasın (grid satır eşitlemesi) */
  }
  .product-title { font-family: "Fraunces", serif; font-style: italic; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
  .product-cat { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
  .product-card .more {
    /* auto: link her kartta TABANA oturur — 1 ve 2 satırlık başlıklar arasında
       "Daha Fazla" hizası kaymaz */
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    align-self: flex-start;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink);
  }
  .product-card .more svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .product-card:hover .more svg { transform: translateX(4px); }
  .archive-foot {
    margin-top: 56px;
    display: flex; justify-content: center;
  }

  /* ─────────── deep news ─────────── */
  .deep-news { background: var(--bg); }
  .dn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .dn-card { position: relative; display: block; color: var(--ink); cursor: pointer; }
  /* Medya 16:9 (Ekim 2026): müşteri kapakları 1200×675 geldi — başlık ve HP'nin WBEI telif
     satırı görselin İÇİNDE, hiçbiri kırpılmaz. Ad + ürün kartın ALTINDA (eskiden 4:5 kartın
     üstüne binen koyu bant kapağın kendi başlığıyla çakışırdı). */
  .dn-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; }
  /* ince kenar: Sketch kapağının krem zemini sayfanın kremiyle birleşiyordu */
  .dn-media::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.08);
  }
  .dn-cover {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .dn-card:hover .dn-cover { transform: scale(1.03); }
  /* Kapağı henüz gelmemiş seri (ColCoverStandIn, sections-1.jsx): ürün görseli YOK (Eren,
     13 Eki 2026: "deep kalem ürünlerini kapak resmi olarak kullanmayalım") → seri rengi + seri
     adı + iki doodle. Ana sayfa, /koleksiyonlar/ ve seri sayfası ortak; ölçüler kartın
     genişliğine göre (cqi). */
  .col-standin {
    position: absolute; inset: 0; container-type: inline-size;
    display: flex; align-items: center; justify-content: center;
    color: var(--serve-blue); overflow: hidden;
  }
  .col-standin.is-dark { color: #fff; }
  .col-standin-name {
    position: relative; padding: 0 14cqi; text-align: center;
    font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: 10cqi; line-height: 1; letter-spacing: -0.02em;
  }
  .col-standin-d {
    position: absolute; height: auto;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .col-standin-d.d1 { width: 15cqi; right: 6cqi; top: 8cqi; transform: rotate(12deg); }
  .col-standin-d.d2 { width: 12cqi; left: 7cqi; bottom: 8cqi; transform: rotate(-14deg); }
  .fx:hover .col-standin-d.d1 { transform: rotate(-4deg) scale(1.08); }
  .fx:hover .col-standin-d.d2 { transform: rotate(4deg) scale(1.08); }
  @media (prefers-reduced-motion: reduce) { .col-standin-d { transition: none; } }
  .dn-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px 0; }
  .dn-name {
    margin: 0; font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.01em; line-height: 1.15;
  }
  .dn-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
  /* /koleksiyonlar/ kart animasyonunun kopyası: sol üstte serinin doodle'ı "pıt" diye
     çıkar; dokunmatikte kart görünüme girince (.fx-in) oynar. */
  .dn-sticker {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    width: 13%; height: auto;
    transform: scale(0) rotate(24deg);
    transform-origin: 40% 40%;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
  }
  @media (hover: hover) {
    .dn-card:hover .dn-sticker { transform: scale(1) rotate(-10deg); }
  }
  @media (hover: none) {
    .dn-card.fx-in .dn-sticker { transform: scale(1) rotate(-10deg); transition-delay: .65s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dn-cover, .dn-sticker { transition: none; }
  }
  .dn-foot { display: flex; justify-content: center; margin-top: 48px; }

  /* ─────────── discover / community ─────────── */
  .discover { background: var(--paper); }
  .disc-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: clamp(40px, 6vw, 80px);
  }
  .disc-side {
    display: flex; flex-direction: column; gap: 24px;
    align-self: start;
    position: sticky; top: 110px;
  }
  .disc-tagline {
    background: var(--light-blue);
    padding: 32px;
    border-radius: var(--r-md);
    font-size: 16px;
    line-height: 1.55;
    color: var(--serve-blue);
  }
  .disc-tagline .at { font-weight: 600; }
  /* topluluk panosu — sahte UGC kolajı yerine markanın kendi malzemesi:
     ürün kesimleri pastel karolarda + Caveat el notları (gerçek fotoğraflar gelince
     karolara oturur; sahte kullanıcı/etkileşim uydurulmaz) */
  .camp-board {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.1fr;
    grid-auto-rows: 225px;
    gap: 18px;
  }
  .camp {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    transition: translate .35s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) { .camp:hover { translate: 0 -6px; } }
  /* explicit yerleşim — auto-flow sürprizi yok */
  .camp-1 { grid-area: 1 / 1 / 3 / 2; background: var(--light-blue); }
  .camp-2 { grid-area: 1 / 2 / 2 / 3; background: var(--serve-pink); rotate: -1.2deg; display: grid; place-items: center; }
  .camp-3 {
    grid-area: 2 / 2 / 3 / 3;
    background: var(--paper); border: 1px solid var(--line-soft); rotate: .8deg;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    text-align: center; padding: 20px;
  }
  .camp-4 { grid-area: 1 / 3 / 3 / 4; background: var(--serve-blue); }
  /* sol/sağ kart: Instagram gönderisinin fotoğrafı, kartı tamamen doldurur */
  .camp-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  @media (hover: hover) { .camp-photo:hover .camp-cover { transform: scale(1.03); } }
  .camp-pill { z-index: 1; }
  .camp-pill {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.94); color: var(--ink);
    border-radius: 100px; padding: 8px 14px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  }
  .camp-tag {
    font-family: "Caveat", cursive; font-weight: 700;
    font-size: clamp(36px, 3.4vw, 52px);
    color: #fff; rotate: -5deg;
  }
  .camp-q { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(26px, 2.2vw, 34px); color: var(--ink); rotate: -1.5deg; }
  .camp-3 { gap: 10px; }
  .camp-note { max-width: 32ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
  .camp-note strong { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
  @media (max-width: 700px) { .camp-note2 { display: none; } }
  .camp-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--serve-blue);
    border-bottom: 1px solid currentColor; padding-bottom: 3px;
  }
  .camp-cta svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .camp-3:hover .camp-cta svg { transform: translateX(4px); }
  .camp-star {
    position: absolute; z-index: 2; top: -16px; left: 34%;
    color: var(--serve-pink-deep); rotate: 14deg;
    pointer-events: none;
  }

  /* ─────────── blog wide lifestyle ─────────── */
  .blog-wide {
    display: block; /* <a> inline kalırsa aspect-ratio/width/overflow uygulanmaz */
    position: relative;
    aspect-ratio: 16/7;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--r-md);
    margin: 0 var(--pad);
    max-width: var(--maxw);
    width: calc(100% - 2 * var(--pad));
    margin-left: auto; margin-right: auto;
  }
  .blog-wide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
  .blog-wide:hover img { transform: scale(1.04); }
  .blog-wide .corner-tag {
    position: absolute; top: 24px; left: 24px;
  }
  .blog-wide .read {
    position: absolute; bottom: 32px; left: 32px;
    color: #fff;
    max-width: 540px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  .blog-wide .read h3 {
    margin: 0 0 8px;
    font-family: "Fraunces", serif; font-style: italic;
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: 600; letter-spacing: -0.02em;
    line-height: 1;
  }
  .blog-wide .read .meta {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    display: inline-flex; gap: 8px; align-items: center;
  }

  /* ─────────── smarter feature ─────────── */
  .smarter { background: var(--light-blue); } /* palet-dışı soğuk gri (#ECEFF4) emekli */
  .sm-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
  }
  .sm-tag {
    display: inline-flex; gap: 8px; align-items: center;
    background: #fff; padding: 8px 14px;
    border-radius: 100px;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 28px;
  }
  .sm-tag em { font-style: italic; font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
  .sm-title {
    margin: 0 0 24px;
    color: var(--ink);
  }
  .sm-body {
    color: var(--ink-2);
    font-size: 16px; line-height: 1.6;
    max-width: 480px;
    margin-bottom: 32px;
  }
  .sm-figure {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4/3;
  }
  .sm-figure img {
    height: 92%; width: auto; object-fit: contain;
    transform: rotate(8deg);
    filter: drop-shadow(0 28px 32px rgba(27,45,107,.28));
    animation: hpFloat 8s ease-in-out infinite;
    --rot: 8deg;
  }

  /* ─────────── storefront ─────────── */
  /* tipografik fuar daveti — CNR 2015 fotoğrafı emekli; gerçek Ambiente görseli
     gelince fotoğraf geri dönebilir. Pembe drenched banner (bölüm transparent-kuralından muaf). */
  .storefront {
    position: relative;
    width: 100%;
    background:
      radial-gradient(ellipse 60% 80% at 82% 20%, rgba(232,154,174,.55), transparent 70%),
      var(--serve-pink);
    overflow: hidden;
  }
  .sf-inner {
    display: block;
    padding: clamp(80px, 10vw, 140px) var(--pad);
    max-width: var(--maxw);
    margin: 0 auto;
    position: relative;
  }
  .sf-tag {
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 100px;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    display: inline-flex; gap: 12px; align-items: center;
    margin-bottom: 28px;
  }
  .sf-title {
    margin: 0;
    color: var(--serve-blue);
    max-width: 12ch;
  }
  .sf-date {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 32px;
    background: rgba(255,255,255,.92);
    color: var(--serve-blue);
    border-radius: 100px;
    padding: 12px 20px;
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  }
  .sf-pen {
    position: absolute;
    right: clamp(20px, 8vw, 130px);
    top: 50%;
    height: min(74%, 420px);
    transform: translateY(-50%) rotate(20deg);
    filter: drop-shadow(0 26px 30px rgba(122,31,54,.35));
    animation: hpFloat 8s ease-in-out infinite;
    --rot: 20deg;
    pointer-events: none;
  }
  .sf-pen { animation: none; } /* translateY(-50%) hpFloat ile çakışır — sadece süzülme yok, sabit duruş */
  .sf-star {
    position: absolute;
    right: clamp(140px, 18vw, 320px);
    top: 18%;
    color: var(--serve-pink-deep);
    rotate: -14deg;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .sf-pen { position: static; transform: rotate(14deg); height: 220px; margin-top: 28px; display: block; }
    .sf-star { display: none; }
  }

  /* ─────────── our story (Hikayemiz nazar bandı) ───────────
     13 Eki 2026 (Eren): koyu gece bandı yerine BEYAZ zemin, Global'deki doodle küreyle aynı
     dil — mürekkep (lacivert) kontur, düz pastel dolgu, ofset "sticker" gölgesi, kesik
     çizgili mercan yörünge. Halka ↔ balon eşleşmesi korunur: NEDEN = merkez lacivert nokta ·
     NASIL = beyaz halka · NE = dış açık mavi halka. */
  .our-story .eyebrow { color: var(--ink-2); }
  .our-story .section-title { color: var(--ink); }
  .os-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(48px, 6vw, 80px);
    align-items: center;
  }
  .os-text-col { display: flex; flex-direction: column; gap: 24px; }
  .os-bubble {
    padding: 28px;
    border-radius: 22px;
    border: 2px solid var(--serve-blue);
    background: #fff;
    position: relative;
    font-size: 15px; line-height: 1.6;
    color: var(--serve-blue);
  }
  .os-bubble-tag {
    display: block;
    font-family: "DM Sans";
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 12px;
  }
  .os-bubble.b1 { background: var(--serve-blue); color: #fff; border-radius: 22px 22px 22px 4px; box-shadow: 8px 8px 0 #F4B8C5; }
  .os-bubble.b1 .os-bubble-tag { color: #C5DCEA; }
  .os-bubble.b2 { background: #fff; margin-left: 8%; border-radius: 22px 22px 4px 22px; box-shadow: 8px 8px 0 #F5E6A8; }
  .os-bubble.b3 { background: #C5DCEA; border-radius: 22px 22px 22px 4px; box-shadow: 8px 8px 0 #D8EAD2; }

  /* ─── Nazar boncuğu (Why·How·What) — doodle sticker ─── */
  .nazar {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }
  .nz-orbit {
    position: absolute; inset: -6%; width: 112%; height: 112%;
    fill: none; stroke: #E2482B; stroke-width: .7; stroke-dasharray: 2.4 2.6; stroke-linecap: round;
    animation: nzSpin 60s linear infinite;
    pointer-events: none;
  }
  @keyframes nzSpin { to { transform: rotate(360deg); } }
  .nz-bead {
    position: absolute; inset: 4%; border-radius: 50%;
    background: #AED4F6;
    border: 3px solid var(--serve-blue);
    box-shadow: 14px 16px 0 #F4B8C5;
    animation: nzBob 7s ease-in-out infinite;
  }
  @keyframes nzBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  .nz-white {
    position: absolute; inset: 19%; border-radius: 50%;
    background: #fff; border: 3px solid var(--serve-blue);
  }
  .nz-pupil {
    position: absolute; inset: 38%; border-radius: 50%;
    background: var(--serve-blue);
  }
  .nz-glint {
    position: absolute; left: 22%; top: 15%; width: 15%; height: 9%;
    border-radius: 50%; background: #fff;
    transform: rotate(-32deg);
    pointer-events: none;
  }
  .nz-label {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-family: "DM Sans"; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase;
    font-size: clamp(11px, 1.1vw, 14px);
    pointer-events: none;
    animation: nzBob 7s ease-in-out infinite;
  }
  .nz-l-why  { top: 50%; transform: translate(-50%, -50%); color: #fff; }
  .nz-l-how  { top: 67%; color: var(--serve-blue); }   /* beyaz halka */
  .nz-l-what { top: 86%; color: var(--serve-blue); }   /* dış açık mavi halka */
  .nz-doodle { position: absolute; height: auto; pointer-events: none; animation: nzFloat 6s ease-in-out infinite; }
  .nz-d1 { width: 11%; top: 2%; right: 4%; animation-delay: .4s; }
  .nz-d2 { width: 10%; bottom: 6%; left: -2%; animation-delay: 1.6s; }
  .nz-d3 { width: 9%; top: 10%; left: 0; animation-delay: 2.4s; }
  .nz-d4 { width: 14%; bottom: 0; right: -3%; animation: nzDrift 9s ease-in-out infinite; }
  @keyframes nzFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
  @keyframes nzDrift { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(-12px, -8px) rotate(6deg); } }

  /* ─────────── world — sinematik sahne: bölümün tamamı gökyüzü, küre içeriğin altında ─────────── */
  .world {
    position: relative;
    color: var(--ink); /* 13 Eki 2026: zemin beyaz → metin mürekkep */
    overflow: hidden;
    /* önceki bölümle dikiş: bölüm kendi zeminini boyadığı için alt-piksel aralığından
       gövde rengi sızıyordu — 1px bindirme */
    margin-top: -1px;
  }
  /* arka plan yığını kendi katmanında: maske görsellere uygulanır, İÇERİĞE DEĞİL
     (CTA/istatistikler bölüm sonuna 80px — element maskesi pili soluklaştırıyordu) */
  .world-bg {
    position: absolute; inset: 0; z-index: 0;
    /* taban renk DEGRADE katmanı olmak zorunda: sahne-renk sistemi bölümlerin
       background-color'ını !important ile şeffaflaştırıyor, image katmanlarına dokunmuyor */
    /* 13 Eki 2026: sinematik uzay (#05070f + nebula) emekli → doodle dünya BEYAZ zeminde
       (Eren: "arka plan lacivert değil beyazdan devam etsin") */
    background: linear-gradient(#fff, #fff);
  }
  /* World→Top10 dikişi: SABİT renge (krem) erimek yanlış — gövde henüz karanlıkken
     ortada beyaz bant bırakır. Görsel katmanlar ŞEFFAFLIĞA erir: altta gövdenin o anki
     sahne rengi görünür (karanlıkta görünmez, kreme dönerken .9s tween'iyle akar) */
  .world-bg, .world-stage, .world-fx {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent);
  }
  .world-stage { position: absolute; inset: 0; z-index: 0; cursor: grab; }
  .world-stage:active { cursor: grabbing; }
  .world-stage canvas { display: block; }
  /* sinema kaplaması (vinyet + film greni) doodle dünyayla emekli; katman boş kalır */
  .world-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  /* kayan yıldız → lacivert kesik "kalem çizgisi" (doodle dili, beyaz zemin) */
  .world-meteor {
    position: absolute; z-index: 1; pointer-events: none;
    width: 120px; height: 2.5px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(27,45,107,.55) 0 12px, transparent 12px 20px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
  }
  .world-content {
    position: relative; z-index: 2;
    pointer-events: none; /* küre sürüklenebilsin — etkileşimliler aşağıda geri açılır */
    display: flex; flex-direction: column;
    min-height: max(96vh, 740px);
  }
  .world-content a, .world-content button { pointer-events: auto; }
  .world .section-pad { padding: clamp(80px, 8vw, 120px) var(--pad); } /* shell+section-pad aynı div — yatay padding korunmalı */
  .world-head {
    display: flex; justify-content: space-between; align-items: end; gap: 24px;
  }
  .world-head h2 { color: var(--ink); }
  .world-head .meta { color: var(--ink-2); font-size: 13px; max-width: 320px; }
  .world-breather { flex: 1 1 auto; min-height: clamp(220px, 36vh, 440px); } /* kürenin sahne alanı */
  .world-stats {
    display: flex; gap: 48px;
    margin: 0 0 44px;
    flex-wrap: wrap;
  }
  .stat-num { font-family: "Fraunces", serif; font-style: italic; font-weight: 600; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--serve-blue); font-variant-numeric: tabular-nums; min-width: 2.6ch;
    text-shadow: 0 0 14px #fff, 0 0 3px #fff; } /* küre üstünde okunurluk halesi */
  .stat-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--serve-blue); margin-top: 8px; font-weight: 500; text-shadow: 0 0 8px #fff, 0 0 2px #fff; }
  /* ülke tooltip (raycast) */
  .world-tip {
    position: fixed; z-index: 60; pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    background: #fff; color: var(--ink);
    border-radius: 10px; padding: 8px 13px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .18s ease;
  }
  .world-tip .cat { display: block; font-size: 9.5px; letter-spacing: .18em; font-weight: 600; color: var(--serve-blue); text-transform: uppercase; margin-top: 2px; opacity: .8; }
  .world-tip.on { opacity: 1; }
  .world-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
  .world-cta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
  }
  .world-cta .text { font-size: 13px; color: var(--ink-2); max-width: 480px; }
  .cta-pill.light { background: #fff; color: var(--ink); }
  .cta-pill.light:hover { background: var(--peach); }

  /* ─────────── top10 blog ─────────── */
  .top10 { background: var(--bg); }
  .top10-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: stretch;
  }
  .top10-text {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: clamp(40px, 5vw, 72px);
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid var(--line-soft);
  }
  /* 7 blog başlığıyla metin sütunu ~900px'e uzuyor: poster stretch kalsaydı 420px
     genişlikte cover ile yatay kalem kutusunu yanlardan kesiyordu. Kendi oranında
     kalır, Keşfet'teki disc-side gibi listeyle birlikte yapışkan akar. */
  .top10-poster {
    width: 100%;
    min-width: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    align-self: start;
    aspect-ratio: 4 / 5;   /* blog kapağı fotoğrafı 1080×1350 (Ceylin, 27 Eki 2026) */
    position: sticky; top: 110px;
    background: var(--light-blue);
  }
  /* cover: mobildeki 13/16 oranında fotoğraf kenarlardan çok az kırpılır, zemin şeridi kalmaz */
  .top10-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
  .top10-poster:hover img { transform: scale(1.04) rotate(-1.5deg); }

  .post-list { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
  .post-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px; align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--line-soft);
    cursor: pointer;
  }
  .post-item > * { transition: transform .25s cubic-bezier(.2,.8,.2,1); } /* padding animasyonu layout tetikler — transform GPU-ucuz */
  .post-item:hover > * { transform: translateX(12px); }
  .post-item:last-child { border-bottom: 1px solid var(--line-soft); }
  .post-num { font-family: "Fraunces"; font-style: italic; font-size: 28px; font-weight: 600; color: var(--ink-3); }
  .post-meta { font-size: 16px; }
  .post-meta .cat { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
  .post-arrow { color: var(--ink-2); transition: transform .25s cubic-bezier(.2,.8,.2,1), color .25s; }
  .post-item:hover .post-arrow { transform: translateX(16px); color: var(--ink); } /* 12px satır kayması + 4px ok vurgusu */

  /* ─────────── footer ─────────── */
  footer.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.85);
    padding: clamp(64px, 7vw, 96px) 0 32px;
  }
  .ft-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  /* footer logosu: Serve'nin asıl metalik gri logosu (Eren, 26 Eki 2026: beyaz logo yerine) —
     müşterinin logo kaynağından (musteri-gelen/logo/serve-logo-metalik-kaynak.webp; zayıf alfa
     kılavuz çizgileri temizlendi, 504 px). Düz 432 C koyu zeminde kayboluyordu (≈1,6:1). */
  .ft-brand .ft-logo {
    display: block;
    width: 168px;
    aspect-ratio: 504 / 241;
    background: url("/assets/brand/serve-logo-metalik.webp") left center / contain no-repeat;
    margin-bottom: 18px;
  }
  .ft-brand p { color: rgba(255,255,255,.6); font-size: 13px; max-width: 320px; line-height: 1.6; }
  .ft-col h4 {
    font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
    color: rgba(255,255,255,.5);
    margin: 0 0 18px;
  }
  .ft-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .ft-col a {
    font-size: 14px; color: rgba(255,255,255,.85);
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .2s, transform .2s;
  }
  .ft-col a:hover { color: #fff; transform: translateX(2px); }
  .ft-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px;
    font-size: 12px; color: rgba(255,255,255,.5);
    flex-wrap: wrap; gap: 16px;
  }
  .ft-meta-tag {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 100px;
    padding: 6px 12px;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600;
  }

  /* ─────────── responsive ─────────── */
  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-stage { aspect-ratio: 16/10; }
    .pf-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
    .pf-card-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
    .pf-card-2 { grid-column: 3 / span 2; grid-row: 1 / span 1; }
    .pf-card-3 { grid-column: 3 / span 2; grid-row: 2 / span 3; }
    .pf-card-4 { grid-column: 1 / span 2; grid-row: 3 / span 1; }
    .pf-card-5 { grid-column: 1 / span 2; grid-row: 4 / span 1; }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
    .dn-grid { grid-template-columns: 1fr 1fr; }
    .disc-grid { grid-template-columns: 1fr; }
    .disc-side { position: static; }
    .sm-grid, .os-grid, .top10-grid { grid-template-columns: 1fr; }
    .ft-top { grid-template-columns: 1fr 1fr; }
    /* CLS: top10-grid tek sütuna düşünce posterin (<a> + height:100% <img>) içsel
       yüksekliği kalmıyor — oran verilmezse hücre 0px'e çöküyor, görsel yüklenince
       sayfa zıplıyor. ≤768'de zaten vardı, 769–1024 aralığı açıktaydı. */
    .top10-poster { aspect-ratio: 13/16; max-width: 480px; position: relative; top: auto; }
  }
  /* hamburger ≤1100 (eskiden ≤768): 769–1024 aralığında linkler iki satıra kırılıyordu.
     Blog sola geçince kümeler dengelendi (sol ≈340px, ikonsuz sağ ≈349px, ~960px'e kadar
     sığar); nokta yine 1100'de — 1025–1100 arasında logo ile kümeler arası çok daralıyor. */
  @media (max-width: 1100px) {
    .nav { grid-template-columns: auto 1fr auto; }
    .nav-group.left, .nav-group.right { display: none; }
    .nav-group.right.mobile { display: flex; gap: 12px; }
    .hamburger { width: 44px; height: 44px; }
  }
  @media (max-width: 768px) {
    .hero-marquee { display: none; }
    .archive-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dn-grid { grid-template-columns: 1fr; }
    .ft-top { grid-template-columns: 1fr; gap: 32px; }
    .pf-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .pf-card-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
    .pf-card-2 { grid-column: 1 / span 1; grid-row: 3 / span 1; }
    .pf-card-3 { grid-column: 2 / span 1; grid-row: 3 / span 3; }
    .pf-card-4 { grid-column: 1 / span 1; grid-row: 4 / span 1; }
    .pf-card-5 { grid-column: 1 / span 1; grid-row: 5 / span 1; }
    .camp-board { grid-template-columns: 1fr 1fr; grid-auto-rows: 185px; }
    .camp-1 { grid-area: 1 / 1 / 3 / 2; }
    .camp-4 { grid-area: 1 / 2 / 3 / 3; }
    .camp-2 { grid-area: 3 / 1 / 4 / 2; }
    .camp-3 { grid-area: 3 / 2 / 4 / 3; }
    .top10-poster { aspect-ratio: 13/16; max-width: 400px; }

    /* bölüm başlığı + alt metin dar ekranda aynı satıra sığmıyordu: 335px'lik
       satırda başlık 254px alıp .section-sub'ı 62px'lik şeride sıkıştırıyor
       (metin 8 satıra sarıyor), 320px'te ise gövdeyi yatay taşırıyordu */
    .section-head, .world-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .section-head { margin-bottom: 36px; }
    .section-sub, .world-head .meta { max-width: 100%; }

    /* top10 metin bloğu 320px'te 311px min-content ile taşıyordu (2×40px padding
       + post-item'ın 80px'lik numara kolonu) */
    .top10-text { padding: 28px 20px; }
    .post-item { grid-template-columns: 46px 1fr auto; gap: 12px; padding: 16px 0; }
    .post-num { font-size: 22px; }
    .post-meta { min-width: 0; font-size: 15px; }

    .archive-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .archive-tabs::-webkit-scrollbar { display: none; }
    .archive-tab { white-space: nowrap; padding: 17px 18px; }

    /* SERVE FAVS mozaiği 2 sütuna inince hücre 159px'e düşüyor: .pf-label 3 satıra
       sarıyor, .pf-meta (right:76px → yalnız 55px genişlik) 5-6 satıra sarıyor ve
       ikisi çakışıyordu. Kenar boşlukları/ok hücreye göre küçültülür; geniş kart
       (pf-card-1) kendi ölçeğini korur. */
    .pf-grid { gap: 12px; }
    .pf-label { left: 16px; top: 16px; right: 14px; font-size: 19px; }
    .pf-card-1 .pf-label { font-size: 28px; }
    /* künye 2 satıra kırpılır: 40 karakterlik satır 85px kutuda 4 satıra sarıp
       ürün görselinin üstüne biniyordu */
    .pf-meta {
      left: 16px; bottom: 14px; right: 52px;
      font-size: 9.5px; letter-spacing: 0.1em; line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* görsel künye bandının üstüne çekilir (bottom 14% → sabit 46px) */
    .pf-visual { inset: auto 7% 46px auto; width: 50%; height: 52%; }
    /* mobil: 1 büyük kart, 3 uzun-dar, 2-4-5 küçük kare (yazıya yer kalsın diye küçük çelenk) */
    .pf-card-1 .pf-visual { right: 8%; bottom: 16%; width: 48%; height: 54%; }
    .pf-card-2, .pf-card-4, .pf-card-5 { --art-inset: -16%; }
    .pf-card-4 .pf-visual { height: 44%; } /* defter başlığın ikinci satırına binmesin */
    .pf-card-3 { --art-inset: -40% -70%; }
    .pf-card-3 .pf-visual { right: 18%; bottom: 18%; width: 64%; height: 48%; }
    .pf-arrow { width: 36px; height: 36px; right: 14px; bottom: 14px; }

    /* arşiv kartı 158px genişlikte: 22px başlık uzun ürün adlarında 5 satıra sarıp
       aynı satırdaki kartlar arasında büyük yükseklik farkı bırakıyordu */
    .product-body { padding: 14px 13px 16px; gap: 4px; flex: 1; }
    .product-title { font-size: 16px; line-height: 1.25; }
    .product-cat { font-size: 9.5px; letter-spacing: 0.14em; }
    .product-card .more { margin-top: 10px; font-size: 10px; letter-spacing: 0.14em; }
    .product-color-strip { left: 12px; bottom: 12px; }
    .camp-board { gap: 12px; }
  }

  /* ─────────── dar ekran: dokunma hedefleri (min 44px) ───────────
     KURAL: tipografi büyümez — yalnız tıklanabilir kutu min-height/padding ile
     açılır. Böylece footer/menü/dil düğmesinin görsel dili aynı kalır. */
  @media (max-width: 768px) {
    /* padding ile büyütülür, inline-flex ile DEĞİL: flex item olan <sup>'un
       vertical-align:super'ı yok sayılır ve ® logo ortasına düşerdi */
    .logo-mark { width: 88px; }
    .icon-btn { width: 44px; height: 44px; }

    /* dil düğmesi mobilde yalnız .ms-lang (mobil sheet) içinde görünür */
    .lang-switch button {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; min-width: 52px; padding: 0 14px;
    }

    /* footer link listeleri: 21px satırdan 44px kutuya — gap sıfırlanır ki
       toplam ritim (31px → 44px) kontrollü büyüsün */
    .ft-col ul { gap: 0; }
    /* inline-flex → flex: hedef alan yalnız yazı genişliği kadar değil, sütunun
       tamamı olur ("Etki" gibi kısa linkler 24px genişlikte kalıyordu) */
    .ft-col a { display: flex; min-height: 44px; padding: 2px 0; }
    .ft-bottom { gap: 12px; }

    /* mobil sheet: alt kategori ve "tümü" bağlantıları */
    .ms-groups a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .ms-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }

    /* alt çizgili inline linkler: kutu büyütmek çizgiyi metinden koparır —
       hedef alanı görünmez ::after ile açılır */
    .camp-cta { position: relative; }
    .camp-cta::after { content: ""; position: absolute; inset: -13px 0; }
  }

  /* scroll reveal (scroll-fx.js) */
  .fx { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
  .fx.fx-in { opacity: 1; transform: none; }

  /* klavye odak halkası — marka mavisi; koyu sahnelerde beyaz */
  :focus-visible { outline: 2px solid var(--serve-blue); outline-offset: 3px; border-radius: 2px; }
  .header-dark :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

  /* hareket hassasiyeti: reveal + sonsuz animasyonlar + sahne geçişi durur (Lenis/globe JS tarafında) */
  @media (prefers-reduced-motion: reduce) {
    .fx, .fx.fx-in { opacity: 1 !important; transform: none !important; transition: none; }
    .hp, .marquee-track, .nazar, .nz-orbit, .nz-bead, .nz-label, .nz-doodle, .marquee-track span::after { animation: none !important; }
    .hv-media { transition: none !important; }
    body { transition: none !important; }
    .line-mask > span, .hero-eyebrow-row, .hero-sub, .hero-cta-row { animation: none !important; opacity: 1 !important; transform: none !important; }
    .tab-ink, .mega-card { transition: none !important; }
  }

  /* scroll-synced sahne renk geçişi: bölümler şeffaf, body rengi kaydırdıkça yumuşakça değişir
     — .storefront muaf: full-bleed contain görseli kendi pembe zeminine muhtaç */
  /* Sahne geçişi artık body background-color TWEEN'i DEĞİL: o tween her karede tüm
     sayfayı yeniden boyatıyordu (4x CPU profilinde p95 17.5→9.3ms tek başına).
     Crossfade'i scroll-fx.js compositor-only opacity ile yapar (scene-fade katmanı). */
  /* .site-footer de muaf: sahne rengi görünüm ORTASINA göre seçildiği için footer
     ekranın alt yarısındayken sahne hâlâ krem kalıyor, footer'ın beyaz metni krem
     üzerinde okunmuyordu (audit ekran görüntüsü, hikayemiz). Footer kendi koyu
     zeminini her zaman taşır; sahne footer'a girince zaten aynı renge geçiyor. */
  [data-screen-label]:not(.site-header):not(.storefront):not(.site-footer) { background-color: transparent !important; }

  /* tweaks */
  body[data-theme="cream"] { --bg: #FAF7F2; }
  body[data-theme="paper"] { --bg: #FFFFFF; }
  body[data-theme="ink"] { --bg: #1A1A1A; --ink: #FAFAFA; --ink-2: #B0B0B0; --ink-3: #707070; --paper: #2A2A2A; --line-soft: #303030; --line: #FAFAFA; }

/* Görsel olarak gizli ama ekran okuyucuya açık — footer sütun başlıkları için */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────── ana sayfa "Tüm ürün serileri" girişi (Ekim 2026) ───────────
   Toplantı: ürünler ana sayfadan kalktı → sekmeli ızgara yerine beş kategori kartı. */
.arc-cats {
  display: grid;
  /* minmax(0,1fr): "ÖDÜLLÜ TASARIMLAR" gibi uzun etiket sütunu genişletmesin — eşit kartlar */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}
.arc-cat {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 176px;
  padding: 26px 24px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.arc-cat:hover { border-color: var(--ink); transform: translateY(-2px); }
.arc-cat-label {
  font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
  font-size: clamp(21px, 1.9vw, 30px); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--serve-pink-deep);
  padding-right: 28px;
  overflow-wrap: break-word;
}
.arc-cat-tag { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.arc-cat-arrow {
  position: absolute; right: 18px; top: 22px;
  color: var(--ink-3);
  transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.arc-cat:hover .arc-cat-arrow { color: var(--ink); transform: translate(2px, -2px); }
@media (max-width: 1100px) { .arc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .arc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .arc-cats { grid-template-columns: 1fr; } .arc-cat { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .arc-cat, .arc-cat-arrow { transition: none; } }