/* ============================================================
   HALIDI TURIZM — TEMEL STILLER
   Renk paleti logodan (gorseller/logo.png) cikarilmistir.
   ============================================================ */

/* ---------- 1. DEGISKENLER ---------- */
:root {
  /* Marka renkleri — logodan */
  --antrasit:       #2b3f44;  /* HALIDI yazisi, Kabe — ana koyu renk */
  --antrasit-koyu:  #1d2c30;  /* hero karartma, footer alt */
  --antrasit-acik:  #3d545b;

  --yesil:          #5a9849;  /* kubbe ust, TURIZM yazisi */
  --yesil-koyu:     #377a4a;  /* kubbe golge — buton zemini (kontrast guvenli) */
  --yesil-acik:     #7bb268;
  --yesil-soluk:    #eef5eb;  /* cok acik yesil zemin */

  --altin:          #f0c14b;  /* Kabe kusagi — vurgu rengi */
  --altin-koyu:     #d9a833;
  --altin-acik:     #fee873;
  --altin-soluk:    #fdf6e3;

  /* Notr renkler */
  --beyaz:          #ffffff;
  --zemin:          #f5f7f6;  /* bolum arka plani */
  --zemin-koyu:     #e8ece9;
  --cizgi:          #dfe4e1;
  --govde:          #5c6a70;  /* paragraf metni */
  --govde-soluk:    #8a959a;

  /* Islevsel */
  --whatsapp:       #25d366;
  --whatsapp-koyu:  #1da851;

  /* Tipografi */
  --yazi: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Olculer */
  --kapsayici:      1240px;
  --bosluk-bolum:   clamp(3.5rem, 8vw, 6.5rem);
  --radius:         14px;
  --radius-kucuk:   8px;
  --radius-buyuk:   22px;

  /* Golgeler */
  --golge-kucuk:  0 2px 8px rgba(43, 63, 68, .06);
  --golge:        0 6px 24px rgba(43, 63, 68, .09);
  --golge-buyuk:  0 16px 48px rgba(43, 63, 68, .14);

  /* Gecis */
  --gecis: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. SIFIRLAMA ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* sabit header payi */
  /* Isletim sistemi koyu temadayken tarayici form kontrollerini
     koyu render edip acilir liste yazilarini okunmaz hale getiriyordu.
     Site acik temali oldugu icin bunu sabitliyoruz. */
  color-scheme: light;
}

body {
  font-family: var(--yazi);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--govde);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* HTML'in "hidden" ozniteligi, display:grid / flex gibi kurallar
   tarafindan eziliyor. Her zaman gizlemesi icin guvenceye aliyoruz. */
[hidden] { display: none !important; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

ul, ol { list-style: none; padding: 0; }

a { color: var(--yesil-koyu); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--altin-koyu); }

/* ---------- 3. TIPOGRAFI ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--yazi);
  color: var(--antrasit);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.25rem); }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

strong, b { font-weight: 600; color: var(--antrasit); }

/* ---------- 4. YARDIMCI SINIFLAR ---------- */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}

.bolum { padding-block: var(--bosluk-bolum); }
.bolum--zemin { background: var(--zemin); }
.bolum--yesil-soluk { background: var(--yesil-soluk); }
.bolum--koyu { background: var(--antrasit); color: rgba(255, 255, 255, .8); }
.bolum--koyu h2,
.bolum--koyu h3 { color: var(--beyaz); }

/* Bolum basligi bloku */
.bolum-basligi { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 3rem; }
.bolum-basligi .ust-etiket {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yesil-koyu);
  margin-bottom: .75rem;
}
.bolum-basligi p { margin-top: 1rem; font-size: 1.05rem; }

/* Altin alt cizgi vurgusu */
.alti-cizili { position: relative; display: inline-block; }
.alti-cizili::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.18em;
  height: .22em;
  background: var(--altin);
  border-radius: 4px;
  opacity: .55;
  z-index: -1;
}

/* Dar icerik kolonu */
.dar { max-width: 900px; margin-inline: auto; }

/* Dar kapsayici — uzun metin ve akordeon sayfalari icin */
.kapsayici--dar { max-width: 880px; }

/* Bosluk yardimcilari */
.bosluk-ust    { margin-top: 2.5rem; }
.bosluk-ust-xl { margin-top: 3.5rem; }
.bosluk-alt    { margin-bottom: 1rem; }

/* Erisilebilirlik: sadece ekran okuyucular icin */
.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Klavye ile gezinenler icin gorunur odak halkasi */
:focus-visible {
  outline: 3px solid var(--yesil);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Icerige atla baglantisi */
.icerige-atla {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 2000;
  background: var(--yesil-koyu);
  color: var(--beyaz);
  padding: .8rem 1.4rem;
  border-radius: var(--radius-kucuk);
  font-weight: 600;
  transition: top var(--gecis);
}
.icerige-atla:focus { top: 1rem; color: var(--beyaz); }

/* ---------- 5. BELIRME ANIMASYONU ----------
   Baslangic durumu SADECE .belir-aktif sinifi varken uygulanir.
   Bu sinifi main.js ekler. Boylece JS calismazsa (veya hata verirse)
   icerik normal sekilde gorunur kalir — gizli icerik riski yok. */
html.belir-aktif [data-belir] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
html.belir-aktif [data-belir].belirdi {
  opacity: 1;
  transform: none;
}

/* ---------- 6. HAREKET TERCIHI ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}