/*
 * Araç talebi çekmecesi (_AracTalebiCekmece, js/arac-talebi.js): sağ kenardaki "Araç talebinde bulun" sekmesiyle
 * sağdan açılan beyaz panel. Görünüm §6.10 pencere token'larıdır (yüzey, gölge, iç boşluk, 44×44 kapat, örtü);
 * masaüstünde 440px, dar ekranda tam genişlik. _Layout yalnız _SagIletisim çizilen sayfalarda bağlar.
 * Form alanlarının tabanı css/bilesenler/form.css + ozel-secim.css'tir (sayfada yoksa çekmece ilk açılışta ekler).
 */

.talep-cekmece {
    position: fixed;
    inset: 0;
    z-index: var(--z-cekmece);
}

.talep-cekmece[hidden] {
    display: none;
}

.talep-cekmece-ortu {
    position: absolute;
    inset: 0;
    background-color: var(--pencere-ortu);
    opacity: 0;
    transition: opacity var(--sure-orta) var(--egri);
}

.talep-cekmece-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(480px, 100%);
    background-color: var(--pencere-yuzey);
    box-shadow: var(--pencere-golge);
    color: var(--renk-metin);
    transform: translateX(100%);
    transition: transform var(--sure-orta) var(--egri);
}

.talep-cekmece-panel:focus {
    outline: none;
}

.talep-cekmece.acik .talep-cekmece-ortu {
    opacity: 1;
}

.talep-cekmece.acik .talep-cekmece-panel {
    transform: none;
}

/* Arka sayfa kaymasın; kaydırma çubuğunun yeri korunur (içerik yana sıçramaz). */
html.talep-cekmece-kilit {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* ── Başlık satırı: sade — büyük, ince başlık; bant ve rozet yok ───────── */

.talep-cekmece-ust {
    display: flex;
    flex: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--b-3);
    padding: var(--b-8) var(--b-6) 0 var(--b-8);
}

.talep-cekmece-ust h2 {
    margin: 0;
    font-family: var(--t-aile-baslik);
    font-size: var(--t-2xl);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.talep-cekmece-kapat {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--pencere-kapat-boyut);
    height: var(--pencere-kapat-boyut);
    margin: calc(-1 * var(--b-2)) calc(-1 * var(--b-2)) 0 0;
    border: 0;
    border-radius: var(--r-tam);
    background: none;
    color: var(--renk-metin);
    font-size: var(--t-xl);
    transition: background-color var(--sure-hizli);
}

.talep-cekmece-kapat:hover {
    background-color: var(--renk-yuzey-vurgu);
}

/* ── Gövde ──────────────────────────────────────────────────────────────── */

.talep-cekmece-govde {
    flex: 1;
    min-height: 0;
    padding: var(--b-4) var(--b-8) var(--b-8);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * Alanlar: yalnız alt çizgi (kutu, gölge, simge yok), geniş dikey aralık, tek sütun. Odakta alt çizgi
 * marka rengine döner ve kalınlaşır (2px — çerçeve yerine iç gölgeyle, satır yüksekliği oynamaz).
 */
.talep-cekmece .form-izgara {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-8);
}

.talep-cekmece .form-izgara + .form-alan {
    margin-top: var(--b-8);
}

.talep-cekmece .form-label {
    margin-bottom: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-normal);
}

.talep-cekmece .form-control,
.talep-cekmece .ozel-secim-dugme {
    min-height: 48px;
    padding: var(--b-2) 0;
    border: 0;
    border-bottom: 1px solid var(--renk-kenar-guclu);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.talep-cekmece .form-control:focus,
.talep-cekmece .ozel-secim-dugme:focus-visible,
.talep-cekmece .ozel-secim.acik .ozel-secim-dugme {
    border-bottom-color: var(--renk-marka);
    box-shadow: inset 0 -1px 0 var(--renk-marka);
    outline: none;
}

.talep-cekmece .ozel-secim-dugme:disabled {
    border-bottom-style: dashed;
    background-color: transparent;
}

.talep-cekmece .ozel-secim-dugme > .ozel-secim-metin:first-child {
    padding-left: 0;
}

/* Sade görünümde simge kutuları gösterilmez (Hesabım sayfasındaki formda kalır). */
.talep-cekmece .ozel-secim-ikon {
    display: none;
}

.talep-cekmece .ozel-secim-metin strong {
    font-size: var(--t-md);
}

.talep-cekmece .ozel-secim.hatali .ozel-secim-dugme,
.talep-cekmece .form-control.input-validation-error {
    border-bottom-color: var(--renk-hata);
}

.talep-cekmece textarea.form-control {
    min-height: 72px;
    resize: vertical;
}

/* Bilgi satırı (form içinde, gönder düğmesinin üstünde). Hesabım'da kutulu; çekmecede sade metin. */
.talep-bilgi {
    display: flex;
    align-items: flex-start;
    gap: var(--b-2);
    margin: var(--b-4) 0 0;
    padding: var(--b-3);
    border-radius: var(--r-orta);
    background-color: var(--renk-marka-acik);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.talep-bilgi .bi {
    flex: none;
    margin-top: 2px;
    color: var(--renk-marka);
}

.talep-cekmece .talep-bilgi {
    margin-top: var(--b-6);
    padding: 0;
    background: none;
    color: var(--renk-metin-ikincil);
}

/* Gönder: içeriği kadar geniş, sola yaslı, ok simgeli. */
.talep-cekmece .form-eylemler {
    margin-top: var(--b-8);
    justify-content: flex-start;
}

.talep-cekmece .form-eylemler > .otocars-btn {
    min-height: 52px;
    padding-left: var(--b-8);
    padding-right: var(--b-8);
}

@media (max-width: 479.98px) {
    .talep-cekmece-ust { padding: var(--b-6) var(--b-4) 0 var(--b-5); }
    .talep-cekmece-govde { padding: var(--b-4) var(--b-5) var(--b-6); }
    .talep-cekmece .form-eylemler > .otocars-btn { width: 100%; }
}

.talep-cekmece .hesabim-hata {
    margin: var(--b-3) 0 0;
}

.talep-cekmece-durum {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
}

.talep-cekmece-durum + .otocars-btn {
    margin-top: var(--b-4);
}

/* ── Eylemler (ziyaretçi, başarı) ───────────────────────────────────────── */

.talep-cekmece-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-3);
    margin-top: var(--b-6);
}

.talep-cekmece-eylemler > .otocars-btn {
    flex: 1 1 0;
    min-width: 0;
}

.talep-cekmece-ziyaretci {
    margin-top: 0;
}

/* ── Başarı durumu ──────────────────────────────────────────────────────── */

.talep-cekmece-sonuc {
    padding: var(--b-4) 0;
    text-align: center;
}

.talep-cekmece-sonuc:focus {
    outline: none;
}

.talep-cekmece-sonuc-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--b-16);
    height: var(--b-16);
    margin-bottom: var(--b-4);
    border-radius: var(--r-tam);
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
    font-size: var(--t-3xl);
}

.talep-cekmece-sonuc p {
    margin: 0;
    color: var(--renk-metin);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

@media (prefers-reduced-motion: reduce) {
    .talep-cekmece-ortu,
    .talep-cekmece-panel {
        transition: none;
    }
}