/* ====================================================
   YangilikPress — Admin Panel CSS
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

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

:root {
  --g0:#f3fbf6; --g1:#e4f5ea; --g2:#c8ecd5; --g3:#a3d9b8;
  --gp:#2a7d4f; --gd:#1a5c39; --ga:#00c85a; --gm:#4caf7d;
  --tx:#0f1f14; --ts:#3a5c45; --tm:#6b8f78; --tl:#9bbda8;
  --wh:#ffffff; --cr:#e53935; --co:#ff6f00;
  --sh:0 4px 24px rgba(42,125,79,.10);
  --sh2:0 8px 40px rgba(42,125,79,.16);
  --r:14px; --r2:22px; --r3:8px;
  --ff:"DM Sans",sans-serif; --fh:"Playfair Display",serif;
  --tr:all .25s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior:smooth; }
body { font-family:var(--ff); background:var(--g0); color:var(--tx); min-height:100vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--g1); }
::-webkit-scrollbar-thumb { background:var(--gm); border-radius:99px; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes slideDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
@keyframes spin      { to{transform:rotate(360deg)} }

.fade-up { animation:fadeUp .5s both; }
.fade-up:nth-child(1){animation-delay:.05s}
.fade-up:nth-child(2){animation-delay:.12s}
.fade-up:nth-child(3){animation-delay:.20s}
.fade-up:nth-child(4){animation-delay:.28s}

/* ─── ADMIN TOPBAR ─── */
.admin-topbar {
  background:var(--gd); color:#fff; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:200;
  box-shadow:0 2px 16px rgba(0,0,0,.15); height:60px;
}
.admin-topbar-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--fh); font-size:18px; font-weight:800;
}
.admin-topbar-logo .badge {
  font-size:11px; background:rgba(255,255,255,.2);
  padding:2px 8px; border-radius:99px; font-family:var(--ff); font-weight:500;
}
.admin-nav { display:flex; align-items:center; gap:6px; }
.admin-nav a {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; padding:7px 14px; border-radius:var(--r3);
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); transition:var(--tr);
}
.admin-nav a:hover { background:rgba(255,255,255,.2); }
.admin-nav a.active { background:var(--ga); color:#fff; }
.admin-nav a.logout { background:rgba(229,57,53,.25); color:#ffb3b0; }
.admin-nav a.logout:hover { background:rgba(229,57,53,.5); color:#fff; }

/* ─── ADMIN WRAP ─── */
.admin-wrap { max-width:1200px; margin:32px auto 60px; padding:0 24px; }

/* ─── STATS ─── */
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.stat-card {
  background:var(--wh); border-radius:var(--r); padding:20px 18px;
  box-shadow:var(--sh); display:flex; align-items:center; gap:14px;
}
.stat-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.si-green  { background:var(--g1); color:var(--gp); }
.si-blue   { background:#e3f2fd; color:#1976d2; }
.si-orange { background:#fff3e0; color:#e65100; }
.si-purple { background:#f3e5f5; color:#7b1fa2; }
.stat-info h3 { font-size:26px; font-weight:800; color:var(--tx); }
.stat-info p  { font-size:12px; color:var(--tm); font-weight:500; margin-top:2px; }

/* ─── CARDS ─── */
.admin-card { background:var(--wh); border-radius:var(--r2); box-shadow:var(--sh); overflow:hidden; }
.admin-card-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:2px solid var(--g1);
}
.admin-card-hd h2 {
  font-family:var(--fh); font-size:18px; font-weight:800; color:var(--tx);
  display:flex; align-items:center; gap:8px;
}

/* ─── TABLE ─── */
.adm-table { width:100%; border-collapse:collapse; }
.adm-table thead th {
  background:var(--g0); font-size:11px; font-weight:700; color:var(--ts);
  letter-spacing:.07em; text-transform:uppercase; padding:12px 16px; text-align:left;
}
.adm-table tbody tr { border-bottom:1px solid var(--g1); transition:background .15s; }
.adm-table tbody tr:hover { background:var(--g0); }
.adm-table tbody td { padding:12px 16px; font-size:13px; color:var(--tx); vertical-align:middle; }
.title-cell {
  font-weight:600; max-width:260px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* ─── BADGES ─── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.badge-green    { background:var(--g1); color:var(--gp); }
.badge-orange   { background:#fff3e0; color:#e65100; }
.badge-featured { background:linear-gradient(135deg,#ff6f00,#ffa000); color:#fff; }
.badge-draft    { background:#f3e5f5; color:#7b1fa2; }
.badge-pub      { background:var(--g1); color:var(--gp); }

/* ─── ACTION BUTTONS ─── */
.tbl-actions { display:flex; align-items:center; gap:6px; }
.btn, a.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--r3); font-size:12px;
  font-weight:600; cursor:pointer; transition:var(--tr); border:none; text-decoration:none;
}
.btn-primary   { background:var(--gp); color:#fff; padding:9px 20px; font-size:13px; }
.btn-primary:hover { background:var(--gd); transform:translateY(-1px); color:#fff; }
.btn-primary:hover { box-shadow:0 4px 12px rgba(42,125,79,.3); }
.btn-edit   { background:var(--g1); color:var(--gp); }
.btn-edit:hover { background:var(--g2); }
.btn-del    { background:#fde8e8; color:#c62828; }
.btn-del:hover { background:#f8bbbb; }
.btn-view   { background:#e3f2fd; color:#1565c0; }
.btn-view:hover { background:#bbdefb; }
.btn-cancel {
  display:inline-flex; align-items:center; gap:6px; padding:11px 22px;
  border-radius:var(--r3); font-size:14px; font-weight:600; cursor:pointer;
  border:2px solid var(--g2); background:var(--wh); color:var(--ts); transition:var(--tr);
}
.btn-cancel:hover { border-color:var(--gm); background:var(--g1); color:var(--gp); }

/* ─── FORM ─── */
.form-wrap { max-width:820px; margin:0 auto; }
.form-card { background:var(--wh); border-radius:var(--r2); box-shadow:var(--sh); overflow:hidden; }
.form-card-hd {
  padding:22px 28px; border-bottom:2px solid var(--g1);
  background:linear-gradient(135deg,var(--g1),var(--wh));
  display:flex; align-items:center; gap:12px;
}
.form-card-hd h2 { font-family:var(--fh); font-size:20px; font-weight:800; color:var(--tx); }
.form-card-hd svg { color:var(--gp); }
.form-body { padding:28px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-group label {
  font-size:11px; font-weight:700; color:var(--ts);
  letter-spacing:.07em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px;
}
.form-group label svg { color:var(--gm); }
.form-control {
  padding:11px 14px; border:2px solid var(--g2); border-radius:var(--r3);
  font-size:14px; color:var(--tx); background:var(--g0); transition:var(--tr);
  outline:none; width:100%;
}
.form-control:focus {
  border-color:var(--gp); background:var(--wh);
  box-shadow:0 0 0 4px rgba(42,125,79,.1);
}
textarea.form-control { min-height:200px; resize:vertical; line-height:1.65; }
select.form-control { cursor:pointer; }
.form-hint { font-size:11px; color:var(--tl); margin-top:2px; }

.checkbox-wrap {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--g0); border-radius:var(--r3); border:2px solid var(--g1);
  cursor:pointer; transition:var(--tr);
}
.checkbox-wrap:hover { border-color:var(--gm); }
.checkbox-wrap input { width:18px; height:18px; cursor:pointer; accent-color:var(--gp); }
.checkbox-wrap span { font-size:13px; font-weight:600; color:var(--ts); display:flex; align-items:center; gap:6px; }

.form-actions { display:flex; gap:12px; align-items:center; margin-top:8px; padding-top:20px; border-top:2px solid var(--g1); }
.btn-save {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gp); color:#fff; padding:12px 28px;
  border-radius:var(--r3); font-size:14px; font-weight:700;
  cursor:pointer; border:none; transition:var(--tr);
  box-shadow:0 4px 14px rgba(42,125,79,.3);
}
.btn-save:hover {
  background:var(--gd); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(42,125,79,.4);
}

/* ─── IMG PREVIEW ─── */
.img-preview-wrap { margin-top:8px; }
.img-preview {
  width:100%; max-height:180px; object-fit:cover;
  border-radius:var(--r3); border:2px solid var(--g2);
  display:none;
}
.img-preview.show { display:block; }

/* ─── LOG TABLE ─── */
.log-ip { font-size:11px; color:var(--tl); font-family:monospace; }

/* ─── ALERTS ─── */
.alert {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:var(--r3); font-size:13px; font-weight:600;
  margin-bottom:20px; animation:slideDown .3s both;
}
.alert-success { background:#e8f5e9; color:#2e7d32; border:1.5px solid #a5d6a7; }
.alert-error   { background:#fde8e8; color:#c62828; border:1.5px solid #ef9a9a; }
.alert-info    { background:var(--g1); color:var(--gp); border:1.5px solid var(--g3); }

/* ─── LOGIN ─── */
.login-page {
  min-height:100vh;
  background:linear-gradient(135deg,var(--g0) 0%,var(--g2) 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
.login-deco { position:absolute; inset:0; pointer-events:none; }
.login-deco span {
  position:absolute; border-radius:50%;
  background:var(--gp); opacity:.07;
}
.login-deco span:nth-child(1) { width:400px;height:400px; top:-100px;right:-100px; animation:float 6s ease-in-out infinite; }
.login-deco span:nth-child(2) { width:300px;height:300px; bottom:-80px;left:-80px; animation:float 6s ease-in-out 2s infinite; }
.login-deco span:nth-child(3) { width:250px;height:250px; top:40%;left:50%; transform:translate(-50%,-50%); animation:float 6s ease-in-out 4s infinite; }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.login-card {
  background:var(--wh); border-radius:var(--r2);
  box-shadow:0 20px 60px rgba(42,125,79,.18);
  padding:44px; width:100%; max-width:420px;
  position:relative; z-index:1; animation:fadeUp .6s both;
}
.login-logo { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:32px; }
.login-logo-icon {
  width:64px; height:64px; background:var(--g1);
  border-radius:18px; display:flex; align-items:center; justify-content:center;
}
.login-logo h1 { font-family:var(--fh); font-size:26px; font-weight:800; color:var(--tx); }
.login-logo p { font-size:13px; color:var(--tm); }
.login-field { position:relative; margin-bottom:16px; }
.login-field svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--tl); }
.login-field input {
  padding:13px 14px 13px 42px; border:2px solid var(--g2); border-radius:var(--r3);
  font-size:14px; background:var(--g0); color:var(--tx); outline:none; width:100%; transition:var(--tr);
}
.login-field input:focus { border-color:var(--gp); background:var(--wh); box-shadow:0 0 0 4px rgba(42,125,79,.1); }
.login-btn {
  width:100%; padding:13px; background:var(--gp); color:#fff;
  border:none; border-radius:var(--r3); font-size:15px; font-weight:700;
  cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:8px;
}
.login-btn:hover { background:var(--gd); transform:translateY(-2px); box-shadow:0 6px 20px rgba(42,125,79,.35); }
.login-hint { text-align:center; margin-top:16px; font-size:12px; color:var(--tl); }
.login-back { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:16px; font-size:13px; font-weight:600; color:var(--gp); }
.login-back:hover { opacity:.8; }

/* ─── RESPONSIVE ─── */
@media (max-width:900px) {
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .admin-nav a span.txt { display:none; }
}
@media (max-width:600px) {
  .admin-stats { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .login-card { padding:28px 20px; }
  .admin-topbar { padding:0 12px; }
}