@charset "UTF-8";
/* ==========================================================================
   NOVATEK v3 — responsive.css
   Masaüstü öncelikli; 1024 / 860 / 640 kırılımları.
   ========================================================================== */

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
  .inds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  /* Mobil menü */
  .hd__burger { display: flex; }
  .hd__cta { display: none; }
  /* Teklif düğmesi gizlendi; kutu artık hamburgerin ölçüsüne oturur. */
  html.js .hd__ara-btn { width: 44px; }
  .hd__nav {
    position: fixed; inset-block-start: 0; inset-inline-end: 0; z-index: 250;
    width: min(380px, 100%); height: 100dvh;
    background: #fff; border-inline-start: 1px solid var(--c-line);
    padding: 84px 28px 40px;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
    margin: 0;
  }
  .hd__nav.is-open { transform: translateX(0); box-shadow: -20px 0 60px rgba(22,34,43,.12); }
  .hd__close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; inset-block-start: 20px; inset-inline-end: 20px;
    width: 42px; height: 42px; border: 1px solid var(--c-line-2); border-radius: var(--radius);
    color: var(--c-ink);
  }
  .hd__list { display: block; }
  .hd__list li { border-bottom: 1px solid var(--c-line); }
  .hd__link { display: block; padding: 16px 0; font-size: 1.05rem; }
  .hd__link::after { display: none; }
  .hd__cta-m { display: grid; gap: 12px; margin-top: 28px; }

  /* Hero */
  /* .hero min-height masaüstünde de kaldırıldı; burada ezmeye gerek yok. */
  .hero__main { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 48px; }
  /* Tek sütunda görsel metnin altına iniyor; başlıkla hizalama için
     eklenen üst boşluk burada gereksiz kalır. */
  .hero__media { margin-block-start: 0; }
  /*
   * Mobilde önce metin, sonra görsel.
   * Statik tasarımda burada "order: -1" vardı ve görseli başlığın üstüne
   * alıyordu; ziyaretçi ne iş yaptığımızı okumadan önce bir fotoğraf
   * görüyordu. Kural kaldırıldı, DOM sırası geçerli: künye, H1 ve açıklama
   * ekranın en üstünde. Masaüstü düzeni (iki sütun) etkilenmez.
   */

  .about__grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .cta__in { grid-template-columns: 1fr; }
  .cta__side { align-items: stretch; }
  .cta__side .btn { justify-content: center; }

  .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__top > div:first-child { grid-column: span 2; }

  .sols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec__head--row { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .ticker__label { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { flex-wrap: wrap; gap: 18px 28px; }
  .sols { grid-template-columns: 1fr; }
  .inds { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
  .stat { border-inline-start: 0; padding-inline: 0; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .ch { grid-template-columns: 1fr; gap: 4px; }
  .ft__top { grid-template-columns: 1fr; }
  .ft__top > div:first-child { grid-column: span 1; }
  .ft__bot-in { flex-direction: column; align-items: flex-start; }
  /* Masaüstündeki %15 büyütmeyle orantılı (34 -> 39). */
  .ticker__logo { height: 39px; }
}

/* Üst çubuk, standartlar, çerez — kırılımlar */
@media (max-width: 860px) {
  .topbar__contact a:first-child { display: none; }
  .topbar__contact .topbar__sep { display: none; }
  /* İkinci numara dar ekranda düşer: üç öğe (e-posta + iki numara) 860 px
     altında üst çubuğu taşırıyor. İletişim sayfasında ikisi de duruyor. */
  .topbar__tel2 { display: none; }
  .stds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stds { grid-template-columns: 1fr; }
  .cookie { inset-inline: 12px; inset-block-end: 12px; max-width: none; }
  /* Dikey dizilim artık her ekranda geçerli (style.css bölüm 19); burada
     yalnızca dar ekranda metin hizası düzeltilir. */
  .cookie__in { text-align: start; }
  .map iframe { height: 260px; }
}

/* ==========================================================================
   Menü — geniş ekran sıkışması ve mobil akordeon
   ========================================================================== */
@media (max-width: 1180px) and (min-width: 1025px) {
  .hd__link { padding: 10px 8px; font-size: .85rem; }
  .hd__in { gap: 18px; }
}

@media (max-width: 1024px) {
  /* Akordeon davranışı: paneller akışa girer, ok düğmesi açar */
  .hd__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
  .hd__caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: var(--c-soft);
    transition: transform .25s var(--ease);
  }
  .hd__item.is-open > .hd__row .hd__caret { transform: rotate(180deg); color: var(--c-blue); }
  .hd__item--mega { position: relative; }

  .hd__panel,
  .hd__panel--mega {
    position: static;
    display: none;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0;
    border: 0; border-top: 0; box-shadow: none;
    padding: 0 0 12px;
    background: transparent;
  }
  .hd__item.is-open > .hd__panel { display: block; }
  .hd__item--has:hover > .hd__panel { display: none; }
  .hd__item--has.is-open:hover > .hd__panel { display: block; }

  .mega { display: block; max-height: none; overflow: visible; padding: 0; }
  .hd__panel--mega .wrap { padding-inline: 0; }
  .mega__col + .mega__col { margin-top: 14px; }
  .mega__parent { border-bottom: 0; padding-bottom: 4px; margin-bottom: 2px; }
  .drop li > a { padding: 9px 0; }
  .mega__list > li > a { padding: 8px 0; }

  .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__top > div:first-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  .ft__top { grid-template-columns: 1fr; }
  .ft__top > div:first-child { grid-column: span 1; }
}

@media (max-width: 1024px) {
  .mega__label { border-bottom: 0; padding-bottom: 4px; margin: 10px 0 2px; }
}
@media (max-width: 640px) {
  .topbar__outlet, .topbar__outlet + .topbar__sep { display: none; }
}

/* İletişim kanalları, sekmeler, kariyer */
@media (max-width: 1024px) {
  .chan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chan { grid-template-columns: 1fr; }
  .tabs.is-ready .tabs__bar { display: flex; width: 100%; }
  .tabs__btn { flex: 1; padding: 12px 10px; }
  .pagehead__title { font-size: 1.9rem; }
}

/* ==========================================================================
   MOBİL İYİLEŞTİRMELERİ
   --------------------------------------------------------------------------
   Bu bloğun tamamı medya sorgusu içindedir; 1025 px ve üzeri hiçbir kuraldan
   etkilenmez. Masaüstü düzeni, ölçüleri ve tipografisi değişmemiştir.

   Ölçülerek bulunan sorunlar:
     1. Sayfa yatayda 375 px kayıyordu (kapalı menü çekmecesi + dil şeridi)
     2. Üst çubuk içeriği 424 px, ekran 375 px — taşma
     3. Dil düğmeleri 22×30 px — parmakla isabet ettirmek zor
     4. Form alanı yazısı 14,7 px — iOS odaklanınca sayfayı yakınlaştırıp
        geri döndürmüyordu (75 alanlı kariyer formunda ciddi sorun)
     5. Onay kutusu 16×16 px
     6. Menü çekmecesindeki alt bağlantılar ~31 px
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- 1) Kapalı çekmece yatay kaydırma üretmesin ---------------------------
     position:fixed + translateX(100%) ile ekran dışına itilen panel, belge
     genişliğini 375 px büyütüyordu. visibility ile tamamen devre dışı kalır;
     ayrıca kapalı menüdeki bağlantılar klavye/ekran okuyucu için de erişilmez
     olur — erişilebilirlik açısından da doğrusu budur.
     Geçiş gecikmesi kapanma animasyonunun görünmesini sağlar. */
  .hd__nav {
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .hd__nav.is-open {
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s linear 0s;
  }

  /*
   * visibility tek başına yetmez: gizlenen öğe düzende yer kaplamaya devam
   * eder ve translateX ile ekran dışına itilen panel belge genişliğini
   * büyütür. Kesme gerekir.
   *
   * "clip" bilinçli olarak seçildi; "hidden" olsaydı body bir kaydırma
   * kabına dönüşür ve içindeki position:sticky başlık ile üst şerit
   * çalışmaz hâle gelirdi. "clip" kaydırma kabı oluşturmaz.
   * Desteklemeyen eski tarayıcılarda tek etki yatay kaydırmanın sürmesidir.
   */
  body { overflow-x: clip; }

  /* --- 2) Üst çubuk: dil düğmeleri parmakla kullanılabilir olsun -----------
     Çubuk 38 -> 44 px. Başlığın konumu --topbar-h değişkenine bağlı olduğu
     için kendiliğinden uyar; ayrıca hesaplama yapmak gerekmez. */
  :root { --topbar-h: 44px; }

  .lang { gap: 2px; }
  .lang__item {
    padding: 15px 8px;          /* çubuğun tamamı: 44 px dokunma hedefi */
    line-height: 1;
  }

  /* --- 3) iOS otomatik yakınlaştırmasını önle ------------------------------
     iOS Safari, yazı boyutu 16 px'in altındaki bir alana odaklanınca sayfayı
     yakınlaştırır ve geri döndürmez. Kullanıcı formun ortasında yana kaymış
     bir sayfayla kalır. 16 px eşiği bunu tamamen kapatır. */
  .fld__in,
  .fld__in--select,
  .fld__in--area { font-size: 16px; }

  /* Onay kutusu daha kolay hedeflensin */
  .fld__box { width: 20px; height: 20px; margin-top: 2px; }
  .fld--check { grid-template-columns: 20px minmax(0, 1fr); }

  /* --- 4) Çekmecedeki alt bağlantılar --------------------------------------
     Mega panel ve açılır liste bağlantıları ~31 px idi. */
  .mega__list > li > a,
  .drop li > a { padding: 12px 0; }

  /* --- 5) Uzun kelime ve adresler satır taşırmasın -------------------------
     KVKK sayfalarında youtube-nocookie.com gibi bölünemeyen diziler
     dar ekranda kutudan taşıyordu. */
  .entry { overflow-wrap: anywhere; }
  .entry code { word-break: break-all; }

  /* --- 10) Slider noktaları: dokunma hedefi --------------------------------
     Noktalar 8×8 px idi; parmakla isabet ettirmek için önerilen ölçü 44 px.
     Görünen daire zaten ::before'da (style.css), düğmenin kendisi yalnızca
     hedef alan — burada sadece o alan büyütülüyor. Masaüstünde fare hassas
     olduğu için kural buraya yazıldı, oradaki ölçüler değişmiyor.

     Görsel konum birebir korunuyor:
       - gap 10 -> 0, yerine her düğmeye 5 px yan dolgu; noktalar arası
         boşluk yine 10 px.
       - Sıra 8 -> 44 px uzadığı için üstten 18 px, alttan 18 px büyüyecekti;
         margin-block 18px -> 0 ve -18px ile ikisi de geri alınıyor. Nokta
         ekranda tam olarak eskisi ile aynı yerde kalıyor, altındaki şerit
         de kaymıyor. */
  .slayt__noktalar { gap: 0; margin-block: 0 -18px; }
  .slayt__nokta { height: 44px; padding: 0 5px; }

  /* --- 11) Arama panelinin kapat düğmesi -----------------------------------
     32×32 idi. Simge 18 px kalıyor, kutu 44 px'e çıkıyor. */
  .hd__ara-kapat { width: 44px; height: 44px; }
}

@media (max-width: 640px) {

  /* --- 6) Üst çubuk taşması ------------------------------------------------
     Ölçüm: iletişim bloğu 211 px + dil şeridi 213 px = 424 px, ekran 375 px.
     E-posta adresi tek başına 172 px. Dar ekranda telefon daha işlevli
     (dokun-ara); e-posta zaten alt bilgide ve iletişim sayfasında var. */
  .topbar__contact a[href^="mailto"],
  .topbar__contact a[href^="mailto"] + .topbar__sep { display: none; }

  /* --- 7) Dokunma hedefleri ------------------------------------------------
     Hedef 44 px. Yalnızca dolgu artırılarak yapılmıyor: o yöntemde yükseklik
     font satır yüksekliğinden TÜRETİLİYOR (13+13+15,4+2 = 43,4) ve --fs-xs
     bir gün değişirse hedef sessizce bozulur. min-height ölçüyü doğrudan
     garanti eder, dolgu yalnızca metni ortalar.

     Çerez butonları da dahil: KVKK onayı zorunlu bir etkileşim ve dar ekranda
     kuralın dışında kalmıştı. */
  .chan__btn,
  .cookie__btn { padding: 12px 16px; min-height: 44px; }
  .tabs__btn { padding: 14px 10px; }

  /* --- 8) Video kapısı ------------------------------------------------------
     Panel içeriği (başlık + düğme + iki satır not) dar ekranda 16:9 kutuya
     sığmıyordu. Kapı içeriğe göre uzayabilsin; poster arka planda kalsın. */
  .video__gate { min-height: 0; }
  .video__poster { aspect-ratio: auto; min-height: 100%; }
  .video__panel { padding: 26px 18px; gap: 8px; }
  .video__note { display: none; }        /* uzun not; alttaki bağlantı yeterli */

  /* --- 12) Giriş künyesi: 2+1 kırılması ------------------------------------
     Üç künye yan yana sığmıyor (52 + 147 + 150 px = 349 px, artı boşluklar);
     ikisi üstte, biri altta kalıyor ve kaza gibi görünüyordu. Dar ekranda
     üçü de alt alta. Yan yana dizilim için etiketlerin kısalması gerekirdi;
     metne dokunmamak için düzen değiştirildi. */
  .hero__facts { flex-direction: column; gap: 14px; }

  /* --- 9) Uzun formda dikey yoğunluk --------------------------------------
     Kariyer formu mobilde 12 000 px'i aşıyor. Alan aralıklarını bir tık
     sıkmak okunabilirliği bozmadan yaklaşık 900 px kazandırır. */
  .fld { margin-bottom: 13px; }
  .form__group { margin-top: 26px; padding-top: 16px; }
  .form__sub { margin: 16px 0 6px; }
}

/* ==========================================================================
   Başa dön butonu — dar ekran
   ==========================================================================
   Masaüstünde 46px yeterli; dokunmatikte 48px'in altına inilmemeli.
   Kenar payı da küçültülüyor, dar ekranda 20px fazla yer kaplıyor.
   ========================================================================== */
@media (max-width: 640px) {
  .totop {
    width: 48px; height: 48px;
    inset-block-end: 14px; inset-inline-end: 14px;
  }
  .totop__ico { width: 24px; height: 24px; }
}

/* Kartlar (vaka analizi, endüstriler, hizmetler) — .ind ve .sol ile aynı
   kırılımlar. Kural .kartlar üzerinden yazıldığı için 4 sütunlu değişke de
   (.kartlar--4) buradan besleniyor; dar ekranda ikisi aynı davranır. */
/*
 * Dört sütunlu ızgara 1240 px altında ÜÇE iner.
 *
 * Sebebi ızgaranın genişliği: 1240 px üstünde kartlar metin sütunundan taşıp
 * 1192 px'e çıkıyor (bkz. style.css'teki .entry .kartlar kuralı), altında ise
 * 832 px'lik metin sütununda kalıyor. 832'yi dörde bölünce kart 208 px'e
 * düşüyordu — fotoğraf geldiğinde okunmaz olurdu.
 *
 * Bu kural 1024 px kuralından ÖNCE gelmeli: ikisi de aynı özgüllükte (0-1-0),
 * dolayısıyla 1024 altında sonradan gelen kural kazanıp 2 sütuna indiriyor.
 */
@media (max-width: 1239px) {
  .kartlar--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kartlar { grid-template-columns: 1fr; }
}

/* WhatsApp butonu — dar ekran. Başa dön butonu 48 px'e çıkıp kenar payı
   14 px'e indiği için konum yeniden hesaplanır: 14 + 48 + 10 = 72 px. */
@media (max-width: 640px) {
  .wa { inset-block-end: 72px; inset-inline-end: 14px; width: 48px; height: 48px; }
  .wa__btn { width: 48px; height: 48px; }
  .wa__ico { width: 26px; height: 26px; }
  .wa__link { font-size: var(--fs-xs); padding: 10px 14px; }
}


/* Sağdan giriş yalnızca iki sütunlu düzende anlamlı.
   Tek sütuna düşünce görsel metnin ALTINA iner; yandan kayması hem anlamsız
   hem de 342 px'lik öğeyi 48 px ötelediği için ekran kenarını zorlar.
   Dar ekranda standart dikey belirişe döner. */
@media (max-width: 860px) {
  html.js [data-rv="sag"] { transform: translateY(14px); }
}