/* ==========================================================================
   icanad — Ajans Sitesi Stylesheet
   Tek dosya. Tüm bölümlerin CSS'i buraya eklenir.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    --brand: #027BC4;
    --brand-dark: #015a8f;
    --brand-light: #e6f3fb;

    --fg: #0f172a;
    --fg-muted: #4b5563;
    --fg-soft: #6b7280;

    --bg: #ffffff;
    --bg-soft: #f8fafc;

    --border: #e5e7eb;
    --border-strong: #d1d5db;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow:    0 4px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 40px rgba(2, 123, 196, .15);

    --header-height: 80px;
    --container-max: 1240px;

    /* Layout heights — topbar JS ile kapatılınca --topbar-h: 0 olur */
    --topbar-h: 47px;
    --header-h: 78px;

    --transition: 0.2s ease;
}
html.is-topbar-closed,
body.is-topbar-closed { --topbar-h: 0px; }

/* ── Reset / base ──────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* iOS Safari: 100vw / peek-kart / mega min-width taşması belgenin
       genişliğini viewport'tan büyük yapınca sayfa ölçeklenip zıplar.
       clip, sticky header'ı bozmaz (hidden gibi yeni BFC açmaz). */
    overflow-x: clip;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    max-width: 100%;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--brand); color: #fff; }

/* ── Kaydırma çubuğu — mavi çubuk, koyu zemin ───────────────────────────── */
html {
    scrollbar-color: #027BC5 #010202;   /* Firefox: thumb / track */
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #010202;
}
::-webkit-scrollbar-thumb {
    background: #027BC5;
    border-radius: 999px;
    border: 2px solid #010202;          /* zeminden ince pay — çubuk kapsül görünür */
}
::-webkit-scrollbar-thumb:hover {
    background: #0289db;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Topbar / duyuru çubuğu ─────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    height: var(--topbar-h);
    background: linear-gradient(90deg, #020324 0%, #0E116F 100%);
    color: #fff;
    font-family: inherit;
    overflow: hidden;
    transition: height .35s cubic-bezier(.55,.1,.25,1), opacity .25s ease;
    -webkit-font-smoothing: antialiased;
}
.topbar__inner {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.topbar__countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.cd-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 24px;
}
.cd-num {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}
.cd-lbl {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .8);
    margin-top: 3px;
    text-transform: uppercase;
}
.cd-sep {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    line-height: 1;
    transform: translateY(-6px);
}
.topbar__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    pointer-events: none;
}
.topbar__text strong { color: #fff; font-weight: 700; }
.topbar__cta {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 16px;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
/* Topbar kapat butonu — default tamamen görünmez,
   sadece TOPBAR'a fare gelince + butona doğrudan hover'da belirginleşir */
.topbar__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 6px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    opacity: 0;                       /* default tamamen gizli */
    transition: opacity .25s ease, background .25s ease, transform .35s cubic-bezier(.55,.1,.25,1);
}
.topbar:hover .topbar__close,
.topbar:focus-within .topbar__close { opacity: .55; }
.topbar__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .14);
    transform: rotate(90deg);
}
.topbar__close:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
}
.topbar__close svg {
    width: 12px;
    height: 12px;
    display: block;
}
.topbar__cta:hover { background: #f1f5f9; color: #0f172a; }

/* ── Header / üst menü ─────────────────────────────────────────────────── */
/* Edge-to-edge beyaz bar; iç içerik boxed (--container-max). */
.site-header {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 0;
    box-shadow: none;
    padding: 0;
    transition: top .35s cubic-bezier(.55,.1,.25,1);
    pointer-events: auto;
    transition: box-shadow .25s ease;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 78px;
    /* width / max-width / yan padding .container'dan gelir */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.is-scrolled .site-header {
    box-shadow: none;
}

/* Logo */
.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.site-logo img {
    height: 49px;
    width: auto;
}

/* Ana menü */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.main-nav__list,
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}
.main-nav__item { position: relative; }
.main-nav__link,
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14.5px;
    font-weight: 400;
    font-family: inherit;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-radius: 999px;
}
/* Level 0 ana menü öğeleri (Hizmetlerimiz / Kurumsal / İletişim) — hem
   desktop hem mobile drawer'da daha vurgulu görünsün. Mega içindeki alt
   linkler (.mega__item) ve sub-trigger'lar bu kuraldan etkilenmez çünkü
   doğrudan .main-nav__item'in çocuğu değiller. */
.main-nav__list > .main-nav__item > .main-nav__link {
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
    position: relative;
}
.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav a:hover {
    color: var(--brand);
    background: transparent;
    outline: none;
}
.main-nav__item.is-open > .main-nav__link {
    color: var(--brand);
    background: transparent;
}
.main-nav__chev {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}
.main-nav__item.is-open .main-nav__chev {
    transform: rotate(180deg);
}
.main-nav a.is-active {
    color: var(--brand);
    font-weight: 600;
}
/* Alt çizgi yalnızca üst seviye linkler için — .mega__item'a sızarsa
   ::after panelin dibine (son öğenin altına) çiziliyordu. */
.main-nav a.is-active:not(.mega__item)::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}
/* Açılır menüde aktif sayfanın kendi etiketi işaretlensin */
.mega__item.is-active .mega__label {
    color: var(--brand);
}
.mega__item.is-active .mega__label::after {
    transform: scaleX(1);
}

/* ── Mega-menü paneli ──────────────────────────────────────────────────────
   Pop-down: trigger'ın altında absolute, fade + translateY animasyonu.
   Light-theme: beyaz panel, soft shadow, subtle border.
   Hover edilen item: brand-light bg + ikon brand renge dolar. */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 340px;
    max-width: 420px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 2px;
    box-shadow:
        0 24px 60px -20px rgba(15, 23, 42, 0.18),
        0 8px 24px -10px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    z-index: 200;
    pointer-events: none;
}
.main-nav__item.is-open > .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

/* Desktop'ta mobile-only öğeler gizli — sub-trigger button'ları ve back
   butonu JS ile DOM'a enjekte ediliyor ama sadece mobile drawer'da kullanılır.
   Mobile media query (max-width: 768px) içinde override edilir. */
.mega__sub-triggers,
.mega__sub-back {
    display: none;
}

/* Hover hit-area: trigger ile panel arasındaki 10px boşluk */
.mega::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.mega__inner {
    display: flex;
    gap: 24px;
}
.mega__col {
    flex: 1;
    min-width: 0;
}
.mega__col-title {
    display: block;
    margin: 0 0 6px;
    padding: 6px 12px 4px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

/* 2-kolon mega menü (Hizmetler + Partnerler) — varsayılan single-col
   max-width 420px iki kolonu sığdırmaz, bu yüzden width genişletildi. */
.mega.mega--2col {
    min-width: 600px;
    max-width: 720px;
}
.mega.mega--2col .mega__col + .mega__col {
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    padding-left: 16px;
}

/* 3-kolon variant — Hizmetlerimiz / Partnerler / Araçlar üçlüsü.
   2-kolondan ~280px daha geniş; her kolon arasına dikey ayırıcı. */
.mega.mega--3col {
    min-width: 880px;
    max-width: 1040px;
}
.mega.mega--3col .mega__col + .mega__col {
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    padding-left: 16px;
}

/* Trigger-centered + header-flush konumlama: TÜM desktop mega menülerini
   ("Hizmetlerimiz" ve "Kurumsal") trigger butonunun tam altına ortalıyoruz
   VE üst kenarını header bar'ın alt kenarına hizalıyoruz (slider/hero
   alanının başladığı yer).

   Yatay (left: 50% + translateX(-50%)):
     Default .mega { left: 0 } trigger'ın sol kenarına yaslıyordu; bunu
     trigger merkezine ortalıyoruz — mega'nın yatay merkezi trigger button'un
     yatay merkezine denk gelir.

   Dikey (margin-top):
     Default .mega { margin-top: 10px } LI bottom'ın 10px altına yerleştiriyor.
     Trigger LI header içinde dikey ortalı olduğu için LI bottom < header bottom.
     Header (78px) ile trigger button (~42px) arasındaki dikey boşluğun yarısı
     (78-42)/2 = 18px tam header bottom'a denk gelir, ama sub-pixel rounding
     yüzünden 1px slider çizgisi görünür kalır. Bu yüzden 16px'e indirip mega
     üst kenarını header'ın 2px içine sokuyoruz — slider tamamen örtülür.

   NOT: mobile drawer'da (max-width: 960px) zaten .mega { position: static }
   kuralı geçerli — bu override sadece desktop için (min-width: 961px). */
@media (min-width: 961px) {
    .mega {
        left: 50%;
        margin-top: 16px;
        transform: translate(-50%, -6px);
    }
    .main-nav__item.is-open > .mega {
        transform: translate(-50%, 0);
    }
    /* Hover hit-area: trigger ile panel arasındaki 16px boşluğu kapla,
       fareyle geçişte mega kapanmasın. */
    .mega::before {
        top: -16px;
        height: 16px;
    }
}

/* Hizmetler mega menü — alt kampanya banner'ı.
   .mega__inner (582px) ile aynı genişlikte, iki sütunun hemen altında durur.
   Logo mavisi (#027BC4) baz alınarak diagonal gradient kullanıldı.
   Selector specificity .main-nav a (0,1,1)'i geçmek için .mega .mega__banner. */
.mega .mega__banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 10px;
    padding: 14px 18px;
    min-height: 78px;
    border-radius: 2px;
    text-decoration: none;
    color: #ffffff;
    background:
        linear-gradient(135deg, #038dde 0%, #027BC4 38%, #015a8f 78%, #0a3d62 100%);
    box-shadow:
        0 12px 26px -14px rgba(2, 123, 196, 0.65),
        0 6px 14px -10px rgba(15, 23, 42, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.mega .mega__banner:hover,
.mega .mega__banner:focus-visible {
    transform: translateY(-1px);
    color: #ffffff;
    background:
        linear-gradient(135deg, #04a0f5 0%, #038dde 38%, #015a8f 78%, #0a3d62 100%);
    outline: none;
}
.mega .mega__banner-glow {
    position: absolute;
    top: -60%;
    right: -10%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 65%);
    z-index: -1;
    pointer-events: none;
}
.mega .mega__banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.mega .mega__banner-icon svg {
    width: 22px;
    height: 22px;
}
.mega .mega__banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.mega .mega__banner-eyebrow {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #027BC4;
    background: #ffffff;
}
.mega .mega__banner-title {
    font-size: 14.5px;
    line-height: 1.3;
    font-weight: 500;
    color: #ffffff;
}
.mega .mega__banner-title strong {
    font-weight: 800;
    color: #ffffff;
}
.mega .mega__banner-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mega .mega__banner-cta svg {
    width: 14px;
    height: 14px;
}
.mega .mega__banner:hover .mega__banner-cta,
.mega .mega__banner:focus-visible .mega__banner-cta {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.42);
}

.mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mega__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.mega__item:hover,
.mega__item:focus-visible {
    background: transparent;
    outline: none;
}
.mega__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mega__label {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 400;
    color: #0F172A;
    line-height: 1.3;
    transition: color 0.2s ease;
}
.mega__label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: var(--brand);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega__item:hover .mega__label,
.mega__item:focus-visible .mega__label {
    color: var(--brand);
}
.mega__item:hover .mega__label::after,
.mega__item:focus-visible .mega__label::after {
    transform: scaleX(1);
}
.mega__desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* ── Araçlar kolonu (ikon + label tek satır) ─────────────────────────── */
.mega__col--tools .mega__item {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.mega__col--tools .mega__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    color: #0F172A;
    transition: color .2s ease;
}
.mega__col--tools .mega__icon svg {
    width: 18px;
    height: 18px;
}
.mega__col--tools .mega__item:hover .mega__icon,
.mega__col--tools .mega__item:focus-visible .mega__icon,
.mega__col--tools .mega__item.is-active .mega__icon {
    color: var(--brand);
}
.mega__col--tools .mega__label {
    font-size: 13.5px;
}

@media (prefers-reduced-motion: reduce) {
    .mega__label::after { transition: none; }
}

/* Sağ aksiyonlar */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.header-actions .btn { border-radius: 2px; font-weight: 500; }
.header-actions .btn-primary,
.header-actions .btn-primary:hover { box-shadow: none; }

/* Buton bileşeni */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition),
                background var(--transition),
                border-color var(--transition),
                box-shadow var(--transition),
                color var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 6px 20px rgba(2, 123, 196, .28);
}
.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: 0 10px 28px rgba(2, 123, 196, .38);
}

.btn-outline {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline:hover {
    background: var(--brand);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--brand);
    background: var(--brand-light);
}

/* Mobil menü toggle */
/* Admin panelindeki .sidebar-hamburger görünümü: 3 çizgi, ortadaki kısa,
   menü açıkken buton 90° döner (body.nav-open footer.php JS'inde toggle'lanır). */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 0 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.25s ease;
}
.nav-toggle:hover { background: rgba(15, 23, 42, 0.06); }
.nav-toggle .hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle .hamburger-line:nth-child(2) { width: 11px; }
body.nav-open .nav-toggle { transform: rotate(90deg); }

/* ── Hero slider ───────────────────────────────────────────────────────── */
/* Boxed (max 1280px), min-h 650px, köşeli, içerik dikey ortalı. */
.hero {
    position: relative;
    margin: 125px auto 0;            /* topbar (47) + header (78) */
    width: calc(100% - 48px);
    max-width: var(--container-max);
    min-height: 650px;
    overflow: hidden;
    background: #04060c;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
}
.hero__shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .30);
    pointer-events: none;
    z-index: 1;
}
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    max-width: 720px;
    width: 100%;
}

/* Badge (top) */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .85);
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .6s ease, transform .6s ease;
}
.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, .65);
    flex-shrink: 0;
}

/* Headline */
.hero__headline {
    margin: 0;
    font-size: clamp(40px, 7vw, 76px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: #ffffff;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease .15s, transform .8s ease .15s;
}

/* Subtitle */
.hero__subtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, .50);
    max-width: 520px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease .3s, transform .7s ease .3s;
}

/* CTA */
.hero__cta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease .45s, transform .6s ease .45s;
}
.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease,
                color .2s ease, border-color .2s ease;
    white-space: nowrap;
    cursor: pointer;
}
.hero__btn--primary {
    background: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}
.hero__btn--primary:hover {
    background: rgba(255, 255, 255, .9);
    color: #000;
    transform: translateY(-1px);
}
.hero__btn--secondary {
    background: transparent;
    color: rgba(255, 255, 255, .60);
    border: 1px solid rgba(255, 255, 255, .08);
}
.hero__btn--secondary:hover {
    color: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .22);
}

/* Trust line */
.hero__trust {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .22);
    opacity: 0;
    transition: opacity .8s ease .65s;
}

/* Entrance reveal */
.hero.is-in .hero__badge,
.hero.is-in .hero__headline,
.hero.is-in .hero__subtitle,
.hero.is-in .hero__cta {
    opacity: 1;
    transform: translateY(0);
}
.hero.is-in .hero__trust { opacity: 1; }

/* Hero responsive */
@media (max-width: 960px) {
    .hero {
        margin: calc(var(--topbar-h) + 66px) 0 0;  /* topbar + mobile header; dinamik */
        width: 100%;
        min-height: 560px;
        padding: 60px 16px;          /* yatay 16px → tüm ana sayfa mobil padding standardı */
    }
    /* Mobilde brands (topfold içindeki hero-benzeri bölüm) içeriği ortala
       + üst boşluğu altdaki media__diagram padding-bottom'una eşitle */
    .topfold > .brands .brands__copy {
        align-items: center;
        text-align: center;
        padding-top: 48px;       /* alt boşluk (media__diagram padding-bottom: 48px) ile eşit */
    }
    .topfold > .brands .brands__cta { justify-content: center; }
    .topfold > .brands .brands__badge { align-self: center; }
    .hero__content { gap: 18px; }
    .hero__subtitle { font-size: 16px; }
    .hero__cta { flex-direction: column; width: 100%; max-width: 280px; }
    .hero__btn { width: 100%; padding: 13px 22px; }
}
@media (max-width: 480px) {
    .hero {
        margin: calc(var(--topbar-h) + 66px) 0 0;  /* dinamik; topbar + header */
        width: 100%;
        min-height: 520px;
        padding: 48px 16px;          /* yatay 16px → tüm ana sayfa mobil padding standardı */
    }
    .hero__headline { letter-spacing: -0.025em; }
    .hero__subtitle { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__badge,
    .hero__headline,
    .hero__subtitle,
    .hero__cta,
    .hero__trust { transition: none; opacity: 1; transform: none; }
}

/* ── Topfold wrapper: brands ve (gelecekte) referans bölümü için sarmalayıcı.
   Topbar kapatılınca freed-up alan brands'e geçer (CSS değişkeniyle).
   Arka plan topbar ile aynı dark-navy gradient → tüm slider alanı edge-to-edge. */
.topfold {
    /* Topbar açık/kapalı fark etmesin → topfold üst alan SABİT 50px gradient ile rezerve.
       Header (78px) altında topfold başlar; padding-top: 50px topbar'ın yerini gradient
       ile doldurur → kapatma sonrası sayfa yukarı kaymaz, alt boşluk oluşmaz.
       min-height: calc(100svh - --header-h) → hero alanı küçük viewport'a
       sığar; iOS adres çubuğu gizlenince 100vh/dvh büyüdüğü için layout
       zıplamasın diye svh (yoksa vh) kullanılır. */
    margin-top: var(--header-h);
    padding-top: calc(var(--topbar-h) + 3px);   /* topbar yüksekliği + küçük buffer */
    padding-bottom: 0;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    /* Solda brand indigo (yazı/CTA okunaklı), sağda neredeyse-siyah lacivert
       (diagram zemininin derinleşmesi için). 100deg ile hafif diyagonal kayma. */
    background: linear-gradient(100deg,
        #0E116F 0%,
        #07093C 45%,
        #020618 85%,
        #01030F 100%);
    display: flex;
    flex-direction: column;
}

/* ── Brands / Sosyal kanıt (split: sol copy + sağ açılı görsel) ─────────
   Arka plan transparent → gradient .topfold sarmalayıcısından geçer.
   Sol kolon yazıları beyaz, sağ kolon (.brands__media--diagram) beyaz kart. */
.brands {
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 540px;
    margin: 125px auto 0;            /* topbar (47) + header (78), yatayda boxed ortala */
    width: calc(100% - 48px);
    max-width: var(--container-max);  /* boxed → 1240px */
    border: 0;
}
/* Topfold içindeyken brands: viewport'u doldurur ve içerik dikey ortalı kalır.
   margin-top: 0 → üstte gereksiz 120px boşluk kalkar; brands flex: 1 1 auto ile
   topfold içindeki tüm dikey alanı yutar, .brands__copy / .brands__media-left
   kendi içlerinde justify-content: center ile ortalanır. */
.topfold > .brands {
    margin-top: 0;
    min-height: 0;
    flex: 1 1 auto;
}
.topfold > .brands .brands__copy {
    padding: 32px 16px 0;        /* üstten 32px nefes → başlık header'a yapışmasın; yatay 16px → mobil sayfa padding'i ile aynı */
    gap: 14px;
    justify-content: center;     /* açıkça tasdikle */
    align-self: stretch;         /* parent (.brands) yüksekliğini tam al */
}
.topfold > .brands .brands__title { font-size: 32px; line-height: 1.15; }
.topfold > .brands .brands__desc  { font-size: 16px; }
/* Diagram tarafı agresif kompakt — iç boyutlar dahil küçültüldü */
.topfold > .brands .brands__media--diagram { padding: 16px 24px; }
.topfold > .brands .diag-stats             { max-width: 380px; margin-bottom: 2px; }
.topfold > .brands .diag-stats__card       { min-height: 170px; padding: 12px 14px 10px; }
.topfold > .brands .diag-stats__amount     { font-size: 17px; }
.topfold > .brands .diag-stats__label      { font-size: 12px; }
.topfold > .brands .diag-stats__chart      { top: 48px; }
.topfold > .brands .diag-phone             { flex: 0 0 108px; margin-top: 8px; }
.topfold > .brands .diag-phone__frame      { width: 128px; height: 148px; padding: 9px 7px 0; }
.topfold > .brands .diag-phone__notch      { width: 44px; height: 12px; top: 4px; }
.topfold > .brands .diag-phone__time       { font-size: 9px; margin-bottom: 8px; }
.topfold > .brands .diag-phone__app        { width: 32px; height: 32px; border-radius: 8px; }
.topfold > .brands .diag-phone__apps       { gap: 6px; }
.topfold > .brands .diag-stats__product    { padding: 6px 8px; }
.topfold > .brands .diag-stats__product-img{ width: 32px; height: 32px; }
.topfold > .brands .diag-stats__product-img svg { width: 22px; height: 22px; }
.topfold > .brands .diag-stats__product-info strong { font-size: 11.5px; }
.topfold > .brands .diag-stats__product-info span   { font-size: 10.5px; }
.topfold > .brands .diag-lines             { height: 24px; margin: -2px 0 -4px; max-width: 400px; }
.topfold > .brands .diag-channels          { max-width: 400px; gap: 0; }
.topfold > .brands .diag-tile              { width: 40px; height: 40px; padding: 6px; border-radius: 10px; }
.brands__copy {
    flex: 1 1 50%;
    min-width: 0;
    padding: 80px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}
.brands__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 13px;
    width: fit-content;
    backdrop-filter: blur(4px);
}
.brands__badge-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    background: #ffffff;
    color: #0E116F;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.brands__badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    transition: gap .2s ease, opacity .2s ease;
    opacity: .92;
}
.brands__badge-link:hover { gap: 7px; opacity: 1; }
.brands__badge-link svg { width: 13px; height: 13px; }

.brands__title {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.brands__title-mark {
    position: relative;
    display: inline-block;
    isolation: isolate;
    white-space: nowrap;
}
.brands__circle {
    position: absolute;
    /* SVG replaced eleman: left/right ile esnemez, width/height yüzdeyle
       açıkça verilmeli (preserveAspectRatio=none oranı serbest bırakır). */
    left: -22%;
    top: -55%;
    width: 158%;                     /* soldan %22, sağdan %36 pay — sağa daha geniş */
    height: 200%;                    /* üstten %55, alttan %45 pay */
    color: #4FB1F0;                  /* gradient zeminde okunan parlak mavi */
    opacity: .85;
    pointer-events: none;
    z-index: -1;
    transform: rotate(-4deg);
    transform-origin: 50% 50%;
}
.brands__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 460px;
}

.brands__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
/* Sadece mobilde görünen CTA (Ücretsiz Başla) — desktop'ta gizli.
   Mobil breakpoint site geneli ile aynı: max-width: 960px. */
.brands__cta--mobile-only { display: none; }
@media (max-width: 960px) {
    .brands__cta--mobile-only { display: flex; }
}
.brands__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background .2s ease, color .2s ease,
                border-color .2s ease, transform .2s ease;
    white-space: nowrap;
}
.brands__btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}
.brands__btn--ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .42);
}
.brands__btn--ghost svg { width: 16px; height: 16px; opacity: .9; }
.brands__btn--primary {
    background: #ffffff;
    color: #0E116F;
    border: 1px solid #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.brands__btn--primary:hover {
    background: #f1f5f9;
    border-color: #f1f5f9;
    transform: translateY(-1px);
}

.brands__media {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
    /* Sol kenarda yumuşak diyagonal kesim */
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.brands__media:not(.brands__media--diagram) > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Diagram variant: ürün → icanad merkez → 8 satış kanalı (referans tasarım).
   Arka plan şeffaf → topfold gradient direkt geçer (sol kolon ile aynı zemin).
   Layout: 2 kolon × 2 satır
     ┌──────────────────────┬─────────────┐
     │ figure--top (yatay)  │             │
     ├──────────────────────┤ figure--side│
     │ stack (mevcut diag.) │   (dikey)   │
     └──────────────────────┴─────────────┘
*/
.brands__media--diagram {
    background: transparent;
    clip-path: none;
    overflow: visible;
    padding: 40px 40px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    position: relative;
}
/* Sol kolon: top figure + diagram stack — sağdaki dikey görselin yüksekliğine
   göre dikey ortalı (justify-content: center). */
.brands__media-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.brands__media-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

/* Yatay & dikey görsel kartları */
.brands__media-figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 28px rgba(2, 3, 36, .25),
                0 2px 4px rgba(2, 3, 36, .12);
}
.brands__media-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.brands__media-figure--top {
    aspect-ratio: 16 / 9;
}
.brands__media-figure--side {
    /* Sağ kolon: sol kolon yüksekliğinin yarısı + 50px; grid cell içinde
       dikey ortalı (üst-alt eşit boşluk). */
    align-self: center;
    width: 100%;
    height: calc(50% + 50px);
}
/* img yüklenemediğinde nazik yer tutucu metin */
.brands__media-figure.is-empty::after {
    content: 'Görsel yer tutucu';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    text-align: center;
    padding: 12px;
}

/* Üst: Toplam Satış stats kartı + iPhone mockup */
.diag-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 460px;
    margin: 0 0 4px;
    border-radius: 18px;
    overflow: hidden;            /* telefon dahil tüm içerik kutu içinde kalsın */
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14),
                0 2px 4px rgba(15, 23, 42, .06);
    position: relative;
    isolation: isolate;
}
.diag-stats__card {
    flex: 1 1 auto;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    min-width: 0;
    min-height: 220px;
    background: #ffffff;
    border-radius: inherit;       /* parent (.diag-stats) ile aynı köşe yarıçapı */
}
/* Etiket, satır ve ürün kartı chart'ın üstünde dursun */
.diag-stats__label,
.diag-stats__row,
.diag-stats__product { position: relative; z-index: 2; }
.diag-stats__label {
    font-size: 13px;
    font-weight: 500;
    color: #0a2a4a;
    letter-spacing: -0.005em;
}
.diag-stats__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.diag-stats__amount {
    font-size: 20px;
    font-weight: 700;
    color: #0a1f38;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.diag-stats__pct {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #0a8043;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    font-variant-numeric: tabular-nums;
}
.diag-stats__chart {
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;       /* satırın altından başla, çizgi product card üstünde */
    bottom: 0;       /* kart altına kadar in */
    width: auto;
    height: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* Stats kartının içindeki ürün satırı (en son satış) */
.diag-stats__product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 8px 10px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.diag-stats__product-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.diag-stats__product-img svg { width: 30px; height: 30px; display: block; }
.diag-stats__product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
    min-width: 0;
}
.diag-stats__product-info strong {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diag-stats__product-info span {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}
.diag-stats__area {
    opacity: 0;
    transition: opacity .55s ease;
    fill: #ffffff;                   /* HTML'deki inline fill="#4C7CA2" override */
}
.diag-stats.is-playing .diag-stats__area { opacity: 1; }

.diag-stats__line {
    stroke: #94a3b8;                 /* nötr slate gri (HTML'deki inline stroke override) */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .15));
}
.diag-stats.is-playing .diag-stats__line {
    animation: diagLineDraw 1.7s cubic-bezier(.55,.05,.25,1) forwards;
}
@keyframes diagLineDraw {
    to { stroke-dashoffset: 0; }
}

/* iPhone mockup — kutunun içinde tutuyoruz (sağ kenara yapışık ama taşmaz). */
.diag-phone {
    flex: 0 0 134px;
    position: relative;
    margin: 12px 0 0 4px;
    overflow: visible;
    align-self: flex-end;
    z-index: 3;
}
.diag-phone__frame {
    position: relative;
    width: 178px;
    height: 178px;
    background: #f8fafc;
    border: 5px solid #1e293b;
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    padding: 12px 12px 0;
    box-shadow: -8px 0 18px rgba(15, 23, 42, .14);
}
.diag-phone__notch {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 15px;
    background: #0b1220;
    border-radius: 999px;
}
.diag-phone__time {
    font-size: 11px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 10px 4px;
    line-height: 1;
}
.diag-phone__apps {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.diag-phone__app {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .08);
    overflow: visible;
}
.diag-phone__app--brand {
    overflow: visible;
}
.diag-phone__app--brand img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: block;
    object-fit: cover;
}
.diag-phone__app--safari {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diag-phone__app--safari svg { width: 36px; height: 36px; }
.diag-phone__app--cal {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1;
}
.diag-phone__app--cal .cal-day {
    font-size: 8px;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: .04em;
    margin-top: 2px;
}
.diag-phone__app--cal .cal-num {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.diag-phone__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1.5px #f8fafc;
    transform: scale(1);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.diag-phone__badge.is-bumping { transform: scale(1.25); }
.diag-phone__tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
    padding: 4px 9px;
    background: #ffffff;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.diag-phone__tip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Stats kartı → kanallar bağlantı çizgisi (dikey kök).
   Koyu gradient zeminde okunsun diye yarı şeffaf beyaz. */
.diag-stem {
    width: 1.5px;
    height: 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.5) 100%);
    margin: 0;
}

/* Stem → kanallar bağlantı çizgileri (SVG yelpaze).
   CSS path stroke'u inline 'stroke' attribute'ı override eder → beyaz tonu. */
.diag-lines {
    width: 100%;
    max-width: 540px;
    height: 50px;
    margin: -2px 0 -8px;
    display: block;
}
.diag-lines path { stroke: rgba(255, 255, 255, .45); }

/* Alt: 8 kanal kart.
   gap: 0 → her sütun eşit (1fr), tile sütun merkezinde (place-items: center).
   SVG path noktaları (50,150,...,750 / 800 = %6.25, %18.75... %93.75) tam tile
   merkezlerine isabet eder. Tile sütundan dar olduğu için aralık yine kalır. */
.diag-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    width: 100%;
    max-width: 540px;
    place-items: center;
}
.diag-tile {
    width: 56px;
    height: 56px;
    background: #ffffff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.diag-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
}
.diag-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Marka Şeridi (Hoppa esinli): topfold gradient'ın en altına dahil.
   NOT: class adında "marquee/slider/banner" yok → ad-blocker uyumlu.
   Arka plan transparent → topfold gradient gözükür; logolar açık beyaz tonu. */
.brand-strip {
    background: #000000;
    flex: 0 0 auto;                  /* doğal yükseklik, sıkışmaz */
    padding: 28px 0 32px;
    overflow: hidden;
}
/* Viewport: siyah strip ekran genişliğinde, ama logoların aktığı kanal
   boxed container ile birebir hizalı (sol & sağ gutter eşit). Sağ tarafta
   yumuşak fade boxed kenara doğru biter; sol kenardan logolar net başlar. */
.brand-strip__viewport {
    position: relative;
    overflow: hidden;
    margin-left:  max(24px, calc((100% - var(--container-max)) / 2 + 24px));
    margin-right: max(24px, calc((100% - var(--container-max)) / 2 + 24px));
    -webkit-mask-image: linear-gradient(90deg,
        #000 0,
        #000 calc(100% - 96px),
        transparent 100%);
            mask-image: linear-gradient(90deg,
        #000 0,
        #000 calc(100% - 96px),
        transparent 100%);
}
.brand-strip__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    min-width: 200%;                     /* row her zaman viewport'un 2 katı */
    animation: brandStripSlide 50s linear infinite;
    will-change: transform;
}
.brand-strip__row:hover { animation-play-state: paused; }
/* Klasik sola akan marquee: row sola kayar, logolar sağdan girip soldan
   çıkar. Duplicate set sayesinde 0 ile -50% pozisyonu görsel olarak aynı,
   loop atlamasız sürer.                                                    */
@keyframes brandStripSlide {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.brand-strip__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}
.brand-strip__item img {
    max-height: 20px;
    width: auto;
    object-fit: contain;
    display: block;
    /* Admin toolbar ile aynı mantık: her logo tek tonlu beyaza çevrilir */
    filter: brightness(0) invert(1);
    opacity: .85;
    transition: opacity .25s ease, transform .25s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.brand-strip__item:hover img {
    opacity: 1;
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .brand-strip__viewport { margin-left: 0; margin-right: 0; }
    .brand-strip__row {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px 48px;
        width: 100%;
        padding: 0 24px;
    }
}
@media (max-width: 720px) {
    .brand-strip { padding: 22px 0 26px; }
    /* Mobilde marquee korunur (masaüstü ile aynı davranış); sadece
       viewport margin'i container ile birebir 16px, fade mask yeniden
       aktif kalır ki logolar kenarlardan yumuşak girip çıksın.       */
    .brand-strip__viewport {
        margin-left: 16px;
        margin-right: 16px;
        -webkit-mask-image: linear-gradient(90deg,
            #000 0, #000 calc(100% - 48px), transparent 100%);
                mask-image: linear-gradient(90deg,
            #000 0, #000 calc(100% - 48px), transparent 100%);
    }
    .brand-strip__row { gap: 48px; animation-duration: 40s; }
    .brand-strip__item,
    .brand-strip__item img { height: 18px; max-height: 18px; }
}

/* ── Panel Showcase — Yönetim paneli tanıtım videosu ──────────────────────
   Yapı: üstte ortalı global başlık + altta 2-kolon layout (sol info, sağ
   TV-monitör mockup içinde otomatik döngülü video).
   Esin: Shopify Checkout/Shop Pay tanıtım hero'su.
   ── */

.panel-showcase {
    position: relative;
    width: 100%;
    min-height: 100vh;            /* viewport yüksekliğine sığsın */
    /* Sol koyu → sağ lacivert diagonal gradient + sağ-orta radyal parıltı */
    background:
        radial-gradient(60% 70% at 78% 50%,
            rgba(45, 65, 175, 0.55) 0%,
            rgba(29, 42, 114, 0.20) 45%,
            transparent 75%),
        linear-gradient(100deg,
            #02080A 0%,
            #02080A 28%,
            #0a1230 60%,
            #1D2A72 100%);
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;       /* içerik dikeyde ortalı */
    overflow: hidden;
    color: #ffffff;                 /* default beyaz */
}
@media (min-width: 640px) {
    .panel-showcase { padding: 96px 0; }
}
.panel-showcase__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 1024px) {
    .panel-showcase__container { padding: 0 32px; }
}

/* ── Üst global başlık ──────────────────────────────────────────────────── */
.panel-showcase__header {
    text-align: center;
    margin-bottom: 48px;
}
.panel-showcase__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.panel-showcase__title-accent {
    display: inline-block;
    margin-top: 4px;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ── 2-kolon ana layout ─────────────────────────────────────────────────── */
.panel-showcase__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 56px;
}

/* ─── Sol kolon: copy + KPI'lar ────────────────────────────────────────── */
.panel-showcase__copy {
    max-width: 460px;
}

.panel-showcase__copy-title {
    margin: 0 0 36px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.015em;
}

/* KPI kartı — solid çerçeve + dikey ayırıcılar (Shopify Checkout esinli).
   Dikey çizgiler üst/alt kenarla buluşmaz — pseudo ::before ile içerden
   başlatılır.                                                              */
.panel-showcase__stats {
    list-style: none;
    margin: 0 0 28px;
    padding: 22px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;                         /* ayırıcılar pseudo ile, gap'e gerek yok */
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
}
.panel-showcase__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 28px;
    border: 0;
    min-width: 0;
}
/* KPI'lar arası dikey ayırıcı — üst/alt 16px içeride başlar */
.panel-showcase__stat:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}
.panel-showcase__stat-value {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: -0.025em;
    display: inline-flex;
    align-items: flex-start;
    gap: 1px;
    white-space: nowrap;
}
.panel-showcase__stat-value sup {
    font-size: 0.5em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.2em;
    letter-spacing: 0;
}
.panel-showcase__stat-label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0;
    text-transform: none;
}

/* Açıklama ve fine-print */
.panel-showcase__desc {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.panel-showcase__desc strong {
    color: #ffffff;
    font-weight: 600;
}
.panel-showcase__note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
}

/* ─── Sağ kolon: TV/monitör çerçevesi içinde video ─────────────────────── */
.panel-showcase__visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ── TV / Monitör çerçevesi (ayaksız sade bezel) ──────────────────────── */
.panel-showcase__tv {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px;                   /* eşit dış bezel */
    background:
        linear-gradient(180deg, #2a2d35 0%, #1a1d24 55%, #14171c 100%);
    border-radius: 22px;
    box-shadow:
        /* iç highlight'lar — metal hissi */
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        /* dış kenar */
        0 0 0 1px rgba(0, 0, 0, 0.35),
        /* mavi parıltı (koyu zemin üstünde TV'yi öne çıkartır) */
        0 0 60px -10px rgba(45, 65, 175, 0.45),
        /* yere düşen gölge */
        0 30px 60px -18px rgba(0, 0, 0, 0.55),
        0 12px 28px -10px rgba(0, 0, 0, 0.40);
}

/* Üst kamera sensoru — minik tek nokta */
.panel-showcase__tv-cam {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #5a5d65 0%, #2a2d34 50%, #0a0c10 100%);
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 3;
}

/* Ekran (16:9) — bezel içinde, etrafa ince siyah ring */
.panel-showcase__tv-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #000000;
    box-shadow:
        inset 0 0 0 2px #050608,        /* ekran çevresi siyah ring */
        inset 0 0 0 3px rgba(255, 255, 255, 0.03),
        inset 0 0 32px rgba(2, 123, 196, 0.04);
}
.panel-showcase__tv-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet (≤980px) → tek kolon + min-height auto (içerik kadar) */
@media (max-width: 980px) {
    .panel-showcase {
        min-height: auto;
        padding: 64px 0;
        justify-content: flex-start;
    }
    .panel-showcase__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .panel-showcase__copy {
        max-width: 640px;
        margin: 0 auto;
        text-align: left;
    }
    .panel-showcase__visual { order: -1; }   /* mobilde video üstte */
    .panel-showcase__tv     { margin: 0 auto; }
}

/* Mobil (≤640px) → kompakt TV + sıkı KPI kartı */
@media (max-width: 640px) {
    .panel-showcase { padding: 48px 0; }
    .panel-showcase__header { margin-bottom: 32px; }
    .panel-showcase__copy-title { margin-bottom: 24px; }
    .panel-showcase__stats {
        padding: 16px 0;
        border-radius: 14px;
    }
    .panel-showcase__stat { padding: 0 12px; }
    .panel-showcase__stat:not(:first-child)::before {
        top: 10px;
        bottom: 10px;
    }
    .panel-showcase__stat-value { font-size: clamp(22px, 6vw, 28px); }
    .panel-showcase__stat-label { font-size: 11.5px; }
    .panel-showcase__desc { font-size: 15px; }
    .panel-showcase__note { font-size: 12px; }
    .panel-showcase__tv {
        padding: 12px;
        border-radius: 16px;
        margin: 0 auto;
    }
    .panel-showcase__tv-cam { top: 5px; width: 5px; height: 5px; }
    .panel-showcase__tv-screen { border-radius: 6px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .panel-showcase__tv-video {
        /* Video JS olmadan durdurulamaz; preload sınırla yetiniyoruz */
    }
}

/* ── Video büyütme butonu (hover'da görünür) ─────────────────────────
   TV ekranının sağ-üst köşesinde absolute konumlanmış, normalde
   görünmez; ekran (figure) hover/focus ile fade-in. Tıklanınca JS
   #videoLightbox modalını açar. Mobilde her zaman görünür çünkü
   hover yok. */
.panel-showcase__expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.panel-showcase__expand svg {
    width: 18px;
    height: 18px;
}
.panel-showcase__tv:hover .panel-showcase__expand,
.panel-showcase__tv:focus-within .panel-showcase__expand,
.panel-showcase__expand:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.panel-showcase__expand:hover {
    background: rgba(2, 123, 196, 0.9);
}
.panel-showcase__expand:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}
@media (hover: none) {
    /* Dokunmatik cihazlarda hover yok — buton kalıcı görünsün */
    .panel-showcase__expand { opacity: 0.85; transform: none; }
}

/* ── Video lightbox modal ───────────────────────────────────────────
   Tam-ekran overlay; içinde merkezlenmiş, geniş video oynatıcı.
   Body'ye .has-lightbox eklenince sayfa scroll'u kilitlenir. */
.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.video-lightbox.is-open {
    display: flex;
    animation: videoLightboxFadeIn 0.2s ease-out;
}
@keyframes videoLightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.video-lightbox__stage {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    max-height: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.video-lightbox__video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
}
.video-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.video-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
}
.video-lightbox__close svg {
    width: 22px;
    height: 22px;
}
html.has-lightbox,
html.has-lightbox body {
    overflow: hidden;
}

/* ============================================================================
   /pazarlama/ — Pazarlama otomasyonu araçları landing page (Shopify-style)
   ----------------------------------------------------------------------------
   Yapı:
     • .pz-hero      — sabit hero: eyebrow + title + lead + CTA + disclaimer
     • .pz-marquee   — alt sonsuz yatay kayan kart şeridi
     • .pz-card      — tek bir kart: renkli frame + iç mock-up + alt label
   Marquee tekniği: track içinde aynı kart seti 2× render edilir, CSS
   `translateX(-50%)` animasyonuyla loop'lar → seamless akış.
   ========================================================================== */

.pazarlama-page {
    background: #FFFFFF;
}
.pz-hero {
    /* Üstte topbar + sticky header'ın altında kalmasın diye dinamik offset.
       --topbar-h + --header-h toplam ~125px → 40px ek nefes alanı bırakıyoruz. */
    padding: calc(var(--topbar-h, 47px) + var(--header-h, 78px) + 40px) 0 0;
    background: #FFFFFF;
    overflow: hidden;        /* marquee taşmasını gizle */
}
.pz-hero__container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px 56px;
    text-align: center;
}
.pz-hero__eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0F172A;
}
.pz-hero__title {
    margin: 0 0 18px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0F172A;
}
.pz-hero__lead {
    margin: 0 auto 28px;
    max-width: 860px;
    font-size: 16px;
    line-height: 1.6;
    color: #4B5563;
}
.pz-hero__cta-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.pz-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 500;
    color: #FFFFFF;
    background: #0F172A;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}
.pz-hero__cta:hover {
    background: #1E293B;
    transform: translateY(-1px);
}
.pz-hero__disclaimer {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
}

/* ── Mobil responsive hero ──────────────────────────────────────── */
@media (max-width: 768px) {
    .pz-hero {
        /* Mobilde header daha kısa: ~52px topbar + ~66px header = ~118px */
        padding: calc(var(--topbar-h, 52px) + 66px + 24px) 0 0;
    }
    .pz-hero__title { font-size: 32px; }
    .pz-hero__lead  { font-size: 15px; }
}
@media (max-width: 480px) {
    .pz-hero__title { font-size: 30px; }
}

/* ── Marquee (sonsuz kayan kart şeridi) ──────────────────────────── */
.pz-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0 80px;
    /* Sol/sağ kenarlardan yumuşak fade — kart şeridi viewport'a girip
       çıkarken ani kesilmesin. mask-image webkit dahil tüm modern
       tarayıcılarda destekli; fallback olarak overflow: hidden zaten var. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pz-marquee__track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    animation: pzMarquee 55s linear infinite;
    will-change: transform;
}
.pz-marquee:hover .pz-marquee__track,
.pz-marquee:focus-within .pz-marquee__track {
    animation-play-state: paused;       /* kullanıcı incelerken durdur */
}
@keyframes pzMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }   /* track 2x render edildiği için %50 = bir set */
}
@media (prefers-reduced-motion: reduce) {
    .pz-marquee__track { animation: none; }
}

/* ── Kolon: 2 stacked kart (üst + alt) ───────────────────────────── */
.pz-col {
    flex: 0 0 auto;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Tek kart: renkli frame + iç mock-up + alt label ─────────────── */
.pz-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pz-card__frame {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.18);
}
/* Tone varyantları — Shopify görselindeki renk paletinden esinli */
.pz-card[data-tone="peach"]    .pz-card__frame { background: linear-gradient(160deg, #FFD9C2 0%, #F6B895 100%); }
.pz-card[data-tone="cream"]    .pz-card__frame { background: linear-gradient(160deg, #FAF5EE 0%, #EDE5D6 100%); }
.pz-card[data-tone="lavender"] .pz-card__frame { background: linear-gradient(160deg, #ECE6F5 0%, #DCD2EC 100%); }
.pz-card[data-tone="violet"]   .pz-card__frame { background: linear-gradient(160deg, #F0B8E1 0%, #C089D9 100%); }
.pz-card[data-tone="coral"]    .pz-card__frame { background: linear-gradient(160deg, #FF8A75 0%, #ED5C44 100%); }

/* ── Kart altı label (icon + title + desc) ───────────────────────── */
.pz-card__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 4px;
}
.pz-card__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #0F172A;
    margin-top: 1px;
}
.pz-card__icon svg { width: 100%; height: 100%; }
.pz-card__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pz-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}
.pz-card__desc {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

/* ── Mock-up varyantları (kart içindeki sahte arayüz) ─────────────
   Her preview kendi renk/font/spacing'i ile uyumlu küçük illüstrasyon.
   Sahte içerik olduğu için aria-hidden ve flex/inline-flex ile boyutlanır. */
.pz-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pz-mock {
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.15);
    font-size: 10px;
    line-height: 1.4;
    color: #0F172A;
}

/* Form mock */
.pz-mock--form h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
}
.pz-mock--form p {
    margin: 0 0 8px;
    font-size: 9px;
    color: #475569;
    line-height: 1.35;
}
.pz-mock__input {
    display: block;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    font-size: 9px;
    color: #94A3B8;
}
.pz-mock__btn {
    display: block;
    padding: 6px 10px;
    background: #0F172A;
    color: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 9px;
}
.pz-mock__btn--dark { background: #0F172A; }

/* Editor mock — "Title / Discount / Styling" CMS-style form */
.pz-mock--editor { display: flex; flex-direction: column; gap: 6px; }
.pz-mock--editor .pz-mock__editor-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 9px;
    color: #64748B;
}
.pz-mock--editor .pz-mock__editor-label { font-weight: 600; color: #0F172A; }
.pz-mock--editor .pz-mock__editor-pill {
    padding: 2px 6px;
    background: #FCE7F3;
    color: #BE185D;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
}
.pz-mock--editor .pz-mock__editor-change {
    color: #2563EB;
    font-size: 9px;
    text-decoration: underline;
}
.pz-mock--editor .pz-mock__editor-swatches {
    display: flex; gap: 4px; margin-top: 2px;
}
.pz-mock--editor .pz-mock__editor-swatches span {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.1);
}
.pz-mock--editor .pz-mock__editor-swatches span:nth-child(1) { background: #FBBF24; }
.pz-mock--editor .pz-mock__editor-swatches span:nth-child(2) { background: #34D399; }
.pz-mock--editor .pz-mock__editor-swatches span:nth-child(3) { background: #60A5FA; }
.pz-mock--editor .pz-mock__editor-swatches span:nth-child(4) { background: #F472B6; }

/* Automation mock */
.pz-mock--automation .pz-mock__row {
    display: flex; justify-content: flex-end; margin-bottom: 4px;
}
.pz-mock--automation .pz-mock__chip {
    display: inline-block;
    padding: 2px 6px;
    background: #F3E8FF;
    color: #6B21A8;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
}
.pz-mock--automation .pz-mock__cond {
    margin: 0 0 8px;
    padding: 6px 8px;
    background: #F9FAFB;
    border-radius: 4px;
    font-size: 9px;
    color: #374151;
}
.pz-mock--automation .pz-mock__branches {
    display: flex; gap: 8px; margin-bottom: 8px;
}
.pz-mock--automation .pz-mock__branch {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
}
.pz-mock--automation .pz-mock__branch.is-true  { background: #DCFCE7; color: #166534; }
.pz-mock--automation .pz-mock__branch.is-false { background: #FEE2E2; color: #991B1B; }
.pz-mock--automation .pz-mock__action {
    margin: 0;
    padding: 6px 8px;
    background: #F3E8FF;
    color: #6B21A8;
    border-radius: 4px;
    font-size: 9px;
}

/* Segment mock — daha geniş aspect ratio için frame'in iç-kart */
.pz-mock--segment {
    font-size: 9px;
}
.pz-mock__seg-head {
    display: flex; justify-content: space-between; margin-bottom: 6px;
    font-size: 9px;
}
.pz-mock__seg-head strong { color: #0F172A; }
.pz-mock__seg-head span   { color: #6B7280; }
.pz-mock__seg-rule {
    padding: 4px 6px;
    background: #F3F4F6;
    border-radius: 3px;
    margin-bottom: 6px;
}
.pz-mock__seg-rule code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    color: #475569;
}
.pz-mock__seg-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px 6px;
    font-size: 8px;
}
.pz-mock__seg-table > span:nth-child(-n+3) {
    font-weight: 700; color: #94A3B8;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 2px;
    margin-bottom: 2px;
}
.pz-tag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 600;
    text-align: center;
}
.pz-tag.green { background: #DCFCE7; color: #166534; }
.pz-tag.amber { background: #FEF3C7; color: #92400E; }

/* Messaging mock — peachy gift card */
.pz-mock--messaging {
    background: linear-gradient(180deg, #FFD9C2 0%, #F6B895 100%);
    color: #5B2A1B;
    text-align: center;
}
.pz-mock--messaging .pz-mock__hint {
    margin: 0 0 4px;
    font-size: 8px;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #5B2A1B;
}
.pz-mock--messaging h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.pz-mock--messaging .pz-mock__sub {
    margin: 0 0 10px;
    font-size: 9px;
    line-height: 1.3;
}
.pz-mock--messaging .pz-mock__btn--dark {
    display: inline-block;
    padding: 6px 14px;
}

/* Inbox mock */
.pz-mock--inbox .pz-mock__chathead {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.pz-mock--inbox .pz-mock__avatar {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8A75, #ED5C44);
    flex-shrink: 0;
}
.pz-mock--inbox .pz-mock__chathead strong { font-size: 10px; }
.pz-mock--inbox .pz-mock__msg {
    margin: 0 0 8px;
    padding: 6px 8px;
    background: #F3F4F6;
    border-radius: 8px 8px 8px 2px;
    font-size: 9px;
    line-height: 1.35;
    color: #374151;
}
.pz-mock--inbox .pz-mock__input {
    padding: 6px 8px;
    font-size: 9px;
    color: #94A3B8;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
}

/* Mobilde kolonlar biraz daha küçük + animasyon biraz hızlansın */
@media (max-width: 640px) {
    .pz-col { width: 200px; gap: 16px; }
    .pz-card__frame { border-radius: 14px; padding: 16px; }
    .pz-marquee { padding: 8px 0 64px; }
    .pz-marquee__track { gap: 18px; animation-duration: 45s; }
}

/* ============================================================================
   /pazarlama/ — Pop-Up Yönetimi tanıtım bölümü
   ----------------------------------------------------------------------------
   Shopify "Markaların pazarlama otomasyonu araçlarını nasıl kullandığını görün"
   alanının birebir yapısı, pop-up özelliğine uyarlandı.

   Sol kolon: başlık + marka tabları + "Kullanılan araçlar" (2 sütun ikon listesi)
              + müşteri alıntısı + atıf.
   Sağ kolon: sıcak tonlu büyük arka plan görseli (CSS gradient atmosferi)
              + ön planda iPhone mockup (titanyum rail, showcase ile uyumlu)
              + sağ alt köşede beyaz "Örnek Olay İncelemesi" kartı
              + sağ üst köşede dairesel ileri ok butonu (dekoratif).
   ============================================================================ */
.pz-popup {
    width: 100%;
    background: #ffffff;
    padding: 96px 24px 120px;
}
.pz-popup__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 80px;
    /* Sol kolon içeriği sağ kolondaki görsel kutusunun yüksekliğine göre
       dikey olarak ortalansın → stretch + iç flex justify-content: center. */
    align-items: stretch;
}

/* ── Sol kolon ──────────────────────────────────────────────────────── */
.pz-popup__copy {
    /* Tüm metin/tab/araç/alıntı blokları Poppins ile dizilir. Dikey eksende
       sağ kolondaki kompozisyonla hizalı olması için flex-column + center. */
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pz-popup__title {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 500;
    color: #0b1220;
    margin: 0 0 24px;
    letter-spacing: -.5px;
}

/* Marka tabları — Shopify referansındaki kapsül tab tarzı; aktif olan
   koyu zemin + beyaz metin, diğerleri yalın text-link görünümü. */
.pz-popup__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 36px;
}
.pz-popup__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.pz-popup__tab:hover {
    background: rgba(0,0,0,.04);
    color: #0b1220;
}
.pz-popup__tab.is-active {
    background: #0b1220;
    color: #ffffff;
}

/* Kullanılan araçlar başlığı + 2 sütun ikon listesi. Ikonlar gri tonlu
   stroke, label'lar 14px medium. Referans görseldeki Shopify stiliyle
   bire bir hizalı (~24px row gap, 16px column gap). */
.pz-popup__tools-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0b1220;
    margin: 0 0 16px;
}
.pz-popup__tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    margin-bottom: 36px;
}
.pz-popup__tools-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pz-popup__tools-col li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0b1220;
}
.pz-popup__tools-col svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #6b7280;
}

/* Alıntı — Poppins medium, referans görseldekiyle uyumlu typografi. */
.pz-popup__quote {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 500;
    color: #0b1220;
    letter-spacing: -.25px;
    max-width: 480px;
}
.pz-popup__attribution {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    max-width: 480px;
}

/* ── Sağ kolon: hero görsel + telefon + örnek olay kartı ─────────────── */
.pz-popup__visual {
    position: relative;
    aspect-ratio: 5 / 5.5;
    min-height: 540px;
    border-radius: 24px;
    overflow: visible;
}

/* Arka plan görseli — CSS gradient atmosferi (sıcak peach/cream).
   Gerçek bir model fotoğrafı yerine soft, fotografik bir alan hissi.
   Telefonun arkasında durur; sağ üstte dairesel ok butonu içerir. */
.pz-popup__hero {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 35%, rgba(255,210,180,.55) 0%, transparent 55%),
        radial-gradient(circle at 30% 75%, rgba(190,160,130,.45) 0%, transparent 50%),
        linear-gradient(155deg, #e8c9a8 0%, #c39872 45%, #6e4b2a 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
/* Hafif film grain hissi için ince transparan pattern */
.pz-popup__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 60% 50%, rgba(255,255,255,.18) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 90%, rgba(0,0,0,.12) 0%, transparent 55%);
    mix-blend-mode: overlay;
}
.pz-popup__hero-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 0;
    color: #0b1220;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pz-popup__hero-arrow:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 22px -8px rgba(0,0,0,.3);
}
.pz-popup__hero-arrow svg {
    width: 22px;
    height: 22px;
}

/* iPhone mockup — showcase ile aynı titanyum rail tipi çerçeve.
   Pop-up ekranı ortada konumlanır; arka plan görseliyle bindirmeli. */
.pz-popup__phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -50%);
    width: 280px;
    aspect-ratio: 9 / 19;
    background: linear-gradient(145deg, #2a2c30 0%, #1a1c1f 50%, #2a2c30 100%);
    border: 1.5px solid #9ea2a8;
    border-radius: 46px;
    padding: 11px;
    box-shadow:
        0 40px 80px -20px rgba(20,22,40,.45),
        0 14px 28px -10px rgba(20,22,40,.22),
        inset 0 0 0 1.5px rgba(0,0,0,.6),
        inset 0 0 0 2.5px rgba(255,255,255,.05);
    z-index: 3;
    transition: opacity .35s ease;
}
.pz-popup__phone.is-changing .pz-popup__phone-screen {
    animation: pzPopupFade .45s ease;
}
@keyframes pzPopupFade {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Dynamic Island */
.pz-popup__phone::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 23px;
    background: #000;
    border-radius: 12px;
    z-index: 6;
}
/* Status bar */
.pz-popup__phone-statusbar {
    position: absolute;
    top: 20px;
    left: 19px;
    right: 19px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    z-index: 7;
    pointer-events: none;
}
.pz-popup__phone-time { padding-left: 4px; line-height: 1; }
.pz-popup__phone-sysicons {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    padding-right: 4px;
}
.pz-popup__phone-sysicons svg { display: block; height: 9px; width: auto; color: #1a1a1a; }

/* Yan tuşlar — titanyum gradyan, telefon kenarından dışarı taşar */
.pz-popup__phone-btn {
    position: absolute;
    border-radius: 1.5px;
    z-index: 4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 1px 2px rgba(0,0,0,.25);
}
.pz-popup__phone-btn--vol-up,
.pz-popup__phone-btn--vol-dn {
    left: -3px;
    width: 3.5px;
    background: linear-gradient(90deg, #b4b7bc 0%, #6e7278 60%, #4a4d52 100%);
}
.pz-popup__phone-btn--vol-up { top: 22%; height: 30px; }
.pz-popup__phone-btn--vol-dn { top: 30%; height: 58px; margin-top: 22px; }
.pz-popup__phone-btn--power {
    right: -3px;
    top: 26%;
    width: 3.5px;
    height: 64px;
    background: linear-gradient(90deg, #4a4d52 0%, #6e7278 40%, #b4b7bc 100%);
}

/* Telefon ekranı: 3 katmanlı yapı (modal hissi için)
   ─────────────────────────────────────────────────────
   1. .phone-page  → arka plan mağaza sayfası (mock UI)
   2. .phone-dim   → yarı saydam koyu overlay (karartma)
   3. .phone-popup → ön planda yüzen modal + X butonu     */
.pz-popup__phone-screen {
    position: relative;
    height: 100%;
    background: #f7f7f5;
    border-radius: 35px;
    overflow: hidden;
    padding: 44px 0 0;
    /* Telefon önizlemesi içindeki tüm metinler Poppins kullanır
       (status bar, marka logo, ürün meta, kategori pill, pop-up
       eyebrow/title/desc/input/btn/disclaimer dahil). */
    font-family: 'Poppins', sans-serif;
}

/* ── Katman 1: arka plan mağaza sayfası ─────────────── */
.pz-popup__phone-page {
    position: absolute;
    inset: 44px 0 0;
    padding: 10px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    /* Pop-up'ı vurgulamak için arka planı hafif desature ediyoruz */
    filter: saturate(.95) brightness(.98);
}

/* Top nav: hamburger + marka logosu + sepet */
.pz-popup__phone-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 6px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pz-popup__phone-topnav-icon {
    width: 18px;
    height: 18px;
    color: #0b1220;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pz-popup__phone-topnav-icon svg { width: 100%; height: 100%; }

/* Marka logosu — top nav içinde merkezde; tab geçişinde sadece bu
   element içeriği değişir (JS dataset attribute ile bağlı). Poppins
   bold + geniş tracking ile minimal logo görünümü. */
.pz-popup__phone-brand {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #0b1220;
    text-align: center;
    flex: 1;
}

/* Hero ürün görseli — gradient mock; tab değişiminde renk swap olur. */
.pz-popup__phone-img {
    width: 100%;
    height: 110px;
    border-radius: 6px;
    background: linear-gradient(135deg, #d8c9b0, #6a4d2a);
    transition: background .35s ease;
}

/* Ürün meta: başlık + yıldız puanı */
.pz-popup__phone-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}
.pz-popup__phone-meta strong {
    font-size: 10px;
    font-weight: 700;
    color: #0b1220;
}
.pz-popup__phone-meta span {
    font-size: 8px;
    color: #6b7280;
    letter-spacing: .5px;
}

/* Kategori pill listesi — yatay scroll mock'ı */
.pz-popup__phone-cats {
    display: flex;
    gap: 5px;
    overflow: hidden;
}
.pz-popup__phone-cats span {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 500;
    background: rgba(0,0,0,.05);
    color: #4b5563;
    white-space: nowrap;
}
.pz-popup__phone-cats span.is-active {
    background: #0b1220;
    color: #ffffff;
}

/* Ürün gridi (2×2) — alt kısımda küçük mock kartlar */
.pz-popup__phone-pgrid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-height: 0;
}
.pz-popup__phone-pgrid span {
    border-radius: 5px;
    background: linear-gradient(135deg, #ebe4d5, #c9b48d);
    opacity: .7;
}
.pz-popup__phone-pgrid span:nth-child(2) { background: linear-gradient(135deg, #d6dfe4, #87a0ad); }
.pz-popup__phone-pgrid span:nth-child(3) { background: linear-gradient(135deg, #e8d6cc, #b6907e); }
.pz-popup__phone-pgrid span:nth-child(4) { background: linear-gradient(135deg, #dde0d5, #8e9c83); }

/* ── Katman 2: karartma overlay ───────────────────────
   Arka plan UI üzerine yarı saydam koyu veil koyar; pop-up'ın
   "modal olarak açıldığı" hissi gerçekçi olur. */
.pz-popup__phone-dim {
    position: absolute;
    inset: 44px 0 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    z-index: 2;
}

/* ── Katman 3: pop-up modal ───────────────────────────
   Overlay üzerinde dikey ortalanmış, gölgeli, hafif scale-in
   animasyonu ile "açıldı" hissi. */
.pz-popup__phone-popup {
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow:
        0 18px 38px -12px rgba(0,0,0,.4),
        0 6px 16px -6px rgba(0,0,0,.2);
    z-index: 3;
    animation: pzPopupModalIn .55s cubic-bezier(.16,.84,.32,1) backwards;
}
@keyframes pzPopupModalIn {
    0%   { opacity: 0; transform: translateY(-50%) scale(.92); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.pz-popup__phone.is-changing .pz-popup__phone-popup {
    animation: pzPopupModalIn .45s cubic-bezier(.16,.84,.32,1);
}

/* Hero görsel alanı — sadece "image" varyantında görünür (.is-image).
   Pop-up modal'ın üst kısmını tamamen bir görselle doldurur; alt kısımda
   compact metin + CTA kalır. Görsel ile metin arasında soft gradient
   geçişi (image kenarının fade'i) ile premium his. */
.pz-popup__phone-popup-hero {
    display: none;
    width: calc(100% + 32px);
    margin: -16px -16px 8px;
    height: 110px;
    overflow: hidden;
    position: relative;
    border-radius: 14px 14px 0 0;
    background: #1a0e07;
}
.pz-popup__phone-popup-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Görselin alt kenarında metin alanına yumuşak geçiş için ince gölge */
.pz-popup__phone-popup-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 24px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85));
    pointer-events: none;
}
.pz-popup__phone-popup.is-image .pz-popup__phone-popup-hero {
    display: block;
}
/* Image varyantında alt metin daha sıkı; eyebrow padding-right korunur (X) */
.pz-popup__phone-popup.is-image {
    padding-top: 0;
}
.pz-popup__phone-popup.is-image .pz-popup__phone-popup-close {
    background: rgba(255,255,255,.92);
    color: #0b1220;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.pz-popup__phone-popup.is-image .pz-popup__phone-popup-desc {
    /* Görsel zaten anlam taşıdığı için açıklama daha kısa görünür */
    font-size: 9.5px;
}

/* X kapatma butonu — sağ üst köşede; gerçek pop-up'larda bulunan
   ikonik kapanma butonunu simüle eder. Dekoratif (tabindex -1). */
.pz-popup__phone-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    border: 0;
    color: #4b5563;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pz-popup__phone-popup-close svg { width: 11px; height: 11px; }

.pz-popup__phone-popup-eyebrow {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b56a3a;
    text-transform: uppercase;
    padding-right: 22px; /* X butonu için yer aç */
}
.pz-popup__phone-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: #0b1220;
    line-height: 1.2;
    letter-spacing: -.2px;
}
.pz-popup__phone-popup-desc {
    font-size: 10px;
    color: #4b5563;
    line-height: 1.45;
    margin: 0 0 2px;
}
.pz-popup__phone-popup-input {
    display: block;
    padding: 8px 10px;
    font-size: 9px;
    color: #94a3b8;
    background: #f8f8f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-top: 2px;
}
.pz-popup__phone-popup-input[hidden] { display: none; }
.pz-popup__phone-popup-btn {
    display: block;
    text-align: center;
    padding: 9px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #ffffff;
    background: #0b1220;
    border-radius: 6px;
    margin-top: 2px;
}
.pz-popup__phone-popup-disclaimer {
    font-size: 7.5px;
    color: #9ca3af;
    text-align: center;
    margin-top: 4px;
}

/* Örnek olay incelemesi kartı — sağ alt köşede beyaz overlay; telefon
   ile arka plana 12-18px boşluk bırakır, hafif gölge ile yüzer.  */
.pz-popup__case {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 260px;
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow:
        0 18px 40px -10px rgba(0,0,0,.18),
        0 6px 14px -4px rgba(0,0,0,.08);
    z-index: 4;
}
.pz-popup__case-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pz-popup__case-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0b1220;
    line-height: 1.25;
    letter-spacing: -.2px;
}
.pz-popup__case-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #4b5563;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pz-popup { padding: 64px 20px 80px; }
    .pz-popup__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .pz-popup__copy { padding-top: 0; }
    .pz-popup__title { font-size: 28px; }
    .pz-popup__visual { aspect-ratio: 4 / 5; min-height: 520px; }
    .pz-popup__case { right: 16px; bottom: 16px; width: 240px; }
}

@media (max-width: 560px) {
    .pz-popup { padding: 48px 16px 64px; }
    .pz-popup__title { font-size: 26px; }
    .pz-popup__tools { grid-template-columns: 1fr; gap: 12px; }
    .pz-popup__quote { font-size: 18px; }
    .pz-popup__phone { width: 240px; transform: translate(-50%, -50%); }
    .pz-popup__case {
        position: static;
        width: auto;
        margin: 24px 0 0;
    }
    .pz-popup__visual {
        aspect-ratio: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pz-popup__hero {
        position: relative;
        inset: auto;
        height: 460px;
        width: 100%;
    }
    .pz-popup__phone {
        position: absolute;
        top: 230px;
        left: 50%;
    }
    .pz-popup__hero-arrow { top: 14px; right: 14px; width: 44px; height: 44px; }
}

/* ============================================================================
   /pazarlama/ — Pazarlama Entegrasyonları (Google · Meta · TikTok)
   ----------------------------------------------------------------------------
   Shopify "Sosyal Medya — Takipçilerden müşterilere" bölümünün birebir yapısı.
   3 koyu siyah kart yan yana + alt 2 sütun (CTA + dashboard mockup'ı).
   Tüm yazılar Poppins; container 1240px; pz-popup ile aynı padding ritmi.
   ============================================================================ */
.pz-channels {
    width: 100%;
    background: #ffffff;
    padding: 24px 24px 120px;
    font-family: 'Poppins', sans-serif;
}
.pz-channels__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ── Üst başlık satırı: sol başlık + sağ paragraf ───────────────────── */
.pz-channels__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: flex-end;
    margin-bottom: 32px;
}
.pz-channels__head-left {
    display: flex;
    flex-direction: column;
}
.pz-channels__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
}
.pz-channels__title {
    margin: 0;
    font-size: 28px;
    line-height: 1.18;
    font-weight: 500;
    color: #0b1220;
    letter-spacing: -.5px;
}
.pz-channels__head-right {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 480px;
    justify-self: end;
}

/* ── 3 koyu kart yan yana ───────────────────────────────────────────── */
.pz-channels__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 64px;
}
.pz-channels__card {
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,.04) 0%, transparent 50%),
        linear-gradient(160deg, #14171c 0%, #0a0c10 100%);
    border-radius: 16px;
    padding: 28px;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 260px;
}

/* Brand mark: logo + isim */
.pz-channels__card-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pz-channels__card-logo {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pz-channels__card-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pz-channels__card-name {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -.2px;
}

/* Açıklama paragrafı */
.pz-channels__card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    flex: 1;
}

/* Alt link: beyaz underline */
.pz-channels__card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: opacity .2s ease, text-decoration-thickness .2s ease;
}
.pz-channels__card-link::after {
    content: '→';
    font-size: 16px;
    transform: translateX(0);
    transition: transform .2s ease;
}
.pz-channels__card-link:hover {
    text-decoration-thickness: 2px;
}
.pz-channels__card-link:hover::after {
    transform: translateX(3px);
}

/* ── Alt: keşfet CTA + 2 ek entegrasyon kategorisi kartı ──────────────
   Grid 1fr/2fr → sol CTA tek bir kart genişliği, sağ 2 kart × 1fr.
   Üst row'daki 3 kartla (1fr/1fr/1fr) dikey eksende birebir hizalı.
   Gap üst kart grid'iyle (16px) aynı. */
.pz-channels__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
    align-items: stretch;
}
.pz-channels__cta-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.pz-channels__cta-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.22;
    font-weight: 600;
    color: #0b1220;
    letter-spacing: -.4px;
    max-width: 360px;
}
.pz-channels__cta-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    max-width: 420px;
}
.pz-channels__cta-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 13px 22px;
    background: transparent;
    border: 1.5px solid #0b1220;
    border-radius: 999px;
    color: #0b1220;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.pz-channels__cta-btn:hover {
    background: #0b1220;
    color: #ffffff;
}

/* Sağ: alt CTA'ya paralel 2 ek entegrasyon kategorisi kartı (Google/Meta/
   TikTok ile aynı koyu kart stilini paylaşır). 2 sütun grid; dar
   ekranlarda tek sütuna düşer. */
.pz-channels__cta-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-self: stretch;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pz-channels { padding: 16px 20px 80px; }
    .pz-channels__head {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: flex-start;
    }
    .pz-channels__head-right { justify-self: start; max-width: none; }
    .pz-channels__title { font-size: 28px; }

    .pz-channels__cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 48px;
    }
    .pz-channels__card { min-height: 0; }

    .pz-channels__cta {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pz-channels__cta-title { font-size: 26px; }
    .pz-channels__cta-right {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .pz-channels { padding: 8px 16px 64px; }
    .pz-channels__title { font-size: 24px; }
    .pz-channels__card { padding: 22px; gap: 14px; }
    .pz-channels__cta-right { grid-template-columns: 1fr; }
}

/* ============================================================================
   /basinda-biz/ — Press / "Basında Biz" sayfası
   ----------------------------------------------------------------------------
   Yapı:
     • Hero: küçük eyebrow + büyük başlık + lead paragrafı
     • Tabs: 3 segment (Görsel / Yazılı / Dijital Medya) — aktif olan beyaz,
       diğerleri açık gri arka plan
     • Yıl navigasyonu: ← 2026 → (kırmızı vurgu)
     • 4-kolon kart grid'i: tarih + logo + başlık + görsel + kanal adı
   ========================================================================== */

/* Tek kesintisiz degrade: hero'nun lavantası alta doğru açık pembe-beyaza
   yumuşar — hero arka planı transparan olduğu için renk geçişi dikişsizdir. */
.press-page {
    background: linear-gradient(180deg,
        #D6D9EA 0%,
        #C9CDE1 24%,
        #E9E4F0 52%,
        #FBF2FB 78%,
        #FFF9FF 100%);
    /* Üst boşluk sabit header'ın altında kalmamak için — degrade Y=0'dan
       başladığı için header arkasında da renk sürer, dikiş oluşmaz.
       Alt dolgu padding olarak verildi: boşluk degrade zeminin içinde kalır,
       footer'a bitişik olduğu için arka plan kesilmez. */
    padding: 80px 0 72px;
}
.press-page__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
/* Sayfa degrade zeminle bitip footer'a bitişik dursun (main ile footer
   arasında script etiketi olduğu için genel kardeş seçici) */
.press-page ~ footer,
.press-page ~ .footer,
.press-page ~ #footer { margin-top: 0; }

.press-page__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.press-page__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #027BC4;
    background: rgba(2, 123, 196, 0.10);
    border-radius: 999px;
}
.press-page__title {
    margin: 0 0 16px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0F172A;
}
.press-page__lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #475569;
}

/* ── Hero v2 — solda başlık + lead, sağda foto kart galerisi ──────────
   Referans: beyaz kalın çerçeveli, yuvarlatılmış köşeli, hafif üst üste
   binen 3 fotoğraf kartı + arkada pastel dekoratif blob'lar.
   Kutu (.press-page__head--v2) viewport edge-to-edge full-width arka plan;
   içerik (.press-page__head-inner) ise 1200px container'da boxed kalır. */
.press-page__head--v2 {
    text-align: left;
    max-width: none;
    margin: 0 0 64px;
    padding: 56px 0 64px;
    /* Arka plan .press-page üzerindeki tek degradeden gelir (dikişsiz geçiş) */
    background: transparent;
    border-radius: 0;
    display: block;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.press-page__head-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.press-hero__text {
    max-width: 560px;
}
.press-page__head--v2 .press-page__title {
    margin: 0 0 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: #0B1220;
}
.press-page__head--v2 .press-page__lead {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #64748B;
    max-width: 480px;
}

/* — Foto galeri: oranla ölçeklenen relative konteyner, % konumlu kartlar */
.press-hero__gallery {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 0.95;
    margin-left: auto;
}
.press-hero__photo {
    position: absolute;
    margin: 0;
    background: #fff;
    border: 7px solid #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, .04),
        0 24px 48px -20px rgba(15, 23, 42, .28),
        0 8px 18px -8px rgba(15, 23, 42, .10);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.press-hero__photo:hover { transform: translateY(-5px); }
.press-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 17px;
}
.press-hero__photo--a { top:  3%; left: 17%; width: 45%; aspect-ratio: 1 / 1.02; z-index: 2; }
.press-hero__photo--b { top: 30%; left: 55%; width: 41%; aspect-ratio: 1 / 0.95; z-index: 3; }
.press-hero__photo--c { top: 57%; left:  1%; width: 33%; aspect-ratio: 1 / 1;    z-index: 2; }

/* — Dekoratif pastel blob'lar (kartların arkasında) */
.press-hero__blob {
    position: absolute;
    z-index: 1;
}
.press-hero__blob--circle {
    top: 0;
    left: 32%;
    width: 17%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #BFDBFE;
}
.press-hero__blob--square {
    bottom: 2%;
    left: 63%;
    width: 10%;
    aspect-ratio: 1;
    border-radius: 22%;
    background: #F3E8FF;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .press-page__head--v2 {
        padding: 40px 0 48px;
        text-align: center;
    }
    .press-page__head-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .press-hero__text { max-width: 620px; margin: 0 auto; }
    .press-page__head--v2 .press-page__lead { margin: 0 auto; max-width: 560px; }
    .press-hero__gallery { margin: 0 auto; max-width: 480px; }
}
@media (max-width: 720px) {
    .press-page__head--v2 {
        padding: 32px 0 40px;
        margin-bottom: 40px;
    }
    .press-page__head-inner { padding: 0 16px; }
    .press-page__head--v2 .press-page__title { font-size: 30px; }
    .press-page__head--v2 .press-page__lead  { font-size: 14.5px; }
    .press-hero__photo { border-width: 5px; border-radius: 18px; }
    .press-hero__photo img { border-radius: 13px; }
}

/* ── Tab grubu (segmented control) ─────────────────────────────────── */
/* ── Filtre bölümü başlığı (tab'ların üstü, ortalı) ──────────────────── */
.press-tabs-section {
    margin: 0 auto 40px;
    text-align: center;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.press-tabs-section__head {
    max-width: 760px;
    margin: 0 auto 28px;
}
.press-tabs-section__title {
    margin: 0 0 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.012em;
    color: #0B1220;
}
.press-tabs-section__lead {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #64748B;
}

/* ── Tab pill row (yatay flex, wrap) ────────────────────────────────── */
.press-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    border-bottom: 0;
}
.press-tab {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F1F3F6;
    border: 0;
    border-radius: 8px;
    padding: 11px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #475569;
    cursor: pointer;
    transition: background-color .2s ease,
                color .2s ease,
                transform .15s ease;
    line-height: 1.2;
    white-space: nowrap;
}
.press-tab:not(.is-active):hover {
    background: #E5E7EB;
    color: #1F2937;
}
.press-tab.is-active {
    background: #5A31F4;
    color: #FFFFFF;
    font-weight: 600;
}
.press-tab.is-active:hover {
    background: #4A23E6;
}
.press-tab:focus-visible {
    outline: 2px solid #5A31F4;
    outline-offset: 3px;
}

/* ── Grid + kartlar ─────────────────────────────────────────────── */
.press-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
@media (max-width: 1024px) {
    .press-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
    .press-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .press-grid { grid-template-columns: 1fr; }
}
/* Referans tasarım: beyaz yuvarlatılmış kutu — üstte pastel ikon + tarih,
   kalın başlık, gri kanal adı, altta yuvarlatılmış görsel. */
.press-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.press-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.30);
}
.press-card.is-hidden { display: none; }

.press-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    text-decoration: none;
    color: inherit;
}
.press-card__link:focus-visible {
    outline: 2px solid #5A31F4;
    outline-offset: 2px;
    border-radius: 16px;
}
.press-card__title {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #0F172A;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
}
.press-card__meta {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
}
.press-card__media {
    position: relative;
    margin-top: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F1F5F9;
    border-radius: 12px;
}
.press-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.press-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 16px;
    font-size: 15px;
    color: #6B7280;
}

@media (max-width: 768px) {
    .press-page { padding: 56px 0 56px; }
    .press-page__title { font-size: 32px; }
    .press-page__lead  { font-size: 15px; }
    .press-tabs-section__title { font-size: 24px; }
    .press-tabs-section__lead  { font-size: 14px; }
    .press-tabs { gap: 8px; }
    .press-tab { padding: 10px 18px; font-size: 12.5px; }
    .press-year__label { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WhatsApp destek butonu — "Minimal outline" (Varyant D).
   Sağ-alt köşede sabit, beyaz zeminli ince çerçeveli hap; ikon marka
   yeşili, hover'da tüm buton dolu yeşile geçer. Tek link, JS yok.
   ═════════════════════════════════════════════════════════════════════════ */
.wa-outline {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px 0 16px;
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    border-radius: 7px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1px;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}
.wa-outline:hover {
    background: #25D366;
    color: #FFFFFF;
    border-color: #25D366;
    transform: translateY(-1px);
}
.wa-outline:focus-visible {
    outline: 3px solid #BBF7D0;
    outline-offset: 3px;
}
.wa-outline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #25D366;
    transition: color 0.18s ease;
}
.wa-outline:hover .wa-outline__icon { color: #FFFFFF; }
.wa-outline__icon svg { width: 22px; height: 22px; display: block; }
.wa-outline__text { line-height: 1; white-space: nowrap; }

/* Reduced motion — hover translate'i devre dışı. */
@media (prefers-reduced-motion: reduce) {
    .wa-outline:hover { transform: none; }
}

/* Mobil (max-width: 640px) — konum köşeye yaklaşır. */
@media (max-width: 640px) {
    .wa-outline {
        right: 16px;
        bottom: 16px;
        height: 44px;
        padding: 0 14px 0 12px;
        font-size: 13.5px;
    }
    .wa-outline__icon svg { width: 20px; height: 20px; }
}

/* Lightbox açıkken görünmesin — video/modal odaklamayı bozmasın. */
html.has-lightbox .wa-outline { display: none; }
@media (max-width: 640px) {
    .video-lightbox { padding: 16px; }
    .video-lightbox__close {
        top: 10px; right: 10px;
        width: 38px; height: 38px;
    }
    .video-lightbox__close svg { width: 18px; height: 18px; }
}

/* ── Sanal POS / Ödeme Entegrasyonları (Tally-stili minimal showcase) ────
   2-col header (sol başlık + sağ illüstrasyon) + 4-col flat grid.
   Stagger fade-in: IntersectionObserver + CSS transition (delay nth-child). */
.payments {
    width: 100%;
    /* panel-showcase ile aynı düzen: ekran yüksekliğine sığsın, içerik dikey ortalı */
    min-height: 100vh;
    /* Referans görseldeki gibi: koyu lacivert → mavi-orta → koyu lacivert.
       3-stop yatay gradient (#010624 → #051342 → #010624), üstüne ince
       beyaz nokta gridi (24×24px). Auroralar kaldırıldı, sadece base palet. */
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1.6px),
        linear-gradient(90deg,
            #010624 0%,
            #051342 50%,
            #010624 100%);
    background-size: 24px 24px, auto;
    background-position: 0 0, 0 0;
    color: #ffffff;
    padding: 64px 0;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 640px) {
    .payments { padding: 80px 0; }
}
@media (min-width: 1024px) {
    .payments { padding: 96px 0; }
}
.payments__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 1024px) {
    .payments__container { padding: 0 32px; }
}

/* ── Header: 1 col → 2 col (≥1024px) ─────────────────────────────
   Sol: payments__visual (gri zemin kart + ağaç bağlantı + 9 logo tile)
   Sağ: payments__head-text (başlık + alt metin)
   DOM sırası: visual → text. Mobilde de illustrasyon üstte. */
.payments__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 1024px) {
    .payments__head {
        grid-template-columns: 1.05fr .95fr;
        gap: 56px;
        align-items: center;
    }
}
.payments__head-text {
    max-width: 520px;
}

/* ── Sol illustrasyon (transparent — gri kart kaldırıldı) ── */
.payments__visual {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payments__visual-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
}
/* Tile hover — sadece drop-shadow (SVG <g>'nin transform attribute'u ile
   CSS transform çakışıp titreme oluşturmasın diye transform KULLANILMIYOR). */
.payments__visual-tile-group > g {
    transition: filter .2s ease;
}
.payments.is-in .payments__visual-tile-group > g:hover {
    filter: drop-shadow(0 8px 18px rgba(2, 123, 197, 0.45));
}

/* Reduced-motion: enerji partikülleri tamamen gizlensin */
@media (prefers-reduced-motion: reduce) {
    .payments__visual-sparks { display: none; }
}
.payments__visual-tile-group > g > rect {
    transition: stroke .2s ease;
}
.payments.is-in .payments__visual-tile-group > g:hover > rect {
    stroke: rgba(255, 255, 255, 0.75);
}
/* Pill etiket — payments başlık/alt-metin sandviçinde kullanılır.
   Görsel: koyu yarı-saydam zemin (#ffffff %6 opacity), ince beyaz çerçeve
   (%12 opacity), sol başta küçük outline daire ikon, beyaz metin. */
.payments__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
}
.payments__badge-dot {
    width: 12px;
    height: 12px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
/* Üst etiket → başlığa boşluk */
.payments__badge + .payments__title { margin-top: 18px; }

.payments__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.payments__title-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.payments__title-mark-text {
    position: relative;
    z-index: 1;
}
.payments__title-mark-line {
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 100%;
    height: 20px;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 3px 8px rgba(2, 123, 196, 0.32));
}
/* Stroke-draw: section viewport'a girince çizilir (.payments.is-in JS ile eklenir) */
.payments__title-mark-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) 0.15s;
}
.payments.is-in .payments__title-mark-path {
    stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .payments__title-mark-path {
        transition: none;
        stroke-dashoffset: 0;
    }
}
.payments__subtitle {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 640px) {
    .payments__subtitle { font-size: 16px; }
}

/* ── Sağ illüstrasyon ──────────────────────────────────────────── */
.payments__head-illo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.payments__head-illo svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

/* ── Grid: 1 → 2 → 3 → 4 col ────────────────────────────────── */
.payments__list {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 32px;
}
@media (min-width: 640px) {
    .payments__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .payments__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .payments__list { grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
}

.payments__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    /* stagger fade-in (default: gizli) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.payments.is-in .payments__item {
    opacity: 1;
    transform: translateY(0);
}
.payments.is-in .payments__item:nth-child(1)  { transition-delay: 0.00s; }
.payments.is-in .payments__item:nth-child(2)  { transition-delay: 0.06s; }
.payments.is-in .payments__item:nth-child(3)  { transition-delay: 0.12s; }
.payments.is-in .payments__item:nth-child(4)  { transition-delay: 0.18s; }
.payments.is-in .payments__item:nth-child(5)  { transition-delay: 0.24s; }
.payments.is-in .payments__item:nth-child(6)  { transition-delay: 0.30s; }
.payments.is-in .payments__item:nth-child(7)  { transition-delay: 0.36s; }
.payments.is-in .payments__item:nth-child(8)  { transition-delay: 0.42s; }
.payments.is-in .payments__item:nth-child(9)  { transition-delay: 0.48s; }
.payments.is-in .payments__item:nth-child(10) { transition-delay: 0.54s; }
.payments.is-in .payments__item:nth-child(11) { transition-delay: 0.60s; }
.payments.is-in .payments__item:nth-child(12) { transition-delay: 0.66s; }

.payments__item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.payments__item-icon img,
.payments__item-icon svg {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 9px;
}
.payments__item-img {
    object-fit: contain;
    background: #ffffff;
}
/* Logo asset varsa monogram'ı gizle (fallback davranışı).
   img onerror ile DOM'dan kaldırılırsa :has(img) false olur ve monogram görünür. */
.payments__item-icon:has(img) .payments__item-mono {
    display: none;
}
.payments__item-body {
    min-width: 0;
}
.payments__item-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0a1f38;
    letter-spacing: -0.01em;
}
.payments__item-desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .payments__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT-CTA — Shopify "Build with speed" esinli getting-started düzeni
   Beyaz zemin · merkez başlık · 2-col grid (sol: 2 üst üste binmiş eğik
   fotoğraf kartı; sağ: 3 numaralı adım listesi + siyah pill CTA).
   Hover/focus/click ile aktif adım değişir → soldaki .cc-photos seti
   opacity transition ile yumuşakça yer değiştirir.
   Önceki mor panel / sand / lavanta / orbit-avatar / form stilleri silindi.
   ═══════════════════════════════════════════════════════════════════════ */
.contact-cta {
    width: 100%;
    background: #ffffff;
    padding: 64px 0;
}
@media (min-width: 640px) {
    .contact-cta { padding: 80px 0; }
}
@media (min-width: 1024px) {
    .contact-cta { padding: 104px 0; }
}
.contact-cta__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;            /* boxed kalır, iç margin yok */
}

/* ── 2-kolon grid (mobile: tek kolon) ───────────────────────────────── */
.contact-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 768px) {
    .contact-cta__grid {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
}
@media (min-width: 1024px) {
    .contact-cta__grid {
        /* Sol sütun video, sağ sütun gri "stepframe" — sağ sütun biraz büyütüldü
           (1.4/1 → 1.15/1) ki başlık + 3 kart rahat nefes alsın. */
        grid-template-columns: 1.15fr 1fr;
        gap: 64px;
    }
}

/* ── Sol: 3 fotoğraf seti (overlapping, eğik) ───────────────────────── */
.contact-cta__media {
    position: relative;
    height: 360px;
}
@media (min-width: 640px) { .contact-cta__media { height: 420px; } }
@media (min-width: 1024px) { .contact-cta__media { height: 480px; } }

.cc-photos {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.cc-photos.is-active {
    opacity: 1;
    pointer-events: auto;
}

.cc-photo {
    width: 180px;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 44px -22px rgba(15, 23, 42, 0.32),
                0 8px 16px -8px rgba(15, 23, 42, 0.14);
    flex-shrink: 0;
    background: #f1f5f9;
}
@media (min-width: 640px) {
    .cc-photo { width: 220px; height: 300px; }
}
@media (min-width: 1024px) {
    .cc-photo { width: 240px; height: 330px; }
}
.cc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* İki kart üst üste, biri sola/aşağı biri sağa/yukarı eğik */
.cc-photo--a { transform: rotate(-4deg) translate(28px, 0); z-index: 1; }
.cc-photo--b { transform: rotate(3deg) translate(-32px, 18px); z-index: 2; }

/* Video varyantı: tek kart, eğim yok, ortalı, LANDSCAPE 16:9 oranlı.
   Step 1'in iki stacked foto'su yerine tek video gösterilir.
   Video kaynağı 3580×2018 (16:9) — aspect-ratio ile cropsuz görüntü. */
.cc-photo--video {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    transform: none;
    z-index: 3;
    background: #0f172a;     /* video yüklenirken yumuşak fallback */
}
@media (min-width: 640px) {
    .cc-photo--video { max-width: 480px; }
}
@media (min-width: 1024px) {
    .cc-photo--video { max-width: 600px; }
}
.cc-photo--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Step video kartlarının üzerindeki "büyüt" butonu ────────────────
   Hover/focus ile fade-in olur, panel-showcase'deki ile aynı görsel
   dile sahip. Mobilde (hover: none) yarı-şeffaf kalıcı görünür. */
.cc-photo__expand {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.cc-photo__expand svg { width: 16px; height: 16px; }
.cc-photo--video:hover .cc-photo__expand,
.cc-photo--video:focus-within .cc-photo__expand,
.cc-photo__expand:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.cc-photo__expand:hover { background: rgba(2, 123, 196, 0.9); }
.cc-photo__expand:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}
@media (hover: none) {
    .cc-photo__expand { opacity: 0.85; transform: none; }
}

/* ── Sağ: gri "stepframe" — Shopify "segmentasyon kartları" esinli ──────
   Açık gri zemin (#F1F2F4) içinde:
     1) Bölüm başlığı (cc-stepframe__title)
     2) 3 adım kartı (cc-steplist)
   Her kart: sol ikon + başlık + 1 satır açıklama. Hover/aktif durumda
   kart kenarı koyulaşır, hafif gölge belirir, ikon emerald tonuna döner.
   Sol taraftaki video swap mantığı aynı şekilde korunur. */
.contact-cta__steps {
    width: 100%;
    background: transparent;
    border: 1px solid #D1D5DB;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
@media (min-width: 640px) { .contact-cta__steps { padding: 28px; } }
@media (min-width: 1024px) { .contact-cta__steps { padding: 32px; gap: 28px; } }

.cc-stepframe__title {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    color: #0F172A;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.cc-steplist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cc-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    outline: none;
}
.cc-step:hover,
.cc-step:focus-visible {
    background: #FFFFFF;
    border-color: var(--brand);
    box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .18);
}
/* .is-active sınıfı sadece JS video swap mantığı için işaretleyici;
   kartın görsel state'ini DEĞİŞTİRMEZ — kullanıcı yalnızca :hover ile
   beyaz zemine ve emerald ikona geçişi görür. */

.cc-step__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: color .25s ease;
}
.cc-step__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cc-step:hover .cc-step__icon,
.cc-step:focus-visible .cc-step__icon {
    color: var(--brand);
}

.cc-step__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cc-step__text {
    font-size: 17px;
    font-weight: 400;
    color: #0F172A;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.cc-step__desc {
    font-size: 14px;
    font-weight: 400;
    color: #64748B;
    line-height: 1.55;
}
@media (min-width: 640px) {
    .cc-step { padding: 24px 26px; gap: 20px; }
    .cc-step__icon { width: 30px; height: 30px; }
}
@media (min-width: 900px) {
    .cc-steplist { gap: 14px; }
    .cc-step { padding: 26px 28px; }
}

/* ── "Hemen Başlayın" — siyah pill, beyaz yazı ──────────────────────── */
.contact-cta__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 32px;
    padding: 13px 28px;
    border-radius: 999px;
    background: #0F172A;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-cta__cta:hover {
    background: #1E293B;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 42, 0.35);
}

/* ── Reduced motion: opacity geçişlerini kapat ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cc-photos { transition: none; }
    .contact-cta__cta { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MARKETPLACES — Pazar yeri entegrasyonları
   payments ile aynı tasarım dilinde (minimal Tally-style):
   2-col head + flat grid. SVG monogram fallback img onerror ile.
   Sadece farkı: title underline gradient turuncu-kırmızı tonlu (pazar yeri
   teması) ve grid hover'da hafif yükselen kart efekti var.
   ═══════════════════════════════════════════════════════════════════════ */
.marketplaces {
    width: 100%;
    /* panel-showcase / payments ile aynı düzen: viewport yüksekliğine sığsın */
    min-height: 100vh;
    background: #f8fafc;        /* hafif kül — payments'tan ayırt etmek için */
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 640px) {
    .marketplaces { padding: 80px 0; }
}
@media (min-width: 1024px) {
    .marketplaces { padding: 96px 0; }
}
.marketplaces__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 1024px) {
    .marketplaces__container { padding: 0 32px; }
}

/* ── Header: 1 col → 2 col (≥1024px) ───────────────────────────── */
.marketplaces__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 1024px) {
    .marketplaces__head {
        grid-template-columns: 1.1fr .9fr;
        gap: 48px;
        align-items: start;
    }
}
.marketplaces__head-text { max-width: 560px; }
.marketplaces__title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0a1f38;
}
.marketplaces__title-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.marketplaces__title-mark-text {
    position: relative;
    z-index: 1;
}
.marketplaces__title-mark-line {
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 100%;
    height: 20px;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 3px 8px rgba(255, 106, 26, 0.32));
}
/* Stroke-draw: section viewport'a girince çizilir (.marketplaces.is-in JS) */
.marketplaces__title-mark-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) 0.15s;
}
.marketplaces.is-in .marketplaces__title-mark-path {
    stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .marketplaces__title-mark-path {
        transition: none;
        stroke-dashoffset: 0;
    }
}
.marketplaces__subtitle {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: #64748b;
}
@media (min-width: 640px) {
    .marketplaces__subtitle { font-size: 16px; }
}

/* ── Sağ illüstrasyon ──────────────────────────────────────────── */
.marketplaces__head-illo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.marketplaces__head-illo svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

/* ── Grid: 1 → 2 → 3 → 4 col ────────────────────────────────── */
.marketplaces__list {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .marketplaces__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .marketplaces__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .marketplaces__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 64px;
    }
}

.marketplaces__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

    /* stagger fade-in (default: gizli) */
    opacity: 0;
    transform: translateY(20px);
}
.marketplaces.is-in .marketplaces__item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s ease,
                box-shadow .35s ease, border-color .35s ease;
}
.marketplaces__item:hover {
    transform: translateY(-3px);
    border-color: rgba(2, 123, 196, 0.25);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18);
}
.marketplaces.is-in .marketplaces__item:nth-child(1) { transition-delay: 0.00s; }
.marketplaces.is-in .marketplaces__item:nth-child(2) { transition-delay: 0.06s; }
.marketplaces.is-in .marketplaces__item:nth-child(3) { transition-delay: 0.12s; }
.marketplaces.is-in .marketplaces__item:nth-child(4) { transition-delay: 0.18s; }
.marketplaces.is-in .marketplaces__item:nth-child(5) { transition-delay: 0.24s; }
.marketplaces.is-in .marketplaces__item:nth-child(6) { transition-delay: 0.30s; }
.marketplaces.is-in .marketplaces__item:nth-child(7) { transition-delay: 0.36s; }
.marketplaces.is-in .marketplaces__item:nth-child(8) { transition-delay: 0.42s; }
.marketplaces.is-in .marketplaces__item:nth-child(9) { transition-delay: 0.48s; }

.marketplaces__item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.marketplaces__item-icon img,
.marketplaces__item-icon svg {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 10px;
}
.marketplaces__item-img {
    object-fit: contain;
    background: #ffffff;
}
/* Logo asset varsa monogram'ı gizle (img onerror DOM'dan kaldırırsa monogram görünür). */
.marketplaces__item-icon:has(img) .marketplaces__item-mono {
    display: none;
}
.marketplaces__item-body { min-width: 0; }
.marketplaces__item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0a1f38;
    letter-spacing: -0.01em;
}
.marketplaces__item-desc {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .marketplaces__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .marketplaces__item:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .brand-strip { padding: 18px 0 20px; }
    /* Marquee aktif; sadece boyut/aralık ince ayarı. */
    .brand-strip__row { gap: 36px; animation-duration: 32s; }
    .brand-strip__item,
    .brand-strip__item img { height: 16px; max-height: 16px; }
    .brand-strip__viewport {
        margin-left: 16px;
        margin-right: 16px;
        -webkit-mask-image: linear-gradient(90deg,
            #000 0, #000 calc(100% - 32px), transparent 100%);
                mask-image: linear-gradient(90deg,
            #000 0, #000 calc(100% - 32px), transparent 100%);
    }
}

/* Kısa masaüstü penceresi (laptop / yatay monitör) — brands sıkışır.
   min-width şart: iPhone 15 Pro'da Safari çubuğu açılınca innerHeight
   ~660–720'ye düşer, kapanınca ~850'ye çıkar; max-height tek başına
   her kaydırmada layout değiştirip sayfayı büyütüp küçültür. */
@media (min-width: 961px) and (max-height: 860px) {
    .topfold > .brands .brands__copy { padding: 20px 16px; gap: 12px; }
    .topfold > .brands .brands__title { font-size: 28px; line-height: 1.12; }
    .topfold > .brands .brands__media--diagram { padding: 12px 24px; }
    .topfold > .brands .diag-stats__card { min-height: 160px; padding: 10px 14px 8px; }
    .topfold > .brands .diag-phone { flex: 0 0 100px; }
    .topfold > .brands .diag-phone__frame { width: 116px; height: 138px; }
    .topfold > .brands .diag-tile { width: 38px; height: 38px; padding: 5px; }
    .topfold > .brands .diag-channels { max-width: 360px; gap: 0; }
    .topfold > .brands .diag-lines { height: 22px; max-width: 360px; }
}
@media (min-width: 961px) and (max-height: 720px) {
    .topfold > .brands .brands__copy { padding: 16px 16px; gap: 8px; }
    .topfold > .brands .brands__title { font-size: 24px; line-height: 1.1; }
    .topfold > .brands .brands__desc  { display: none; }
    .topfold > .brands .brands__badge { display: none; }
    .topfold > .brands .brands__media--diagram { padding: 8px 16px; }
    .topfold > .brands .diag-stats { max-width: 320px; }
    .topfold > .brands .diag-stats__card { min-height: 140px; }
    .topfold > .brands .diag-phone { flex: 0 0 90px; }
    .topfold > .brands .diag-phone__frame { width: 104px; height: 124px; }
    .topfold > .brands .diag-channels { max-width: 320px; gap: 0; }
    .topfold > .brands .diag-tile { width: 32px; height: 32px; padding: 4px; }
    .topfold > .brands .diag-lines { height: 18px; max-width: 320px; }
}
/* ── Eski boxed override kaldırıldı: section artık payments gibi full-width
       background + 1280px container ile diğer bölümlerle aynı genişlikte
       hizalanıyor (bkz. line ~1886).                                       */

.marketplaces__inner {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.marketplaces__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(2, 123, 196, .08);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}
.marketplaces__title {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.marketplaces__desc {
    margin: 0 auto 36px;
    font-size: 16px;
    line-height: 1.55;
    color: #475569;
    max-width: 760px;
}
.marketplaces__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.mp-card {
    --mp-size: 92px;
    --mp-ring: 2px;
    --mp-gap: 3px;
    flex: 0 0 auto;
    width: var(--mp-size);
    height: var(--mp-size);
    border-radius: 50%;
    padding: var(--mp-ring);
    background: #ff6a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: default;
}
.mp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 106, 26, .25);
}
.mp-card__logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f1f3f5;
    padding: 18px;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    border: var(--mp-gap) solid #ffffff;
}

/* Brands responsive */
@media (max-width: 960px) {
    .brands {
        flex-direction: column;
        justify-content: center;    /* mobilde copy + media-stack dikey olarak ortalansın */
        min-height: auto;
        margin: 0 16px;             /* topfold padding-top zaten topbar + header'ı karşılıyor */
        gap: 24px;                  /* copy ile media-stack arasında nefes alanı */
    }
    .brands__copy {
        padding: 16px 16px 0;       /* üst-alt fazla padding'i kaldır — flex justify-content ortalıyor */
        gap: 18px;
    }
    .brands__title { font-size: clamp(32px, 6.6vw, 44px); }
    .brands__desc  { font-size: 16px; }
    .brands__media {
        min-height: 380px;
        clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
    }
    .brands__media--diagram {
        clip-path: none;
        min-height: auto;
        padding: 32px 20px 48px;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .brands__media-left {
        gap: 14px;
        justify-content: flex-start;       /* mobile'da ortalama gerek yok */
    }
    /* Mobilde owner-1 / owner-2 lifestyle görselleri gizleniyor */
    .brands__media-figure--top,
    .brands__media-figure--side { display: none; }
    .diag-stats {
        max-width: 360px;
        margin: 0 0 22px;
    }
    .diag-stats__amount { font-size: 18px; }
    .diag-stats__label { font-size: 13px; }
    .diag-stats__chart { height: 64px; }
    .diag-phone { flex: 0 0 120px; margin: 12px 0 0 4px; }
    .diag-phone__frame { width: 156px; height: 160px; padding: 12px 10px 0; }
    .diag-phone__notch { width: 56px; height: 14px; top: 5px; }
    .diag-phone__time { font-size: 10px; margin-bottom: 10px; }
    .diag-phone__app { width: 38px; height: 38px; border-radius: 9px; }
    .diag-phone__app--brand img { border-radius: 9px; }
    .diag-phone__app--cal .cal-num { font-size: 14px; }
    .diag-phone__app--safari svg { width: 30px; height: 30px; }
    .diag-phone__apps { gap: 7px; }
    .diag-lines { display: none; }
    /* Mobilde dikey bağlantı çizgisi ve marketplace tile listesi gizleniyor */
    .diag-stem { display: none; }
    .diag-channels { display: none; }
}
@media (max-width: 480px) {
    .brands {
        margin: 0 12px;
    }
    .brands__copy { padding: 12px 16px 0; }
    .brands__media { min-height: 300px; }
    .brands__cta { flex-wrap: wrap; }
}

/* Marketplaces responsive */
@media (max-width: 1100px) {
    .marketplaces__grid {
        gap: 12px;
    }
    .mp-card {
        --mp-size: 78px;
    }
    .mp-card__logo {
        padding: 14px;
    }
}
@media (max-width: 960px) {
    /* Yeni "Tüm pazar yerlerini" section'ı edge-to-edge — yatay padding
       sadece .marketplaces__container'dan (16px) gelir, pricing ile aynı. */
    .marketplaces {
        margin: 0;
        padding: 48px 0;
        width: 100%;
        max-width: none;
    }
    .marketplaces__grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }
    .mp-card {
        --mp-size: 84px;
    }
}
@media (max-width: 480px) {
    .marketplaces {
        margin: 0;
        padding: 36px 0;
        width: 100%;
    }
    .marketplaces__title { font-size: 38px; }
    .marketplaces__desc  { font-size: 15px; }
    .marketplaces__grid {
        gap: 18px;
    }
    .mp-card {
        --mp-size: 86px;
    }
    .mp-card__logo {
        padding: 16px;
    }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    :root {
        --header-height: 60px;
        --header-h: 66px;           /* mobilde site-header daha kısa */
        --topbar-h: 52px;           /* mobilde topbar: countdown + tagline kompakt, tagline alt kenara yapışık */
    }

    /* Mobilde topbar: countdown + tagline alt alta görünür; sabit yükseklik,
       content alt kenara yapışık —> header tam altında konumlanır.
       transform: translateZ(0) ile iOS Safari'de stabil fixed pozisyon. */
    .topbar {
        height: var(--topbar-h);
        min-height: var(--topbar-h);
        overflow: hidden;
        transform: translateZ(0);
        will-change: transform;
    }
    /* Mobilde topbar'ı kapatma yok — parmakla yanlışlıkla tetiklenmesin diye
       close butonu tamamen gizli + pointer-events kapalı; bu sayede
       site-header logo seviyesine kayma sorunu yaşanmaz. */
    .topbar__close {
        display: none !important;
        pointer-events: none !important;
    }
    /* Eğer kullanıcı daha önce kapatmışsa bile mobilde topbar'ı geri getir */
    html.is-topbar-closed,
    body.is-topbar-closed { --topbar-h: 52px !important; }
    .topbar__inner {
        flex-direction: column;
        justify-content: flex-end;   /* içeriği alt kenara hizala */
        gap: 2px;
        padding: 0 16px 5px;
    }
    .topbar__text {
        position: static;
        transform: none;
        white-space: normal;
        text-align: center;
        font-size: 11.5px;
        line-height: 1.25;
        display: block;
        max-width: 100%;
    }

    .site-header { padding: 0; }
    .header-inner {
        height: 66px;
        padding: 0 16px;
        gap: 12px;
    }
    /* Mobilde hamburger: çerçeve yok, sadece ikon — boyutu büyütüldü. */
    .nav-toggle {
        display: flex;
        width: 48px;
        height: 48px;
        padding-left: 15px;
        border: 0;
        background: transparent;
    }
    .nav-toggle:hover { background: transparent; }

    /* Mobil menü full-screen beyaz drawer — topbar (47px) + header (66px)
       altından başlayıp ekranın altına kadar uzanır; arkadaki sayfa
       içeriği tamamen kapanır, sadece beyaz görünür.                    */
    .main-nav {
        position: fixed;
        top: calc(var(--topbar-h) + 66px);
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        background: #ffffff;
        border: 0;
        border-top: 1px solid rgba(15, 23, 42, .06);
        border-radius: 0;
        box-shadow: none;
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 99;
        display: none;
    }
    .main-nav.is-open { display: block; }
    /* Drawer açıkken arkadaki sayfa scroll'unu kilitle */
    body.nav-open { overflow: hidden; }
    .main-nav__list,
    .main-nav ul {
        flex-direction: column;
        gap: 2px;
    }
    .main-nav__item { width: 100%; }
    .main-nav__link,
    .main-nav a {
        padding: 12px 14px;
        width: 100%;
        justify-content: space-between;
        border-radius: 10px;
    }
    .main-nav a.is-active::after { display: none; }

    /* Mobilde mega panel inline (accordion) — absolute değil */
    .mega {
        position: static;
        margin: 4px 0 4px 8px;
        min-width: 0;
        max-width: none;
        padding: 6px;
        background: #ffffff;
        border: 0;
        border-radius: 10px;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
    }
    .mega::before { display: none; }
    .main-nav__item.is-open > .mega {
        opacity: 1;
        visibility: visible;
        transform: none;
        /* Drawer içeriği büyüdükçe (yeni nav öğeleri eklendikçe) burayı
           dinamik yapmak yerine geniş bir emniyet payı tutuyoruz. Şu anda
           içerik ~790px; 1400px ileri eklemeler için yeterli ve mobil
           ekrandan daha büyük bir değer olduğu için collapse animasyonu
           hâlâ smooth çalışır. */
        max-height: 1400px;
        pointer-events: auto;
        transition: max-height 0.4s ease, opacity 0.25s ease, visibility 0s linear 0s;
    }
    /* Mobilde mega içeriği 2-seviyeli "sağdan slide-in panel" yapısı (ikas-style):
       Level 0 (drawer): Hizmetlerimiz ↓, Kurumsal ↓, İletişim
       Level 1 (Hizmetlerimiz açık, yerinde): JS ile enjekte edilen 3
         sub-trigger (Hizmetlerimiz ›, Partnerler ›, Araçlar ›) + banner
       Level 2 (sub-trigger tıklandı): ilgili kolon (position: fixed) sağdan
         slide-in olarak tam panel olur; üstte ← geri butonu + başlık,
         altında o kolonun linkleri. Tüm bölümler tek tip görsel dilde:
         font size/weight/padding tutarlı.
       h4 başlığı default mobile'da gizli; panel açıldığında header rolünde
       görünür (alt kuralda yeniden display: flex). */
    .mega__col-title { display: none; }
    .mega__inner { flex-direction: column; gap: 0; }

    /* JS ile .mega__inner'ın başına enjekte edilen sub-trigger container */
    .mega__sub-triggers {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .mega__sub-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 400;
        font-family: inherit;
        color: #0F172A;
        background: transparent;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
        text-align: left;
        line-height: normal;
        margin: 1px 0;
    }
    .mega__sub-trigger::after {
        content: '';
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        margin-left: 8px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") no-repeat center;
        background-size: contain;
    }
    .mega__sub-trigger:hover,
    .mega__sub-trigger:active {
        background: rgba(2, 123, 196, 0.06);
        color: var(--brand);
    }
    .mega__sub-trigger:hover::after {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23027BC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") no-repeat center;
        background-size: contain;
    }

    /* Hizmetlerimiz mega'sının kolonları artık fixed slide-in panel.
       Drawer'ın içinde değil, viewport'a göre konumlanır (üstte topbar+header
       altında başlar). Default'ta sağ ekran-dışında, .is-open ile içeri kayar. */
    .mega--3col > .mega__inner > .mega__col {
        position: fixed;
        top: calc(var(--topbar-h, 47px) + 66px);
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        z-index: 100;
        padding: 12px 16px 24px;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        visibility: hidden;
        pointer-events: none;
    }
    .mega--3col > .mega__inner > .mega__col.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Panel header (h4 mobile'da görünür hale gelir) — ← geri ikonu + başlık */
    .mega--3col > .mega__inner > .mega__col > .mega__col-title {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 0 14px;
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 600;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
        color: #0F172A;
        background: transparent;
        border-radius: 0;
        cursor: default;
        line-height: 1.25;
        position: sticky;
        top: 0;
        z-index: 1;
        background: #ffffff;
    }

    /* Geri butonu — JS ile h4'ün başına eklenir, panel'i kapatır */
    .mega__sub-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        margin: 0 4px 0 -8px;
    }
    .mega__sub-back svg {
        width: 22px;
        height: 22px;
        stroke: #0F172A;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .mega__sub-back:hover { background: rgba(15, 23, 42, .05); }

    /* Panel içindeki list — accordion/transition kaldırılıyor, düz akış */
    .mega--3col > .mega__inner > .mega__col > .mega__list {
        max-height: none;
        opacity: 1;
        overflow: visible;
        transition: none;
        padding: 4px 0 0;
        margin: 0;
    }

    /* Panel açıkken arkadaki drawer scroll'unu da kilitle (sayfa scroll'u
       zaten body.nav-open ile kilitli, panel scroll'u kendi içinde). */
    /* Mobilde 2/3-kolon mega'nın desktop'ta tanımlı 600px/880px min-width'i
       drawer'ı aşıyor — drawer genişliğine bağla. min-width: 0 ile shrink edebilsin. */
    .mega,
    .mega.mega--2col,
    .mega.mega--3col {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Mobilde banner — daha kompakt, ikonu gizle, dar drawer'a sığdır.
       Mobilde dış box-shadow'lar (mavi parıltı + koyu drop) drawer içinde
       fazla göze batıyor; sıfırlayıp düz banner olarak gösteriyoruz. */
    .mega .mega__banner {
        margin: 10px 0 4px;
        padding: 12px 12px;
        min-height: 64px;
        gap: 10px;
        border-radius: 2px;
        flex-wrap: nowrap;
        min-width: 0;
        box-shadow: none;
    }
    .mega .mega__banner:hover,
    .mega .mega__banner:focus-visible { box-shadow: none; }
    .mega .mega__banner-icon { display: none; }
    .mega .mega__banner-text { min-width: 0; flex: 1 1 0; }
    .mega .mega__banner-title {
        font-size: 12.5px;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    .mega .mega__banner-eyebrow { font-size: 9.5px; padding: 1px 6px; }
    .mega .mega__banner-cta {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 11.5px;
        gap: 4px;
    }
    .mega .mega__banner-cta svg { width: 12px; height: 12px; }

    /* ~480px ve altı: yan yana sığmıyor; eyebrow + title üstte, CTA altta
       full-width bir buton olarak görünsün. */
    @media (max-width: 480px) {
        .mega .mega__banner {
            flex-wrap: wrap;
            row-gap: 10px;
        }
        .mega .mega__banner-text {
            flex: 1 1 100%;
        }
        .mega .mega__banner-cta {
            flex: 1 1 100%;
            justify-content: center;
            padding: 8px 14px;
        }
    }

    /* Mobilde .main-nav a "align-items: center" kuralı .mega__item'a da
       sirayet ediyor; .mega__copy genişliği desc metni uzunluğuna göre
       değiştiği için center hizalama linkler arasında zigzag yaratıyor
       (kısa desc'li öğeler sağa, uzun desc'li öğeler sola kayık görünür).
       Burada copy'yi tam genişliğe yayıp soldan başlatıyoruz.
       Specificity için .main-nav öneki gerekli — .main-nav a (0,1,1)'in
       daha üstüne çıkmak için (0,2,1).                                    */
    .main-nav .mega__item {
        align-items: stretch;
    }
    .main-nav .mega__copy {
        width: 100%;
    }

    /* Mobilde "ÜCRETSİZ DENEYİN" header CTA ve topbar "Sizi Arayalım"
       butonu gizleniyor — hamburger menü içinde zaten aynı linkler var;
       ayrıca demo-talep sayfasına özel hero formu, scroll'da görünecek
       bölüm CTA'ları yeterli erişim sağlıyor. Header'da artık sadece
       logo + hamburger; topbar'da sadece kontak metni kalsın.           */
    .header-actions .btn-primary,
    .topbar__cta {
        display: none;
    }

    .site-logo img { height: 36px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .header-actions .btn-primary {
        padding: 0 14px;
        font-size: 12.5px;
        letter-spacing: 0;
    }
}

/* ───────────────────────────────────────────────────────────────────────
 * Planet section — "Kaya gibi sağlam. Işık hızında."
 * 3D globe + akan ışık arc'ları + üst feature kartları + stat popup
 * Shopify "Built like a rock" bölümünden esinlenilmiş kompozisyon.
 * ─────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

.planet {
    position: relative;
    overflow: hidden;
    /* Üstten siyah → ortada koyu yeşil → altta daha doygun yeşil ufuk */
    background:
        linear-gradient(180deg,
            #03060a 0%,
            #050b08 25%,
            #07170f 50%,
            #0a2419 75%,
            #0e3a27 100%);
    color: #e8f5ee;
    padding: 96px 0 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Yıldız partikülleri — karma boyut & netlik (sharp / medium / blur halo) */
.planet__stars {
    position: absolute; inset: 0;
    background-image:
        /* Sol kenar — S=sharp, M=medium, B=blur */
        radial-gradient(1.2px 1.2px at  3% 12%, #fff 55%, rgba(255,255,255,0.4)  75%, transparent 90%),  /* S */
        radial-gradient(4px   4px   at  6% 28%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.3)  45%, transparent 75%), /* B */
        radial-gradient(2.2px 2.2px at  2% 45%, #fff 30%, rgba(255,255,255,0.5)  60%, transparent 80%),  /* M */
        radial-gradient(1.3px 1.3px at  8% 60%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%),  /* S */
        radial-gradient(3.6px 3.6px at  4% 78%, rgba(255,255,255,0.8)  15%, rgba(255,255,255,0.25) 50%, transparent 78%), /* B */
        radial-gradient(1.1px 1.1px at  9% 92%, #fff 55%, rgba(255,255,255,0.3)  75%, transparent 90%),  /* S */
        /* Sağ kenar */
        radial-gradient(2.4px 2.4px at 95%  8%, #fff 30%, rgba(255,255,255,0.45) 60%, transparent 80%),  /* M */
        radial-gradient(1.2px 1.2px at 92% 22%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%),  /* S */
        radial-gradient(4.5px 4.5px at 97% 38%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.32) 45%, transparent 75%), /* B */
        radial-gradient(1.3px 1.3px at 90% 54%, #fff 55%, rgba(255,255,255,0.4)  75%, transparent 90%),  /* S */
        radial-gradient(2.2px 2.2px at 96% 70%, #fff 30%, rgba(255,255,255,0.45) 60%, transparent 80%),  /* M */
        radial-gradient(3.4px 3.4px at 93% 86%, rgba(255,255,255,0.78) 15%, rgba(255,255,255,0.22) 50%, transparent 78%), /* B */
        /* Orta-üst */
        radial-gradient(3.8px 3.8px at 22% 14%, rgba(255,255,255,0.82) 14%, rgba(255,255,255,0.28) 48%, transparent 76%), /* B */
        radial-gradient(1.2px 1.2px at 38%  6%, #fff 55%, rgba(255,255,255,0.4)  75%, transparent 90%),  /* S */
        radial-gradient(2.4px 2.4px at 52% 18%, #fff 30%, rgba(255,255,255,0.5)  60%, transparent 80%),  /* M */
        radial-gradient(1.1px 1.1px at 68% 10%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%),  /* S */
        radial-gradient(4.2px 4.2px at 80% 24%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.3)  45%, transparent 75%), /* B */
        /* Orta */
        radial-gradient(1.3px 1.3px at 30% 46%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%),  /* S */
        radial-gradient(2.4px 2.4px at 48% 38%, #fff 30%, rgba(255,255,255,0.45) 60%, transparent 80%),  /* M */
        radial-gradient(1.2px 1.2px at 65% 50%, #fff 55%, rgba(255,255,255,0.3)  75%, transparent 90%),  /* S */
        radial-gradient(3.6px 3.6px at 78% 42%, rgba(255,255,255,0.8)  15%, rgba(255,255,255,0.25) 50%, transparent 78%), /* B */
        /* Alt */
        radial-gradient(1.2px 1.2px at 18% 72%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%),  /* S */
        radial-gradient(4px   4px   at 35% 88%, rgba(255,255,255,0.82) 14%, rgba(255,255,255,0.28) 48%, transparent 76%), /* B */
        radial-gradient(1.3px 1.3px at 55% 80%, #fff 55%, rgba(255,255,255,0.3)  75%, transparent 90%),  /* S */
        radial-gradient(2.4px 2.4px at 72% 92%, #fff 30%, rgba(255,255,255,0.45) 60%, transparent 80%),  /* M */
        radial-gradient(1.1px 1.1px at 85% 76%, #fff 55%, rgba(255,255,255,0.35) 75%, transparent 90%);  /* S */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: planetTwinkle 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
@keyframes planetTwinkle {
    0%   { opacity: 0.85; }
    50%  { opacity: 1;    }
    100% { opacity: 0.9;  }
}

.planet__inner {
    position: relative;
    z-index: 2;
}

/* ── Üst thumbnail kartları (4 adet feature) — yatay yayılmış ─ */
.planet__top-thumbs {
    display: flex; justify-content: center; gap: 84px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.ptt-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 92px; height: 92px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    color: #d1f3df;
}
.ptt-card:hover {
    transform: translateY(-4px) scale(1.04);
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
}
.ptt-icon {
    width: 30px; height: 30px;
    color: #34d399;
}
.ptt-icon svg { width: 100%; height: 100%; }
.ptt-lbl {
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.2px;
    color: rgba(232, 245, 238, 0.85);
    white-space: nowrap;
}

/* ── Ana grid: sol globe / sağ copy ─────────────────────────── */
.planet__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 880px;
    position: relative;
}

.planet__globe {
    position: relative;
    min-height: 880px;
    display: block;
    overflow: visible;        /* dünyanın yarısı container'dan dışarı taşabilsin */
}
.planet__canvas {
    position: absolute;
    top: 50%;
    left: -45%;               /* iyice sola yasla — büyük bir yarısı dışarı taşsın */
    transform: translateY(-50%);
    width: 180%;              /* çok daha geniş — dünya iri görünsün */
    height: 1000px;
    cursor: grab;
}
.planet__canvas:active { cursor: grabbing; }
.planet__canvas canvas { display: block; outline: none; }

/* Loading dots — globe yüklenene kadar */
.planet__loading {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; gap: 8px;
    pointer-events: none;
    transition: opacity .4s ease;
}
.planet__loading.is-hidden { opacity: 0; }
.pl-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #34d399; opacity: 0.5;
    animation: plPulse 1.2s ease-in-out infinite;
}
.pl-dot:nth-child(2) { animation-delay: 0.15s; }
.pl-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes plPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Sol-alt floating stat popup */
.planet__stat-popup {
    position: absolute;
    left: 8px; bottom: 16px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 14px;
    background: rgba(8, 28, 19, 0.78);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(52, 211, 153, 0.1) inset;
    max-width: 280px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.planet__stat-popup.is-in { opacity: 1; transform: translateY(0); }
.psp-icon {
    grid-row: span 2;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}
.psp-icon svg { width: 18px; height: 18px; }
.psp-num {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 18px; font-weight: 700; line-height: 1;
    color: #ecfdf5;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.psp-label {
    font-size: 11px; line-height: 1.3;
    color: rgba(209, 243, 223, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ── Sağ taraf: başlık + açıklama + CTA ─────────────────────── */
.planet__copy {
    max-width: 400px;
    margin-left: auto;            /* sağ kenara yasla */
    padding: 20px 0;
}
.planet__title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px;
}
.planet__desc {
    font-size: 15px; line-height: 1.6;
    color: rgba(232, 245, 238, 0.78);
    margin: 0 0 28px;
}
.planet__cta {
    background: #ffffff;
    color: #061a12;
    border-color: #ffffff;
}
.planet__cta:hover {
    background: #ecfdf5;
    border-color: #ecfdf5;
}

/* ── Sağ-alt video thumbnail ────────────────────────────────── */
.planet__video-thumb {
    position: absolute;
    right: 28px; bottom: 28px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s ease .4s, transform .6s ease .4s;
}
.planet__video-thumb.is-in { opacity: 1; transform: translateY(0); }
.pvt-media {
    width: 124px; height: 78px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    background: #061a12;
}
.pvt-cap {
    font-size: 10.5px;
    color: rgba(232, 245, 238, 0.7);
    letter-spacing: 0.2px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .planet { padding: 72px 0 96px; min-height: auto; }
    .planet__top-thumbs { gap: 32px; }
    .planet__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
    }
    .planet__globe { min-height: 420px; }
    .planet__canvas {
        position: relative; top: auto; left: auto; transform: none;
        width: 100%; height: 420px;
    }
    .planet__copy { max-width: none; text-align: center; margin: 0 auto; }
    .planet__cta { margin: 0 auto; }
    .planet__video-thumb { position: static; margin: 32px auto 0; }
}
@media (max-width: 640px) {
    .planet { padding: 56px 0 80px; }
    .planet__top-thumbs { gap: 16px; margin-bottom: 36px; }
    .ptt-card { width: 76px; height: 76px; border-radius: 14px; }
    .ptt-icon { width: 24px; height: 24px; }
    .ptt-lbl { font-size: 9.5px; }
    .planet__globe { min-height: 320px; }
    .planet__canvas { height: 320px; pointer-events: none; }
    .planet__title { font-size: 30px; }
    .planet__desc { font-size: 14.5px; }
    .planet__stat-popup {
        max-width: 240px;
        padding: 10px 12px;
        left: 50%; transform: translate(-50%, 0);
        bottom: 8px;
    }
    .planet__stat-popup.is-in { transform: translate(-50%, 0); }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .planet__stars { animation: none; opacity: 0.7; }
    .pl-dot { animation: none; }
    .planet__stat-popup,
    .planet__video-thumb { transition: none; }
}

/* ── Pricing / Paketler (Aurora-stili) ──────────────────────────────────
   - Koyu zemin + 2 büyük blur'lu daire (aurora) yavaş dolaşır
   - Aylık/Yıllık toggle, .is-yearly ile fiyat span'ları cross-fade (CSS grid stack)
   - 3 kart: Başlangıç / Profesyonel (featured) / Platin
   - Featured kart: koyulaşmış zemin + indigo border + popüler rozet
   - Hover'da kart hafif yükselir, içindeki aurora glow görünür hale gelir */
.pricing {
    position: relative;
    background: #ffffff;
    color: #475569;
    padding: 96px 24px 120px;
    overflow: hidden;
    isolation: isolate;
    font-size: 14px;
}

/* Aurora bg gizli — beyaz zeminde renkli arka plan kullanılmıyor */
.pricing__aurora { display: none; }

.pricing__container {
    position: relative;
    max-width: var(--container-max);  /* slider (topfold/brands) ile aynı boxed genişlik */
    margin: 0 auto;
}

/* ── Header bloğu ───────────────────────────────────────────── */
.pricing__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.pricing__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    margin-bottom: 22px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 999px;
    color: #4F46E5;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pricing__badge svg {
    width: 14px; height: 14px;
    color: #6366F1;
}
.pricing__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    color: #0a1f38;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.pricing__title-accent {
    background: linear-gradient(120deg, #6366F1 0%, #8B5CF6 50%, #027BC4 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.pricing__subtitle {
    margin: 18px auto 0;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
}

/* ── Aylık / Yıllık toggle ──────────────────────────────────── */
.pricing__toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.pricing__toggle-label {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: color .25s ease;
    user-select: none;
}
.pricing__toggle-label[data-cycle="monthly"] { color: #0a1f38; font-weight: 600; }
.pricing.is-yearly .pricing__toggle-label[data-cycle="monthly"] { color: #94a3b8; font-weight: 500; }
.pricing.is-yearly .pricing__toggle-label[data-cycle="yearly"]  { color: #0a1f38; font-weight: 600; }

.pricing__toggle-switch {
    width: 56px; height: 32px;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.40);
    border-radius: 999px;
    padding: 3px;
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    transition: background .25s ease, border-color .25s ease;
}
.pricing__toggle-switch:hover {
    background: rgba(99, 102, 241, 0.26);
}
.pricing__toggle-switch:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
}
.pricing__toggle-thumb {
    display: block;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.45);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.pricing.is-yearly .pricing__toggle-thumb {
    transform: translateX(24px);
}
.pricing__toggle-savings {
    color: #4F46E5;
    font-size: 12.5px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 5px 12px;
    border-radius: 999px;
}

/* ── Pricing grid + kart ────────────────────────────────────── */
.pricing__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    /* 2 sütunda kartlar 2 satıra bölünür; auto-rows 1fr olmadan alt satır
       üsttekinden kısa kalıyordu — tüm kartlar eşit boyda olsun */
    .pricing__cards { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 22px; }
}
@media (min-width: 1024px) {
    .pricing__cards { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 22px; align-items: stretch; }
}
@media (min-width: 1280px) {
    .pricing__cards { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* Pricing tabs (mobil: kartların üstünde 3 küçük pill — aktif kart göstergesi).
   Default: gizli. Sadece ≤640px görünür. */
.pricing__tabs { display: none; }

@media (max-width: 640px) {
    .pricing__tabs {
        display: flex;
        gap: 6px;
        padding: 0 16px;
        margin: 0 0 14px;
        justify-content: center;
    }
    .pricing__tab {
        flex: 1 1 0;
        max-width: 130px;
        padding: 9px 11px;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-width: 0 !important;
        border-style: none !important;
        outline: 0 !important;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        border-radius: 999px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        transition: color .2s ease, transform .2s ease;
        white-space: nowrap;
    }
    .pricing__tab:focus,
    .pricing__tab:focus-visible,
    .pricing__tab:active {
        outline: 0;
        box-shadow: none;
    }
    .pricing__tab.is-active {
        background: transparent;
        color: #0F172A;
        font-weight: 700;
        border-color: transparent;
        position: relative;
        isolation: isolate;
    }
    /* Aktif pill çerçevesi etrafında dönen marka renkli arc.
       Renk paleti: açık mavi → icanad mavi → koyu navy → açık mavi,
       site brand renkleriyle uyumlu. */
    .pricing__tab.is-active::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.6px;
        background: conic-gradient(from var(--pricing-tab-angle, 0deg),
            transparent 0deg 240deg,
            #38BDF8 262deg,
            #027BC4 290deg,
            #0E116F 318deg,
            #38BDF8 340deg,
            transparent 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        animation: pricingTabSpin 2.4s linear infinite;
        pointer-events: none;
        z-index: -1;
    }
    @supports not (background: paint(worklet)) {
        .pricing__tab.is-active { border-color: #027BC4; }
    }
    .pricing__tab:active { transform: scale(0.96); }
}

/* @property — gradient açısını CSS variable üzerinden animate etmek için */
@property --pricing-tab-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes pricingTabSpin {
    to { --pricing-tab-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing__tab.is-active::before { animation: none; }
}

/* Mobilde paketler alt alta değil, yatay scroll-snap ile tek tek.
   Kart genişliği viewport - 80px → sağ tarafta bir sonraki paketin ~60-80px
   peek'i görünür → kullanıcı kaydırılabileceğini hisseder. */
@media (max-width: 640px) {
    .pricing { padding: 64px 0 80px; }
    .pricing__cards {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* Üst boşluk ÖNERİLEN pill'inin taşması kadar olmalı — scroll kabında
           overflow-y:visible çalışmaz (auto'ya düşer), 8px'te pill kırpılıyordu */
        padding: 16px 16px 20px;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }
    .pricing__cards::-webkit-scrollbar { display: none; width: 0; height: 0; }
    /* Not: seçici .pricing__cards ile güçlendirildi — aşağıdaki temel
       `.pricing__card { height:100% }` kuralı kaynak sırası gereği bunu
       eziyordu; height:100% scroll kabında stretch'i bozup kartları
       farklı yüksekliklerde bırakıyordu. */
    .pricing__cards .pricing__card {
        flex: 0 0 calc(100% - 80px);
        max-width: calc(100% - 80px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: auto;
    }
    /* Son kartın sağında ekstra boşluk kalsın diye sonuncuya margin-right.
       Aksi halde son karta scroll edince sağ kenarda boşluk hissi olur. */
    .pricing__card:last-child {
        margin-right: 16px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Kart — açık tema (Shopify-stili)
   • Beyaz zemin, ince gri border, üstte renkli ribbon
   • Plan adı + yan-yana "En Popüler" pill (sadece featured)
   • Büyük siyah fiyat, altında dönem alt-metni
   • "Öne çıkan özellikler" başlığı + sade check listesi
   • Tam genişlikte siyah pill CTA
───────────────────────────────────────────────────────────── */
.pricing__card {
    position: relative;
    padding: 0;                                /* iç padding pricing__card-content'te */
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                border-color .35s ease,
                box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;

    /* stagger fade-in */
    opacity: 0;
    transform: translateY(28px);
}
.pricing.is-in .pricing__card {
    opacity: 1;
    transform: translateY(0);
}
.pricing.is-in .pricing__card:nth-child(1) { transition: opacity .6s ease .15s, transform .6s cubic-bezier(.4,0,.2,1) .15s, border-color .35s ease, box-shadow .35s ease; }
.pricing.is-in .pricing__card:nth-child(2) { transition: opacity .6s ease .30s, transform .6s cubic-bezier(.4,0,.2,1) .30s, border-color .35s ease, box-shadow .35s ease; }
.pricing.is-in .pricing__card:nth-child(3) { transition: opacity .6s ease .45s, transform .6s cubic-bezier(.4,0,.2,1) .45s, border-color .35s ease, box-shadow .35s ease; }

/* Paketler sayfasında (`.pricing` parent wrapper yok) kartlar default görünür
   olmalı — IntersectionObserver akışı yalnızca ana sayfanın `.pricing` bloğu
   için aktif. `data-context="paketler-page"` işaretiyle bu fark ayrıştırılır. */
.pricing__cards[data-context="paketler-page"] .pricing__card {
    opacity: 1;
    transform: translateY(0);
}

/* Paketler sayfası: kartın üzerine gelince 1px marka mavisi çerçeve */
.pricing__cards[data-context="paketler-page"] .pricing__card:hover {
    border-color: var(--brand);
}
.pricing__cards[data-context="paketler-page"] .pricing__card--featured:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

.pricing.is-in .pricing__card:hover {
    transform: translateY(-6px);
    border-color: var(--brand);
    box-shadow: none;
}

/* Featured kart (Platin) — mavi zemin; overflow görünür (ÖNERİLEN etiketi için) */
.pricing__card--featured {
    /* Beyaz zemin + ::after mavi → border yarıçapında beyaz köşe sızıntısı olurdu.
       Zemini doğrudan mavi yap; ::after yalnızca yedek katman. */
    background: linear-gradient(180deg, #1E87E3 0%, #1871CD 100%);
    border-color: #1871CD;
    box-shadow: 0 0 0 1px #1871CD;
    /* "Önerilen" etiketi sol çerçevenin dışına taştığı için kırpılmasın */
    overflow: visible;
}
.pricing.is-in .pricing__card--featured:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}
/* Kartın üst çerçevesine oturan "ÖNERİLEN" etiketi */
.pricing__card--featured::before {
    content: 'ÖNERİLEN';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--brand);
    color: #ffffff;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    border-radius: 999px;
    z-index: 2;
}
/* Eski mavi katman — artık gereksiz; zemin kartın kendisinde */
.pricing__card--featured::after {
    content: none;
    display: none;
}
/* Mavi zemin üzerinde çerçeve de aynı tonda */
.pricing__card--featured,
.pricing.is-in .pricing__card--featured:hover {
    border-color: #1871CD;
    box-shadow: 0 0 0 1px #1871CD;
}
/* Mavi zeminde okunurluk: metinler beyaz */
.pricing__card--featured .pricing__card-name,
.pricing__card--featured .pricing__price-main,
.pricing__card--featured .pricing__price-amount,
.pricing__card--featured .pricing__price-period,
.pricing__card--featured .pricing__features-title,
.pricing__card--featured .pricing__features li {
    color: #ffffff;
}
.pricing__card--featured .pricing__price-eyebrow,
.pricing__card--featured .pricing__price-period-sub {
    color: rgba(255, 255, 255, 0.85);
}
.pricing__card--featured .pricing__price-bonus {
    color: rgba(255, 255, 255, 0.92);
}
.pricing__card--featured .pricing__price-bonus strong { color: #ffffff; }
/* Özellik listesi üstündeki ayraç çizgisi yarı saydam beyaz */
.pricing__card--featured .pricing__features-group {
    border-top-color: rgba(255, 255, 255, 0.35);
}
/* Onay tikleri — mavi zeminde beyaz daire, yeşil tik */
.pricing__card--featured .pricing__check {
    background: #ffffff;
    color: #16A34A;
}
/* "Yıllık toplam" beyaz kutusu mavi zeminde olduğu gibi kalır (ekteki gibi);
   indirim rozeti ve ÖNERİLEN etiketi kontrast için beyaz zemin + mavi yazı */
.pricing__card--featured .pricing__discount-badge {
    background: #ffffff;
    color: #1871CD;
}
.pricing__card--featured::before {
    background: #ffffff;
    color: #1871CD;
    box-shadow: 0 0 0 1px #1871CD;
}
/* CTA — ektekindeki gibi beyaz buton, mavi yazı */
.pricing__card--featured .pricing__cta {
    background: #ffffff;
    border-color: #ffffff;
    color: #1871CD;
}
.pricing__card--featured .pricing__cta:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    color: #125da8;
}

/* ── Üst ribbon (renkli promo bandı) ────────────────────────── */
.pricing__card-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #0a1f38;
    text-align: center;
    line-height: 1.3;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.pricing__card-ribbon--green {
    background: #C6F6D5;                       /* Shopify yeşil */
    color: #064E3B;
}
.pricing__card-ribbon--blue {
    background: #DBEAFE;                       /* açık mavi */
    color: #1E3A8A;
}
/* Başlangıç paketinin ribbon arka planı şeffaf — yazı kartın üst kenarında
   yüzer gibi görünür, kart zemini ile bütünleşir. */
.pricing__card[data-tier="basic"] .pricing__card-ribbon--green {
    background: transparent;
}

/* ── Kart içerik ───────────────────────────────────────────── */
.pricing__card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 28px 26px 26px;
}

/* Head: titlebar + tagline */
.pricing__card-head { margin: 0; }
.pricing__card-titlebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pricing__card-name {
    margin: 0;
    font-size: 23px;
    font-weight: 500;
    color: #0F172A;
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.pricing__card-desc {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6B7280;
}

/* "En Popüler" yeşil pill — plan adının yanında */
.pricing__card-badge {
    display: inline-flex;
    align-items: center;
    background: #10B981;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(6, 78, 59, 0.10);
    position: static;                          /* önceki absolute override */
}

/* ── Fiyat alanı ──────────────────────────────────────────── */
.pricing__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0 0;
}
.pricing__price-eyebrow {
    font-size: 12.5px;
    font-weight: 500;
    color: #6B7280;
    letter-spacing: 0.005em;
}
.pricing__price-main {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0F172A;
}
.pricing__price-amount {
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    color: #0F172A;
}
/* Fiyatı gösterilmeyen paket (Special) — "Özel Teklif" metni fiyatla aynı boyutta */
.pricing__price-amount--custom {
    line-height: 1.2;
}
.pricing__price-period-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.pricing__price-period {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: 0.005em;
}
.pricing__price-period-sub {
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    margin-top: 2px;
}
.pricing__price-yearly {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #4B5563;
    background: #ffffff;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}
.pricing__price-yearly strong { color: #0F172A; font-weight: 600; }
/* Eski ve yeni yıllık fiyat alt alta */
.pricing__price-stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.45;
    gap: 4px;
    font-size: 17px;
    font-weight: 600;
}
/* Kampanya: üstü çizili eski yıllık fiyat */
.pricing__price-old {
    color: #9CA3AF;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: 600;
}
/* Kampanya: kartın sağ üst köşesindeki indirim rozeti */
.pricing__discount-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 12px;
    background: var(--brand);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 10px;
}
.pricing__discount-badge small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.pricing__price-bonus {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #374151;
}
.pricing__price-bonus strong { color: #0F172A; font-weight: 700; }

/* Tablo başlığındaki "Yıllık ₺X" alt-satırı */
.paketler-compare__plan-yearly {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    letter-spacing: 0;
}
.paketler-compare__plan-yearly strong {
    color: #0F172A;
    font-weight: 700;
}

/* ── Özellik listesi ──────────────────────────────────────── */
.pricing__features-group {
    margin: 24px 0 0;
    flex: 1 1 auto;
    padding-top: 18px;
    border-top: 1px solid #E5E7EB;
}
.pricing__features-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: 0.005em;
}
.pricing__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pricing__features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #374151;
    font-size: 13.5px;
    line-height: 1.55;
}
.pricing__check {
    flex-shrink: 0;
    width: 17px; height: 17px;
    background: #16A34A;                       /* yeşil dolu daire */
    border-radius: 50%;
    color: #ffffff;                            /* beyaz tick */
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pricing__check svg {
    width: 9px; height: 9px;
    display: block;
}

/* ── CTA — tam genişlik siyah pill ─────────────────────────── */
.pricing__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
    padding: 9px 20px;
    border: 1px solid var(--brand);
    border-radius: 16px;    /* kartın (.pricing__card) köşe yarıçapıyla aynı */
    background: var(--brand);
    color: #ffffff;
    font-weight: 500;
    font-size: 14.5px;
    text-decoration: none;
    text-align: center;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}
.pricing__cta:hover {
    background: #ffffff;
    color: var(--brand);
    transform: translateY(-1px);
}
/* alt link ("İletişime geçin") */
.pricing__cta-link {
    display: block;
    margin-top: 10px;
    color: #0F172A;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pricing__cta-link:hover { color: #1f2937; }

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .pricing__card-content { padding: 24px 22px 22px; }
    .pricing__title { font-size: 28px; }
    .pricing__price-amount { font-size: 23px; }
    .pricing__card-name { font-size: 23px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pricing__aurora-1,
    .pricing__aurora-2 { animation: none; }
    .pricing__card-aurora { animation: none; }
    .pricing__card,
    .pricing__price-monthly,
    .pricing__price-yearly,
    .pricing__toggle-thumb { transition: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────────
   - Yuvarlatılmış koyu kart, radial gradient overlay
   - 4-col responsive grid (Marka / Kurumsal / Faydalı / İletişim)
   - Sosyal ikon satırı + telif
   - Büyük "İCANAD" SVG hover-reveal text (yalnız ≥1024px)             */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.footer {
    position: relative;
    margin: 32px 0 0;
    padding: 56px 0 0;
    border-radius: 0;
    background: #0B1118;
    overflow: hidden;
    isolation: isolate;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}
.footer::before {
    content: none;
}
.footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 56px;
}

/* ── Üst grid ───────────────────────────────────────────────── */
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 32px;
}
@media (min-width: 640px) {
    .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (min-width: 1024px) {
    .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px; }
}

/* Marka */
.footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }
.footer__brand-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.footer__brand-logo img {
    height: 42px;
    width: auto;
    display: block;
}

/* Telefon butonu (referans footer'daki pill buton) */
.footer__phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 14px 26px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.footer__phone-btn svg { width: 18px; height: 18px; color: #ffffff; flex-shrink: 0; }
.footer__phone-btn:hover { border-color: rgba(148, 163, 184, 0.55); background: rgba(255, 255, 255, 0.04); }
.footer__brand-text {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

/* Sütun başlıkları */
.footer__col-title {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Listeler */
.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer__list a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__list a:hover { color: #3ca2fa; }

/* İletişim sütunu */
.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #94a3b8;
    line-height: 1.55;
}
.footer__contact a {
    color: inherit;
}
.footer__contact-icon {
    flex-shrink: 0;
    color: #2A3645;
    display: inline-flex;
    margin-top: 2px;
}
.footer__contact-icon svg {
    width: 18px;
    height: 18px;
}

/* ── Divider + alt satır ────────────────────────────────────── */
.footer__divider {
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    margin: 16px 0 24px;
}
.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    padding-bottom: 32px;
}
@media (min-width: 768px) {
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
    }
}
/* Sol blok: sosyal ikonlar üstte, copyright altta */
.footer__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
@media (min-width: 768px) {
    .footer__bottom-left { align-items: flex-start; }
}
.footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    color: #94a3b8;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
/* Ödeme yöntemi logoları bandı (iyzico / Mastercard / Visa / Amex / Troy) */
.footer__payments {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
}
.footer__social-link:hover {
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.04);
}
.footer__social-link svg {
    width: 15px;
    height: 15px;
}
.footer__copy {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}
@media (min-width: 768px) {
    .footer__copy { text-align: left; }
}
.footer__copy a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__copy a:hover { color: #3ca2fa; }
.footer__copy-sep {
    margin: 0 8px;
    color: rgba(148, 163, 184, 0.35);
}

/* ── Alt bar: yasal linkler + dil seçici ────────────────────── */
.footer__legal {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer__legal > a {
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__legal > a:hover { color: #3ca2fa; }
.footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 5px 9px;
}
.footer__lang svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer__lang select {
    background: transparent;
    border: 0;
    color: #cbd5e1;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.footer__lang select option { color: #0f172a; }

/* ── Büyük "İCANAD" hover-reveal text ───────────────────────── */
.footer__hero {
    display: none;
    height: 26rem;
    /* footer__container ile dev "İCANAD" yazısı arasında belirgin nefes
       alanı bırak. Pozitif margin-top, container'ın alt kenarı ile SVG
       glyph'leri arasına ~3rem boşluk koyar.
       margin-bottom de yumuşatıldı: artık altta sosyal + copyright satırı var
       (footer__bottom yazının altına alındı). Aşırı negatif değer SVG glyph'inin
       altındaki boşluğu yok edip sosyal ikonların yazıya çarpmasına neden olur. */
    margin-top: 2rem;
    margin-bottom: -4rem;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .footer__hero { display: flex; }
}
.footer__hero-svg {
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.footer__hero-text {
    fill: transparent;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.04em;
}

/* Layer 1 — outline (yalnız hover'da görünür) */
.footer__hero-outline {
    stroke: rgba(148, 163, 184, 0.30);
    stroke-width: 0.5;
    opacity: 0;
    transition: opacity .35s ease;
}
.footer__hero-svg.is-hovered .footer__hero-outline { opacity: 0.7; }

/* Layer 2 — stroke-draw animasyonu (footer.is-in tetiklemesi) */
.footer__hero-stroke {
    stroke: #3ca2fa;
    stroke-width: 0.5;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}
.footer.is-in .footer__hero-stroke {
    animation: footer-stroke-draw 4s ease-in-out forwards;
}
@keyframes footer-stroke-draw {
    to { stroke-dashoffset: 0; }
}

/* Layer 3 — gradient fill, mask ile cursor reveal */
.footer__hero-fill {
    stroke: url(#footerHoverGrad);
    stroke-width: 0.5;
    opacity: 0;
    transition: opacity .35s ease;
}
.footer__hero-svg.is-hovered .footer__hero-fill { opacity: 1; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .footer.is-in .footer__hero-stroke { animation: none; stroke-dashoffset: 0; }
    .footer__hero-outline,
    .footer__hero-fill { transition: none; }
    .footer__social-link { transition: none; }
}

/* ── Mobil küçültmeler ─────────────────────────────────────── */
@media (max-width: 640px) {
    .footer { margin: 24px 0 0; }
    .footer__container { padding: 0 16px; }
    .footer__grid { padding-bottom: 24px; }
    /* Tüm ana sayfa container'larını mobil iç padding 16px'e eşitle */
    .payments__container,
    .marketplaces__container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .brands__copy { padding-left: 16px; padding-right: 16px; }
}


/* ───────────────────────────────────────────────────────────────────────
 * Demo Talep sayfası — /demo-talep/
 *   - Topbar + header ana sayfa ile aynı (style.css üzerinden inheriting)
 *   - 2-col hero: sol marketing copy, sağ form
 *   - Form: subdomain canlı önizleme, autoreply (.is-success / .is-error)
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Demo Split — Help Scout tarzı kayıt düzeni:
   sol beyaz kolonda sade form + adım göstergesi, sağda inset gradient
   panel içinde glassmorphism testimonial kartı.                       */
.demo-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
    background: #ffffff;
    /* Topbar + header bu sayfada basılmaz ($hideSiteChrome) —
       section tek başına ekranı kaplar. */
    min-height: 100vh;
}

/* SOL — form kolonu */
.demo-split__form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 12px;
}
.demo-split__form-inner {
    width: 100%;
    max-width: 560px;
}
.demo-split__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.demo-split__logo { display: inline-flex; align-items: center; }
.demo-split__logo img { height: 30px; width: auto; display: block; }
.demo-split__steps-label {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
}
.demo-split__progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 40px;
}
/* Segment: tamamlanan adım tam dolar (is-done); aktif adımın dolumu
   JS'in --seg-fill değişkeniyle, adımdaki geçerli alan oranına göre artar. */
.demo-split__progress-seg {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.demo-split__progress-seg::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6ee7b7 0%, #10B981 100%);
    transition: width 0.35s ease;
}
.demo-split__progress-seg.is-current::after { width: var(--seg-fill, 8%); }
.demo-split__progress-seg.is-done::after    { width: 100%; }
.demo-split__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    color: #0a1f38;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.demo-split__sub {
    margin: 0 0 24px;
    font-size: 14px;
    color: #64748b;
}
/* KVKK onayı — formun altında, adımlardan bağımsız her adımda görünür */
.demo-form__field--consent {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 26px 0 0;
}
/* Tek satır — geniş ekranda sarma yok; dar ekranda taşmasın diye
   mobilde normal sarmaya döner. */
.demo-form__field--consent label { white-space: nowrap; }
@media (max-width: 640px) {
    .demo-form__field--consent label { white-space: normal; }
}

/* Form, kart görünümünden arındırılır — alanlar beyaz zeminde durur.
   Çift class: sonradan gelen .demo-form tanımını specificity ile ezer. */
.demo-form.demo-form--bare {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Adım panelleri */
.demo-form__step { display: none; }
.demo-form__step.is-active {
    display: block;
    animation: demo-step-in 0.28s ease;
}
@keyframes demo-step-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.demo-form__back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s ease, background 0.15s ease;
}
.demo-form__back:hover { color: #0f172a; background: #f1f5f9; }
.demo-form__back svg { width: 14px; height: 14px; }

/* SAĞ — gradient marka paneli.
   Zemin gradyanı slide 0 ile aynı (JS'siz fallback). isolation: izole
   stacking context — .demo-split__bg katmanları z-index:-1 ile kolon
   zemininin üstünde ama içerik ve dokunun altında kalır. */
.demo-split__brand-col {
    position: relative;
    display: flex;
    flex-direction: column;   /* kart + altındaki dot navigasyonu dikey dizilir */
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(236, 72, 153, 0.38) 0%, transparent 55%),
        radial-gradient(110% 90% at 0% 0%, rgba(56, 189, 248, 0.35) 0%, transparent 55%),
        linear-gradient(155deg, #2f7ff0 0%, #2b3fd6 55%, #5b2fd0 100%);
}
/* Yorum başına arka plan katmanları — aktif slide ile crossfade */
.demo-split__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.demo-split__bg.is-active { opacity: 1; }
/* Slide 0 — MTFight House: mavi-mor (kolon zeminiyle aynı) */
.demo-split__bg[data-bg="0"] {
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(236, 72, 153, 0.38) 0%, transparent 55%),
        radial-gradient(110% 90% at 0% 0%, rgba(56, 189, 248, 0.35) 0%, transparent 55%),
        linear-gradient(155deg, #2f7ff0 0%, #2b3fd6 55%, #5b2fd0 100%);
}
/* Slide 1 — Terapi Giyim: turkuaz-lacivert */
.demo-split__bg[data-bg="1"] {
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(52, 211, 153, 0.35) 0%, transparent 55%),
        radial-gradient(110% 90% at 0% 0%, rgba(125, 211, 252, 0.35) 0%, transparent 55%),
        linear-gradient(155deg, #0891b2 0%, #1d4ed8 55%, #312e81 100%);
}
/* Slide 2 — Akıncı Av: mor-bordo */
.demo-split__bg[data-bg="2"] {
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(251, 146, 60, 0.32) 0%, transparent 55%),
        radial-gradient(110% 90% at 0% 0%, rgba(232, 121, 249, 0.35) 0%, transparent 55%),
        linear-gradient(155deg, #7c3aed 0%, #6d28d9 55%, #be185d 100%);
}
@media (prefers-reduced-motion: reduce) {
    .demo-split__bg { transition: none; }
}
/* Zeminde çok hafif kılavuz çizgisi dokusu */
.demo-split__brand-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.demo-split__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -24px rgba(2, 8, 60, 0.45);
}
.demo-split__card-logo {
    height: 22px;
    width: auto;
    align-self: flex-start;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .95;
}
.demo-split__quote {
    margin: auto 0;
    padding: 24px 0;
    font-size: 17.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.demo-split__quote strong { color: #ffffff; font-weight: 700; }
.demo-split__person {
    display: flex;
    align-items: center;
    gap: 12px;
}
.demo-split__person-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.demo-split__person-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.demo-split__person-meta strong { font-size: 13.5px; color: #ffffff; }
.demo-split__person-meta span   { font-size: 12px; color: rgba(255, 255, 255, 0.72); }

/* ── Testimonial slider ─────────────────────────────────────────────
   Slide'lar grid ile üst üste bindirilir (en uzun yorum kart yüksekliğini
   belirler → geçişte zıplama olmaz). Aktif slide fade + hafif yukarı
   kayma ile görünür. Dot'lar kartın altında; aktif dot'un çevresindeki
   SVG halka 6sn'de dolar (JS DURATION ile senkron). */
.demo-split__slides {
    display: grid;
    flex: 1 1 auto;
}
.demo-split__slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.demo-split__slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.demo-split__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.demo-split__dot {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
/* Çekirdek nokta */
.demo-split__dot::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transition: background 0.2s ease;
}
.demo-split__dot:hover::before,
.demo-split__dot.is-active::before { background: #ffffff; }
/* Dolan halka — çevre uzunluğu 2π×8 ≈ 50.27 */
.demo-split__dot svg {
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);   /* dolum saat 12'den başlasın */
}
.demo-split__dot svg circle {
    fill: none;
    stroke: transparent;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 50.27;
    stroke-dashoffset: 50.27;
}
.demo-split__dot.is-active svg circle {
    stroke: rgba(255, 255, 255, 0.9);
    animation: demo-dot-fill 6s linear forwards;   /* JS DURATION ile aynı */
}
@keyframes demo-dot-fill {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-split__slide { transition: none; }
    /* Otomatik geçiş JS'te kapalı — halka animasyonsuz tam dolu durur. */
    .demo-split__dot.is-active svg circle {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.demo-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 32px;
    box-shadow:
        0 24px 60px -20px rgba(15, 23, 42, 0.18),
        0 8px 24px -10px rgba(15, 23, 42, 0.08);
}
.demo-form__head { margin: 0 0 22px; }
.demo-form__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0a1f38;
    letter-spacing: -0.01em;
}
.demo-form__subtitle {
    margin: 0;
    font-size: 13.5px;
    color: #64748b;
}

.demo-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.demo-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    min-width: 0;
}
.demo-form__row + .demo-form__field { margin-top: 0; }
.demo-form__field label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.demo-form__field input[type="text"],
.demo-form__field input[type="email"],
.demo-form__field input[type="tel"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.demo-form__field input::placeholder { color: #94a3b8; }
.demo-form__field input:hover { border-color: #94a3b8; }
.demo-form__field input:focus {
    outline: none;
    border-color: #027BC4;
    background: #ffffff;
}
.demo-form__field input:invalid:not(:placeholder-shown) {
    border-color: #fca5a5;
}

/* Select (sektör) — input'larla aynı görünüm + özel ok işareti */
.demo-form__field select {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 14px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.demo-form__field select:invalid { color: #94a3b8; }
.demo-form__field select:hover { border-color: #94a3b8; }
.demo-form__field select:focus {
    outline: none;
    border-color: #027BC4;
}

/* Subdomain alanı: input + .icanad.com suffix */
.demo-form__subdomain {
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.demo-form__subdomain:hover { border-color: #94a3b8; }
.demo-form__subdomain:focus-within {
    border-color: #027BC4;
}
/* Generic `.demo-form__field input[type="text"]` kuralının border/radius/bg
   bastırması için specificity artırıldı (type attribute eklenerek). Aksi
   halde subdomain input içinde bir alt-kutu görünür ve `.icanad.com`'un
   solunda dik bir oval çizgi belirir. */
.demo-form__subdomain input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 4px 0 14px;     /* sağ tarafta minimal boşluk → suffix'e yapışsın */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    outline: none;
}
.demo-form__subdomain input[type="text"]:hover,
.demo-form__subdomain input[type="text"]:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
}
.demo-form__suffix {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 14px 0 0;
    background: transparent;
    color: #64748b;
    font-family: Menlo, Consolas, "SF Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

/* Subdomain canlı uygunluk durumu — yazarken API sorgusunun sonucu */
.demo-form__sub-status {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7280;
}
.demo-form__sub-status.is-checking { color: #6b7280; }
.demo-form__sub-status.is-ok  { color: #16A34A; font-weight: 500; }
.demo-form__sub-status.is-bad { color: #DC2626; font-weight: 500; }

.demo-form__hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.demo-form__hint code {
    padding: 1px 6px;
    background: #f1f5f9;
    color: #027BC4;
    font-size: 11.5px;
    border-radius: 4px;
    font-family: Menlo, Consolas, "SF Mono", monospace;
}
.demo-form__hint.is-active {
    color: #047857;
}
.demo-form__hint.is-active code {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}

/* KVKK checkbox */
.demo-form__field--checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 22px;
}
.demo-form__field--checkbox input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 1px;
    accent-color: #027BC4;
    cursor: pointer;
}
.demo-form__field--checkbox label {
    margin: 0;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    cursor: pointer;
}
.demo-form__field--checkbox a {
    color: #027BC4;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.demo-form__field--checkbox a:hover { color: #015a8f; }

/* KVKK onay satırı (form altı) — ince çizgili özel checkbox + siyah,
   400 ağırlıklı etiket. Base .demo-form__field--checkbox kurallarını
   kaynak sırası gereği ezer (aynı specificity, daha sonra gelir). */
.demo-form__field--consent input[type="checkbox"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    border: 1px solid #94A3B8;
    border-radius: 2px;
    background: #ffffff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.demo-form__field--consent input[type="checkbox"]:hover { border-color: #64748B; }
/* Genel `.demo-form__field input:invalid:not(:placeholder-shown)` kuralı
   checkbox'ta her zaman eşleşir (placeholder yok) ve kırmızı çerçeve
   basar; burada nötr gri ile eziyoruz (aynı specificity, daha sonra). */
.demo-form__field--consent input[type="checkbox"]:invalid:not(:placeholder-shown) {
    border-color: #94A3B8;
}
.demo-form__field--consent input[type="checkbox"]:checked {
    border-color: #027BC4;
    background: #027BC4;
}
.demo-form__field--consent input[type="checkbox"]:checked::before {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 1.5px solid #ffffff;
    border-bottom: 1.5px solid #ffffff;
    transform: rotate(-45deg);
}
.demo-form__field--consent input[type="checkbox"]:focus-visible {
    outline: 2px solid #93C5FD;
    outline-offset: 2px;
}
.demo-form__field--consent label {
    font-weight: 400;
    color: #0F172A;
}
.demo-form__field--consent a {
    color: #010202;
    font-weight: 400;
}
.demo-form__field--consent a:hover { color: #027BC4; }

/* Submit button — düz marka mavisi, gölgesiz */
.demo-form__submit {
    width: 100%;
    height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #027BC4;
    color: #ffffff;
    border: 0;
    border-radius: 2px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.demo-form__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #026aa9;
}
/* Adımdaki zorunlu alanlar dolana kadar buton gri ve pasif durur;
   yükleme (is-loading) hâlinde ise marka rengini korur. */
.demo-form__submit:disabled:not(.is-loading) {
    background: #cbd5e1;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
}
.demo-form__submit.is-loading:disabled {
    opacity: 0.85;
    cursor: progress;
}
.demo-form__submit-spinner {
    display: none;
    width: 18px; height: 18px;
    animation: demo-spin 0.9s linear infinite;
}
.demo-form__submit-icon { width: 16px; height: 16px; }
.demo-form__submit.is-loading .demo-form__submit-text,
.demo-form__submit.is-loading .demo-form__submit-icon { display: none; }
.demo-form__submit.is-loading .demo-form__submit-spinner { display: inline-block; }
@keyframes demo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Başarı ekranı — form gönderilince adımların yerine gelir ─────── */
.demo-form__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 0 10px;
}
.demo-form__success-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
}
.demo-form__success-circle {
    stroke: #16A34A;
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: demo-succ-draw 0.6s ease-out forwards;
}
.demo-form__success-check {
    stroke: #16A34A;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: demo-succ-draw 0.35s ease-out 0.55s forwards;
}
@keyframes demo-succ-draw {
    to { stroke-dashoffset: 0; }
}
.demo-form__success-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #0F172A;
}
.demo-form__success-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #4B5563;
    max-width: 400px;
}
.demo-form__success-text code {
    font-family: inherit;
    font-weight: 600;
    color: #027BC4;
}

/* Feedback */
.demo-form__feedback {
    margin-top: 14px;
    padding: 0;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    transition: padding 0.2s ease;
}
.demo-form__feedback.is-success {
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #065f46;
}
.demo-form__feedback.is-error {
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #991b1b;
}
.demo-form__feedback code {
    padding: 1px 6px;
    background: #ffffff;
    color: #027BC4;
    border-radius: 4px;
    font-family: Menlo, Consolas, "SF Mono", monospace;
    font-size: 12.5px;
}

.demo-form__small {
    margin: 16px 0 0;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.5;
    text-align: center;
}
.demo-form__small strong { color: #475569; }

/* ── Demo Footer (minimal) ─────────────────────────────────── */
.demo-footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 24px;
}
.demo-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.demo-footer__copy {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}
.demo-footer__links {
    display: flex;
    gap: 20px;
}
.demo-footer__links a {
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}
.demo-footer__links a:hover { color: #027BC4; }

/* ── Demo Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .demo-split { grid-template-columns: 1fr; min-height: 0; }
    .demo-split__brand-col { display: none; }
}
@media (max-width: 768px) {
    .demo-split { padding: 10px; }
    .demo-split__form-col { padding: 36px 16px; }
    .demo-split__title { font-size: clamp(26px, 6vw, 32px); }
    .demo-split__progress { margin-bottom: 30px; }
    .demo-form__row { grid-template-columns: 1fr; gap: 0; }
    .demo-form__row .demo-form__field { margin-bottom: 16px; }
}
@media (max-width: 480px) {
    .demo-form__suffix { padding: 0 10px; font-size: 12px; }
    .demo-footer__inner { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-form__submit-spinner { animation: none; }
    .demo-form__submit { transition: none; }
    .demo-form__step.is-active { animation: none; }
    .demo-form__success-circle,
    .demo-form__success-check { animation: none; stroke-dashoffset: 0; }
}

/* ─── ORBIT PANEL — Pazar yerleri (sol başlık + CTA, sağ dönen yörünge) ────
   Eski 9-kart grid yerine: tek panel + 3 halka. Her halkada 3 logo, sıralı
   farklı sürelerde döner; iç halka cw, orta halka ccw, dış halka cw.
   Icon'lar orbit ile birlikte döner — yuvarlak avatarlar olduğundan kabul
   edilebilir; counter-rotation eklenmedi (CSS-only basit kalsın diye).      */

.orbit-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    box-shadow: none;
}

/* ── Sol kolon: başlık + açıklama + CTA ─────────────────────────────────── */
.orbit-panel__copy {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.orbit-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(2, 123, 196, 0.10), rgba(14, 17, 111, 0.06));
    color: #0E116F;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}

.orbit-panel__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.15;
    color: #0a1f38;
    letter-spacing: -0.015em;
}
.orbit-panel__title-accent {
    background: linear-gradient(120deg, #027BC4 0%, #0E116F 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.orbit-panel__subtitle {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    max-width: 480px;
}

.orbit-panel__cta {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.orbit-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease,
                background .2s ease, border-color .2s ease, color .2s ease;
    will-change: transform;
}
.orbit-panel__btn--primary {
    background: linear-gradient(120deg, #027BC4 0%, #0E116F 100%);
    color: #ffffff;
    box-shadow: 0 14px 30px -14px rgba(2, 123, 196, 0.55);
}
.orbit-panel__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px -16px rgba(2, 123, 196, 0.65);
}
.orbit-panel__btn--ghost {
    background: #ffffff;
    color: #0a1f38;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
}
.orbit-panel__btn--ghost:hover {
    border-color: #027BC4;
    color: #027BC4;
}

/* ── Sağ kolon: orbit görsel ────────────────────────────────────────────── */
.orbit-panel__visual {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Merkez: icanad hub */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 22px;
    background: #000000;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 14px 36px -10px rgba(2, 123, 196, 0.40),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    /* Hafif nabız efekti */
    animation: orbit-pulse 4s ease-in-out infinite;
}
.orbit-center img {
    width: 72px;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
}

/* Halkalar (dotted) */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1.5px dashed rgba(15, 23, 42, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation-name: orbit-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.orbit--1 {
    width: 220px;  height: 220px;
    animation-duration: 22s;
}
.orbit--2 {
    width: 340px;  height: 340px;
    animation-duration: 32s;
    animation-direction: reverse;
}
.orbit--3 {
    width: 460px;  height: 460px;
    animation-duration: 44s;
}

/* Yörünge ikonları: --a açısına göre dağıt, --r ile yörünge yarıçapı */
.orbit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;        /* merkezle */
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
}
.orbit--1 .orbit-icon { --r: 110px; }
.orbit--2 .orbit-icon { --r: 170px; }
.orbit--3 .orbit-icon { --r: 230px; }

.orbit-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

@keyframes orbit-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-pulse {
    0%, 100% { box-shadow: 0 14px 36px -10px rgba(2, 123, 196, 0.40),
                           0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
    50%      { box-shadow: 0 18px 44px -10px rgba(2, 123, 196, 0.55),
                           0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
}

/* IntersectionObserver fade-in: marketplaces.is-in tetiklendiğinde     */
.marketplaces .orbit-panel {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.marketplaces.is-in .orbit-panel {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet (≤980px): tek sütun, görsel altta */
@media (max-width: 980px) {
    .orbit-panel {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 24px;
        text-align: center;
    }
    .orbit-panel__copy {
        max-width: 640px;
        margin: 0 auto;
    }
    .orbit-panel__subtitle { margin-left: auto; margin-right: auto; }
    .orbit-panel__cta { justify-content: center; }
    .orbit-panel__visual {
        margin: 8px auto 0;
        max-width: 380px;
    }
    .orbit--1 { width: 180px; height: 180px; }
    .orbit--2 { width: 280px; height: 280px; }
    .orbit--3 { width: 380px; height: 380px; }
    .orbit--1 .orbit-icon { --r: 90px;  }
    .orbit--2 .orbit-icon { --r: 140px; }
    .orbit--3 .orbit-icon { --r: 190px; }
}

/* Mobil (≤640px) — orbit daha kompakt */
@media (max-width: 640px) {
    .orbit-panel {
        padding: 0;
        border-radius: 0;
        gap: 18px;
    }
    .orbit-panel__eyebrow {
        font-size: 11.5px;
        padding: 5px 11px;
        margin-bottom: 14px;
    }
    .orbit-panel__title { font-size: 28px; }
    .orbit-panel__subtitle { font-size: 15px; }
    .orbit-panel__btn { padding: 11px 20px; font-size: 13.5px; }

    .orbit-panel__visual { max-width: 320px; }
    .orbit-center { width: 76px; height: 76px; border-radius: 18px; }
    .orbit-center img { width: 56px; }

    .orbit-icon { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .orbit-icon img { width: 26px; height: 26px; }

    .orbit--1 { width: 152px; height: 152px; }
    .orbit--2 { width: 232px; height: 232px; }
    .orbit--3 { width: 312px; height: 312px; }
    .orbit--1 .orbit-icon { --r: 76px;  }
    .orbit--2 .orbit-icon { --r: 116px; }
    .orbit--3 .orbit-icon { --r: 156px; }
}

/* En küçük (≤380px) — orbit 3 dışarı taşmasın diye */
@media (max-width: 380px) {
    .orbit-panel { padding: 0; }
    .orbit-panel__visual { max-width: 280px; }
    .orbit--3 { width: 272px; height: 272px; }
    .orbit--3 .orbit-icon { --r: 136px; }
}

/* Hareket azaltma tercihinde animasyonlar sus */
@media (prefers-reduced-motion: reduce) {
    .orbit,
    .orbit-center { animation: none; }
    .marketplaces .orbit-panel { transition: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ILETISIM SAYFASI (/iletisim/) — minimal skeleton placeholder
   Dedicated contact page için temel layout. İçerik (form, kanallar, harita)
   kullanıcı yapıyı belirledikten sonra .iletisim-page__placeholder içine eklenir.
   ═══════════════════════════════════════════════════════════════════════ */
.iletisim-page {
    width: 100%;
    background: #ffffff;
    /* Header + topbar yüksekliği — harita sayfa header'ının altına yaslı başlasın.
       Extra üst boşluk YOK; eyebrow/title/lead bloğu kaldırıldı. */
    padding-top: calc(var(--header-h) + var(--topbar-h));
    padding-bottom: 64px;
}
@media (min-width: 768px) {
    .iletisim-page { padding-bottom: 96px; }
}
@media (min-width: 1024px) {
    .iletisim-page { padding-bottom: 120px; }
}

.iletisim-page__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px)  { .iletisim-page__container { padding: 0 24px; } }
@media (min-width: 1024px) { .iletisim-page__container { padding: 0 32px; } }

.iletisim-page__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.iletisim-page__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 18px;
    background: rgba(2, 123, 196, 0.10);
    color: #027BC4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
}
.iletisim-page__title {
    margin: 0 0 16px;
    font-size: 38px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.iletisim-page__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* Placeholder — şimdilik görünmez. İçerik eklendikçe gerçek bölümler bu div'i
   replace eder. min-height ile sayfa altı boşluk hissetmez. */
.iletisim-page__placeholder {
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEO FEATURES — "Pazarlama ve SEO araçlarıyla fark edilin"
   Payments koyu bölümünden sonra açık tema 2 kart grid:
     Sol  → Entegre SEO kontrolleri (search result mockup + meta chip'leri)
     Sağ  → Yerleşik blog yazma (editor mockup + Paylaş butonu + cursor)
   ═══════════════════════════════════════════════════════════════════════ */
.seo-features {
    background: #ffffff;
    padding: 80px 0;
}
@media (min-width: 768px) { .seo-features { padding: 96px 0; } }
@media (min-width: 1024px) { .seo-features { padding: 112px 0; } }

.seo-features__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 1024px) { .seo-features__container { padding: 0 32px; } }

/* ── Head row: title+subtitle (left) + CTA (right) ───────────────── */
.seo-features__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .seo-features__head {
        grid-template-columns: 1fr auto;
        gap: 40px;
        align-items: end;
        margin-bottom: 56px;
    }
}

.seo-features__title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.seo-features__subtitle {
    margin: 0;
    max-width: 720px;
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
}

.seo-features__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: end;
    height: 44px;
    padding: 0 22px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, transform .2s ease;
}
.seo-features__cta:hover { background: #1e293b; transform: translateY(-1px); }
.seo-features__cta svg { width: 16px; height: 16px; }

/* ── 2 kart grid ─────────────────────────────────────────────────── */
.seo-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .seo-features__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* Mobilde kartlar alt alta değil — fiyat paketleri gibi yatay scroll-snap
   carousel'i; ilk kart sola yaslanır, sağda ikinci kartın ~60-80px'lik bir
   peek'i görünür → kullanıcı kaydırılabileceğini hisseder.                 */
@media (max-width: 640px) {
    .seo-features__grid {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin: 0 -24px;            /* container'ın 24px iç padding'inden taş */
        padding: 8px 16px 20px;     /* edge gutter (her tarafta 16px) */
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }
    .seo-features__grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .seo-features__grid > .seo-card {
        flex: 0 0 calc(100% - 80px);
        max-width: calc(100% - 80px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .seo-features__grid > .seo-card:last-child {
        margin-right: 16px;
    }
}

/* ── Kart (lavender gradient zemin + iç mockup + caption) ────────── */
.seo-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 32px 28px 28px;
    background: linear-gradient(180deg, #efeaf4 0%, #e2dbef 100%);
    border-radius: 18px;
}
@media (min-width: 768px) { .seo-card { padding: 40px 36px 32px; } }

.seo-card__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex-grow: 1;
}

.seo-card__caption { display: block; }

.seo-card__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.01em;
}
.seo-card__desc {
    margin: 0;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
}

/* ── Mockup ortak: beyaz kart + drop shadow ─────────────────────── */
.seo-mockup {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 18px 36px -18px rgba(15, 23, 42, 0.18);
}

/* ── Search result mockup ───────────────────────────────────────── */
.seo-mockup--search {
    padding: 20px 22px;
}
.seo-mockup__brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.seo-mockup__site {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
}
.seo-mockup__url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.seo-mockup__url {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "+99 SEO Puanı" rozeti — pop-in animasyon (12s cycle, text typing
   ile senkron: line 1 yazıldıktan ~0.2s sonra zıplayarak gelir,
   cycle sonunda fade-out + reset). */
.seo-mockup__score {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.15);
    transform-origin: center;
    animation: seoScorePop 12s ease-in-out infinite;
}
.seo-mockup__score svg { width: 9px; height: 9px; }

@keyframes seoScorePop {
    0%, 14%   { opacity: 0; transform: translateY(8px) scale(0.55); }
    18%       { opacity: 1; transform: translateY(-4px) scale(1.25);
                animation-timing-function: cubic-bezier(0.18, 1.4, 0.4, 1); }
    22%       { opacity: 1; transform: translateY(0)   scale(1);    }
    92%       { opacity: 1; transform: translateY(0)   scale(1);    }
    96%, 100% { opacity: 0; transform: translateY(8px) scale(0.55); }
}
.seo-mockup__product {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
    color: #1d4ed8;
    letter-spacing: -0.005em;
}
.seo-mockup__bar {
    height: 7px;
    width: 78%;
    background: #e5e7eb;
    border-radius: 4px;
    margin-bottom: 14px;
}
.seo-mockup__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #374151;
}
.seo-mockup__sep { color: #9ca3af; }
.seo-mockup__stars { color: #f59e0b; letter-spacing: 1px; }
.seo-mockup__count { color: #6b7280; }

/* Meta chip'ler (kartın altına) */
.seo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.seo-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    white-space: nowrap;
}

/* ── Editor mockup (blog) ───────────────────────────────────────── */
.seo-mockup--editor {
    position: relative;
    padding: 14px 18px 20px;
    min-height: 240px;
}
.seo-mockup__toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 14px;
}
.seo-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1;
}
.seo-toolbar__btn--text { width: auto; padding: 0 6px; gap: 3px; }
.seo-toolbar__btn svg { width: 14px; height: 14px; }
.seo-toolbar__chev { width: 10px !important; height: 10px !important; opacity: 0.6; }
.seo-toolbar__sep {
    width: 1px;
    height: 18px;
    background: #e5e7eb;
    margin: 0 4px;
}

.seo-mockup__editor-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 76px;
}
.seo-mockup__line {
    height: 9px;
    background: #e5e7eb;
    border-radius: 4px;
}
.seo-mockup__line--short { width: 58%; }

/* ── Typewriter text (yazılıyor gibi) ──────────────────────────────
   3 satır metin sırayla "typewriter" efektiyle yazılır:
     L1: 0.0 – 2.0s   (32 karakter)
     L2: 2.2 – 4.5s   (37 karakter)
     L3: 4.7 – 6.0s   (24 karakter)
   6.0 – 11s: hepsi görünür durur (cursor click bu pencerede oynar)
   11 – 12s: fade-out (width 0). 12s sonunda loop tekrarlar.        */
.seo-typed {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    line-height: 1.65;
    color: #1f2937;
}
.seo-typed__line {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    max-width: max-content;        /* caret cümlenin sonunda durur, editör kenarına gitmez */
    border-right: 1.5px solid transparent;
}
.seo-typed__line:nth-child(1) { animation: seoTypedL1 12s linear infinite; }
.seo-typed__line:nth-child(2) { animation: seoTypedL2 12s linear infinite; }
.seo-typed__line:nth-child(3) { animation: seoTypedL3 12s linear infinite; }

@keyframes seoTypedL1 {
    0%               { width: 0;    border-right-color: #1f2937; animation-timing-function: steps(32, end); }
    16.7%            { width: 100%; border-right-color: transparent; animation-timing-function: linear; }
    91%              { width: 100%; border-right-color: transparent; }
    93%              { width: 0;    border-right-color: transparent; }
    100%             { width: 0;    border-right-color: transparent; }
}
@keyframes seoTypedL2 {
    0%               { width: 0;    border-right-color: transparent; }
    16.7%            { width: 0;    border-right-color: transparent; }
    18.3%            { width: 0;    border-right-color: #1f2937; animation-timing-function: steps(37, end); }
    37.5%            { width: 100%; border-right-color: transparent; animation-timing-function: linear; }
    91%              { width: 100%; border-right-color: transparent; }
    94%              { width: 0;    border-right-color: transparent; }
    100%             { width: 0;    border-right-color: transparent; }
}
@keyframes seoTypedL3 {
    0%               { width: 0;    border-right-color: transparent; }
    37.5%            { width: 0;    border-right-color: transparent; }
    39.2%            { width: 0;    border-right-color: #1f2937; animation-timing-function: steps(24, end); }
    50%              { width: 100%; border-right-color: #1f2937; animation-timing-function: linear; }
    /* "yeniden keşfet." sonunda caret durur; cycle bitimine kadar görünür kalır */
    93%              { width: 100%; border-right-color: #1f2937; }
    96%              { width: 0;    border-right-color: transparent; }
    100%             { width: 0;    border-right-color: transparent; }
}

.seo-mockup__reactions {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    color: #6b7280;
}
.seo-mockup__reactions svg { width: 18px; height: 18px; }

.seo-mockup__share {
    position: absolute;
    right: 18px;
    bottom: 16px;
    padding: 9px 18px;
    background: #5b3fc5;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: default;
    box-shadow: 0 6px 18px -6px rgba(91, 63, 197, 0.45);
    transform-origin: center center;
    animation: seoSharePress 12s ease-in-out infinite;
}
.seo-mockup__cursor {
    position: absolute;
    right: -8px;
    bottom: -10px;
    width: 14px;
    height: 18px;
    pointer-events: none;
    transform-origin: 4px 4px; /* SVG arrow tip — basıldığında dip noktası buradan */
    animation: seoCursorClick 12s ease-in-out infinite;
}

/* ── Cursor "tıklama" gestürü ──────────────────────────────────────
   Tüm metin yazıldıktan sonra (6 – 11s penceresinde) cursor butona
   yaklaşır → kısa bir basma → bırakma → tekrar uzaklaşma.            */
@keyframes seoCursorClick {
    0%, 50%   { transform: translate(0, 0) scale(1); }
    58%       { transform: translate(-3px, -4px) scale(1.05); } /* yaklaş */
    62%       { transform: translate(-2px, -1px) scale(0.9);  } /* tıkla (in) */
    66%       { transform: translate(-3px, -4px) scale(1.05); } /* bırak (out) */
    78%       { transform: translate(-3px, -4px) scale(1.05); } /* tut */
    92%, 100% { transform: translate(0, 0)  scale(1); }
}

/* ── Paylaş butonu tıklama efekti (cursor ile senkron) ────────── */
@keyframes seoSharePress {
    0%, 60%   { transform: scale(1);    box-shadow: 0 6px 18px -6px rgba(91, 63, 197, 0.45); }
    62%       { transform: scale(0.96); box-shadow: 0 2px 6px  -2px rgba(91, 63, 197, 0.55); }
    66%       { transform: scale(1);    box-shadow: 0 6px 18px -6px rgba(91, 63, 197, 0.45); }
    100%      { transform: scale(1);    box-shadow: 0 6px 18px -6px rgba(91, 63, 197, 0.45); }
}

/* Erişilebilirlik: reduced-motion tercihinde animasyonlar kapanır,
   metin doğrudan görünür kalır.                                  */
@media (prefers-reduced-motion: reduce) {
    .seo-typed__line { width: 100%; border-right-color: transparent; animation: none; }
    .seo-mockup__cursor, .seo-mockup__share, .seo-mockup__score { animation: none; }
    .seo-mockup__score { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HAKKIMIZDA SAYFASI — /hakkimizda/
   Yapı: hero head → stats row → mission → why grid → CTA
   Token'lar (--brand, --radius) homepage ile aynı; bağımsız bir bölüm
   olarak iletisim-page yapısına paralel tasarlandı.
   ═══════════════════════════════════════════════════════════════════════ */
.hakkimizda-page {
    width: 100%;
    background: #ffffff;
    /* Hero kendi padding-top'unu (header + topbar offset dahil) yönetiyor;
       sayfa kapsayıcı top padding sıfır. Sayfanın son section'ı (POWER)
       koyu zeminli ve kendi iç padding-bottom'unu (64-96px) yönetiyor —
       o yüzden sayfa seviyesinde bottom padding yok; band footer'a temas eder. */
    padding-top: 0;
    padding-bottom: 0;
}
/* Hakkımızda son section'ı POWER (koyu zemin) — global footer'ın 32px
   margin-top'unu sıfırla ki koyu band footer'a yapışsın. Sadece bu sayfayı
   etkiler, diğer sayfalarda footer aralığı korunur. */
.hakkimizda-page + #footer,
.hakkimizda-page + .footer,
.hakkimizda-page + footer {
    margin-top: 0;
}

.hakkimizda-page__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    /* Stats bandı bitince mission bölümüne nefes alan ver */
    padding-top: 72px;
}
@media (min-width: 640px)  { .hakkimizda-page__container { padding: 72px 24px 0; } }
@media (min-width: 1024px) { .hakkimizda-page__container { padding: 96px 32px 0; } }

/* ════════════════════════════════════════════════════════════════════
   1. HERO + STATS WRAPPER — Tek ekran (100vh) içinde birlikte
   Tablet ve üstünde flex-column ile stats kendi doğal yüksekliğini alır,
   hero kalan alanı doldurur. Birlikte tam viewport yüksekliği.
   ════════════════════════════════════════════════════════════════════ */
.hakkimizda-screen { display: block; }
@media (min-width: 768px) {
    .hakkimizda-screen {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh; /* mobil tarayıcı chrome güvenliği */
    }
    .hakkimizda-screen > .hakkimizda-hero  { flex: 1 1 auto; min-height: 0; }
    .hakkimizda-screen > .hakkimizda-stats { flex: 0 0 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO — Hostinger-style "Büyümeniz için tasarlandı"
   Sol kolon copy, sağ kolon wireframe geometrik grid + B&W göz/alın
   crop fotoğraf + 2 mor dekoratif şekil.
   ════════════════════════════════════════════════════════════════════ */
.hakkimizda-hero {
    position: relative;
    background: #eef0fd;
    /* Üstte fixed header + topbar yüksekliğini telafi et; tek-ekran
       kompoziti için iç boşluklar minimal — stats hemen altta. */
    padding: calc(var(--header-h) + var(--topbar-h) + 20px) 0 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
@media (min-width: 768px)  { .hakkimizda-hero { padding: calc(var(--header-h) + var(--topbar-h) + 16px) 0 16px; } }
@media (min-width: 1024px) { .hakkimizda-hero { padding: calc(var(--header-h) + var(--topbar-h) + 16px) 0 16px; } }

.hakkimizda-hero__container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 768px) {
    .hakkimizda-hero__container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 48px;
        padding: 0 32px;
    }
}
@media (min-width: 1280px) {
    .hakkimizda-hero__container { padding: 0 48px; gap: 72px; }
}

/* SOL — Başlık + lead */
.hakkimizda-hero__copy {
    max-width: 520px;
}
.hakkimizda-hero__title {
    margin: 0 0 18px;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #0a1224;
}
.hakkimizda-hero__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
    max-width: 460px;
}
@media (min-width: 768px) { .hakkimizda-hero__lead { font-size: 16px; } }

/* SAĞ — Wireframe + face + decorative shapes */
.hakkimizda-hero__visual {
    position: relative;
    aspect-ratio: 1.05 / 1;
    width: 100%;
    max-width: 480px;
    /* Yükseklik kalan içerik alanını aşmasın — hero+stats=100vh kısıtı:
       100vh − (header + topbar + iç paddingler + stats ≈ 340px) */
    max-height: calc(100vh - 340px);
    margin: 0 auto;
}
@media (max-width: 767px) {
    .hakkimizda-hero__visual { max-height: none; }
}

/* Geometric wireframe (rect + X + iç üçgen, sadece outline) */
.hakkimizda-hero__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}
.hakkimizda-hero__wires .hk-wire {
    fill: none;
    stroke: rgba(15, 23, 42, 0.18);
    stroke-width: 1;
}

/* Görünmez SVG defs konteynerı (clipPath tanımları için) */
.hakkimizda-hero__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* B&W göz/alın crop fotoğrafı — organik dalgalı clipping mask uygulanır,
   referans #2 ile aynı: üst-alt dalgalı kenar + sağda kulağı saran
   aşağı uzantı. Mask "objectBoundingBox" units kullandığı için clip-path
   img'nin rectangle bbox'una göre normalize edilir. */
.hakkimizda-hero__face {
    position: absolute;
    top: 14%;
    left: 4%;
    width: 92%;
    height: auto;
    z-index: 3;
    user-select: none;
    pointer-events: none;
    transform: rotate(-2deg);
    -webkit-clip-path: url(#hakkimizda-face-mask);
            clip-path: url(#hakkimizda-face-mask);
}

/* Mor dekoratif şekiller — referans ile aynı yerleşim */
.hakkimizda-hero__shape {
    position: absolute;
    background: #7c3aed;
    z-index: 4;
}
/* Yarım disk: düz kenar üstte, kavis altta (bridge / hill) */
.hakkimizda-hero__shape--arc {
    width: 18%;
    aspect-ratio: 2 / 1;
    top: 24%;
    left: 28%;
    border-radius: 0 0 999px 999px;
}
/* Eğik kare: fotoğrafın sağ-alt köşesine örtüşür */
.hakkimizda-hero__shape--square {
    width: 18%;
    aspect-ratio: 1 / 1;
    bottom: 10%;
    right: 8%;
    transform: rotate(-18deg);
}

@media (max-width: 767px) {
    .hakkimizda-hero__visual { max-width: 420px; }
    .hakkimizda-hero__copy   { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   2. STATS — 4 kolon mini ikon + bold etiket + küçük açıklama
   Hero altına bağlı tam genişlik beyaz bant; her sütunda referansa
   uyumlu küçük geometrik SVG ikon.
   ════════════════════════════════════════════════════════════════════ */
.hakkimizda-stats {
    /* Eski card görünümünü temizle; tek-ekran kompoziti için kompakt */
    background: #ffffff;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 28px 0 24px;
    display: block;
    max-width: none;
}
@media (min-width: 768px) {
    .hakkimizda-stats { padding: 20px 0 22px; }
}
@media (min-width: 1024px) {
    .hakkimizda-stats { padding: 22px 0 26px; }
}

.hakkimizda-stats__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
}
@media (min-width: 768px) {
    .hakkimizda-stats__container {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        padding: 0 32px;
    }
}
@media (min-width: 1280px) {
    .hakkimizda-stats__container { padding: 0 48px; }
}

.hakkimizda-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.hakkimizda-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 48px;
    flex-shrink: 0;
}
.hakkimizda-stat__icon svg { width: 100%; height: 100%; }
/* Tüm outline'lar (kare çerçeve + daireler) aynı yumuşak gri tonda */
.hakkimizda-stat__icon .hk-frame,
.hakkimizda-stat__icon .hk-stroke {
    fill: none;
    stroke: rgba(15, 23, 42, 0.22);
    stroke-width: 1;
}
/* Hız kartındaki yükseliş eğrisi — outline'lardan biraz daha belirgin */
.hakkimizda-stat__icon .hk-line {
    fill: none;
    stroke: rgba(15, 23, 42, 0.55);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Mor vurgu (dot / kare / mor bar) */
.hakkimizda-stat__icon .hk-fill {
    fill: #7c3aed;
    stroke: none;
}
/* Basitlik kartındaki yumuşak gri ince çubuklar */
.hakkimizda-stat__icon .hk-bar-soft {
    fill: rgba(15, 23, 42, 0.22);
    stroke: none;
}
.hakkimizda-stat__label {
    font-size: 17px;
    font-weight: 600;
    color: #0a1224;
    letter-spacing: -0.01em;
    margin: 0;
}
.hakkimizda-stat__desc {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    max-width: 210px;
    margin: 0;
}

/* Eski .hakkimizda-stat__number artık kullanılmıyor ama varolan
   override edilmiş olarak kalsın (geriye dönük uyumluluk). */
.hakkimizda-stat__number { display: none; }

/* ── 3. Mission ────────────────────────────────────────────────── */
.hakkimizda-mission {
    max-width: 760px;
    margin: 0 auto 72px;
    text-align: center;
}
@media (min-width: 768px) { .hakkimizda-mission { margin-bottom: 96px; } }

.hakkimizda-eyebrow-soft {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #027BC4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hakkimizda-section-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .hakkimizda-section-title { font-size: 32px; } }

.hakkimizda-mission__text {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.75;
    color: #475569;
}
.hakkimizda-mission__text:last-child { margin-bottom: 0; }

/* ── 4. Why icanad — feature grid ──────────────────────────────── */
.hakkimizda-why {
    margin-bottom: 72px;
    text-align: center;
}
@media (min-width: 768px) { .hakkimizda-why { margin-bottom: 96px; } }

.hakkimizda-why .hakkimizda-section-title { margin-bottom: 32px; }

.hakkimizda-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
    text-align: left;
}
@media (min-width: 640px)  { .hakkimizda-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .hakkimizda-feature-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.hakkimizda-feature {
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hakkimizda-feature:hover {
    border-color: #027BC4;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(2, 123, 196, .30);
}
.hakkimizda-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    color: #027BC4;
    background: rgba(2, 123, 196, 0.10);
    border-radius: 10px;
}
.hakkimizda-feature__icon svg { width: 22px; height: 22px; }
.hakkimizda-feature__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.hakkimizda-feature__desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
}

/* ── 5. CTA bandı ──────────────────────────────────────────────── */
.hakkimizda-cta {
    text-align: center;
    padding: 40px 28px;
    background: linear-gradient(135deg, #020324 0%, #0E116F 100%);
    border-radius: var(--radius);
    color: #ffffff;
}
@media (min-width: 768px) { .hakkimizda-cta { padding: 56px 40px; } }

.hakkimizda-cta__title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .hakkimizda-cta__title { font-size: 30px; } }

.hakkimizda-cta__lead {
    margin: 0 auto 24px;
    max-width: 540px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}
.hakkimizda-cta .btn-primary {
    /* Koyu zemin üzerinde standart btn-primary aynı, hover'da brand-dark. */
    text-transform: none;
}

/* ────────────────────────────────────────────────────────────────────────
   5b. EKİBİMİZ — koyu zemin + edge-to-edge marquee
   ────────────────────────────────────────────────────────────────────────
   Üst: container içinde merkezli başlık + lead.
   Alt: viewport genişliğinde marquee strip (container'dan 100vw ile dışarı
        taşar); 2 üye 12 kere render edilip strip 2x duplicate edilir →
        translateX(0 → -50%) ile sonsuz seamless döner. Kart hover'da:
          • Görsel hafif zoom + dim olur,
          • Yeşilimsi-sarı (#f4ff4d) Instagram badge merkezde belirir,
          • Alttan isim+rol caption'ı slide eder. */

/* Beyaz bg üzerinde temiz showcase; üstte mavi yuvarlak ikon +
   merkezli başlık/lead; altta portait kartlar B&W → hover'da renkli +
   hafif zoom. Animasyon sağa doğru (reverse). Caption her zaman
   görünür, alt karanlık gradient overlay üzerinde. */
.hakkimizda-team {
    position: relative;
    margin: 48px 0 32px;
    padding: 64px 0 56px;
    background: #ffffff;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hakkimizda-team { margin: 64px 0 40px; padding: 96px 0 80px; }
}
@media (min-width: 1024px) {
    .hakkimizda-team { padding: 120px 0 96px; }
}

.hakkimizda-team__intro {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 44px;
    text-align: center;
}
@media (min-width: 768px) {
    .hakkimizda-team__intro { padding: 0 32px 60px; }
}

/* Üstteki mavi yuvarlak ikon badge — icanad brand mavisi */
.hakkimizda-team__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: #027BC4;
    color: #ffffff;
    box-shadow:
        0 14px 28px -10px rgba(2, 123, 196, 0.40),
        0 0 0 1px rgba(2, 123, 196, 0.10);
}
.hakkimizda-team__icon svg { width: 26px; height: 26px; }

.hakkimizda-team__title {
    margin: 0 0 14px;
    font-size: clamp(28px, 3.8vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0a1224;
}
.hakkimizda-team__lead {
    margin: 0 auto;
    max-width: 580px;
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
}
@media (min-width: 768px) {
    .hakkimizda-team__lead { font-size: 16px; }
}

/* Marquee container — edge-to-edge (.hakkimizda-page__container'ın
   max-width'inden 100vw ile dışarı taşıyoruz). */
.hakkimizda-team__marquee {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    /* Sol/sağ kenarlarda zarif beyaza fade */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.hakkimizda-team__track {
    display: flex;
    gap: 14px;
    width: max-content;
    /* Sağa doğru hareket için reverse */
    animation: hakkimizda-team-marquee 48s linear infinite reverse;
    will-change: transform;
}
.hakkimizda-team__marquee:hover .hakkimizda-team__track {
    animation-play-state: paused;
}
@keyframes hakkimizda-team-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Tek bir portre kartı — rounded, koyu zemin, drop shadow */
.hakkimizda-team__card {
    position: relative;
    flex: 0 0 auto;
    width: 290px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    background: #18181b;
    isolation: isolate;
    cursor: pointer;
    border-radius: 18px;
    box-shadow:
        0 18px 36px -22px rgba(15, 23, 42, 0.30),
        0 0 0 1px rgba(15, 23, 42, 0.04);
}
@media (max-width: 1024px) { .hakkimizda-team__card { width: 260px; } }
@media (max-width: 768px)  { .hakkimizda-team__card { width: 210px; border-radius: 14px; } }
@media (max-width: 480px)  { .hakkimizda-team__card { width: 176px; } }

/* Fotoğraf: default B&W (grayscale), hover'da renkli */
.hakkimizda-team__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: grayscale(100%) contrast(1.02);
    transform: scale(1.0);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
                filter   0.5s ease;
}
.hakkimizda-team__card:hover img,
.hakkimizda-team__card:focus-visible img {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(1);
}

/* Alt caption — her zaman görünür, kart üzerinde karanlık gradient */
.hakkimizda-team__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 16px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.55) 65%,
        rgba(0, 0, 0, 0.82) 100%);
    pointer-events: none;
}
.hakkimizda-team__caption strong {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.005em;
}
.hakkimizda-team__caption span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.02em;
}

/* Focus halkası — klavyede erişim için (icanad brand mavisi) */
.hakkimizda-team__card:focus-visible {
    outline: 2px solid #027BC4;
    outline-offset: 2px;
}

/* Reduced motion: marquee'yi durdur */
@media (prefers-reduced-motion: reduce) {
    .hakkimizda-team__track { animation: none; }
}

/* Eski hover-overlay LinkedIn badge artık kullanılmıyor — gizle */
.hakkimizda-team__badge { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   PAKETLER SAYFASI — /paketler/
   Hero + 3 pricing kartı (homepage `.pricing__cards` re-use) + büyük
   karşılaştırma tablosu (5 kategori, 25+ satır) + CTA bandı.
   ═══════════════════════════════════════════════════════════════════════ */
.paketler-page {
    width: 100%;
    background: #ffffff;
    padding-top: calc(var(--header-h) + var(--topbar-h) + 48px);
    padding-bottom: 0; /* CTA bandı footer'a bitişik */
}
@media (min-width: 768px) {
    .paketler-page {
        padding-top: calc(var(--header-h) + var(--topbar-h) + 72px);
    }
}
/* CTA bandı footer ile birleşik göründüğü için footer'ın üst boşluğu kalksın */
.paketler-page + .footer { margin-top: 0; }

.paketler-page__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px)  { .paketler-page__container { padding: 0 24px; } }
@media (min-width: 1024px) { .paketler-page__container { padding: 0 32px; } }

/* ── 1. Hero ───────────────────────────────────────────────────── */
.paketler-page__head {
    text-align: center;
    margin-bottom: 48px;
}
@media (min-width: 768px) { .paketler-page__head { margin-bottom: 64px; } }

.paketler-page__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(2, 123, 196, 0.08);
    color: var(--brand);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.paketler-page__title {
    margin: 0 auto 16px;
    max-width: 760px;
    font-size: 28px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) { .paketler-page__title { font-size: 28px; } }
.paketler-page__title-accent {
    background: linear-gradient(135deg, var(--brand) 0%, #0E116F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.paketler-page__lead {
    margin: 0 auto;
    max-width: 860px;
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
}

/* ── 2. Cards — homepage `.pricing__cards` styles re-use ───────── */
.paketler-cards { margin: 0 0 80px; }
@media (min-width: 768px) { .paketler-cards { margin-bottom: 112px; } }
/* Sayfa kontekstinde aurora bg yok, kartlar tek başına nefes alsın */
.paketler-cards .pricing__cards { margin: 0; }

/* ── 3. Comparison table ────────────────────────────────────── */
.paketler-compare { margin: 0 0 80px; }
@media (min-width: 768px) { .paketler-compare { margin-bottom: 112px; } }

.paketler-compare__head {
    text-align: left;
    max-width: none;
    margin: 0 0 28px;
}
.paketler-compare__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.paketler-compare__title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
@media (min-width: 768px) { .paketler-compare__title { font-size: 28px; } }
.paketler-compare__lead {
    margin: 0;
    max-width: 640px;
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}

/* Scroll wrapper — düz, flat görünüm, üst+sağ+sol dış çizgileri */
.paketler-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    border-bottom: 0;
    background: #ffffff;
    box-shadow: none;
    scrollbar-width: thin;
}
.paketler-compare__scroll::-webkit-scrollbar { height: 8px; }
.paketler-compare__scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.paketler-compare__table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 14px;
    color: #1f2937;
    table-layout: fixed;
}

/* THEAD — plan başlıkları (Önerilen ribbon + plan adı + fiyat) */
.paketler-compare__table thead th {
    padding: 40px 18px 28px;
    background: #ffffff;
    text-align: center;
    vertical-align: top;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 500;
    position: relative;
}

/* Sticky thead — kullanıcı aşağı kaydırırken plan başlıkları
   site header'ın hemen altına yapışsın. --topbar-h zaten body.is-topbar-closed
   durumunda 0'a düşüyor; site header 78px sabit. */
@media (min-width: 1024px) {
    .paketler-compare__scroll { overflow: visible; }
    .paketler-compare__table thead th {
        position: sticky;
        top: calc(var(--topbar-h, 47px) + 78px);
        z-index: 30;
        box-shadow: 0 1px 0 0 #e5e7eb, 0 8px 20px -16px rgba(15, 23, 42, 0.18);
    }
}
.paketler-compare__feature {
    width: 32%;
    background: #ffffff !important;
}
@media (min-width: 1024px) {
    .paketler-compare__feature { width: 26%; }
}
.paketler-compare__plan {
    text-align: center !important;
    width: auto;
    overflow: visible;
}
.paketler-compare__plan-name {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #0F172A;
    letter-spacing: -0.005em;
    margin-bottom: 10px;
}
@media (min-width: 768px) {
    .paketler-compare__plan-name { font-size: 18px; }
}
.paketler-compare__plan-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #0F172A;
}
.paketler-compare__plan-currency {
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    align-self: flex-start;
    margin-top: 4px;
}
.paketler-compare__plan-amount {
    font-size: 32px;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1;
}
@media (min-width: 768px) {
    .paketler-compare__plan-amount { font-size: 32px; }
}
.paketler-compare__plan-period {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    align-self: flex-end;
    margin-bottom: 4px;
}
/* Special sütunu — fiyat yerine "Özel Teklif" metni */
.paketler-compare__plan-custom {
    font-size: 22px;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* "Önerilen" ribbon — featured plan üstünde küçük etiket */
.paketler-compare__plan--featured {
    background: #ffffff !important;
}
.paketler-compare__plan-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 5px 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.4);
}
.paketler-compare__plan--featured .paketler-compare__plan-amount {
    color: #5b21b6;
}

/* TBODY — özellik satırları */
.paketler-compare__table tbody th[scope="row"] {
    text-align: left;
    padding: 22px 22px 22px 24px;
    font-weight: 400;
    color: #0F172A;
    background: #ffffff;
    border-bottom: 1px solid #f1f2f4;
    vertical-align: top;
}
.paketler-compare__table tbody td {
    padding: 22px 18px;
    text-align: center;
    border-bottom: 1px solid #f1f2f4;
    color: #1f2937;
    font-weight: 400;
    vertical-align: middle;
}
.paketler-compare__table tbody tr:hover th[scope="row"],
.paketler-compare__table tbody tr:hover td {
    background: #fafbfc;
}
.paketler-compare__table tbody tr.paketler-compare__group:hover th {
    background: #f1f2f4 !important;
}

/* Feature name + opsiyonel açıklama + info ikonu */
.paketler-compare__row-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.4;
}
.paketler-compare__row-name::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    opacity: .8;
}
.paketler-compare__row-desc {
    display: block;
    margin: 4px 0 0;
    font-size: 12.5px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
    max-width: 320px;
}

/* Sütunlar arası dikey ayraç çizgileri (feature + plan kolonları arasında) */
.paketler-compare__table thead tr > th + th,
.paketler-compare__table tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) > *:not(:first-child) {
    border-left: 1px solid #e5e7eb;
}

/* Grup başlık satırları — Wix stili: beyaz arkaplan, üstten ince çizgi, koyu bold */
.paketler-compare__group th {
    padding: 22px 24px !important;
    background: #ffffff !important;
    color: #0F172A !important;
    font-size: 17px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
}
.paketler-compare__group:first-child th { border-top: 0 !important; }

/* Check / Dash ikonlar — yeşil tik, gri em-dash */
.pkt-check, .pkt-dash {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    position: relative;
}
.pkt-check {
    background: transparent;
    border-radius: 0;
}
.pkt-check::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #10b981;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.pkt-dash {
    background: transparent;
}
.pkt-dash::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 8.5px;
    width: 12px;
    height: 1.5px;
    background: #cbd5e1;
    border-radius: 0;
    transform: none;
}
.pkt-dash::after { content: none; }

/* Footer CTA satırı tabloda — tablonun alt kenar çizgisi görünür */
.paketler-compare__ctarow td,
.paketler-compare__ctarow th {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f2f4 !important;
    padding: 28px 12px !important;
}
.paketler-compare__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    background: #ffffff;
    color: #0F172A;
    border: 1px solid #0F172A;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.paketler-compare__cta:hover {
    background: #0F172A;
    color: #ffffff;
}

.paketler-compare__note {
    margin: 20px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.55;
}

/* ─── Mobile plan switch (≤767px) ─────────────────────────────────────
   Karşılaştırma tablosu 3 sütunda mobile'a sığmadığı için ikas/Shopify
   gibi üst sekmeyle pakete göre tek-sütun gösterime geçeriz. Tabs
   default'ta gizli; sadece mobile'da display:grid alır.
   `[data-active-plan="X"]` selector'ı aktif olmayan sütunları gizler.
   --------------------------------------------------------------------- */
.paketler-compare__tabs { display: none; }

@media (max-width: 767px) {

    /* Tab bar */
    .paketler-compare__tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        margin: 0 0 8px;
        border-bottom: 1px solid #e5e7eb;
    }
    .paketler-compare__tab {
        position: relative;
        background: transparent;
        border: 0;
        padding: 16px 6px;
        margin-bottom: -1px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        text-align: center;
        cursor: pointer;
        transition: color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .paketler-compare__tab.is-active {
        color: #5a31f4;
        font-weight: 600;
    }
    .paketler-compare__tab.is-active::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 2px;
        background: #5a31f4;
        border-radius: 2px;
    }

    /* Tabloyu mobil için kart listesine çevir */
    .paketler-compare__scroll {
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .paketler-compare__table {
        display: block;
        width: 100%;
        border: 0;
        border-collapse: separate;
        background: transparent;
        min-width: 0;
    }
    .paketler-compare__table thead { display: none; }
    .paketler-compare__table tbody { display: block; }

    /* Default satır: 2 sütun grid (özellik adı | aktif değer) */
    .paketler-compare__table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 16px 4px;
        border-bottom: 1px solid #f1f3f7;
        background: none;
    }
    .paketler-compare__table tbody th[scope="row"] {
        padding: 0;
        text-align: left;
        background: none !important;
        border: 0;
        width: auto;
    }
    .paketler-compare__table tbody th[scope="row"] .paketler-compare__row-name {
        display: block;
        margin-bottom: 4px;
        font-size: 14.5px;
        font-weight: 600;
        color: #0b1220;
        line-height: 1.35;
    }
    .paketler-compare__table tbody th[scope="row"] .paketler-compare__row-name::after {
        display: none; /* desktop info-tooltip dot mobile'da fazla */
    }
    .paketler-compare__table tbody th[scope="row"] .paketler-compare__row-desc {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: #6b7280;
    }
    .paketler-compare__table tbody td {
        padding: 0 !important;
        text-align: right;
        background: none !important;
        border: 0 !important;
        font-size: 14.5px;
        font-weight: 500;
        color: #0b1220;
    }

    /* Group başlık satırı */
    .paketler-compare__table tbody tr.paketler-compare__group {
        display: block;
        padding: 28px 4px 10px;
        border-bottom: 1px solid #e5e7eb;
        background: none;
    }
    .paketler-compare__table tbody tr.paketler-compare__group:first-child {
        padding-top: 8px;
    }
    .paketler-compare__table tbody tr.paketler-compare__group th {
        display: block;
        padding: 0;
        background: none !important;
        border: 0 !important;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #5a31f4;
    }

    /* CTA satırı — sadece aktif paketin butonu, tam genişlik */
    .paketler-compare__table tbody tr.paketler-compare__ctarow {
        display: block;
        padding: 24px 0 0;
        border: 0;
        background: none;
    }
    .paketler-compare__table tbody tr.paketler-compare__ctarow td:first-child {
        display: none;
    }
    .paketler-compare__table tbody tr.paketler-compare__ctarow td {
        display: block;
        padding: 0 !important;
        text-align: center;
        border: 0 !important;
    }
    .paketler-compare__table tbody tr.paketler-compare__ctarow .paketler-compare__cta {
        display: block;
        width: 100%;
    }

    /* Aktif plan dışı sütunları gizle — normal feature satırları (4 plan) */
    .paketler-compare__scroll[data-active-plan="0"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(n+2),
    .paketler-compare__scroll[data-active-plan="1"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(1),
    .paketler-compare__scroll[data-active-plan="1"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(n+3),
    .paketler-compare__scroll[data-active-plan="2"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(-n+2),
    .paketler-compare__scroll[data-active-plan="2"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(4),
    .paketler-compare__scroll[data-active-plan="3"]
        tbody tr:not(.paketler-compare__group):not(.paketler-compare__ctarow) td:nth-of-type(-n+3) {
        display: none;
    }

    /* CTA row 5 td: ilki boş (zaten gizli), 2-3-4-5 plan butonları */
    .paketler-compare__scroll[data-active-plan="0"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(n+3),
    .paketler-compare__scroll[data-active-plan="1"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(2),
    .paketler-compare__scroll[data-active-plan="1"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(n+4),
    .paketler-compare__scroll[data-active-plan="2"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(2),
    .paketler-compare__scroll[data-active-plan="2"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(3),
    .paketler-compare__scroll[data-active-plan="2"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(5),
    .paketler-compare__scroll[data-active-plan="3"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(2),
    .paketler-compare__scroll[data-active-plan="3"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(3),
    .paketler-compare__scroll[data-active-plan="3"]
        tbody tr.paketler-compare__ctarow td:nth-of-type(4) {
        display: none;
    }
}

/* ── 4. CTA bandı ─────────────────────────────────────────── */
.paketler-cta-band {
    text-align: center;
    padding: 48px 28px;
    background: linear-gradient(135deg, #020324 0%, #0E116F 100%);
    border-radius: 0; /* footer'a bitişik tam genişlik bant */
    color: #ffffff;
}
@media (min-width: 768px) { .paketler-cta-band { padding: 64px 40px; } }

.paketler-cta-band__title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .paketler-cta-band__title { font-size: 28px; } }
.paketler-cta-band__lead {
    margin: 0 auto 24px;
    max-width: 560px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}
.paketler-cta-band .btn-primary { text-transform: none; }
/* Band butonu: beyaz zemin + koyu yazı, ışıma (box-shadow) yok —
   normal ve hover durumlarında. */
.paketler-cta-band .paketler-cta-band__btn {
    background: #ffffff;
    border-color: #ffffff;
    color: #0F172A;
    box-shadow: none;
}
.paketler-cta-band .paketler-cta-band__btn:hover {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0F172A;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   REFERANSLAR SAYFASI — /referanslar/
   Hero + stats + sektör tabları (Feature108 esinli) + testimonials + CTA.
   Tablar `data-tab`/`data-panel` attr eşleşmesiyle JS tarafından aktive.
   ═══════════════════════════════════════════════════════════════════════ */
.ref-page {
    width: 100%;
    background: #ffffff;
    padding-top: calc(var(--header-h) + var(--topbar-h) + 20px);
    padding-bottom: 0;
    /* hero glow (right:-160px) + .ref-cta 100vw breakout sağa taşırıyor — kırp */
    overflow-x: hidden;
    overflow-x: clip;
}
@media (min-width: 768px) {
    .ref-page {
        padding-top: calc(var(--header-h) + var(--topbar-h) + 32px);
        padding-bottom: 0;
    }
}

/* Tam genişlik koyu CTA band footer'a yapışsın — footer'ın global margin-top'unu
   yalnızca /referanslar/ sayfasında sıfırla. */
.ref-page + #footer,
.ref-page + .footer,
.ref-page + footer { margin-top: 0; }

.ref-page__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px)  { .ref-page__container { padding: 0 24px; } }
@media (min-width: 1024px) { .ref-page__container { padding: 0 32px; } }

/* ── 1. Hero ───────────────────────────────────────────────────── */
.ref-page__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}
@media (min-width: 768px) { .ref-page__head { margin-bottom: 72px; } }

.ref-page__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(2, 123, 196, 0.08);
    color: var(--brand);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ref-page__title {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
@media (min-width: 768px)  { .ref-page__title { font-size: 38px; } }
@media (min-width: 1024px) { .ref-page__title { font-size: 38px; } }
.ref-page__lead {
    margin: 0;
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
}

/* ── 2. Stats ──────────────────────────────────────────────────── */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 auto 80px;
    max-width: 920px;
}
@media (min-width: 768px) {
    .ref-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 96px; }
}
.ref-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 16px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
}
.ref-stat__number {
    font-size: 28px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}
@media (min-width: 768px) { .ref-stat__number { font-size: 36px; } }
.ref-stat__label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

/* ── 3. Cases — tab'lı case studies ─────────────────────────── */
.ref-cases { margin: 0 0 96px; }

/* ── Ref Hero — sol metin + CTA + stats / sağ video kartı ─────────────
   Referans tasarım (WorldFirst). icanad violet (#5A31F4) + Poppins font.

   Bölüm arkaplan halo'su: sağ-üstten doğan, kartın kenarlarını aşıp sayfa
   beyazlığına yayılan yumuşak mor parlama (referans görseldeki pembe ışıma). */
.ref-hero {
    position: relative;
    margin: 0 0 56px;
    padding: 24px 0;
    isolation: isolate;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.ref-hero::before,
.ref-hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
/* Ana halo — kartın sağ-üst bölgesinden taşan büyük mor ışıma */
.ref-hero::before {
    top: -120px;
    right: -160px;
    width: 880px;
    height: 700px;
    background: radial-gradient(closest-side,
        rgba(90, 49, 244, 0.22) 0%,
        rgba(90, 49, 244, 0.12) 38%,
        rgba(90, 49, 244, 0) 70%);
    filter: blur(8px);
}
/* İkincil halo — sol-alttan hafif yumuşak vurgu */
.ref-hero::after {
    bottom: -100px;
    left: -120px;
    width: 560px;
    height: 420px;
    background: radial-gradient(closest-side,
        rgba(90, 49, 244, 0.12) 0%,
        rgba(90, 49, 244, 0.06) 45%,
        rgba(90, 49, 244, 0) 70%);
    filter: blur(8px);
}

.ref-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    position: relative;
}

/* Sol kolon — metin */
.ref-hero__text { text-align: left; }
.ref-hero__title {
    margin: 0 0 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0B1220;
}
.ref-hero__lead {
    margin: 0 0 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    max-width: 460px;
}
.ref-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: #5A31F4;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(90, 49, 244, .55);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
    margin-bottom: 44px;
}
.ref-hero__cta:hover {
    background: #4A23E6;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(90, 49, 244, .65);
}

.ref-hero__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.ref-hero__stats li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ref-hero__stats strong {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0B1220;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.ref-hero__stats span {
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #64748B;
}

/* Sağ kolon — branded video kartı (YouTube-like UI) */
.ref-hero__media { display: block; }
.ref-hero__video {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    /* Referanstaki ışıma efekti: sağ-üstte güçlü beyaz parlama,
       sol-altta koyu vignette, ortada brand violet linear taban. */
    background:
        radial-gradient(62% 55% at 78% 22%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(60% 65% at 18% 95%, rgba(31, 8, 128, .55) 0%, rgba(31, 8, 128, 0) 65%),
        linear-gradient(135deg, #7B4DFF 0%, #5A31F4 38%, #3D14B9 78%, #2B0E94 100%);
    box-shadow:
        0 20px 50px -20px rgba(67, 25, 204, .55),
        0 8px 18px -8px rgba(15, 23, 42, .25);
    isolation: isolate;
    transition: transform .35s ease, box-shadow .35s ease;
}
.ref-hero__video::before {
    content: '';
    position: absolute;
    inset: 0;
    /* İnce ek katman: sağ-üstte sıcak shimmer, sol-altta hafif koyulaşma */
    background:
        radial-gradient(35% 30% at 75% 18%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(45% 40% at 15% 100%, rgba(0, 0, 0, .25) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .9;
}
.ref-hero__video:hover {
    transform: translateY(-2px);
    box-shadow:
        0 28px 56px -20px rgba(67, 25, 204, .60),
        0 12px 24px -8px rgba(15, 23, 42, .30);
}
.ref-hero__video > * { position: relative; z-index: 2; }

/* YouTube Shorts embed — dikey 9:16, sade yuvarlak çerçeve */
.ref-hero__short {
    width: min(310px, 100%);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 20px 50px -20px rgba(67, 25, 204, .45),
        0 8px 18px -8px rgba(15, 23, 42, .22);
}
.ref-hero__short iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Üst bar */
.ref-hero__video-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
    gap: 12px;
}
.ref-hero__video-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ref-hero__video-channel-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #5A31F4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.ref-hero__video-channel-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ref-hero__video-channel-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.ref-hero__video-channel-name {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.2;
    margin-top: 2px;
}
.ref-hero__video-tools {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .85);
    flex-shrink: 0;
}
.ref-hero__video-tools svg { width: 18px; height: 18px; }

/* Orta — hashtag başlık + alt yazı + play düğmesi */
.ref-hero__video-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 24px 24px;
    position: relative;
}
.ref-hero__video-tag {
    margin: 0 0 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #FFFFFF;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .25);
}
.ref-hero__video-sub {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .92);
}
.ref-hero__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, .95);
    color: #5A31F4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    transition: transform .25s ease, background-color .25s ease;
    z-index: 3;
}
.ref-hero__video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.ref-hero__video:hover .ref-hero__video-play {
    background: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.06);
}

/* Progress satırı */
.ref-hero__video-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .85);
}
.ref-hero__video-bar {
    position: relative;
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    overflow: hidden;
}
.ref-hero__video-bar-fill {
    position: absolute;
    inset: 0 75% 0 0;
    background: #FFFFFF;
    border-radius: 999px;
}

/* Footer */
.ref-hero__video-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 22px 18px;
    gap: 12px;
}
.ref-hero__video-foot-left {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .85);
}
.ref-hero__video-foot-left svg { width: 16px; height: 16px; }
.ref-hero__video-foot-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.ref-hero__video-other {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
}
.ref-hero__video-youtube {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    color: #0F0F0F;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}
.ref-hero__video-youtube svg { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1024px) {
    .ref-hero { margin-bottom: 56px; }
    .ref-hero__inner { grid-template-columns: 1fr; gap: 36px; }
    .ref-hero__lead { max-width: none; }
    .ref-hero__media { max-width: 640px; }
}
@media (max-width: 720px) {
    .ref-hero { margin-bottom: 40px; }
    .ref-hero__title { font-size: 28px; }
    .ref-hero__lead { font-size: 14.5px; margin-bottom: 22px; }
    .ref-hero__cta { padding: 12px 24px; font-size: 13px; margin-bottom: 32px; }
    .ref-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ref-hero__stats strong { font-size: 20px; }
    .ref-hero__video { aspect-ratio: 4 / 3; border-radius: 14px; }
    .ref-hero__video-tag { font-size: 32px; }
    .ref-hero__video-channel-title { font-size: 12px; max-width: 160px; }
    .ref-hero__video-channel-mark { width: 32px; height: 32px; font-size: 16px; }
    .ref-hero__video-tools svg { width: 16px; height: 16px; }
    .ref-hero__video-top { padding: 14px 16px 0; }
    .ref-hero__video-progress { padding: 0 16px 6px; }
    .ref-hero__video-foot { padding: 4px 16px 14px; }
}

/* Tab list (mobile: column, desktop: centered row) */
.ref-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    align-items: stretch;
}
@media (min-width: 768px) {
    .ref-tabs {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
        margin-bottom: 32px;
        align-items: center;
    }
}
.ref-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ref-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.ref-tab:hover { color: #0F172A; background: rgba(2, 123, 196, 0.05); }
.ref-tab.is-active {
    background: #f1f5f9;
    color: #027BC5;
    border-color: rgba(2, 123, 196, 0.18);
}

/* Tab panels — Feature108 stili muted card */
.ref-panels {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 28px 24px;
    overflow: hidden;
}
@media (min-width: 768px)  { .ref-panels { padding: 40px; } }
@media (min-width: 1024px) { .ref-panels { padding: 56px; } }

.ref-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 1024px) {
    .ref-panel { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.ref-panel[hidden] { display: none; }
.ref-panel.is-active { animation: refPanelIn .4s ease both; }
@keyframes refPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ref-panel__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.ref-panel__badge {
    display: inline-flex;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #475569;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ref-panel__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
@media (min-width: 768px)  { .ref-panel__title { font-size: 32px; } }
@media (min-width: 1024px) { .ref-panel__title { font-size: 38px; } }
.ref-panel__desc {
    margin: 0;
    font-size: 15.5px;
    color: #475569;
    line-height: 1.65;
}
@media (min-width: 1024px) { .ref-panel__desc { font-size: 17px; } }
.ref-panel__cta {
    margin-top: 8px;
    align-self: flex-start;
}

.ref-panel__media {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #e2e8f0;
}
.ref-panel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 4. Brands — bizi tercih eden markalar logo grid ─────────
   2x4 grid (mobile: 2 col, desktop ≥768: 4 col). Wordmark'lar
   CSS tipografi ile yazıldı (telif riski yok); gerçek SVG logo
   dosyaları geldiğinde inline <svg>/<img> ile değişir.          */
.ref-brands { margin: 0 0 96px; }

.ref-brands__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
/* Mobilde tek kalan CTA kartı tam satıra yayılsın */
.ref-brand--cta { grid-column: 1 / -1; }
@media (min-width: 768px) {
    /* 4 logo + CTA tek satıra sığsın */
    .ref-brands__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .ref-brand--cta { grid-column: auto; }
}

.ref-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #0F172A;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ref-brand:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.15);
}

/* Gerçek referans logoları — brand-strip ile aynı tek-ton mantık,
   beyaz kart üzerinde koyu tona çevrilir */
.ref-brand__logo {
    max-height: 30px;
    max-width: 78%;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0);
    opacity: .75;
    transition: opacity .2s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.ref-brand:hover .ref-brand__logo { opacity: 1; }

.ref-brand__wordmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Marka-spesifik tipografi (her biri kendi karakterini taklit eder) */
.ref-brand__wordmark--victorias {
    font-family: 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.08em;
    font-size: 14px;
    flex-direction: column;
    line-height: 1.2;
    color: #0a0a0a;
}
@media (min-width: 768px) { .ref-brand__wordmark--victorias { font-size: 16px; } }

.ref-brand__wordmark--starbucks {
    gap: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.03em;
    font-family: 'Poppins', sans-serif;
}
@media (min-width: 768px) { .ref-brand__wordmark--starbucks { font-size: 14px; } }

.ref-brand__mark--starbucks {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: #006241;
    border-radius: 50%;
    position: relative;
}
.ref-brand__mark--starbucks::before {
    content: '';
    position: absolute;
    inset: 3.5px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}

.ref-brand__wordmark--englishhome {
    color: #1e3a8a;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
}
@media (min-width: 768px) { .ref-brand__wordmark--englishhome { font-size: 15px; } }

.ref-brand__wordmark--elle {
    font-family: 'Arial Black', 'Helvetica', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.04em;
    color: #000000;
    font-stretch: condensed;
    line-height: 1;
}
@media (min-width: 768px) { .ref-brand__wordmark--elle { font-size: 30px; } }

.ref-brand__wordmark--desa {
    font-family: 'Times New Roman', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.22em;
    font-size: 18px;
    color: #0a0a0a;
}
@media (min-width: 768px) { .ref-brand__wordmark--desa { font-size: 22px; } }

.ref-brand__wordmark--avva {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 18px;
    color: #111111;
}
@media (min-width: 768px) { .ref-brand__wordmark--avva { font-size: 22px; } }

.ref-brand__wordmark--tsclub {
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
}
@media (min-width: 768px) { .ref-brand__wordmark--tsclub { font-size: 14px; } }

.ref-brand__mark--tsclub {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #841a1f 0%, #841a1f 50%, #ffffff 50%, #ffffff 100%);
    border: 1.5px solid #841a1f;
}

/* "Tüm Referanslarımız →" CTA kartı — diğerlerinden vurgu farkı */
.ref-brand--cta {
    gap: 8px;
    border: 1px solid rgba(2, 123, 196, 0.4);
    color: var(--brand);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ref-brand--cta:hover {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    box-shadow: 0 12px 24px -12px rgba(2, 123, 196, 0.3);
}
.ref-brand--cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ref-brand--cta:hover svg { transform: translateX(3px); }

/* ── 5. Testimonials ──────────────────────────────────────────── */
.ref-quotes { margin-bottom: 80px; }
.ref-quotes__title {
    text-align: center;
    margin: 0 0 32px;
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .ref-quotes__title { font-size: 32px; margin-bottom: 40px; } }

.ref-quotes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) { .ref-quotes__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.ref-quote {
    padding: 28px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ref-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.18);
}
.ref-quote__text {
    margin: 0;
    font-size: 15px;
    color: #1f2937;
    line-height: 1.55;
    flex: 1 1 auto;
}
.ref-quote__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
}
.ref-quote__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
}
.ref-quote__meta > div { display: flex; flex-direction: column; gap: 2px; }
.ref-quote__name {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}
.ref-quote__role {
    font-size: 12px;
    color: #6b7280;
}

/* ── 5. CTA — Shopify tarzı tam genişlik koyu band ──────────────
   100vw breakout ile container'dan dışarı taşar, sayfa altına otururken
   footer'a yapışır. Radial gradient + light-weight başlık + beyaz pill. */
.ref-cta {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 64px;
    padding: 80px 24px;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(124, 58, 237, 0.32) 0%, rgba(124, 58, 237, 0) 65%),
        radial-gradient(ellipse 80% 50% at 100% 100%, rgba(56, 23, 130, 0.30) 0%, rgba(56, 23, 130, 0) 65%),
        linear-gradient(180deg, #08060e 0%, #0a0815 100%);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 768px) { .ref-cta { padding: 110px 32px; margin-top: 80px; } }
@media (min-width: 1024px) { .ref-cta { padding: 136px 40px; margin-top: 96px; } }

.ref-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ref-cta__title {
    margin: 0 0 18px;
    max-width: 720px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: clamp(28px, 4.4vw, 48px);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.ref-cta__lead {
    margin: 0 auto 32px;
    max-width: 560px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 400;
}
@media (min-width: 768px) { .ref-cta__lead { font-size: 15px; } }

.ref-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: #ffffff;
    color: #0b0817;
    border: 0;
    border-radius: 999px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 28px -12px rgba(124, 58, 237, 0.45);
}
.ref-cta__btn:hover,
.ref-cta__btn:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    color: #0b0817;
    transform: translateY(-1px);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ILETISIM — HERO MAP + OVERLAP GRID (form + 3 stacked channels)

   Üst:   contact-hero       → Google Maps iframe (full-width)
   Alt:   contact-grid       → 2-col grid; haritanın üzerine biner (desktop)
            ├ contact-grid__channels  → 3 dikey kart (Adres/E-mail/Telefon)
            └ contact-grid__form      → form kartı + yeşil "24 saat" pill
   Mobil: stack — overlap yok, kartlar/form alt alta gelir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero harita — full viewport-width, header altına yaslı ─────
   Container'ın DIŞINDA: edge-to-edge. Köşeler düz. */
.contact-hero {
    position: relative;
    width: 100%;
    height: 360px;
    margin-top: 0;
    border-radius: 0;
    overflow: hidden;
    background: #f1f5f9;
}
@media (min-width: 768px)  { .contact-hero { height: 420px; } }
@media (min-width: 1024px) { .contact-hero { height: 520px; } }

.contact-hero__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── 2. Ana kart: tek beyaz kutu — kanallar (sol) + form (sağ) ────
   Hem channel hem form içeride; her ikisinin de kendi bg/border'ı yok.
   Haritanın alt bölümünün üzerine biner (desktop).
   border-radius: var(--radius) → .btn / .btn-primary ile aynı (10px). */
.contact-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 24px auto 0;
    max-width: var(--container-max);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 60px -28px rgba(15, 23, 42, 0.20);
}
@media (min-width: 768px) {
    .contact-grid { padding: 32px; }
}
@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: minmax(260px, 1fr) minmax(0, 1.55fr);
        gap: 32px;
        /* Haritanın alt bölümünün üzerine bin */
        margin-top: -160px;
        padding: 40px;
    }
}
@media (min-width: 1200px) {
    .contact-grid { gap: 40px; margin-top: -200px; padding: 48px; }
}

/* ── 2a. Sol sütun — 3 dikey kanal (kendi bg yok, sade) ──────────── */
.contact-grid__channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Desktop'ta sağ formdan ince bir dikey çizgi ile ayrı; mobilde gizle. */
@media (min-width: 900px) {
    .contact-grid__channels {
        gap: 10px;
        padding-right: 24px;
        border-right: 1px solid #f1f5f9;
    }
}

/* ── 2b. Sağ sütun — form (kendi bg yok, sade) ───────────────────── */
.contact-grid__form {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) { .contact-grid__form { gap: 18px; } }

/* Form başlığı — "İletişim Formu" */
.contact-grid__form-title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .contact-grid__form-title { font-size: 30px; }
}

/* Required asterisk — label içindeki "*" */
.contact-form__required {
    color: #dc2626;
    margin-left: 2px;
    font-weight: 600;
}

/* ── Mevcut input/row stilleri — referans layout'a uyarlandı ─────── */
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 640px) {
    .contact-form__row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-form__field label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
}
.contact-form__optional {
    color: #94a3b8;
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
}
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    -webkit-appearance: none;
    appearance: none;
}
/* Input + select aynı sabit yükseklik — browser default render farkını ortadan kaldırır.
   textarea hariç (resize: vertical ile büyüyebilsin). */
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field select {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}
.contact-form__field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.55;
}
.contact-form__field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    background: #ffffff;
    border-color: #027BC4;
    box-shadow: none;
    outline: none;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: #94a3b8;
}
.contact-form__hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Checkbox (KVKK) — submit button altında kompakt küçük metin */
.contact-form__field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: -4px;
}
.contact-form__field--checkbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    accent-color: #027BC4;
    flex-shrink: 0;
    cursor: pointer;
}
.contact-form__field--checkbox label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    cursor: pointer;
}
.contact-form__field--checkbox label a {
    color: #027BC4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit button — header'daki .btn .btn-primary ("ÜCRETSİZ DENEYİN")
   ile birebir aynı stil token'ları: --brand, --radius, .btn padding/height,
   aynı box-shadow + hover davranışı. Form action olduğu için width:100%. */
.contact-form__submit {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.contact-form__submit:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-1px);
}
.contact-form__submit:active { transform: translateY(0); }
.contact-form__submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.contact-form__submit-spinner { width: 18px; height: 18px; display: none; animation: cf-spin 0.7s linear infinite; }
.contact-form__submit.is-loading .contact-form__submit-spinner { display: inline-block; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* Feedback (success / error) */
.contact-form__feedback { display: none; }
.contact-form__feedback.is-success,
.contact-form__feedback.is-error {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
}
.contact-form__feedback.is-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.contact-form__feedback.is-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── 3. Channel item — ana beyaz kutunun içinde, kendi bg yok ───────
   3 satır (Adres / E-mail / Telefon). İçerik dikey ortalı:
   icon → label → value. Static (Adres) hover yapmaz; link olanlarda
   subtle hover bg ile etkileşim hissi verilir. */
.channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #0f172a;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease;
}
.channel-card:not(.channel-card--static):hover {
    background: #f8fafc;
    border-color: #e5e7eb;
}

/* E-mail kartı (kanallar arasında ortadaki) — alt ve üst yatay ayırıcı çizgi.
   Sağ sütundaki .contact-grid__channels border-right ile aynı ton (#f1f5f9). */
.contact-grid__channels .channel-card:nth-child(2) {
    border-top-color: #f1f5f9;
    border-bottom-color: #f1f5f9;
    border-radius: 0;
    margin: 4px 0;
}

.channel-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-bottom: 8px;
    color: #0f172a;
    background: transparent;
    border-radius: 0;
}
/* +3px büyük (22 → 25), ince stroke (2 → 1.5), inline SVG'lerdeki
   stroke-width="2" presentation attribute'unu CSS override eder. */
.channel-card__icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 1.5;
}

.channel-card__label {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.channel-card__value {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
}

/* ============================================================================
   BLOG — /blog/ list page + /blog/<slug>/ single post page
   ----------------------------------------------------------------------------
   Namespace: .blog-*
   • blog-page       → list view shell (hero + cats + featured + grid + news)
   • blog-cats       → category pill row
   • blog-featured   → top split-layout card
   • blog-grid       → 1/2/3-col responsive card grid
   • blog-card       → individual card (used in list + related)
   • blog-tag        → category badge (color variants per slug)
   • blog-meta       → author · date · readtime byline row
   • blog-post       → single post page shell
   ========================================================================== */

/* ── List page shell ────────────────────────────────────────────────────── */
.blog-page {
    background: #ffffff;
    padding: 80px 0 120px;
}
.blog-page__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
.blog-page__head {
    text-align: center;
    margin-bottom: 40px;
}
.blog-page__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.blog-page__title {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 auto 16px;
    max-width: 820px;
}
.blog-page__lead {
    font-size: 18px;
    color: #475569;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 660px;
}
.blog-page__empty {
    text-align: center;
    padding: 60px 16px;
    color: #64748b;
    font-size: 16px;
}
.blog-page__empty a { color: #4f46e5; font-weight: 600; }

/* ── Category pills row ────────────────────────────────────────────────── */
.blog-cats {
    margin-bottom: 48px;
}
.blog-cats__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.blog-cat {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}
.blog-cat:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.blog-cat.is-active {
    background: #0f172a;
    color: #ffffff;
}

/* ── Featured post (split layout) ──────────────────────────────────────── */
.blog-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 64px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.blog-featured:hover {
    transform: translateY(-3px);
    border-color: #cbd5e1;
    box-shadow: 0 20px 50px -25px rgba(15, 23, 42, 0.25);
}
.blog-featured__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #f1f5f9;
}
.blog-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.blog-featured:hover .blog-featured__media img {
    transform: scale(1.04);
}
.blog-featured__pin {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.blog-featured__body {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.blog-featured__title {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0;
}
.blog-featured__desc {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}
.blog-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
}
.blog-featured__cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}
.blog-featured:hover .blog-featured__cta svg {
    transform: translateX(3px);
}

/* ── Category tags / badges ────────────────────────────────────────────── */
.blog-tag {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: flex-start;
}
.blog-tag--rehberler      { background: #eef2ff; color: #4338ca; }
.blog-tag--entegrasyonlar { background: #ecfeff; color: #0e7490; }
.blog-tag--performans     { background: #fef3c7; color: #a16207; }
.blog-tag--pazarlama      { background: #fce7f3; color: #be185d; }
.blog-tag--trendler       { background: #dcfce7; color: #166534; }

/* ── Card grid ─────────────────────────────────────────────────────────── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
}
.blog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.blog-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 18px 40px -25px rgba(15, 23, 42, 0.25);
}
.blog-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f1f5f9;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.blog-card:hover .blog-card__media img {
    transform: scale(1.05);
}
.blog-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.blog-card__title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.32;
    letter-spacing: -0.01em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__excerpt {
    font-size: 14px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Meta row (author · date · read time) ──────────────────────────────── */
.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}
.blog-meta__author {
    color: #0f172a;
    font-weight: 600;
}
.blog-meta__sep {
    color: #cbd5e1;
}

/* ============================================================================
   SINGLE POST PAGE — .blog-post
   ========================================================================== */

.blog-post {
    background: #ffffff;
    padding: 32px 0 100px;
}
.blog-post__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
/* "Boxed" content width — breadcrumb, cover image ve related ile aynı
   1180px container. Eskiden 760px'lik dar okuma kolonu vardı, başlık/
   gövde diğer elementlere göre "içeride" duruyordu; şimdi hizalı. */
.blog-post__container--narrow {
    max-width: var(--container-max);
}

/* Breadcrumb */
.blog-post__crumbs {
    margin-bottom: 40px;
    font-size: 13px;
    color: #64748b;
}
.blog-post__crumbs .blog-post__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.blog-post__crumbs a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
}
.blog-post__crumbs a:hover { color: #0f172a; }
.blog-post__crumbs-sep { color: #cbd5e1; }
.blog-post__crumbs-current {
    color: #0f172a;
    font-weight: 600;
    /* Çok uzun başlıklarda crumb satırı tek satırda taşmasın */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50ch;
}

/* Hero (başlık bloğu — cover image'in altında geliyor) */
.blog-post__head {
    margin-bottom: 48px;
}
.blog-post__head .blog-tag {
    margin-bottom: 16px;
}
.blog-post__title {
    font-size: 44px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.12;
    letter-spacing: -0.02em;
    /* Lead paragrafı kaldırıldığı için başlık → byline arası boşluk
       buradan ayarlanıyor (eski 18px lead'in kendi margin-bottom'una göre
       hesaplanmıştı). */
    margin: 0 0 28px;
}
.blog-post__lead {
    font-size: 19px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 28px;
}
.blog-post__byline {
    display: flex;
    align-items: center;
    gap: 14px;
}
.blog-post__avatar,
.blog-post__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.blog-post__byline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.blog-post__byline-author {
    color: #0f172a;
    font-weight: 700;
}
.blog-post__byline-meta {
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Cover image (üstte — breadcrumb altında, başlık bloğunun üstünde) */
.blog-post__hero {
    margin: 0 0 36px;
}
.blog-post__hero img {
    width: 100%;
    aspect-ratio: 21 / 10;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    background: #f1f5f9;
}

/* Article body typography */
.blog-post__body {
    margin-bottom: 48px;
}
.blog-post__body p,
.blog-post__body li {
    font-size: 17px;
    line-height: 1.75;
    color: #1e293b;
}
.blog-post__body .blog-post__intro {
    font-size: 19px;
    color: #0f172a;
    font-weight: 500;
    line-height: 1.65;
    margin: 0 0 28px;
}
.blog-post__body h3 {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 40px 0 14px;
}
.blog-post__body p { margin: 0 0 20px; }
.blog-post__body ul,
.blog-post__body ol {
    margin: 0 0 24px;
    padding-left: 22px;
}
.blog-post__body li { margin-bottom: 8px; }
.blog-post__body a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.blog-post__body a:hover { color: #4338ca; }
.blog-post__body code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.92em;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
.blog-post__body blockquote {
    margin: 32px 0;
    padding: 20px 26px;
    border-left: 4px solid #4f46e5;
    background: #f8fafc;
    border-radius: 0 12px 12px 0;
    font-size: 19px;
    font-weight: 500;
    color: #0f172a;
    font-style: italic;
    line-height: 1.55;
}
.blog-post__body img {
    max-width: 100%;
    border-radius: 14px;
    margin: 28px 0;
}

/* Share row */
.blog-post__share {
    margin: 0 0 48px;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.blog-post__share .blog-post__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.blog-post__share-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-right: 6px;
}
.blog-post__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f1f5f9;
    color: #0f172a;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.blog-post__share-btn:hover {
    background: #e2e8f0;
}
.blog-post__share-btn svg {
    width: 16px;
    height: 16px;
}
.blog-post__share-btn.is-copied {
    background: #dcfce7;
    color: #166534;
}

/* Author bio card */
.blog-post__author {
    margin: 0 0 80px;
}
.blog-post__author-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.blog-post__author-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
}
.blog-post__author-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.blog-post__author-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.blog-post__author-name {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}
.blog-post__author-role {
    font-size: 14px;
    color: #475569;
}

/* Related */
.blog-post__related-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
}
.blog-grid--related {
    margin-bottom: 0;
}

/* ============================================================================
   RESPONSIVE — tablet (≤1024px) and mobile (≤768px)
   ========================================================================== */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured__media { aspect-ratio: 16 / 9; }
    .blog-featured__body { padding: 32px 28px; }
    .blog-featured__title { font-size: 26px; }
}

@media (max-width: 768px) {
    .blog-page { padding: 56px 0 80px; }
    .blog-page__title { font-size: 32px; }
    .blog-page__lead { font-size: 16px; }
    .blog-cats { margin-bottom: 32px; }
    .blog-cats__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px 0 8px;
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .blog-cats__list::-webkit-scrollbar { display: none; }
    .blog-cat { flex-shrink: 0; }

    .blog-featured { margin-bottom: 40px; border-radius: 18px; }
    .blog-featured__body { padding: 24px 22px; }
    .blog-featured__title { font-size: 22px; }
    .blog-featured__desc { font-size: 15px; }

    .blog-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
    .blog-card__body { padding: 18px 18px 20px; }
    .blog-card__title { font-size: 17px; }

    /* Single post */
    .blog-post { padding: 24px 0 64px; }
    .blog-post__crumbs { margin-bottom: 24px; }
    .blog-post__crumbs-current { max-width: 18ch; }
    .blog-post__title { font-size: 30px; }
    .blog-post__lead { font-size: 17px; }
    .blog-post__hero { margin-bottom: 24px; }
    .blog-post__hero img { border-radius: 14px; aspect-ratio: 16 / 10; }
    .blog-post__head { margin-bottom: 32px; }
    .blog-post__body p,
    .blog-post__body li { font-size: 16px; line-height: 1.7; }
    .blog-post__body .blog-post__intro { font-size: 17px; }
    .blog-post__body h3 { font-size: 21px; margin: 32px 0 12px; }
    .blog-post__body blockquote { font-size: 17px; padding: 16px 20px; }
    .blog-post__author-card { padding: 20px 22px; gap: 14px; }
    .blog-post__related-title { font-size: 22px; }
}

/* ============================================================================
   BOUNDLESS — Homepage "Ücretsiz Deneyin" CTA band (footer üstü)
   ----------------------------------------------------------------------------
   Cloudflare "Build without boundaries" pattern'inden adapte edildi.
   Yapı:
     .boundless                  → tam genişlik gradient zemin + overflow:hidden
     .boundless__bg / __pattern  → ince dot grid texture
     .boundless__glow            → alt-orta sıcak radyal ışıltı
     .boundless__icons           → dağılmış dashed-border ikon kartları (left/right)
     .boundless__inner           → boxed merkez içerik (title + lead + CTA)
     .boundless__btn             → primary (white pill) + secondary (outline)
     .boundless__strip/__marquee → alt edge'de sonsuz kayan feature pill row
   ========================================================================== */

.boundless {
    position: relative;
    overflow: hidden;
    padding: 110px 0 0;
    background:
        linear-gradient(135deg, #060840 0%, #0E116F 45%, #027BC4 100%);
    isolation: isolate;
    color: #ffffff;
    /* Boxed — kutu site standartı container genişliğinde (1240px) merkezde.
       Köşe yuvarlaklığı --radius (10px) → "ÜCRETSİZ DENEYİN" btn-primary ile aynı. */
    max-width: var(--container-max);
    margin: 64px auto 80px;
    border-radius: var(--radius);
}

/* Arka plan dekorasyonu */
.boundless__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.boundless__pattern {
    position: absolute;
    inset: 0;
    /* İnce dot grid — Cloudflare'deki dokuyu taklit eder.
       background-size SVG dot'unun adımı, opacity ile boğulur. */
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.boundless__glow {
    /* Alt-orta sıcak ışık — turuncu/altın tonu icanad mavisinde sıcak vurgu */
    position: absolute;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%);
    width: min(880px, 70%);
    height: 480px;
    background:
        radial-gradient(ellipse at center bottom,
            rgba(255, 200, 120, 0.55) 0%,
            rgba(255, 150, 80, 0.35) 25%,
            rgba(255, 120, 60, 0.12) 50%,
            transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

/* Floating ikon grupları */
.boundless__icons {
    position: absolute;
    top: 0;
    height: calc(100% - 80px);   /* marquee'nin üstüne kadar */
    width: 28%;
    pointer-events: none;
    z-index: 1;
}
.boundless__icons--left  { left: 0; }
.boundless__icons--right { right: 0; }

.boundless__icon {
    position: absolute;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(255, 255, 255, 0.32);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    top: var(--y, 50%);
    /* x: left grup için soldan, right grup için sağdan */
    transform: rotate(var(--rot, 0deg));
    /* idle float — alttan üste hafif salınım */
    animation: boundlessFloat 7s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.boundless__icons--left  .boundless__icon { left:  var(--x, 0); }
.boundless__icons--right .boundless__icon { right: var(--x, 0); }
.boundless__icon--sm { width: 56px; height: 56px; border-radius: 12px; }
.boundless__icon svg {
    width: 28px;
    height: 28px;
}
.boundless__icon--sm svg { width: 22px; height: 22px; }

@keyframes boundlessFloat {
    0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--rot, 0deg)) translateY(-12px); }
}

/* Merkez içerik */
.boundless__inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px 140px;
    text-align: center;
}
/* Hero — başlık + lead + CTA: form açıldığında topluca fade-out olur.
   Form daha uzun olduğu için grid hücresi onun yüksekliğinde kalıyor;
   hero da içeriğini dikey ortalasın ki kutu içinde havada kalmasın. */
.boundless__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.boundless__title {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 24px;
}
.boundless__lead {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 auto 36px;
    max-width: 580px;
}
.boundless__ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.boundless__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius, 12px);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    /* ÜCRETSIZ DENEYİN ana butonu büyük harf konvansiyonu */
    text-transform: uppercase;
}
.boundless__btn--primary {
    background: #ffffff;
    color: #0E116F;
}
.boundless__btn--primary:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}
.boundless__btn--secondary {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.boundless__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

/* ── Swap zone: CSS Grid stack — Hero & Form aynı hücreyi paylaşır ─────────
   İki çocuk da aynı grid satır/sütun'unda → kutu yüksekliği her ikisinin
   max yüksekliğine eşit (form daha büyük olduğu için form yüksekliği belirler).
   Görünür olan opacity:1 + pointer-events:auto, diğeri opacity:0.
   "Hemen Başlayın"a tıklandığında hero fade-out + form fade-in olur ve
   sayfa hiç zıplamaz çünkü grid hücre yüksekliği hep aynı kalır. */
.boundless__swap {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.boundless__swap > .boundless__hero,
.boundless__swap > .boundless__form {
    grid-row: 1;
    grid-column: 1;
    transition: opacity 0.3s ease;
}

/* Default state: hero görünür, form gizli (ama layout'ta yer kaplar) */
.boundless__hero {
    opacity: 1;
    pointer-events: auto;
}
.boundless__form {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 100%;
    /* Form öğelerini kutu içinde dikey olarak ortala */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Form başlığı — "İletişim Bilgileriniz" */
.boundless__form-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-align: center;
}

/* is-form-open: hero gizlenir, form belirir */
.boundless__inner.is-form-open .boundless__hero {
    opacity: 0;
    pointer-events: none;
}
.boundless__inner.is-form-open .boundless__form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Honeypot — görünmez ama DOM'da var (bot tuzağı) */
.boundless__form-hp {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Form layout: 3 alan grid (desktop) → tek kolon (mobil) */
.boundless__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.boundless__form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.boundless__form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.boundless__form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    padding: 12px 14px;
    border-radius: var(--radius);
    outline: none;
    transition: background 0.15s, border-color 0.15s;
}
.boundless__form-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.boundless__form-input:hover  { background: rgba(255, 255, 255, 0.12); }
.boundless__form-input:focus  {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Actions row — submit + cancel */
.boundless__form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.boundless__form-submit {
    position: relative;
    min-width: 180px;
}
.boundless__form-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: boundlessSpin 0.8s linear infinite;
}
.boundless__form.is-loading .boundless__form-submit-text { opacity: 0; }
.boundless__form.is-loading .boundless__form-spinner    { opacity: 1; }
@keyframes boundlessSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.boundless__form-cancel {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    font-family: inherit;
    transition: color 0.15s;
}
.boundless__form-cancel:hover { color: #ffffff; }

.boundless__form-disclaimer {
    margin: 14px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}
.boundless__form-disclaimer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.boundless__form-disclaimer a:hover { color: #ffffff; }

/* Feedback (success/error inline message) */
.boundless__form-feedback {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    min-height: 20px;
    text-align: center;
}
.boundless__form-feedback.is-success {
    color: #86efac;          /* tailwind green-300 ile uyumlu */
}
.boundless__form-feedback.is-error {
    color: #fca5a5;          /* tailwind red-300 ile uyumlu */
}

/* Alt feature marquee */
.boundless__strip {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    padding: 16px 0;
}
.boundless__marquee {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: boundlessMarquee 40s linear infinite;
    will-change: transform;
}
.boundless__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}
.boundless__pill svg {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

@keyframes boundlessMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* iki kopya yan yana, %50 kaydır */
}

/* Erişilebilirlik: hareket kısıtlamalı kullanıcı için animasyonları durdur */
@media (prefers-reduced-motion: reduce) {
    .boundless__icon,
    .boundless__marquee { animation: none; }
}

/* ── Responsive — tablet ve mobil ───────────────────────────────────────── */
@media (max-width: 1280px) {
    /* Viewport kutu genişliğinden dar olduğunda outer auto margin yerine
       kenarlarda küçük bir gap kalsın; iç 20px padding korunur. */
    .boundless { margin: 48px 16px 64px; }
}

@media (max-width: 1024px) {
    .boundless { padding: 80px 0 0; }
    .boundless__title { font-size: 28px; }
    .boundless__icons { width: 22%; }
    .boundless__icon    { width: 60px; height: 60px; }
    .boundless__icon svg { width: 24px; height: 24px; }
    .boundless__icon--sm { width: 48px; height: 48px; }
    .boundless__icon--sm svg { width: 20px; height: 20px; }
}

@media (max-width: 768px) {
    .boundless { padding: 64px 0 0; margin: 32px 12px 48px; }
    .boundless__inner { padding: 0 20px 100px; }
    .boundless__title { font-size: 25px; letter-spacing: -0.015em; }
    .boundless__title br { display: none; }       /* mobilde tek satıra düşmesin */
    .boundless__lead { font-size: 15px; margin-bottom: 28px; }
    .boundless__ctas { flex-direction: column; gap: 10px; width: 100%; }
    .boundless__btn  { width: 100%; padding: 14px; }
    /* Mobilde floating ikonlar görsel gürültü yaratmasın → gizle */
    .boundless__icons { display: none; }
    .boundless__glow { bottom: -80px; width: 90%; height: 320px; }
    .boundless__strip { padding: 12px 0; }
    .boundless__marquee { gap: 32px; animation-duration: 30s; }
    .boundless__pill { font-size: 13px; }
    /* Form: 3 sütundan tek sütuna düş */
    .boundless__form { margin-top: 0; }
    .boundless__form-row { grid-template-columns: 1fr; gap: 10px; }
    .boundless__form-actions { flex-direction: column; gap: 8px; }
    .boundless__form-submit { width: 100%; }
}

/* ── Mobil section başlıkları: tüm major section title'lar 20px
   (.boundless__title hariç — kendi mobil değeri 25px) ───────────────────── */
@media (max-width: 768px) {
    .orbit-panel__title,
    .panel-showcase__title,
    .pricing__title,
    .payments__title,
    .seo-features__title {
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    /* Başlık altındaki lead/subtitle yazıları mobilde 1px küçük */
    .orbit-panel__subtitle,
    .boundless__lead {
        font-size: 14px;
    }
    .pricing__subtitle,
    .payments__subtitle,
    .seo-features__subtitle {
        font-size: 15px;
    }
}

/* ╔═══════════════════════════════════════════════════════════════════════
   ║  /demo-talep/ — "Merchant playbook" showcase (Shopify-stili tab UI).
   ║
   ║  Yapı: gri büyük "stage" + altta 4 sekme + alt orta CTA.
   ║  Stage içinde 4 mockup panel mutlak konumla üst üste; sadece aktif
   ║  panelin opacity'si 1, diğerleri 0 (cross-fade).
   ║  Aktif sekmenin üstündeki mavi/mor progress bar 6sn'de soldan sağa
   ║  dolar; tamamlandığında JS sonraki sekmeye geçer. Hover'da CSS-only
   ║  bir paus efekti vermek yerine animasyonu JS yönetir.
   ║
   ║  Renk paleti:
   ║    --dts-accent : #5A3DF1 (mor) — aktif progress bar + chip + butonlar
   ║    --dts-bg     : #F2F2F0 — stage / sayfa
   ║    --dts-card   : #FFFFFF — telefonların ekran arkaplanı
   ║    --dts-text   : #1A1A1A — başlıklar
   ║
   ║  Mobil (<=768px): stage küçülür, tabs tek sütun olur, mockup'lardaki
   ║  bazı dekoratif floating öğeler gizlenir (görsel kalabalığı azaltır).
   ╚═══════════════════════════════════════════════════════════════════ */

.dt-showcase {
    --dts-accent: #5A3DF1;
    --dts-bg:     #F2F2F0;
    --dts-card:   #FFFFFF;
    --dts-text:   #1A1A1A;
    --dts-muted:  #6B7280;
    --dts-line:   #E5E5E3;

    padding: 80px 24px 100px;
    background: #FAFAFA;
}

.dt-showcase__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.dt-showcase__head {
    text-align: center;
    margin-bottom: 32px;
}

.dt-showcase__title {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -.025em;
    color: var(--dts-text);
    margin: 0 0 12px;
    line-height: 1.15;
}

.dt-showcase__lead {
    font-size: 17px;
    color: var(--dts-muted);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.55;
}

/* ── Stage: tüm mockup panellerinin sahnesi ───────────────────────── */
.dt-showcase__stage {
    position: relative;
    background: var(--dts-bg);
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 480px;
}

.dt-showcase__panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.dt-showcase__panel.is-active {
    opacity: 1;
    pointer-events: auto;
}

.dt-showcase__mockup {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

/* ── Phone frame — paneller arasında ortak ────────────────────────── */
.dt-showcase__phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    aspect-ratio: 9 / 19;
    background: #fff;
    border-radius: 32px;
    border: 7px solid #1a1a1a;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dt-showcase__phone-screen {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dt-showcase__phone-screen--full {
    padding: 0;
}

/* ── Etiket (Header / Koleksiyon vb.) ─────────────────────────────── */
.dt-showcase__tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.18);
    font-size: 12px;
    font-weight: 500;
    color: var(--dts-text);
    border: 1px solid var(--dts-line);
}
.dt-showcase__tag svg { width: 14px; height: 14px; }

.dt-showcase__tag--top-left {
    top: 12px;
    left: 25%;
    z-index: 3;
}
.dt-showcase__tag--inside-top {
    top: 34px;
    left: 48%;
    transform: translateX(-50%);
    z-index: 3;
    background: #fff;
}

/* ── Panel 1: tema editör mockup ──────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
   Showcase panellerindeki TÜM telefon mockup'ları → modern iPhone:
   • Titanyum rail (gri kenar parlaması)
   • Kalın siyah bezel + büyük yuvarlatılmış köşeler
   • Üstte ortada Dynamic Island (CSS ::before)
   • Status bar (saat + sinyal/wifi/batarya ikonları)
   • Yan tuşlar (sol volume up/down, sağ power)
   • Dış gölge ile masaya konulmuş hissi
   3 panelde de aynı çerçeve görünür (içerik farkları korunur).
   ───────────────────────────────────────────────────────────────── */
.dt-showcase__phone--brand,
.dt-showcase__phone--green,
.dt-showcase__phone--device {
    width: 264px;
    /* Titanyum rail simülasyonu: dış kenarda 1.5px açık gri parlama
       (#9ea2a8) → ardından 2px koyu siyah → asıl bezel siyahı. Bu
       katmanlama gerçek iPhone Pro çerçevesinin polished titanium
       parlaklığını taklit eder. */
    background:
        linear-gradient(145deg, #2a2c30 0%, #1a1c1f 50%, #2a2c30 100%);
    border: 1.5px solid #9ea2a8;
    border-radius: 44px;
    padding: 10px;
    box-shadow:
        0 32px 56px -20px rgba(20,22,40,.38),
        0 10px 22px -10px rgba(20,22,40,.18),
        inset 0 0 0 1.5px rgba(0,0,0,.6),
        inset 0 0 0 2.5px rgba(255,255,255,.05);
    overflow: visible;
}
.dt-showcase__phone--brand .dt-showcase__phone-screen,
.dt-showcase__phone--green .dt-showcase__phone-screen,
.dt-showcase__phone--device .dt-showcase__phone-screen {
    border-radius: 33px;
    overflow: hidden;
    background: #fff;
    height: 100%;
}

/* Dynamic Island — üstte ortada siyah pill (her üç telefon) */
.dt-showcase__phone--brand::before,
.dt-showcase__phone--green::before,
.dt-showcase__phone--device::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 22px;
    background: #000;
    border-radius: 12px;
    z-index: 6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Status bar — şeffaf overlay; saat solda, sistem ikonları sağda.
   Dinamik ada ile aynı satırda, kenarlara hizalanmış. İnset değerleri
   dinamik adanın yanına 8-10px boşluk bırakacak şekilde ayarlandı. */
.dt-showcase__phone--brand .dt-showcase__phone-statusbar,
.dt-showcase__phone--green .dt-showcase__phone-statusbar,
.dt-showcase__phone--device .dt-showcase__phone-statusbar {
    position: absolute;
    top: 19px;
    left: 18px;
    right: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.1px;
    z-index: 7;
    pointer-events: none;
}
.dt-showcase__phone--brand .dt-showcase__phone-time,
.dt-showcase__phone--green .dt-showcase__phone-time,
.dt-showcase__phone--device .dt-showcase__phone-time {
    padding-left: 4px;
    line-height: 1;
}
.dt-showcase__phone--brand .dt-showcase__phone-sysicons,
.dt-showcase__phone--green .dt-showcase__phone-sysicons,
.dt-showcase__phone--device .dt-showcase__phone-sysicons {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    padding-right: 4px;
}
.dt-showcase__phone--brand .dt-showcase__phone-sysicons svg,
.dt-showcase__phone--green .dt-showcase__phone-sysicons svg,
.dt-showcase__phone--device .dt-showcase__phone-sysicons svg {
    display: block;
    height: 9px;
    width: auto;
    color: #1a1a1a;
}

/* Status bar — telefon ekranındaki ilk section (Header) içeriği üst
   kısma çok yakın geldiği için status bar ile çakışmaması adına
   header section'ına ekstra üst padding veriyoruz. Diğer section'lar
   (Hero/Vitrin/Footer) zaten kendi padding'leri ile rahat. */
.dt-showcase__phone--brand .dt-showcase__phone-section--header {
    padding-top: 36px;
}

/* Pazarlama (--green) panelinde toolbar (Kadın/Erkek/Aksesuar)
   ekranın en üstünde başlar; status bar ile çakışmaması için
   28px üst boşluk veriyoruz. */
.dt-showcase__phone--green .dt-showcase__phone-toolbar {
    margin-top: 28px;
}

/* Hızlı Satış (--device) panelinde phone-head (logo + Villa/yıldız)
   ekranın en üstünde başlar; status bar ile çakışmaması için 28px
   ekstra padding. */
.dt-showcase__phone--device .dt-showcase__phone-screen {
    padding-top: 28px;
}

/* Hero section (idx 1) açıkken status bar koyu görsel üstüne düşer →
   .is-light class'ı (JS tarafından eklenir) ile saat ve sistem ikonları
   beyaz olur ki okunabilir kalsın. Diğer section'larda varsayılan siyah. */
.dt-showcase__phone--brand .dt-showcase__phone-statusbar.is-light {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.dt-showcase__phone--brand .dt-showcase__phone-statusbar.is-light .dt-showcase__phone-sysicons svg {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Yan tuşlar — sol kenarda volume up + volume down, sağ kenarda
   güç (power) tuşu. Position absolute, telefonun dışına taşırılır
   (overflow: visible). Titanyum rail ile aynı açık gri ton + ince
   gradyan ile metalik his. */
.dt-showcase__phone-btn {
    position: absolute;
    background: linear-gradient(90deg, #6e7278 0%, #b4b7bc 50%, #6e7278 100%);
    border-radius: 1.5px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 1px 2px rgba(0,0,0,.25);
    z-index: 4;
}
.dt-showcase__phone-btn--vol-up,
.dt-showcase__phone-btn--vol-dn {
    left: -3px;
    width: 3.5px;
    /* sol kenardaki tuşlar için gradyan yönü ters (ışık dış kenardan) */
    background: linear-gradient(90deg, #b4b7bc 0%, #6e7278 60%, #4a4d52 100%);
}
.dt-showcase__phone-btn--vol-up { top: 22%; height: 28px; }
.dt-showcase__phone-btn--vol-dn { top: 30%; height: 56px; margin-top: 22px; }
.dt-showcase__phone-btn--power {
    right: -3px;
    top: 26%;
    width: 3.5px;
    height: 62px;
    background: linear-gradient(90deg, #4a4d52 0%, #6e7278 40%, #b4b7bc 100%);
}

.dt-showcase__phone-tab {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translate(-50%, -110%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 999px;
    font-size: 11px;
    color: var(--dts-text);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.15);
    white-space: nowrap;
    z-index: 4;
}
.dt-showcase__phone-tab-draft {
    background: #1a1a1a;
    color: #fff;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
}

.dt-showcase__hero {
    flex: 1;
    position: relative;
    display: grid;
    place-items: center;
    color: #fff;
}
.dt-showcase__hero--villa {
    background:
        radial-gradient(circle at 30% 70%, #6da3e8 0%, transparent 50%),
        linear-gradient(160deg, #4878c8 0%, #1f4ba0 100%);
}

/* ──────────────────────────────────────────────────────────────────────
   "Kolay Tasarım" paneli — telefon ekranı içinde 4 dikey section'lı
   uzun bir mockup. Aktif editor item değiştiğinde JS,
   .dt-showcase__phone-mockup'ı `translateY(-N*100%)` ile kaydırır →
   tema editöründe bir bileşen seçildiğinde live preview'in o bölgeye
   yumuşakça scroll ettiği hissi.
   ────────────────────────────────────────────────────────────────────── */
/* Mockup'ı parent (phone-screen) içine absolute kilitle — flexbox child
   olarak height: 400% beklenildiği gibi çalışmıyordu, bu yüzden parent
   `position: relative; overflow: hidden` koşullarına göre absolute
   pozisyonlama ile 4 viewport yüksekliği garantili. */
.dt-showcase__phone-screen {
    position: relative;
    overflow: hidden;
}
.dt-showcase__phone-screen .dt-showcase__phone-mockup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400%;            /* 4 section × 100% telefon viewport = uzun ribon */
    display: flex;
    flex-direction: column;
    transform: translateY(0%);
    /* 550ms ile yeterince hızlı ki kullanıcı geçişi açıkça algılar,
       ama yine de yumuşak (cubic-bezier easing) — 1.5sn'lik adımın
       ilk üçte birinde kayma tamamlanır, kalan zaman duraklamadır. */
    transition: transform .55s cubic-bezier(.32,.72,.34,1);
    will-change: transform;
}
.dt-showcase__phone-section {
    flex: 0 0 25%;           /* her section toplam yüksekliğin %25'i = 1 viewport */
    width: 100%;
    height: 25%;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Section 0: Header — topbar + arama + kategori şeridi */
.dt-showcase__phone-section--header {
    padding: 10px 10px 0;
    gap: 8px;
}
.dt-showcase__phone-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.dt-showcase__phone-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1a1a1a;
}
.dt-showcase__phone-icon svg { width: 100%; height: 100%; }
.dt-showcase__phone-logo {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.3px;
    color: #1a1a1a;
}
.dt-showcase__phone-search {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.05);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 9px;
    color: #6a6a6a;
    margin-top: 6px;
}
.dt-showcase__phone-search svg { width: 11px; height: 11px; flex-shrink: 0; }
.dt-showcase__phone-catbar {
    display: flex; gap: 6px;
    overflow: hidden;
    margin-top: 6px;
}
.dt-showcase__phone-cat {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 500;
    background: rgba(0,0,0,.05);
    color: #4a4a4a;
    white-space: nowrap;
}
.dt-showcase__phone-cat.is-active {
    background: #1a1a1a;
    color: #fff;
}

/* Section 1: Hero Slider — model fotoğrafı + overlay metin */
.dt-showcase__phone-section--hero {
    padding: 8px;
}
.dt-showcase__phone-hero {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #2a2a2a;
}
.dt-showcase__phone-hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.dt-showcase__phone-hero-overlay {
    position: absolute;
    inset: auto 10px 10px 10px;
    color: #fff;
    display: flex; flex-direction: column;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.dt-showcase__phone-hero-eyebrow {
    font-size: 8px;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 2px;
}
.dt-showcase__phone-hero-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 6px;
}
.dt-showcase__phone-hero-cta {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 9px;
    background: #fff;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 600;
    border-radius: 999px;
}
.dt-showcase__phone-hero-dots {
    position: absolute;
    left: 50%; bottom: 4px;
    transform: translateX(-50%);
    display: flex; gap: 3px;
}
.dt-showcase__phone-hero-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
}
.dt-showcase__phone-hero-dots span.is-active {
    background: #fff;
    width: 10px;
    border-radius: 2px;
}

/* Section 2: Vitrin Ürünleri — 2×2 ürün kartı grid */
.dt-showcase__phone-section--vitrin {
    padding: 8px;
}
.dt-showcase__phone-secthead {
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.dt-showcase__phone-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
}
.dt-showcase__phone-pcard {
    display: flex; flex-direction: column;
    background: #f6f6f4;
    border-radius: 6px;
    overflow: hidden;
    padding: 4px;
}
.dt-showcase__phone-pimg {
    flex: 1;
    border-radius: 4px;
    min-height: 0;
}
.dt-showcase__phone-pname {
    font-size: 8px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 3px 2px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-showcase__phone-pprice {
    font-size: 9px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 2px 2px;
}

/* Section 3: Footer — logo + linkler + sosyal medya */
.dt-showcase__phone-section--footer {
    background: #f6f6f4;
    padding: 10px;
    gap: 4px;
}
.dt-showcase__phone-flogo {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.dt-showcase__phone-fdesc {
    font-size: 8px;
    color: #6a6a6a;
    margin-bottom: 4px;
}
.dt-showcase__phone-fcol { display: flex; flex-direction: column; gap: 2px; }
.dt-showcase__phone-ftitle {
    font-size: 8px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.dt-showcase__phone-flink {
    font-size: 8px;
    color: #4a4a4a;
}
.dt-showcase__phone-fsocial {
    display: flex; gap: 5px;
    margin-top: 4px;
}
.dt-showcase__phone-fsoc {
    width: 16px; height: 16px;
    background: #1a1a1a;
    border-radius: 4px;
}
.dt-showcase__phone-fcopy {
    margin-top: auto;
    font-size: 7px;
    color: #9a9a9a;
}

/* Hafif "drag" hint: aktif bileşeni telefon ekranının ortasında
   parlak bir hairline outline ile vurgular. Çevrede dotted çizgi +
   üst-sağda küçük "tutamaç" → tema editöründeki drag-handle hissi. */
.dt-showcase__phone-highlight {
    position: absolute;
    left: 4px; right: 4px;
    top: 4px;
    height: calc(100% - 8px);
    border: 1.5px dashed rgba(124,77,255,.55);
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    box-shadow: 0 0 0 3px rgba(124,77,255,.08);
}
.dt-showcase__panel--design.is-active .dt-showcase__phone-highlight {
    opacity: 1;
    animation: dtsPhoneHighlightPulse 2.2s ease-in-out infinite;
}
@keyframes dtsPhoneHighlightPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(124,77,255,.08); }
    50%      { box-shadow: 0 0 0 6px rgba(124,77,255,.16); }
}

/* Editor item active state geçişi yumuşak — JS class toggle ettiğinde
   background/color/box-shadow eş zamanlı animate olur. */
.dt-showcase__editor-item {
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.dt-showcase__brand-mark {
    font-family: Georgia, serif;
    font-size: 28px;
    letter-spacing: .14em;
    font-weight: 400;
}
.dt-showcase__hero-follow {
    position: absolute;
    bottom: 22px;
    right: 14px;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
}

.dt-showcase__catnav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    overflow-x: hidden;
}
.dt-showcase__catnav-icon {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #1a1a1a;
    flex-shrink: 0;
}
.dt-showcase__catnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    font-size: 11px;
    color: var(--dts-text);
    white-space: nowrap;
}

.dt-showcase__editor {
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 180px;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.18);
    border: 1px solid var(--dts-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
}
.dt-showcase__editor-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dts-text);
}
.dt-showcase__editor-item svg { width: 14px; height: 14px; color: var(--dts-muted); flex-shrink: 0; }
/* Aktif item: belirgin mor zemin + sol mor accent bar + accent border.
   Geçiş animasyonu hızlı (220ms) ama easing yumuşak — kullanıcı
   bileşen değişimini açıkça algılar. */
.dt-showcase__editor-item.is-active {
    background: rgba(90,61,241,.13);
    color: var(--dts-accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(90,61,241,.35);
}
.dt-showcase__editor-item.is-active::before {
    content: '';
    position: absolute;
    left: 4px; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--dts-accent);
    border-radius: 2px;
}
.dt-showcase__editor-item.is-active svg { color: var(--dts-accent); }

/* Sağ taraf "bileşen özellikleri" kartı — JS aktif editor item'a göre
   içeriği değiştirir. Telefon ekranındaki canlı önizleme kayarken,
   bu kart o bileşenin tema editörü ayarlarını özetler. Hafif rotate
   ile telefonun yanında duran bir post-it/etiket hissi. */
.dt-showcase__featcard {
    position: absolute;
    right: 6%;
    top: 18%;
    width: 230px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 24px 56px -18px rgba(0,0,0,.22),
                0 6px 14px -8px rgba(0,0,0,.08);
    transform: rotate(-2deg);
    z-index: 3;
    overflow: hidden;
}
.dt-showcase__featcard::before {
    content: '';
    position: absolute;
    inset: auto auto 0 0;
    width: 60%; height: 2px;
    background: linear-gradient(90deg, var(--dts-accent) 0%, transparent 100%);
}
.dt-showcase__featcard-set {
    display: none;
}
.dt-showcase__featcard-set.is-active {
    display: block;
    animation: dtsFeatcardFade .42s cubic-bezier(.4,0,.2,1);
}
@keyframes dtsFeatcardFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dt-showcase__featcard-eyebrow {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dts-muted);
    margin-bottom: 4px;
}
.dt-showcase__featcard-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.dt-showcase__featcard-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dt-showcase__featcard-list li {
    position: relative;
    padding-left: 18px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #3a3a3a;
}
.dt-showcase__featcard-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 5px;
    width: 10px; height: 10px;
    border-radius: 3px;
    background: rgba(124,77,255,.14);
    box-shadow: inset 0 0 0 1.5px var(--dts-accent);
}
.dt-showcase__featcard-list li::after {
    content: '';
    position: absolute;
    left: 2.5px; top: 8px;
    width: 5px; height: 2.5px;
    border-left: 1.5px solid var(--dts-accent);
    border-bottom: 1.5px solid var(--dts-accent);
    transform: rotate(-45deg);
}

/* ── Panel 2: pazarlama / koleksiyon ──────────────────────────────── */
/* --green özel renk/border override'ı kaldırıldı — artık ortak iPhone
   titanyum çerçevesi kullanılıyor. İçerikteki yeşil gradient'ler
   (hero--marketing vb.) ekran içinde aynen korunuyor. */
.dt-showcase__phone-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px;
    background: rgba(255,255,255,.92);
}
.dt-showcase__phone-toolbar-icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: #1a1a1a;
    flex-shrink: 0;
}
.dt-showcase__phone-toolbar-tab {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(0,0,0,.06);
    color: var(--dts-text);
    white-space: nowrap;
}
.dt-showcase__phone-toolbar-tab.is-active {
    background: #1a1a1a;
    color: #fff;
}

.dt-showcase__hero--marketing {
    background:
        radial-gradient(circle at 30% 80%, #c5e0c0 0%, transparent 50%),
        linear-gradient(160deg, #6ba87f 0%, #2f6c44 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 16px 16px;
    min-height: 130px;
}
.dt-showcase__hero-title {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
}
.dt-showcase__hero-arrow {
    width: 26px; height: 26px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #fff;
}

.dt-showcase__plist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    background: #fff;
}
.dt-showcase__pcard {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dt-showcase__pcard-img {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #ddd;
}
.dt-showcase__pcard-name { font-size: 10px; color: var(--dts-text); margin-top: 4px; }
.dt-showcase__pcard-price { font-size: 10px; color: var(--dts-muted); }

.dt-showcase__pop {
    position: absolute;
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.2);
    width: 110px;
    z-index: 2;
}
.dt-showcase__pop-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: #ddd;
}
.dt-showcase__pop-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--dts-text);
    padding: 2px 4px 4px;
}
.dt-showcase__pop--newarr { right: 18%; top: 22%; transform: rotate(4deg); }
.dt-showcase__pop--women  { right: 8%;  top: 50%; transform: rotate(-3deg); z-index: 3; }
.dt-showcase__pop--men    { right: 20%; bottom: 8%; transform: rotate(2deg); }

/* ── Panel 3: checkout / mobile ürün ──────────────────────────────── */
/* --device özel boyut/border override'ı kaldırıldı — ortak iPhone
   çerçevesi kullanılıyor. Eski .phone-notch artık görünmez kılındı
   (dynamic island onun yerini aldı, HTML'de yine sahibi yok). */
.dt-showcase__phone--device .dt-showcase__phone-notch {
    display: none;
}
.dt-showcase__phone-notch {
    width: 80px; height: 18px;
    background: #111;
    border-radius: 0 0 12px 12px;
    margin: 0 auto;
    flex-shrink: 0;
}

.dt-showcase__phone-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dts-line);
}
.dt-showcase__store-mark {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c4030, #2a1810);
    flex-shrink: 0;
}
.dt-showcase__store-meta { display: flex; flex-direction: column; }
.dt-showcase__store-name { font-size: 11px; font-weight: 600; color: var(--dts-text); }
.dt-showcase__store-rating { font-size: 9px; color: var(--dts-muted); }

.dt-showcase__product-img {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.dt-showcase__product-info { padding: 8px 12px; }
.dt-showcase__product-name { font-size: 11px; font-weight: 500; color: var(--dts-text); }
.dt-showcase__product-stars { font-size: 9px; color: #f5a623; margin-top: 2px; }
.dt-showcase__product-stars span { color: var(--dts-muted); }
.dt-showcase__product-stock { font-size: 9px; font-weight: 600; color: var(--dts-text); margin-top: 6px; }
.dt-showcase__product-price { font-size: 13px; font-weight: 700; color: var(--dts-text); margin-top: 2px; }

.dt-showcase__cta-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 14px;
    margin-top: auto;
}
.dt-showcase__btn {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: default;
    width: 100%;
}
.dt-showcase__btn--primary { background: var(--dts-accent); color: #fff; }
.dt-showcase__btn--dark    { background: #111; color: #fff; }

/* ── Panel 4: kampanyalar / reklam ────────────────────────────────── */
.dt-showcase__mockup--ads { display: block; }
.dt-showcase__ad {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.18);
    overflow: hidden;
    border: 1px solid var(--dts-line);
}
.dt-showcase__ad-brandbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dts-line);
}
.dt-showcase__ad-brand {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #1877f2;
}
.dt-showcase__ad-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}
.dt-showcase__ad-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c084fc, #6c3df1);
    flex-shrink: 0;
}
.dt-showcase__ad-name { font-size: 13px; font-weight: 600; color: var(--dts-text); }
.dt-showcase__ad-sponsored { font-size: 11px; color: var(--dts-muted); }
.dt-showcase__ad-photo {
    aspect-ratio: 1.3 / 1;
    width: 100%;
}
.dt-showcase__ad-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f5f5f5;
}
.dt-showcase__ad-headline { font-size: 13px; font-weight: 600; color: var(--dts-text); }
.dt-showcase__ad-url { font-size: 11px; color: var(--dts-muted); text-transform: lowercase; }
.dt-showcase__ad-cta {
    background: #e4e6eb;
    border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dts-text);
    cursor: default;
}

.dt-showcase__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.18);
    z-index: 3;
}
.dt-showcase__chip svg { width: 16px; height: 16px; }
.dt-showcase__chip--purple {
    background: var(--dts-accent);
    color: #fff;
    top: 18%;
    right: 4%;
}

.dt-showcase__stackcards {
    position: absolute;
    top: 30%;
    left: 4%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    width: 220px;
}
.dt-showcase__stackcard {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.15);
    border: 1px solid var(--dts-line);
}
.dt-showcase__stackcard svg { width: 18px; height: 18px; color: var(--dts-muted); flex-shrink: 0; }
.dt-showcase__stackcard-title { font-size: 12px; font-weight: 600; color: var(--dts-text); }
.dt-showcase__stackcard-desc { font-size: 11px; color: var(--dts-muted); }
.dt-showcase__stackcard.is-elev {
    transform: translateX(40px);
    box-shadow: 0 16px 36px -14px rgba(0,0,0,.2);
    border-color: rgba(90,61,241,.3);
}

.dt-showcase__slidercard {
    position: absolute;
    bottom: 14%;
    left: 8%;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.18);
    border: 1px solid var(--dts-line);
    z-index: 3;
}
.dt-showcase__slidercard-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--dts-text);
    margin-bottom: 10px;
}
.dt-showcase__slidercard-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dt-showcase__slidercard-track {
    position: relative;
    flex: 1;
    height: 4px;
    background: var(--dts-line);
    border-radius: 999px;
}
.dt-showcase__slidercard-fill {
    position: absolute;
    inset: 0 35% 0 0;
    background: #1a1a1a;
    border-radius: 999px;
}
.dt-showcase__slidercard-knob {
    position: absolute;
    left: 65%;
    top: 50%;
    width: 14px; height: 14px;
    background: #1a1a1a;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.dt-showcase__slidercard-value {
    background: rgba(90,61,241,.08);
    color: var(--dts-accent);
    border: 1px solid rgba(90,61,241,.2);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.dt-showcase__statcard {
    position: absolute;
    right: 4%;
    bottom: 18%;
    width: 250px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.18);
    border: 1px solid var(--dts-line);
    z-index: 3;
}
.dt-showcase__statcard-label { font-size: 11px; color: var(--dts-muted); }
.dt-showcase__statcard-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 0 8px;
}
.dt-showcase__statcard-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--dts-text); }
.dt-showcase__statcard-max { font-size: 12px; color: var(--dts-muted); }
.dt-showcase__statcard-bar {
    height: 6px;
    background: var(--dts-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.dt-showcase__statcard-bar-fill {
    display: block;
    height: 100%;
    width: 60%;
    background: #6ec3f6;
    border-radius: 999px;
}
.dt-showcase__statcard-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--dts-line);
    padding-top: 8px;
}
.dt-showcase__statcard-rows > div {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
.dt-showcase__statcard-rows > div > :first-child { color: var(--dts-muted); }
.dt-showcase__statcard-rows > div > :last-child { font-weight: 600; color: var(--dts-text); }

/* ── Tabs: 4 sütun, üstte ince progress bar ───────────────────────── */
.dt-showcase__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding: 0 8px;
}

.dt-showcase__tab {
    appearance: none;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity .25s ease;
    opacity: .55;
}
.dt-showcase__tab:hover { opacity: .85; }
.dt-showcase__tab.is-active { opacity: 1; }

.dt-showcase__tab-progress {
    position: relative;
    width: 100%;
    height: 3px;
    background: var(--dts-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}
.dt-showcase__tab-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--dts-accent);
    border-radius: 999px;
}
/* Aktif sekmede 6sn'de 0 → 100% animasyon. `transition` yerine `animation`
   kullanmamızın sebebi: ilk sayfa yüklemesinde HTML'de zaten is-active sınıfı
   olan sekmede transition tetiklenmiyor (state değişimi yok) → bar dolu
   geliyor. CSS animation, property set edilir edilmez 0'dan başlar; class
   kaldırılınca animation iptal olur ve width: 0 default'a düşer → bir
   sonraki aktivasyonda yeniden 0'dan dolar. */
.dt-showcase__tab.is-active .dt-showcase__tab-progress-fill {
    animation: dtsProgressFill 6s linear forwards;
}
@keyframes dtsProgressFill {
    from { width: 0;    }
    to   { width: 100%; }
}
.dt-showcase__tab.is-active .dt-showcase__tab-progress {
    background: var(--dts-line);
}
/* Aktif sekmenin progress üstüne ek olarak: kalın çizgi (Shopify visual) */
.dt-showcase__tab.is-active .dt-showcase__tab-progress {
    height: 3px;
}

.dt-showcase__tab-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dts-muted);
}
.dt-showcase__tab-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--dts-text);
    letter-spacing: -.015em;
    line-height: 1.2;
}
.dt-showcase__tab-desc {
    font-size: 14px;
    color: var(--dts-muted);
    line-height: 1.5;
}
.dt-showcase__tab-link {
    color: var(--dts-text);
    text-decoration: none;
}
.dt-showcase__tab-link:hover {
    text-decoration: none;
}

/* ── Alt CTA ─────────────────────────────────────────────────────── */
.dt-showcase__footer {
    text-align: center;
    margin-top: 48px;
}
.dt-showcase__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    border: 1.5px solid var(--dts-text);
    color: var(--dts-text);
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.dt-showcase__cta:hover {
    background: var(--dts-text);
    color: #fff;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dt-showcase__tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 24px;
    }
    .dt-showcase__title { font-size: 32px; }
    .dt-showcase__editor { width: 150px; left: 2%; }
    .dt-showcase__stackcards { width: 190px; }
    .dt-showcase__slidercard { width: 240px; left: 4%; }
    .dt-showcase__statcard { width: 220px; right: 2%; }
    .dt-showcase__ad { width: 320px; }
}

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dt-showcase {
        padding: 56px 16px 72px;
    }
    .dt-showcase__title { font-size: 24px; }
    .dt-showcase__lead { font-size: 14px; }
    .dt-showcase__stage {
        min-height: 360px;
        aspect-ratio: 4 / 5;
    }
    .dt-showcase__tabs {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 28px;
    }
    .dt-showcase__tab-title { font-size: 18px; }
    .dt-showcase__tab-desc { font-size: 13px; }

    /* Dekoratif floating öğeler mobilde gizlenir (kalabalık olmasın) */
    .dt-showcase__editor,
    .dt-showcase__featcard,
    .dt-showcase__pop,
    .dt-showcase__tag,
    .dt-showcase__stackcards,
    .dt-showcase__slidercard,
    .dt-showcase__statcard,
    .dt-showcase__chip {
        display: none;
    }
    .dt-showcase__phone { width: 180px; }
    .dt-showcase__phone--device { width: 200px; }
    .dt-showcase__ad { width: 84%; max-width: 320px; }
    .dt-showcase__cta { padding: 12px 24px; font-size: 14px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PZ-COUPONS — Kuponlar & İndirim Kodları tanıtım bölümü
   ════════════════════════════════════════════════════════════════════════
   Shopify "Satış Kanalları" referansının kupon yönetimine uyarlanmış hali.
   Yapı: .pz-coupons__hero → 2 sütun (sol metin / sağ telefon kompozisyonu)
   Telefon mockup'ı pz-popup__phone ile aynı titanyum rail görünümünü kullanır.
   ────────────────────────────────────────────────────────────────────── */

/* Section tam genişlikte siyah. Üst köşeler yuvarlak (32px), alt köşeler
   düz — sonraki .pz-loyalty bölümü siyah karta dipten yapışır gibi durur.
   İçerik boxed kalır (1240px). Üst-orta radial glow section::before
   pseudo'sundan gelir, içerik z-index:1 ile glow'un üstünde durur. */
.pz-coupons {
    background: #0b1220;
    color: #ffffff;
    padding: 96px 0 120px;
    border-radius: 32px 32px 0 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pz-coupons::before {
    content: '';
    position: absolute;
    top: -340px;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(120, 130, 200, .22) 0%, rgba(99, 102, 241, .10) 30%, rgba(11, 18, 32, 0) 65%);
    pointer-events: none;
    z-index: 0;
}
.pz-coupons__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* ── Hero: 2 sütun ─────────────────────────────────────────────────── */
.pz-coupons__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
}

/* Sol — metin sütunu (max-width 460→492, ~%7 genişletildi) */
.pz-coupons__hero-left {
    max-width: 492px;
}
.pz-coupons__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.pz-coupons__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 28px;
    padding-bottom: 28px;
    border-bottom: 0.5px solid #ffffff;
    letter-spacing: -.02em;
}
.pz-coupons__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #a3a8b5;
    margin: 0;
}

/* Sağ — telefon mockup'ı + floating kartlar kompozisyonu */
.pz-coupons__hero-right {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* iPhone mockup — siyah kartta görünür kalsın diye titanyum rail
   daha açık bir gri tonuna alındı, parlak metalik border vurgulu */
.pz-coupons__phone {
    position: relative;
    width: 280px;
    aspect-ratio: 9 / 19;
    background: linear-gradient(145deg, #8a8d93 0%, #5a5d63 50%, #8a8d93 100%);
    border: 1.5px solid #c8ccd2;
    border-radius: 46px;
    padding: 11px;
    box-shadow:
        0 40px 80px -20px rgba(0,0,0,.55),
        0 14px 28px -10px rgba(0,0,0,.35),
        inset 0 0 0 1.5px rgba(0,0,0,.45),
        inset 0 0 0 2.5px rgba(255,255,255,.12);
    z-index: 3;
    margin-left: -40px;
}
.pz-coupons__phone::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 23px;
    background: #000;
    border-radius: 12px;
    z-index: 6;
}
.pz-coupons__phone-statusbar {
    position: absolute;
    top: 20px;
    left: 19px;
    right: 19px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    z-index: 7;
    pointer-events: none;
}
.pz-coupons__phone-time { padding-left: 4px; line-height: 1; }
.pz-coupons__phone-sysicons {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    padding-right: 4px;
}
.pz-coupons__phone-sysicons svg { display: block; height: 9px; width: auto; color: #1a1a1a; }

/* Yan tuşlar */
.pz-coupons__phone-btn {
    position: absolute;
    border-radius: 1.5px;
    z-index: 4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 1px 2px rgba(0,0,0,.25);
}
.pz-coupons__phone-btn--vol-up,
.pz-coupons__phone-btn--vol-dn {
    left: -3px;
    width: 3.5px;
    background: linear-gradient(90deg, #d4d7dc 0%, #8e9298 60%, #6a6d72 100%);
}
.pz-coupons__phone-btn--vol-up { top: 22%; height: 30px; }
.pz-coupons__phone-btn--vol-dn { top: 30%; height: 58px; margin-top: 22px; }
.pz-coupons__phone-btn--power {
    right: -3px;
    top: 26%;
    width: 3.5px;
    height: 64px;
    background: linear-gradient(90deg, #6a6d72 0%, #8e9298 40%, #d4d7dc 100%);
}

/* Telefon ekranı — checkout / sepet sayfası */
.pz-coupons__phone-screen {
    position: relative;
    height: 100%;
    background: #f7f7f5;
    border-radius: 36px;
    overflow: hidden;
    padding: 42px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
}

/* Top nav */
.pz-coupons__phone-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
    border-bottom: 1px solid #eceae5;
}
.pz-coupons__phone-topnav strong {
    font-size: 13px;
    font-weight: 600;
    color: #0b1220;
    letter-spacing: -.01em;
}
.pz-coupons__phone-icon {
    width: 18px;
    height: 18px;
    color: #0b1220;
    display: inline-flex;
}
.pz-coupons__phone-icon svg { width: 100%; height: 100%; }

/* Ürün satırı */
.pz-coupons__phone-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}
.pz-coupons__phone-item-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: block;
}
.pz-coupons__phone-item-meta { display: flex; flex-direction: column; min-width: 0; }
.pz-coupons__phone-item-meta strong {
    font-size: 11px;
    font-weight: 600;
    color: #0b1220;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pz-coupons__phone-item-meta span {
    font-size: 9.5px;
    color: #8b919e;
    line-height: 1.2;
    margin-top: 2px;
}
.pz-coupons__phone-item-price {
    font-size: 11px;
    font-weight: 600;
    color: #0b1220;
}

/* Kupon kodu barı (uygulanmış görünüm) */
.pz-coupons__phone-couponbar {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px dashed #10b981;
    border-radius: 8px;
}
.pz-coupons__phone-couponbar-icon {
    width: 14px;
    height: 14px;
    color: #047857;
    display: inline-flex;
}
.pz-coupons__phone-couponbar-icon svg { width: 100%; height: 100%; }
.pz-coupons__phone-couponbar-code {
    font-size: 11px;
    font-weight: 700;
    color: #064e3b;
    letter-spacing: .08em;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.pz-coupons__phone-couponbar-ok {
    width: 14px;
    height: 14px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Özet satırları */
.pz-coupons__phone-summary {
    margin-top: 4px;
    padding: 8px 4px 0;
    border-top: 1px solid #eceae5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pz-coupons__phone-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: #5f6675;
}
.pz-coupons__phone-summary-row--discount { color: #047857; font-weight: 600; }
.pz-coupons__phone-summary-row--discount strong { color: #047857; font-weight: 700; }
.pz-coupons__phone-summary-row--total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #eceae5;
    font-size: 12px;
    color: #0b1220;
}
.pz-coupons__phone-summary-row--total strong { font-size: 13px; color: #0b1220; font-weight: 700; }

.pz-coupons__phone-checkout {
    margin-top: auto;
    text-align: center;
    background: #0b1220;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
}

/* ── Floating kartlar (telefon etrafına dağıtılmış) ────────────────── */
.pz-coupons__float {
    position: absolute;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 20px 40px -12px rgba(20,22,40,.18),
        0 6px 14px -4px rgba(20,22,40,.10),
        0 0 0 1px rgba(20,22,40,.04);
    z-index: 4;
    font-family: 'Poppins', sans-serif;
}

/* "Kupon uygulandı" pill — sağ üst */
.pz-coupons__float--applied {
    top: 60px;
    right: 60px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #064e3b;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    box-shadow:
        0 12px 24px -8px rgba(16,185,129,.30),
        0 0 0 1px rgba(16,185,129,.10);
}
.pz-coupons__float--applied svg { width: 14px; height: 14px; color: #10b981; }

/* "%25 indirim" yuvarlak rozet — sağ üst alt */
.pz-coupons__float--percent {
    top: 30px;
    right: -10px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ff6b6b 0%, #ee2c5b 60%, #b81d4a 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow:
        0 16px 32px -10px rgba(238,44,91,.45),
        0 6px 14px -4px rgba(238,44,91,.25),
        inset 0 2px 4px rgba(255,255,255,.25),
        inset 0 -2px 4px rgba(0,0,0,.15);
    transform: rotate(-10deg);
}
.pz-coupons__float--percent strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.pz-coupons__float--percent span { font-size: 10px; font-weight: 500; margin-top: 2px; text-transform: lowercase; opacity: .9; }

/* "SUMMER25" kupon kart — sağ orta */
.pz-coupons__float--code {
    top: 220px;
    right: -30px;
    width: 170px;
    padding: 14px 16px;
    background: #ffffff;
}
.pz-coupons__float-code-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #8b919e;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pz-coupons__float-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f4f4f1;
    border: 1px dashed #c9c5be;
    border-radius: 6px;
}
.pz-coupons__float-code-box strong {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #0b1220;
    letter-spacing: .08em;
}
.pz-coupons__float-code-box svg {
    width: 14px;
    height: 14px;
    color: #0b1220;
    opacity: .55;
    flex-shrink: 0;
}

/* "Ücretsiz kargo" pill — sağ alt */
.pz-coupons__float--shipping {
    bottom: 80px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #0b1220;
    background: #ffffff;
}
.pz-coupons__float--shipping svg { width: 16px; height: 16px; color: #0b1220; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pz-coupons__hero { grid-template-columns: 1fr; gap: 80px; }
    .pz-coupons__hero-left { max-width: none; }
    .pz-coupons__phone { margin-left: 0; }
}
@media (max-width: 720px) {
    .pz-coupons { padding: 64px 0 80px; border-radius: 24px 24px 0 0; }
    .pz-coupons__container { padding: 0 20px; }
    .pz-coupons__title { font-size: 28px; }
    .pz-coupons__hero { gap: 56px; }
    .pz-coupons__hero-right { min-height: 520px; }
    .pz-coupons__float--applied { right: 8px; top: 40px; padding: 8px 12px; font-size: 11px; }
    .pz-coupons__float--percent { right: -4px; top: 16px; width: 64px; height: 64px; }
    .pz-coupons__float--percent strong { font-size: 18px; }
    .pz-coupons__float--code { right: -8px; top: 200px; width: 150px; padding: 12px; }
    .pz-coupons__float--shipping { right: 8px; bottom: 60px; padding: 8px 12px; font-size: 11px; }
}
@media (max-width: 480px) {
    .pz-coupons__float--code { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   PZ-LOYALTY — Üyelik Puan Sistemi tanıtım bölümü
   ════════════════════════════════════════════════════════════════════════
   Shopify "Kodsuz yapı blokları" referansının puan sistemine uyarlanmış
   hali. Sol: 4 workflow node kartı (Trigger → Koşul → 2× Eylem) + mavi
   SVG connector çizgileri. Sağ: başlık + paragraf.
   ────────────────────────────────────────────────────────────────────── */

.pz-loyalty {
    background: #ffffff;
    padding: 96px 0 120px;
    border-radius: 32px 32px 0 0;
    margin-top: -32px;
    position: relative;
    z-index: 1;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pz-loyalty__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}
.pz-loyalty__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.07fr);
    gap: 80px;
    align-items: center;
}

/* ── Sol: workflow kompozisyonu ────────────────────────────────────── */
.pz-loyalty__visual {
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 540 / 480;
}

/* Mavi connector çizgileri — kartların altındaki katman */
.pz-loyalty__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Workflow node kartı — ortak şablon */
.pz-loyalty__card {
    position: absolute;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 12px 14px 14px;
    box-shadow:
        0 12px 32px -16px rgba(20,22,40,.18),
        0 4px 12px  -4px rgba(20,22,40,.08);
    z-index: 2;
    font-size: 12px;
    line-height: 1.35;
}
/* Kartların konumlandırması — visual container yüzdelik koordinat sistemi
   (viewBox 540×480 ile birebir hizalı, böylece SVG connector'lar oturuyor) */
.pz-loyalty__card--trigger { top: 0;       left: 40.7%; width: 40.7%; }   /* 220, 220 */
.pz-loyalty__card--check   { top: 34.4%;   left: 15.7%; width: 40.7%; }   /* 165, 85, 220 */
.pz-loyalty__card--action1 { top: 71.9%;   left: 0;     width: 37%;   }   /* 345, 0, 200 */
.pz-loyalty__card--action2 { top: 71.9%;   left: 44.4%; width: 37%;   }   /* 345, 240, 200 */

/* Card head (üst satır: play icon + "Tetiklendiğinde..." + sağ ikon) */
.pz-loyalty__card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b919e;
    font-size: 11px;
    font-weight: 500;
}
.pz-loyalty__card-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}
.pz-loyalty__card-icon svg { width: 100%; height: 100%; }
.pz-loyalty__card-when {
    flex: 1;
    color: #5f6675;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pz-loyalty__card-bot {
    width: 14px;
    height: 14px;
    color: #8b919e;
    display: inline-flex;
    flex-shrink: 0;
}
.pz-loyalty__card-bot svg { width: 100%; height: 100%; }

/* Yeşil rozet — sadece trigger kartında, sağ üst köşede akış başlangıcı
   sembolü (3 node birleşimi şeklinde küçük grafik) */
.pz-loyalty__card-badge {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #4ade80, #16a34a);
    border-radius: 6px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(22,163,74,.5);
}
.pz-loyalty__card-badge svg { width: 13px; height: 13px; }

/* Card body — ana açıklama tile'ı */
.pz-loyalty__card-body {
    margin-top: 10px;
    background: #f6f8fa;
    border: 1px solid #eaecef;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #0b1220;
    letter-spacing: -.01em;
}

/* Card foot (alt satır pill'ları: Sonra / Evet / Hayır / Çıktı +) */
.pz-loyalty__card-foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pz-loyalty__card-foot--right { justify-content: flex-end; }
.pz-loyalty__card-foot--split { justify-content: space-between; }

.pz-loyalty__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.005em;
}
.pz-loyalty__pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.pz-loyalty__pill--then { color: #2563eb; }
.pz-loyalty__pill--else { color: #dc2626; }

/* ── Sağ: başlık + açıklama (max-width 460→492, ~%7 genişletildi) ──── */
.pz-loyalty__copy {
    max-width: 492px;
}
.pz-loyalty__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: #0b1220;
    margin: 0 0 20px;
    letter-spacing: -.02em;
}
.pz-loyalty__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #5f6675;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pz-loyalty__grid { grid-template-columns: 1fr; gap: 64px; justify-items: start; }
    .pz-loyalty__copy { max-width: none; order: -1; }
    .pz-loyalty__visual { max-width: 480px; }
}
@media (max-width: 720px) {
    .pz-loyalty { padding: 64px 0 80px; border-radius: 24px 24px 0 0; margin-top: -24px; }
    .pz-loyalty__container { padding: 0 20px; }
    .pz-loyalty__title { font-size: 28px; }
    .pz-loyalty__visual { max-width: 100%; }
    .pz-loyalty__card { font-size: 11px; padding: 10px 12px 12px; }
    .pz-loyalty__card-body { font-size: 12px; padding: 8px 10px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PZ-CART — Otomatik Sepet Hatırlatma Bildirimleri tanıtım bölümü
   ════════════════════════════════════════════════════════════════════════
   2 sütun: sol başlık + paragraf + "Hemen Dene" outline CTA. Sağda
   warm-beige stage içinde 2 workflow kartı (segment kartı + e-posta
   gönderim kartı). E-posta kartının body'sinde gerçek e-posta mockup'ı
   yer alır: başlık + siyah "Sepetimi Gör" CTA + askılarda 2 ürün
   görseli (cart-reminder-products.webp).
   ────────────────────────────────────────────────────────────────────── */

.pz-cart {
    background: #ffffff;
    padding: 96px 0 120px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pz-cart__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}
.pz-cart__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
}

/* ── Sol: metin + CTA ──────────────────────────────────────────────── */
.pz-cart__copy {
    max-width: 460px;
}
.pz-cart__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: #0b1220;
    margin: 0 0 20px;
    letter-spacing: -.02em;
}
.pz-cart__desc {
    font-size: 15px;
    line-height: 1.65;
    color: #5f6675;
    margin: 0 0 32px;
}
.pz-cart__desc strong { color: #0b1220; font-weight: 600; }

.pz-cart__cta {
    display: inline-block;
    background: #ffffff;
    color: #0b1220;
    border: 1.5px solid #0b1220;
    padding: 12px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pz-cart__cta:hover {
    background: #0b1220;
    color: #ffffff;
    transform: translateY(-1px);
}

/* ── Sağ: warm-beige stage + workflow kartları ─────────────────────── */
.pz-cart__visual {
    width: 100%;
}
.pz-cart__stage {
    background: #f4f1ea;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 540px;
    margin-left: auto;
}

/* Workflow connector — segment kartı ↓ e-posta kartı arasındaki ince
   dikey çizgi. Stage'in 16px gap'ini birebir doldurur, iki kartın
   border'ına dokunarak görsel olarak bağlar. */
.pz-cart__connector {
    align-self: center;
    width: 2px;
    height: 16px;
    background: #EDE8DF;
    border-radius: 1px;
}

/* Tek workflow kartı (beyaz, ince border, hafif gölge) */
.pz-cart__node {
    background: #ffffff;
    border: 1px solid #ece8df;
    border-radius: 12px;
    box-shadow: 0 4px 12px -6px rgba(20,22,40,.08);
    overflow: hidden;
}

/* Card head — küçük ikon + label */
.pz-cart__node-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1ede4;
}
.pz-cart__node--segment .pz-cart__node-head { border-bottom: 0; }
.pz-cart__node-icon {
    width: 16px;
    height: 16px;
    color: #5f6675;
    display: inline-flex;
    flex-shrink: 0;
}
.pz-cart__node-icon svg { width: 100%; height: 100%; }
.pz-cart__node-label {
    font-size: 13px;
    font-weight: 500;
    color: #0b1220;
    letter-spacing: -.005em;
}

/* Segment kartı — body içinde tek tile ("Sepette Ürün Bırakanlar") */
.pz-cart__node-tile {
    margin: 0 16px 16px;
    padding: 11px 14px;
    background: #ffffff;
    border: 1px solid #e4e0d6;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0b1220;
    text-align: center;
    letter-spacing: -.005em;
}

/* ── E-posta mockup'ı (Kart 2 body) ────────────────────────────────── */
.pz-cart__email {
    background: #ffffff;
    padding: 32px 28px 0;
    text-align: center;
}
.pz-cart__email-title {
    font-size: 20px;
    font-weight: 600;
    color: #0b1220;
    margin: 0 0 18px;
    letter-spacing: -.01em;
}
.pz-cart__email-cta {
    display: inline-block;
    background: #0b1220;
    color: #ffffff;
    padding: 10px 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
}
.pz-cart__email-products {
    margin: 0 -28px;
    line-height: 0;
}
.pz-cart__email-products img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pz-cart__grid { grid-template-columns: 1fr; gap: 56px; }
    .pz-cart__copy { max-width: none; }
    .pz-cart__stage { margin: 0 auto; max-width: 520px; }
}
@media (max-width: 720px) {
    .pz-cart { padding: 64px 0 80px; }
    .pz-cart__container { padding: 0 20px; }
    .pz-cart__title { font-size: 28px; }
    .pz-cart__stage { padding: 20px; gap: 14px; }
    .pz-cart__email { padding: 24px 20px 0; }
    .pz-cart__email-title { font-size: 18px; }
    .pz-cart__email-products { margin: 0 -20px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PZ-PROMO — Promosyon Yönetimi tanıtım bölümü
   ════════════════════════════════════════════════════════════════════════
   Shopify "Ödemeleri hemen kabul etmeye başlayın" referansının promosyon
   yönetimine uyarlanmış hali. Sol: kare hero görsel (artisan paketleme
   sahnesi) + 2 yüzen UI kart (kampanya özeti / promosyon detay).
   Sağ: eyebrow + başlık + lead paragraf.
   ────────────────────────────────────────────────────────────────────── */

.pz-promo {
    background: #ffffff;
    padding: 96px 0 120px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pz-promo__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}
.pz-promo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 96px;
    align-items: center;
}

/* ── Sol: hero görsel + yüzen kartlar ──────────────────────────────── */
.pz-promo__visual {
    position: relative;
    width: 100%;
    max-width: 560px;
}
.pz-promo__hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 24px 60px -16px rgba(20,22,40,.18),
        0 8px 20px -6px rgba(20,22,40,.10);
}
.pz-promo__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Yüzen kartlar — beyaz, ince border, soft shadow */
.pz-promo__card {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 24px 48px -12px rgba(20,22,40,.18),
        0 8px 20px -6px rgba(20,22,40,.10),
        0 0 0 1px rgba(20,22,40,.04);
    z-index: 2;
}

/* Üst-sol mini özet kartı */
.pz-promo__card--summary {
    top: 28px;
    left: -28px;
    width: 240px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pz-promo__card-id {
    font-size: 10px;
    font-weight: 500;
    color: #8b919e;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.pz-promo__card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #f1f1ee;
}
.pz-promo__card-stat { display: flex; flex-direction: column; gap: 2px; }
.pz-promo__card-stat span {
    font-size: 10px;
    font-weight: 500;
    color: #8b919e;
}
.pz-promo__card-stat strong {
    font-size: 15px;
    font-weight: 600;
    color: #0b1220;
    letter-spacing: -.01em;
}
.pz-promo__card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f1ee;
}
.pz-promo__card-thumb {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e8d6cc 0%, #d4a691 100%);
    flex-shrink: 0;
}
.pz-promo__card-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pz-promo__card-row-meta strong {
    font-size: 11px;
    font-weight: 600;
    color: #0b1220;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pz-promo__card-row-meta span {
    font-size: 10px;
    color: #8b919e;
}

/* Sağ-alt detay kartı */
.pz-promo__card--detail {
    right: -32px;
    bottom: 48px;
    width: 264px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pz-promo__card-title {
    font-size: 14px;
    font-weight: 600;
    color: #0b1220;
    letter-spacing: -.01em;
}
.pz-promo__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #5a31f4;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    box-shadow: 0 4px 12px -4px rgba(90,49,244,.45);
}
.pz-promo__card-cta svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; }
.pz-promo__card-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.pz-promo__card-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1ee;
    font-size: 12px;
    color: #5f6675;
    font-weight: 500;
}
.pz-promo__card-meta li:last-child { border-bottom: 0; padding-bottom: 0; }
.pz-promo__card-chev {
    color: #b8bcc6;
    font-size: 14px;
    font-weight: 400;
}

/* ── Sağ: metin sütunu ─────────────────────────────────────────────── */
.pz-promo__copy {
    max-width: 440px;
}
.pz-promo__eyebrow {
    display: inline-block;
    margin-bottom: 24px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pz-promo__title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: #0b1220;
    margin: 0 0 24px;
    letter-spacing: -.02em;
}
.pz-promo__desc {
    font-size: 15px;
    line-height: 1.65;
    color: #5f6675;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pz-promo__grid { grid-template-columns: 1fr; gap: 72px; justify-items: center; }
    .pz-promo__visual { max-width: 480px; }
    .pz-promo__copy { max-width: 560px; order: -1; text-align: left; align-self: start; }
}
@media (max-width: 720px) {
    .pz-promo { padding: 64px 0 80px; }
    .pz-promo__container { padding: 0 20px; }
    .pz-promo__title { font-size: 28px; }
    .pz-promo__card--summary { left: -8px; top: 12px; width: 180px; padding: 12px 14px; }
    .pz-promo__card--summary .pz-promo__card-thumb { width: 24px; height: 24px; }
    .pz-promo__card--detail { right: -8px; bottom: 24px; width: 200px; padding: 14px 16px; gap: 12px; }
    .pz-promo__card--detail .pz-promo__card-cta { padding: 8px 12px; font-size: 12px; }
    .pz-promo__card--detail .pz-promo__card-meta li { padding: 8px 0; font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PK-FAQ — Sıkça Sorulan Sorular (paketler sayfası)
   ════════════════════════════════════════════════════════════════════════
   Referans Tailwind/Shopify "Frequently Asked Questions" yapısı: ortalanmış
   eyebrow + büyük başlık + 2 satır lead, altında dikey accordion liste.
   Native <details>/<summary> kullanır — JS gerekmez, klavye ve screen
   reader uyumludur. Açık item chevron'ı [open] selector'ı ile döndürülür.
   ────────────────────────────────────────────────────────────────────── */

.pk-faq {
    background: #ffffff;
    padding: 96px 0 80px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pk-faq__container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ── Head — ortalanmış başlık bloğu ────────────────────────────────── */
.pk-faq__head {
    text-align: center;
    margin-bottom: 48px;
}
.pk-faq__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #4b5563;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pk-faq__title {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 500;
    color: #0b1220;
    margin: 0 0 20px;
    letter-spacing: -.02em;
}
.pk-faq__lead {
    font-size: 16px;
    line-height: 1.55;
    color: #5f6675;
    margin: 0 auto;
    /* Paket bölümü açıklaması (.pricing__subtitle) ile aynı genişlik */
    max-width: 760px;
}

/* ── Accordion liste ───────────────────────────────────────────────── */
.pk-faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pk-faq__item {
    background: #ffffff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pk-faq__item[open] {
    border-color: #d1d8e8;
    box-shadow: 0 4px 16px -8px rgba(20,22,40,.12);
}

/* Summary — accordion başlık satırı */
.pk-faq__item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.pk-faq__item-head::-webkit-details-marker { display: none; }
.pk-faq__item-head::marker { display: none; }

.pk-faq__item-q {
    font-size: 15px;
    font-weight: 400;
    color: #0b1220;
    letter-spacing: -.005em;
    line-height: 1.4;
}
.pk-faq__item-chev {
    width: 18px;
    height: 18px;
    color: #5f6675;
    flex-shrink: 0;
    transition: transform .25s ease, color .2s ease;
}
.pk-faq__item[open] .pk-faq__item-chev {
    transform: rotate(180deg);
    color: #0b1220;
}

/* Body — açık item içeriği
   - Outer (.pk-faq__item-body) padding'i taşımaz; height ölçümü temiz.
   - Inner (.pk-faq__item-body-inner) padding + tipografi taşır.
   - JS, açılış/kapanışta inner.scrollHeight'a transition yapar. */
.pk-faq__item-body {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height .32s cubic-bezier(.4, 0, .2, 1),
                opacity .26s ease;
    will-change: height, opacity;
}
.pk-faq__item-body-inner {
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #5f6675;
}
.pk-faq__item-body-inner code {
    background: #eef1f7;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12.5px;
    color: #0b1220;
}

/* `<details>` open=false iken content slot user-agent tarafından
   gizlenir; CSS ile görünür kılarak height animation'a izin veriyoruz.
   Open=false durumda height:0 + overflow:hidden zaten clipler. */
.pk-faq__item:not([open]) > .pk-faq__item-body {
    display: block;
}

/* Kullanıcı animasyonu kapattıysa anında aç/kapa */
@media (prefers-reduced-motion: reduce) {
    .pk-faq__item-body { transition: none; }
    .pk-faq__item-chev { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pk-faq { padding: 64px 0 56px; }
    .pk-faq__container { padding: 0 20px; }
    .pk-faq__title { font-size: 24px; }
    .pk-faq__head { margin-bottom: 32px; }
    .pk-faq__lead br { display: none; }
    .pk-faq__item-head { padding: 16px 18px; }
    .pk-faq__item-q { font-size: 14px; }
    .pk-faq__item-body-inner { padding: 0 18px 18px; font-size: 13.5px; }
}


/* ═════════════════════════════════════════════════════════════════════
   BLOG V2 — Magazine layout (/blog/)
   Yapı: Hero block (featured + trending top) → Main wrap (grid + sidebar)
   Font: Poppins. Renkler: icanad brand (violet / blue / emerald / amber / pink).
   ════════════════════════════════════════════════════════════════════ */

.blog-page .blog-hero-block,
.blog-page .blog-main-wrap,
.blog-page .blog-side {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

/* Kategori renk paleti — CSS değişkenleri ile tek noktadan yönetilir */
.blog-page {
    --bc-rehberler-bg:      #EEF1FF;
    --bc-rehberler-fg:      #5A31F4;
    --bc-entegrasyonlar-bg: #E4F0FA;
    --bc-entegrasyonlar-fg: #027BC4;
    --bc-performans-bg:     #E4F7EE;
    --bc-performans-fg:     #10B981;
    --bc-pazarlama-bg:      #FEF1DD;
    --bc-pazarlama-fg:      #F59E0B;
    --bc-trendler-bg:       #FDE5EF;
    --bc-trendler-fg:       #EC4899;
}

/* Sayfa head'i kaldırıldı (V2) — sabit alan iki katlı:
     • .topbar (kampanya duyurusu, fixed, 47px)
     • header.site-header (fixed, 78px)
   Toplam 125px. İçerik bu çizginin altından başlasın ki ilk öğenin
   kategori eyebrow'u görünür kalsın. */
.blog-page--no-head { padding-top: 125px; }
@media (max-width: 1024px) { .blog-page--no-head { padding-top: 115px; } }
@media (max-width: 720px)  { .blog-page--no-head { padding-top: 105px; } }

/* Hero altına taşınan kategori pill row */
.blog-cats--below-hero {
    margin: 0 0 40px;
}
.blog-cats--below-hero .blog-cats__list {
    justify-content: flex-start;
}

/* ── Hero block (split: featured + trending top) ─────────────────────── */
.blog-hero-block {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 18px;
    /* Pill row hero'nun altına bitişik dursun (eski 56px → 24px) */
    margin: 0 0 24px;
}

/* Sol — büyük featured kart */
.blog-hero-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bc-rehberler-bg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 460px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.blog-hero-featured--rehberler      { background: var(--bc-rehberler-bg); }
.blog-hero-featured--entegrasyonlar { background: var(--bc-entegrasyonlar-bg); }
.blog-hero-featured--performans     { background: var(--bc-performans-bg); }
.blog-hero-featured--pazarlama      { background: var(--bc-pazarlama-bg); }
.blog-hero-featured--trendler       { background: var(--bc-trendler-bg); }
.blog-hero-featured:hover { transform: translateY(-3px); }

/* Kategori marker — köşede renkli kare + ayraç + isim */
.blog-hero-featured__cat,
.blog-card-v2__cat {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: stretch;
    font-family: 'Poppins', sans-serif;
}
.blog-hero-featured__cat-mark,
.blog-card-v2__cat-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bc-rehberler-fg);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.blog-hero-featured--rehberler      .blog-hero-featured__cat-mark { background: var(--bc-rehberler-fg); }
.blog-hero-featured--entegrasyonlar .blog-hero-featured__cat-mark { background: var(--bc-entegrasyonlar-fg); }
.blog-hero-featured--performans     .blog-hero-featured__cat-mark { background: var(--bc-performans-fg); }
.blog-hero-featured--pazarlama      .blog-hero-featured__cat-mark { background: var(--bc-pazarlama-fg); }
.blog-hero-featured--trendler       .blog-hero-featured__cat-mark { background: var(--bc-trendler-fg); }

.blog-hero-featured__cat-name,
.blog-card-v2__cat-name {
    display: inline-flex;
    align-items: center;
    padding: 0 12px 0 14px;
    background: rgba(255, 255, 255, .88);
    color: #0B1220;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.blog-hero-featured__cat-name::before,
.blog-card-v2__cat-name::before {
    content: '—';
    margin-right: 8px;
    color: #94a3b8;
    font-weight: 400;
}

/* Görsel alanı — kartın tamamını kaplar.
   Portrait/landscape görselden bağımsız, kartın kendi yüksekliği belirleyici
   olsun diye img'yi absolute konumladık ve media'ya min-height:0 verdik
   (flex item natural content height'a takılmasın). */
.blog-hero-featured__media {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.blog-hero-featured__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.blog-hero-featured:hover .blog-hero-featured__media img { transform: scale(1.04); }

/* İçerik kutusu — görselin altına gradient bindirme ile oturur */
.blog-hero-featured__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 36px 34px 32px;
    background: linear-gradient(to top,
        rgba(11, 18, 32, .92) 0%,
        rgba(11, 18, 32, .72) 50%,
        rgba(11, 18, 32, 0) 100%);
    color: #fff;
}
.blog-hero-featured__title {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
    color: #fff;
    letter-spacing: -.01em;
}
.blog-hero-featured__meta {
    margin: 0 0 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.blog-hero-featured__meta strong { color: #fff; font-weight: 600; }
.blog-hero-featured__desc {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    max-width: 540px;
}
.blog-hero-featured__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #5A31F4;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background-color .25s ease;
}
.blog-hero-featured:hover .blog-hero-featured__btn { background: #4926d0; }
.blog-hero-featured__btn svg {
    width: 14px;
    height: 14px;
    transition: transform .25s ease;
}
.blog-hero-featured:hover .blog-hero-featured__btn svg { transform: translateX(3px); }

/* Sağ — sıralı trending listesi */
.blog-hero-trending {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #F6F2EA;
    display: flex;
    flex-direction: column;
}
.blog-hero-trending__item { flex: 1; }
.blog-hero-trending__item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: background-color .2s ease;
}
.blog-hero-trending__item a:hover { background: rgba(255, 255, 255, .35); }
.blog-hero-trending__item + .blog-hero-trending__item a {
    border-top: 1px solid rgba(11, 18, 32, .07);
}
.blog-hero-trending__num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #0B1220;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}
.blog-hero-trending__body { flex: 1; min-width: 0; }
.blog-hero-trending__cat {
    display: block;
    margin: 0 0 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b7280;
}
.blog-hero-trending__cat::before { content: '— '; }
.blog-hero-trending__cat--rehberler      { color: var(--bc-rehberler-fg); }
.blog-hero-trending__cat--entegrasyonlar { color: var(--bc-entegrasyonlar-fg); }
.blog-hero-trending__cat--performans     { color: var(--bc-performans-fg); }
.blog-hero-trending__cat--pazarlama      { color: var(--bc-pazarlama-fg); }
.blog-hero-trending__cat--trendler       { color: var(--bc-trendler-fg); }
.blog-hero-trending__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #0B1220;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-hero-trending__thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: #fff;
}
.blog-hero-trending__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Main wrap (grid + sidebar) ──────────────────────────────────────── */
.blog-main-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 36px;
    margin: 0 0 80px;
    align-items: start;
}

/* Posts grid (2 sütun, eski 3-col grid'in yerine) */
.blog-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
}
.blog-card-v2 a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease;
}
.blog-card-v2 a:hover { transform: translateY(-3px); }

.blog-card-v2__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0 0 18px;
    background: var(--bc-rehberler-bg);
}
.blog-card-v2--rehberler      .blog-card-v2__media,
.blog-card-v2--rehberler      .blog-card-v2__cat-mark { background: var(--bc-rehberler-bg); }
.blog-card-v2--rehberler      .blog-card-v2__cat-mark { background: var(--bc-rehberler-fg); }
.blog-card-v2--entegrasyonlar .blog-card-v2__media    { background: var(--bc-entegrasyonlar-bg); }
.blog-card-v2--entegrasyonlar .blog-card-v2__cat-mark { background: var(--bc-entegrasyonlar-fg); }
.blog-card-v2--performans     .blog-card-v2__media    { background: var(--bc-performans-bg); }
.blog-card-v2--performans     .blog-card-v2__cat-mark { background: var(--bc-performans-fg); }
.blog-card-v2--pazarlama      .blog-card-v2__media    { background: var(--bc-pazarlama-bg); }
.blog-card-v2--pazarlama      .blog-card-v2__cat-mark { background: var(--bc-pazarlama-fg); }
.blog-card-v2--trendler       .blog-card-v2__media    { background: var(--bc-trendler-bg); }
.blog-card-v2--trendler       .blog-card-v2__cat-mark { background: var(--bc-trendler-fg); }
.blog-card-v2__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.blog-card-v2 a:hover .blog-card-v2__media img { transform: scale(1.05); }

.blog-card-v2__body { padding: 0 2px; }
.blog-card-v2__title {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: #0B1220;
    letter-spacing: -.005em;
}
.blog-card-v2__meta {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.blog-card-v2__meta strong { color: #0B1220; font-weight: 600; }
.blog-card-v2__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blog-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 96px;
}
.blog-side__card {
    background: #fff;
    border: 1px solid #E5E7EB;
    padding: 26px 24px;
}
.blog-side__heading {
    margin: 0 0 18px;
    padding-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0B1220;
    border-bottom: 2px solid #0B1220;
    display: inline-block;
}

/* Author / brand card */
.blog-side__author { padding-top: 26px; }
.blog-side__author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5A31F4 0%, #027BC4 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    text-transform: lowercase;
}
.blog-side__author-title {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #0B1220;
}
.blog-side__author-title strong { color: #5A31F4; font-weight: 700; }
.blog-side__author-desc {
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6b7280;
}
.blog-side__author-follow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}
.blog-side__author-follow-label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0B1220;
}
.blog-side__author-follow-icons {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.blog-side__author-follow-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #6b7280;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.blog-side__author-follow-icons a:hover { color: #5A31F4; transform: translateY(-2px); }
.blog-side__author-follow-icons svg { width: 16px; height: 16px; }

/* Social stats grid (3×2) */
.blog-side__social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #E5E7EB;
    margin: 0 -2px;
}
.blog-side__social-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 6px;
    background: #fff;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.blog-side__social-tile:hover { background: #FAFBFD; transform: translateY(-1px); }
.blog-side__social-tile svg { width: 22px; height: 22px; }
.blog-side__social-tile-num {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0B1220;
    line-height: 1;
}
.blog-side__social-tile-label {
    font-size: 10px;
    color: #6b7280;
    line-height: 1;
}
.blog-side__social-tile--facebook  svg { color: #1877F2; }
.blog-side__social-tile--x         svg { color: #0B1220; }
.blog-side__social-tile--instagram svg { color: #E1306C; }
.blog-side__social-tile--linkedin  svg { color: #0A66C2; }
.blog-side__social-tile--youtube   svg { color: #FF0000; }
.blog-side__social-tile--tiktok    svg { color: #0B1220; }

/* Trending this week */
.blog-side__trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-side__trending-list li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #E5E7EB;
}
.blog-side__trending-list a {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
}
.blog-side__trending-list a:hover .blog-side__trending-title { color: #5A31F4; }
.blog-side__trending-text { flex: 1; min-width: 0; }
.blog-side__trending-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #0B1220;
    transition: color .2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-side__trending-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: #F6F2EA;
}
.blog-side__trending-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .blog-hero-block { grid-template-columns: 1fr; }
    .blog-hero-featured { min-height: 420px; }
    .blog-main-wrap { grid-template-columns: 1fr; gap: 48px; }
    .blog-side { position: static; }
}
@media (max-width: 720px) {
    .blog-hero-block { margin-bottom: 40px; gap: 14px; }
    .blog-hero-featured { min-height: 360px; }
    .blog-hero-featured__body { padding: 28px 22px 24px; }
    .blog-hero-featured__title { font-size: 22px; }
    .blog-hero-featured__desc { font-size: 13px; margin-bottom: 18px; }
    .blog-hero-featured__btn { padding: 11px 18px; font-size: 10.5px; }

    .blog-hero-trending__item a { padding: 14px 16px; gap: 12px; }
    .blog-hero-trending__thumb { width: 52px; height: 52px; }
    .blog-hero-trending__title { font-size: 12.5px; }

    .blog-main-grid { grid-template-columns: 1fr; gap: 28px; }
    .blog-card-v2__media { aspect-ratio: 16 / 10; margin-bottom: 14px; }
    .blog-card-v2__title { font-size: 18px; }

    .blog-side__card { padding: 22px 20px; }
    .blog-side__social-tile { padding: 14px 4px; }
    .blog-side__social-tile-num { font-size: 13px; }
}


/* ═════════════════════════════════════════════════════════════════════
   BLOG POST V2 — Magazine layout (single post /blog/<slug>/)
   Yapı: breadcrumb → 2-col (main + sticky sidebar)
   Main: header + hero görsel + (sticky share rail | article) + share bottom
         + author footer kartı + e-bülten + prev/next nav
   Font: Poppins. Renkler: icanad brand + kategori CSS değişkenleri.
   Sidebar: blog/index.php'deki `.blog-side*` blokları yeniden kullanılır.
   ════════════════════════════════════════════════════════════════════ */

.blog-post-v2 {
    background: #ffffff;
    /* Üst padding = topbar (47px) + site-header (78px) = 125px.
       İçerik fixed alanın hemen altından başlasın. */
    padding: 125px 0 100px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

    /* Kategori paleti — blog list ile aynı tonlar */
    --bc-rehberler-bg:      #EEF1FF;
    --bc-rehberler-fg:      #5A31F4;
    --bc-entegrasyonlar-bg: #E4F0FA;
    --bc-entegrasyonlar-fg: #027BC4;
    --bc-performans-bg:     #E4F7EE;
    --bc-performans-fg:     #10B981;
    --bc-pazarlama-bg:      #FEF1DD;
    --bc-pazarlama-fg:      #F59E0B;
    --bc-trendler-bg:       #FDE5EF;
    --bc-trendler-fg:       #EC4899;
}
@media (max-width: 1024px) { .blog-post-v2 { padding: 115px 0 72px; } }
@media (max-width: 720px)  { .blog-post-v2 { padding: 105px 0 56px; } }

/* Breadcrumb header'ın hemen altında dursun (görsel boşluk = 0).
   İçerik bütünlüğü için breadcrumb'ın kendi alt margin'i (32px) yeterli. */
.blog-post-v2__crumbs { margin-top: 0; }

.blog-post-v2__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Breadcrumb (başlık üstünde) ─────────────────────────────────────── */
.blog-post-v2__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 12px;
    color: #94a3b8;
    letter-spacing: .02em;
}
.blog-post-v2__crumbs a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s;
}
.blog-post-v2__crumbs a:hover { color: #5A31F4; }
.blog-post-v2__crumbs > span[aria-hidden] { color: #cbd5e1; }
.blog-post-v2__crumbs-current {
    color: #0B1220;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

/* ── 2-col layout: main + sidebar ────────────────────────────────────── */
.blog-post-v2__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}
@media (max-width: 1024px) {
    .blog-post-v2__layout { grid-template-columns: 1fr; gap: 48px; }
}

.blog-post-v2__main { min-width: 0; }

.blog-post-v2__sidebar {
    position: sticky;
    top: 96px;
}
@media (max-width: 1024px) {
    .blog-post-v2__sidebar { position: static; }
}

/* ── Header (kategori + h1 + meta) ───────────────────────────────────── */
.blog-post-v2__head { margin: 0 0 32px; }

.blog-post-v2__cat {
    display: inline-flex;
    align-items: stretch;
    margin: 0 0 24px;
    font-family: 'Poppins', sans-serif;
}
.blog-post-v2__cat-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--bc-rehberler-fg);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.blog-post-v2__cat-name {
    display: inline-flex;
    align-items: center;
    padding: 0 16px 0 14px;
    background: #f8fafc;
    color: #0B1220;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.blog-post-v2__cat-name::before {
    content: '—';
    margin-right: 10px;
    color: #94a3b8;
    font-weight: 400;
}
.blog-post-v2__cat--rehberler      .blog-post-v2__cat-mark { background: var(--bc-rehberler-fg); }
.blog-post-v2__cat--entegrasyonlar .blog-post-v2__cat-mark { background: var(--bc-entegrasyonlar-fg); }
.blog-post-v2__cat--performans     .blog-post-v2__cat-mark { background: var(--bc-performans-fg); }
.blog-post-v2__cat--pazarlama      .blog-post-v2__cat-mark { background: var(--bc-pazarlama-fg); }
.blog-post-v2__cat--trendler       .blog-post-v2__cat-mark { background: var(--bc-trendler-fg); }

.blog-post-v2__title {
    margin: 0 0 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #0B1220;
    letter-spacing: -.015em;
    max-width: 720px;
}
@media (max-width: 1024px) { .blog-post-v2__title { font-size: 32px; } }
@media (max-width: 720px)  { .blog-post-v2__title { font-size: 26px; } }

.blog-post-v2__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Head'in (başlık + breadcrumb) altında, article'a geçişte nefes */
    margin: 0 0 40px;
    padding: 14px 0 0;
    border-top: 1px solid #E5E7EB;
    font-size: 13px;
    color: #6b7280;
}
.blog-post-v2__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.blog-post-v2__meta-item strong { color: #0B1220; font-weight: 600; }
.blog-post-v2__meta-sep { color: #cbd5e1; }
.blog-post-v2__meta-item svg { flex-shrink: 0; color: #94a3b8; }

/* ── Hero görsel (en üst) ────────────────────────────────────────────── */
.blog-post-v2__hero {
    /* Kapak fotoğrafı en üstte; H1 başlığına geçişte rahat bir boşluk. */
    margin: 0 0 32px;
    background: var(--bc-rehberler-bg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.blog-post-v2__hero--rehberler      { background: var(--bc-rehberler-bg); }
.blog-post-v2__hero--entegrasyonlar { background: var(--bc-entegrasyonlar-bg); }
.blog-post-v2__hero--performans     { background: var(--bc-performans-bg); }
.blog-post-v2__hero--pazarlama      { background: var(--bc-pazarlama-bg); }
.blog-post-v2__hero--trendler       { background: var(--bc-trendler-bg); }
.blog-post-v2__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Article + sticky share rail (sol) ───────────────────────────────── */
.blog-post-v2__article-wrap {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 36px;
    margin: 0 0 48px;
}
@media (max-width: 720px) {
    .blog-post-v2__article-wrap { grid-template-columns: 1fr; gap: 32px; }
}

.blog-post-v2__share-rail {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
@media (max-width: 720px) {
    .blog-post-v2__share-rail {
        position: static;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 16px;
        border-top: 1px solid #E5E7EB;
        border-bottom: 1px solid #E5E7EB;
    }
}
.blog-post-v2__share-rail-count {
    font-size: 18px;
    font-weight: 700;
    color: #0B1220;
    line-height: 1;
}
.blog-post-v2__share-rail-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 8px;
}
@media (max-width: 720px) {
    .blog-post-v2__share-rail-count,
    .blog-post-v2__share-rail-label { display: inline-block; }
    .blog-post-v2__share-rail-label { margin: 0 12px 0 4px; }
}

.blog-post-v2__share-rail-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    padding: 8px 4px;
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog-post-v2__share-rail-btn svg { width: 16px; height: 16px; }
.blog-post-v2__share-rail-num {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
.blog-post-v2__share-rail-btn:hover { color: #fff; }
.blog-post-v2__share-rail-btn--facebook:hover { background: #1877F2; border-color: #1877F2; }
.blog-post-v2__share-rail-btn--twitter:hover  { background: #0B1220; border-color: #0B1220; }
.blog-post-v2__share-rail-btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.blog-post-v2__share-rail-btn--whatsapp:hover { background: #25D366; border-color: #25D366; }
.blog-post-v2__share-rail-btn--copy:hover     { background: #5A31F4; border-color: #5A31F4; }
.blog-post-v2__share-rail-btn--copy.is-copied {
    background: #10B981;
    border-color: #10B981;
    color: #fff;
}

/* ── Article body typography ─────────────────────────────────────────── */
.blog-post-v2__article {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #1f2937;
}
.blog-post-v2__article p { margin: 0 0 20px; }
.blog-post-v2__article a {
    color: #5A31F4;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}
.blog-post-v2__article a:hover { color: #4926d0; }
.blog-post-v2__article strong { color: #0B1220; font-weight: 600; }

/* Drop cap — ilk paragraph (intro veya plain) */
.blog-post-v2__article > p:first-of-type::first-letter,
.blog-post-v2__article > .blog-post__intro::first-letter {
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 70px;
    font-weight: 700;
    line-height: .9;
    padding: 6px 14px 0 0;
    margin: 4px 4px 0 0;
    color: #0B1220;
}
.blog-post-v2__article > .blog-post__intro {
    font-size: 18px;
    line-height: 1.65;
    color: #0B1220;
    font-weight: 400;
    margin: 0 0 28px;
}

/* Başlıklar */
.blog-post-v2__article h2,
.blog-post-v2__article h3 {
    font-family: 'Poppins', sans-serif;
    color: #0B1220;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.blog-post-v2__article h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 14px;
}
.blog-post-v2__article h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 32px 0 12px;
}

/* Listeler */
.blog-post-v2__article ul,
.blog-post-v2__article ol {
    margin: 0 0 24px;
    padding-left: 0;
    list-style: none;
}
.blog-post-v2__article ul li,
.blog-post-v2__article ol li {
    position: relative;
    padding-left: 24px;
    margin: 0 0 10px;
}
.blog-post-v2__article ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background: #5A31F4;
    border-radius: 50%;
}
.blog-post-v2__article ol {
    counter-reset: blog-ol;
}
.blog-post-v2__article ol li {
    counter-increment: blog-ol;
}
.blog-post-v2__article ol li::before {
    content: counter(blog-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #5A31F4;
}

/* Blockquote — gri arkaplan kutu, sol mor şerit */
.blog-post-v2__article blockquote {
    margin: 32px 0;
    padding: 28px 32px;
    background: #F8FAFC;
    border-left: 4px solid #5A31F4;
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.55;
    color: #0B1220;
    font-style: normal;
}
.blog-post-v2__article blockquote p { margin: 0; }
.blog-post-v2__article blockquote cite {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
}

/* Inline code */
.blog-post-v2__article code {
    padding: 2px 6px;
    background: #F1F5F9;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13.5px;
    color: #5A31F4;
}

/* Görseller, embed'ler */
.blog-post-v2__article img,
.blog-post-v2__article iframe,
.blog-post-v2__article video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24px 0;
}

/* ── Alt share bar ───────────────────────────────────────────────────── */
.blog-post-v2__share-bottom {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 56px;
    padding: 18px 24px;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}
.blog-post-v2__share-bottom-label {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #94a3b8;
    padding-right: 24px;
    border-right: 1px solid #E5E7EB;
    margin-right: 24px;
}
.blog-post-v2__share-bottom-label strong {
    color: #0B1220;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    margin-right: 6px;
}
.blog-post-v2__share-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-right: 8px;
    background: transparent;
    color: #475569;
    border: 1px solid #E5E7EB;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s, color .2s, border-color .2s;
}
.blog-post-v2__share-bottom-btn svg { width: 14px; height: 14px; }
.blog-post-v2__share-bottom-num {
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid currentColor;
    opacity: .7;
}
.blog-post-v2__share-bottom-btn--facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.blog-post-v2__share-bottom-btn--twitter:hover  { background: #0B1220; color: #fff; border-color: #0B1220; }
.blog-post-v2__share-bottom-btn--linkedin:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
@media (max-width: 720px) {
    .blog-post-v2__share-bottom { flex-wrap: wrap; padding: 16px; gap: 10px 0; }
    .blog-post-v2__share-bottom-label { padding-right: 0; border-right: none; margin-right: 0; flex: 1 0 100%; }
    .blog-post-v2__share-bottom-btn { padding: 8px 12px; font-size: 11px; }
    .blog-post-v2__share-bottom-num { display: none; }
}

/* ── Author footer kartı ─────────────────────────────────────────────── */
.blog-post-v2__author-foot {
    margin: 0 0 56px;
    padding: 40px 32px;
    background: #F8FAFC;
    text-align: center;
}
.blog-post-v2__author-foot-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5A31F4 0%, #027BC4 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 18px;
}
.blog-post-v2__author-foot-name {
    margin: 0 0 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0B1220;
}
.blog-post-v2__author-foot-role {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5A31F4;
}
.blog-post-v2__author-foot-bio {
    margin: 0 auto 22px;
    max-width: 540px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}
.blog-post-v2__author-foot-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 22px;
}
.blog-post-v2__author-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s, transform .2s;
}
.blog-post-v2__author-foot-social a:hover { color: #5A31F4; transform: translateY(-2px); }
.blog-post-v2__author-foot-social svg { width: 18px; height: 18px; }
.blog-post-v2__author-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: #0B1220;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s;
}
.blog-post-v2__author-foot-cta:hover { background: #5A31F4; }

/* ── E-bülten (kompakt) ──────────────────────────────────────────────── */
.blog-post-v2__newsletter {
    margin: 0 0 56px;
    padding: 36px 32px;
    background: linear-gradient(135deg, #5A31F4 0%, #4926d0 100%);
    color: #fff;
    text-align: center;
}
.blog-post-v2__newsletter-title {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.blog-post-v2__newsletter-lead {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.blog-post-v2__newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto 12px;
    padding: 6px;
    background: rgba(255, 255, 255, .12);
}
.blog-post-v2__newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    background: #fff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    color: #0B1220;
}
.blog-post-v2__newsletter-form input::placeholder { color: #94a3b8; }
.blog-post-v2__newsletter-form input:focus { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: -2px; }
.blog-post-v2__newsletter-form button {
    padding: 11px 22px;
    background: #0B1220;
    color: #fff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s;
}
.blog-post-v2__newsletter-form button:hover { background: #000; }
.blog-post-v2__newsletter-tos {
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
}
@media (max-width: 720px) {
    .blog-post-v2__newsletter-form { flex-direction: column; padding: 6px; }
    .blog-post-v2__newsletter-form button { padding: 12px; }
}

/* ── Prev / Next nav ─────────────────────────────────────────────────── */
.blog-post-v2__pagenav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.blog-post-v2__pagenav-item {
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #E5E7EB;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog-post-v2__pagenav-item:hover { border-color: #5A31F4; transform: translateY(-2px); }
.blog-post-v2__pagenav-item--next { text-align: right; align-items: flex-end; }

.blog-post-v2__pagenav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5A31F4;
}
.blog-post-v2__pagenav-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #0B1220;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 720px) {
    .blog-post-v2__pagenav { grid-template-columns: 1fr; }
    .blog-post-v2__pagenav-item--next { text-align: left; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
   PZ-THEME — "Kodsuz, sınırsız tasarım esnekliği" bölümü
   ════════════════════════════════════════════════════════════════════════
   Shopify "Limitless design flexibility" referansı.  2 kart yan yana
   (desktop) / üst üste (mobile). Sol kart: drag-drop storefront editor
   mockup'ı.  Sağ kart: tema stil/swatch önizleme. Açık arka plan, beyaz
   kartlar, yumuşak border + shadow. */

.pz-theme {
    position: relative;
    padding: 96px 0 88px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}
.pz-theme__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}

/* Üst başlık — orta hizalı, sade */
.pz-theme__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}
.pz-theme__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pz-theme__title {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0a1224;
}
.pz-theme__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

/* Kart grid'i — 2 kolon desktop */
.pz-theme__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.pz-theme__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 18px 40px -28px rgba(15, 23, 42, 0.18);
}

/* Stage: mockup bölgesi, oran sabit */
.pz-theme__stage {
    position: relative;
    height: 360px;
    background: linear-gradient(180deg, #fbf5eb 0%, #f3ead8 100%);
    overflow: hidden;
    isolation: isolate;
}
.pz-theme__card--style .pz-theme__stage {
    background: linear-gradient(180deg, #fef0e8 0%, #fad9c5 100%);
}

/* ── Browser mockup (her iki kart için ortak) ───────────────────────── */
.pz-theme__browser {
    position: absolute;
    left: 50%;
    top: 38px;
    transform: translateX(-50%);
    width: 78%;
    max-width: 480px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.06),
        0 24px 40px -22px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.pz-theme__browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f1ece2;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.pz-theme__browser-dots {
    display: inline-flex;
    gap: 5px;
}
.pz-theme__browser-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d4cdbe;
}
.pz-theme__browser-dots i:nth-child(1) { background: #f87171; }
.pz-theme__browser-dots i:nth-child(2) { background: #fbbf24; }
.pz-theme__browser-dots i:nth-child(3) { background: #4ade80; }
.pz-theme__browser-mark {
    margin-left: auto;
    color: #94a3b8;
    display: inline-flex;
}

/* Preview content (browser içi) */
.pz-theme__preview {
    padding: 10px 12px 14px;
}
.pz-theme__preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 10px;
}
.pz-theme__preview-logo {
    font-size: 13px;
    font-weight: 700;
    color: #0a1224;
    letter-spacing: -0.01em;
}
.pz-theme__preview-logo--serif {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}
.pz-theme__preview-links {
    display: inline-flex;
    gap: 10px;
}
.pz-theme__preview-links span {
    font-size: 8.5px;
    color: #64748b;
    font-weight: 500;
}
.pz-theme__preview-iconset {
    display: inline-flex;
    gap: 6px;
}
.pz-theme__preview-iconset i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

/* Hero band içinde */
.pz-theme__preview-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    height: 110px;
    padding: 14px 18px;
    border-radius: 8px;
    overflow: hidden;
}
.pz-theme__preview-hero--pink {
    background:
        radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
        linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
    color: #831843;
}
.pz-theme__preview-hero--peach {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
        linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #7c2d12;
}
.pz-theme__preview-hero-text {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.pz-theme__preview-hero-text-serif {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #7c2d12;
}
.pz-theme__preview-hero-btn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pz-theme__preview-hero-btn--ghost {
    background: transparent;
    color: #7c2d12;
    border: 1px solid rgba(124, 45, 18, 0.6);
}

/* Ürün grid'i (3 thumb) */
.pz-theme__preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.pz-theme__preview-thumb {
    aspect-ratio: 1;
    border-radius: 5px;
    background: #e2dccd;
}
.pz-theme__preview-thumb--1 { background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%); }
.pz-theme__preview-thumb--2 { background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%); }
.pz-theme__preview-thumb--3 { background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%); }
.pz-theme__preview-thumb--a { background: linear-gradient(135deg, #f5d4b0 0%, #c8956c 100%); }
.pz-theme__preview-thumb--b { background: linear-gradient(135deg, #fce7c8 0%, #d4a373 100%); }
.pz-theme__preview-thumb--c { background: linear-gradient(135deg, #faecd9 0%, #d0a673 100%); }

/* ── KART 1 ÖZGÜ: Drag-drop blok paneli (sol üst floating) ─────────── */
.pz-theme__dnd {
    position: absolute;
    left: 16px;
    top: 56px;
    z-index: 3;
    width: 180px;
    padding: 8px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 14px 28px -10px rgba(15, 23, 42, 0.24),
        0 4px 10px -4px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pz-theme__dnd-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    color: #0f172a;
    line-height: 1.2;
}
.pz-theme__dnd-item strong {
    font-weight: 600;
    font-size: 10.5px;
}
.pz-theme__dnd-caret {
    display: inline-flex;
    color: #475569;
}
.pz-theme__dnd-spacer {
    display: inline-block;
    width: 10px;
    flex-shrink: 0;
}
.pz-theme__dnd-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
}
.pz-theme__dnd-icon--img { background: #e0f2fe; color: #0369a1; }
.pz-theme__dnd-icon--text { background: #f1f5f9; color: #1e293b; }
.pz-theme__dnd-icon--add { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }
.pz-theme__dnd-item--child {
    color: #475569;
}
.pz-theme__dnd-item--add {
    color: #94a3b8;
}
.pz-theme__dnd-item--dragging {
    position: relative;
    background: #ffffff;
    border: 1.5px solid #3b82f6;
    box-shadow: 0 6px 14px -6px rgba(59, 130, 246, 0.45);
    color: #0f172a;
    font-weight: 600;
}
.pz-theme__dnd-handle {
    display: inline-flex;
    color: #94a3b8;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
}
.pz-theme__dnd-cursor {
    position: absolute;
    right: -10px;
    bottom: -10px;
    display: inline-flex;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25));
}

/* Sürüklenen "Düğme" bloğunun storefront'ta hayalet düşmesi */
.pz-theme__ghost {
    position: absolute;
    right: 32px;
    bottom: 56px;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px dashed #3b82f6;
    box-shadow: 0 10px 24px -10px rgba(59, 130, 246, 0.4);
    color: #0f172a;
    font-size: 11px;
    font-weight: 600;
}
.pz-theme__ghost-sub {
    font-size: 9px;
    font-weight: 500;
    color: #64748b;
    padding: 3px 8px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* "Taslak" rozeti (sol alt) */
.pz-theme__draft-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.4);
}

/* ── KART 2 ÖZGÜ: Aa font/renk swatch kolonu ─────────────────────────── */
.pz-theme__swatches {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pz-theme__swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 14px -6px rgba(15, 23, 42, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
}
.pz-theme__swatch span {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.pz-theme__swatch--cream { background: #faecd9; color: #7c2d12; }
.pz-theme__swatch--pink  { background: #fbcfe8; color: #831843; }
.pz-theme__swatch--teal  { background: #99f6e4; color: #134e4a; }
.pz-theme__swatch--dark  { background: #0f172a; color: #f5d4b0; }
.pz-theme__swatch.is-active {
    transform: scale(1.08);
    box-shadow:
        0 0 0 2.5px #ffffff,
        0 0 0 4.5px #0f172a,
        0 8px 18px -6px rgba(15, 23, 42, 0.35);
}

/* Card body — alt taraftaki açıklama metni */
.pz-theme__body {
    padding: 26px 28px 30px;
}
.pz-theme__card-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: #0a1224;
}
.pz-theme__card-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #475569;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pz-theme { padding: 72px 0 64px; }
    .pz-theme__head { margin-bottom: 40px; }
    .pz-theme__cards { grid-template-columns: 1fr; gap: 20px; }
    .pz-theme__stage { height: 320px; }
    .pz-theme__dnd { width: 168px; }
    .pz-theme__browser { width: 84%; }
}
@media (max-width: 640px) {
    .pz-theme { padding: 56px 0 52px; }
    .pz-theme__container { padding: 0 20px; }
    .pz-theme__stage { height: 290px; }
    .pz-theme__browser { top: 28px; width: 88%; }
    .pz-theme__dnd { width: 150px; left: 12px; top: 40px; padding: 6px; }
    .pz-theme__dnd-item { font-size: 9.5px; padding: 5px 6px; }
    .pz-theme__ghost { right: 16px; bottom: 36px; padding: 8px 14px; font-size: 10px; }
    .pz-theme__draft-badge { left: 12px; bottom: 12px; padding: 4px 10px; font-size: 9.5px; }
    .pz-theme__swatches { right: 12px; gap: 6px; }
    .pz-theme__swatch { width: 34px; height: 34px; }
    .pz-theme__swatch span { font-size: 13px; }
    .pz-theme__body { padding: 22px 22px 26px; }
    .pz-theme__card-title { font-size: 17px; }
    .pz-theme__card-desc { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PZ-AI — "Tek tıkla AI ürün açıklaması" en alttaki showcase bölümü
   ════════════════════════════════════════════════════════════════════════
   Referans görseldeki (mor smoky bg + neon-pembe prompt pill + sparkle'lar
   + arkadaki yarı şeffaf layout frame'leri + öndeki gerçek ürün düzenleme
   mockup'ı) yapı icanad'a uyarlandı.
   ────────────────────────────────────────────────────────────────────── */

.pz-ai {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Tek viewport'a sığsın + dikey ortalanmış içerik.
       Üst padding sticky topbar (~47px) + site-header (~78px) ≈ 125px'i telafi
       eder ki section başına scroll edildiğinde başlık header'ın altında kalır. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(140px, 17vh, 170px) 0 clamp(50px, 7vh, 80px);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ffffff;
    background:
        radial-gradient(ellipse at 20% 10%, #5b1a8f 0%, transparent 55%),
        radial-gradient(ellipse at 80% 0%, #c026d3 0%, transparent 45%),
        radial-gradient(ellipse at 100% 90%, #4c1d95 0%, transparent 50%),
        linear-gradient(180deg, #1a0a2e 0%, #14071f 50%, #0a0414 100%);
}
.pz-ai__container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

/* Smoke / cloud doku katmanı — birden fazla soft radial blob blend ile */
.pz-ai__smoke {
    position: absolute;
    inset: -10%;
    z-index: 1;
    background:
        radial-gradient(circle at 15% 30%, rgba(217, 70, 239, 0.35) 0%, transparent 30%),
        radial-gradient(circle at 75% 20%, rgba(168, 85, 247, 0.30) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(126, 34, 206, 0.28) 0%, transparent 40%),
        radial-gradient(circle at 90% 65%, rgba(232, 121, 249, 0.20) 0%, transparent 30%);
    filter: blur(40px);
    opacity: 0.85;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* İnce ızgara dokusu — reference image'daki "grid bg" hissi */
.pz-ai__grid-bg {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, transparent 85%);
    pointer-events: none;
}

/* Arka plan layout frame'leri — derinlik için yarı şeffaf wireframe'ler */
.pz-ai__frames {
    position: absolute;
    inset: 50% 0 0;
    z-index: 2;
    pointer-events: none;
    transform: translateY(-25%);
}
.pz-ai__frame {
    position: absolute;
    top: 0;
    width: 520px;
    height: 360px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}
.pz-ai__frame--left {
    left: -120px;
    transform: rotate(-2deg) translateY(20px);
    opacity: 0.55;
}
.pz-ai__frame--right {
    right: -120px;
    transform: rotate(2deg) translateY(40px);
    opacity: 0.55;
}
.pz-ai__frame-bar {
    width: 40%;
    height: 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
}
.pz-ai__frame-block {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}
.pz-ai__frame-block--lg { height: 130px; }
.pz-ai__frame-block--md { height: 60px; }

/* Sparkle/diamond grup — sağ üstte yüzen 3D dekor */
.pz-ai__sparkles {
    position: absolute;
    top: 80px;
    right: 6%;
    width: 200px;
    height: 200px;
    z-index: 4;
    pointer-events: none;
}
.pz-ai__sparkle {
    position: absolute;
    filter:
        drop-shadow(0 6px 18px rgba(217, 70, 239, 0.6))
        drop-shadow(0 0 30px rgba(168, 85, 247, 0.4));
    animation: pz-ai-float 6s ease-in-out infinite;
}
.pz-ai__sparkle--1 {
    width: 80px; height: 80px;
    top: 0; left: 20px;
    transform: rotate(-8deg);
    animation-delay: 0s;
}
.pz-ai__sparkle--2 {
    width: 56px; height: 56px;
    top: 70px; right: 0;
    transform: rotate(15deg);
    animation-delay: 1.4s;
}
.pz-ai__sparkle--3 {
    width: 44px; height: 44px;
    top: 130px; left: 50px;
    transform: rotate(-20deg);
    animation-delay: 2.8s;
}
@keyframes pz-ai-float {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
.pz-ai__sparkle--1 { --r: -8deg; }
.pz-ai__sparkle--2 { --r: 15deg; }
.pz-ai__sparkle--3 { --r: -20deg; }

/* Üst metin — viewport'a sığacak kompakt versiyon */
.pz-ai__head {
    margin-bottom: clamp(18px, 2.6vh, 30px);
}
.pz-ai__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(217, 70, 239, 0.15);
    border: 1px solid rgba(232, 121, 249, 0.35);
    color: #f0abfc;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.pz-ai__title {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(126, 34, 206, 0.4);
}
.pz-ai__lead {
    max-width: 620px;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(241, 232, 255, 0.78);
}

/* Glowing prompt pill — reference image'daki neon pembe çerçeveli input */
.pz-ai__prompt {
    margin: clamp(20px, 3vh, 36px) auto 0;
    max-width: 720px;
}
.pz-ai__prompt-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1a1230 0%, #14091f 100%);
    border: 1.5px solid rgba(236, 72, 153, 0.55);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.25),
        0 0 30px rgba(217, 70, 239, 0.55),
        0 0 70px rgba(168, 85, 247, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pz-ai__prompt-pill::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec4899, #a855f7, #ec4899);
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
    animation: pz-ai-glow 4s ease-in-out infinite;
}
@keyframes pz-ai-glow {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.75; }
}
.pz-ai__prompt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #f0abfc;
    flex: 0 0 auto;
}
.pz-ai__prompt-text {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 22px;
}
.pz-ai__prompt-typed {
    display: inline-block;
}
.pz-ai__prompt-typed:empty::before {
    /* "Empty state" görsel boşluğu — caret yapayalnız kalmasın */
    content: "";
}
.pz-ai__prompt-caret {
    display: inline-block;
    width: 2px;
    height: 18px;
    margin-left: 3px;
    background: #f0abfc;
    border-radius: 1px;
    transform: translateY(2px);
    animation: pz-ai-caret 0.9s steps(2) infinite;
    transition: opacity 0.2s ease;
}
.pz-ai__prompt-caret.is-hidden {
    opacity: 0;
    animation: none;
}
@keyframes pz-ai-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.pz-ai__prompt-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c026d3 0%, #7e22ce 100%);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pz-ai__prompt-send:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 10px 24px rgba(217, 70, 239, 0.65);
}

/* Stage + mockup card */
.pz-ai__stage {
    position: relative;
    margin: clamp(22px, 3vh, 40px) auto 0;
    max-width: 920px;
    z-index: 5;
}
.pz-ai__editor {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfafe 100%);
    border: 1px solid rgba(168, 85, 247, 0.15);
    box-shadow:
        0 50px 100px -30px rgba(76, 29, 149, 0.55),
        0 30px 60px -20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    text-align: left;
}
.pz-ai__editor-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #f6f4fb 0%, #efeaf7 100%);
    border-bottom: 1px solid rgba(76, 29, 149, 0.10);
}
.pz-ai__editor-dots {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}
.pz-ai__editor-dots i {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #d4d0e0;
}
.pz-ai__editor-dots i:nth-child(1) { background: #ff6058; }
.pz-ai__editor-dots i:nth-child(2) { background: #ffbd2e; }
.pz-ai__editor-dots i:nth-child(3) { background: #27c93f; }
.pz-ai__editor-tab {
    flex: 1 1 auto;
    font-size: 12.5px;
    font-weight: 500;
    color: #4c1d95;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pz-ai__editor-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.10);
    color: #6b21a8;
    font-size: 11px;
    font-weight: 600;
}

.pz-ai__editor-body {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 26px;
    padding: 22px 26px 24px;
    align-items: center;   /* sol görsel sağ açıklama kolonunun ortasında dursun */
}

/* Sol: yalnızca ürün görseli */
.pz-ai__product {
    display: block;
}
.pz-ai__product-img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #fce7f3;
    box-shadow: 0 6px 18px -8px rgba(168, 85, 247, 0.30);
}
.pz-ai__product-img picture,
.pz-ai__product-img img,
.pz-ai__product-img svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pz-ai__product-tag {
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3e8ff;
    color: #6b21a8;
    font-size: 11px;
    font-weight: 600;
}
.pz-ai__product-title {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}
.pz-ai__product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pz-ai__product-price {
    font-size: 18px;
    font-weight: 700;
    color: #4c1d95;
}
.pz-ai__product-stock {
    font-size: 12px;
    color: #16a34a;
    font-weight: 500;
}

/* Sağ: açıklama alanı */
.pz-ai__desc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.pz-ai__desc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pz-ai__desc-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pz-ai__desc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c026d3 0%, #7e22ce 100%);
    border: 0;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pz-ai__desc-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 70, 239, 0.55);
}

.pz-ai__desc-output {
    position: relative;
    padding: 14px 16px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #faf5ff 0%, #f5edff 100%);
    border: 1px solid rgba(168, 85, 247, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    /* Loading ile content aynı alanda overlap'lensin — layout zıplaması olmasın */
    display: grid;
    grid-template-columns: 1fr;
    min-height: 190px;
}
.pz-ai__loading,
.pz-ai__desc-content {
    grid-column: 1;
    grid-row: 1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Loading state — başlangıçta görünür, content reveal olunca gizlenir */
.pz-ai__loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 8px 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
}
.pz-ai__loading.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pz-ai__loading-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
    animation: pz-ai-spark-spin 2.4s linear infinite;
}
@keyframes pz-ai-spark-spin {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); }
}
.pz-ai__loading-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #6b21a8;
    letter-spacing: 0.01em;
}
.pz-ai__loading-dots {
    display: inline-flex;
    margin-left: 4px;
    gap: 3px;
}
.pz-ai__loading-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a855f7;
    animation: pz-ai-dot 1.2s ease-in-out infinite;
}
.pz-ai__loading-dots i:nth-child(2) { animation-delay: 0.18s; }
.pz-ai__loading-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pz-ai-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-3px); }
}

/* Skeleton satırları — shimmer akışıyla */
.pz-ai__loading-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.pz-ai__loading-skel span {
    display: block;
    height: 11px;
    border-radius: 6px;
    background:
        linear-gradient(
            90deg,
            rgba(168, 85, 247, 0.12) 0%,
            rgba(217, 70, 239, 0.28) 50%,
            rgba(168, 85, 247, 0.12) 100%);
    background-size: 200% 100%;
    animation: pz-ai-shimmer 1.6s linear infinite;
}
.pz-ai__loading-skel span:nth-child(1) { width: 95%; }
.pz-ai__loading-skel span:nth-child(2) { width: 78%; animation-delay: 0.15s; }
.pz-ai__loading-skel span:nth-child(3) { width: 62%; animation-delay: 0.30s; }
@keyframes pz-ai-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* Content state — başlangıçta gizli, is-revealed ile fade-in */
.pz-ai__desc-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
}
.pz-ai__desc-content.is-revealed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.pz-ai__desc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.pz-ai__desc-p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #1f2937;
}
.pz-ai__desc-p strong {
    color: #4c1d95;
    font-weight: 700;
}
.pz-ai__desc-bullets {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pz-ai__desc-bullets li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
}
.pz-ai__desc-bullets li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #a855f7);
}
.pz-ai__desc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(168, 85, 247, 0.25);
}
.pz-ai__desc-tags span {
    padding: 3px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(168, 85, 247, 0.20);
    color: #6b21a8;
    font-size: 11px;
    font-weight: 600;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pz-ai {
        /* Tablette tek viewport zorunluluğunu gevşet — içerik 2 kolon kalmadığında
           dikey yığılıp uzayabilir, scroll kabul edilebilir. */
        min-height: 0;
        padding: 64px 0 80px;
    }
    .pz-ai__title { font-size: 28px; }
    .pz-ai__sparkles { top: 40px; right: 4%; width: 140px; height: 140px; }
    .pz-ai__sparkle--1 { width: 60px; height: 60px; }
    .pz-ai__sparkle--2 { width: 44px; height: 44px; }
    .pz-ai__sparkle--3 { width: 36px; height: 36px; }
    .pz-ai__frame { width: 360px; height: 280px; }
    .pz-ai__frame--left  { left: -160px; }
    .pz-ai__frame--right { right: -160px; }
    .pz-ai__editor-body { grid-template-columns: 1fr; gap: 20px; padding: 18px 20px 20px; }
}
@media (max-width: 640px) {
    .pz-ai { padding: 56px 0 64px; }
    .pz-ai__container { padding: 0 20px; }
    .pz-ai__prompt-pill { padding: 8px 8px 8px 16px; }
    .pz-ai__prompt-text { font-size: 13px; }
    .pz-ai__prompt-send { width: 36px; height: 36px; }
    .pz-ai__editor-body { padding: 18px 16px 18px; }
    .pz-ai__editor-tab { font-size: 11px; }
    .pz-ai__editor-badge { display: none; }
    .pz-ai__frame { display: none; } /* mobilde derinlik frame'leri gizlensin */
    .pz-ai__sparkles { display: none; }
}

/* Kısa viewport (laptop 13" / 1366×768) — dikey daralt */
@media (min-width: 961px) and (max-height: 820px) {
    .pz-ai { padding: 135px 0 40px; }
    .pz-ai__head { margin-bottom: 12px; }
    .pz-ai__title { font-size: 24px; margin-bottom: 10px; }
    .pz-ai__lead { font-size: 13px; line-height: 1.5; }
    .pz-ai__prompt { margin-top: 16px; }
    .pz-ai__stage  { margin-top: 18px; }
    .pz-ai__editor-body { padding: 16px 22px 18px; gap: 20px; }
    .pz-ai__editor-bar { padding: 8px 18px; }
    .pz-ai__desc-output { min-height: 150px; padding: 11px 14px; }
    .pz-ai__desc-p { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
    .pz-ai__desc-bullets li { font-size: 11.5px; }
    .pz-ai__sparkles { top: 140px; width: 160px; height: 160px; }
}

/* =========================================================================
   /hakkimizda — OFFICE kartı (Wix tarzı split card)
   Sol kolon: ofis fotoğrafı (rounded)
   Sağ kolon: lime/yellow zemin, eyebrow + başlık + iletişim listesi + buton
   Tüm kart rounded, full-width section içinde boxed
   ========================================================================= */

.hakkimizda-office {
    position: relative;
    width: 100%;
    padding: 64px 0 0;
}

.hakkimizda-office__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}

.hakkimizda-office__card {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 20px;
    overflow: hidden;
    background: #d8f17a; /* lime fallback — image yüklenene dek panel rengi */
    box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.18);
}

.hakkimizda-office__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #1a1a2e;
}
.hakkimizda-office__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hakkimizda-office__panel {
    background: #d8f17a; /* yumuşak lime/yellow — referansa yakın */
    color: #0b1117;
    padding: 36px 28px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.hakkimizda-office__eyebrow {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(11, 17, 23, 0.7);
}

.hakkimizda-office__title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #0b1117;
    margin: 0;
}

.hakkimizda-office__contacts {
    list-style: none;
    margin: 4px 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #ffffff;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.hakkimizda-office__contact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(11, 17, 23, 0.85);
}

.hakkimizda-office__contact + .hakkimizda-office__contact {
    border-top: 1px solid #ffffff;
}

.hakkimizda-office__contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.hakkimizda-office__contact a:hover,
.hakkimizda-office__contact a:focus-visible {
    color: rgba(11, 17, 23, 1);
    outline: none;
}

.hakkimizda-office__contact-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b1117;
    margin-top: 1px;
}
.hakkimizda-office__contact-icon svg {
    width: 100%;
    height: 100%;
}

.hakkimizda-office__cta {
    align-self: flex-start;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: #0b1117;
    color: #ffffff;
    border-radius: 999px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.hakkimizda-office__cta:hover,
.hakkimizda-office__cta:focus-visible {
    background: #1a1f2b;
    transform: translateY(-1px);
    outline: none;
}

@media (min-width: 768px) {
    .hakkimizda-office { padding: 88px 0 0; }
    .hakkimizda-office__container { padding: 0 24px; }
    .hakkimizda-office__card {
        grid-template-columns: 1fr 1fr;
        border-radius: 24px;
    }
    .hakkimizda-office__contacts { border-radius: 24px; }
    .hakkimizda-office__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 420px;
    }
    .hakkimizda-office__panel {
        padding: 48px 44px 52px;
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .hakkimizda-office { padding: 112px 0 0; }
    .hakkimizda-office__container { padding: 0 40px; }
    .hakkimizda-office__card {
        border-radius: 28px;
    }
    .hakkimizda-office__contacts { border-radius: 28px; }
    .hakkimizda-office__media { min-height: 480px; }
    .hakkimizda-office__panel {
        padding: 64px 64px 64px 56px;
        gap: 26px;
    }
    .hakkimizda-office__title {
        max-width: 460px;
    }
    .hakkimizda-office__contact { font-size: 15px; }
}

/* =========================================================================
   /hakkimizda — POWER + METRICS bandı
   Tam genişlik koyu zemin, boxed içerik:
   - üst: 2 kolon accordion (sol "güç ve kontrol", sağ "esnek büyüme")
   - alt: 4 mor gradient metrik kartı
   ========================================================================= */

.hakkimizda-power {
    position: relative;
    width: 100%;
    background: #0a0a1f;
    color: #ffffff;
    padding: 72px 0 64px;
    overflow: hidden;
    margin-top: 64px;
}

.hakkimizda-power::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 18% 8%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(ellipse 50% 45% at 88% 95%, rgba(167, 139, 250, 0.12), transparent 65%);
    pointer-events: none;
}

.hakkimizda-power__container {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── üst: 2 kolon accordion ─────────────────────────────────────── */
.hakkimizda-power__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    padding-bottom: 56px;
}

.hakkimizda-power__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hakkimizda-power__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    margin-bottom: 28px;
}

.hakkimizda-power__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin: 0 0 40px;
}

/* tek tek accordion item — native <details> kullanır */
.hakkimizda-power__item {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.hakkimizda-power__item:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.hakkimizda-power__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    transition: color 0.2s ease;
}
.hakkimizda-power__item summary::-webkit-details-marker { display: none; }
.hakkimizda-power__item summary:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 4px;
    border-radius: 4px;
}

.hakkimizda-power__item-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

/* + / − göstergesi: pseudo-element ile çizilen iki çizgi */
.hakkimizda-power__chev {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.hakkimizda-power__chev::before,
.hakkimizda-power__chev::after {
    content: "";
    position: absolute;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.hakkimizda-power__chev::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1.5px;
    transform: translateY(-50%);
}
.hakkimizda-power__chev::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    transform: translateX(-50%);
}
.hakkimizda-power__item[open] .hakkimizda-power__chev::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.hakkimizda-power__item-body {
    padding: 0 0 22px;
    max-width: 480px;
}
.hakkimizda-power__item-body p {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
}

.hakkimizda-power__more {
    display: inline-block;
    color: #a78bfa;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.hakkimizda-power__more:hover,
.hakkimizda-power__more:focus-visible {
    border-bottom-color: #a78bfa;
    outline: none;
}

/* ── alt: 4 mor gradient metrik kartı ───────────────────────────── */
.hakkimizda-power__metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 32px;
}

.hakkimizda-power__metric {
    background: linear-gradient(180deg, #b3a4ff 0%, #6c54e8 100%);
    border-radius: 22px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 200px;
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 24px 48px -22px rgba(108, 84, 232, 0.55);
}

.hakkimizda-power__num {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: clamp(44px, 6vw, 68px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hakkimizda-power__metric-label {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
    letter-spacing: 0;
}

/* ── responsive ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .hakkimizda-power { padding: 104px 0 80px; margin-top: 80px; }
    .hakkimizda-power__container { padding: 0 40px; }
    .hakkimizda-power__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        padding-bottom: 72px;
    }
    /* iki kolon arasında dikey ince çizgi */
    .hakkimizda-power__grid::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 72px;
        left: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.10);
    }
    .hakkimizda-power__metrics {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding-top: 40px;
    }
    .hakkimizda-power__metric {
        padding: 30px 28px;
        min-height: 220px;
    }
}

@media (min-width: 1024px) {
    .hakkimizda-power { padding: 120px 0 96px; margin-top: 96px; }
    .hakkimizda-power__grid {
        gap: 80px;
        padding-bottom: 80px;
    }
    .hakkimizda-power__grid::before { bottom: 80px; }
    .hakkimizda-power__title { margin-bottom: 48px; }
    .hakkimizda-power__item summary { padding: 26px 0; }
    .hakkimizda-power__item-title { font-size: 17px; }
    .hakkimizda-power__item-body p { font-size: 15px; }
    .hakkimizda-power__metrics {
        gap: 24px;
        padding-top: 48px;
    }
    .hakkimizda-power__metric {
        padding: 34px 30px;
        min-height: 240px;
        border-radius: 24px;
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   /araclar/domain-sorgulama/ — Domain availability tool
   ═══════════════════════════════════════════════════════════════════════

   Layout: hero band (mor gradient) + sonuç kartı + 3 info kartı.
   Namespace: .ds-* (domain sorgulama)
   ─────────────────────────────────────────────────────────────────────── */

.ds-page {
    width: 100%;
    background: #ffffff;
    padding-top: calc(var(--header-h) + var(--topbar-h) + 32px);
    padding-bottom: 0;
}
@media (min-width: 768px) {
    .ds-page { padding-top: calc(var(--header-h) + var(--topbar-h) + 56px); }
}

/* ── HERO band ─────────────────────────────────────────────────────── */
.ds-hero {
    position: relative;
    padding: 56px 24px 80px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0) 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(56, 23, 130, 0.12) 0%, rgba(56, 23, 130, 0) 65%),
        linear-gradient(180deg, #fbfaff 0%, #f3eefe 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 768px) { .ds-hero { padding: 88px 32px 112px; } }

.ds-hero__container {
    max-width: 760px;
    margin: 0 auto;
}

.ds-hero__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ds-hero__title {
    margin: 0 0 14px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: clamp(28px, 4.4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: #0f172a;
}

.ds-hero__lead {
    margin: 0 auto 32px;
    max-width: 580px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #475569;
}
.ds-hero__lead strong { color: #0f172a; font-weight: 600; }

/* ── FORM ──────────────────────────────────────────────────────────── */
.ds-form { display: block; }

.ds-form__inputwrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 620px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 40px -20px rgba(124, 58, 237, 0.22);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ds-form__inputwrap:focus-within {
    border-color: rgba(124, 58, 237, 0.55);
    box-shadow: 0 18px 40px -16px rgba(124, 58, 237, 0.38);
}

.ds-form__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px 0 18px;
    color: #94a3b8;
}
.ds-form__icon svg { width: 20px; height: 20px; }

.ds-form__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 14px;
    border: 0;
    background: transparent;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    color: #0f172a;
    outline: none;
}
.ds-form__input::placeholder { color: #94a3b8; }

.ds-form__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    margin: 6px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ds-form__submit:hover { background: linear-gradient(135deg, #8b4dee 0%, #6b2eca 100%); transform: translateY(-1px); }
.ds-form__submit:active { transform: translateY(0); }
.ds-form__submit:disabled { opacity: 0.7; cursor: progress; }

.ds-form__submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    animation: ds-spin 0.9s linear infinite;
}
.ds-form.is-loading .ds-form__submit-spinner { display: inline-block; }
.ds-form.is-loading .ds-form__submit-text     { opacity: 0.85; }

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* TLD chip'leri */
.ds-form__tlds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.ds-form__tld {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ds-form__tld:hover {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.45);
    color: #5b21b6;
    transform: translateY(-1px);
}

/* ── SONUÇ ekranı — Namecheap tarzı row layout ──────────────────── */
.ds-result {
    max-width: 760px;
    margin: 28px auto 0;
    text-align: left;
}
.ds-result:empty { display: none; }

@keyframes ds-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Row: hem sorgulanan domain, hem her bir öneri tek satır ──── */
.ds-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    animation: ds-fadein 0.24s ease-out both;
}
.ds-row:hover { border-color: rgba(15, 23, 42, 0.14); }

/* <details> wrapper'ı için padding'i bar'a taşı */
details.ds-row {
    display: block;
    padding: 0;
}
.ds-row__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
}
.ds-row__bar::-webkit-details-marker { display: none; }
.ds-row__bar::marker { display: none; }

.ds-row__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(91, 33, 182, 0.18) 100%);
    color: #5b21b6;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.ds-row__icon--free {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.22) 100%);
    color: #047857;
}
.ds-row__icon svg { width: 14px; height: 14px; }

.ds-row__domain {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-row__domain b {
    color: #5b21b6;
    font-weight: 600;
}

.ds-row__pill {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ds-row__pill--free    { background: rgba(16, 185, 129, 0.14); color: #047857; }
.ds-row__pill--taken   { background: rgba(244, 63, 94, 0.10);  color: #be123c; }
.ds-row__pill--unknown { background: rgba(148, 163, 184, 0.18); color: #475569; }

/* Detay toggle (sorgulanan, alınmış domain için) */
.ds-row__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
details.ds-row[open] .ds-row__toggle {
    border-color: rgba(124, 58, 237, 0.32);
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.04);
}
.ds-row__bar:hover .ds-row__toggle {
    border-color: rgba(124, 58, 237, 0.32);
    color: #5b21b6;
}
.ds-row__chev {
    width: 12px;
    height: 12px;
    transition: transform 0.22s ease;
}
details.ds-row[open] .ds-row__chev { transform: rotate(180deg); }

/* Sorgula CTA (öneri satırı sağ tarafı) */
.ds-row__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ds-row__action:hover {
    border-color: rgba(124, 58, 237, 0.40);
    background: rgba(124, 58, 237, 0.05);
    color: #5b21b6;
}
.ds-row__action:hover svg { transform: translateX(2px); }
.ds-row__action svg { width: 13px; height: 13px; transition: transform 0.18s ease; }

/* Müsait sorgulanan domain için gradient pill CTA */
.ds-row__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: transform 0.18s ease, background 0.18s ease;
}
.ds-row__cta:hover {
    background: linear-gradient(135deg, #8b4dee 0%, #6b2eca 100%);
    color: #ffffff;
    transform: translateY(-1px);
}
.ds-row__cta svg { width: 13px; height: 13px; }

/* Detay panel — sorgulanan domain için WHOIS verisi */
.ds-row__detail {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-row__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 14px;
    margin: 14px 0 0;
}
.ds-row__meta dt {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}
.ds-row__meta dd {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    color: #0f172a;
    word-break: break-word;
}
.ds-row__meta dd ul {
    list-style: none; margin: 0; padding: 0;
}
.ds-row__meta dd ul li {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    font-size: 12px;
    color: #334155;
}

.ds-result__error {
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.20);
    border-radius: 12px;
    padding: 16px 18px;
    color: #be123c;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

/* Loading skeleton */
.ds-result__skel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
}
.ds-result__skel-line {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.12) 50%, rgba(15,23,42,0.05) 100%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.4s linear infinite;
}
.ds-result__skel-line:nth-child(1) { width: 42%; }
.ds-result__skel-line:nth-child(2) { width: 70%; height: 22px; }
.ds-result__skel-line:nth-child(3) { width: 55%; }
.ds-result__skel-line:nth-child(4) { width: 60%; }
@keyframes ds-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

/* ── SUGGESTION LIST — "Önerilen Sonuçlar" (Namecheap "Suggested Results" benzeri) */
.ds-suglist {
    margin-top: 24px;
    animation: ds-fadein 0.32s ease-out both;
    animation-delay: 0.06s;
}
.ds-suglist__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 10px;
}
.ds-suglist__titlewrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ds-suglist__title {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}
.ds-suglist__count {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
}
.ds-suglist__toggle {
    border: 0;
    background: transparent;
    padding: 0;
    color: #5b21b6;
    cursor: pointer;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
}
.ds-suglist__toggle:hover { text-decoration: underline; text-underline-offset: 2px; }

.ds-suglist__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-suglist__list.is-hidden { display: none; }

/* Source/elapsed meta — sonuç bloğunun en altında küçük metin */
.ds-result__source {
    margin: 16px 4px 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── INFO section (alt 3-kart şerit) ─────────────────────────────── */
.ds-info {
    padding: 72px 24px 96px;
    background: #ffffff;
}
@media (min-width: 768px) { .ds-info { padding: 96px 32px 120px; } }

.ds-info__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.ds-info__title {
    margin: 0 0 36px;
    text-align: center;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.ds-info__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ds-info__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.ds-info__card {
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ds-info__card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.30);
    box-shadow: 0 18px 40px -20px rgba(124, 58, 237, 0.18);
}

.ds-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(91, 33, 182, 0.16) 100%);
    color: #5b21b6;
}
.ds-info__icon svg { width: 22px; height: 22px; }

.ds-info__card-title {
    margin: 0 0 8px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.ds-info__card-text {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}
.ds-info__card-text code {
    padding: 1px 5px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    color: #0f172a;
}

/* Domain sorgulama sayfası footer'a düzgün otursun */
.ds-page + #footer,
.ds-page + .footer,
.ds-page + footer { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   ARAÇLAR — ortak page chrome (.tool-*)
   /araclar/{kdv-kar-hesabi, qr-kod, dns-sorgu, pos-komisyon}/
   ═══════════════════════════════════════════════════════════════════════ */

.tool-page {
    width: 100%;
    background: #ffffff;
    padding-top: calc(var(--header-h) + var(--topbar-h));
    padding-bottom: 0;
}

.tool-hero {
    position: relative;
    padding: 24px 24px 64px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0) 60%),
        linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
    overflow: hidden;
}
@media (min-width: 768px) {
    .tool-hero { padding: 32px 32px 96px; }
}

.tool-hero__container {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}
.tool-hero__container--wide { max-width: 1080px; }

.tool-hero__eyebrow {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.06);
    color: #6d28d9;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tool-hero__title {
    margin: 18px 0 14px;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.tool-hero__lead {
    margin: 0 auto 36px;
    max-width: 620px;
    font-size: clamp(15px, 1.5vw, 17px);
    color: #475569;
    line-height: 1.55;
}
.tool-hero__lead strong { color: #0f172a; font-weight: 600; }

.tool-info {
    padding: 64px 24px 88px;
    background: #ffffff;
}
@media (min-width: 768px) { .tool-info { padding: 88px 32px 112px; } }

.tool-info__container { max-width: var(--container-max); margin: 0 auto; }

.tool-info__title {
    margin: 0 0 36px;
    text-align: center;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.tool-info__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px) {
    .tool-info__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.tool-info__card {
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tool-info__card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 18px 36px -22px rgba(15, 23, 42, 0.18);
}

.tool-info__card-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.tool-info__card-text {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
}
.tool-info__card-text strong { color: #0f172a; font-weight: 600; }
.tool-info__card-text code {
    padding: 1px 5px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    color: #0f172a;
}

.tool-page + #footer,
.tool-page + .footer,
.tool-page + footer { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   KDV & KÂR MARJI HESAPLAYICI (.kdv-*)
   ═══════════════════════════════════════════════════════════════════════ */

.kdv-tabs {
    display: inline-flex;
    margin: 0 auto 24px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    gap: 2px;
}
.kdv-tabs__btn {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.kdv-tabs__btn.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.kdv-form {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.12);
    text-align: left;
}
@media (min-width: 640px) { .kdv-form { padding: 28px 32px; } }

.kdv-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (min-width: 640px) {
    .kdv-form__row { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.kdv-form__field { display: flex; flex-direction: column; gap: 6px; }
.kdv-form__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.01em;
}
.kdv-form__inputwrap {
    position: relative;
    display: flex;
    align-items: center;
}
.kdv-form__input {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    background: #fafafa;
    transition: border-color .2s ease, background .2s ease;
}
.kdv-form__input:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.kdv-form__suffix {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    pointer-events: none;
}

.kdv-form__vat {
    border: none;
    padding: 0;
    margin: 0;
}
.kdv-form__vat-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 6px;
}
@media (min-width: 640px) {
    .kdv-form__vat-options { grid-template-columns: repeat(4, 1fr); }
}

.kdv-vat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease;
}
.kdv-vat input[type="radio"] { display: none; }
.kdv-vat span {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.kdv-vat small {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
}
.kdv-vat.is-active {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}
.kdv-vat--custom { padding: 4px 8px; }
.kdv-vat--custom span { font-size: 12px; color: #64748b; margin-top: 2px; }
.kdv-vat__custom-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    background: #ffffff;
}
.kdv-vat__custom-input:focus { outline: none; border-color: #7c3aed; }

.kdv-result {
    margin-top: 24px;
    text-align: left;
}
.kdv-result__empty {
    text-align: center;
    padding: 18px;
    color: #94a3b8;
    font-size: 14px;
    background: rgba(15, 23, 42, 0.025);
    border: 1px dashed rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}

.kdv-result__card {
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 16px;
    padding: 24px 28px;
    animation: kdv-fadein .25s ease;
}
.kdv-result__card--loss {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: rgba(239, 68, 68, 0.3);
}
@keyframes kdv-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kdv-result__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.kdv-result__big-label {
    font-size: 13px;
    font-weight: 600;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kdv-result__card--loss .kdv-result__big-label { color: #dc2626; }
.kdv-result__big-value {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.kdv-result__meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.kdv-result__meta dt { color: #64748b; font-size: 13px; }
.kdv-result__meta dd {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}
.kdv-result__meta dt.is-strong,
.kdv-result__meta dd.is-strong {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
    font-size: 15px;
    color: #0f172a;
    font-weight: 700;
}

.kdv-result__warn {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #dc2626;
    border-radius: 4px;
    color: #991b1b;
    font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════════════
   QR KOD ÜRETİCİ (.qr-*)
   ═══════════════════════════════════════════════════════════════════════ */

.qr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
}
@media (min-width: 900px) {
    .qr-grid { grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
}

.qr-form {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.12);
}
@media (min-width: 640px) { .qr-form { padding: 28px; } }

.qr-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    border: none;
    padding: 0;
}
.qr-form__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.01em;
}
.qr-form__input,
.qr-form__textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    font: inherit;
    font-size: 14.5px;
    color: #0f172a;
    background: #fafafa;
    transition: border-color .2s ease, background .2s ease;
}
.qr-form__textarea { font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; font-size: 13px; resize: vertical; min-height: 76px; }
.qr-form__input:focus,
.qr-form__textarea:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.qr-form__type {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.qr-type {
    padding: 7px 13px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all .2s ease;
}
.qr-type:hover { border-color: rgba(124, 58, 237, 0.4); color: #6d28d9; }
.qr-type.is-active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.qr-form__grid2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 520px) { .qr-form__grid2 { grid-template-columns: 1fr 1fr; } }
.qr-form__field--full { grid-column: 1 / -1; }
.qr-form__field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.qr-form__field--checkbox span { font-size: 14px; color: #0f172a; }

.qr-form__details {
    margin-top: 18px;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}
.qr-form__details summary {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
}
.qr-form__details summary::after {
    content: '+';
    float: right;
    color: #94a3b8;
}
.qr-form__details[open] summary::after { content: '−'; }

.qr-form__settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (min-width: 520px) { .qr-form__settings { grid-template-columns: repeat(3, 1fr); } }

.qr-form__color {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569;
}
.qr-form__color input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 2px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}
.qr-form__color--select select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #0f172a;
}

.qr-preview {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.qr-preview__canvas {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.18);
}
.qr-preview__canvas svg { width: 100%; height: 100%; }
.qr-preview__placeholder {
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
.qr-preview__placeholder--error { color: #dc2626; }

.qr-preview__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 360px;
}
.qr-preview__btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all .2s ease;
}
.qr-preview__btn svg { width: 16px; height: 16px; }
.qr-preview__btn:hover:not(:disabled) {
    border-color: #7c3aed;
    color: #6d28d9;
}
.qr-preview__btn--primary {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}
.qr-preview__btn--primary:hover:not(:disabled) {
    background: #1e293b;
    color: #ffffff;
}
.qr-preview__btn:disabled { opacity: 0.4; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════
   DNS SORGU (.dns-*)
   ═══════════════════════════════════════════════════════════════════════ */

.dns-form {
    text-align: left;
    margin: 0 auto 24px;
    max-width: 640px;
}
.dns-form__inputwrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.18);
}
.dns-form__inputwrap:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 18px 40px -22px rgba(124, 58, 237, 0.25);
}

.dns-form__icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #94a3b8;
}
.dns-form__icon svg { width: 18px; height: 18px; }

.dns-form__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 4px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
}
.dns-form__input:focus { outline: none; }

.dns-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.dns-form__submit:hover:not(:disabled) { background: #1e293b; }
.dns-form__submit svg { width: 14px; height: 14px; }
.dns-form__submit.is-loading { opacity: 0.7; }
.dns-form__submit:disabled { cursor: not-allowed; }

.dns-form__types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    justify-content: center;
}
.dns-type {
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .2s ease;
}
.dns-type:hover { color: #6d28d9; border-color: rgba(124, 58, 237, 0.4); }
.dns-type.is-active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.dns-result { margin-top: 24px; text-align: left; }

.dns-result__loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dns-result__skel {
    height: 56px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    border-radius: 12px;
    animation: dns-shimmer 1.4s infinite ease-in-out;
}
@keyframes dns-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dns-result__head-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.dns-result__head-meta { display: flex; flex-direction: column; gap: 2px; }
.dns-result__domain {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}
.dns-result__elapsed { font-size: 12px; color: #94a3b8; }

.dns-result__groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.dns-group {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
.dns-group--empty { opacity: 0.55; }

.dns-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dns-group__icon { font-size: 18px; }
.dns-group__type {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.dns-group__count {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dns-group__empty {
    margin: 0;
    padding: 14px 18px;
    color: #94a3b8;
    font-size: 13px;
}

.dns-group__list { list-style: none; margin: 0; padding: 0; }

.dns-record {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 4px 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.04);
}
.dns-record:first-child { border-top: none; }
@media (min-width: 640px) {
    .dns-record {
        grid-template-columns: 200px 1fr auto;
        grid-template-rows: auto;
        align-items: center;
    }
}
.dns-record__name {
    grid-column: 1 / 2;
    font-size: 12px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    word-break: break-all;
}
.dns-record__value {
    grid-column: 1 / -1;
    font-size: 13.5px;
}
@media (min-width: 640px) {
    .dns-record__value { grid-column: 2 / 3; }
}
.dns-record__value code {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    font-size: 13px;
    color: #0f172a;
    word-break: break-all;
}
.dns-record__ttl {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 11px;
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    justify-self: end;
}
@media (min-width: 640px) {
    .dns-record__ttl { grid-column: 3 / 4; grid-row: auto; }
}

.dns-result__partial {
    margin-top: 10px;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    color: #92400e;
}

.dns-result__card--error {
    background: #fee2e2;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    color: #991b1b;
    font-size: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════
   POS KOMİSYON KARŞILAŞTIRMA (.pos-*)
   ═══════════════════════════════════════════════════════════════════════ */

.pos-form {
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.12);
    margin: 0 auto;
    max-width: 880px;
}
@media (min-width: 640px) { .pos-form { padding: 28px 32px; } }

.pos-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
@media (min-width: 768px) { .pos-form__grid { grid-template-columns: repeat(4, 1fr); } }

.pos-form__field { display: flex; flex-direction: column; gap: 6px; }
.pos-form__label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}
.pos-form__inputwrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pos-form__input {
    width: 100%;
    padding: 11px 36px 11px 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    background: #fafafa;
}
.pos-form__input:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.pos-form__suffix {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    pointer-events: none;
}
.pos-form__hint {
    margin: 18px 0 0;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 10px;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

.pos-result {
    margin: 28px auto 0;
    max-width: 1080px;
    text-align: left;
}
.pos-result__empty {
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.025);
    border: 1px dashed rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}

.pos-result__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .pos-result__summary { grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
}

.pos-result__hero {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: #ffffff;
    padding: 18px 22px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pos-result__hero-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}
.pos-result__hero-value {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.1;
}
.pos-result__hero-value small {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.pos-result__delta {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pos-result__delta-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.02em;
}
.pos-result__delta-value {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.pos-result__tablewrap {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    overflow-x: auto;
}

.pos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 760px;
}
.pos-table thead th {
    background: rgba(15, 23, 42, 0.03);
    padding: 12px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.pos-table tbody td {
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    vertical-align: top;
    color: #0f172a;
    font-weight: 600;
}
.pos-table tbody td small {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.4;
}
.pos-table tbody tr:last-child td { border-bottom: none; }

.pos-table__row--best { background: rgba(124, 58, 237, 0.04); }
.pos-table__row--best td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }

.pos-table__provider {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 240px;
}
.pos-table__logo {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 18px;
    flex-shrink: 0;
}
.pos-table__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: #7c3aed;
    border-radius: 999px;
    vertical-align: middle;
}

.pos-result__disclaimer {
    margin: 16px 4px 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.55;
}
.pos-result__disclaimer a {
    color: #6d28d9;
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, 0.3);
    text-underline-offset: 2px;
}
.pos-result__disclaimer a:hover { text-decoration-color: #6d28d9; }

/* ── Sözleşme / Yasal metin sayfaları (sozlesmeler/<slug>/) ───────────── */
.legal-page {
    padding: calc(var(--header-h, 72px) + 48px) 0 72px;
    background: #fff;
}
.legal-page__container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}
.legal-page__breadcrumb {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}
.legal-page__breadcrumb a { color: #64748b; }
.legal-page__breadcrumb a:hover { color: #027BC4; }
.legal-page__head {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
    margin-bottom: 28px;
}
.legal-page__title {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px;
}
.legal-page__meta {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}
.legal-page__body {
    color: #334155;
    font-size: 15.5px;
    line-height: 1.75;
}
.legal-page__body h2 {
    font-size: 19px;
    font-weight: 600;
    color: #0f172a;
    margin: 34px 0 12px;
}
.legal-page__body h2:first-child { margin-top: 0; }
.legal-page__body h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 24px 0 10px;
}
.legal-page__body p { margin: 0 0 14px; }
.legal-page__body ul {
    margin: 0 0 14px;
    padding-left: 22px;
}
.legal-page__body li { margin: 0 0 8px; }
/* KVKK sayfası: uzun başlık için sabit 28px */
.legal-page--kvkk .legal-page__title { font-size: 28px; }
.legal-page__body a {
    color: #027BC4;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-page__body a:hover { color: #025a91; }
@media (max-width: 640px) {
    .legal-page { padding: calc(var(--header-h, 64px) + 28px) 0 48px; }
    .legal-page__body { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Callback modal — "Sizi Arayalım" formu (topbar tıklamasında açılır)
   Site geneli — partials/header.php içinde tek instance.
   ═════════════════════════════════════════════════════════════════════════ */
.callback-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;                          /* topbar (~50) + header (~100) + drawer'ların üstünde */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.callback-modal.is-open { display: flex; }
.callback-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: cbFade .2s ease-out;
}
.callback-modal__panel {
    position: relative;
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: 2px;
    padding: 32px 28px 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: cbPop .22s cubic-bezier(.16, .84, .44, 1);
}
@keyframes cbFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cbPop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.callback-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color .15s, color .15s;
}
.callback-modal__close:hover { background: #F1F5F9; color: #0F172A; }
.callback-modal__close svg { width: 20px; height: 20px; }
.callback-modal__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}
.callback-modal__lead {
    margin: 0 0 22px;
    font-size: 14px;
    color: #64748B;
    line-height: 1.55;
}
.callback-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.callback-modal__field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    margin-bottom: 6px;
}
.callback-modal__field input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 2px;
    font-size: 15px;
    font-family: inherit;
    color: #0F172A;
    background: #ffffff;
    transition: border-color .15s;
    box-sizing: border-box;
}
.callback-modal__field input:focus {
    outline: none;
    border-color: #026FB4;
}
.callback-modal__submit {
    margin-top: 6px;
    padding: 13px 20px;
    border: none;
    border-radius: 2px;
    background: #0F172A;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s, transform .15s;
}
.callback-modal__submit:hover:not(:disabled) { background: #1E293B; }
.callback-modal__submit:active:not(:disabled) { transform: translateY(1px); }
.callback-modal__submit:disabled { cursor: not-allowed; }
/* Loading state: koyu ama görsel opaklık — kullanıcı işlemin sürdüğünü anlar. */
.callback-modal__submit.is-loading { opacity: 0.75; }
/* Success state: butonun içinde "Mesajınız gönderildi" — arka plan yeşil. */
.callback-modal__submit.is-sent {
    background: #16A34A;
    opacity: 1;
}
.callback-modal__submit.is-sent:hover { background: #16A34A; }
.callback-modal__feedback {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.45;
}
.callback-modal__feedback.is-success { color: #15803D; }
.callback-modal__feedback.is-error   { color: #B91C1C; }

/* Modal açıkken arka sayfa scroll'unu kilitle. */
body.callback-open { overflow: hidden; }

/* ╔═══════════════════════════════════════════════════════════════════════
   ║  /blog/ — Wix Blog tarzı minimal liste tasarımı (blogw-*)
   ║  Kategori nav + hero (başlık|görsel) + 5'li grid + pager
   ╚═══════════════════════════════════════════════════════════════════════ */

/* ── Kategori navigasyonu ────────────────────────────────────── */
.blogw-nav {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}
.blogw-nav ul {
    display: flex;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.blogw-nav ul::-webkit-scrollbar { display: none; }
.blogw-nav a {
    font-size: 13.5px;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.blogw-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blogw-nav a.is-active { color: var(--brand); }

/* ── Hero — başlık sol, görsel sağ ───────────────────────────── */
.blogw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 56px;
    align-items: center;
    padding: 56px 0 72px;
}
.blogw-hero__title {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.blogw-hero__title a { color: #111111; text-decoration: none; }
.blogw-hero__title a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.blogw-hero__more {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 36px;
    padding-bottom: 16px;
    border-bottom: 1px solid #111111;
    font-size: 14px;
    color: #111111;
    text-decoration: none;
}
.blogw-hero__more svg { width: 15px; height: 15px; transition: transform .2s ease; }
.blogw-hero__more:hover svg { transform: translateX(3px); }
.blogw-hero__media { display: block; }
.blogw-hero__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

/* ── Yazı grid'i ─────────────────────────────────────────────── */
.blogw-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 44px 24px;
    padding: 8px 0 40px;
}
.blogw-card__media { display: block; }
.blogw-card__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.blogw-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 11.5px;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
}
.blogw-card__meta span { overflow: hidden; text-overflow: ellipsis; }
.blogw-card__kebab {
    width: 15px; height: 15px;
    margin-left: auto;
    flex-shrink: 0;
    color: #111111;
}
.blogw-card__title {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.blogw-card__title a { color: #111111; text-decoration: none; }
.blogw-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Sayfalama ───────────────────────────────────────────────── */
.blogw-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 40px;
}
.blogw-pager__num,
.blogw-pager__arrow {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    color: #999999;
    text-decoration: none;
    border-radius: 50%;
    transition: color .15s ease, background .15s ease;
}
.blogw-pager__num:hover,
.blogw-pager__arrow:hover { color: #111111; background: #f2f2f2; }
.blogw-pager__num.is-current { color: #111111; font-weight: 700; }
.blogw-pager__arrow svg { width: 15px; height: 15px; }
.blogw-pager__arrow.is-disabled {
    color: #d4d4d4;
    pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .blogw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .blogw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .blogw-hero { gap: 36px; }
}
@media (max-width: 760px) {
    .blogw-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 0 48px;
    }
    .blogw-hero__more { margin-top: 24px; }
    .blogw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
}
@media (max-width: 480px) {
    .blogw-grid { grid-template-columns: 1fr; }
}

/* ╔═══════════════════════════════════════════════════════════════════════
   ║  /blog/<slug>/ — Shopify blog tarzı makale sayfası (blogp-*)
   ║  Üst CTA bandı + ortalanmış başlık/hero + 3 kolonlu düzen +
   ║  koyu e-bülten split + alt CTA bandı + okuma ilerleme çubuğu
   ╚═══════════════════════════════════════════════════════════════════════ */
.blogp {
    background: #ffffff;
    padding-bottom: 0;
}

/* ── Okuma ilerleme çubuğu ───────────────────────────────────── */
.blogp-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 100000;
    background: transparent;
    pointer-events: none;
}
.blogp-progress__bar {
    display: block;
    width: 100%; height: 100%;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
}

/* ── 1. Başlık + hero ────────────────────────────────────────── */
/* Breadcrumb — renkli bandın üstünde, beyaz zeminde */
.blogp-crumbs-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px 24px;
}
/* Başlık + kapak görselini saran tam genişlik renkli bant — içerik
   1060px'te ortalı kalırken arka plan sağa/sola ekran kenarına uzanır.
   Breadcrumb bandın dışında kaldığı için bant başlıktan itibaren başlar. */
.blogp-hero-band {
    background: #EBF1FF;
    border-top: 1px solid #DEE7F8;
    border-bottom: 1px solid #DEE7F8;
    padding-bottom: 56px;
}
.blogp-head {
    max-width: 1060px;   /* kapak görseli / 2 kolonlu düzenle aynı genişlik */
    margin: 0 auto;
    padding: 48px 24px 0;
    text-align: center;
}
.blogp-crumbs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
}
.blogp-crumbs a { color: #6b7280; text-decoration: none; transition: color .15s ease; }
.blogp-crumbs a:hover { color: #111111; }
.blogp-crumbs__home { display: inline-flex; align-items: center; color: #374151; }
.blogp-crumbs__home svg { width: 16px; height: 16px; }
.blogp-crumbs__sep { color: #c3c8d1; font-weight: 500; }
.blogp-crumbs__current {
    color: var(--brand);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .blogp-crumbs__current { max-width: 160px; }
}
.blogp-title {
    margin: 0;
    font-size: clamp(28px, 3.3vw, 36px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #111111;
}
/* Başlık altı yazar satırı — avatar + isim • rol */
.blogp-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.blogp-byline__name { font-size: 14px; font-weight: 400; color: #111111; }
.blogp-byline__dot  { color: #9aa3af; }
.blogp-byline__role { font-size: 14px; color: #6b7280; }
.blogp-byline__date { font-size: 14px; color: #6b7280; }
/* Mobil: isim + rol yan yana kalır, tarih alta iner (tarihten önceki nokta
   gizlenir — son span her durumda o noktadır, time ayrı etikettir). */
@media (max-width: 640px) {
    .blogp-byline { flex-wrap: wrap; row-gap: 4px; }
    .blogp-byline span:last-of-type { display: none; }
    .blogp-byline__date { flex-basis: 100%; text-align: center; }
}

.blogp-lead {
    margin: 18px auto 0;
    max-width: 780px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555555;
}
/* Kapak görseli — 2 kolonlu düzenle aynı genişlik (680 + 72 + 260 = 1012px) */
.blogp-hero {
    max-width: 1060px;
    margin: 36px auto 0;
    padding: 0 24px;
}
.blogp-hero img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* ── 2. Tek kolonlu makale düzeni ────────────────────────────── */
.blogp-layout {
    display: grid;
    /* 1012px = kapak görseli genişliği (.blogp-hero 1060px − 2×24px padding) */
    grid-template-columns: minmax(0, 1012px);
    justify-content: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 56px 24px 72px;
}

/* Makale tipografisi */
.blogp-article { font-size: 16px; line-height: 1.75; color: #333333; }
.blogp-article p { margin: 0 0 22px; }
.blogp-article .blog-post__intro { font-size: 17.5px; color: #222222; }
.blogp-article h2 {
    margin: 40px 0 14px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111111;
}
.blogp-article h3 {
    margin: 30px 0 12px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    color: #111111;
}
.blogp-article ul,
.blogp-article ol { margin: 0 0 22px; padding-left: 22px; }
.blogp-article li { margin-bottom: 8px; }
.blogp-article a { color: var(--brand); }
.blogp-article blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid #111111;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    color: #111111;
}
.blogp-article img { max-width: 100%; border-radius: 8px; }

/* Makale içi e-bülten kutusu */
.blogp-inline-news {
    background: #f6f6f4;
    border-radius: 12px;
    padding: 26px 28px;
    margin: 8px 0 32px;
}
.blogp-inline-news__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
}
.blogp-inline-news__form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.blogp-inline-news__form input {
    flex: 1 1 200px;
    padding: 11px 16px;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
    font-size: 13.5px;
    font-family: inherit;
    background: #ffffff;
}
.blogp-inline-news__form input:focus { outline: none; border-color: #111111; }
.blogp-inline-news__form button {
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s ease;
}
.blogp-inline-news__form button:hover { background: #333333; }
.blogp-inline-news__tos {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #777777;
}

/* Yazar satırında (blogp-foot) kullanılan avatar/isim blokları */
.blogp-side__avatar--photo { object-fit: cover; background: none; }
.blogp-side__avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8e8e8;
    color: #555555;
    font-size: 13px;
    font-weight: 700;
}
.blogp-side__author-info { display: flex; flex-direction: column; gap: 3px; }
.blogp-side__author-name { font-weight: 700; color: #111111; font-size: 13.5px; }
.blogp-side__author-meta { color: #777777; font-size: 12.5px; display: flex; gap: 6px; }

/* ── 3. Yazar satırı + paylaşım ──────────────────────────────── */
.blogp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 64px;
}
.blogp-foot__author { display: flex; align-items: center; gap: 12px; }
.blogp-foot__share {
    display: flex;
    align-items: center;
    gap: 10px;
}
.blogp-foot__share-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #111111;
    margin-right: 4px;
}
.blogp-foot__share a {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    transition: background .2s ease;
}
.blogp-foot__share a:hover { background: var(--brand); }
.blogp-foot__share a svg { width: 15px; height: 15px; }

/* ── 5. Koyu e-bülten split ──────────────────────────────────── */
.blogp-news-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #0B0B0B;
    overflow: hidden;
}
/* Koyu e-bülten bölümü footer'a bitişik dursun (main ile footer arasında
   script etiketi olduğu için bitişik kardeş yerine genel kardeş seçici) */
.blogp ~ footer { margin-top: 0; }
.blogp-news-split__media { min-height: 320px; }
.blogp-news-split__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.blogp-news-split__panel {
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blogp-news-split__title {
    margin: 0;
    max-width: 420px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.blogp-news-split__lead {
    margin: 16px 0 0;
    max-width: 440px;
    font-size: 14px;
    line-height: 1.65;
    color: #b9b9b9;
}
.blogp-news-split__form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 26px;
    max-width: 440px;
    border-radius: 999px;
    padding: 5px 5px 5px 18px;
    background: #ffffff;
}
.blogp-news-split__form input {
    flex: 1;
    min-width: 0;
    border: 0;
    font-size: 13.5px;
    font-family: inherit;
    background: transparent;
}
.blogp-news-split__form input:focus { outline: none; }
.blogp-news-split__form button {
    flex-shrink: 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s ease;
}
.blogp-news-split__form button:hover { background: var(--brand-dark, #02628f); }
.blogp-news-split__tos {
    margin: 14px 0 0;
    max-width: 440px;
    font-size: 11px;
    line-height: 1.55;
    color: #8a8a8a;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
    .blogp-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 24px 56px;
    }
    .blogp-news-split { grid-template-columns: 1fr; }
    .blogp-news-split__media { min-height: 240px; max-height: 340px; }
    .blogp-news-split__panel { padding: 44px 28px; }
    .blogp-head { padding-top: 40px; }
    .blogp-hero-band { padding-bottom: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   404 SAYFASI — .nf ("sinyal yok" TV karlanması teması)
   Siyah tam ekran bölüm; arkada canvas'a çizilen statik gürültü, üstünde
   CRT scanline overlay'i ve glitch'li 404 içeriği.
   ═════════════════════════════════════════════════════════════════════════ */
.nf-page { margin: 0; background: #050505; }
.nf {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050505;
    padding: 48px 24px;
    isolation: isolate;
}
.nf__static {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.16;
    image-rendering: pixelated;
    z-index: 0;
}
/* CRT scanline'ları + kenarlarda vinyet karartması */
.nf__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.35) 0px,
            rgba(0, 0, 0, 0.35) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.85) 100%);
}
.nf__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
}
.nf__signal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #e8e8e8;
}
.nf__signal-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ff3b30;
    animation: nf-blink 1.1s steps(1) infinite;
}
@keyframes nf-blink { 50% { opacity: 0.15; } }
.nf__code {
    position: relative;
    margin: 0;
    font-size: clamp(96px, 18vw, 180px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: 0 0 32px rgba(255, 255, 255, 0.25);
    animation: nf-flicker 4s infinite;
}
/* Glitch katmanları — kırmızı/cyan kaymalı kopyalar */
.nf__code::before,
.nf__code::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0.55;
    pointer-events: none;
}
.nf__code::before { color: #ff2d55; transform: translate(3px, 0);  clip-path: inset(18% 0 52% 0); animation: nf-glitch-a 2.6s steps(2) infinite; }
.nf__code::after  { color: #38d9f5; transform: translate(-3px, 0); clip-path: inset(58% 0 12% 0); animation: nf-glitch-b 3.1s steps(2) infinite; }
@keyframes nf-glitch-a {
    0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
    90%           { transform: translate(4px, -2px); opacity: 0.6; }
    94%           { transform: translate(-3px, 1px); opacity: 0.5; }
}
@keyframes nf-glitch-b {
    0%, 84%, 100% { transform: translate(0, 0); opacity: 0; }
    86%           { transform: translate(-4px, 2px); opacity: 0.55; }
    92%           { transform: translate(3px, -1px); opacity: 0.45; }
}
@keyframes nf-flicker {
    0%, 100% { opacity: 1; }
    3%  { opacity: 0.8; }
    6%  { opacity: 1; }
    54% { opacity: 1; }
    55% { opacity: 0.72; }
    56% { opacity: 1; }
}
.nf__title {
    margin: 26px 0 0;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}
.nf__lead {
    margin: 12px auto 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.65;
    color: #9aa0a6;
}
.nf__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.nf__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 2px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nf__btn--primary {
    background: #ffffff;
    color: #050505;
    border: 1px solid #ffffff;
}
.nf__btn--primary:hover { background: #d9e6f2; border-color: #d9e6f2; }
.nf__btn--ghost {
    background: transparent;
    color: #e8e8e8;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.nf__btn--ghost:hover { border-color: #ffffff; color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
    .nf__signal-dot,
    .nf__code,
    .nf__code::before,
    .nf__code::after { animation: none; }
}
@media (max-width: 640px) {
    .nf { padding: 40px 20px; }
    .nf__title { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG YAZISI — KOYU HERO BANDI (body.page-dark-hero)
   Piksel-referans düzen: lacivert bant sayfanın en üstünden (sabit topbar +
   header'ın arkasından) başlar; menü linkleri ve logo beyazdır. Breadcrumb
   bandın içinde üstte, ortada mavi kategori eyebrow'u + beyaz başlık +
   byline yer alır. main'in üst padding'i bu sayfada banda devredilir ki
   topbar kapatılsa bile araya beyaz şerit girmesin.
   ═════════════════════════════════════════════════════════════════════════ */
.page-dark-hero .site-header { background: #0D1321; }

/* Menü — yalnız masaüstü üst seviye linkler beyaz olur; mega menü popover'ı
   ve mobil panel beyaz zeminli kaldığından kendi koyu metin renklerini korur. */
@media (min-width: 1025px) {
    .page-dark-hero .main-nav__list > .main-nav__item > .main-nav__link { color: #E9EEF9; }
    .page-dark-hero .main-nav__list > .main-nav__item > .main-nav__link:hover,
    .page-dark-hero .main-nav__list > .main-nav__item.is-open > .main-nav__link { color: #7FB4FF; }
    .page-dark-hero .main-nav__list > .main-nav__item > .main-nav__link.is-active,
    .page-dark-hero .main-nav__list > .main-nav__item > a.is-active { color: #7FB4FF; }
    .page-dark-hero .main-nav a.is-active::after { background: #7FB4FF; }
}
/* Mobil hamburger çizgileri koyu zeminde beyaz */
.page-dark-hero .nav-toggle .hamburger-line { background: #ffffff; }

/* main üst padding'i banda devredilir */
.page-dark-hero .blog-page--no-head { padding-top: 0; }

/* Bant: lacivert, tam genişlik; sabit barların (topbar 47 + header 78 = 125px)
   arkasını doldurur + 26px nefes payı. Dekoratif "+" işaretleri piksel
   referansındaki gibi köşelere yerleşir. */
.page-dark-hero .blogp-hero-band {
    position: relative;
    overflow: hidden;
    background: #0D1321;
    border-top: 0;
    border-bottom: 0;
    padding-top: 151px;
    padding-bottom: 64px;
}
.page-dark-hero .blogp-hero-band::before,
.page-dark-hero .blogp-hero-band::after {
    content: "+";
    position: absolute;
    font-size: 44px;
    font-weight: 200;
    line-height: 1;
    color: #4F74E3;
    opacity: .55;
    pointer-events: none;
}
.page-dark-hero .blogp-hero-band::before { top: 200px; left: 18%; }
.page-dark-hero .blogp-hero-band::after  { top: 340px; right: 16%; }
@media (max-width: 1024px) { .page-dark-hero .blogp-hero-band { padding-top: 141px; } }
@media (max-width: 720px)  {
    .page-dark-hero .blogp-hero-band { padding-top: 129px; padding-bottom: 44px; }
    .page-dark-hero .blogp-hero-band::before,
    .page-dark-hero .blogp-hero-band::after { display: none; }
}

/* Breadcrumb — bandın içinde, beyaz */
.page-dark-hero .blogp-crumbs-wrap { padding: 0 24px 6px; }
.page-dark-hero .blogp-crumbs { color: #ffffff; }
.page-dark-hero .blogp-crumbs__home { color: #ffffff; }
.page-dark-hero .blogp-crumbs a { color: #ffffff; }
.page-dark-hero .blogp-crumbs a:hover { color: #7FB4FF; }
.page-dark-hero .blogp-crumbs__sep { color: rgba(255,255,255,.45); }
.page-dark-hero .blogp-crumbs__current { color: #ffffff; }

/* Header CTA ("ÜCRETSİZ DENEYİN") — koyu header'da beyaz zemin + siyah metin */
.page-dark-hero .header-actions .btn-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #0B0E24;
}
.page-dark-hero .header-actions .btn-primary:hover {
    background: #e9edf6;
    border-color: #e9edf6;
    color: #0B0E24;
}

/* Topbar — koyu sayfada bordo zemin; yazılar varsayılan beyaz kalır. */
.page-dark-hero .topbar { background: linear-gradient(90deg, #4E0E1B 0%, #7A1C2E 100%); }

/* Başlık + byline + lead — koyu zemine göre renkler */
.page-dark-hero .blogp-head { padding-top: 30px; }
.page-dark-hero .blogp-title { color: #ffffff; }
.page-dark-hero .blogp-byline__name { color: #ffffff; }
.page-dark-hero .blogp-byline__role,
.page-dark-hero .blogp-byline__date { color: rgba(255,255,255,.62); }
.page-dark-hero .blogp-byline__dot { color: rgba(255,255,255,.3); }
.page-dark-hero .blogp-lead { color: #ffffff; }
.page-dark-hero .blogp-head .blogp-side__avatar { background: rgba(255,255,255,.14); color: #ffffff; }

/* Kapak görseli — koyu bantta ince açık kenarlık */
.page-dark-hero .blogp-hero img { border: 1px solid rgba(255,255,255,.1); }