/* 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;
    /* Mobil alt çubuğun yüksekliği (layout.css .mobile-bar: 50 + 2x6 dolgu + kenarlık). */
    --mobile-bar-h: 63px;

    /*
     * 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);
    /* Çerez bandı açıkken (theme.js --cc-h yazar) odaklanan öğe bandın arkasında kalmaz. */
    scroll-padding-bottom: calc(var(--cc-h, 0px) + 16px);
}

/* "İçeriğe geç": yalnız klavye odağında görünür. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--primary-foreground); outline: 2px solid var(--foreground); outline-offset: 2px; }
.skip-target:focus { outline: none; }

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(min(320px, 100%), 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;
    /* 16 px: iOS daha küçük alan yazısında odakta sayfayı yakınlaştırır. */
    font-size: 1rem;
    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: #fca5a5; }
.alert:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
.form-errors ul { margin: 6px 0 0; padding-left: 18px; }
/* Alan altındaki hata metni: koyu zeminde okunur kırmızı. */
.field-error { margin-top: 6px; color: #fca5a5; font-size: .8125rem; line-height: 1.45; }
.form-control[aria-invalid="true"] { border-color: #ef4444; }

/* --- 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;
    width: 100%;
    padding: 16px 18px;
    background: none;
    border: 0;
    color: var(--foreground);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
/* Soru başlığı (H3) yalnız anlam taşır: görünüm düğmeden gelir. */
.faq-h { margin: 0; font: inherit; letter-spacing: normal; line-height: inherit; }
.faq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.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: "\2212"; background: var(--primary); color: var(--primary-foreground); }
.fp-q-h { margin: 0; color: inherit; font: inherit; letter-spacing: normal; line-height: inherit; }
.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; }
/* Onay çerezi yoksa (html.cc-need, head'deki satır içi betik) bant ilk
   çizimde görünür; tema betiğini beklemez. Betik sınıfı kaldırıp devralır. */
html.cc-need .cookie-consent[hidden] .cc-banner { visibility: visible; }

.cc-banner {
    position: fixed;
    /* Masaüstünde sol alt köşede dar kart: ortada 1000 px'lik bant hizmet
       sayfasındaki yan sütunun "Hemen Ara" ve "WhatsApp" düğmelerini örtüyordu. */
    left: 16px; right: auto; bottom: 16px;
    z-index: 960;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 0;
    padding: 16px 18px;
    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-banner-actions .cc-btn { flex: 1 1 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; padding-right: 40px; color: var(--foreground); font-size: 1.2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.cc-modal-title:focus { outline: none; }
.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: dokunma hedefi en az 32 px. */
.footer-legal-cookie {
    min-height: 32px;
    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 alçak şerit (yaklaşık 120 px): 240 px'lik bant
       390x844 ekranın %28'ini kaplıyor, ana sayfa başlığını örtüyordu (13 Ekim
       2026). Başlık gizlenir, metin iki satırda kendi içinde kayar; Reddet ve
       Kabul yan yana eşit genişlikte, "Tercihleri Yönet" altta bağ görünümünde. */
    .cc-banner {
        left: 8px; right: 8px;
        width: auto;
        max-width: none;
        bottom: calc(70px + env(safe-area-inset-bottom));
        gap: 6px;
        padding: 8px 12px;
    }
    .cc-title { display: none; }
    .cc-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
    .cc-banner-actions .cc-btn { padding: 8px 10px; }
    .cc-banner-actions [data-cc-manage] {
        grid-column: 1 / -1;
        min-height: 26px;
        padding: 0 8px;
        border: 0;
        background: none;
        color: var(--muted-foreground);
        font-size: .8125rem;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* 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: 2.95em;
        overflow-y: auto;
        overscroll-behavior: contain;
        font-size: .8125rem;
    }
    .cc-text { margin: 0; font-size: .8125rem; line-height: 1.45; }
}

/* --- 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,
.main-nav .has-sub:focus-within .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); }
/* Dokunma hedefi: metin aynı yerde kalır, tıklanabilir alan 24 px'in üstüne çıkar. */
.breadcrumb a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.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; }
/* Altbilgi bağları 16 px yüksekliğindeydi: dikey dolgu dokunma alanını büyütür,
   negatif kenar boşluğu satır aralığını değiştirmez. */
.footer-col li a, .footer-contact a { display: inline-block; padding: 6px 0; margin: -6px 0; }
/* 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 1 auto; min-width: 0; 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%);
        /* Kapalı çekmece ekran dışında olsa da Tab ile 9 görünmez durak veriyordu:
           kapanış kayması bitince visibility ile odak sırasından çıkar. */
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        overflow-y: auto;
        z-index: 950;
    }
    .main-nav.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }

    .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: "\2212"; }
    .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; }

    /* Klavyeyle gezilen öğe alttaki sabit çubuğun (ve açıksa çerez bandının)
       arkasında kalmasın (W3C C43). */
    html { scroll-padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--cc-h, 0px) + 16px); }
}

@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. */
    /* Künye satırı dar ekranda alt satıra iner; sabit genişlik 358 px altında sayfayı yana taşırıyordu. */
    .footer-made { flex: 1 1 100%; 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(min(280px, 100%), 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(min(260px, 100%), 1fr));
    gap: 16px;
    counter-reset: tk-step;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 5 adım: geniş ekranda tek sıra, daralınca 3+2, telefonda tek sütun. */
.hx-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hx-steps-5 .hx-step { padding: 22px 18px; }
.hx-steps-5 .hx-step h3 { font-size: 1rem; }
.hx-steps-5 .hx-step p { font-size: .9375rem; }
@media (max-width: 1100px) {
    /* 2 sütun, son adım tam genişlik: boş hücre kalmaz. */
    .hx-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-steps-5 .hx-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    /* Telefonda beş büyük kart yerine tek çizgi üzerinde zaman çizelgesi. */
    .hx-steps-5 { grid-template-columns: 1fr; gap: 0; }
    .hx-steps-5 .hx-step {
        background: none;
        border: 0;
        border-left: 2px solid var(--border);
        border-radius: 0;
        padding: 4px 0 26px 20px;
        margin-left: 10px;
    }
    .hx-steps-5 .hx-step:last-child { border-left-color: var(--primary); padding-bottom: 4px; }
    .hx-steps-5 .hx-step .si { display: none; }
    .hx-steps-5 .hx-step::before {
        position: static;
        display: block;
        margin-bottom: 4px;
        color: var(--primary);
        opacity: 1;
        font-size: .8125rem;
        letter-spacing: .06em;
    }
}
.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(--muted-foreground);
    opacity: .6;
    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-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(min(300px, 100%), 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; }
/* Yan kart etiketi: eski H3 ile aynı görünüm, başlık ana hattına girmez. */
.aside-card .aside-title { margin: 0 0 6px; color: var(--foreground); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.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 h2, .post-related h3 { font-size: 1rem; margin-bottom: 14px; letter-spacing: -.02em; }
.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); }
/* Metin içi bağ yalnız renkle ayrılıyordu (1,12:1): alt çizgi eklendi. */
.fp-factor p a { text-decoration: underline; text-underline-offset: 3px; }

.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; }
.ci-card { min-width: 0; }
.ci-card > div:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Harita: tıklayınca yüklenen çerçevenin yer tutucusu (aynı alan, kayma yok). */
.map-embed { margin-top: 18px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; border: 0; }
.map-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 300px;
    padding: 24px 18px;
    background: var(--gradient-card);
    text-align: center;
}
.map-ph-art { width: min(320px, 100%); height: auto; color: var(--primary); }
.map-ph-text { margin: 0; color: var(--foreground); font-size: .9375rem; font-weight: 500; max-width: 40ch; }
.map-ph-note { margin: 0; color: var(--muted-foreground); font-size: .8125rem; }

/* ============================================================
   HAKKIMIZDA - kurucu kartı
   ============================================================ */
.hx-founder {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 900px;
    /* Bölüm başlığı solda; kart da aynı hizada başlar. */
    margin: 0;
    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; }
/* Kurucu bölümü girişle değerler arasında; iki aralık eşit kalsın diye kendi dikey boşluğu yok. */
.section.about-founder { padding-block: 0; }
.hx-founder-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-soft); }
.hx-founder-id .l { display: inline-block; margin-top: 6px; color: var(--primary); font-size: .8125rem; font-weight: 500; }

/* ============================================================
   HAKKIMIZDA - giriş ve künye (kartın arka yüzü gibi okunur)
   ============================================================ */
.about-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
    align-items: start;
}
.about-intro-text h2 { margin: 16px 0 18px; font-size: clamp(1.5rem, 3vw, 2.25rem); text-wrap: balance; }
.about-intro-text p { margin: 0 0 14px; max-width: 62ch; color: var(--text); font-size: 1.0625rem; line-height: 1.8; }
.about-intro-text .btn { margin-top: 14px; }
.about-facts {
    padding: 22px 24px 18px;
    border-radius: 18px;
    background: linear-gradient(150deg, #1c1c1f, #101012);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: var(--shadow-lg);
}
.af-top { display: flex; align-items: flex-start; justify-content: space-between; }
.af-title { margin: 18px 0 6px; color: #fafafa; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.about-facts dl { margin: 0; }
.about-facts dl > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.about-facts dt { color: var(--muted-foreground); font-size: .8125rem; }
.about-facts dd { margin: 0; color: var(--foreground); font-size: .9375rem; }
.af-link { margin: 4px 0 0; padding: 11px 0 4px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .9375rem; }
.af-link a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.about-intro-text p a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.af-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #a1a1aa;
    font-size: .75rem;
}

/* ============================================================
   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); }
    .about-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    /* Dar ekranda etiket değerin üstüne geçer; değer satıra tek kelime bırakmaz. */
    .about-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
    .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; }
}

/* ============================================================
   YAPILI İÇERİK SAYFALARI (/sektorler, /sehirler, /ali-bardiz)
   Metin panelde düz yazılır; theme_content_sections() başlıklara göre
   böler, şablon her bölümü yapısına göre çizer. 30 Eylül 2026.
   ============================================================ */
.cs-top { padding-bottom: 0; }
.cs-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.cs-lead { color: var(--text); font-size: 1.1875rem; line-height: 1.7; max-width: 62ch; }
.cs-lead a, .answer-body a, .cs-band-body a, .cs-col-text a, .cs-qa-a a, .ship-track a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Kısa cevap: sayfanın ana sorusuna verilen cevap. Soldaki yeşil şerit düz
   durur (köşe kavsine girmez), bu yüzden kenarlık değil ayrı bir öğedir. */
.answer-box {
    position: relative;
    padding: 24px 26px 24px 29px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
}
.answer-box::before {
    content: "";
    position: absolute;
    top: 20px; bottom: 20px; left: -1px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.answer-box h2 { margin: 0 0 10px; font-size: 1.1875rem; letter-spacing: -.01em; line-height: 1.35; }
.answer-body { color: var(--text); font-size: 1.0625rem; line-height: 1.7; }

/* Yazı ve hizmet gövdesindeki kısa cevap kutusu (partials/content-body). */
.post-content .answer-box { margin: 1.75rem 0 2.25rem; }
.post-content > .answer-box:first-child { margin-top: 0; }
.post-content .answer-box h2 { margin: 0 0 10px; font-size: 1.1875rem; }
.post-content .answer-body > :last-child { margin-bottom: 0; }

/* Başlık alanındaki profil ekranı: başlığın alt çizgisinden yükselir. */
.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
}
.page-hero-aside {
    display: flex;
    align-items: flex-end;
    margin-bottom: calc(-1 * clamp(28px, 4vw, 44px));
}
.page-hero-aside .pro-screen { width: 100%; max-height: 300px; overflow: hidden; }
.hero-portrait {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--card);
}
.pro-screen .pro-screen-title { max-width: none; margin: 2px 0 12px; color: #18181b; font-size: .875rem; font-weight: 600; text-align: center; }

/* Grup atlama çubuğu: meslek grupları boyunca başlığın altında yapışık kalır. */
.cs-jump {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    margin-top: clamp(40px, 5vw, 64px);
    border-block: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.cs-jump ul {
    display: flex;
    gap: 8px;
    margin: 0 -4px;
    padding: 12px 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.cs-jump ul::-webkit-scrollbar { display: none; }
.cs-jump a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--foreground);
    font-size: .9375rem;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease;
}
.cs-jump a span { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cs-jump a:hover { border-color: var(--muted-foreground); background: var(--secondary); }
.cs-jump a[aria-current="true"] { border-color: var(--primary); background: var(--secondary); }
.cs-jump a[aria-current="true"] span { color: var(--primary); }
.cs-jump a:focus-visible, .cs-rows a:focus-visible, .fp-q summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Meslek grupları. Sayfa geneli scroll-padding başlık yüksekliğini zaten
   bıraktığı için burada yalnız çubuğun yüksekliği eklenir. */
.pro-groups { padding-top: clamp(40px, 5vw, 64px); }
.pro-group + .pro-group { margin-top: clamp(56px, 7vw, 88px); }
.pro-group h2, .pro-card { scroll-margin-top: 74px; }
.pro-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.pro-group-head h2 { margin: 0; }
.pro-group-head p { margin: 0; color: var(--muted-foreground); font-size: .9375rem; white-space: nowrap; }
.pro-group-body { max-width: 70ch; margin: -8px 0 24px; color: var(--text); }
.pro-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* Meslek kartı: altta kartın açtığı profilin ekranı yükselir. Listenin ilk
   maddesi profilin ana düğmesidir; sayfanın anlattığı şey tam olarak bu. */
.pro-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    overflow: hidden;
}
.pro-card h3 { margin: 0 0 8px; font-size: 1.1875rem; }
.pro-why { margin-bottom: 20px; color: var(--muted-foreground); font-size: .9375rem; line-height: 1.6; }
.pro-card > .pro-screen { flex: 1 0 auto; }
/* Aynı satırdaki kartlarda başlık, açıklama ve ekran aynı çizgiden başlar. */
@supports (grid-template-rows: subgrid) {
    .pro-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
}
.pro-screen {
    position: relative;
    padding: 24px 14px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #fafafa;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .4);
}
.pro-screen::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    width: 44px; height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #d4d4d8;
}
.pro-screen ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pro-screen li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f1f1f3;
    color: #18181b;
}
.pro-screen li.is-first { padding: 12px; background: #15803d; color: #fff; }
.pro-label { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.pro-note { color: #52525b; font-size: .8125rem; line-height: 1.45; }
.pro-screen li.is-first .pro-note { color: #fff; }

/* Meslek içermeyen bölümler: yan yana not */
.cs-notes-wrap { padding-top: 0; }
.cs-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, 48px); }
.cs-note { padding-top: 22px; border-top: 1px solid var(--border); }
.cs-note h2 { margin: 0 0 12px; font-size: 1.375rem; }
.cs-note .post-content { max-width: 68ch; }

/* Sayfa sonu bandı: metni içeriğin son bölümünden gelir. */
.cs-end { padding-top: 0; }
.cs-band-body { max-width: 62ch; color: var(--muted-foreground); }
.cs-band-body p { margin: 0 0 8px; }
.cs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }

/* Düz bölümler (gönderim sayfası): geniş ekranda başlık solda, içerik sağda. */
.cs-body { padding-top: clamp(48px, 6vw, 80px); }
.cs-block + .cs-block { margin-top: clamp(52px, 6vw, 80px); }
.cs-block > h2 { margin: 0 0 22px; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

/* Sipariş çizelgesi: adımlar gerçek bir sıra olduğu için numaralı ve bağlı. */
.ship-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: adim;
}
.ship-track li { position: relative; padding: 54px 24px 0 0; counter-increment: adim; }
.ship-track li::before {
    content: counter(adim);
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    background: var(--background);
    color: var(--primary);
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ship-track li::after {
    content: "";
    position: absolute;
    top: 18px; left: 36px; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--primary), var(--border));
}
.ship-track li:last-child::after { display: none; }
.ship-track strong { display: block; margin-bottom: 6px; color: var(--foreground); font-size: 1.0625rem; font-weight: 600; }
.ship-track p { margin: 0; color: var(--muted-foreground); font-size: .9375rem; line-height: 1.6; }

/* Teslim tablosu: başlık zemini satıra verilir (hücre dikişi görünmez). */
.cs-table table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 0; }
.cs-table thead tr { background: var(--secondary); }
.cs-table th { background: transparent; }
.cs-table th, .cs-table td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td:first-child { color: var(--foreground); font-weight: 600; }

/* Açılır sorular: soru H3 olarak kalır. */
.cs-qa summary h3 { margin: 0; color: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.cs-qa-a p { margin: 0 0 16px; color: var(--muted-foreground); font-size: .95rem; line-height: 1.65; }

/* Yazar sayfası: listeli bölümler yan yana, kutusuz; üst çizgiyle ayrılır. */
.cs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(28px, 4vw, 48px); }
.cs-col { padding-top: 20px; border-top: 1px solid var(--border); }
.cs-col h2 { margin: 0 0 12px; font-size: 1.1875rem; letter-spacing: -.01em; }
.cs-col-text { margin-top: 14px; color: var(--muted-foreground); font-size: .9375rem; }
.cs-rows { margin: 0; padding: 0; list-style: none; }
.cs-rows li + li { border-top: 1px solid var(--border); }
.cs-rows a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    color: var(--foreground);
    font-size: .9375rem;
    transition: color .15s ease;
}
.cs-rows a:hover .cs-row-label { color: var(--primary); }
.cs-row-meta { flex: 0 0 auto; color: var(--muted-foreground); font-size: .8125rem; }
.cs-row-ico { flex: 0 0 auto; align-self: center; width: 16px; height: 16px; color: var(--muted-foreground); transition: color .15s ease, transform .15s ease; }
.cs-rows a:hover .cs-row-ico { color: var(--primary); transform: translateX(2px); }
/* Düz maddeler (uzmanlık): ayırıcısız, bağlantı gibi görünmez. */
.cs-rows.is-plain li + li { border-top: 0; }
.cs-rows.is-plain li { position: relative; padding: 6px 0 6px 18px; color: var(--text); font-size: .9375rem; }
.cs-rows.is-plain li::before {
    content: "";
    position: absolute;
    top: 15px; left: 2px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

@media (min-width: 640px) {
    .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-block:not(.cs-block-wide) {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: clamp(32px, 4vw, 64px);
        align-items: start;
    }
    .cs-block:not(.cs-block-wide) > h2 { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: calc(var(--header-h) + 24px); }
    .cs-block:not(.cs-block-wide) > :not(h2) { grid-column: 2; }
}
@media (max-width: 900px) {
    .cs-intro { grid-template-columns: 1fr; }
    .page-hero-grid { grid-template-columns: 1fr; gap: 0; }
    .page-hero-aside { display: none; }
    /* Yazar portresi içeriktir: dar ekranda da görünür, küçülür. */
    .page-hero-aside.is-portrait { display: flex; width: 140px; margin-top: 28px; }
    /* Çubuk kaydırılabilir: sağ kenar solar, devamı olduğu anlaşılır. */
    .cs-jump ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
}
@media (max-width: 760px) {
    .ship-track { grid-template-columns: 1fr; }
    .ship-track li { padding: 4px 0 26px 54px; }
    .ship-track li::after { top: 36px; bottom: 0; left: 17px; right: auto; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--primary), var(--border)); }
}
@media (max-width: 640px) {
    .cs-lead { font-size: 1.0625rem; }
    .answer-box { padding: 20px 20px 20px 23px; }
    .answer-body { font-size: 1rem; }
    .pro-card { padding: 20px 18px 0; }
    .pro-group-head { flex-wrap: wrap; gap: 4px 16px; }
}

/* ============================================================
   ANA SAYFA: KISA TANIM
   ============================================================ */
.hx-def { padding-block: clamp(36px, 5vw, 56px) 0; }
.hx-def-box {
    max-width: 860px;
    padding: clamp(22px, 3vw, 32px);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--primary);
    border-radius: var(--radius-lg);
}
.hx-def-box h2 { margin: 12px 0 10px; }
.hx-def-box p { margin: 0; color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.75; }
.hx-def-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--primary);
    font-size: .9375rem;
    font-weight: 500;
}
.hx-def-link svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .15s ease; }
.hx-def-link:hover svg { transform: translateX(3px); }

/* ============================================================
   ANA SAYFA: ÖNE ÇIKAN ÜRÜN + DİĞER ÇÖZÜMLER
   ============================================================ */
.hx-flag {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    padding: clamp(20px, 3vw, 30px);
    background: var(--gradient-card);
    border: 1px solid var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    border-radius: var(--radius-lg);
}
.hx-flag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    aspect-ratio: 85.6 / 54;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(150deg, #1d3a2b 0%, #0f1f17 55%, #0b120e 100%);
    border: 1px solid rgba(34, 197, 94, .35);
    box-shadow: var(--shadow-md);
    transform: rotate(-3deg);
    color: var(--foreground);
}
.hx-flag-card .chip {
    position: absolute;
    top: 12px; left: 14px;
    width: 26px; height: 19px;
    border-radius: 4px;
    background: linear-gradient(140deg, #e6c67f, #c19a45);
}
.hx-flag-card .nfc { position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; color: var(--primary); }
.hx-flag-card b { font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }
.hx-flag-card small { color: var(--muted-foreground); font-size: .6875rem; }
.hx-flag-tag {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hx-flag h3 { margin: 0 0 6px; font-size: 1.1875rem; }
.hx-flag h3 a { color: inherit; }
.hx-flag h3 a:hover { color: var(--primary); }
.hx-flag p { margin: 0; color: var(--muted-foreground); font-size: .9375rem; }
.hx-flag-act { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.hx-flag-act .btn, .hx-price-act .btn { min-height: 44px; }
@media (min-width: 981px) { .hx-offer.hx-offer-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hx-offer-sub {
    margin: clamp(28px, 4vw, 40px) 0 14px;
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
@media (max-width: 980px) {
    .hx-flag { grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); }
    .hx-flag-act { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .hx-flag { grid-template-columns: 1fr; align-items: start; }
    .hx-flag-card { width: min(220px, 70%); }
}

/* ============================================================
   ANA SAYFA: FİYAT ÖZETİ
   ============================================================ */
.hx-pkgs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.hx-pkg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.hx-pkg.feat { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.hx-pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.hx-pkg h3 { margin: 0; font-size: 1.0625rem; }
.hx-pkg-off {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.hx-pkg p { margin: 0; }
.hx-pkg-qty { color: var(--muted-foreground); font-size: .9375rem; }
.hx-pkg .hx-pkg-price { margin-top: 10px; }
.hx-pkg-price b { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hx-pkg-price span { color: var(--muted-foreground); font-size: .875rem; }
.hx-pkg-total { color: var(--muted-foreground); font-size: .875rem; font-variant-numeric: tabular-nums; }
.hx-pkg-gross { display: block; }
.hx-price-more {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--border);
}
.hx-price-inc h3 { margin: 0 0 12px; font-size: 1.0625rem; }
.hx-price-inc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.hx-price-inc li {
    position: relative;
    padding-left: 26px;
    color: var(--muted-foreground);
    font-size: .9375rem;
}
.hx-price-inc li::before {
    content: "";
    position: absolute;
    left: 2px; top: .35em;
    width: 12px; height: 7px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}
.hx-price-note p { margin: 0 0 12px; color: var(--muted-foreground); font-size: .9375rem; }
.hx-price-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) {
    .hx-pkgs { grid-template-columns: 1fr; }
    .hx-price-more { grid-template-columns: 1fr; }
}

/* ============================================================
   ANA SAYFA: KÂĞIT / DİJİTAL KARŞILAŞTIRMA
   ============================================================ */
.hx-compare-wrap { overflow-x: auto; }
.hx-compare {
    width: 100%;
    min-width: 640px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
}
.hx-compare .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.hx-compare th, .hx-compare td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    font-size: .9375rem;
    line-height: 1.55;
    border-bottom: 1px solid var(--border);
}
.hx-compare thead th {
    background: var(--secondary);
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hx-compare thead th.dg { color: var(--primary); }
.hx-compare thead th:first-child, .hx-compare tbody th { width: 19%; }
.hx-compare tbody th { color: var(--foreground); font-weight: 600; }
.hx-compare td { color: var(--muted-foreground); }
.hx-compare td.dg { color: var(--foreground); background: var(--primary-soft); }
.hx-compare tbody tr:last-child th, .hx-compare tbody tr:last-child td { border-bottom: 0; }
.hx-compare-more, .hx-who-more { margin: 20px 0 0; }
.hx-compare-more a, .hx-who-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: .9375rem;
    font-weight: 500;
}
.hx-compare-more svg, .hx-who-more svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .15s ease; }
.hx-compare-more a:hover svg, .hx-who-more a:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
    /* Telefonda tablo yatay kaymaz: her satır konu başlıklı iki kutu olur. */
    .hx-compare-wrap { overflow-x: visible; }
    .hx-compare { min-width: 0; display: block; border: 0; background: none; }
    .hx-compare thead { display: none; }
    .hx-compare tbody, .hx-compare tr, .hx-compare th, .hx-compare td { display: block; }
    .hx-compare tr {
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--card);
        overflow: hidden;
    }
    .hx-compare tbody th { width: auto; background: var(--secondary); border-bottom: 1px solid var(--border); }
    .hx-compare td { border-bottom: 0; }
    .hx-compare td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted-foreground);
    }
    .hx-compare td.dg::before { color: var(--primary); }
}

/* ============================================================
   ANA SAYFA: KİMLER İÇİN
   ============================================================ */
.hx-who { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-who a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--gradient-card);
    color: var(--foreground);
    font-size: .9375rem;
    transition: border-color .15s ease, color .15s ease;
}
.hx-who a:hover { border-color: var(--primary); color: var(--primary); }

/* Ana sayfanın yeni bölümleri: daha sıkı dikey ritim, 44 px dokunma hedefi, dengeli başlık. */
.section.hx-tight { padding-block: clamp(44px, 6vw, 76px); }
.hx-def-link, .hx-compare-more a, .hx-who-more a { min-height: 44px; }
.hx-offer-head h2 { text-wrap: balance; }

/* --- 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;
    /* #ef4444 üstünde beyaz 3,76:1 kalıyordu; #dc2626 4,83:1 (WCAG AA). */
    background: #dc2626;
    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; }
/* Radyo grupları fieldset + legend: tarayıcı kenarlığı ve dolgusu sıfırlanır,
   görünüm eski div + span ile aynı kalır. min-width:0 ızgarada taşmayı önler. */
fieldset.ord-field { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.ord-label { display: block; margin-bottom: 8px; color: var(--foreground); font-size: .875rem; font-weight: 500; }
legend.ord-label { float: left; width: 100%; padding: 0; }
legend.ord-label + * { clear: both; }
.ord-field label, .ord-field-label { color: var(--foreground); font-size: .8125rem; font-weight: 500; }
.ord-field-label { display: block; }
/* Radyo gizli; klavye odağı seçenek kartının kendisinde görünür. */
.ord-opt:has(input:focus-visible), .ord-swatch:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.ord-opt-link { position: relative; z-index: 1; display: inline-block; margin-top: 4px; color: var(--primary); font-size: .8125rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ord-field label .opt, .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); }
/* Seçilemeyen seçenekte başlık ve radyo soluk; yol gösteren ipucu ve bağlantı tam renk. */
.ord-opt.is-disabled { cursor: not-allowed; }
.ord-opt.is-disabled .ord-opt-title, .ord-opt.is-disabled .ord-radio, .ord-opt.is-disabled .ord-opt-tag { opacity: .55; }
.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; }
.ord-summary-gross { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: .8125rem; }
.ord-summary-gross b { color: var(--foreground); 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 14px; 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; }

/* Ön bilgilendirme: gönder düğmesinin hemen üstünde (bağlayıcı sipariş) */
.ord-preinfo { margin: 16px 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); font-size: .875rem; line-height: 1.55; }
.ord-preinfo-title { margin: 0 0 6px; font-weight: 600; color: var(--foreground); }
.ord-preinfo ul { margin: 0; padding-left: 1.1rem; color: var(--muted-foreground); }
.ord-preinfo li + li { margin-top: 4px; }

/* 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: #fca5a5; font-size: .9rem; }
.ord-success:focus, .ord-error:focus { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Windows yüksek kontrast: seçili seçenek yalnız renkle ayrılıyordu ve bu
   kipte görünmüyordu. Sistem vurgu rengiyle (Highlight) çerçevelenir. */
@media (forced-colors: active) {
    .ord-opt:has(input:checked), .ord-swatch:has(input:checked) { outline: 3px solid Highlight; outline-offset: 2px; }
    .ord-opt:has(input:checked) .ord-radio::after { background: Highlight; forced-color-adjust: none; }
    .ord-swatch .dot { forced-color-adjust: none; }
}

@media (max-width: 980px) {
    /* minmax(0, 1fr): tek sütun en geniş içeriğe göre büyüyüp 358 px altında sayfayı taşırıyordu. */
    .ord-grid { grid-template-columns: minmax(0, 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-field-pair { gap: 0; }
    .ord-opt-tag { position: static; align-self: flex-start; }
}