:root{
  --vurgu:#d71920; --vurgu-koyu:#a31218;
  --cerceve:#d9dee3; --yazi:#1c2733; --soluk:#5b6b7b;
  --zemin:#f2f4f7; --ok:#177a3c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--zemin);color:var(--yazi);font-size:15px}
h1{font-size:22px;margin:0 0 4px}
p{margin:0 0 8px}
a{color:var(--vurgu)}
.btn{display:inline-block;background:var(--vurgu);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{background:var(--vurgu-koyu)}
.btn-ikincil{background:#fff;color:var(--yazi);border:1px solid var(--cerceve)}
.btn-ikincil:hover{background:#eef1f4;color:var(--yazi)}
.btn-tehlike{background:#fff;color:#b91c1c;border:1px solid #eec3c3}
.btn-tehlike:hover{background:#fdecec}
.btn-genis{width:100%;padding:11px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--cerceve);border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:var(--yazi)}
textarea{resize:vertical}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 3px;color:#3c4a58}
label.chk{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;margin:6px 0}
label.chk input{width:auto}

/* ÜST MENÜ */
.ust{background:#14212e;color:#fff;position:sticky;top:0;z-index:50}
.ust-ic{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:0 16px;height:54px}
.ust-ic .logo{color:#fff;font-weight:800;font-size:16px;text-decoration:none}
.ust nav{display:flex;gap:4px;flex:1}
.ust nav a{color:#c6d2dd;text-decoration:none;padding:7px 12px;border-radius:7px;font-size:14px}
.ust nav a:hover{background:#23384b;color:#fff}
.ust nav a.on{background:var(--vurgu);color:#fff}
.ust-sag{display:flex;align-items:center;gap:10px}
.ust-sag .kisi{font-size:13px;color:#c6d2dd}
.hesap{position:relative}
.hesap summary{cursor:pointer;list-style:none;background:#23384b;padding:7px 12px;border-radius:7px;font-size:13px}
.hesap[open] .hesap-menu{display:flex}
.hesap-menu{position:absolute;right:0;top:38px;background:#fff;border:1px solid var(--cerceve);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.14);padding:12px;min-width:230px;z-index:60;display:none;flex-direction:column;gap:8px}
.hesap-menu form{display:flex;flex-direction:column;gap:6px}
.sifre-form input{padding:7px 9px;font-size:14px}
details.hesap summary::-webkit-details-marker{display:none}
details.hesap > summary::after{content:" ▾";font-size:10px;color:#8fa3b5}
details.hesap[open] > summary::after{content:" ▴"}
details.hesap[open] summary{background:#31485e}
details.hesap form{display:flex;flex-direction:column;gap:6px}
details.hesap .btn{padding:7px 10px;font-size:13px}

.govde{max-width:1400px;margin:0 auto;padding:20px 16px 60px}
.alt{max-width:1400px;margin:0 auto;padding:0 16px 24px;color:var(--soluk);font-size:12px}
.sayfa-baslik{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.soluk{color:var(--soluk)}
.kucuk{font-size:12px}
.bos{border:2px dashed var(--cerceve);border-radius:12px;padding:48px;text-align:center;color:var(--soluk);background:#fff}
.mesaj{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:14px;font-weight:600}
.mesaj.ok{background:#e6f6ec;color:var(--ok);border:1px solid #b8e3c9}
.mesaj.hata{background:#fdecec;color:#b91c1c;border:1px solid #f2c4c4}

/* GİRİŞ */
body.giris-sayfa{background:linear-gradient(160deg,#14212e 0%,#24405c 100%);min-height:100vh;display:flex;align-items:center;justify-content:center}
.giris-kutu{background:#fff;border-radius:16px;padding:36px 32px;width:380px;max-width:94vw;box-shadow:0 18px 60px rgba(0,0,0,.3);text-align:center}
.giris-logo{font-size:44px}
.giris-kutu h1{margin:6px 0 2px;font-size:24px}
.giris-alt{color:var(--soluk);font-size:13px;margin-bottom:16px}
.giris-form{display:flex;flex-direction:column;gap:10px;text-align:left}
.giris-form input{padding:11px 12px;font-size:16px}

/* TASARIM LİSTESİ */
.bolum-baslik{font-size:17px;margin:26px 0 12px;padding-top:16px;border-top:1px solid var(--cerceve)}
.tasarim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tasarim-kart{background:#fff;border:1px solid var(--cerceve);border-radius:12px;padding:14px}
.tasarim-kart h3{margin:8px 0 2px;font-size:16px}
.tasarim-ust{display:flex;justify-content:space-between;align-items:center}
.durum-roz{font-size:12px;font-weight:700;padding:4px 9px;border-radius:20px}
.durum-roz.calisma{background:#eef2f6;color:#41505f}
.durum-roz.yayin{background:#e6f6ec;color:var(--ok)}
.kart-islemler{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.kart-islemler form{display:inline}

/* TABLO */
.tablo-kaydir{overflow-x:auto;background:#fff;border:1px solid var(--cerceve);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid #e8ecf0;vertical-align:middle}
th{background:#f7f9fb;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:#51606e;position:sticky;top:0}
tr.uyari td{background:#fff8e6}
.foto-mini{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid #e4e8ec;border-radius:8px;padding:2px}
.pasif-row{opacity:.45}
.yetki-cip{display:inline-block;background:#eef2f6;border-radius:14px;padding:2px 9px;font-size:11.5px;margin:1px 2px;white-space:nowrap}
.yetki-cip.yon{background:#fdeaea;color:#a31218}
.arama-cubugu{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.arama-cubugu input{max-width:340px}
.arama-cubugu select{max-width:220px}
.filtre-uzak{flex:1}

/* MODAL */
.modal-katman{position:fixed;inset:0;background:rgba(10,18,26,.55);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow-y:auto}
.modal-katman.acik{display:flex}
.modal-kutu{background:#fff;border-radius:14px;max-width:760px;width:100%;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:88vh;display:flex;flex-direction:column}
.modal-kutu .modal-baslik{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-kutu h2{margin:0;font-size:18px}
.modal-kapat{background:none;border:0;font-size:22px;cursor:pointer;color:var(--soluk);line-height:1}
.modal-icerik{overflow-y:auto;flex:1}
.modal-ayak{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.secenek-kutulari{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secenek-kutulari label{display:block;border:1.5px solid var(--cerceve);border-radius:10px;padding:8px 10px;margin:0;cursor:pointer;font-weight:500;transition:border-color .1s,background .1s}
.secenek-kutulari label.secili{border-color:var(--vurgu);background:#fdf3f3;color:var(--vurgu)}
.secenek-kutulari input{display:none}

/* Düzenleme paneli küçük formları */
.panel-kompakt input,.panel-kompakt select,.panel-kompakt textarea{padding:7px 9px;font-size:14px}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media(max-width:700px){
  .ikili{grid-template-columns:1fr}
  .ust-ic{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  .ust nav{order:3;flex-basis:100%}
  .govde{padding:14px 10px 50px}
  .secenek-kutulari{grid-template-columns:1fr}
}

/* ===== Editör ===== */
.ed-ust{display:flex;align-items:center;gap:6px;max-width:1500px;margin:0 auto;padding:8px 12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;background:#fff;border:1px solid var(--cerceve);border-radius:12px;margin-bottom:14px;position:sticky;top:var(--ed-ust-top,54px);z-index:40;box-shadow:0 6px 12px -8px rgba(20,33,46,.12)}
.ed-ust.yapistik{border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 10px 18px -10px rgba(20,33,46,.45)}
.ed-geri{flex:0 0 auto;white-space:nowrap}
.ed-ust #ed-ad{max-width:240px;font-weight:700;font-size:15px;flex:0 0 auto}
.ed-ust .btn{flex:0 0 auto;padding:6px 10px;white-space:nowrap}
.ed-ust select{flex:0 0 auto}
.ed-ust .ed-kagit,.ed-ust .durum-roz,.ed-ust #ed-kayit-durumu{flex:0 0 auto;white-space:nowrap}
.ed-kagit{font-size:12.5px;color:var(--soluk);white-space:nowrap}
.ed-bosluk{flex:1}
.ed-durum-sec{max-width:150px;padding:7px}
.ed-govde{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:14px;align-items:start;max-width:1500px;margin:0 auto}
.ed-sol,.ed-sag{display:flex;flex-direction:column;gap:14px}
.ed-blok{background:#fff;border:1px solid var(--cerceve);border-radius:12px;padding:12px}
.ed-blok-baslik{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#41505f;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.ed-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;max-height:320px;overflow-y:auto}
.liste-o{display:flex;align-items:center;gap:8px;border:1px solid var(--cerceve);border-radius:9px;padding:6px 8px;cursor:pointer;background:#fff}
.liste-o:hover{border-color:#9fb2c4}
.liste-o.aktif{border-color:var(--vurgu);background:#fdf3f3}
.liste-no{background:#eef2f6;border-radius:7px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:0 0 auto;color:#41505f}
.liste-o.aktif .liste-no{background:var(--vurgu);color:#fff}
.liste-bilgi{flex:1;min-width:0;display:flex;flex-direction:column}
.liste-bilgi b{font-size:13px}
.liste-islem{display:flex;gap:2px}
.btn-mini2{background:none;border:0;color:#7b8a99;font-size:13px;cursor:pointer;padding:2px 4px;border-radius:5px}
.btn-mini2:hover{background:#eef2f6;color:#b91c1c}
.bos-mini{border:1.5px dashed var(--cerceve);border-radius:9px;padding:14px;text-align:center;color:var(--soluk);font-size:12.5px}
.ed-ipucu{margin:10px 0 0;line-height:1.45}
.btn-blok{width:100%}
/* orta sütun */
.ed-orta{min-width:0}
.ed-sayfa-alanlari{background:#fff;border:1px solid var(--cerceve);border-radius:12px;padding:10px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.ed-sat{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ed-sat>div{flex:1;min-width:170px}
.ed-sat label{font-size:11.5px;margin:0 0 2px;font-weight:600;color:#51606e}
.ed-sat input,.ed-sat select{padding:7px 9px;font-size:14px}
.ed-kagit-sec select{max-width:130px}
.soluk-lbl{color:#7b8a99}
.satir-duzen{display:flex;align-items:center;gap:10px;margin:2px 0 4px;flex-wrap:wrap}
.satir-duzen input[type=number]{width:90px;padding:7px 9px;font-size:14px;border:1px solid #c8d0d8;border-radius:6px}
.kanvas-alan{background:#dde3ea;border-radius:12px;height:calc(100vh - 380px);min-height:430px;overflow:auto;padding:10px;position:relative}
.kanvas-ic{display:flex;justify-content:center;align-items:flex-start;min-height:100%}
.kanvas-ic.genis{justify-content:flex-start}
.kanvas-ic.genis .kanvas-sayfa-host{margin:auto 0}
.kanvas-sayfa-host{box-shadow:0 4px 24px rgba(20,33,46,.28);background:#fff;flex:0 0 auto;margin:auto}
.kanvas-sayfa-host .bs-sayfa{overflow:hidden}
.ed-canvas-alt{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ed-zoom{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--cerceve);border-radius:9px;padding:3px 6px;box-shadow:0 1px 2px rgba(20,33,46,.06)}
.ed-zoom .btn{border:0;background:transparent;color:#33404e;padding:3px 9px;font-size:15px;line-height:1.15;border-radius:6px;min-width:auto}
.ed-zoom .btn:hover:not(:disabled){background:#e8edf2}
.ed-zoom .btn:disabled{opacity:.35;cursor:default}
.ed-zoom-deger{min-width:54px;text-align:center;font-weight:700;font-size:13px;color:#1c2733}
.ed-olcek{margin-top:0;font-size:12.5px;color:var(--soluk);text-align:center}
.ed-olcek.uyari{color:#b91c1c;font-weight:600}
/* üst/alt bilgi stil satırları (boyut + renk) */
.ed-stil-sat{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;background:#f6f8fa;border:1px solid #e3e8ee;border-radius:6px;padding:5px 7px;margin-top:6px}
.ed-stil-sat .stil-etiket{font-weight:700;font-size:11px;color:#1c2733;min-width:54px}
.ed-stil-sat label{margin:0}
.ed-stil-sat input[type=number]{width:56px;padding:2px 4px;font-size:12px;border:1px solid #c8d0d8;border-radius:4px}
.ed-stil-sat input[type=color]{width:36px;height:24px;padding:1px;border:1px solid #c8d0d8;border-radius:4px;background:#fff;cursor:pointer}
.buton-grup{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-mini{padding:4px 8px;font-size:12px}
.logo-onizle{width:30px;height:auto;max-height:34px;border:1px solid #c8d0d8;border-radius:4px;display:none;vertical-align:middle}
.ed-stil-sat select{font-size:12px;padding:2px 4px;border:1px solid #c8d0d8;border-radius:4px;max-width:200px}
/* sağ panel */
.sag-butonlar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sag-butonlar .btn{padding:7px 10px;font-size:13px}
.sag-satir-islem{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.btn-mini{padding:4px 8px;font-size:12px;border-radius:7px}
.sag-kutular{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow-y:auto}
.sag-kutu{display:flex;align-items:center;gap:8px;border:1px solid var(--cerceve);border-radius:9px;padding:6px;background:#fff}
.sag-simge{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sag-simge img{max-width:38px;max-height:38px;object-fit:contain}
.sg-simge{font-size:19px;color:#41505f}
.sag-bilgi{flex:1;min-width:0;display:flex;flex-direction:column}
.sag-bilgi b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sag-kutu .btn-mini{flex:0 0 auto;padding:3px 7px}
/* ürün seçici */
.pk-ara{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.pk-ara input{flex:1}
.pk-ara select{max-width:230px}
.pk-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px;overflow-y:auto;max-height:52vh;padding:2px}
.pk-kart{border:1.5px solid var(--cerceve);border-radius:10px;padding:6px;cursor:pointer;display:flex;flex-direction:column;background:#fff;position:relative;transition:border-color .1s}
.pk-kart:hover{border-color:#8fa3b5}
.pk-kart img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:7px}
.pk-yok{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f2f4f7;border-radius:7px;color:#9aa8b6;font-size:11px}
.pk-ad{font-size:11px;font-weight:700;margin-top:4px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:27px}
.pk-alt{font-size:9.5px;color:var(--soluk);line-height:1.25}
.pk-fiyat{position:absolute;top:10px;right:10px;background:#d71920;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.pk-chk{margin:4px 0 0;font-size:12px}
.pk-chk input{width:auto}
.pk-say{font-size:13px;color:var(--soluk);align-self:center}
/* kutu düzenleme */
.ku-urunler{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;max-height:150px;overflow-y:auto}
.ku-urun{display:flex;gap:8px;align-items:center;background:#f7f9fb;border:1px solid #e8ecf0;border-radius:8px;padding:6px}
.ku-urun img{width:34px;height:34px;object-fit:contain}
.ku-urun b{font-size:13px}
.ku-ayak{justify-content:flex-start}
.btn-blok{margin-bottom:8px}
/* banner */
.bn-onizleme{border:1.5px dashed var(--cerceve);border-radius:10px;min-height:120px;display:flex;align-items:center;justify-content:center;background:#fafbfc;margin-bottom:6px;padding:8px;overflow:hidden}
.bn-onizleme img{max-width:100%;max-height:220px;object-fit:contain}
/* liste üstü arama satırı */
.filtre-satiri{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filtre-satiri input{max-width:300px}
.pasif-etiket{color:#b91c1c;font-size:11px;font-weight:700}
@media(max-width:1100px){
  .ed-govde{grid-template-columns:1fr}
  .ed-sol{flex-direction:row;flex-wrap:wrap}
  .ed-sol .ed-blok{flex:1 1 260px}
  .kanvas-alan{height:70vh}
}
@media(max-width:700px){
  .pk-liste{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .ed-sat{flex-direction:column;align-items:stretch}
  .pk-ara{flex-wrap:wrap}
}