/* KızılTilki – Modern Minimal UI (v2) */
/* Reset & variables */
:root{
  --bg: #0b0d10;
  --surface: #12161b;
  --muted-surface: #0e1318;
  --text: #e6eef8;
  --muted: #a5b2c2;
  --brand: #ff2d55;
  --brand-2:#7c4dff;
  --ok: #22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --card:#11161c;
  --border: #1f2937;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#07090c 70%);
  color:var(--text);
  font: 500 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.2px;
}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* Card */
.card{
  background:linear-gradient(180deg,var(--surface),var(--card));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .body{padding:16px}
.card .title{font-weight:700;font-size:1.05rem;margin:0 0 8px}
.card .meta{color:var(--muted);font-size:.9rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;border:1px solid transparent;
  padding:10px 16px;cursor:pointer;text-decoration:none;
  color:white;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:.25s all ease;
  box-shadow: 0 6px 16px rgba(255,45,85,.25);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,45,85,.35)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.ghost:hover{border-color:var(--text)}

/* Inputs */
.input, select, textarea{
  width:100%;background:var(--muted-surface);border:1px solid var(--border);
  color:var(--text);border-radius:12px;padding:12px 14px;outline:none;
}
.input:focus, select:focus, textarea:focus{border-color:var(--brand)}

/* Navbar */
.nav{
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.brand-logo{
  width:34px;height:34px;border-radius:10px;
  background: conic-gradient(from 230deg at 50% 50%, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(124,77,255,.4), inset 0 0 16px rgba(255,255,255,.06);
}
.nav a{color:var(--text);text-decoration:none}
.menu{display:flex;gap:12px;align-items:center}
.menu a{padding:8px 12px;border-radius:10px;border:1px solid transparent}
.menu a:hover{background:var(--muted-surface)}
.menu .cta{padding:9px 14px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 8px 18px rgba(124,77,255,.35)}

.hamburger{display:none;border:1px solid var(--border);border-radius:12px;padding:10px}
@media (max-width:860px){
  .menu{display:none}
  .hamburger{display:inline-flex}
  .mobile{display:none;position:fixed;inset:60px 12px auto 12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:10px}
  .mobile a{display:block;padding:12px 10px;border-radius:10px}
  .mobile a:hover{background:var(--muted-surface)}
  .mobile.open{display:block}
}

/* Footer */
.footer{margin:40px 0 60px;color:var(--muted);font-size:.95rem}
.footer .row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:16px}
.badge{display:inline-block;background:var(--muted-surface);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted)}

/* Utilities */
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:18px}.mt-6{margin-top:26px}
.mx-auto{margin-left:auto;margin-right:auto}
.hidden{display:none}
.max-w{max-width:900px}
.shadow{box-shadow:var(--shadow)}

/* Media elements commonly used by video grids */
.video-thumb{position:relative;aspect-ratio:16/9;background:#0e1013}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-thumb .pill{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;padding:6px 8px;border-radius:999px;font-size:.8rem}
video{max-width:100%;height:auto;border-radius:12px}

/* Tables (for admin pages if any) */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:12px 14px;text-align:left}
.table tr{background:var(--surface);border:1px solid var(--border)}
.table tr:hover{background:var(--muted-surface)}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:var(--surface);border:1px solid var(--border);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow)}