/* =========================================================
   AnyPilot - Premium Polish
   Tasarim geciligi: daha profesyonel tipografi, palet,
   bosluklama ve mikro etkileşimler.
   ========================================================= */

/* Google Fonts — Inter (govde) + Manrope (basliklar) — CSP: fonts.googleapis izinli */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root{
  /* Zemin: soguk beyaz + sicak lacivert kontrasti */
  --zemin:#ffffff;
  --zemin2:#f6f9fd;
  --zemin3:#eaf1fa;
  --kart:#ffffff;
  --cizgi:#dfe6f0;
  --cizgi2:#c4d0e2;

  /* Metin: daha derin lacivert (kontrast +) */
  --metin:#0a1226;
  --metin2:#4c5b76;
  --metin3:#8492ab;

  /* Marka mavi + degradesi */
  --mavi:#0053c2;
  --mavi-koyu:#00317a;
  --mavi-acik:#1b7ee0;
  --mavi-tint:#eaf2fd;
  --lacivert:#08122a;

  /* Aksan: sicak sari (CTA icin secim) */
  --altin:#f5b400;
  --altin-koyu:#c98d00;
  --altin-tint:#fff5d6;

  --yesil:#0e9e6d;
  --yesil-tint:#deefe6;
  --kirmizi:#c93b3b;

  /* Katmanli govmesi golge — Apple/Linear tarzi */
  --g1:0 1px 2px rgba(10,18,38,.05), 0 2px 5px rgba(10,18,38,.05);
  --g2:0 4px 14px rgba(10,18,38,.07), 0 2px 6px rgba(10,18,38,.05);
  --g3:0 18px 44px rgba(10,18,38,.10), 0 6px 14px rgba(10,18,38,.06);
  --g-mavi:0 10px 28px rgba(0,83,194,.28);
  --g-altin:0 10px 28px rgba(245,180,0,.35);

  --r:14px;
  --max:1180px;
}

/* Tipografi */
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif !important;
  font-feature-settings:"cv11","ss01","cv02","cv03" !important;
  letter-spacing:-.011em;
  line-height:1.65;
  color:var(--metin);
}
h1,h2,h3,h4,.hero-baslik,.bolum-bas h2{
  font-family:"Manrope","Inter","Segoe UI",system-ui,sans-serif !important;
  letter-spacing:-.022em !important;
  color:var(--metin);
}
h1{ font-weight:800 !important; }
h2{ font-weight:700 !important; }
h3{ font-weight:600 !important; }

/* Hero: daha havada, daha buyuk H1 */
.hero h1{
  font-size:clamp(38px,5.6vw,68px) !important;
  line-height:1.03 !important;
  font-weight:800 !important;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--mavi-acik) 0%,var(--mavi) 55%,var(--mavi-koyu) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{
  font-size:clamp(17px,1.6vw,20px) !important;
  color:var(--metin2) !important;
  max-width:640px !important;
  margin:24px auto 38px !important;
  line-height:1.55 !important;
}
.hero{ padding-top:52px; padding-bottom:60px; }

/* Butonlar: daha yumusak, mikro etkilesim */
.btn{
  padding:15px 30px !important;
  border-radius:12px !important;
  font-weight:650 !important;
  font-size:15.5px !important;
  letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn-satin{
  background:linear-gradient(135deg,var(--altin) 0%,var(--altin-koyu) 100%) !important;
  color:#1a1a1a !important;
  box-shadow:var(--g-altin) !important;
  border:0 !important;
}
.btn-satin:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(245,180,0,.45) !important;
}
.btn-indir{
  background:linear-gradient(135deg,var(--mavi-acik) 0%,var(--mavi) 55%,var(--mavi-koyu) 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:var(--g-mavi) !important;
}
.btn-indir:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,83,194,.4) !important;
}

/* Etiketler (bolum ustundeki kapsuller) */
.etiket{
  padding:7px 16px !important;
  background:var(--mavi-tint) !important;
  color:var(--mavi-koyu) !important;
  font-weight:700 !important;
  font-size:11.5px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  border-radius:999px;
  border:1px solid rgba(0,83,194,.14);
}

/* Bolum basliklari */
.bolum-bas h2,
section h2{
  font-size:clamp(26px,3.4vw,38px) !important;
  line-height:1.15 !important;
  margin:12px 0 12px !important;
}
.bolum-bas p{
  font-size:17px !important;
  color:var(--metin2) !important;
  max-width:640px;
  margin:0 auto;
}

/* Bolum bosluklari — daha havadar */
section{
  padding-top:96px !important;
  padding-bottom:96px !important;
}
@media (max-width:768px){
  section{ padding-top:64px !important; padding-bottom:64px !important; }
}

/* Kartlar: gercek "sirket sitesi" hissi */
.g-kart,
.tm-kart,
.kart,
.ozellik-kart{
  border-radius:16px !important;
  border:1px solid var(--cizgi) !important;
  box-shadow:var(--g1) !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
.g-kart:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--g3) !important;
  border-color:var(--cizgi2) !important;
}

/* Navigasyon: daha rafine */
.nav-linkler a{
  font-weight:550 !important;
  color:var(--metin2) !important;
  position:relative;
  padding:6px 0;
}
.nav-linkler a:hover{ color:var(--mavi) !important; }

/* Rozet (canli) */
.rozet{
  background:var(--yesil-tint) !important;
  color:var(--yesil) !important;
  border:1px solid rgba(14,158,109,.2) !important;
  font-weight:600 !important;
}
.rozet .nokta{
  width:8px; height:8px; border-radius:50%;
  background:var(--yesil);
  box-shadow:0 0 0 4px rgba(14,158,109,.15);
  animation:apCanli 2s ease-in-out infinite;
}
@keyframes apCanli{ 50%{ box-shadow:0 0 0 8px rgba(14,158,109,0); } }

/* Videolar bolumu — cerceveler daha zarif */
#videolar figure{
  border-radius:18px !important;
  box-shadow:var(--g2) !important;
  border:1px solid var(--cizgi) !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
#videolar figure:hover{
  transform:translateY(-4px);
  box-shadow:var(--g3) !important;
}
#videolar figcaption{
  padding:16px 20px !important;
  background:linear-gradient(180deg,#fff 0%,var(--zemin2) 100%) !important;
  border-top:1px solid var(--cizgi) !important;
}

/* Galeri kartlari — daha havadar */
#galeri .galeri-izgara{ gap:22px !important; }
#galeri .g-kart figcaption{ padding:14px 18px !important; }
#galeri .g-kart figcaption strong{ font-size:14.5px !important; }
#galeri .g-kart figcaption span{ color:var(--metin2) !important; }

/* Aralara ince ayrac cizgi (bolum gecisleri) */
section + section{ border-top:1px solid var(--cizgi); }

/* Yumusak scroll ve secim */
::selection{ background:var(--mavi-tint); color:var(--mavi-koyu); }

/* Hero — daha AÇIK, ferah, animasyonlu ag arka plan zayif katman olarak */
.hero{
  background:
    linear-gradient(180deg, rgba(246,249,253,.42) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.90) 100%),
    url('/hero-bg.svg?v=9') center center / cover no-repeat !important;
  position:relative;
}
.hero > *{ position:relative; z-index:1 }

/* H1 rengi: koyu lacivert, 'em' (en sade) icin CANLI SARI (gradient degil, dolu renk) */
.hero h1{ color:#0a1226 !important; text-shadow:none !important; }
.hero h1 em{
  font-style:normal;
  color:#c98d00 !important;
  -webkit-text-fill-color:#c98d00 !important;
  background:transparent !important;
  background-clip:initial !important;
  -webkit-background-clip:initial !important;
  padding:0 4px;
  border-radius:6px;
}
.hero p{ color:#4c5b76 !important; text-shadow:none !important; }


/* Hero dugmeleri: arka plandaki bilgisayar 110 SVG birimi asagi alindi,
   dugmeler de ayni oranda (~80px) asagi kaydiriliyor ki kompozisyon bozulmasin.
   Dar ekranda bosluk orantili kuculur. */
.hero-btnlar{
  margin-top:80px !important;
}
@media(max-width:900px){
  .hero-btnlar{ margin-top:52px !important; }
}
@media(max-width:560px){
  .hero-btnlar{ margin-top:34px !important; }
}


/* ---- Hero bilgisayar (arka plandan cikarilip DOM ogesi yapildi) ----
   Arka plan SVG'si cover ile olceklendigi icin merkezdeki gorsel her ekran
   oraninda baska yere dusuyordu. Akisa alinca paragrafla dugmelerin arasinda
   sabit kaliyor. */
.hero-bilgisayar{
  display:flex; justify-content:center;
  margin:26px auto 22px;
  line-height:0;
  pointer-events:none;
}
.hero-bilgisayar svg{ width:clamp(104px, 12vw, 160px); height:auto; }

/* Dugme bosluguna DOKUNMA duzeltmesi: .hero-btnlar sayfada iki yerde
   kullaniliyor (hero + satinal). Onceki kural ikisini birden itiyordu. */
.hero-btnlar{ margin-top:0 !important; }
.hero .hero-btnlar{ margin-top:6px !important; }
@media(max-width:900px){ .hero .hero-btnlar{ margin-top:4px !important; } }
@media(max-width:560px){
  .hero .hero-btnlar{ margin-top:2px !important; }
  .hero-bilgisayar{ margin:16px auto 14px; }
}


/* ==================================================================
   HERO - Alpemix tarzi: fotograf zemin, sola hizali koyu tema
   ================================================================== */
.hero{
  background:
    linear-gradient(100deg,
      rgba(5,15,40,.80) 0%,
      rgba(5,15,40,.66) 30%,
      rgba(5,15,40,.44) 52%,
      rgba(5,15,40,.34) 72%,
      rgba(5,15,40,.55) 100%),
    url('/img/hero-foto.webp') center center / cover no-repeat !important;
  padding:78px 0 84px !important;
  position:relative;
}
.hero .kap{
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  max-width:1180px;
}
/* icerigin tamami sola */
.hero .kap > *{ margin-left:0 !important; margin-right:0 !important; }

.hero-logo{ margin:0 0 26px !important; width:min(330px,62vw) !important; }

/* platform ikonlari: koyu zeminde beyaz cerceveli */
.hero .platformlar{ justify-content:flex-start !important; margin-bottom:30px !important; }
.hero .pf-ikon{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.hero .pf-ikon svg{ color:#ffffff !important; }
.hero .pf small{ color:rgba(255,255,255,.82) !important; text-shadow:0 2px 10px rgba(0,0,0,.7) !important; }

/* metin */
.hero h1{ color:#ffffff !important; text-align:left !important; }
.hero p{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.65) !important;
  text-align:left !important;
  max-width:660px !important;
  margin:0 0 38px !important;
  font-size:clamp(16px,1.5vw,19px) !important;
  line-height:1.62 !important;
}

/* dugmeler: buyuk, ikonlu, kare kose */
.hero .hero-btnlar{ justify-content:flex-start !important; gap:16px !important; margin:0 !important; }
.hero .hero-btnlar .btn{
  display:inline-flex !important; align-items:center !important; gap:14px !important;
  padding:17px 30px !important;
  border-radius:8px !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.02em;
}
.hero .hero-btnlar .btn svg{ width:20px; height:20px; flex:none }

/* rozet: koyu zemine uygun */
.hero .rozet{
  margin-top:30px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:rgba(255,255,255,.88) !important;
  box-shadow:none !important;
}

@media(max-width:900px){
  .hero{ padding:56px 0 62px !important; }
  .hero .kap{ align-items:center; text-align:center; }
  .hero .platformlar{ justify-content:center !important; }
  .hero p{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .hero .hero-btnlar{ justify-content:center !important; }
  .hero-logo{ margin:0 auto 22px !important; }
}
@media(max-width:560px){
  .hero .hero-btnlar .btn{ padding:15px 22px !important; font-size:15px !important; }
}


/* ==================================================================
   HERO YERLESIM v2 - ust: baslik+metin | alt serit: logo/ikon | dugme/rozet
   ================================================================== */
.hero .kap{
  display:flex !important; flex-direction:column !important;
  min-height:clamp(400px, 50vh, 540px);
  justify-content:space-between;
  gap:34px;
}
.hero-ust{ display:flex; flex-direction:column; align-items:flex-start; }

.hero-baslik{
  color:#ffffff !important;
  font-size:clamp(29px, 4.3vw, 53px) !important;
  line-height:1.1 !important;
  letter-spacing:-1.4px !important;
  font-weight:800 !important;
  margin:0 0 18px !important;
  max-width:17ch;
  text-shadow:0 3px 22px rgba(0,0,0,.6);
}
.hero-baslik em{
  font-style:normal;
  color:#f5b400 !important;
  -webkit-text-fill-color:#f5b400 !important;
  background:none !important;
}

.hero-alt{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; width:100%;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-alt-sol{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.hero-alt-sag{ display:flex; flex-direction:column; gap:14px; align-items:flex-end; }

.hero .hero-logo{ margin:0 !important; width:min(215px,42vw) !important; }
.hero .platformlar{ margin:0 !important; gap:10px !important; }
.hero .pf-ikon{ width:42px !important; height:42px !important; }
.hero .pf-ikon svg{ width:21px; height:21px }
.hero .rozet{ margin:0 !important; }

@media(max-width:900px){
  .hero .kap{ min-height:auto; gap:26px; }
  .hero-ust{ align-items:center; text-align:center; }
  .hero-baslik{ text-align:center !important; max-width:none; }
  .hero-alt{ flex-direction:column; align-items:center; }
  .hero-alt-sol, .hero-alt-sag{ align-items:center; }
  .hero .hero-logo{ margin:0 auto !important; }
}


/* ==================================================================
   HERO v3 - fotografta sadece baslik+metin, ALTINDA beyaz serit
   ================================================================== */
.hero{ padding:96px 0 104px !important; }
.hero .kap{ display:block !important; }
.hero-ust{ max-width:760px; }

.hero-baslik{
  color:#ffffff !important;
  font-size:clamp(30px, 4.5vw, 56px) !important;
  line-height:1.09 !important;
  letter-spacing:-1.5px !important;
  font-weight:800 !important;
  margin:0 0 20px !important;
  max-width:17ch;
  text-align:left !important;
  text-shadow:0 3px 24px rgba(0,0,0,.6);
}
.hero-baslik em{
  font-style:normal;
  color:#f5b400 !important;
  -webkit-text-fill-color:#f5b400 !important;
  background:none !important;
}

/* ---- fotografin ALTINDAKI beyaz serit ---- */
.hero-serit{
  background:#ffffff;
  border-bottom:1px solid var(--cizgi, #e6ebf2);
  padding:24px 0;
}
.hero-serit .kap{
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.serit-sol{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.serit-sag{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.hero-serit .hero-logo{ margin:0 !important; width:min(186px,40vw) !important; display:block; }
.hero-serit .platformlar{ margin:0 !important; gap:10px !important; }
.hero-serit .pf-ikon{ width:40px !important; height:40px !important; }
.hero-serit .pf-ikon svg{ width:20px !important; height:20px !important; }
.hero-serit .hero-btnlar{ margin:0 !important; gap:12px !important; }
.hero-serit .rozet{ margin:0 !important; }

@media(max-width:1000px){
  .hero-serit .kap{ justify-content:center; }
  .serit-sol, .serit-sag{ justify-content:center; }
}
@media(max-width:900px){
  .hero{ padding:64px 0 70px !important; }
  .hero-ust{ margin:0 auto; }
  .hero-baslik{ text-align:center !important; max-width:none; }
  .hero .kap > .hero-ust p{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
}
@media(max-width:560px){
  .hero-serit{ padding:20px 0; }
  .serit-sol{ gap:16px; }
}

/* ==================================================================
   HERO TAM EKRAN - fotograf ekrani tam doldursun, altina tasmasin
   Ust menu (sticky header) yuksekligi: masaustu 85px, mobil 71px.
   svh mobil tarayici cubuklarini hesaba katar; vh eski tarayici yedegi.
   ================================================================== */
.hero{
  min-height:calc(100vh - 85px) !important;
  min-height:calc(100svh - 85px) !important;
  padding:32px 0 !important;
  display:flex !important;
  align-items:center !important;
}
.hero .kap{ width:100%; }

@media(max-width:560px){
  .hero{
    min-height:calc(100vh - 71px) !important;
    min-height:calc(100svh - 71px) !important;
    padding:26px 0 !important;
  }
}
/* cok basik ekranlarda icerik sikismasin */
@media(max-height:520px){
  .hero{ min-height:auto !important; padding:48px 0 !important; }
}

/* ==================================================================
   Platform ikonlari artik FOTOGRAFIN icinde, en altta.
   .kap dikey flex; baslik margin:auto ile ortalanir, ikonlar dibe oturur.
   Koyu fotograf uzerinde olduklari icin beyaz cerceve/yazi.
   ================================================================== */
.hero .kap{
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  width:100%;
}
.hero .hero-ust{ margin:auto 0 !important; }

.hero .platformlar{
  display:flex !important;
  justify-content:flex-start !important;
  gap:12px !important;
  margin:0 !important;
  padding-top:22px;
  flex-wrap:wrap;
}
.hero .pf-ikon{
  width:46px !important; height:46px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  backdrop-filter:blur(3px);
}
.hero .pf-ikon svg{ width:22px !important; height:22px !important; color:#fff !important }
.hero .pf small{
  color:rgba(255,255,255,.86) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.75) !important;
}

/* beyaz seritte artik logo + rozet var */
.hero-serit .kap{ justify-content:space-between; }

@media(max-width:900px){
  .hero .platformlar{ justify-content:center !important; }
}
@media(max-width:560px){
  .hero .pf-ikon{ width:40px !important; height:40px !important; }
  .hero .platformlar{ gap:8px !important; }
}

/* Onceki kural .hero'ya align-items:center veriyordu; bu .kap'i icerik
   yuksekligine sikistirdigi icin ikonlar fotografin dibine oturamiyordu.
   stretch ile .kap tam yuksekligi kaplar, baslik margin:auto ile ortalanir,
   ikonlar gercekten en alta iner. */
.hero{ align-items:stretch !important; }
.hero .kap{ min-height:100%; }
.hero .platformlar{ margin-top:auto !important; }

/* .hero-ust'taki 'margin:auto 0' ile .platformlar'daki 'margin-top:auto'
   bos alani paylasiyordu; ikonlar basligin hemen altina yapisiyordu.
   Tek bir hizalama kurali birakiliyor: baslik ustte, ikonlar dipte. */
.hero .kap{ justify-content:space-between !important; }
.hero .hero-ust{ margin:0 !important; padding-top:6vh; }
.hero .platformlar{ margin-top:0 !important; padding-bottom:4px; }

/* .kap capraz eksende esnemiyordu (347px kaliyordu, hero 815px).
   Belirsizligi bitirmek icin .hero'yu DIKEY flex yapip .kap'a dogrudan
   flex:1 veriyoruz - boylece .kap kesin olarak tam yuksekligi kaplar,
   icindeki space-between de basligi uste, ikonlari dibe iter. */
.hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
.hero .kap{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

/* ==================================================================
   Hasan'in mockup'i: baslik SOL yariya sigsin, ikonlar SAG ALT kosede
   ================================================================== */
.hero .hero-ust{
  max-width:min(560px, 48%) !important;
  padding-top:5vh !important;
}
.hero .hero-baslik{
  max-width:none !important;
  font-size:clamp(28px, 3.6vw, 46px) !important;
  line-height:1.12 !important;
}
/* ikonlar sag alta */
.hero .platformlar{
  align-self:flex-end !important;
  justify-content:flex-end !important;
  margin:0 !important;
  padding-bottom:2px;
}

@media(max-width:900px){
  .hero .hero-ust{ max-width:none !important; margin:0 auto !important; padding-top:3vh !important; }
  .hero .platformlar{ align-self:center !important; justify-content:center !important; }
}

/* ==================================================================
   Rozet: fotografin SAG UST kosesinde, KOSELI, kademeli sinyal gostergesi
   ================================================================== */
.hero{ position:relative; }
.hero .kap{ position:relative; }

.rozet-ust{
  position:absolute !important;
  top:18px; right:0;
  z-index:3;
  display:inline-flex !important;
  align-items:center; gap:10px;
  padding:9px 15px !important;
  border-radius:4px !important;          /* koseli */
  background:rgba(6,18,45,.62) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:#ffffff !important;
  font-size:13px; font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.30) !important;
  backdrop-filter:blur(6px);
}

/* kademeli cubuklar: kucukten buyuge, sirayla yanip soner */
.rozet-ust .sinyal{
  display:inline-flex; align-items:flex-end; gap:2.5px; height:14px;
}
.rozet-ust .sinyal i{
  display:block; width:3px;
  background:#25d366;
  border-radius:1px;
  opacity:.32;
  animation:sinyalYan 1.8s infinite ease-in-out;
}
.rozet-ust .sinyal i:nth-child(1){ animation-delay:0s }
.rozet-ust .sinyal i:nth-child(2){ animation-delay:.22s }
.rozet-ust .sinyal i:nth-child(3){ animation-delay:.44s }
.rozet-ust .sinyal i:nth-child(4){ animation-delay:.66s }

@keyframes sinyalYan{
  0%,55%,100%{ opacity:.32 }
  22%{ opacity:1 }
}
@media(prefers-reduced-motion:reduce){
  .rozet-ust .sinyal i{ animation:none; opacity:1 }
}

@media(max-width:900px){
  .rozet-ust{ top:12px; right:0; font-size:12px; padding:7px 12px !important; }
}
@media(max-width:560px){
  .rozet-ust{ position:static !important; margin:0 auto 14px !important; }
}

/* ================= Rozet: %10 buyuk, koseye daha yakin ================= */
.rozet-ust{
  top:8px !important;
  right:-6px !important;
  font-size:14.3px !important;      /* 13 -> +%10 */
  padding:10px 17px !important;     /* 9/15 -> +%10 */
  gap:11px !important;
}
.rozet-ust .sinyal{ height:15.5px !important; gap:3px !important; }
.rozet-ust .sinyal i{ width:3.3px !important; }
.rozet-ust .sinyal i:nth-child(1){ height:5.5px !important }
.rozet-ust .sinyal i:nth-child(2){ height:8.8px !important }
.rozet-ust .sinyal i:nth-child(3){ height:12.1px !important }
.rozet-ust .sinyal i:nth-child(4){ height:15.4px !important }

/* ============ Alt satir: [indir dugmesi] + [platform ikonlari] ========= */
.hero-alt-satir{
  display:flex; align-items:center; gap:18px;
  align-self:flex-end;
  flex-wrap:wrap; justify-content:flex-end;
}
.hero-alt-satir .platformlar{ align-self:auto !important; }

/* indirme dugmesi - ikonlarla ayni dilden, koseli, koyu */
.hero-indir-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 20px;
  border-radius:8px;
  background:rgba(6,18,45,.60);
  border:1px solid rgba(255,255,255,.30);
  color:#ffffff;
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  text-decoration:none;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:background .2s ease, border-color .2s ease, transform .16s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.hero-indir-btn svg{ width:19px; height:19px; flex:none }

/* maus uzerine gelince ton degisir */
.hero-indir-btn:hover{
  background:rgba(0,108,240,.88);
  border-color:rgba(255,255,255,.55);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,84,200,.45);
}
.hero-indir-btn:active{ transform:translateY(0) }
.hero-indir-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px }

@media(max-width:900px){
  .hero-alt-satir{ align-self:center; justify-content:center; gap:14px; }
}
@media(max-width:560px){
  .hero-indir-btn{ height:42px; padding:0 16px; font-size:13.5px }
  .hero-alt-satir{ gap:10px }
}

/* ============ Rozet: +%20 daha buyuk, fotografin GERCEK kosesine ============
   .kap'i static yapiyoruz ki rozet .hero'ya (tam genislik) gore konumlansin;
   boylece kap'in yan bosluguna takilmadan kosenin dibine gidebiliyor. */
.hero .kap{ position:static !important; }

.rozet-ust{
  top:14px !important;
  right:26px !important;
  font-size:17.2px !important;      /* 14.3 -> +%20 */
  padding:12px 21px !important;     /* 10/17 -> +%20 */
  gap:13px !important;
  border-radius:5px !important;
}
.rozet-ust .sinyal{ height:19px !important; gap:3.6px !important; }
.rozet-ust .sinyal i{ width:4px !important; border-radius:1.5px !important; }
.rozet-ust .sinyal i:nth-child(1){ height:6.6px !important }
.rozet-ust .sinyal i:nth-child(2){ height:10.6px !important }
.rozet-ust .sinyal i:nth-child(3){ height:14.5px !important }
.rozet-ust .sinyal i:nth-child(4){ height:18.5px !important }

@media(max-width:900px){
  .rozet-ust{ top:10px !important; right:14px !important; font-size:14px !important; padding:9px 15px !important; }
}
@media(max-width:560px){
  .rozet-ust{ position:static !important; margin:0 auto 14px !important; }
}

/* ============ Platform sirasi artik GERCEK CIHAZ gorselleri ============
   Kucuk kutulu ikon yerine serbest duran cihazlar: kutu/cerceve kaldirildi,
   gorseller buyutuldu, altlarina hafif golge verildi. */
.hero .pf{
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.hero .pf-ikon{
  width:auto !important; height:60px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  display:flex !important; align-items:flex-end; justify-content:center;
  padding:0 !important;
}
.hero .pf-ikon img{
  max-height:60px; width:auto; max-width:86px;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.hero .pf small{
  font-size:11px !important;
  letter-spacing:.7px;
  color:rgba(255,255,255,.9) !important;
}
.hero .platformlar{ gap:20px !important; align-items:flex-end !important; }

@media(max-width:900px){
  .hero .pf-ikon, .hero .pf-ikon img{ height:48px !important; max-height:48px }
  .hero .platformlar{ gap:14px !important }
}
@media(max-width:560px){
  .hero .pf-ikon, .hero .pf-ikon img{ height:40px !important; max-height:40px }
  .hero .platformlar{ gap:10px !important }
  .hero .pf small{ font-size:10px !important }
}

/* ============ Marka logolarina donus + %15 buyutme ============
   Cihaz gorselleri icin verilen 'kutusuz/serbest' stil iptal ediliyor,
   kutulu ikon duzeni geri geliyor ve %15 buyutuluyor:
     kutu 46 -> 53px | logo 22 -> 25px | etiket 11 -> 12.6px
*/
.hero .pf-ikon{
  width:53px !important; height:53px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:none !important;
  backdrop-filter:blur(3px) !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  padding:0 !important;
}
.hero .pf-ikon svg{
  width:25px !important; height:25px !important;
  color:#ffffff !important;
}
.hero .pf small{
  font-size:12.6px !important;
  letter-spacing:.6px;
  color:rgba(255,255,255,.88) !important;
}
.hero .pf{ gap:8px !important; }
.hero .platformlar{ gap:14px !important; align-items:flex-end !important; }

@media(max-width:900px){
  .hero .pf-ikon{ width:48px !important; height:48px !important }
  .hero .pf-ikon svg{ width:23px !important; height:23px !important }
  .hero .platformlar{ gap:11px !important }
}
@media(max-width:560px){
  .hero .pf-ikon{ width:42px !important; height:42px !important }
  .hero .pf-ikon svg{ width:20px !important; height:20px !important }
  .hero .pf small{ font-size:11px !important }
  .hero .platformlar{ gap:8px !important }
}

/* ==================================================================
   UST MENU: kirmizi zemin + mavi yazi
   Ton secimi kontrast hesabiyla yapildi. Klasik kirmizi (#c62828) +
   klasik mavi (#1565c0) = 1.02 oran, yani okunmaz. Burada
   koyu kirmizi #8f1210 + acik mavi #7cc4ff = 4.95 (WCAG AA gecer).
   Okunurluk icin ayrica: punto buyutuldu, kalinlik arttirildi,
   harf araligi acildi.
   ================================================================== */
header{
  background:#8f1210 !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.22) !important;
}

/* menu baglantilari */
header .nav-linkler a,
header nav a{
  color:#7cc4ff !important;
  font-size:15.5px !important;
  font-weight:650 !important;
  letter-spacing:.015em !important;
}
header .nav-linkler a:hover,
header nav a:hover{
  color:#ffffff !important;
}
/* alt cizgi vurgusu da mavi */
header .nav-linkler a::after{ background:#7cc4ff !important; }

/* dugmeler kirmizi zeminden ayrissin */
header .btn{
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.28) !important;
}
header .btn-indir{ background:#0a5fd0 !important; color:#fff !important; }
header .btn-satin{ background:#f0b400 !important; color:#2a1f00 !important; }

/* logo koyu zemine gectigi icin acik surume gecmeli */
header img[src*="logo-acik"]{ content:url("/img/logo@2x.png"); }

@media(max-width:900px){
  header .nav-linkler a, header nav a{ font-size:14.5px !important; }
}

/* Menu yazilari BEYAZ - koyu kirmizi zeminde en yuksek okunurluk.
   Onceki acik mavi 4.95 oran veriyordu; beyaz ~9.5 veriyor. */
header .nav-linkler a,
header nav a{
  color:#ffffff !important;
  font-weight:600 !important;
}
header .nav-linkler a:hover,
header nav a:hover{
  color:#ffe08a !important;      /* uzerine gelince altin vurgu */
}
header .nav-linkler a::after{ background:#ffffff !important; }

/* ============ Gelisim Otomasyon logosu - rozetin ALTINDA ============
   Rozet (.rozet-ust) sag ust kosede mutlak konumlu; logo da ayni sutunda,
   onun hemen altinda. Ayri mutlak konum kullaniliyor ki rozetin yerlesimi
   hic degismesin. Koyu fotograf uzerinde okunmasi icin hafif beyaz zemin. */
.hero-gelisim{
  position:absolute;
  top:78px;              /* rozet ust:14 + yukseklik ~48 + bosluk 16 */
  right:26px;            /* rozetle ayni sag kenar */
  z-index:3;
  display:block;
  padding:9px 14px;
  border-radius:5px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  line-height:0;
  transition:background .2s ease, transform .16s ease;
}
.hero-gelisim img{
  display:block;
  width:clamp(118px, 12vw, 150px);
  height:auto;
}
.hero-gelisim:hover{
  background:#ffffff;
  transform:translateY(-2px);
}

@media(max-width:900px){
  .hero-gelisim{ top:62px; right:14px; padding:7px 11px; }
  .hero-gelisim img{ width:112px; }
}
@media(max-width:560px){
  /* rozet bu genislikte akisa donuyor; logo da onu takip etsin */
  .hero-gelisim{
    position:static !important;
    margin:0 auto 16px !important;
    width:max-content;
  }
}

/* Gelisim logosu buyutuldu: genislik +%30 (sag kenar sabit oldugu icin
   sola dogru buyur), dikey bosluk +%10. */
.hero-gelisim{
  padding:12px 16px !important;
}
.hero-gelisim img{
  width:clamp(153px, 15.6vw, 195px) !important;   /* 118/12vw/150 -> +%30 */
}
@media(max-width:900px){
  .hero-gelisim{ padding:10px 13px !important; }
  .hero-gelisim img{ width:146px !important; }    /* 112 -> +%30 */
}


/* ---------- hero sosyal medya ikonlari ----------
   Sol altta, indirme butonu satiriyla ayni yukseklikte.
   Panelde adres girilmemisse JS kutuyu hic acmaz. */
.hero-sosyal{
  position:absolute; left:44px; bottom:68px; z-index:4;
  display:flex; gap:10px; align-items:center;
}
.hero-sosyal[hidden]{ display:none }
.hero-sosyal a{
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  color:#fff; text-decoration:none;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.hero-sosyal a:hover,
.hero-sosyal a:focus-visible{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);
}
.hero-sosyal a:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.hero-sosyal svg{ width:18px; height:18px; display:block }

@media(max-width:900px){
  /* dar ekranda mutlak konum butonlarin ustune biner - akisa alalim */
  .hero-sosyal{ position:static; margin:18px 0 0; justify-content:center }
}
@media(prefers-reduced-motion:reduce){
  .hero-sosyal a{ transition:none }
  .hero-sosyal a:hover{ transform:none }
}


/* ---------- hero sosyal ikonlari: marka renkleri ----------
   Beyaz zemin, her platformun kendi rengi. Fotograf uzerinde
   tek renk beyaz ikonlar silik kaliyordu. */
.hero-sosyal a{
  background:rgba(255,255,255,.95) !important;
  border-color:rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.hero-sosyal a:hover,
.hero-sosyal a:focus-visible{
  background:#fff !important;
  border-color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}

.hero-sosyal a.sos-youtube   { color:#FF0000 }
.hero-sosyal a.sos-telegram  { color:#229ED9 }
.hero-sosyal a.sos-facebook  { color:#1877F2 }
.hero-sosyal a.sos-linkedin  { color:#0A66C2 }
.hero-sosyal a.sos-x         { color:#000000 }

/* Instagram'in logosu gecisli - kendi kilavuzu beyaz glif + gecisli
   zemin oneriyor, tek renge indirgemek yanlis olur */
.hero-sosyal a.sos-instagram{
  color:#fff !important;
  background:radial-gradient(circle at 30% 107%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  border-color:rgba(255,255,255,.55) !important;
}
.hero-sosyal a.sos-instagram:hover{
  background:radial-gradient(circle at 30% 107%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  filter:brightness(1.08);
}


/* ---------- hero sosyal ikonlari: marka zeminli ----------
   Logolarin kendi bicimi: renk zeminde, simge beyaz.
   Onceki hali (beyaz zemin, renkli simge) logolara benzemiyordu. */
.hero-sosyal a{
  color:#fff !important;
  border-color:rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.hero-sosyal a:hover,
.hero-sosyal a:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  filter:brightness(1.1);
  border-color:rgba(255,255,255,.6) !important;
}

.hero-sosyal a.sos-youtube  { background:#FF0000 !important }
.hero-sosyal a.sos-telegram { background:#229ED9 !important }
.hero-sosyal a.sos-facebook { background:#1877F2 !important }
.hero-sosyal a.sos-linkedin { background:#0A66C2 !important }
.hero-sosyal a.sos-x        { background:#000000 !important }

.hero-sosyal a.sos-instagram{
  background:radial-gradient(circle at 30% 107%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}
.hero-sosyal a.sos-instagram:hover{ filter:brightness(1.12) }


/* ---------- hero sosyal ikonlari: platform ikonlariyla ayni ----------
   Sagdaki .pf-ikon siralarindan olculen degerler birebir uygulaniyor:
   53x53 kutu, 12px kose, beyaz %12 zemin, beyaz %34 kenar, 25x25 beyaz
   simge. Hero'nun iki ucu ayni dili konussun. */
.hero-sosyal{ gap:12px !important }

.hero-sosyal a{
  width:53px !important;
  height:53px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.12) !important;
  border:0.8px solid rgba(255,255,255,.34) !important;
  color:#ffffff !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  filter:none !important;
}
.hero-sosyal a svg{
  width:25px !important;
  height:25px !important;
  color:#ffffff !important;
}
.hero-sosyal a:hover,
.hero-sosyal a:focus-visible{
  background:rgba(255,255,255,.24) !important;
  border-color:rgba(255,255,255,.55) !important;
  transform:translateY(-2px);
  filter:none !important;
}

/* marka renkli zeminler iptal - platform gorunumu isteniyor */
.hero-sosyal a.sos-instagram,
.hero-sosyal a.sos-instagram:hover,
.hero-sosyal a.sos-youtube,
.hero-sosyal a.sos-telegram,
.hero-sosyal a.sos-facebook,
.hero-sosyal a.sos-linkedin,
.hero-sosyal a.sos-x{
  background:rgba(255,255,255,.12) !important;
  background-image:none !important;
}
.hero-sosyal a.sos-instagram:hover,
.hero-sosyal a.sos-youtube:hover,
.hero-sosyal a.sos-telegram:hover,
.hero-sosyal a.sos-facebook:hover,
.hero-sosyal a.sos-linkedin:hover,
.hero-sosyal a.sos-x:hover{
  background:rgba(255,255,255,.24) !important;
  background-image:none !important;
}



/* ---------- nav'daki Gelisim Otomasyon logosu ----------
   Hero'dan buraya tasindi. Kirmizi serit uzerinde beyaz zemin, cunku
   logo kendi renkleriyle okunur kalmali. */
header .nav-btnlar{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.nav-gelisim{
  display:flex; align-items:center;
  background:#fff;
  border-radius:8px;
  padding:5px 10px;
  line-height:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-gelisim img{ height:30px; width:auto; display:block }
.nav-gelisim:hover,
.nav-gelisim:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.nav-gelisim:focus-visible{ outline:2px solid #fff; outline-offset:2px }

@media(max-width:900px){
  .nav-gelisim img{ height:24px }
  header .nav-btnlar{ gap:10px !important }
}
@media(max-width:560px){
  .nav-gelisim{ display:none }   /* dar ekranda yer yok */
}
@media(prefers-reduced-motion:reduce){
  .nav-gelisim{ transition:none }
  .nav-gelisim:hover{ transform:none }
}


/* ---------- Gelisim logosu: buyutuldu, seridin altina sarkiyor ----------
   Hasan cizimle gosterdi: logo belirgin olsun ve kirmizi seridin alt
   kenarindan tassin. Header'a overflow:visible gerekiyor, yoksa tasan
   kisim kirpilir. z-index hero'nun uzerinde kalmasini sagliyor.

   Sarkma olculu tutuldu: hero basligini ortmemeli. */
header{ overflow:visible !important }
header .nav{ overflow:visible !important }

.nav-gelisim{
  background:#fff !important;
  border-radius:10px !important;
  padding:10px 18px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.30) !important;
  position:relative;
  z-index:20;
  margin-bottom:-34px;        /* seridin altina sarkma */
  align-self:center;
}
.nav-gelisim img{
  height:58px !important;
  width:auto !important;
}
.nav-gelisim:hover,
.nav-gelisim:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.38) !important;
}

@media(max-width:1100px){
  .nav-gelisim img{ height:46px !important }
  .nav-gelisim{ padding:8px 14px !important; margin-bottom:-26px }
}
@media(max-width:900px){
  .nav-gelisim img{ height:38px !important }
  .nav-gelisim{ padding:7px 12px !important; margin-bottom:-20px }
}
@media(max-width:560px){
  .nav-gelisim{ display:none !important }
}


/* ---------- Gelisim logosu: seridin ICINE sigdirildi ----------
   Onceki halde 13px sarkiyordu, Hasan seridin icinde olmasini istedi.
   Serit 85px; panel 62px (resim 46 + dolgu 8x2) -> ustte/altta 11px
   nefes payi kaliyor. Daha buyugu sikisik gorunurdu. */
.nav-gelisim{
  margin-bottom:0 !important;
  padding:8px 16px !important;
  align-self:center !important;
}
.nav-gelisim img{ height:46px !important }

@media(max-width:1100px){
  .nav-gelisim{ padding:7px 13px !important; margin-bottom:0 !important }
  .nav-gelisim img{ height:40px !important }
}
@media(max-width:900px){
  .nav-gelisim{ padding:6px 11px !important; margin-bottom:0 !important }
  .nav-gelisim img{ height:34px !important }
}


/* ---------- "Satin al": maketteki Pro dugmesi gorunumu ----------
   Kaynak: arsivdeki anypilot.html.maket, nav>a.pro-link
   Koyu lacivert gecis + beyaz yari saydam cerceve + uc yildiz.
   Kirmizi serit uzerinde altin sariya gore daha az bagirir ama
   cercevesi sayesinde secilebilir kaliyor. */
header .btn-satin{
  background:linear-gradient(135deg,#163b78,#0a1020) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:0 7px 16px rgba(10,16,32,.42) !important;
  min-width:150px;
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:9px;
}
header .btn-satin:hover,
header .btn-satin:focus-visible{
  background:linear-gradient(135deg,#1d4c96,#0a2048) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.satinal-yildiz{
  display:inline-flex; gap:1px; line-height:1;
  color:#f5b400;            /* sitedeki altin - yildizlar buradan geliyor */
  font-size:12px;
}
.satinal-yildiz i{ font-style:normal }

@media(max-width:900px){
  header .btn-satin{ min-width:0; gap:6px }
  .satinal-yildiz{ display:none }   /* dar ekranda yalniz metin */
}


/* ---------- Satin al yildizlari: kademeli ----------
   Ufaktan buyuge, her adim oncekinin ~1.3 kati.
   Alt kenardan hizali; ustten hizalansaydi buyuyen yildizlar asagi
   sarkip duzensiz gorunurdu. */
.satinal-yildiz{
  align-items:flex-end !important;
  gap:3px !important;
  line-height:1 !important;
}
.satinal-yildiz i{
  display:inline-block;
  line-height:1;
}
.satinal-yildiz i:nth-child(1){ font-size:13.5px }
.satinal-yildiz i:nth-child(2){ font-size:18px }
.satinal-yildiz i:nth-child(3){ font-size:23px }

/* ---------- 17 Eyl: nav'daki Gelisim logosu sayfayi tasiriyordu ----------
   58px sabit yukseklik + genis dolgu, 1440px ekranda satiri 60px tasirip
   logonun sag kenarini kirpiyor, sayfada yatay kaydirma aciyordu.
   Olculeri ekran genisligine bagladik: genis ekranda eski buyuklugunde
   kaliyor, dar ekranda kendiliginden kuculuyor. */
.nav-gelisim{
  padding: clamp(5px, .5vw, 10px) clamp(9px, 1vw, 18px) !important;
  margin-bottom: clamp(-34px, -2.3vw, -18px) !important;
}
.nav-gelisim img{ height: clamp(28px, 2.4vw, 58px) !important; }
header .nav-btnlar{ gap: clamp(8px, .8vw, 14px) !important; }
header .nav > nav{ min-width: 0; }
header .nav > nav a{
  padding-left: clamp(6px, .6vw, 12px) !important;
  padding-right: clamp(6px, .6vw, 12px) !important;
}

/* Nav tek satirda kalsin: 9 link + EN + Satin al + logo dar ekranda ust uste
   biniyordu ("Satin al" iki satira dusuyor, "Ozellikler" logoya yapisiyordu).
   Yazi boyutu ve bosluklar ekran genisligine baglandi, linkler bolunmuyor. */
header .nav{ gap: clamp(10px, 1.2vw, 26px); }
header .nav > nav{ display:flex; align-items:center; flex-wrap:nowrap; min-width:0;
                   gap: clamp(2px, .5vw, 10px); }
header .nav > nav a{ white-space:nowrap; line-height:1.2;
                     padding: 8px clamp(4px, .55vw, 12px) !important;
                     font-size: clamp(12.5px, .95vw, 15px) !important; }
header .nav-btnlar{ flex-shrink:0; gap: clamp(6px, .7vw, 12px) !important; }
header .nav-btnlar .btn{ white-space:nowrap; }
.nav-gelisim{ flex-shrink:0; }

/* Dar ekran (1080px alti): menu linkleri kendi satirina insin.
   Once linkler 52px'lik bir kutuya sikisip "Satin al" dugmesinin ustune
   biniyordu; hamburger menu de yok. Linkler artik tam genislikte, yatay
   kaydirilabilir tek satirda; kirmizi serit onlari icine alacak sekilde uzuyor. */
@media (max-width: 1080px){
  header{ height:auto !important; min-height:0 !important; }
  header .nav{ flex-wrap:wrap !important; row-gap:4px; padding-bottom:8px;
               height:auto !important; min-height:0 !important; align-items:center; }
  header .nav-linkler{ order:3; flex:1 0 100%; width:100%; min-width:0; padding-top:2px;
                       overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
                       justify-content:flex-start; }
  header .nav-linkler::-webkit-scrollbar{ display:none; }
  header .nav-linkler a{ flex:0 0 auto; }
  header .nav-btnlar{ margin-left:auto; }
}

/* ---------- Galeri: uzerine gelince buyusun ----------
   Kartlar zaten tiklaninca tam gorseli aciyordu (apResimAc) ama tiklanabildigi
   hic belli degildi. Ozellikle dikey gorseller kutuya sigmadigi icin ortadan
   kirpiliyor; tam halini gormenin yolu buyutmek. Imlec, golge ve buyutec
   isareti bunu gorunur kiliyor. */
.g-kart{ cursor:zoom-in; position:relative; overflow:hidden;
         transition:transform .25s ease, box-shadow .25s ease; }
.g-kart img{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.g-kart:hover, .g-kart:focus-within{ transform:translateY(-4px);
         box-shadow:0 18px 40px rgba(10,30,80,.22); }
.g-kart:hover img, .g-kart:focus-within img{ transform:scale(1.09); }
.g-kart::after{ content:"⤢"; position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(12,22,45,.72); color:#fff; font-size:15px; line-height:1;
  opacity:0; transform:scale(.85); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; }
.g-kart:hover::after, .g-kart:focus-within::after{ opacity:1; transform:scale(1); }
@media (hover:none){ .g-kart::after{ opacity:.9; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .g-kart, .g-kart img{ transition:none; }
  .g-kart:hover{ transform:none; } .g-kart:hover img{ transform:none; }
}

/* ---------- Buyutulen gorsel (isik kutusu) ----------
   Onceki hali max-width/max-height:95% idi; yuzde degeri cozulmedigi icin
   gorsel 1602px'e cikip ekrani tasiyor, alti kesiliyordu. Artik vw/vh ile
   sinirli ve olculu: ekranin yaklasik %60'i. Telefonda daha genis, yoksa
   okunmuyor. */
.ap-lb-img{
  max-width: min(60vw, 880px);
  max-height: 60vh;
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
@media (max-width: 720px){
  .ap-lb-img{ max-width: 92vw; max-height: 78vh; }
}

/* Logo, EN ve "Satin al" dugmelerinden 17px asagida duruyordu: eski
   "seridin altina sarksin" ayarindaki negatif alt bosluk kaydiriyordu.
   Ucu de ayni hizada olsun. */
.nav-gelisim{ margin-bottom: 0 !important; align-self: center !important; }