/* =====================================================================
   Diamond Clean Ankara — Tasarım Sistemi
   Stil: Minimalism & Swiss  |  Palet: Kurumsal lacivert + elmas aksanı
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tasarım jetonları
   --------------------------------------------------------------------- */
:root {
    /* Ana palet */
    --navy-950: #060B16;
    --navy-900: #0B1220;
    --navy-800: #0F172A;
    --navy-700: #1E293B;
    --navy-600: #334155;

    /* Elmas aksanı — buz mavisi geçişi */
    --accent:      #0369A1;
    --accent-hover:#025984;
    --ice-400:     #38BDF8;
    --ice-300:     #7DD3FC;
    --ice-100:     #E0F2FE;

    /* Nötrler */
    --bg:        #F8FAFC;
    --surface:   #FFFFFF;
    --muted:     #E8ECF1;
    --border:    #E2E8F0;
    --fg:        #020617;
    --fg-soft:   #475569;
    --fg-mute:   #64748B;

    /* Durum */
    --success: #059669;
    --danger:  #DC2626;
    --warning: #D97706;

    /* Tipografi */
    --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Boşluk ritmi (8px tabanlı) */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;

    /* Yarıçap */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;

    /* Gölge — keskin ve ölçülü */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow:    0 4px 16px rgba(15, 23, 42, .08);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, .10);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);

    /* Hareket */
    --ease-out: cubic-bezier(.22, .8, .28, 1);
    --ease-in:  cubic-bezier(.6, .02, .88, .5);
    --dur-fast: 160ms;
    --dur:      240ms;
    --dur-slow: 420ms;

    /* Katmanlar */
    --z-header: 1000;
    --z-float:  900;
    --z-modal:  1100;

    /* Elmas yüzey geçişi */
    --grad-diamond: linear-gradient(135deg, var(--accent) 0%, var(--ice-400) 100%);
    --grad-navy:    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #13233F 100%);
}

/* ---------------------------------------------------------------------
   2. Temel
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-soft);
    background: var(--bg);

    /*  `hidden` yerine `clip`: ikisi de yatay taşmayı kırpar, ancak
        `hidden` gövdeyi bir kaydırma kabı hâline getirir ve bu, içerideki
        `position: sticky` başlığın yapışkanlığını bozabilir. `clip`
        kaydırma kabı oluşturmadığı için sabit başlık çalışmaya devam eder.

        NOT: Bu kırpma yalnızca akış içindeki ögeleri kapsar —
        `position: fixed` ögeler (mobil çağrı barı gibi) etkilenmez,
        onların taşmaması ayrıca sağlanmalıdır. */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--navy-800);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin-bottom: var(--space-sm); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--accent-hover); }

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

/* Klavye erişilebilirliği — odak halkası her zaman görünür */
:focus-visible {
    outline: 3px solid var(--ice-400);
    outline-offset: 3px;
    border-radius: 4px;
}

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

/* İçeriğe atla bağlantısı */
.skip-link {
    position: absolute; top: -60px; left: var(--space-sm);
    z-index: 2000; padding: .75rem 1.25rem;
    background: var(--navy-800); color: #fff; border-radius: 0 0 var(--radius) var(--radius);
    transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------------------------------------------------------------------
   3. Düzen yardımcıları
   --------------------------------------------------------------------- */
.section       { padding: var(--space-2xl) 0; }
.section--tight{ padding: var(--space-xl) 0; }
/*  Sınıf adı geçmişten geliyor (eskiden lacivert zeminliydi); müşteri
    açık palet tercih ettiği için artık yumuşak buz mavisi bir tonda.
    İşaretlemeyi 15 dosyada değiştirmemek için ad korundu. */
.section--dark {
    background: linear-gradient(180deg, var(--ice-100) 0%, #EFF8FE 100%);
    color: var(--fg-soft);
    border-block: 1px solid var(--border);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--navy-800); }
.section--muted{ background: var(--surface); }

.container-tight { max-width: 820px; margin-inline: auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-head); font-size: .8rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--space-xs);
}
.eyebrow::before {
    content: ''; width: 22px; height: 2px;
    background: var(--grad-diamond); border-radius: 2px;
}
.section--dark .eyebrow { color: var(--accent); }

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }

.lead { font-size: 1.075rem; color: var(--fg-mute); }

/* ---------------------------------------------------------------------
   4. Butonlar
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--accent);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px;                    /* dokunma hedefi >= 44px */
    padding: .8rem 1.75rem;
    font-family: var(--font-head); font-size: .95rem; font-weight: 600;
    line-height: 1;
    color: var(--btn-fg); background: var(--btn-bg);
    border: 2px solid transparent; border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.btn:hover  { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary   { --btn-bg: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-hover); }

.btn--dark      { --btn-bg: var(--navy-800); }
.btn--dark:hover{ --btn-bg: var(--navy-700); }

.btn--ghost {
    --btn-bg: transparent; --btn-fg: var(--navy-800);
    border-color: var(--border);
}
.btn--ghost:hover { --btn-fg: var(--accent); border-color: var(--accent); box-shadow: none; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-800); }

.btn--outline-light {
    --btn-bg: transparent; --btn-fg: #fff;
    border-color: rgba(255,255,255,.35);
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); box-shadow: none; }

.btn--lg { min-height: 56px; padding: 1rem 2.25rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Ok ikonu buton üzerinde hafifçe kayar */
.btn .icon-arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   5. Üst bar + navigasyon
   --------------------------------------------------------------------- */
.topbar {
    background: var(--surface); color: var(--fg-mute);
    border-bottom: 1px solid var(--border);
    font-size: .85rem; padding: .55rem 0;
}
.topbar a { color: var(--fg-soft); }
.topbar a:hover { color: var(--accent); }
.topbar svg { color: var(--accent); }
/*  Üst bar 992px'te görünür olur ve iki liste yan yana dizilir.
    E-posta adresi uzun olduğu için bu genişlikte sığmıyor, taşıyordu:
    flex ögelerinin varsayılan `min-width: auto` değeri içerikten
    daha dar olmalarını engelliyor. Sarmalamaya izin verip min-width'i
    sıfırlıyoruz — dar ekranda alt satıra iner, geniş ekranda tek satır kalır. */
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem 1.5rem;
}
.topbar__list {
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
    margin: 0; padding: 0; list-style: none;
    min-width: 0;
}
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }

.site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--shadow); background: rgba(255,255,255,.97); }

.navbar-brand { display: inline-flex; align-items: center; gap: .7rem; padding-block: .9rem; }

/* Bootstrap'in varsayılan menü butonu 38px yüksekliğinde kalıyor;
   dokunma hedefi alt sınırı olan 44px'e çıkarılır. */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-text { font-family: var(--font-head); line-height: 1.05; }
.brand-text strong {
    display: block; font-size: 1.12rem; font-weight: 700;
    color: var(--navy-800); letter-spacing: -.02em;
}
.brand-text span {
    display: block; font-size: .68rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute);
}

.nav-link {
    position: relative;
    font-family: var(--font-head); font-weight: 500; font-size: .95rem;
    color: var(--navy-700); padding: .65rem .9rem !important;
}
.nav-link:hover, .nav-link:focus { color: var(--accent); }

/* Aktif sayfa göstergesi — alt çizgi içeriden dışa açılır */
.nav-link::after {
    content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .3rem;
    height: 2px; background: var(--grad-diamond); border-radius: 2px;
    transform: scaleX(0); transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--accent); font-weight: 600; }

.dropdown-menu {
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: .5rem;
    font-size: .93rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .55rem .85rem; color: var(--navy-700); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ice-100); color: var(--accent); }

.dropdown-menu--columns { min-width: 480px; column-count: 2; column-gap: .5rem; }
@media (max-width: 991.98px) { .dropdown-menu--columns { min-width: 0; column-count: 1; } }

/* ---------------------------------------------------------------------
   6. Hero slider
   Tam genişlik fotoğraf + sinematik koyu katman + yuvarlatılmış çerçeve.
   --------------------------------------------------------------------- */
.hero-slider { padding: 10px 10px 0; background: var(--bg); }

.hero-slider__frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--muted);
    box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .28);
}
@media (max-width: 575.98px) {
    .hero-slider { padding: 0; }
    .hero-slider__frame { border-radius: 0; }
}

/* --- Slayt --- */
.hero-slide {
    position: relative;
    height: clamp(540px, 76vh, 760px);
}

.hero-slide__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Fotoğrafın odağı genelde üst-orta bölgede olur */
    object-position: center 35%;
}

/*  Açık temada metin koyu renk olduğu için fotoğrafın ÜZERİNE açık bir
    katman uygulanır. Sol tarafta neredeyse tam beyaz (%97) başlar:
    hangi fotoğraf yüklenirse yüklensin — karanlık bir kare bile olsa —
    başlığın arkası açık kalır ve kontrast 4.5:1 eşiğinin altına düşmez.
    Sağa doğru saydamlaşarak fotoğrafın görünmesine izin verir. */
.hero-slide__scrim {
    position: absolute; inset: 0;
    /*  Masaüstü: metin sol 640px'i kaplar; kapsayıcı 960–1320px arasında
        değiştiği için metnin bittiği nokta en fazla ~%67'ye ulaşır.
        Yüksek alfa bölgesi bu yüzden %75'e kadar sürdürülür. */
    background: linear-gradient(90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.95) 55%,
        rgba(255,255,255,.82) 75%,
        rgba(255,255,255,.45) 100%);
}

/*  Mobil: metin tüm genişliği kaplar, yatay geçiş işe yaramaz — metin
    perdenin saydam ucuna denk gelir ve okunmaz hâle gelir.
    Bu yüzden geçiş dikeye çevrilir: üstte fotoğraf görünür kalır,
    metnin bulunduğu alt bölüm neredeyse tam beyaz olur. Metin de
    dikeyde ortadan alta alınır ki güçlü bölgeye otursun. */
@media (max-width: 991.98px) {
    /*  Perde hafifletilir — fotoğraf görünür kalsın diye. Okunabilirliği
        artık perde değil, metnin altındaki opak panel garanti ediyor. */
    .hero-slide__scrim {
        background: linear-gradient(180deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.42) 55%,
            rgba(255,255,255,.68) 100%);
    }

    /*  Metin kendi açık paneline oturur. Böylece kontrast, arkadaki
        fotoğrafın renginden TAMAMEN bağımsız hâle gelir: müşteri koyu,
        karmaşık ya da düşük kontrastlı bir kare yüklese bile başlık ve
        açıklama okunur kalır. Dar ekranda metin tüm genişliği kapladığı
        için yatay ya da dikey geçişle bunu güvenceye almak mümkün değildi. */
    .hero-slide__text {
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(8px);
        padding: 1.6rem 1.35rem;
        border-radius: 20px;
        box-shadow: 0 16px 40px -18px rgba(15,23,42,.35);
    }

    .hero-slide__inner { align-items: center; padding-bottom: 4.5rem; }
}

.hero-slide__inner {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding-bottom: 4.5rem;      /* göstergelere yer bırak */
}
.hero-slide__text { max-width: 640px; }

.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .45rem 1rem;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font-family: var(--font-head); font-size: .8rem; font-weight: 600;
    letter-spacing: .04em; color: var(--navy-800);
    margin-bottom: 1.35rem;
}
.hero-badge::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ice-400); flex: none;
    box-shadow: 0 0 0 3px rgba(56,189,248,.28);
}

.hero-slide__title {
    font-family: var(--font-head);
    font-size: clamp(2.3rem, 5.6vw, 4.4rem);
    font-weight: 700; line-height: 1.04; letter-spacing: -.035em;
    color: var(--navy-800); margin: 0 0 1.1rem;
    text-wrap: balance;
}

.hero-slide__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--fg-soft);
    max-width: 48ch; margin-bottom: 2rem;
}

.hero-slide__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Cam görünümlü ikincil buton — açık zeminde koyu metin */
.btn--glass {
    --btn-bg: rgba(255,255,255,.9);
    --btn-fg: var(--navy-800);
    border-color: var(--border);
    backdrop-filter: blur(8px);
}
.btn--glass:hover { --btn-bg: #fff; --btn-fg: var(--accent); border-color: var(--accent); }

/* --- Göstergeler ve oklar --- */
.hero-slider__controls {
    position: absolute; left: 0; right: 0; bottom: 1.75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    z-index: 3;
}

.hero-dots {
    position: static; margin: 0; justify-content: flex-start;
}
/*  Seçici bilerek uzun: Bootstrap'in `.carousel-indicators [data-bs-target]`
    kuralı (0,2,0) düz `.hero-dots button` (0,1,1) yazımından daha
    özgüldür ve kenarlık değerlerini ezer. Aynı yapıyı kullanarak
    özgüllüğü (0,3,0) çıkarıyoruz. */
.carousel-indicators.hero-dots [data-bs-target] {
    width: 34px;
    height: 4px;
    border-radius: 100px;
    background: rgba(15,23,42,.25);
    opacity: 1;
    margin: 0 5px 0 0;

    /*  Görünen çubuk 4px, ancak parmakla 4px'lik bir hedefe basılamaz.
        Saydam üst/alt kenarlıklar dokunma alanını 44px'e çıkarır;
        `background-clip: padding-box` sayesinde zemin kenarlığa taşmaz,
        yani çubuk görsel olarak ince kalır. Bootstrap'in kendi yöntemi,
        biz yalnızca değeri 44px eşiğine yükseltiyoruz. */
    border: 20px solid transparent;
    border-left-width: 5px;    /* 34px görsel + 10px = 44px dokunma genişliği */
    border-right-width: 5px;
    background-clip: padding-box;

    transition: background-color var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.carousel-indicators.hero-dots [data-bs-target]:hover { background: rgba(15,23,42,.45); }
.carousel-indicators.hero-dots [data-bs-target].active { background: var(--accent); width: 52px; }

.hero-arrows { display: flex; gap: .5rem; }
.hero-arrow {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    color: var(--navy-800); cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero-arrow:hover { background: #fff; color: var(--accent); transform: scale(1.06); }
.hero-arrow__icon--prev { transform: rotate(180deg); }

@media (max-width: 767.98px) {
    .hero-arrows { display: none; }        /* mobilde kaydırma yeterli */
    .hero-slide__inner { padding-bottom: 3.5rem; }
}

/* --- Sabit teklif kartı --- */
.hero-card {
    position: absolute; right: 2rem; bottom: 2rem; z-index: 4;
    display: flex; align-items: center; gap: 1rem;
    background: var(--surface);
    padding: .9rem 1rem .9rem 1.35rem;
    border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(6, 11, 22, .5);
    max-width: 320px;
}
.hero-card__label {
    display: block; font-size: .74rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
    margin-bottom: .15rem;
}
.hero-card__title {
    display: block; font-family: var(--font-head); font-size: .98rem;
    font-weight: 600; color: var(--navy-800); line-height: 1.3;
}
.hero-card__go {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--grad-diamond); color: #fff;
    transition: transform var(--dur) var(--ease-out);
}
.hero-card__go:hover { transform: translateX(3px); color: #fff; }

/* Kart, dar ekranda göstergelerin üstünü kapatmasın */
@media (max-width: 1199.98px) { .hero-card { display: none; } }

/* --- Çerçeve altındaki güven şeridi --- */
.hero-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: -2.25rem; position: relative; z-index: 5;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.25rem;
}
@media (max-width: 575.98px) {
    .hero-stats { margin-top: 1.25rem; grid-template-columns: repeat(2, 1fr); }
}
.hero-stat { text-align: center; }
.hero-stat__value {
    display: block;
    font-family: var(--font-head); font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700;
    color: var(--navy-800); line-height: 1;
    font-variant-numeric: tabular-nums;      /* sayaç oynarken genişlik sabit kalsın */
}
.hero-stat__label { font-size: .84rem; color: var(--fg-mute); margin-top: .35rem; display: block; }

/* Aktif slaytta çok yavaş yaklaşma — fotoğrafa hayat verir, dikkat dağıtmaz */
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
.carousel-item.active .hero-slide__bg { animation: heroZoom 9s var(--ease-out) forwards; }

@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .hero-slide__bg { animation: none; }
}

/* Arka plan elmas yüzeyleri — dekoratif, ekran okuyucudan gizli */
.hero__facets { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.facet {
    position: absolute; border-radius: 30% 70% 62% 38% / 42% 38% 62% 58%;
    background: var(--grad-diamond); opacity: .1; filter: blur(2px);
    will-change: transform;
}
.facet--1 { width: 460px; height: 460px; top: -160px; right: -110px; }
.facet--2 { width: 300px; height: 300px; bottom: -120px; left: -80px; opacity: .07; }
.facet--3 { width: 160px; height: 160px; top: 42%; right: 26%; opacity: .06; }

/* Koyu bölümlerdeki rakamlar (Hakkımızda sayfası) */
.stat__value {
    font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700;
    color: #fff; line-height: 1;
    font-variant-numeric: tabular-nums;   /* sayaç oynarken zıplamasın */
}
.stat__label { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: .35rem; }

/* ---------------------------------------------------------------------
   7. Kartlar
   --------------------------------------------------------------------- */
.card-service {
    position: relative; height: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--space-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
/* Üstte ince aksan şeridi — hover'da soldan sağa açılır */
.card-service::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--grad-diamond);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card-service:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.card-service:hover::before { transform: scaleX(1); }

.card-service__icon {
    width: 56px; height: 56px; border-radius: var(--radius);
    display: grid; place-items: center;
    background: var(--ice-100); color: var(--accent);
    margin-bottom: var(--space-sm);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.card-service:hover .card-service__icon { background: var(--grad-diamond); color: #fff; }
.card-service__icon svg { width: 28px; height: 28px; }

.card-service h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card-service p  { font-size: .93rem; color: var(--fg-mute); margin-bottom: var(--space-sm); }

.card-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--accent);
}
.card-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.card-service:hover .card-link svg { transform: translateX(4px); }

/* Görselli kart (blog / galeri) */
.card-media {
    height: 100%; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card-media:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card-media__figure { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--muted); }
.card-media__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card-media:hover .card-media__figure img { transform: scale(1.05); }
.card-media__body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
.card-media__meta { font-size: .8rem; color: var(--fg-mute); margin-bottom: .4rem; }
.card-media h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.card-media p { font-size: .92rem; color: var(--fg-mute); }

/* ---------------------------------------------------------------------
   8. Süreç adımları
   --------------------------------------------------------------------- */
.step { position: relative; text-align: center; padding: var(--space-sm); }
.step__num {
    width: 72px; height: 72px; margin: 0 auto var(--space-sm);
    display: grid; place-items: center; border-radius: 50%;
    background: var(--navy-800); color: #fff;
    font-family: var(--font-head); font-size: 1.3rem; font-weight: 700;
    position: relative; z-index: 1;
    transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.step:hover .step__num { background: var(--grad-diamond); transform: scale(1.06); }
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.step p  { font-size: .92rem; color: var(--fg-mute); }

/* Adımları birbirine bağlayan çizgi (yalnızca geniş ekran) */
@media (min-width: 992px) {
    .steps { position: relative; }
    .steps::before {
        content: ''; position: absolute; top: 36px; left: 12.5%; right: 12.5%;
        height: 2px; background: linear-gradient(90deg, var(--border), var(--ice-300), var(--border));
        z-index: 0;
    }
}

/* ---------------------------------------------------------------------
   9. Referanslar
   --------------------------------------------------------------------- */
.testimonial {
    height: 100%; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-md); position: relative;
}
.testimonial__quote { font-size: .98rem; color: var(--fg-soft); font-style: italic; margin-bottom: var(--space-sm); }
.testimonial__author { display: flex; align-items: center; gap: .75rem; }
.testimonial__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--grad-diamond); color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 600;
}
.testimonial__name { font-family: var(--font-head); font-weight: 600; color: var(--navy-800); font-size: .95rem; }
.testimonial__role { font-size: .82rem; color: var(--fg-mute); }
.stars { display: inline-flex; gap: 2px; color: #F59E0B; margin-bottom: .6rem; }
.stars svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   10. Formlar
   --------------------------------------------------------------------- */
.form-label {
    font-family: var(--font-head); font-weight: 600; font-size: .88rem;
    color: var(--navy-800); margin-bottom: .4rem;
}
.form-label .req { color: var(--danger); margin-left: .15rem; }

.form-control, .form-select {
    min-height: 48px;                  /* mobil dokunma hedefi */
    font-size: 1rem;                   /* iOS otomatik yakınlaştırmasını önler */
    padding: .7rem .95rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--fg);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(3, 105, 161, .12);
}
textarea.form-control { min-height: 130px; resize: vertical; }

.form-hint { font-size: .82rem; color: var(--fg-mute); margin-top: .3rem; }
.form-error { font-size: .85rem; color: var(--danger); margin-top: .3rem; display: block; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }

/*  Form artık her zaman açık zeminde. Eskiden koyu bölümler için ayrı bir
    `.form-on-dark` seti vardı; açık palete geçişle gereksizleşti ve
    kaldırıldı. Alanlar `.form-control` / `.form-select` varsayılanlarını
    kullanıyor — beyaz üstüne beyaz yazı sorunu da böylece kökten bitti. */

.alert { border: 0; border-left: 4px solid; border-radius: var(--radius-sm); font-size: .93rem; }
.alert-success { background: #ECFDF5; border-color: var(--success); color: #065F46; }
.alert-danger  { background: #FEF2F2; border-color: var(--danger);  color: #991B1B; }
.alert-info    { background: var(--ice-100); border-color: var(--accent); color: #075985; }

/* ---------------------------------------------------------------------
   11. Sayfa başlığı (iç sayfalar)
   --------------------------------------------------------------------- */
.page-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--ice-100) 0%, var(--bg) 100%);
    color: var(--fg-soft);
    border-bottom: 1px solid var(--border);
    padding: clamp(3rem, 7vw, 5rem) 0;
}
.page-hero h1 { color: var(--navy-800); margin-bottom: .5rem; }
.breadcrumb { margin: 0; font-size: .88rem; }
.breadcrumb a { color: var(--fg-mute); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .breadcrumb-item.active { color: var(--accent); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fg-mute); }

/* ---------------------------------------------------------------------
   12. S.S.S. akordiyonu
   --------------------------------------------------------------------- */
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius) !important; margin-bottom: .75rem; overflow: hidden; }
.accordion-button {
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    color: var(--navy-800); padding: 1.15rem 1.35rem; background: var(--surface);
}
.accordion-button:not(.collapsed) { background: var(--ice-100); color: var(--accent); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(3,105,161,.12); }

/*  Açılan cevap sorunun hemen dibine yapışmasın: üstte ince ayırıcı ve
    dengeli iç boşluk. Soru ile cevap aynı hizadan başlar. */
.accordion-body {
    padding: 1.25rem 1.35rem 1.4rem;
    border-top: 1px solid var(--border);
    color: var(--fg-soft);
    font-size: .96rem;
    line-height: 1.8;
}
.accordion-body p { margin-bottom: .85rem; }
.accordion-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   13. Alt bilgi
   --------------------------------------------------------------------- */
.site-footer {
    background: var(--surface);
    color: var(--fg-mute);
    border-top: 1px solid var(--border);
    padding-top: var(--space-2xl);
    font-size: .93rem;
}
.site-footer h4 {
    color: var(--navy-800); font-size: .95rem; font-weight: 600; margin-bottom: var(--space-sm);
    letter-spacing: .04em; text-transform: uppercase;
}
.site-footer a { color: var(--fg-soft); }
.site-footer a:hover { color: var(--accent); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .55rem; }
.footer-contact { display: flex; gap: .7rem; margin-bottom: .85rem; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex: none; margin-top: .25rem; color: var(--ice-400); }

/*  E-posta adresi boşluk içermeyen uzun bir metindir ve satır sonu
    fırsatı sunmaz. Dar sütunda (992px'te alt bilgi sütunu 216px) kutuyu
    aşar ve sayfayı yatay kaydırtır. `anywhere` gerektiğinde adresi
    böler; flex ögesinin küçülebilmesi için min-width de sıfırlanır. */
.footer-contact > *:not(svg) { min-width: 0; }
.footer-contact a,
.footer-contact span { overflow-wrap: anywhere; }
.footer-bottom {
    margin-top: var(--space-lg); padding: var(--space-sm) 0;
    border-top: 1px solid var(--border);
    font-size: .85rem; color: var(--fg-mute);
}
.social-links { display: flex; gap: .5rem; }
.social-links a {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--muted); color: var(--fg-soft);
    transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.social-links a:hover { background: var(--grad-diamond); color: #fff; transform: translateY(-3px); }
.social-links svg { width: 18px; height: 18px; }

/* Kapanış çağrı şeridi — açık zemin, üstte ince aksan çizgisi */
.cta-band {
    padding: var(--space-xl) 0;
    background: var(--surface);
    border-top: 3px solid transparent;
    border-image: var(--grad-diamond) 1;
    border-bottom: 1px solid var(--border);
}
.cta-band h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---------------------------------------------------------------------
   14. Yüzen eylem butonları
   --------------------------------------------------------------------- */
.float-actions {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-float);
    display: flex; flex-direction: column; gap: .6rem;
}
.float-btn {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    box-shadow: var(--shadow-md); border: 0;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.float-btn:hover { transform: scale(1.08); color: #fff; box-shadow: var(--shadow-lg); }
.float-btn svg { width: 26px; height: 26px; }
.float-btn--wa   { background: #25D366; }
.float-btn--call { background: var(--accent); }
.float-btn--top  { background: var(--navy-700); opacity: 0; visibility: hidden; transform: translateY(10px); }
.float-btn--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Mobilde alt sabit çağrı barı */
.mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
    display: none; background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(15,23,42,.1);
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .6rem;
}
.mobile-cta .btn {
    flex: 1 1 0;
    /*  Flex ögelerinin varsayılan `min-width: auto` değeri, ögenin kendi
        içeriğinden daha dar olmasını engeller. İki buton da küçülemeyince
        bar viewport'tan taşar ve sağdaki buton ekran dışında kalır.
        Sıfırlamak, alanı eşit paylaşmalarını sağlar. */
    min-width: 0;
    min-height: 46px;
    padding-inline: .5rem;
    font-size: .875rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .mobile-cta { display: flex; }
    body { padding-bottom: 72px; }        /* sabit bar içeriği kapatmasın */
    .float-actions { bottom: 84px; }
}

/* ---------------------------------------------------------------------
   14b. Bootstrap oluk düzeltmesi (yatay taşma)

   Bootstrap'te `.row` sınıfı, oluğun yarısı kadar NEGATİF yan kenar
   boşluğu alır; sütunlar da aynı kadar iç boşlukla bunu dengeler.
   `.container` ise sabit 12px iç boşluğa sahiptir.

   `g-5` (3rem oluk) kullanıldığında satırın negatif kenar boşluğu 24px
   olur ama kapsayıcı yalnızca 12px iç boşluk sunar — aradaki 12px, her
   iki yandan viewport dışına taşar ve sayfada yatay kaydırma oluşur.
   Mobilde bu, sabit konumlu ögelerin de yanlış yerde görünmesine yol açar.

   Çözüm: küçük ekranlarda yatay oluğu kapsayıcıyla uyumlu hale getir.
   Dikey oluk (gy) etkilenmez, bölümler arası boşluk ferah kalır.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------------------------------------------------------------------
   15. Animasyon motoru
   Kural: yalnızca transform + opacity (düzen kaymasý yok, 60fps)
   --------------------------------------------------------------------- */
/*  ÖNEMLİ: gizleme kuralı `.js` sınıfına bağlıdır.
    Bu sınıfı <head> içindeki küçük satır içi script ekler. JavaScript
    çalışmazsa (hata, eski tarayıcı, engelleyici eklenti) sınıf hiç
    eklenmez ve içerik olağan şekilde görünür kalır — boş sayfa riski yok. */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
/*  `left` ve `right` yönleri bilerek DİKEY olarak uygulanır.
    Sebep: bu yönler öğeyi yatayda kaydırır. Sütunlar kapsayıcının
    tamamını doldurduğunda (992px altında her zaman, üstünde ise
    kapsayıcı kenar boşluğu kaydırma mesafesinden küçük kaldığında)
    öğe viewport dışına çıkar ve sayfa yatay kaydırılabilir hâle gelir.
    Her kırılım noktasında ayrı ayrı hesap yapmak yerine yönü tek
    seferde dikeye çeviriyoruz: görsel etki neredeyse aynı, taşma
    ihtimali tamamen ortadan kalkıyor.

    Öznitelikler işaretlemede korunuyor; ileride güvenli bir yatay
    çözüm gerekirse (örneğin kırpan bir sarmalayıcı) tek yerden
    açılabilir. */
.js [data-reveal="left"],
.js [data-reveal="right"] { transform: translate3d(0, 24px, 0); }

.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

/* Hero yüzeylerinin yavaş salınımı */
@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -22px, 0) rotate(6deg); }
}
/* Sürekli çalışan animasyon mobilde pil tüketir; yalnızca geniş ekranda aç. */
@media (min-width: 768px) {
    .facet--1 { animation: drift 16s var(--ease-out) infinite; }
    .facet--2 { animation: drift 21s var(--ease-out) infinite reverse; }
    .facet--3 { animation: drift 13s var(--ease-out) infinite; }
}

/* İçerik yüklenirken iskelet */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton { position: relative; overflow: hidden; background: var(--muted); border-radius: var(--radius-sm); }
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: translateX(-100%); animation: shimmer 1.4s infinite;
}

/*  Hareket azaltma tercihi — sistem ayarına mutlak saygı.
    Animasyonlar kapanır ama içerik her zaman görünür kalır. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .facet { animation: none; }
}

/* ---------------------------------------------------------------------
   16. Yardımcı sınıflar
   --------------------------------------------------------------------- */
.text-accent   { color: var(--accent) !important; }
.text-ice      { color: var(--ice-300) !important; }
.bg-navy       { background: var(--navy-800) !important; }
.text-gradient {
    background: var(--grad-diamond);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-lg) 0; }

.badge-soft {
    display: inline-block; padding: .35rem .75rem;
    background: var(--ice-100); color: var(--accent);
    border-radius: 100px; font-size: .8rem; font-weight: 600;
    font-family: var(--font-head);
}

/* Zengin metin (admin panelden gelen içerik) */
.rich-text { font-size: 1.02rem; line-height: 1.8; }
.rich-text h2 { font-size: 1.6rem; margin: var(--space-lg) 0 var(--space-sm); }
.rich-text h3 { font-size: 1.25rem; margin: var(--space-md) 0 var(--space-xs); }
.rich-text ul, .rich-text ol { padding-left: 1.35rem; margin-bottom: var(--space-sm); }
.rich-text li { margin-bottom: .45rem; }
.rich-text img { border-radius: var(--radius); margin: var(--space-sm) 0; }
.rich-text blockquote {
    border-left: 3px solid var(--accent); padding-left: var(--space-sm);
    color: var(--fg-mute); font-style: italic; margin: var(--space-md) 0;
}

/* Sayfalama */
.pagination { gap: .35rem; }
.page-link {
    min-width: 44px; min-height: 44px;              /* dokunma hedefi */
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--navy-700); font-family: var(--font-head); font-weight: 500;
}
.page-link:hover { background: var(--ice-100); color: var(--accent); border-color: var(--accent); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { opacity: .45; }

/* Boş durum */
.empty-state { text-align: center; padding: var(--space-xl) var(--space-sm); color: var(--fg-mute); }
.empty-state svg { width: 56px; height: 56px; color: var(--border); margin-bottom: var(--space-sm); }