/* Tekno Kart teması — otomatik üretildi (npm run build:theme). Kaynak dosyaları düzenleyin, bu dosyayı elle DÜZENLEMEYİN. */
/* --- fonts.css --- */
/* Geist — shadcn/ui'nin arayüz fontu. Tema içinde barındırılır (CDN yok). */
@font-face {
    font-family: "Geist";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Geist-400.woff2") format("woff2");
}
@font-face {
    font-family: "Geist";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Geist-500.woff2") format("woff2");
}
@font-face {
    font-family: "Geist";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Geist-600.woff2") format("woff2");
}
@font-face {
    font-family: "Geist";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Geist-700.woff2") format("woff2");
}

/* --- tokens.css --- */
/*
 * Teknokart teması — tasarım token'ları
 * ------------------------------------------------------------------
 * shadcn/ui'nin token sistemi (background / foreground / card / muted /
 * border / ring / radius) vanilla CSS'e taşınmıştır. React ve Tailwind
 * kullanılmaz; yalnızca aynı görsel dil uygulanır.
 *
 * Site tek temalıdır: koyu (shadcn dark). Kart profil sayfalarının kendi
 * tema seçimi bundan bağımsızdır (kart sahibi panelinden seçer).
 */

:root {
    /* Yüzeyler */
    --background: #09090b;
    --foreground: #fafafa;
    --card: #121214;
    --card-foreground: #fafafa;
    --popover: #18181b;

    /* Vurgu (marka yeşili — koyu zeminde okunur ton) */
    --primary: #22c55e;
    --primary-hover: #16a34a;
    --primary-foreground: #052e16;
    --primary-soft: rgba(34, 197, 94, .12);
    --primary-ring: rgba(34, 197, 94, .35);

    /* Nötr katmanlar */
    --secondary: #1c1c1f;
    --secondary-foreground: #fafafa;
    --muted-bg: #0e0e10;
    --muted-foreground: #a1a1aa;
    --accent: #1c1c1f;

    /* Çizgi ve odak */
    --border: #27272a;
    --input: #27272a;
    --ring: var(--primary);

    /* Yarıçap ölçeği (shadcn: 0.625rem tabanlı) */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /*
     * Degrade katmanı — hero'daki yumuşak vurgunun site geneline taşınmış hâli.
     * Hepsi çok düşük kontrastlıdır: yüzeye derinlik verir, rengi değiştirmez.
     */
    --gradient-card: linear-gradient(155deg,
        color-mix(in srgb, var(--primary) 8%, var(--card)) 0%,
        var(--card) 52%,
        color-mix(in srgb, #000 20%, var(--card)) 100%);
    --gradient-muted: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 9%, var(--muted-bg)) 0%,
        var(--muted-bg) 62%);
    --gradient-page: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 11%, var(--muted-bg)) 0%,
        var(--muted-bg) 72%);
    --glow-primary: radial-gradient(circle, rgba(34, 197, 94, .15), transparent 68%);

    /* Gölge ölçeği — koyu zeminde derinlik */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .55);
    --shadow-lg: 0 20px 46px rgba(0, 0, 0, .65);

    /* Tipografi */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Ölçüler */
    --container: 1400px;
    --header-h: 68px;

    /*
     * Geriye dönük adlar: şablonlarda geçen var(--ink) / var(--line) gibi
     * kullanımlar token'lara bağlanır.
     */
    --ink: var(--foreground);
    --text: #d4d4d8;
    --muted: var(--muted-foreground);
    --line: var(--border);
    --surface: var(--card);
    --bg: var(--background);
    --bg-soft: var(--secondary);
}

/* Tarayıcı denetimleri (form alanları, kaydırma çubuğu) koyu şemayı izler. */
html { color-scheme: dark; }

/* --- base.css --- */
/* Temel katman: reset, tipografi, form elemanları, yardımcı sınıflar. */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    position: relative;
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Sayfa zemininde sabit duran marka yeşili halesi: kaydırırken yerinde kalır,
 * bölümlerin arasından süzülür. Opaklıklar çok düşüktür — renk katar, okunurluğu
 * ve kontrastı değiştirmez.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 80% -8%, rgba(34, 197, 94, .11), transparent 62%),
        radial-gradient(780px 540px at 2% 38%, rgba(34, 197, 94, .07), transparent 60%),
        radial-gradient(900px 640px at 96% 84%, rgba(34, 197, 94, .08), transparent 62%);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--foreground);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); letter-spacing: -.03em; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--foreground);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--primary); }

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: none; }
/* Dolu (silüet) ikonlar fill="currentColor" ile gelir; üstteki genel kural
   attribute'u ezdiği için burada geri verilir. */
svg[fill="currentColor"] { fill: currentColor; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

strong, b { color: var(--foreground); font-weight: 600; }

blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 2px solid var(--primary);
    color: var(--foreground);
    font-size: 1.05rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .15em .4em;
}

::selection { background: var(--primary-soft); color: var(--foreground); }

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- Yerleşim yardımcıları --- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section.soft {
    background: var(--gradient-muted);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Form elemanları (shadcn input/select/textarea) --- */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="password"], select, textarea {
    width: 100%;
    padding: 10px 13px;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

textarea { min-height: 120px; resize: vertical; }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px;
    padding-right: 36px;
}

.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--muted-foreground); }

.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

label {
    display: block;
    margin-bottom: 6px;
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 500;
}

.form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.form-group { flex: 1 1 240px; margin-bottom: 16px; }

.form-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--shadow-sm);
}

/* --- Uyarı kutuları --- */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--muted-bg);
    font-size: .925rem;
    margin-bottom: 18px;
}
.alert svg { width: 18px; height: 18px; flex: 0 0 auto; }
.alert-success { border-color: var(--primary); background: var(--primary-soft); color: var(--foreground); }
.alert-error { border-color: #ef4444; background: rgba(239, 68, 68, .07); color: #b91c1c; }
html[data-theme="dark"] .alert-error { color: #fca5a5; }

/* --- Okuma alanı (blog/hizmet gövdesi, yasal metinler) --- */
.post-content, .legal-doc {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.8;
}
.post-content > *:first-child, .legal-doc > *:first-child { margin-top: 0; }
.post-content h2, .legal-doc h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
.post-content h3, .legal-doc h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.post-content ul, .post-content ol, .legal-doc ul, .legal-doc ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.post-content li, .legal-doc li { margin-bottom: .5rem; }
.post-content a, .legal-doc a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.post-content img { border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 1.5rem 0; }
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95rem;
}
.post-content th, .post-content td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.post-content th { background: var(--secondary); color: var(--foreground); font-weight: 600; }

/* --- Mobil tipografi: masaüstü ölçeği dar ekranda büyük kalıyordu (h1 32px,
   gövde 17px/1.8). Telefonda başlıklar bir kademe iner, okuma metni 16px'e
   çekilir; düğme ve gövde 16px altına inmez (iOS odaklanınca yakınlaştırır). --- */
@media (max-width: 640px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.0625rem; }
    .post-content, .legal-doc { font-size: 1rem; line-height: 1.7; }
    .post-content h2, .legal-doc h2 { font-size: 1.35rem; margin-top: 1.9rem; }
    .post-content h3, .legal-doc h3 { font-size: 1.125rem; margin-top: 1.5rem; }
    /* Geniş tablo sayfayı değil kendi kutusunu kaydırır. */
    .post-content table { display: block; overflow-x: auto; font-size: .9rem; -webkit-overflow-scrolling: touch; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- components.css --- */
/* Bileşen katmanı: buton, kart, rozet, akordeon, sayfalama — shadcn varyantları. */

/* --- Butonlar --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-foreground); }

.btn-light, .btn-secondary {
    background: var(--secondary);
    border-color: var(--border);
    color: var(--secondary-foreground);
}
.btn-light:hover, .btn-secondary:hover { background: var(--accent); border-color: var(--muted-foreground); color: var(--foreground); }

.btn-outline { border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--secondary); }

.btn-ghost { color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--secondary); color: var(--foreground); }

.btn-lg { padding: 12px 22px; font-size: 1rem; }
.btn-sm { padding: 7px 13px; font-size: .875rem; }
.btn-block { width: 100%; }

/* Kart sahibi giriş butonu (header) */
.btn-login { border-color: var(--border); color: var(--foreground); }
.btn-login:hover { background: var(--secondary); border-color: var(--muted-foreground); }
.btn-login svg { width: 17px; height: 17px; }

/* --- Kart --- */
.card-surface {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* --- Rozet / etiket --- */
.badge, .hx-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--gradient-card);
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: -.01em;
}
.badge .dot, .hx-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;
}

.blog-cat, .hx-bcard .cat {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
}

/* --- Bölüm başlığı --- */
.section-head, .hx-offer-head {
    max-width: 660px;
    margin: 0 0 clamp(32px, 4vw, 52px);
}
.section-head h2, .hx-offer-head h2 { margin: 14px 0 10px; }
.section-head p, .hx-offer-head p { color: var(--muted-foreground); font-size: 1.0625rem; margin: 0; }
.hx-offer-head.center, .section-head.center { margin-inline: auto; text-align: center; }

/* --- SSS akordeonu --- */
.faq-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }

.faq-item {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color .15s ease;
}
.faq-item:hover { border-color: var(--muted-foreground); }
.faq-item.open { border-color: var(--primary); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.faq-q .ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .2s ease, background-color .15s ease, color .15s ease;
}
.faq-item.open .faq-q .ico { transform: rotate(45deg); background: var(--primary); color: var(--primary-foreground); }

.faq-a { display: none; padding: 0 18px 16px; color: var(--muted-foreground); font-size: .95rem; }
.faq-item.open .faq-a { display: block; }

/* details/summary tabanlı SSS (fiyat sayfası) */
.fp-q {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 18px;
    margin-bottom: 10px;
}
.fp-q[open] { border-color: var(--primary); }
.fp-q summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.fp-q summary::-webkit-details-marker { display: none; }
.fp-q summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: 1.05rem; line-height: 1;
}
.fp-q[open] summary::after { content: "–"; background: var(--primary); color: var(--primary-foreground); }
.fp-q p { margin: 0 0 16px; color: var(--muted-foreground); font-size: .95rem; }

/* --- Sayfalama --- */
.blog-pagination { display: flex; justify-content: center; margin-top: 48px; }
.blog-pagination .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.blog-pagination .page-link {
    display: inline-flex;
    align-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--gradient-card);
    color: var(--foreground);
    font-size: .9rem;
    font-weight: 500;
}
.blog-pagination .page-link:hover { background: var(--secondary); }
.blog-pagination .active .page-link { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.blog-pagination .disabled .page-link { opacity: .45; pointer-events: none; }

/* --- Kayan şerit (markalar / senaryolar) --- */
.hx-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hx-track, .hx-rev-track { display: flex; width: max-content; }
.hx-track { gap: 48px; align-items: center; animation: tk-marquee 40s linear infinite; }
.hx-rev-track { gap: 16px; align-items: stretch; animation: tk-marquee 70s linear infinite; padding: 4px; }
.hx-marquee:hover .hx-track, .hx-marquee:hover .hx-rev-track { animation-play-state: paused; }

@keyframes tk-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.hx-brand {
    color: var(--muted-foreground);
    font-size: 1.0625rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -.01em;
}

/* --- Scroll ilerleme çubuğu --- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1000;
}

/* --- Scroll-reveal (JS 'in' sınıfı ekler) --- */
html.has-js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.has-js .reveal.in { opacity: 1; transform: none; }

/* --- Çerez Tercih Merkezi --- */

/* Sarmalayıcı yerleşime HİÇ katılmaz.
   1 Eylül 2026 ölçümü: JS `hidden`i kaldırınca sarmalayıcı normal akışa
   giriyor ve çocukları position:fixed olsa bile aradaki boşluk metin
   düğümleri ona satır yüksekliği kazandırıyordu. Sonuç, sayfanın geri
   kalanını iten bir kayma: ana sayfa mobil CLS 0,191 · masaüstü 0,104 ·
   hizmet sayfası masaüstü 0,139 (eşik 0,1). Lighthouse kaymanın kaynağı
   olarak doğrudan bu elemanı gösteriyordu.
   `display: contents` kutuyu tamamen kaldırır; çocuklar kendi
   konumlandırmalarını korur. */
.cookie-consent { display: contents; }

/* Gizleme display ile DEĞİL visibility ile yapılır.
   display:none -> görünür geçişinde tarayıcı, bandın ilk boyamasını yerleşim
   kayması sayıyordu (Lighthouse: cc-banner, skor 0,191 — display:contents
   sarmalayıcı düzeltmesinden SONRA da). visibility:hidden eleman yerleşimde
   kalır ve görünür olduğunda konumu değişmediği için kayma hiç oluşmaz;
   erişilebilirlik ağacından da display:none gibi çıkarılır. */
.cookie-consent[hidden] { display: contents; }
.cookie-consent[hidden] .cc-banner,
.cookie-consent[hidden] .cc-modal { visibility: hidden; }

.cc-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 960;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 20px;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.cc-banner[hidden] { display: flex; visibility: hidden; }
.cc-banner-body { flex: 1 1 auto; min-width: 0; }
.cc-title { display: flex; align-items: center; gap: 8px; color: var(--foreground); font-size: .975rem; font-weight: 600; }
.cc-title svg { width: 18px; height: 18px; color: var(--primary); }
.cc-text { margin: 6px 0 0; color: var(--muted-foreground); font-size: .875rem; line-height: 1.6; }
.cc-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cc-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }

.cc-btn {
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cc-btn-ghost:hover { background: var(--secondary); }
.cc-btn-accept { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.cc-btn-accept:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Tercih modalı */
.cc-modal { position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 20px; }
.cc-modal[hidden] { display: none; }
.cc-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, .66); backdrop-filter: blur(3px); }
.cc-modal-panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 26px 24px 22px;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.cc-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.cc-modal-title { margin: 0 0 6px; font-size: 1.2rem; }
.cc-modal-lead { margin: 0 0 18px; color: var(--muted-foreground); font-size: .9rem; line-height: 1.6; }

.cc-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--gradient-card);
    cursor: pointer;
}
.cc-cat--locked { cursor: default; }
.cc-cat-info strong { display: block; color: var(--foreground); font-size: .9rem; font-weight: 600; }
.cc-cat-info span { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.55; }
.cc-always { flex: 0 0 auto; color: var(--primary); font-size: .75rem; font-weight: 600; }

/* Anahtar (checkbox) */
.cc-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--secondary);
    border: 1px solid var(--border);
    transition: background-color .18s ease, border-color .18s ease;
    pointer-events: none;
}
.cc-slider::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--muted-foreground);
    transition: transform .18s ease, background-color .18s ease;
}
.cc-switch input:checked + .cc-slider { background: var(--primary-soft); border-color: var(--primary); }
.cc-switch input:checked + .cc-slider::after { transform: translateX(18px); background: var(--primary); }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--ring); outline-offset: 2px; }

.cc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cc-modal-actions .cc-btn { flex: 1 1 auto; }
.cc-modal-policy { display: inline-block; margin-top: 14px; color: var(--muted-foreground); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }

/* Footer'daki "Çerez Tercihleri" düğmesi */
.footer-legal-cookie {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (max-width: 860px) {
    /* Mobil alt çubuğun üstünde durur, sekmeleri kapatmaz. */
    .cc-banner {
        left: 10px; right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .cc-banner-actions .cc-btn { flex: 1 1 auto; }

    /* Bildirim ekranın yarısını kaplamamalı.
       Ölçüm: sipariş sayfasında mobilde canlı kart önizlemesini tamamen
       kapatıyordu; onay bandı görünür kalmalı ama sayfayı yutmamalı.
       Metin uzunsa kendi içinde kayar, düğmeler her zaman görünür kalır. */
    .cc-banner-body {
        max-height: 8.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .cc-text { font-size: .875rem; line-height: 1.5; }
}

/* --- layout.css --- */
/* Yerleşim katmanı: başlık, mobil çekmece, sayfa üst alanı, footer, mobil çubuk. */

/* --- Site başlığı --- */
/*
 * Bulanık zemin ::before üzerindedir: backdrop-filter'ı doğrudan .site-header'a
 * vermek içindeki position:fixed mobil çekmece için "containing block" yaratır
 * ve çekmece tam ekran açılamaz. Filtre alt katmanda kalınca sorun ortadan kalkar.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--background) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header.scrolled { border-bottom-color: var(--border); }

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--foreground);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    flex: 0 0 auto;
}
.logo img { height: 34px; width: auto; }
.logo-mark {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 700;
}

/* --- Ana menü --- */
.main-nav { display: flex; align-items: center; }
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--muted-foreground);
    font-size: .9375rem;
    font-weight: 500;
}
.main-nav a:hover { background: var(--secondary); color: var(--foreground); }
.main-nav a.active { color: var(--foreground); background: var(--secondary); }
.main-nav .nav-ic { display: none; }

/* Alt menü (hizmetler) */
.main-nav .has-sub { position: relative; }
.main-nav .nav-row { display: flex; align-items: center; }
.main-nav .sub-toggle { display: none; }
.main-nav .sub-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.main-nav .has-sub:hover .sub-nav { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-nav a { display: block; padding: 8px 10px; font-size: .9rem; }

.main-nav .drawer-login { display: none; }
/* Çekmece başlığı ("Menü ×") yalnız mobil çekmecede görünür. */
nav.main-nav .nav-drawer-head { display: none; }

/* --- Başlık aksiyonları --- */
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }


.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 38px; height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
}
.nav-toggle span { width: 16px; height: 1.5px; background: var(--foreground); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Sayfa üst alanı --- */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 76px) 0 clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--border);
    background: var(--gradient-page);
}
/* Hero'daki yumuşak vurgunun küçük eşi. */
.page-hero::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -180px;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: var(--glow-primary);
    pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero h1 { margin: 12px 0 12px; max-width: 22ch; }
.page-hero p { color: var(--muted-foreground); font-size: 1.0625rem; max-width: 70ch; margin: 0; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    color: var(--muted-foreground);
    font-size: .875rem;
}
.breadcrumb a { color: var(--muted-foreground); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { color: var(--foreground); }

/* --- Footer --- */
.site-footer {
    padding: clamp(36px, 4.5vw, 56px) 0 24px;
    border-top: 1px solid var(--border);
    /* Footer düz zemin: degrade katmanı buraya taşmaz. */
    background: var(--muted-bg);
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px 64px;
    align-items: start;
    margin-bottom: 26px;
}
.footer-about { color: var(--muted-foreground); font-size: .9375rem; margin: 14px 0 0; max-width: 42ch; }

/* Sağ kolondaki dikey menüler — sade: küçük başlık, ince bağlantı listesi. */
.footer-menus { display: flex; gap: 80px; }
.footer-col h2 {
    margin: 0 0 10px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* WCAG AA: 11px metin 4.5:1 ister. %65 karışım 3.8:1 veriyordu. */
    color: color-mix(in srgb, var(--muted-foreground) 88%, transparent);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
/* Uzun menü iki sütuna bölünür; öğeler önce aşağı, sonra yana akar. */
.footer-col-split ul {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    gap: 11px 56px;
}
/* Marka bloğundaki iletişim satırları: about metniyle aynı ölçüde durur. */
.footer-contact {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    max-width: 42ch;
}
.footer-contact a, .footer-address {
    color: var(--muted-foreground);
    font-size: .875rem;
    line-height: 1.55;
}
.footer-contact a:hover { color: var(--foreground); }
.footer-col a { color: var(--muted-foreground); font-size: .875rem; }
.footer-col a:hover { color: var(--foreground); }
.footer-credit { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit:hover { color: var(--primary); }

.social-row { display: flex; gap: 8px; margin-top: 18px; }
.social-row a {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted-foreground);
}
.social-row a:hover { background: var(--secondary); color: var(--foreground); }
.social-row svg { width: 16px; height: 16px; }

/* Solda telif + yasal bağlantılar, sağda yapımcı künyesi. */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: .875rem;
}
.footer-bottom-left { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-made { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 0 0 auto; margin-left: auto; }
.footer-made-item + .footer-made-item::before { content: "\00b7"; margin-right: 10px; color: var(--muted-foreground); }

/* --- WhatsApp yüzen düğme --- */
.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 800;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: var(--shadow-lg);
    transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.05); color: #fff; }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }

/* Yüzen düğme metnin üstüne biniyordu (/hizmetler, hizmet detay, /fiyatlar
   ve sipariş formunda görsel denetimde tespit edildi).

   Viewport'a sabit bir düğme kaydırma sırasında içeriğin üstünden geçmeyi
   sürdürür — bu, yüzen düğmenin doğasında var. Yapılabilecek olan, düğmeyi
   içerik SÜTUNUNUN dışına, kenar boşluğuna itmektir: geniş ekranda zaten
   orada durur, dar ekranda ise sütuna girer.

   right değeri, içerik sütununun (max 1200px) sağ kenarından sonra kalan
   boşluğa oturur; boşluk yetmezse en az 20px'e düşer. */
.wa-float { right: max(20px, calc((100vw - 1200px) / 2 - 62px)); }

/* Sayfanın son bloğu düğmenin altında kalmasın. */
body { padding-bottom: 84px; }

/* --- Mobil sabit alt çubuk (yalnız dar ekranlarda) --- */
.mobile-bar { display: none; }

/* --- Duyarlı davranış --- */
@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .header-actions .btn-primary, .header-actions .btn-login, .header-actions .theme-toggle { display: none; }

    .main-nav {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 320px);
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        background: var(--background);
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        z-index: 950;
    }
    .main-nav.open { transform: none; }

    .nav-drawer-head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--border);
        color: var(--foreground);
        font-weight: 600;
    }
    .nav-close {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: transparent;
        color: var(--muted-foreground);
        width: 32px; height: 32px;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
    }

    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .main-nav a { padding: 11px 12px; font-size: .975rem; color: var(--foreground); }
    .main-nav .nav-ic { display: block; width: 18px; height: 18px; color: var(--muted-foreground); }
    .main-nav a.active .nav-ic { color: var(--primary); }

    .main-nav .nav-row { justify-content: space-between; }
    .main-nav .nav-row > a { flex: 1 1 auto; }
    .main-nav .sub-toggle {
        display: grid;
        place-items: center;
        width: 32px; height: 32px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
    }
    .main-nav .sub-toggle::before { content: "+"; font-size: 1rem; line-height: 1; }
    .main-nav .has-sub.open .sub-toggle::before { content: "–"; }
    .main-nav .sub-nav {
        position: static;
        opacity: 1;
        visibility: hidden;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 1px solid var(--border);
        border-radius: 0;
        margin: 2px 0 6px 14px;
        padding: 0 0 0 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .2s ease;
    }
    .main-nav .has-sub.open .sub-nav { visibility: visible; max-height: 460px; }

    .main-nav .drawer-login {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
        padding: 11px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: transparent;
        color: var(--foreground);
        font-family: inherit;
        font-size: .95rem;
        font-weight: 500;
        cursor: pointer;
    }
    .drawer-login { margin-top: 18px; background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
    .drawer-login .dl-ic { display: grid; place-items: center; }
    .drawer-login .nav-ic { display: block; width: 18px; height: 18px; color: currentColor; }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(9, 9, 11, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s;
        /* Header'ın (sticky, z-index 900) ALTINDA kalmalı: çekmece header'ın
           katman bağlamı içindedir; kendi z-index'i (950) dışarıya 900 gibi
           görünür. Perde 940'ta iken çekmecenin ÜSTÜNE biniyordu; çekmece
           içine her dokunuş perdeye gidip menüyü kapatıyordu ("mobilde menü
           çalışmıyor"). Header'ın altında kalınca perde yalnız sayfayı örter. */
        z-index: 890;
    }
    .nav-backdrop.show { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }

    /* Mobil alt çubuk: sabit sekmeler (ana sayfa, sipariş, üye girişi, menü) */
    .mobile-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 930;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--background) 94%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
    }
    .mb-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 50px;
        padding: 6px 2px;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: var(--muted-foreground);
        font-family: inherit;
        font-size: .6875rem;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mb-tab .nav-ic { display: block; width: 21px; height: 21px; color: currentColor; }
    .mb-tab span { display: block; }
    .mb-tab.active { color: var(--primary); }
    .mb-tab:active { background: var(--secondary); }
    .mb-menu[aria-expanded="true"] { color: var(--primary); }

    .wa-float { bottom: 86px; }
    body { padding-bottom: 74px; }
}

@media (max-width: 860px) {
    /* Dar ekranda menüler markanın altına iner. */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-menus { gap: 52px; }
}

@media (max-width: 640px) {
    .container { padding: 0 18px; }
    .page-hero p { font-size: 1rem; }
    /* Dar ekranda künye alta iner, hepsi sola dayalı kalır. */
    .footer-made { margin-left: 0; }
    .footer-menus { flex-direction: column; gap: 24px; }
    .footer-col-split ul { grid-template-rows: repeat(5, auto); gap: 11px 32px; }
}

/* Marka: açık temada metin + işaret, koyu temada yüklenen logo görseli. */
.logo-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-foreground);
}
.logo-mark svg { width: 17px; height: 17px; stroke: currentColor; }
.logo-text { font-weight: 600; letter-spacing: -.02em; }
.logo .logo-img { display: block; height: 30px; width: auto; }
.logo:has(.logo-img) .logo-mark,
.logo:has(.logo-img) .logo-text { display: none; }

/* --- pages.css --- */
/* Sayfa ve bölüm katmanı: ana sayfa blokları, listeler, detay düzeni, fiyat, iletişim. */

/* ============================================================
   HERO
   ============================================================ */
.hx-hero {
    position: relative;
    padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
    overflow: hidden;
}
.hx-hero::before {
    /* Tek, çok yumuşak vurgu — eski parıltılı efektlerin yerine. */
    content: "";
    position: absolute;
    top: -220px;
    right: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-soft), transparent 68%);
    pointer-events: none;
}

.hx-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.hero-text h1 { margin: 0 0 18px; max-width: 16ch; }
.hx-lead { color: var(--muted-foreground); font-size: 1.125rem; max-width: 52ch; margin: 0 0 28px; }

/* Ana sayfa tanıtım metni (panel: Tanıtım Metni). Okunur ölçü; bağlantılar
   SEO haritasından otomatik geldiği için metin içinde belirgin olmalı. */
.hx-intro-body { max-width: 780px; }
.hx-intro-body h2 { margin: 14px 0 18px; }
.hx-intro-body p { color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.8; margin: 0 0 16px; }
.hx-intro-body p:last-child { margin-bottom: 0; }
.hx-intro-body a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.hx-intro-body a:hover { color: var(--primary); }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.hx-trust { display: flex; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: .9375rem; }
.hx-trust .avs { display: flex; }
.hx-trust .avs span {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    margin-right: -8px;
    border-radius: 50%;
    background: var(--secondary);
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: .6875rem;
    font-weight: 600;
}

/* NFC kartın telefona dokunuşu (hero sahnesi) */
.hx-visual { position: relative; display: grid; place-items: center; min-height: 360px; }
.hx-glow-circle {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-soft), transparent 70%);
}

.tap-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* --- Kart --- */
.tap-card {
    position: relative;
    z-index: 2;
    width: min(320px, 50%);
    aspect-ratio: 1.586;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 18px;
    background: linear-gradient(150deg, #1c1c1f, #101012);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: var(--shadow-lg);
    transform: rotate(-8deg) translateX(10px);
    animation: tk-card-tap 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tc-chip {
    width: 34px; height: 26px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--primary), #86efac);
}
.tc-wave { width: 20px; height: 20px; color: var(--primary); stroke: currentColor; }
.tc-name { color: #fafafa; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.tc-role {
    color: #a1a1aa;
    font-size: .76rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-foot { display: flex; align-items: center; justify-content: space-between; color: #71717a; font-size: .7rem; }
.tc-dots { display: inline-flex; align-items: center; gap: 5px; }
.tc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: inline-block; }

/* Kart telefona yaklaşır, okunur, geri çekilir. */
@keyframes tk-card-tap {
    0%, 8% { transform: rotate(-8deg) translate(10px, 0); }
    26%, 62% { transform: rotate(-5deg) translate(38px, -6px); }
    82%, 100% { transform: rotate(-8deg) translate(10px, 0); }
}

/* --- Dokunuş sinyali --- */
.tap-signal { position: relative; z-index: 3; width: 30px; height: 54px; flex: 0 0 auto; }
.tap-signal i {
    position: absolute;
    top: 50%; left: 0;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 14px var(--primary-ring);
    opacity: 0;
    animation: tk-signal 6s ease-out infinite;
}
.tap-signal i:nth-child(2) { animation-delay: .22s; }
.tap-signal i:nth-child(3) { animation-delay: .44s; }

@keyframes tk-signal {
    0%, 22% { transform: translateX(0) scale(.5); opacity: 0; }
    28% { opacity: 1; }
    40% { transform: translateX(24px) scale(1.15); opacity: 0; }
    100% { transform: translateX(24px) scale(1.15); opacity: 0; }
}

/* --- Telefon --- */
.tap-phone {
    position: relative;
    z-index: 1;
    width: min(180px, 34%);
    aspect-ratio: .49;
    padding: 9px 8px;
    border-radius: 26px;
    background: #141417;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow-lg);
    transform: rotate(4deg);
    animation: tk-phone-float 6s ease-in-out infinite;
}
.tp-notch {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 54px; height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}
.tp-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 14px 12px;
    border-radius: 19px;
    background: #fafafa;
    overflow: hidden;
    text-align: center;
}
/* Kapak: kartta görsel varsa arka plan olarak basılır, yoksa marka degradesi. */
.tp-cover {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58px;
    background: linear-gradient(135deg, var(--primary), #15803d);
    background-size: cover;
    background-position: center;
}
/* Gerçek profil fotoğrafı — harf yer tutucuyla aynı ölçüde. */
.tp-avatar.tp-avatar-img { object-fit: cover; background: #e4e4e7; }
.tp-avatar {
    position: relative;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-top: 32px;
    border-radius: 50%;
    background: #e4e4e7;
    border: 3px solid #fafafa;
    color: #52525b;
    font-size: 1.1rem;
    font-weight: 600;
}
/* Gerçek kart verisi geldiği için ad/ünvan uzun olabilir: ekrana sığdırılır. */
.tp-name {
    max-width: 100%;
    color: #18181b;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-role {
    max-width: 100%;
    color: #71717a;
    font-size: .62rem;
    line-height: 1.3;
    margin-top: -1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-btn {
    width: 90%;
    margin-top: 6px;
    padding: 6px 0;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    animation: tk-btn-pulse 2.4s ease-in-out infinite;
}
.tp-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; width: 90%; margin-top: 4px; }
.tp-actions i {
    display: grid; place-items: center;
    height: 26px;
    border-radius: 7px;
    background: #f1f1f3;
    color: #52525b;
}
.tp-actions svg { width: 12px; height: 12px; stroke: currentColor; }

@keyframes tk-phone-float {
    0%, 24% { transform: rotate(4deg) translateY(0); }
    34% { transform: rotate(4deg) translateY(-6px) scale(1.015); }
    46%, 100% { transform: rotate(4deg) translateY(0) scale(1); }
}

/* iOS/Android'deki NFC okuma bildirimi: üstten iner, kısa süre durur, kalkar. */
.tp-toast {
    position: absolute;
    top: 18px; left: 12px; right: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(250, 250, 250, .94);
    border: 1px solid rgba(9, 9, 11, .06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-140%);
    animation: tk-toast 6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.tt-ic {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: #16a34a;
    color: #fff;
}
.tt-ic svg { width: 13px; height: 13px; stroke: currentColor; }
.tt-body { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tt-title { color: #18181b; font-size: .58rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-text { color: #71717a; font-size: .54rem; line-height: 1.25; }

@keyframes tk-toast {
    0%, 28% { opacity: 0; transform: translateY(-140%); }
    36% { opacity: 1; transform: translateY(0); }
    38% { transform: translateY(2px); }
    40%, 66% { opacity: 1; transform: translateY(0); }
    76%, 100% { opacity: 0; transform: translateY(-140%); }
}
@keyframes tk-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tap-card, .tap-phone, .tp-btn, .tap-signal i, .tp-toast { animation: none; }
    .tap-signal i:first-child { opacity: .9; }
    .tp-toast { opacity: 1; transform: none; }
}

/* ============================================================
   İSTATİSTİK
   ============================================================ */
.hx-stats { margin-top: 8px; }
.hx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
    overflow: hidden;
}
.hx-stats-grid > div { padding: 22px 24px; border-right: 1px solid var(--border); }
.hx-stats-grid > div:last-child { border-right: 0; }
.hx-stats-grid .n { font-size: 1.5rem; font-weight: 600; color: var(--foreground); letter-spacing: -.03em; }
.hx-stats-grid .l { color: var(--muted-foreground); font-size: .875rem; margin-top: 2px; }

/* ============================================================
   MARKALAR
   ============================================================ */
.hx-partners { padding: clamp(36px, 5vw, 56px) 0; }
.hx-partners-label {
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

/* ============================================================
   HİZMET / DEĞER KARTLARI
   ============================================================ */
.hx-offer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.hx-ocard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.hx-ocard:hover { border-color: var(--muted-foreground); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: inherit; }
.hx-ocard .oc-top { display: flex; align-items: center; justify-content: space-between; }
.hx-ocard .ic {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
}
.hx-ocard .ic svg { width: 20px; height: 20px; stroke: currentColor; }
.hx-ocard .wave { width: 20px; height: 20px; color: var(--border); stroke: currentColor; }
.hx-ocard h3 { margin: 4px 0 0; font-size: 1.0625rem; }
.hx-ocard p { color: var(--muted-foreground); font-size: .9375rem; margin: 0; }
.hx-ocard .oc-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--primary);
    font-size: .875rem;
    font-weight: 500;
}
.hx-ocard .oc-more svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .15s ease; }
a.hx-ocard:hover .oc-more svg { transform: translateX(3px); }

/* ============================================================
   KENDİ KARTINI TASARLA
   ============================================================ */
.hx-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hx-design-text h2 { margin: 14px 0 12px; }
.hx-design-text p { color: var(--muted-foreground); font-size: 1.0625rem; margin-bottom: 24px; max-width: 46ch; }

/* Kart destesi: üç kart üst üste yelpaze gibi durur ve yavaşça süzülür
   (eski sitedeki sahnenin karşılığı). Her katmanın kayması --x/--y,
   eğimi --r ile verilir; animasyon gecikmesi blade'den --d ile gelir. */
.hx-stack {
    position: relative;
    min-height: 400px;
    perspective: 1200px;
}
.hx-dcard {
    position: absolute;
    top: 50%; left: 50%;
    width: min(370px, 92%);
    aspect-ratio: 1.586;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--gradient-card);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--r, 0deg));
    animation: tk-card-float 9s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    will-change: transform;
}
.hx-dcard.d-dark { --x: -34px; --y: -46px; --r: -7deg; z-index: 3; }
.hx-dcard.d-green { --x: 6px; --y: 0px; --r: -5deg; z-index: 2; }
.hx-dcard.d-white { --x: 46px; --y: 46px; --r: -3deg; z-index: 1; }

@keyframes tk-card-float {
    0%, 100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--r, 0deg)); }
    50% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px) - 14px)) rotate(calc(var(--r, 0deg) + 1.4deg)); }
}

@media (prefers-reduced-motion: reduce) {
    .hx-dcard { animation: none; }
}
.hx-dcard.d-white { background: #fafafa; border-color: #e4e4e7; color: #18181b; }
.hx-dcard.d-white .dc-num, .hx-dcard.d-white b { color: #18181b; }
.hx-dcard.d-white .lbl, .hx-dcard.d-white small { color: #71717a; }
.hx-dcard.d-white .wave { color: #16a34a; }

.hx-dcard.d-green { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.hx-dcard.d-green .lbl, .hx-dcard.d-green small { color: color-mix(in srgb, var(--primary-foreground) 78%, transparent); }
.hx-dcard.d-green .dc-num, .hx-dcard.d-green b { color: var(--primary-foreground); }
.hx-dcard.d-dark {
    background: linear-gradient(150deg, rgba(46, 52, 48, .96), rgba(20, 22, 21, .94));
    border-color: rgba(255, 255, 255, .1);
    color: #fafafa;
    backdrop-filter: blur(2px);
}
.hx-dcard.d-dark .dc-num, .hx-dcard.d-dark b { color: #fafafa; }
.hx-dcard.d-dark .lbl, .hx-dcard.d-dark small { color: #a1a1aa; }
.hx-dcard .dc-top { display: flex; align-items: center; justify-content: space-between; }
.hx-dcard .lbl { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.hx-dcard .wave { width: 20px; height: 20px; stroke: currentColor; opacity: .8; }
.hx-dcard .dc-num { font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--foreground); }
.hx-dcard .dc-bot { display: flex; align-items: flex-end; justify-content: space-between; }
.hx-dcard small { display: block; font-size: .75rem; color: var(--muted-foreground); }
.hx-dcard b { font-size: .9375rem; font-weight: 600; }
.hx-dcard .dc-chip { width: 34px; height: 25px; border-radius: 5px; background: linear-gradient(140deg, #e6c67f, #c19a45); }

/* ============================================================
   3 ADIM
   ============================================================ */
.hx-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    counter-reset: tk-step;
}
.hx-step {
    position: relative;
    padding: 24px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.hx-step::before {
    counter-increment: tk-step;
    content: counter(tk-step);
    position: absolute;
    top: 20px; right: 22px;
    color: var(--border);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.hx-step.feat { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.hx-step .si {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    margin-bottom: 14px;
}
.hx-step .si svg { width: 20px; height: 20px; stroke: currentColor; }
.hx-step h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.hx-step p { color: var(--muted-foreground); font-size: .9375rem; margin: 0; }

/* ============================================================
   NEDEN BİZ
   ============================================================ */
.hx-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hx-why-text h2 { margin: 14px 0 14px; }
.hx-why-text h2 .hl { color: var(--primary); }
.hx-why-text > p { color: var(--muted-foreground); font-size: 1.0625rem; max-width: 48ch; }
.hx-why-stars { display: flex; gap: 3px; margin: 0 0 16px; color: var(--primary); }
.hx-why-stars svg { width: 16px; height: 16px; fill: currentColor; }
.hx-why-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.hx-why-ask {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted-foreground);
    font-size: .9375rem;
    font-weight: 500;
}
.hx-why-ask svg { width: 16px; height: 16px; stroke: currentColor; }
.hx-why-ask:hover { color: var(--primary); }

/* Sol taraftaki özellik listesi */
.hx-why-list { display: grid; gap: 10px; }
.hx-why-item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.hx-why-item .wic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
}
.hx-why-item .wic svg { width: 19px; height: 19px; stroke: currentColor; }
.hx-why-item .v { font-size: 1.0625rem; font-weight: 600; color: var(--foreground); }
.hx-why-item .t { color: var(--muted-foreground); font-size: .9375rem; }

/* ============================================================
   BLOG KARTLARI
   ============================================================ */
.hx-blog, .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.hx-bcard, .blog-card {
    display: flex;
    flex-direction: column;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hx-bcard:hover, .blog-card:hover { border-color: var(--muted-foreground); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: inherit; }
.hx-bcard .thumb, .blog-thumb {
    aspect-ratio: 16 / 9;
    background: var(--secondary);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.hx-bcard .thumb img, .blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hx-bcard .ph, .blog-thumb .ph { display: grid; place-items: center; height: 100%; color: var(--border); }
.hx-bcard .ph svg, .blog-thumb .ph svg { width: 40px; height: 40px; stroke: currentColor; }
.hx-bcard .body, .blog-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.hx-bcard h3, .blog-card h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.hx-bcard p, .blog-card p { color: var(--muted-foreground); font-size: .9375rem; margin: 0; }
.hx-bcard .meta, .blog-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--muted-foreground);
    font-size: .8125rem;
}
.hx-bcard .meta svg { width: 14px; height: 14px; stroke: currentColor; }

/* Blog silo kartları */
.blog-silo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
.blog-silo-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s ease;
}
.blog-silo-card:hover { border-color: var(--primary); }
.blog-silo-card > svg:first-child { flex: 0 0 auto; width: 22px; height: 22px; color: var(--primary); stroke: currentColor; }
.blog-silo-card div { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.blog-silo-card strong { color: var(--foreground); font-size: .9375rem; font-weight: 600; }
.blog-silo-card span { color: var(--muted-foreground); font-size: .8125rem; }
.blog-silo-card .ar { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted-foreground); stroke: currentColor; transition: transform .15s ease; }
.blog-silo-card:hover .ar { transform: translateX(3px); color: var(--primary); }

/* ============================================================
   KULLANIM SENARYOLARI
   ============================================================ */
.hx-review {
    flex: 0 0 auto;
    width: 330px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.hx-review .stars { display: flex; gap: 2px; color: var(--primary); }
.hx-review .stars svg { width: 14px; height: 14px; fill: currentColor; }
.hx-review p { color: var(--text); font-size: .9375rem; margin: 0; }
.hx-review .who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.hx-review .av {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    font-size: .875rem;
}
.hx-review .nm { color: var(--foreground); font-size: .9375rem; font-weight: 500; }
.hx-review .rl { color: var(--muted-foreground); font-size: .8125rem; }

/* ============================================================
   CTA ŞERİDİ
   ============================================================ */
.cta-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 5vw, 56px) 24px;
    text-align: center;
    background: linear-gradient(158deg, color-mix(in srgb, var(--primary) 7%, var(--secondary)) 0%, var(--secondary) 62%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin: 0; max-width: 22ch; }
.cta-band p { color: var(--muted-foreground); margin: 0 0 8px; max-width: 52ch; }

/* ============================================================
   DETAY DÜZENİ (blog / hizmet)
   ============================================================ */
.detail-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.detail-layout.svc { grid-template-columns: minmax(0, 1fr) 300px; }
.detail-layout.svc .detail-main { order: 0; }
.detail-layout.svc .detail-aside { order: 1; }

.detail-aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 14px; }
.aside-card {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}
.aside-card.cta { background: var(--secondary); }
.aside-card h3 { margin: 0 0 6px; font-size: 1rem; }
.aside-card p { color: var(--muted-foreground); font-size: .875rem; margin: 0 0 14px; }
.side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
}
.side-head svg { width: 15px; height: 15px; stroke: currentColor; }

.aside-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.aside-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: .9rem;
}
.aside-links a:hover { background: var(--secondary); color: var(--foreground); }
.aside-links .li-ic { display: grid; place-items: center; width: 18px; height: 18px; color: var(--primary); }
.aside-links .li-ic svg { width: 17px; height: 17px; stroke: currentColor; }

/* İçindekiler */
.toc { display: flex; flex-direction: column; gap: 1px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.toc a {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid var(--border);
    color: var(--muted-foreground);
    font-size: .875rem;
    line-height: 1.45;
}
.toc a:hover { color: var(--foreground); }
.toc a.active { border-left-color: var(--primary); color: var(--primary); }
.toc .lv3 a { padding-left: 22px; font-size: .8125rem; }
.toc-card.is-empty { display: none; }

/* Paylaş */
.share-row { display: flex; gap: 8px; }
.share-row a {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted-foreground);
}
.share-row a:hover { background: var(--secondary); color: var(--foreground); }
.share-row svg { width: 15px; height: 15px; fill: currentColor; }
.share-row .ic-ok, .share-row .copied .ic-link { display: none; }
.share-row .copied .ic-ok { display: block; stroke: var(--primary); fill: none; }
.copy-toast {
    display: block;
    margin-top: 8px;
    color: var(--primary);
    font-size: .8125rem;
    opacity: 0;
    transition: opacity .2s ease;
}
.copy-toast.show { opacity: 1; }

.post-cover {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.post-cover img { width: 100%; height: auto; }

.detail-ic {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    color: var(--primary);
    margin-bottom: 24px;
}
.detail-ic svg { width: 28px; height: 28px; stroke: currentColor; }

.post-byline { color: var(--muted-foreground); }

.post-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.post-related h3 { font-size: 1rem; margin-bottom: 14px; }
.related-links { display: flex; flex-wrap: wrap; gap: 8px; }
.related-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--gradient-card);
    color: var(--text);
    font-size: .875rem;
}
.related-links a:hover { border-color: var(--primary); color: var(--foreground); }
.related-links .ri { display: grid; place-items: center; width: 16px; height: 16px; color: var(--primary); }
.related-links .ri svg { width: 16px; height: 16px; stroke: currentColor; }

/* ============================================================
   FİYAT SAYFASI
   ============================================================ */

/* Sayfa üst alanının hemen altındaki fiyat özeti — hero'ya taşmaz. */
.price-intro { padding: clamp(26px, 3.5vw, 40px) 0 0; }
.price-intro p {
    max-width: 640px;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.65;
}
.price-intro strong { color: var(--foreground); font-weight: 600; }

.fp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}
.fp-card {
    position: relative;
    background: var(--gradient-card);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 30px 28px;
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.fp-badge {
    position: absolute;
    top: -12px; left: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: .75rem;
    font-weight: 600;
}
.fp-name { font-size: 1.375rem; margin: 6px 0 2px; }
.fp-sub { color: var(--muted-foreground); font-size: .9375rem; margin: 0 0 18px; }
.fp-price { padding: 16px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.fp-range { display: block; font-size: 2.5rem; font-weight: 700; color: var(--foreground); letter-spacing: -.035em; line-height: 1; }
.fp-cur { font-size: 1.5rem; font-weight: 600; margin-left: 2px; color: var(--primary); }
.fp-note { display: block; margin-top: 6px; color: var(--muted-foreground); font-size: .875rem; }
.fp-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.fp-list li { position: relative; padding-left: 28px; color: var(--text); font-size: .9375rem; }
.fp-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.fp-fine { margin: 12px 0 0; color: var(--muted-foreground); font-size: .8125rem; text-align: center; }

.fp-side { padding-top: 6px; }
.fp-h { font-size: 1.25rem; margin: 0 0 6px; }
.fp-lead { color: var(--muted-foreground); font-size: .9375rem; margin: 0 0 18px; }
.fp-factor { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.fp-factor:last-child { border-bottom: 0; }
.fp-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--primary);
}
.fp-ic svg { width: 19px; height: 19px; stroke: currentColor; }
.fp-factor h3 { font-size: 1rem; margin: 0 0 4px; }
.fp-factor p { color: var(--muted-foreground); font-size: .9rem; margin: 0; }
.fp-factor a { color: var(--primary); }

.fp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 40px auto 0; }
.fp-trust div {
    padding: 18px 20px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
    font-size: .9rem;
}
.fp-trust strong { display: block; margin-bottom: 3px; color: var(--foreground); font-weight: 600; }
.fp-faq { max-width: 820px; margin: 48px auto 0; }

/* ============================================================
   İLETİŞİM — WhatsApp hızlı teklif
   ============================================================ */
.waq-panel {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(24px, 4vw, 36px);
}
.waq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.waq-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.waq-title { font-size: 1.5rem; margin: 0 0 8px; }
.waq-desc { color: var(--muted-foreground); font-size: .9375rem; margin: 0 0 24px; max-width: 46ch; }
.waq-group { margin-bottom: 18px; }
.waq-label { color: var(--muted-foreground); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; }
.waq-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.waq-opt {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--gradient-card);
    color: var(--text);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.waq-opt:hover { border-color: var(--muted-foreground); color: var(--foreground); }
.waq-opt.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.waq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.waq-field label { font-size: .8125rem; }
.waq-btn { width: 100%; margin-top: 22px; }
.waq-btn svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.waq-note { margin: 12px 0 0; color: var(--muted-foreground); font-size: .8125rem; text-align: center; }

/* İletişim kartları */
.contact-info { display: grid; gap: 10px; }
.ci-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s ease;
}
a.ci-card:hover { border-color: var(--primary); color: inherit; }
.ci-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
}
.ci-ic svg { width: 19px; height: 19px; stroke: currentColor; }
.ci-card .lbl { color: var(--muted-foreground); font-size: .8125rem; }
.ci-card .val { color: var(--foreground); font-size: .9375rem; font-weight: 500; }
.ci-card iframe { border: 0; }

/* ============================================================
   HAKKIMIZDA — kurucu kartı
   ============================================================ */
.hx-founder {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.hx-founder-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 140px; margin-inline: auto; }
.hx-founder-avatar {
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 2rem;
    font-weight: 600;
}
.hx-founder-id { text-align: center; }
.hx-founder-id .n { color: var(--foreground); font-weight: 600; }
.hx-founder-id .r { color: var(--muted-foreground); font-size: .8125rem; }
.hx-founder-body { flex: 1 1 340px; min-width: 260px; color: var(--text); font-size: 1rem; line-height: 1.8; }
.hx-founder-body p { margin: 0 0 14px; }
.hx-founder-quote { margin: 4px 0 0; font-size: 1.0625rem; }

/* ============================================================
   DUYARLI
   ============================================================ */
@media (max-width: 980px) {
    /* minmax(0, 1fr): düz 1fr sütun, içeriğin min-content genişliğine kadar
       büyür. Hero sahnesindeki kart + telefon dar ekranda 406px istiyor, sütun
       390px'lik ekranı aşıyor ve metin ile telefon sağdan kesiliyordu. */
    .hx-hero-grid, .hx-design-grid, .hx-why-grid { grid-template-columns: minmax(0, 1fr); }
    .hx-hero-grid > *, .hx-visual, .tap-scene { min-width: 0; }
    .hx-visual { order: -1; }
    /* Dar ekranda deste daralır, katmanlar birbirine yaklaşır. */
    .hx-stack { min-height: 330px; }
    .hx-dcard { width: min(320px, 86%); }
    .hx-dcard.d-dark { --x: -22px; --y: -32px; }
    .hx-dcard.d-white { --x: 30px; --y: 32px; }
    .hx-dcard .dc-num { font-size: 1.1rem; }
    .hx-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hx-stats-grid > div:nth-child(2) { border-right: 0; }
    .hx-stats-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .detail-layout, .detail-layout.svc { grid-template-columns: minmax(0, 1fr); }
    .detail-main, .detail-aside { min-width: 0; }
    .detail-aside { position: static; order: 1 !important; }
    .detail-layout.svc .detail-main { order: 0 !important; }
    .fp-wrap { grid-template-columns: 1fr; }
    .fp-trust { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Hero sahnesi dar ekranda: kart ve telefon 354px'lik sütunu paylaşır;
       bildirim balonu tek satıra iner ki telefondaki adı örtmesin. */
    .hx-lead { font-size: 1.0625rem; line-height: 1.6; margin-bottom: 22px; }
    .tap-scene { gap: 8px; }
    .tap-card { width: min(320px, 47%); }
    .tap-phone { width: min(180px, 40%); }
    .tp-toast { top: 12px; }
    .tp-toast .tt-text { display: none; }
    .hx-stats-grid { grid-template-columns: 1fr; }
    .hx-stats-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .hx-stats-grid > div:last-child { border-bottom: 0; }
    .blog-silo { grid-template-columns: 1fr; }
    .waq-options, .waq-fields { grid-template-columns: 1fr; }
    .hx-review { width: 280px; }
    .hx-founder { padding: 22px; }
}

/* --- order.css --- */
/* Sipariş konfigüratörü (ürün sayfası). */

.ord-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

/* ---------- Sol: kart önizlemesi ---------- */
.ord-preview { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; align-items: center; gap: 16px; }

.ord-card-stage {
    width: 100%;
    padding: clamp(18px, 3vw, 30px);
    border-radius: var(--radius-xl);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    perspective: 1400px;
}
.ord-card {
    --card-bg: #18181b;
    --card-ink: #fafafa;
    --card-print: #d4af37;
    position: relative;
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: 20px;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg);
}
.ord-card[data-face="back"] { transform: rotateY(180deg); }

.ord-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 3vw, 30px);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--card-ink);
    border: 1px solid rgba(255, 255, 255, .08);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.ord-face-back { transform: rotateY(180deg); flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }

.ord-qr {
    flex: 0 0 auto;
    width: clamp(64px, 11vw, 92px);
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    border: 2px solid var(--card-print);
}
.ord-qr svg { width: 100%; height: auto; display: block; }

.ord-name {
    flex: 1 1 auto;
    text-align: center;
    color: var(--card-print);
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    font-weight: 500;
    letter-spacing: -.01em;
    word-break: break-word;
}
.ord-wave { flex: 0 0 auto; width: 26px; height: 26px; color: var(--card-print); }
.ord-wave svg { width: 100%; height: 100%; stroke: currentColor; }

.ord-logo { display: block; max-width: 60%; }
.ord-logo img { max-height: 46px; width: auto; }
.ord-logo-ph { color: var(--card-print); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.ord-back-meta { color: var(--card-ink); opacity: .55; font-size: .8rem; }

.ord-flip { align-self: center; }

.ord-benefits { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 9px; width: 100%; }
.ord-benefits li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted-foreground); font-size: .9rem; }
.ord-benefits svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--primary); stroke: currentColor; }

/* ---------- Sağ: konfigüratör ---------- */
.ord-config {
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px, 3vw, 32px);
}
.ord-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 12px; }

.ord-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.ord-badge-off {
    padding: 4px 9px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}
.ord-list-price { color: var(--muted-foreground); text-decoration: line-through; font-size: 1rem; }
.ord-current-price { color: var(--foreground); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }

.ord-field { margin-bottom: 18px; }
.ord-label { display: block; margin-bottom: 8px; color: var(--foreground); font-size: .875rem; font-weight: 500; }
.ord-field label { color: var(--foreground); font-size: .8125rem; font-weight: 500; }
.ord-field label .opt { color: var(--muted-foreground); font-weight: 400; }
.ord-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ord-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Dosya seçme alanı.
   Tarayıcının kendi düğmesi İngilizce ("Choose File / No file chosen") ve
   tema dışı görünüyordu. Gerçek input görsel olarak gizlenir ama klavye ve
   ekran okuyucu için erişilebilir kalır (display:none KULLANILMAZ; o,
   alanı erişilebilirlik ağacından da çıkarırdı). */
.ord-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    cursor: pointer;
}
.ord-file input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.ord-file-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 500;
}
.ord-file:hover .ord-file-btn { border-color: var(--primary); }
.ord-file input[type="file"]:focus-visible + .ord-file-btn {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.ord-file-ad {
    min-width: 0;
    color: var(--muted-foreground);
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Seçenek kartları (kart tipi, paket) */
.ord-options { display: grid; gap: 8px; }
.ord-options-2 { grid-template-columns: 1fr 1fr; }
.ord-options-3 { grid-template-columns: repeat(3, 1fr); }

.ord-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px 12px 14px;
    min-height: 62px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--gradient-card);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ord-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ord-opt:hover { border-color: var(--muted-foreground); }
.ord-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.ord-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.ord-opt-body { display: flex; flex-direction: column; min-width: 0; }
.ord-opt-title { color: var(--foreground); font-size: .9375rem; font-weight: 500; }
.ord-opt-hint { padding-right: 46px; }
.ord-opt-hint { color: var(--muted-foreground); font-size: .8125rem; line-height: 1.35; }
.ord-opt-tag {
    position: absolute;
    right: 32px; bottom: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: .6875rem;
    font-weight: 600;
}
.ord-opt-tag.is-green { background: var(--primary-soft); color: var(--primary); }
.ord-radio {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
}
.ord-opt:has(input:checked) .ord-radio { border-color: var(--primary); }
.ord-opt:has(input:checked) .ord-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--primary);
}

/* Renk seçimleri */
.ord-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--gradient-card);
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease;
}
.ord-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ord-swatch .dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }
.ord-swatch:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Özet şeridi */
.ord-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin: 4px 0 22px;
    background: var(--secondary);
    border-radius: var(--radius);
}
.ord-summary .k { display: block; color: var(--muted-foreground); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.ord-summary .v { display: block; color: var(--foreground); font-size: 1.0625rem; font-weight: 600; }

/* Alt paneller */
.ord-panel { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.ord-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ord-panel .eyebrow { color: var(--muted-foreground); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.ord-panel h3 { margin: 10px 0 6px; font-size: 1.125rem; }
.ord-panel-note { color: var(--muted-foreground); font-size: .875rem; margin: 0 0 16px; }
.ord-chip {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--foreground);
    color: var(--background);
    font-size: .75rem;
    font-weight: 500;
}

.ord-info {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--primary-soft);
    border: 1px solid rgba(22, 163, 74, .2);
    border-radius: var(--radius);
    color: var(--foreground);
    font-size: .875rem;
}
.ord-info svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--primary); stroke: currentColor; }

/* Kart satırları */
.ord-card-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
}
.ord-card-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--muted-bg);
    border-bottom: 1px solid var(--border);
}
.ord-card-no {
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.ord-card-title { flex: 1 1 auto; color: var(--foreground); font-size: .9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-card-tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--gradient-card);
    color: var(--muted-foreground);
    font-size: .6875rem;
    font-weight: 500;
}
.ord-card-row-body { padding: 14px; }
.ord-card-row-body .ord-field:last-child { margin-bottom: 0; }

.ord-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; color: var(--muted-foreground); font-size: .875rem; }
.ord-check input { margin-top: 4px; }
.ord-check a { color: var(--primary); }

.ord-submit { width: 100%; }
.ord-fine { margin: 12px 0 0; color: var(--muted-foreground); font-size: .8125rem; text-align: center; }

/* Sonuç mesajları */
.ord-success, .ord-error {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--gradient-card);
}
.ord-success { border-color: var(--primary); background: var(--primary-soft); }
.ord-success .ic {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary); color: #fff;
}
.ord-success .ic svg { width: 18px; height: 18px; stroke: currentColor; }
.ord-success strong, .ord-error strong { display: block; color: var(--foreground); margin-bottom: 3px; }
.ord-success p { margin: 0; color: var(--muted-foreground); font-size: .9375rem; }
.ord-error { border-color: #ef4444; background: rgba(239, 68, 68, .06); flex-direction: column; gap: 6px; }
.ord-error ul { margin: 0; padding-left: 18px; color: #b91c1c; font-size: .9rem; }

@media (max-width: 980px) {
    .ord-grid { grid-template-columns: 1fr; }
    .ord-preview { position: static; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .ord-options-2, .ord-options-3, .ord-row, .ord-field-pair { grid-template-columns: 1fr; }
    .ord-opt-tag { position: static; align-self: flex-start; }
}