/* ============================================
   QrMenum - Global Styles
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Reserve space for scrollbar so layout width stays constant whether
       content scrolls or not. Prevents "content shifts left on scroll"
       artifacts on desktop browsers. */
    scrollbar-gutter: stable;
}

/* When loaded in an iframe (dashboard / settings preview), kill the native
   scrollbar entirely. Scrolling still works via wheel/touch; the layout
   width never changes so content cannot shift sideways. Flag is set from
   JS (preview-bridge.js) to avoid affecting direct browser visits.

   ÖNEMLİ: gerçek kaydırma konteyneri BODY'dir (overflow-y:auto), html değil.
   Bu yüzden body'nin scrollbar'ı da GİZLENMELİ — yoksa menü drawer'ı açılırken
   body{overflow:hidden} scroll-lock'u body scrollbar'ını kaldırır, viewport ~
   yarım-scrollbar genişler ve position:fixed footer (MENÜ butonu) yana kayar.
   scrollbar-gutter:stable iframe'de kapalı olduğundan burada telafi edilmez;
   tek doğru çözüm scrollbar'ı hiç göstermemek (html + body). */
html.in-iframe,
html.in-iframe body {
    scrollbar-gutter: auto;
    scrollbar-width: none;
}
html.in-iframe::-webkit-scrollbar,
html.in-iframe body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ============================================
   Hero / Homepage
   ============================================ */

.hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-xl) var(--space-md);
    padding-bottom: calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

/* Empty hero backdrop — used when the tenant has neither an outlet
   cover image nor a homepage media row. Without this rule the hero
   sits on the body's plain white/cream and the logo + buttons float
   on a blank canvas. The animated gradient uses the operator's brand
   colors so a freshly-set-up menu still feels designed, not empty. */
.hero--empty .hero__video-wrap {
    background: linear-gradient(
        135deg,
        var(--color-primary, #c8a97e) 0%,
        var(--color-secondary, #1a1a2e) 50%,
        var(--color-primary, #c8a97e) 100%
    );
    background-size: 200% 200%;
    animation: heroEmptyFlow 14s ease-in-out infinite;
}
@keyframes heroEmptyFlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--empty .hero__video-wrap { animation: none; }
}

.hero__video-wrap {
    position: fixed;
    inset: 0;
    /* Wrap TAM viewport'ta sabit durur — ASLA hareket etmez → altında beyaz
       açılmaz, video ekrandan taşmaz. Parallax/zoom yalnız içteki medyaya
       (.hero__video) uygulanır; overflow:hidden onu kırpar. own GPU layer. */
    z-index: 0;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* İşletme düzeyi Sayfa Arka Planı dolgusu (Vitrin + Zarif Liste) — tek renk /
   gradient. Sabit tam-ekran katman; hero__categories (z-index:1) üstünde akar.
   Aktifken varsayılan hero__video-wrap render edilmez → çakışma yok. Video
   seçeneği ayrı katman değildir; Medya'nın hero backdrop'unu kullanır. */
.hero__page-bg {
    position: fixed;
    inset: 0;               /* wrap sabit — parallax içteki fill'e uygulanır */
    z-index: 0;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.hero__page-bg-fill { position: absolute; inset: 0; transform-origin: center center; will-change: transform; }

.hero__logo {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--space-2xl);
    animation: fadeInDown 0.8s ease;
    background: var(--hero-glass-bg, #fef7e663);
    width: 100%;
    backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    border-radius: 12px;
    padding: 10px;
}

.hero__logo-img {
    max-width: 180px;
    max-height: 180px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero__logo-text {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

/* Outlet name caption — sits BELOW the logo block (not inside)
   so the brand mark and the outlet name read as separate layers.
   Color + text-shadow come from inline style on the wrapper element
   (set in home/index.php from per-outlet DB columns); the rule
   below only defines size/spacing/weight. */
.hero__outlet {
    margin-top: 18px;
    text-align: center;
    z-index: 99;
    /* Inherit text-shadow set on the wrapper inline style so both
       the name and the tagline pick up the operator's shadow choice. */
}

.hero__outlet-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: inherit;
}

.hero__outlet-tagline {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-top: 4px;
    text-shadow: inherit;
}

body.theme-light .hero__outlet-tagline {
    color: var(--color-text);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}

/* ── Logo altı slogan (migration 0091) ──────────────────────────────
   Font/boyut/renk/bg inline style ile gelir (Ayarlar > Tasarım). Buradaki
   kurallar yalnızca konum + okunabilirlik varsayılanları; inline değerler
   ezer. Typewriter modunda yanıp sönen caret eklenir. */
.hero__slogan {
    position: relative;
    margin-top: 12px;
    padding: 0 20px;
    text-align: center;
    z-index: 99;
}

/* Slogan varken: logo + (outlet) + slogan tek birim (.hero__head). Böylece
   .hero'nun space-around dağıtımı ikisini BİRLİKTE konumlar; logo↔slogan sıkı
   (margin), grup↔kartlar ferah. Eskiden slogan ayrı bir flex çocuğuydu →
   space-around onu logodan uzağa, kartlara bitişik itiyordu. */
.hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.hero--has-slogan .hero__logo { margin-bottom: var(--space-md); }   /* logo → slogan (grup içi) */
.hero--has-slogan .hero__slogan { margin-top: 0; }                  /* slogan logoya yaslı */
.hero--has-slogan .hero__head { margin-bottom: var(--space-2xl); }  /* grup → kartlar min. ferahlık */

/* Ana sayfa kartları gizli (hide_homepage_cards) — hero tek başına: logo+slogan
   tam-ekran hero'da dikey ORTALANIR (space-around yerine center), kart boşluğu
   için eklenen head alt-payı sıfırlanır. Arka plan (video/görsel) fixed:inset:0
   olduğu için tam ekran öne çıkar. Bu kural .hero--has-slogan'dan SONRA gelmeli
   (eşit özgüllük → kaynak sırası kazanır) ki head margin'i ezilsin. */
.hero--no-cards { justify-content: center; }
.hero--no-cards .hero__head { margin-bottom: 0; }

.hero__slogan-box {
    display: inline-block;
    max-width: 90%;
}

.hero__slogan-text {
    color: #ece3d2;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.hero__slogan-caret {
    display: inline-block;
    margin-left: 1px;
    color: #ece3d2;
    font-weight: 300;
    animation: heroSloganCaret 1s steps(1) infinite;
}

@keyframes heroSloganCaret {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Not: theme-light için koyu metin override'ı KALDIRILDI. Slogan her zaman
   hero medyası (koyu overlay) üzerinde durduğundan açık metin evrensel güvenli
   varsayılan; koyu metin isteyen operatör Ayarlar > Tasarım'dan rengi seçer
   (artık güvenilir kaydediliyor). Eski davranış açık temada koyu-üstüne-koyu
   soluk metne yol açıyordu. */

.hero__categories {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    animation: fadeInUp 0.8s ease 0.2s both;
}

/* ============================================
   Category Grid (Homepage)
   ============================================ */

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Odd-count centering — when the operator has 1, 3, 5, ... cards the
   trailing card otherwise pins itself to the left half and looks
   misaligned. This rule spans the last card across both columns and
   caps its width at "one column" so it visually matches its siblings
   but centers horizontally instead of left-justifying.
   :nth-child(odd):last-child matches only when the total count is
   odd — even counts hit the default 2-col grid as before. */
.category-grid > .category-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-md)) / 2);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    background: var(--card-glass-bg, var(--color-bg-glass));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    text-align: center;
    min-height: 110px;
}

.category-card:active {
    transform: scale(0.97);
    background: var(--color-bg-glass-strong);
}

.category-card__icon {
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    /* Drive `fill="currentColor"` paths via CSS color */
    color: var(--color-bg);
}
.category-card__icon img,
.category-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-bg);
}

.category-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-bg);
}

/* ============================================
   Category List (Homepage — yoğun, tek sütun)
   Tenant ayarı: businesses.homepage_layout = 'list'
   Grid'e alternatif. 10+ kategorili menülerde ekrana sığar.
   ============================================ */

.category-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.category-card--list {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    min-height: 64px;
    text-align: left;
}

/* List modunda icon küçülür — satıra dengeli oturur, başlık öne çıkar */
.category-card--list .category-card__icon {
    width: 32px;
    flex-shrink: 0;
}

.category-card--list .category-card__name {
    flex: 1;
    font-size: var(--text-base);
    letter-spacing: 0.05em;
    text-transform: none;
    text-align: left;
}

.category-card__chevron {
    flex-shrink: 0;
    color: var(--color-bg);
    opacity: 0.55;
}

.category-card--list:active .category-card__chevron {
    opacity: 0.85;
    transform: translateX(2px);
}

/* ============================================
   Page Content Area
   ============================================ */

.page-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    background: var(--color-bg);
    max-width: 1180px;
    margin: auto;
}

/* Menu landing — reuses .hero__video-wrap (fixed-position video layer)
   so the menu's product-group picker gets the same brand mood as the
   home page. .page-content's solid background would hide the fixed
   video; transparent on this surface lets the video show through.
   The card block is vertically centered within the available viewport
   space below the header. */
body.page-menu .page-content {
    background: transparent;
}
.menu-hero {
    /* Take the viewport below the sticky header. Padding-bottom clears
       the bottom-nav so the bottom row of cards isn't covered. */
    min-height: calc(100dvh - var(--header-height, 60px) - var(--nav-height, 64px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    padding-bottom: calc(var(--nav-height, 64px) + var(--space-xl) + var(--safe-bottom, 0px));
}
.menu-hero__cards {
    width: 100%;
    max-width: var(--max-width);
}

.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.page-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass-strong);
    transition: background var(--transition-fast);
}

.page-header__back:active {
    background: var(--color-bg-card-hover);
}

.page-header__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    flex: 1;
}

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

.search-modal,
.info-modal,
.lang-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.search-modal[hidden],
.info-modal[hidden],
.lang-modal[hidden] {
    display: none;
}

.search-modal__backdrop,
.info-modal__backdrop,
.lang-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.search-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    background: var(--color-bg-modal);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.info-modal__content,
.lang-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    max-height: 80vh;
    background: var(--color-bg-modal);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg);
    animation: slideUp 0.3s ease;
    overflow-y: auto;
}

.lang-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.lang-modal__header h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.info-modal__close,
.lang-modal__close {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.info-modal__logo {
    text-align: center;
    margin-bottom: var(--space-md);
}

.info-modal__logo img {
    max-width: 120px;
    margin: 0 auto;
}

.info-modal__business-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Language Modal */
.lang-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lang-modal__form {
    display: contents;
}

.lang-modal__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
}

.lang-modal__item:active {
    background: var(--color-bg-glass-strong);
}

.lang-modal__item--active {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-primary);
}

.lang-modal__flag {
    font-size: 1.5rem;
}

.lang-modal__name {
    flex: 1;
    font-weight: 500;
}

.lang-modal__check {
    color: var(--color-primary);
}

/* ============================================
   Search Modal Specifics
   ============================================ */

.search-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.search-modal__input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-modal__icon {
    position: absolute;
    left: var(--space-sm);
    width: 20px;
    height: 20px;
    opacity: 0.4;
}

.search-modal__input {
    width: 100%;
    padding: var(--space-md) var(--space-md);
    padding-left: 36px;
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--transition-fast);
}

.search-modal__input:focus {
    border-color: var(--color-primary);
}

.search-modal__input::placeholder {
    color: var(--color-text-muted);
}

.search-modal__clear {
    position: absolute;
    right: var(--space-sm);
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.search-modal__close {
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-sm);
    white-space: nowrap;
}

.search-modal__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ─── Search result row ──────────────────────────────────────────────
   Compact card-per-row list, mirrors the product-detail "similar
   products" list mode so customers see one consistent design
   language. Image slot is rendered only when the product actually
   has a cover; an empty placeholder reads as broken state. */
.search-result-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}
.search-result-card:active {
    background: var(--color-bg-card-hover);
}
body.theme-light .search-result-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.search-result-card__img {
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-glass-strong);
}
.search-result-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search-result-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.search-result-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    /* Wrap to 2 lines max so longer dish names ("Trüf Yağlı Parmesanlı
       Patates Tava") stay readable but never balloon the card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-result-card__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.search-result-card__price {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--color-text-muted);
    text-align: center;
}

.search-modal__empty[hidden] {
    display: none;
}

/* Search - Featured Products */
.search-featured {
    padding: var(--space-md);
}

.search-featured__title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-md);
}

.search-featured__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.search-featured__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    /* Hairline border defines each card so the text-only list (no image
       slot) reads as discrete tappable cards, not a loose run of text.
       --color-border is theme-aware: subtle on light, subtle on dark. */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-featured__item:active {
    background: var(--color-bg-glass);
}

.search-featured__img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-glass);
}

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

.search-featured__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-featured__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-featured__price {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 2px;
}

/* ============================================
   Powered By Badge
   ============================================ */

.powered-badge {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-md) calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

.powered-badge__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.powered-badge__link:hover,
.powered-badge__link:active {
    opacity: 0.8;
}

.powered-badge__logo {
    height: 20px;
    width: auto;
}

/* ============================================
   Light Mode Overrides
   ============================================ */

/* Hero overlay - lighter for light mode */
body.theme-light .hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Hero text needs dark color in light mode */
body.theme-light .hero__logo-text {
    color: var(--color-text);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

body.theme-light .hero__logo-img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Category cards - light glass */
body.theme-light .category-card {
    background: var(--card-glass-bg, rgba(217, 189, 150, 0.5));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

body.theme-light .category-card:active {
    background: rgba(255, 255, 255, 0.9);
}

/* Page header */
body.theme-light .page-header {
    background: rgba(245, 245, 245, 0.9);
}

body.theme-light .page-header__back {
    background: rgba(0, 0, 0, 0.05);
}

/* Product section titles */
body.theme-light .product-section__title {
    color: var(--color-primary-dark);
    background: var(--color-bg);
}

/* Product card borders */
body.theme-light .product-card + .product-card {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Search modal */
body.theme-light .search-modal__content {
    background: rgba(245, 245, 245, 0.98);
}

body.theme-light .search-modal__input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

/* Language modal */
body.theme-light .lang-modal__content {
    background: rgba(255, 255, 255, 0.98);
    color: #1a1a1a;
}

body.theme-light .lang-modal__item--active {
    background: rgba(0, 0, 0, 0.04);
}

/* Category tabs */
body.theme-light .category-tabs {
    background: var(--color-bg);
    border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .category-tab {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
}

body.theme-light .category-tab--active {
    background: var(--color-primary);
    color: #fff;
}

/* Product detail - back button on image */
body.theme-light .page-content [style*="background: rgba(0,0,0,0.5)"] {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #333;
}

/* Bottom nav icon colors for light footer */
body.theme-light .bottom-nav__icon {
    color: var(--color-footer-text, rgba(0, 0, 0, 0.5));
}

/* ============================================
   Desktop App Frame — tablet-feel column
   ============================================
   Activates ONLY on laptop/desktop (≥1100px). Real tablets (768-1099px)
   keep their native full-width feel — it's their natural habitat. On big
   monitors the menu stays in a centered ~800px "tablet-like" column with
   theme-tinted gradient edges. */
@media (min-width: 1100px) {
    body {
        background: linear-gradient(135deg,
            var(--color-footer-bg, #1a1a1a) 0%,
            var(--color-primary-dark, #8a6f47) 50%,
            var(--color-footer-bg, #1a1a1a) 100%);
        background-attachment: fixed;
        min-height: 100dvh;
    }

    /* Constrain ONLY the always-visible chrome — header, bottom nav, hero bg,
       and the content column. Menu panel + modals stay full-viewport so their
       backdrop scrim darkens everything behind (including the gradient edges). */
    .top-header,
    .bottom-nav-wrap,
    .hero__video-wrap,
    .hero__overlay {
        max-width: 800px;
        width: 100%;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    /* Menu panel drawer: stays full-viewport for proper scrim, but the
       sliding drawer content anchors to the frame's left edge. The drawer's
       inner element (usually .menu-panel__content) keeps its own width. */
    .menu-panel,
    .menu-panel-overlay,
    .search-modal,
    .info-modal,
    .lang-modal,
    .campaign-modal {
        /* no frame constraint — full viewport for backdrop */
    }

    /* Inner modal content blocks: center them with tablet width */
    .search-modal__content,
    .info-modal__content,
    .lang-modal__content,
    .campaign-modal__content {
        max-width: 800px !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Centered flow-layout column */
    .page-wrap {
        max-width: 800px;
        margin: 0 auto;
        background: var(--color-bg);
        min-height: 100dvh;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    }

    /* Light theme: softer gradient, no heavy shadow */
    body.theme-light {
        background: linear-gradient(135deg, #f5f5f0 0%, #e8e4d8 50%, #dbd6c5 100%);
        background-attachment: fixed;
    }
    body.theme-light .page-wrap {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.18);
    }
}

/* ============================================
   Desktop Mockup Stage (≥1280px)
   ============================================
   Turns the empty side stripes into a brand stage. The page-wrap
   becomes a "device" — rounded corners, generous shadow, floating
   margin — and a brand info card slides in on the left as a glass
   card with logo, today's hours, address with maps link, phone,
   and social icons. A fixed `.desktop-stage` div behind everything
   carries the tenant's cover image (with dark overlay) so the
   whole window feels like a marketing landing.

   Mobile/tablet (<1280px) ignore all of this — the .desktop-stage
   and .desktop-brand-card are display:none below the threshold.

   The 1280px threshold (vs 1100px for the existing tablet-feel
   column) is intentional: the brand card needs ~300px of breathing
   room and crowding it into 1100px produces a worse result than
   the gradient-only frame. */

/* Stage backdrop layer — hidden by default; revealed at 1280px.
   Inline style on the element supplies background-image. The dark
   overlay is applied as ::after on the same element. */
.desktop-stage {
    display: none;
}

@media (min-width: 1280px) {
    .desktop-stage {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* Default fallback when no cover image — gradient using
           tenant theme colors (matches the previous 1100px frame
           gradient so brandless tenants don't regress). */
        background-color: var(--color-footer-bg, #1a1a1a);
        background-image: linear-gradient(135deg,
            var(--color-footer-bg, #1a1a1a) 0%,
            var(--color-primary-dark, #8a6f47) 50%,
            var(--color-footer-bg, #1a1a1a) 100%);
    }
    /* Dark overlay on top of the cover image. Slightly blurred so
       busy food photos don't fight the foreground card legibility.
       Note: blur affects what's BEHIND ::after which is the stage's
       background-image — exactly what we want. */
    .desktop-stage::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(8, 10, 18, 0.62);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* The "device" — rounded card floating on the stage. */
    .page-wrap {
        position: relative;
        z-index: 2;
        max-width: 760px;
        margin: 32px auto;
        border-radius: 36px;
        overflow: hidden;
        min-height: calc(100dvh - 64px);
        box-shadow:
            0 30px 80px -10px rgba(0, 0, 0, 0.55),
            0 12px 32px -8px rgba(0, 0, 0, 0.35);
    }

    /* Pinned chrome elements follow the new 760px rounded width
       and respect the rounded clip. */
    .top-header,
    .bottom-nav-wrap,
    .hero__video-wrap,
    .hero__overlay {
        max-width: 760px;
    }
    .top-header {
        border-top-left-radius: 36px;
        border-top-right-radius: 36px;
    }
    .bottom-nav-wrap {
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }
}

/* Marka kartı + dbc-* stilleri ≥768 (tablet dahil) — de-v2 editoryal düzen
   tablette de marka kartını kullanır. Klasik masaüstünde kart <1280'de
   aşağıdaki guard (body:not(.de-v2)) ile gizli kalır → klasik tablet değişmez. */
@media (min-width: 768px) {
    /* ── Brand card (glass card) ─────────────────────────────── */
    .desktop-brand-card {
        position: fixed;
        left: max(32px, calc((100vw - 760px) / 2 - 360px));
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        z-index: 3;
        /* Glass card surface */
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        padding: 24px 22px;
        box-shadow:
            0 20px 60px -10px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
        font-family: var(--font-body, 'Inter'), sans-serif;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .desktop-brand-card::-webkit-scrollbar { width: 4px; }
    .desktop-brand-card::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 2px;
    }

    /* Logo — sits on a soft white tile so brand marks with a
       white stroke or transparent backgrounds stay readable on
       any cover. */
    .dbc-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 16px;
        box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
    }
    .dbc-logo img {
        max-width: 100%;
        max-height: 64px;
        width: auto;
        height: auto;
        display: block;
    }

    .dbc-brand-name {
        font-family: var(--font-heading, 'Playfair Display'), serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 20px;
        letter-spacing: -0.01em;
        color: #fff;
    }

    /* Section blocks — separated by a faint divider for hierarchy. */
    .dbc-block {
        margin: 0;
        padding: 14px 0;
        font-size: 13px;
        line-height: 1.5;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .dbc-block:first-of-type {
        border-top: none;
        padding-top: 0;
    }
    .dbc-block__label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 6px;
    }

    /* "Bugün" hours block — the most important info, gets a
       brand-colored accent stripe on the left. */
    .dbc-block--hours {
        position: relative;
        padding-left: 12px;
    }
    .dbc-block--hours::before {
        content: '';
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        background: var(--color-primary, #c8a97e);
        border-radius: 2px;
    }
    .dbc-block--hours:first-of-type {
        padding-left: 12px;
    }
    .dbc-block--hours:first-of-type::before {
        top: 0;
    }
    .dbc-hours {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .dbc-hours__day {
        font-weight: 600;
        font-size: 14px;
        color: #fff;
    }
    .dbc-hours__time {
        font-family: var(--font-body, 'Inter'), monospace;
        font-variant-numeric: tabular-nums;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.02em;
    }

    /* Address block. */
    .dbc-address-link,
    .dbc-phone-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.15s;
    }
    .dbc-address-link {
        display: block;
    }
    .dbc-address-text {
        display: block;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
    }
    .dbc-maps-cta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.10);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        transition: background 0.15s;
    }
    .dbc-address-link:hover .dbc-maps-cta {
        background: rgba(255, 255, 255, 0.18);
    }

    /* Phone block — call-to-action style. */
    .dbc-phone-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        color: #fff;
        transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .dbc-phone-link:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.22);
        transform: translateY(-1px);
    }
    .dbc-phone-link svg {
        opacity: 0.7;
    }

    /* Social icons row. */
    .dbc-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .dbc-social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.10);
        color: rgba(255, 255, 255, 0.92);
        transition: background 0.15s, transform 0.15s, color 0.15s;
    }
    .dbc-social-icon:hover {
        background: var(--color-primary, #c8a97e);
        color: #fff;
        transform: translateY(-2px);
    }
}

/* Hide the brand card markup below the desktop threshold — server
   always renders it; CSS toggles visibility for free. */
@media (max-width: 767px) {
    /* <768: hiçbir düzende masaüstü kartı yok (de-v2 de ≥768'de başlar). */
    .desktop-brand-card { display: none !important; }
    .desktop-stage { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    /* Klasik masaüstü kartı yalnız ≥1280; de-v2 editoryal (≥768) gösterir →
       yalnız klasiği (body:not) gizle. */
    body:not(.de-v2) .desktop-brand-card { display: none !important; }
    .desktop-stage { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Homepage "Vitrin" (showcase) düzeni — tam-genişlik foto/gradient/video
   kartlar. businesses.homepage_layout='showcase'. Kategori arka plan
   sistemini (image/gradient/video) bölüm bazında kullanır.
   ───────────────────────────────────────────────────────────────────── */
/* Masonry (CSS multicol): kartlar kendi en-boy oranında, boşluksuz paketlenir.
   Mobil tek sütun; tablet/PC 2 sütun (aşağıda). Oran, karta inline --sc-rm
   (mobil) / --sc-rt (tablet ops.) CSS değişkenleriyle gelir. */
.showcase-list { columns: 1; column-gap: 14px; padding: 2px; }
.showcase-card {
    position: relative; display: block; width: 100%;
    break-inside: avoid; margin-bottom: 14px;
    aspect-ratio: var(--sc-rm, 3 / 2);
    border-radius: 22px; overflow: hidden; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    -webkit-tap-highlight-color: transparent; transition: transform 120ms ease;
}
.showcase-card:active { transform: scale(0.985); }
.showcase-card__media { position: absolute; inset: 0; z-index: 0; }
.showcase-card__media img, .showcase-card__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card__media--brand { background: linear-gradient(135deg, var(--color-primary, #7c3aed), var(--color-secondary, #db2777)); }
.showcase-card__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.05) 100%);
}
.showcase-card__body { position: absolute; left: 20px; right: 64px; bottom: 12px; z-index: 2; }
.showcase-card__title {
    display: block; font-family: var(--font-display, inherit); font-weight: 800;
    font-size: 1.5rem; line-height: 1.05; letter-spacing: .3px; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5); overflow-wrap: anywhere;
}
.showcase-card__count {
    display: inline-block; margin-top: 8px; font-size: .7rem; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 2px 8px; border-radius: 999px;
}
.showcase-card__go {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; color: #fff;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
    /* Tablet/PC: 2 sütun masonry, içerik genişliğine yayılı. Kart tablet oranı
       (--sc-rt) verilmişse onu, yoksa mobil oranı (--sc-rm) kullanır. */
    .showcase-list { columns: 2; column-gap: 18px; }
    .showcase-card { margin-bottom: 18px; aspect-ratio: var(--sc-rt, var(--sc-rm, 3 / 2)); }
    .showcase-card__title { font-size: 1.9rem; }
    .showcase-card__body { left: 26px; right: 76px; bottom: 22px; }
}

/* Vitrin modunda hero backdrop yok → içerik üstten aksın ve ORTALANSIN.
   .hero__categories base max-width'i (telefon genişliği) showcase'te içerik
   genişliğine (1080px) çıkarılır; align-items:center ile ortalanır. */
.hero--showcase { min-height: auto; justify-content: flex-start; align-items: center; }
.hero--showcase .hero__categories {
    width: 100%;
    max-width: min(1080px, 100%);
    margin-top: var(--space-md);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Zarif Liste (editorial) — ikon karosu + başlık + yandan eriyen
   kapak fotoğrafı. Accent'ler tenant token'larından: ikon karosu
   --color-secondary, ikon --color-primary. Kart zemini sıcak krem.
   ============================================================ */
.editorial-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: min(600px, calc(100vw - 30px));
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 20px; /* dışa taşan ikon karosu için pay */
}
.editorial-card {
    /* --ed-card head.php'de :root'ta set edilir (editorial_card_bg ?: #f6eddc).
       Yerel tanım YOK — aksi halde global değeri gölgeler. */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 92px;
    border-radius: 22px;
    overflow: visible; /* ikon karosu karttan taşabilsin */
    background: var(--ed-card, #f6eddc);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 14px 30px rgba(0, 0, 0, .20);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.editorial-card:active { transform: scale(.99); }
/* Foto sağda; kart overflow:visible olduğu için foto kendi köşelerini yuvarlar+kırpar */
.editorial-card__photo { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; border-radius: 0 22px 22px 0; overflow: hidden; }
.editorial-card__photo picture,
.editorial-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--ed-card, #f6eddc) 6%,
        color-mix(in srgb, var(--ed-card, #f6eddc) 68%, transparent) 34%,
        transparent 72%);
}
.editorial-card__photo--brand {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ed-gradient, var(--color-primary, #c8a97e)), #000 42%), var(--ed-gradient, var(--color-primary, #c8a97e)));
}
.editorial-card__photo--brand::after { display: none; }
.editorial-card__icon {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin-left: -20px; /* karttan sola taşar (yüzen karo) */
    border-radius: 20px;
    background: var(--ed-icon-bg, var(--color-secondary, #1c1a17));
    color: var(--ed-icon-color, var(--color-primary, #c8a97e));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34), inset 0 0 0 1px color-mix(in srgb, var(--ed-icon-color, var(--color-primary, #c8a97e)) 22%, transparent);
}
/* İkon glyph — HER ikon türü (PNG/asset/yüklenen/SVG) tek-renk tint alır.
   Raster ikonlar mask ile boyanır (currentColor raster'ı boyayamaz), SVG'ler
   currentColor'a zorlanır. Böylece "İkon rengi" ayarı hepsinde çalışır. */
.editorial-card__glyph {
    display: block;
    width: 44px;
    height: 44px;
    background-color: var(--ed-icon-color, var(--color-primary, #c8a97e));
    -webkit-mask: var(--ed-glyph) center / contain no-repeat;
    mask: var(--ed-glyph) center / contain no-repeat;
}
.editorial-card__glyph--svg {
    background: none;
    color: var(--ed-icon-color, var(--color-primary, #c8a97e));
    display: flex;
    align-items: center;
    justify-content: center;
}
.editorial-card__glyph--svg svg { width: 44px; height: 44px; }
/* Gömülü renkli SVG'leri de accent'e çek (line ikonları 'none' korur) */
.editorial-card__glyph--svg svg [fill]:not([fill="none"]) { fill: currentColor; }
.editorial-card__glyph--svg svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.editorial-card__icon > svg { width: 44px; height: 44px; }
.editorial-card__body { position: relative; z-index: 3; padding-left: 16px; min-width: 0; flex: 1; }
.editorial-card__title {
    display: block;
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.24rem;
    line-height: 1.08;
    letter-spacing: .2px;
    color: var(--ed-title-color, #241f1a);
    overflow-wrap: break-word;
}
.editorial-card__count {
    display: inline-block;
    margin-top: 7px;
    padding-top: 5px;
    border-top: 2px solid var(--ed-count-color, var(--color-primary, #c8a97e));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ed-count-color, var(--color-primary, #c8a97e));
}
.editorial-card__chev {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
@media (min-width: 768px) {
    /* Tablet portre: tek sütun, biraz daha büyük kart. İkon karosu kart
       yüksekliğini doldurmasın diye 80px (kart 104px → üst/alt nefes payı). */
    .editorial-card { min-height: 104px; }
    .editorial-card__icon { width: 80px; height: 80px; }
    .editorial-card__title { font-size: 1.4rem; }
}
@media (min-width: 1024px) {
    /* Zarif Liste: masaüstü + yatay tablet iki sütun. Parent (.hero__categories)
       normalde telefon genişliğinde (--max-width) kısıtlı; showcase gibi burada
       genişletilir. Taşan ikon karosu için sol pay + sütun boşluğu; uzun başlık
       (ör. "Kahvaltı - Ekstralar") fotonun opak kısmının altına kaçmasın diye
       gövdeye sağ pay verilir → fotonun eriyen okunur alanında sarar. */
    .hero--editorial .hero__categories { max-width: min(1040px, 100%); margin-left: auto; margin-right: auto; }
    .editorial-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 38px;
        row-gap: 22px;
        max-width: min(1040px, calc(100vw - 40px));
        padding-left: 22px;
    }
    .editorial-card__photo { width: 48%; }
    .editorial-card__body { padding-right: 32%; }
    /* 2 sütunda gövde dar kalıyor → başlık daha küçük + orantılı; foto biraz
       daralıp gövdeye yer açtı → uzun Türkçe kelimeler kelime-ortası kırılmadan
       tek satıra sığar ("Başlangıçlar", "Zeytinyağlılar"). */
    .editorial-card__title { font-size: 1.15rem; }
}
/* editorial_hide_icon: ikon karosu hiç render edilmez → karttan taşan karo
   payına gerek yok; gövde kendi sol payıyla hizalanır (mobil + masaüstü). */
.editorial-list--no-icon { padding-left: 0; }
.editorial-list--no-icon .editorial-card__body { padding-left: 20px; }

/* ============================================================
   EDITORYAL MASAÜSTÜ — ÖNİZLEME (body.de-v2, ≥1280px)  [geçici]
   ------------------------------------------------------------
   Sinematik tam-ekran hero video + sol kimlik paneli (mevcut
   .desktop-brand-card) + sağ kategori indeksi (.dmenu-rail) +
   ortada odak. Koyu yönlü scrim her tenant videosunu normalize
   eder → koyu-cam paneller + beyaz metin evrensel okunur; aksan
   = --color-primary (tenant). Yalnız ?de=1 önizlemede eklenir;
   VARSAYILAN masaüstü hiç değişmez. Yön onaylanınca gerçek bir
   işletme ayarına bağlanacak. Kolay geri alınır: bu blok + partial
   + app.php'deki $deV2 kapısı.
   ============================================================ */

/* Ray varsayılan gizli — yalnız de-v2 (≥768) görünür. Frame <768'de
   display:contents ile "yok sayılır" → içindeki video mobil hero olarak
   normal davranır; bleed <768'de gizli. Böylece ?de=1 telefonda mobil
   düzeni bozmaz. */
.dmenu-rail { display: none; }
.hero__frame { display: contents; }
.hero__bleed { display: none; }
/* Video-üstü logo varsayılan gizli — yalnız de-v2 + 768–1199px'de görünür
   (aşağıdaki dar-tablet media bloğu). ≥1200'de logo sol kartta kalır. */
.dev2-hero-logo { display: none; }
/* Sağ-sütun logosu (de-v2 tablet 2-panel): varsayılan gizli — yalnız 768–1023'te
   görünür (marka kartı gizliyken logo sağ kartların üstüne biner). ≥1024'te logo
   sol kimlik panelinde, <768'de mobil klasik → burada gizli. */
.dev2-cards-logo { display: none; }
/* de-v2 orta medya paneli — varsayılan gizli; yalnız de-v2 ≥768'de görünür. */
.dev2-center { display: none; }

@media (min-width: 768px) {
    /* Tenant kapak backdrop'unu gizle — video sahnenin kendisi olacak. */
    body.de-v2 .desktop-stage { display: none; }

    /* de-v2 sahne TABANI daima marka-tonlu KOYU — hero medyası olmayan
       (hero--empty; ör. Vitrin/az-medya) düzenlerde bile cam paneller + kartlar
       okunur kalsın (yoksa açık-tema body sızıp sahneyi beyazlatıyordu). Hero
       videosu/kapağı varsa .hero__bleed bunun ÜSTÜNE gelir. Ayrıca boş-hero
       backdrop'unu (açık) gizle. */
    body.de-v2 {
        background: color-mix(in srgb, var(--color-primary, #c9a75c) 7%, #0c0f0e) !important;
        /* IMMERSIVE-OVERLAP kompozisyon değişkenleri (mockup onaylı): büyük merkez
           video + iki panelin videoya BİLİNÇLİ binmesi. Video-göreli konumlama →
           panellerin binme payı her genişlikte sabit, kompozisyon ortalı kalır. */
        --dv2-vw: clamp(430px, 39vw, 600px);   /* merkez video genişliği */
        --dv2-overlap: 58px;                    /* panellerin videoya binme payı */
    }
    body.de-v2 .hero--empty .hero__empty-bg,
    body.de-v2 .hero__page-bg { display: none !important; }

    /* Hero video/görsel → tam-ekran sinematik backdrop (760px clamp iptal). */
    body.de-v2 .hero__video-wrap,
    body.de-v2 .hero__overlay {
        max-width: none !important;
        width: 100vw !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        border-radius: 0 !important;
    }
    /* Yönlü koyu scrim: kenarlar koyu (panel okunurluğu), orta daha açık
       (video odağı), alt koyu (dock). */
    /* Ambient sahne: blurlu video tüm ekranı doldurur — üç bölüm de AYNI
       sahnede yüzer (blend). Yeterince görünür ki panellerin camı sahneyi
       yakalasın; yeterince koyu ki metin okunsun. */
    body.de-v2 .hero__bleed {
        display: block; position: absolute; inset: 0; z-index: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        filter: blur(40px) saturate(1.3) brightness(0.6);
        transform: scale(1.18);
        pointer-events: none;
    }
    /* Scrim: merkez berrak (çerçeveli hero), kenarlar + alt koyu (panel + dock
       okunurluğu) — radial; sahneyi tamamen karartmaz. */
    body.de-v2 .hero__overlay {
        z-index: 1;
        background:
            radial-gradient(125% 92% at 50% 46%, transparent 38%, rgba(6,8,13,.52) 100%),
            linear-gradient(180deg, rgba(6,8,13,.34) 0%, transparent 22%, transparent 64%, rgba(6,8,13,.72) 100%);
    }
    /* Klasik hero medyası (video-wrap) de-v2'de GİZLİ — orta medya artık
       desktop_center_media partial'ında (.dev2-center) server-side render edilir;
       böylece hero'nun bastırıldığı (Zarif/Vitrin, page_background dolgusu) düzenlerde
       de video/görsel KAYBOLMAZ. Eski JS-klon frame emekli. */
    body.de-v2 .hero__video-wrap { display: none !important; }

    /* ═══ ORTA MEDYA PANELİ (.dev2-center) — split sahnenin merkezi ═══
       Sol marka + ORTA büyük dikey video/görsel + sağ kategoriler. Video HER
       düzende daima görünür; yoksa marka gradyanı + logo. */
    body.de-v2 .dev2-center { display: block; }
    /* Ambient: medyanın bulanık, koyu, tam-ekran kopyası → sinematik zemin. */
    body.de-v2 .dev2-center__ambient {
        position: fixed; inset: 0; z-index: 0; pointer-events: none;
        background-size: cover; background-position: center;
        filter: blur(46px) saturate(1.25) brightness(0.5); transform: scale(1.18);
    }
    body.de-v2 .dev2-center__ambient::after {
        content: ""; position: absolute; inset: 0;
        background:
            radial-gradient(120% 90% at 50% 44%, transparent 34%, rgba(6, 8, 13, .5) 100%),
            linear-gradient(180deg, rgba(6, 8, 13, .4) 0%, transparent 22%, transparent 60%, rgba(6, 8, 13, .8) 100%);
    }
    /* Frame: büyük dikey sinematik kart — DAİMA merkez, DAİMA görünür. */
    body.de-v2 .dev2-center__frame {
        position: fixed; z-index: 2;
        top: calc(50% - 30px); left: 50%; transform: translate(-50%, -50%);
        /* IMMERSIVE: büyük merkez video (sahnenin kalbi). Alt kenar mask ile
           sahneye ERİR → sert dikdörtgen yok; paneller kenarlarına biner. */
        width: var(--dv2-vw);
        height: min(88dvh, 800px);   /* sayfa üst/alt boşluğunu azalt (video daha dolu) */
        border-radius: 30px; overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.34) 92%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.34) 92%, transparent 100%);
        /* Video/görsel yüklenene kadar (ya da yüklenemezse) çerçeve BOŞ KALMASIN:
           marka-tonlu koyu gradyan zemin daima altta durur. */
        background:
            radial-gradient(120% 90% at 50% 22%, color-mix(in srgb, var(--color-primary, #c9a75c) 26%, transparent), transparent 68%),
            linear-gradient(160deg, color-mix(in srgb, var(--color-primary, #c9a75c) 16%, #12151b), #0b0e13);
        border: 1px solid color-mix(in srgb, var(--color-primary, #c9a75c) 42%, rgba(255, 255, 255, 0.4));
        box-shadow:
            0 50px 100px -34px rgba(0, 0, 0, 0.9),
            0 0 90px -18px color-mix(in srgb, var(--color-primary, #c9a75c) 46%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    body.de-v2 .dev2-center__media {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* Medya yoksa: marka gradyanı + ortalı logo (temiz, soyut fallback). */
    body.de-v2 .dev2-center__frame--brand {
        display: flex; align-items: center; justify-content: center;
        background:
            radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--color-primary, #c9a75c) 34%, transparent), transparent 70%),
            linear-gradient(160deg, color-mix(in srgb, var(--color-primary, #c9a75c) 22%, #12151b), #0c0f14);
    }
    body.de-v2 .dev2-center__logo { max-width: 62%; max-height: 40%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5)); }

    /* Cihaz çerçevesini çöz + hero içeriğini gizle (marka + kategoriler artık
       sol panel + sağ ray'de). .hero'yu GİZLEME — fixed video-wrap çocuğu da
       giderdi; yalnız içerik çocuklarını gizle. */
    body.de-v2 .page-wrap {
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        /* KRİTİK (immersive): page-wrap taban z-index:1 bir stacking-context kurar;
           içindeki .hero__categories (z:3) bu bağlamda HAPSOLUR → merkez video
           (.dev2-center__frame, kök z:2) kartların ÜSTÜNDE kalır ("kartlar video
           arkasında"). page-wrap'ı videonun üstüne çıkar (z:3) → kartlar videoya
           BİNER (istenen). Marka kartı zaten kök z:4 (page-wrap dışında) → en üstte.
           de-v2 desktop-stage gizli olduğundan bu yükseltme klasik z-düzenini bozmaz. */
        z-index: 3;
    }
    body.de-v2 .hero__head,
    body.de-v2 .hero__logo,
    body.de-v2 .hero__outlet,
    /* Slogan yalnız HERO içindeyken gizlenir; sol marka kartındaki .dbc-slogan
       (.hero'nun DIŞINDA) görünür kalır → slogan de-v2'de kaybolmaz, kimlik
       panelinde logo/isim altında yaşar. (home/index.php ?de=1'de hero slogan'ı
       zaten render etmez; bu kural savunma amaçlı kapsamlı.) */
    body.de-v2 .hero .hero__slogan { display: none !important; }
    /* NOT: .hero__categories GİZLENMEZ → gerçek kategoriler TEK KAYNAK; aşağıda
       data-de-layout ailesine göre konumlanır (Kart/Liste rail, Zarif/Vitrin geniş). */

    /* ── Sol kimlik paneli — ORTAK taban; konum/yükseklik ailelere göre ──
       KONUM: kompozisyon ortalı bir banda sabitlenir (max ~1480px). Geniş
       ekranda paneller ekran kenarlarına dağılıp aralarında dev boşluk
       bırakmasın diye sol panel bandın SOL kenarına oturur:
       max(48px, 50% - 740px) → ≤1576px'de 48px kenar, üstünde ortalı-band. */
    body.de-v2 .desktop-brand-card {
        /* IMMERSIVE: sol panel videonun SOL kenarına --dv2-overlap kadar biner
           (right = video-göreli). Video üstünde (z-index) → panelin gölgesi video
           yüzeyine düşer = bilinçli float; ardındaki video cam blur'la yumuşar. */
        right: calc(50% + (var(--dv2-vw) / 2) - var(--dv2-overlap));
        left: auto;
        z-index: 4;
        /* OKUNURLUK (immersive kritik): KOYU-cam — beyaz %6 frost yalnız koyu
           videoda çalışıyordu; parlak videoda beyaz metin yıkanıyordu. Koyu tint
           arkasındaki neyse koyulaştırır → HER videoda (parlak dahil) okunur.
           Cam his blur ile korunur; aksan yeşili sol-kenar/ayraçlarda kalır. */
        background: linear-gradient(158deg, rgba(20, 25, 22, 0.60), rgba(11, 15, 13, 0.52)) !important;
        padding: 30px 26px;
        border-radius: 26px;
        display: flex;
        flex-direction: column;
        max-height: none;
    }
    body.de-v2 .desktop-brand-card .dbc-socials { margin-top: auto; margin-bottom: 0; }
    body.de-v2 .dbc-phone-link { white-space: nowrap; }
    /* LOGO — panel cam-arka planına SAYGI (--hero-glass-bg); statik beyaz karo YOK.
       Aurora'da şeffaf → logo doğrudan cam panelde; koyu logolu tenant'ta varsayılan
       cream cam karo okunur kılar. Boyut logo geometrisinden (partial inline). */
    body.de-v2 .dbc-logo { background: var(--hero-glass-bg, #fef7e663); box-shadow: none; }
    body.de-v2 .dbc-logo img { max-height: 76px; }
    /* ── Marka kartı — DAHA BÜTÜNLEŞİK / ŞIK ───────────────────────────
       Sorun: saat bloğu yeşil dikey şerit için 12px İÇERİ kaymış (ADRES/telefon
       flush-left) → sol kenarlar hizalanmıyor, tek başına şerit orantısız duruyor.
       Çözüm: TÜM bilgiler hizalı (girinti + şerit kaldırıldı); divider'lar tutarlı
       YUMUŞAK hairline + eşit dikey ritim; etiketler daha ince/ferah. Saatin önemi
       tipografiden gelir (kalın, iri, tabular). Bütün kart tek dilde okunur. */
    body.de-v2 .dbc-block { padding: 15px 0; border-top-color: rgba(255, 255, 255, 0.08); }
    body.de-v2 .dbc-block--hours { padding-left: 0; }
    body.de-v2 .dbc-block--hours::before { display: none; }
    body.de-v2 .dbc-block__label { color: rgba(255, 255, 255, 0.46); letter-spacing: 0.15em; margin-bottom: 8px; }
    body.de-v2 .dbc-hours__time { letter-spacing: 0.04em; }
    body.de-v2 .dbc-socials { padding-top: 16px; border-top-color: rgba(255, 255, 255, 0.08); }
    /* İnce marka dokunuşu — kategori kartlarındaki kısa yeşil accent diliyle
       BÜTÜNLEŞİK: saatin altında kısa marka-yeşili çizgi. HİZALI (içeriğin sol
       kenarından başlar, girinti YOK) → önceki orantısız şeridin yerine zarif,
       tutarlı bir vurgu. */
    body.de-v2 .dbc-block--hours .dbc-hours::after {
        content: '';
        display: block;
        width: 34px; height: 2px; margin-top: 11px;
        border-radius: 2px;
        background: var(--color-primary, #c8a97e);
    }
    /* Logo altı SLOGAN (dbc-slogan) — kimlik panelinde ZARİF tagline.
       Tenant'ın hero için seçtiği AÇIK CAM KUTU'yu koyu panelde bastır (kutu-
       içinde-kutu çirkin, estetik değil); ince italik serif + yumuşak ışık +
       harf aralığı → logonun altında zarif, sakin bir marka sözü. (Klasik hero
       kendi stilini korur; bu override yalnız de-v2 marka kartında.) */
    body.de-v2 .dbc-slogan { width: 100%; margin: 15px 0 4px; text-align: center; }
    body.de-v2 .dbc-slogan .hero__slogan { margin: 0; padding: 0; z-index: auto; }
    body.de-v2 .dbc-slogan .hero__slogan-box {
        display: block; max-width: 100%;
        background: none !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        padding: 0 !important; border-radius: 0 !important;
    }
    body.de-v2 .dbc-slogan .hero__slogan-text {
        font-family: var(--font-display, Georgia, 'Times New Roman', serif) !important;
        font-style: italic;
        font-size: 0.95rem !important;
        line-height: 1.55;
        letter-spacing: 0.015em;
        color: rgba(255, 255, 255, 0.62) !important;
        text-shadow: none;
    }

    /* Kategori sarıcı — ortak sıfırlama; konum ailelere göre aşağıda */
    body.de-v2 .hero__categories { max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 3; }

    /* Marka kartı YÜKSEKLİĞİ — 4 düzende de orta-yükseklik, dikey ortalı (split sahne). */
    body.de-v2 .desktop-brand-card {
        top: calc(50% - 30px); transform: translateY(-50%);
        width: clamp(280px, 22vw, 344px);
        height: min(600px, calc(100dvh - 190px));
    }

    /* ═══ SAĞ KATEGORİ PANELİ — 4 DÜZENDE DE sağda, kaydırılabilir (split sahne) ═══
       Kategori indeksi GERÇEK .hero__categories'ten (tek kaynak). Konum ortak;
       yalnız KART STİLİ homepage_layout'a göre değişir. */
    body.de-v2 .hero__categories {
        /* IMMERSIVE: sağ panel videonun SAĞ kenarına --dv2-overlap kadar biner
           (left = video-göreli). z-index:3 (aşağıda) → video üstünde, gölge düşürür. */
        position: fixed; left: calc(50% + (var(--dv2-vw) / 2) - var(--dv2-overlap)); right: auto;
        top: calc(50% - 30px); transform: translateY(-50%);
        /* KRİTİK: klasik .hero__categories 'fadeInUp' giriş animasyonu taşır
           (opacity 0→1, translateY 20px→0). CSS animasyonu transform'u ELE
           GEÇİRİR → yukarıdaki translateY(-50%) dikey ortalaması EZİLİR, panel
           ~yarı-yükseklik (≈300px) AŞAĞI düşer: kartlar alta kayar, son kart
           ekran dışına taşıp KESİLİR, video/marka bloğuyla hizası bozulur.
           (Marka kartında bu animasyon yok → o doğru ortalanıyordu; fark buydu.)
           de-v2'de giriş animasyonunu kapat → transform yalnız ortalamada kalır,
           panel marka kartıyla birebir aynı bandda ortalanır. */
        animation: none !important;
        width: clamp(300px, 26vw, 400px);
        height: min(600px, calc(100dvh - 190px));
        overflow-y: auto; overflow-x: hidden;
        display: flex; flex-direction: column;
        /* KART SAYISI SENARYOLARI: 'safe center' → kartlar panele SIĞIYORSA dikey
           ortalanır (marka kartıyla hizalı; 1-6 kart güzel durur); TAŞIYORSA üste
           yaslanıp (flex-start gibi) KAYDIRILIR → ilk kart tepede ERİŞİLEBİLİR,
           üstten/alttan kesilmez. Düz 'center' taşan içeriğin üstünü scroll ile
           erişilemez kılıyordu (ilk kart kalıcı kırpık) — asıl hata buydu. */
        justify-content: safe center;
        scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
        /* Kaydırma ipucu: üst/alt kenarda yumuşak solma → "devamı var". Kartlar
           sığıyorsa (ortalı, kenarda kart yok) görünmez; taşınca kenar kartlarını
           soldurur. Dikey maske yatay taşan ikon karolarını etkilemez. */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    }
    body.de-v2 .hero__categories::-webkit-scrollbar { width: 4px; }
    body.de-v2 .hero__categories::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 2px; }
    /* Tüm liste konteynerleri → tek-sütun dikey akış (sağ panel dar; kartlar mobil-
       first doğal biçiminde). Zarif/Vitrin'in ≥768 çok-sütun grid'i burada iptal. */
    body.de-v2 .category-grid,
    body.de-v2 .category-list,
    body.de-v2 .editorial-list,
    body.de-v2 .showcase-list {
        display: flex; flex-direction: column; gap: 12px;
        grid-template-columns: none; columns: auto; max-width: none; margin: 0;
        /* Kart bloğuna üst/alt iç boşluk: panelin solma maskesi (14/18px) BOŞ payı
           soldursun, kartı değil → ilk kart "üstünde içerik var" yanılsaması vermez,
           son kart nefes alır. Az kartta (ortalı) etkisiz; çok kartta üste-yaslı
           panelde ilk/son kart maskeden temiz kalır. */
        padding: 20px 0 22px;
    }

    /* ── Kart/Liste: koyu-cam kompakt kart (marka ikonu beyaz + serif ad) ── */
    body.de-v2[data-de-layout="grid"] .category-card,
    body.de-v2[data-de-layout="list"] .category-card {
        flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px;
        min-height: 78px; padding: 15px 17px;
        border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px;
        /* KOYU-cam (beyaz frost DEĞİL) → parlak videoda da beyaz metin+ikon okunur. */
        background: rgba(16, 20, 18, 0.52);
        -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.7); color: #fff;
        transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }
    body.de-v2[data-de-layout="grid"] .category-card { min-height: 92px; padding: 19px 18px; }
    body.de-v2[data-de-layout="grid"] .category-card:hover,
    body.de-v2[data-de-layout="list"] .category-card:hover {
        background: rgba(24, 29, 26, 0.62);
        border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent);
        box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.7), inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #c9a75c) 22%, transparent);
    }
    body.de-v2[data-de-layout="grid"] .category-card__icon,
    body.de-v2[data-de-layout="list"] .category-card__icon {
        width: 34px; height: 34px; flex: 0 0 auto; margin: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    body.de-v2[data-de-layout="grid"] .category-card__icon svg,
    body.de-v2[data-de-layout="grid"] .category-card__icon img,
    body.de-v2[data-de-layout="list"] .category-card__icon svg,
    body.de-v2[data-de-layout="list"] .category-card__icon img {
        width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1);
    }
    body.de-v2[data-de-layout="grid"] .category-card__name,
    body.de-v2[data-de-layout="list"] .category-card__name {
        flex: 1; min-width: 0; text-align: left; margin: 0;
        font-family: var(--font-display, 'Playfair Display'), serif;
        font-size: 18px; letter-spacing: 0.02em; line-height: 1.2; color: #fff;
    }
    body.de-v2[data-de-layout="list"] .category-card__chevron { color: rgba(255, 255, 255, 0.4); flex: 0 0 auto; }

    /* ── Zarif Liste + Vitrin: GERÇEK kart korunur (—ed-* renkleri / kapak foto),
       sağ panelde TEK SÜTUN. Klasik kartlar mobil-first (dar sütun) tasarlandığı
       için sağ panelde doğal, test edilmiş biçiminde oturur; yalnız oran/min-boy
       panel genişliğine göre ayarlanır. ── */
    /* ── Zarif Liste: ORİJİNAL yüzen-ikon estetiği KORUNUR — ikon karosu kartın
       sol kenarından dışarı taşar (referans görünüm). Dar sağ panelin
       overflow-x:hidden'ı bu taşmayı ve gölgeleri KESMESİN diye listeye sol
       iç-boşluk (padding-left) verilir → ikon panel kenarına yapışmaz/kesilmez;
       gölgeler panele göre kompakt (yatayda az taşan) tutulur; kart arası boşluk
       (gap) küçültülür. ── */
    body.de-v2[data-de-layout="editorial"] .editorial-list {
        padding-left: 30px;   /* taşan ikon + gölgesi için pay (kesilmeyi önler) */
        padding-right: 4px;   /* kartın sağ köşesi/gölgesi de kenara yapışmasın */
        gap: 9px;             /* daha derli toplu kolon */
    }
    body.de-v2[data-de-layout="editorial"] .editorial-card {
        min-height: 84px; border-radius: 18px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 12px 26px -12px rgba(0, 0, 0, .55);
    }
    body.de-v2[data-de-layout="editorial"] .editorial-card__icon {
        margin-left: -18px;   /* karttan sola taşan yüzen karo (orijinal görünüm) */
        width: 58px; height: 58px; border-radius: 16px;
        box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .5),
                    inset 0 0 0 1px color-mix(in srgb, var(--ed-icon-color, var(--color-primary, #c9a75c)) 22%, transparent);
    }
    body.de-v2[data-de-layout="editorial"] .editorial-card__glyph,
    body.de-v2[data-de-layout="editorial"] .editorial-card__glyph--svg svg,
    body.de-v2[data-de-layout="editorial"] .editorial-card__icon > svg { width: 31px; height: 31px; }
    /* Başlığa daha çok yer: taban ≥1024 kuralı body'ye padding-right:32% veriyordu
       → dar panelde uzun Türkçe kelime ("Zeytinyağlılar") sığmayıp 'r'yi tek başına
       alt satıra atıyordu (bariz hata). 24% + biraz küçük font → geniş serif tenant
       fontunda bile tek satır. text-wrap:pretty: yine de taşarsa yetim-harf (kısa
       son satır) bırakmaz. */
    body.de-v2[data-de-layout="editorial"] .editorial-card__body { padding-left: 15px; padding-right: 24%; }
    body.de-v2[data-de-layout="editorial"] .editorial-card__title { font-size: 1.05rem; letter-spacing: 0; text-wrap: pretty; }
    body.de-v2[data-de-layout="editorial"] .editorial-card__photo { width: 44%; }
    body.de-v2[data-de-layout="showcase"] .showcase-card {
        margin: 0; aspect-ratio: 16 / 10; min-height: 170px; break-inside: avoid;
    }

    /* ── Alt dock — koyu-cam ortalı pill ──────────────────────────────
       Beyaz kavisli SVG şeridi (.bottom-nav__shape) çok sırıtıyordu →
       gizle; nav satırını panellerle aynı dilde koyu-cam bir pill yap.
       Merkez menü düğmesi yükseltilmiş aksan daire; "MENU" etiketi kalkar
       (temiz ikon-yalnız), koyu bir halka ile pill'den ayrılır. */
    body.de-v2 .bottom-nav-wrap {
        width: 100% !important;   /* <1100'de klasik width:100% yok → şart, yoksa çöker */
        max-width: 384px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 22px;
        height: auto !important;
    }
    body.de-v2 .bottom-nav__shape { display: none; }
    /* Dock camı = panellerle AYNI beyaz-cam dil (tutarlılık); aksan yalnız
       merkez menü butonunda (kurumsal renk). */
    body.de-v2 .bottom-nav {
        max-width: none;
        height: 60px;
        padding: 0 22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        backdrop-filter: blur(22px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 22px 54px -16px rgba(0, 0, 0, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    body.de-v2 .bottom-nav__icon,
    body.de-v2 .bottom-nav__lang { color: rgba(255, 255, 255, 0.82); }
    body.de-v2 .bottom-nav__menu-label { display: none; }
    body.de-v2 .bottom-nav__menu-btn { bottom: 50px !important; }
    body.de-v2 .bottom-nav__menu-icon {
        width: 54px; height: 54px;
        box-shadow:
            0 10px 26px -8px color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent),
            0 0 0 4px rgba(10, 12, 18, 0.5);
    }

    /* ═══ Modallar (≥768) — yeni koyu-cam dile taşı ═══════════════════
       1) Token'ları modal KAPSAMINDA koyuya sabitle → tüm iç öğeler (kart,
          metin, kenarlık) açık-tema tenant'ta bile otomatik koyulaşır.
       2) Mobil bottom-sheet / tam-ekran → merkezî cam panel.
       3) Ortak backdrop (koyu+blur) + kapat düğmeleri beyaz. */
    body.de-v2 .search-modal,
    body.de-v2 .info-modal,
    body.de-v2 .campaign-modal,
    body.de-v2 .lang-modal,
    body.de-v2 .product-modal {
        /* ── MARKA-TÜREVLİ koyu-cam paleti — TEK kaynak ──────────────────
           Yüzey/kart/kenarlık/aksan tümü --color-primary'den color-mix ile
           türer → jenerik slate DEĞİL: Aurora yeşil-siyah, Kara Kedi altın-
           siyah. Böylece modal, tenant kurumsal rengini yansıtır ve de-v2
           sinematik-koyu sahnesiyle (blurlu video + koyu scrim) tutarlı olur.
           Metin 3 kademe açık mürekkep; aksan koyu zeminde okunur tona çekilir. */
        --dm-surface: color-mix(in srgb, var(--color-primary, #c9a75c) 8%, #0f1217);
        --dm-card:    color-mix(in srgb, var(--color-primary, #c9a75c) 14%, rgba(255, 255, 255, 0.05));
        --dm-card-hi: color-mix(in srgb, var(--color-primary, #c9a75c) 20%, rgba(255, 255, 255, 0.08));
        --dm-border:  color-mix(in srgb, var(--color-primary, #c9a75c) 24%, rgba(255, 255, 255, 0.10));
        --dm-hair:    rgba(255, 255, 255, 0.08);
        --dm-ink:     rgba(255, 255, 255, 0.96);
        --dm-ink-2:   rgba(255, 255, 255, 0.64);
        --dm-ink-3:   rgba(255, 255, 255, 0.42);
        --dm-accent:  color-mix(in srgb, var(--color-primary, #c9a75c) 82%, #fff);

        /* Global token'ları --dm-* diline eşle → token-tabanlı öğeler
           (search .sr-* tamamı) hiç ekstra kural gerekmeden markaya uyar. */
        --color-bg: var(--dm-surface);
        --color-bg-card: var(--dm-card);
        --color-bg-card-hover: var(--dm-card-hi);
        --color-bg-modal: var(--dm-surface);
        --color-bg-nav: var(--dm-surface);
        --color-bg-glass: rgba(255, 255, 255, 0.06);
        --color-bg-glass-strong: rgba(255, 255, 255, 0.14);
        --color-text: var(--dm-ink);
        --color-text-secondary: var(--dm-ink-2);
        --color-text-muted: var(--dm-ink-3);
        --color-border: var(--dm-border);
        --color-border-light: var(--dm-hair);
        --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
    }
    body.de-v2 .search-modal,
    body.de-v2 .info-modal,
    body.de-v2 .lang-modal { align-items: center; justify-content: center; }

    body.de-v2 .search-modal__backdrop,
    body.de-v2 .info-modal__backdrop,
    body.de-v2 .campaign-modal__backdrop,
    body.de-v2 .lang-modal__backdrop {
        background: rgba(6, 8, 13, 0.62);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* Ortak içerik paneli — merkezî koyu-cam kart. */
    body.de-v2 .search-modal__content,
    body.de-v2 .info-modal__sheet,
    body.de-v2 .lang-modal__content {
        position: relative;
        width: calc(100% - 48px);
        max-width: 440px;
        max-height: min(86vh, 760px);
        height: auto;
        margin: 0;
        border-radius: 24px;
        background: var(--dm-surface);
        -webkit-backdrop-filter: blur(30px) saturate(150%);
        backdrop-filter: blur(30px) saturate(150%);
        border: 1px solid var(--dm-border);
        box-shadow:
            0 44px 100px -30px rgba(0, 0, 0, 0.85),
            0 0 64px -22px color-mix(in srgb, var(--color-primary, #c9a75c) 30%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: var(--dm-ink);
        animation: none;
        display: flex; flex-direction: column;
        overflow: hidden;
    }
    /* Arama biraz daha geniş (sonuç kartları). */
    body.de-v2 .search-modal__content { max-width: 620px; }
    /* Kaydırılabilir iç gövdeler panel içinde scroll etsin. */
    body.de-v2 .info-modal__scroll,
    body.de-v2 .search-body { flex: 1; min-height: 0; overflow-y: auto; }
    body.de-v2 .info-modal__handle { display: none; }   /* masaüstünde sürükleme yok */

    /* Kapat düğmeleri + arama input — beyaz/koyu-cam. */
    body.de-v2 .search-modal__close,
    body.de-v2 .info-modal__close-btn,
    body.de-v2 .campaign-modal__close,
    body.de-v2 .lang-modal__close,
    body.de-v2 .lang-modal__header h3 { color: #fff; }
    /* Arama inputu — theme-light tenant'ta sızan beyaz zemini AÇIKÇA ez
       (yalnız color set etmek yetmiyordu → beyaz-üstü-beyaz). Sarmalayıcının
       (.search-modal__input-wrap) kendi zemini/kenarlığı YOK: input kendi
       koyu-cam yüzeyini taşır → çift halka olmaz. */
    body.de-v2 .search-modal__input {
        background: var(--dm-card);
        border: 1px solid var(--dm-border);
        color: var(--dm-ink);
    }
    body.de-v2 .search-modal__input:focus { border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent); }
    body.de-v2 .search-modal__input::placeholder { color: var(--dm-ink-3); }
    /* search .sr-* tamamı token-tabanlı → yukarıdaki token remap markaya uyarlar;
       ayrıca ez GEREKMEZ (eski !important slate override'ı marka tint'ini eziyordu). */

    /* ── info-modal — sabit-açık (cream) tasarımdan editoryal koyu-cam'a
       SİSTEMATİK yeniden derileme. Whitelist değil TAM kapsam: her yüzey,
       metin ve aksan --dm-* dilinden çözülür (yoksa beyaz kart / koyu-üstü-
       koyu etiket sızar — önceki "yüzeysel" sorun buydu). ── */

    /* (1) Veri kartları → marka-tonlu koyu cam */
    body.de-v2 .info-hours,
    body.de-v2 .info-address,
    body.de-v2 .info-phone,
    body.de-v2 .info-tk-card,
    body.de-v2 .info-wifi,
    body.de-v2 .info-survey-entry {
        background: var(--dm-card);
        border-color: var(--dm-border);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 34px -20px rgba(0, 0, 0, 0.7);
    }
    body.de-v2 .info-phone:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 42px -18px rgba(0, 0, 0, 0.8); }

    /* (2) "Not / hakkında" paneli — daha sakin brand-tint zemin */
    body.de-v2 .info-block--notice,
    body.de-v2 .info-block:not([class*="--"]) {
        background: color-mix(in srgb, var(--color-primary, #c9a75c) 6%, rgba(255, 255, 255, 0.03));
        border-color: var(--dm-border);
        box-shadow: 0 3px 22px -14px rgba(0, 0, 0, 0.7);
    }

    /* (3) WiFi iç hücreleri / QR / kopyala düğmesi + ayraçlar */
    body.de-v2 .info-wifi__cell,
    body.de-v2 .info-wifi__nopass,
    body.de-v2 .info-wifi__qr { background: rgba(255, 255, 255, 0.04); border-color: var(--dm-hair); }
    body.de-v2 .info-wifi__act { background: rgba(255, 255, 255, 0.06); border-color: var(--dm-border); color: var(--dm-accent); }
    body.de-v2 .info-wifi__qr img { background: #fff; }   /* QR taranabilirlik: beyaz kalmalı */
    body.de-v2 .info-hours__row { border-bottom-color: var(--dm-hair); }
    body.de-v2 .info-block__text--rich hr { border-top-color: var(--dm-hair); }

    /* (4) Birincil metin (başlık / isim / değer) → açık mürekkep */
    body.de-v2 .info-modal__brand-name,
    body.de-v2 .info-block__title,
    body.de-v2 .info-hours__day,
    body.de-v2 .info-address__label,
    body.de-v2 .info-phone__value,
    body.de-v2 .info-wifi__title,
    body.de-v2 .info-wifi__v,
    body.de-v2 .info-tk-card__value,
    body.de-v2 .info-survey-entry__title,
    body.de-v2 .info-block__text--rich h2,
    body.de-v2 .info-block__text--rich h3 { color: var(--dm-ink); }

    /* (5) İkincil metin (gövde / ipucu / mikro-etiket) → yumuşak açık */
    body.de-v2 .info-block__text,
    body.de-v2 .info-block__text--sm,
    body.de-v2 .info-address__text,
    body.de-v2 .info-block__text--rich,
    body.de-v2 .info-block__text--rich p,
    body.de-v2 .info-block__text--rich li,
    body.de-v2 .info-wifi__qr-hint,
    body.de-v2 .info-wifi__nopass,
    body.de-v2 .info-wifi__k,
    body.de-v2 .info-phone__label,
    body.de-v2 .info-tk-card__label,
    body.de-v2 .info-survey-entry__sub { color: var(--dm-ink-2); }

    /* (6) Aksan öğeleri — cream tasarımda koyu-kahveye karışıyordu; koyu
       zeminde okunur marka tonuna çek. */
    body.de-v2 .info-block__label,
    body.de-v2 .info-hours__time,
    body.de-v2 .info-address__link,
    body.de-v2 .info-address__icon,
    body.de-v2 .info-phone__chev,
    body.de-v2 .info-phone__icon,
    body.de-v2 .info-wifi__icon,
    body.de-v2 .info-wifi__qr-toggle,
    body.de-v2 .info-tk-card__icon,
    body.de-v2 .info-survey-entry__chev { color: var(--dm-accent); }

    /* (7) Kapat düğmesi zemini koyu-cam */
    body.de-v2 .info-modal__close-btn { background: rgba(255, 255, 255, 0.08); }
    body.de-v2 .info-modal__close-btn:hover { background: rgba(255, 255, 255, 0.14); }

    /* NOT: .info-pwa-entry + .info-survey-entry__icon + .info-social-card__icon
       zaten MARKA GRADYAN/renk taşır (koyu zeminde doğru) → dokunulmaz. */

    /* ── Dil modalı öğeleri — aynı --dm-* diliyle marka-tonlu koyu cam ── */
    body.de-v2 .lang-modal__item {
        background: var(--dm-card);
        border: 1px solid var(--dm-border);
        color: var(--dm-ink);
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    body.de-v2 .lang-modal__item:hover {
        background: var(--dm-card-hi);
        border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 50%, transparent);
    }
    body.de-v2 .lang-modal__item--active {
        background: color-mix(in srgb, var(--color-primary, #c9a75c) 20%, transparent);
        border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 58%, transparent);
        color: #fff;
    }
    body.de-v2 .lang-modal__check { color: var(--dm-accent); }
    body.de-v2 .lang-modal__name { color: var(--dm-ink); }
}

/* ── de-v2 TABLET / DAR MASAÜSTÜ (768–1023px) — IMMERSIVE (masaüstüyle AYNI kurgu) ─
   Eskiden ayrık 2-panel'di (video solda + kartlar sağda + marka gizli) → yeni
   immersive dile aykırı, "çok ayrık" duruyordu. Artık masaüstüyle aynı bütünlüklü
   sahne: info bloğu (marka kartı) SOL + video ARKADA (merkez, panellerin altında) +
   kartlar SAĞ, birbirine YAKIN. Tek fark: dar ekrana sığsın diye video + paneller
   küçülür (768'de bile 3'ü sığar). Marka kartı GERİ geldiği için logo orada →
   kartların üstündeki .dev2-cards-logo gizlenir. Taban immersive kuralları (frame
   merkez, brand right, cats left, page-wrap z:3) aynen geçerli; burada yalnız
   boyutlar küçülür. */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Video = GENİŞ backdrop (ortalı, geniş, panellerin ALTINDA dolgun zemin);
       paneller video-göreli DEĞİL, EKRAN KENARLARINDAN konumlanır → daha GENİŞ
       paneller + geniş video, birbirine yakın, FERAH. (Önceki dar 3-kolon 768'e
       sığsın diye her şeyi kısıyordu → "zorlama" görünüyordu.) */
    body.de-v2 { --dv2-vw: clamp(440px, 62vw, 620px); }
    body.de-v2 .desktop-brand-card {
        right: auto; left: clamp(28px, 4vw, 48px);
        width: clamp(286px, 35vw, 344px); padding: 26px 22px;
    }
    body.de-v2 .hero__categories {
        left: auto; right: clamp(28px, 4vw, 48px);
        width: clamp(296px, 37vw, 364px);
    }
    /* Logo marka kartında → üstteki over-cards logosu gizli. */
    body.de-v2 .dev2-cards-logo { display: none; }
}

/* (Kaldırıldı) Eski 768–1199 "logo video üstüne" bloğu — kategori-duyarlı
   yeni mimaride logo daima sol kimlik panelinde; over-video partial emekli. */