/* Ege Zirve Yatağan — kırmızı tema, okunaklı ve klavye ile kolay kullanılır arayüz.
   Tüm metin/arka plan çiftleri WCAG AA (4.5:1) ve üstü kontrast sağlar. */

:root {
    --kirmizi: #B91C1C;          /* beyaz üzerinde 6.5:1 */
    --kirmizi-koyu: #7F1D1D;     /* üst menü */
    --kirmizi-hover: #991B1B;
    --kirmizi-acik: #FEF2F2;
    --kirmizi-cizgi: #FECACA;
    --metin: #111827;
    --metin-ikincil: #4B5563;    /* beyaz üzerinde 7.6:1 */
    --zemin: #F5F5F4;
    --kart: #FFFFFF;
    --cizgi: #D6D3D1;
    --cizgi-koyu: #78716C;       /* form alanı kenarı, 3:1 üstü */
    --yesil: #166534;
    --yesil-acik: #F0FDF4;
    --amber: #92400E;
    --amber-acik: #FFFBEB;
    --hata: #9F1239;
    --hata-acik: #FFF1F2;
    --odak: #FFDD00;
    --radius: 10px;
    --golge: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } /* 18px taban */

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    line-height: 1.5;
    color: var(--metin);
    background: var(--zemin);
}

a { color: var(--kirmizi); text-underline-offset: 3px; }
a:hover { color: var(--kirmizi-koyu); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }

/* ---------- Odak göstergesi: her zaman net görünür ---------- */
:focus-visible {
    outline: 3px solid transparent;
    background-color: var(--odak);
    box-shadow: 0 -2px var(--odak), 0 4px #0B0C0C;
    color: #0B0C0C;
    text-decoration: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .dugme:focus-visible, summary:focus-visible {
    outline: 3px solid var(--odak);
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px #0B0C0C;
    background-color: #fff;
}
.dugme:focus-visible, button:focus-visible { background-color: var(--odak); color: #0B0C0C; border-color: #0B0C0C; }
main:focus { outline: none; }

.gorunmez {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
    position: absolute; left: -999px; top: 0; z-index: 100;
    padding: .75rem 1rem; background: var(--odak); color: #0B0C0C; font-weight: 700;
}
.atla:focus { left: 1rem; }

/* ---------- Üst menü ---------- */
.ust { background: var(--kirmizi-koyu); color: #fff; border-bottom: 4px solid var(--kirmizi); }
.ust-ic {
    max-width: 1200px; margin: 0 auto; padding: .6rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
}
.logo { color: #fff; text-decoration: none; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.logo:hover { color: #fff; }
.logo strong { color: #FECACA; }
.logo-isaret {
    display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 8px;
    background: var(--kirmizi); color: #fff; font-weight: 800; font-size: .85rem; border: 2px solid #fff;
}
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.menu a {
    display: block; padding: .5rem .8rem; border-radius: 8px;
    color: #fff; text-decoration: none; font-weight: 600;
}
.menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.menu a[aria-current="page"] { background: #fff; color: var(--kirmizi-koyu); }
.kullanici { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.kullanici form { margin: 0; }

/* ---------- Sayfa düzeni ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.kart {
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius);
    box-shadow: var(--golge); padding: 1.5rem; margin-bottom: 1.25rem;
}

.sayfa-baslik { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ust-baslik { margin: 0 0 .25rem; color: var(--kirmizi); font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.alt-baslik { margin: 0; color: var(--metin-ikincil); }
.dugme-grubu { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Düğmeler ---------- */
.dugme, button {
    font: inherit; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 48px; padding: .55rem 1.1rem; border-radius: 8px;
    border: 2px solid transparent; text-decoration: none; line-height: 1.2;
}
.dugme-birincil { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.dugme-birincil:hover { background: var(--kirmizi-hover); border-color: var(--kirmizi-hover); color: #fff; }
.dugme-ikincil { background: #fff; color: var(--kirmizi); border-color: var(--kirmizi); }
.dugme-ikincil:hover { background: var(--kirmizi-acik); color: var(--kirmizi-koyu); }
.dugme-tehlike { background: #fff; color: var(--hata); border-color: var(--hata); }
.dugme-tehlike:hover { background: var(--hata); color: #fff; }
.dugme-ust { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); min-height: 40px; }
.dugme-ust:hover { background: #fff; color: var(--kirmizi-koyu); }
.dugme-kucuk { min-height: 40px; padding: .35rem .8rem; font-size: .9rem; background: #fff; color: var(--kirmizi); border-color: var(--kirmizi); }
.dugme-kucuk:hover { background: var(--kirmizi-acik); }
.dugme-buyuk { min-height: 56px; padding: .75rem 2rem; font-size: 1.1rem; }
.dugme-genis { width: 100%; }

/* ---------- Bildirimler ---------- */
.bildirim { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem; border-left: 6px solid; font-weight: 600; }
.bildirim-basari { background: var(--yesil-acik); border-color: var(--yesil); color: var(--yesil); }
.bildirim-basari::before { content: "✓ "; }
.bildirim-hata { background: var(--hata-acik); border-color: var(--hata); color: var(--hata); }
.bildirim-hata::before { content: "⚠ "; }

.not-kutusu {
    background: var(--amber-acik); border-left: 6px solid #D97706; color: var(--amber);
    padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.5rem; font-weight: 600;
}
.uyari-satir { color: var(--amber); font-weight: 600; margin: .75rem 0 0; }

.hata-ozeti {
    border: 4px solid var(--hata); background: #fff; border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.hata-ozeti h2 { color: var(--hata); font-size: 1.15rem; }
.hata-ozeti h2::before { content: "⚠ "; }
.hata-ozeti ul { margin: 0; padding-left: 1.2rem; }
.hata-ozeti a { color: var(--hata); font-weight: 700; }

/* ---------- Form ---------- */
.bolum { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.25rem; min-width: 0; }
.bolum legend, .bolum-acilir summary { font-weight: 800; font-size: 1.1rem; padding: 0 .4rem; color: var(--kirmizi-koyu); }
.bolum-acilir summary { cursor: pointer; padding: .25rem .4rem; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.bolum-acilir summary::marker { color: var(--kirmizi); }
.bolum-acilir[open] summary { margin-bottom: .75rem; }

.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; align-items: start; }

.alan { margin-bottom: 1.1rem; }
.alan label, .sofor-ara > label { display: block; font-weight: 700; margin-bottom: .3rem; }
.zorunlu { color: var(--kirmizi); font-weight: 600; font-size: .85rem; }
.istege-bagli { color: var(--metin-ikincil); font-weight: 400; font-size: .85rem; }
.ipucu { margin: 0 0 .4rem; color: var(--metin-ikincil); font-size: .88rem; }

/* Tüm alanlar aynı genişlik ve yükseklikte. iPhone'un tarih/saat ve seçim kutularına
   uyguladığı kendi görünüm kapatılır; aksi halde bu kutular kısa ve farklı boyda kalır. */
input[type=text], input[type=search], input[type=tel], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
    font: inherit; font-size: max(1rem, 16px); /* 16px altı iPhone'da sayfayı yakınlaştırır */
    display: block; width: 100%; min-width: 0; max-width: 100%; height: 52px; padding: 0 .85rem;
    border: 2px solid var(--cizgi-koyu); border-radius: 8px; background-color: #fff; color: var(--metin);
    -webkit-appearance: none; appearance: none; line-height: normal;
}
textarea { height: auto; padding: .65rem .85rem; }
input[type=date], input[type=time] { text-align: left; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
select {
    padding-right: 2.6rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111827' stroke-width='2.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
}
[data-buyuk] { text-transform: uppercase; }
textarea { min-height: 90px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--metin); }

.alan-hatali { border-left: 5px solid var(--hata); padding-left: .9rem; }
.alan-hatali input, .alan-hatali select, .alan-hatali textarea { border-color: var(--hata); }
.hata-mesaji { color: var(--hata); font-weight: 700; margin: 0 0 .4rem; }
.hata-mesaji::before { content: "⚠ "; }

.plaka-girdi { text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }

.form-alt { display: flex; justify-content: flex-end; padding-top: .5rem; border-top: 1px solid var(--cizgi); margin-top: .5rem; padding-top: 1.25rem; }

/* Şoför arama */
.sofor-ara { position: relative; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--cizgi); }
.sofor-ara-satir { display: flex; gap: .5rem; flex-wrap: wrap; }
.sofor-ara-satir input { flex: 1 1 260px; }
#sofor_liste {
    position: absolute; left: 0; right: 0; z-index: 20; list-style: none; margin: .25rem 0 0; padding: .25rem;
    background: #fff; border: 2px solid var(--metin); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
    max-height: 340px; overflow-y: auto;
}
#sofor_liste li { padding: .6rem .75rem; border-radius: 6px; cursor: pointer; }
#sofor_liste li small { display: block; color: var(--metin-ikincil); }
#sofor_liste li[aria-selected="true"], #sofor_liste li:hover { background: var(--kirmizi); color: #fff; }
#sofor_liste li[aria-selected="true"] small, #sofor_liste li:hover small { color: #fff; }
#sofor_liste li.bos-sonuc { cursor: default; color: var(--metin-ikincil); background: none; }

/* ---------- Tablo ---------- */
.tablo-kart { padding: 0; overflow: hidden; }
.tablo-kart > .tablo-ozet, .tablo-kart > .bos, .tablo-kart > .sayfalama { padding: 1rem 1.25rem; margin: 0; }
.tablo-ozet { color: var(--metin-ikincil); font-weight: 600; border-bottom: 1px solid var(--cizgi); }
.tablo-sarmal { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tablo th {
    text-align: left; background: var(--kirmizi-acik); color: var(--kirmizi-koyu);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: .75rem 1rem;
    border-bottom: 2px solid var(--kirmizi-cizgi); white-space: nowrap;
}
.tablo td { padding: .65rem 1rem; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr:nth-child(even) { background: #FAFAF9; }
.tablo tbody tr:hover { background: var(--kirmizi-acik); }
.tablo td.plaka { font-weight: 800; white-space: nowrap; letter-spacing: .03em; }
.kart .tablo-sarmal { margin: 0 -1.5rem -1.5rem; }
.kart.tablo-kart .tablo-sarmal { margin: 0; }
.bos { color: var(--metin-ikincil); text-align: center; padding: 2rem 1rem; }

.rozet { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 800; border: 2px solid; white-space: nowrap; vertical-align: middle; }
.rozet-gecerli { color: var(--yesil); background: var(--yesil-acik); border-color: var(--yesil); }
.rozet-gecerli::before { content: "✓ "; }
.rozet-iptal { color: var(--hata); background: var(--hata-acik); border-color: var(--hata); }
.rozet-iptal::before { content: "✕ "; }
.rozet-pasif { color: var(--metin-ikincil); background: #F5F5F4; border-color: var(--cizgi-koyu); }

.sayfalama { display: flex; align-items: center; justify-content: center; gap: 1rem; }

.filtre .izgara { align-items: end; }
.filtre-dugmeler { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

.satir-form { display: flex; gap: .4rem; margin: 0; align-items: center; }
.parola-form input { height: 40px; max-width: 170px; padding: .3rem .5rem; font-size: .9rem; }
.satir-ekle { margin-bottom: 1rem; }

/* ---------- Rapor özeti ---------- */
.ozet-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.ozet-kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1rem; box-shadow: var(--golge); }
.ozet-kutu dt { color: var(--metin-ikincil); font-weight: 600; font-size: .88rem; }
.ozet-kutu dd { margin: .2rem 0 0; font-size: 1.8rem; font-weight: 800; }
.ozet-ana { background: var(--kirmizi); border-color: var(--kirmizi); }
.ozet-ana dt, .ozet-ana dd { color: #fff; }

/* ---------- Giriş ---------- */
.giris-kutu { max-width: 460px; margin: 2rem auto; }

/* ---------- Fiş görünümü ---------- */
.islem-cubugu { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.islem-ipucu { flex-basis: 100%; margin: .25rem 0 0; }

/* Talep formu: ekranda baskı önizlemesi, kağıtta A4'e iki kopya.
   Ölçüler mm/pt cinsinden, böylece ekran ve çıktı aynı görünür. */
.talep-sayfa {
    max-width: 210mm; margin: 0 auto 1.25rem; padding: 8mm; background: #fff;
    border: 1px solid var(--cizgi); box-shadow: var(--golge);
    display: grid; gap: 8mm;
}
.talep-formu {
    position: relative; overflow: hidden; min-height: 130mm;
    border: 1px solid #333; padding: 7mm 10mm 8mm;
    font-family: Georgia, "Times New Roman", Times, serif; color: #000; line-height: 1.4;
}
.talep-baslik { text-align: center; font-weight: 400; font-size: 20pt; margin: 0 0 5mm; }
.talep-tarih { text-align: right; font-size: 13pt; margin: 0 0 7mm; }
.talep-metin { font-size: 13pt; line-height: 1.9; margin: 0 0 6mm; }
.talep-firma { color: #E30613; }
.talep-deger {
    display: inline-block; min-width: 50mm; padding: 0 1.5mm; vertical-align: bottom;
    border-bottom: 1px solid #000; min-height: 1.35em; letter-spacing: .03em;
    font-family: "DejaVu Sans", Verdana, "Segoe UI", Arial, sans-serif; font-size: 10.5pt;
}
.talep-tarih .talep-deger { min-width: 13mm; text-align: center; }
.talep-tarih .talep-yil { min-width: 18mm; }
.talep-govde { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; }
.talep-alanlar { margin: 0; font-size: 11.5pt; }
.talep-alanlar div { display: grid; grid-template-columns: 36mm auto; align-items: end; margin-bottom: 2.4mm; }
.talep-alanlar dd { margin: 0; white-space: nowrap; }
.talep-alanlar .talep-deger { min-width: 55mm; }
.talep-imza { margin: 0 0 2.4mm; font-size: 12.5pt; text-align: center; min-width: 52mm; }
.talep-ref { position: absolute; left: 10mm; bottom: 2.5mm; margin: 0; font: 7.5pt system-ui, Arial, sans-serif; color: #6B7280; }
.talep-iptal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
    font: 900 60pt system-ui, Arial, sans-serif; letter-spacing: .1em; pointer-events: none;
    color: rgba(159, 18, 57, .18); border: 3mm solid rgba(159, 18, 57, .18); border-radius: 4mm; padding: 0 8mm;
}

.kayit-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2rem; margin: 0; }
.kayit-bilgi div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cizgi); }
.kayit-bilgi dt { color: var(--metin-ikincil); font-weight: 600; }
.kayit-bilgi dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.sabit-bilgi { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.5rem; padding: .9rem 1.1rem; border-radius: 8px; background: var(--kirmizi-acik); border: 1px solid var(--kirmizi-cizgi); }
.sabit-bilgi dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kirmizi-koyu); }
.sabit-bilgi dd { margin: 0; font-weight: 800; }

.iptal-bolumu summary { font-weight: 800; color: var(--hata); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.iptal-bolumu[open] summary { margin-bottom: 1rem; }

/* Orta genişlik: menü ikinci satıra iner, kullanıcı alanı logonun yanında kalır */
@media (max-width: 1100px) {
    .ust-ic > nav { order: 3; width: 100%; }
    .kullanici { order: 2; }
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
    html { font-size: 106.25%; }
    main { padding: 1rem .75rem 2rem; }
    .kart { padding: 1.1rem; }
    .kart .tablo-sarmal { margin: 0 -1.1rem -1.1rem; }
    .kullanici span { display: none; }
    .menu { width: 100%; order: 3; }
    .menu a { padding: .45rem .6rem; font-size: .92rem; }
    .form-alt .dugme { width: 100%; }
    .izgara { grid-template-columns: 1fr; }
    .sofor-ara-satir { flex-direction: column; }
    .sofor-ara-satir input, .sofor-ara-satir .dugme { flex: none; width: 100%; }
    .bolum { padding: .9rem .9rem 1rem; }
    .talep-sayfa { padding: 3mm; gap: 4mm; }
    .talep-formu { min-height: 0; padding: 5mm 4mm 9mm; }
    .talep-baslik { font-size: 16pt; }
    .talep-tarih, .talep-metin { font-size: 11pt; }
    .talep-govde { flex-direction: column; align-items: stretch; gap: 4mm; }
    .talep-alanlar div { grid-template-columns: 28mm 1fr; }
    .talep-alanlar dd { white-space: normal; }
    .talep-alanlar .talep-deger { min-width: 0; width: calc(100% - 4mm); }
    .talep-imza { text-align: right; }
    .talep-iptal { font-size: 36pt; }
}

/* ---------- Yazdırma: A4 dikey, iki kopya talep formu ---------- */
@media print {
    @page { size: A4 portrait; margin: 8mm; }
    body { background: #fff; }
    .ust, .ekranda, .bildirim, .atla { display: none !important; }
    main { padding: 0; margin: 0; max-width: none; }
    .talep-sayfa { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; gap: 8mm; }
    .talep-formu { height: 136mm; min-height: 0; break-inside: avoid; }
    .talep-formu * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}