@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500&family=Amiri:wght@400;700&display=swap');

/* ─────────────────────────────────────────
   CSS DEĞİŞKENLERİ
───────────────────────────────────────── */
:root {
  /* ── Zemin & metin ── */
  --ink:    #122035;
  --ink2:   #1a2e4a;
  --ash:    #25456e;
  --stone:  #4d85aa;
  --parch:  #a8cfe0;
  --cream:  #d4eaf5;

  /* ── Altın paleti ── */
  --gold:      #c9a227;
  --gold2:     #8a6f18;
  --gold-warm: #d4bc78;

  /* Yarı saydam altın token'ları */
  --gold-10:  rgba(201, 162, 39, 0.10);
  --gold-15:  rgba(201, 162, 39, 0.15);
  --gold-20:  rgba(201, 162, 39, 0.20);
  --gold-25:  rgba(201, 162, 39, 0.25);
  --gold-30:  rgba(201, 162, 39, 0.30);
  --gold2-20: rgba(138, 111, 24, 0.20);
  --gold2-25: rgba(138, 111, 24, 0.25);
  --gold2-30: rgba(138, 111, 24, 0.30);

  /* ── Deniz mavisi vurgu ── */
  --sea:      #3a9ec8;
  --sea-20:   rgba(58, 158, 200, 0.20);
  --moss:     #5ab8d8;
  --terra:    #2d6eaa;

  /* ── Koyu zemin üzerindeki açık metin ── */
  --on-dark:    rgba(224, 240, 250, 1.00);
  --on-dark-70: rgba(224, 240, 250, 0.70);
  --on-dark-60: rgba(224, 240, 250, 0.60);
  --on-dark-30: rgba(224, 240, 250, 0.30);
  --on-dark-20: rgba(224, 240, 250, 0.20);

  /* ── Overlay arka planlar ── */
  --cream-75: rgba(18, 32, 53, 0.82);
  --cream-95: rgba(18, 32, 53, 0.96);

  /* ── Tipografi ── */
  --ff: 'Cormorant Garamond', serif;
  --fs: 'DM Sans', sans-serif;
  --fa: 'Amiri', serif;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 19px;
  overflow-x: hidden;
}

body {
  background: linear-gradient(135deg, #0a1e3c 0%, #123264 30%, #1a4a80 55%, #0e3868 80%, #081828 100%);
  background-attachment: fixed;
  color: var(--on-dark);
  font-family: var(--fs);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(58,158,200,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,162,39,0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

@media (pointer: fine) {
  body, a, button, .cat-card, .mcard, .detail-back, .footer-col li {
    cursor: none;
  }
}

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

button {
  font-family: var(--fs);
}

/* ─────────────────────────────────────────
   BÖLÜM SİSTEMİ (sayfa yönetimi)
───────────────────────────────────────── */
.section {
  display: none;
  padding-top: 110px;
  min-height: 100vh;
}

.section.active {
  display: block;
  animation: sectionFadeIn .5s ease forwards;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────
   ORTAK YARDIMCI SINIFLAR
───────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 60px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: var(--gold-20);
}

.divider-star {
  color: var(--gold2);
  font-size: 16px;
}

/* ─────────────────────────────────────────
   ANİMASYONLAR (global keyframes)
───────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes geoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: .3;
    transform: scaleY(1);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.1);
  }
}

@keyframes particleFall {
  0% {
    opacity: 0;
    transform: translateY(-10px) translateX(0);
  }

  10% {
    opacity: .7;
  }

  90% {
    opacity: .2;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(20px);
  }
}

@keyframes cursorSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal.vis {
  opacity: 1;
  transform: none;
}

.reveal-d1 {
  transition-delay: .1s;
}

.reveal-d2 {
  transition-delay: .2s;
}

.reveal-d3 {
  transition-delay: .3s;
}

.stagger>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

.stagger.vis>* {
  opacity: 1;
  transform: none;
  transition-delay: .35s;
}

.stagger.vis>*:nth-child(1) { transition-delay: .05s; }
.stagger.vis>*:nth-child(2) { transition-delay: .10s; }
.stagger.vis>*:nth-child(3) { transition-delay: .15s; }
.stagger.vis>*:nth-child(4) { transition-delay: .20s; }
.stagger.vis>*:nth-child(5) { transition-delay: .25s; }
.stagger.vis>*:nth-child(6) { transition-delay: .30s; }
.stagger.vis>*:nth-child(7) { transition-delay: .35s; }
.stagger.vis>*:nth-child(8) { transition-delay: .40s; }

/* ─────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
───────────────────────────────────────── */
@media (max-width: 768px) {
  .divider {
    padding: 30px 24px;
  }
}