/* ELVORO – Luxury Silver/Black Theme */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root{
  --bg:#0a0b0d;
  --panel:#0f1217;
  --card:#12161c;
  --line:rgba(255,255,255,.10);
  --ink:#e9eef4;
  --muted:#9aa3ad;
  --silver:#cfd5dd;
  --accent:#d7dde6; /* gümüş ton */
  --rose:#ff9ccf;   /* lüks vurgusu için hafif rose */
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  --radius-xl:20px; --radius-lg:16px; --radius-md:12px;
}

/* Page */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(1200px 800px at 70% -10%, #1a1f27 0%, transparent 55%) , var(--bg);
  color:var(--ink); font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(180deg, rgba(18,22,28,.85), rgba(18,22,28,.70));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{
  font-family:"Cormorant Garamond",serif;
  font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  background:linear-gradient(120deg,#eef2f7 0%, #b8bec7 35%, #f1f5fb 70%, #aeb6c0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.12);
}

/* Layout blocks */
.container{max-width:1180px;margin:22px auto;padding:0 18px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)) , var(--card);
  border:1px solid var(--line); border-radius:var(--radius-xl); padding:16px;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--ink);
}

/* Forms */
.input,select,textarea{
  width:100%; padding:12px 12px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:#0e1116; color:var(--ink);
  outline:none; transition:all .18s ease;
}
.input:focus,select:focus,textarea:focus{
  border-color:#cdd4dd; box-shadow:0 0 0 3px rgba(207,213,221,.15);
}
label{display:block;margin:6px 0 6px 2px;color:var(--muted);font-size:.92rem}

/* Buttons */
.btn{
  --pad-x:14px; --pad-y:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad-y) var(--pad-x); border-radius:var(--radius-md);
  border:1px solid var(--line); cursor:pointer; user-select:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--ink); transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); box-shadow:0 6px 20px rgba(0,0,0,.35) }
.btn:active{ transform:translateY(0) scale(.99) }

.btn.primary{
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    linear-gradient(120deg, #f5f7fa 0%, #d6dbe3 20%, #f3f6fb 60%, #b9c0ca 100%);
  color:#111416; font-weight:600;
}
.btn.primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 35%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn.primary:hover::before{ transform:translateX(120%) }
.btn.primary:hover{ box-shadow:0 10px 28px rgba(201,209,221,.28) }

/* Prices & text helpers */
.price{font-weight:600;color:var(--accent)}
.note{color:var(--muted)}

/* Grid cards (home/product lists) */
.grid{display:grid;gap:16px}
.grid .card img{border-radius:14px;border:1px solid var(--line)}
.grid .card:hover{ transform:translateY(-2px); transition:transform .12s ease }

/* Table (admin list) */
.table{width:100%;border-collapse:collapse}
.table th{color:#cbd2db;font-weight:600;text-align:left}
.table td,.table th{padding:10px;border-bottom:1px dashed rgba(255,255,255,.08)}

/* Slider controls (product) */
.navbtn{
  border-radius:14px;border:1px solid rgba(255,255,255,.2); color:#0b0e12;
  background:linear-gradient(180deg,#f6f7f9,#d8dde5);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.navbtn:hover{filter:brightness(1.03)}
.dots .dot{opacity:.6;transition:opacity .2s ease}
.dots .dot.active{opacity:1}

/* Gate/admin-login panels centering */
.center{min-height:100vh;display:grid;place-items:center}

/* Links reset */
a{color:inherit;text-decoration:none}
a.btn{ text-decoration:none }

/* Small utility spacing on topbar buttons */
.topbar .btn{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03))}
.topbar .btn:hover{border-color:rgba(255,255,255,.22)}

/* Upload input nicer */
input[type="file"].input{
  padding:9px 10px; background:linear-gradient(180deg,#0e1116,#0b0e12);
}

/* Subtle divider card for totals */
.total-card{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); padding:14px 16px;
}

/* Nice focus ring also for buttons */
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.18)}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:#0c0f13}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a2f39,#1c2028);border-radius:999px}
/* ===========================
   ELVORO — Responsive Tweaks
   =========================== */

/* Genel: küçük ekranlarda iç boşlukları ve fontları incelt */
@media (max-width: 1024px){
  .container{max-width:980px}
  .brand{letter-spacing:.2em}
  .card{padding:14px}
  .grid{gap:14px}
  .topbar{padding:12px 14px}
}

/* Tablet ve altı: grid ve form düzenleri sadeleşsin */
@media (max-width: 768px){
  .container{max-width:720px;padding:0 14px}
  .brand{font-size:20px}
  .hero{padding:18px;border-radius:16px}
  .hero h1{font-size:22px;letter-spacing:.18em}
  .chips{gap:6px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .thumb{height:165px;border-radius:12px}
  .row, .wrap{grid-template-columns:1fr;gap:12px}  /* cart/product iki sütun → tek sütun */
  .table td,.table th{padding:8px}
  .total-card{padding:12px 14px;border-radius:16px}
  .navbtn{padding:6px 8px}
  .sortbar .input{max-width:160px}
  .footer{margin-top:22px;padding:18px;border-radius:16px}
  .footer .row, .footer .rowf{grid-template-columns:1fr}
}

/* Telefon: başlık hizası, buton ve inputlar rahat tıklanır olsun */
@media (max-width: 560px){
  /* Topbar: ELVORO ortada kalsın, sağdaki butonlar sağda sabit */
  .topwrap{min-height:42px}
  .topwrap .brand{font-size:18px;left:50%;transform:translateX(-50%)}
  .topwrap .right{position:absolute;right:14px}

  .container{padding:0 12px}
  .card{padding:12px;border-radius:14px}
  .btn{--pad-x:12px;--pad-y:9px;border-radius:10px;font-size:.95rem}
  .input, select, textarea{padding:11px 11px;border-radius:10px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .thumb{height:150px}
  .price{font-size:1rem}
  .badge{padding:6px 10px;font-size:.8rem}
  .dot{width:7px;height:7px}
  .navbtn{border-radius:10px}
  .copy{font-size:.85rem}
}

/* Küçük telefonlar: daha kompakt */
@media (max-width: 390px){
  .brand{font-size:16px;letter-spacing:.16em}
  .thumb{height:140px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sortbar{gap:6px}
  .sortbar .input{max-width:140px}
}

/* Ürün detay slider: küçük ekranlarda yükseklik yerine oran kullan */
@media (max-width: 768px){
  .frame{height:auto; aspect-ratio: 16/11;}
}

/* Admin panel formu: iki sütunluk alanlar tek sütuna insin */
@media (max-width: 900px){
  .row2{grid-template-columns:1fr}
}

/* Sepet satırları: görsel + metin alt alta */
@media (max-width: 560px){
  .item{grid-template-columns:70px 1fr;align-items:start}
  .item > div:last-child{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;margin-top:6px}
  .item img{width:70px;height:54px;border-radius:9px}
}