/* ===== Garaj Defteri panel · turkuaz tema =====
   Kural: çerçeve yok. Ayrım kenarlıkla değil, zemin tonu ve çok hafif gölgeyle.
   Köşeler yumuşak, gölgeler düşük. Tek yazı ailesi: Plus Jakarta Sans.
   Düzen de yeni: üst yatay menü yerine sol kenar menü; telefonda alt menü.

   NOT: Değişken adları (--mavi, --lacivert, --gri-*) eski temadan kalma;
   .cshtml içindeki satır içi stiller bu adları kullandığı için adlar korundu,
   karşılıkları yeni palete çevrildi. --mavi artık turkuazdır. */

:root {
    --lacivert: #0F2E2C;          /* derin turkuaz-mürekkep: kenar menü, başlık */
    --lacivert-acik: #16403C;
    --mavi: #0F766E;              /* ana eylem: turkuaz */
    --mavi-koyu: #0B5F59;
    --mavi-soft: #F0FDFA;
    --mavi-soft2: #CCFBF1;
    --turkuaz: #14B8A6;           /* parlak turkuaz: vurgu dolgusu */

    --yesil: #0F766E;             /* kâr / olumlu */
    --yesil-acik: #CCFBF1;
    --kirmizi: #BE123C;
    --kirmizi-acik: #FFE8EC;
    --turuncu: #B45309;
    --turuncu-acik: #FEF3E2;

    --gri-90: #0F2E2C;
    --gri-70: #35514F;
    --gri-50: #5F7A78;
    --gri-30: #B8CCCA;
    --gri-15: #DDEAE8;
    --gri-8: #EDF5F4;
    --gri-4: #F5FAF9;
    --beyaz: #fff;

    --golge: 0 1px 2px rgba(15,46,44,.04), 0 10px 24px -18px rgba(15,46,44,.30);
    --golge-orta: 0 2px 6px rgba(15,46,44,.05), 0 20px 40px -26px rgba(15,46,44,.40);

    --yuvarlak: 12px;
    --yuvarlak-buyuk: 18px;
    --yazi: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --yan-genislik: 244px;
    --alt-menu-h: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 15px;
    line-height: 1.55;
    color: var(--gri-70);
    background: var(--gri-4);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mavi); text-decoration: none; }
a:hover { color: var(--mavi-koyu); text-decoration: underline; }

h1, h2, h3 { color: var(--gri-90); letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: 26px; margin: 0 0 3px; line-height: 1.15; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }

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

/* ---------- Düzen: sol kenar menü + içerik ---------- */
.panel { display: grid; grid-template-columns: var(--yan-genislik) minmax(0, 1fr); min-height: 100vh; }

.yan {
    background: var(--lacivert);
    color: #C6DEDB;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 14px;
}
.yan .logo {
    display: flex; align-items: center; gap: 11px;
    color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.03em;
    padding: 4px 10px 20px;
}
.yan .logo:hover { text-decoration: none; color: #fff; }
.yan .logo-im {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--turkuaz); color: #06302C;
    display: grid; place-items: center; flex-shrink: 0;
}
.yan .logo-im svg { width: 19px; height: 19px; }

.yan-menu { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.yan-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: var(--yuvarlak);
    color: #A9C9C6;
    font-size: 14.5px;
    font-weight: 600;
}
.yan-menu a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .8; }
.yan-menu a:hover { background: var(--lacivert-acik); color: #fff; text-decoration: none; }
.yan-menu a.aktif { background: var(--mavi); color: #fff; }
.yan-menu a.aktif svg { opacity: 1; }
.yan-menu .ayrac { height: 1px; background: rgba(255,255,255,.08); margin: 10px 12px; }

/* ---------- Abonelik şeridi (menü dibi + telefonda üst bar) ---------- */
.abonelik-serit {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 8px; margin-top: 10px; padding: 8px 10px;
    border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,.08); color: #fff;
    border-left: 3px solid var(--mavi);
}
.abonelik-serit:hover { background: rgba(255,255,255,.16); text-decoration: none; color: #fff; }
.abonelik-serit .as-durum { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.abonelik-serit .as-alt   { grid-column: 1; font-size: 11.5px; color: #9DC3BF; line-height: 1.3; }
/* Eylem iki satırın sağında dikey ortalı durur — şerit iki satıra sığsın, menü kırpılmasın */
.abonelik-serit .as-eylem { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; font-weight: 600; color: #7FD8CF; }
/* Kısa etiketler yalnız telefonun üst şeridinde kullanılır */
.abonelik-serit .as-kisa, .abonelik-serit .as-kisa-alt { display: none; }
.abonelik-serit.deneme { border-left-color: var(--turkuaz); }
.abonelik-serit.azaldi { border-left-color: #F59E0B; }
.abonelik-serit.doldu  { border-left-color: var(--kirmizi); background: rgba(214,69,69,.20); }

.yan-dip { padding-top: 12px; }
.yan-dip .kullanici {
    display: block; font-size: 12.5px; color: #7FA9A5;
    padding: 0 12px 10px; overflow: hidden; text-overflow: ellipsis;
}
.yan-dip .dugme { width: 100%; background: rgba(255,255,255,.08); color: #fff; }
.yan-dip .dugme:hover { background: rgba(255,255,255,.16); color: #fff; }

.panel-ana { min-width: 0; display: flex; flex-direction: column; }

/* Üst şerit: masaüstünde ince, yalnız telefon için marka taşır */
.ust-bar { display: none; }

.icerik { max-width: 1240px; width: 100%; margin: 0 auto; padding: 26px 26px 64px; }

.sayfa-basligi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.sayfa-basligi p { margin: 4px 0 0; color: var(--gri-50); font-size: 14px; max-width: 72ch; }

/* ---------- Kart ---------- */
.kart {
    background: var(--beyaz);
    border-radius: var(--yuvarlak-buyuk);
    box-shadow: var(--golge);
    padding: 20px;
    margin-bottom: 16px;
}
.kart > h2:first-child, .kart > h3:first-child { margin-top: 0; }

.kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -20px -20px 16px;
    padding: 16px 20px;
    background: transparent;
    border-radius: var(--yuvarlak-buyuk) var(--yuvarlak-buyuk) 0 0;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--gri-90);
    letter-spacing: -.02em;
}

.izgara { display: grid; gap: 14px; }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------- Sayaç kutuları ----------
   Renk anlam taşır: turkuaz = iyi/bilgi, kehribar = ilgilenmen gereken. */
.sayac {
    background: var(--beyaz);
    border-radius: var(--yuvarlak-buyuk);
    padding: 18px 20px;
    box-shadow: var(--golge);
}
.sayac .etiket { font-size: 12.5px; color: var(--gri-50); font-weight: 600; }
.sayac .deger {
    font-size: 30px;
    font-weight: 800;
    margin-top: 4px;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--gri-90);
}
.sayac .alt { font-size: 12.5px; color: var(--gri-50); margin-top: 4px; }
.sayac.vurgu { background: linear-gradient(160deg, var(--mavi), var(--mavi-koyu)); }
.sayac.vurgu .etiket { color: #A7F3EA; }
.sayac.vurgu .deger { color: #fff; }
.sayac.vurgu .alt { color: #9DDDD4; }
.sayac.uyari { background: var(--turuncu-acik); }
.sayac.uyari .deger { color: var(--turuncu); }
.sayac.uyari .etiket, .sayac.uyari .alt { color: #8A5A12; }
.sayac.iyi { background: var(--mavi-soft2); }
.sayac.iyi .deger { color: var(--mavi-koyu); }
.sayac.iyi .etiket, .sayac.iyi .alt { color: #0B5F59; }

/* ---------- Tablo — çizgi yok, satır zemini var ---------- */
.tablo-sarmal { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table.tablo { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14.5px; }
table.tablo th {
    text-align: left;
    font-size: 12px;
    color: var(--gri-50);
    font-weight: 700;
    padding: 4px 14px 8px;
    white-space: nowrap;
}
table.tablo td { padding: 13px 14px; vertical-align: middle; background: var(--gri-4); }
table.tablo tbody tr td:first-child { border-radius: var(--yuvarlak) 0 0 var(--yuvarlak); }
table.tablo tbody tr td:last-child { border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0; }
table.tablo tbody tr:hover td { background: var(--mavi-soft2); }
table.tablo .sag { text-align: right; }
/* Para ve sayı alanları: sağa yaslı, rakamlar aynı genişlikte */
table.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tablo tfoot td { background: var(--mavi-soft2); font-weight: 800; color: var(--gri-90); }

.bos-liste {
    text-align: center;
    color: var(--gri-50);
    padding: 40px 20px;
    border-radius: var(--yuvarlak-buyuk);
    background: var(--gri-4);
    margin: 4px 0;
    font-size: 14.5px;
}
.bos-liste strong { display: block; color: var(--gri-90); font-size: 17px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.02em; }
.bos-liste a { font-weight: 700; }

/* ---------- Plaka ---------- */
.plaka {
    display: inline-block;
    background: var(--gri-8);
    border-radius: 8px;
    padding: 4px 11px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--gri-90);
    font-variant-numeric: tabular-nums;
}
.plaka:hover { text-decoration: none; background: var(--mavi-soft2); color: var(--mavi-koyu); }
.plaka.buyuk { font-size: 21px; padding: 6px 15px; border-radius: 11px; }

/* ---------- Rozet ---------- */
.rozet {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--gri-8);
    color: var(--gri-50);
}
.rozet.mavi { background: var(--mavi-soft2); color: var(--mavi-koyu); }
.rozet.yesil { background: var(--yesil-acik); color: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.turuncu { background: var(--turuncu-acik); color: var(--turuncu); }
.rozet.gri { background: var(--gri-8); color: var(--gri-50); }

/* İş emri durumu — her yerde aynı dil: önünde nokta */
.rozet.durum { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 10px; }
.rozet.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Parça kaynağı — üç kaynağın rengi her yerde aynı */
.kaynak-stok { background: var(--mavi-soft2); color: var(--mavi-koyu); }
.kaynak-disalim { background: var(--turuncu-acik); color: var(--turuncu); }
.kaynak-musteri { background: var(--gri-8); color: var(--gri-50); }

/* ---------- Form — kenarlık yok, dolgulu alan ---------- */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 13.5px; font-weight: 700; color: var(--gri-70); margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=tel], input[type=search],
select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: var(--yuvarlak);
    font-size: 15px;
    font-family: inherit;
    background: var(--gri-8);
    color: var(--gri-90);
    min-height: 46px;
}
input::placeholder, textarea::placeholder { color: #8AA3A1; }
input:focus, select:focus, textarea:focus {
    outline: none;
    background: var(--beyaz);
    box-shadow: 0 0 0 3px var(--mavi-soft2), var(--golge);
}
textarea { min-height: 84px; resize: vertical; }

.onay { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-height: 36px; }
.onay input { width: 18px; height: 18px; min-height: 0; accent-color: var(--mavi); }

.form-satir { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.alan-grup { border-radius: var(--yuvarlak-buyuk); padding: 16px; margin-bottom: 14px; background: var(--gri-4); }
.alan-grup > .grup-baslik { font-size: 13px; font-weight: 800; color: var(--gri-50); margin-bottom: 12px; }

.dogrulama { color: var(--kirmizi); font-size: 13px; margin-top: 5px; display: block; }

/* ---------- Düğme ---------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: var(--gri-8);
    color: var(--gri-90);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, transform .12s, box-shadow .14s;
}
.dugme:hover { background: var(--gri-15); text-decoration: none; color: var(--gri-90); }
.dugme.birincil { background: var(--mavi); color: var(--beyaz); box-shadow: 0 8px 20px -10px rgba(15,118,110,.8); }
.dugme.birincil:hover { background: var(--mavi-koyu); color: var(--beyaz); transform: translateY(-1px); }
.dugme.yesil { background: var(--yesil); color: var(--beyaz); box-shadow: 0 8px 20px -10px rgba(15,118,110,.8); }
.dugme.yesil:hover { background: var(--mavi-koyu); color: var(--beyaz); transform: translateY(-1px); }
.dugme.tehlike { background: var(--kirmizi-acik); color: var(--kirmizi); }
.dugme.tehlike:hover { background: #FFD6DD; color: var(--kirmizi); }
.dugme.kucuk { min-height: 34px; padding: 6px 13px; font-size: 13.5px; }
.dugme:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.dugme-grup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Uyarı şeridi ---------- */
.uyari { padding: 14px 18px; border-radius: var(--yuvarlak-buyuk); margin-bottom: 16px; font-size: 14.5px; border: none; }
.uyari.bilgi { background: var(--mavi-soft2); color: var(--mavi-koyu); }
.uyari.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.uyari.dikkat { background: var(--turuncu-acik); color: var(--turuncu); }

/* Süresi dolmuş abonelikte panel okunur kalır, yazma kapanır */
.salt-okunur-serit {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    background: var(--turuncu-acik); color: var(--turuncu);
    font-size: 14px; font-weight: 700; padding: 11px 18px;
}
.salt-okunur-serit a { color: var(--turuncu); text-decoration: underline; }
.salt-okunur .dugme.birincil, .salt-okunur .dugme.yesil { opacity: .4; pointer-events: none; box-shadow: none; }

/* ---------- Arama kutusu ---------- */
.arama { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.arama input[type=search], .arama input[type=text] { flex: 1; min-width: 200px; }
.arama select { width: auto; min-width: 140px; }

/* ---------- Durum şeridi (süzgeç) ---------- */
.durum-serit { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.durum-serit a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 8px 16px;
    border-radius: 999px; border: none;
    background: var(--beyaz);
    font-size: 14px; color: var(--gri-70); font-weight: 600;
    box-shadow: var(--golge);
}
.durum-serit a:hover { background: var(--mavi-soft2); color: var(--mavi-koyu); text-decoration: none; }
.durum-serit a.aktif { background: var(--mavi); color: var(--beyaz); }
.durum-serit a .adet { opacity: .7; font-weight: 500; }

/* ---------- İş emri ilerleme çubuğu ---------- */
.akis { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.akis form { display: contents; }
.akis .adim {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 42px; padding: 8px 15px;
    border-radius: 999px; border: none;
    background: var(--gri-8);
    color: var(--gri-50);
    font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
.akis .adim:hover { background: var(--mavi-soft2); color: var(--mavi-koyu); }
.akis .adim.simdi { background: var(--mavi); color: var(--beyaz); box-shadow: 0 8px 20px -10px rgba(15,118,110,.8); }
.akis .adim.gecildi { background: var(--mavi-soft2); color: var(--mavi-koyu); }
.akis .ayrac { flex: 1 1 10px; min-width: 8px; height: 2px; background: var(--gri-15); border-radius: 2px; }

/* ---------- Tanım listesi ---------- */
dl.bilgi-listesi { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14.5px; }
dl.bilgi-listesi dt { color: var(--gri-50); font-weight: 600; }
dl.bilgi-listesi dd { margin: 0; font-weight: 600; color: var(--gri-90); }

/* ---------- Toplam kutusu ---------- */
.toplamlar { font-size: 14.5px; }
.toplamlar .satir { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.toplamlar .satir .deger { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.toplamlar .satir.genel {
    margin-top: 10px; padding-top: 14px;
    font-size: 20px; font-weight: 800; color: var(--gri-90); letter-spacing: -.03em;
    box-shadow: inset 0 1px 0 var(--gri-15);
}
.toplamlar .satir.kar { color: var(--yesil); font-weight: 800; }

/* Hesap kartı — sağ sütunda ayrışsın */
.kart.hesap { background: linear-gradient(170deg, var(--mavi-soft), var(--mavi-soft2)); }
.kart.hesap .kart-baslik { color: var(--mavi-koyu); }
.kart.hesap .toplamlar .satir.genel { box-shadow: inset 0 1px 0 rgba(15,118,110,.22); }

/* ---------- Fotoğraf ---------- */
.foto-serit { display: flex; gap: 10px; flex-wrap: wrap; }
.foto-serit img { width: 126px; height: 94px; object-fit: cover; border-radius: var(--yuvarlak); border: none; box-shadow: var(--golge); }

/* ---------- Giriş sayfası ---------- */
.giris-sayfa {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(800px 420px at 50% 0%, #16544E 0%, var(--lacivert) 70%);
}
.giris-kutu { width: 100%; max-width: 390px; background: var(--beyaz); border-radius: 24px; padding: 32px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.giris-kutu h1 { text-align: center; margin-bottom: 22px; }
/* Kayıt ekranında başlığın altındaki tek satırlık vaat */
.giris-kutu h1 + .giris-alt { margin: -14px 0 20px; text-align: center; font-size: 13.5px; color: var(--gri-50); }
/* Bot tuzağı alanı: ekranda yok ama display:none DEĞİL — bazı botlar gizli alanı atlar */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Müşteri takip sayfası ---------- */
.takip-sayfa { max-width: 640px; margin: 0 auto; padding: 22px 16px 60px; }
.takip-adimlar { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.takip-adimlar li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; color: var(--gri-50); }
.takip-adimlar .nokta {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gri-15); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--gri-50);
}
.takip-adimlar li.tamam { color: var(--gri-90); }
.takip-adimlar li.tamam .nokta { background: var(--yesil); color: var(--beyaz); }
.takip-adimlar li.simdi { color: var(--mavi); font-weight: 700; }
.takip-adimlar li.simdi .nokta { background: var(--mavi-soft2); color: var(--mavi-koyu); }

/* ---------- Yazdırma ---------- */
@media print {
    .yan, .alt-menu, .ust-bar, .dugme, .dugme-grup, .arama, .durum-serit, .akis,
    .eylem-cubugu, .yazdirma-gizle, .salt-okunur-serit { display: none !important; }
    .panel { display: block; }
    body { background: #fff; font-size: 11.5pt; color: #000; }
    .kart { box-shadow: none; border: 1px solid #999; border-radius: 0; page-break-inside: avoid; margin-bottom: 10pt; padding: 10pt; }
    .kart-baslik { margin: -10pt -10pt 8pt; padding: 6pt 10pt; border-bottom: 1px solid #000; border-radius: 0; }
    .icerik { max-width: none; padding: 0; }
    table.tablo { border-spacing: 0; font-size: 10.5pt; }
    table.tablo th { color: #000; border-bottom: 1px solid #000; }
    table.tablo td { background: transparent !important; border-bottom: 1px solid #ddd; padding: 5pt 4pt; }
    .rozet, .plaka { background: transparent !important; color: #000 !important; border: 1px solid #999; }
    a { color: #000; text-decoration: none; }
    .kart.hesap { background: transparent; }
    .toplamlar .satir.genel { box-shadow: none; border-top: 1.5pt solid #000; }
    @page { margin: 12mm; }
}

/* ---------- Aranabilir seçim kutusu (açılır liste yerine) ----------
   Klavyeyle çalışır: yaz → ↓ ok → Enter. Usta fare kullanmadan doldurabilmeli. */
.arama-secim { position: relative; }

.arama-secim .as-liste {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    max-height: 290px; overflow-y: auto;
    background: var(--beyaz); border: none; border-radius: var(--yuvarlak-buyuk);
    box-shadow: var(--golge-orta); padding: 6px;
}
.arama-secim .as-satir { padding: 11px 13px; cursor: pointer; border-radius: var(--yuvarlak); border: none; }
.arama-secim .as-satir.as-secili { background: var(--mavi-soft2); }
.arama-secim .as-ad { font-weight: 700; font-size: 14.5px; color: var(--gri-90); }
.arama-secim .as-aciklama { font-size: 12.5px; color: var(--gri-50); margin-top: 1px; }
.arama-secim .as-bos { padding: 14px; color: var(--gri-50); font-size: 14px; }
.arama-secim .as-ipucu { font-size: 12.5px; color: var(--gri-50); margin-top: 5px; }

/* Seçim yapıldığında alan turkuaza döner — "seçildi" geri bildirimi */
.arama-secim.as-dolu .as-girdi { background: var(--mavi-soft2); color: var(--mavi-koyu); font-weight: 600; }

.arama-secim.as-acilir .as-girdi { padding-right: 40px; }
.arama-secim .as-ok {
    position: absolute; top: 0; right: 0; width: 40px; height: 100%;
    border: none; background: transparent; color: var(--gri-50); font-size: 13px; cursor: pointer;
    border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
}
.arama-secim .as-ok:hover { color: var(--mavi); }

/* ---------- Fotoğraf yükleme: sürükle bırak + çoklu seçim ---------- */
.foto-alan { margin-bottom: 12px; }
.foto-birak {
    border: none;
    border-radius: var(--yuvarlak-buyuk);
    background: var(--gri-8);
    padding: 26px 18px;
    text-align: center; cursor: pointer; color: var(--gri-70);
    transition: background .15s, box-shadow .15s;
}
.foto-birak:hover { background: var(--mavi-soft2); }
.foto-birak:focus { outline: none; box-shadow: 0 0 0 3px var(--mavi-soft2); }
.foto-birak .baslik { font-weight: 700; color: var(--gri-90); font-size: 15.5px; }
.foto-birak .alt { font-size: 13px; margin-top: 4px; }
.foto-birak .ikon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.foto-alan.foto-uzerinde .foto-birak { background: var(--mavi-soft2); color: var(--mavi-koyu); }

.foto-onizleme { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.foto-oge { position: relative; width: 112px; }
.foto-oge img {
    width: 112px; height: 84px; object-fit: cover;
    border-radius: var(--yuvarlak); border: none; display: block;
    background: var(--gri-8); box-shadow: var(--golge);
}
.foto-oge .foto-ad { font-size: 11px; color: var(--gri-50); text-align: center; margin-top: 3px; }
.foto-cikar {
    position: absolute; top: -8px; right: -8px;
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--beyaz); color: var(--kirmizi);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
    box-shadow: var(--golge-orta);
}
.foto-cikar:hover { background: var(--kirmizi-acik); }
.foto-sayac { font-size: 13px; color: var(--gri-50); margin-top: 8px; display: block; }

/* ---------- Muhasebe: oran çubukları ---------- */
.cubuk { height: 10px; background: var(--gri-15); border-radius: 999px; overflow: hidden; min-width: 60px; }
.cubuk span { display: block; height: 100%; background: var(--mavi); border-radius: 999px; }

.oran-cubuk {
    display: flex; height: 40px; border-radius: 999px; overflow: hidden;
    font-size: 13.5px; font-weight: 700; color: var(--beyaz);
}
.oran-cubuk span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; padding: 0 10px; }
.oran-cubuk .emek { background: var(--mavi-koyu); }
.oran-cubuk .parca { background: var(--turkuaz); color: #06302C; }

/* ---------- Destek yazışması ---------- */
.mesaj { border: none; border-radius: var(--yuvarlak-buyuk); padding: 14px 16px; margin-bottom: 10px; background: var(--gri-8); }
.mesaj.ekip { background: var(--mavi-soft2); }
.mesaj-bas { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--gri-50); margin-bottom: 6px; }
.mesaj-bas strong { color: var(--gri-90); }
.mesaj-icerik { white-space: pre-wrap; font-size: 14.5px; }

/* ---------- Yönetici bir abonenin paneline girdiğinde ---------- */
.yonetim-serit {
    background: var(--kirmizi); color: #fff; padding: 11px 18px;
    font-size: 13.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.yonetim-serit a { color: #fff; background: rgba(255,255,255,.2); padding: 5px 13px; border-radius: 999px; font-weight: 800; }
.yonetim-serit a:hover { background: rgba(255,255,255,.32); text-decoration: none; color: #fff; }

/* ---------- Telefonda alt menü ---------- */
.alt-menu { display: none; }
.eylem-cubugu { display: none; }
.kart, form[id] { scroll-margin-top: 76px; }

@media (max-width: 960px) {
    html, body { overflow-x: hidden; }

    /* Kenar menü gider, üstte ince şerit + altta menü gelir */
    .panel { grid-template-columns: 1fr; }
    .yan { display: none; }

    .ust-bar {
        display: flex; align-items: center; gap: 12px;
        height: 58px; padding: 0 16px;
        background: var(--lacivert); color: #fff;
        position: sticky; top: 0; z-index: 30;
    }
    .ust-bar .logo { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.03em; flex-shrink: 0; }
    .ust-bar .logo:hover { text-decoration: none; color: #fff; }
    .ust-bar nav { display: none; }
    .ust-bar .kullanici { margin-left: auto; font-size: 12.5px; color: #8FBDB8; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
    /* Telefonda şerit tek satırlık rozete iner: "Deneme · 30 gün" */
    .ust-bar .abonelik-serit {
        display: block; margin: 0; padding: 4px 9px; border-radius: 999px; border-left: 0;
        font-size: 11.5px; line-height: 1.25; white-space: nowrap; flex-shrink: 0;
    }
    .ust-bar .abonelik-serit .as-durum, .ust-bar .abonelik-serit .as-alt { display: none; }
    .ust-bar .abonelik-serit .as-kisa { display: inline; font-size: 11.5px; font-weight: 700; }
    .ust-bar .abonelik-serit .as-kisa-alt { display: inline; font-size: 11.5px; color: #C6DEDB; }
    .ust-bar .abonelik-serit .as-kisa-alt::before { content: " · "; }
    .ust-bar .abonelik-serit .as-eylem { display: none; }
    .ust-bar .abonelik-serit.deneme { background: rgba(20,184,166,.28); }
    .ust-bar .abonelik-serit.doldu  { background: rgba(214,69,69,.30); }
    .ust-bar .dugme { background: rgba(255,255,255,.12); color: #fff; }

    .icerik { padding: 16px 14px calc(var(--alt-menu-h) + 28px); }

    .alt-menu {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--beyaz);
        box-shadow: 0 -6px 24px -14px rgba(15,46,44,.5);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .alt-menu > a, .alt-menu > details > summary {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        min-height: var(--alt-menu-h); padding: 8px 2px;
        color: var(--gri-50); font-size: 11px; font-weight: 700;
        text-decoration: none; list-style: none; cursor: pointer;
    }
    .alt-menu > details { flex: 1; display: flex; }
    .alt-menu > details > summary::-webkit-details-marker { display: none; }
    .alt-menu svg { width: 22px; height: 22px; }
    .alt-menu > a:hover { text-decoration: none; }
    .alt-menu > a.aktif, .alt-menu > details[open] > summary { color: var(--mavi); }

    .alt-menu-liste {
        position: fixed; left: 10px; right: 10px; bottom: calc(var(--alt-menu-h) + 10px);
        background: var(--beyaz); border-radius: 22px;
        box-shadow: var(--golge-orta); padding: 8px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .alt-menu-liste a {
        display: flex; align-items: center; min-height: 48px; padding: 12px 14px;
        border-radius: var(--yuvarlak); color: var(--gri-90);
        font-size: 14.5px; font-weight: 700; text-decoration: none; background: var(--gri-4);
    }
    .alt-menu-liste a:hover { background: var(--gri-8); }
    .alt-menu-liste a.aktif { background: var(--mavi-soft2); color: var(--mavi-koyu); }

    .eylem-cubugu {
        display: flex; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: var(--alt-menu-h); z-index: 55;
        background: var(--beyaz); padding: 12px 14px;
        box-shadow: 0 -6px 24px -16px rgba(15,46,44,.5);
    }
    .eylem-cubugu .dugme { flex: 1; min-height: 50px; font-size: 15.5px; }
    .eylem-cubugu form { flex: 1; display: flex; }
    .eylem-cubugu form .dugme { width: 100%; }
    .eylem-var .icerik { padding-bottom: calc(var(--alt-menu-h) + 96px); }

    .arama.yapiskan {
        position: sticky; top: 58px; z-index: 25;
        background: var(--gri-4); padding: 10px 0; margin: -10px 0 10px;
    }

    .sayfa-basligi { margin-bottom: 16px; }
    .sayfa-basligi h1 { font-size: 23px; }
    .sayfa-basligi > .dugme, .sayfa-basligi > .dugme-grup { width: 100%; }
    .sayfa-basligi > .dugme-grup .dugme { flex: 1; }

    .kart { padding: 16px; border-radius: var(--yuvarlak-buyuk); }
    .kart-baslik { margin: -16px -16px 12px; padding: 14px 16px; }
    .tablo-sarmal { margin: 0 -16px; padding: 0 16px; }

    .izgara-4, .izgara-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .izgara-2 { grid-template-columns: 1fr; }
    .sayac { padding: 15px 16px; }
    .sayac .deger { font-size: 25px; }

    /* Dokunma hedefi en az 44px */
    .dugme { min-height: 48px; }
    .dugme.kucuk { min-height: 40px; }
    .durum-serit a { min-height: 44px; }
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=datetime-local], input[type=tel], input[type=search],
    select, textarea { min-height: 50px; font-size: 16px; /* iOS yakınlaştırmasın */ }
    .form-satir { grid-template-columns: 1fr; }
}

/* ===== TELEFONDA TABLOLAR KART OLUR =====
   Yan yana kaydırmalı tablo telefonda kullanılamıyor. Her satır bir kart;
   hücre etiketleri td[data-label] içinden ::before ile yazılır. */
@media (max-width: 640px) {
    .tablo-sarmal { overflow-x: visible; margin: 0; padding: 0; }
    table.tablo { border-spacing: 0; font-size: 14.5px; }
    table.tablo thead { display: none; }
    table.tablo, table.tablo tbody, table.tablo tfoot, table.tablo tr, table.tablo td { display: block; width: 100%; }

    table.tablo tr {
        background: var(--beyaz);
        border-radius: var(--yuvarlak-buyuk);
        margin: 0 0 10px;
        padding: 6px 0;
        box-shadow: var(--golge);
        overflow: hidden;
    }
    table.tablo tbody tr:hover td { background: transparent; }
    table.tablo tr:last-child { margin-bottom: 0; }

    table.tablo td {
        padding: 9px 16px;
        background: transparent;
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        text-align: right;
        border-radius: 0 !important;
    }
    table.tablo td[data-label]::before {
        content: attr(data-label);
        color: var(--gri-50); font-size: 12.5px; font-weight: 700;
        text-align: left; flex: 0 0 auto; white-space: nowrap;
    }
    table.tablo td[data-label]:has(> * + *) { display: block; text-align: left; padding: 11px 16px; }
    table.tablo td[data-label]:has(> * + *)::before { display: block; margin-bottom: 4px; }

    /* İlk hücre kartın başlığıdır: plaka, parça adı, ay… */
    table.tablo td:first-child {
        display: block; text-align: left;
        padding: 13px 16px 10px;
        margin-bottom: 4px;
        font-size: 16px; font-weight: 700;
        box-shadow: inset 0 -1px 0 var(--gri-15);
    }
    table.tablo td:first-child::before { display: none; }
    table.tablo td:first-child[data-label]::before { display: block; margin-bottom: 4px; }

    table.tablo .sayi { text-align: right; }
    table.tablo td:empty { display: none; }

    table.tablo tfoot tr { background: var(--mavi-soft2); }
    table.tablo tfoot td { background: transparent; }

    table.tablo td:last-child:has(.dugme), table.tablo td:last-child:has(form) {
        display: block; text-align: left; padding: 6px 16px 13px;
    }
    table.tablo td:last-child:has(.dugme)::before, table.tablo td:last-child:has(form)::before { display: none; }
    table.tablo td .dugme { width: 100%; }
    table.tablo td form { width: 100%; }

    .bos-liste { padding: 32px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Abonelik: paket seçimi ve IBAN kutusu ---------- */
/* Tamirci havaleyi telefondan yapıyor: IBAN büyük, seçilebilir ve tek satır olmalı. */
.paket-secim {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--yuvarlak);
    background: var(--gri-4);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.paket-secim:hover { background: var(--mavi-soft); }
.paket-secim.secili { background: var(--mavi-soft); box-shadow: inset 0 0 0 2px var(--mavi-soft2); }
.paket-secim input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--mavi); }
.paket-secim b { display: block; color: var(--gri-90); font-size: 15px; margin-bottom: 3px; }
.paket-secim small { display: block; color: var(--gri-50); font-size: 13px; line-height: 1.5; }

.iban-kutu {
    background: var(--mavi-soft);
    border-radius: var(--yuvarlak);
    padding: 16px 18px;
    margin-bottom: 14px;
}
.iban-kutu > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
}
.iban-kutu > div + div { border-top: 1px solid var(--mavi-soft2); }
.iban-kutu span { color: var(--gri-50); font-size: 13.5px; }
.iban-kutu b { color: var(--gri-90); font-size: 15px; text-align: right; }
.iban-kutu .iban-no {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    font-size: 16px;
    user-select: all;   /* telefonda tek dokunuşla seçilip kopyalansın */
}

@media (max-width: 640px) {
    .iban-kutu > div { flex-direction: column; gap: 2px; align-items: flex-start; }
    .iban-kutu b { text-align: left; }
    .iban-kutu .iban-no { font-size: 15px; word-break: break-all; }
}

/* ---------- Giriş ekranı: Google düğmesi ---------- */
.giris-ayirac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--gri-50);
    font-size: 13px;
}
.giris-ayirac::before, .giris-ayirac::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gri-15);
}
.dugme.google {
    background: #fff;
    color: var(--gri-90);
    border: 1px solid var(--gri-30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
}
.dugme.google:hover { background: var(--gri-4); border-color: var(--gri-50); }
.giris-not {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--gri-50);
    line-height: 1.6;
    text-align: center;
}

/* ---------- Fotoğraftan plaka okuma ---------- */
/* Dosya seçici GİZLENMEZ. Telefonda gizli input'u JS ile tıklatmak sahada tutmadı
   (kameradan dönerken sayfa yeniden yükleniyor, JS'in tuttuğu her şey uçuyor).
   Görünür kalsın, seçilen dosyanın adı da görünsün — usta neyi seçtiğini görür. */
.plaka-oku { margin-top: 10px; }
.plaka-foto-girdi {
    display: block; width: 100%; margin-top: 8px; padding: 12px;
    border: 2px dashed var(--gri-20); border-radius: var(--yuvarlak);
    background: var(--gri-05); font-family: inherit; font-size: 13.5px;
    color: var(--gri-70);
}
.plaka-foto-girdi::file-selector-button {
    margin-right: 12px; padding: 8px 14px; min-height: 38px;
    border: 0; border-radius: var(--yuvarlak);
    background: var(--gri-15); color: var(--gri-90);
    font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.plaka-oku-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.plaka-oku-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
@media (max-width: 640px) {
    /* Yağlı elle, güneşte, tek elle basılacak: düğmeler tam genişlik ve iri. */
    .plaka-oku-dugmeler { flex-direction: column; }
    .plaka-oku-dugmeler .dugme { width: 100%; min-height: 48px; font-size: 15.5px; }
    .plaka-adaylar { flex-direction: column; }
    .plaka-aday { width: 100%; min-height: 58px; }
}
/* --- "Okunuyor..." göstergesi ---
   Fotoğrafın yüklenmesi + sunucuda okunması telefon hattında birkaç saniye sürüyor ve
   o sürede ekran sessiz kalıyordu. Yüzdeli bir çubuk için akışı JS'e devretmek (XHR)
   gerekirdi; sahada tutmayan şey tam olarak oydu. Bu yüzden gösterge BELİRSİZ:
   "çalışıyor" der, işi taşımaz. */
.plaka-oku-firil {
    display: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: plaka-donsun .7s linear infinite;
}
.plaka-oku-dugme.mesgul .plaka-oku-simge { display: none; }
.plaka-oku-dugme.mesgul .plaka-oku-firil { display: inline-block; }
.plaka-oku-dugme.mesgul { opacity: .9; cursor: progress; }

.plaka-oku-cubuk {
    height: 4px; margin-top: 8px; border-radius: 3px;
    background: var(--mavi-soft2); overflow: hidden;
}
.plaka-oku-cubuk[hidden] { display: none; }
.plaka-oku-cubuk > span {
    display: block; width: 40%; height: 100%; border-radius: 3px;
    background: var(--mavi);
    animation: plaka-kaysin 1.1s ease-in-out infinite;
}

@keyframes plaka-donsun { to { transform: rotate(360deg); } }
@keyframes plaka-kaysin {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* Hareket rahatsız eden kullanıcı için: gösterge kalsın, dönme dursun. */
@media (prefers-reduced-motion: reduce) {
    .plaka-oku-firil { animation: none; }
    .plaka-oku-cubuk > span { animation: none; width: 100%; }
}

.plaka-oku small { display: block; color: var(--gri-50); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.plaka-oku-durum { display: block; margin-top: 10px; font-size: 13.5px; color: var(--gri-70); }
.plaka-oku-durum.hata { color: var(--kirmizi); }
.plaka-oku-durum.tamam { color: var(--yesil); font-weight: 600; }
.plaka-adaylar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.plaka-aday {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 16px; border: 2px solid var(--mavi-soft2); background: var(--mavi-soft);
    border-radius: var(--yuvarlak); cursor: pointer; font-family: inherit; min-height: 52px;
}
.plaka-aday:hover { border-color: var(--mavi); }
.plaka-aday b { font-size: 19px; color: var(--gri-90); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.plaka-aday small { color: var(--gri-50); font-size: 11.5px; margin: 0; }
.plaka-oku-ham {
    display: block; margin-top: 6px; font-size: 12.5px; color: var(--gri-50);
    font-family: ui-monospace, Consolas, monospace; word-break: break-all;
}