:root { --zemin:#f4f5f7; --kart:#fff; --yazi:#1c2330; --soluk:#6b7483; --cizgi:#e3e6eb; --ana:#f47b20; --ana-koyu:#d9650d; --yesil:#1a8f4c; --kirmizi:#c6352b; --sari:#b7791f; --mavi:#2563c9; --mor:#6d4bc4; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, "Segoe UI", sans-serif; background:var(--zemin); color:var(--yazi); }
h1 { margin:0 0 4px; font-size:26px; } h2 { margin:0 0 6px; font-size:20px; }
.soluk { color:var(--soluk); font-size:14px; font-weight:400; } .hata { color:var(--kirmizi); font-weight:600; } .iyiYazi { color:var(--yesil); }
.bosluk { flex:1; } .sag { text-align:right; white-space:nowrap; }
button { font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--cizgi); background:#fff; padding:9px 16px; }
button:disabled { opacity:.5; cursor:wait; }
button.ana { background:var(--ana); border-color:var(--ana); color:#fff; font-weight:700; padding:11px 22px; } button.ana:hover { background:var(--ana-koyu); }
button.duz { background:transparent; } button.kucuk { padding:4px 10px; font-size:14px; margin-top:4px; }
input:not([type=checkbox]) { font:inherit; width:100%; padding:11px 12px; border:1px solid var(--cizgi); border-radius:10px; margin-top:4px; }
label { display:block; margin:12px 0; font-weight:600; }
.kart { background:var(--kart); border:1px solid var(--cizgi); border-radius:14px; padding:18px 20px; margin:0 0 14px; }
.kart.dar { max-width:380px; margin:12vh auto 0; }
header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff; border-bottom:3px solid var(--ana); padding:10px 20px; }
.marka { font-size:20px; }
nav { display:flex; gap:6px; flex-wrap:wrap; } nav button { border:0; background:transparent; font-weight:600; } nav button.secili { background:#fff1e4; color:var(--ana-koyu); }
#durumSeridi { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; padding:16px 20px 0; max-width:1200px; margin:0 auto; }
.kutu { background:#fff; border:1px solid var(--cizgi); border-left:5px solid var(--cizgi); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; margin:0; font-weight:400; }
.kutu.iyi { border-left-color:var(--yesil); } .kutu.kotu { border-left-color:var(--kirmizi); } .kutu.genis { grid-column:1 / -1; }
.kutu span { color:var(--soluk); font-size:14px; } .kutu.anahtar { cursor:pointer; } .kutu.anahtar input { width:20px; height:20px; }
main { max-width:1200px; margin:0 auto; padding:16px 20px 60px; }
.siparis .ust { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:17px; }
table { width:100%; border-collapse:collapse; margin:10px 0 4px; } td, th { text-align:left; padding:8px 8px; border-top:1px solid var(--cizgi); vertical-align:top; }
td { overflow-wrap:anywhere; } html, body { max-width:100%; overflow-x:hidden; } .kutu { min-width:0; }
td.adet { white-space:nowrap; font-weight:700; width:1%; } tr.eksik td { background:#fff8e6; } tr.kotuSatir td { color:var(--kirmizi); }
.rozet { display:inline-block; padding:2px 10px; border-radius:99px; font-size:13px; font-weight:700; color:#fff; }
.rozet.sari { background:var(--sari); } .rozet.mavi { background:var(--mavi); } .rozet.mor { background:var(--mor); } .rozet.yesil { background:var(--yesil); } .rozet.kirmizi { background:var(--kirmizi); } .rozet.gri { background:#8a93a1; }
.dugmeler { display:flex; gap:10px; margin-top:8px; }
dialog { border:0; border-radius:16px; padding:0; width:min(640px, 94vw); } dialog::backdrop { background:rgba(20,25,35,.5); } .dlg { padding:22px; }
.secim { list-style:none; margin:10px 0; padding:0; max-height:50vh; overflow:auto; } .secim button { width:100%; text-align:left; margin:3px 0; display:flex; flex-direction:column; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1c2330; color:#fff; padding:12px 20px; border-radius:12px; max-width:90vw; z-index:9; } #toast.kotu { background:var(--kirmizi); }
@media (max-width:640px) { td.sag { display:none; } }