/* ==========================================================================
   ANASAYFA — "Sessiz Güç"
   Tam ekran sinematik hero, iki yarım-ekran faaliyet paneli, galeri hissi.
   Yalnızca anasayfada yüklenir; main.css'in üzerine biner, token tanımlamaz.
   ========================================================================== */

/* ------------------------------------------------------------------- HERO */
.hero-a {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--head-h) + 40px);
  padding-bottom: 0;
  overflow: hidden;
  background: var(--black-950);
}

.hero-a__media { position: absolute; inset: 0; z-index: 0; }
.hero-a__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(.62) contrast(1.12) brightness(.62);
  animation: heroDrift 22s var(--ease) forwards;
}
@keyframes heroDrift { from { transform: scale(1.07) } to { transform: scale(1) } }

/**
 * Arka plan videosu — fotoğrafın üstünde, AYNI maskeyle.
 *
 * Filtre bilerek fotoğrafınkiyle birebir aynı: hero'nun görünümü değişmesin,
 * yalnızca hareketlensin. Müşteri "slide üstünde yer alan karartı burada
 * olacak" dedi; karartmayı .hero-a__veil veriyor, buradaki filtre ise
 * fotoğrafla aynı doygunluk/parlaklık dilini sürdürüyor.
 *
 * RENKLİ İSTENİRSE: aşağıdaki grayscale değerini 0'a çekmek yeter —
 * karartma perdesi ve okunabilirlik etkilenmez.
 */
.hero-a__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(.62) contrast(1.12) brightness(.62);
  opacity: 0;
  transition: opacity .9s var(--ease);
}
/* Video ilk karesini çizene kadar görünmüyor; yoksa bir an siyah kutu oluyor */
.hero-a__video.is-on { opacity: 1; }

/* İki katmanlı perde: alt kenarda metin için tam kontrast, üstte hafif karartma */
.hero-a__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,11,12,.96) 0%, rgba(11,11,12,.72) 34%, rgba(11,11,12,.28) 62%, rgba(11,11,12,.55) 100%),
    linear-gradient(to right, rgba(11,11,12,.68) 0%, rgba(11,11,12,.12) 58%, transparent 100%);
}
/* Çok ince tarama dokusu — fotoğraf gürültüsünü paletle uyumlar.
   mix-blend-mode BİLEREK kullanılmıyor: hero'daki filtreli görsel + backdrop
   katmanlarıyla birleşince kaydırmada karelerin 80ms'e çıkmasına yol açıyordu.
   Düz saydam katman görsel olarak aynı sonucu veriyor, compositing bedeli yok. */
.hero-a__grain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  opacity: .5;
}

.hero-a__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(48px, 8vh, 96px);
}

.hero-a__eyebrow { color: var(--gray-400); }

.hero-a__title { color: var(--white); max-width: 16ch; }
/* overflow:hidden maskesi alt uzantıları (y, ş, ğ) kırpmasın diye taban payı */
.hero-a__title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-a__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: lineIn 1.1s var(--ease) forwards;
}
.hero-a__title .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes lineIn { to { transform: none } }

.hero-a__lead {
  margin-top: 30px;
  max-width: 52ch;
  color: var(--gray-300);
  font-size: 1.05em;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .4s forwards;
}
.hero-a__actions {
  margin-top: 42px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .9s var(--ease) .55s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

/* ---------------------------------------------------------- VERİ SATIRI */
.hero-a__ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-dark);
  background: rgba(11, 11, 12, .5);
  backdrop-filter: blur(8px);
}
.hero-a__ticker-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 62px;
}
.hero-a__ticker-label {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gray-400);
  flex: none;
}
.hero-a__ticker-list {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.hero-a__ticker-list li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--gray-400);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  white-space: nowrap;
}
.hero-a__ticker-list li.is-on { opacity: 1; transform: none; }
.tk-site  { color: var(--white); letter-spacing: .04em; }
.tk-vol   { color: var(--white); }
.tk-sep   { color: var(--gray-400); }

.hero-a__scroll {
  flex: none;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-a__scroll::after {
  content: "";
  width: 1px; height: 20px;
  background: linear-gradient(to bottom, var(--gray-600), transparent);
  animation: scrollTick 2.2s var(--ease) infinite;
}
@keyframes scrollTick { 0%,100% { opacity: .3; transform: scaleY(.6) } 50% { opacity: 1; transform: scaleY(1) } }

/* ------------------------------------------------- FAALİYET: İKİ PANEL */
/* Açık zemin: müşteri kapakları beyaz zeminli grafik görseller. Karartma
   uygulanmıyor; metin görselin ÜSTÜNDE değil, altındaki düz zeminde duruyor. */
.split {
  display: flex;
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
  min-height: clamp(520px, 66vh, 780px);
}

.split__panel {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
  transition: flex-basis .7s var(--ease), flex-grow .7s var(--ease);
}

/* Hover'da açılan panel %55'e genişler, diğeri daralır */
@media (hover: hover) and (min-width: 900px) {
  .split:hover .split__panel { flex-basis: 45%; }
  .split .split__panel:hover { flex-basis: 55%; }
}

.split__bg { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.split__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* CSS filtresi BİLEREK YOK: filtre görseli ayrı bir rasterizasyon geçişine
     zorluyor ve iki kapak aynı anda görüş alanına girdiğinde kare 83ms'e
     çıkıyordu (kaldırınca 33ms). Görseller zaten tek renkli olduğu için
     filtrenin görsel katkısı da yoktu. */
  transition: transform 1.1s var(--ease);
}
.split__panel:hover .split__bg img { transform: scale(1.04); }

.split__body {
  position: relative;
  padding: clamp(26px, 3.2vw, 56px);
  background: var(--white);
  border-top: 1px solid var(--line-light);
}

.split__no { display: block; font-size: 12px; letter-spacing: .18em; color: var(--gray-600); }
.split__title {
  margin-top: 14px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--black-950);
  transition: transform .6s var(--ease);
}
.split__panel:hover .split__title { transform: translateX(8px); }
.split__claim { margin-top: 14px; color: var(--gray-600); max-width: 40ch; }

/* .split__tags kaldırıldı — bkz. index.php'deki not. */

/* .link-arrow varsayılanı koyu zemin içindir; açık panelde tersine çevir */
.split__go { margin-top: 34px; display: inline-flex; color: var(--black-950); border-color: var(--line-light2); }
.split__go:hover { border-color: var(--black-950); }

/* -------------------------------------------------- KURUCU / KURUMSAL */
.founder__side { text-align: right; }
.founder__kicker {
  margin-top: 26px;
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.6;
}
.founder__sig { text-align: right; }

/* ------------------------------------------------------- SAYAÇ ŞERİDİ */
.stats-sec { padding-block: clamp(56px, 6vw, 96px); }



/* ---------------------------------------------------- EKİPMAN & LOJİSTİK */
.fleet { position: relative; overflow: hidden; }
.fleet__bg { position: absolute; inset: -8% 0; z-index: 0; }
.fleet__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.42);
}
.fleet::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,11,12,.95) 0%, rgba(11,11,12,.74) 52%, rgba(11,11,12,.55) 100%);
  z-index: 1;
}
.fleet__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.fleet__list { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.fleet__list li {
  display: flex;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 30px);
  background: rgba(19, 19, 21, .82);
}
.fleet__list .ico { color: var(--gray-500); margin-top: 3px; }
.fleet__list h3 { color: var(--white); }
.fleet__list p { margin-top: 8px; font-size: 14px; color: var(--gray-400); line-height: 1.6; }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1023px) {
  .split { flex-direction: column; }
  .split__panel { min-height: 460px; }   /* dikey dizilimde de görsel + metin oranı korunsun */
  .fleet__inner { grid-template-columns: 1fr; }
  .founder__side { text-align: left; }
  .founder__sig { text-align: left; }
}

@media (max-width: 720px) {
  .hero-a { min-height: 92svh; }
  .hero-a__ticker-inner { height: auto; padding-block: 14px; gap: 12px; }
  .hero-a__ticker-list { height: 20px; }
  .hero-a__ticker-list li { font-size: 11.5px; gap: 8px; }
  .hero-a__scroll { display: none; }
}

@media (max-width: 420px) {
  .hero-a__ticker-label { display: none; }
  .tk-client, .tk-years { display: none; }
  .tk-client + .tk-sep, .tk-vol + .tk-sep { display: none; }
}

/* Kullanıcı hareketi azaltmışsa hero girişleri anında tamamlanır */
@media (prefers-reduced-motion: reduce) {
  .hero-a__media img { animation: none; }
  .hero-a__title .line > span { transform: none; animation: none; }
  .hero-a__lead, .hero-a__actions { opacity: 1; animation: none; }
  .hero-a__scroll::after { animation: none; }
}

/* Panellerin DIŞ kenarlarındaki metin, sayfanın geri kalanıyla aynı paya otursun;
   iç kenarlar dar kalır. (Hero metni --gutter'dan başlıyor.) */
@media (min-width: 1024px) {
  .split__panel:first-child  .split__body { padding-left: var(--gutter); }
  .split__panel:last-child   .split__body { padding-right: var(--gutter); }
}