/* epanel — Trendyol Satıcı Paneli tarzı: koyu lacivert üst menü, turuncu vurgu */

:root {
    --lacivert: #1a1f36;
    --lacivert-acik: #2a3150;
    --turuncu: #f27a1a;
    --turuncu-koyu: #d8660c;
    --zemin: #f4f5f7;
    --kart: #ffffff;
    --cizgi: #e3e5ea;
    --metin: #21243d;
    --metin-soluk: #6b7189;
    --kirmizi: #d92d20;
    --kirmizi-zemin: #fef3f2;
    --yesil: #067647;
    --yesil-zemin: #ecfdf3;
    --sari: #b54708;
    --sari-zemin: #fffaeb;
    --golge: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    --yuvarlak: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--turuncu-koyu); }

/* ---------- üst menü ---------- */

.ust-menu {
    background: var(--lacivert);
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    flex-wrap: wrap;
}

.ust-menu .logo {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.4px;
    margin-right: 24px;
    color: #fff;
    text-decoration: none;
}

.ust-menu .logo span { color: var(--turuncu); }

.ust-menu nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.ust-menu nav a {
    color: #c9cde0;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--yuvarlak);
    font-size: 14px;
}

.ust-menu nav a:hover { background: var(--lacivert-acik); color: #fff; }

.ust-menu nav a.etkin { background: var(--lacivert-acik); color: #fff; font-weight: 600; }

.ust-menu .kullanici {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #c9cde0;
}

/* ---------- sayfa ---------- */

.sayfa { max-width: 1180px; margin: 24px auto; padding: 0 20px; }

/* Toplu düzenleme tablosu dar ekrana sığmıyor; bu sayfa daha geniş. */
.sayfa.genis { max-width: 1480px; }

/* Tablo içinde düzenlenebilir sayı kutuları. */
.hucre-girdi {
    width: 100%;
    max-width: 110px;
    padding: 6px 8px;
    text-align: right;
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: var(--kart);
    color: inherit;
}

.hucre-girdi:focus {
    outline: 2px solid var(--turuncu);
    outline-offset: -1px;
}

/* Maliyeti girilmemiş satır göze çarpsın: kâr hesabı bunlar yüzünden eksik kalır. */
.hucre-girdi.uyari-girdi {
    border-color: var(--sari);
    background: var(--sari-zemin);
}

.satir-etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.sayfa-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sayfa-baslik h1 { font-size: 22px; margin: 0; font-weight: 650; }

.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    padding: 24px;
    margin-bottom: 20px;
}

.kart h2 { font-size: 16px; margin: 0 0 16px; font-weight: 650; }

.izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- sekmeler ---------- */

/*
 * Ayarlar ekranı tek sayfada metrelerce aşağı gidiyordu. Bölümler zaten
 * birbirinden bağımsız (ayrı ayrı kaydediliyorlar), o yüzden aynı anda
 * görünmeleri gerekmiyor.
 *
 * Biçim: üst menüdeki lacivert/turuncu dili sürdüren "segment" çubuğu.
 * Seçili sekme lacivert dolu — sayfanın en üstündeki menüyle aynı vurgu.
 */
.sekmeler {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);

    /* Kaydırma çubuğu çubuğun içinde çirkin duruyor; kaydırma çalışmaya devam eder. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sekmeler::-webkit-scrollbar { height: 0; }

.sekme {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--metin-soluk);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

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

.sekme.etkin { background: var(--lacivert); color: #fff; }

.sekme:focus-visible { outline: 2px solid var(--turuncu); outline-offset: 2px; }

/* Gizli bölüm gerçekten yer kaplamamalı. */
.sekme-govde[hidden] { display: none; }

/* ---------- kurulum adımları ---------- */

/*
 * Adımlar artık gerçek duruma göre işaretleniyor; tamamlananın üstü
 * çizilmiyor ama solmuş görünüyor — "bitti" ile "sırada" arasındaki fark
 * bir bakışta anlaşılmalı.
 */
.adimlar { list-style: none; margin: 0; padding: 0; }

.adim {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cizgi);
}

.adim:last-child { border-bottom: 0; }

.adim-isaret {
    flex: 0 0 22px;
    text-align: center;
    color: var(--metin-soluk);
    font-weight: 700;
}

.adim.tamam .adim-isaret { color: var(--yesil); }

.adim.tamam .adim-baslik { color: var(--metin-soluk); }

.adim-baslik { font-weight: 650; color: var(--metin); text-decoration: none; }

.adim-baslik:hover { color: var(--turuncu-koyu); text-decoration: underline; }

.adim-aciklama { color: var(--metin-soluk); font-size: 14px; }

/* ---------- duyurular ---------- */

.kart-baslik-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.kart-baslik-satiri h2 { margin: 0; }

.duyuru {
    padding: 16px 0;
    border-bottom: 1px solid var(--cizgi);
}

.duyuru:first-child { padding-top: 0; }

.duyuru:last-child { border-bottom: 0; padding-bottom: 0; }

.duyuru-ust {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.duyuru-surum {
    font-size: 12px;
    font-weight: 700;
    color: var(--metin-soluk);
    font-family: Consolas, "Courier New", monospace;
}

.duyuru-tarih { font-size: 12px; color: var(--metin-soluk); }

.duyuru-baslik { margin: 0 0 4px; font-size: 15px; font-weight: 650; }

/* Duyuru metni düz metin; satır sonları korunuyor. */
.duyuru-icerik { margin: 0; color: var(--metin); white-space: pre-line; }

/* ---------- form ---------- */

.alan { margin-bottom: 16px; }

.alan label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--metin);
}

.alan .zorunlu { color: var(--kirmizi); margin-left: 2px; }

.alan input,
.alan select,
.alan textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: var(--metin);
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
    outline: 2px solid var(--turuncu);
    outline-offset: -1px;
    border-color: var(--turuncu);
}

.alan input[aria-invalid="true"] { border-color: var(--kirmizi); }

.alan .ipucu { font-size: 12px; color: var(--metin-soluk); margin-top: 4px; }

/* ---------- düğmeler ---------- */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--yuvarlak);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--turuncu);
    color: #fff;

    /* <a class="dugme"> genel bağlantı altçizgisini almasın. */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.dugme:active:not(:disabled) { transform: translateY(1px); }

/* Klavyeyle gezenler için görünür odak halkası. */
.dugme:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 122, 26, .35);
}

.dugme:hover:not(:disabled) { background: var(--turuncu-koyu); }

.dugme:disabled { opacity: .55; cursor: not-allowed; }

.dugme.ikincil {
    background: #fff;
    color: var(--metin);
    border-color: var(--cizgi);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.dugme.ikincil:hover:not(:disabled) {
    background: var(--zemin);
    border-color: #cfd2da;
}

/* Silme gibi geri alınamaz işlemler görsel olarak da ayrışmalı. */
.dugme.tehlike { background: #fff; color: var(--kirmizi); border-color: #fecdca; }

.dugme.tehlike:hover:not(:disabled) { background: var(--kirmizi-zemin); border-color: var(--kirmizi); }

.dugme.tam { width: 100%; }

/* ---------- uyarı kutuları ---------- */

.uyari {
    padding: 12px 14px;
    border-radius: var(--yuvarlak);
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.uyari:empty { display: none; }

.uyari.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border-color: #fecdca; }

.uyari.basari { background: var(--yesil-zemin); color: var(--yesil); border-color: #abefc6; }

.uyari.bilgi { background: var(--sari-zemin); color: var(--sari); border-color: #fedf89; }

.uyari ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- rozetler ---------- */

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.rozet.taslak { background: var(--zemin); color: var(--metin-soluk); border-color: var(--cizgi); }
.rozet.bekliyor { background: var(--sari-zemin); color: var(--sari); border-color: #fedf89; }
.rozet.yayinda { background: var(--yesil-zemin); color: var(--yesil); border-color: #abefc6; }
.rozet.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border-color: #fecdca; }

/* Duyuru türü için nötr mavi ton; "yayında" yeşiliyle karışmasın. */
.rozet.bilgi { background: #eff6ff; color: #175cd3; border-color: #b2ddff; }

/* ---------- giriş ekranı ---------- */

.giris-sarmal {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(160deg, var(--lacivert) 0%, #2a3150 100%);
}

.giris-kutu {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}

.giris-kutu .logo {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: -.6px;
}

.giris-kutu .logo span { color: var(--turuncu); }

.giris-kutu .alt-baslik {
    text-align: center;
    color: var(--metin-soluk);
    font-size: 14px;
    margin-bottom: 26px;
}

.sekmeler {
    display: flex;
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: 22px;
}

.sekmeler button {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--metin-soluk);
    cursor: pointer;
}

.sekmeler button.etkin { color: var(--turuncu); border-bottom-color: var(--turuncu); }

[hidden] { display: none !important; }

/* ---------- tablo ---------- */

.tablo-sarmal { overflow-x: auto; }

.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }

.tablo th {
    text-align: left;
    font-weight: 650;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--metin-soluk);
    padding: 10px 12px;
    border-bottom: 1px solid var(--cizgi);
    white-space: nowrap;
}

.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }

.tablo tbody tr:hover { background: #fafbfc; }

.tablo .sag { text-align: right; }
.tablo .dar { width: 60px; }
.tablo .bos { text-align: center; color: var(--metin-soluk); padding: 32px; }

.tablo input, .tablo select {
    width: 100%;
    min-width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

.tablo input[aria-invalid="true"] { border-color: var(--kirmizi); background: var(--kirmizi-zemin); }

.ikincil-metin { font-size: 12px; color: var(--metin-soluk); margin-top: 2px; }
.uyari-metin { color: var(--kirmizi); font-weight: 600; }

/* Net kâr pozitifse yeşil; negatif zaten uyari-metin ile kırmızı. */
.kar-artı { color: var(--yesil); font-weight: 600; }

/* "t" (tahmini) rozeti tutarın yanında küçük dursun. */
.kucuk-rozet { margin-left: 4px; padding: 1px 5px; font-size: 11px; }

/* Sipariş satırının altında açılan kalem dökümü. */
.kalem-satiri > td { background: var(--zemin); padding: 12px 16px; }

.kucuk-gorsel {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--cizgi);
    display: block;
}

/* ---------- araç çubuğu ---------- */

.arac-cubugu { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.arac-cubugu input[type="search"] {
    flex: 1;
    min-width: 220px;
    padding: 9px 12px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    font-size: 15px;
    font-family: inherit;
}

.dugme-grubu { display: flex; gap: 10px; flex-wrap: wrap; }

.dugme.kucuk { padding: 5px 10px; font-size: 13px; }

/* ---------- ürün kartı ---------- */

.izgara-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.sekme-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak) var(--yuvarlak) 0 0; margin-bottom: 0; }

.sekme-kart button { position: relative; }

.sekme-rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--kirmizi);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ozet-serit {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 16px;
    border-radius: var(--yuvarlak);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid transparent;
}

.ozet-serit.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border-color: #fecdca; }
.ozet-serit.basari { background: var(--yesil-zemin); color: var(--yesil); border-color: #abefc6; }
.ozet-serit.bilgi { background: var(--sari-zemin); color: var(--sari); border-color: #fedf89; }

/* İki serit üst üste geldiğinde ikisi de aynı yere yapışıp çakışmasın. */
#gonderim-durumu { position: static; }

.eksik-liste { margin: 8px 0 0; padding-left: 18px; }
.eksik-liste li { margin-bottom: 3px; }

.eksik-baglanti {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.alan-rozet {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    font-size: 11px;
    font-weight: 600;
    color: var(--metin-soluk);
}

/* ---------- zengin metin editörü ---------- */

.editor-arac {
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--cizgi);
    border-bottom: none;
    border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
    background: var(--zemin);
}

.editor-arac button {
    min-width: 32px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.editor-arac button:hover { background: #fff; border-color: var(--cizgi); }

.editor {
    min-height: 160px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--cizgi);
    border-radius: 0 0 var(--yuvarlak) var(--yuvarlak);
    background: #fff;
    font-size: 15px;
    line-height: 1.6;
}

.editor:focus { outline: 2px solid var(--turuncu); outline-offset: -1px; }

/* ---------- görseller ---------- */

.gorsel-birak {
    border: 2px dashed var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 24px;
    text-align: center;
    color: var(--metin-soluk);
    transition: border-color .15s, background .15s;
}

.gorsel-birak.uzerinde { border-color: var(--turuncu); background: #fff8f2; }

.gorsel-birak p { margin: 0 0 6px; }

.baglanti-dugme {
    color: var(--turuncu-koyu);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.gorsel-izgara {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-top: 16px;
}

.gorsel-kutu {
    position: relative;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    background: #fff;
}

.gorsel-kutu.ana { border-color: var(--turuncu); border-width: 2px; }

.gorsel-kutu img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }

.ana-etiket {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--turuncu);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.gorsel-araclar {
    display: flex;
    gap: 4px;
    padding: 6px;
    justify-content: center;
    border-top: 1px solid var(--cizgi);
}

.tam-genislik { grid-column: 1 / -1; }

/* ---------- yönetim paneli ---------- */

/* Yönetim ekranları bilerek farklı renkte: yanlışlıkla üye paneli sanılmasın. */
.ust-menu.admin { background: #2d1b45; }
.ust-menu.admin nav a.etkin,
.ust-menu.admin nav a:hover { background: #43296a; }
.ust-menu.admin .logo small {
    font-size: 12px;
    font-weight: 600;
    color: #c9b6e8;
    letter-spacing: 0;
}

.sayac-kart { text-align: center; padding: 20px; }
.sayac-kart.vurgulu { border-color: var(--turuncu); border-width: 2px; }

.sayac { font-size: 32px; font-weight: 700; line-height: 1.1; }
.sayac-kart.vurgulu .sayac { color: var(--turuncu); }
.sayac-etiket { font-size: 13px; color: var(--metin-soluk); margin-top: 4px; }

.dikkat-satiri { background: var(--sari-zemin); }
.dikkat-satiri:hover { background: #fff4d6; }

/*
 * İşlem hücresi. Sütun kendi doğal genişliğini alsın (width:1%) ki düğmeler
 * dar hücrede alt alta kaymasın — sahada "Düzenle / Sil" iki satıra düşüyordu.
 */
.islem-hucre { white-space: nowrap; width: 1%; text-align: right; }

.islem-hucre .dugme-grubu { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }

.detay-bolum { margin-bottom: 20px; }
.detay-bolum h3 { font-size: 14px; margin: 0 0 8px; font-weight: 650; }
.detay-liste { margin: 0; padding-left: 20px; font-size: 14px; }
.detay-liste li { margin-bottom: 4px; }

.arac-cubugu select {
    padding: 9px 12px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}

/* ---------- kart başlığı (ayarlar) ---------- */

.kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.kart-baslik h2 { margin: 0; }

/* ---------- öneri listesi ---------- */

.oneri-listesi {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: var(--golge);
}

.oneri-listesi li { border-bottom: 1px solid var(--cizgi); }
.oneri-listesi li:last-child { border-bottom: none; }
.oneri-listesi .bos { padding: 12px; color: var(--metin-soluk); font-size: 14px; }

.oneri {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: var(--metin);
}

.oneri:hover:not(:disabled) { background: var(--zemin); }
.oneri:disabled { color: var(--metin-soluk); cursor: not-allowed; }

.secili-kategori {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--zemin);
    border-radius: var(--yuvarlak);
    font-size: 14px;
    flex-wrap: wrap;
}

.secili-metin { flex: 1; min-width: 200px; }

/* ---------- kanal hataları ---------- */

.kanal-hata {
    padding: 10px 12px;
    border-left: 3px solid var(--kirmizi);
    background: var(--kirmizi-zemin);
    border-radius: 0 6px 6px 0;
    margin-bottom: 8px;
    font-size: 14px;
}

.ozet-satir { padding: 4px 0; font-size: 14px; }

/* Kullanıcı ekleme formu: alanlar yan yana, dar ekranda alt alta. */
.izgara-3 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
}

/* Kullanıcı yönetimi: birden çok durum rozeti yan yana. */
.rozet-grup { display: flex; flex-wrap: wrap; gap: 4px; }

/* Geçici parola kutusu. Bir kez gösterilip kapanır. */
.parola-kutusu { border: 1px solid var(--sari); background: var(--sari-zemin); }

.parola-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.parola-degeri {
    font-family: Consolas, "Courier New", monospace;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    user-select: all;
}

/* Ayarlar içindeki geçici parola şeridi (ayrı kart değil, kart içi kutu). */
.parola-kutusu-ic {
    border: 1px solid var(--sari);
    background: var(--sari-zemin);
    border-radius: var(--yuvarlak);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.parola-kutusu-ic .uyari-metin { flex-basis: 100%; margin: 0; font-size: 12px; }

/* CSP `style-src 'self'` satır içi stilleri de engelliyor; ölçüler sınıfla. */
.dar-alan { width: 70px; }
.tam-genislik { width: 100%; }

/* Tıklayınca detayı açılan liste satırı (faturalar). */
.acilir-satir { cursor: pointer; }
.acilir-satir:hover > td { background: var(--zemin); }
.acilir-satir.acik > td { background: var(--zemin); font-weight: 600; }

/* Detay satırındaki düğmelere tıklamak satırı açıp kapatmasın diye
   olay yayılımı JS'te durduruluyor; burada yalnızca imleç düzeltiliyor. */
.acilir-satir .dugme { cursor: pointer; }

.detay-satiri > td { background: var(--zemin); padding: 0; }

.fatura-detay { padding: 14px 16px; }

.fatura-detay .ic-tablo { margin: 10px 0; background: #fff; }
.fatura-detay .ic-tablo th { font-size: 11px; }
.fatura-detay .ic-tablo td { font-size: 13px; }

.detay-toplam { font-size: 14px; font-weight: 600; margin-top: 8px; }

/* Liste sayfalama şeridi (ortak.js → sayfalayici). */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cizgi);
}

.sayfalama:empty { display: none; }

.sayfalama-bilgi { font-size: 13px; color: var(--metin-soluk); }

.sayfalama-boyut {
    padding: 6px 10px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    color: var(--metin);
}

/* Kart başlığı + sağda küçük bir denetim (dönem seçimi gibi). */
.kart-baslik-satiri {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.kart-baslik-satiri h2 { margin: 0; }

/* SVG grafikler (js/grafik.js). */
.grafik-kap { width: 100%; overflow-x: auto; }
.grafik { width: 100%; height: auto; display: block; }
.bos-grafik {
    margin: 0;
    padding: 32px;
    text-align: center;
    color: var(--metin-soluk);
    font-size: 13px;
}

/* Kârlılık özeti: duyarlı kutu ızgarası. */
.ozet-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ozet-kutu {
    padding: 12px 14px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--zemin);
}

.ozet-etiket { font-size: 13px; color: var(--metin-soluk); margin-bottom: 4px; }
.ozet-tutar { font-size: 20px; font-weight: 600; }

.ozet-kutu.ozet-artı {
    background: var(--yesil-zemin);
    border-color: #abefc6;
}

.ozet-kutu.ozet-artı .ozet-tutar { color: var(--yesil); }

.ozet-kutu.ozet-eksi {
    background: var(--kirmizi-zemin);
    border-color: #fecdca;
}

.ozet-kutu.ozet-eksi .ozet-tutar { color: var(--kirmizi); }

.ham-yanit {
    background: var(--lacivert);
    color: #d7dcf0;
    padding: 14px;
    border-radius: var(--yuvarlak);
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    max-height: 340px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- aksiyon çubuğu ---------- */

.aksiyon-cubugu {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 14px 0;
    background: linear-gradient(to top, var(--zemin) 70%, transparent);
    flex-wrap: wrap;
}

/* ---------- alt bilgi ---------- */

.alt-bilgi {
    text-align: center;
    color: var(--metin-soluk);
    font-size: 12px;
    padding: 24px 20px 32px;
}

/* ---------- mobil ---------- */

/* ---------- duyarlı (responsive) ---------- */

/* Tablet ve altı: sayfa başlığındaki araçlar alta insin. */
@media (max-width: 900px) {
    .sayfa-baslik { flex-direction: column; align-items: stretch; gap: 10px; }
    .sayfa-baslik .dugme-grubu { justify-content: flex-start; }

    .arac-cubugu { flex-wrap: wrap; }
    .arac-cubugu input[type="search"] { flex: 1 1 100%; }
}

@media (max-width: 640px) {
    .sekme { padding: 8px 12px; font-size: 13px; }

    .ust-menu { padding: 8px 14px; }
    .ust-menu .logo { margin-right: 12px; }
    .sayfa { margin: 16px auto; padding: 0 14px; }
    .kart { padding: 18px; }
    .giris-kutu { padding: 24px; }

    /* Menü öğeleri kaydırılabilir tek şerit; alt alta yığılıp ekranı yemesin. */
    .ust-menu nav {
        order: 3;
        flex-basis: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ust-menu nav::-webkit-scrollbar { display: none; }
    .ust-menu nav a { white-space: nowrap; }
    .ust-menu .kullanici { margin-left: auto; }

    /* Adı uzun kullanıcılarda üst menü taşıyordu. */
    .ust-menu .kullanici span {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Dokunmatikte düğmeler en az 40px yüksek olmalı; parmakla 30px'lik
     * hedefe isabet ettirmek zor.
     */
    .dugme { padding: 11px 16px; min-height: 40px; }
    .dugme.kucuk { padding: 8px 12px; min-height: 36px; font-size: 13px; }

    /*
     * Dar ekranda işlem düğmelerinin tek satırda kalma ısrarı yatay kaydırma
     * üretiyor; burada alt alta inmeleri DAHA iyi.
     */
    .islem-hucre .dugme-grubu { flex-wrap: wrap; justify-content: flex-start; }
    .islem-hucre { text-align: left; }

    /* Tablolar yatay kayar (tablo-sarmal); hücreler daralıp okunmaz olmasın. */
    .tablo th, .tablo td { padding: 10px 8px; }

    .izgara-3, .izgara-2 { grid-template-columns: 1fr; }
    .ozet-izgara { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

    .parola-satiri { flex-direction: column; align-items: stretch; }
    .parola-degeri { text-align: center; font-size: 18px; }
}

/* Telefon: özet kutuları iki sütun kalsın, tek sütun çok uzuyor. */
@media (max-width: 420px) {
    .ozet-izgara { grid-template-columns: repeat(2, 1fr); }
    .ozet-tutar { font-size: 17px; }
}
.gizli { display: none !important; }