/* ═══════════════════════════════════════════════
   HUGO KÖLLER — Main Stylesheet
═══════════════════════════════════════════════ */

:root {
  --gold:        #c8b97a;
  --gold-light:  #e8d89a;
  --gold-dim:    #8a7a5a;
  --black-deep:  #050507;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-heading: 'Cinzel', serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black-deep);
  overflow-x: hidden;
  font-family: 'EB Garamond', serif;
}

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

/* ══════════════════════════════════════════════
   SECTION — tam viewport yüksekliği
══════════════════════════════════════════════ */
.section {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url('../images/stars-bg.png');
  background-size: cover;
  background-position: center;
  background-color: var(--black-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Z-Index sıralaması: Her bölüm bir öncekinin üstüne kayar */
.section--hero { z-index: 1; }
.section--heritage { z-index: 2; }
.section--categories { z-index: 3; }
.section--contact { z-index: 4; }

/* Görsel: en-boy oranı korunur, kırpılmaz */
.section__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* İletişim Alanı ve Buton Linkleri */
.contact__wrapper {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__wrapper .section__img {
  width: 100%;
  height: 100%;
}

.contact__link {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 6px;
}
.contact__link:hover {
  background-color: rgba(200, 185, 122, 0.08); /* Altın rengi hafif parıltı */
  box-shadow: 0 0 15px rgba(200, 185, 122, 0.15);
}

.contact__link--whatsapp {
  left: 6.32%;
  top: 53.52%;
  width: 25.86%;
  height: 10.35%;
}

.contact__link--email {
  left: 6.32%;
  top: 66.11%;
  width: 25.86%;
  height: 10.45%;
}

/* ── HERO ────────────────────────────────────── */
.section--hero .section__img {
  opacity: 0;
  animation: fadeIn 1.6s var(--ease) 0.1s forwards;
}

/* ── HERITAGE ────────────────────────────────── */
.section--heritage {
  /* Inherits starry background from .section */
}
.section--heritage .section__img {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.section--heritage .section__img.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── CATEGORIES ──────────────────────────────── */
.section--categories {
  /* Inherits starry background from .section */
  padding: 0;
  align-items: stretch;
}

.categories__grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.category-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/stars-bg.png');
  background-size: cover;
  background-position: center;
  background-color: var(--black-deep);
  border-right: 1px solid rgba(138,122,90,0.25);
}
.category-btn:last-child { border-right: none; }

/* Görsel — en-boy oranı korunur, kırpılmaz */
.category-btn__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.5s ease;
  filter: brightness(0.9);
}
.category-btn:hover .category-btn__img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* hover overlay */
.category-btn__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 75%);
}
.category-btn:hover .category-btn__overlay { opacity: 1; }

.category-btn__orn svg { width: 110px; }

.category-btn__label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.55em;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(200,185,122,0.8);
  transform: translateY(6px);
  transition: transform 0.45s var(--ease);
}
.category-btn:hover .category-btn__label { transform: translateY(0); }

/* ── CONTACT ─────────────────────────────────── */
.section--contact {
  /* Inherits starry background from .section */
}
.section--contact .section__img {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.section--contact .section__img.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll hint ─────────────────────────────── */
.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 2.2s forwards;
  pointer-events: none;
  z-index: 10;
}
.scroll-text {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  color: var(--gold-dim);
}
.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  animation: scrollPulse 2s ease-in-out 2.8s infinite;
}

/* ── Keyframes ───────────────────────────────── */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes scrollPulse {
  0%,100% { opacity: 0.5; transform: scaleY(1); }
  50%     { opacity: 1;   transform: scaleY(1.3); }
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

@media (max-width: 768px) {
  .section { height: 100svh; }

  .categories__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
  }

  .category-btn {
    border-right: none;
    border-bottom: 1px solid rgba(138,122,90,0.2);
  }

  .category-btn:last-child {
    border-bottom: none;
  }
}