/* ============================================================
   NetSecure - hareket ve gorsel katman
   stil.css'ten SONRA yuklenir. Kutuphane yok, derleme yok.

   Kural: hareket dikkat dagitmaz, yon gosterir. Kullanicinin
   isletim sisteminde "hareketi azalt" acikse hepsi kapanir --
   en altta tek blok halinde.
   ============================================================ */

:root {
  --hiz: .62s;
  --egri: cubic-bezier(.22, .74, .22, 1);
  --hareket: 1; /* JS bunu 0 yapinca sayac gibi is mantigi da durur */
}

/* ---------- 1. sayfa ustu okuma cubugu ---------- */
.ilerleme {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lacivert), var(--yesil));
  z-index: 200; pointer-events: none;
  transition: transform .1s linear, opacity .3s;
}

/* ---------- 2. ust menu: kaydirinca toplanir ---------- */
.ust {
  transition: box-shadow .3s var(--egri), background .3s, border-color .3s;
}
.ust-ic { transition: height .3s var(--egri); }
.ust.kucuk {
  box-shadow: 0 4px 24px rgba(22, 32, 46, .09);
  background: rgba(255, 255, 255, .96);
}
.ust.kucuk .ust-ic { height: 60px; }
.ust.kucuk .marka img { height: 32px; transition: height .3s var(--egri); }
.marka img { transition: height .3s var(--egri); }

/* menu baglantilarinin altinda buyuyen cizgi */
.menu a { position: relative; }
.menu a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px;
  background: var(--lacivert); border-radius: 2px;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .28s var(--egri);
}
.menu a:hover::after, .menu a.etkin::after { transform: scaleX(1); }

/* ---------- 3. acilis (reveal) sistemi ---------- */
/* Temel: gorunum alanina girince yerine oturur. */
.ac {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--hiz) var(--egri) var(--gecikme, 0ms),
    transform var(--hiz) var(--egri) var(--gecikme, 0ms),
    filter var(--hiz) var(--egri) var(--gecikme, 0ms);
  will-change: opacity, transform;
}
.ac-gorunur { opacity: 1; transform: none; filter: none; }

/* Cesitler */
.ac-sol { transform: translateX(-34px); }
.ac-sag { transform: translateX(34px); }
.ac-yakin { transform: scale(.94); }
.ac-bulanik { filter: blur(10px); transform: translateY(18px); }
.ac-yumusak { transform: translateY(14px); }

/* Izgara icindeki kartlar sirayla acilir: gecikmeyi JS verir. */

/* ---------- 4. vitrin: suzulen isik lekeleri ---------- */
.vitrin::before {
  content: ""; position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 28%, rgba(62, 174, 73, .34), transparent 62%),
    radial-gradient(34% 38% at 82% 22%, rgba(93, 160, 255, .30), transparent 64%),
    radial-gradient(44% 46% at 62% 88%, rgba(31, 78, 156, .38), transparent 66%);
  filter: blur(18px);
  animation: suzul 26s ease-in-out infinite alternate;
}
@keyframes suzul {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04); }
}

/* Vitrin yazilari sirayla girer -- JS'i beklemez, sayfa acilir acilmaz baslar. */
.vitrin-etiket,
.vitrin h1,
.vitrin .alt-yazi,
.vitrin-dugmeler,
.vitrin-gorsel {
  animation: girisYukari .85s var(--egri) both;
}
.vitrin-etiket    { animation-delay: .05s; }
.vitrin h1        { animation-delay: .16s; }
.vitrin .alt-yazi { animation-delay: .28s; }
.vitrin-dugmeler  { animation-delay: .40s; }
.vitrin-gorsel    { animation-delay: .30s; animation-name: girisSag; }

@keyframes girisYukari {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes girisSag {
  from { opacity: 0; transform: translateX(30px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Etiketteki nokta canli nabiz */
.vitrin-etiket .nokta { position: relative; }
.vitrin-etiket .nokta::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  animation: nabiz 2.4s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Vitrin fotografi cok yavas yakinlasir (ken burns) */
.vitrin-gorsel img { animation: yavasYakinlas 22s ease-in-out infinite alternate; }
@keyframes yavasYakinlas {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Vitrin altindaki kaydirma ipucu */
.kaydir-ipucu {
  position: absolute; left: 50%; bottom: 18px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  animation: ipucuZipla 2.6s ease-in-out infinite;
}
.kaydir-ipucu span { display: block; width: 1px; height: 22px; background: linear-gradient(rgba(255,255,255,.7), transparent); }
@keyframes ipucuZipla {
  0%, 100% { transform: translate(-50%, 0); opacity: .75; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* ---------- 5. bolum zeminleri: beyaz alanlar bos kalmasin ---------- */
.bolum { position: relative; }

/* Ince nokta dokusu -- yaziyi bogmayacak kadar soluk */
.bolum-desen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(31, 78, 156, .11) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
.bolum-desen > .kap { position: relative; z-index: 1; }

/* Gri bolumlerin ustune ve altina yumusak gecis */
.bolum-gri { position: relative; }
.bolum-gri::before,
.bolum-gri::after {
  content: ""; position: absolute; left: 0; right: 0; height: 56px; pointer-events: none;
}
.bolum-gri::before { top: 0; background: linear-gradient(var(--beyaz), transparent); }
.bolum-gri::after { bottom: 0; background: linear-gradient(transparent, var(--beyaz)); }

/* Bolum basligindaki etiketin yaninda buyuyen cizgi */
.bolum-etiket { position: relative; }
.bolum-basi:not(.orta) .bolum-etiket::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 0; height: 2px; margin-left: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--yesil), transparent);
  transition: width .8s var(--egri) .25s;
}
.bolum-basi.ac-gorunur:not(.orta) .bolum-etiket::after { width: 46px; }

/* ---------- 6. kartlar ---------- */
.kart, .is-kart, .sayi-kutu, .marka-kutu {
  transition:
    transform .34s var(--egri),
    box-shadow .34s var(--egri),
    border-color .34s var(--egri);
}
.kart { position: relative; overflow: hidden; }

/* Uzerine gelince soldan saga gecen isik */
.kart::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(31, 78, 156, .09), transparent);
  transform: skewX(-16deg); pointer-events: none;
  transition: left .75s var(--egri);
}
.kart:hover::after { left: 120%; }

.kart:hover, .is-kart:hover {
  transform: translateY(-7px);
  box-shadow: var(--golge-guclu);
  border-color: rgba(31, 78, 156, .32);
}

.kart .simge { transition: transform .38s var(--egri), background .3s; }
.kart:hover .simge { transform: translateY(-2px) scale(1.09) rotate(-4deg); }

.kart .devam { transition: gap .25s var(--egri), color .25s; display: inline-flex; gap: 4px; }
.kart:hover .devam { gap: 10px; }

/* Is kartinda fotograf yakinlasir */
.is-kart .foto { overflow: hidden; }
.is-kart .foto img { transition: transform .6s var(--egri); }
.is-kart:hover .foto img { transform: scale(1.07); }

/* Sayi kutulari uzerine gelince hafif kalkar */
.sayi-kutu:hover { transform: translateY(-4px); }
.sayi-kutu .buyuk { font-variant-numeric: tabular-nums; }

/* ---------- 7. marka seridi: sonsuz akis ---------- */
.marka-akis {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marka-akis-ic {
  display: flex; gap: 18px; width: max-content;
  animation: akis 34s linear infinite;
}
.marka-akis:hover .marka-akis-ic { animation-play-state: paused; }
.marka-akis .marka-kutu { flex: 0 0 auto; min-width: 168px; }
@keyframes akis {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 8. dugmeler ---------- */
.dugme { position: relative; overflow: hidden; }
.dugme::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, .28), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.dugme:hover::before { opacity: 1; }
.dugme-ana:hover, .dugme-yesil:hover { transform: translateY(-2px); }
.dugme-ana, .dugme-yesil { transition: transform .22s var(--egri), background .2s, box-shadow .25s; }

/* ---------- 9. WhatsApp: dikkat ceken halka ---------- */
/* DIKKAT: .wa'nin position degeri BURADA DEGISTIRILMEZ.
   stil.css'te "position: fixed" -- buraya relative yazilirsa dugme sabit
   kosesinden cikip sayfanin en altina akiyor (yasandi). Halka zaten
   fixed ebeveyne gore konumlaniyor, ek bir sey gerekmiyor. */
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--yesil);
  animation: halka 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes halka {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- 10. yukari don dugmesi ---------- */
.yukari {
  position: fixed; right: 20px; bottom: 96px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--beyaz); color: var(--lacivert);
  border: 1px solid var(--cizgi); box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s var(--egri), visibility .3s;
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari:hover { color: var(--beyaz); background: var(--lacivert); border-color: var(--lacivert); }
.yukari svg { width: 18px; height: 18px; }

/* ---------- 11. mobil menu acilisi ---------- */
@media (max-width: 900px) {
  /* Mobil menu kurallari BURADAN KALDIRILDI -- artik mobil.css'teki
     cekmece paneli sahibi. Buradaki "max-height: 520px" cekmecenin
     boyunu kesiyordu: uzun telefonlarda menu alta kadar inmiyordu
     (olculdu). Ayni ogeye iki dosyadan yerlesim vermek karisikligin
     kaynagi; mobil yerlesim tek yerde dursun. */
  .menu a::after { display: none; }
  .yukari { bottom: 132px; right: 14px; }
  /* Mobilde agir efektleri kapatiyoruz: pil ve akicilik onemli */
  .vitrin::before { animation: none; }
  .vitrin-gorsel img { animation: none; }
  .ac { transform: translateY(18px); }
  .ac-sol, .ac-sag { transform: translateY(18px); }
}

/* ---------- 12. klavye erisimi ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--lacivert);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 13. yazdirma ---------- */
@media print {
  .ilerleme, .yukari, .wa, .mobil-serit, .kaydir-ipucu { display: none !important; }
  .ac { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HAREKETI AZALT
   Isletim sisteminde bu ayar acikken sitede hicbir sey oynamaz.
   Erisilebilirlik gerekliligi; ayrica hareket tutmasi yapan
   kullanicilar icin sart.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { --hareket: 0; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ac { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ilerleme, .kaydir-ipucu { display: none; }
  .marka-akis-ic { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ============================================================
   IKINCI DALGA - gorsel derinlik
   Buradaki her sey de "hareketi azalt" ayarinda kapanir;
   en alttaki blok bu dosyanin sonunda oldugu icin sonradan
   eklenen kurallar da o blogun kapsamina girer.
   ============================================================ */

/* ---------- 14. vitrin: radar taramasi ----------
   Guvenlik firmasi kimligine oturan tek hareket: yavas donen
   koni huzmesi. Dairenin icine maskelenir, disina tasmaz. */
.vitrin-radar {
  position: absolute; z-index: 1; pointer-events: none;
  right: -6%; top: 50%; transform: translateY(-50%);
  width: min(560px, 52vw); aspect-ratio: 1;
  opacity: .3;
}
.vitrin-radar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(62,174,73,.55), transparent 28%, transparent 100%);
  animation: tarama 7.5s linear infinite;
}
.vitrin-radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* Ic ice halkalar: radar ekrani hissi */
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 58px,
      rgba(255,255,255,.16) 58px 59px);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 70%);
}
@keyframes tarama { to { transform: rotate(360deg); } }

/* ---------- 15. hizmet ikonu: asagidan dolar ----------
   Ikonlar dolgu tabanli oldugu icin "cizilme" degil "dolma". */
.kart .simge svg {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .7s var(--egri) calc(var(--gecikme, 0ms) + 180ms);
}
.kart.ac-gorunur .simge svg { clip-path: inset(0 0 0 0); }

/* ---------- 16. fotograf perdesi ----------
   Gorsel soldan saga acilir. Yalnizca clip-path oynar, yerlesim
   degismez -- boylece sayfa sicramaz (layout shift olmaz).

   NOT: secici DARALTILDI. Once ".ac-gorunur img" yazmistim; o
   kural marka logolari dahil her gorseli kapsiyordu ve niyet
   edilmeyen yerlerde de is goruyordu. */
.is-kart .foto img,
.galeri img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--egri) calc(var(--gecikme, 0ms) + 120ms);
}
.ac-gorunur .foto img,
.ac-gorunur.galeri img,
.galeri.ac-gorunur img,
.ac-gorunur > .foto img { clip-path: inset(0 0 0 0); }

/* Izgara icindeki is kartlari tek tek acildigi icin kendi uzerlerinden de yakala */
.is-kart.ac-gorunur .foto img { clip-path: inset(0 0 0 0); }

/* ---------- 17. kartlarda hafif egim (3B) ----------
   JS fareyi izler, --egimX/--egimY degiskenlerini yazar.
   Dokunmatik cihazlarda hic devreye girmez. */
/* Ozgullige dikkat: ".kart:hover" (0,1,1) duz ".egimli" (0,1,0) kuralini
   ezdigi icin egim tam da lazim oldugu anda -- fare uzerindeyken --
   calismiyordu. Kurallari ".ac-gorunur" ve eleman siniflariyla
   birlikte yaziyoruz ki ozgulluk her durumda yetsin.
   Ayrica ".ac" acilis kaymasini bozmamasi icin egim ancak eleman
   acildiktan SONRA (.ac-gorunur) devreye girer. */
@media (hover: hover) and (pointer: fine) {
  .egimli.ac-gorunur {
    transform-style: preserve-3d;
    transform:
      perspective(900px)
      rotateX(var(--egimX, 0deg))
      rotateY(var(--egimY, 0deg))
      translateY(var(--kalk, 0px));
    transition: transform .16s ease-out, box-shadow .34s var(--egri);
  }
  .kart.egimli.ac-gorunur:hover,
  .is-kart.egimli.ac-gorunur:hover {
    transform:
      perspective(900px)
      rotateX(var(--egimX, 0deg))
      rotateY(var(--egimY, 0deg))
      translateY(-7px);
  }
}

/* ---------- 18. bolum ayirici: capraz kesim ---------- */
.ayirici {
  position: relative; height: 74px; margin: 0; border: 0; padding: 0;
  background: linear-gradient(180deg, var(--zemin), var(--beyaz));
  overflow: hidden;
}
.ayirici::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: -60%;
  height: 160%; background: var(--beyaz);
  transform: rotate(-1.6deg);
}
.ayirici-ters::before { background: var(--zemin); }

/* 19. SABIT CAGRI SERIDI KALDIRILDI
   Sayfa boyunca ekrani takip etmesi rahatsiz ediciydi (kullanici
   geri bildirimi). Ust menudeki telefon dugmesi ve sayfa sonundaki
   cagri blogu ayni isi zaten yapiyor. */

/* ---------- 20. dugmede tiklama dalgasi ---------- */
.dalga {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: scale(0); animation: dalgaAc .6s ease-out forwards;
}
@keyframes dalgaAc {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- 21. vitrin basligindaki parlayan kelime ---------- */
.parlak {
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 38%,
    #b9f5c1 48%, #ffffff 58%,
    #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: parlama 5.5s ease-in-out infinite;
}
@keyframes parlama {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}

/* ---------- 22. onay listesi sirayla ---------- */
.vitrin-liste li {
  opacity: 0; transform: translateX(-10px);
  animation: listeGir .5s var(--egri) both;
}
.vitrin-liste li:nth-child(1) { animation-delay: .55s; }
.vitrin-liste li:nth-child(2) { animation-delay: .65s; }
.vitrin-liste li:nth-child(3) { animation-delay: .75s; }
.vitrin-liste li:nth-child(4) { animation-delay: .85s; }
.vitrin-liste li:nth-child(5) { animation-delay: .95s; }
@keyframes listeGir {
  to { opacity: 1; transform: none; }
}
.vitrin-liste .tik { display: inline-block; animation: tikPop .4s var(--egri) both; animation-delay: inherit; }
@keyframes tikPop {
  0%   { transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.3) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- 23. alt bilgi kolonlari sirayla ----------
   DIKKAT: kural "html.js" ile baslar; bu sinifi hareket.js ekler.
   Onceden kosulsuzdu ve .alt-izgara JS'in acilis listesinde olmadigi
   icin alt bilgi HIC gorunmuyordu -- sayfanin altinda kocaman bos
   lacivert blok kaliyordu. Icerigi CSS ile gizleyip JS'e bel baglamak
   yanlis: JS calismazsa icerik tumden kaybolur. */
html.js .alt-izgara > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--egri), transform .55s var(--egri);
}
html.js .alt-izgara.ac-gorunur > * { opacity: 1; transform: none; }
html.js .alt-izgara.ac-gorunur > *:nth-child(2) { transition-delay: .09s; }
html.js .alt-izgara.ac-gorunur > *:nth-child(3) { transition-delay: .18s; }
html.js .alt-izgara.ac-gorunur > *:nth-child(4) { transition-delay: .27s; }

/* ---------- 24. sayi kutularinda ince ust cizgi ---------- */
.sayi-kutu { position: relative; overflow: hidden; }
.sayi-kutu::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--lacivert), var(--yesil));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--egri) calc(var(--gecikme, 0ms) + 120ms);
}
.sayi-kutu.ac-gorunur::before { transform: scaleX(1); }

/* ---------- 25. mobil ince ayar ---------- */
@media (max-width: 900px) {
  /* Radar ve perde efektleri mobilde kapali: pil ve akicilik */
  .vitrin-radar { display: none; }
  .is-kart .foto img, .galeri img, .vitrin-gorsel img { clip-path: none; transition: none; }
  .kart .simge svg { clip-path: none; transition: none; }
  .ayirici { height: 46px; }
}

/* ---------- 26. yapimci imzasi (alt serit sagi) ---------- */
.alt-serit .alt-sag {
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.alt-serit .imza {
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .01em;
  white-space: nowrap;
}
.alt-serit .imza a {
  color: rgba(255, 255, 255, .72);
  font-weight: 650; letter-spacing: .02em;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.alt-serit .imza a:hover {
  color: var(--yesil);
  border-bottom-color: var(--yesil);
}