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

:root {
    --bg: #fbfbfd;
    --surface: #fff;
    --text: #1d1d1f;
    --muted: #86868b;
    --accent: #0071e3;
    --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);
}

[data-theme="dark"] {
    --bg: #000;
    --surface: #1d1d1f;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --accent: #2997ff;
    --border: rgba(255, 255, 255, .1);
    --shadow: 0 1px 3px rgba(0, 0, 0, .5);

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
}

/* ─── 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);
}

[data-theme="dark"] .glass {
    background: rgba(0, 0, 0, .6);
}

/* ─── 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);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .6), 0 16px 40px rgba(0, 0, 0, .7);
}

.card-body { padding: 1.75rem; }

.btn {
    border-radius: 999px;
    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;
}

.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.98); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 999px;
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    opacity: .88;
    box-shadow: 0 4px 16px rgba(0, 113, 227, .35);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(41, 151, 255, .4);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
    border-radius: 999px;
}

.btn-outline-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    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);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 3px rgba(41, 151, 255, .2);
}

.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;
}

[data-theme="dark"] .navbar {
    background: rgba(0, 0, 0, .75) !important;
}

.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;
}

[data-theme="dark"] .hero::before {
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(41, 151, 255, .15) 0%, transparent 70%);
}

.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);
}

[data-theme="dark"] .badge-accent {
    background: rgba(41, 151, 255, .15);
}

/* ─── 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; }

/* Editörden gelen uzun içerik mobil güvenliği: uzun kelime kırılır,
   taşan tablo kendi içinde yatay kayar, gömülü medya taşmaz. */
.prose, .blog-content { overflow-wrap: break-word; }
.prose table, .blog-content table { display: block; max-width: 100%; overflow-x: auto; }
.prose iframe, .blog-content iframe,
.prose video, .blog-content video { max-width: 100%; }

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

footer {
    border-top: 1px solid var(--border);
    padding: 3.5rem 0 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);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, .03);
}

/* ─── 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: 64px; --ann-h: 0px; }
@media (min-width: 992px) { :root { --header-h: 80px; } }

/* --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: 1440px;
    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;
}

@media (min-width: 992px) { .site-header-inner { padding: 0 3rem; } }

.site-header-float.scrolled .site-header-inner {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: var(--border);
}

[data-theme="dark"] .site-header-float.scrolled .site-header-inner {
    background: rgba(0,0,0,.6);
}

.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: center;
}

.site-header-link {
    font-size: .875rem;
    color: #fff;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}
.site-header-link:hover { color: rgba(255, 255, 255, .75); opacity: 1; }
/* Kaydırılınca açık cam zemin gelir → beyaz link okunmaz; metin rengine dön (koyu temada beyaz kalır). */
.site-header-float.scrolled .site-header-link { color: var(--text); }
.site-header-float.scrolled .site-header-link:hover { color: var(--muted); }
[data-theme="dark"] .site-header-float.scrolled .site-header-link { color: #fff; }
[data-theme="dark"] .site-header-float.scrolled .site-header-link:hover { color: rgba(255, 255, 255, .75); }

/* Ödül + AI arama ikonları: tepede (şeffaf header, koyu hero üstünde) beyaz;
   kaydırılınca açık cam zemin gelir → metin rengine dön (koyu temada beyaz kalır). */
.site-header-float .site-header-award,
.site-header-float .site-ai-search-trigger { color: #fff; }
.site-header-float .site-ai-search-trigger { background: rgba(255, 255, 255, .12); }
.site-header-float .site-header-award:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.site-header-float.scrolled .site-header-award,
.site-header-float.menu-acik .site-header-award,
.site-header-float.scrolled .site-ai-search-trigger,
.site-header-float.menu-acik .site-ai-search-trigger { color: var(--text); }
.site-header-float.scrolled .site-ai-search-trigger,
.site-header-float.menu-acik .site-ai-search-trigger { background: color-mix(in srgb, var(--text) 6%, transparent); }
.site-header-float.scrolled .site-header-award:hover,
.site-header-float.menu-acik .site-header-award:hover { background: var(--border); color: var(--text); }
[data-theme="dark"] .site-header-float.scrolled .site-header-award,
[data-theme="dark"] .site-header-float.menu-acik .site-header-award,
[data-theme="dark"] .site-header-float.scrolled .site-ai-search-trigger,
[data-theme="dark"] .site-header-float.menu-acik .site-ai-search-trigger { color: #fff; }

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

/* Ödül ikonu (placeholder — ikon sonra belirlenecek): yuvarlak hover alanlı. */
.site-header-award {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--text);
    font-size: 1.25rem;
    text-decoration: none !important;
    transition: background .15s;
}
.site-header-award:hover { background: var(--border); color: var(--text); }

/* Header CTA: standart buton yapısı .ju-btn'dir (Jüri bölümü bloğunda tanımlı).
   Vurgu renkli dolgu her iki temada da kontrastlı olduğundan ek uyarlama gerekmez. */

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

/* Hamburger: şeffaf header'da (koyu hero üstünde) beyaz; cam zemin gelince
   (kaydırma ya da menü açık) metin rengine döner — ödül/AI ikonlarıyla aynı desen. */
.site-header-float .site-header-burger { color: #fff; }
.site-header-float .site-header-burger:hover { background: rgba(255, 255, 255, .15); }
.site-header-float.scrolled .site-header-burger,
.site-header-float.menu-acik .site-header-burger { color: var(--text); }
.site-header-float.scrolled .site-header-burger:hover,
.site-header-float.menu-acik .site-header-burger:hover { background: var(--border); }
[data-theme="dark"] .site-header-float.scrolled .site-header-burger,
[data-theme="dark"] .site-header-float.menu-acik .site-header-burger { color: #fff; }

/* Mobil menü paneli açıkken header'a cam zemin: panel şeffaf header'da koyu hero
   üstüne açılınca linkler okunmuyordu. Scrolled'dan daha yüksek opaklık (menü zemini). */
.site-header-float.menu-acik .site-header-inner {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-color: var(--border);
}
[data-theme="dark"] .site-header-float.menu-acik .site-header-inner { background: rgba(0, 0, 0, .88); }

/* Çok dar ekranda header CTA gizlenir — logo+ikonlarla yatay taşma olmasın
   (menü panelinde "Başvuru Yap" öğesi zaten var). */
@media (max-width: 399.98px) { .site-header-actions .ju-btn { display: none; } }

.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: var(--border);
}

.site-header-mobile-menu {
    list-style: none;
    padding: .75rem 0 .25rem;
    margin: 0;
}
.site-header-mobile-link {
    display: block;
    color: var(--muted);
    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(--text); opacity: 1; }

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

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

/* Hero fontları: varsayılan Figtree/Inter; admin > Ayarlar > Görünüm'de font çifti
   seçilirse GorunumKatalogu.StilEtiketi bu değişkenleri seçilen fontla ezer. */
:root {
    --font-baslik: 'Figtree', 'Inter', var(--bs-font-sans-serif);
    --font-govde: 'Inter', var(--bs-font-sans-serif);
    --font-serif-vurgu: 'Fraunces', Georgia, serif;
}

.hero-v2 {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin-top: calc(-1 * var(--header-h));
    /* İçerik dikeyde tam merkezde (flex); padding yalnız minimum nefes payı.
       Üst pay header yüksekliğini içerir ki merkez, görünür alana göre otursun. */
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 2rem;
    min-height: 100vh;
    /* Mobil adres çubuğu payı: destekleyen tarayıcıda küçük viewport yüksekliği */
    min-height: 100svh;
}

/* Köşe yuvarlama yok: hero tüm gösterim tiplerinde tam kenara oturur. */
.hero-v2-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
[data-theme="dark"] .hero-v2-bg { border-color: rgba(255,255,255,.05); }

/* Medya tam görünür (mock: full-bleed görsel/video + beyaz içerik).
   Okunurluk gölge katmanıyla (admin > Hero/Slider > gölge) ve text-shadow ile sağlanır. */
.hero-v2-bg video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

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

.hero-v2-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 768px) { .hero-v2-content { padding-top: 2rem; padding-bottom: 2rem; } }
@media (min-width: 992px) { .hero-v2-content { padding: 0 3rem; } }

/* Visuvate düzeni: içerik her kırılımda ortalı tek kolon. */
.hero-v2-text { max-width: 64rem; text-align: center; margin: 0 auto; }

.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; } }

/* ─── Hero içerik (eyebrow + dev başlık + açıklama + CTA) ───────────────
   Hem hero-v2 (tekli/video) hem carousel caption'da ortak. Eşleme:
   Baslik → eyebrow, AltBaslik → dev başlık, Aciklama → paragraf, Buton → CTA. */

/* Visuvate hero portu (comp-mia4edzu3): ortalı düzen, GT Walsheim ≈ Figtree sans +
   Fraunces italik serif karışık dev başlık, Inter gövde, pill butonlar. */
.hero-eyebrow {
    color: #fff;
    font-family: var(--font-baslik);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 1.75rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.hero-big-title {
    color: #fff;
    font-family: var(--font-baslik);
    font-weight: 600;
    font-size: clamp(2.75rem, 7vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .4);
}

/* Dev başlıkta *kelime* işareti → Fraunces italik serif vurgusu (visuvate'in
   fraunces_120pt-light italic + letter-spacing -0.06em değerlerinin birebiri). */
.hero-big-title .hero-serif {
    font-family: var(--font-serif-vurgu);
    font-style: italic;
    font-weight: 340;
    letter-spacing: -.06em;
    font-variation-settings: "opsz" 120;
}

.hero-lead-desc {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    max-width: 38rem;
    margin: 0 auto 2.25rem;
    white-space: pre-line;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}
/* Visuvate düzeni: açıklama her kırılımda ortalı. */
.hero-v2-text .hero-lead-desc { margin-left: auto; margin-right: auto; }

/* CTA (pill + kayan ok dairesi): metin solda, beyaz dairede ok sağda; hover'da daire
   sola kayar ve 45° dönerken metin sağa geçer. Mantıksal padding/inset (RTL uyumlu). */
.hero-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 48px;
    padding: 4px;
    padding-inline-start: 24px;
    padding-inline-end: 56px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 500;
    font-size: .9375rem;
    border-radius: 999px;
    text-decoration: none !important;
    cursor: pointer;
    transition: padding .5s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.hero-cta:hover {
    padding-inline-start: 56px;
    padding-inline-end: 24px;
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.hero-cta-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    transition: all .5s cubic-bezier(.4, 0, .2, 1);
}

.hero-cta-icon {
    position: absolute;
    inset-inline-end: 4px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #1d1d1f;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: inset-inline-end .5s cubic-bezier(.4, 0, .2, 1),
                transform .5s cubic-bezier(.4, 0, .2, 1);
}
.hero-cta:hover .hero-cta-icon {
    inset-inline-end: calc(100% - 44px);
    transform: rotate(45deg);
}

.hero-cta:active { transform: scale(.97); }

.hero-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* İkincil CTA (Link2): birincilin yanında saydam/çerçeveli varyant. Medya üzerinde
   beyaz çerçeve + hafif buzlu cam; ikon rozeti yarı saydam beyaz kalır. */
.hero-cta--ikincil {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hero-cta--ikincil:hover {
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .35);
}
.hero-cta--ikincil .hero-cta-icon { background: rgba(255, 255, 255, .9); }

/* Carousel caption içinde buton çifti: yanyana, ortalı, sarmalı. */
.hero-cta-grup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1rem;
}

/* ─── Standart buton: .ju-btn (Jüri bölümü bloğunda tanımlı) ─────────────
   hero-vt-btn kaldırıldı; tüm CTA'lar .ju-btn / .ju-btn--dis kullanır.
   Hero'da medya üzerinde ikincil butonun çerçeve/metni beyaza döner;
   medyasız (plain) heroda tema değerlerine geri döner. */
.hero-v2 .ju-btn--dis,
#heroSlider .ju-btn--dis {
    border-color: rgba(255, 255, 255, .55);
    color: #fff !important;
}
.hero-v2 .ju-btn--dis:hover,
#heroSlider .ju-btn--dis:hover { background: rgba(255, 255, 255, .12); }
.hero-v2--plain .ju-btn--dis { border-color: var(--border); color: var(--text) !important; }
.hero-v2--plain .ju-btn--dis:hover { background: rgba(0, 0, 0, .05); }

/* Dekoratif sarı blob (visuvate sol-alt köşe organik şekli): yalnız medyasız
   (düz) hero'da; hero-v2 overflow:hidden olduğundan köşeden hilal gibi taşar. */
.hero-v2--plain::after {
    content: "";
    position: absolute;
    left: -6rem;
    bottom: -7rem;
    width: 22rem;
    height: 22rem;
    background: #FFD43B;
    border-radius: 54% 46% 58% 42% / 52% 48% 60% 40%;
    z-index: 1;
    pointer-events: none;
}

/* Medyasız hero (arka plan görseli/videosu yok): beyaz metin düz zeminde okunmaz,
   tema renklerine dön. */
.hero-v2--plain .hero-eyebrow { color: var(--text); text-shadow: none; }
.hero-v2--plain .hero-big-title { color: var(--text); text-shadow: none; }
.hero-v2--plain .hero-lead-desc { color: var(--muted); text-shadow: none; }
.hero-v2--plain .hero-cta--ikincil {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.hero-v2--plain .hero-cta--ikincil .hero-cta-icon { background: var(--accent); color: #fff; }

/* ─── Hero logo marquee (hero-refs) — SET ft-refs portu ─────────────────
   Hero'nun alt kenarına bindirilmiş, kesintisiz kayan logo şeridi.
   İçerik iki kez basılır; translateX(-50%) ile sonsuz döngü. */

.hero-refs {
    --hr-slot: 120px;
    --hr-gap: 24px;
    /* CTA butonunun altında, sola hizalı 3 logoluk pencere (SET ft-refs formülü) */
    width: calc(var(--hr-slot) * 3 + var(--hr-gap) * 2);
    max-width: 100%;
    margin-top: 2.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hero-refs__track {
    display: flex;
    align-items: center;
    gap: var(--hr-gap);
    width: max-content;
    animation: heroRefsScroll 28s linear infinite;
}
.hero-refs:hover .hero-refs__track { animation-play-state: paused; }

.hero-refs__item {
    flex: 0 0 var(--hr-slot);
    width: var(--hr-slot);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-refs__item img {
    height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: .7;
    transition: opacity .25s ease;
}
.hero-refs__item:hover img { opacity: 1; }

@keyframes heroRefsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-refs__track { animation: none; }
}
@media (max-width: 767.98px) {
    .hero-refs { --hr-slot: 96px; --hr-gap: 16px; margin-top: 1.75rem; }
    .hero-refs__item img { height: 32px; }
}

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

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

.logo-slider-wrap {
    max-width: 1280px;
    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;
}
[data-theme="dark"] .logo-slider-track img { filter: grayscale(1) invert(1); }
.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; } }

/* ─── Visuvate kurumsal bölümleri ────────────────────────────────────────
   KurumsalBolum (kb-), KurumsalAltBolum (ka-), JuriUyeleri (ju-).
   Font ve renkler sistem token'larına bağlıdır (--font-baslik/--font-govde
   admin > Görünüm'den, vurgu --accent, zemin/metin tema token'ları).
   İçerik: admin > Banner Yönetimi; jüri kartları Ekibimiz modülünden. */

.kb-section { padding: 4.5rem 0 2.5rem; }

.kb-wrap, .ka-wrap, .ju-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .kb-wrap, .ka-wrap, .ju-wrap { padding: 0 3rem; } }

.kb-chip {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem .8rem;
    font-size: .8125rem;
    color: var(--text);
    margin-bottom: 1.25rem;
}

.kb-head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.75rem;
}
@media (min-width: 992px) {
    .kb-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 4rem; }
}

.kb-title {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: clamp(2.125rem, 3.6vw, 3.375rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 0;
    max-width: 34rem;
}

.kb-desc {
    color: var(--muted);
    font-size: .9688rem;
    line-height: 1.65;
    margin: 0;
    max-width: 36rem;
}
@media (min-width: 992px) { .kb-desc { padding-bottom: .375rem; } }

/* 3'lü banner kartları: görsel zemin + altta beyaz panel (başlık + çerçeveli link) */
.kb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .kb-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 992px) { .kb-grid { grid-template-columns: repeat(3, 1fr); } }

.kb-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 24rem;
    background: var(--border);
}

.kb-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kb-card-panel {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    background: var(--bg);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.125rem;
}

.kb-card-ad {
    font-family: var(--font-govde);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 .875rem;
}

.kb-card-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .7rem 1rem;
    color: var(--text);
    font-size: .9375rem;
    text-decoration: none !important;
    transition: background .2s;
}
.kb-card-cta:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
[data-theme="dark"] .kb-card-cta:hover { background: rgba(255, 255, 255, .08); }

/* ─── Kurumsal Alt Bölüm: koyu yeşil istatistik bandı ─── */
.ka-section { padding: 1rem 0; }

/* Bant sistem renklerinden türer: zemin=--text, metin=--bg (koyu temada otomatik
   tersine döner), vurgu değerleri --accent. */
.ka-band {
    background: var(--text);
    color: var(--bg);
    border-radius: 24px;
    margin: 0 .5rem;
}
@media (min-width: 992px) { .ka-band { margin: 0 1rem; } }

.ka-wrap {
    display: grid;
    gap: 2.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
@media (min-width: 992px) { .ka-wrap { grid-template-columns: 1fr 3fr; gap: 3rem; } }

.ka-sol {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}
@media (min-width: 992px) { .ka-sol { border-right: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding-right: 3rem; } }

.ka-logo {
    height: 30px;
    width: auto;
    align-self: flex-start;
    /* logo bant zeminiyle kontrast alır: açık temada (koyu bant) beyaz, koyu temada (açık bant) siyah */
    filter: brightness(0) invert(1);
}
[data-theme="dark"] .ka-logo { filter: brightness(0); }

.ka-title {
    font-family: var(--font-baslik);
    font-weight: 600;
    font-size: 1.4375rem;
    letter-spacing: -.01em;
    color: var(--bg);
    margin: 0;
}

.ka-maddeler { display: grid; gap: 2rem; }
@media (min-width: 768px) { .ka-maddeler { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

@media (min-width: 768px) {
    .ka-madde + .ka-madde { border-left: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding-left: 2.5rem; }
}

.ka-madde-sayi {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--accent);
    margin-bottom: .875rem;
}

.ka-madde-desc {
    color: var(--bg);
    opacity: .85;
    font-size: .9375rem;
    line-height: 1.55;
    margin: 0;
    max-width: 17rem;
}

/* ─── Jüri Üyeleri: sol metin + sağ ekip carousel'i ─── */
.ju-section { padding: 4rem 0 4.5rem; }

.ju-wrap { display: grid; gap: 3rem; }
@media (min-width: 992px) { .ju-wrap { grid-template-columns: 5fr 6fr; align-items: start; gap: 4.5rem; } }

.ju-desc {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 28rem;
    margin: 1.5rem 0 2.25rem;
}

.ju-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

.ju-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.375rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff !important;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: filter .2s, background .2s;
}
.ju-btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }

.ju-btn--dis {
    background: transparent;
    border-color: var(--border);
    color: var(--text) !important;
}
.ju-btn--dis:hover { filter: none; background: rgba(0, 0, 0, .05); }
[data-theme="dark"] .ju-btn--dis:hover { background: rgba(255, 255, 255, .08); }

.ju-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) { .ju-grid { gap: 2rem; } }

.ju-foto {
    aspect-ratio: 5 / 6;
    border-radius: 10px;
    overflow: hidden;
    background: var(--border);
}
.ju-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ju-ad {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text);
    margin-top: 1rem;
}

.ju-rol { color: var(--muted); font-size: .85rem; margin-top: .2rem; }

/* Carousel noktaları: bölüm altına, küçük koyu noktalar */
.ju-carousel .carousel-indicators {
    position: static;
    margin: 1.75rem 0 0;
}
.ju-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text);
    opacity: .25;
    border: 0;
    margin: 0 .25rem;
}
.ju-carousel .carousel-indicators .active { opacity: 1; }

/* ─── Ödül Bölümü (od-) — visuvate comp-mgtl2t49/comp-mgtl2t6a portu ────
   Başlık bandı kb-head sınıflarını paylaşır. Sol açık kart: madalya rozetli
   ilk 3 kazanan; sağ koyu kart: alt görsel + süzülen 2 PNG. Font/renkler
   sistem token'larından; madalya renkleri anlamsal (altın/gümüş/bronz) sabittir
   ve derece ayrıca numara + metinle verilir (renk tek başına anlam taşımaz). */

.od-section { padding: 2.5rem 0; }

.od-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .od-wrap { padding: 0 3rem; } }

.od-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) { .od-grid { grid-template-columns: 1.4fr 1fr; gap: 2rem; } }

.od-kart {
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px) { .od-kart { padding: 2.5rem; } }

/* Alt padding 0: kürsü basamakları (margin-top:auto ile en altta) kartın
   alt kenarına tam oturur. */
.od-kart--sol {
    background: var(--surface);
    border: 1px solid var(--border);
    padding-bottom: 0;
}

/* Masaüstünde iki kart standart ~600px boyda: sağ kartta metin ile telefonlar
   iç içe girmez, sol kartta kürsü nefes alır. */
@media (min-width: 992px) {
    .od-kart { min-height: 600px; }
}

/* Sağ kart sistem renklerinden türer (koyu temada otomatik tersine döner).
   Padding 0: metin kendi sarmalında (od-sag-metin), görsel alanı kart
   kenarlarına tam yapışıktır (visuvate birebiri). */
.od-kart--sag {
    background: var(--text);
    color: var(--bg);
    overflow: hidden;
    position: relative;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bg) 20%, transparent);
}

.od-sag-metin { padding: 2rem 2rem 1.5rem; position: relative; z-index: 2; }
@media (min-width: 992px) { .od-sag-metin { padding: 2.5rem 2.5rem 1.75rem; } }
.od-kart--sag .od-kart-desc { margin-bottom: 0; }
/* Görsel tüm kartı kapladığından kart, soldaki kartla eşit boya gerilir;
   sol kart kısaysa alt sınır: */
.od-kart--sag { min-height: 30rem; }

.od-kart-baslik {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    letter-spacing: -.02em;
    color: inherit;
    margin: 0 0 .875rem;
}
.od-kart--sol .od-kart-baslik { color: var(--text); }

.od-kart-desc {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 2rem;
    max-width: 34rem;
}
.od-kart--sol .od-kart-desc { color: var(--muted); }
.od-kart--sag .od-kart-desc { color: var(--bg); opacity: .85; }

/* ── Kazananlar kürsüsü: 2-1-3 dizilimi (DOM 1-2-3 kalır — ekran okuyucu
   doğru sırada okur; görsel yerleşim CSS order ile). Basamak yükseklikleri
   dereceye göre azalır; renk + numara + metin birlikte anlam taşır. ── */
.od-kursu {
    list-style: none;
    margin: auto 0 0;
    padding: 2.5rem 0 0;
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    border-bottom: 1px solid var(--border);
}

.od-basamak {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.od-basamak--1 { order: 2; }
.od-basamak--2 { order: 1; }
.od-basamak--3 { order: 3; }

/* Kürsüye çıkma hissi: bölüm görünüme girerken basamaklar alttan yükselir
   (yalnız scroll-driven animation destekleyen tarayıcılarda; aksi halde statik). */
@supports (animation-timeline: view()) {
    .od-basamak {
        animation: odYuksel .7s ease-out both;
        animation-timeline: view();
        animation-range: entry 10% entry 55%;
    }
}
@keyframes odYuksel {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.od-basamak-ust { padding: 0 .5rem .875rem; }

.od-kursu-gorsel {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto .75rem;
    border: 1px solid var(--border);
}

.od-taban {
    border-radius: 12px 12px 0 0;
    border: 1px solid transparent;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.od-basamak--1 .od-taban { height: 9rem; }
.od-basamak--2 .od-taban { height: 6.5rem; }
.od-basamak--3 .od-taban { height: 4.75rem; }

.od-taban-no {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
}

/* Monokrom kürsü: hiyerarşi renkle değil ton + yükseklikle. 1. basamak koyu
   (metin rengi zemin), 2./3. nötr açık tonlar — tema token'larından türediği
   için koyu temada otomatik tersine döner. Tek vurgu: birincinin kupası. */
.od-taban--altin { background: var(--text); color: var(--bg); }
.od-taban--altin svg { color: var(--accent); }
.od-taban--gumus { background: color-mix(in srgb, var(--text) 8%, var(--bg)); color: var(--text); border-color: var(--border); }
.od-taban--bronz { background: color-mix(in srgb, var(--text) 4%, var(--bg)); color: var(--text); border-color: var(--border); }

@media (max-width: 575.98px) {
    .od-kursu { gap: .5rem; }
    .od-basamak-ust { padding: 0 .25rem .625rem; }
    .od-kursu-gorsel { width: 48px; height: 48px; }
    .od-basamak--1 .od-taban { height: 6.5rem; }
    .od-basamak--2 .od-taban { height: 4.75rem; }
    .od-basamak--3 .od-taban { height: 3.5rem; }
}

.od-isim {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text);
    line-height: 1.3;
}

.od-yarisma {
    color: var(--muted);
    font-size: .8438rem;
    margin-top: .125rem;
}
@media (max-width: 575.98px) {
    .od-isim { font-size: .9375rem; }
    .od-yarisma { font-size: .75rem; }
    .od-tasarim { font-size: .7813rem; }
}

.od-tasarim {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .875rem;
    color: var(--text);
    opacity: .8;
    margin-top: .375rem;
}
.od-tasarim--link {
    text-decoration: none !important;
    color: var(--accent);
    opacity: 1;
    transition: opacity .2s;
}
.od-tasarim--link:hover { opacity: .75; color: var(--accent); }

/* ── Sağ kart görsel alanı + süzülen PNG'ler ──
   Görsel alanı KARTIN TAMAMINI kaplar (arka plan gibi); metin üstte (z-index)
   okunur kalsın diye üst kısımda kart rengine karışan gradyan bulunur.
   Telefonlar alt kenardan negatif taşar, kartın overflow'u kırpar. */
.od-sag-gorsel {
    position: absolute;
    inset: 0;
    /* Alan kartın 100px altına taşar (kart overflow'u kırpar) — telefonlar
       ve görsel alt kenardan derin görünür. */
    bottom: -100px;
}

.od-sag-ana {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Metnin oturduğu üst bölgeyi kart rengine yumuşakça bağlar (tema uyumlu). */
.od-sag-gorsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--text) 82%, transparent) 0%, transparent 45%);
    pointer-events: none;
}

.od-png {
    position: absolute;
    z-index: 1;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .35));
    animation: odYuz 4s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}
.od-png--1 { left: 4.5%; bottom: -9%; width: 52%; }
/* Ters faz: aynı süre + yarım tur negatif gecikme → biri inerken diğeri çıkar. */
.od-png--2 { right: 4%; bottom: -5%; width: 50%; animation-delay: -2s; }

@keyframes odYuz {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .od-png { animation: none; }
}

/* ─── Form Bölümü (fb-) — aifusionx data-id=6068080 portu ──────────────
   Kavisli çerçeve + tam arka plan görseli; solda koyu cam panel, sağda form
   kartı. Tipografi/renkler sistem token'larından; buton standardı ju-btn. */

.fb-section {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    margin: 2rem .5rem;
    /* Kavisli çentik çerçevesi (aifusionx orijinal clip-path'i): üst kenar ~102px
       içeride başlar, sol üstte yükselen tırnak + sol altta içe kavis. İçerik
       çentik bölgelerine taşmasın diye üst/alt boşluk şekle göre verilir. */
    padding: calc(102px + 1.5rem) 0 calc(104px + 1.5rem);
    /* Görsel yüklenmediyse vurgu renginden koyu degrade */
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #14141f), #14141f);
    -webkit-clip-path: polygon(.132812px 0, .132812px 0, .61064843px 2.55056851px, 1.58741478px 6.30721088px, 3.21633588px 10.92261537px, 5.65063651px 16.04947024px, 9.0435415px 21.34046375px, 13.54827565px 26.44828416px, 19.31806376px 31.02561973px, 26.50613066px 34.72515872px, 35.26570113px 37.19958939px, 45.75px 38.1016px, 197.25px 38.1016px, 197.25px 38.1016px, 198.02325px 38.1234093px, 200.196px 38.2760624px, 203.54775px 38.6903971px, 207.858px 39.4972512px, 212.90625px 40.8274625px, 218.472px 42.8118688px, 224.33475px 45.5813079px, 230.274px 49.2666176px, 236.06925px 53.9986357px, 241.5px 59.9082px, 241.5px 59.9082px, 242.06175px 60.4691575px, 243.654px 62.049764px, 246.13725px 64.4966205px, 249.372px 67.656328px, 253.21875px 71.3754875px, 257.538px 75.5007px, 262.19025px 79.8785665px, 267.036px 84.355688px, 271.93575px 88.7786655px, 276.75px 92.9941px, 276.75px 92.9941px, 281.167501px 95.9212029px, 285.570008px 98.1588512px, 289.957527px 99.7968643px, 294.330064px 100.9250616px, 298.687625px 101.6332625px, 303.030216px 102.0112864px, 307.357843px 102.1489527px, 311.670512px 102.1360808px, 315.968229px 102.0624901px, 320.251px 102.018px, calc(100% - 0.232px) 102.018px, calc(100% - 0.232px) calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 315.968473px calc(100% - 0.93751px), 311.670904px calc(100% - 0.86392px), 307.358311px calc(100% - 0.85105px), 303.030712px calc(100% - 0.98872px), 298.688125px calc(100% - 1.36675px), 294.330568px calc(100% - 2.07496px), 289.958059px calc(100% - 3.20317px), 285.570616px calc(100% - 4.8412px), 281.168257px calc(100% - 7.07887px), 276.751px calc(100% - 10.006px), 276.751px calc(100% - 10.006px), 271.947901px calc(100% - 14.211477px), 267.059368px calc(100% - 18.623936px), 262.223947px calc(100% - 23.091019px), 257.580184px calc(100% - 27.460368px), 253.266625px calc(100% - 31.579625px), 249.421816px calc(100% - 35.296432px), 246.184303px calc(100% - 38.458431px), 243.692632px calc(100% - 40.913264px), 242.085349px calc(100% - 42.508573px), 241.501px calc(100% - 43.092px), 241.501px calc(100% - 43.092px), 236.070222px calc(100% - 49.001426px), 230.274896px calc(100% - 53.733328px), 224.335534px calc(100% - 57.418542px), 218.472648px calc(100% - 60.187904px), 212.90675px calc(100% - 62.17225px), 207.858352px calc(100% - 63.502416px), 203.547966px calc(100% - 64.309238px), 200.196104px calc(100% - 64.723552px), 198.023278px calc(100% - 64.876194px), 197.25px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 34.26303159px calc(100% - 65.993099px), 24.86404992px calc(100% - 68.964992px), 17.34605733px calc(100% - 73.344473px), 11.50205616px calc(100% - 78.662336px), 7.12504875px calc(100% - 84.449375px), 4.00803744px calc(100% - 90.236384px), 1.94402457px calc(100% - 95.554157px), .72601248px calc(100% - 99.933488px), .14700351px calc(100% - 102.905171px), 1.38671763E-31px calc(100% - 104px), 0 0, .132812px 0);
    clip-path: polygon(.132812px 0, .132812px 0, .61064843px 2.55056851px, 1.58741478px 6.30721088px, 3.21633588px 10.92261537px, 5.65063651px 16.04947024px, 9.0435415px 21.34046375px, 13.54827565px 26.44828416px, 19.31806376px 31.02561973px, 26.50613066px 34.72515872px, 35.26570113px 37.19958939px, 45.75px 38.1016px, 197.25px 38.1016px, 197.25px 38.1016px, 198.02325px 38.1234093px, 200.196px 38.2760624px, 203.54775px 38.6903971px, 207.858px 39.4972512px, 212.90625px 40.8274625px, 218.472px 42.8118688px, 224.33475px 45.5813079px, 230.274px 49.2666176px, 236.06925px 53.9986357px, 241.5px 59.9082px, 241.5px 59.9082px, 242.06175px 60.4691575px, 243.654px 62.049764px, 246.13725px 64.4966205px, 249.372px 67.656328px, 253.21875px 71.3754875px, 257.538px 75.5007px, 262.19025px 79.8785665px, 267.036px 84.355688px, 271.93575px 88.7786655px, 276.75px 92.9941px, 276.75px 92.9941px, 281.167501px 95.9212029px, 285.570008px 98.1588512px, 289.957527px 99.7968643px, 294.330064px 100.9250616px, 298.687625px 101.6332625px, 303.030216px 102.0112864px, 307.357843px 102.1489527px, 311.670512px 102.1360808px, 315.968229px 102.0624901px, 320.251px 102.018px, calc(100% - 0.232px) 102.018px, calc(100% - 0.232px) calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 320.251px calc(100% - 0.982px), 315.968473px calc(100% - 0.93751px), 311.670904px calc(100% - 0.86392px), 307.358311px calc(100% - 0.85105px), 303.030712px calc(100% - 0.98872px), 298.688125px calc(100% - 1.36675px), 294.330568px calc(100% - 2.07496px), 289.958059px calc(100% - 3.20317px), 285.570616px calc(100% - 4.8412px), 281.168257px calc(100% - 7.07887px), 276.751px calc(100% - 10.006px), 276.751px calc(100% - 10.006px), 271.947901px calc(100% - 14.211477px), 267.059368px calc(100% - 18.623936px), 262.223947px calc(100% - 23.091019px), 257.580184px calc(100% - 27.460368px), 253.266625px calc(100% - 31.579625px), 249.421816px calc(100% - 35.296432px), 246.184303px calc(100% - 38.458431px), 243.692632px calc(100% - 40.913264px), 242.085349px calc(100% - 42.508573px), 241.501px calc(100% - 43.092px), 241.501px calc(100% - 43.092px), 236.070222px calc(100% - 49.001426px), 230.274896px calc(100% - 53.733328px), 224.335534px calc(100% - 57.418542px), 218.472648px calc(100% - 60.187904px), 212.90675px calc(100% - 62.17225px), 207.858352px calc(100% - 63.502416px), 203.547966px calc(100% - 64.309238px), 200.196104px calc(100% - 64.723552px), 198.023278px calc(100% - 64.876194px), 197.25px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 45.75px calc(100% - 64.898px), 34.26303159px calc(100% - 65.993099px), 24.86404992px calc(100% - 68.964992px), 17.34605733px calc(100% - 73.344473px), 11.50205616px calc(100% - 78.662336px), 7.12504875px calc(100% - 84.449375px), 4.00803744px calc(100% - 90.236384px), 1.94402457px calc(100% - 95.554157px), .72601248px calc(100% - 99.933488px), .14700351px calc(100% - 102.905171px), 1.38671763E-31px calc(100% - 104px), 0 0, .132812px 0);
}
@media (min-width: 992px) { .fb-section { margin: 2.5rem 1rem; padding: calc(102px + 2rem) 0 calc(104px + 2rem); } }

/* Dar ekranda piksel-sabit sol süsleme genişliğin çoğunu kaplar → çentiği kapat,
   düz oval çerçeveye dön (içerik boşlukları da normale iner). */
@media (max-width: 575.98px) {
    .fb-section {
        -webkit-clip-path: none;
        clip-path: none;
        padding: 3rem 0;
    }
}

/* İç sayfa kullanımı (örn. /basvuru): kavisli çentik YOK — düz yuvarlatılmış çerçeve.
   Çentik payı olan üst/alt boşluklar da normale iner. */
.fb-ic-sayfa .fb-section {
    -webkit-clip-path: none;
    clip-path: none;
    padding: 3rem 0;
}
@media (min-width: 992px) { .fb-ic-sayfa .fb-section { padding: 4rem 0; } }

.fb-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fb-wrap {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .fb-wrap { padding: 0 3rem; } }

.fb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) { .fb-grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } }

/* ── Sol: koyu cam panel ── */
.fb-sol {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 2rem;
    color: #fff;
    background: rgba(12, 12, 24, .45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 992px) { .fb-sol { padding: 2.75rem; } }

.fb-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1rem;
}

.fb-title {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 26rem;
}

.fb-lead {
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    max-width: 30rem;
}

/* Alt yarı çizgiyle ayrılır ve panelin dibine itilir (aradaki BOŞLUK esner). */
.fb-alt { margin-top: auto; padding-top: 2.5rem; }

.fb-cizgi {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: 0 0 1.5rem;
    opacity: 1;
}

.fb-aciklama2 {
    color: rgba(255, 255, 255, .88);
    font-size: .9688rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.fb-iletisim {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) { .fb-iletisim { grid-template-columns: 1fr 1fr; } }

.fb-kutu {
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.fb-kutu-etiket {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7188rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.fb-kutu-deger {
    color: #fff !important;
    font-weight: 600;
    font-size: .9688rem;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}
.fb-kutu-deger:hover { opacity: .85; }

/* ── Sağ: form kartı ── */
.fb-sag {
    background: var(--surface);
    border-radius: 20px;
    padding: 2rem;
    color: var(--text);
}
@media (min-width: 992px) { .fb-sag { padding: 2.75rem; } }

.fb-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    color: var(--text);
}

.fb-sag-baslik {
    font-family: var(--font-baslik);
    font-weight: 700;
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    letter-spacing: -.02em;
    text-align: center;
    color: var(--text);
    margin: 0 0 .75rem;
}

.fb-sag-desc {
    color: var(--muted);
    font-size: .9688rem;
    line-height: 1.6;
    text-align: center;
    max-width: 30rem;
    margin: 0 auto 2rem;
}

.fb-durum {
    border-radius: 10px;
    padding: .875rem 1.125rem;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}
.fb-durum--ok { background: rgba(25, 135, 84, .12); color: #146c43; border: 1px solid rgba(25, 135, 84, .3); }
.fb-durum--hata { background: rgba(220, 53, 69, .1); color: #b02a37; border: 1px solid rgba(220, 53, 69, .3); }
[data-theme="dark"] .fb-durum--ok { color: #6fdc9c; }
[data-theme="dark"] .fb-durum--hata { color: #f1808a; }

.fb-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem 1.25rem;
}
@media (min-width: 576px) { .fb-form { grid-template-columns: 1fr 1fr; } }

.fb-alan { min-width: 0; }
@media (min-width: 576px) { .fb-alan--tam { grid-column: 1 / -1; } }

.fb-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .375rem;
}

.fb-yardim { color: var(--muted); font-size: .7813rem; margin-top: .375rem; }

.fb-not { color: var(--muted); font-size: .8438rem; margin: 0; grid-column: 1 / -1; }

/* Gönder butonu .ju-btn standardını kullanır (buton bir <button>: çerçevesiz kalsın) */
.fb-form .ju-btn { border-style: solid; }

/* Honeypot: görsel olarak tamamen gizli, ekran okuyucudan da saklı */
.fb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Blog Bölümü (bl-) — kb-head + kb-card carousel + standart buton ─── */

.bl-section { padding: 2.5rem 0; }

.bl-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 992px) { .bl-wrap { padding: 0 3rem; } }

/* Slayt başına 4 kart (mobil 1, tablet 2) */
.bl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 576px) { .bl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .bl-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

/* kb-card'ın blog boyutlaması: 4'lü dizilimde daha kompakt */
.bl-card { min-height: 21rem; }
.bl-card .kb-card-panel { left: .875rem; right: .875rem; bottom: .875rem; padding: 1rem 1rem .875rem; }
.bl-card-ad {
    font-size: 1rem;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bl-card .kb-card-cta { padding: .55rem .875rem; font-size: .875rem; }

.bl-tarih {
    color: var(--muted);
    font-size: .7813rem;
    margin-bottom: .375rem;
}

/* Oklar: yuvarlak, tema yüzeyli — kartların dış kenarında dikey ortalı */
.bl-carousel { padding-bottom: 3rem; }

.bl-carousel .bl-ok {
    width: 44px;
    height: 44px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background .2s;
}
.bl-carousel .bl-ok:hover { background: var(--bg); color: var(--text); }
.bl-carousel .carousel-control-prev { left: -8px; }
.bl-carousel .carousel-control-next { right: -8px; }
@media (min-width: 1200px) {
    .bl-carousel .carousel-control-prev { left: -22px; }
    .bl-carousel .carousel-control-next { right: -22px; }
}

/* Noktalar: jüri carousel'iyle aynı dil — bölüm altında küçük koyu noktalar */
.bl-carousel .carousel-indicators {
    position: absolute;
    bottom: 0;
    margin: 0;
}
.bl-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text);
    opacity: .25;
    border: 0;
    margin: 0 .25rem;
}
.bl-carousel .carousel-indicators .active { opacity: 1; }

.bl-buton {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* ─── Footer + üstü CTA (ft-) — visuvate portu ──────────────────────────
   CTA: hero tipografili ortalı başlık + 2 standart buton + büyük görsel;
   görselin alt kısmı buzlu sosyal şeridin arkasına girer. Footer: sosyal
   şerit (kolon sayısı hesap sayısına uyar) + 4 kolon + copyright. */

.ft-cta {
    text-align: center;
    padding: 5rem 1.5rem 0;
    margin-top: 3rem;
}

.ft-cta-baslik {
    /* hero-big-title'ın açık zemin uyarlaması */
    color: var(--text);
    text-shadow: none;
    margin: 0 auto 2rem;
    max-width: 60rem;
}

.ft-cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Büyük logo görseli: buzlu çerçeve logonun ortasından geçer, alt kısmı
   çerçevenin arkasında flu devam eder (visuvate düzeni). */
.ft-gorsel {
    max-width: 920px;
    margin: 60px auto -90px;
    padding: 0;
}
.ft-gorsel img {
    width: 100%;
    display: block;
}

.ft { position: relative; }

/* Buzlu çerçeve: sosyal şerit + kolonlar tek bordürlü ızgara; kenarlardan
   içeride durur, logonun üstüne derin biner ve arkasını flulaştırır. */
.ft-cerceve {
    position: relative;
    z-index: 2;
    width: min(92%, 1680px);
    margin: -57px auto 0;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 52%, transparent);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
}
@media (max-width: 991.98px) { .ft-cerceve { margin-top: -140px; } }
@media (max-width: 575.98px) { .ft-cerceve { width: 100%; margin-top: -60px; border-left: 0; border-right: 0; } }

.ft-sosyal {
    display: grid;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 767.98px) {
    .ft-sosyal { grid-template-columns: 1fr 1fr !important; }
}

.ft-sosyal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.375rem 2rem;
    color: var(--text) !important;
    font-size: .9688rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .2s;
    min-width: 0;
}
.ft-sosyal-item + .ft-sosyal-item { border-left: 1px solid var(--border); }
.ft-sosyal-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.ft-sosyal-ad {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-sosyal-ad i { font-size: 1.125rem; }

/* 4 kolon: Menü | Blog | Yasal | İletişim — hücreler dikey ayraçlı (ızgara devamı) */
.ft-kolonlar {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .ft-kolonlar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .ft-kolonlar { grid-template-columns: repeat(4, 1fr); } }

.ft-kolon { padding: 2rem 1.5rem; min-width: 0; }
@media (min-width: 992px) {
    .ft-kolon { padding: 4.5rem 2rem 3.5rem; }
    .ft-kolon + .ft-kolon { border-left: 1px solid var(--border); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .ft-kolon:nth-child(2n) { border-left: 1px solid var(--border); }
}

.ft-kolon-baslik {
    color: var(--muted);
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

.ft-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ft-link {
    color: var(--text) !important;
    font-size: .9375rem;
    line-height: 1.5;
    text-decoration: none !important;
    transition: opacity .15s;
}
a.ft-link:hover { opacity: .65; }
.ft-link--duz { cursor: default; }

.ft-copy {
    text-align: center;
    color: var(--muted);
    font-size: .875rem;
    padding: 1.75rem 1.5rem 2rem;
    border-top: 1px solid var(--border);
}