/* ==========================================================================
   olmezisa.vip — ortak stil
   Palet, tamga görselinin kendi renklerinden türetildi:
   Mühür Siyahı (zemin) + Kase Krem (asıl işaret) + Eski Altın (vurgu)
   ========================================================================== */

:root{
  --ink:        #07070a;   /* mühür siyahı — zemin */
  --ink-2:      #0b0a0e;
  --panel:      #0d0c11;   /* mektup paneli zemini */
  --panel-2:    #121116;
  --cream:      #e8dcb8;   /* kase krem — tamganın asıl rengi */
  --cream-soft: #cbbd93;
  --gold:       #b99a5b;   /* eski altın — vurgu / çerçeve */
  --gold-dim:   #8a744a;
  --mist:       #8c8672;   /* ikincil metin */
  --line:       rgba(233,220,184,0.14);
  --line-soft:  rgba(233,220,184,0.07);

  --font-display: 'Cinzel', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-ui:      'Inter', sans-serif;
}

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

html{
  background: var(--ink);
  color-scheme: dark;
}

body{
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }

::selection{
  background: var(--gold);
  color: var(--ink);
}

:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------- topbar */

.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,7,10,0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(-8px);
  animation: topbar-in 1.1s cubic-bezier(.19,1,.22,1) 0.5s forwards;
}

@keyframes topbar-in{
  to{ opacity: 1; transform: translateY(0); }
}

.topbar a{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--cream-soft);
  padding: 8px 18px;
  position: relative;
  transition: color .4s ease, letter-spacing .4s ease;
}

.topbar a::after{
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}

.topbar a:hover,
.topbar a:focus-visible{
  color: var(--cream);
  letter-spacing: 0.08em;
}
.topbar a:hover::after,
.topbar a:focus-visible::after{ transform: scaleX(1); }

.topbar .back{ font-style: normal; font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }

/* ------------------------------------------------------------- utilities */

.eyebrow{
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 18px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}