/* ==========================================================================
   Alnair — icerik bolumleri
   ========================================================================== */

/* ------------------------------------------------------------------ Hero */
#hero {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-deep);
}

/* Yedek fotograf katmani: video yuklenmezse (eski tarayici, agir baglanti)
   hero yine dolu gorunur. */
#hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/hero-tower.webp?v=7eb0b627') 66% 26% / cover no-repeat;
  /* Hero videoyla ayni cizgide: filtresiz */
  filter: contrast(1.04) saturate(0.92);
}

/* Hero videosu BILEREK filtresiz: musteri videonun on planda olmasini istedi.
   Sayfanin geri kalanindaki fotograflar navy tonlamasini korur (--photo-filter);
   yalnizca hero bu kuralin disinda. Boylece hero "asil gorsel" olur, alttaki
   bolumler sakin kalir.
   Hafif kontrast/doygunluk ayari markanin sogukluguna yaklastirir ama rengi
   oldurmez. */
.hero-slide__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.92);
  pointer-events: none;
}

/* Yedek fotografin perdesi. Slaytlarin kendi perdesi (.hero-slide::before)
   videonun ustunde durur; bu katman yalnizca video VE poster yuklenmediginde
   goreve girer. Ayni cizgide tutuldu ki nadir durumda gorunum bozulmasin. */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(0, 14, 43, 0.90) 0%,
      rgba(0, 16, 48, 0.80) 22%,
      rgba(0, 20, 58, 0.46) 44%,
      rgba(0, 25, 75, 0.12) 62%,
      transparent 100%),
    linear-gradient(to top, rgba(0, 14, 43, 0.62) 0%, transparent 28%);
}

.hero-swiper {
  position: relative;
  z-index: 3;
  height: clamp(540px, 82vh, 800px);
}
/* Swiper yuklenmezse ilk slayt gorunur kalsin */
.hero-swiper.is-static .swiper-slide:not(:first-child) { display: none; }

/* Saydam: arkadaki video/fotograf gorunsun */
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
}

/* Perde SLAYTIN ICINDE olmali: video swiper katmaninda durdugu icin bolum
   seviyesindeki bir perde videonun ALTINDA kalir ve metni okunur kilmaz.
   Perde burada videonun ustune, metnin altina girer.
   ONEMLI: Perde artik tum ekrani kaplamiyor. Once soldan saga %95'ten %48'e
   inen bir katman vardi ve video her yerde bogulyordu. Simdi koyuluk yalnizca
   metnin bulundugu sol bolgede; sagda video ciplak gorunuyor. */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Metnin arkasi: okunurluk icin gerekli koyuluk, sonra hizla siliniyor */
    linear-gradient(96deg,
      rgba(0, 14, 43, 0.90) 0%,
      rgba(0, 16, 48, 0.80) 22%,
      rgba(0, 20, 58, 0.46) 44%,
      rgba(0, 25, 75, 0.12) 62%,
      rgba(0, 25, 75, 0.02) 78%,
      transparent 100%),
    /* Alt kenar: slider kontrolleri ve sayac okunur kalsin */
    linear-gradient(to top, rgba(0, 14, 43, 0.62) 0%, transparent 28%),
    /* Ust kenar: sticky header'a yumusak gecis */
    linear-gradient(to bottom, rgba(0, 14, 43, 0.42) 0%, transparent 18%);
}

@media (max-width: 900px) {
  /* Dar ekranda metin tum genisligi kaplar, perde de daha genis olmali */
  .hero-slide::before {
    background:
      linear-gradient(180deg,
        rgba(0, 14, 43, 0.72) 0%,
        rgba(0, 16, 48, 0.70) 46%,
        rgba(0, 20, 58, 0.62) 72%,
        rgba(0, 14, 43, 0.78) 100%);
  }
}
.hero-slide__inner {
  position: relative;
  z-index: 2;
  padding-bottom: 42px;
}

/* h1 ve h2 ayni gorunume sahip — fark yalnizca anlamsal (SEO icin tek h1) */
.hero-slide__h {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1.08;
  /* Musteri basliklari BUYUK HARF gonderdi. Kucuk harf Didone'de negatif
     harf araligi dogruydu; buyuk harfte ayni deger harfleri sikistirip
     okunmaz yapar. Buyuk harf hafif POZITIF aralik ister. */
  letter-spacing: 0.005em;
  color: var(--paper-raised);
  max-width: 15ch;
  text-wrap: balance;
  margin: 0 0 0.5em;
  /* Video artik filtresiz ve perde hafif; kadraj parlak bir kareye denk
     geldiginde beyaz metin kayboluyordu (olculdu: en acik piksel #E8EADB,
     kontrast 1.2:1). Perdeyi yeniden koyulastirmak videoyu tekrar bogardi.
     Yumusak golge, videoyu karartmadan metni her karede okunur tutar. */
  text-shadow: 0 1px 2px rgba(0, 10, 32, .45), 0 2px 18px rgba(0, 10, 32, .55);
}
.hero-slide__text {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.6;
  color: var(--paper-raised);
  max-width: 46ch;
  margin: 0 0 2.4em;
  text-shadow: 0 1px 2px rgba(0, 10, 32, .5), 0 2px 14px rgba(0, 10, 32, .6);
}

/* Slider kontrolleri: oklar + sayfa isaretleri + sayac, tek kume halinde.
   Bir arada durmalari slider oldugunu ilk bakista anlatir. */
.hero-swiper__controls {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero-swiper.is-static .hero-swiper__controls { display: none; }

.hero-swiper__navs { display: flex; gap: 10px; }
.hero-swiper__nav {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  /* Hafif koyu zemin: fotograf acik bir kadraja denk geldiginde ok kayboluyordu */
  background: rgba(0, 14, 43, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hero-swiper__nav svg { width: 20px; height: 20px; }
.hero-swiper__nav:hover { background: var(--gold-bright); color: var(--navy-deep); }
.hero-swiper__nav.swiper-button-disabled { opacity: .35; cursor: default; }

.hero-swiper__pagination {
  display: flex;
  gap: 4px;
}

/* Isaretleyici: gorunen cizgi ince kalir ama dokunulabilir alan 44px'tir.
   Onceki hali 44x2px idi — gorsel olarak sorunsuz, parmakla basilmasi
   imkansizdi. Cizgiyi ::before ciziyor, kutu ise dokunma alanini tasiyor. */
.hero-swiper__bullet {
  display: flex;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-swiper__bullet::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: var(--on-navy-soft);
  opacity: .4;
  transition: opacity .3s var(--ease), background .3s var(--ease), height .3s var(--ease);
}
.hero-swiper__bullet:hover::before { opacity: .75; }
.hero-swiper__bullet.is-active::before {
  background: var(--gold-bright);
  opacity: 1;
  height: 4px;
}

@media (max-width: 900px) {
  .hero-slide__h { max-width: 18ch; }
}
@media (max-width: 600px) {
  /* Alttaki olu bosluk azaltildi: CTA ile kontroller arasi ~145px bosluk
     hero'yu sonu gelmemis gibi gosteriyordu. */
  .hero-swiper { height: auto; min-height: 78vh; }
  .hero-slide { padding: 108px 0 104px; }

  /* Isaretleyiciler mobilde de gorunur. Once gizliydiler cunku ok + cizgi +
     sayac tek satira sigmiyordu; sayac kaldirilinca yer acildi. Gizli
     kalsalardi telefonda kac slayt oldugunu gosteren hicbir sey kalmazdi. */
  /* Cizgiler tam 44px dokunma alaninda kaliyor: sayac kalkinca yer acildi
     (390px ekranda oklar 106 + bosluk 18 + cizgiler 140 = 264px, rahat sigiyor). */
  .hero-swiper__controls { bottom: 28px; gap: 18px; }
}

/* ----------------------------------------------------------------- About */
/* Asimetrik iki sutun: baslik solda dar, govde sagda genis.
   Ortalanmis pazarlama duzeni yerine editoryal bir belge duzeni. */
.about__row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 2.3fr;
  gap: 44px;
  padding: 52px 0;
  border-top: 1px solid var(--hairline);
}
.about__row:first-child { border-top: 0; padding-top: 0; }
.about__row:last-child { padding-bottom: 0; }
.about__row h2 { margin: 0; }
.about__body { max-width: 62ch; }

@media (max-width: 860px) {
  .about__row { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
}

/* -------------------------------------------------------------- Services */
.services { background: var(--paper-raised); }
.services__title { margin: 0 0 48px; }

.services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
/* Her hizmet bir dizin satiri: ad solda, aciklama sagda.
   Kart yok, golge yok, hover yok — baglanti olmayan icerikte hover yaniltir. */
.service {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.55fr;
  gap: 44px;
  padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
}
.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
}
.service__text {
  margin: 0;
  color: var(--graphite-soft);
  max-width: 58ch;
}

@media (max-width: 860px) {
  .services__title { margin-bottom: 34px; }
  .service { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}

/* --------------------------------------------------- International bandi */
.international {
  background: var(--navy);
  position: relative;
}
/* Ust kenarda altin saç çizgisi: bolumu capa olarak isaretler */
.international::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 46%; height: 2px;
  background: linear-gradient(to right, var(--gold) 0%, transparent 100%);
}
.international__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Genislik grid sutunundan gelir. Burada ayrica max-width vermek yanlisti:
   `ch` govde fontuna gore hesaplanir, basliktaki Bodoni'ye gore degil —
   metni gereksiz yere daraltiyordu. */
.international__inner { max-width: none; }

/* ------------------------------------------------------------- Harita */
/* Natural Earth verisinden uretildi — kamu mali, lisans yuku yok.
   Karalar sessiz bir zemin; tek vurgu Casablanca isareti. */
.worldmap {
  position: relative;
  margin: 0;
  line-height: 0;
}
.worldmap__img {
  width: 100%;
  height: auto;
  opacity: 0.55;
}

/* Isaret, haritanin viewBox'indaki gercek konumdan hesaplandi:
   x = 478.9/1000, y = 156.7/411 */
.worldmap__pin {
  position: absolute;
  left: 47.89%;
  top: 38.13%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gold-bright);
}
/* Ince altin halka: isareti kalabalik kiyi cizgisinden ayirir */
.worldmap__pin::before {
  content: '';
  position: absolute; inset: -7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: .55;
}
.worldmap__label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-bright);
}

@media (max-width: 900px) {
  .international__grid { grid-template-columns: 1fr; gap: 44px; }
  .international__inner { max-width: none; }
}

.international__label {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 22px;
}
.international__statement {
  font-family: var(--font-display);
  font-size: var(--t-statement);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--paper-raised);
  margin: 0;
}

/* ---------------------------------------------------------------- Office */
.office {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.office__info h2 { margin: 0 0 22px; }
.office__address {
  font-style: normal;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.95;
  color: var(--graphite);
  margin: 0 0 34px;
}
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
  overflow: hidden;
}
.map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

@media (max-width: 860px) {
  .office { grid-template-columns: 1fr; gap: 38px; }
  .map-embed { aspect-ratio: 16 / 11; }
}

/* --------------------------------------------------------------- Contact */
.contact { background: var(--paper-raised); border-top: 1px solid var(--hairline); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: start;
}
.contact__intro h2 { margin: 0 0 20px; }
.contact__note { color: var(--graphite-soft); margin-top: 1.1em; }

#contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 26px;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

/* Cumle duzeninde etiket — buyuk harf + genis aralik kullanilmadi */
.field label {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 9px;
}
.field__opt {
  font-weight: 400;
  color: var(--graphite-soft);
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--graphite);
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--paper-raised);
  box-shadow: 0 0 0 3px var(--gold-faint);
}
.field textarea { resize: vertical; min-height: 138px; }

.field.has-error input,
.field.has-error textarea { border-color: #A3231C; }
.field__error {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: var(--t-caption);
  color: #A3231C;
}

.form__actions {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 4px;
}
#form-status { margin: 0; font-size: var(--t-small); }
#form-status.is-ok { color: #14663E; }
#form-status.is-error { color: #A3231C; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 620px) {
  #contact-form { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- Fotograf seridi */
/* Tam genislikte, metinsiz bir "nefes" molasi. Tum fotograflarla ayni
   islemden gecer (--photo-filter), boylece hepsi tek aile gibi okunur. */
.photo-band {
  position: relative;
  height: clamp(240px, 34vw, 420px);
  overflow: hidden;
  background: var(--navy-deep);
}
.photo-band::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: var(--photo-filter);
}
/* Navy perde: gri tonlanan fotografi markanin rengine boyar.
   Ust/alt kenarda biraz daha koyu — serit sayfadan kopuk durmasin. */
.photo-band::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 14, 43, .42) 0%, transparent 30%,
                    transparent 70%, rgba(0, 14, 43, .42) 100%),
    var(--photo-veil);
}
.photo-band--facade::before { background-image: url('../img/band-facade.webp?v=8e94051a'); }

/* Skyline bandi: musteri fotografi gercek renkleriyle istedi (twin center gibi
   filtresiz). Gri tonlama ve navy perde YOK — yalniz kenarlarda cok hafif bir
   koyulma, serit sayfadan kopmasin diye. */
.photo-band--skyline::before {
  background-image: url('../img/band-skyline.webp?v=3482e669');
  filter: none;
}
.photo-band--skyline::after {
  background: linear-gradient(to bottom, rgba(0, 14, 43, .16) 0%, transparent 20%,
                              transparent 80%, rgba(0, 14, 43, .16) 100%);
}

/* Bolum icindeki band iki metin blogunun arasinda: kendi nefes payi olsun. */
.about__band { margin: 60px 0; }
@media (max-width: 860px) { .about__band { margin: 40px 0; } }

/* ------------------------------------------- Contact bolumundeki gorsel */
.contact__figure {
  position: relative;
  margin: 38px 0 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
  line-height: 0;
}
/* Twin Center fotografi BILEREK filtresiz: musterinin gonderdigi hali
   korunuyor. Ofisinin bulundugu binanin altin saat karesi; gri tonlamak
   fotografin butun sicakligini oldurüyordu.
   Navy perde de kaldirildi — uzerinde metin yok, okunurluk sorunu yaratmaz. */
.contact__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 900px) {
  /* Telefon da masaustuyle ayni icerigi gosterir. Onceden bu gorsel mobilde
     gizleniyordu ("sayfa uzamasin" diye); mobili masaustunden eksik birakan
     kararlardan biriydi ve geri alindi. */
  .contact__figure { margin-top: 30px; }
}

/* ------------------------------------------------------------ Referanslar */
/* Logolar orijinal renkleriyle: Corinthia siyah, CHG turkuaz. Gri tonlamak
   daha derli toplu gorunurdu ama baskasinin logosunun rengini degistirmek
   marka kilavuzlarina aykiri olabilir — riske girilmedi. */
.clients {
  background: var(--paper-raised);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
/* Asimetrik iki sutun — About bolumuyle ayni duzen.
   Iki logo tam genislikte bir banda yayilinca seyrek duruyordu ("sadece iki
   musterimiz var" gibi). Sag sutuna yerlesince kasitli gorunuyor ve ucuncu
   logo gelirse ayni izgarada buyuyor. */
.clients__row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 2.3fr;
  gap: 44px;
  align-items: center;
}
/* Diger bolum baslikariyla ayni: 46px Bodoni.
   Once kucuk bir etiket olarak kurulmustu (15px, govde fontu) — logo
   duvarlarinda alisilmis bir tercih ama bu sitede yanlisti: diger bes bolum
   basligi 46px Bodoni oldugu icin tek basina "unutulmus etiket" gibi
   duruyordu. */
.clients__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Iki logo bilincli olarak ortalanmadi: sola hizali kalarak sayfanin geri
   kalaniyla ayni editoryal duzeni korur. Ucuncu/dorduncu logo gelirse ayni
   izgara bozulmadan buyur. */
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 72px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.client-logo { display: flex; align-items: center; }
.client-logo img {
  width: auto;
  height: auto;
  /* Optik denge: Corinthia dikey bir kilit (ikon + kelime + HOTELS), bu yuzden
     daha fazla yukseklik alir. CHG yatay bir kilit, daha genis ama alcak. */
  max-height: 90px;
  max-width: 320px;
  object-fit: contain;
}
.client-logo:first-child img { max-height: 100px; max-width: 260px; }

@media (max-width: 860px) {
  .clients__row { grid-template-columns: 1fr; gap: 26px; align-items: start; }
}
@media (max-width: 700px) {
  .clients__grid { gap: 40px 48px; }
  .client-logo img { max-height: 72px; max-width: 240px; }
  .client-logo:first-child img { max-height: 80px; max-width: 220px; }
  .client-logo:first-child img { max-height: 60px; max-width: 155px; }
}