/* ===================================================================
   UMER MEDIA PRODUCTION — Ana Stil Dosyası
   -------------------------------------------------------------------
   ÖZELLEŞTİRME REHBERİ:
   Sitedeki tüm renkler, fontlar ve boşluklar aşağıdaki "AYARLAR"
   bölümünde tanımlı. Bir rengi değiştirmek istersen sadece oradaki
   değeri değiştir — tüm site otomatik güncellenir.
   =================================================================== */

/* ===================================================================
   1. AYARLAR  (buradan özelleştir)
   =================================================================== */
:root {
  /* --- RENKLER --- */
  --renk-arkaplan:        #0B0B0D;   /* Sayfa arka planı (koyu) */
  --renk-arkaplan-2:      #141418;   /* Kart / bölüm arka planı */
  --renk-arkaplan-3:      #1C1C21;   /* Hover ve kenarlık zeminleri */
  --renk-yazi:            #F4F4F6;   /* Ana yazı rengi */
  --renk-yazi-soluk:      #9B9BA5;   /* İkincil / açıklama yazıları */
  --renk-vurgu:           #C9A227;   /* Vurgu rengi (altın) — butonlar, linkler */
  --renk-vurgu-koyu:      #A8871B;   /* Vurgu hover rengi */
  --renk-cizgi:           #26262C;   /* İnce ayırıcı çizgiler */

  /* --- YAZI TİPLERİ --- */
  --font-baslik: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-govde:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- ÖLÇÜLER --- */
  --genislik-max:   1240px;  /* İçeriğin maksimum genişliği */
  --bosluk-bolum:   120px;   /* Bölümler arası dikey boşluk */
  --radius:         18px;    /* Köşe yuvarlaklığı (kartlar) */
  --radius-kucuk:   10px;    /* Köşe yuvarlaklığı (buton, form) */

  /* --- HAREKET --- */
  --gecis: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===================================================================
   2. TEMEL SIFIRLAMA
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;              /* mobilde yanlara kaymayı engeller */
  -webkit-text-size-adjust: 100%;  /* iPhone yatay/dikey çevirince yazı boyu sabit kalsın */
}

body {
  background: var(--renk-arkaplan);
  color: var(--renk-yazi);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Görsel/video hiçbir zaman kabına sığmayıp taşmasın.
   İSTİSNA: Hero videosu masaüstünde kabından taşarak ekranı kaplıyor
   (JS ile ölçülüyor), o yüzden bu kuralın dışında tutuluyor. */
img, video { max-width: 100%; }
iframe:not(.hero-video-wrap iframe) { max-width: 100%; }
.hero-video-wrap iframe { max-width: none; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

/* Ortak sarmalayıcı — içeriği ortalar ve maksimum genişlik verir */
.container {
  width: 100%;
  max-width: var(--genislik-max);
  margin: 0 auto;
  padding: 0 28px;
}

.bolum { padding: var(--bosluk-bolum) 0; }

/* Bölüm üstü küçük etiket yazısı */
.etiket {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--renk-vurgu);
  margin-bottom: 18px;
  font-weight: 600;
}

/* ===================================================================
   3. ÜST MENÜ (NAVBAR) + MEGA MENÜ
   =================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 11, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--renk-cizgi);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

/* Logo */
.logo {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
}
.logo span { color: var(--renk-vurgu); }

/* Logo görseli (assets/img/logo.png) — navbar ve footer'da kullanılır.
   Yüksekliği sabit, genişlik oranı otomatik korunur. */
.logo-img { height: 30px; width: auto; display: block; }
.footer-basligi ~ .logo-img,
.footer-logo .logo-img { height: 34px; }

/* Menü linkleri */
.nav { display: flex; align-items: center; gap: 38px; }

.nav-link {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--renk-yazi-soluk);
  transition: color var(--gecis);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 26px 0;   /* mega menüye giderken fare boşluğa düşmesin */
}
.nav-link:hover,
.nav-link.aktif { color: var(--renk-yazi); }

.nav-link .ok {
  width: 10px; height: 10px;
  transition: transform var(--gecis);
}

/* --- Mega menü --- */
.nav-item { position: relative; }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 640px;
  background: var(--renk-arkaplan-2);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-item:hover .nav-link .ok { transform: rotate(180deg); }

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mega-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  transition: background var(--gecis);
}
.mega-kart:hover { background: var(--renk-arkaplan-3); }

.mega-ikon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--renk-arkaplan-3);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-vurgu);
  transition: background var(--gecis);
}
.mega-kart:hover .mega-ikon { background: rgba(201, 162, 39, 0.12); }
.mega-ikon svg { width: 20px; height: 20px; }

.mega-baslik {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--renk-yazi);
}

/* Mobil menü butonu (küçük ekranlarda görünür) */
.menu-btn { display: none; color: var(--renk-yazi); }
.menu-btn svg { width: 26px; height: 26px; }

/* ===================================================================
   4. HERO (ANA SAYFA) — sadece video, üzerinde yazı yok
   =================================================================== */
.hero {
  position: relative;
  height: 82vh;
  height: 82dvh;      /* mobil tarayıcıların adres çubuğu açılıp kapanınca
                          da doğru yükseklikte kalsın (dvh destekleyen
                          tarayıcılarda devreye girer, diğerlerinde vh kalır) */
  min-height: 480px;
  margin-top: 76px;   /* sabit menünün altından başlasın */
  overflow: hidden;
  background: var(--renk-arkaplan-2);
}

.hero video,
.hero .hero-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube gömme videosunun hero alanını tam kaplaması için.
   -------------------------------------------------------------------
   NOT: Gerçek "cover" (oranı bozmadan kırparak doldurma) hesabı burada
   değil, js/main.js içindeki boyutlandirHeroVideo() fonksiyonunda
   yapılıyor — çünkü hero'nun yüksekliği tam ekran değil (%82/%76),
   sadece vw/vh ile hesaplamak mobilde oranı bozardı. JS, kutunun kendi
   gerçek genişlik/yüksekliğine bakıp videoyu buna göre px cinsinden
   boyutlandırıyor; bu blok sadece JS çalışana kadarki ilk görünüm. */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* video sade bir arka plan — tıklanamaz, YouTube'a yönlendirmez */
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

/* Kalkan: iframe'in tam üstünde, tıklama/hover'ı burada durdurur.
   pointer-events: auto olduğu için YouTube'un kendi kontrol katmanına
   fare hiç ulaşmıyor. Kök neden (playlist= parametresiyle oluşan
   kalıcı ileri/geri çubuğu) js/main.js'te düzeltildiği için burada
   artık siyah perde/gecikme YOK — video direkt görünür durumda açılır. */
.hero-video-kalkan {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}

/* Alt kenarda hafif karartma — logo şeridine yumuşak geçiş */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--renk-arkaplan));
  pointer-events: none;
}

/* Gerçek video eklenene kadar gösterilen yer tutucu */
.hero-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,162,39,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(80,110,190,0.10), transparent 55%),
    var(--renk-arkaplan-2);
}
.hero-placeholder .yer-tutucu-yazi {
  color: var(--renk-yazi-soluk);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ===================================================================
   5. LOGO ŞERİDİ (sağdan sola akan referans logoları)
   =================================================================== */
.logo-serit {
  border-top: 1px solid var(--renk-cizgi);
  border-bottom: 1px solid var(--renk-cizgi);
  padding: 26px 0;
  overflow: hidden;
  position: relative;
}

/* Kenarlarda yumuşak solma efekti */
.logo-serit::before,
.logo-serit::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.logo-serit::before { left: 0;  background: linear-gradient(to right, var(--renk-arkaplan), transparent); }
.logo-serit::after  { right: 0; background: linear-gradient(to left,  var(--renk-arkaplan), transparent); }

.serit-ray {
  display: flex;
  width: max-content;
  animation: kaydir 60s linear infinite;
}
.logo-serit:hover .serit-ray { animation-play-state: paused; }

.serit-grup {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}

/* Tüm logolar dosya bazında sıkı kırpıldığı (içerik dışındaki boşluklar
   silindiği) için, aynı sabit yükseklikte gösterildiklerinde gerçekten
   aynı görsel boyutta dururlar. */
.serit-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity var(--gecis), transform var(--gecis);
}
.serit-logo:hover { opacity: 1; transform: translateY(-2px); }

.serit-logo img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  /* Tüm logolar, orijinal rengi ne olursa olsun BEYAZA çevrilir. */
  filter: brightness(0) invert(1);
}

@keyframes kaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }   /* grup 3 kez tekrarlandığı için 1/3 */
}

/* ===================================================================
   6. HİZMET KARTLARI (Ana sayfa)
   =================================================================== */
.hizmet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.hizmet-kart {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--renk-arkaplan-2);
  border: 1px solid var(--renk-cizgi);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform var(--gecis), border-color var(--gecis);
}
.hizmet-kart:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.4);
}

/* Kartın arka planındaki video/görsel önizleme */
.kart-medya {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kart-medya video,
.kart-medya img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: scale(1.02);
  transition: opacity var(--gecis), transform var(--gecis);
}
.hizmet-kart:hover .kart-medya video,
.hizmet-kart:hover .kart-medya img {
  opacity: 1;
  transform: scale(1.06);
}

/* Video/görsel yokken gösterilen renkli yer tutucu */
.kart-medya .yer-tutucu {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 12px),
    linear-gradient(140deg, #2A2A32, var(--renk-arkaplan-2));
}

/* Yazıların okunması için ALT kısımda karartma.
   Gradyan mümkün olduğunca dar tutuldu — sadece yazının hemen
   arkasında var, kartın üst yarısı tamamen açık ve canlı. */
.hizmet-kart::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(11,11,13,0.88) 0%,
    rgba(11,11,13,0.62) 22%,
    rgba(11,11,13,0.20) 42%,
    rgba(11,11,13,0) 60%);
}

.kart-icerik {
  position: relative;
  z-index: 2;
  padding: 30px;
  /* Kart görselleri canlı/açık olabildiği için (gökyüzü, beyaz duvar,
     deniz vb.) yazılar BEYAZ ve güçlü gölgeli — her zeminde okunur.
     Gradyanı artırmak yerine gölge kullanıyoruz ki görsel canlı kalsın. */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.8),
    0 4px 28px rgba(0,0,0,0.65);
}
.kart-icerik h3 {
  margin-bottom: 8px;
  color: #FFFFFF;
}
.kart-icerik p {
  color: #FFFFFF;
  font-size: 0.98rem;
  max-width: 40ch;
}

.kart-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--renk-vurgu);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.kart-ok svg { width: 15px; height: 15px; transition: transform var(--gecis); }
.hizmet-kart:hover .kart-ok svg { transform: translateX(5px); }

/* ===================================================================
   7. HAKKIMIZDA BÖLÜMÜ
   =================================================================== */
.hakkimizda { border-top: 1px solid var(--renk-cizgi); }

/* Metin solda + dikey görsel sağda.
   Görsel portre olduğu için sütunu dar tutuyoruz; metin sütunu geniş
   kalıyor, ikisi dikeyde ortalanarak dengeli duruyor. */
.hakkimizda-duzen {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 64px;
  align-items: center;
}

.hakkimizda-gorsel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  border: 1px solid var(--renk-cizgi);
  display: block;
}

/* Metnin yanındaki LOGO
   -------------------------------------------------------------------
   Fotoğraftan farklı davranır: şeffaf zeminli olduğu için çerçeve,
   kırpma ve köşe yuvarlaklığı uygulanmaz. Kendi oranında, metnin
   hizasında ortada durur. */
.hakkimizda-gorsel .hakkimizda-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border: none;
  border-radius: 0;
  margin: 0 auto;
}

.hakkimizda-metin {
  max-width: 760px;
}
.hakkimizda-metin p {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--renk-yazi-soluk);
  line-height: 1.85;
}
.hakkimizda-metin p + p { margin-top: 22px; }

/* ===================================================================
   8. KAPANIŞ CTA
   =================================================================== */
.cta {
  text-align: center;
  border-top: 1px solid var(--renk-cizgi);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.07), transparent 60%),
    var(--renk-arkaplan);
}
.cta h2 { margin-bottom: 30px; }

/* Butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--radius-kucuk);
  font-weight: 600;
  font-size: 0.96rem;
  transition: background var(--gecis), transform var(--gecis), color var(--gecis);
}
.btn-birincil {
  background: var(--renk-vurgu);
  color: #14120A;
}
.btn-birincil:hover {
  background: var(--renk-vurgu-koyu);
  transform: translateY(-2px);
}
.btn svg { width: 16px; height: 16px; }

/* ===================================================================
   9. HİZMET SAYFALARI — "Neler Sunuyoruz?" bölümleri
   =================================================================== */

/* Sayfa başlığı (hizmet sayfalarının en üstü) */
.sayfa-basligi {
  padding: calc(76px + 96px) 0 0;   /* sabit menünün yüksekliği + boşluk */
}
.sayfa-basligi h1 { max-width: 18ch; }

/* --- Zigzag düzen (Event sayfası): görsel sol / sağ dönüşümlü --- */
.zigzag { display: grid; gap: 90px; margin-top: 64px; }

.zigzag-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* Çift sıralarda görsel sağa geçer */
.zigzag-satir:nth-child(even) .zigzag-medya { order: 2; }

.zigzag-medya {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--renk-arkaplan-3), var(--renk-arkaplan-2));
  border: 1px solid var(--renk-cizgi);
}
.zigzag-medya img,
.zigzag-medya video { width: 100%; height: 100%; object-fit: cover; }

.zigzag-metin h3 { margin-bottom: 14px; }
.zigzag-metin p { color: var(--renk-yazi-soluk); }

/* Madde numarası */
.madde-no {
  font-family: var(--font-baslik);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--renk-vurgu);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 12px;
}

/* --- Tek blok düzen (Kurumsal / Reklam / Sosyal Medya sayfaları) --- */
.tek-blok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 56px;
}
.tek-blok .blok-metin p {
  color: var(--renk-yazi-soluk);
  font-size: 1.05rem;
  line-height: 1.85;
}
.tek-blok .blok-medya {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, var(--renk-arkaplan-3), var(--renk-arkaplan-2));
  border: 1px solid var(--renk-cizgi);
}
.tek-blok .blok-medya img,
.tek-blok .blok-medya video { width: 100%; height: 100%; object-fit: cover; }

/* Yer tutucu içindeki ince yazı
   NOT: Çapraz çizgili desen, oraya henüz gerçek görsel/video
   konmadığını belli etmek için. Gerçek dosyayı ekleyince kaybolur. */
.yer-tutucu-etiket {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  color: var(--renk-yazi-soluk);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* ===================================================================
   10. VİDEO GALERİSİ (3 sütun ızgara)
   -------------------------------------------------------------------
   KURAL: BÜTÜN kartlar aynı boyutta (16:9) — böylece satırlar dümdüz
   hizalanır, "bazısı büyük bazısı küçük" görüntüsü olmaz.

   Dikey (Reels/Shorts) videolar için karta  class="video-kart dikey"
   ekle. Kart yine aynı boyutta kalır; dikey görüntü kırpılmadan
   ortada durur, arkası da o görüntünün bulanık hâliyle dolar.
   Tıklanınca zaten tam dikey (9:16) olarak açılır.
   =================================================================== */
.galeri { border-top: 1px solid var(--renk-cizgi); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
}

.video-kart {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(140deg, var(--renk-arkaplan-3), var(--renk-arkaplan-2));
  border: 1px solid var(--renk-cizgi);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

/* Dikey kart: boyutu diğerleriyle birebir aynı (16:9).
   Görüntü kırpılmasın diye "contain" ile ortalanır. */
.video-kart.dikey img,
.video-kart.dikey video {
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Dikey kartın boş kalan yanlarını, aynı görselin bulanık hâliyle
   doldurur — böylece kart boş/eksik durmaz.
   --kapak değişkenini js/main.js otomatik olarak kartın kendi
   görselinden atar, elle bir şey yazmana gerek yok. */
.video-kart.dikey::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--kapak);
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.62);
  transform: scale(1.25);
}

.video-kart:hover {
  transform: scale(1.035);
  border-color: rgba(201, 162, 39, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.video-kart img,
.video-kart video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Kartın üzerindeki oynat ikonu
   z-index: dikey kartlarda görselin üstünde kalsın diye gerekli. */
.oynat {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  /* Karartma yalnızca alttaki yazı şeridinde — kartın geri kalanı
     tamamen açık, video görseli canlı görünür. */
  background: linear-gradient(to top,
    rgba(11,11,13,0.72) 0%,
    rgba(11,11,13,0.22) 16%,
    rgba(11,11,13,0) 38%);
  transition: background var(--gecis);
}
.video-kart:hover .oynat {
  background: linear-gradient(to top,
    rgba(11,11,13,0.55) 0%,
    rgba(11,11,13,0.10) 16%,
    rgba(11,11,13,0) 38%);
}

/* Oynat ikonu NORMALDE GİZLİ — video kapağının önünü kapatmasın.
   Sadece imleç kartın üzerine gelince yumuşakça beliriyor.
   Telefonda hover olmadığı için hiç görünmez; kapak tamamen açık kalır. */
.oynat-daire {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 244, 246, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 244, 246, 0.22);
  opacity: 0;
  transform: scale(0.9);
  transition: background var(--gecis), transform var(--gecis), opacity var(--gecis);
}
.video-kart:hover .oynat-daire {
  background: var(--renk-vurgu);
  opacity: 1;
  transform: scale(1);
}
.oynat-daire svg { width: 20px; height: 20px; margin-left: 3px; color: var(--renk-yazi); }
.video-kart:hover .oynat-daire svg { color: #14120A; }

/* Kart alt köşesindeki başlık */
.video-baslik {
  position: absolute;
  left: 20px; bottom: 18px;
  right: 20px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 0.92rem;
  z-index: 3;
  color: #FFFFFF;
  /* Video kapakları açık renkli olabildiği için güçlü gölge */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.8),
    0 4px 28px rgba(0,0,0,0.65);
}

/* --- Lightbox (tıklayınca ekranın ortasında açılan pencere) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
}
.lightbox.acik { opacity: 1; visibility: visible; }

.lightbox-icerik {
  width: min(1100px, 100%);
  max-height: 86vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  transform: scale(0.94);
  transition: transform var(--gecis);
}
.lightbox.acik .lightbox-icerik { transform: scale(1); }

.lightbox-icerik video {
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
}

/* YouTube videosu lightbox içinde açıldığında (16:9 oranını korur) */
.lightbox-icerik iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  border: 0;
  display: block;
}

/* Dikey (Shorts) video açıldığında pencere daralır ve
   video de 9:16 (dikey) oranında, tam bir Shorts gibi açılır */
.lightbox-icerik.dikey { width: min(420px, 92vw); }
.lightbox-icerik.dikey iframe { aspect-ratio: 9 / 16; max-height: 88vh; }
.lightbox-icerik.dikey video { aspect-ratio: 9 / 16; }

.lightbox-kapat {
  position: absolute;
  top: 26px; right: 30px;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 244, 246, 0.1);
  border: 1px solid rgba(244, 244, 246, 0.18);
  color: var(--renk-yazi);
  transition: background var(--gecis), transform var(--gecis);
}
.lightbox-kapat:hover { background: rgba(244, 244, 246, 0.2); transform: rotate(90deg); }
.lightbox-kapat svg { width: 20px; height: 20px; }

/* ===================================================================
   11. İLETİŞİM SAYFASI
   =================================================================== */
.iletisim-duzen {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  margin-top: 56px;
  align-items: start;
}

/* Form kaldırıldıktan sonraki hâl: iletişim bilgileri tek başına,
   sayfanın ortasında ve fazla genişlemeden dursun. */
.iletisim-duzen.tek-sutun {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 32px;
  text-align: center;
}
.iletisim-giris {
  color: var(--renk-yazi-soluk);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
/* Tek sütun hâlinde bilgi bloğu ortalanır, ama satırlar kendi
   aralarında SOLA hizalı kalır — böylece telefon/e-posta/konum
   ikonları alt alta aynı hizada durur, kayık görünmez. */
.tek-sutun .bilgi-satir {
  justify-content: flex-start;
  text-align: left;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.tek-sutun .sosyal-liste { justify-content: center; }

/* --- Form --- */
.form-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-alan { margin-bottom: 18px; }
.form-alan label {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--renk-yazi-soluk);
}
.form-alan input,
.form-alan select,
.form-alan textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--renk-arkaplan-2);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius-kucuk);
  color: var(--renk-yazi);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--gecis), background var(--gecis);
}
.form-alan textarea { resize: vertical; min-height: 130px; }

.form-alan input:focus,
.form-alan select:focus,
.form-alan textarea:focus {
  outline: none;
  border-color: var(--renk-vurgu);
  background: var(--renk-arkaplan-3);
}
.form-alan input::placeholder,
.form-alan textarea::placeholder { color: #5C5C66; }

/* Açılır menü oku */
.form-alan select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9BA5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.form-alan select option { background: var(--renk-arkaplan-2); }

.form-gonder { margin-top: 8px; }

/* Form gönderildi mesajı */
.form-mesaj {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-kucuk);
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.3);
  color: var(--renk-vurgu);
  font-size: 0.92rem;
  display: none;
}
.form-mesaj.gorunur { display: block; }
.form-mesaj a { color: inherit; text-decoration: underline; }

/* Gönderim başarısız olduğunda kırmızı uyarı hâli */
.form-mesaj.hata {
  background: rgba(214, 84, 74, 0.12);
  border-color: rgba(214, 84, 74, 0.35);
  color: #F0A79F;
}

/* Spam tuzağı — robotlar doldursun diye var, insanlar görmemeli.
   display:none yerine böyle gizleniyor çünkü bazı robotlar
   display:none olan alanları atlıyor. */
.bot-tuzagi {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- İletişim bilgileri kutusu --- */
.iletisim-bilgi {
  background: var(--renk-arkaplan-2);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 36px;
}
.bilgi-satir {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--renk-cizgi);
}
.bilgi-satir:first-child { padding-top: 0; }
.bilgi-satir:last-child { border-bottom: none; padding-bottom: 0; }

.bilgi-ikon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--renk-arkaplan-3);
  color: var(--renk-vurgu);
}
.bilgi-ikon svg { width: 18px; height: 18px; }

.bilgi-etiket {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--renk-yazi-soluk);
  margin-bottom: 3px;
}
.bilgi-deger {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 1rem;
  transition: color var(--gecis);
}
a.bilgi-deger:hover { color: var(--renk-vurgu); }

/* Sosyal medya ikonları */
.sosyal-liste {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.sosyal-link {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--renk-arkaplan-3);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-yazi-soluk);
  transition: color var(--gecis), background var(--gecis), transform var(--gecis);
}
.sosyal-link:hover {
  color: var(--renk-vurgu);
  background: rgba(201, 162, 39, 0.1);
  transform: translateY(-3px);
}
.sosyal-link svg { width: 19px; height: 19px; }

/* ===================================================================
   12. FOOTER
   =================================================================== */
.site-footer {
  border-top: 1px solid var(--renk-cizgi);
  background: var(--renk-arkaplan-2);
  padding: 72px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 56px;
  padding-bottom: 48px;
}

.footer-slogan {
  color: var(--renk-yazi-soluk);
  margin-top: 14px;
  font-size: 0.98rem;
}

.footer-basligi {
  font-family: var(--font-baslik);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--renk-yazi-soluk);
  margin-bottom: 20px;
}

.footer-linkler { display: flex; flex-direction: column; gap: 12px; }
.footer-linkler a {
  color: var(--renk-yazi-soluk);
  font-size: 0.94rem;
  transition: color var(--gecis);
  width: fit-content;
}
.footer-linkler a:hover { color: var(--renk-vurgu); }

.footer-iletisim { display: flex; flex-direction: column; gap: 10px; }
.footer-iletisim a {
  color: var(--renk-yazi-soluk);
  font-size: 0.94rem;
  transition: color var(--gecis);
  width: fit-content;
}
.footer-iletisim a:hover { color: var(--renk-vurgu); }

.footer-sosyal { display: flex; gap: 10px; margin-top: 18px; }
.footer-sosyal a {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--renk-arkaplan-3);
  color: var(--renk-yazi-soluk);
  transition: color var(--gecis), background var(--gecis);
}
.footer-sosyal a:hover { color: var(--renk-vurgu); background: rgba(201,162,39,0.1); }
.footer-sosyal svg { width: 17px; height: 17px; }

.footer-alt {
  border-top: 1px solid var(--renk-cizgi);
  padding-top: 28px;
  text-align: center;
  color: var(--renk-yazi-soluk);
  font-size: 0.86rem;
}

/* ===================================================================
   13. AÇILIŞ ANİMASYONU (sayfa kaydırıldıkça beliren içerik)
   =================================================================== */
.beliren {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.beliren.gorunur { opacity: 1; transform: translateY(0); }

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .beliren { opacity: 1; transform: none; }
}

/* ===================================================================
   14. MOBİL / TABLET UYUMU
   =================================================================== */
@media (max-width: 1024px) {
  :root { --bosluk-bolum: 88px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .iletisim-duzen { grid-template-columns: 1fr; gap: 48px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .hakkimizda-duzen { gap: 40px; grid-template-columns: 1fr minmax(0, 280px); }

  /* Logo şeridi: ekran daraldıkça logolar da küçülsün, orantısız
     büyük durmasınlar. */
  .logo-serit { padding: 22px 0; }
  .logo-serit::before,
  .logo-serit::after { width: 90px; }
  .serit-logo { height: 44px; }
  .serit-logo img { max-width: 130px; }
  .serit-grup { gap: 52px; padding-right: 52px; }
}

@media (max-width: 860px) {
  /* Menü linkleri gizlenir, hamburger butonu görünür */
  .nav {
    position: fixed;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--renk-arkaplan-2);
    border-bottom: 1px solid var(--renk-cizgi);
    padding: 12px 22px 26px;
    transform: translateY(-130%);
    transition: transform var(--gecis);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.acik { transform: translateY(0); }
  .nav-link { padding: 14px 0; font-size: 1rem; }
  .menu-btn { display: grid; place-items: center; }

  /* Mega menü mobilde normal liste gibi açılır */
  .mega {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0 0 10px;
    display: none;
  }
  /* ÖNEMLİ: Masaüstündeki .nav-item:hover/.focus-within kuralı
     translateX(-50%) uyguluyor ve öncelik sırası daha yüksek olduğu için
     mobilde de devreye girip menüyü ekranın soluna kaydırıyordu
     (yazılar kesiliyordu). Burada onu iptal ediyoruz. */
  .nav-item:hover .mega,
  .nav-item:focus-within .mega {
    transform: none;
  }

  .nav-item.acik .mega { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 4px; }
  .mega-kart { padding: 12px 0; }

  /* Tek sütuna düşen bölümler */
  .hizmet-grid { grid-template-columns: 1fr; }

  /* Kartlar mobilde darlaştığı için başlık/açıklama daha çok satıra
     yayılıyor ve görselin parlak kısmına taşıyordu. Karartmayı biraz
     yukarı taşıyarak yazının tamamının arkasını kapatıyoruz. */
  .hizmet-kart::before {
    background: linear-gradient(to top,
      rgba(11,11,13,0.92) 0%,
      rgba(11,11,13,0.80) 34%,
      rgba(11,11,13,0.45) 58%,
      rgba(11,11,13,0.12) 80%,
      rgba(11,11,13,0) 100%);
  }
  /* Hakkımızda: mobilde görsel metnin ALTINA geçer ve ortalanır */
  .hakkimizda-duzen { grid-template-columns: 1fr; gap: 36px; }
  .hakkimizda-gorsel { max-width: 320px; margin: 0 auto; }
  .hakkimizda-gorsel .hakkimizda-logo { max-width: 220px; }
  .zigzag-satir,
  .tek-blok { grid-template-columns: 1fr; gap: 30px; }
  .zigzag-satir:nth-child(even) .zigzag-medya { order: 0; }
  .zigzag { gap: 64px; }
  .form-satir { grid-template-columns: 1fr; gap: 0; }

  /* HERO — telefonda video KIRPILMADAN, tam kare olarak görünür.
     Masaüstünde hero ekranın belli bir yüzdesi kadar yüksek ve video
     "cover" mantığıyla kırpılıyor. Dar ekranlarda bu, 16:9 videonun
     sağını solunu kesip sadece ortasını gösteriyordu.
     Burada hero'nun kendisini 16:9 yapıyoruz; böylece video karesi
     ekrana tam sığıyor, hiçbir yeri kesilmiyor. */
  .hero {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  /* iPhone'da form alanına dokununca sayfanın kendiliğinden
     yakınlaşmasını (zoom) engeller — Safari 16px altındaki yazılarda
     otomatik zoom yapıyor. */
  .iletisim-form input,
  .iletisim-form select,
  .iletisim-form textarea {
    font-size: 16px;
  }

  /* Parmakla rahat basılabilsin diye dokunma alanları büyütüldü */
  .iletisim-form input,
  .iletisim-form select { min-height: 48px; }
  .btn { min-height: 48px; }
  .footer-linkler a,
  .footer-iletisim a { padding: 6px 0; display: inline-block; }
  .sosyal-link,
  .footer-sosyal a { min-width: 44px; min-height: 44px; }

  /* Logo şeridi tablet/telefonda daha da küçülür */
  .logo-serit { padding: 18px 0; }
  .logo-serit::before,
  .logo-serit::after { width: 60px; }
  .serit-logo { height: 36px; }
  .serit-logo img { max-width: 110px; }
  .serit-grup { gap: 44px; padding-right: 44px; }
}

@media (max-width: 620px) {
  :root { --bosluk-bolum: 68px; }
  .container { padding: 0 20px; }
  .video-grid { grid-template-columns: 1fr; }
  /* Mobilde de bütün kartlar aynı boyutta kalır (16:9). Dikey videolar
     tek sütunda tam ekranı kaplayacak kadar uzamasın diye ayrı bir
     oran verilmiyor — üstteki genel kural geçerli. */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .iletisim-bilgi { padding: 26px; }

  /* En dar ekranlar: logolar iyice küçülür ki şerit ince bir çizgi
     gibi kalsın, sayfayı domine etmesin. */
  .logo-serit { padding: 15px 0; }
  .logo-serit::before,
  .logo-serit::after { width: 40px; }
  .serit-logo { height: 30px; }
  .serit-logo img { max-width: 92px; }
  .serit-grup { gap: 36px; padding-right: 36px; }
}