/* ── Admin Panel CSS ── */
:root {
  --bg:       #0e0c09;
  --bg2:      #131110;
  --bg3:      #1a1714;
  --bg4:      #201d19;
  --surface:  #252018;
  --red:      #C1121F;
  --red2:     #D91A2A;
  --gold:     #B8922A;
  --white:    #F8F4EF;
  --off:      #E8E0D5;
  --muted:    #9A9189;
  --border:   rgba(248,244,239,.08);
  --bdr:      rgba(193,18,31,.25);
  --green:    #27ae60;
  --yellow:   #d4a017;

  --ff-d: 'Cormorant Garamond',Georgia,serif;
  --ff:   'Barlow',system-ui,sans-serif;
  --ffc:  'Barlow Condensed',system-ui,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:var(--ff); background:var(--bg); color:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; font-size:inherit; }
::selection { background:var(--red); color:#fff; }

/* ── Login ── */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-wrap { width:100%; padding:2rem; }
.login-box {
  background:var(--bg3); border:1px solid var(--border);
  max-width:380px; margin:auto; padding:2.5rem 2rem;
}
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:2rem; }
.login-logo svg { width:24px; height:30px; color:var(--red); flex-shrink:0; }
.login-logo strong { display:block; font-family:var(--ff-d); font-size:1.1rem; color:var(--white); }
.login-logo span { font-size:0.68rem; font-family:var(--ffc); letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.login-form { display:flex; flex-direction:column; gap:1.1rem; }
.btn-login {
  width:100%; padding:0.9rem; background:var(--red); border:none;
  color:#fff; font-family:var(--ffc); font-size:0.82rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  transition:background 0.25s;
}
.btn-login:hover { background:var(--red2); }
.login-back { display:block; text-align:center; margin-top:1.5rem; font-size:0.78rem; color:var(--muted); transition:color 0.2s; }
.login-back:hover { color:var(--white); }

/* ── Layout ── */
.admin-layout { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.sidebar {
  width:230px; background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
  z-index:100;
}
.sidebar-logo {
  padding:1.4rem 1.2rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-logo svg { width:18px; height:22px; color:var(--red); }
.sidebar-logo strong { display:block; font-family:var(--ff-d); font-size:0.95rem; color:var(--white); }
.sidebar-logo span { font-size:0.58rem; font-family:var(--ffc); letter-spacing:0.18em; color:var(--muted); text-transform:uppercase; }
.sidebar-nav { flex:1; padding:1rem 0; overflow-y:auto; }
.sidebar-nav a {
  display:flex; align-items:center; gap:10px;
  padding:0.65rem 1.2rem;
  font-size:0.8rem; font-weight:600; font-family:var(--ffc); letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); transition:all 0.2s; border-left:2px solid transparent;
}
.sidebar-nav a:hover { color:var(--white); background:rgba(255,255,255,.04); }
.sidebar-nav a.active { color:var(--white); background:rgba(193,18,31,.1); border-left-color:var(--red); }
.sidebar-nav a svg { width:15px; height:15px; flex-shrink:0; }
.sidebar-section {
  font-family:var(--ffc); font-size:0.6rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(154,145,137,.5); padding:1.2rem 1.2rem 0.4rem;
}
.sidebar-footer { padding:1rem 1.2rem; border-top:1px solid var(--border); }
.sidebar-footer a { display:flex; align-items:center; gap:8px; font-size:0.75rem; color:var(--muted); transition:color 0.2s; }
.sidebar-footer a:hover { color:var(--white); }
.sidebar-footer a svg { width:14px; height:14px; }

/* ── Main Content ── */
.main-content { margin-left:230px; flex:1; min-height:100vh; }

/* ── Topbar ── */
.topbar {
  position:sticky; top:0; z-index:90;
  background:rgba(19,17,16,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 2rem; height:58px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar h1 { font-family:var(--ff-d); font-size:1.1rem; font-weight:400; color:var(--white); }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-right a {
  font-family:var(--ffc); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); padding:0.4rem 0.9rem; border:1px solid var(--border); transition:all 0.2s;
}
.topbar-right a:hover { color:var(--white); border-color:rgba(255,255,255,.2); }
.topbar-right a.danger { color:var(--red); border-color:var(--bdr); }
.topbar-right a.danger:hover { background:rgba(193,18,31,.1); }

/* ── Page Content ── */
.page { padding:2rem; max-width:1100px; }

/* ── Alerts ── */
.alert { padding:0.75rem 1.1rem; font-size:0.84rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:8px; }
.alert--success { background:rgba(39,174,96,.1); border:1px solid rgba(39,174,96,.3); color:#6fcf97; }
.alert--error   { background:rgba(193,18,31,.1);  border:1px solid rgba(193,18,31,.3);  color:#ff8a8a; }
.alert--warning { background:rgba(212,160,23,.1); border:1px solid rgba(212,160,23,.3); color:#f5c842; }
.alert svg { width:16px; height:16px; flex-shrink:0; }

/* ── Cards ── */
.card {
  background:var(--bg3); border:1px solid var(--border);
  margin-bottom:1.5rem;
}
.card-head {
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.card-head h2 { font-family:var(--ffc); font-size:0.82rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.card-body { padding:1.5rem; }

/* ── Stats ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--border); margin-bottom:2rem; }
.stat-box { background:var(--bg3); padding:1.3rem 1.5rem; }
.stat-box strong { display:block; font-family:var(--ff-d); font-size:2rem; font-weight:700; color:var(--red); line-height:1; }
.stat-box span { font-size:0.72rem; font-family:var(--ffc); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }

/* ── Forms ── */
.field { margin-bottom:1.2rem; }
.field label {
  display:block; font-family:var(--ffc); font-size:0.7rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:0.45rem;
}
.field label .req { color:var(--red); margin-left:2px; }
.field input[type=text],
.field input[type=number],
.field input[type=url],
.field input[type=password],
.field textarea,
.field select {
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:var(--white); padding:0.7rem 0.9rem;
  font-size:0.88rem; transition:border 0.2s; resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--red); background:rgba(193,18,31,.04);
}
.field select option { background:var(--bg3); }
.field-hint { font-size:0.72rem; color:var(--muted); margin-top:4px; }
.char-cnt { font-size:0.68rem; text-align:right; color:var(--muted); margin-top:3px; }
.char-cnt.warn { color:var(--yellow); }
.char-cnt.over { color:var(--red); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--ffc); font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:0.65rem 1.4rem; border:1px solid transparent; transition:all 0.2s; cursor:pointer; }
.btn svg { width:14px; height:14px; }
.btn--red { background:var(--red); border-color:var(--red); color:#fff; }
.btn--red:hover { background:var(--red2); border-color:var(--red2); }
.btn--outline { background:transparent; border-color:var(--border); color:var(--muted); }
.btn--outline:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.btn--green { background:var(--green); border-color:var(--green); color:#fff; }
.btn--green:hover { filter:brightness(1.1); }
.btn--sm { padding:0.42rem 0.85rem; font-size:0.7rem; }
.btn--danger { background:transparent; border-color:rgba(193,18,31,.3); color:var(--red); }
.btn--danger:hover { background:rgba(193,18,31,.12); }

/* ── Image Upload ── */
.img-upload-wrap { position:relative; }
.img-preview {
  width:100%; aspect-ratio:16/10; background:var(--bg4); border:1px dashed rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  overflow:hidden; cursor:pointer; transition:border-color 0.2s;
  position:relative;
}
.img-preview:hover { border-color:var(--red); }
.img-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.img-preview-label {
  position:relative; z-index:1;
  font-family:var(--ffc); font-size:0.7rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.img-preview-label svg { width:24px; height:24px; }
input[type=file] { display:none; }

/* ── Product Table ── */
.product-table { width:100%; border-collapse:collapse; }
.product-table th {
  font-family:var(--ffc); font-size:0.68rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); padding:0.6rem 0.9rem; text-align:left;
  border-bottom:1px solid var(--border); background:var(--bg4);
}
.product-table td { padding:0.7rem 0.9rem; border-bottom:1px solid var(--border); font-size:0.84rem; vertical-align:middle; }
.product-table tr:hover td { background:rgba(255,255,255,.025); }
.product-table .prod-img { width:48px; height:32px; object-fit:cover; border:1px solid var(--border); }
.product-table .prod-img-placeholder { width:48px; height:32px; background:var(--bg4); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.product-table .prod-img-placeholder svg { width:16px; height:16px; color:var(--bg4); filter:brightness(2); }
.badge { display:inline-flex; padding:2px 8px; font-family:var(--ffc); font-size:0.62rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; }
.badge--pide  { background:rgba(184,146,42,.15); color:var(--gold); border:1px solid rgba(184,146,42,.25); }
.badge--kebap { background:rgba(193,18,31,.15); color:#e05; border:1px solid rgba(193,18,31,.25); }
.badge--on  { background:rgba(39,174,96,.12); color:#6fcf97; border:1px solid rgba(39,174,96,.2); }
.badge--off { background:rgba(154,145,137,.1); color:var(--muted); border:1px solid var(--border); }
.tbl-actions { display:flex; gap:6px; }

/* ── Toggle ── */
.toggle-wrap { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--muted); }
.toggle { position:relative; width:40px; height:22px; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute; inset:0;
  background:var(--bg4); border:1px solid var(--border); border-radius:11px;
  cursor:pointer; transition:background 0.25s;
}
.toggle-slider::after {
  content:''; position:absolute;
  width:14px; height:14px; border-radius:50%;
  top:3px; left:3px; background:var(--muted);
  transition:transform 0.25s, background 0.25s;
}
.toggle input:checked + .toggle-slider { background:rgba(193,18,31,.2); border-color:var(--bdr); }
.toggle input:checked + .toggle-slider::after { transform:translateX(18px); background:var(--red); }

/* ── SEO Tips ── */
.seo-tips { background:var(--bg4); border-left:2px solid var(--red); padding:1rem 1.2rem; margin-top:1.5rem; }
.seo-tips h4 { font-family:var(--ffc); font-size:0.7rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--red); margin-bottom:0.7rem; }
.seo-tips li { font-size:0.78rem; color:var(--muted); padding:0.2rem 0; }
.seo-tips li::before { content:'✓ '; color:var(--red); }

/* ── Modal ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-backdrop.hidden { display:none; }
.modal { background:var(--bg3); border:1px solid var(--border); width:100%; max-width:600px; max-height:90vh; overflow-y:auto; }
.modal-head { padding:1.1rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg3); z-index:1; }
.modal-head h3 { font-family:var(--ffc); font-size:0.82rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.modal-close { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; transition:color 0.2s; }
.modal-close:hover { color:var(--white); }
.modal-close svg { width:18px; height:18px; }
.modal-body { padding:1.5rem; }
.modal-foot { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:0.75rem; }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); transition:transform 0.3s; }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .page { padding:1.2rem; }
  .field-row, .field-row-3 { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
}