/* ==========================================================================
   Selçuklu Soba — yönetim paneli
   ========================================================================== */

:root {
    --alev: #d8541f;
    --alev-koyu: #b3410f;
    --antrasit: #17130f;
    --panel: #ffffff;
    --zemin: #f4f2ef;
    --cizgi: #e2ddd6;
    --metin: #221c17;
    --metin-soluk: #6f645b;
    --yesil: #2f7a52;
    --sari: #b7791f;
    --kirmizi: #c0392b;
    --yuvarlak: 10px;
}

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

body.yonetim {
    margin: 0;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Yan menü ---------- */
.yan-menu {
    background: var(--antrasit);
    color: #cfc6bc;
    display: flex;
    flex-direction: column;
    padding: 18px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
/* Logo koyu menüde kaybolmasın diye beyaz zemine oturtulur: deseni ve yazısı antrasit. */
.yan-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 18px 18px; color: #fff; font-weight: 700; }
.yan-logo-gorsel {
    height: 44px; width: auto; max-width: 100%;
    background: #fff; padding: 5px 9px; border-radius: 8px;
}
.logo-isaret { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.yan-menu nav { display: flex; flex-direction: column; flex: 1; }
.yan-baslik {
    padding: 16px 18px 6px; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .09em; color: #776c62;
}
.yan-menu nav a {
    padding: 9px 18px; font-size: .89rem; font-weight: 500;
    border-left: 3px solid transparent;
}
.yan-menu nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.yan-menu nav a.aktif { background: rgba(216, 84, 31, .16); border-left-color: var(--alev); color: #fff; font-weight: 600; }
.yan-alt {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 14px 18px 0; display: flex; flex-direction: column; gap: 8px; font-size: .84rem;
}
.yan-alt button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: #cfc6bc; font-size: .84rem; font-family: inherit; text-align: left;
}
.yan-alt a:hover, .yan-alt button:hover { color: var(--alev); }

/* ---------- İçerik ---------- */
.yonetim-icerik { padding: 26px 30px 60px; min-width: 0; }
.yonetim-baslik {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.yonetim-baslik h1 { margin: 0; font-size: 1.5rem; }
.yonetim-baslik p { margin: 4px 0 0; color: var(--metin-soluk); font-size: .88rem; }

/* ---------- Kartlar ---------- */
.kart {
    background: var(--panel); border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak); padding: 20px; margin-bottom: 20px;
}
.kart h2 { margin: 0 0 14px; font-size: 1.05rem; }

.ozet-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.ozet-kart {
    background: var(--panel); border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak); padding: 16px 18px;
}
.ozet-kart span { font-size: .78rem; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .05em; }
.ozet-kart strong { display: block; font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.ozet-kart a { font-size: .8rem; color: var(--alev); }

/* ---------- Tablo ---------- */
.tablo-sarmal { overflow-x: auto; background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); }
table.tablo { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tablo th, table.tablo td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
table.tablo th { background: #faf8f6; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-soluk); white-space: nowrap; }
table.tablo tr:last-child td { border-bottom: none; }
table.tablo tr:hover td { background: #fbfaf8; }
.tablo-gorsel { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--zemin); }
.tablo-sag { text-align: right; white-space: nowrap; }

/* ---------- Rozet ---------- */
.rozet {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.rozet-yesil { background: #e8f4ed; color: var(--yesil); }
.rozet-gri { background: #eeebe7; color: var(--metin-soluk); }
.rozet-sari { background: #fdf3e2; color: var(--sari); }
.rozet-kirmizi { background: #fbeceb; color: var(--kirmizi); }
.rozet-mavi { background: #e9eff8; color: #2c5d94; }

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border: 1px solid transparent; border-radius: 8px;
    font-size: .86rem; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    background: none;
}
.btn-alev { background: var(--alev); color: #fff; }
.btn-alev:hover { background: var(--alev-koyu); }
.btn-cizgi { border-color: var(--cizgi); background: #fff; color: var(--metin); }
.btn-cizgi:hover { border-color: var(--alev); color: var(--alev); }
.btn-tehlike { border-color: #f0c9c5; background: #fff; color: var(--kirmizi); }
.btn-tehlike:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.btn-kucuk { padding: 6px 11px; font-size: .78rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Form ---------- */
.form-izgara { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.form-alan { margin-bottom: 15px; }
.form-alan label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.form-alan .ipucu { font-size: .76rem; color: var(--metin-soluk); font-weight: 400; margin-left: 6px; }
.form-alan input[type=text], .form-alan input[type=email], .form-alan input[type=tel],
.form-alan input[type=number], .form-alan input[type=url], .form-alan input[type=date],
.form-alan input[type=datetime-local], .form-alan input[type=password],
.form-alan textarea, .form-alan select {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--cizgi);
    border-radius: 8px; font-size: .89rem; font-family: inherit; background: #fff;
}
.form-alan textarea { min-height: 110px; resize: vertical; }
.form-alan input:focus, .form-alan textarea:focus, .form-alan select:focus { outline: none; border-color: var(--alev); }
.form-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-satir-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.onay-alan { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.onay-alan input { width: 16px; height: 16px; }
.onay-alan label { margin: 0; font-weight: 500; }
.dogrulama-hata { color: var(--kirmizi); font-size: .78rem; display: block; margin-top: 4px; }

.uyari { padding: 11px 15px; border-radius: 8px; font-size: .87rem; border: 1px solid; margin-bottom: 18px; }
.uyari-basari { background: #eefaf3; border-color: #b7e2c9; color: #1e6b43; }
.uyari-hata { background: #fdeeee; border-color: #f0c2c2; color: #a12d2d; }
.uyari-bilgi { background: #eef3fb; border-color: #c5d7ee; color: #2c5d94; }

.form-eylemler {
    display: flex; gap: 10px; align-items: center;
    padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--cizgi);
}

/* ---------- Varyant satırları ---------- */
.varyant-satir {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr .8fr auto;
    gap: 10px; align-items: end; padding: 12px; background: #faf8f6;
    border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 10px;
}
.varyant-satir .form-alan { margin: 0; }
.varyant-sil {
    background: none; border: none; cursor: pointer; color: var(--kirmizi);
    font-size: .8rem; text-decoration: underline; padding: 8px 0;
}

/* ---------- Görsel yönetimi ---------- */
.gorsel-onizleme {
    width: 100%; aspect-ratio: 1/1; border: 1px dashed var(--cizgi);
    border-radius: 8px; background: var(--zemin) center/cover no-repeat;
    display: grid; place-items: center; color: var(--metin-soluk); font-size: .8rem;
    margin-bottom: 10px; overflow: hidden;
}
.gorsel-onizleme img { width: 100%; height: 100%; object-fit: cover; }

/* Gönderilecek dosyalar; her satır kendi kaldırma düğmesiyle (bkz. js/gorsel-yukleme.js) */
.secilen-dosyalar { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.secilen-dosyalar li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 6px;
    padding: 5px 6px 5px 10px; font-size: .78rem; color: var(--metin-soluk);
}
.secilen-dosyalar li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secilen-dosyalar button {
    flex-shrink: 0; width: 22px; height: 22px; line-height: 1; cursor: pointer;
    border: 1px solid var(--cizgi); border-radius: 5px; background: #fff; color: var(--kirmizi);
}
.secilen-dosyalar button:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

/* Seçilen görsellerin hazırlanma durumu (bkz. js/gorsel-yukleme.js) */
.yukleme-durum:not(:empty) {
    display: block; margin-top: 6px; font-size: .76rem; color: var(--yesil);
}
.yukleme-durum.yukleme-calisiyor { color: var(--metin-soluk); }
.yukleme-durum.yukleme-calisiyor::before {
    content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px;
    border: 2px solid var(--cizgi); border-top-color: var(--alev); border-radius: 50%;
    vertical-align: -1px; animation: donen-halka .7s linear infinite;
}

@keyframes donen-halka { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .yukleme-durum.yukleme-calisiyor::before { animation: none; }
}
.galeri-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.galeri-oge { position: relative; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; background: #fff; }
.galeri-oge img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.galeri-oge button {
    position: absolute; top: 6px; right: 6px; border: none; cursor: pointer;
    background: rgba(23, 19, 15, .78); color: #fff; border-radius: 6px;
    width: 24px; height: 24px; font-size: .8rem; line-height: 1;
}

/* ---------- Sayfalama / filtre ---------- */
.filtre-cubugu { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtre-cubugu input[type=search], .filtre-cubugu select {
    padding: 8px 12px; border: 1.5px solid var(--cizgi); border-radius: 8px;
    font-size: .86rem; font-family: inherit; background: #fff; min-width: 200px;
}
.sayfalama { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
    min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center;
    border: 1px solid var(--cizgi); border-radius: 7px; background: #fff; font-size: .84rem; font-weight: 600;
}
.sayfalama .aktif { background: var(--alev); border-color: var(--alev); color: #fff; }

.bos-durum { padding: 46px 20px; text-align: center; color: var(--metin-soluk); }
.bos-durum h3 { color: var(--metin); margin: 0 0 6px; }

.satir-ic-form { display: inline; }

@media (max-width: 1100px) {
    .ozet-izgara { grid-template-columns: repeat(2, 1fr); }
    .form-izgara { grid-template-columns: 1fr; }
    .varyant-satir { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    body.yonetim { grid-template-columns: 1fr; }
    .yan-menu { position: static; height: auto; }
    .yan-menu nav { flex-direction: row; flex-wrap: wrap; padding: 0 10px; }
    .yan-baslik { display: none; }
    .yonetim-icerik { padding: 20px 16px 50px; }
    .form-satir, .form-satir-3 { grid-template-columns: 1fr; }
}

/* Teknik özellik satırları */
.ozellik-satir {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
    padding: 10px 12px; background: #faf8f6;
    border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 8px;
}
.ozellik-satir .form-alan { margin: 0; }
@media (max-width: 820px) { .ozellik-satir { grid-template-columns: 1fr; } }

/* ---------- Stok yönetimi ---------- */
tr.stok-kritik td { background: #fffaf1; }
tr.stok-tukenen td { background: #fdf4f3; }
tr.stok-kritik:hover td { background: #fdf3e2; }
tr.stok-tukenen:hover td { background: #fbeceb; }

.stok-sku { color: var(--metin-soluk); font-size: .82rem; }
.stok-girdi {
    width: 100%; padding: 6px 9px; border: 1.5px solid var(--cizgi);
    border-radius: 7px; font-size: .88rem; font-family: inherit; text-align: right; background: #fff;
}
.stok-girdi:focus { outline: none; border-color: var(--alev); }

/* Kaydet çubuğu uzun listelerde ekranın altına sabitlenir */
.stok-kaydet {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
    margin-top: 16px; box-shadow: 0 -6px 18px rgba(23, 19, 15, .07);
}

.stok-giris { color: var(--yesil); font-weight: 700; }
.stok-cikis { color: var(--kirmizi); font-weight: 700; }

/* ---------- Satış raporları ---------- */
.rapor-filtre {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    margin-bottom: 14px;
}
.donem-dugmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.ozel-aralik { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-left: auto; }
.ozel-aralik label { font-size: .76rem; font-weight: 600; color: var(--metin-soluk); display: grid; gap: 3px; }
.ozel-aralik input[type=date] {
    padding: 6px 9px; border: 1.5px solid var(--cizgi); border-radius: 8px;
    font-size: .84rem; font-family: inherit; background: #fff; color: var(--metin);
}
.ozel-aralik input[type=date]:focus { outline: none; border-color: var(--alev); }

.rapor-kapsam {
    margin: 0 0 18px; font-size: .84rem; color: var(--metin-soluk);
    background: var(--panel); border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak); padding: 11px 15px;
}
.rapor-bos { margin: 0; padding: 22px 0; text-align: center; color: var(--metin-soluk); font-size: .88rem; }

.ozet-kiyas { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ozet-kiyas em { font-style: normal; font-size: .74rem; color: var(--metin-soluk); }

.rapor-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* Kart içindeki tablolar kendi çerçevesini taşımaz */
table.tablo-duz { margin: -4px 0 -8px; }
table.tablo-duz th:first-child, table.tablo-duz td:first-child { padding-left: 0; }
table.tablo-duz th:last-child, table.tablo-duz td:last-child { padding-right: 0; }
table.tablo-duz th { background: none; }
.sira-no { color: var(--metin-soluk); font-weight: 700; width: 26px; }
.kategorisiz { color: var(--metin-soluk); font-size: .8rem; }

/* Ciro grafiği — harici kütüphane yok, SVG elle üretilir */
.grafik-sarmal { width: 100%; overflow: hidden; }
.ciro-grafik { width: 100%; height: auto; display: block; }
.grafik-kilavuz { stroke: var(--cizgi); stroke-width: 1; }
.grafik-taban { stroke: #cfc7bd; stroke-width: 1.5; }
.grafik-cubuk { fill: var(--alev); opacity: .82; transition: opacity .15s ease; }
.grafik-cubuk:hover { opacity: 1; }
.grafik-eksen { fill: var(--metin-soluk); font-size: 13px; font-family: "Segoe UI", Arial, sans-serif; }
.grafik-eksen-sag { text-anchor: end; }
.grafik-eksen-orta { text-anchor: middle; }
.grafik-not { margin: 12px 0 0; font-size: .8rem; color: var(--metin-soluk); }

/* Oran çubukları (ödeme yöntemi ve kategori payları) */
.oran-satir { display: flex; align-items: center; gap: 9px; }
.oran-cubuk { flex: 1; height: 8px; background: var(--zemin); border-radius: 999px; overflow: hidden; min-width: 40px; }
.oran-cubuk > span { display: block; height: 100%; background: var(--alev); border-radius: 999px; }
/* Ürün adının altındaki pay çubuğu; altı çizili bağlantı gibi okunmaması için soluk ve aralıklı */
.oran-cubuk-ince { height: 5px; margin-top: 9px; max-width: 170px; }
.oran-cubuk-ince > span { opacity: .5; }
.oran-deger { font-size: .8rem; font-weight: 600; white-space: nowrap; min-width: 46px; text-align: right; }

@media (max-width: 1100px) {
    .rapor-izgara { grid-template-columns: 1fr; }
    .ozel-aralik { margin-left: 0; }
}

/* Ürün listesi — toplu seçim */
.secim-hucre { width: 36px; text-align: center; }
.secim-hucre input { width: 16px; height: 16px; accent-color: var(--alev); }
.toplu-cubuk { align-items: flex-end; }

.aktarim-adim { margin: 0; padding-left: 20px; line-height: 1.65; }
.aktarim-adim li { margin-bottom: 6px; }
.aktarim-ozet { margin: 0; padding-left: 18px; line-height: 1.7; }

/* Yorum yönetimi */
.yorum-kart-ust { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.yorum-kart-puan { font-size: 1.1rem; font-weight: 800; color: #b7791f; white-space: nowrap; }
.yorum-kart-metin { margin: 12px 0; font-size: .92rem; white-space: pre-wrap; }
.yorum-kart-eylemler { display: flex; gap: 8px; flex-wrap: wrap; }
.yorum-yanit-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }

/* Taksit oranları */
.taksit-matris th, .taksit-matris td { text-align: center; }
.taksit-matris th:first-child, .taksit-matris td:first-child { text-align: left; }
.taksit-matris input.stok-girdi { width: 84px; text-align: right; }
.taksit-renk { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.taksit-bankalar { font-size: .74rem; color: var(--metin-soluk); }

/* ---------- Ana sayfa bölüm düzeni ---------- */
.duzen-listesi { list-style: none; margin: 0; padding: 0; counter-reset: bolum; }
.duzen-satir {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center; padding: 12px 14px;
    background: #faf8f6; border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 10px;
}
.duzen-satir:last-child { margin-bottom: 0; }
/* Gizlenen bölüm listede kalır ama soluk görünür; yeri belli olsun diye çıkarılmaz. */
.duzen-gizli { opacity: .55; background: #f4f2f0; }
.duzen-oklar { display: flex; flex-direction: column; gap: 4px; }
.duzen-oklar .btn { padding: 2px 10px; line-height: 1.4; }
.duzen-oklar .btn[disabled] { opacity: .35; cursor: default; }
.duzen-bilgi strong { display: block; font-size: .96rem; }
.duzen-bilgi .ipucu { display: block; margin-top: 2px; }
.duzen-onay { margin-bottom: 0; white-space: nowrap; }

@media (max-width: 640px) {
    .duzen-satir { grid-template-columns: auto 1fr; }
    .duzen-onay { grid-column: 2; }
}

/* ==========================================================================
   Bayi satış: bayi kartı, sipariş girişi, tahsilat, ekstre
   Pazarlamacı bu ekranları sahada telefondan kullanır; 820px altı öncelikli.
   ========================================================================== */
.soluk-satir { font-size: .78rem; color: var(--metin-soluk); }
.filtre-ozet { margin-left: auto; color: var(--metin-soluk); font-size: .85rem; }
.bakiye-borc { color: var(--kirmizi); }
.bakiye-alacak { color: var(--yesil); }
.tutar-buyuk { display: block; font-size: 1.6rem; font-weight: 800; }
.eylem-grubu { display: flex; gap: 8px; flex-wrap: wrap; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.bilgi-listesi { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.bilgi-listesi dt { color: var(--metin-soluk); }
.bilgi-listesi dd { margin: 0; }
.bilgi-listesi a { color: var(--alev); }

.form-alan input.girdi-buyuk { font-size: 1.3rem; font-weight: 700; padding: 10px 12px; }

/* Radyo düğmelerini dokunmaya uygun seçim kutularına çevirir */
.secim-dugmeleri { display: flex; flex-wrap: wrap; gap: 8px; }
.secim-dugmeleri label { margin: 0; font-weight: 500; cursor: pointer; }
.secim-dugmeleri input { position: absolute; opacity: 0; pointer-events: none; }
.secim-dugmeleri span {
    display: inline-block; padding: 9px 14px; border: 1.5px solid var(--cizgi);
    border-radius: 8px; background: #fff; font-size: .86rem;
}
.secim-dugmeleri input:checked + span { border-color: var(--alev); background: rgba(216, 84, 31, .08); color: var(--alev-koyu); font-weight: 600; }
.secim-dugmeleri input:focus-visible + span { outline: 2px solid var(--alev); outline-offset: 2px; }

.durum-formu { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.durum-formu select { padding: 6px 9px; border: 1.5px solid var(--cizgi); border-radius: 8px; font-family: inherit; }

/* ---------- Sipariş girişi ---------- */
.siparis-bayi { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.urun-arama { position: relative; margin-bottom: 14px; }
.urun-arama input[type=search] {
    width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
    border: 1.5px solid var(--cizgi); border-radius: 10px; background: #fff;
}
.urun-arama input[type=search]:focus { outline: none; border-color: var(--alev); }
.arama-sonuclari {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    list-style: none; margin: 0; padding: 4px; max-height: 360px; overflow-y: auto;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(23, 19, 15, .14);
}
.arama-sonuclari li {
    display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
    padding: 8px; border-radius: 7px; cursor: pointer;
}
.arama-sonuclari li.secili { background: rgba(216, 84, 31, .08); }
.arama-sonuclari li img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--zemin); }
.arama-sonuclari li strong { display: block; font-size: .88rem; }
.arama-sonuclari .arama-fiyat { font-weight: 700; font-size: .86rem; white-space: nowrap; }
.arama-sonuclari li.arama-bos { display: block; cursor: default; color: var(--metin-soluk); text-align: center; }

.siparis-satirlari { display: grid; gap: 10px; }
.siparis-satir {
    display: grid; grid-template-columns: minmax(0, 2.2fr) 128px 1fr 84px 1.1fr 1fr 32px;
    gap: 10px; align-items: end; padding: 12px; background: #faf8f6;
    border: 1px solid var(--cizgi); border-radius: 8px;
}
.siparis-satir.fiyat-ustu { border-color: #e9c98f; background: #fffaf1; }
.siparis-satir.fiyat-sifir { border-color: #f0c2c2; background: #fdf4f3; }
.satir-urun { align-self: center; min-width: 0; }
.satir-urun strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.satir-alan > span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--metin-soluk); margin-bottom: 3px; }
.satir-alan input, .satir-alan output {
    display: block; width: 100%; padding: 8px 9px; border: 1.5px solid var(--cizgi); border-radius: 7px;
    font-size: .92rem; font-family: inherit; background: #fff; text-align: right;
}
.satir-alan output { border-color: transparent; background: none; padding-left: 0; padding-right: 0; color: var(--metin-soluk); }
.satir-alan input:focus { outline: none; border-color: var(--alev); }
.satir-alan input:disabled { background: var(--zemin); }
.satir-tutar strong { display: block; padding: 8px 0; text-align: right; font-size: .95rem; }
.adet-kutusu { display: grid; grid-template-columns: 34px 1fr 34px; }
.adet-kutusu button {
    border: 1.5px solid var(--cizgi); background: #fff; cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--metin);
}
.adet-kutusu button:first-child { border-radius: 7px 0 0 7px; border-right: none; }
.adet-kutusu button:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.satir-alan .adet-kutusu input { border-radius: 0; text-align: center; padding-left: 2px; padding-right: 2px; }
.satir-sil {
    width: 32px; height: 36px; border: 1px solid #f0c9c5; border-radius: 7px; background: #fff;
    color: var(--kirmizi); cursor: pointer; font-size: .9rem;
}
.satir-sil:hover { background: var(--kirmizi); color: #fff; }

.toplu-iskonto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: .84rem; color: var(--metin-soluk); }
.toplu-iskonto input { width: 90px; padding: 6px 9px; border: 1.5px solid var(--cizgi); border-radius: 7px; font-family: inherit; text-align: right; }

/* Toplam ve kaydet ekranın altına yapışık durur; uzun siparişte kaydırmadan görülür. */
.siparis-alt { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -6px 18px rgba(23, 19, 15, .08); }
.siparis-toplamlar { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }
.siparis-toplamlar span { display: block; font-size: .74rem; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .04em; }
.siparis-toplamlar strong { font-size: 1rem; }
.siparis-toplamlar .genel { margin-left: auto; text-align: right; }
.siparis-toplamlar .genel strong { font-size: 1.45rem; color: var(--alev-koyu); }
.siparis-kaydet { width: 100%; margin-top: 12px; padding: 13px; font-size: 1rem; }

/* ---------- Ekstre ---------- */
.ekstre-baslik { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
tr.ekstre-devir td { background: #faf8f6; font-weight: 600; }
table.tablo tfoot td { background: #faf8f6; border-top: 1px solid var(--cizgi); }
.yazdirma-goster { display: none; }

@media (max-width: 1100px) {
    .siparis-satir { grid-template-columns: minmax(0, 1fr) 128px 1fr 84px 1.1fr 32px; }
    .siparis-satir .satir-urun { grid-column: 1 / -1; }
    .siparis-satir .satir-tutar { grid-column: 1 / -2; }
    .siparis-satir .satir-sil { grid-row: 1; grid-column: -2; }
}

@media screen and (max-width: 820px) {
    .ozet-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ozet-kart strong { font-size: 1.25rem; }
    .yonetim-baslik .eylem-grubu { width: 100%; }
    .yonetim-baslik .eylem-grubu .btn { flex: 1 1 auto; }
    .filtre-cubugu input[type=search], .filtre-cubugu select { min-width: 0; flex: 1 1 100%; }
    .filtre-ozet { margin-left: 0; width: 100%; }

    /* Tablo satırları telefonda kart olarak görünür; başlık data-etiket özniteliğinden gelir. */
    table.tablo-mobil thead { display: none; }
    table.tablo-mobil, table.tablo-mobil tbody, table.tablo-mobil tfoot, table.tablo-mobil tr, table.tablo-mobil td { display: block; width: 100%; }
    table.tablo-mobil tr { padding: 10px 14px; border-bottom: 1px solid var(--cizgi); }
    table.tablo-mobil tbody tr:last-child { border-bottom: none; }
    table.tablo-mobil td { border: none; padding: 3px 0; text-align: left; }
    table.tablo-mobil td[data-etiket]:not(:first-child) { display: flex; justify-content: space-between; gap: 12px; }
    table.tablo-mobil td[data-etiket]:not(:first-child)::before {
        content: attr(data-etiket); color: var(--metin-soluk); font-size: .78rem;
    }
    table.tablo-mobil td[data-etiket]:not(:first-child) > div { text-align: right; }
    table.tablo-mobil td.tablo-sag:not([data-etiket]) { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; white-space: normal; }
    table.tablo-mobil td.tablo-sag:not([data-etiket]) .btn, table.tablo-mobil td.tablo-sag:not([data-etiket]) form { flex: 1 1 auto; }
    table.tablo-mobil td.tablo-sag:not([data-etiket]) form .btn { width: 100%; }
    table.tablo-mobil td:empty, table.tablo-mobil td.mobil-gizle,
    table.tablo-mobil td[data-etiket]:empty, table.tablo-mobil td[data-etiket].mobil-gizle { display: none; }
    table.tablo-mobil tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; background: #faf8f6; }
    table.tablo-mobil tfoot td { width: auto; background: none; border: none; }
    table.tablo-mobil tfoot td[colspan] { flex: 1 1 auto; }
    table.tablo-mobil tfoot td[data-etiket] { flex: 1 1 100%; }
    table.tablo-duz.tablo-mobil { margin: -6px 0; }
    table.tablo-duz.tablo-mobil tr { padding-left: 0; padding-right: 0; }

    .siparis-satir { grid-template-columns: 1fr 1fr; gap: 8px 10px; position: relative; padding-right: 48px; }
    .siparis-satir .satir-urun, .siparis-satir .satir-tutar { grid-column: 1 / -1; }
    .siparis-satir .satir-sil { position: absolute; top: 10px; right: 10px; }
    .satir-tutar { display: flex; justify-content: space-between; align-items: baseline; }
    .satir-tutar strong { padding: 0; }
    .satir-alan input { font-size: 1rem; padding: 10px; }
    .adet-kutusu { grid-template-columns: 40px 1fr 40px; }
    .siparis-toplamlar { gap: 6px 16px; }
    .siparis-toplamlar .genel { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
}

@media print {
    body.yonetim { display: block; background: #fff; }
    .yan-menu, .yazdirma-gizle, .uyari { display: none !important; }
    .yazdirma-goster { display: block; }
    .yonetim-icerik { padding: 0; }
    .kart, .tablo-sarmal { border-color: #bbb; box-shadow: none; }
    table.tablo tr:hover td { background: none; }
    a { color: inherit; }
}

/* ---------- Pazarlamacı yetkileri ---------- */
.yetki-secim {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
    border-top: 1px solid var(--cizgi); cursor: pointer;
}
.yetki-secim:first-of-type { border-top: none; }
.yetki-secim input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.yetki-secim strong { display: block; font-size: .88rem; }
.yetki-secim small { display: block; font-size: .78rem; color: var(--metin-soluk); }
.yetki-rozetleri { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.yetki-rozetleri .rozet { font-weight: 500; }

/* ---------- Saha (pazarlamacı) giriş sayfası ---------- */
body.saha-giris {
    margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
    background: var(--antrasit); color: var(--metin);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.55;
}
.saha-kutu { width: 100%; max-width: 380px; }
.saha-marka { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; color: #fff; font-weight: 700; }
.saha-marka img { height: 56px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; }
.saha-kutu .kart { padding: 24px; }
.saha-kutu h1 { margin: 0 0 16px; font-size: 1.2rem; }
.saha-kutu .form-alan input { font-size: 1rem; padding: 11px 12px; }
.saha-buton { width: 100%; padding: 12px; font-size: 1rem; }

/* ---------- Sayfa içi onay penceresi (js/onay.js) ---------- */
.onay-penceresi {
    width: min(420px, calc(100vw - 32px)); padding: 22px; border: none;
    border-radius: var(--yuvarlak); box-shadow: 0 18px 50px rgba(23, 19, 15, .3); color: var(--metin);
}
.onay-penceresi::backdrop { background: rgba(23, 19, 15, .5); }
.onay-metin { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; }
.onay-dugmeler { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.onay-dugmeler .btn { min-width: 110px; padding: 10px 16px; }
.btn-tehlike-dolu { background: var(--kirmizi); color: #fff; }
.btn-tehlike-dolu:hover { background: #a2301f; }
@media (max-width: 820px) {
    .onay-dugmeler .btn { flex: 1 1 0; }
}

/* ---------- Telefonda sayfa kaymasını önleme ---------- */
/* Izgara hücresi içeriği (uzun tablo, uzun kelime) sütunu genişletip sayfayı yana kaydırmasın. */
.form-izgara > *, .rapor-izgara > * { min-width: 0; }

@media screen and (max-width: 820px) {
    /* Son güvenlik: içerik taşsa bile sayfa yatayda kaymaz. "clip" kaydırma kabı oluşturmaz,
       sipariş ekranındaki yapışkan toplam çubuğu çalışmaya devam eder. */
    .yonetim-icerik { overflow-x: clip; }

    /* iPhone Safari, 16px'ten küçük yazılı kutuya dokununca sayfayı yakınlaştırır ve sayfa
       kayık kalır. Telefonda tüm form kutuları 16px. */
    body.yonetim input:not([type=checkbox]):not([type=radio]),
    body.yonetim select,
    body.yonetim textarea { font-size: 16px; }
}