/* ==========================================================================
   DM Menü ana sayfa: Tasarım Dili v3 (2026-09-23)
   Yalnız ana sayfaya özgü bölümler: hero sahnesi (telefon + eğik kartlar +
   bildirim çipleri), gerçekler bandı, üç adım, işletme türleri, özellik
   bentosu, sipariş bandı ve mobil kayıt çubuğu.
   Belirteçler, kapsül başlık, düğmeler, serif başlıklar, tema kartları,
   fiyat kartları, SSS, blog kartları ve kapanış çağrısı site-v3.css'te
   (body.dm-v3; layouts/main ana sayfaya da ekler). Seçiciler
   body.dm-home-v3 ile başlar, iç sayfalara sızmaz.
   ========================================================================== */

/* ---------- Hero ---------- */
body.dm-home-v3 .hp-hero {
    position: relative;
    padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px);
    overflow: hidden;
    isolation: isolate;
}
body.dm-home-v3 .hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 60% at 78% 40%, color-mix(in srgb, #FF443E 13%, transparent), transparent 70%),
        radial-gradient(36% 44% at 94% 88%, color-mix(in srgb, #FFC955 20%, transparent), transparent 72%),
        radial-gradient(36% 40% at 6% 96%, color-mix(in srgb, #FF9046 10%, transparent), transparent 70%);
}
body.dm-home-v3 .hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 36px;
}

/* Telefon + iki eğik tema kartı + iki bildirim */
body.dm-home-v3 .hp-stage {
    position: relative;
    margin: 0;
    height: clamp(500px, 46vw, 640px);
}
body.dm-home-v3 .hp-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: clamp(230px, 19.5vw, 282px);
    aspect-ratio: 390 / 844;
    padding: 10px;
    border-radius: 46px;
    background: #121212;
    box-shadow: var(--hp-shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, .10);
    transform: translate(-50%, -50%);
}
body.dm-home-v3 .hp-phone::before {
    content: '';
    position: absolute;
    top: 19px;
    left: 50%;
    z-index: 2;
    width: 30%;
    height: 22px;
    border-radius: 999px;
    background: #121212;
    transform: translateX(-50%);
}
body.dm-home-v3 .hp-phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 37px;
    background: #0d0b0a;
}
body.dm-home-v3 .hp-phone-screen img,
body.dm-home-v3 .hp-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
body.dm-home-v3 .hp-card {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: clamp(176px, 15vw, 214px);
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border: 6px solid var(--hp-surface);
    border-radius: 32px;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
}
body.dm-home-v3 .hp-card-left { left: 0; transform: translateY(-44%) rotate(-8deg); }
body.dm-home-v3 .hp-card-right { right: 0; transform: translateY(-56%) rotate(8deg); }
body.dm-home-v3 .hp-chip {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--hp-line);
    border-radius: 18px;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    color: var(--hp-ink);
    font: 500 13px/1.3 var(--hp-sans);
    white-space: nowrap;
}
body.dm-home-v3 .hp-chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--hp-red-tint);
    color: var(--hp-red);
    font-size: 17px;
}
body.dm-home-v3 .hp-chip b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
body.dm-home-v3 .hp-chip small { display: block; color: var(--hp-muted); font: 500 11.5px/1.35 var(--hp-mono); letter-spacing: .02em; }
body.dm-home-v3 .hp-chip-order { left: 4%; bottom: 12%; }
body.dm-home-v3 .hp-chip-call { right: 2%; top: 10%; }

/* Hero girişi: sahne kurulur, sonra sipariş ve çağrı "düşer" (hikâye) */
@media (prefers-reduced-motion: no-preference) {
    /* dm F17 (PageSpeed): LCP adayları (başlık, telefon görseli) ilk karede GÖRÜNÜR — yalnız
       hafif yükselme; opaklık 0'dan başlayınca LCP animasyon sonuna kayıyordu */
    body.dm-home-v3 .hp-hero-copy > * { animation: hpRise .7s cubic-bezier(.16, 1, .3, 1) both; }
    body.dm-home-v3 .hp-hero-copy > :nth-child(2) { animation-delay: .06s; }
    body.dm-home-v3 .hp-hero-copy > :nth-child(3) { animation-delay: .12s; }
    body.dm-home-v3 .hp-hero-copy > :nth-child(4) { animation-delay: .18s; }
    body.dm-home-v3 .hp-phone { animation: hpRise .9s cubic-bezier(.16, 1, .3, 1) both; }
    body.dm-home-v3 .hp-card { animation: hpFade .9s .25s ease both; }
    body.dm-home-v3 .hp-chip-order { animation: hpPop .55s 1.1s cubic-bezier(.34, 1.56, .64, 1) both; }
    body.dm-home-v3 .hp-chip-call { animation: hpPop .55s 1.7s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes hpRise { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes hpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpPop { from { opacity: 0; scale: .86; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* ---------- Gerçekler bandı ---------- */
body.dm-home-v3 .hp-facts {
    border-block: 1px solid var(--hp-line);
    background: var(--hp-surface);
}
body.dm-home-v3 .hp-facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.dm-home-v3 .hp-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 30px 28px;
    border-left: 1px solid var(--hp-line);
}
body.dm-home-v3 .hp-fact:first-child { border-left: 0; padding-left: 0; }
body.dm-home-v3 .hp-fact strong {
    font: 750 clamp(38px, 3.6vw, 52px)/1 var(--hp-serif);
    letter-spacing: -.04em;
    color: var(--hp-ink);
    font-variant-numeric: lining-nums tabular-nums;
}
body.dm-home-v3 .hp-fact span { font-size: 15.5px; line-height: 1.4; color: var(--hp-muted); }

/* ---------- Üç adım ---------- */
body.dm-home-v3 .hp-steps-list {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}
body.dm-home-v3 .hp-steps-list li { position: relative; padding-top: 80px; }
body.dm-home-v3 .hp-steps-list li::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 76px;
    right: -28px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--hp-line) 0 7px, transparent 7px 14px);
}
body.dm-home-v3 .hp-steps-list li:last-child::after { display: none; }
body.dm-home-v3 .hp-step-no {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--hp-line);
    border-radius: 50%;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    color: var(--hp-red);
    font: 500 17px/1 var(--hp-mono);
    letter-spacing: .02em;
}
body.dm-home-v3 .hp-steps-list h3 { margin: 0 0 8px; font: 700 21px/1.25 var(--hp-sans); letter-spacing: -.02em; color: var(--hp-ink); }
body.dm-home-v3 .hp-steps-list p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--hp-muted); max-width: 32ch; }

/* ---------- Tema vitrini (kartlar site-v3.css'te) ---------- */
body.dm-home-v3 .hp-showcase { background: var(--hp-bg-2); }
body.dm-home-v3 .hp-sectors { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
body.dm-home-v3 .hp-sectors p { margin: 0; font-weight: 700; color: var(--hp-ink); }
body.dm-home-v3 .hp-sectors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.dm-home-v3 .hp-sectors a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: var(--hp-surface);
    color: var(--hp-ink) !important;
    font-size: 14px;
    font-weight: 600;
}
body.dm-home-v3 .hp-sectors a:hover { border-color: var(--hp-red); color: var(--hp-red) !important; }

/* ---------- Özellikler (bento: 1 büyük + 4 küçük + 1 geniş) ---------- */
body.dm-home-v3 .hp-bento {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 18px;
}
body.dm-home-v3 .hp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 230px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
}
body.dm-home-v3 .hp-tile h3 { margin: 0; font: 700 23px/1.15 var(--hp-serif); letter-spacing: -.025em; color: inherit; }
body.dm-home-v3 .hp-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--hp-muted); }
body.dm-home-v3 .hp-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border-radius: 15px;
    background: var(--hp-red-tint);
    color: var(--hp-red);
    font-size: 20px;
}
body.dm-home-v3 .hp-tile-order {
    grid-row: span 2;
    padding-bottom: 0;
    color: var(--hp-ink);
    background: linear-gradient(180deg, var(--hp-surface) 0%, var(--hp-bg-2) 100%);
}
body.dm-home-v3 .hp-mini-phone {
    align-self: center;
    width: min(270px, 80%);
    aspect-ratio: 390 / 560;
    margin-top: auto;
    padding: 9px 9px 0;
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    background: #121212;
    box-shadow: var(--hp-shadow);
}
body.dm-home-v3 .hp-mini-phone picture,
body.dm-home-v3 .hp-mini-phone img { display: block; width: 100%; height: 100%; }
body.dm-home-v3 .hp-mini-phone img { object-fit: cover; object-position: center bottom; border-radius: 32px 32px 0 0; }
body.dm-home-v3 .hp-tile-lang { color: var(--hp-ink); }
body.dm-home-v3 .hp-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
body.dm-home-v3 .hp-langs span {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--hp-bg-2);
    color: var(--hp-ink);
    font: 500 12px/1 var(--hp-mono);
    letter-spacing: .06em;
    transition: background-color .35s ease, color .35s ease;
}
body.dm-home-v3 .hp-tile-pay { border-color: transparent; background: var(--hp-red); color: #fff; }
body.dm-home-v3 .hp-tile-pay p { color: #fff; }
body.dm-home-v3 .hp-tile-pay .hp-tile-ico { background: rgba(255, 255, 255, .18); color: #fff; }
body.dm-home-v3 .hp-tile-notify { border-color: transparent; background: var(--hp-dark); color: var(--hp-dark-ink); }
body.dm-home-v3 .hp-tile-notify p { color: var(--hp-dark-muted); }
body.dm-home-v3 .hp-tile-notify .hp-tile-ico { background: rgba(255, 255, 255, .08); color: var(--hp-dark-accent); }
body.dm-home-v3 .hp-tile-waiter { color: var(--hp-ink); }
body.dm-home-v3 .hp-tile-menu {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 0;
    color: var(--hp-ink);
}
body.dm-home-v3 .hp-tile-menu > div { max-width: 460px; display: flex; flex-direction: column; gap: 10px; }
body.dm-home-v3 .hp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 520px; }
body.dm-home-v3 .hp-tags li {
    padding: 10px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Sipariş akışı (sayfadaki tek koyu bant) ---------- */
body.dm-home-v3 .hp-flow {
    padding: clamp(72px, 8vw, 116px) 0;
    background: var(--hp-dark);
    color: var(--hp-dark-ink);
}
body.dm-home-v3 .hp-flow .hp-h2 { color: var(--hp-dark-ink); }
body.dm-home-v3 .hp-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: 64px;
}
body.dm-home-v3 .hp-flow-lead { margin: 18px 0 34px; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--hp-dark-muted); }
body.dm-home-v3 .hp-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
body.dm-home-v3 .hp-flow-steps li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
}
body.dm-home-v3 .hp-flow-steps i {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--hp-dark-accent) 16%, transparent);
    color: var(--hp-dark-accent);
    font-size: 20px;
    transition: background-color .4s ease, color .4s ease;
}
body.dm-home-v3 .hp-flow-steps b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--hp-dark-ink); }
body.dm-home-v3 .hp-flow-steps span { font-size: 15px; line-height: 1.55; color: var(--hp-dark-muted); }
body.dm-home-v3 .hp-note { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--hp-dark-muted); }
body.dm-home-v3 .hp-flow-visual { display: flex; justify-content: center; }
body.dm-home-v3 .hp-phone.is-static {
    position: relative;
    left: auto;
    top: auto;
    width: min(300px, 78%);
    transform: none;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
    animation: none;
}

body.dm-home-v3 .hp-partners { padding: 0 0 56px; }

/* ---------- Mobil kayıt çubuğu ---------- */
body.dm-home-v3 .hp-sticky { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    body.dm-home-v3 .hp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.dm-home-v3 .hp-tile-order { grid-row: span 2; }
    body.dm-home-v3 .hp-tile-menu { flex-direction: column; align-items: flex-start; }
    body.dm-home-v3 .hp-tags { justify-content: flex-start; }
}
@media (max-width: 992px) {
    body.dm-home-v3 .hp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    body.dm-home-v3 .hp-hero-copy { max-width: 640px; }
    body.dm-home-v3 .hp-stage { height: clamp(440px, 80vw, 600px); max-width: 620px; width: 100%; margin-inline: auto; }
    body.dm-home-v3 .hp-phone { width: clamp(220px, 42vw, 280px); }
    body.dm-home-v3 .hp-card { width: clamp(170px, 32vw, 220px); }
    body.dm-home-v3 .hp-flow-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Telefon ---------- */
@media (max-width: 768px) {
    body.dm-home-v3 .hp-hero { padding-top: 28px; }
    body.dm-home-v3 .hp-lead { font-size: 17px; margin: 18px 0 26px; }
    body.dm-home-v3 .hp-actions .hp-btn { flex: 1 1 100%; }
    body.dm-home-v3 .hp-stage { height: 470px; }
    body.dm-home-v3 .hp-phone { width: 226px; }
    body.dm-home-v3 .hp-card { width: 170px; border-width: 5px; border-radius: 26px; }
    body.dm-home-v3 .hp-card-left { left: -6px; }
    body.dm-home-v3 .hp-card-right { right: -6px; }
    body.dm-home-v3 .hp-chip { padding: 8px 12px 8px 8px; }
    body.dm-home-v3 .hp-chip i { width: 32px; height: 32px; font-size: 15px; }
    body.dm-home-v3 .hp-chip-order { left: 0; bottom: 6%; }
    body.dm-home-v3 .hp-chip-call { right: 0; top: 4%; }

    body.dm-home-v3 .hp-facts-grid { grid-template-columns: 1fr 1fr; }
    body.dm-home-v3 .hp-fact { padding: 22px 16px; border-left: 0; }
    body.dm-home-v3 .hp-fact:nth-child(odd) { padding-left: 0; }
    body.dm-home-v3 .hp-fact:nth-child(even) { border-left: 1px solid var(--hp-line); }
    body.dm-home-v3 .hp-fact:nth-child(n+3) { border-top: 1px solid var(--hp-line); }

    body.dm-home-v3 .hp-steps-list { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
    body.dm-home-v3 .hp-steps-list li { padding: 4px 0 0 80px; min-height: 60px; }
    body.dm-home-v3 .hp-steps-list li::after { top: 68px; left: 30px; right: auto; bottom: -24px; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--hp-line) 0 7px, transparent 7px 14px); }

    /* Vitrin: yatay kaydırmalı raf (kenardan kenara) */
    body.dm-home-v3 .hp-shelf {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 74%;
        gap: 16px;
        overflow-x: auto;
        margin-inline: -16px;
        padding: 4px 16px 12px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    body.dm-home-v3 .hp-shelf::-webkit-scrollbar { display: none; }
    body.dm-home-v3 .hp-theme { scroll-snap-align: start; }
    body.dm-home-v3 .hp-sectors { margin-top: 32px; }

    body.dm-home-v3 .hp-bento { grid-template-columns: 1fr; gap: 14px; }
    body.dm-home-v3 .hp-tile { min-height: 0; padding: 24px; }
    body.dm-home-v3 .hp-tile-order { grid-row: auto; padding-bottom: 0; }
    body.dm-home-v3 .hp-mini-phone { width: min(260px, 82%); margin-top: 12px; }
    body.dm-home-v3 .hp-flow-steps li { padding: 16px; }

    body.dm-home-v3 .hp-sticky {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 8px 8px 18px;
        border: 1px solid var(--hp-line);
        border-radius: 999px;
        background: var(--hp-surface);
        box-shadow: var(--hp-shadow-lg);
        visibility: hidden;
        transform: translateY(140%);
        transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .35s;
    }
    body.dm-home-v3 .hp-sticky.is-visible { visibility: visible; transform: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
    body.dm-home-v3 .hp-sticky span { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--hp-ink); }
    body.dm-home-v3 .hp-sticky .hp-btn { min-height: 46px; padding: 0 20px; font-size: 15px; box-shadow: none; }
}
@media (max-width: 380px) {
    body.dm-home-v3 .hp-card { display: none; }
    body.dm-home-v3 .hp-sticky span { display: none; }
    body.dm-home-v3 .hp-sticky { justify-content: center; padding: 8px; }
    body.dm-home-v3 .hp-sticky .hp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.dm-home-v3 .hp-sticky { transition: none; }
}

/* ==========================================================================
   Hareket (dm F17n) — appmotion.video diliyle. Hepsi prefers-reduced-motion'a uyar; ilk ekrandaki (LCP)
   başlık ve telefon görseli gizlenmez. Döngüler site-motion.js'te, görünür değilken durur.
   ========================================================================== */

/* Telefon ekranı: tema görüntüleri sırayla (site-motion.js katman ekler) + tema etiketi */
body.dm-home-v3 .hp-phone-screen { position: relative; }
body.dm-home-v3 .hp-screen-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity .8s ease;
}
body.dm-home-v3 .hp-screen-frame.is-on { opacity: 1; }
body.dm-home-v3 .hp-screen-tag {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(18, 18, 18, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font: 500 10.5px/1 var(--hp-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    translate: -50% 6px;
    transition: opacity .4s ease, translate .5s var(--hp-ease);
    pointer-events: none;
}
body.dm-home-v3 .hp-screen-tag.is-on { opacity: 1; translate: -50% 0; }
body.dm-home-v3 .hp-screen-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF6A45;
    box-shadow: 0 0 0 3px rgba(255, 106, 69, .28);
}

/* Dil rozetleri sırayla yanar (site-motion.js, data-light-cycle) */
body.dm-home-v3 .hp-langs span.is-lit { background: var(--hp-red); color: #fff; }

/* Sipariş çipinin alt satırı değişirken */
body.dm-home-v3 .hp-chip small { transition: opacity .25s ease, translate .35s var(--hp-ease); }
body.dm-home-v3 .hp-chip small.is-swapping { opacity: 0; translate: 0 5px; }
body.dm-home-v3 .hp-chip i { position: relative; }

/* İşletme türleri: kayan şerit (hareket yoksa eskisi gibi sarılan liste) */
body.dm-home-v3 .hp-sectors { display: block; }
body.dm-home-v3 .hp-sectors p { margin: 0 0 14px; }
body.dm-home-v3 .hp-marquee { position: relative; }
body.dm-home-v3 .hp-marquee-track { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
body.dm-home-v3 .hp-marquee-track [data-dup] { display: none; }

/* Adım bağlantı çizgisi: dikey düzende (telefon) yukarıdan aşağı çizilir */
body.dm-home-v3 .hp-steps-list { --hp-draw-from: scaleX(0); --hp-draw-origin: left center; }
html[dir="rtl"] body.dm-home-v3 .hp-steps-list { --hp-draw-origin: right center; }
@media (max-width: 768px) {
    body.dm-home-v3 .hp-steps-list { --hp-draw-from: scaleY(0); --hp-draw-origin: center top; }
}

/* Koyu bant: sıradaki adım + telefonda düşen bildirim */
body.dm-home-v3 .hp-flow-steps li { position: relative; overflow: hidden; transition: border-color .4s ease, background-color .4s ease; }
body.dm-home-v3 .hp-flow-steps li::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--hp-grad);
    transform: scaleX(0);
    transform-origin: left center;
}
html[dir="rtl"] body.dm-home-v3 .hp-flow-steps li::after { transform-origin: right center; }
body.dm-home-v3 .hp-flow-steps li.is-active {
    border-color: color-mix(in srgb, var(--hp-dark-accent) 40%, transparent);
    background: rgba(255, 255, 255, .075);
}
body.dm-home-v3 .hp-flow-steps li.is-active i { background: var(--hp-dark-accent); color: #121212; }
body.dm-home-v3 .hp-flow-visual .hp-phone { position: relative; }
body.dm-home-v3 .hp-flow-toast {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 44px);
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
    color: #121212;
    font: 600 13px/1.25 var(--hp-sans);
    opacity: 0;
    translate: -50% -14px;
    transition: opacity .35s ease, translate .5s var(--hp-ease);
    pointer-events: none;
}
body.dm-home-v3 .hp-flow-toast.is-on { opacity: 1; translate: -50% 0; }
body.dm-home-v3 .hp-flow-toast i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--hp-red);
    color: #fff;
    font-size: 15px;
}
body.dm-home-v3 .hp-flow-toast small { display: block; margin-top: 2px; color: #5B5853; font: 500 11px/1.3 var(--hp-mono); }

@media (prefers-reduced-motion: no-preference) {
    /* hero: logo renklerinde yavaş kayan parıltı */
    body.dm-home-v3 .hp-hero::before { inset: -12%; animation: hpGlow 22s ease-in-out infinite alternate; }

    /* bildirim çipleri düştükten sonra hafifçe süzülür; zil halkası nabız atar */
    body.dm-home-v3 .hp-chip-order { animation: hpPop .55s 1.1s cubic-bezier(.34, 1.56, .64, 1) both, hpFloat 6s 1.8s ease-in-out infinite; }
    body.dm-home-v3 .hp-chip-call { animation: hpPop .55s 1.7s cubic-bezier(.34, 1.56, .64, 1) both, hpFloat 6.5s 2.4s ease-in-out infinite; }
    body.dm-home-v3 .hp-chip-call i::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 var(--hp-red-glow);
        animation: hpPing 2.6s 2.6s ease-out infinite;
    }
    body.dm-home-v3 .hp-card-left { animation: hpFade .9s .25s ease both, hpDriftL 9s 1.2s ease-in-out infinite alternate; }
    body.dm-home-v3 .hp-card-right { animation: hpFade .9s .25s ease both, hpDriftR 10s 1.2s ease-in-out infinite alternate; }

    /* kayan şerit (betik ikinci kopyayı gösterir) */
    html.dm-motion body.dm-home-v3 .hp-marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }
    html.dm-motion body.dm-home-v3 .hp-marquee-track { flex-wrap: nowrap; gap: 0; width: max-content; animation: hpMarquee 40s linear infinite; }
    html.dm-motion body.dm-home-v3 .hp-marquee-track li { margin-inline-end: 10px; }
    html.dm-motion body.dm-home-v3 .hp-marquee-track [data-dup] { display: list-item; }
    html.dm-motion body.dm-home-v3 .hp-marquee:hover .hp-marquee-track,
    html.dm-motion body.dm-home-v3 .hp-marquee:focus-within .hp-marquee-track { animation-play-state: paused; }
    html[dir="rtl"].dm-motion body.dm-home-v3 .hp-marquee-track { animation-name: hpMarqueeRtl; }

    /* üç adım: numara belirir, bağlantı çizgisi kendini çizer */
    html.dm-motion body.dm-home-v3 .hp-steps-list li .hp-step-no { scale: .6; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--dm-delay, 0ms) + 150ms); }
    html.dm-motion body.dm-home-v3 .hp-steps-list li.is-in .hp-step-no { scale: 1; }
    html.dm-motion body.dm-home-v3 .hp-steps-list li::after {
        transform: var(--hp-draw-from);
        transform-origin: var(--hp-draw-origin);
        transition: transform 1s var(--hp-ease) calc(var(--dm-delay, 0ms) + 450ms);
    }
    html.dm-motion body.dm-home-v3 .hp-steps-list li.is-in::after { transform: none; }

    /* özellik kutuları: zil sallanır, garson ikonu nabız atar, kart kutusunda ışık geçer, telefon süzülür */
    body.dm-home-v3 .hp-tile-notify.is-in .hp-tile-ico i { display: inline-block; transform-origin: 50% 10%; animation: hpRing 4.2s 1s ease-in-out infinite; }
    body.dm-home-v3 .hp-tile-waiter .hp-tile-ico { position: relative; }
    body.dm-home-v3 .hp-tile-waiter.is-in .hp-tile-ico::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        animation: hpPing 2.4s 1s ease-out infinite;
    }
    body.dm-home-v3 .hp-tile-pay::after {
        content: '';
        position: absolute;
        inset: -40% -60%;
        background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
        transform: translateX(-60%);
        pointer-events: none;
    }
    body.dm-home-v3 .hp-tile-pay.is-in::after { animation: hpSheen 5.5s 1.2s ease-in-out infinite; }
    body.dm-home-v3 .hp-tile-order.is-in .hp-mini-phone { animation: hpFloat 7s 1s ease-in-out infinite; }
    html.dm-motion body.dm-home-v3 .hp-tags li { opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .55s var(--hp-ease); }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li { opacity: 1; translate: 0 0; }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li:nth-child(2) { transition-delay: .08s; }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li:nth-child(3) { transition-delay: .16s; }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li:nth-child(4) { transition-delay: .24s; }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li:nth-child(5) { transition-delay: .32s; }
    html.dm-motion body.dm-home-v3 .hp-tile-menu.is-in .hp-tags li:nth-child(6) { transition-delay: .40s; }
    html.dm-motion:not(.dm-motion-ready) body.dm-home-v3 .hp-tags li { animation: dmRevealFailsafe .01s linear 3s forwards; }

    /* koyu bant: etkin adımın alt çizgisi adım süresince dolar */
    body.dm-home-v3 .hp-flow-steps li.is-active::after { animation: hpProgress var(--hp-flow-ms, 2800ms) linear forwards; }
}
@keyframes hpGlow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.07); } }
@keyframes hpFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hpDriftL { from { translate: 0 0; } to { translate: -4px 8px; } }
@keyframes hpDriftR { from { translate: 0 0; } to { translate: 5px -8px; } }
@keyframes hpPing {
    0% { box-shadow: 0 0 0 0 var(--hp-red-glow); }
    70%, 100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes hpRing {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(14deg); }
    78% { transform: rotate(-12deg); }
    82% { transform: rotate(9deg); }
    86% { transform: rotate(-6deg); }
    90% { transform: rotate(3deg); }
}
@keyframes hpSheen { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes hpMarquee { to { transform: translateX(-50%); } }
@keyframes hpMarqueeRtl { to { transform: translateX(50%); } }
@keyframes hpProgress { to { transform: scaleX(1); } }