/* SILENOS — Tasarım Değişkenleri
   Referans: muscent.com piksel analizi
   Arka plan: tam beyaz (muscent gibi)
   Ürün kartı: köşesiz, beyaz, ince kenarlık
   Font: Inter (gövde) + Cormorant Garamond (başlık/logo)
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* Ana renkler */
  --gold:        #C49A3C;
  --gold-hover:  #b8893a;
  --gold-light:  #e8c98e;
  --gold-bg:     rgba(196,154,60,0.08);
  --bord:        #5C1A2E;
  --dark:        #3A0D1C;

  /* Sayfa renkleri — muscent gibi tam beyaz */
  --bg:          #ffffff;
  --bg-soft:     #f8f8f8;
  --surface:     #ffffff;
  --surface2:    #f5f5f5;
  --border:      #eeeeee;
  --border-mid:  #dddddd;

  /* Metin renkleri */
  --text:        #333333;
  --text-mid:    #666666;
  --text-muted:  #999999;
  --text-gold:   #C49A3C;
  --text-bord:   #5C1A2E;

  /* Fontlar */
  --font-title:  'Cormorant Garamond', Georgia, serif;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;

  /* Ek renkler (auth & form sayfaları) */
  --parch:          #F5F0E8;
  --border-clr:     #e0ddd8;
  --text-primary:   #1a1410;
  --transition-fast: 0.15s ease;
  --gold-10:        rgba(196,154,60,0.10);
  --gold-20:        rgba(196,154,60,0.20);

  /* Layout */
  --max-w:       1320px;
  --pad:         40px;
  --transition:  0.2s ease;

  /* Header yükseklikleri */
  --h-duyuru:    36px;
  --h-yardimci:  34px;
  --h-main:      64px;
  --h-nav:       44px;
  --h-total:     178px;
}

/* ── Global sıfırlama ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  /* Özel imleç YOK — muscent'te de yok */
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); border: none; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
input, select, textarea { font-family: var(--font-body); }

/* ── Toast ── */
.toast-wrap {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: #333; color: #fff;
  font-size: 13px; padding: 10px 20px;
  border-radius: 4px;
  animation: toastIn .25s ease, toastOut .25s ease 2.75s forwards;
  white-space: nowrap;
}
@keyframes toastIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* ── Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skLoad 1.4s infinite;
}
@keyframes skLoad { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Yardımcı ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.gold-sep { width: 40px; height: 2px; background: var(--gold); margin: 10px 0 14px; }
.gold-sep.center { margin: 10px auto 14px; }

/* ── Scroll bar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── Fade in ── */
.fade-in { opacity:0; transform:translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:none; }

/* ── Responsive ── */
@media(max-width:1024px) { :root { --pad: 24px; } }
@media(max-width:640px)  { :root { --pad: 16px; } }