/* ======= Temel ayarlar ======= */
:root{
  --bg: #0b1324;
  --card: #121a2e;
  --soft: #1a2440;
  --muted: #7f8baa;
  --text: #f1f5ff;
  --accent: #4ea8ff;
  --accent-2: #5dd6b2;
  --danger: #ff6b6b;
  --ring: 0 0 0 3px rgba(78,168,255,.25);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -20%, #15204a 0%, #0b1324 45%, #0b1324 100%);
}

/* ======= Konteyner / başlık ======= */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
  padding:24px 0 48px;
}
.page-title{
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight:700;
  letter-spacing:.2px;
  margin:16px 0 24px;
  display:flex; gap:16px; align-items:center;
}
.page-actions{margin-left:auto; display:flex; gap:10px}

/* ======= Kart / panel ======= */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter: blur(6px);
}

/* ======= Butonlar ======= */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:10px 16px; border-radius:12px;
  background:linear-gradient(180deg, #4ea8ff, #3d86e6);
  color:#fff; font-weight:600; letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(78,168,255,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.05) }
.btn:focus{ outline:none; box-shadow: var(--ring) }
.btn.secondary{
  background:linear-gradient(180deg, #5dd6b2, #36b08f);
  box-shadow:0 8px 20px rgba(93,214,178,.25);
}
.btn.ghost{
  background:transparent; border:1px solid rgba(255,255,255,.15);
  color:var(--text);
}

/* ======= Formlar ======= */
.form-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(12, 1fr);
}
.form-col-6{ grid-column: span 6 }
.form-col-12{ grid-column: span 12 }
@media (max-width:900px){
  .form-col-6{ grid-column: span 12 }
}
.label{
  display:block; font-size:12px; color:var(--muted);
  margin:6px 2px 8px; letter-spacing:.2px;
}
.input, .select, .textarea, input[type="file"]{
  width:100%; color:var(--text);
  background:linear-gradient(180deg, #111a2f, #0f172a);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus, input[type="file"]:focus{
  border-color:rgba(78,168,255,.6); box-shadow:var(--ring);
}
.textarea{ min-height:120px; resize:vertical }

/* Checkbox list (mevcut görseller) */
.checklist{display:grid; gap:10px}
.checklist .item{
  display:flex; gap:10px; align-items:center;
  padding:10px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.checklist .thumb{
  inline-size:68px; block-size:52px; flex:0 0 68px;
  border-radius:10px; overflow:hidden; background:#0c1222;
  display:grid; place-items:center;
}
.checklist .thumb img{ width:100%; height:100%; object-fit:cover }

/* ======= Admin tablo (properties list) ======= */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.table thead th{
  text-align:left; font-weight:700; font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.04);
  padding:14px 16px; letter-spacing:.25px;
}
.table tbody td{
  padding:14px 16px; border-top:1px solid rgba(255,255,255,.07);
}
.table .thumb-td{
  width:92px;
}
.thumb-wrap{
  inline-size:76px; block-size:56px; border-radius:10px; overflow:hidden;
  background:#0c1222; border:1px solid rgba(255,255,255,.08)
}
.thumb-wrap img{ width:100%; height:100%; object-fit:cover }
.table tr:hover td{ background:rgba(255,255,255,.03) }

/* ======= Ön yüz – ilan kartları ======= */
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.col-3{ grid-column: span 3 }
.col-4{ grid-column: span 4 }
.col-6{ grid-column: span 6 }
.col-12{ grid-column: span 12 }
@media (max-width:1200px){
  .col-3{ grid-column: span 4 }
}
@media (max-width:900px){
  .col-3, .col-4, .col-6{ grid-column: span 6 }
}
@media (max-width:560px){
  .col-3, .col-4, .col-6{ grid-column: span 12 }
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(78,168,255,.55); box-shadow:0 16px 40px rgba(78,168,255,.18) }

.card-media{
  aspect-ratio: 16 / 10;
  width:100%; background:#0c1222; overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover }

.card-body{ padding:16px 16px 18px }
.card-title{
  font-size: clamp(15px, 1.9vw, 18px); font-weight:700; margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{ font-size:13px; color:var(--muted); margin-bottom:10px }
.card-price{
  font-weight:800; letter-spacing:.3px; font-size:clamp(16px, 2.2vw, 20px);
  background: linear-gradient(90deg, #78c0ff, #5dd6b2); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ======= Yardımcı ======= */
.mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px }
.gap-2{ gap:8px } .gap-3{ gap:12px } .gap-4{ gap:16px }
.center{ display:grid; place-items:center }

/* Scrollbar (WebKit) */
::-webkit-scrollbar{ width:12px; height:12px }
::-webkit-scrollbar-thumb{
  background: linear-gradient(#2b3a5d, #1b2744);
  border-radius:10px; border:2px solid #0b1324;
}