/* Bileşen: Sayfa Bölümleri (ön yüz)
   Bölüm düzenleyicisinden gelen yapıların görünümü.
   Koyu zeminli bölümler .ar-sahne alır; koyu zemin güvence katmanı
   (dark.css) böylece devreye girer ve koyu yazı ihtimali ortadan kalkar. */

.ar-bolum-on {
  padding-block: clamp(56px, 8vw, 110px);
}

.ar-bolum--acik  { background: #fff; }
.ar-bolum--gri   { background: var(--ar-bg); }
.ar-bolum--koyu  { color: #fff; background: linear-gradient(165deg, #0b1b36 0%, var(--ar-navy) 60%, #10213f 100%); }
.ar-bolum--yesil { color: #fff; background: linear-gradient(165deg, var(--ar-green-deep) 0%, #174d3a 100%); }

.ar-bolum__kap {
  max-width: var(--ar-container, 1280px);
  margin-inline: auto;
  padding-inline: var(--ar-gutter, 24px);
}

/* --- Ortak başlık bloğu --- */

.ar-bolum__ust { max-width: 44em; margin-bottom: clamp(28px, 4vw, 52px); }

.ar-bolum__ustbaslik {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ar-green);
  text-transform: uppercase;
}

.ar-bolum--koyu .ar-bolum__ustbaslik,
.ar-bolum--yesil .ar-bolum__ustbaslik { color: var(--ar-mint); }

.ar-bolum__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ar-navy);
}

.ar-bolum--koyu .ar-bolum__baslik,
.ar-bolum--yesil .ar-bolum__baslik { color: #fff; }

.ar-bolum__metin {
  margin: 14px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ar-muted);
}

.ar-bolum--koyu .ar-bolum__metin,
.ar-bolum--yesil .ar-bolum__metin { color: var(--ar-silver); }

.ar-bolum__dugmeler { margin: 26px 0 0; }

/* --- Metin + görsel --- */

.ar-ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

/* Görsel sağda: metni ilk sütuna al. order kullanmak KAYNAK SIRASINI
   korur — ekran okuyucu ve klavye başlığı metinden önce görsele düşmez. */
.ar-ikili--sag .ar-ikili__metin { order: 0; }
.ar-ikili--sag .ar-ikili__gorsel { order: 1; }
.ar-ikili--sol .ar-ikili__metin { order: 1; }
.ar-ikili--sol .ar-ikili__gorsel { order: 0; }

.ar-ikili__gorsel img,
.ar-bolum__gorsel {
  width: 100%;
  height: auto;
  border-radius: var(--ar-radius-lg);
}

.ar-bolum__zengin { margin-top: 16px; }
.ar-bolum__zengin p { line-height: 1.75; color: var(--ar-muted); }
.ar-bolum--koyu .ar-bolum__zengin p,
.ar-bolum--yesil .ar-bolum__zengin p { color: var(--ar-silver); }

/* --- Kart ızgarası --- */

.ar-kartp-izgara {
  display: grid;
  grid-template-columns: repeat(var(--ar-sutun, 3), minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.ar-kartp {
  display: block;
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
  transition: transform var(--ar-transition), box-shadow var(--ar-transition), border-color var(--ar-transition);
}

.ar-bolum--koyu .ar-kartp,
.ar-bolum--yesil .ar-kartp {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 12%);
}

.ar-kartp--bagli:hover {
  transform: translateY(-4px);
  border-color: var(--ar-green);
  box-shadow: 0 12px 30px rgb(15 27 70 / 10%);
}

.ar-kartp__gorsel { margin: -8px -8px 16px; }
.ar-kartp__gorsel img { width: 100%; height: auto; border-radius: var(--ar-radius-md); }

.ar-kartp__baslik {
  margin: 0 0 8px;
  font-family: var(--ar-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ar-navy);
}

.ar-bolum--koyu .ar-kartp__baslik,
.ar-bolum--yesil .ar-kartp__baslik { color: #fff; }

.ar-kartp__metin { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ar-muted); }
.ar-bolum--koyu .ar-kartp__metin,
.ar-bolum--yesil .ar-kartp__metin { color: var(--ar-silver); }

/* --- Sayılar --- */

.ar-sayilarp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
}

.ar-sayilarp__oge { margin: 0; }

.ar-sayilarp__deger {
  font-family: var(--ar-font-heading);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ar-navy);
  font-variant-numeric: tabular-nums;
}

.ar-bolum--koyu .ar-sayilarp__deger,
.ar-bolum--yesil .ar-sayilarp__deger { color: #fff; }

.ar-sayilarp__etiket {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ar-muted);
  text-transform: uppercase;
}

.ar-bolum--koyu .ar-sayilarp__etiket,
.ar-bolum--yesil .ar-sayilarp__etiket { color: var(--ar-silver); }

/* --- SSS --- */

.ar-sssp { display: grid; gap: 10px; max-width: 52em; }

/* --- Zaman çizelgesi --- */

.ar-zamanp {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: 0 0 0 26px;
  margin: 0;
  list-style: none;
  border-left: 2px solid var(--ar-border);
}

.ar-bolum--koyu .ar-zamanp,
.ar-bolum--yesil .ar-zamanp { border-left-color: rgb(255 255 255 / 18%); }

.ar-zamanp__oge { position: relative; }

.ar-zamanp__oge::before {
  position: absolute;
  top: 6px;
  left: -33px;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--ar-green);
  border: 2px solid #fff;
  border-radius: 50%;
}

.ar-bolum--koyu .ar-zamanp__oge::before,
.ar-bolum--yesil .ar-zamanp__oge::before { border-color: var(--ar-navy); }

.ar-zamanp__etiket {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ar-green);
}

.ar-bolum--koyu .ar-zamanp__etiket,
.ar-bolum--yesil .ar-zamanp__etiket { color: var(--ar-mint); }

.ar-zamanp__baslik {
  margin: 4px 0 6px;
  font-family: var(--ar-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ar-navy);
}

.ar-bolum--koyu .ar-zamanp__baslik,
.ar-bolum--yesil .ar-zamanp__baslik { color: #fff; }

.ar-zamanp__metin { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ar-muted); }
.ar-bolum--koyu .ar-zamanp__metin,
.ar-bolum--yesil .ar-zamanp__metin { color: var(--ar-silver); }

/* --- Eylem çağrısı --- */

.ar-ctap { max-width: 44em; margin-inline: auto; text-align: center; }

.ar-ctap__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ar-navy);
}

.ar-bolum--koyu .ar-ctap__baslik,
.ar-bolum--yesil .ar-ctap__baslik { color: #fff; }

.ar-ctap__metin { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--ar-muted); }
.ar-bolum--koyu .ar-ctap__metin,
.ar-bolum--yesil .ar-ctap__metin { color: var(--ar-silver); }

/* --- Logo şeridi --- */

.ar-logop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}

.ar-logop__oge { display: flex; align-items: center; justify-content: center; }

.ar-logop__oge img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 54px;
  /* Logolar tek renge indirilir; renkli logo kalabalığı marka
     paletini bozuyordu. Üzerine gelince gerçek rengine döner. */
  filter: grayscale(1);
  opacity: .65;
  transition: filter var(--ar-transition), opacity var(--ar-transition);
}

.ar-logop__oge:hover img { filter: none; opacity: 1; }

/* --- Görüşler --- */

.ar-gorusp-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.ar-gorusp {
  padding: clamp(22px, 2.6vw, 30px);
  margin: 0;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
}

.ar-bolum--koyu .ar-gorusp,
.ar-bolum--yesil .ar-gorusp {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 12%);
}

.ar-gorusp__metin {
  padding: 0;
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ar-ink);
  border: 0;
}

.ar-bolum--koyu .ar-gorusp__metin,
.ar-bolum--yesil .ar-gorusp__metin { color: var(--ar-on-dark); }

.ar-gorusp__kisi { display: flex; gap: 12px; align-items: center; font-size: 0.9rem; }
.ar-gorusp__foto { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.ar-gorusp__kisi strong { display: block; color: var(--ar-navy); }
.ar-bolum--koyu .ar-gorusp__kisi strong,
.ar-bolum--yesil .ar-gorusp__kisi strong { color: #fff; }
.ar-gorusp__unvan { font-size: 0.85rem; color: var(--ar-muted); }
.ar-bolum--koyu .ar-gorusp__unvan,
.ar-bolum--yesil .ar-gorusp__unvan { color: var(--ar-silver); }

/* --- Galeri --- */

.ar-galerip {
  display: grid;
  grid-template-columns: repeat(var(--ar-sutun, 3), minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}

.ar-galerip__oge { margin: 0; }

.ar-galerip__oge img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ar-radius-md);
}

/* --- Dar ekran --- */

@media (width <= 900px) {
  .ar-ikili { grid-template-columns: 1fr; }

  /* Tek sütunda görsel HER ZAMAN metnin altında kalır; "solda" seçimi
     dar ekranda görseli başlıktan önce göstererek bağlamı bozuyordu. */
  .ar-ikili--sol .ar-ikili__metin,
  .ar-ikili--sag .ar-ikili__metin { order: 0; }

  .ar-ikili--sol .ar-ikili__gorsel,
  .ar-ikili--sag .ar-ikili__gorsel { order: 1; }

  .ar-kartp-izgara,
  .ar-galerip { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (width <= 560px) {
  .ar-kartp-izgara,
  .ar-galerip { grid-template-columns: 1fr; }
}