/* ==========================================================================
   DENTALINS — LAYOUT SYSTEM (layout.css)
   Container, grid sistemi ve section spacing.
   12 kolon grid + responsive breakpoint'ler.
   ========================================================================== */

/* ======================================================================
   1. CONTAINER
   Merkezi hizalı, max-width sınırlı, responsive padding.
   ====================================================================== */

.container {
  width: 100%;
  max-width: var(--container-xxl);  /* 1300px */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--sm {
  max-width: var(--container-sm);  /* 640px */
}

.container--md {
  max-width: var(--container-md);  /* 768px */
}

.container--lg {
  max-width: var(--container-lg);  /* 1024px */
}

.container--xl {
  max-width: var(--container-xl);  /* 1200px */
}

.container--xxl {
  max-width: var(--container-xxl); /* 1300px */
}

.container--2xl {
  max-width: var(--container-2xl); /* 1400px */
}

.container--full {
  max-width: none;
}

/* Container padding responsive */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);  /* 24px */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);  /* 32px */
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-10); /* 40px */
  }
}


/* ======================================================================
   2. SECTION SPACING
   Tüm section'lar arası tutarlı boşluk.
   Mobile-first: küçükten büyüğe.
   ====================================================================== */

.section {
  padding-top: var(--space-16);     /* 64px mobil */
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);   /* 80px tablet */
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);   /* 96px desktop */
    padding-bottom: var(--space-24);
  }
}

@media (min-width: 1280px) {
  .section {
    padding-top: var(--space-32);   /* 128px wide desktop */
    padding-bottom: var(--space-32);
  }
}

/* Section background varyantları */
.section--light {
  background-color: var(--color-bg-secondary);
}

.section--dark {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(var(--btn-primary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(var(--btn-primary-rgb), 0.08) 0%, transparent 50%),
    var(--color-bg-dark);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-text-inverse);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Dark section wave decoration (subtle animated lines) --- */
.section--waves::before,
.section--waves::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

.section--waves::before {
  top: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'%3E%3Cpath d='M-100 120 C200 60,400 200,700 100 C1000 0,1200 160,1700 80' fill='none' stroke='rgba(5,160,214,0.12)' stroke-width='1.5'/%3E%3Cpath d='M-100 220 C150 170,350 290,650 200 C950 110,1150 250,1700 180' fill='none' stroke='rgba(5,160,214,0.08)' stroke-width='1'/%3E%3Cpath d='M-100 320 C200 260,450 380,750 280 C1050 180,1250 340,1700 260' fill='none' stroke='rgba(5,160,214,0.06)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.section--waves::after {
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'%3E%3Cpath d='M-100 280 C300 350,500 200,800 310 C1100 420,1300 260,1700 340' fill='none' stroke='rgba(5,160,214,0.08)' stroke-width='1'/%3E%3Cpath d='M-100 180 C250 240,500 130,800 220 C1100 310,1350 170,1700 250' fill='none' stroke='rgba(5,160,214,0.05)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Container must sit above waves */
.section--dark > .container {
  position: relative;
  z-index: 1;
}


/* ======================================================================
   3. GRID SYSTEM
   CSS Grid tabanlı responsive grid.
   12 kolon grid (desktop), gap kontrollü.
   ====================================================================== */

.grid {
  display: grid;
  gap: var(--space-6);  /* 24px varsayılan gap */
}

/* Kolon sayısına göre grid varyantları */
.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

/* Tablet: 2 kolon */
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid {
    gap: var(--space-8);  /* 32px gap tablet */
  }
}

/* Desktop: tam kolon */
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Geniş Desktop: 4 kolon */
@media (min-width: 1280px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ======================================================================
   4. TWO-COLUMN LAYOUT (Zigzag)
   Hakkımızda, klinik deneyimi gibi 50/50 bölümler.
   ====================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

@media (min-width: 1280px) {
  .split {
    gap: var(--space-16);
  }
}

/* Reverse: sağ-sol sıra değişimi (zigzag pattern) */
.split--reverse {
  direction: ltr; /* Default */
}

@media (min-width: 768px) {
  .split--reverse > *:first-child {
    order: 2;
  }
  .split--reverse > *:last-child {
    order: 1;
  }
}

/* Asimetrik split — 60/40 oranı */
@media (min-width: 768px) {
  .split--wide-left {
    grid-template-columns: 1.5fr 1fr;
  }

  .split--wide-right {
    grid-template-columns: 1fr 1.5fr;
  }
}


/* ======================================================================
   5. MAIN LAYOUT
   Header + Main + Footer yapısı.
   ====================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1 1 auto;
}

/* Ana sayfa hero'su altındaki main — hero dışındaki content */
.page__main > .section:first-child {
  /* İlk section hero ise ayrı handle edilir */
}


/* ======================================================================
   6. SIDEBAR LAYOUT (Blog)
   Main content + sidebar yapısı.
   ====================================================================== */

.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 1fr 320px;
    gap: var(--space-12);
  }
}

.layout-sidebar__main {
  min-width: 0; /* Grid overflow prevention */
}

.layout-sidebar__aside {
  /* Sidebar sticky */
}

@media (min-width: 1024px) {
  .layout-sidebar__aside {
    position: sticky;
    top: calc(var(--space-20) + var(--space-4)); /* Navbar yüksekliği + buffer */
    align-self: start;
  }
}


/* ======================================================================
   7. GRID GAP VARYANTLARı
   ====================================================================== */

.grid--gap-sm  { gap: var(--space-4) !important; }
.grid--gap-md  { gap: var(--space-6) !important; }
.grid--gap-lg  { gap: var(--space-8) !important; }
.grid--gap-xl  { gap: var(--space-12) !important; }


/* ======================================================================
   8. ASPECT RATIO KONTEYNER
   Görseller ve video'lar için sabit oran kutuları.
   ====================================================================== */

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-photo {
  aspect-ratio: 4 / 3;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

/* Aspect ratio içindeki child tam alanı kaplar */
.aspect-video > *,
.aspect-square > *,
.aspect-photo > *,
.aspect-portrait > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}