/* ─── Apple-style Design System ─────────────────────────────────────── */

:root {
    --bg: #fbfbfd;
    --surface: #fff;
    --text: #1d1d1f;
    --muted: #86868b;
    --accent: #0071e3;
    --accent-ink: #fff;   /* vurgu zemini üstündeki metin; Görünüm paleti parlaklığa göre ezer (sarıda koyu) */
    --border: rgba(0, 0, 0, .08);
    --radius: 18px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);

    --bs-primary: var(--accent);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    --bs-border-radius: var(--radius);
    --bs-card-border-color: var(--border);
    --bs-card-bg: var(--surface);
}

/* ─── Base ───────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', var(--bs-font-sans-serif);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

a:hover { color: var(--accent); opacity: .8; }

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

/* ─── Glass effect ───────────────────────────────────────────────────── */

.glass {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--border);
}

/* ─── Bootstrap overrides ────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.card-body { padding: 1.75rem; }

.btn {
    border-radius: 999px;
    font-size: 14px;   /* 2026-10-01: tüm butonlar 14px (btn-lg dahil; yalnız dolgu büyür) */
    font-weight: 500;
    letter-spacing: -.01em;
    padding: .55rem 1.4rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), background .2s, border-color .2s, color .2s;
}

.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.98); }
.btn-lg { font-size: 14px; padding: .8rem 1.8rem; }
.btn-sm { font-size: 14px; }

/* Vurgu zemin + --accent-ink metin; hover/active'de ikisi YER DEĞİŞTİRİR (sarı palette: sarı/siyah → siyah/sarı).
   Kontrast iki durumda da aynı çift → hep okunaklı; çerçeve vurguda kalır, koyu zeminde de buton seçilir.
   Renk Bootstrap değişkenlerinden — sabit color/background yazılmaz, yoksa paletin metin rengini ezer. */
.btn-primary {
    --bs-btn-color: var(--accent-ink);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-ink);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--accent);
    --bs-btn-active-bg: var(--accent-ink);
    --bs-btn-active-border-color: var(--accent);
    border-radius: 999px;
}

.btn-primary:hover {
    opacity: 1;   /* a:hover'ın .8 opaklığı kontrastı düşürmesin */
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    border-radius: 999px;
}

.btn-outline-primary:hover {
    opacity: 1;
    transform: scale(1.02);
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: 999px;
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--muted);
    color: var(--text);
    transform: scale(1.02);
}

/* ─── Form controls ──────────────────────────────────────────────────── */

.form-control,
.form-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    transition: border-color .25s, box-shadow .25s;
}

.form-control:focus,
.form-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .15);
}

.form-control::placeholder { color: var(--muted); }

/* ─── Navbar ─────────────────────────────────────────────────────────── */

.navbar {
    background: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    transition: background .3s;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text) !important;
}

.nav-link {
    color: var(--text) !important;
    font-weight: 400;
    opacity: .85;
    transition: opacity .2s;
    border-radius: 8px;
    padding: .4rem .75rem !important;
}

.nav-link:hover { opacity: 1; background: var(--border); }
.nav-link.active { opacity: 1; font-weight: 600; }

/* ─── Dropdown ───────────────────────────────────────────────────────── */

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: .5rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.dropdown-item {
    color: var(--text);
    border-radius: 8px;
    padding: .45rem .85rem;
    font-size: .9375rem;
    transition: background .15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg);
    color: var(--text);
}

/* ─── Section / Container helpers ───────────────────────────────────── */

section {
    padding: 5rem 0;
}

.section-sm { padding: 3rem 0; }
.section-lg { padding: 8rem 0; }

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--text);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ─── Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--text);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.375rem, 2.5vw, 2rem); }
h4 { font-size: 1.375rem; }

p { line-height: 1.75; }

.text-muted { color: var(--muted) !important; }

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero {
    padding: 7rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 113, 227, .12) 0%, transparent 70%);
    pointer-events: none;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1.05;
}

.hero-lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--muted);
    max-width: 640px;
    margin: 1.25rem auto 2.5rem;
    line-height: 1.6;
}

/* ─── Product card ───────────────────────────────────────────────────── */

.product-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}

.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .12) !important;
    transform: translateY(-4px);
}

.product-card img {
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.product-card:hover img { transform: scale(1.04); }

/* ─── Category card ──────────────────────────────────────────────────── */

.category-card {
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.category-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14) !important;
}

/* ─── Badge ──────────────────────────────────────────────────────────── */

.badge {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: .35em .75em;
}

.badge-accent {
    background: rgba(0, 113, 227, .1);
    color: var(--accent);
}

/* ─── Blog ───────────────────────────────────────────────────────────── */

.blog-content h1,
.blog-content h2,
.blog-content h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.blog-content p { line-height: 1.85; }

.blog-content img { border-radius: 14px; margin: 1.5rem 0; }

.blog-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Prose ──────────────────────────────────────────────────────────── */

.prose img { border-radius: 14px; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 3.5rem 0 2rem;
    color: var(--muted);
    font-size: .9375rem;
}

footer a { color: var(--muted); transition: color .2s; }
footer a:hover { color: var(--text); }

/* ─── Divider ────────────────────────────────────────────────────────── */

hr {
    border: none;
    border-top: 1px solid var(--border);
    opacity: 1;
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Utilities ──────────────────────────────────────────────────────── */

.surface { background: var(--surface); }
.bg-surface { background: var(--surface) !important; }
.text-accent { color: var(--accent) !important; }
.border-subtle { border-color: var(--border) !important; }
.radius { border-radius: var(--radius) !important; }
.radius-sm { border-radius: 10px !important; }
.radius-xs { border-radius: 6px !important; }
.shadow-card { box-shadow: var(--shadow) !important; }

/* ─── Alert ──────────────────────────────────────────────────────────── */

.alert {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ─── Table ──────────────────────────────────────────────────────────── */

.table {
    color: var(--text);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, .02);
    color: var(--text);
}

/* ─── Modal ──────────────────────────────────────────────────────────── */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-footer {
    border-top-color: var(--border);
}

/* ─── Pagination ─────────────────────────────────────────────────────── */

.page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: 8px !important;
    margin: 0 2px;
    transition: background .2s, color .2s;
}

.page-link:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
}

/* ─── Responsive grid helpers ────────────────────────────────────────── */

@media (max-width: 575.98px) {
    section { padding: 3rem 0; }
    .hero { padding: 4rem 0 3rem; }
    .card-body { padding: 1.25rem; }
    h1 { letter-spacing: -.03em; }
}

@media (max-width: 767.98px) {
    .section-lg { padding: 5rem 0; }
    .navbar .btn { display: none; }
}

@media (min-width: 992px) {
    .hero { padding: 9rem 0 7rem; }
}

/* ─── Smooth page transition ─────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
    }

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ─── Floating Header ────────────────────────────────────────────────── */

:root { --header-h: 104px; --ann-h: 0px; }
@media (min-width: 992px) { :root { --header-h: 120px; } }

/* --ann-h: header üstü duyuru çubuğu yüksekliği. Çubuk yoksa 0 (DuyuruCubugu bileşeni aktifken
   :root'u 44px'e çeker; kapatılınca JS 0'a döndürür). Header ve body bu değişkenle kayar. */
body { padding-top: calc(var(--header-h) + var(--ann-h)); }

.site-header-float {
    position: fixed;
    top: var(--ann-h);
    left: 0;
    right: 0;
    z-index: 1040;
    padding-top: 8px;
}

.site-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
    border-radius: 24px;
    border: 1px solid transparent;
    transition: background .35s cubic-bezier(.4,0,.2,1), border-color .35s, backdrop-filter .35s;
}

/* Masaüstü kap: 1320px, ama dar masaüstünde (1280, 1366…) en az 24px kenar boşluğu — kesintisiz (eşikte zıplamaz).
   Footer gövdesi (.ft-govde) aynı kuralla hizalı. */
@media (min-width: 992px) { .site-header-inner { padding: 0; max-width: min(1320px, calc(100% - 48px)); } }

/* Scrolled: buzlu alan TAM GENİŞLİK (float kabında), koyu ton — beyaz menü linkleri her sayfada okunur. */
.site-header-float.scrolled {
    padding-top: 0;
    background: color-mix(in srgb, var(--text) 74%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid color-mix(in srgb, var(--surface) 12%, transparent);
}
.site-header-float.scrolled .site-header-inner { background: none; border-color: transparent; border-radius: 0; }

.site-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    transition: padding .2s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 992px) {
    .site-header-row { padding: 1.375rem 0; gap: 1.5rem; }
    .site-header-float.scrolled .site-header-row { padding: .875rem 0; }
}

.site-header-logo { flex-shrink: 0; text-decoration: none !important; }

.site-header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.site-header-link {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
    color: var(--surface);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}
.site-header-link:hover { color: var(--accent); opacity: 1; }

/* ── Hakkımızda dropdown ("Ayrı Sayfalar" düzeni) — hover/klavye odağıyla açılır ── */
.site-header-dd { position: relative; }
.site-header-dd-toggle { display: inline-flex; align-items: center; gap: .3rem; }
.site-header-dd-caret { transition: transform .2s; }
.site-header-dd:hover .site-header-dd-caret,
.site-header-dd:focus-within .site-header-dd-caret { transform: rotate(180deg); }

.site-header-dd-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 230px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1050;
}
/* Link ile panel arasındaki boşlukta hover kopmasın (görünmez köprü) */
.site-header-dd-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.site-header-dd:hover .site-header-dd-menu,
.site-header-dd:focus-within .site-header-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 4px);
}

.site-header-dd-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.site-header-dd-link:hover { background: var(--border); color: var(--accent); }
.site-header-dd-link { text-transform: none; letter-spacing: 0; font-size: .9375rem; }

/* Müşteri Girişi — Menü Yönetimi'nde Class=header-cta olan öğe; renk .btn-primary üzerinden Görünüm paleti (--accent). */
.site-header-cta-li { margin-left: .5rem; }
.site-header-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1.15rem;
    font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none !important;
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.site-header-cta svg { transition: transform .2s; }
.site-header-cta:hover svg { transform: translate(2px, -2px); }
.site-header-mobile-cta { padding: .75rem 0 .5rem; }
.site-header-mobile-cta .site-header-cta { justify-content: center; }

.site-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Masaüstünde sağ blok yalnız hamburger taşır → gizli; menü sağa yaslanır (logo sol, linkler sağ). */
@media (min-width: 992px) { .site-header-actions { display: none; } }

.site-header-burger {
    background: none;
    border: none;
    padding: .25rem .375rem;
    cursor: pointer;
    color: var(--surface);
    line-height: 1;
    border-radius: 6px;
}
.site-header-burger:hover { background: var(--border); }

.site-header-mobile-panel {
    overflow: hidden;
    max-height: 0;
    border-top: 1px solid transparent;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), border-color .35s;
}
.site-header-mobile-panel.open {
    max-height: 640px;
    border-top-color: color-mix(in srgb, var(--surface) 12%, transparent);
    background: color-mix(in srgb, var(--text) 92%, transparent);
    padding: 0 1rem;
    border-radius: 0 0 16px 16px;
}

.site-header-mobile-menu {
    list-style: none;
    padding: .75rem 0 .25rem;
    margin: 0;
}
.site-header-mobile-link {
    display: block;
    color: var(--surface);
    font-size: .9375rem;
    padding: .625rem 0;
    text-decoration: none !important;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
}
.site-header-mobile-link:hover { color: var(--accent); opacity: 1; }
.site-header-mobile-sublink { padding-left: 1.5rem; font-size: .875rem; }

.site-header-mobile-auth { padding: .75rem 0 .25rem; }

/* ─── Hero v2 (video / image background) ────────────────────────────── */

.hero-v2 {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 5rem;
    min-height: 100vh;
}

@media (min-width: 768px)  { .hero-v2 { padding-top: calc(var(--header-h) + 5rem); padding-bottom: 7rem; } }
@media (min-width: 992px)  { .hero-v2 { padding-top: calc(var(--header-h) + 10rem); padding-bottom: 9rem; } }

.hero-v2-bg {
    position: absolute;
    inset: 4px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,.08);
}
@media (min-width: 992px) { .hero-v2-bg { border-radius: 48px; } }

.hero-v2-bg video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: .5; filter: invert(1);
}

.hero-v2-bg img {
    width: 100%; height: 100%; object-fit: cover; display: block; opacity: .3;
}

.hero-v2-content {
    position: relative;
    z-index: 10;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .hero-v2-content { padding: 0 3rem; } }

.hero-v2-text { max-width: 42rem; text-align: center; margin: 0 auto; }
@media (min-width: 992px) { .hero-v2-text { text-align: left; margin: 0; max-width: 100%; } }

.hero-v2-h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.05;
    max-width: 32rem;
    margin: 0 auto 2rem;
    color: var(--text);
}
@media (min-width: 992px) { .hero-v2-h1 { margin: 0 0 2rem; } }

.hero-v2-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}
@media (min-width: 992px) { .hero-v2-lead { margin: 0 0 2.5rem; } }

.hero-v2-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}
@media (min-width: 576px) { .hero-v2-btns { flex-direction: row; justify-content: center; } }
@media (min-width: 992px) { .hero-v2-btns { justify-content: flex-start; } }

/* ─── Logo Slider ────────────────────────────────────────────────────── */

.logo-slider-section {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: .25rem 0 .75rem;
}

.logo-slider-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
@media (min-width: 768px) {
    .logo-slider-wrap { flex-direction: row; padding: 0 3rem; }
}

.logo-slider-label {
    font-size: .8125rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .logo-slider-label { min-width: 8rem; text-align: right; padding-right: 1.5rem; border-right: 1px solid var(--border); }
}

.logo-slider-track-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 1.25rem 0;
    min-width: 0;
}

.logo-slider-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: logo-scroll 36s linear infinite;
}
.logo-slider-track:hover { animation-play-state: paused; }

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

.logo-slider-track img {
    height: 20px;
    width: auto;
    flex-shrink: 0;
    display: inline-block;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .2s, filter .2s;
}
.logo-slider-track img:hover { opacity: 1; filter: none; }

.logo-slider-fade-l {
    position: absolute; inset-y: 0; left: 0; width: 4rem;
    background: linear-gradient(to right, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
.logo-slider-fade-r {
    position: absolute; inset-y: 0; right: 0; width: 4rem;
    background: linear-gradient(to left, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}

/* ─── Faz 8.5: Accessibility (WCAG AA) ─────────────────────────── */
/* Focus ring — keyboard kullanıcıları için belirgin */
:focus-visible {
    outline: 3px solid #0071e3;
    outline-offset: 2px;
    border-radius: 2px;
}
/* Mouse click'te outline gözükmesin */
:focus:not(:focus-visible) {
    outline: none;
}
/* Skip-link odaklanınca görünür */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}
/* Reduced motion — kullanıcı animasyon istemiyorsa kapat */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Form input renk kontrastı — light mode */
input::placeholder, textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* ── Ürün detay: sağ kenarda sabit hızlı aksiyonlar (Yazdır / Teklif İste) ── */
.urun-fixed-actions {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1030;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    max-width: 100vw;
}
.urun-fixed-actions .uf-print {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    margin-right: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.urun-fixed-actions .uf-teklif {
    display: flex;
    align-items: center;
    border-radius: 2rem 0 0 2rem;
    font-weight: 600;
    padding: .7rem 1.2rem;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* ── WhatsApp yüzen buton efekti (SET projesindeki .wa-fab'dan) ──
   Hafif yukarı-aşağı süzülme + yeşil nabız halkası */
.wa-fab { animation: waFloat 3s ease-in-out infinite; }
.wa-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid #25d366; animation: waPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab::before { animation: none; } }

/* Tekil kurumsal sayfa (/sayfa/*): bölüm partial'larının col-lg-9 daralmasını kaldır —
   içerik tam genişlik akar (kullanıcı kararı, "Ayrı Sayfalar" düzeni) */
.icerik-tam .col-lg-9 { flex: 0 0 100%; max-width: 100%; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }

/* Kart görsel placeholder'ı — bg-light yerine tema yüzeyi */
.kart-gorsel-bos {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: var(--muted);
}

/* Filtre hapları (tekil sayfa iç-link navigasyonu) — 44px dokunma hedefi */
.filtre-hap {
    border-radius: 999px;
    padding: .55rem 1.25rem;
    min-height: 44px;
    font-weight: 500;
}

/* ─── Hero alt şeridi: Hero 1 kutuları (sol) + akan logolar (sağ) ──────────
   Banner Yönetimi "Hero 1" + Anasayfa → Hero Logolar; tema: partials/_HeroAltBar.cshtml.
   Renkler YALNIZ token'lardan: kutu zemini metin renginin koyu tonu (--text), üzerindeki yazı --surface,
   vurgu --accent (İletişim butonu .btn-primary üzerinden Görünüm paletini alır). Font: --font-display / --font-ui.
   Sabit hex renk YAZILMAZ (HeroAltBarTemaTests bekçisi). */

.hero-alt {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
    pointer-events: none;            /* boşluklar alttaki slayt kontrollerine tıklatır */
    font-family: var(--font-ui, inherit);
}
@media (min-width: 992px) { .hero-alt { padding: 0 3rem 2.5rem; gap: 1.25rem; } }
.hero-alt > * { pointer-events: auto; }

.hero-alt-kutu {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--surface) 16%, transparent);
    color: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}

/* 1. kutu — dönen video, sağ alt köşede başlık; kutunun tamamı link */
.hero-alt-video {
    flex: 0 0 340px;
    display: block;
    padding: 10px;
    text-decoration: none !important;
    color: var(--surface);
}
.hero-alt-video[aria-disabled="true"] { cursor: default; }
.hero-alt-video-medya {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 8%, transparent);
}
.hero-alt-video-medya video,
.hero-alt-video-medya picture,
.hero-alt-video-medya img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-alt-video-baslik {
    position: absolute; right: 18px; bottom: 16px;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 65%, transparent);
    font-family: var(--font-display, inherit);
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--surface);
    transition: background .2s, color .2s;
}
.hero-alt-video:hover .hero-alt-video-baslik { background: var(--accent); color: var(--text); }

/* 2. kutu — üstte başlık, altta Talep + İletişim */
.hero-alt-metin {
    flex: 0 0 340px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
    padding: 1.35rem 1.35rem 1.15rem;
}
.hero-alt-baslik {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--surface);
}
.hero-alt-btnler { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-alt .hero-alt-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 6px;
    font-family: var(--font-display, inherit);
    font-weight: 700; font-size: 14px; line-height: 1.2;
    text-decoration: none !important;
    transition: transform .15s, opacity .15s;
}
.hero-alt .hero-alt-btn:hover { transform: translateY(-1px); opacity: 1; }
.hero-alt-btn-talep { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.hero-alt-btn-talep:hover { color: var(--text); }
.hero-alt .hero-alt-btn-iletisim { --bs-btn-border-radius: 6px; }   /* renk .btn-primary → Görünüm paleti (--accent) */

/* Sağ — akan logolar: ortak şerit (partials/_LogoSeridi.cshtml; footer da kullanır) */
.hero-alt-marquee { flex: 1 1 auto; min-width: 0; align-self: flex-end; }

/* ─── Logo şeridi: tek ölçülü "chip" (40px ikon + marka adı), koyu zeminde tek renk beyaz ───
   Dikişsiz döngü: kaydırma = tek kopya genişliği (JS ölçer; yoksa %50). */
.logo-seridi {
    overflow: hidden;
    padding: .75rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--text) 6%, var(--text) 94%, transparent);
    mask-image: linear-gradient(to right, transparent, var(--text) 6%, var(--text) 94%, transparent);
}
.logo-seridi-track {
    display: flex; align-items: center;
    width: max-content;
    animation: hero-alt-kaydir 32s linear infinite;
}
.logo-seridi:hover .logo-seridi-track { animation-play-state: paused; }
@keyframes hero-alt-kaydir {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--hero-marquee-kaydir, 50%))); }
}
.logo-seridi-oge {
    display: inline-flex; align-items: center; gap: .8rem;
    height: 68px;
    padding: 0 1.4rem 0 1rem;
    margin-right: 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--surface) 14%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--surface);
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, transform .2s;
}
.logo-seridi-oge:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-2px);
    color: var(--surface); opacity: 1;
}
.logo-seridi-oge picture { display: contents; }
.logo-seridi-oge img {
    width: 40px; height: 40px; object-fit: contain; flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: .95;
}
.logo-seridi-ad {
    font-family: var(--font-display, inherit);
    font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; white-space: nowrap;
    color: var(--surface);
}

@media (max-width: 991.98px) {
    .hero-alt { flex-wrap: wrap; gap: .75rem; padding: 0 1rem 1rem; }
    .hero-alt-video, .hero-alt-metin { flex: 1 1 calc(50% - .375rem); }
    .hero-alt-marquee { flex-basis: 100%; order: 3; padding: .25rem 0; }
    .logo-seridi-oge { height: 56px; gap: .6rem; padding: 0 1.1rem 0 .8rem; margin-right: .75rem; }
    .logo-seridi-oge img { width: 32px; height: 32px; }
    .logo-seridi-ad { font-size: .95rem; }
}
@media (max-width: 575.98px) {
    .hero-alt-video, .hero-alt-metin { flex-basis: 100%; }
    .hero-alt-video-medya { aspect-ratio: 16 / 9; }
    .hero-alt-metin { padding: 1rem; gap: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-alt .hero-alt-btn { transition: none; }
}

/* ─── "Neler Yapıyoruz" scroll bölümü — designmonks.co "What We Do" klonu ─────────────────────
   Ölçüler orijinalden (computed): section 100px 94px / radius 32px; iç kap 1252px, gap 56px; sol sticky top 20vh,
   396px; metin bloğu min 327px; h2 48px, h3 40px; kart 396×556 radius 8px, 2. kart +120px; blok 680px, aralık 50px.
   Renkler YALNIZ token: zemin --text, yazı --surface, vurgu --accent. Font: --font-display / --font-ui. Hex YOK. */

.ny {
    position: relative;
    overflow: clip;
    margin-top: -30px;
    border-radius: 32px;
    padding: 100px 94px;
    background: var(--text);
    color: var(--surface);
    font-family: var(--font-ui, inherit);
}
.ny-ic { max-width: 1252px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.ny-ust { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ny-etiket {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent);
    font-size: 16px; line-height: 24px; font-weight: 400;
}
.ny-baslik {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 700; font-size: 48px; line-height: 1.2;
    color: var(--surface);
}
.ny-baslik em, .ny-hizmet-baslik em { font-style: italic; font-family: var(--font-display, inherit); }

.ny-govde { display: flex; align-items: flex-start; gap: 32px; }

/* Sol — sticky metin blokları (sarmal overflow hidden; bloklar üst üste, JS translateY ile kaydırır) */
.ny-sol { position: sticky; top: 20vh; width: 100%; max-width: 396px; flex: 0 0 396px; }
.ny-sol-sarmal { position: relative; overflow: hidden; min-height: 327px; }
.ny-metin {
    position: absolute; top: 0; left: 0; width: 100%;
    min-height: 327px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}
.ny-metin:first-child { position: relative; transform: none; }
.ny-hizmet-baslik {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-weight: 700; font-size: 40px; line-height: 1.2;
    color: var(--surface);
}
.ny-cizgi { width: 100%; height: 1px; margin: 16px 0; background: linear-gradient(90deg, var(--accent), transparent); }
.ny-aciklama {
    margin: 0 0 28px;
    font-size: 16px; line-height: 1.5; letter-spacing: .36px;
    color: color-mix(in srgb, var(--surface) 82%, transparent);
}
.ny-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing: .32px; text-transform: capitalize;
    color: var(--accent);
    text-decoration: none !important;
}
.ny-link:hover { color: var(--accent); opacity: 1; }
.ny-link svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform .2s; }
.ny-link:hover svg { transform: translateX(4px); }

/* Sağ — her hizmet için iki kart */
.ny-sag { flex: 1 1 auto; width: 60%; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.ny-blok { display: flex; align-items: flex-start; gap: 32px; height: 680px; }
.ny-kart {
    margin: 0;
    width: 100%; max-width: 396px; height: 556px;
    /* 24px: yüklenen görsellerin köşeleri dosyada ~20px yuvarlatılmış ve köşe dışı BEYAZ; daha küçük
       yarıçap o beyaz üçgenleri kenarda gösterir. */
    border-radius: 24px; overflow: hidden;
    background: var(--text);
}
.ny-kart-2 { margin-top: 120px; }
.ny-kart picture, .ny-kart img, .ny-kart video {
    width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}

/* Alt CTA — renk .btn-primary'den (Görünüm paleti); orijinaldeki mor parıltı vurgu rengiyle */
.ny-alt { display: flex; justify-content: center; }
.ny-alt .ny-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 56px; padding: 0 32px;
    border-radius: 8px;
    font-family: var(--font-ui, inherit); font-size: 14px; font-weight: 700; letter-spacing: .32px;
    text-decoration: none !important;
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
    --bs-btn-border-radius: 8px;
}
.ny-alt .ny-cta svg { width: 24px; height: 24px; }

@media (max-width: 991.98px) {
    .ny { padding: 100px 32px; }   /* orijinal: ≤991px yan boşluk 32px */
    .ny-govde { flex-direction: column; margin-top: 32px; }
    .ny-sol { top: 0; z-index: 5; max-width: 100%; flex-basis: auto; padding-top: 32px; background: var(--text); }
    .ny-sol-sarmal, .ny-metin { min-height: 0; }
    .ny-aciklama { display: none; }
    .ny-sag { width: 100%; }
}
@media (max-width: 767.98px) {
    .ny { border-radius: 20px; }
    .ny-ic { gap: 32px; }
    .ny-baslik { font-size: 28px; }
    .ny-hizmet-baslik { font-size: 24px; }
    .ny-sol { padding: 30px 0; }
    .ny-blok { height: auto; }
    .ny-kart { height: 300px; }
}
@media (max-width: 479.98px) {
    .ny { padding: 60px 20px; }
    .ny-sol { padding: 20px 0; }
    .ny-sol-sarmal, .ny-metin { min-height: 230px; }
    .ny-cizgi { margin: 8px 0; }
    .ny-aciklama { display: block; margin-bottom: 18px; }
    .ny-blok { flex-direction: column; gap: 22px; }
    .ny-kart, .ny-kart-2 { max-width: 100%; height: 270px; margin-top: 0; }
    .ny-alt .ny-cta { width: 100%; }
}

/* ─── Çalışmalar — designmonks.co tablet/mobil vitrini klonu ──────────────────────────────
   Orijinal: section açık vurgu tonu, padding 100px 0, iç gap 56; yazı şeridi 52px (24px yazı, 8px nokta, aralık 24; üst sola,
   alt sağa, 20s); cihaz şeridi 400px (aralık 32; tablet 514×400, telefon 186×400). Cihaz çerçeveleri CSS. Hex YOK. */
.cl {
    padding: 100px 0;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--text);
    overflow: hidden;
    font-family: var(--font-ui, inherit);
}
.cl-ic { display: flex; flex-direction: column; gap: 56px; }
.cl-yazi, .cl-cihazlar { overflow: hidden; width: 100%; }
.cl-serit-track {
    display: flex; align-items: center;
    width: max-content;
    will-change: transform;
    animation: cl-kaydir 20s linear infinite;
}
.cl-yazi .cl-serit-track { gap: 24px; height: 52px; }
.cl-yazi-ters .cl-serit-track { animation-direction: reverse; }
@keyframes cl-kaydir {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--cl-kaydir, 50%))); }
}
.cl-yazi-oge {
    flex: none; padding: 8px;
    font-size: 1.5rem; line-height: 1.5; letter-spacing: .03rem; font-weight: 400;
    color: var(--text); white-space: nowrap;
}
.cl-nokta { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.cl-cihazlar .cl-serit-track { gap: 32px; height: 400px; }
.cl-cihazlar:hover .cl-serit-track { animation-play-state: paused; }
/* Görseller cihaz çerçevesiyle HAZIR yüklenir → CSS çerçeve/gölge/çentik yok. Yükseklik sabit, genişlik görselin
   kendi oranından (kırpma yok — eskiden sabit kutu + cover telefonun sağını solunu kesiyordu). */
.cl-cihaz { flex: none; margin: 0; height: 400px; }
.cl-ekran { display: block; height: 100%; }
.cl-ekran picture { display: contents; }
.cl-ekran img { display: block; height: 100%; width: auto; max-width: none; }
@media (max-width: 767.98px) {
    .cl { padding: 60px 0; }
    .cl-ic { gap: 32px; }
    .cl-yazi-oge { font-size: 1.125rem; }
    .cl-yazi .cl-serit-track { height: 40px; gap: 16px; }
    .cl-cihazlar .cl-serit-track { height: 300px; gap: 20px; }
    .cl-cihaz { height: 300px; }
}

/* ─── Footer — designmonks.co footer (theme-dark) klonu ───────────────────────────────────
   Üst blok: altta video/görsel + alt gölge 124px, üstünde ortalı logo. Gövde: padding 60px 94px 0, iç kap 1252;
   sütun başlığı 18px 700 (24px alt), linkler 16px .32px; çizgi 1px; telif ortalı; dev firma adı vurgu parıltılı. Hex YOK. */
.ft {
    position: relative;
    margin-top: 0;   /* CTA bandı (koyu) ile footer (koyu) arasında açık boşluk kalmasın */
    padding: 0;
    border-top: 0;
    background: var(--text);
    color: var(--surface);
    font-family: var(--font-ui, inherit);
    font-size: 1rem;
}
.ft a { color: color-mix(in srgb, var(--surface) 62%, transparent); text-decoration: none; transition: color .2s; }
.ft a:hover { color: var(--accent); opacity: 1; }

.ft-ust {
    position: relative;
    min-height: 560px;
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden;
    padding: 120px 94px 100px;
}
.ft-ust-medya { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.ft-ust-medya picture, .ft-ust-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-ust-golge {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 124px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--text));
}
.ft-ust-ic { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.ft-logo { display: inline-flex; }
.ft-logo-img { height: 80px; width: auto; max-width: 320px; object-fit: contain; }
.ft-logo-metin { font-family: var(--font-display, inherit); font-weight: 800; font-size: 3rem; letter-spacing: -.03em; color: var(--surface); }
.ft-slogan { margin: 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.6; color: color-mix(in srgb, var(--surface) 78%, transparent); }

/* Gövde 1320px (header kabıyla aynı hiza). Alt boşluk 0: dev marka eskisi gibi telifin hemen altında durur. */
.ft-govde { position: relative; overflow: hidden; padding: 60px 0 0; max-width: 1320px; margin: 0 auto; }
.ft-ic { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 992px) { .ft-govde { max-width: min(1320px, calc(100% - 48px)); } }   /* header kabıyla aynı */
.ft-kolonlar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.ft-kolon { flex: 1 1 160px; min-width: 160px; }
.ft-kolon-baslik {
    margin: 0 0 24px;
    font-family: var(--font-ui, inherit);
    font-size: 1.125rem; font-weight: 700; line-height: 1.5;
    color: var(--surface);
}
.ft-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 21px; }
.ft-link { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; line-height: 1.5; letter-spacing: .32px; }
.ft-sosyal i, .ft-link i { font-size: 1.15rem; line-height: 1; }
.ft-adres {
    font-style: normal; font-size: 1rem; line-height: 1.6; letter-spacing: .32px;
    color: color-mix(in srgb, var(--surface) 62%, transparent);
    max-width: 18rem; white-space: pre-line;
}
.ft-cizgi { height: 1px; margin: 0; background: color-mix(in srgb, var(--surface) 10%, transparent); }
.ft-logolar { padding: .25rem 0; }
.ft-telif { margin: 0 0 32px; text-align: center; font-size: 1rem; letter-spacing: .32px; color: var(--surface); }

/* Gövdenin dışında, footer tam genişliği; overflow: aşağı kaydırılmış harflerin altını kırpar (eskiden gövde kırpardı). */
.ft-marka { position: relative; overflow: hidden; margin-top: 8px; text-align: center; line-height: .8; user-select: none; }
.ft-marka::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 45%, transparent) 55%, color-mix(in srgb, var(--accent) 80%, transparent) 100%);
    filter: blur(18px);
}
.ft-marka span {
    position: relative; display: block;
    font-family: var(--font-display, inherit); font-weight: 800;
    font-size: clamp(3.5rem, 15.2vw, 15.5rem); letter-spacing: -.045em; line-height: .82; white-space: nowrap;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--surface) 30%, transparent) 75%, transparent 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transform: translateY(14%);
}
@media (max-width: 991.98px) {
    .ft-ust { padding: 100px 32px 80px; min-height: 440px; }
    .ft-govde { padding: 48px 32px 0; }
    .ft-cizgi { margin: 0 -32px; }
}
@media (max-width: 767.98px) {
    .ft-kolonlar { flex-direction: column; gap: 32px; }
    .ft-liste { gap: 14px; }
    .ft-kolon-baslik { margin-bottom: 14px; }
}
@media (max-width: 479.98px) {
    .ft-ust { padding: 80px 20px 64px; min-height: 360px; }
    .ft-govde { padding: 40px 20px 0; }
    .ft-cizgi { margin: 0 -20px; }
    .ft-logo-img { height: 56px; }
}

/* ─── Bento Vitrin — finseo.ai "Track your AI visibility" bento ızgarası klonu ───────────────
   Ölçüler orijinalden (Tailwind): kap 1360px / yan 24px; etiket 14px + 12px kare ikon, 192px noktalı çizgi; h2 40px 500
   (≤767: 26px), ikinci satır soluk; giriş 18px max 672px; ızgara 3 / 2 / 1 sütun (1024 / 640), aralık 16px; kart radius 6px,
   hover scale 1.012 + fareyi izleyen ışık çerçevesi (420px); h3 20px 600; medya 340px, uzun kart 480px, 5. kart çift genişlik.
   Orijinalde üst boşluk 32px (önündeki bölüme yapışık); burada bağımsız bölüm olduğu için alt boşlukla eşitlendi (96px).
   Renkler YALNIZ token: yazı --text (soluk tonlar color-mix), zemin --surface karışımı, vurgu --accent. Hex YOK. */

.bv {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    font-family: var(--font-ui, inherit);
    color: var(--text);
    --bv-yuzey: color-mix(in srgb, var(--text) 5%, var(--surface));
    --bv-soluk: color-mix(in srgb, var(--text) 42%, transparent);
    --bv-orta: color-mix(in srgb, var(--text) 62%, transparent);
}
.bv-ic { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 24px; }

/* Etiket + noktalı çizgi — Form + Blog bölümüyle ortak */
.bv-etiket, .fb-etiket {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    font-size: 14px; line-height: 20px;
    color: color-mix(in srgb, var(--text) 62%, transparent);
}
.bv-etiket svg, .fb-etiket svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); }
.bv-cizgi, .fb-cizgi {
    width: 192px; height: 1px;
    margin-bottom: 24px;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--text) 15%, transparent) 30%, transparent 30%);
    background-size: 4px 1px;
}

.bv-ust { margin-bottom: 64px; }
.bv-baslik {
    margin: 0 0 16px;
    font-family: var(--font-display, inherit);
    font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
    color: var(--text);
}
.bv-baslik em { display: block; font-style: normal; color: var(--bv-soluk); }
.bv-giris { margin: 0; max-width: 672px; font-size: 18px; line-height: 28px; color: var(--bv-orta); }

.bv-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bv-kart {
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    background: var(--bv-yuzey);
    transition: transform .3s cubic-bezier(0, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
}
.bv-kart:hover { transform: scale(1.012); }
.bv-kart-genis { grid-column: span 2; }

/* Hover ışığı: 1.5px'lik çerçeve maskesi, merkez fare konumu (--bv-x / --bv-y, JS yazar) */
.bv-isin {
    position: absolute; inset: 0; z-index: 10;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
    background: radial-gradient(420px circle at var(--bv-x, 50%) var(--bv-y, 50%),
        color-mix(in srgb, var(--accent) 70%, var(--surface)) 0%,
        var(--accent) 22%,
        color-mix(in srgb, var(--accent) 50%, transparent) 45%,
        color-mix(in srgb, var(--accent) 18%, transparent) 70%,
        transparent 92%);
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.bv-kart:hover .bv-isin { opacity: 1; }

.bv-ikon {
    position: absolute; top: 16px; right: 16px; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--bv-soluk);
    pointer-events: none;
    transition: color .3s cubic-bezier(0, 0, .2, 1);
}
.bv-ikon path { transition: transform .3s cubic-bezier(0, 0, .2, 1); }
.bv-kart:hover .bv-ikon { color: var(--text); }
.bv-kart:hover .bv-ikon path:first-child { transform: translate(2px, -2px); }
.bv-kart:hover .bv-ikon path:last-child { transform: translate(-2px, 2px); }

.bv-kart-ust { padding: 24px 64px 16px 28px; }
.bv-kart-baslik {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 20px; font-weight: 600; line-height: 1.18; letter-spacing: -.02em;
    color: var(--text);
}
.bv-kart-baslik span { display: block; }
.bv-kart-baslik .bv-soluk { font-weight: 500; color: var(--bv-soluk); }
.bv-kart-link { color: inherit; text-decoration: none !important; }
.bv-kart-link:hover { color: inherit; opacity: 1; }
.bv-kart-link::after { content: ""; position: absolute; inset: 0; z-index: 15; }   /* kartın tamamı tıklanır */
.bv-kart-link:focus-visible { outline: none; }
.bv-kart:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.bv-medya {
    position: relative;
    height: 340px;
    margin: auto 0 0;
    overflow: hidden;
    background: var(--bv-yuzey);
}
.bv-kart-uzun .bv-medya { height: 480px; }
.bv-medya::before {   /* medya yokken / saydam görselin altında noktalı doku */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, black 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, black 0%, transparent 78%);
}
.bv-medya picture, .bv-medya img, .bv-medya video {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

@media (max-width: 1023.98px) {
    .bv-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bv-kart-genis { grid-column: auto; }
}
@media (max-width: 767.98px) {
    .bv { padding: 64px 0; }
    .bv-baslik { font-size: 26px; }
    .bv-ust { margin-bottom: 48px; }
}
@media (max-width: 639.98px) {
    .bv-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bv-kart, .bv-kart:hover { transform: none; }
    .bv-ikon path { transition: none; }
}

/* ─── Form + Blog — finseo.ai "Customer stories" klonu (alıntı yerine iletişim formu, müşteri yerine blog kartları) ───
   Ölçüler orijinalden (Tailwind): section 112px 0 (≤767: 80px); h2 40px 500 max 672px + sağda koyu köşeli buton (14px,
   10px 16px); öne çıkan blok 2 sütun (≥1024), sol iç boşluk 64px 48px (≤767: 48px 32px), 8px yanıp sönen nokta, h3 42px 600
   (≤1023: 36px, ≤767: 30px), metin 18px / 1.625; sağ görsel min 300px, hover 1.03. Kartlar 3 / 2 / 1 sütun (1024 / 768),
   aralık 40px (≤767: 32px): iç boşluk 12px, görsel 4/3 (hover 1.04), başlık 16px 700, kategori 12px, özet 14px 2 satır.
   Renkler YALNIZ token: zemin --bg / --surface, koyu buton --text, vurgu --accent. Hex YOK.
   Köşe/çerçeve ana sayfanın diğer bölümleriyle ortak (orijinaldeki keskin köşeler yerine): kutu/kart 8px + 1px ince çerçeve
   (hero alt kutuları, bento kartları gibi), iç görsel / input / buton 6px; formun ana butonu vurgu rengi (.btn-primary kuralı). */

.fb {
    overflow: hidden;
    padding: 90px 0;
    background: var(--bg);
    font-family: var(--font-ui, inherit);
    color: var(--text);
    --fb-soluk: color-mix(in srgb, var(--text) 42%, transparent);
    --fb-orta: color-mix(in srgb, var(--text) 62%, transparent);
    --fb-koyu-hover: color-mix(in srgb, var(--text) 86%, var(--surface));
}
.fb-ic { max-width: 1360px; margin: 0 auto; padding: 0 24px; }

.fb-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.fb-baslik {
    margin: 0; max-width: 672px;
    font-family: var(--font-display, inherit);
    font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
    color: var(--text);
}
.fb-buton {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px;
    border: 0; border-radius: 6px;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
    color: var(--surface);
    background: var(--text);
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.fb-buton:hover { background: var(--fb-koyu-hover); color: var(--surface); opacity: 1; }
/* Formun ana eylemi: vurgu zemin + --accent-ink; hover'da yer değiştirir (diğer ana butonlarla aynı) */
.fb-buton-ana { padding: 12px 22px; font-weight: 700; color: var(--accent-ink); background: var(--accent); }
.fb-buton-ana:hover { color: var(--accent); background: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.fb-buton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-buton svg, .fb-yazi-buton svg { flex-shrink: 0; transition: transform .15s cubic-bezier(.4, 0, .2, 1); }
.fb-buton svg { width: 14px; height: 14px; }
.fb-buton:hover svg { transform: translateX(2px); }

/* Öne çıkan blok: sol form, sağ görsel */
.fb-one-cikan {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    background: color-mix(in srgb, var(--text) 5%, var(--surface));
}
.fb-one-cikan-tek { grid-template-columns: minmax(0, 1fr); }
.fb-sol { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px; }
.fb-form-etiket { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 14px; line-height: 20px; color: var(--fb-orta); }
.fb-nokta { position: relative; display: flex; width: 8px; height: 8px; flex-shrink: 0; }
.fb-nokta::before, .fb-nokta::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
.fb-nokta::before { opacity: .75; animation: fb-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes fb-ping { 75%, to { opacity: 0; transform: scale(2); } }
.fb-form-baslik {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 42px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
    color: var(--text);
}
.fb-form-aciklama {
    margin: 24px 0 0; max-width: 576px;
    font-size: 18px; line-height: 1.625;
    color: color-mix(in srgb, var(--text) 77%, transparent);
}

.fb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 576px; margin-top: 32px; }
.fb-sol > .fb-form:first-child { margin-top: 0; }
.fb-one-cikan-tek .fb-form, .fb-one-cikan-tek .fb-form-aciklama { max-width: 760px; }
.fb-bal { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }
.fb-alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fb-alan-genis { grid-column: 1 / -1; }
.fb-alan label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.fb-alan input, .fb-alan textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 6px;
    font-family: inherit; font-size: 14px; line-height: 20px;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.fb-alan textarea { resize: vertical; min-height: 104px; }
.fb-alan input:focus, .fb-alan textarea:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.fb-sag { position: relative; margin: 0; min-height: 300px; overflow: hidden; background: var(--text); }
.fb-sag picture { position: absolute; inset: 0; display: block; }
.fb-sag img, .fb-sag video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(0, 0, .2, 1);
}
.fb-one-cikan:hover .fb-sag img, .fb-one-cikan:hover .fb-sag video { transform: scale(1.03); }
.fb-sag-golge {   /* görsel üstü yazı okunsun diye — yalnız yazı varken basılır */
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
        color-mix(in srgb, var(--text) 34%, transparent) 0%,
        color-mix(in srgb, var(--text) 14%, transparent) 60%,
        color-mix(in srgb, var(--text) 24%, transparent) 100%);
}
.fb-sag-yazi {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    text-align: center;
    font-family: var(--font-display, inherit);
    font-size: clamp(28px, 3.2vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
    color: var(--surface);
    text-shadow: 0 2px 12px color-mix(in srgb, var(--text) 35%, transparent);
}

/* Blog kartları */
.fb-yazilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fb-yazi {
    position: relative;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    background: var(--surface);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
}
.fb-yazi:hover { box-shadow: 0 8px 30px color-mix(in srgb, var(--text) 6%, transparent); }
.fb-yazi-gorsel { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--text); }
.fb-yazi-gorsel picture { position: absolute; inset: 0; display: block; }
.fb-yazi-gorsel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(0, 0, .2, 1);
}
.fb-yazi:hover .fb-yazi-gorsel img { transform: scale(1.04); }
.fb-yazi-govde { margin-top: 16px; padding: 0 4px 4px; }
.fb-yazi-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fb-yazi-baslik {
    margin: 0;
    font-family: var(--font-ui, inherit);
    font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0;
    color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-yazi-link { color: inherit; text-decoration: none !important; }
.fb-yazi-link:hover { color: inherit; opacity: 1; }
.fb-yazi-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* kartın tamamı tıklanır */
.fb-yazi-link:focus-visible { outline: none; }
.fb-yazi:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-yazi-kategori { flex-shrink: 0; padding-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fb-soluk); }
.fb-yazi-ozet {
    margin: 6px 0 0;
    font-size: 14px; line-height: 1.625;
    color: var(--fb-orta);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-yazi-buton {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px; line-height: 16px; font-weight: 500;
    color: var(--surface);
    background: var(--text);
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.fb-yazi-buton svg { width: 12px; height: 12px; }
.fb-yazi:hover .fb-yazi-buton { background: var(--fb-koyu-hover); }
.fb-yazi:hover .fb-yazi-buton svg { transform: translateX(2px); }

@media (max-width: 1023.98px) {
    .fb-one-cikan { grid-template-columns: minmax(0, 1fr); }
    .fb-form-baslik { font-size: 36px; }
    .fb-form, .fb-form-aciklama { max-width: none; }
    .fb-yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .fb { padding: 64px 0; }   /* mobilde .bv ile aynı ölçek */
    .fb-baslik { font-size: 26px; }
    .fb-one-cikan { margin-bottom: 32px; }
    .fb-sol { padding: 48px 32px; }
    .fb-form-baslik { font-size: 30px; }
    .fb-form-aciklama { font-size: 16px; }
    .fb-yazilar { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 639.98px) {
    .fb-ust { flex-direction: column; align-items: flex-start; }
    .fb-sol { padding: 40px 20px; }
    .fb-form { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .fb-nokta::before { animation: none; }
    .fb-sag img, .fb-sag video, .fb-yazi-gorsel img { transition: none; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   İç sayfalar (.ic-*) — premium ajans tasarım sistemi (2026-10-01)
   Spec: docs/superpowers/specs/2026-10-01-ic-sayfalar-premium-tasarim-design.md
   Renk/font YALNIZ token: --text --surface --bg --accent --accent-ink --border --muted --font-display --font-ui.
   Sabit hex renk YAZILMAZ (IcSayfaTemaTests bekçisi).
   ═══════════════════════════════════════════════════════════════════════════ */

/* İç sayfa hero'su anasayfa hero'su gibi header'ın altına çekilir → şeffaf header'ın açık renkli
   linkleri koyu hero üstünde okunur (eskiden ilk 120px açık zemin üstünde görünmüyordu). */
.tp-breadcrumb-area { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }

.ic-kap { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.ic-bolum { padding: 96px 0; }
.ic-bolum--alt { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.ic-bolum--sik { padding: 56px 0; }
@media (max-width: 767.98px) { .ic-bolum { padding: 64px 0; } .ic-bolum--sik { padding: 40px 0; } }

/* Bölüm üst başlığı: kare ikonlu etiket + h2 + giriş */
.ic-ust { max-width: 760px; margin-bottom: 48px; }
.ic-etiket { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui, inherit); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 14px; }
.ic-etiket::before { content: ""; width: 12px; height: 12px; background: var(--accent); border-radius: 2px; flex: 0 0 12px; }
.ic-baslik { font-family: var(--font-display, inherit); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 16px; color: inherit; }
.ic-giris { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }

/* Lead şeridi — hero'nun hemen altı: giriş cümlesi + Teklif Al / İletişim */
.ic-lead { padding: 48px 0 8px; }
.ic-lead-ic { display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.ic-lead-metin { font-family: var(--font-display, inherit); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; max-width: 760px; margin: 0; color: var(--text); }
.ic-lead-btnler { display: flex; gap: 12px; flex-wrap: wrap; }

/* Gövde: editorial prose + yapışkan yan ray */
.ic-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 48px 0 96px; }
@media (min-width: 992px) { .ic-govde { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } }

.ic-prose { font-size: 18px; line-height: 1.75; color: var(--text); } /* 2026-10-01: sütunu tam doldurur (760px sınırı kaldırıldı) */
.ic-prose > :first-child { margin-top: 0; }
.ic-prose p { margin: 0 0 1.25em; }
.ic-prose h2 { position: relative; font-family: var(--font-display, inherit); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 2.2em 0 .8em; padding-left: 20px; scroll-margin-top: calc(var(--header-h) + 24px); }
.ic-prose h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--accent); }
.ic-prose h3 { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 1.8em 0 .6em; }
.ic-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ic-prose a:hover { opacity: 1; color: var(--text); }
.ic-prose ul { list-style: none; padding: 0; margin: 0 0 1.5em; }
.ic-prose ul li { position: relative; padding-left: 32px; margin-bottom: .6em; }
.ic-prose ul li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ic-prose ol { list-style: none; counter-reset: ic-adim; padding: 0; margin: 0 0 1.5em; display: grid; gap: 12px; }
.ic-prose ol li { counter-increment: ic-adim; position: relative; padding: 20px 20px 20px 76px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ic-prose ol li::before { content: counter(ic-adim, decimal-leading-zero); position: absolute; left: 20px; top: 16px; font-family: var(--font-display, inherit); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.ic-prose ol li > strong:first-child { display: block; font-size: 18px; margin-bottom: .2em; }
.ic-prose blockquote { margin: 2em 0; padding: 20px 28px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--text) 4%, var(--surface)); border-radius: 0 12px 12px 0; font-family: var(--font-display, inherit); font-size: 20px; line-height: 1.5; font-weight: 500; }
.ic-prose blockquote p:last-child { margin-bottom: 0; }
.ic-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; }
.ic-prose th, .ic-prose td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ic-prose th { font-weight: 600; background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.ic-prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); }
/* Dar ekranda çok sütunlu tablo sayfayı yatay taşırmasın: tablo kendi içinde kaydırılır (390px ölçümü). */
@media (max-width: 767.98px) { .ic-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.ic-prose pre { margin: 1.5em 0; padding: 18px 20px; border-radius: 12px; background: var(--text); color: var(--surface); font-size: 14px; line-height: 1.6; overflow-x: auto; }
.ic-prose code { font-size: .92em; padding: .1em .35em; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.ic-prose pre code { padding: 0; background: none; color: inherit; }
.ic-prose img { border-radius: 12px; margin: 1.5em 0; }
.ic-prose strong { font-weight: 600; }
.ic-prose .ic-lead-p { font-size: 21px; line-height: 1.55; color: var(--muted); }

/* Yan ray: masaüstünde yapışkan; mobilde gövdenin altında (İçindekiler mobilde gizli) */
.ic-ray-ic { display: grid; gap: 24px; }
@media (min-width: 992px) { .ic-ray-ic { position: sticky; top: calc(var(--header-h) + 24px); } }
.ic-ray-kutu { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: var(--surface); }
.ic-ray-icindekiler { display: none; }
@media (min-width: 992px) { .ic-ray-icindekiler { display: block; } }
.ic-ray-baslik { font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.ic-ray-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ic-ray-liste a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--text); text-decoration: none; border-left: 2px solid transparent; }
.ic-ray-liste a:hover, .ic-ray-liste a.aktif { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left-color: var(--accent); opacity: 1; }
.ic-ray-cta { background: var(--text); color: var(--surface); border-color: transparent; }
.ic-ray-cta .ic-ray-baslik { color: color-mix(in srgb, var(--surface) 60%, transparent); }
.ic-ray-cta-baslik { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; color: inherit; }
.ic-ray-cta-metin { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--surface) 72%, transparent); margin: 0 0 16px; }
.ic-ray-cta-link { display: flex; align-items: center; gap: 10px; color: var(--surface); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); }
.ic-ray-cta-link:hover { color: var(--accent); opacity: 1; }
.ic-ray-cta .btn { width: 100%; margin-top: 12px; }
.ic-ray-paylas { display: flex; gap: 8px; flex-wrap: wrap; }
.ic-ray-paylas a, .ic-ray-paylas button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; }
.ic-ray-paylas a:hover, .ic-ray-paylas button:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.ic-ray-paylas button[data-kopyalandi] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* Kartlar (hizmet listesi, diğer hizmetler, blog ızgarası, diğer yazılar) */
.ic-kartlar { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ic-kartlar--2, .ic-kartlar--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ic-kartlar--3 { grid-template-columns: repeat(3, 1fr); } }
.ic-kart { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none !important; transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s; }
.ic-kart:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--text) 35%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); opacity: 1; }
.ic-kart-medya { aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ic-kart-medya img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.ic-kart:hover .ic-kart-medya img { transform: scale(1.04); }
.ic-kart-govde { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.ic-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-ui, inherit); font-size: 13px; color: var(--muted); }
.ic-kart-indeks { font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.ic-kart-baslik { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin: 0; color: inherit; }
.ic-kart-ozet { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-kart-ok { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); padding-top: 8px; text-decoration: none; }
.ic-kart-ok svg { transition: transform .25s; }
.ic-kart:hover .ic-kart-ok svg, .ic-kart-ok:hover svg { transform: translateX(4px); }
.ic-kart--buyuk .ic-kart-baslik { font-size: 26px; }

/* Çipler ve meta satırı */
.ic-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); text-decoration: none; }
.ic-cip--sade { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ic-cipler { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 40px; }
.ic-cipler .ic-cip:hover { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.ic-cipler .ic-cip.aktif { background: var(--text); color: var(--surface); }
.ic-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); align-items: center; }
.ic-meta time { color: var(--text); font-weight: 500; }

/* Öne çıkan yazı (blog listesi) */
.ic-one { display: grid; gap: 0; align-items: center; margin-bottom: 48px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
@media (min-width: 992px) { .ic-one { grid-template-columns: 7fr 5fr; } }
.ic-one-medya { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.ic-one-medya img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ic-one:hover .ic-one-medya img { transform: scale(1.03); }
.ic-one-govde { padding: 24px 24px 32px; display: grid; gap: 14px; align-content: center; }
@media (min-width: 992px) { .ic-one-govde { padding: 40px 44px; } }
.ic-one-baslik { font-family: var(--font-display, inherit); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.ic-one-baslik a { color: var(--text); text-decoration: none; }
.ic-one-baslik a:hover { color: var(--accent); opacity: 1; }
.ic-one-ozet { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }

/* SSS — Bootstrap collapse; tüm cevaplar DOM'da (GEO) */
.ic-sss { max-width: 860px; border-top: 1px solid var(--border); }
.ic-sss-oge { border-bottom: 1px solid var(--border); }
.ic-sss-soru { margin: 0; font-size: 18px; }
.ic-sss-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; background: none; border: 0; text-align: left; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.ic-sss-btn:hover { color: var(--accent); }
.ic-sss-ikon { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); transition: background .3s, border-color .3s; }
.ic-sss-ikon::before, .ic-sss-ikon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s; }
.ic-sss-ikon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ic-sss-btn[aria-expanded="true"] .ic-sss-ikon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ic-sss-btn[aria-expanded="true"] .ic-sss-ikon::after { transform: translate(-50%, -50%) rotate(0deg); }
.ic-sss-cevap { padding: 0 48px 22px 4px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.ic-sss-cevap p:last-child { margin-bottom: 0; }

/* CTA bandı (koyu, tam genişlik) */
.ic-cta { background: var(--text); color: var(--surface); padding: 88px 0; position: relative; overflow: hidden; }
.ic-cta::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); pointer-events: none; }
.ic-cta-ic { position: relative; display: grid; gap: 28px; }
@media (min-width: 992px) { .ic-cta-ic { grid-template-columns: 1fr auto; align-items: center; gap: 48px; } }
.ic-cta-baslik { font-family: var(--font-display, inherit); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; color: inherit; }
.ic-cta-metin { font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--surface) 72%, transparent); margin: 0; max-width: 640px; }
.ic-cta-metin p:last-child { margin-bottom: 0; }
.ic-cta-btnler { display: flex; gap: 12px; flex-wrap: wrap; }
.ic-cta .ic-cta-btn-ikincil { background: transparent; color: var(--surface); border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent); }
.ic-cta .ic-cta-btn-ikincil:hover { background: var(--surface); color: var(--text); opacity: 1; }
.ic-cta-alt { position: relative; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); font-size: 15px; }
.ic-cta-alt a { color: var(--surface); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.ic-cta-alt a:hover { color: var(--accent); opacity: 1; }
.ic-cta-sosyal { display: flex; gap: 8px; margin-left: auto; }
.ic-cta-sosyal a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); justify-content: center; }
.ic-cta-sosyal a:hover { border-color: var(--accent); }

/* Galeri (figure ızgarası) */
.ic-galeri { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ic-galeri { grid-template-columns: repeat(3, 1fr); } }
.ic-galeri figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ic-galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ic-galeri figure:hover img { transform: scale(1.03); }

/* İletişim */
.ic-iletisim { display: grid; gap: 40px; padding: 56px 0 0; }
@media (min-width: 992px) { .ic-iletisim { grid-template-columns: 6fr 6fr; gap: 56px; } }
/* Harita iki sütunun altında, tam genişlik (21:9 masaüstü, 16:10 mobil) */
.ic-harita-tam { padding: 40px 0 96px; }
.ic-harita-tam .ic-harita { margin-top: 0; }
@media (min-width: 992px) { .ic-harita-tam .ic-harita { aspect-ratio: 21 / 9; } }
/* Form sayfası (Talep): tam genişlik form kartı; sol sütun alanlar, sağ sütun mesaj (textarea sütunu doldurur) */
.ic-form-tek { padding: 48px 0 96px; }
.ic-form-tek .ic-form-mesaj { display: flex; flex-direction: column; }
.ic-form-tek .ic-form-mesaj textarea { flex: 1; min-height: 220px; }
.ic-bilgi-kartlar { display: grid; gap: 14px; }
.ic-bilgi { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ic-bilgi-ikon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 20px; }
.ic-bilgi-etiket { font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ic-bilgi-deger { font-size: 16px; line-height: 1.5; color: var(--text); font-style: normal; }
.ic-bilgi-deger a { color: var(--text); text-decoration: none; display: block; }
.ic-bilgi-deger a:hover { color: var(--accent); opacity: 1; }
.ic-sosyal-satir { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ic-sosyal-satir a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; background: var(--surface); }
.ic-sosyal-satir a:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.ic-harita { margin-top: 20px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ic-harita iframe { width: 100%; height: 100%; border: 0; display: block; }
.ic-form-kart { border: 1px solid var(--border); border-radius: 20px; padding: 28px; background: var(--surface); }
@media (min-width: 768px) { .ic-form-kart { padding: 40px; } }
.ic-form-kart .form-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--text); margin-bottom: 6px; }
.ic-form-kart .form-control { padding: .8rem 1rem; font-size: 16px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.ic-form-kart .form-control:focus { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ic-form-not { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ic-form-basari { text-align: center; padding: 40px 20px; }
.ic-form-basari-ikon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-size: 34px; }

/* Hakkımızda bölümleri (_Bolum*.cshtml) */
.ic-b-metin { max-width: none; } /* 2026-10-01: tam genişlik (860px sınırı kaldırıldı) */
.ic-b-gm { display: grid; gap: 32px; align-items: center; }
@media (min-width: 992px) { .ic-b-gm--sol, .ic-b-gm--sag { grid-template-columns: 1fr 1fr; gap: 64px; } .ic-b-gm--sag .ic-b-gm-medya { order: 2; } }
.ic-b-gm-medya { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.ic-b-gm-medya img { width: 100%; height: 100%; object-fit: cover; }
.ic-b-gm--ust .ic-b-gm-medya { aspect-ratio: 21 / 9; }
.ic-b-gm--ust .ic-b-gm-metin, .ic-b-gm--yok .ic-b-gm-metin { max-width: 860px; }
.ic-b-cta { background: var(--text); color: var(--surface); border-radius: 20px; padding: 48px 32px; display: grid; gap: 24px; }
@media (min-width: 992px) { .ic-b-cta { grid-template-columns: 1fr auto; align-items: center; padding: 56px 64px; gap: 48px; } }
.ic-sayac { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ic-sayac { grid-template-columns: repeat(4, 1fr); } }
.ic-sayac-oge { padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.ic-sayac-deger { font-family: var(--font-display, inherit); font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--accent); margin-bottom: 10px; }
.ic-sayac-etiket { font-size: 15px; color: var(--muted); }
.ic-ozellik { display: grid; gap: 20px; }
@media (min-width: 640px) { .ic-ozellik { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ic-ozellik { grid-template-columns: repeat(4, 1fr); } }
.ic-ozellik-oge { padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.ic-ozellik-ikon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 22px; margin-bottom: 18px; }
.ic-ozellik-baslik { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.ic-ozellik-metin { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.ic-zaman { display: grid; gap: 20px; }
@media (min-width: 768px) { .ic-zaman { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ic-zaman { grid-template-columns: repeat(4, 1fr); } }
.ic-zaman-oge { position: relative; padding: 28px 24px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.ic-zaman-no { display: inline-block; font-family: var(--font-display, inherit); font-size: 13px; font-weight: 700; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; background: var(--text); color: var(--surface); margin-bottom: 18px; }
.ic-zaman-baslik { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.ic-zaman-metin { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.ic-alinti { max-width: 860px; margin: 0 auto; text-align: center; }
.ic-alinti-isaret { font-family: var(--font-display, inherit); font-size: 80px; line-height: .6; color: var(--accent); }
.ic-alinti blockquote { margin: 16px 0; font-family: var(--font-display, inherit); font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.ic-alinti figcaption { font-size: 15px; color: var(--muted); }
.ic-video { max-width: 960px; margin: 0 auto; border-radius: 20px; overflow: hidden; }