:root {
  --zemin: #f6f7f9; --kart: #ffffff; --metin: #1b1f24; --soluk: #69707a; --cizgi: #e3e6ea;
  --vurgu: #1f6feb; --vurgu-metin: #ffffff; --kirmizi: #c62828; --yesil: #1e8c3c; --sari: #a06a00;
  --sari-zemin: #fff4d6; --kirmizi-zemin: #fdecec; --yesil-zemin: #e8f6ec; --bant: #f3f5f8;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --yaricap: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0f1216; --kart: #171b21; --metin: #e6e9ed; --soluk: #9aa3ad; --cizgi: #2a3038;
    --vurgu: #4c8dff; --kirmizi: #ff6b6b; --yesil: #4cc276; --sari: #e0b450; --sari-zemin: #3a2f12;
    --kirmizi-zemin: #3a1717; --yesil-zemin: #12301d; --bant: #1c2128; --golge: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; }
main.ortala { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

.ust { display: flex; align-items: center; gap: 20px; padding: 10px 16px; background: var(--kart); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.logo { font-weight: 700; color: var(--metin); display: flex; align-items: center; gap: 8px; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--vurgu); display: inline-block; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 20%, transparent); margin-right: 8px; }
.ust nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ust nav a { color: var(--soluk); padding: 6px 10px; border-radius: 8px; }
.ust nav a.aktif, .ust nav a:hover { color: var(--metin); background: var(--bant); text-decoration: none; }
.ust .sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.musteri-ad { color: var(--soluk); }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 18px; margin: 0 0 16px; }
.kart.dar { max-width: 420px; width: 100%; margin: 0 auto; }
.kart h1 { margin-bottom: 14px; display: flex; align-items: center; }
.bos-durum { color: var(--soluk); text-align: center; padding: 28px; }
.baslik-satir { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 16px; flex-wrap: wrap; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.kalin { font-weight: 600; }
.sag { text-align: right; }
.kirmizi { color: var(--kirmizi); } .yesil { color: var(--yesil); } .gri { color: var(--soluk); }

label { display: block; margin: 0 0 12px; font-weight: 500; }
input, select, textarea { font: inherit; color: inherit; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; padding: 9px 11px; width: 100%; margin-top: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--vurgu) 45%, transparent); border-color: var(--vurgu); }
textarea { resize: vertical; }
button { font: inherit; cursor: pointer; border-radius: 8px; padding: 9px 14px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin); white-space: nowrap; }
button.ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); font-weight: 600; }
button.bag { background: transparent; }
button.kucuk { padding: 5px 10px; font-size: 13px; }
button.tehlike { color: var(--kirmizi); }
.satir-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.satir-form input, .satir-form select { flex: 1 1 200px; width: auto; margin: 0; }
.blok-form button.ana { margin-top: 4px; }
fieldset { border: 1px solid var(--cizgi); border-radius: 8px; margin: 0 0 12px; padding: 10px 12px; }
legend { color: var(--soluk); padding: 0 6px; }
.secim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.secim, .anahtar { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; padding: 4px 0; }
.secim input, .anahtar input { width: auto; margin: 0; }
.anahtar { padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.sayi { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--cizgi); margin: 0; }
.sayi input { width: 90px; margin: 0; text-align: right; }
.duzenle input.h1 { font-size: 22px; font-weight: 700; border-color: transparent; background: transparent; padding: 4px 6px; flex: 1 1 260px; width: auto; }
.duzenle input.h1:hover { border-color: var(--cizgi); }

.uyari { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; }
.uyari.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.uyari.yesil { background: var(--yesil-zemin); color: var(--yesil); }
.etiket { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bant); color: var(--soluk); white-space: nowrap; }
.etiket.sari { background: var(--sari-zemin); color: var(--sari); }
.etiket.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.rozet { font-weight: 600; }

.liste { display: flex; flex-direction: column; gap: 8px; }
.liste-satir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); color: var(--metin); flex-wrap: wrap; }
a.liste-satir:hover { border-color: var(--vurgu); text-decoration: none; }
.etiketler { display: flex; gap: 6px; flex-wrap: wrap; }

.tablo-kap { overflow-x: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--soluk); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
table.durum tbody.grup:nth-child(even) tr.ozet { background: var(--bant); }
table.durum tr.ozet { cursor: pointer; }
table.durum tr.ozet:hover td { background: color-mix(in srgb, var(--vurgu) 6%, transparent); }
table.durum td.urun { font-weight: 600; }
.detay-ic { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 4px 12px; border-left: 3px solid var(--cizgi); }
.rakip-satir { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; }
table.ilanlar td.metin { word-break: break-word; }
table.ilanlar td.eylem { white-space: nowrap; text-align: right; }
table.ilanlar td.eylem form { display: inline; }
table.ilanlar tr:last-child td { border-bottom: none; }
.olaylar { padding-left: 18px; }
.pz-mobil { display: none; }
.kopya { display: flex; gap: 8px; } .kopya input { margin: 0; }
.bekliyor { animation: nabiz 1.4s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .45; } }

@media (max-width: 640px) {
  .ust { gap: 10px; } .ust .sag { margin-left: 0; width: 100%; justify-content: space-between; }
  th, td { padding: 8px; }
  table.durum th:nth-child(2), table.durum td:nth-child(2) { display: none; }
  .pz-mobil { display: inline-block; margin-top: 2px; }
  .rakip-satir { grid-template-columns: 1fr auto; } .rakip-satir .soluk { display: none; }
  table.ilanlar td.eylem { white-space: normal; }
}