/*
 * Ortak proje stilleri — HER SAYFADA yüklenir. tema.css ve marka-renkleri.css'ten SONRA gelir.
 *
 * Buraya yalnızca birden çok sayfada görünen parçalar yazılır: header, üst şerit, footer,
 * sayfa başlık alanı, bildirim ve "Temel bileşenler" (düğme, rozet, kart, sekme, sayfalama…).
 * Tek bir sayfaya ait stiller css/sayfalar/<sayfa>.css dosyasına yazılır ve o view'da
 * @section Styles ile yüklenir. Form öğeleri css/bilesenler/form.css'tedir (formlu sayfalar bağlar).
 *
 * Değerler token'dır (css/marka-renkleri.css, docs/04-tasarim-sistemi.md §5); ham renk yazılmaz.
 *
 * DİKKAT: Genel tipografi/layout kuralları (html font-size, body margin gibi) yazılmaz —
 * tema.css bunları kendi sistemine göre kuruyor ve ezmek düzeni bozar.
 */

/* ── Geri sayım ───────────────────────────────────────────────────────── */

/* Süresi dolmuş sayaç soluklaşır. */
.countdown-timer.sayac-bitti {
    opacity: .45;
}

/* Son 10 saniyede dikkat çekmesi için. Canlı ihale ekranında JS bu sınıfı ekler. */
.countdown-timer.sayac-kritik .times {
    color: var(--renk-marka);
}

/* ── Doğrulama mesajları ──────────────────────────────────────────────── */

.field-validation-error {
    display: inline-block;
    margin-top: var(--b-1);
}

.input-validation-error {
    border-color: var(--renk-hata);
}

/* ── Boş durum kutuları (eski .alert içinde h4) ───────────────────────── */

.alert h4 {
    font-size: var(--t-xl);
}

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

/* Logo PNG'si 876×123; görsellerde width/height öznitelikleri var (CLS). Yükseklik sabitlenir,
   genişlik orandan gelir. */
.top-bar .company-logo img,
.mobile-logo-wrap img {
    height: 38px;
    width: auto;
    max-width: 100%;
}

/* ── Header ↔ içerik hizası ───────────────────────────────────────────── */

/*
 * Tema üst şerit ve menü çubuğuna yüzde tabanlı yan boşluk veriyor; sayfa içeriği ise
 * Bootstrap .container ile sabit genişlikte. Header'ın iki satırı da .container ile birebir
 * aynı hesabı kullanır: (tam genişlik − kap) / 2 + kap iç boşluğu. Footer ve .kap da aynı
 * değişkeni kullanır.
 *
 * ≥1400: kap --kap (1240px) — 1920'de içerik 1600px'e yayılmıyor (bulgu 22).
 * Yönetim düzeni (ViewData["Duzen"] = "yonetim" / "yonetim-ekran" → body.duzen-yonetim): aşağıda.
 */
:root {
    --otocars-kap: 100%;
    --otocars-kap-bosluk: .75rem;   /* .container padding-x */
}

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

@media (min-width: 1400px) {
    :root { --otocars-kap: var(--kap); }
    .container { max-width: var(--otocars-kap); }
}

/*
 * Yönetim düzeni: tek genişlik kaynağı. İçerik her kırılımda akışkan, en fazla --kap-genis
 * (1440px), kenar boşluğu --kap-kenar (16/24/32px). .container (sayfa başlığı, liste, form),
 * .kap-genis (canlı yönetim) ve header aynı hesabı kullanır — sayfa sayfa genişlik yazılmaz.
 * Kap = içerik + 2 × kap iç boşluğu; içerik kenarı tam --kap-kenar'a oturur.
 * % burada kabın üst öğesine (sayfa genişliğine) göredir; 100vw kaydırma çubuğunu da sayardı.
 */
.duzen-yonetim {
    --otocars-kap: min(
        calc(var(--kap-genis) + 2 * var(--otocars-kap-bosluk)),
        calc(100% - 2 * (var(--kap-kenar) - var(--otocars-kap-bosluk))));
}

.duzen-yonetim .container,
.duzen-yonetim .kap-genis {
    max-width: var(--otocars-kap);
}

.duzen-yonetim .kap-genis {
    padding-left: var(--otocars-kap-bosluk);
    padding-right: var(--otocars-kap-bosluk);
}

.top-bar,
header.style-1,
.yonetim-ekran-ust {
    padding-left: max(var(--otocars-kap-bosluk), calc((100% - var(--otocars-kap)) / 2 + var(--otocars-kap-bosluk)));
    padding-right: max(var(--otocars-kap-bosluk), calc((100% - var(--otocars-kap)) / 2 + var(--otocars-kap-bosluk)));
}

/* ── Yapışkan üst alan ────────────────────────────────────────────────── */

/*
 * Üst şerit + menü tek blok (.site-ust) ve blok, şerit yüksekliği kadar EKSİ top ile
 * yapışkan: şerit kaydırmayla doğal hızında ekrandan çıkar, menü tam şeridin bittiği anda
 * üste oturur. Akıştan hiçbir şey çıkmaz → sıçrama yok. Şerit yüksekliğini js/header.js
 * ölçüp --ust-serit-yukseklik'e yazar (992px altında şerit gizli, değer 0).
 *
 * DİKKAT: .site-ust ve header'a transform/filter/backdrop-filter verilmez — mobil
 * menü position:fixed ve bu özellikler onu header'ın içine hapseder.
 */
.site-ust {
    position: sticky;
    top: calc(-1 * var(--ust-serit-yukseklik, 0px));
    z-index: var(--z-ust);
}

/* Şeritteki kullanıcı menüsü (dropdown) aşağı, menü çubuğunun üzerine açılır: şerit, temanın
   header z-index'inin (999) üstünde olmalı. */
.site-ust .top-bar {
    position: relative;
    z-index: var(--z-acilir);
    background-color: var(--renk-yuzey);
    border-bottom: var(--kenar);
}

.site-ust header.style-1 {
    border-bottom: var(--kenar);
    transition: box-shadow var(--sure-orta) ease, border-color var(--sure-orta) ease;
}

/* Menü üste oturduğunda alt çizgi yerini hafif bir gölgeye bırakır. */
.site-ust.sabitlendi header.style-1 {
    border-bottom-color: transparent;
    box-shadow: var(--golge-2);
}

/* Şeridin içeriği, şerit ekrandan çıkarken solarak çekilir (kaydırmaya bağlı animasyon). */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .site-ust .top-bar > * {
            animation: ust-serit-cekil linear both;
            animation-timeline: scroll(root);
            animation-range: 0px var(--ust-serit-yukseklik, 1px);
        }
    }
}

@keyframes ust-serit-cekil {
    to {
        opacity: 0;
        translate: 0 35%;
    }
}

/* ── Ana menü ─────────────────────────────────────────────────────────── */

/* Menü cümle düzeninde, 15px, 600 (tema 13px BÜYÜK HARF yazıyordu; uzun Türkçe sözcükler
   geniş büyük harflerle okunaksızdı). Hover yalnız renk; etkin öğe kırmızı + 2px alt çizgi. */
header.style-1 .main-menu .menu-list > li > a,
header.style-1 .main-menu .menu-list > li > .menu-yakinda {
    font-family: var(--t-aile);
    font-size: .9375rem;
    font-weight: var(--t-orta);
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--sure-hizli) ease;
}

@media (min-width: 992px) {
    /* Tema üst düzey öğeleri inline-block dizer: öğeler arasındaki HTML boşlukları menüye ölü
       genişlik katıyordu. Flex, boşlukları atar ve menüyü her zaman tek satırda tutar. */
    header.style-1 .main-menu > .menu-list {
        display: flex;
        flex-wrap: nowrap;
    }

    header.style-1 .main-menu .menu-list > li > a.active {
        box-shadow: inset 0 -2px 0 var(--renk-marka);
    }

    header.style-1 .main-menu .menu-list > li > .menu-yakinda {
        display: block;
        padding: 15px 20px;
        line-height: 30px;
        white-space: nowrap;
    }

    header.style-1 .main-menu .menu-list > li:first-child > .menu-yakinda {
        padding-left: 0;
    }
}

/* 992–1199px: container 960px; yönetici menüsü (7 öğe) en kalabalık durumdur, ölçü onunla. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    header.style-1 .main-menu .menu-list > li {
        padding-right: 4px;
    }

    header.style-1 .main-menu .menu-list > li > a,
    header.style-1 .main-menu .menu-list > li > .menu-yakinda {
        padding-left: 6px;
        padding-right: 6px;
        font-size: var(--t-sm);
    }

    header.style-1 .main-menu .menu-list > li.menu-item-has-children > a {
        padding-right: 14px;
    }

    header.style-1 .main-menu .menu-list > li:first-child > a,
    header.style-1 .main-menu .menu-list > li:first-child > .menu-yakinda {
        padding-left: 0;
    }

    header.style-1 .main-menu .menu-list > li > .menu-yakinda small {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    header.style-1 .main-menu .menu-list > li > a,
    header.style-1 .main-menu .menu-list > li > .menu-yakinda {
        padding-left: 12px;
        padding-right: 12px;
    }

    header.style-1 .main-menu .menu-list > li.menu-item-has-children > a {
        padding-right: 18px;
    }

    header.style-1 .main-menu .menu-list > li:first-child > a,
    header.style-1 .main-menu .menu-list > li:first-child > .menu-yakinda {
        padding-left: 0;
    }
}

/* ── Henüz yapılmamış sayfalar ────────────────────────────────────────── */

/* Menüde görünür ama bağlantı vermez (MenuTanimi Hazir = false). */
.menu-yakinda {
    opacity: .55;
    cursor: not-allowed;
    user-select: none;
}

.menu-yakinda small {
    font-size: .7em;
    opacity: .8;
    margin-left: .35rem;
    border: 1px solid currentColor;
    border-radius: var(--r-tam);
    padding: 0 .4em;
    vertical-align: middle;
}

/* ── Çağrı merkezi (üst şerit sağı) ───────────────────────────────────── */

.cagri-merkezi {
    display: flex;
    align-items: center;
    gap: var(--b-3);
}

.cagri-merkezi > .bi {
    font-size: var(--t-2xl);
    line-height: 1;
    color: var(--renk-metin-ikincil);
}

.cagri-merkezi-icerik {
    display: flex;
    flex-direction: column;
    line-height: var(--t-satir-arayuz);
}

.cagri-merkezi-icerik span {
    font-size: var(--t-xs);
    color: var(--renk-metin-soluk);
}

.cagri-merkezi-icerik a {
    font-size: var(--t-lg);
    font-weight: var(--t-kalin);
    font-variant-numeric: tabular-nums;
    color: var(--renk-metin);
    text-decoration: none;
}

.cagri-merkezi-icerik a:hover {
    color: var(--renk-marka);
}

/* ── Oturum eylemleri (masaüstü: üst şerit sağı, mobil: menü satırı sağı) ─ */

.top-bar .topbar-right {
    display: flex;
    align-items: center;
    gap: var(--b-6);
}

.oturum-eylemleri {
    display: flex;
    align-items: center;
    gap: var(--b-2);
}

/* Header düğmeleri taban .otocars-btn'i kullanır ("Temel bileşenler"); burada yalnız yerleşim. */
.oturum-eylemleri .otocars-btn {
    white-space: nowrap;
}

/* "Yakında" işaretli düğme tıklanmaz ama diğerleriyle aynı hizada durur. */
.oturum-eylemleri .otocars-btn.menu-yakinda:hover {
    border-color: var(--renk-kenar-guclu);
    color: var(--renk-metin);
}

/* ── Mobil header (<992): tek satır 56px — logo · oturum düğmesi · hamburger ── */

@media (max-width: 991.98px) {
    header.style-1 {
        min-height: 56px;
        gap: var(--b-2);
    }

    /* Logo kalan alana sığar (320px'te taşma yok — bulgu 1); oran öznitelikten. */
    header.style-1 .header-logo {
        flex: 0 1 auto;
        min-width: 0;
        padding: 0;
    }

    header.style-1 .header-logo a {
        display: block;
        min-width: 0;
    }

    header.style-1 .header-logo img {
        display: block;
        width: 200px;
        max-width: 100%;
        height: auto;
    }

    header.style-1 .nav-right {
        flex: none;
        gap: var(--b-1);
    }

    /* Mobilde header'da tek oturum düğmesi: "Giriş". "Üye ol" çekmecede ana düğmedir. */
    header.style-1 .nav-right .oturum-uye-ol {
        display: none;
    }

    /* Görsel 36px, dokunma alanı 44px (görünmez genişletme). */
    header.style-1 .nav-right .oturum-eylemleri .otocars-btn {
        position: relative;
        min-height: 36px;
        padding: var(--b-1) var(--b-3);
    }

    header.style-1 .nav-right .oturum-eylemleri .otocars-btn::before {
        content: "";
        position: absolute;
        inset: -4px 0;
    }

    /* Hamburger: tema çizgileri korunur; düğme 44×44 dokunma alanı. Çekmecenin üstünde kalır
       (açıkken × olarak kapatır). */
    header.style-1 .nav-right .mobile-menu-btn {
        position: relative;
        z-index: 100000;
        flex: none;
        width: 44px;
        height: 44px;
        margin-left: 0;
        padding: 0;
        border: 0;
        border-radius: var(--r-orta);
        background: none;
        cursor: pointer;
    }

    header.style-1 .nav-right .mobile-menu-btn span {
        top: 50%;
        right: 4px;
    }

    /* Çekmece: sağdan, tam yükseklik; kapalıyken görünmez ve odak almaz. */
    header.style-1 .main-menu {
        left: auto;
        right: 0;
        width: min(320px, 86vw);
        border-right: 0;
        border-left: var(--kenar);
        box-shadow: var(--golge-3);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--sure-orta) var(--egri), visibility 0s linear var(--sure-orta);
    }

    header.style-1 .main-menu.show-menu {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--sure-orta) var(--egri), visibility 0s;
    }

    /* Çekmece logosu: hamburger × düğmesi sağ üstte durduğu için logo sola alınır. */
    header.style-1 .main-menu .mobile-logo-area {
        justify-content: flex-start !important;   /* tema: justify-content:center !important */
        min-height: 44px;
        padding-right: 48px;
    }

    header.style-1 .main-menu .mobile-logo-wrap img {
        width: 160px;
        height: auto;
    }

    header.style-1 .main-menu .menu-list {
        padding-top: var(--b-4);
    }

    /* Satırlar 48px */
    header.style-1 .main-menu .menu-list > li > a,
    header.style-1 .main-menu .menu-list > li > .menu-yakinda {
        display: block;
        min-height: 48px;
        padding: 9px 0;
    }

    header.style-1 .main-menu .menu-list > li > a.active {
        color: var(--renk-marka);
    }

    /* Arka örtü (header.js .site-ust'e .cekmece-acik ekler; örtüye dokunmak çekmeceyi kapatır). */
    .site-ust.cekmece-acik::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background-color: var(--pencere-ortu);
    }
}

/* Çekmece eylemleri: "Üye ol" + çağrı merkezi (yalnız mobil çekmecede). */
.cekmece-eylemler {
    display: grid;
    gap: var(--b-3);
    padding: var(--b-6) 0 var(--b-4);
    border-bottom: var(--kenar);
}

.cekmece-eylemler .cekmece-telefon {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    min-height: 44px;
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.cekmece-eylemler .cekmece-telefon span {
    color: var(--renk-metin-soluk);
    font-weight: var(--t-normal);
}

@media (min-width: 992px) {
    .cekmece-eylemler {
        display: none;
    }
}

/* ── Açılır menüler (ana menü alt menüleri + kullanıcı menüsü) ────────── */

/*
 * İki açılır liste aynı dili konuşur: yuvarlatılmış beyaz panel, yumuşak gölge, her satırda
 * simge kutusu + normal harfle başlık. Üzerine gelinen satır sıcak gri zemin alır, simge kutusu
 * kırmızıya döner — kırmızı yalnızca o anki satırda. Seçiciler uzun: temanın
 * header.style-1 … ul>li ul.sub-menu>li a kurallarını geçmeleri gerekiyor.
 */

/* transform değil translate: Popper kullanıcı menüsünü satır içi transform ile konumluyor. */
@keyframes acilir-ac {
    from { opacity: 0; translate: 0 6px; }
    to   { opacity: 1; translate: 0 0; }
}

header.style-1 .main-menu ul.sub-menu > li > .acilir-oge,
.oturum-eylemleri .kullanici-menu .acilir-oge {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--r-orta);
    background: transparent;
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    font-weight: var(--t-normal);
    line-height: var(--t-satir-arayuz);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color var(--sure-hizli), color var(--sure-hizli);
}

header.style-1 .main-menu ul.sub-menu > li > .acilir-oge::before {
    display: none;
}

/* Simge kutusu. Tema alt menüdeki <i>'leri mutlak konumlayıp gizliyordu; burada sıfırlanır. */
header.style-1 .main-menu ul.sub-menu > li > .acilir-oge > i,
.oturum-eylemleri .kullanici-menu .acilir-oge > i {
    position: static;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r-kucuk);
    background: var(--acilir-zemin-vurgu);
    color: var(--renk-metin);
    font-size: var(--t-md);
    line-height: 1;
    opacity: 1;
    transition: background-color var(--sure-hizli), color var(--sure-hizli);
}

header.style-1 .main-menu ul.sub-menu > li > .acilir-oge > small,
.oturum-eylemleri .kullanici-menu .acilir-oge > small {
    margin-left: auto;
    padding-left: .45em;
    padding-right: .45em;
}

/* Klavye odağında da aynı vurgu + odak çizgisi (outline sıfırlanmaz). */
header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge:hover,
header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge:focus-visible,
.oturum-eylemleri .kullanici-menu .acilir-oge:not(.menu-yakinda):hover,
.oturum-eylemleri .kullanici-menu .acilir-oge:not(.menu-yakinda):focus-visible {
    margin: 0;
    background: var(--acilir-zemin-vurgu);
    color: var(--renk-metin);
}

header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge:focus-visible,
.oturum-eylemleri .kullanici-menu .acilir-oge:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: -2px;
}

header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge:hover > i,
header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge:focus-visible > i,
.oturum-eylemleri .kullanici-menu .acilir-oge:not(.menu-yakinda):hover > i,
.oturum-eylemleri .kullanici-menu .acilir-oge:not(.menu-yakinda):focus-visible > i {
    background: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

/* Bulunulan sayfa */
header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge.active {
    color: var(--renk-marka);
    font-weight: var(--t-orta);
}

header.style-1 .main-menu ul.sub-menu > li > a.acilir-oge.active > i {
    background: var(--renk-marka-acik);
    color: var(--renk-marka);
}

/* ── Ana menü alt menü paneli (masaüstü) ── */

@media (min-width: 992px) {
    header.style-1 .main-menu .menu-list > li > ul.sub-menu {
        top: calc(100% + 6px);
        left: 0;
        right: auto;
        min-width: 270px;
        padding: 6px;
        border: 1px solid var(--acilir-cizgi);
        border-radius: var(--r-buyuk);
        background: var(--renk-yuzey);
        box-shadow: var(--acilir-golge);
    }

    /* Son açılır öğenin paneli sağa hizalanır (sola hizalıyken container'dan taşıyordu). */
    header.style-1 .main-menu .menu-list > li:last-child > ul.sub-menu {
        left: auto;
        right: 0;
    }

    /* Tetikleyici ile panel arasındaki boşlukta fare çıkınca menü kapanmasın */
    header.style-1 .main-menu .menu-list > li > ul.sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 8px;
    }

    header.style-1 .main-menu .menu-list > li > ul.sub-menu > li + li {
        margin-top: 2px;
    }

    /* Tema yalnızca fareyle açıyordu; klavyeyle odaklanınca da açılsın. */
    header.style-1 .main-menu .menu-list > li:hover > ul.sub-menu,
    header.style-1 .main-menu .menu-list > li:focus-within > ul.sub-menu {
        display: block;
        animation: acilir-ac .16s ease-out;
    }

    header.style-1 .main-menu .menu-list > li.menu-item-has-children::after {
        transition: transform var(--sure-orta) ease, color var(--sure-orta) ease;
    }

    header.style-1 .main-menu .menu-list > li.menu-item-has-children:hover::after,
    header.style-1 .main-menu .menu-list > li.menu-item-has-children:focus-within::after {
        transform: rotate(180deg);
        color: var(--renk-marka);
    }

    header.style-1 .main-menu .menu-list > li:focus-within > a.drop-down {
        color: var(--renk-marka);
    }
}

/* Mobil yan panel: kutu ve gölge yok, satırlar hafif içeriden başlar. */
@media (max-width: 991.98px) {
    header.style-1 .main-menu ul li ul.sub-menu {
        padding: 0 0 .5rem .25rem;
    }

    /* Rozet başlığın altına iner; simge iki satırı kaplar. */
    header.style-1 .main-menu ul.sub-menu > li > .acilir-oge {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: var(--b-3);
        row-gap: 2px;
        min-height: 44px;
        padding: 6px;
        white-space: normal;
    }

    header.style-1 .main-menu ul.sub-menu > li > .acilir-oge:has(> small) > i {
        grid-row: span 2;
    }

    header.style-1 .main-menu ul.sub-menu > li > .acilir-oge > small {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }
}

/* ── Kullanıcı menüsü ── */

/* Tetikleyici: baş harfli avatar + ad + ok */
.oturum-eylemleri .kullanici-menu-dugme {
    gap: var(--b-2);
    padding-left: 6px;
}

.kullanici-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gri-900);
    color: var(--renk-metin-ters);
    font-size: var(--t-xs);
    font-weight: var(--t-kalin);
    letter-spacing: .03em;
    line-height: 1;
}

.kullanici-avatar-buyuk {
    width: 40px;
    height: 40px;
    font-size: var(--t-sm);
}

.kullanici-menu-ok {
    font-size: var(--t-xs);
    transition: transform var(--sure-orta) ease;
}

.kullanici-menu-dugme[aria-expanded="true"] .kullanici-menu-ok {
    transform: rotate(180deg);
}

.oturum-eylemleri .kullanici-menu-dugme[aria-expanded="true"] {
    border-color: var(--gri-900);
}

/* Panel. Üst şerit temada "ul { display:flex; gap:30px }" aldığı için Bootstrap'in kapalı
   durumu (display:none) eziliyordu. */
.oturum-eylemleri .kullanici-menu.dropdown-menu {
    display: none;
    z-index: var(--z-acilir);
    min-width: 270px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--acilir-cizgi);
    border-radius: var(--r-buyuk);
    background: var(--renk-yuzey);
    box-shadow: var(--acilir-golge);
    list-style: none;
}

.oturum-eylemleri .kullanici-menu.dropdown-menu.show {
    display: block;
    animation: acilir-ac .16s ease-out;
}

.oturum-eylemleri .kullanici-menu > li {
    line-height: normal;
}

.oturum-eylemleri .kullanici-menu > li + li {
    margin-top: 2px;
}

/* Başlık: kim olarak oturum açıldığı. Negatif kenar boşluğu panelin iç boşluğunu
   dengeler; .oturum-eylemleri li temadan margin aldığı için özgüllük gerekiyor. */
.oturum-eylemleri .kullanici-menu > .kullanici-menu-baslik {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    margin: -6px -6px 6px;
    padding: 14px var(--b-4);
    border-bottom: 1px solid var(--acilir-cizgi);
}

.kullanici-menu-kimlik {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--t-satir-arayuz);
}

.kullanici-menu-kimlik strong {
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kullanici-menu-kimlik small {
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oturum-eylemleri .kullanici-menu .dropdown-divider {
    height: 0;
    margin: 6px -6px;
    border: 0;
    border-top: 1px solid var(--acilir-cizgi);
    background: none;
    opacity: 1;
}

/* Çıkış: diğerlerinden ayrılsın diye kırmızı tonda */
.oturum-eylemleri .kullanici-menu .acilir-oge-cikis,
.oturum-eylemleri .kullanici-menu .acilir-oge-cikis:hover,
.oturum-eylemleri .kullanici-menu .acilir-oge-cikis:focus-visible {
    color: var(--renk-marka);
    font-weight: var(--t-orta);
}

.oturum-eylemleri .kullanici-menu .acilir-oge-cikis > i {
    background: var(--renk-marka-acik);
    color: var(--renk-marka);
}

@media (prefers-reduced-motion: reduce) {
    header.style-1 .main-menu .menu-list > li > ul.sub-menu,
    .oturum-eylemleri .kullanici-menu.dropdown-menu.show {
        animation: none;
    }
}

/* ── Yönetim ekranı üst çubuğu (ViewData["Duzen"] = "yonetim-ekran") ──── */

/*
 * Sistemin yönetildiği odak ekranı (canlı yönetim): menü, üst şerit ve footer yok; ince bir
 * çubukta logo (ana sayfa) · geri düğmesi · oturum eylemleri. Yan boşluk header ile aynı
 * hesaptan ("Header ↔ içerik hizası") — logo ve düğmeler içerik kenarına oturur.
 * Yapışkan değil: canlı yönetimde dikey alan tablolara kalsın.
 */
.yonetim-ekran-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-2) var(--b-4);
    min-height: 56px;
    padding-top: var(--b-2);
    padding-bottom: var(--b-2);
    border-bottom: var(--kenar);
    background-color: var(--renk-yuzey);
}

.yonetim-ekran-logo {
    display: block;
    flex: none;
    line-height: 0;
}

.yonetim-ekran-logo img {
    height: 24px;
    width: auto;
}

.yonetim-ekran-geri {
    flex: none;
}

.yonetim-ekran-ust .oturum-eylemleri {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .yonetim-ekran-ust {
        gap: var(--b-2);
    }

    /* 375'te logo · geri · avatar tek satıra sığsın. */
    .yonetim-ekran-logo img {
        height: 16px;
    }
}

/* ── İç sayfa başlık alanı ────────────────────────────────────────────── */

/*
 * Açık başlık alanı (kırmızı bant kaldırıldı — §6.4, yönetici kararı 2): beyaz yüzey, ince alt
 * kenar, sayfa yolu soluk küçük metin, H1 koyu. Kırmızı yalnız ana eylem/canlı/odakta kalır.
 * Mobilde sayfa yolunda yalnız bir üst seviye görünür ("‹ Ana Sayfa").
 * Yönetim düzeninde (body.duzen-yonetim) kompakt.
 */
.sayfa-basligi {
    padding: var(--b-8) 0 var(--b-6);
    border-bottom: var(--kenar);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
}

.sayfa-basligi h1 {
    margin: 0;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-3xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

/* Başlık + sağda eylem (SayfaBasligiModel.Eylem). Dar ekranda eylem başlığın altına iner. */
.sayfa-basligi-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--b-3) var(--b-5);
}

.sayfa-basligi-satir h1 {
    flex: 1 1 320px;
    min-width: 0;
}

.sayfa-basligi-eylem {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--b-1);
}

@media (max-width: 575.98px) {
    .sayfa-basligi-eylem {
        align-items: flex-start;
    }
}

.duzen-yonetim .sayfa-basligi {
    padding: var(--b-4) 0;
}

.duzen-yonetim .sayfa-basligi h1 {
    font-size: var(--t-2xl);
}

/* Odak ekranında (yonetim-ekran) daha da kısa: sayfa yolu yok, geri düğmesi üst çubukta. */
.duzen-yonetim-ekran .sayfa-basligi {
    padding: var(--b-3) 0;
}

.duzen-yonetim-ekran .sayfa-basligi h1 {
    font-size: var(--t-xl);
}

@media (max-width: 767.98px) {
    .sayfa-basligi {
        padding: var(--b-5) 0 var(--b-4);
    }

    .sayfa-basligi h1 {
        font-size: var(--t-2xl);
    }
}

/* Sayfa yolu (breadcrumb) */
.sayfa-yolu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--b-2);
    margin: 0 0 var(--b-2);
    padding: 0;
    color: var(--renk-metin-soluk);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.sayfa-yolu li + li::before {
    content: "/";
    margin-right: var(--b-2);
    color: var(--gri-400);
}

/* Dokunma alanı 44px; düzen yüksekliği değişmesin diye negatif kenar boşluğuyla. */
.sayfa-yolu a {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
    color: var(--renk-metin-soluk);
    text-decoration: none;
}

.sayfa-yolu a:hover {
    color: var(--renk-metin);
    text-decoration: underline;
}

.sayfa-yolu [aria-current="page"] {
    color: var(--renk-metin-ikincil);
}

@media (max-width: 767.98px) {
    .sayfa-yolu li {
        display: none;
    }

    .sayfa-yolu li:nth-last-child(2) {
        display: block;
    }

    .sayfa-yolu li:nth-last-child(2)::before {
        content: "‹";
        margin-right: 6px;
        color: var(--renk-metin-soluk);
    }
}

/* ── Footer üstü çağrı (yalnız ViewData["FooterCta"] = true olan sayfalarda) ── */

.footer-cta {
    padding: var(--bolum-dikey) 0;
    border-top: var(--kenar);
    background-color: var(--renk-zemin);
}

.footer-cta-ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-6) var(--b-10);
}

.footer-cta-metin {
    max-width: 38rem;
}

.footer-cta h2 {
    margin: 0 0 var(--b-2);
    color: var(--renk-metin);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.footer-cta p {
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

.footer-cta-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-3);
}

@media (max-width: 575.98px) {
    .footer-cta h2 {
        font-size: var(--t-xl);
    }

    .footer-cta-eylemler {
        width: 100%;
        flex-direction: column;
    }
}

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

/*
 * Koyu footer: --gri-900 zemin; sağda koyu geçişle eriyen araç fotoğrafı (images/banner/ft-banner.webp —
 * plakasında OTOCARS yazan kırmızı araç; kaynak ft-banner.png, 1600 px WebP'ye çevrildi), sol üstte hafif marka ışığı, iletişim için buzlu cam kart.
 * Metin her zaman düz koyu zemin ya da koyu geçişin üstündedir (okunurluk). Kap içerikle aynı
 * (.container). Grup başlıkları başlık etiketi değil (<p>). Mobilde (< 992px) gruplar akordiyon; kapanma
 * yalnızca footer.js "footer-akordiyon" sınıfını eklediğinde devreye girer.
 * Yönetim düzeninde yalnız telif/hukuki satırı çizilir (dekor yok).
 */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--b-16) 0 var(--b-6);
    background-color: var(--gri-900);
    color: var(--renk-koyu-metin);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

/* Fotoğraf: sağ yarıda, soldan ve alttan koyu zemine erir; üstte marka ışığı. */
.footer-dekor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-dekor::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24%;   /* araç, sağdaki iletişim kartının solunda görünsün */
    width: 56%;
    height: 400px;   /* yalnız üst bölüm (marka + iletişim kartı); bağlantı sütunları düz zeminde kalır */
    background: url("../images/banner/ft-banner.webp") right 30% / cover no-repeat;
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 72%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 55%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 72%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 55%);
    mask-composite: intersect;
}
 
.site-footer p {
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--renk-metin-ters);
    outline-offset: 3px;
    border-radius: var(--r-kucuk);
}

.footer-yonetim {
    padding: var(--b-4) 0;
}

.footer-yonetim .footer-alt {
    padding-top: 0;
    border-top: 0;
}

/* Üst sıra: marka | iletişim */
.footer-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--b-6) var(--b-10);
    padding-bottom: var(--b-8);
    border-bottom: 1px solid var(--renk-koyu-cizgi);
}

.footer-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--b-4);
}

.footer-marka p {
    max-width: 26rem;
    margin: 0;
    color: var(--renk-koyu-metin);
}

.site-footer .footer-slogan {
    margin: 0 0 var(--b-2);
    color: var(--renk-metin-ters);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.footer-ihaleler {
    margin-top: var(--b-6);
}

/* Buzlu cam kart: fotoğrafın üstünde yarı saydam, bulanık zemin. */
.footer-iletisim {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--b-1);
    min-width: 280px;
    padding: var(--b-5) var(--b-6);
    border: 1px solid var(--renk-koyu-cizgi);
    border-radius: var(--r-buyuk);
    background-color: rgba(27, 27, 25, .45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
}

.footer-iletisim-satirlar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--b-5);
    margin-top: var(--b-1);
    padding-top: var(--b-2);
    border-top: 1px solid var(--renk-koyu-cizgi);
    align-self: stretch;
}

.footer-iletisim-etiket {
    margin: 0;
    color: var(--renk-koyu-metin-soluk);
    font-size: var(--t-xs);
}

.footer-telefon,
.footer-yazin {
    display: inline-flex;
    align-items: center;
    gap: var(--b-2);
    color: var(--renk-metin-ters);
    text-decoration: none;
}

.footer-telefon {
    min-height: 44px;
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.footer-telefon i {
    font-size: var(--t-lg);
}

.footer-yazin {
    min-height: 44px;
    color: var(--renk-koyu-metin);
}

.footer-telefon:hover,
.footer-yazin:hover {
    color: var(--renk-metin-ters);
    text-decoration: underline;
}

/* İkinci sıra: bağlantı grupları (sayısı oturuma göre değişir) */
.footer-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b-8);
    padding: var(--b-8) 0;
}

.footer-baslik {
    position: relative;
    margin: 0 0 var(--b-4);
    padding-bottom: var(--b-2);
    color: var(--renk-metin-ters);
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

/* Sütun başlığının altında kısa marka çizgisi (masaüstü). */
.footer-baslik::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--renk-marka);
}

.footer-akordiyon-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-4);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.footer-akordiyon-btn > .bi-chevron-down {
    display: none;
}

/* Bağlantı listesi */
.footer-baglantilar {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-baglantilar a,
.footer-baglantilar .menu-yakinda {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
    text-decoration: none;
}

.footer-baglantilar a {
    color: var(--renk-koyu-metin);
}

.footer-baglantilar a:hover {
    color: var(--renk-metin-ters);
    text-decoration: underline;
}

.footer-baglantilar .menu-yakinda {
    color: var(--renk-koyu-metin-soluk);
    cursor: default;
}

.footer-baglantilar .menu-yakinda small {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--renk-koyu-cizgi);
    border-radius: var(--r-tam);
    font-size: var(--t-xs);
    line-height: 1.6;
}

/* Alt sıra: telif | hukuki bağlantılar + B2 imzası */
.footer-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-4) var(--b-8);
    padding-top: var(--b-6);
    border-top: 1px solid var(--renk-koyu-cizgi);
}

.site-footer .footer-telif {
    margin: 0;
    color: var(--renk-koyu-metin-soluk);
    font-size: var(--t-xs);
}

.footer-alt-sag {
    display: flex;
    align-items: center;
    gap: var(--b-6);
}

.footer-hukuki {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--b-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-hukuki a,
.footer-hukuki .menu-yakinda {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--renk-koyu-metin-soluk);
    font-size: var(--t-xs);
    line-height: var(--t-satir-arayuz);
    text-decoration: none;
}

.footer-hukuki .menu-yakinda {
    cursor: default;
}

.footer-hukuki a:hover {
    color: var(--renk-metin-ters);
    text-decoration: underline;
}

.footer-b2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.footer-b2 img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: var(--r-kucuk);
}

/* ── Footer: dar ekran (akordiyon) ── */

@media (max-width: 991.98px) {
    .site-footer {
        padding-top: var(--b-10);
    }

    /* Akordiyonun üstünde ve altında ayrı çizgi yok (kullanıcı kararı 2026-10-07): çizgiler yalnız gruplar
       arasında; üst bölüm ve alt şerit boşlukla ayrılır. */
    .footer-ust {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: var(--b-4);
        border-bottom: 0;
    }

    .footer-izgara {
        display: block;
        padding: 0 0 var(--b-4);
    }

    .footer-grup {
        border-bottom: 1px solid var(--renk-koyu-cizgi);
    }

    .footer-grup:last-child {
        border-bottom: 0;
    }

    .footer-baslik {
        margin: 0;
        padding-bottom: 0;
    }

    .footer-baslik::after {
        display: none;
    }

    /* Dar ekranda fotoğraf üst bölümün arkasında, daha soluk; kart tam genişlik. */
    .footer-dekor::before {
        right: 0;
        width: 100%;
        height: 420px;
        opacity: .35;
    }

    .footer-iletisim {
        align-self: stretch;
        min-width: 0;
    }

    .footer-akordiyon-btn {
        min-height: 52px;
        padding: var(--b-3) 0;
    }

    .footer-icerik-ic > :last-child {
        margin-bottom: var(--b-4);
    }

    .footer-baglantilar a,
    .footer-baglantilar .menu-yakinda,
    .footer-hukuki a,
    .footer-hukuki .menu-yakinda {
        min-height: 44px;
    }

    /* Kapanma yalnızca JS varken: aksi halde gruplar açık kalır */
    .footer-akordiyon .footer-akordiyon-btn {
        cursor: pointer;
    }

    .footer-akordiyon .footer-akordiyon-btn > .bi-chevron-down {
        display: block;
        font-size: var(--t-sm);
        color: var(--renk-koyu-metin-soluk);
        transition: transform var(--sure-orta);
    }

    .footer-akordiyon .footer-grup.acik .footer-akordiyon-btn > .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* 0fr → 1fr: yükseklik ölçmeden akıcı açılma. visibility, kapalı bağlantıların klavyeyle
       odaklanmasını engeller; kapanırken animasyon bitince devreye girer. */
    .footer-akordiyon .footer-icerik {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--sure-orta) ease, visibility 0s linear var(--sure-orta);
    }

    .footer-akordiyon .footer-grup.acik .footer-icerik {
        grid-template-rows: 1fr;
        visibility: visible;
        transition: grid-template-rows var(--sure-orta) ease, visibility 0s;
    }

    .footer-akordiyon .footer-icerik-ic {
        min-height: 0;
        overflow: hidden;
    }

    .footer-alt {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
        border-top: 0;
    }

    .footer-alt-sag {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--b-2);
        order: -1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 * TEMEL BİLEŞENLER — docs/04-tasarim-sistemi.md §6. Diğer paketler bu sınıfları kullanır;
 * sayfa CSS'i yalnız yerleşim yazar, bileşenin görünümünü yeniden tanımlamaz.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Atla bağlantısı (skip link) — her düzende body'nin ilk öğesi ──────── */

.atla {
    position: absolute;
    top: var(--b-2);
    left: var(--b-2);
    z-index: calc(var(--z-bildirim) + 10);
    padding: var(--b-3) var(--b-4);
    border-radius: var(--r-orta);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    text-decoration: none;
}

.atla:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.atla:focus,
.atla:hover {
    color: var(--renk-metin-ters);
}

/* ── Kaplar ───────────────────────────────────────────────────────────── */

/* .kap: .container ile aynı hesap (header ile hizalı). .kap-genis: yönetim. .kap-dar: okuma/form. */
.kap,
.kap-genis,
.kap-dar {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.kap {
    max-width: var(--otocars-kap);
    padding-left: var(--otocars-kap-bosluk);
    padding-right: var(--otocars-kap-bosluk);
}

.kap-genis {
    max-width: calc(var(--kap-genis) + 2 * var(--kap-kenar));
    padding-left: var(--kap-kenar);
    padding-right: var(--kap-kenar);
}

.kap-dar {
    max-width: calc(var(--kap-dar) + 2 * var(--kap-kenar));
    padding-left: var(--kap-kenar);
    padding-right: var(--kap-kenar);
}

/* ── Tabular rakam (fiyat, sayaç, km, bayrak no) ──────────────────────── */

.sayisal {
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--t-sayi);
}

/* ── Düğmeler (§6.5) ──────────────────────────────────────────────────── */

/*
 * Taban .otocars-btn = ikincil (beyaz, çerçeveli). Değişkenler: -ana, -metin, -tehlike, -koyu;
 * boyut -kucuk (36) / varsayılan (44) / -buyuk (52); -tam tam genişlik.
 * Eski sınıflar TAKMA AD olarak aynı seçici listesinde yaşar (view'lar değişmez; JS kancaları
 * korunur): ana = primary-btn1/2/3, giris-btn, uk-btn; ikincil = yonetim-btn, hesabim-dugme,
 * uk-ikincil-btn, canli-ust-dugme; metin = uk-baglanti-btn; tehlike = yonetim-btn.tehlike.
 * Sayfa CSS'indeki yerel tanımlar (bu dosyadan sonra yüklenir) hâlâ kazanır; ilgili paket siler.
 */
.otocars-btn,
.primary-btn1,
.primary-btn2,
.primary-btn3,
.giris-btn,
.uk-btn,
.yonetim-btn,
.hesabim-dugme,
.uk-ikincil-btn,
.canli-ust-dugme,
.uk-baglanti-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-2);
    min-height: 44px;
    padding: var(--b-2) var(--b-5);
    border: 1px solid var(--renk-kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sure-hizli) ease, border-color var(--sure-hizli) ease,
                color var(--sure-hizli) ease, box-shadow var(--sure-hizli) ease;
}

.otocars-btn .bi,
.primary-btn1 .bi {
    font-size: 1em;
    line-height: 1;
}

.otocars-btn svg,
.primary-btn1 svg,
.primary-btn1 i {
    fill: currentColor;
    color: currentColor;
}

.otocars-btn:hover,
.yonetim-btn:hover,
.hesabim-dugme:hover,
.uk-ikincil-btn:hover,
.canli-ust-dugme:hover {
    border-color: var(--gri-900);
    color: var(--renk-metin);
}

/* Ana: kırmızı dolgu. Temanın koyu eğik "süpürme" efekti (::after) kapatılır. */
.otocars-btn-ana,
.primary-btn1,
.primary-btn2,
.primary-btn3,
.giris-btn,
.uk-btn {
    border-color: var(--renk-marka);
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

.otocars-btn-ana:hover,
.primary-btn1:hover,
.primary-btn2:hover,
.primary-btn3:hover,
.giris-btn:hover,
.uk-btn:hover,
.otocars-btn-ana:active,
.primary-btn1:active {
    border-color: var(--renk-marka-koyu);
    background-color: var(--renk-marka-koyu);
    color: var(--renk-marka-uzeri);
}

.primary-btn1::after,
.primary-btn2::after,
.primary-btn3::after {
    content: none;
}

/* Metin (üçüncül) */
.otocars-btn-metin,
.uk-baglanti-btn {
    padding-left: var(--b-2);
    padding-right: var(--b-2);
    border-color: transparent;
    background-color: transparent;
    color: var(--renk-metin);
}

.otocars-btn-metin:hover,
.uk-baglanti-btn:hover {
    border-color: transparent;
    color: var(--renk-metin);
    text-decoration: underline;
}

/* Tehlike: beyaz zemin, kırmızı metin/kenar (dolgu yok) */
.otocars-btn-tehlike,
.yonetim-btn.tehlike {
    border-color: var(--renk-marka-cizgi);
    color: var(--renk-hata);
}

.otocars-btn-tehlike:hover,
.yonetim-btn.tehlike:hover {
    border-color: var(--renk-hata);
    background-color: var(--renk-hata-zemin);
    color: var(--renk-hata);
}

/* Koyu (tek vurgu — sayfada en fazla bir) */
.otocars-btn-koyu {
    border-color: var(--gri-900);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.otocars-btn-koyu:hover {
    border-color: var(--gri-700);
    background-color: var(--gri-700);
    color: var(--renk-metin-ters);
}

/* Boyutlar */
.otocars-btn-kucuk {
    min-height: 36px;
    padding: var(--b-1) var(--b-4);
    border-radius: var(--r-kucuk);
}

.otocars-btn-buyuk {
    min-height: 52px;
    padding: var(--b-3) var(--b-6);
    font-size: var(--t-md);
}

.otocars-btn-tam {
    width: 100%;
}

/* Yalnız simgeli düğme: 44×44 + aria-label zorunlu */
.otocars-btn-simge {
    width: 44px;
    padding: 0;
}

/* Durumlar */
.otocars-btn:focus-visible,
.primary-btn1:focus-visible,
.giris-btn:focus-visible,
.uk-btn:focus-visible,
.yonetim-btn:focus-visible,
.hesabim-dugme:focus-visible,
.uk-ikincil-btn:focus-visible,
.canli-ust-dugme:focus-visible,
.uk-baglanti-btn:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
    box-shadow: var(--odak-halkasi);
}

.otocars-btn:active,
.primary-btn1:active,
.yonetim-btn:active {
    translate: 0 1px;
}

.otocars-btn:disabled,
.otocars-btn.disabled,
.otocars-btn[aria-disabled="true"],
.primary-btn1:disabled,
.primary-btn1[aria-disabled="true"],
.yonetim-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    translate: none;
}

a.otocars-btn[aria-disabled="true"],
a.otocars-btn.disabled {
    pointer-events: none;
}

/* Yükleniyor: metin korunur, solda dönen halka, tıklama kapalı */
.otocars-btn[aria-busy="true"] {
    pointer-events: none;
}

.otocars-btn[aria-busy="true"]::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: otocars-don .7s linear infinite;
}

@keyframes otocars-don {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .otocars-btn[aria-busy="true"]::before {
        animation: none;
    }

    .otocars-btn:active,
    .primary-btn1:active,
    .yonetim-btn:active {
        translate: none;
    }
}

/* ── Rozet / durum etiketi (§6.8) ─────────────────────────────────────── */

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-tam);
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
    line-height: 1;
    white-space: nowrap;
}

.rozet .bi {
    font-size: 1em;
}

.rozet-canli {
    background-color: var(--renk-marka-acik);
    color: var(--renk-marka);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rozet-canli::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    animation: rozet-nabiz 1.4s ease-in-out infinite;
}

@keyframes rozet-nabiz {
    50% { opacity: .25; }
}

.rozet-koyu {
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.rozet-basari {
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
}

.rozet-uyari {
    background-color: var(--renk-uyari-zemin);
    color: var(--renk-uyari);
}

.rozet-hata {
    background-color: var(--renk-hata-zemin);
    color: var(--renk-hata);
}

@media (prefers-reduced-motion: reduce) {
    .rozet-canli::before {
        animation: none;
    }
}

/* ── Bildirim (alert) ve TempData bildirimi (§6.9) ────────────────────── */

/* Bootstrap .alert yapısı korunur; görünüm: sol 3px şerit + açık zemin. Bilgi nötr (mavi yok). */
.alert {
    border: 0;
    border-left: 3px solid var(--gri-500);
    border-radius: var(--r-orta);
    background-color: var(--renk-bilgi-zemin);
    color: var(--renk-bilgi);
    line-height: var(--t-satir-govde);
}

.alert-success {
    border-left-color: var(--renk-basari);
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
}

.alert-warning {
    border-left-color: var(--renk-uyari);
    background-color: var(--renk-uyari-zemin);
    color: var(--renk-uyari);
}

.alert-danger {
    border-left-color: var(--renk-hata);
    background-color: var(--renk-hata-zemin);
    color: var(--renk-hata);
}

.alert-info,
.alert-primary,
.alert-secondary,
.alert-light {
    border-left-color: var(--gri-500);
    background-color: var(--renk-bilgi-zemin);
    color: var(--renk-bilgi);
}

/* Yalnız sınıfsız metin bağlantıları: alert içindeki düğme görünümlü bağlantılar (primary-btn1…)
   kendi rengini korur. */
.alert .alert-link,
.alert a:not([class]) {
    color: inherit;
    font-weight: var(--t-orta);
    text-decoration: underline;
}

/* TempData bildirimi (_Bildirim): simge + metin + kapat */
.bildirim {
    display: flex;
    align-items: flex-start;
    gap: var(--b-3);
    margin-bottom: 0;
}

.bildirim > .bi {
    flex: none;
    font-size: var(--t-lg);
    line-height: var(--t-satir-govde);
}

.bildirim-metin {
    min-width: 0;
    flex: 1;
}

/* ── Proje simgesi: otomobil ─────────────────────────────────────────────
   Projedeki Bootstrap Icons sürümünde araç simgesi (bi-car-front) yok. Aynı kullanım: <i class="bi bi-otomobil">;
   renk currentColor, boyut font-size (maske). Özel seçimde data-ikon="bi-otomobil" de çalışır. */
.bi-otomobil::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 3.6A1.5 1.5 0 0 1 4.6 2.6h6.8a1.5 1.5 0 0 1 1.4 1l1.1 3.2A1.5 1.5 0 0 1 15 8.2V12a1 1 0 0 1-1 1h-.5v1a1 1 0 0 1-2 0v-1h-7v1a1 1 0 0 1-2 0v-1H2a1 1 0 0 1-1-1V8.2a1.5 1.5 0 0 1 1.1-1.4zM4.6 3.6a.5.5 0 0 0-.47.33L3.2 6.6h9.6l-.93-2.67a.5.5 0 0 0-.47-.33zM4 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2m8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 3.6A1.5 1.5 0 0 1 4.6 2.6h6.8a1.5 1.5 0 0 1 1.4 1l1.1 3.2A1.5 1.5 0 0 1 15 8.2V12a1 1 0 0 1-1 1h-.5v1a1 1 0 0 1-2 0v-1h-7v1a1 1 0 0 1-2 0v-1H2a1 1 0 0 1-1-1V8.2a1.5 1.5 0 0 1 1.1-1.4zM4.6 3.6a.5.5 0 0 0-.47.33L3.2 6.6h9.6l-.93-2.67a.5.5 0 0 0-.47-.33zM4 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2m8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Sağ kenar hızlı iletişim (_SagIletisim): "Araç talebinde bulun" (dikey sekme) + WhatsApp ──────────
   Teklif ekranlarında (sıralı canlı ekran, toplu ihalenin canlı araç listesi, canlı araç detayı) gizli. */
.sag-iletisim {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: var(--z-alt-cubuk);
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    box-shadow: var(--golge-2);
}

body:has([data-canli-ihale]) .sag-iletisim {
    display: none;
}

.sag-iletisim a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-2);
    width: 48px;
    color: var(--renk-marka-uzeri);
    text-decoration: none;
    transition: background-color var(--sure-hizli);
}

.sag-iletisim-talep {
  padding: var(--b-5) 0;
  border-bottom-right-radius: var(--r-orta);
  background-color: var(--renk-marka);
  font-size: var(--t-sm);
  font-weight: var(--t-kalin);
  letter-spacing: .02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 2px;
}

.sag-iletisim-talep .bi {
    transform: rotate(90deg);
}

.sag-iletisim-talep:hover,
.sag-iletisim-talep:focus-visible {
    background-color: var(--renk-marka-koyu);
    color: var(--renk-marka-uzeri);
}

.sag-iletisim-whatsapp {
    height: 48px;
    border-bottom-left-radius: var(--r-orta);
    background-color: var(--gri-900);
    font-size: var(--t-lg);
}

.sag-iletisim-whatsapp:hover,
.sag-iletisim-whatsapp:focus-visible {
    background-color: var(--gri-800);
    color: var(--renk-marka-uzeri);
}

/* Telefonda dikey yazı içeriği örter: yalnız simgeler (44×44), metin ekran okuyucuya kalır. */
@media (max-width: 767.98px) {
    .sag-iletisim a { width: 44px; }

  .sag-iletisim-talep {
    height: 44px;
    padding: 0;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: var(--t-lg);
    border-top-left-radius: var(--r-orta);
    border-bottom-right-radius: unset;
  }

    .sag-iletisim-talep .bi { transform: none; }

    .sag-iletisim-talep span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sag-iletisim-whatsapp { height: 44px; }
}

/* ── Site geneli duyuru penceresi (_SiteDuyurusu, js/site-duyurusu.js) ──────────────────────────────
   <dialog> showModal: arkası karartılır (§6.10 pencere örtüsü + hafif bulanıklık), ortada beyaz kart.
   Simge + kısa başlık + mesaj + iki eylem (ana: ihaleye git, ikincil: Kapat); sağ üstte 44×44 X.
   Dar ekranda kart alttan gelen bir sayfa olur, düğmeler tam genişlik alt alta. */
.site-duyurusu {
    width: min(var(--pencere-genislik), calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: var(--pencere-kose);
    background: transparent;
    color: var(--renk-metin);
}

/* ::backdrop eski tarayıcılarda :root değişkenlerini devralmaz (karartı hiç çizilmezdi): renk açıkça yazılır.
   Site geneli duyuru dikkat istediği için ortak örtüden (--pencere-ortu) bir kademe koyu. */
.site-duyurusu::backdrop {
    background-color: rgba(27, 27, 25, .6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.site-duyurusu[open] {
    animation: site-duyurusu-gelis 220ms var(--egri);
}

.site-duyurusu[open]::backdrop {
    animation: site-duyurusu-ortu 220ms ease-out;
}

/* Pencere açıkken arkadaki sayfa kaymasın. */
html:has(.site-duyurusu[open]) {
    overflow: hidden;
}

.site-duyurusu-kart {
    position: relative;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: var(--b-8) var(--pencere-ic) var(--pencere-ic);
    border-top: 4px solid var(--renk-marka);
    border-radius: var(--pencere-kose);
    background-color: var(--pencere-yuzey);
    box-shadow: var(--pencere-golge);
    text-align: center;
}

.site-duyurusu-x {
    position: absolute;
    top: var(--b-2);
    right: var(--b-2);
    display: grid;
    place-items: center;
    width: var(--pencere-kapat-boyut);
    height: var(--pencere-kapat-boyut);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    cursor: pointer;
}

.site-duyurusu-x:hover {
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
}

.site-duyurusu-x:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: -2px;
}

.site-duyurusu-simge {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--b-3);
    border-radius: 50%;
    background-color: var(--renk-marka-acik);
    color: var(--renk-marka);
    font-size: 24px;
}

.site-duyurusu-ust {
    margin: 0 0 var(--b-1);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
    font-weight: var(--t-kalin);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-duyurusu-baslik {
    margin: 0 0 var(--b-3);
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
}

.site-duyurusu-metin {
    margin: 0 0 var(--b-6);
    color: var(--renk-metin);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.site-duyurusu-eylemler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--b-3);
}

.site-duyurusu-eylemler .otocars-btn {
    min-width: 160px;
}

@keyframes site-duyurusu-gelis {
    from { opacity: 0; transform: translateY(var(--b-3)) scale(.98); }
}

@keyframes site-duyurusu-ortu {
    from { opacity: 0; }
}

@media (max-width: 575.98px) {
    /* Telefon: alttan açılan sayfa; başparmak düğmelere kolay ulaşır. */
    .site-duyurusu {
        width: 100%;
        max-height: calc(100dvh - var(--b-6));
        margin: auto 0 0;
    }

    .site-duyurusu-kart {
        max-height: calc(100dvh - var(--b-6));
        padding: var(--b-6) var(--b-4) calc(var(--b-4) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--pencere-kose) var(--pencere-kose) 0 0;
    }

    .site-duyurusu-eylemler {
        flex-direction: column-reverse;
    }

    .site-duyurusu-eylemler .otocars-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-duyurusu[open],
    .site-duyurusu[open]::backdrop {
        animation: none;
    }
}
/* ── Araç simgeleri (yakıt, vites, kasa) ──────────────────────────────────
   Paketteki Bootstrap Icons sürümünde yakıt pompası / araç gövdesi yok. Kendi çizimlerimiz
   (images/ikonlar/*.svg) "bi" sınıfıyla birlikte kullanılır: <i class="bi oi-yakit">. Maske + currentColor
   sayesinde bulunduğu yerin .bi boyutu ve rengi aynen geçerlidir. */
.bi.oi-yakit::before,
.bi.oi-vites::before,
.bi.oi-kasa::before,
.bi.oi-motor::before,
.bi.oi-tokmak::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--oi) center / contain no-repeat;
    mask: var(--oi) center / contain no-repeat;
}

.bi.oi-yakit { --oi: url("../images/ikonlar/yakit.svg"); }
.bi.oi-vites { --oi: url("../images/ikonlar/vites.svg"); }
.bi.oi-kasa  { --oi: url("../images/ikonlar/kasa.svg"); }
.bi.oi-motor { --oi: url("../images/ikonlar/motor.svg"); }
.bi.oi-tokmak { --oi: url("../images/ikonlar/tokmak.svg"); }   /* ihale tokmağı (Bootstrap'ta yalnız çekiç var) */

/* ── Boş durum (§6.9, §8.3) ───────────────────────────────────────────── */

.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--b-3);
    padding: var(--b-10) var(--b-6);
    text-align: center;
}

.bos-durum-simge {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-2xl);
    line-height: 1;
}

.bos-durum-baslik {
    margin: 0;
    color: var(--renk-metin);
    font-size: var(--t-lg);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-siki);
}

.bos-durum p {
    max-width: 48ch;
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

.bos-durum-eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--b-3);
    margin-top: var(--b-2);
}

/* ── Kart (§6.7) ──────────────────────────────────────────────────────── */

.otocars-kart {
    padding: var(--kart-ic);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
}

/* Tıklanabilir kart: yalnız gölge + kenar (kalkma/yakınlaştırma yok). */
a.otocars-kart,
.otocars-kart-tiklanir {
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--sure-orta) ease, border-color var(--sure-orta) ease;
}

a.otocars-kart:hover,
.otocars-kart-tiklanir:hover,
.otocars-kart-tiklanir:focus-within {
    border-color: var(--renk-kenar-guclu);
    box-shadow: var(--golge-2);
    color: inherit;
}

/* ── Bölüm başlığı (§6.3) ─────────────────────────────────────────────── */

.bolum-baslik {
    display: flex;
    flex-direction: column;
    gap: var(--b-2);
    margin-bottom: var(--b-8);
}

.bolum-baslik .bolum-ust {
    margin: 0;
    color: var(--renk-metin-soluk);
    font-size: var(--t-xs);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bolum-baslik h2 {
    margin: 0;
    color: var(--renk-metin);
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.bolum-baslik .bolum-aciklama {
    max-width: 60ch;
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

.bolum-baslik-orta {
    align-items: center;
    text-align: center;
}

@media (max-width: 767.98px) {
    .bolum-baslik {
        margin-bottom: var(--b-6);
    }

    .bolum-baslik h2 {
        font-size: var(--t-xl);
    }
}

/* ── Tablo (§6.11) ────────────────────────────────────────────────────── */

.tablo-kabi {
    max-width: 100%;
    overflow-x: auto;
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey);
    -webkit-overflow-scrolling: touch;
}

.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.tablo th,
.tablo td {
    height: 48px;
    padding: var(--b-2) var(--b-4);
    border-bottom: var(--kenar);
    text-align: left;
    vertical-align: middle;
}

.tablo th {
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin-ikincil);
    font-weight: var(--t-orta);
    white-space: nowrap;
}

.tablo tbody tr:last-child > td {
    border-bottom: 0;
}

.tablo .sayisal {
    text-align: right;
}

/* ── Sekmeler (§6.14) ─────────────────────────────────────────────────── */

/*
 * İki tür: .sekmeler-bolmeli (2–3 seçenek, form içi) ve .sekmeler-cizgili (sayfa bölümleri).
 * İşaretleme: <div class="sekmeler sekmeler-cizgili" role="tablist"> <button class="sekme"
 * role="tab" aria-selected="true">…</button>… — etkin: [aria-selected="true"] ya da .aktif.
 * Taşan liste yatay kayar (bulgu 17).
 */
.sekmeler {
    display: flex;
    gap: var(--b-1);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.sekmeler::-webkit-scrollbar {
    display: none;
}

.sekme {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--b-2);
    min-height: 44px;
    padding: 0 var(--b-4);
    border: 0;
    background: none;
    color: var(--renk-metin-ikincil);
    font-family: var(--t-aile);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--sure-hizli), background-color var(--sure-hizli), box-shadow var(--sure-hizli);
}

.sekme:hover {
    color: var(--renk-metin);
}

.sekmeler-bolmeli {
    padding: var(--b-1);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-vurgu);
}

.sekmeler-bolmeli .sekme {
    flex: 1 0 auto;
    min-height: 44px;
    border-radius: var(--r-kucuk);
}

.sekmeler-bolmeli .sekme[aria-selected="true"],
.sekmeler-bolmeli .sekme.aktif {
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    box-shadow: var(--golge-1);
}

.sekmeler-cizgili {
    gap: var(--b-2);
    border-bottom: var(--kenar);
}

.sekmeler-cizgili .sekme {
    padding: 0 var(--b-2);
    box-shadow: inset 0 -2px 0 transparent;
}

.sekmeler-cizgili .sekme[aria-selected="true"],
.sekmeler-cizgili .sekme.aktif,
.sekmeler-cizgili .sekme[aria-current="page"] {
    color: var(--renk-metin);
    box-shadow: inset 0 -2px 0 var(--renk-marka);
}

@media (max-width: 767.98px) {
    .sekmeler-cizgili {
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
}

/* ── Sayfalama (§6.12) ────────────────────────────────────────────────── */

/*
 * <nav class="sayfalama" aria-label="Sayfalar"><ul> <li><a class="sayfalama-oge sayfalama-onceki">…
 * sayılar .sayfalama-oge (etkin: aria-current="page"), mobilde .sayfalama-durum ("Sayfa 2 / 7")
 * görünür, sayılar gizlenir.
 */
.sayfalama ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--b-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sayfalama-oge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--b-3);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color var(--sure-hizli), background-color var(--sure-hizli);
}

a.sayfalama-oge:hover {
    border-color: var(--gri-900);
    color: var(--renk-metin);
}

.sayfalama-oge[aria-current="page"] {
    border-color: var(--gri-900);
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.sayfalama-oge[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

.sayfalama-durum {
    display: none;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .sayfalama-oge {
        min-width: 44px;
        min-height: 44px;
    }

    .sayfalama li:has(> .sayfalama-sayi) {
        display: none;
    }

    .sayfalama-durum {
        display: block;
        padding: 0 var(--b-2);
    }
}

/* ── Pencere (modal) — Bootstrap .modal'ın mobil kenar boşluğu ────────── */

/* Yeniden üretilen tema.css ≤576'da .modal-dialog'a margin:0 veriyor; pencere kenara yapışmasın
   (alttan açılan çekmece görünümü P-Yonetim / P-Canli'de token'larla kurulur). */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: var(--b-2);
    }
}