/* ==========================================================================
   BizACT - site.css
   Canli, teknik kurumsal tema: koyu indigo zeminler, elektrik mavi -> mor
   gradyan vurgular, parlama (glow) golgeleri, cam (glass) yuzeyler, gradyan
   kenarlikli kartlar. Etkilesimli parcalar (sinir agi canvas'i, kesif
   sekmeleri, ilerleme cizgisi, egim) site.js icindedir.
   Bootstrap 5.3 uzerine kurulur; grid/offcanvas/carousel/collapse
   davranislari burada yeniden yazilmaz.
   ========================================================================== */

:root {
    /* ---- Kurumsal kimlik paleti ----
       Derin Indigo  #1E1B4B  ana renk, genis alanlar
       Elektrik Mavi #3B82F6  vurgu: dugmeler, isaretler
       Parlak Mor    #8B5CF6  tamamlayici: gradyanin ikinci ucu
       Kar Beyazi    #F8FAFC  notr zemin

       Koyu zemin uzerinde METIN icin acik tonlar kullanilir: #3B82F6 indigo
       uzerinde 4.35:1 ile kucuk metin esigini gecemez, --maviAcik 8.87:1 verir. */
    --indigo: #1E1B4B;
    --indigoKoyu: #15123A;
    --indigoDerin: #0B0A26;
    --indigoOrta: #2A2566;
    --mavi: #3B82F6;
    --maviKoyu: #2563EB;
    --maviAcik: #93C5FD;
    --maviParlak: #60A5FA;
    --mor: #8B5CF6;
    --morKoyu: #7C3AED;
    --morAcik: #C4B5FD;
    /* Teknik vurgu: durum noktalari, ince isik cizgileri. Metin icin degil. */
    --siyan: #22D3EE;

    --gradyan: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    --gradyanDugme: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #7C3AED 100%);
    --gradyanMetin: linear-gradient(90deg, #60A5FA 0%, #A78BFA 55%, #22D3EE 100%);
    --gradyanCizgi: linear-gradient(90deg, transparent, #3B82F6 30%, #8B5CF6 70%, transparent);

    --metin: #12103A;
    --metinGovde: #414868;
    --metinSolgun: #6A7396;
    --cizgi: #E2E7F5;
    --karBeyazi: #F8FAFC;
    --zemin: #F5F7FF;
    --zeminSerit: #EEF2FF;
    --beyaz: #FFFFFF;

    --yaziBaslik: 'Space Grotesk', 'Manrope', 'Segoe UI', sans-serif;
    --yaziGovde: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --yaziMono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

    --gecis: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --golge: 0 10px 30px rgba(30, 27, 75, 0.10);
    --golgeGuclu: 0 24px 60px rgba(30, 27, 75, 0.18);
    --golgeMavi: 0 12px 34px rgba(59, 130, 246, 0.35);
    --golgeMor: 0 0 60px rgba(139, 92, 246, 0.35);
    --yuvarlak: 16px;
    --yuvarlakKucuk: 10px;

    /* Bootstrap container genisligi (slider gostergelerini hizalamak icin) */
    --kapsayici: 100%;
}

@media (min-width: 576px)  { :root { --kapsayici: 540px; } }
@media (min-width: 768px)  { :root { --kapsayici: 720px; } }
@media (min-width: 992px)  { :root { --kapsayici: 960px; } }
@media (min-width: 1200px) { :root { --kapsayici: 1140px; } }
@media (min-width: 1400px) { :root { --kapsayici: 1320px; } }

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--yaziGovde);
    color: var(--metinGovde);
    background-color: var(--zemin);
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--yaziBaslik);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--metin);
}

a {
    color: var(--maviKoyu);
    text-decoration: none;
    transition: color var(--gecis), background-color var(--gecis), border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

a:hover {
    color: var(--morKoyu);
}

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

img {
    max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--siyan);
    outline-offset: 3px;
}

.atlaBaglantisi {
    position: absolute;
    left: -9999px;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--indigo);
    color: #fff;
}

.atlaBaglantisi:focus {
    left: 0;
    top: 0;
}

/* Gradyan metin ve mono etiket yardimcilari */
.gradyanMetin,
.bolumEtiket,
.ctaEtiket {
    background: var(--gradyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--mavi);
}

.mono,
.kirintiYolu,
.kartTarih,
.heroRozet,
.rakamEtiket,
.kunye,
.siteAlt h6,
.yanKutu h4,
.iletisimKutu h4,
.tescilBilgi,
.kesifSayac,
.serit {
    font-family: var(--yaziMono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Kaydırma ilerleme çizgisi ---------- */
.kaydirmaIlerleme {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--gradyanMetin);
    z-index: 2001;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.8);
    pointer-events: none;
}

/* ---------- Üst ince şerit ---------- */
.ustSerit {
    background: var(--indigoDerin);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--yaziMono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 0;
}

.ustSeritSol {
    display: flex;
    align-items: center;
    gap: 26px;
}

.ustSeritSol a {
    color: rgba(255, 255, 255, 0.6);
}

.ustSeritSol a:hover {
    color: #fff;
}

.ustSeritSol i {
    color: var(--maviParlak);
    margin-right: 7px;
    font-size: 0.68rem;
}

.teknokentRozet {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--maviAcik);
    text-transform: uppercase;
}

.teknokentRozet::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--siyan);
    animation: nabiz 2.4s ease-in-out infinite;
}

.sosyalIkon {
    color: rgba(255, 255, 255, 0.6);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
}

.sosyalIkon:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@keyframes nabiz {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2), 0 0 12px rgba(34, 211, 238, 0.8); }
    50%      { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0.05), 0 0 20px rgba(34, 211, 238, 0.4); }
}

/* ---------- Ana menü (koyu cam) ---------- */
/* backdrop-filter, position:fixed cocuklar icin kapsayici blok olur; efekt
   bu yuzden ::before katmanindadir (mobil menu paneli aksi halde hapsolur). */
.anaMenu {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    /* offcanvas perdesi 1040, paneli 1045 */
    z-index: 1046;
}

.anaMenu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 10, 38, 0.82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    pointer-events: none;
    z-index: 0;
}

.anaMenu > .container {
    position: relative;
    z-index: 1;
    min-height: 76px;
    transition: min-height var(--gecis);
}

.anaMenu.kaydirildi > .container {
    min-height: 64px;
}

.anaMenu.kaydirildi {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 28px;
}

.navbar-brand img {
    height: 44px;
    width: auto;
    /* saydam logo koyu zeminde beyaz silüet olur */
    filter: brightness(0) invert(1);
    transition: height var(--gecis);
}

.anaMenu.kaydirildi .navbar-brand img {
    height: 38px;
}

.anaMenu .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 13px !important;
    position: relative;
    white-space: nowrap;
}

.anaMenu .nav-link::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradyanMetin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--gecis);
}

.anaMenu .nav-link:hover,
.anaMenu .nav-link.aktif {
    color: #fff;
}

.anaMenu .nav-link:hover::after,
.anaMenu .nav-link.aktif::after {
    transform: scaleX(1);
}

.anaMenu .dropdown-menu {
    background: rgba(18, 16, 58, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 8px;
    min-width: 280px;
    margin-top: 0;
}

.anaMenu .dropdown-item {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    white-space: normal;
}

.anaMenu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.menuSagAlan {
    margin-left: 10px;
}

.dilDugmesi {
    font-family: var(--yaziMono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.dilDugmesi b {
    color: #fff;
    font-weight: 600;
}

.dilDugmesi span {
    margin: 0 7px;
    color: rgba(255, 255, 255, 0.25);
}

.dilDugmesi:hover {
    border-color: var(--maviParlak);
    color: #fff;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.menuCizgi,
.menuCizgi::before,
.menuCizgi::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.menuCizgi {
    position: relative;
}

.menuCizgi::before,
.menuCizgi::after {
    content: '';
    position: absolute;
    left: 0;
}

.menuCizgi::before { top: -6px; }
.menuCizgi::after  { top: 6px; width: 12px; background: var(--maviParlak); }

.mobilMenuPanel {
    --bs-offcanvas-bg: var(--indigoDerin);
    --bs-offcanvas-color: #fff;
}

.mobilMenuPanel .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 24px;
}

.mobilMenuPanel .offcanvas-title {
    font-family: var(--yaziMono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--maviAcik);
}

/* lg araliginda menu tek satira sigsin */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand { margin-right: 12px; }
    .navbar-brand img { height: 38px; }
    .anaMenu .nav-link { font-size: 0.83rem; padding: 10px 8px !important; }
    .anaMenu .nav-link::after { left: 8px; right: 8px; }
    .menuSagAlan .btnBirincil { padding: 10px 14px; font-size: 0.84rem; }
    .dilDugmesi { padding: 8px 9px; font-size: 0.7rem; }
}

/* ---------- Düğmeler ---------- */
.btnBirincil,
.btnIkincil,
.btnCizgili,
.btnCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--yuvarlakKucuk);
    padding: 12px 22px;
    font-family: var(--yaziGovde);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.btnBirincil i,
.btnIkincil i,
.btnCizgili i,
.btnCta i {
    font-size: 0.85em;
    transition: transform var(--gecis);
}

.btnBirincil:hover i,
.btnIkincil:hover i,
.btnCizgili:hover i,
.btnCta:hover i {
    transform: translateX(3px);
}

/* Birincil: Elektrik Mavi gradyani + parlama */
.btnBirincil {
    background: var(--gradyanDugme);
    color: #fff;
    border: 0;
    box-shadow: var(--golgeMavi);
}

.btnBirincil:hover,
.btnBirincil:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.45);
}

.btnIkincil {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

.btnIkincil:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.btnCizgili {
    background: #fff;
    color: var(--indigo);
    border: 1px solid var(--cizgi);
    box-shadow: var(--golge);
}

.btnCizgili:hover {
    border-color: var(--mavi);
    color: var(--maviKoyu);
    transform: translateY(-2px);
}

.btnCta {
    background: #fff;
    color: var(--indigo);
    border: 0;
    padding: 14px 26px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.btnCta:hover {
    color: var(--indigo);
    transform: translateY(-2px);
}

.btn-sm.btnBirincil,
.btn-sm.btnCizgili {
    padding: 8px 14px;
    font-size: 0.84rem;
}

/* ---------- Koyu zemin ortak ---------- */
.koyuZemin {
    position: relative;
    background: var(--indigoDerin);
    color: #fff;
    overflow: hidden;
}

.koyuZemin::before {
    /* isik lekeleri */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 85% 15%, rgba(59, 130, 246, 0.28), transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(139, 92, 246, 0.28), transparent 60%),
        radial-gradient(ellipse 35% 35% at 60% 100%, rgba(34, 211, 238, 0.12), transparent 60%);
    pointer-events: none;
}

.koyuZemin::after {
    /* ince izgara */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
}

.koyuZemin > .container,
.koyuZemin .carousel-inner,
.koyuZemin .carousel-indicators {
    position: relative;
    z-index: 2;
}

/* ---------- Hero ---------- */
.heroAg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.heroIzgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    padding: 56px 0 88px;
}

.heroRozet {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--maviAcik);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(147, 197, 253, 0.25);
    border-radius: 999px;
    padding: 7px 14px 7px 10px;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
}

.heroRozet::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--siyan);
    animation: nabiz 2.4s ease-in-out infinite;
}

.heroBaslik {
    font-size: clamp(1.9rem, 3.3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #fff;
    margin-bottom: 18px;
}

.heroBaslik .vurgu {
    background: var(--gradyanMetin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: gradyanAkis 6s linear infinite;
}

@keyframes gradyanAkis {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.heroMetin {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 540px;
    margin-bottom: 30px;
    line-height: 1.75;
}

.heroDugmeler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Cam cerceve: gradyan kenarlik + parlama; JS ile fareye gore hafif egilir */
.heroSahneKapsayici {
    perspective: 1200px;
}

.heroCerceve {
    position: relative;
    border-radius: 20px;
    padding: 10px;
    background: linear-gradient(rgba(21, 18, 58, 0.85), rgba(21, 18, 58, 0.85)) padding-box,
                linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(139, 92, 246, 0.6), rgba(34, 211, 238, 0.7)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), var(--golgeMor);
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.heroSahne {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    background: rgba(8, 7, 30, 0.9);
    overflow: hidden;
}

.heroGorsel {
    display: block;
    width: 100%;
    height: 100%;
    /* fotograf asla kirpilmaz */
    object-fit: contain;
}

/* Yuzen istatistik rozetleri */
.heroRozetKutu {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(18, 16, 58, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    animation: yuzme 6s ease-in-out infinite;
}

.heroRozetKutu.solAlt  { left: -18px; bottom: 28px; }
.heroRozetKutu.sagUst  { right: -18px; top: 28px; animation-delay: -3s; }

.heroRozetIkon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gradyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: var(--golgeMavi);
}

.heroRozetDeger {
    font-family: var(--yaziBaslik);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.heroRozetEtiket {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 3px;
}

@keyframes yuzme {
    0%, 100% { transform: translateZ(40px) translateY(0); }
    50%      { transform: translateZ(40px) translateY(-8px); }
}

.heroGorselNot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    font-family: var(--yaziMono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, 0.7);
}

/* Slider göstergeleri: gradyan ilerleme cubuklari */
.hero .carousel-indicators {
    position: absolute;
    left: 12px;
    right: auto;
    bottom: 34px;
    margin: 0;
    gap: 10px;
    justify-content: flex-start;
}

.hero .carousel-indicators [data-bs-target] {
    width: 44px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
    text-indent: -999px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.hero .carousel-indicators [data-bs-target]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradyanMetin);
    transform: scaleX(0);
    transform-origin: left;
}

.hero .carousel-indicators .active::after {
    animation: ilerleme 7s linear forwards;
}

@keyframes ilerleme {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Slayt gecisi: Bootstrap'in carousel-fade'i eski slayti 0,6 sn tam
   gorunur tutup yenisini ustune bindirir; iki slaytin yazisi ayni anda
   okunur. Slayt (item) duzeyindeki zamanlamaya dokunulmaz (Bootstrap JS
   gecis suresini oradan okur); yalnizca slayt ICERIGI yonetilir:
   cikan icerik 0,25 sn'de soner, giren icerik 0,2 sn gecikmeyle belirir. */
.hero.carousel-fade .carousel-item .heroIzgara {
    transition: opacity 0.25s ease;
}

.hero.carousel-fade .active.carousel-item-start .heroIzgara,
.hero.carousel-fade .active.carousel-item-end .heroIzgara {
    opacity: 0;
}

.hero.carousel-fade .carousel-item-next.carousel-item-start .heroIzgara,
.hero.carousel-fade .carousel-item-prev.carousel-item-end .heroIzgara {
    animation: heroBelir 0.4s ease 0.2s both;
}

@keyframes heroBelir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
    to   { transform: none; }
}

@media (min-width: 992px) {
    .heroIzgara {
        grid-template-columns: 6fr 6fr;
        gap: 56px;
        padding: 72px 0 104px;
        min-height: clamp(560px, calc(100vh - 140px), 720px);
    }

    .heroMetinKolon {
        padding-right: 8px;
    }

    .hero .carousel-indicators {
        left: calc(50% - var(--kapsayici) / 2 + 12px);
        bottom: 44px;
    }
}

@media (min-width: 1200px) {
    .heroIzgara {
        grid-template-columns: 11fr 13fr;
    }
}

/* ---------- Akan çözüm şeridi ---------- */
.serit {
    background: var(--indigoKoyu);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    position: relative;
    padding: 14px 0;
}

.serit::before,
.serit::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.serit::before { left: 0; background: linear-gradient(90deg, var(--indigoKoyu), transparent); }
.serit::after  { right: 0; background: linear-gradient(270deg, var(--indigoKoyu), transparent); }

.seritIc {
    display: flex;
    width: max-content;
    animation: akis 40s linear infinite;
}

.serit:hover .seritIc {
    animation-play-state: paused;
}

.seritIc span {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding-right: 22px;
    white-space: nowrap;
}

.seritIc span::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gradyan);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
}

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

/* ---------- Bölümler ---------- */
.bolum {
    padding: 96px 0;
}

.bolumAcik {
    background: #fff;
}

.bolumEtiket {
    display: inline-block;
    font-family: var(--yaziMono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.bolumBaslik {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 14px;
}

.bolumMetin {
    color: var(--metinSolgun);
    font-size: 1rem;
    max-width: 620px;
}

.bolumBaslikOrta {
    text-align: center;
}

.bolumBaslikOrta .bolumMetin {
    margin-left: auto;
    margin-right: auto;
}

.bolumUst {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px 48px;
    margin-bottom: 44px;
}

.bolumUst .bolumMetin {
    max-width: 460px;
}

.koyuZemin .bolumBaslik,
.koyuZemin h2,
.koyuZemin h3 {
    color: #fff;
}

.koyuZemin .bolumMetin {
    color: rgba(255, 255, 255, 0.68);
}

/* ---------- Çözüm keşif paneli (sekmeler) ---------- */
.kesif {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.kesifListe {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.kesifSekme {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    width: auto;
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--cizgi);
    background: #fff;
    color: var(--metin);
    font-family: var(--yaziGovde);
    cursor: pointer;
    position: relative;
    transition: box-shadow var(--gecis), border-color var(--gecis), transform var(--gecis);
}

.kesifSekme::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--gradyan);
    opacity: 0;
    transition: opacity var(--gecis);
}

.kesifIkon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--zeminSerit);
    color: var(--maviKoyu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background var(--gecis), color var(--gecis), box-shadow var(--gecis);
}

.kesifSekmeMetin {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.kesifSekmeMetin strong {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.kesifSekmeMetin small {
    font-family: var(--yaziMono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--metinSolgun);
    margin-top: 4px;
}

.kesifOk {
    margin-left: auto;
    color: var(--metinSolgun);
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--gecis), transform var(--gecis), color var(--gecis);
}

.kesifSekme:hover {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: var(--golge);
}

.kesifSekme.aktif {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--gradyan) border-box;
    box-shadow: 0 18px 44px rgba(59, 130, 246, 0.18);
}

.kesifSekme.aktif::before {
    opacity: 1;
}

.kesifSekme.aktif .kesifIkon {
    background: var(--gradyan);
    color: #fff;
    box-shadow: var(--golgeMavi);
}

.kesifSekme.aktif .kesifOk {
    opacity: 1;
    transform: none;
    color: var(--maviKoyu);
}

.kesifPaneller {
    position: relative;
}

.kesifPanel {
    display: none;
    background: #fff;
    border-radius: var(--yuvarlak);
    border: 1px solid var(--cizgi);
    box-shadow: var(--golgeGuclu);
    overflow: hidden;
}

.kesifPanel.aktif {
    display: grid;
    animation: belir 0.45s ease both;
}

@keyframes belir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.kesifGorsel {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--indigoDerin);
    overflow: hidden;
}

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

.kesifGorsel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 38, 0.6));
    pointer-events: none;
}

.kesifSayac {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    background: rgba(11, 10, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--maviAcik);
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

.kesifIcerik {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
}

.kesifIcerik h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.kesifIcerik p {
    color: var(--metinGovde);
    font-size: 0.96rem;
    margin-bottom: 22px;
    flex-grow: 1;
}

.kesifIcerik .btnBirincil {
    align-self: flex-start;
}

@media (min-width: 992px) {
    .kesif {
        grid-template-columns: 5fr 7fr;
        gap: 32px;
        align-items: start;
    }

    .kesifListe {
        flex-direction: column;
        overflow: visible;
        padding: 0;
        gap: 10px;
    }

    .kesifSekme {
        width: 100%;
        padding: 14px 18px 14px 14px;
    }

    .kesifSekme.aktif {
        transform: translateX(8px);
    }

    .kesifGorsel {
        aspect-ratio: 16 / 8.5;
    }
}

/* ---------- Rakamlar şeridi (koyu) ---------- */
.rakamlarSerit {
    padding: 72px 0;
}

.rakamlarSerit::after {
    display: none;
}

.rakamIzgara {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.rakamKutu {
    position: relative;
    padding: 26px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.rakamKutu:hover {
    transform: translateY(-4px);
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
}

.rakamKutu i {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--gradyan);
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 18px;
    box-shadow: var(--golgeMavi);
}

.rakamDeger {
    font-family: var(--yaziBaslik);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    background: var(--gradyanMetin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.rakamEtiket {
    color: rgba(255, 255, 255, 0.62);
    margin-top: 12px;
}

@media (min-width: 992px) {
    .rakamIzgara {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .rakamKutu {
        padding: 30px 28px;
    }
}

/* ---------- Sektör kartları ---------- */
.sektorKart {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--yuvarlak);
    border: 1px solid var(--cizgi);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.sektorKart:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: inherit;
}

.sektorKartGorsel {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--indigo);
    overflow: hidden;
}

.sektorKartGorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.sektorKart:hover .sektorKartGorsel img {
    transform: scale(1.06);
}

.sektorKartGorsel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 10, 38, 0) 40%, rgba(11, 10, 38, 0.75));
}

.sektorKartIkon {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--gradyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--golgeMavi);
}

.sektorKartGovde {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sektorKartGovde h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.sektorKartGovde p {
    color: var(--metinSolgun);
    font-size: 0.9rem;
    margin-bottom: 16px;
    flex-grow: 1;
}

/* ---------- Görselli kart (liste sayfaları, blog) ---------- */
.gorselKarti {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: inherit;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.gorselKarti:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.4);
    color: inherit;
}

.gorselKartiResim {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--indigo);
}

.gorselKartiResim img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.gorselKarti:hover .gorselKartiResim img {
    transform: scale(1.06);
}

.gorselKartiGovde {
    padding: 22px 24px 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.gorselKartiGovde h3 {
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.gorselKartiGovde p {
    color: var(--metinSolgun);
    font-size: 0.92rem;
    flex-grow: 1;
    margin-bottom: 18px;
}

.kartUstEtiket {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(11, 10, 38, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 6px 11px;
    border-radius: 8px;
    font-family: var(--yaziMono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.kartTarih {
    color: var(--metinSolgun);
    margin-bottom: 10px;
    display: block;
}

.kartTarih i {
    color: var(--mor);
    margin-right: 4px;
}

.kartBaglantisi {
    color: var(--maviKoyu);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.kartBaglantisi i {
    font-size: 0.8em;
    transition: transform var(--gecis);
}

.gorselKarti:hover .kartBaglantisi i,
.sektorKart:hover .kartBaglantisi i,
.referansKarti:hover .kartBaglantisi i {
    transform: translateX(4px);
}

/* ---------- Referans kartı ---------- */
.referansKarti {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis);
}

.referansKarti:hover {
    transform: translateY(-4px);
    box-shadow: var(--golgeGuclu);
}

.referansLogo {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left;
    margin-bottom: 18px;
}

.referansKarti h3 {
    font-size: 1.02rem;
    margin-bottom: 8px;
}

.referansKarti p {
    color: var(--metinSolgun);
    font-size: 0.9rem;
    margin-bottom: 0;
    flex-grow: 1;
}

/* ---------- CTA şeridi (koyu) ---------- */
.ctaSerit {
    padding: 96px 0;
}

.ctaIzgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    padding: 40px 32px;
    border-radius: 24px;
    background: linear-gradient(rgba(18, 16, 58, 0.7), rgba(18, 16, 58, 0.7)) padding-box,
                linear-gradient(135deg, rgba(96, 165, 250, 0.8), rgba(139, 92, 246, 0.5), rgba(34, 211, 238, 0.6)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.ctaEtiket {
    display: inline-block;
    font-family: var(--yaziMono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    background: var(--gradyanMetin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctaSerit h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.ctaSerit p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    max-width: 560px;
}

@media (min-width: 992px) {
    .ctaIzgara {
        grid-template-columns: 1fr auto;
        gap: 48px;
        padding: 52px 56px;
    }
}

/* ---------- İç sayfa başlığı (koyu) ---------- */
.sayfaBasligiSerit {
    padding: 56px 0 60px;
}

.sayfaBasligiSerit h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 14px;
    max-width: 24ch;
}

.sayfaBasligiSerit p {
    color: rgba(255, 255, 255, 0.7);
    max-width: 640px;
    margin-bottom: 0;
    font-size: 1.02rem;
}

.sayfaBasligiSerit p.kunye i {
    color: var(--maviParlak);
    margin-right: 4px;
}

.kirintiYolu {
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
}

.kirintiYolu a {
    color: rgba(255, 255, 255, 0.55);
}

.kirintiYolu a:hover {
    color: #fff;
}

.kirintiYolu span {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.25);
}

.kirintiYolu .aktifSayfa {
    color: var(--maviAcik);
    margin: 0;
}

/* ---------- İçerik gövdesi (Jodit çıktısı) ---------- */
.detayGorsel {
    width: 100%;
    height: auto;
    border-radius: var(--yuvarlak);
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--gradyan) border-box;
    padding: 6px;
    margin-bottom: 34px;
    box-shadow: var(--golgeGuclu);
}

.icerikGovde {
    font-size: 1.02rem;
    color: var(--metinGovde);
    line-height: 1.8;
}

.icerikGovde h2 {
    font-size: 1.5rem;
    margin: 40px 0 14px;
}

.icerikGovde h3 {
    font-size: 1.2rem;
    margin: 30px 0 12px;
}

.icerikGovde h2:first-child,
.icerikGovde h3:first-child {
    margin-top: 0;
}

.icerikGovde p {
    margin-bottom: 18px;
}

.icerikGovde ul,
.icerikGovde ol {
    margin-bottom: 20px;
    padding-left: 22px;
}

.icerikGovde li {
    margin-bottom: 8px;
}

.icerikGovde li::marker {
    color: var(--mor);
}

.icerikGovde img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 22px 0;
    box-shadow: var(--golge);
}

.icerikGovde a {
    color: var(--maviKoyu);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.icerikGovde blockquote {
    border-left: 3px solid var(--mor);
    background: var(--zeminSerit);
    padding: 18px 22px;
    border-radius: 0 12px 12px 0;
    margin: 26px 0;
    color: var(--metin);
    font-weight: 500;
}

.icerikGovde table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.icerikGovde table td,
.icerikGovde table th {
    border: 1px solid var(--cizgi);
    padding: 10px 14px;
}

.icerikGovde table th {
    background: var(--zeminSerit);
}

.yaziEtiketleri {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--cizgi);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.etiketRozet {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--morKoyu);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* ---------- Yan sütun ---------- */
.yanKutu {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 24px;
    box-shadow: var(--golge);
    overflow: hidden;
}

.yanKutu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--gradyan);
}

.yanKutu h4 {
    color: var(--metinSolgun);
    margin-bottom: 8px;
}

.yanListe {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: yan;
}

.yanListe li {
    border-bottom: 1px solid var(--cizgi);
}

.yanListe li:last-child {
    border-bottom: 0;
}

.yanListe a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    color: var(--metin);
    font-size: 0.93rem;
    font-weight: 600;
}

.yanListe a::before {
    counter-increment: yan;
    content: counter(yan, decimal-leading-zero);
    font-family: var(--yaziMono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--mor);
    flex-shrink: 0;
}

.yanListe a:hover,
.yanListe a.aktif {
    color: var(--maviKoyu);
}

/* ---------- SSS ---------- */
.sssKategori {
    font-size: 1.3rem;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sssKategori::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--gradyan);
    box-shadow: var(--golgeMavi);
}

.sssKategori:not(:first-child) {
    margin-top: 48px;
}

.accordion {
    --bs-accordion-bg: transparent;
}

.accordion-item {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--golge);
    transition: border-color var(--gecis);
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(59, 130, 246, 0.45);
}

.accordion-button {
    font-family: var(--yaziBaslik);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--metin);
    padding: 20px 56px 20px 24px;
    background: transparent;
    box-shadow: none;
}

.accordion-button::after {
    content: '+';
    background-image: none !important;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--yaziMono);
    font-size: 1.1rem;
    background: var(--zeminSerit);
    color: var(--maviKoyu);
    transition: transform var(--gecis), background var(--gecis), color var(--gecis);
}

.accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--maviKoyu);
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background: var(--gradyan);
    color: #fff;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--cizgi);
}

.accordion-body {
    color: var(--metinGovde);
    padding: 0 24px 22px;
}

/* ---------- Formlar ---------- */
.formKutu {
    position: relative;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 36px;
    box-shadow: var(--golgeGuclu);
    overflow: hidden;
}

.formKutu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--gradyanMetin);
}

.formBaslik {
    font-size: 1.35rem;
    margin-bottom: 22px;
}

.form-label {
    font-weight: 600;
    font-size: 0.86rem;
    margin-bottom: 6px;
    color: var(--metin);
}

.form-control,
.form-select {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlakKucuk);
    padding: 12px 16px;
    font-size: 0.95rem;
    background: var(--zemin);
    color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis), background-color var(--gecis);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mavi);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}

.kvkkNotu {
    font-size: 0.82rem;
    color: var(--metinSolgun);
    margin: 0;
}

.kvkkNotu a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.iletisimKutu {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: var(--golge);
    transition: transform var(--gecis), border-color var(--gecis);
}

.iletisimKutu:hover {
    transform: translateX(4px);
    border-color: rgba(59, 130, 246, 0.4);
}

.iletisimIkon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--gradyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--golgeMavi);
}

.iletisimKutu h4 {
    color: var(--metinSolgun);
    margin-bottom: 5px;
}

.iletisimKutu p,
.iletisimKutu a {
    color: var(--metin);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0;
}

.iletisimKutu a:hover {
    color: var(--maviKoyu);
}

.haritaCerceve {
    border-radius: var(--yuvarlak);
    overflow: hidden;
    border: 1px solid var(--cizgi);
    box-shadow: var(--golge);
    line-height: 0;
}

.haritaCerceve iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

/* ---------- Hata sayfası ---------- */
.hataKodu {
    font-family: var(--yaziBaslik);
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    background: var(--gradyanMetin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Alt bilgi ---------- */
.siteAlt {
    background: var(--indigoDerin);
    color: rgba(255, 255, 255, 0.62);
    padding: 80px 0 0;
    font-size: 0.92rem;
    position: relative;
    overflow: hidden;
}

.siteAlt::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--gradyanCizgi);
}

.siteAlt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 90% 100%, rgba(139, 92, 246, 0.18), transparent 60%);
    pointer-events: none;
}

.siteAlt .container {
    position: relative;
    z-index: 1;
}

.siteAlt h6 {
    color: var(--maviAcik);
    margin-bottom: 20px;
}

.altMarka {
    margin-bottom: 18px;
}

.altMarka img {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
}

.altAciklama {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    max-width: 380px;
    margin-bottom: 22px;
}

.altSosyal {
    display: flex;
    gap: 8px;
}

.altSosyal a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.altSosyal a:hover {
    background: var(--gradyan);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--golgeMavi);
    transform: translateY(-2px);
}

.altListe {
    list-style: none;
    padding: 0;
    margin: 0;
}

.altListe li {
    margin-bottom: 10px;
}

.altListe a {
    color: rgba(255, 255, 255, 0.66);
}

.altListe a:hover {
    color: #fff;
    padding-left: 4px;
}

.altIletisim {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.altIletisim li {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.altIletisim i {
    color: var(--maviParlak);
    margin-top: 6px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.altIletisim a {
    color: rgba(255, 255, 255, 0.66);
}

.altIletisim a:hover {
    color: #fff;
}

.tescilBilgi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.66rem;
    text-transform: none;
    color: rgba(255, 255, 255, 0.42);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

.altSerit {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 56px;
    padding: 22px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.altYasalLinkler a {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 22px;
}

.altYasalLinkler a:hover {
    color: #fff;
}

/* ---------- Çerez kutusu ---------- */
.cerezBar {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: min(420px, calc(100% - 32px));
    background: rgba(18, 16, 58, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 22px 24px;
    z-index: 1090;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
}

.cerezEtiket {
    display: block;
    margin-bottom: 10px;
    color: var(--maviAcik);
}

.cerezBar p {
    margin-bottom: 16px;
    line-height: 1.6;
}

.cerezDugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btnCerezDetay {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: var(--yuvarlakKucuk);
    padding: 8px 14px;
    font-size: 0.84rem;
    font-weight: 600;
}

.btnCerezDetay:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ---------- Yukarı düğmesi ---------- */
.yukariDugmesi {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--gradyan);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    box-shadow: var(--golgeMavi);
}

.yukariDugmesi:hover {
    color: #fff;
    transform: translateY(-3px);
}

.yukariDugmesi.gorunur {
    display: flex;
}

/* ---------- Uyarı alanları ---------- */
#mesajlar {
    border-radius: 0;
}

.uyariAlani {
    font-size: 0.92rem;
    border-radius: var(--yuvarlakKucuk);
}

/* ---------- Kaydırma ile belirme ---------- */
html.canlanHazir .canlan {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
    transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

html.canlanHazir .canlan.gorunur {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 991.98px) {
    .mobilMenuPanel {
        width: 320px;
    }

    .anaMenu .nav-link {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1rem;
    }

    .anaMenu .nav-link::after {
        display: none;
    }

    .anaMenu .dropdown-menu {
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 8px 16px;
    }

    .menuSagAlan {
        flex-direction: column;
        align-items: stretch !important;
        margin: 24px 0 0;
        gap: 12px;
    }

    .dilDugmesi {
        justify-content: center;
        padding: 12px;
    }

    .bolum {
        padding: 64px 0;
    }

    .bolumUst {
        margin-bottom: 30px;
    }

    .heroRozetKutu.solAlt { left: 8px; bottom: 16px; }
    .heroRozetKutu.sagUst { right: 8px; top: 16px; }

    .ctaSerit {
        padding: 64px 0;
    }

    .sayfaBasligiSerit {
        padding: 40px 0 44px;
    }

    .yanKutu {
        position: static;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 0.96rem;
    }

    .formKutu {
        padding: 24px 20px;
    }

    .altSerit {
        flex-direction: column;
        text-align: center;
    }

    .altYasalLinkler a {
        margin: 0 10px;
    }

    .yukariDugmesi {
        right: 14px;
        bottom: 14px;
    }

    .cerezBar {
        bottom: 76px;
    }

    .heroRozetKutu {
        padding: 10px 12px;
    }

    .heroRozetDeger {
        font-size: 1rem;
    }

    .accordion-button {
        font-size: 0.95rem;
        padding: 18px 52px 18px 18px;
    }

    .accordion-body {
        padding: 0 18px 18px;
    }
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html.canlanHazir .canlan {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .heroCerceve {
        transform: none !important;
    }
}

/* Yazdırma */
@media print {
    .ustSerit, .anaMenu, .siteAlt, .cerezBar, .yukariDugmesi, .ctaSerit, .serit, .kaydirmaIlerleme {
        display: none !important;
    }
}