/* ============================================================
   NetSecure - MOBIL KATMAN (uygulama hissi)
   stil.css ve hareket.css'ten SONRA yuklenir.

   Kirilma noktalari stil.css ile AYNI: 980 / 760 / 400.
   Onceki surumde hareket.css'te 900px yazmistim; 900-980 px
   arasinda hamburger cikiyor ama menu kapanmiyordu. Olculdu,
   burada duzeltildi -- yeni kural yazarken bu sayilardan sapma.
   ============================================================ */

/* Alt sekme cubugunun yuksekligi. Yuzen dugmeler ve govde payi
   bu degerden hesaplanir; tek yerden degistirilir. */
:root { --cubuk: 62px; }

/* ---------- M1. dokunma hissi ---------- */
@media (max-width: 980px) {
  /* Gri tiklama parlamasi "web sitesi" kokusu verir; uygulamalarda yoktur. */
  * { -webkit-tap-highlight-color: transparent; }

  /* Dokununca oge hafifce basilir: uygulamalardaki dokunsal geri bildirim */
  .kart:active,
  .is-kart:active,
  .marka-kutu:active { transform: scale(.975); }
  .dugme:active { transform: scale(.965); }

  html { overscroll-behavior-y: contain; }
  body { -webkit-text-size-adjust: 100%; }
}

/* ---------- M2. cekmece menu ----------
   stil.css menuyu display:none/flex ile aciyor; display animasyon
   kabul etmez. Burada yandan giren gercek bir panel yapiyoruz. */
@media (max-width: 980px) {
  /* 🔴 BURASI KRITIK -- SILME.
     stil.css .ust'a "backdrop-filter: blur(12px)" veriyor.
     backdrop-filter (filter, transform, will-change gibi) icindeki
     position:fixed ogeler icin KAPSAYICI BLOK olusturur. Cekmece menu
     <header class="ust"> icinde oldugu icin viewport'a degil basligin
     kutusuna gore konumlaniyordu: top/bottom:0 basligin 62px'ine
     oturuyor, menu ~108px'lik kullanilamaz bir seride sikisiyordu.
     Olculdu: hamburgere basildiginda menu aciliyor ama gorunmuyor.
     Mobilde bulaniklik gerekmiyor; kapatinca fixed yeniden viewport'a
     gore cozuluyor. Bulaniklik geri gelirse menu tekrar bozulur. */
  .ust {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--beyaz);
  }
  .ust.kucuk { background: var(--beyaz); }

  /* Masaustu menusu telefonda gizli */
  .menu-masaustu { display: none !important; }

  .menu-cekmece {
    display: flex !important;          /* DOM'da kalir, konumla saklanir */
    position: fixed; top: 0; right: 0; left: auto; bottom: 0;
    width: min(84vw, 340px); max-height: none;
    flex-direction: column; align-items: stretch;
    gap: 6px;
    padding: 84px 18px calc(24px + env(safe-area-inset-bottom));
    background: var(--beyaz);
    border-left: 1px solid var(--cizgi); border-bottom: 0;
    box-shadow: -18px 0 48px rgba(22, 32, 46, .22);
    transform: translateX(103%);
    opacity: 1;
    transition: transform .34s var(--egri);
    z-index: 120;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-cekmece.acik { transform: translateX(0); max-height: none; }

  .menu-cekmece a {
    padding: 15px 16px; font-size: 1.02rem; font-weight: 600;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between;
  }
  /* Sagdaki ok: satirin dokunulabilir oldugu belli olsun */
  .menu-cekmece a::before {
    content: "\203A"; order: 2;
    font-size: 1.35rem; line-height: 1; font-weight: 400;
    color: var(--metin-soluk);
  }
  .menu-cekmece a.etkin { background: var(--lacivert-acik); color: var(--lacivert); }
  .menu-cekmece a:active { background: var(--cizgi); }

  /* Cekmece acikken arka plan kararir */
  .menu-perde {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(10, 20, 35, .5);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .menu-perde.gorunur { opacity: 1; visibility: visible; }

  /* Cekmece acikken arkadaki sayfa kaymaz */
  body.menu-acik { overflow: hidden; }

  .menu-kapat {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--cizgi); background: var(--beyaz);
    display: grid; place-items: center; cursor: pointer;
    font-size: 1.4rem; line-height: 1; color: var(--metin);
  }
  .menu-kapat:active { background: var(--cizgi); }
}
@media (min-width: 981px) {
  .menu-perde, .menu-kapat { display: none; }
}

/* ---------- M3. alt sekme cubugu (uygulama navigasyonu) ----------
   stil.css'teki iki dugmeli .mobil-serit yerine 5 sekme.
   iPhone alt cubugu icin safe-area payi birakiliyor. */
@media (max-width: 760px) {
  .mobil-serit { display: none !important; }

  .sekmeler {
    /* 4 kisayol: Ana Sayfa, Hizmetler, Isler, Iletisim.
       WhatsApp bilincli olarak BURADA DEGIL -- sagda yuzen dugme olarak
       duruyor, cunku en cok dokunulan eylem ve parmagin dogal yerinde. */
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--cizgi);
    box-shadow: 0 -6px 24px rgba(22, 32, 46, .10);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sekme {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 2px 8px; min-height: 58px;
    font-size: .68rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--metin-soluk); text-align: center;
    position: relative;
    transition: color .2s;
  }
  .sekme svg {
    width: 22px; height: 22px; stroke-width: 1.9;
    transition: transform .18s var(--egri);
  }
  .sekme:active { color: var(--lacivert); }
  .sekme:active svg { transform: scale(.88); }

  .sekme.etkin { color: var(--lacivert); }
  /* Etkin sekmenin ustunde kisa cizgi: hangi sayfadayim belli olsun */
  .sekme.etkin::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--lacivert);
  }

  /* Alt cubuk icerigin ustune binmesin */
  /* Cubuk yuksekligi TEK yerden: hem govde payi hem yuzen dugmeler bu
     degeri kullanir, boylece biri degisirse hepsi birlikte kayar. */
  body { padding-bottom: calc(var(--cubuk, 62px) + env(safe-area-inset-bottom)) !important; }

  /* ---- WhatsApp: sagda yuzen yuvarlak dugme ----
     stil.css telefonda bunu gizliyordu (display:none). Geri aciyoruz
     ve sekme cubugunun hemen ustune, sag kenara aliyoruz.
     Yazi gizlenir, yalnizca simge kalir: yer kazandirir. */
  .wa {
    display: inline-flex !important;
    width: 56px; height: 56px; padding: 0;
    border-radius: 50%;
    align-items: center; justify-content: center;
    right: 16px;
    bottom: calc(var(--cubuk, 62px) + 16px + env(safe-area-inset-bottom));
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    z-index: 101;
  }
  .wa span { display: none; }
  .wa svg { width: 28px; height: 28px; }
  .wa:active { transform: scale(.93); }

  /* Yukari don dugmesi WhatsApp'in ustunde, ayni kolonda */
  /* right degeri .wa ile AYNI MERKEZI verecek sekilde secildi:
     .wa 56px genislikte right:16 -> merkez 44px iceride.
     .yukari 40px genislikte right:24 -> merkez 44px iceride. */
  .yukari {
    right: 24px;
    bottom: calc(var(--cubuk, 62px) + 82px + env(safe-area-inset-bottom));
    width: 40px; height: 40px;
  }
}
@media (min-width: 761px) {
  .sekmeler { display: none; }
}

/* ---------- M4. yatay kaydirmali kart seridi ----------
   Mobilde 8 karti alt alta dizmek sayfayi sonsuz yapiyor.
   Uygulamalardaki gibi parmakla kaydirilan, her kartta duran serit. */
@media (max-width: 760px) {
  .izgara-kaydir {
    display: grid;
    /* SIFIRLAMA SART: stil.css bu genislikte .izgara-3'e
       "grid-template-columns: 1fr" veriyor. Sifirlanmazsa ilk kart acik
       kolona oturup tam genislik aliyor, sonrakiler %78 kaliyor ve
       yerlesim bozuluyor (canlida goruldu). */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Snap dolguyu hesaba katsin: yoksa ilk kart x=0'a oturuyor ve
       solda 16px olu, kaydirilabilir bir alan kaliyor (olculdu). */
    scroll-padding-left: 16px;
    /* Serit ekran kenarina kadar uzar; kap dolgusunu geri aliyoruz */
    margin: 0 -16px;
    padding: 4px 16px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .izgara-kaydir::-webkit-scrollbar { display: none; }
  .izgara-kaydir > * {
    scroll-snap-align: start;
    /* Serit tek satir: kartlar ayni yuksekligi alsin, kisa olan
       yukarida asili kalmasin */
    height: 100%;
    min-width: 0;
  }
  .izgara-kaydir { align-items: stretch; grid-auto-rows: 1fr; }

  /* Kaydirilabilecegini gosteren ipucu */
  .serit-ipucu {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--metin-soluk);
    margin: 2px 0 10px;
  }
  .serit-ipucu i {
    display: block; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--lacivert), transparent);
    animation: ipucuKay 1.9s ease-in-out infinite;
  }
  @keyframes ipucuKay {
    0%, 100% { transform: translateX(0); opacity: .5; }
    50%      { transform: translateX(6px); opacity: 1; }
  }
}
@media (min-width: 761px) {
  .serit-ipucu { display: none; }
}

/* ---------- M5. ust menu telefonda daha toplu ---------- */
@media (max-width: 760px) {
  .ust-ic { height: 62px; }
  .ust.kucuk .ust-ic { height: 56px; }
  .marka img { height: 30px; }
  .ust.kucuk .marka img { height: 28px; }

  /* Ust menudeki telefon dugmesi TELEFONDA GIZLI.
     Arama islevi alt cubuktaki "Ara" sekmesinde; ustte de tutmak ayni
     eylemi ucuncu kez tekrarliyordu. Masaustunde numara olarak kalir. */
  .ust-dugme { display: none; }

  /* Kisayol DEGIL: yan dolgu .kap'tan gelir (yukaridaki nota bak). */
  .vitrin-ic { padding-top: 34px; padding-bottom: 44px; }
  .bolum { padding: 40px 0; }
  .bolum-basi { margin-bottom: 20px; }
  .kaydir-ipucu { display: none; }
}

/* Masaustunde simge gizli, numara gorunur */
@media (min-width: 761px) {
  .ust-dugme .dugme-telefon .ahize { display: none; }
}

/* ---------- M6. tam ekran uygulama kipi ----------
   Telefon "ana ekrana ekle" ile acildiginda tarayici cubugu yoktur;
   ust bosluga kendimiz pay veriyoruz ki icerik centigin altina girmesin. */
@media (display-mode: standalone) {
  .ust { padding-top: env(safe-area-inset-top); }
  .menu-cekmece { padding-top: calc(84px + env(safe-area-inset-top)); }
  /* Uygulama kipinde okuma cubugu gereksiz gorsel gurultu */
  .ilerleme { display: none; }
}

/* ---------- M7. cok kucuk ekran ---------- */
@media (max-width: 400px) {
  .sekme { font-size: .63rem; }
  .sekme svg { width: 20px; height: 20px; }
  .izgara-kaydir { grid-auto-columns: 84%; }
}

/* ---------- M8. alt bilgi telefonda ----------
   Sikayet: "en alt footer bos bir ekran gibi duruyor". Sebebi 4 kolonun
   telefonda alt alta dizilip her birinin bol bosluk almasi. Cozum:
   iki kolon + daralmis bosluklar + bagli listeler iki kolona yayilir. */
@media (max-width: 760px) {
  .alt { padding: 30px 0 22px; }

  .alt-izgara {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
  }

  /* Logo ve tanitim yazisi tam genislik alir, digerleri yan yana */
  .alt-izgara > *:first-child { grid-column: 1 / -1; }

  .alt-marka img { height: 28px; }
  .alt .tanitim {
    font-size: .87rem; line-height: 1.55; margin: 8px 0 0;
    max-width: 46ch;
  }

  .alt h4 { font-size: .82rem; margin-bottom: 8px; letter-spacing: .02em; }
  /* stil.css .alt ul'a "display: grid; gap: 9px" veriyor; asagidaki
     margin ile TOPLANIYORDU (satir basina ~37px, amaclanan ~28px;
     15 satirda ~130px fazla yukseklik). Bosluk tek kaynaktan: margin. */
  .alt ul { margin: 0; padding: 0; list-style: none; gap: 0; }
  .alt li { font-size: .86rem; line-height: 1.5; margin-bottom: 5px; }

  /* Iletisim kolonu tam genislik: adres uzun, iki kolonda kiriliyor */
  .alt-izgara > *:last-child { grid-column: 1 / -1; }
  .alt-izgara > *:last-child ul {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px;
  }
  .alt-izgara > *:last-child li:nth-child(n+3) { grid-column: 1 / -1; }

  .alt-serit {
    flex-direction: column; align-items: flex-start; gap: 8px;
    margin-top: 20px; padding-top: 14px;
    font-size: .78rem;
  }
}

@media (max-width: 400px) {
  .alt-izgara { grid-template-columns: 1fr; gap: 18px; }
  .alt-izgara > *:last-child ul { grid-template-columns: 1fr; }
}

/* ---------- M9. yapimci imzasi telefonda ---------- */
@media (max-width: 760px) {
  .alt-serit .alt-sag {
    gap: 12px; margin-top: 2px;
  }
  .alt-serit .imza { font-size: .76rem; }
}

/* ---------- M10. cekmece masaustunde gizli ----------
   Cekmece basligin disinda ayri bir <nav>; genis ekranda gorunmemeli. */
@media (min-width: 981px) {
  .menu-cekmece { display: none !important; }
  .menu-perde, .menu-kapat { display: none !important; }
}