/* ==========================================================================
   ANA SAYFA BÖLÜMLERİ
   Referans tasarımın altı bölümü. Düzen kuralları burada; renk ve ölçü
   değerleri tokens.css'ten okunur.
   ========================================================================== */

/* ——— 1. HERO ———
   Solda metin, sağda tam taşan fotoğraf. Fotoğraf sayfanın sağ kenarına
   kadar uzanır, kapsayıcıyla hizalanmaz — referanstaki asimetri bundan. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  min-height: min(78vh, 760px);
  background: var(--renk-kagit);
}

.hero__metin {
  z-index: 2;
  padding: clamp(3rem, 1rem + 7vw, 6rem) clamp(1rem, 0.5rem + 2vw, 3rem)
           clamp(3rem, 1rem + 7vw, 6rem) max(var(--kenar), calc((100vw - var(--kap-genislik)) / 2 + var(--kenar)));
}

.hero__baslik { max-width: 13ch; margin-bottom: 1.2rem; }

.hero__giris {
  max-width: 46ch;
  margin-bottom: 2.2rem;
  font-size: 1.0625rem;
}

.hero__gorsel { position: relative; align-self: stretch; }

.hero__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fotoğrafın sol kenarını kâğıda eritir; metin alanıyla arasında sert bir
   çizgi kalmasın diye. Referansta da geçiş yumuşak. */
.hero__gorsel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, var(--renk-kagit) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Fotoğrafın sağ kenarındaki dikey etiket. Mobilde KALDIRILIR — dar ekranda
   fotoğrafın üstünde okunmuyor. */
.hero__etiket {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 0.5rem + 2vw, 3.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transform: translateY(-50%);
  color: var(--renk-kagit);
  font-size: var(--olcu-ustbas);
  letter-spacing: var(--aralik-ustbas);
  line-height: 2.1;
  text-align: right;
  text-transform: uppercase;
}

.hero__etiket::after {
  content: "";
  width: 1px;
  height: 84px;
  background: rgba(255,255,255,.55);
}

/* Slayt göstergeleri (01 — 02 03) */
.hero__sayac {
  position: absolute;
  left: max(var(--kenar), calc((100vw - var(--kap-genislik)) / 2 + var(--kenar)));
  bottom: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--renk-solgun);
  font-size: var(--olcu-kucuk);
  letter-spacing: .1em;
}

.hero__sayac b { color: var(--renk-murekkep); font-weight: var(--agirlik-orta); }
.hero__sayac i { width: 32px; height: 1px; background: var(--renk-cizgi); }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__metin { order: 2; padding: var(--bolum-bosluk) var(--kenar); }
  .hero__gorsel { order: 1; aspect-ratio: 16 / 10; }
  .hero__gorsel::before { display: none; }
  .hero__etiket { display: none; }   /* dar ekranda okunmuyor */
  .hero__sayac { position: static; margin-top: 2rem; }
}

/* ——— 2. İKİLİ BLOK: Kurumsal / Bireysel ——— */
.ikili { display: grid; grid-template-columns: 1fr 1fr; }

.ikili__kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  background: var(--renk-kagit);
}

.ikili__kart:nth-child(1) { background: var(--renk-kagit); }
.ikili__kart:nth-child(2) { background: var(--renk-tas); }

.ikili__metin { padding: clamp(2.5rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 0.5rem + 2vw, 3rem); }
.ikili__metin h2 { max-width: 12ch; }
.ikili__metin p { max-width: 34ch; margin-bottom: 1.8rem; }

.ikili__gorsel { position: relative; align-self: stretch; min-height: 340px; }
.ikili__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.ikili__etiket {
  position: absolute;
  top: 50%;
  left: clamp(1rem, 0.5rem + 1vw, 2rem);
  transform: translateY(-50%);
  color: var(--renk-kagit);
  font-size: var(--olcu-ustbas);
  letter-spacing: var(--aralik-ustbas);
  line-height: 2.1;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(20,28,38,.45);
}

@media (max-width: 1100px) {
  .ikili { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ikili__kart { grid-template-columns: 1fr; }
  .ikili__gorsel { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .ikili__etiket { display: none; }
}

/* ——— Bölüm başı: solda üstbaşlık, sağda "tümünü gör" ——— */
.bolum__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.bolum__bas .ustbas { margin: 0; }

/* ——— 3. ÖNE ÇIKAN: geniş fotoğraf kartları, metin fotoğrafın üstünde ——— */
.one-cikan { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }

.one-cikan__kart { position: relative; overflow: hidden; border-radius: var(--yuvarlak-kutu); }
.one-cikan__kart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Metnin oturduğu sol üst köşeyi açar — fotoğraf ne olursa olsun okunur.
   Bugün Blend Lab'de öğrenilen ders: fotoğrafın tamamını koyultmak yerine
   yalnız metnin bulunduğu bölgeyi aç. */
.one-cikan__kart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}

.one-cikan__metin {
  position: absolute;
  inset: clamp(1.5rem, 0.5rem + 2vw, 2.75rem) auto auto clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
  z-index: 2;
  max-width: 24ch;
}

.one-cikan__metin h3 { margin-bottom: .5rem; }
.one-cikan__metin p { margin-bottom: 1.1rem; color: var(--renk-murekkep-acik); }

@media (max-width: 860px) { .one-cikan { grid-template-columns: 1fr; } }

/* ——— 4. UZMANLIK ALANLARI: dört sütun, ince ayraçlarla ——— */
.alanlar { display: grid; grid-template-columns: repeat(4, 1fr); }

.alanlar__oge { padding: 0 clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.alanlar__oge + .alanlar__oge { border-left: 1px solid var(--renk-cizgi); }
.alanlar__oge:first-child { padding-left: 0; }
.alanlar__oge:last-child { padding-right: 0; }

.alanlar__simge { margin-bottom: 1.3rem; color: var(--renk-murekkep); }
.alanlar__oge h3 { font-size: 1.0625rem; font-weight: var(--agirlik-orta); letter-spacing: 0; margin-bottom: .5rem; }
.alanlar__oge p { margin-bottom: 1.2rem; font-size: var(--olcu-kucuk); }

@media (max-width: 900px) {
  .alanlar { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }
  .alanlar__oge:nth-child(odd) { padding-left: 0; border-left: 0; }
  .alanlar__oge:nth-child(even) { padding-right: 0; }
}

@media (max-width: 540px) {
  .alanlar { grid-template-columns: 1fr; gap: 2.2rem; }
  .alanlar__oge { padding: 0; border-left: 0 !important; }
}

/* ——— 5. ALINTI BANDI ——— */
.bant { position: relative; display: grid; place-items: center; min-height: clamp(280px, 30vw, 420px); overflow: hidden; }
.bant img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bant::after { content: ""; position: absolute; inset: 0; background: var(--ortu-hafif); }

.bant__ic {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.bant__soz {
  max-width: 28ch;
  color: var(--renk-kagit);
  font-size: clamp(.8125rem, .72rem + .4vw, 1rem);
  letter-spacing: .16em;
  line-height: 2.2;
  text-transform: uppercase;
}

.bant__yan {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: rgba(255,255,255,.88);
  font-size: var(--olcu-ustbas);
  letter-spacing: var(--aralik-ustbas);
  line-height: 2.1;
  text-align: right;
  text-transform: uppercase;
}

.bant__yan::before { content: ""; width: 1px; height: 72px; background: rgba(255,255,255,.5); }

@media (max-width: 760px) { .bant__yan { display: none; } }

/* ——— İNCE DÜZELTMELER ——— */

/* Sütun açıklamaları farklı satır sayısında olabiliyor; ok hepsinde aynı
   hizada dursun diye sütunlar dikey esnek kutuya alınıp ok dibe itiliyor. */
.alanlar__oge { display: flex; flex-direction: column; }
.alanlar__oge p { flex: 1 1 auto; }
.alanlar__oge .baglanti { align-self: flex-start; }

/* Fotoğraf üstündeki açık renkli etiketler: fotoğrafın açık bölgesine denk
   geldiğinde kayboluyordu. Gölge, görseli karartmadan metni ayağa kaldırır —
   plaka koymaya gerek kalmıyor çünkü bu metinler küçük ve seyrek. */
.hero__etiket,
.bant__yan,
.bant__soz {
  text-shadow: 0 1px 10px rgba(16, 24, 34, .55), 0 0 2px rgba(16, 24, 34, .35);
}