:root{
    /* KREMA (light) — default theme */
    --espresso: #1F140E;
    --bean:     #2A1B12;
    --crema:    #F4E8D4;
    --paper:    #EFE2C9;
    --milk:     #FAF3E6;
    --caramel:  #B86E3A;
    --caramel-deep:#8C4A21;
    --gold:     #C9A45B;
    --wine:     #6B1F2E;
    --plum:     #3B1420;
    --olive:    #57532B;
    --line:     rgba(31,20,14,0.18);
    --line-soft:rgba(31,20,14,0.10);

    /* Semantic bgs (swap across themes) */
    --section-dark:   #E8D6B0;  /* mocktails — warm beige in Krema */
    --section-deeper: #DEC99F;  /* visit — darker tan in Krema */
    --footer-bg:      #D4BA85;  /* footer — deepest warm in Krema */
    --nav-bg:         rgba(239,226,201,0.82);
    --hover-surface:  rgba(255,255,255,0.32);
    --hover-surface-soft: rgba(255,255,255,0.25);
    --price-box-bg:   rgba(255,255,255,0.55);
    --price-box-bg-strong: rgba(255,255,255,0.9);
    --chip-bg:        rgba(31,20,14,0.06);
    --grain-opacity:  0.35;
    --sig-card-bg:    rgba(255,255,255,0.45);
    --sig-card-border:rgba(31,20,14,0.08);
    --card-bg:        rgba(255,255,255,0.55);
    --card-border:    rgba(31,20,14,0.08);
    --text-on-section: #1F140E;            /* text for dark-sections (mocktails/visit/footer) */
    --text-on-section-muted: rgba(31,20,14,0.72);
    --text-on-section-dim:   rgba(31,20,14,0.52);
    --icon-bg:        rgba(31,20,14,0.06);
    --text-muted:     rgba(31,20,14,0.78);
    --text-dim:       rgba(31,20,14,0.55);

    --display: "Fraunces", "Times New Roman", serif;
    --body: "Inter", system-ui, sans-serif;
  }

  /* ONYX (dark) — black & gold premium theme */
  [data-theme="dark"]{
    --espresso: #F5EDE0;           /* now cream (text) */
    --bean:     #0A0604;
    --crema:    #F5EDE0;           /* stays cream */
    --paper:    #070503;           /* page bg: deep black */
    --milk:     #0E0A07;           /* elevated surface */
    --caramel:  #D4AF37;           /* true gold accent */
    --caramel-deep: #B8942A;       /* deeper gold */
    --gold:     #E8C468;
    --wine:     #8C2F42;
    --plum:     #5A1E2F;
    --olive:    #8A7A3A;
    --line:     rgba(228,196,104,0.18);
    --line-soft:rgba(228,196,104,0.08);

    --section-dark:   #0B0805;      /* slightly elevated vs base */
    --section-deeper: #050302;      /* deepest */
    --footer-bg:      #040302;
    --nav-bg:         rgba(7,5,3,0.82);
    --hover-surface:  rgba(212,175,55,0.08);
    --hover-surface-soft: rgba(212,175,55,0.05);
    --price-box-bg:   rgba(212,175,55,0.05);
    --price-box-bg-strong: rgba(212,175,55,0.1);
    --chip-bg:        rgba(212,175,55,0.08);
    --grain-opacity:  0.12;
    --sig-card-bg:    rgba(212,175,55,0.04);
    --sig-card-border:rgba(212,175,55,0.2);
    --card-bg:        rgba(212,175,55,0.04);
    --card-border:    rgba(212,175,55,0.15);
    --text-on-section: #F5EDE0;
    --text-on-section-muted: rgba(245,237,224,0.78);
    --text-on-section-dim:   var(--text-on-section-dim);
    --icon-bg:        rgba(212,175,55,0.1);
    --text-muted:     rgba(245,237,224,0.78);
    --text-dim:       rgba(245,237,224,0.5);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--espresso);
    line-height:1.55;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .45s ease, color .45s ease;
  }

  /* Grain / paper texture overlay */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:var(--grain-opacity);
    mix-blend-mode:multiply;
    background-image:
      radial-gradient(rgba(31,20,14,0.12) 1px, transparent 1px),
      radial-gradient(rgba(31,20,14,0.08) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    transition:opacity .45s ease;
  }
  [data-theme="dark"] body::before{
    mix-blend-mode:screen;
    background-image:
      radial-gradient(rgba(228,196,104,0.1) 1px, transparent 1px),
      radial-gradient(rgba(228,196,104,0.06) 1px, transparent 1px);
  }

  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

  /* ============== NAV ============== */
  nav.top{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    background:var(--nav-bg);
    border-bottom:1px solid var(--line-soft);
    transition:background .45s ease, border-color .45s ease;
  }
  nav.top .wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:18px;padding-bottom:18px;
    gap:18px;
  }
    .logo {
      font-family: var(--display);
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.02em;
      display: flex !important; /* Flex yapısını zorunlu kılıyoruz */
      flex-direction: row !important; /* Yan yana dizilim */
      align-items: center; /* Dikeyde tam ortalama */
      gap: 12px; /* Logo ile yazı arasındaki boşluk */
      text-decoration: none;
    }

    .logo img {
      width: 34px; /* İdeal logo boyutu */
      height: auto;
      display: block;
      border-radius: 4px; /* Varsa köşeleri hafif yumuşatır */
    }
  nav.top ul{list-style:none;display:flex;gap:36px;align-items:center}
  nav.top ul a{
    font-size:13px;font-weight:500;letter-spacing:0.12em;
    text-transform:uppercase;
    transition:opacity .2s, color .45s;
  }
  nav.top ul a:hover{opacity:.7;color:var(--caramel-deep)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .nav-cta{
    border:1px solid var(--espresso);
    padding:10px 18px;border-radius:999px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    transition:background .25s,color .25s,border-color .45s;
  }
  .nav-cta:hover{background:var(--espresso);color:var(--paper)}

  /* Theme toggle button */
  .theme-toggle{
    width:40px;height:40px;border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--espresso);
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .25s, border-color .25s, color .45s, transform .3s;
    position:relative;
  }
  .theme-toggle:hover{
    background:var(--hover-surface-soft);
    border-color:var(--caramel);
    color:var(--caramel);
  }
  .theme-toggle svg{width:17px;height:17px;stroke-width:1.8}
  .theme-toggle .sun,
  .theme-toggle .moon{
    position:absolute;
    transition:opacity .35s ease, transform .45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .theme-toggle .sun{opacity:1;transform:rotate(0)}
  .theme-toggle .moon{opacity:0;transform:rotate(-90deg) scale(0.5)}
  [data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(90deg) scale(0.5)}
  [data-theme="dark"] .theme-toggle .moon{opacity:1;transform:rotate(0) scale(1)}
  [data-theme="dark"] .theme-toggle{color:var(--caramel);border-color:rgba(228,196,104,0.25)}
  .burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
  .burger span{display:block;width:22px;height:2px;background:var(--espresso);margin:4px 0;transition:transform .3s,opacity .3s}

  /* ============== HERO ============== */
  .hero{
    position:relative;
    padding:90px 0 120px;
    overflow:hidden;
  }
  .hero-ornament{
    position:absolute;
    right:-60px;top:40px;
    width:520px;height:520px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(200,123,58,0.22), rgba(31,20,14,0) 70%);
    z-index:0;
    transition:background .45s ease;
  }
  .hero-ornament.two{
    left:-80px;bottom:-120px;right:auto;top:auto;
    background:radial-gradient(circle at 70% 30%, rgba(107,31,46,0.18), rgba(31,20,14,0) 65%);
  }
  [data-theme="dark"] .hero-ornament{
    background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.14), rgba(7,5,3,0) 70%);
  }
  [data-theme="dark"] .hero-ornament.two{
    background:radial-gradient(circle at 70% 30%, rgba(184,110,58,0.12), rgba(7,5,3,0) 65%);
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:12px;letter-spacing:.3em;text-transform:uppercase;
    font-weight:500;color:var(--caramel-deep);
    margin-bottom:28px;
  }
  .eyebrow::before{
    content:"";width:40px;height:1px;background:var(--caramel-deep);
  }
  .hero h1{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(56px, 11vw, 168px);
    line-height:0.92;
    letter-spacing:-0.045em;
    margin-bottom:32px;
    font-variation-settings:"opsz" 144, "SOFT" 30;
  }
  .hero h1 em{
    font-style:italic;font-weight:300;
    color:var(--caramel-deep);
  }
  .hero h1 .amp{
    font-style:italic;font-weight:300;
    display:inline-block;transform:translateY(-0.15em);
    color:var(--caramel);
    font-size:0.7em;
    margin:0 0.04em;
  }
  .hero-row{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:60px;
    align-items:end;
    margin-top:40px;
  }
  .hero-copy{
    font-size:17px;line-height:1.7;
    max-width:440px;
    color:var(--text-muted);
  }
  .hero-copy p + p{margin-top:14px}
  .hero-meta{
    display:flex;flex-direction:column;gap:6px;
    font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    font-weight:500;
    border-left:1px solid var(--line);
    padding-left:24px;
  }
  .hero-meta span:first-child{color:var(--caramel-deep);font-size:11px;letter-spacing:.24em;margin-bottom:2px}

  .hero-cta-row{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;border-radius:999px;
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;cursor:pointer;border:none;
    transition:transform .3s ease, background .3s, color .3s, border-color .45s;
  }
  .btn.primary{background:var(--espresso);color:var(--paper)}
  .btn.primary:hover{transform:translateY(-2px)}
  [data-theme="dark"] .btn.primary{background:var(--caramel);color:#0A0604}
  [data-theme="dark"] .btn.primary:hover{background:var(--gold)}
  .btn.ghost{background:transparent;border:1px solid var(--espresso);color:var(--espresso)}
  .btn.ghost:hover{background:var(--espresso);color:var(--paper)}
  [data-theme="dark"] .btn.ghost{border-color:var(--caramel);color:var(--caramel)}
  [data-theme="dark"] .btn.ghost:hover{background:var(--caramel);color:#0A0604}
  .btn .arrow{display:inline-block;transition:transform .3s}
  .btn:hover .arrow{transform:translateX(4px)}

  /* Marquee / Ticker under hero */
  .ticker{
    background:var(--espresso);color:var(--paper);
    overflow:hidden;border-top:1px solid var(--espresso);
    position:relative;z-index:2;
    transition:background .45s ease, color .45s ease, border-color .45s ease;
  }
  [data-theme="dark"] .ticker{
    background:#0A0604;color:var(--crema);
    border-top-color:rgba(228,196,104,0.2);
    border-bottom:1px solid rgba(228,196,104,0.15);
  }
  .ticker-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scroll 15s linear infinite; /* 40s yerine 20s yapıldı */
    padding: 18px 0;
    font-family: var(--display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .ticker-track span{display:inline-flex;align-items:center;gap:60px}
  .ticker-track .dot{width:8px;height:8px;background:var(--caramel);border-radius:50%;display:inline-block}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ============== STORY ============== */
  .story{
    padding:130px 0 110px;
    position:relative;
  }
  .story-grid{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap:80px;
    align-items:start;
  }
  .section-label{
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--caramel-deep);font-weight:600;
    margin-bottom:24px;
    display:flex;align-items:center;gap:14px;
  }
  .section-label::before{
    content:"◆";font-size:8px;color:var(--caramel);
  }
  .story h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(36px,5vw,64px);
    line-height:1.02;
    letter-spacing:-0.028em;
  }
  .story h2 em{font-style:italic;font-weight:300;color:var(--caramel-deep)}
  .story-body{font-size:16px;line-height:1.8;color:var(--text-muted)}
  .story-body p + p{margin-top:18px}
  .pillars{
    margin-top:44px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  .pillar{
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  .pillar strong{
    font-family:var(--display);
    font-weight:500;
    font-size:22px;
    display:block;margin-bottom:4px;
    font-style:italic;
  }
  .pillar span{
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-dim);
  }

  /* ============== MENU ============== */
  .menu-section{
    padding:110px 0 60px;
    border-top:1px solid var(--line);
  }
  .menu-header{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:60px;gap:40px;flex-wrap:wrap;
  }
  .menu-header h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(44px,7vw,92px);
    line-height:0.95;
    letter-spacing:-0.035em;
  }
  .menu-header h2 em{font-style:italic;font-weight:300;color:var(--caramel-deep)}
  .menu-header .kicker{
    font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--caramel-deep);font-weight:500;
    margin-bottom:12px;
  }
  .menu-subtitle{
    max-width:360px;font-size:15px;line-height:1.6;
    color:var(--text-muted);
    text-align:right;
  }

  .size-key{
    display:flex;gap:18px;flex-wrap:wrap;
    margin-bottom:40px;padding:14px 22px;
    border:1px dashed var(--line);
    border-radius:6px;
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-dim);
  }
  .size-key span{display:inline-flex;align-items:center;gap:6px}
  .size-key b{
    font-weight:600;color:var(--espresso);
    letter-spacing:.14em;
  }

  .menu-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 80px;
  }

  .menu-item{
    display:grid;
    grid-template-columns:104px 1fr auto;
    gap:24px;align-items:center;
    padding:20px 0;
    border-bottom:1px solid var(--line-soft);
    transition:background .3s, padding .3s;
    cursor:pointer;
    position:relative;
  }
  .menu-item:hover{background:var(--hover-surface);padding-left:12px;padding-right:12px}
  .menu-item .thumb{transition:transform .35s ease}
  .menu-item:hover .thumb{transform:scale(1.06)}
  .menu-item:hover .thumb img{transform:scale(1.08)}
  .thumb img{transition:transform .5s cubic-bezier(.22,1,.36,1)}

  .thumb{
    width:104px;height:104px;border-radius:22px;
    box-shadow:0 6px 18px -10px rgba(46,33,24,.55);
    flex-shrink:0;
    background-size:cover;background-position:center;
    position:relative;overflow:hidden;
    border:1px solid var(--line-soft);
  }
  .thumb::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
    pointer-events:none;z-index:2;
  }
  .thumb img,.sig-visual img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;
    opacity:0;transition:opacity .45s ease;
    pointer-events:none;
    z-index:1;
  }
  .thumb img.loaded,.sig-visual img.loaded{opacity:1}
  /* Drink-specific gradient placeholders (kept until photos are added) */
  .t-latte      {background:linear-gradient(135deg,#D4B896,#8C5A36)}
  .t-cappuccino {background:linear-gradient(135deg,#E8D0A8,#6B3E1F)}
  .t-americano  {background:linear-gradient(135deg,#4A2817,#1F0F08)}
  .t-cortado    {background:linear-gradient(135deg,#C79A70,#6B3D1E)}
  .t-longblack  {background:linear-gradient(135deg,#3A1F10,#0F0704)}
  .t-espresso   {background:linear-gradient(135deg,#2E1810,#000)}
  .t-white-mocha{background:linear-gradient(135deg,#F5E6D0,#B8935E)}
  .t-mocha      {background:linear-gradient(135deg,#6B3E24,#2A1408)}
  .t-caramel    {background:linear-gradient(135deg,#E8AD6A,#8C4A21)}
  .t-chai       {background:linear-gradient(135deg,#D89B5F,#7A3D14)}
  .t-v60        {background:linear-gradient(135deg,#B8825A,#3E1E10)}
  .t-chemex     {background:linear-gradient(135deg,#C49472,#5A2E14)}
  .t-hotchoc    {background:linear-gradient(135deg,#5A2818,#1F0A04)}
  .t-whitechoc  {background:linear-gradient(135deg,#F5EAD0,#C9A45B)}
  .t-herbal     {background:linear-gradient(135deg,#B8A55E,#57532B)}
  .t-turkish    {background:linear-gradient(135deg,#3A1A0A,#0F0604)}
  .t-tea        {background:linear-gradient(135deg,#A83E1F,#5A1810)}
  .t-ice-am     {background:linear-gradient(135deg,#5A3520,#1F100A), linear-gradient(transparent,rgba(255,255,255,0.2))}
  .t-ice-filter {background:linear-gradient(135deg,#7A4A30,#2A1408)}
  .t-ice-latte  {background:linear-gradient(135deg,#E0CBAA,#8C5A36)}
  .t-ice-capp   {background:linear-gradient(135deg,#EADCB8,#7A4320)}
  .t-ice-chai   {background:linear-gradient(135deg,#E3AE75,#7A3D14)}
  .t-ice-caramel{background:linear-gradient(135deg,#F0B878,#8C4A21)}
  .t-lemonade   {background:linear-gradient(135deg,#F5E898,#CFB23E)}
  .t-lime       {background:linear-gradient(135deg,#BFD68C,#5A7A2E)}
  .t-hibiscus   {background:linear-gradient(135deg,#C73E5A,#5A1428)}
  .t-milkshake  {background:linear-gradient(135deg,#F5DED0,#C97878)}
  .t-churchill  {background:linear-gradient(135deg,#9ECBB5,#2E6148)}
  .t-redbull    {background:linear-gradient(135deg,#4A82C9,#1E3A6B)}
  .t-water      {background:linear-gradient(135deg,#E0ECF0,#9EB8C4)}
  .t-detox      {background:linear-gradient(135deg,#CFE0A8,#7A9B4A)}

  .menu-item .name{
    font-family:var(--display);
    font-weight:500;
    font-size:20px;
    letter-spacing:-0.01em;
    line-height:1.2;
  }
  .menu-item .caption{
    display:block;
    font-family:var(--body);
    font-size:12px;
    font-weight:400;
    color:var(--text-dim);
    margin-top:4px;
    letter-spacing:.04em;
  }
  .menu-item .prices{
    display:flex;gap:14px;align-items:center;
    flex-shrink:0;
  }
  .price{
    display:flex;flex-direction:column;align-items:center;
    min-width:56px;
  }
  .price .label{
    font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-dim);
    font-weight:700;
    margin-bottom:4px;
    opacity:.75;
  }
  .price .val{
    font-family:var(--display);
    font-weight:600;
    font-size:23px;
    letter-spacing:-0.035em;
    font-variant-numeric:tabular-nums lining-nums;
    line-height:1;
    color:var(--espresso);
  }
  .price .val .cur{
    font-size:12px;color:var(--caramel-deep);
    margin-left:2px;
    font-weight:500;
    vertical-align:.35em;
    letter-spacing:0;
  }
  [data-theme="dark"] .price .val{color:inherit}


  /* ===== Masaüstü tıklanabilirlik: hareketli ok ===== */
  @media(min-width:901px){
    .menu-item{ padding-right:38px; }
    .menu-item::after{
      content:'›';
      position:absolute; right:10px; top:50%;
      font-size:26px; line-height:1;
      color:var(--caramel); opacity:.4;
      transform:translateY(-50%);
      transition:opacity .3s ease, right .35s cubic-bezier(.22,1,.36,1);
      animation:okNefes 2.8s ease-in-out infinite;
      pointer-events:none;
    }
    .menu-item:hover::after{ opacity:1; right:4px; animation:none; }
    .menu-item:hover{ padding-right:38px }
    .menu-item:active{ transform:scale(.995) }
  }
  @keyframes okNefes{
    0%,100%{ transform:translateY(-50%) translateX(0) }
    50%    { transform:translateY(-50%) translateX(4px) }
  }
  @media (prefers-reduced-motion: reduce){
    .menu-item::after{ animation:none!important }
  }


  /* ═══════ MOBİL MENÜ: sayfalayıcı + görsel öncelikli kartlar ═══════ */
  @media(max-width:900px){
    .menu-pager{
      display:block;
      overflow-x:auto; overflow-y:hidden;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none; -ms-overflow-style:none;
      overscroll-behavior-x:contain;
    }
    .menu-pager::-webkit-scrollbar{display:none}
    .menu-pager > section{
      flex:0 0 100%; min-width:100%;
      scroll-snap-align:start; scroll-snap-stop:always;
      padding-left:16px; padding-right:16px;
      margin:0;
    }
    /* Bölüm başlıkları sayfalayıcıda tekrar etmesin */
    .menu-pager > section .menu-header{ margin-bottom:10px }

    /* Kartlar: görsel üstte, 2 sütun */
    .menu-grid{
      display:grid!important;
      grid-template-columns:repeat(2,1fr)!important;
      gap:12px!important;
    }
    .menu-item{
      display:flex!important; flex-direction:column; align-items:stretch;
      padding:0!important; gap:0!important;
      border:1px solid var(--line)!important; border-radius:18px;
      overflow:hidden; background:var(--price-box-bg);
      margin-bottom:0!important;
      box-shadow:0 4px 14px -10px rgba(46,33,24,.5);
    }
    .menu-item:hover{padding:0!important}
    .menu-item .thumb{
      width:auto!important; min-width:0!important; max-width:none!important;
      height:auto!important;
      align-self:stretch!important;
      aspect-ratio:1/1; border-radius:0!important;
      box-shadow:none; border:0; flex:0 0 auto;
    }
    .menu-item > div:nth-child(2){ padding:9px 11px 0 }
    .menu-item .name{ font-size:14.5px; line-height:1.25 }
    .menu-item .prices{
      grid-column:auto!important; margin:0!important;
      padding:7px 11px 11px; gap:0!important;
      display:flex; justify-content:space-between; align-items:flex-end;
    }
    .price{ min-width:0; align-items:center }
    .price .label{ font-size:7.5px; letter-spacing:.12em; margin-bottom:2px }
    .price .val{ font-size:15px }
    .price .val .cur{ font-size:9px }
    /* Kart düzeninde ok sağ alta */
    .menu-item::after{
      top:auto!important; bottom:9px; right:10px!important;
      font-size:20px!important; transform:none!important;
    }
    .menu-item::before{ display:none }

    /* Sayfalayıcı ipucu noktaları */
    .pager-dots{ display:flex; justify-content:center; gap:6px; padding:12px 0 4px }
    .pager-dot{
      width:6px; height:6px; border-radius:50%;
      background:var(--line); transition:all .25s;
    }
    .pager-dot.on{ background:var(--caramel); width:20px; border-radius:3px }
  }


  /* ═══════ SAYFA GENELİ 3B ARKA PLAN VİDEOSU ═══════
     Sabit katman: sayfa kaydıkça video yerinde kalır, içerik üstünden akar.
     Perde yoğunluğu okunabilirliği garanti eder; Moments'ta video biraz daha belirgin. */
  #siteBg{
    position:fixed; inset:0; z-index:-2;
    overflow:hidden; pointer-events:none;
  }
  #siteBg video{
    position:absolute; top:50%; left:50%;
    width:112%; height:112%; object-fit:cover;
    transform:translate(-50%,-50%);
    animation:siteBgDon 40s ease-in-out infinite alternate;
    filter:saturate(1.06);
    will-change:transform;
  }
  @keyframes siteBgDon{
    0%   { transform:translate(-50%,-50%) perspective(1600px) rotateY(-5deg) rotateX(2deg)  scale(1.00) }
    50%  { transform:translate(-50%,-50%) perspective(1600px) rotateY(0deg)  rotateX(0deg)  scale(1.06) }
    100% { transform:translate(-50%,-50%) perspective(1600px) rotateY(5deg)  rotateX(-2deg) scale(1.00) }
  }
  /* Perde bölümlerin üzerinde: yoğunluğu bölüme göre ayarlayabiliyoruz */
  body{ background:transparent!important }
  .top-moments, section.menu-section, section.signature, #manuel{
    background:rgba(253,251,247,.93)!important;
  }
  [data-theme="dark"] .top-moments,
  [data-theme="dark"] section.menu-section,
  [data-theme="dark"] section.signature,
  [data-theme="dark"] #manuel{ background:rgba(12,8,5,.93)!important }

  /* Moments: video burada daha çok görünsün */
  .top-moments{ background:rgba(253,251,247,.72)!important; backdrop-filter:blur(2px) }
  [data-theme="dark"] .top-moments{ background:rgba(12,8,5,.72)!important }

  @media (prefers-reduced-motion: reduce){
    #siteBg video{ animation:none; transform:translate(-50%,-50%) scale(1.03) }
  }
  @media(max-width:900px){
    #siteBg video{ width:150%; height:150%; animation-duration:52s }
    #siteBg::after{ background:rgba(253,251,247,.92) }
    [data-theme="dark"] #siteBg::after{ background:rgba(12,8,5,.92) }
  }


  /* Kart görselini kartın tamamına yay — düşük özgüllüklü eski .thumb kuralını geçer */
  @media(max-width:900px){
    .menu-grid .menu-item > .thumb.thumb{
      width:100%!important; max-width:100%!important; min-width:100%!important;
      height:auto!important; aspect-ratio:1/1!important;
      border:0!important; border-radius:0!important;
      align-self:stretch!important; flex:0 0 auto!important;
      box-shadow:none!important;
    }
  }


  /* Kart düzeninde eski satır-içi dolgular geçersiz (44px sağ boşluk görseli daraltıyordu) */
  @media(max-width:900px){
    .menu-grid .menu-item.menu-item{ padding:0!important; }
    .menu-grid .menu-item.menu-item:hover{ padding:0!important; }
    .menu-grid .menu-item.menu-item > div:nth-child(2){ padding:9px 11px 0!important }
    .menu-grid .menu-item.menu-item .prices{ padding:7px 11px 11px!important }
    .menu-grid .menu-item.menu-item::after{ right:9px!important; bottom:8px; top:auto!important }
  }

  /* ============== SIGNATURE MOCKTAILS ============== */
  .signature{
    margin-top:80px;
    padding:120px 0 130px;
    background:var(--section-dark);
    color:var(--text-on-section);
    position:relative;
    overflow:hidden;
    transition:background .45s ease, color .45s ease;
  }
  [data-theme="dark"] .signature{
    border-top:1px solid rgba(212,175,55,0.12);
    border-bottom:1px solid rgba(212,175,55,0.12);
  }
  .signature::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(200,123,58,0.18), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(107,31,46,0.28), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(201,164,91,0.12), transparent 35%);
    pointer-events:none;
    transition:opacity .45s ease;
  }
  [data-theme="dark"] .signature::before{
    background:
      radial-gradient(circle at 15% 20%, rgba(212,175,55,0.12), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(184,110,58,0.10), transparent 45%),
      radial-gradient(circle at 60% 10%, rgba(228,196,104,0.08), transparent 35%);
  }
  .signature .wrap{position:relative}
  .sig-header{
    text-align:center;
    margin-bottom:80px;
  }
  .sig-header .section-label{
    justify-content:center;color:var(--gold);
  }
  .sig-header .section-label::before{color:var(--gold)}
  .sig-header h2{
    font-family:var(--display);
    font-weight:300;
    font-style:italic;
    font-size:clamp(52px,9vw,124px);
    line-height:1;
    letter-spacing:-0.035em;
    color:var(--text-on-section);
  }
  .sig-header h2 .amp{color:var(--gold);font-style:italic}
  .sig-header p{
    max-width:540px;margin:28px auto 0;
    font-size:16px;line-height:1.7;
    color:var(--text-on-section-muted);
  }

  .sig-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
  }
  .sig-card{
    position:relative;
    background:var(--sig-card-bg);
    border:1px solid var(--sig-card-border);
    border-radius:8px;
    padding:32px 26px 28px;
    display:flex;flex-direction:column;
    transition:transform .4s ease, border-color .4s, background .45s;
    cursor:pointer;
  }
  .sig-card:hover{transform:translateY(-6px);border-color:var(--gold)}
  .sig-visual{
    width:100%;aspect-ratio:1;
    border-radius:50%;
    margin-bottom:24px;position:relative;
    overflow:hidden;
  }
  .sig-visual::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 45%),
      radial-gradient(circle at 75% 75%, rgba(0,0,0,0.2), transparent 50%);
    pointer-events:none;z-index:2;
  }
  .afrodit{background:radial-gradient(circle at 35% 35%, #7B4E8E, #3A1F4A 70%)}
  .eros{background:radial-gradient(circle at 35% 35%, #D4784A, #7B2E1A 70%)}
  .helios{background:radial-gradient(circle at 35% 35%, #D4C446, #7A6218 70%)}
  .heree{background:radial-gradient(circle at 35% 35%, #C94A5F, #4A1028 70%)}

  .sig-card .sig-name{
    font-family:var(--display);
    font-weight:400;
    font-style:italic;
    font-size:32px;
    letter-spacing:0.02em;
    line-height:1;
    margin-bottom:6px;
    color:var(--text-on-section);
  }
  .sig-card .sig-aroma{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);font-weight:600;
    margin-bottom:18px;
  }
  .sig-card .sig-content{
    font-size:13px;line-height:1.65;
    color:var(--text-on-section-muted);
    flex:1;
    padding-top:16px;
    border-top:1px solid var(--card-border);
  }
  .sig-card .sig-content span{color:var(--text-on-section-dim);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:6px}
  .sig-card .sig-price{
    margin-top:22px;
    font-family:var(--display);
    font-weight:500;
    font-size:28px;
    color:var(--gold);
    letter-spacing:-0.01em;
  }
  .sig-card .sig-price .cur{font-size:16px;margin-left:2px}

  /* ============== VISIT (dark cards) ============== */
  .visit{
    background:var(--section-deeper);
    color:var(--text-on-section);
    padding:130px 0 130px;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:background .45s ease, color .45s ease;
  }
  .visit::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(circle at 20% 30%, rgba(201,164,91,0.06), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(184,110,58,0.05), transparent 45%);
  }
  .visit .wrap{position:relative}
  .visit h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(36px,5vw,60px);
    letter-spacing:-0.022em;
    line-height:1.1;
    color:var(--text-on-section);
    margin-bottom:22px;
  }
  .visit-divider{
    width:64px;height:2px;background:var(--gold);
    margin:0 auto 72px;border-radius:2px;
  }
  .visit-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .visit-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:52px 32px 44px;
    display:flex;flex-direction:column;align-items:center;
    transition:transform .4s ease, background .4s, border-color .4s;
  }
  .visit-card:hover{
    transform:translateY(-6px);
    background:var(--price-box-bg-strong);
    border-color:var(--caramel);
  }
  .visit-icon{
    width:76px;height:76px;border-radius:50%;
    background:var(--icon-bg);
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:28px;
    color:var(--caramel-deep);
  }
  .visit-icon svg{width:30px;height:30px}
  .visit-card h3{
    font-family:var(--display);
    font-weight:600;
    font-size:24px;
    color:var(--text-on-section);
    margin-bottom:18px;
    letter-spacing:-0.01em;
  }
  .visit-card p{
    font-size:15px;line-height:1.7;
    color:var(--text-on-section-dim);
    margin-bottom:28px;
    max-width:280px;
  }
  .visit-hours{
    font-family:var(--display);
    font-weight:600;
    font-size:36px;
    color:var(--gold);
    letter-spacing:0;
    line-height:1;
    margin-top:4px;
  }
  .visit-pill{
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 26px;border-radius:999px;
    border:1px solid var(--caramel-deep);
    color:var(--caramel-deep);
    font-size:13px;font-weight:600;letter-spacing:.02em;
    transition:background .25s, color .25s, transform .25s, border-color .45s;
  }
  .visit-pill:hover{background:var(--caramel-deep);color:var(--paper);transform:translateY(-1px)}
  [data-theme="dark"] .visit-pill{border-color:var(--gold);color:var(--gold)}
  [data-theme="dark"] .visit-pill:hover{background:var(--gold);color:#0C0805}
  .visit-pill svg{width:15px;height:15px;stroke-width:2.2}
  .visit-card .spacer{flex:1}

  /* ============== FOOTER ============== */
  footer{
    background:var(--footer-bg);
    color:var(--text-on-section);
    padding:80px 0 40px;
    position:relative;
    transition:background .45s ease, color .45s ease;
  }
  .foot-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:60px;
    padding-bottom:60px;
    border-bottom:1px solid var(--card-border);
  }
  .foot-logo{
    font-family:var(--display);
    font-weight:400;
    font-size:56px;
    line-height:0.9;
    letter-spacing:-0.03em;
    margin-bottom:16px;
  }
  .foot-logo em{font-style:italic;font-weight:300;color:var(--gold)}
  .foot-tag{
    font-size:14px;color:var(--text-on-section-muted);
    max-width:280px;line-height:1.65;
  }
  .foot-col h4{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    font-weight:600;color:var(--gold);
    margin-bottom:18px;
  }
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .foot-col ul a{
    font-size:14px;color:var(--text-on-section-muted);
    transition:color .2s;
  }
  .foot-col ul a:hover{color:var(--gold)}
  .foot-bottom{
    padding-top:30px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;letter-spacing:.08em;
    color:var(--text-on-section-dim);
    flex-wrap:wrap;gap:12px;
  }
  .foot-bottom a:hover{color:var(--gold)}

  /* ============== DRINK DETAIL MODAL ============== */
  .modal-overlay{
    position:fixed;inset:0;
    background:rgba(12,8,5,0.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:100;
    display:flex;align-items:center;justify-content:center;
    padding:32px 24px;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
  }
  .modal-overlay.open{opacity:1;pointer-events:auto}
  body.modal-open{overflow:hidden}

  .modal-card{
    background:var(--paper);
    color:var(--espresso);
    border-radius:16px;
    width:100%;max-width:920px;
    max-height:90vh;overflow-y:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    position:relative;
    transform:translateY(30px) scale(0.96);
    transition:transform .5s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.5);
    overflow-x:hidden;
  }
  [data-theme="dark"] .modal-card{
    background:var(--milk);
    border:1px solid rgba(212,175,55,0.15);
  }
  .modal-overlay.open .modal-card{transform:none}

  .modal-close{
    position:absolute;top:16px;right:16px;
    width:42px;height:42px;
    background:rgba(31,20,14,0.08);
    border:none;border-radius:50%;
    cursor:pointer;z-index:3;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s, transform .2s, color .45s;
    color:var(--espresso);
  }
  .modal-close:hover{background:rgba(31,20,14,0.18);transform:rotate(90deg)}
  [data-theme="dark"] .modal-close{background:rgba(228,196,104,0.12);color:var(--caramel)}
  [data-theme="dark"] .modal-close:hover{background:rgba(228,196,104,0.22)}
  .modal-close svg{width:18px;height:18px;stroke-width:2}

  .modal-image{
    width:100%;aspect-ratio:1;
    background-size:cover;background-position:center;
    background-repeat:no-repeat;
    position:relative;overflow:hidden;
  }
  .modal-image::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,0.18), transparent 55%),
      radial-gradient(circle at 75% 80%, rgba(0,0,0,0.15), transparent 55%);
    pointer-events:none;
  }

  .modal-info{
    padding:56px 48px 44px;
    display:flex;flex-direction:column;
    overflow-y:auto;
  }
  .modal-info .m-kicker{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--caramel-deep);font-weight:600;
    margin-bottom:16px;
    display:flex;align-items:center;gap:10px;
  }
  .modal-info .m-kicker::before{
    content:"";width:24px;height:1px;background:var(--caramel);
  }
  .modal-info h3{
    font-family:var(--display);
    font-weight:500;
    font-size:44px;
    letter-spacing:-0.025em;
    line-height:1;
    margin-bottom:10px;
  }
  .modal-info .m-aroma{
    font-family:var(--display);
    font-style:italic;font-weight:400;
    font-size:19px;
    color:var(--caramel-deep);
    margin-bottom:22px;
  }
  .modal-info .m-desc{
    font-size:15px;line-height:1.75;
    color:var(--espresso);
    opacity:0.82;
    margin-bottom:24px;
  }
  .m-chips{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-bottom:28px;
  }
  .m-chips .m-chip-label{
    font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--espresso);opacity:0.55;font-weight:600;
    width:100%;margin-bottom:2px;
  }
  .m-chip{
    display:inline-flex;align-items:center;
    padding:8px 14px;
    background:var(--chip-bg);
    border:1px solid var(--line-soft);
    border-radius:999px;
    font-size:12px;font-weight:500;
    letter-spacing:.02em;
    color:var(--espresso);
  }

  .m-prices-label{
    font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--espresso);opacity:0.55;font-weight:600;
    margin-bottom:12px;
    padding-top:22px;
    border-top:1px solid var(--line);
  }
  .m-prices{
    display:flex;gap:10px;flex-wrap:wrap;
    margin-top:4px;
  }
  .m-price{
    flex:1;min-width:86px;
    padding:16px 14px;
    background:var(--price-box-bg);
    border:1px solid var(--line-soft);
    border-radius:10px;
    text-align:center;
    transition:background .25s, border-color .25s;
  }
  .m-price:hover{background:var(--price-box-bg-strong);border-color:var(--caramel)}
  .m-price .m-plabel{
    display:block;
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--espresso);opacity:0.6;
    font-weight:600;
    margin-bottom:6px;
  }
  .m-price .m-pval{
    font-family:var(--display);
    font-weight:600;
    font-size:26px;
    letter-spacing:-0.01em;
    color:var(--espresso);
  }
  .m-price .m-pval .cur{
    font-size:15px;color:var(--caramel-deep);margin-left:2px;
  }

  /* Dark variant for mocktails — always dark regardless of theme */
  .modal-overlay.dark .modal-card{background:#0E0906;color:#F5EDE0;border:1px solid rgba(212,175,55,0.2)}
  .modal-overlay.dark .modal-close{background:rgba(244,232,212,0.1);color:#F5EDE0}
  .modal-overlay.dark .modal-close:hover{background:rgba(244,232,212,0.2)}
  .modal-overlay.dark .modal-info h3{color:#F5EDE0}
  .modal-overlay.dark .modal-info .m-kicker{color:#E8C468}
  .modal-overlay.dark .modal-info .m-kicker::before{background:#E8C468}
  .modal-overlay.dark .modal-info .m-aroma{color:#E8C468}
  .modal-overlay.dark .modal-info .m-desc{color:#F5EDE0;opacity:0.78}
  .modal-overlay.dark .m-chip{
    background:rgba(244,232,212,0.08);
    border-color:var(--card-border);
    color:#F5EDE0;
  }
  .modal-overlay.dark .m-chips .m-chip-label,
  .modal-overlay.dark .m-prices-label{color:#F5EDE0;opacity:0.55}
  .modal-overlay.dark .m-prices-label{border-top-color:var(--card-border)}
  .modal-overlay.dark .m-price{
    background:rgba(244,232,212,0.06);
    border-color:var(--card-border);
  }
  .modal-overlay.dark .m-price:hover{background:rgba(244,232,212,0.1);border-color:#E8C468}
  .modal-overlay.dark .m-price .m-plabel{color:#F5EDE0;opacity:0.6}
  .modal-overlay.dark .m-price .m-pval{color:#F5EDE0}
  .modal-overlay.dark .m-price .m-pval .cur{color:#E8C468}

  @media (max-width: 900px){
    nav.top ul{display:none}
    .burger{display:block}
    .nav-cta{display:none}
    .nav-right{gap:6px}
    nav.top ul.open{
      display:flex;flex-direction:column;
      position:absolute;top:100%;left:0;right:0;
      background:var(--paper);
      padding:24px 32px;gap:16px;
      border-bottom:1px solid var(--line);
    }
    .hero{padding:60px 0 80px}
    .hero-row{grid-template-columns:1fr;gap:30px}
    .hero-meta{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px;margin-top:14px}
    .story-grid{grid-template-columns:1fr;gap:40px}
    .visit-cards{grid-template-columns:1fr;gap:20px}
    .visit-card{padding:44px 28px 36px}
    .visit-divider{margin-bottom:48px}
    .menu-grid{grid-template-columns:1fr;gap:0}
    .sig-grid{grid-template-columns:repeat(2,1fr);gap:20px}
    .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
    .menu-header{flex-direction:column;align-items:flex-start}
    .menu-subtitle{text-align:left}
    .menu-item{grid-template-columns:84px 1fr;gap:16px;padding-right:30px}
    .menu-item .prices{grid-column:1/-1;justify-content:flex-end;margin-top:8px}
    .menu-item .name{font-size:19px}
    .price .val{font-size:21px}
    .pillars{grid-template-columns:1fr;gap:14px}
    .pillars{grid-template-columns:1fr;gap:14px}
  }
  @media (max-width: 700px){
    /* Overlay: kartın etrafında nefes payı */
    .modal-overlay{padding:0;align-items:center;justify-content:center}

    /* Kart: ekranın %92'si genişlik, maksimum ekranın %88'i yükseklik */
    .modal-card{
      display:flex;flex-direction:column;   /* grid → flex, tek sütun */
      grid-template-columns:1fr;
      width:92vw;
      max-width:none;                        /* masaüstü 920px sınırını kaldır */
      max-height:88vh;
      max-height:88dvh;                      /* iOS toolbar'ı hesaba katar */
      border-radius:22px;
      overflow:hidden;                       /* köşe yuvarlama için */
    }
    /* Görsel: ekrana göre orantılı, çok yer kaplamaz */
    .modal-image{
      aspect-ratio:16/9;
      flex-shrink:0;
      width:100%;
    }
    /* Bilgi alanı: kalan yüksekliği kullan, taşarsa içten scroll */
    .modal-info{
      padding:22px 20px 28px;
      overflow-y:auto;
      flex:1;
      min-height:0;                          /* flex scroll için gerekli */
      -webkit-overflow-scrolling:touch;
    }
    .modal-info h3{font-size:clamp(24px,7.5vw,36px)}
    .modal-info .m-aroma{font-size:15px}
    .m-price{min-width:0}
    .m-price .m-pval{font-size:clamp(18px,5.5vw,24px)}
  }
  @media (max-width: 520px){
    .wrap{padding:0 20px}
    .sig-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .price{min-width:auto}
    .ticker-track{font-size:18px}
    /* Küçük telefon: biraz daha geniş */
    .modal-card{width:95vw;border-radius:18px}
    .modal-info{padding:18px 16px 24px}
    .modal-info h3{font-size:clamp(22px,7vw,30px)}
  }

  /* Entrance animation */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease, transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  /* ===== DOKUNMA DENEYİMİ ===== */
  .menu-item,.sig-card{-webkit-tap-highlight-color:transparent}

  /* ── Kahve bardağına dökülme animasyonu ── */
  .coffee-toast{
    position:fixed;bottom:22vh;left:50%;
    transform:translateX(-50%);
    pointer-events:none;z-index:9999;
    animation:ct-show 1.45s ease forwards;
  }
  .coffee-toast svg{width:82px;height:92px;overflow:visible}
  @keyframes ct-show{
    0%  {opacity:0;transform:translateX(-50%) scale(.55) translateY(16px)}
    13% {opacity:1;transform:translateX(-50%) scale(1)   translateY(0)}
    72% {opacity:1}
    100%{opacity:0;transform:translateX(-50%) scale(.95) translateY(-10px)}
  }
  /* Dökme akışı */
  .ct-stream{
    stroke:#C9A45B;stroke-width:5;stroke-linecap:round;fill:none;
    stroke-dasharray:28;stroke-dashoffset:28;
    animation:ct-pour .32s ease .05s forwards;
  }
  @keyframes ct-pour{to{stroke-dashoffset:0}}
  /* Kahve dolumu */
  .ct-fill{
    transform-origin:50% 100%;transform:scaleY(0);
    animation:ct-fill .48s cubic-bezier(.17,.67,.55,1) .28s forwards;
  }
  @keyframes ct-fill{to{transform:scaleY(1)}}
  /* Buhar */
  .ct-s1,.ct-s2,.ct-s3{
    fill:none;opacity:0;stroke-linecap:round;
    stroke-dasharray:20;stroke-dashoffset:20;
  }
  .ct-s1{animation:ct-stm .95s ease .72s forwards}
  .ct-s2{animation:ct-stm .95s ease .84s forwards}
  .ct-s3{animation:ct-stm .95s ease .78s forwards}
  @keyframes ct-stm{
    0%  {opacity:0;stroke-dashoffset:20}
    35% {opacity:.6}
    100%{opacity:0;stroke-dashoffset:-10}
  }

  /* ── Mobil yapışkan kategori çubuğu ── */
  #mobileCatBar{
    position:sticky;top:58px;z-index:48;
    background:var(--nav-bg);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
    padding:10px 0 12px;
    display:none; /* JS açar */
  }
  .mcat-inner{
    display:flex;gap:8px;
    padding:0 20px;
    overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x mandatory;
  }
  .mcat-inner::-webkit-scrollbar{display:none}
  .mcat-btn{
    flex-shrink:0;padding:8px 20px;
    border-radius:22px;border:1px solid var(--line);
    background:transparent;color:var(--espresso);
    font-family:var(--body);font-size:13px;font-weight:500;
    letter-spacing:.03em;cursor:pointer;white-space:nowrap;
    transition:all .2s;scroll-snap-align:start;
    -webkit-tap-highlight-color:transparent;
  }
  [data-theme="dark"] .mcat-btn{color:var(--crema,#F4E8D4);border-color:var(--line)}
  .mcat-btn.active{background:var(--caramel);color:#fff;border-color:var(--caramel);font-weight:600}
  .mcat-btn:active{transform:scale(0.94)}

  /* Dokunma ripple */
  .tap-ripple{
    position:absolute;border-radius:50%;
    background:rgba(185,110,58,0.18);
    transform:scale(0);pointer-events:none;
    animation:tap-ripple .55s ease-out forwards;
  }
  @keyframes tap-ripple{to{transform:scale(4.5);opacity:0}}

  /* Chevron bounce — "tıkla" ipucu */
  @keyframes chevron-nudge{
    0%,100%{transform:translateY(-50%) translateX(0)}
    40%    {transform:translateY(-50%) translateX(5px)}
    70%    {transform:translateY(-50%) translateX(-2px)}
  }

  /* Kategori geçiş animasyonu */
  .mcat-section-enter{animation:mcat-in .22s ease forwards}
  .mcat-section-exit {animation:mcat-out .18s ease forwards}
  @keyframes mcat-in {
    from{opacity:0;transform:translateX(22px)}
    to  {opacity:1;transform:none}
  }
  @keyframes mcat-out{
    from{opacity:1;transform:none}
    to  {opacity:0;transform:translateX(-22px)}
  }

  /* ── Mobil kart düzeni & tıklanabilirlik ── */
  @media(max-width:900px){
    /* Menu itemlar kart gibi görünsün */
    .menu-item{
      background:var(--price-box-bg);
      border-radius:14px;
      border:1px solid var(--line)!important;
      padding:14px 44px 14px 14px!important;
      margin-bottom:8px;
      transition:transform .08s,background .08s;
      overflow:hidden; /* ripple kırpma */
    }
    /* Chevron sürekli nefes alsın — tıklanabilir olduğu belli olsun */
    .menu-item::after{
      animation:okNefesMobil 2.6s ease-in-out infinite;
    }
    /* Dokunma ipucu: okun etrafında yayılan halka */
    .menu-item::before{
      content:'';
      position:absolute; right:17px; top:50%;
      width:18px; height:18px; margin-top:-9px;
      border:1.5px solid var(--caramel);
      border-radius:50%;
      opacity:0;
      animation:dokunHalka 3s ease-out infinite;
      pointer-events:none; z-index:1;
    }
    .menu-item:active::before{ animation:none; opacity:0 }
  }
  @keyframes okNefesMobil{
    0%,100%{ transform:translateY(-50%) translateX(0) }
    50%    { transform:translateY(-50%) translateX(4px) }
  }
  @keyframes dokunHalka{
    0%   { transform:scale(.55); opacity:.6 }
    55%  { transform:scale(1.9);  opacity:0 }
    100% { transform:scale(1.9);  opacity:0 }
  }
  @media(max-width:900px){
    /* Masaüstü hover padding efektini iptal et */
    .menu-item:hover{padding-left:14px!important;padding-right:44px!important}
    /* Dokunma geri bildirimi */
    .menu-item:active{
      background:var(--hover-surface)!important;
      transform:scale(0.975);
    }
    /* Altın chevron — "tıkla" göstergesi */
    .menu-item::after{
      content:'›';
      position:absolute;right:14px;top:50%;
      transform:translateY(-50%);
      font-size:24px;line-height:1;
      color:var(--caramel);opacity:.75;
      pointer-events:none;
    }
    /* Sig kartları da aynı şekilde */
    .sig-card{border-radius:16px;transition:transform .08s}
    .sig-card:active{transform:scale(0.975)}

    /* Çarpı butonu belirgin */
    .modal-close{
      background:rgba(8,4,1,.78)!important;
      color:#F4E8D4!important;
      border:1.5px solid rgba(244,232,212,.32)!important;
      width:50px!important;height:50px!important;
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    }
    [data-theme="dark"] .modal-close{
      background:rgba(201,164,91,.26)!important;
      border-color:rgba(201,164,91,.48)!important;
      color:#F5EDE0!important;
    }

    /* İlk açılış "dokunun" badge */
    .tap-hint-badge{
      position:fixed;bottom:76px;left:50%;
      transform:translateX(-50%);
      background:rgba(18,10,4,.9);color:#F4E8D4;
      font-size:13px;font-family:var(--body);letter-spacing:.025em;
      padding:10px 22px;border-radius:26px;
      pointer-events:none;z-index:600;
      display:flex;align-items:center;gap:9px;
      border:1px solid rgba(201,160,60,.4);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      white-space:nowrap;
      animation:hint-fade 4.4s ease forwards;
    }
    @keyframes hint-fade{
      0%  {opacity:0;transform:translateX(-50%) translateY(12px)}
      12% {opacity:1;transform:translateX(-50%) translateY(0)}
      78% {opacity:1}
      100%{opacity:0;transform:translateX(-50%) translateY(-8px)}
    }
  }

  /* ==================== TOP MOMENTS / REELS SLIDER ==================== */
  .top-moments{
    position:relative;
    z-index:5;
    padding:34px 0 20px;
    background:var(--paper);
    transition:background .45s ease;
  }

  /* ===== Moments: sessiz 3B arka plan ===== */
  .top-moments{ isolation:isolate; overflow:hidden; }
  .top-moments > .wrap{ position:relative; z-index:2; }
  .moments-bg{
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
  }
  .moments-bg video{
    position:absolute; top:50%; left:50%;
    width:116%; height:116%;
    object-fit:cover;
    filter:saturate(1.08) contrast(1.02);
    transform:translate(-50%,-50%);
    animation:momentsDon 34s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes momentsDon{
    0%   { transform:translate(-50%,-50%) perspective(1400px) rotateY(-7deg) rotateX(2.5deg)  scale(1.00) }
    50%  { transform:translate(-50%,-50%) perspective(1400px) rotateY(0deg)  rotateX(0deg)    scale(1.07) }
    100% { transform:translate(-50%,-50%) perspective(1400px) rotateY(7deg)  rotateX(-2.5deg) scale(1.00) }
  }
  /* Okunabilirlik perdesi — yazılar her zaman net kalsın */
  .moments-bg::after{
    content:''; position:absolute; inset:0;
    background:rgba(253,251,247,.84);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  [data-theme="dark"] .moments-bg::after{ background:rgba(14,9,5,.84); }

  @media (prefers-reduced-motion: reduce){
    .moments-bg video{ animation:none; transform:translate(-50%,-50%) scale(1.04) }
  }
  @media(max-width:900px){
    .moments-bg video{ width:130%; height:130%; animation-duration:44s }
    .moments-bg::after{ background:rgba(253,251,247,.88) }
    [data-theme="dark"] .moments-bg::after{ background:rgba(14,9,5,.88) }
  }

  .moments-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:18px;
    gap:16px;
  }
  .moments-kicker{
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--caramel-deep);
    margin-bottom:4px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .moments-kicker::before{
    content:"◆";
    font-size:8px;
    color:var(--caramel);
  }
  [data-theme="dark"] .moments-kicker{color:var(--gold)}
  [data-theme="dark"] .moments-kicker::before{color:var(--gold)}
  .moments-title{
    font-family:var(--display);
    font-size:clamp(22px,4vw,34px);
    font-weight:400;
    line-height:1.1;
    letter-spacing:-0.025em;
  }
  .moments-title em{
    font-style:italic;
    font-weight:300;
    color:var(--caramel-deep);
  }
  [data-theme="dark"] .moments-title em{color:var(--gold)}

  .moments-nav-btns{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .m-nav-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--hover-surface-soft);
    color:var(--espresso);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .25s ease;
  }
  .m-nav-btn:hover{
    background:var(--caramel);
    border-color:var(--caramel);
    color:#fff;
    transform:scale(1.06);
  }
  [data-theme="dark"] .m-nav-btn{
    color:var(--crema);
    border-color:rgba(212,175,55,0.25);
  }
  [data-theme="dark"] .m-nav-btn:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:#0A0604;
  }
  .m-nav-btn svg{width:16px;height:16px;stroke-width:2.2}

  .moments-track-wrap{
    position:relative;
    width:100%;
  }
  .moments-track{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    padding:8px 4px 18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .moments-track::-webkit-scrollbar{display:none}

  .moment-card{
    flex:0 0 280px;
    height:460px;
    border-radius:22px;
    position:relative;
    overflow:hidden;
    scroll-snap-align:start;
    cursor:pointer;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
    border:1px solid var(--line);
    background:#160E09;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 12px 30px -10px rgba(0,0,0,0.22);
  }
  .moment-card:hover{
    transform:translateY(-4px);
    border-color:var(--caramel);
    box-shadow:0 22px 45px -12px rgba(184,110,58,0.32);
  }
  [data-theme="dark"] .moment-card{
    border-color:rgba(212,175,55,0.22);
    box-shadow:0 14px 34px -10px rgba(0,0,0,0.6);
  }
  [data-theme="dark"] .moment-card:hover{
    border-color:var(--gold);
    box-shadow:0 22px 48px -10px rgba(212,175,55,0.26);
  }

  .moment-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s ease;
    background:#160E09;
  }
  .moment-card:hover .moment-media{
    transform:scale(1.04);
  }

  .moment-gradient{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, transparent 32%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.88) 100%);
    pointer-events:none;
    z-index:2;
  }

  .moment-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px;
    border-radius:20px;
    background:rgba(18,12,8,0.68);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.18);
    font-family:var(--body);
    font-size:11px;
    font-weight:600;
    color:#FAF3E6;
    letter-spacing:.04em;
  }
  .moment-badge .live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#E74C3C;
    box-shadow:0 0 8px #E74C3C;
    animation:live-pulse 1.8s ease-in-out infinite;
  }
  @keyframes live-pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.75)}
  }

  .moment-sound-btn{
    position:absolute;
    top:16px;
    right:16px;
    z-index:4;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(18,12,8,0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.22);
    color:#FAF3E6;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s, background .2s, border-color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .moment-sound-btn:hover{
    transform:scale(1.08);
    background:rgba(184,110,58,0.9);
    border-color:var(--gold);
  }
  .moment-sound-btn:active{transform:scale(.94)}
  .moment-sound-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
  [data-theme="dark"] .moment-sound-btn{
    color:var(--gold);
    border-color:rgba(212,175,55,0.35);
  }

  .moment-play-state{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
  }
  .moment-play-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    background:rgba(18,12,8,0.78);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1.5px solid var(--gold);
    color:#FAF3E6;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scale(0.85);
    transition:transform .25s ease;
  }
  .moment-play-state.show{
    opacity:1;
  }
  .moment-play-state.show .moment-play-icon{
    transform:scale(1);
  }
  .moment-play-icon svg{width:22px;height:22px;fill:currentColor}

  .moment-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:22px 18px 18px;
    z-index:3;
    color:#FAF3E6;
  }
  .moment-tag{
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:4px;
    display:block;
  }
  .moment-caption{
    font-family:var(--display);
    font-size:18px;
    font-weight:500;
    line-height:1.25;
    letter-spacing:-0.01em;
    color:#FAF3E6;
  }
  .moment-sub{
    font-size:12px;
    color:rgba(250,243,230,0.76);
    margin-top:4px;
    display:block;
  }

  .moments-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:14px;
  }
  .m-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--line);
    border:none;
    cursor:pointer;
    padding:0;
    transition:all .3s cubic-bezier(.2,.8,.2,1);
  }
  .m-dot.active{
    width:26px;
    border-radius:10px;
    background:var(--caramel);
  }
  [data-theme="dark"] .m-dot.active{
    background:var(--gold);
    box-shadow:0 0 10px rgba(212,175,55,0.45);
  }

  @media(max-width:768px){
    .top-moments{
      padding:20px 0 12px;
    }
    .moments-head{
      margin-bottom:12px;
    }
    .moments-nav-btns{
      display:none; /* Mobilde parmak kaydırma (touch swipe) ana yöntemdir */
    }
    .moments-track{
      padding:6px 20px 16px;
      scroll-padding-left:20px;
      scroll-padding-right:20px;
      gap:14px;
    }
    .moment-card{
      flex:0 0 calc(78vw - 12px);
      max-width:315px;
      height:clamp(390px, 62vh, 470px);
      scroll-snap-align:center;
      border-radius:20px;
    }
    .moment-caption{
      font-size:17px;
    }
  }

  /* ==================== REELS FULLSCREEN MODAL ==================== */
  .reels-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(6,4,2,0.96);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s cubic-bezier(.16,1,.3,1);
  }
  .reels-modal.open{
    opacity:1;
    pointer-events:auto;
  }
  .reels-wrapper{
    position:relative;
    width:100%;
    height:100dvh;
    max-width:430px;
    max-height:860px;
    border-radius:28px;
    overflow:hidden;
    background:#080503;
    box-shadow:0 30px 90px rgba(0,0,0,0.9), 0 0 0 1px rgba(212,175,55,0.3), 0 0 40px rgba(201,164,91,0.12);
    display:flex;
    flex-direction:column;
  }
  @media(max-width:600px){
    .reels-wrapper{
      max-width:100%;
      max-height:100dvh;
      height:100dvh;
      border-radius:0;
      box-shadow:none;
      border:none;
    }
  }

  .reels-feed{
    flex:1;
    width:100%;
    height:100%;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .reels-feed::-webkit-scrollbar{display:none}

  .reel-slide{
    width:100%;
    height:100%;
    flex:0 0 100%;
    position:relative;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    overflow:hidden;
    background:#110B07;
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
  }

  .reel-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#110B07;
  }

  .reel-gradient{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.72) 0%, transparent 22%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.92) 100%);
    pointer-events:none;
    z-index:2;
  }

  .reels-top-bar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    padding:16px 16px 20px;
    pointer-events:none;
  }
  .reels-top-bar > *{
    pointer-events:auto;
  }

  .reels-progress{
    display:flex;
    gap:5px;
    margin-bottom:12px;
  }
  .r-seg{
    flex:1;
    height:3px;
    border-radius:3px;
    background:rgba(255,255,255,0.28);
    overflow:hidden;
    position:relative;
  }
  .r-seg-fill{
    width:0%;
    height:100%;
    background:#FAF3E6;
    transition:width .2s ease;
  }
  .r-seg.active .r-seg-fill{
    width:100%;
    background:var(--gold, #C9A45B);
  }
  .r-seg.passed .r-seg-fill{
    width:100%;
    background:#FAF3E6;
  }

  .reels-head-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#FAF3E6;
  }
  .reels-brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .r-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1.5px solid var(--gold, #C9A45B);
    background:#160E09;
    padding:2px;
    object-fit:cover;
  }
  .r-meta{
    display:flex;
    flex-direction:column;
    line-height:1.2;
  }
  .r-title{
    font-family:var(--display);
    font-size:14px;
    font-weight:600;
    color:#FAF3E6;
    letter-spacing:-0.01em;
  }
  .r-sub{
    font-size:11px;
    color:rgba(250,243,230,0.72);
    letter-spacing:.02em;
  }

  .reels-actions-top{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .r-icon-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(18,12,8,0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#FAF3E6;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .r-icon-btn:hover{
    background:rgba(184,110,58,0.9);
    border-color:var(--gold);
    transform:scale(1.06);
  }
  .r-icon-btn:active{
    transform:scale(0.92);
  }
  .r-icon-btn svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
  }

  .reel-bottom-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    padding:34px 18px 22px;
    color:#FAF3E6;
    pointer-events:none;
  }
  .reel-bottom-info > *{
    pointer-events:auto;
  }

  .r-tag{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold, #C9A45B);
    margin-bottom:4px;
  }
  .r-caption{
    font-family:var(--display);
    font-size:20px;
    font-weight:500;
    line-height:1.25;
    letter-spacing:-0.01em;
    color:#FAF3E6;
    margin-bottom:6px;
  }
  .r-desc{
    font-size:13px;
    line-height:1.45;
    color:rgba(250,243,230,0.85);
    margin-bottom:14px;
    max-width:92%;
  }

  .r-cta-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .r-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 22px;
    border-radius:50px;
    background:linear-gradient(135deg, var(--caramel), var(--caramel-deep));
    color:#FAF3E6;
    border:1px solid var(--gold);
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
    text-decoration:none;
  }
  .r-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(184,110,58,0.55);
  }
  .r-btn-primary:active{transform:scale(.97)}

  .r-btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:11px 18px;
    border-radius:50px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#FAF3E6;
    border:1px solid rgba(255,255,255,0.25);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:background .2s, transform .2s;
    text-decoration:none;
  }
  .r-btn-ghost:hover{
    background:rgba(255,255,255,0.24);
    transform:translateY(-2px);
  }

  .r-swipe-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:11px;
    color:rgba(250,243,230,0.65);
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-top:6px;
    animation:bounce-hint 2s ease-in-out infinite;
  }
  .r-swipe-hint svg{
    width:14px;
    height:14px;
    stroke-width:2.2;
  }
  @keyframes bounce-hint{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
  }

  /* Çift dokunuş kalp efekti */
  .reel-like-effect{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:72px;
    color:var(--gold, #C9A45B);
    text-shadow:0 6px 30px rgba(0,0,0,0.7);
    pointer-events:none;
    z-index:25;
  }
  .reel-like-effect.animate{
    animation:heart-pop .8s cubic-bezier(.17,.89,.32,1.35) forwards;
  }
  @keyframes heart-pop{
    0%{transform:translate(-50%,-50%) scale(0);opacity:0}
    35%{transform:translate(-50%,-50%) scale(1.4);opacity:1}
    70%{transform:translate(-50%,-50%) scale(1.1);opacity:0.9}
    100%{transform:translate(-50%,-85%) scale(0.75);opacity:0}
  }

  /* Masaüstü yan navigasyon tuşları */
  .reels-desk-nav{
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:10;
  }
  .r-desk-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(18,12,8,0.78);
    backdrop-filter:blur(12px);
    border:1px solid rgba(212,175,55,0.4);
    color:var(--gold, #C9A45B);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .25s ease;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
  }
  .r-desk-btn:hover{
    background:var(--gold);
    color:#0A0604;
    transform:scale(1.1);
  }
  .r-desk-btn:active{transform:scale(.92)}
  .r-desk-btn svg{width:20px;height:20px;stroke-width:2.2}
  @media(max-width:600px){
    .reels-desk-nav{display:none!important}
  }

  /* ==================== BEDAVA İÇECEK / ÇARKIFELEK ==================== */
  /* --- Banner --- */
  .freebie-banner{
    display:flex;justify-content:center;
    padding:22px 20px 20px;
    position:relative;z-index:6;
    background:var(--paper);
    border-bottom:1px solid var(--line-soft);
  }
  .freebie-btn{
    position:relative;z-index:7;
    display:inline-flex;align-items:center;gap:12px;
    -webkit-touch-callout:none;touch-action:manipulation;
    font-family:var(--display);font-style:italic;font-weight:500;
    font-size:clamp(16px,2.2vw,21px);letter-spacing:.005em;
    color:var(--paper);
    background:linear-gradient(135deg,var(--caramel) 0%,var(--caramel-deep) 100%);
    padding:16px 38px;border-radius:50px;
    border:1px solid var(--gold);cursor:pointer;
    box-shadow:0 10px 34px -10px rgba(184,110,58,.55),0 0 0 0 rgba(201,164,91,.5);
    animation:freebie-pulse 2.6s ease-in-out infinite;
    overflow:hidden;transition:transform .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .freebie-btn:hover{transform:translateY(-3px)}
  .freebie-btn:active{transform:scale(.97)}
  .freebie-btn .gift{
    font-style:normal;font-size:1.1em;display:inline-block;
    animation:gift-wobble 2.6s ease-in-out infinite;
  }
  /* Işıltı süpürme efekti */
  .freebie-btn::before{
    content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
    transform:skewX(-18deg);
    animation:freebie-shine 3.4s ease-in-out infinite;
    pointer-events:none;
  }
  [data-theme="dark"] .freebie-btn{
    color:#0A0604;
    background:linear-gradient(135deg,var(--gold) 0%,var(--caramel-deep) 100%);
    border-color:var(--gold);
    box-shadow:0 10px 34px -10px rgba(212,175,55,.5),0 0 22px rgba(212,175,55,.18);
  }
  @keyframes freebie-pulse{
    0%,100%{box-shadow:0 10px 30px -12px rgba(184,110,58,.5),0 0 0 0 rgba(201,164,91,.45)}
    50%{box-shadow:0 14px 40px -10px rgba(184,110,58,.6),0 0 0 12px rgba(201,164,91,0)}
  }
  @keyframes freebie-shine{
    0%{left:-60%}
    45%,100%{left:130%}
  }
  @keyframes gift-wobble{
    0%,88%,100%{transform:rotate(0)}
    91%{transform:rotate(-16deg)}
    94%{transform:rotate(14deg)}
    97%{transform:rotate(-8deg)}
  }

  /* --- Popup Overlay --- */
  .wheel-overlay{
    position:fixed;inset:0;
    background:rgba(12,8,5,0.86);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    z-index:150;
    display:flex;align-items:center;justify-content:center;
    padding:28px 18px;
    opacity:0;pointer-events:none;
    transition:opacity .38s ease;
  }
  .wheel-overlay.open{opacity:1;pointer-events:auto}
  .wheel-card{
    position:relative;
    background:var(--paper);
    border-radius:22px;
    width:100%;max-width:460px;
    max-height:92vh;overflow-y:auto;
    padding:44px 30px 34px;
    text-align:center;
    box-shadow:0 40px 90px -20px rgba(0,0,0,0.6);
    transform:translateY(28px) scale(.95);
    transition:transform .5s cubic-bezier(0.16,1,0.3,1);
    border:1px solid var(--line);
  }
  [data-theme="dark"] .wheel-card{
    background:var(--milk);
    border:1px solid rgba(212,175,55,0.2);
  }
  .wheel-overlay.open .wheel-card{transform:none}
  .wheel-card::-webkit-scrollbar{width:0}

  .wheel-close{
    position:absolute;top:14px;right:14px;
    width:42px;height:42px;
    background:rgba(31,20,14,0.08);
    border:none;border-radius:50%;cursor:pointer;z-index:4;
    display:flex;align-items:center;justify-content:center;
    color:var(--espresso);
    transition:background .2s,transform .35s;
  }
  .wheel-close:hover{background:rgba(31,20,14,0.18);transform:rotate(90deg)}
  [data-theme="dark"] .wheel-close{background:rgba(228,196,104,0.14);color:var(--caramel)}
  [data-theme="dark"] .wheel-close:hover{background:rgba(228,196,104,0.24)}
  .wheel-close svg{width:18px;height:18px;stroke-width:2}

  .wheel-eyebrow{
    font-family:var(--body);font-size:11px;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--caramel);margin-bottom:8px;
  }
  .wheel-title{
    font-family:var(--display);font-weight:400;
    font-size:clamp(30px,7vw,46px);line-height:.98;
    letter-spacing:-.03em;color:var(--espresso);margin-bottom:6px;
  }
  .wheel-title em{font-style:italic;color:var(--caramel-deep)}
  [data-theme="dark"] .wheel-title em{color:var(--gold)}
  .wheel-sub{
    font-family:var(--body);font-size:13.5px;
    color:var(--text-dim);margin-bottom:22px;
  }

  /* --- Çark --- */
  .wheel-stage{
    position:relative;width:100%;
    max-width:340px;margin:0 auto 8px;
    aspect-ratio:1/1;
  }
  .wheel-pointer{
    position:absolute;top:-6px;left:50%;
    transform:translateX(-50%);z-index:3;
    width:0;height:0;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:26px solid var(--caramel-deep);
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
  }
  [data-theme="dark"] .wheel-pointer{border-top-color:var(--gold)}
  #freebieWheel{
    width:100%;height:100%;
    border-radius:50%;
    box-shadow:0 18px 50px -14px rgba(0,0,0,.45),
               inset 0 0 0 6px rgba(201,164,91,.35);
  }
  .wheel-spin-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    margin-top:14px;
    font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--paper);background:var(--espresso);
    padding:14px 40px;border:none;border-radius:50px;cursor:pointer;
    transition:transform .2s,background .3s,opacity .3s;
  }
  .wheel-spin-btn:hover{transform:translateY(-2px)}
  .wheel-spin-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  [data-theme="dark"] .wheel-spin-btn{background:var(--caramel);color:#0A0604}
  [data-theme="dark"] .wheel-spin-btn:hover{background:var(--gold)}

  /* --- Sonuç --- */
  .wheel-result{
    min-height:26px;margin-top:16px;
    font-family:var(--display);font-style:italic;
    font-size:clamp(19px,4.5vw,26px);
    color:var(--caramel-deep);
    opacity:0;transform:translateY(8px);
    transition:opacity .4s,transform .4s;
  }
  [data-theme="dark"] .wheel-result{color:var(--gold)}
  .wheel-result.show{opacity:1;transform:none}

  /* --- Konfeti --- */
  #confettiCanvas{
    position:fixed;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:200;
  }

  /* --- Kazanma ekranı (Aşama 2) --- */
  .win-eyebrow{
    font-family:var(--body);font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--caramel);margin-bottom:14px;
    animation:win-pop .5s ease both;
  }
  .win-visual{
    width:clamp(120px,38vw,168px);height:clamp(120px,38vw,168px);
    margin:0 auto 14px;border-radius:50%;
    overflow:hidden;position:relative;
    border:3px solid var(--gold);
    box-shadow:0 14px 40px -10px rgba(0,0,0,.5),0 0 0 8px rgba(201,164,91,.12);
    animation:win-grow .6s cubic-bezier(.17,.9,.4,1.3) both;
  }
  .win-visual img{width:100%;height:100%;object-fit:cover;display:block}
  .win-name{
    font-family:var(--display);font-weight:400;
    font-size:clamp(30px,8vw,50px);line-height:1;
    letter-spacing:-.03em;color:var(--espresso);
    margin-bottom:6px;
    animation:win-pop .55s ease .12s both;
  }
  [data-theme="dark"] .win-name{color:var(--crema)}
  @keyframes win-grow{
    0%{transform:scale(.2) rotate(-18deg);opacity:0}
    100%{transform:scale(1) rotate(0);opacity:1}
  }
  @keyframes win-pop{
    0%{transform:translateY(12px) scale(.9);opacity:0}
    100%{transform:none;opacity:1}
  }

  /* --- Kullanıcı adı formu --- */
  .win-form{margin-top:18px}
  .win-form-label{
    display:block;font-family:var(--body);font-size:13.5px;
    color:var(--text-muted);margin-bottom:10px;
  }
  .win-form-row{display:flex;gap:8px;max-width:400px;margin:0 auto}
  .win-input-wrap{
    flex:1;display:flex;align-items:center;
    border:1px solid var(--line);border-radius:12px;
    background:var(--price-box-bg-strong);
    padding-left:14px;transition:border-color .2s;
    overflow:hidden;
  }
  .win-input-wrap:focus-within{border-color:var(--caramel)}
  [data-theme="dark"] .win-input-wrap{background:var(--milk)}
  .win-at{
    font-family:var(--body);font-size:15px;font-weight:600;
    color:var(--caramel);flex-shrink:0;user-select:none;
  }
  .win-input{
    flex:1;font-family:var(--body);font-size:15px;
    padding:13px 12px 13px 2px;border:none;background:transparent;
    color:var(--espresso);outline:none;min-width:0;
  }
  [data-theme="dark"] .win-input{color:var(--crema)}
  .win-submit{
    font-family:var(--body);font-weight:600;font-size:14px;
    padding:13px 24px;border:none;border-radius:12px;cursor:pointer;
    color:var(--paper);background:var(--espresso);
    transition:transform .2s,background .3s,opacity .3s;white-space:nowrap;
  }
  .win-submit:hover{transform:translateY(-2px)}
  .win-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
  [data-theme="dark"] .win-submit{background:var(--caramel);color:#0A0604}
  .win-form-err{
    color:#C0392B;font-family:var(--body);font-size:13px;margin-top:10px;
  }
  [data-theme="dark"] .win-form-err{color:#E9776B}

  /* --- Başarı ekranı --- */
  .win-done{margin-top:20px;text-align:center;animation:win-pop .5s ease both}
  .win-done-check{
    width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
    background:var(--caramel);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:34px;font-weight:700;
    box-shadow:0 10px 30px -8px rgba(184,110,58,.5);
  }
  [data-theme="dark"] .win-done-check{background:var(--gold);color:#0A0604}
  .win-done-title{
    font-family:var(--display);font-size:clamp(24px,6vw,34px);
    color:var(--espresso);margin-bottom:8px;
  }
  [data-theme="dark"] .win-done-title{color:var(--crema)}
  .win-done-text{
    font-family:var(--body);font-size:14px;line-height:1.6;
    color:var(--text-muted);max-width:340px;margin:0 auto;
  }

  /* --- Bilgi kutusu (TikTok) --- */
  .wheel-info{
    margin-top:22px;
    background:var(--price-box-bg);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px 22px;
  }
  .wheel-info-head{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--body);font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--caramel);margin-bottom:10px;
  }
  .wheel-info-head svg{width:15px;height:15px;fill:currentColor}
  .wheel-info p{
    font-family:var(--body);font-size:14px;line-height:1.6;
    color:var(--text-muted);margin-bottom:12px;
  }
  .wheel-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .wheel-tag{
    font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:.02em;
    padding:8px 20px;border-radius:50px;
    border:1px solid var(--gold);color:var(--caramel-deep);
    background:var(--hover-surface-soft);
    text-decoration:none;transition:background .2s,transform .2s;
  }
  a.wheel-tag{cursor:pointer}
  a.wheel-tag:hover{background:var(--caramel);color:var(--paper);transform:translateY(-2px)}
  [data-theme="dark"] .wheel-tag{color:var(--gold)}
  [data-theme="dark"] a.wheel-tag:hover{background:var(--gold);color:#0A0604}

  @media(max-width:520px){
    .wheel-card{padding:40px 20px 28px}
    .wheel-stage{max-width:280px}
    .wheel-info{padding:16px 16px}
  }


  /* ═══════════════════════════════════════════════════════════════
     PANTEON — imza içeceklerinin 3B döner vitrini
     İsimler mitolojiden geliyor (Afrodit, Eros, Helios, Poseidon, Pan);
     bu yüzden ürünler bir ızgarada değil, dönen bir kaide üzerinde durur.
     Öndeki içecek öne çıkar, arkadakiler karanlığa çekilir.
     ═══════════════════════════════════════════════════════════════ */

  .panteon{
    position:relative;
    height:clamp(400px, 56vw, 560px);
    margin:0 auto 8px;
    perspective:1500px;
    perspective-origin:50% 42%;
    touch-action:pan-y;              /* dikey kaydırma sayfaya kalsın */
    cursor:grab;
    user-select:none; -webkit-user-select:none;
  }
  .panteon.tutuluyor{ cursor:grabbing }

  /* Kaide: altta yumuşak elips — 3B'yi inandırıcı kılan gölge */
  .panteon::after{
    content:'';
    position:absolute; left:50%; bottom:clamp(38px,7vw,64px);
    width:min(74%, 620px); height:clamp(40px,7vw,70px);
    transform:translateX(-50%) rotateX(74deg);
    background:radial-gradient(ellipse at center,
      rgba(70,42,22,.30) 0%, rgba(70,42,22,.12) 45%, transparent 72%);
    filter:blur(9px);
    pointer-events:none;
  }
  [data-theme="dark"] .panteon::after{
    background:radial-gradient(ellipse at center,
      rgba(0,0,0,.62) 0%, rgba(0,0,0,.26) 45%, transparent 72%);
  }

  .panteon-halka{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    will-change:transform;
  }

  /* Her içecek bir "sunak" */
  .panteon-kart{
    position:absolute; top:50%; left:50%;
    width:var(--kart-g, 210px);
    margin-left:calc(var(--kart-g, 210px) / -2);
    margin-top:calc(var(--kart-y, 300px) / -2);
    height:var(--kart-y, 300px);
    transform-style:preserve-3d;
    backface-visibility:hidden;
    cursor:pointer;
    transition:filter .45s ease;
  }
  .panteon-gorsel{
    position:relative;
    width:100%; aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    background:var(--sig-card-bg, #17100a);
    box-shadow:0 24px 48px -22px rgba(30,16,6,.75),
               0 0 0 1px rgba(201,164,91,.22) inset;
  }
  .panteon-gorsel img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.02);
    transition:transform .6s cubic-bezier(.22,1,.36,1);
  }
  .panteon-kart.on .panteon-gorsel img{ transform:scale(1.08) }

  /* Öndeki içeceğin altın halkası */
  .panteon-gorsel::after{
    content:''; position:absolute; inset:-3px;
    border-radius:50%;
    border:1.5px solid rgba(201,164,91,0);
    transition:border-color .5s ease, box-shadow .5s ease;
    pointer-events:none;
  }
  .panteon-kart.on .panteon-gorsel::after{
    border-color:rgba(201,164,91,.85);
    box-shadow:0 0 26px -4px rgba(201,164,91,.55);
  }

  .panteon-ad{
    margin-top:16px; text-align:center;
    font-family:var(--display, Georgia, serif);
    font-size:clamp(15px,1.5vw,18px);
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--espresso);
    opacity:.5; transition:opacity .45s ease, color .45s ease;
    white-space:nowrap;
  }
  [data-theme="dark"] .panteon-ad{ color:var(--crema,#F4E8D4) }
  .panteon-kart.on .panteon-ad{ opacity:1; color:var(--caramel-deep) }
  [data-theme="dark"] .panteon-kart.on .panteon-ad{ color:var(--caramel,#C9A45B) }

  /* Ortadaki bilgi levhası */
  .panteon-levha{
    position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:min(92%, 520px); text-align:center;
    pointer-events:none;
  }
  .panteon-aroma{
    font-family:var(--body);
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:6px; min-height:16px;
  }
  .panteon-icerik{
    font-family:var(--body); font-size:13.5px; line-height:1.55;
    color:var(--text-dim); max-width:44ch; margin:0 auto 10px;
    min-height:2.6em;
  }
  .panteon-fiyat{
    font-family:var(--display); font-weight:600;
    font-size:clamp(22px,2.4vw,28px); letter-spacing:-.03em;
    color:var(--espresso); font-variant-numeric:tabular-nums;
  }
  [data-theme="dark"] .panteon-fiyat{ color:var(--crema,#F4E8D4) }
  .panteon-fiyat .cur{ font-size:.55em; color:var(--caramel-deep); margin-left:2px; vertical-align:.35em }

  /* Geçiş yumuşasın diye levha içeriği çapraz solar */
  .panteon-levha .sol{ animation:panteonSol .32s ease both }
  @keyframes panteonSol{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

  /* Sürükleme ipucu */
  .panteon-ipucu{
    position:absolute; left:50%; top:8px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px;
    font-family:var(--body); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--text-dim);
    opacity:.75; pointer-events:none;
    transition:opacity .4s ease;
  }
  .panteon.dokunuldu .panteon-ipucu{ opacity:0 }
  .panteon-ipucu span{ display:inline-block; animation:ipucuKay 2.4s ease-in-out infinite }
  @keyframes ipucuKay{ 0%,100%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }

  @media(max-width:900px){
    .panteon{ height:clamp(360px, 92vw, 460px); perspective:1100px }
    .panteon-ad{ font-size:13px; letter-spacing:.12em; margin-top:12px }
    .panteon-icerik{ font-size:12.5px; min-height:3.4em }
  }

  /* Hareket azaltma: dönme yok, sade ızgara */
  @media (prefers-reduced-motion: reduce){
    .panteon{ display:none }
    .sig-grid.panteon-gizli{ display:grid!important }
  }

/* ═══════════════════════════════════════════════════════════════════════
   ÇOK SAYFALI YAPI — giriş sayfası, vitrin, kapılar
   Tek sayfadan dört sayfaya geçtik. Buradaki her şey yeni yapıya ait;
   yukarıdaki eski stiller olduğu gibi duruyor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Koyu zemin ─────────────────────────────────────────────────────────
   Site artık yalnızca koyu temada. Hero bölümü ve body şeffaf; arkalarında
   sadece arka plan videosu var. Video yüklenmezse (veri tasarrufu açık,
   hareket azaltma tercihi, ağ hatası) altta tarayıcının beyazı kalıyordu
   ve krem rengi yazı okunmuyordu. Zemini videodan bağımsız sabitliyoruz.
   ────────────────────────────────────────────────────────────────────── */
html{ background-color:var(--paper, #070503) }
body{ background-color:var(--paper, #070503) }

/* ── Sayfa göstergesi: üst barda hangi sayfadasınız ────────────────────── */
nav.top ul li a.aktif{
  color:var(--caramel-deep);
}
nav.top ul li a.aktif::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:1.5px; background:var(--caramel-deep); border-radius:2px;
}
nav.top ul li a{ position:relative }
[data-theme="dark"] nav.top ul li a.aktif,
[data-theme="dark"] nav.top ul li a.aktif::after{ color:var(--caramel); background-color:var(--caramel) }
[data-theme="dark"] nav.top ul li a.aktif{ background:none }

/* ══════════════════════════════════════════════════════════════════════
   VİTRİN — sürekli akan 3B fotoğraf şeridi
   Kartlar katlanmış bir kurdele gibi dizilir; şerit yavaşça kayar,
   üzerine gelince durur ve o kart izleyiciye döner.
   ══════════════════════════════════════════════════════════════════════ */
.vitrin{
  position:relative;
  padding:clamp(56px,8vw,110px) 0 clamp(48px,7vw,90px);
  overflow:hidden;
  background:rgba(253,251,247,.86);
}
[data-theme="dark"] .vitrin{ background:rgba(20,13,8,.80) }

.vitrin-baslik{
  text-align:center; margin-bottom:clamp(30px,4vw,52px);
  padding:0 20px;
}
.vitrin-baslik .section-label{ justify-content:center; display:inline-flex }
.vitrin-baslik h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,5vw,58px); line-height:1.05; letter-spacing:-.03em;
  color:var(--espresso); margin:10px 0 12px;
}
[data-theme="dark"] .vitrin-baslik h2{ color:var(--crema) }
.vitrin-baslik h2 em{ font-style:italic; color:var(--caramel-deep) }
[data-theme="dark"] .vitrin-baslik h2 em{ color:var(--caramel) }
.vitrin-baslik p{
  font-family:var(--body); font-size:clamp(13.5px,1.5vw,16px); line-height:1.7;
  color:var(--text-dim); max-width:52ch; margin:0 auto;
}

/* Şeridin kendisi */
.vitrin-pencere{
  position:relative;
  perspective:1400px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.vitrin-serit{
  display:flex; gap:clamp(16px,2vw,30px);
  width:max-content;
  transform-style:preserve-3d;
  animation:vitrinKay var(--sure,70s) linear infinite;
  will-change:transform;
}
@keyframes vitrinKay{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.vitrin-pencere:hover .vitrin-serit,
.vitrin-serit:focus-within{ animation-play-state:paused }

/* Kurdele etkisi: kartlar dönüşümlü olarak içe ve dışa bakar */
.vitrin-kart{
  position:relative; flex:0 0 auto;
  width:clamp(178px,20vw,268px);
  aspect-ratio:3/4;
  border-radius:22px; overflow:hidden;
  background:var(--bean);
  transform-style:preserve-3d;
  transform:rotateY(-13deg) translateZ(-26px);
  transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
  box-shadow:0 22px 46px -26px rgba(30,16,6,.6);
  cursor:pointer;
  border:0; padding:0; display:block; text-align:left;
  color:inherit; font:inherit;
}
.vitrin-kart:nth-child(even){ transform:rotateY(13deg) translateZ(-26px) }
.vitrin-kart:hover,
.vitrin-kart:focus-visible{
  transform:rotateY(0deg) translateZ(64px) !important;
  box-shadow:0 40px 70px -30px rgba(30,16,6,.72);
  outline:none;
}
.vitrin-kart:focus-visible{ box-shadow:0 40px 70px -30px rgba(30,16,6,.72), 0 0 0 2.5px var(--caramel) }

.vitrin-kart img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04);
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .6s ease;
  filter:saturate(.94);
}
.vitrin-kart:hover img{ transform:scale(1.13); filter:saturate(1.06) }

/* Alt yazı: normalde sadece isim, üzerine gelince kategori de belirir */
.vitrin-yazi{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 15px;
  background:linear-gradient(transparent, rgba(18,10,5,.28) 32%, rgba(18,10,5,.88));
  pointer-events:none;
}
.vitrin-ad{
  font-family:var(--display); font-weight:500;
  font-size:clamp(14px,1.5vw,18px); line-height:1.25; letter-spacing:-.01em;
  color:#FBF6EE;
}
.vitrin-kat{
  font-family:var(--body); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(251,246,238,.62);
  margin-top:5px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .45s ease;
}
.vitrin-kart:hover .vitrin-kat,
.vitrin-kart:focus-visible .vitrin-kat{ max-height:20px; opacity:1 }

.vitrin-alt{
  text-align:center; margin-top:clamp(28px,4vw,46px);
}

@media(max-width:900px){
  .vitrin-serit{ animation-duration:var(--sure-mobil,52s) }
  .vitrin-kart{ width:clamp(150px,42vw,190px); border-radius:18px }
  /* Dokunmatikte "hover" takılı kalmasın: kurdele sabit dursun */
  .vitrin-kart{ transform:rotateY(-9deg) translateZ(-16px) }
  .vitrin-kart:nth-child(even){ transform:rotateY(9deg) translateZ(-16px) }
}
@media (prefers-reduced-motion: reduce){
  .vitrin-serit{ animation:none }
  .vitrin-pencere{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .vitrin-kart, .vitrin-kart:nth-child(even){ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════
   KAPILAR — üç sayfaya açılan büyük geçitler
   ══════════════════════════════════════════════════════════════════════ */
.kapilar{
  padding:clamp(56px,8vw,110px) 0 clamp(64px,9vw,120px);
  background:rgba(253,251,247,.90);
}
[data-theme="dark"] .kapilar{ background:rgba(20,13,8,.86) }

.kapi-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px);
  perspective:1200px;
}
.kapi{
  position:relative; display:block;
  aspect-ratio:4/5;
  border-radius:26px; overflow:hidden;
  text-decoration:none;
  background:var(--bean);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
  box-shadow:0 20px 44px -26px rgba(30,16,6,.55);
}
.kapi:hover, .kapi:focus-visible{
  transform:translateY(-8px) rotateX(3deg) scale(1.015);
  box-shadow:0 44px 78px -32px rgba(30,16,6,.66);
  outline:none;
}
.kapi:focus-visible{ box-shadow:0 44px 78px -32px rgba(30,16,6,.66), 0 0 0 2.5px var(--caramel) }

.kapi-gorsel{ position:absolute; inset:0 }
.kapi-gorsel img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  filter:saturate(.9) brightness(.82);
}
.kapi:hover .kapi-gorsel img{ transform:scale(1.14) }
.kapi-gorsel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 22%, rgba(18,10,5,.55) 62%, rgba(18,10,5,.92));
}

.kapi-govde{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(18px,2.4vw,30px);
  transform:translateZ(40px);
}
.kapi-kicker{
  font-family:var(--body); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(201,164,91,.95); margin-bottom:8px;
}
.kapi-ad{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(24px,3.2vw,40px); line-height:1; letter-spacing:-.02em;
  color:#FBF6EE; margin-bottom:9px;
}
.kapi-not{
  font-family:var(--body); font-size:12.5px; line-height:1.6;
  color:rgba(251,246,238,.72); margin-bottom:14px;
  max-width:30ch;
}
.kapi-ok{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:#FBF6EE;
}
.kapi-ok span{
  display:inline-block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.kapi:hover .kapi-ok span{ transform:translateX(7px) }

@media(max-width:900px){
  .kapi-grid{ grid-template-columns:1fr; gap:14px }
  .kapi{ aspect-ratio:16/9 }
  .kapi-not{ display:none }
  .kapi-govde{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════
   İÇ SAYFA BAŞLIĞI — menü, ziyaret, hikâye sayfalarının girişi
   ══════════════════════════════════════════════════════════════════════ */
.sayfa-bas{
  padding:clamp(96px,13vw,168px) 0 clamp(34px,5vw,60px);
  text-align:center;
}
.sayfa-bas h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(38px,7vw,86px); line-height:1; letter-spacing:-.035em;
  color:var(--espresso); margin:12px 0 16px;
}
[data-theme="dark"] .sayfa-bas h1{ color:var(--crema) }
.sayfa-bas h1 em{ font-style:italic; color:var(--caramel-deep) }
[data-theme="dark"] .sayfa-bas h1 em{ color:var(--caramel) }
.sayfa-bas p{
  font-family:var(--body); font-size:clamp(14px,1.6vw,17px); line-height:1.75;
  color:var(--text-dim); max-width:56ch; margin:0 auto;
}
.sayfa-bas .section-label{ display:inline-flex }

/* Geri dönüş bağlantısı */
.geri-satir{ padding:0 0 clamp(40px,6vw,80px); text-align:center }
.geri-satir a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim); text-decoration:none;
  padding:12px 22px; border-radius:999px;
  border:1px solid var(--line);
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.geri-satir a:hover{ color:var(--caramel-deep); border-color:var(--caramel) }
.geri-satir a span{ transition:transform .4s cubic-bezier(.22,1,.36,1) }
.geri-satir a:hover span{ transform:translateX(-5px) }