/* ==========================================================================
   XLOG NETWORKS — Sitenin tek stil dosyasi
   ==========================================================================
   Bolum sirasi ONEMLIDIR; ayni ozgullukteki kurallarda sonra gelen kazanir:

     1. Yazi tipleri      @font-face tanimlari
     2. Token'lar         renk / tipografi / izgara degiskenleri (tek kaynak)
     3. Temel             govde, slider, referans izgarasi, zaman cizelgesi
     4. Cerceve           ust menu, alt bilgi, sekme, toast, yukleme katmani
     5. Hover             [data-h] uzerinden gelen hover kurallari
     6. Ortak bilesenler  birden fazla sayfada kullanilan siniflar
     7. Sayfa stilleri    yalnizca tek bir gorunumde kullanilan siniflar

   Sayfa bolumlerindeki siniflar sayfa adiyla oneklidir (.firewall-…,
   .about-…), bu yuzden birbirleriyle cakismazlar.

   Kural: sablonlarda satir ici stil YAZILMAZ. Renk ve olcu degerleri
   dogrudan yazilmaz, 2. bolumdeki degiskenlerden alinir.
   ========================================================================== */



/* =======================================================================
   1. YAZI TIPLERI   (eski fonts.css)
   ======================================================================= */

/* Kaynak: Google Fonts. Turkce karakterler latin-ext alt kumesindedir. */

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/barlow-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/inter-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/inter-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =======================================================================
   2. TASARIM TOKEN'LARI   (eski tokens.css)
   ======================================================================= */

:root{
  /* --- Notrler: sitenin iskeleti --- */
  --ink:        #0F1B24;  /* Ana metin, koyu bantlar */
  --ink-2:      #22303C;  /* Ikincil koyu, baslik alti */
  --slate:      #5C6B77;  /* Govde metni grisi, eyebrow */
  --slate-2:    #8B99A4;  /* Pasif metin, placeholder */
  --line:       #E3E8EB;  /* 1px ayrac ve kart kenari */
  --bg:         #FFFFFF;  /* Ana zemin */
  --bg-soft:    #F5F7F8;  /* Alternatif bolum zemini */
  /* Urun ailesi bandinin zemini ve ustundeki sema tonlari. */
  --slider-bg:  #F2F5F8;  /* Bant zemini */
  --slider-mid: #6C6D70;  /* Gorsellerdeki orta gri (%27) */
  --box-line:   #C9CAD2;  /* Sema kutularinin cok acik cercevesi */

  /* --- Marka vurgusu: TEK aksan --- */
  --brand:      #D62027;  /* XLOG Kirmizi: birincil buton, aktif sekme, link hover */
  --brand-rgb:  214,32,39; /* Ayni renk; saydamlik gerektiginde rgba(var(--brand-rgb),a) */
  --brand-dark: #A8161C;  /* Buton hover / basili */
  --brand-soft: #FDECEC;  /* Rozet ve uyari zemini */

  /* --- Destek renkleri: sadece ikon, diyagram ve durum --- */
  --accent:     #0090B2;  /* Teknik diyagram, urun ailesi ikonlari */
  --gold:       #B07A12;  /* Porsuk vurgusu (ana sayfa urun karti) */
  --ok:         #00915A;
  --warn:       #E08600;

  /* --- Koyu bant zeminleri --- */
  --dark:       #0B1620;
  --dark-2:     #16242F;
  --dark-3:     #071018;  /* Footer alt seridi */
  --band-about: #A03A3A;  /* company/about hero bandi (yalnizca o sayfa) */

  /* --- Footer ustu kapanis bandi ---
     Footer zaten koyu; bu bant da koyu olunca sayfa iki siyah blokla
     kapaniyordu. Acik gri-mavi zemin kullaniliyor, metin normal --ink.
     Koyu bant degiskenleri (--dark*) bu bantta KULLANILMAZ. */
  --cta-bg:     #EDF2F4;
  --cta-line:   #D6DFE4;

  /* --- Koyu bant uzeri kenarlik ve yardimci tonlar --- */
  --dark-line:   #1B2A35;  /* Koyu bant ayraci */
  --dark-line-2: #23333F;  /* Koyu bant kart kenari */
  --dark-line-3: #2C3E4B;  /* Koyu bant form/input kenari */
  --dark-line-4: #3A4C59;  /* Koyu bant diyagram kutusu */

  /* --- Is ortagi seviye rozetleri --- */
  --tier-gold:       #B07A12;
  --tier-silver:     #6B7A85;
  --tier-authorized: #5C6B77;

  /* --- Tipografi --- */
  --font-display: Barlow, "Helvetica Neue", Arial, sans-serif;
  --font-body:    Inter, "Helvetica Neue", Arial, sans-serif;

  /* --- Izgara ve bosluk --- */
  --container:  1280px;
  --gutter:     24px;
  --section-y:  88px;

  /* --- Kose yaricapi: hicbir yerde 4px'i gecmez --- */
  --radius:     3px;
  --radius-btn: 2px;
  --radius-lg:  4px;

  /* --- Golgeler --- */
  --shadow-1: 0 1px 2px rgba(15,27,36,.06), 0 1px 8px rgba(15,27,36,.04);
  --shadow-2: 0 6px 24px rgba(15,27,36,.10);
}

@media (max-width: 767px){
  :root{
    --gutter:    20px;
    --section-y: 56px;
  }
}


/* =======================================================================
   3. TEMEL STILLER   (eski base.css)
   ======================================================================= */

*{ box-sizing: border-box; }

/* hidden niteligi HER ZAMAN kazanir.
   Tarayicinin [hidden]{display:none} kurali yazar (author) stillerinden
   zayiftir; bir elemanin sinifi display tanimladigi anda hidden etkisiz
   kalir. assets/js/ui.js sekme, akordiyon, filtre, mega menu ve cekmece
   gizlemesini bu nitelikle yaptigi icin kural !important olmalidir. */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{
  color: var(--ink);
  text-decoration: none;
}

a:hover{
  color: var(--brand);
}

button{
  font: inherit;
  color: inherit;
}

:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

::selection{ background: var(--brand-soft); }

/* Mega menu ve arama seridi acilis animasyonlari */
@keyframes megaIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

/* Ust yardimci bar mobilde tasiyordu; o baglantilar zaten hamburger
   menunun icinde yer aliyor. */
@media (max-width: 1023px){
  .util-bar{ display: none; }
}

/* ==========================================================================
   Ana sayfa hero slider
   Standart ray mantigi: tum slaytlar yan yana, ray translateX ile kayar.
   Gorsel kendi oraninda (2.32:1) ve ortali; yalnizca yukseklik siniri
   asildiginda ustten/alttan esit kirpilir.
   ========================================================================== */
.hero-viewport{
  width: 100%;
  /* Gorselin alt ~%28'i bos. Tam genislikte dogal yukseklik 43.1vw
     (100/2.32); bunun %72'si = 31vw alindiginda kutu tam olarak icerik
     alanini cerceveler, bos serit disarida kalir. */
  height: clamp(230px, 31vw, 450px);
  overflow: hidden;
}

.hero-track{
  display: flex;
  height: 100%;
  will-change: transform;
  /* Kaydirma gecisi. Rayin konumunu (transform) assets/js/ui.js verir;
     baslangic konumu 0 oldugu icin burada yalnizca gecis tanimlanir. */
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}

.hero-slide{
  flex: 0 0 100%;
  height: 100%;
  display: block;
}

.hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* Slider noktalari: aktif olan marka rengi, digerleri soluk. JS aria-current
   gunceller; renk yalnizca buradan gelir. */
[data-dot] > span{ background: var(--slate-2) !important; transition: background 150ms ease; }
[data-dot][aria-current="true"] > span{ background: var(--brand) !important; }

@media (max-width: 767px){
  /* Telefonda gorsel KIRPILMAZ: kutunun oraninin gorselin icerik alaniyla
     ayni olmasi saglanir, boylece object-fit:cover yatayda hicbir sey
     kesmez. Icerik orani = 2.32 (dosya orani) / 0.72 (alt %28'i bos) = 3.22.
     Onceki kural kutuyu yukseltip gorseli %139 buyutuyordu; bu, sag ve sol
     kenarlardan kirpiyordu. */
  .hero-viewport{ height: auto; aspect-ratio: 3.22; }
  .hero-slide img{ height: 100%; object-position: center top; }
}

@media (prefers-reduced-motion: reduce){
  .hero-track{ transition: none !important; }
}

/* ==========================================================================
   Urun sayfasi hero'sundaki cihaz gorseli
   Cihaz SVG'leri cok genis-alcak (yaklasik 4:1 – 5:1). Genis ekranda
   metnin sagina dikeyde ortali oturur; sutun daralinca satir kayar ve
   gorsel metnin altina gecer.
   ========================================================================== */
.hero-device{
  flex: 1 1 380px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-device img{
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  /* Cihaz koyu hero uzerinde fazla one cikiyordu; metinle dengelensin. */
  opacity: .7;
}

/* Cihazlarin en-boy orani ayni degil (firewall/hotspot 4.98, access-point
   3.92, mini-tunnel 4.24). Ayni genislikte yassi olanlar gozle daha kucuk
   duruyordu; genislik oranla carpilarak yukseklikler ~115px'e esitlendi.
   Genislik yalnizca burada tanimlanir ki asagidaki medya sorgusu isini
   yapabilsin. */
.dev-firewall img,
.dev-hotspot img{ max-width: 570px; }

.dev-access-point img{ max-width: 460px; }

.dev-mini-tunnel img{ max-width: 495px; }

/* Porsuk A105 daha kare bir gorsel (3.12); ayni yukseklik icin daha dar. */
.dev-porsuk img{ max-width: 500px; }

@media (max-width: 899px){
  /* Alta kayinca ortalanmis ve biraz kucuk dursun. Ustteki urun kurallariyla
     ayni ozgullukte oldugu icin sonra gelmesi yeterli, !important gerekmez. */
  .hero-device{ flex-basis: 100%; }
  .dev-firewall img,
  .dev-hotspot img,
  .dev-access-point img,
  .dev-mini-tunnel img,
  .dev-porsuk img{ max-width: 340px; }
}

/* Urun listesi kartlarindaki cihaz gorseli.
   Yukseklikten sinirlaniyor: cihazlarin en-boy orani farkli oldugu icin
   genislikten sinirlansaydi yassi olanlar (firewall/hotspot) gozle daha
   kucuk kalirdi. max-width dar kartta tasmayi engeller. */
.family-img{
  max-height: 78px;
  width: auto;
  max-width: 88%;
  height: auto;
  display: block;
}

/* Yalnizca ekran okuyucular icin: gorsel basligi tasiyan hero'larda
   sayfanin h1'i gorunmez ama erisilebilir kalir. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Referans logo izgaralari
   Logolarin en-boy orani 0.66 ile 11.69 arasinda degisiyor; yukseklik siniri
   her logonun oranina gore .ref-logo--h* sinifiyla veriliyor (bkz.
   components.css). Sutun sayisi burada tanimlanir; grid-template-*
   ozellikleri baska bir dosyada tekrar YAZILMAZ.
   ========================================================================== */

/* Ana sayfa seridi: her kirilimda TAM 2 satir.
   grid-template-rows iki satir tanimlar, overflow:hidden tasani keser. */
.ref-strip{
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 104px);
}

@media (max-width: 1023px){
  .ref-strip{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 639px){
  .ref-strip{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 88px);
  }
}

/* Referans sayfasi: tum liste, esit yukseklikli hucreler.
   Satir yuksekligi = 18*2 padding + 64 logo + 12 bosluk + 34 iki satir ad. */
/* Referans izgarasi — kademeli hucre genisligi.
   12 sutun uzerine kuruldu; hucre genisligi sinifla veriliyor:
     .rf-1 -> satirda 3 hucre  (ilk 6 referans, iki satir)
     .rf-2 -> satirda 4 hucre  (sonraki 8 referans, iki satir)
     .rf-3 -> satirda 6 hucre  (kalanlar)
   Dar ekranlarda satir basina dusen sayi kademeli olarak azalir.
   Satir yuksekligi sabit degil: buyuk hucrelerde logo da buyuk basiliyor. */
.ref-grid{
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
}
.ref-grid > figure{ min-height: 158px; }
.ref-grid .rf-1{ grid-column: span 4; min-height: 232px; }
.ref-grid .rf-2{ grid-column: span 3; min-height: 190px; }
.ref-grid .rf-3{ grid-column: span 2; }

/* Hucre arka planindaki XLOG "X" filigrani. Renk hover'da markaya donsun
   diye gorsel <img> yerine maske olarak veriliyor; opaklik degismiyor. */
.ref-grid figure{ position: relative; }
.ref-grid .rf-x{
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-color: #AEB8C0;
  -webkit-mask: url('../images/other/xlog-x-mark.svg') center / cover no-repeat;
  mask: url('../images/other/xlog-x-mark.svg') center / cover no-repeat;
  transition: background-color 150ms ease;
}
.ref-grid figure:hover .rf-x{ background-color: var(--brand); }

@media (max-width: 1279px){
  .ref-grid .rf-1{ grid-column: span 4; }
  .ref-grid .rf-2{ grid-column: span 4; }
  .ref-grid .rf-3{ grid-column: span 3; }
}

@media (max-width: 1023px){
  .ref-grid .rf-1{ grid-column: span 6; }
  .ref-grid .rf-2{ grid-column: span 4; }
  .ref-grid .rf-3{ grid-column: span 4; }
}

@media (max-width: 767px){
  .ref-grid > figure{ min-height: 148px; }
  .ref-grid .rf-1{ grid-column: span 6; min-height: 196px; }
  .ref-grid .rf-2{ grid-column: span 6; min-height: 168px; }
  .ref-grid .rf-3{ grid-column: span 6; }
}

@media (max-width: 479px){
  .ref-grid .rf-1{ grid-column: span 12; }
  .ref-grid .rf-2{ grid-column: span 6; }
  .ref-grid .rf-3{ grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce){
  .hero-track{ transition: none !important; }
}

/* ==========================================================================
   Urun sayfasi hero'sundaki cihaz gorseli
   Cihaz SVG'leri cok genis-alcak (yaklasik 4:1 – 5:1). Genis ekranda
   metnin sagina dikeyde ortali oturur; sutun daralinca satir kayar ve
   gorsel metnin altina gecer.
   ========================================================================== */
.hero-device{
  flex: 1 1 380px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-device img{
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  /* Cihaz koyu hero uzerinde fazla one cikiyordu; metinle dengelensin. */
  opacity: .7;
}

/* Cihazlarin en-boy orani ayni degil (firewall/hotspot 4.98, access-point
   3.92, mini-tunnel 4.24). Ayni genislikte yassi olanlar gozle daha kucuk
   duruyordu; genislik oranla carpilarak yukseklikler ~115px'e esitlendi.
   Genislik yalnizca burada tanimlanir ki asagidaki medya sorgusu isini
   yapabilsin. */
.dev-firewall img,
.dev-hotspot img{ max-width: 570px; }

.dev-access-point img{ max-width: 460px; }

.dev-mini-tunnel img{ max-width: 495px; }

/* ----------------------------------------------------------------------
   Hero bandindaki isik yikamasi (yalnizca firewall hero'su).

   Tek kaynak, cihazin tam ustunde. Kaynak bandin yukarisindadir (gorunmez);
   isik asagi indikce cihazi kapsayacak kadar genisler ve CIHAZIN BIRAZ
   USTUNDE tamamen soner — beyazdan saydama.

   Hizalama: cihaz, 1280px'lik icerik kabinin sag sutununda durur; bu yuzden
   isigin merkezi ekranin degil KABIN merkezine gore kaydirilir
   (min(50%,640px) = kabin yarisi, .53 = cihaz merkezinin o yarim icindeki
   orani). Genis ekranda da dar ekranda da isik cihazin uzerinde kalir.

   Kirpma .spotlight kabinda: isik bandin disina, ust menuye tasmaz.
   ---------------------------------------------------------------------- */
.spotlight{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Isigin genel siddeti tek yerden ayarlanir. */
  opacity: .5;
}
.spotlight::before{
  content: "";
  position: absolute;
  top: -170px;
  left: 50%;
  width: 1200px;
  height: calc(100% + 170px);
  margin-left: calc(min(50%, 640px) * .53 - 600px);
  /* Genis koni: tepede genisce baslar, asagi dogru iyice acilir. */
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  /* Duraklar piksel: isik kaynaktan 320px sonra biter, yani cihaz
     hizasina inmeden soner. */
  background: linear-gradient(180deg,
              rgba(255,255,255,.50) 0px,
              rgba(255,255,255,.28) 120px,
              rgba(255,255,255,.12) 230px,
              rgba(255,255,255,0) 320px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  filter: blur(18px);
}

@media (max-width: 899px){
  /* Dar ekranda cihaz alta gectigi icin isik yerini bulmuyor. */
  .spotlight{ display: none }
}

/* Porsuk A105 daha kare bir gorsel (3.12); ayni yukseklik icin daha dar. */
.dev-porsuk img{ max-width: 500px; }

@media (max-width: 899px){
  /* Alta kayinca ortalanmis ve biraz kucuk dursun. Ustteki urun kurallariyla
     ayni ozgullukte oldugu icin sonra gelmesi yeterli, !important gerekmez. */
  .hero-device{ flex-basis: 100%; }
  .dev-firewall img,
  .dev-hotspot img,
  .dev-access-point img,
  .dev-mini-tunnel img,
  .dev-porsuk img{ max-width: 340px; }
}

/* Urun listesi kartlarindaki cihaz gorseli.
   Yukseklikten sinirlaniyor: cihazlarin en-boy orani farkli oldugu icin
   genislikten sinirlansaydi yassi olanlar (firewall/hotspot) gozle daha
   kucuk kalirdi. max-width dar kartta tasmayi engeller. */
.family-img{
  max-height: 78px;
  width: auto;
  max-width: 88%;
  height: auto;
  display: block;
}

/* Yalnizca ekran okuyucular icin: gorsel basligi tasiyan hero'larda
   sayfanin h1'i gorunmez ama erisilebilir kalir. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Sirket tarihcesi — zikzak (yilan) akis
   Okuma yonu: sag git, asagi in, sola git, asagi in, saga git. Yon degisimi
   her karta acik grid-column verilerek kuruluyor; direction:rtl ayni isi
   yapardi ama metnin ve noktalamanin yonunu de cevirir.
   grid-auto-flow:dense sart: sutun numarasi geriye dondugunde seyrek
   yerlestirme imleci geri gidemez ve kart bir alt satira duserdi.
   Sutun ozellikleri sayfa stil dosyasinda TEKRARLANMAZ; yoksa asagidaki
   medya sorgulari devreye girmez.
   ========================================================================== */
.timeline-snake{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 64px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-snake > li{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}

/* Tek satirlik cevrim: 1-2-3 soldan saga, 4-5-6 sagdan sola. */
.timeline-snake > li:nth-child(6n+1){ grid-column: 1; }
.timeline-snake > li:nth-child(6n+2){ grid-column: 2; }
.timeline-snake > li:nth-child(6n+3){ grid-column: 3; }
.timeline-snake > li:nth-child(6n+4){ grid-column: 3; }
.timeline-snake > li:nth-child(6n+5){ grid-column: 2; }
.timeline-snake > li:nth-child(6n+6){ grid-column: 1; }

/* Baglayici: ::after cizgi, ::before ucundaki ok. Ikisi de kartin disinda,
   izgara boslugunun icinde durur — bu yuzden bosluk degerleri (30/34px)
   asagidaki konumlarla birebir ayni tutulmali. */
.timeline-snake > li::before,
.timeline-snake > li::after{
  content: "";
  position: absolute;
  display: block;
}

/* Saga akan kartlar */
.timeline-snake > li:nth-child(6n+1)::after,
.timeline-snake > li:nth-child(6n+2)::after{
  top: 30px;
  right: -30px;
  width: 30px;
  height: 1px;
  background: var(--slate-2);
}

.timeline-snake > li:nth-child(6n+1)::before,
.timeline-snake > li:nth-child(6n+2)::before{
  top: 25px;
  right: -30px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--slate);
}

/* Sola akan kartlar */
.timeline-snake > li:nth-child(6n+4)::after,
.timeline-snake > li:nth-child(6n+5)::after{
  top: 30px;
  left: -30px;
  width: 30px;
  height: 1px;
  background: var(--slate-2);
}

.timeline-snake > li:nth-child(6n+4)::before,
.timeline-snake > li:nth-child(6n+5)::before{
  top: 25px;
  left: -30px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--slate);
}

/* Satir sonu: bir alt satira in. Ayni satirdaki kartlar esit yukseklikte
   uzadigi icin (align-items varsayilani stretch) cizgi her zaman alttaki
   kartin ust kenarina oturur. */
.timeline-snake > li:nth-child(6n+3)::after,
.timeline-snake > li:nth-child(6n+6)::after{
  left: 50%;
  bottom: -64px;
  width: 1px;
  height: 64px;
  background: var(--slate-2);
}

.timeline-snake > li:nth-child(6n+3)::before,
.timeline-snake > li:nth-child(6n+6)::before{
  left: 50%;
  bottom: -64px;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--slate);
}

/* Son kayittan sonra gidilecek yer yok. */
.timeline-snake > li:last-child::before,
.timeline-snake > li:last-child::after{ display: none; }

/* Zikzak ancak 3 sutunda anlamli. Daralan ekranda duz akisa donuluyor;
   :nth-child(n) yalnizca yukaridaki kurallarla ayni ozgullugu yakalamak
   icin var, secimi degistirmez. */
@media (max-width: 1023px){
  .timeline-snake{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }
  .timeline-snake > li:nth-child(n){ grid-column: auto; }
  .timeline-snake > li:nth-child(n)::before,
  .timeline-snake > li:nth-child(n)::after{ display: none; }
}

@media (max-width: 767px){
  .timeline-snake{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Ana sayfa cozum kartlari
   Satirda uc kart; flex ile yapildiginda son satirdaki kartlar yayilip
   digerlerinden genis kaliyordu, bu yuzden izgara kullaniliyor.
   Sutun tanimlari yalnizca burada durur; sayfa dosyasinda tekrarlanmaz.
   ========================================================================== */
.sol-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1023px){
  .sol-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px){
  .sol-grid{ grid-template-columns: 1fr; }
}


/* =======================================================================
   4. UST MENU / ALT BILGI / ARAYUZ PARCALARI   (eski chrome.css)
   ======================================================================= */

/* ---------------- ortak ---------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:10px 16px; font-size:14px;
}
.skip-link:focus{ left:0; }

/* ---------------- ust menu ---------------- */
.site-head{
  position:sticky; top:0; z-index:120; background:var(--bg);
  box-shadow:none; transition:box-shadow 180ms ease;
}
.site-head.is-small{ box-shadow:var(--shadow-1); }

.util-bar{
  overflow:hidden; background:var(--bg-soft); border-bottom:1px solid var(--line);
  height:36px; opacity:1; transition:height 180ms ease, opacity 180ms ease;
}
.site-head.is-small .util-bar{ height:0; opacity:0; }
.util-bar__in{
  max-width:1280px; margin:0 auto; padding:0 24px; height:36px;
  display:flex; align-items:center; justify-content:flex-end; gap:22px;
}
.util-bar a, .util-bar button{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
}
.util-bar__demo{ color:var(--brand) !important; }
.util-bar a:hover, .util-bar button:hover{ color:var(--brand); }
/* Dil secici. Yerlesim ust yardimci bardaki diger baglantilarla ayni
   olcude tutulur; secim assets/js/ui.js tarafindan adrese cevrilir. */
.lang{ position:relative; display:inline-flex; align-items:center; gap:5px; }
.lang__icon{ color:var(--ink); flex:0 0 auto; }
.lang__select{
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  background:none; border:0; padding:0 16px 0 0; margin:0; cursor:pointer;
  line-height:1; appearance:none; -webkit-appearance:none;
  /* Acilir ok: dis dosya gerektirmesin diye degradelerle cizilir. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:right 5px center, right 1px center;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.lang:hover .lang__icon, .lang__select:hover{ color:var(--brand); }
.lang__select option{ text-transform:none; letter-spacing:0; color:var(--ink); }
.lang__fallback a{ margin-left:8px; }
.lang__static{ font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--slate); }

.nav-bar{ background:var(--bg); border-bottom:1px solid var(--line); height:74px; transition:height 180ms ease; }
.site-head.is-small .nav-bar{ height:62px; }
.nav-bar__in{
  max-width:1280px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:24px; width:auto; display:block; }

.main-nav{ display:flex; align-items:stretch; height:100%; gap:2px; }
.main-nav__link{
  position:relative; padding:0 16px; height:100%; display:flex; align-items:center;
  font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap;
}
/* Alt cizgi: varsayilan rengi --ink; yalnizca bulunulan bolumde markaya
   doner. Hover ve acik panelde cizgi cikar ama metin de cizgi de siyah
   kalir, kirmizi yalnizca AKTIF bolume ayrilir.
   Sira onemli: is-current kurallari hover'dan SONRA gelir, boylece aktif
   ogenin uzerine gelindiginde de kirmizi kalir. */
.main-nav__link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px;
  background:var(--ink); opacity:0; transition:opacity 150ms ease;
}
.main-nav__link:hover, .main-nav__link.is-open{ color:var(--ink); }
.main-nav__link:hover::after, .main-nav__link.is-open::after{ opacity:1; }
.main-nav__link.is-current{ color:var(--brand); font-weight:600; }
.main-nav__link.is-current::after{ opacity:1; background:var(--brand); }

.burger{
  display:none; background:none; border:1px solid var(--line); cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
}

/* ---------------- arama ---------------- */
.search-bar{ background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow-1); }
.search-bar__in{ max-width:1280px; margin:0 auto; padding:18px 24px; display:flex; gap:12px; align-items:center; }
.search-bar input{
  flex:1; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:2px;
  font-family:var(--font-body); font-size:15px;
}
.search-bar button{
  height:46px; padding:0 24px; background:var(--brand); color:#fff; border:0;
  border-radius:2px; font-size:15px; font-weight:600; cursor:pointer;
}

/* ---------------- acilir panel ---------------- */
.mega{
  position:absolute; left:0; right:0; background:var(--bg);
  border-top:1px solid var(--line); box-shadow:var(--shadow-2); z-index:119;
  max-height:70vh; overflow-y:auto; animation:megaIn 160ms ease-out;
}
@keyframes megaIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
/* Menuler arasi gecis: animasyon oynatilmaz, aninda swap (titremesiz). */
.mega.mega--instant{ animation:none; }
.mega__in{
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:240px 1fr; min-height:300px;
}
.mega__tabs{ display:flex; flex-direction:column; border-right:1px solid var(--line); padding:20px 16px 20px 0; }
.mega__tab{
  background:none; border:0; border-left:2px solid transparent; cursor:pointer;
  text-align:left; padding:10px 14px; font-family:var(--font-body); font-size:15px;
  font-weight:500; color:var(--ink); white-space:nowrap;
}
.mega__tab.is-on{ border-left-color:var(--brand); color:var(--ink); font-weight:600; background:var(--bg-soft); }
.mega__tab:hover{ color:var(--brand); }
.mega__pane{ display:none; grid-column:2; grid-row:1; }
.mega__pane.is-on{ display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.mega__col--intro{ padding:32px; }
.mega__col--groups{
  padding:28px 32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:28px 32px; align-content:start;
}
.mega__group{ display:flex; flex-direction:column; gap:9px; }
.mega__label{
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); margin-bottom:2px;
}
.mega__col--intro .mega__label{ margin-bottom:14px; }
.mega__text{ font-size:15px; line-height:1.6; color:var(--ink); margin:0 0 24px; max-width:62ch; }
.mega__list{ margin:0 0 26px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 32px; max-width:56ch; }
.mega__list li{ font-size:14px; font-weight:500; line-height:1.45; color:var(--ink); }
.mega a{ color:var(--ink); text-decoration:none; }
.mega__group a{ display:inline-flex; align-items:center; font-size:15px; font-weight:500; line-height:1.45; }
.mega__group a:hover{ color:var(--brand); }
/* Intro CTA referansta dolu marka rengi buton; promo CTA ise duz link. */
.mega__col--intro .mega__cta{
  display:inline-flex; align-items:center; padding:12px 26px; background:var(--brand);
  color:#fff; border-radius:2px; font-size:15px; font-weight:600;
}
.mega__col--intro .mega__cta:hover{ background:var(--brand-dark); color:#fff; }
.mega__promo{
  display:flex; flex-direction:column; gap:14px; align-self:start;
  border-left:1px solid var(--line); padding:28px 0 28px 28px;
}
.mega__promo-fig{
  width:100%; height:104px; background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.mega__promo-body{ display:flex; flex-direction:column; }
.mega__promo-body > *{ display:block; }
.mega__promo-title{ font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.3; margin-bottom:8px; }
.mega__promo-desc{ font-size:14px; line-height:1.6; color:var(--slate); margin:0 0 12px; }
.mega__promo .mega__label{ font-size:12px; letter-spacing:.12em; margin-bottom:8px; }
.mega__promo .mega__cta{ font-size:15px; font-weight:500; color:var(--ink); }
.mega__promo:hover .mega__cta{ color:var(--brand); }
.mega__more{ background:var(--bg-soft); border-top:1px solid var(--line); }
.mega__more-in{ max-width:1280px; margin:0 auto; padding:0 24px; height:52px; display:flex; align-items:center; }
.mega__more a{ font-size:15px; font-weight:500; color:var(--ink); }
.mega__more a:hover{ color:var(--brand); }

/* ---------------- mobil cekmece ---------------- */
.drawer{
  position:fixed; inset:0; z-index:200; background:var(--bg); overflow-y:auto;
}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--line);
}
.drawer__head button{ background:none; border:0; font-size:22px; cursor:pointer; line-height:1; }
.drawer__nav{ display:flex; flex-direction:column; padding:12px 0 40px; }
.drawer__nav a{
  padding:14px 24px; font-size:17px; font-weight:600; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line);
}
.drawer__nav .drawer__sub{ font-size:15px; font-weight:400; color:var(--slate); padding-left:40px; }

/* Dil secici cekmecede de bulunur: ust yardimci bar mobilde gizlidir. */
.drawer__lang{
  display:flex; align-items:center; gap:12px;
  padding:0 24px 40px;
}
.drawer__lang-label{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate);
}
.drawer__lang .lang__select{
  font-size:15px; letter-spacing:0; text-transform:none;
  padding:8px 28px 8px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background-position:right 12px center, right 8px center;
}

@media (max-width:1023px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .mega{ display:none !important; }
}

/* ---------------- alt bilgi ---------------- */
.site-foot{ background:var(--dark); color:rgba(255,255,255,.72); }
.site-foot a{ color:rgba(255,255,255,.72); text-decoration:none; }
.site-foot a:hover{ color:#fff; }
.site-foot__top{
  max-width:1280px; margin:0 auto; padding:64px 24px 48px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px 32px;
}
.site-foot__label{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:12px;
}
.site-foot__col a{ display:inline-flex; align-items:center; gap:5px; font-size:15px; padding:6px 0; }
.site-foot__col a + a{ display:flex; }
.site-foot__office{ margin-bottom:14px; font-size:14px; line-height:1.6; }
.site-foot__office strong{ display:block; color:#fff; font-weight:600; }
.site-foot__reach{ font-size:14px; line-height:1.7; margin:10px 0 0; white-space:nowrap; }
/* Telefon · e-posta ayni satirda: kolon linki kurali (.site-foot__col a + a{display:flex})
   ile ayni ozgulukte olup sonra geldigi icin ezer. */
.site-foot__reach a,
.site-foot__reach a + a{ display:inline; padding:0; }
.site-foot__bar{ border-top:1px solid var(--dark-line); background:var(--dark-3); }
.site-foot__bar-row{
  max-width:1280px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.site-foot__bar-row--legal{ border-top:1px solid var(--dark-line); font-size:13px; }
.site-foot__social{ display:flex; gap:14px; }
.site-foot__follow{ display:flex; align-items:center; gap:16px; }
/* Alt bilgi sag blogu: takip + dil secici yan yana. */
.site-foot__bar-right{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.site-foot__lang{ display:flex; align-items:center; gap:12px; }
/* Secici koyu zeminde: ust menudeki .lang__select acik zemin icin
   yazilmis, rengi ve cercevesi burada koyu banda gore ezilir. */
.site-foot__lang .lang__select{ color:#fff; font-size:13px; letter-spacing:0; text-transform:none;
  padding:6px 26px 6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius);
  background-position:right 10px center, right 6px center; }
.site-foot__lang .lang__select:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
.site-foot__follow-label{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.site-foot__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.site-foot__copy{ font-size:13px; color:rgba(255,255,255,.55); }

/* ---------------- sayfa ici sekme ve filtre ---------------- */
.feat-tab{
  background:none; border:0; border-left:2px solid transparent; cursor:pointer;
  text-align:left; padding:12px 20px; font-family:var(--font-body); font-size:15px;
  font-weight:400; line-height:1.4; color:var(--ink);
}
.feat-tab:hover{ color:var(--brand); }
.feat-tab.is-on{ border-left-color:var(--brand); background:var(--bg); font-weight:600; }

.seg-filter{ border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.seg-filter.is-on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); font-weight:600; }

/* ---------------- tam sayfa yukleme katmani ---------------- */
.app-loading{
  position:fixed; inset:0; z-index:300; background:rgba(15,27,36,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 200ms ease, visibility 200ms ease;
}
.app-loading.is-on{ opacity:1; visibility:visible; }
.app-loading__box{
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:24px 30px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-2);
}
.app-loading__spin{
  width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; animation:appspin 700ms linear infinite; flex-shrink:0;
}
@keyframes appspin{ to{ transform:rotate(360deg); } }
.app-loading__txt{ font-size:15px; font-weight:500; color:var(--ink); }

/* ---------------- toast bildirim ---------------- */
.toast-wrap{
  position:fixed; top:20px; right:20px; z-index:320;
  display:flex; flex-direction:column; gap:10px; max-width:min(92vw,380px);
}
.toast{
  background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--slate-2);
  border-radius:3px; box-shadow:var(--shadow-2); padding:14px 16px;
  font-size:14px; line-height:1.55; color:var(--ink-2);
  transform:translateX(120%); opacity:0; transition:transform 260ms ease, opacity 260ms ease;
}
.toast.is-on{ transform:none; opacity:1; }
.toast--ok{ border-left-color:var(--ok); }
.toast--error, .toast--warn{ border-left-color:var(--brand); }
.toast__title{ font-weight:600; color:var(--ink); margin-bottom:3px; }
@media (prefers-reduced-motion: reduce){ .toast{ transition:opacity 200ms ease; transform:none; } }

/* ---------------- iletisim formu: sorun tipi secimi ---------------- */
.cf-choice{ cursor:pointer; }
.cf-choice input{ position:absolute; opacity:0; width:0; height:0; }
.cf-choice span{
  display:inline-block; padding:10px 18px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); border-radius:2px; font-size:14px; font-weight:500; transition:border-color 150ms ease;
}
.cf-choice:hover span{ border-color:var(--slate-2); }
.cf-choice input:checked + span{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.cf-choice input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }


/* =======================================================================
   5. HOVER KURALLARI   (eski hover.css)
   ======================================================================= */

[data-h="h19054f66"]:hover{ color:#fff;text-decoration:none }
[data-h="h48597c67"]:hover{ background:#fff;color:var(--ink);text-decoration:none }
[data-h="h4d651954"]:hover{ background:var(--brand-dark);color:#fff;text-decoration:none }
[data-h="hbtnbrand"]:hover{ background:var(--brand-dark); }
[data-h="hbranddark"]:hover{ color:var(--brand-dark); }

/* Asagidaki kurallar donusum sirasinda uretilmemis, sablonlarda data-h
   nitelikleri karsiliksiz kalmisti: kart ve dugmeler uzerine gelindiginde
   marka rengi hic gelmiyordu. Her deger tek bir kural karsiligidir; ayni
   degeri tasiyan tum ogeler ayni davranisi paylasir. */

/* Cerceveli kart ve kutular: kenar marka rengine doner. */
[data-h="h5e25018d"]:hover,
[data-h="h5dbfc460"]:hover,
[data-h="h1545c179"]:hover,
[data-h="h67ee44d2"]:hover,
[data-h="h40ce0d7a"]:hover,
[data-h="he5b538f9"]:hover{ border-color:var(--brand); }

/* Cerceveli metin dugmeleri: kenar ve yazi birlikte doner. */
[data-h="h4bc4feb5"]:hover,
[data-h="hc858ba83"]:hover,
[data-h="h1e1ca8ca"]:hover,
[data-h="h4692702c"]:hover,
[data-h="hf39598e2"]:hover{ border-color:var(--brand); color:var(--brand); }

/* Yazi rengi degisenler. Sema kutularinin cercevesi stroke="currentColor"
   ile bu renkten beslendigi icin h7483d9de ayni zamanda kenari kirmizilastirir. */
[data-h="h7483d9de"]:hover,
[data-h="haf182db5"]:hover,
[data-h="hcac7ea68"]:hover,
[data-h="h7891572d"]:hover{ color:var(--brand); }

/* Zemini acilan bloklar ve koyu bant sekmesi. */
[data-h="hcc91f98d"]:hover{ background:var(--bg-soft); }
[data-h="h19da29ab"]:hover{ color:#fff; }
[data-h="hfa242f03"]:hover{ color:var(--brand-dark); }

/* Renk gecisi ani olmasin; yalnizca data-h tasiyan ogeleri etkiler. */
[data-h]{ transition:border-color 160ms ease, color 160ms ease, background-color 160ms ease; }


/* =======================================================================
   6. ORTAK BILESENLER   (eski components.css)
   ======================================================================= */

.crumbs{ border-bottom:1px solid var(--line); background:var(--bg-soft) }
.crumbs-in{
  max-width:1280px;
  margin:0 auto;
  padding:12px 24px;
  font-size:13px;
  color:var(--slate);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.crumb-link, a.crumb-link{ color:var(--slate) }
.crumb-current, a.crumb-current{ color:var(--ink) }
.page-main{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
}
.c-sp1{ padding:96px 0 120px }
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:10px;
}
.c-title1{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,42px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 12px;
}
.c-txt2{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 28px;
  max-width:56ch;
}
.btn-primary-ib, a.btn-primary-ib{
  display:inline-block;
  padding:13px 28px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.dark-band-alt{ background:var(--dark); position:relative }
.grid-overlay{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 56px);
}
.container-py88{
  max-width:1280px;
  margin:0 auto;
  padding:88px 24px;
  position:relative;
}
.eyebrow-dim{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 18px;
  max-width:22ch;
}
.c-txt3{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:62ch;
}
.c-sp2{ padding:88px 0 }
.c-title3{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 18px;
}
.p-16-ink2{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 16px;
}
.c-txt5{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0;
}
.bordered{ border:1px solid var(--line); border-radius:3px }
.card-head{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
}
.c-sp3{ margin:0 }
.c-eyebrow4{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-top:12px;
}
.sec{ padding:88px 0; border-top:1px solid var(--line) }
.c-title4{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 12px;
}
.sec-soft{
  padding:88px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.c-box5{ flex:1 1 420px; min-width:280px }
.c-box6{ flex:1 1 340px; min-width:280px }
.c-box7{ border-top:1px solid var(--line) }
.c-head1{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
}
.cta-band-72{
  background:var(--cta-bg);
  border-top:1px solid var(--cta-line);
  padding:72px 0;
}
.container-grid300{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:36px;
  align-items:center;
}
.h2-32-ink{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 12px;
}
.c-txt6{
  font-size:16px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  max-width:52ch;
}
/* Buton + yanindaki metin bagi ayni satirda. align-items yazilmazsa bag
   kutusu butonun boyuna kadar uzar ve metni tepede kalir; .products-row6
   ile ayni cozum. */
.c-row2{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.btn-primary-lg{
  padding:13px 28px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.c-card2, a.c-card2{
  padding:13px 28px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--cta-line);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.c-wrap3{
  max-width:1280px;
  margin:0 auto;
  padding:80px 24px;
  position:relative;
}
.c-sp4{ padding:72px 0 }
.c-txt7{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
}
.pb-80{ padding:0 0 80px }
.c-row3{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.c-txt8{ font-size:14px; color:var(--slate) }
.c-txt9{
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.c-sp6{ padding:80px 0 }
.hairline-row{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.c-sp7{ padding:56px 0 32px }
.c-row5{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:24px 48px;
  align-items:center;
}
.flex-460{ flex:1 1 460px; min-width:280px }
.h1-42{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,42px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 12px;
}
.c-txt10{
  font-size:16px;
  color:var(--slate);
  margin:0 0 8px;
  max-width:72ch;
  line-height:1.7;
}
.c-txt11{
  font-size:15px;
  color:var(--slate);
  margin:0;
  max-width:72ch;
  line-height:1.7;
}
.c-row6{
  flex:0 1 280px;
  min-width:190px;
  display:flex;
  justify-content:center;
}
.c-box10{
  width:100%;
  max-width:250px;
  height:auto;
  display:block;
}
.container-grid250{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:48px;
  align-items:start;
}
.side-nav{
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.c-title7{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
}
.c-sp8{ margin-bottom:30px }
.c-head2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  margin:0 0 12px;
}
.c-sp9{ padding:14px 18px; border-bottom:1px solid var(--line) }
.c-eyebrow5{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:6px;
}
.c-txt12{
  font-size:15px;
  font-weight:600;
  line-height:1.55;
}
.c-card3{
  border:1px solid var(--line);
  border-left:3px solid var(--warn);
  border-radius:2px;
  background:var(--bg-soft);
  padding:18px 20px;
  margin-bottom:32px;
}
.c-eyebrow6{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--warn);
  margin-bottom:8px;
}
.c-txt13{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
}
.c-box11{
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:8px;
  font-size:15px;
  color:var(--slate);
  line-height:1.7;
}
/* Yasal metinlerin yururluk tarihi seridi. Eskiden uyari rozetiydi
   (--warn); metinler yayina alininca notr tarih satirina cevrildi. */
.c-eyebrow7{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--slate);
  border:1px solid var(--line);
  background:var(--bg-soft);
  border-radius:2px;
  padding:6px 10px;
  margin-bottom:22px;
}
.c-txt14{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 14px;
}
.c-eyebrow8{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line);
  background:var(--bg-soft);
  border-radius:2px;
  padding:6px 10px;
  margin-bottom:22px;
}
.c-box12{ color:var(--slate-2) }
.bullet-dot{
  width:6px;
  height:6px;
  background:var(--brand);
  margin-top:9px;
  flex-shrink:0;
}
.c-txt15{
  font-size:16px;
  color:var(--slate);
  margin:0;
  max-width:62ch;
}
.c-sp10{ padding:0 0 40px }
.c-txt16{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 18px;
  max-width:52ch;
}
.c-txt17{ font-size:15px; font-weight:600 }
.c-eyebrow9{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
}
.c-txt18{ font-size:13px; color:var(--slate) }
.c-row7{
  display:flex;
  gap:11px;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}
.c-box14{
  width:6px;
  height:6px;
  background:var(--brand);
  margin-top:8px;
  flex-shrink:0;
}
.c-sec3{ padding:72px 0; border-top:1px solid var(--line) }
.c-title8{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 12px;
}
.c-eyebrow10{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
.container-row48{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  align-items:flex-start;
}
.flex-320{ flex:1 1 320px }
.link-15{ font-size:15px; font-weight:500 }
.c-sec4{
  padding:80px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.c-txt20{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 36px;
  max-width:72ch;
}
.c-head3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 8px;
}
.p-15-slate{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
}
.c-sec5{ padding:80px 0; border-top:1px solid var(--line) }
.c-box16{ flex:1 1 300px }
.container-row36{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  align-items:center;
}
.c-eyebrow11{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:12px;
}
.c-txt22{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:68ch;
}
.c-title9{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 18px;
  max-width:20ch;
}
.c-txt23{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 40px;
  max-width:72ch;
}
.c-head4{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0;
}
.c-txt24{
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
}
.c-box17{ font-weight:500 }
.c-txt25{
  font-size:13px;
  color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.c-title10{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 32px;
}
.c-row10{
  display:flex;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.c-eyebrow12{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand);
}
.dark-band{ position:relative; background:var(--dark) }
.c-wrap4{
  max-width:1280px;
  margin:0 auto;
  padding:92px 24px 72px;
  position:relative;
}
.row-14{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.c-card4{
  padding:13px 28px;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.dark-sec{ position:relative; border-top:1px solid var(--dark-line) }
.c-row12{
  max-width:1280px;
  margin:0 auto;
  padding:32px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
}
.c-box20{ flex:1 1 220px }
.c-txt26{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.65);
  margin-top:7px;
}
.c-sp11{ padding:88px 0 76px }
.c-title11{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 20px;
  max-width:26ch;
}
.c-box21{
  flex:1 1 380px;
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0;
  max-width:60ch;
  text-wrap:pretty;
}
.c-title12{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
  max-width:24ch;
}
.h2-26ch{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
  max-width:26ch;
}
.c-head5{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--slate-2);
  width:32px;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.c-txt27{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  flex:1 1 320px;
  max-width:64ch;
}
.c-eyebrow13{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:14px;
}
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
}
.c-txt28{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
}
.c-title14{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 16px;
  max-width:26ch;
}
.c-head6{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 8px;
}
.c-row13{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
}
.c-box22{ flex:1 1 420px; max-width:60ch }
.c-title15{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
}
.c-card6{
  flex:0 1 380px;
  margin-left:auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:30px 28px;
}
.c-head7{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  line-height:1.25;
  margin:0 0 12px;
}
.c-txt29{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 22px;
}
.c-inline1{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.cta-band{
  background:var(--cta-bg);
  border-top:1px solid var(--cta-line);
  padding:76px 0;
}
.h2-ink{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 12px;
}
.c-txt30{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:56ch;
}
.c-btn3{
  display:inline-block;
  padding:14px 30px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.c-sp12{ padding:56px 0 80px }
.c-row14{
  flex:0 1 300px;
  min-width:200px;
  display:flex;
  justify-content:center;
}
.c-box24{
  width:100%;
  max-width:280px;
  height:auto;
  display:block;
}
.c-grid3{ display:grid; gap:20px }
.c-abs2{ position:absolute; left:-9999px }
.c-grid4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.field-label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px;
}
.c-txt31{
  font-size:13px;
  color:var(--brand);
  margin-top:6px;
}
.c-txt32{
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
}
.c-row15{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.c-btn4{
  height:48px;
  padding:0 32px;
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.c-head8{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
}
.c-txt33{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 16px;
}
.c-col2{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.ok-icon{ color:var(--ok); flex-shrink:0 }
.c-txt34{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 14px;
}
.c-title17{
  font-family:var(--font-display);
  font-size:clamp(32px,4.2vw,50px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 18px;
  max-width:21ch;
}
.c-txt35{
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0 0 34px;
  max-width:64ch;
  text-wrap:pretty;
}
.c-title18{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 20px;
  max-width:28ch;
}
.c-txt36{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:78ch;
  text-wrap:pretty;
}
.c-card7{
  overflow-x:auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
}
.c-box27{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.bg-soft{ background:var(--bg-soft) }
.hr-b{ border-bottom:1px solid var(--line) }
.h2-28ch{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
  max-width:28ch;
}
.c-txt37{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 44px;
  max-width:78ch;
}
.c-head9{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:var(--brand);
  margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.c-txt38{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 18px;
}
.c-eyebrow14{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:5px;
}
.c-txt39{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}
.c-row16{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.row-24{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.c-row18{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.c-col3{
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.c-txt40{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  margin:0;
}
.c-txt41{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 28px;
  max-width:72ch;
}
.c-row19{
  max-width:1280px;
  margin:0 auto;
  padding:96px 24px;
  position:relative;
  min-height:320px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:40px;
}
.c-box30{
  flex:1 1 520px;
  min-width:300px;
  max-width:640px;
}
.hero-title-lg{
  font-family:var(--font-display);
  font-size:clamp(34px,4.2vw,52px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 14px;
}
.hero-sub{
  font-family:var(--font-display);
  font-size:clamp(18px,2vw,24px);
  font-weight:600;
  color:rgba(255,255,255,.92);
  margin:0 0 18px;
}
.c-txt42{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0 0 32px;
  max-width:54ch;
}
.btn-primary{
  padding:12px 26px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.btn-outline-light{
  padding:12px 26px;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.container-tabs{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.dtab, a.dtab{
  position:relative;
  padding:15px 18px;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.68);
  white-space:nowrap;
  flex-shrink:0;
}
.tab-rule{
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  background:var(--brand);
  opacity:0;
}
.c-row21{
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
  align-items:center;
  margin-bottom:44px;
}
.c-abs5{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 28px);
  opacity:.45;
}
.c-row22{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.c-title22{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 12px;
}
.c-txt43{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 28px;
  max-width:76ch;
}
.c-box33{
  text-align:left;
  padding:16px 18px 0;
  font-size:13px;
  color:var(--slate);
}
.th-sm{
  text-align:left;
  padding:14px 16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.c-box34{
  text-align:left;
  padding:15px 16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.td-15{
  padding:15px 16px;
  font-size:15px;
  color:var(--ink-2);
  white-space:nowrap;
}
.chip-link, a.chip-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg);
  color:var(--ink-2);
  font-size:13px;
  font-weight:600;
  line-height:1;
}
.c-txt44{
  font-size:14px;
  line-height:1.6;
  color:var(--slate-2);
  margin:20px 0 0;
  max-width:76ch;
}
.c-row23{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.c-box35{ flex:1 1 380px }
.c-eyebrow16{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
}
.c-row24{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.c-box36{ flex:1 1 420px }
.c-txt45{
  font-size:24px;
  font-weight:400;
  color:var(--slate);
  flex-shrink:0;
}
.c-sp14{
  margin:0;
  padding:0 22px 18px;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  max-width:76ch;
}
.c-txt46{
  font-size:16px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  max-width:54ch;
}
.c-sp15{ padding:88px 0 56px }
.c-title23{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 18px;
  max-width:22ch;
}
.c-txt47{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 16px;
  max-width:60ch;
}
.c-txt48{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:60ch;
}
.c-txt49{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 44px;
  max-width:72ch;
}
.c-box37{ max-width:860px }
.c-row25{
  display:flex;
  gap:22px;
  align-items:stretch;
}
.c-col4{
  flex:0 0 46px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.c-head10{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--brand);
  flex-shrink:0;
}
.c-box38{
  flex:1 1 auto;
  width:2px;
  background:var(--line);
  margin:8px 0;
}
.c-head11{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin:10px 0 8px;
}
.c-txt50{
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:60ch;
}
.c-box39{
  flex:1 1 300px;
  background:var(--bg);
  padding:28px 26px;
}
.c-head12{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  margin:16px 0 10px;
}
.c-box40{ flex-shrink:0; margin-top:2px }
.c-txt51{
  font-size:14.5px;
  line-height:1.6;
  color:var(--slate);
  margin:0;
}
.c-box41{ flex:1 1 380px; min-width:280px }
.c-txt52{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 16px;
  max-width:56ch;
}
.c-txt53{
  font-size:16px;
  line-height:1.75;
  color:var(--slate);
  margin:0;
  max-width:56ch;
}
.c-box42{
  flex:1 1 280px;
  background:var(--bg);
  padding:22px 24px;
}
.c-head13{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  margin:0 0 7px;
  line-height:1.3;
}
.c-eyebrow17{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:16px;
}
.c-row26{
  display:flex;
  flex-wrap:wrap;
  gap:14px 32px;
}
.c-row27{
  flex:1 1 420px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.c-sp16{ padding:88px 0 72px }
.c-head14{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--brand);
  margin-bottom:12px;
}
.c-head15{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 10px;
}
.c-row28{
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  align-items:center;
}
.c-eyebrow18{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.c-card9{
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px 24px;
  background:var(--bg);
}
.c-box43{
  display:block;
  width:100%;
  height:auto;
}
.c-head16{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 10px;
}
.c-txt54{
  font-size:16px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  max-width:56ch;
}
.c-row29{
  display:flex;
  flex-wrap:wrap;
  gap:36px 40px;
}
.c-head17{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.06em;
  margin-bottom:12px;
}
.c-txt55{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
}
.c-box44{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  padding:36px 0;
}
.c-row30{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
}
.c-box45{ flex:1 1 200px }
.c-txt56{
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
  margin-top:6px;
}
.c-col5{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.c-head18{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--brand);
  margin-bottom:12px;
}
.c-box46{
  flex:1 1 280px;
  background:var(--bg);
  padding:28px 26px;
}
.c-head19{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:16px 0 10px;
}
.c-box47{ overflow-x:auto }
.th{
  text-align:left;
  padding:13px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--line);
}
.th-nowrap{
  text-align:left;
  padding:13px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.c-sp17{
  padding:16px;
  font-size:15px;
  color:var(--ink-2);
}
.c-box48{
  flex:1 1 280px;
  background:var(--bg);
  padding:20px 22px;
}
.c-eyebrow21{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:7px;
}
.c-txt57{
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.c-sec6{
  padding:76px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.c-title24{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 32px;
}
.c-grid5{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.c-head20{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  margin-bottom:5px;
}
.c-txt58{
  font-size:14px;
  color:var(--slate);
  line-height:1.5;
}
.c-wrap5{
  max-width:1280px;
  margin:0 auto;
  padding:92px 24px;
  position:relative;
}
.c-txt59{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0 0 32px;
  max-width:62ch;
}
.c-txt60{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 40px;
  max-width:78ch;
}
.c-box49{ flex:1 1 340px }
.c-card10{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg);
}
.c-row31{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
}
.c-title25{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 18px;
  max-width:24ch;
}
.c-box50{ flex:1 1 320px; min-width:280px }
.c-row32, a.c-row32{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}
.c-box51{
  color:var(--brand);
  flex-shrink:0;
  font-weight:600;
}
.c-title26{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 18px;
  max-width:22ch;
}
.c-box52{ min-width:0 }
.c-wrap6{
  max-width:1280px;
  margin:0 auto;
  padding:96px 24px;
  position:relative;
}
.c-box53{ max-width:760px }
.c-title27{
  font-family:var(--font-display);
  font-size:clamp(34px,4.2vw,52px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 16px;
}
.c-txt61{
  font-size:17px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  margin:0 0 32px;
  max-width:62ch;
}
.c-txt62{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:76ch;
  text-wrap:pretty;
}
.c-row33{
  display:flex;
  flex-wrap:wrap;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.c-txt63{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
}
.c-title28{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
  max-width:30ch;
}
.c-box54{
  width:100%;
  height:auto;
  display:block;
}
.c-title29{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 32px;
  max-width:26ch;
}
.c-sp18{
  padding:16px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.c-title30{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 18px;
  max-width:24ch;
}
.c-head21{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.c-card11{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:3px;
}
.c-sp19{ padding:56px 0 40px }
.c-title31{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,42px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 14px;
  max-width:22ch;
}
.c-txt64{
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
}
.c-sp20{ padding:8px 0 80px }
.c-grid6{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:48px;
  align-items:start;
}
.c-head22{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  margin:0;
}
.c-row34{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  color:var(--ink-2);
  line-height:1.7;
  cursor:pointer;
  max-width:72ch;
}
.c-sp21{
  margin-top:5px;
  accent-color:var(--brand);
  flex-shrink:0;
}
.c-txt65{
  font-size:13px;
  color:var(--brand);
  margin-top:-10px;
}
.c-txt66{
  font-size:13px;
  color:var(--slate);
  line-height:1.7;
  max-width:72ch;
}
.c-txt67{
  font-size:13px;
  color:var(--brand);
  margin-top:8px;
}
.c-card12{
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
}
/* Iletisim kenar sutunundaki sosyal hesap listesi. Ikonlar currentColor
   kullandigi icin renk baglantidan miras alinir. */
.c-social{
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Satir: solda ikon, sagda ust uste platform adi ve kullanici adi.
   Ikonlar currentColor kullandigi icin renk baglantidan miras alinir. */
.c-social__link{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  transition:color 150ms ease;
}
.c-social__icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--slate);
  transition:color 150ms ease, border-color 150ms ease;
}
.c-social__link .c-txt68{ display:block; margin-bottom:1px }
.c-social__handle{
  display:block;
  font-size:15px;
  font-weight:600;
  word-break:break-all;
}
.c-social__link:hover{ color:var(--brand) }
.c-social__link:hover .c-social__icon{ color:var(--brand); border-color:var(--brand) }
.c-col6{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.c-txt68{
  font-size:13px;
  color:var(--slate);
  margin-bottom:3px;
}
.c-txt69{ font-size:17px; font-weight:600 }
.c-sp22{ margin-bottom:16px }

/* ----------------------------------------------------------------------
   Yasal sayfalarin yan menusu (company/legal*).
   Eskiden secili/secili degil ayrimi PHP dizisinden satir ici renk olarak
   basiliyordu; artik durum aria-current ile ayni anlamda .is-current
   sinifiyla veriliyor.
   ---------------------------------------------------------------------- */
.side-link, a.side-link{
  display:block;
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:13px 16px;
  font-size:15px;
  background:transparent;
  color:var(--ink);
  font-weight:400;
  box-shadow:inset 3px 0 0 0 transparent;
}
.side-link.is-current, a.side-link.is-current{
  background:var(--bg-soft);
  color:var(--brand);
  font-weight:600;
  box-shadow:inset 3px 0 0 0 var(--brand);
}

/* ----------------------------------------------------------------------
   Slider noktasi. Rengi base.css > [data-dot] > span belirler (aktif olan
   marka rengi); burada yalnizca cubugun olcusu var.
   ---------------------------------------------------------------------- */
.hero-dot{ display:block; width:34px; height:4px }

/* ----------------------------------------------------------------------
   Referans logolari (ana sayfa seridi ve referanslar sayfasi).
   Logolarin en-boy orani 0.66 ile 11.69 arasinda degistigi icin yukseklik
   siniri her logoya ayri veriliyor; deger tools ile hesaplanip veri
   dosyasinda "mh" olarak duruyor, karsiligi asagidaki siniflardir.
   ---------------------------------------------------------------------- */
.ref-logo{ max-width:100%; width:auto; height:auto; display:block }
.ref-logo--h26{ max-height:26px }
.ref-logo--h32{ max-height:32px }
.ref-logo--h35{ max-height:35px }
.ref-logo--h42{ max-height:42px }
.ref-logo--h43{ max-height:43px }
.ref-logo--h54{ max-height:54px }
.ref-logo--h56{ max-height:56px }
.ref-logo--h62{ max-height:62px }
.ref-logo--h71{ max-height:71px }
.ref-logo--h83{ max-height:83px }
.ref-logo--h105{ max-height:105px }
/* Ana sayfa seridinde logolar bir tik soluk. */
.ref-strip .ref-logo{ opacity:.9 }
/* Referans hucresinin logo alani: yukseklik logo oranina gore secilir. */
.ref-cell{ position:relative; display:flex; align-items:center; justify-content:center }
.ref-cell--h64{ height:64px }
.ref-cell--h94{ height:94px }
.ref-cell--h120{ height:120px }

/* ----------------------------------------------------------------------
   Iletisim formu (views/partials/contact-form.php)
   Sekmenin secili olusu, uyari kutusunun tonu ve alan hatasi eskiden
   satir ici renk olarak basiliyordu; artik durum sinifiyla veriliyor.
   ---------------------------------------------------------------------- */
.cform-tab{ flex:1 1 180px; background:var(--bg); padding:18px 20px; display:block; box-shadow:none }
.cform-tab.is-current{ background:var(--bg-soft); box-shadow:inset 0 3px 0 0 var(--brand) }
.cform-tab__title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:5px;
}
.cform-tab.is-current .cform-tab__title{ color:var(--brand) }

.cform-note{
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  background:var(--bg-soft);
  padding:16px 18px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
}
.cform-note--ok{ border-left-color:var(--ok) }
.cform-note--warn{ border-left-color:var(--warn) }
.cform-note--error{ border-left-color:var(--brand) }

/* Mesaj alani izgarada tam genislik kaplar. */
.cform-field--wide{ grid-column:1/-1 }

.cform-input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-body);
  font-size:15px;
}
.cform-input--area{ height:auto; padding:12px 13px; resize:vertical }
.cform-input.has-error{ border-color:var(--brand) }

/* ----------------------------------------------------------------------
   Koyu seritteki urun/model sekmeleri (.dtab) — secili olan beyaz ve
   altinda marka rengi cizgi tasir.
   ---------------------------------------------------------------------- */
.dtab.is-on, a.dtab.is-on{ font-weight:600; color:#fff }
.dtab.is-on .tab-rule{ opacity:1 }

/* Model seridi (model-firewall / model-hotspot): ayni davranis, dar padding. */
.model-tab{
  position:relative;
  padding:15px 16px;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.68);
  white-space:nowrap;
  flex-shrink:0;
}
.model-tab.is-on, a.model-tab.is-on{ font-weight:600; color:#fff }
.model-tab__rule{
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:2px;
  background:var(--brand);
  opacity:0;
}
.model-tab.is-on .model-tab__rule{ opacity:1 }

/* ----------------------------------------------------------------------
   Filtre dugmeleri (kariyer, haberler). Secili olan dolu marka zeminli.
   ---------------------------------------------------------------------- */
.filter-chip{
  padding:9px 16px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  border-radius:2px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}
.filter-chip--lg{ padding:10px 18px }
.filter-chip.is-on{ border-color:var(--brand); background:var(--brand); color:#fff }

/* ----------------------------------------------------------------------
   Akordiyon basligi. Acik olan marka rengine doner; durumu assets/js/ui.js
   .is-open sinifiyla gunceller.
   ---------------------------------------------------------------------- */
.acc-head{
  width:100%;
  background:none;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 22px;
  text-align:left;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}
.acc-head--sm{
  gap:16px;
  padding:11px 16px;
  font-family:var(--font-body);
  font-size:15px;
}
.acc-head.is-open{ color:var(--brand) }


/* =======================================================================
   7. SAYFA STILLERI
   ======================================================================= */


/* ---------------------------------------------------------------------
   company/about   (views/pages/company/about.php)
   --------------------------------------------------------------------- */

/* Hero bandi: ortak koyu lacivert yerine bordo zemin. Yalnizca bu sayfaya
   ait; .dark-band-alt kuralina dokunulmaz (sekiz sayfa kullaniyor). */
.about-band{ background:var(--band-about) }
/* Bordo zeminde soluk gri etiket okunmuyor. */
.about-band .eyebrow-dim{ color:#fff }

.about-grid1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:48px;
  align-items:start;
}
.about-grid2{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:16px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.about-eyebrow1{
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  line-height:1.5;
}
.about-sp1{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.about-box1{
  position:relative;
  background:var(--dark);
  overflow:hidden;
}
.about-abs1{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  opacity:.28;
}
.about-abs2{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(11,22,32,.85) 0%,rgba(11,22,32,.45) 60%,rgba(11,22,32,.25) 100%);
}
.about-box2{ max-width:56ch }
.about-eyebrow2{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:14px;
}
.about-title1{
  font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
  margin:0 0 16px;
}
.about-txt1{
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0;
}
.about-box3{ background:var(--dark-2) }
.about-grid3{
  max-width:1280px;
  margin:0 auto;
  padding:64px 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px 32px;
}
.about-head1{
  font-family:var(--font-display);
  font-size:44px;
  font-weight:700;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.about-txt2{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  margin:0 0 40px;
  max-width:62ch;
}
.about-head2{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:var(--brand);
  font-variant-numeric:tabular-nums;
  margin-bottom:6px;
}
.about-head3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:8px;
}
.about-col1{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.about-row1{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:14px;
  color:var(--slate);
  line-height:1.6;
}
.about-box4{
  width:5px;
  height:5px;
  background:var(--slate-2);
  margin-top:9px;
  flex-shrink:0;
}
.about-row2{
  display:flex;
  flex-wrap:wrap;
  gap:40px 56px;
  align-items:flex-start;
}
.about-title2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 18px;
  max-width:24ch;
}
.about-txt3{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 16px;
  max-width:62ch;
  text-wrap:pretty;
}
.about-txt4{
  font-size:16px;
  line-height:1.75;
  color:var(--slate);
  margin:0;
  max-width:62ch;
}
.about-sp2{ padding:18px 0; border-bottom:1px solid var(--line) }
.about-txt5{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
}

/* ---------------------------------------------------------------------
   company/careers   (views/pages/company/careers.php)
   --------------------------------------------------------------------- */

.careers-grid1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:36px;
}
.careers-head1{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  margin-bottom:8px;
}
.careers-title1{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0;
}
.careers-row1{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.careers-row2{
  display:flex;
  align-items:center;
  gap:24px;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.careers-box1{ flex:1; min-width:240px }
.careers-head2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.35;
}
.careers-sp1{
  padding:40px 22px;
  text-align:center;
  font-size:15px;
  color:var(--slate);
}

/* ---------------------------------------------------------------------
   company/certificates   (views/pages/company/certificates.php)
   --------------------------------------------------------------------- */

.certificates-txt1{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  margin:0 0 36px;
  max-width:66ch;
}
.certificates-col1{
  flex:1 1 260px;
  background:var(--bg);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.certificates-row1{
  background:var(--bg-soft);
  border:1px solid var(--line);
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.certificates-box1{
  max-width:100%;
  max-height:166px;
  width:auto;
  height:auto;
  display:block;
}
.certificates-col2{
  flex:1;
  display:flex;
  flex-direction:column;
}
.certificates-head1{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 6px;
}
.certificates-txt2{
  font-size:14px;
  line-height:1.55;
  color:var(--slate);
  margin:0 0 10px;
}
.certificates-txt3{
  font-size:13px;
  color:var(--slate-2);
  margin:0 0 12px;
}
.certificates-sp1{
  margin-top:auto;
  padding-top:12px;
  font-size:15px;
  font-weight:500;
}

/* ---------------------------------------------------------------------
   company/legal   (views/pages/company/legal.php)
   --------------------------------------------------------------------- */

.legal-row1{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  padding:5px 0;
  border-bottom:1px solid var(--line);
}
.legal-box1{ min-width:170px; color:var(--slate) }
.legal-row2{
  display:flex;
  gap:11px;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 10px;
}
.legal-card1{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
  padding:18px 20px;
  margin-bottom:32px;
}
.legal-eyebrow1{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
.legal-txt1{
  font-size:15px;
  font-weight:600;
  word-break:break-all;
}
.legal-txt2{
  font-size:13px;
  color:var(--slate);
  line-height:1.7;
  margin-top:8px;
}

/* ---------------------------------------------------------------------
   company/news   (views/pages/company/news.php)
   --------------------------------------------------------------------- */

.news-grid1{
  border:1px solid var(--line);
  border-radius:3px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  overflow:hidden;
}
.news-box1{
  background:var(--bg-soft);
  border-right:1px solid var(--line);
  aspect-ratio:16/9;
  overflow:hidden;
}
.news-box2{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-col1{
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.news-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:12px;
}
.news-title1{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
  text-wrap:pretty;
}
.news-eyebrow2{
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:18px;
}
.news-sp1{ padding:24px 0 80px }
.news-row1{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.news-grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:28px;
}
.news-box3{
  aspect-ratio:16/9;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.news-col2{
  padding:22px 24px 24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.news-row2{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.news-eyebrow3{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);
  background:var(--brand-soft);
  border:1px solid var(--brand-soft);
  border-radius:2px;
  padding:3px 8px;
}
.news-head1{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 8px;
  text-wrap:pretty;
}
.news-txt1{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin:0 0 16px;
}
.news-row3{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.news-sp2{
  padding:48px 0;
  font-size:15px;
  color:var(--slate);
}
.news-sp3{
  margin:28px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--slate-2);
  max-width:72ch;
}
.news-sec1{
  padding:64px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.news-title2{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 20px;
}
.news-grid3{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg);
  padding:28px 26px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  align-items:start;
}
.news-head2{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 12px;
  text-wrap:pretty;
}
.news-col3{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.news-txt2{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 32px;
  max-width:62ch;
}
.news-grid4{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:32px 28px;
}
.news-col4{
  margin:0;
  display:flex;
  flex-direction:column;
}
.news-card1{
  aspect-ratio:16/9;
  background:var(--bg-soft);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color 180ms ease;
}
.news-sp4{ margin-top:14px }
.news-head3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 8px;
  text-wrap:pretty;
}
.news-txt3{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin:0 0 12px;
}
.news-row4{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.news-card2{
  font-size:12px;
  color:var(--slate-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 8px;
}
.news-grid5{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
}
.news-title3{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
}
.news-txt4{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 18px;
  max-width:48ch;
}
.news-txt5{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 8px;
}
.news-txt6{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 18px;
}

/* Haber karti: arsiv kayitlari soluk zeminde. */
.news-card{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  transition:box-shadow 200ms ease;
}
.news-card.is-soft{ background:var(--bg-soft) }

/* ---------------------------------------------------------------------
   company/sustainability   (views/pages/company/sustainability.php)
   --------------------------------------------------------------------- */

.sustainability-row1{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.sustainability-eyebrow1{
  flex:0 0 132px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  line-height:1.5;
}
.sustainability-box1{
  flex:1 1 180px;
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.sustainability-box2{
  flex:1 1 280px;
  background:var(--bg);
  padding:26px 24px;
}
.sustainability-sec1{
  padding:56px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.sustainability-title1{
  font-family:var(--font-display);
  font-size:clamp(20px,2vw,26px);
  font-weight:700;
  line-height:1.25;
  margin:0 0 12px;
}
.sustainability-txt1{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:72ch;
}

/* ---------------------------------------------------------------------
   contact/offices   (views/pages/contact/offices.php)

   Sayfa kardes iletisim sayfalariyla ayni acik hero dilini kullanir.
   Ofisler iki sutunlu kartlarda durur: solda kunye, sagda koyu "konum
   levhasi". Levha harici harita gomulmeden (gizlilik ve CSP) sitenin koyu
   bant dokusunu kullanir: ince izgara, marka renginde bir isaret ve altta
   gercek harita baglantilari.
   --------------------------------------------------------------------- */

/* Hero'nun sagindaki kisa ofis kunyesi; ayni zamanda ic baglanti. */
.off-jump{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:center;
  max-width:420px;
}
.off-jump__item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  transition:border-color 150ms ease, color 150ms ease;
}
.off-jump__item:hover{ border-color:var(--brand); color:var(--brand) }
.off-jump__city{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
}
.off-jump__tag{
  align-self:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
}
.off-jump__district{
  grid-column:1 / -1;
  font-size:13px;
  line-height:1.5;
  color:var(--slate);
}

.off-sec{ padding:8px 0 var(--section-y) }
.off-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* Kart: solda kunye, sagda konum levhasi. */
.off-card{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  scroll-margin-top:96px;
}
.off-card__body{
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.off-tag{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:12px;
}
.off-tag--hq{
  border-color:var(--brand);
  background:var(--brand-soft);
  color:var(--brand);
}
.off-city{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 10px;
}
.off-role{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:52ch;
}

/* Kunye: her satir ince cizgiyle ayrilir, etiket solda sabit genislikte. */
.off-facts{ margin:0 }
.off-fact{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:4px 18px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.off-fact:last-child{ padding-bottom:0 }
.off-fact__k{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  padding-top:2px;
}
.off-fact__v{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
}
.off-fact__link{ color:var(--ink); font-weight:600 }
.off-fact__link:hover{ color:var(--brand) }

/* Konum levhasi. */
.off-plate{
  position:relative;
  background:var(--dark);
  min-height:320px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:18px;
  overflow:hidden;
}
/* Zemin: yerel, dekoratif sehir plani (assets/images/other/map-plate.svg).
   Harici harita gomulmez — CSP img-src yalnizca kendi kokenimize izin verir
   ve iframe gizlilik acisindan istenmez. Cizim dusuk opaklikta durur, uzerine
   ince izgara binerek levha hissini verir. */
.off-plate__map{
  position:absolute;
  inset:0;
  background:url("../images/other/map-plate.svg") no-repeat;
  background-size:cover;
  opacity:.26;
}
/* Iki levhada ayni kesit gorunmesin. */
.off-plate--0 .off-plate__map{ background-position:34% 46% }
.off-plate--1 .off-plate__map{ background-position:70% 26%; background-size:150% }
/* Isaret: marka renginde nokta, cevresinde halka ve yumusak parlama. */
.off-plate__pin{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 6px rgba(var(--brand-rgb),.22), 0 0 34px 12px rgba(var(--brand-rgb),.28);
}
.off-plate__pin::after{
  content:"";
  position:absolute;
  inset:-16px;
  border:1px solid rgba(var(--brand-rgb),.45);
  border-radius:50%;
}
/* Iki levha ayni gorunmesin diye isaret konumu degisir. */
.off-plate--0 .off-plate__pin{ top:34%; left:38% }
.off-plate--1 .off-plate__pin{ top:29%; left:57% }
.off-plate__label{ position:relative }
.off-plate__eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:6px;
}
.off-plate__city{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  color:#fff;
  line-height:1.2;
}
.off-plate__district{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  margin-top:2px;
}
.off-plate__actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.off-btn{
  padding:11px 22px;
  border-radius:var(--radius-btn);
  background:var(--brand);
  color:#fff;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.off-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
}

@media (max-width: 899px){
  .off-card{ grid-template-columns:1fr }
  .off-card__body{ padding:26px 22px }
  .off-plate{ min-height:260px }
  .off-fact{ grid-template-columns:1fr; gap:2px }
}

/* ---------------------------------------------------------------------
   customers   (views/pages/customers.php)
   --------------------------------------------------------------------- */

.customers-txt1{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:58ch;
}
.customers-sp1{ padding:64px 0 80px }
.customers-row1{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.customers-title1{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 6px;
}
.customers-txt2{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  margin:0;
  max-width:62ch;
}
.customers-sp2{
  display:inline-block;
  margin-top:10px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  color:var(--brand);
}
.customers-grid1{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.customers-col1{
  position:relative;
  margin:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 14px;
  min-width:0;
  overflow:hidden;
}
.customers-box1{
  position:relative;
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-2);
  text-align:center;
  max-height:38px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.customers-card1{
  border:1px solid var(--line);
  padding:40px 24px;
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
}
.customers-box2{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding:80px 0;
}
.customers-title2{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,34px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 12px;
  max-width:24ch;
}
.customers-grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.customers-col2{
  background:var(--bg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.customers-row2{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
  min-height:50px;
}
.customers-txt3{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  min-height:74px;
}
.customers-box3{
  display:inline-block;
  align-self:flex-start;
  margin-top:auto;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.customers-row3{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ---------------------------------------------------------------------
   home   (views/pages/home.php)
   --------------------------------------------------------------------- */

.home-sp1{ padding:18px 0 8px }
.home-card1{
  position:relative;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
  /* Ray fare ya da parmakla suruklenebilir; imlec bunu belli eder
     (surukleme sirasinda assets/js/ui.js grabbing'e cevirir). */
  cursor:grab;
}
.home-abs1{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  gap:4px;
  justify-content:flex-end;
  padding:0 17px;
}
.home-box1{
  border:0;
  padding:10px 3px;
  margin:0;
  cursor:pointer;
  background:none;
  display:block;
  line-height:0;
}
.home-box2{
  border-top:1px solid var(--line);
  padding:88px 0;
  background:var(--bg);
}
.home-row1{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.home-title1{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
  /* Baslik 25 karakter; 20ch siniri onu ikinci satira dusuruyordu. */
  max-width:28ch;
}
.home-txt1{
  font-size:16px;
  color:var(--slate);
  margin:0 0 44px;
  max-width:72ch;
}
.home-row2{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:stretch;
}
.home-head1{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 8px;
}
.home-txt2{
  font-size:15px;
  color:var(--slate);
  margin:0 0 20px;
  line-height:1.6;
}
.home-col1{
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.home-box3{
  position:relative;
  padding:88px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  /* Iki katman: ustte slider gorsellerinden gelen daire tarlalari (saydam
     zeminli), altta kare doku. Onceki desendeki ucgenler kaldirildi.
     Renkler bandin gri-lavanta paletinde tutuldu. */
  background-color:var(--slider-bg);
  background-image:url('../images/other/dots-pattern.svg'), url('../images/other/grid-pattern.svg');
  background-position:center, center;
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat;
}
.home-wrap1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}
.home-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slider-mid);
  margin-bottom:10px;
}
.home-title2{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 40px;
}
.home-box4{
  max-width:1120px;
  display:block;
  overflow:visible;
}
/* Sema kutulari: cerceve stroke="currentColor" ile bu renkten beslenir.
   Ustune gelince base katmanindaki a:hover devreye girip cerceveyi marka
   rengine cevirir; bu yuzden BURAYA a.home-box5 varyanti YAZILMAZ. */
.home-box5{ color:var(--box-line); cursor:pointer }
.home-box6{ border-top:1px solid var(--line); padding:88px 0 }
.home-row3{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.home-title3{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}
.home-grid1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.home-col2{
  background:var(--bg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
}
.home-head2{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 6px;
}
.home-txt3{
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  margin:0 0 20px;
  min-height:48px;
}
.home-col3{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.home-row4{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.home-txt4{
  font-size:14px;
  color:var(--slate);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.home-box7{ background:var(--dark-2); position:relative }
.home-abs2{
  position:absolute;
  inset:0;
  opacity:.06;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:16px 16px;
}
.home-row5{
  max-width:1280px;
  margin:0 auto;
  padding:72px 24px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:center;
  justify-content:space-between;
}
.home-row6{
  flex:1 1 460px;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:40px 48px;
}
.home-box8{ flex:1 1 160px; min-width:0 }
.home-head3{
  font-family:var(--font-display);
  font-size:40px;
  font-weight:700;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.home-box9{
  flex:0 1 300px;
  width:100%;
  max-width:300px;
  height:auto;
  display:block;
  filter:invert(1) hue-rotate(180deg);
  opacity:.9;
}
.home-sec1{ padding:72px 0 0; border-top:1px solid var(--line) }
.home-grid2{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  overflow:hidden;
}
.home-row7{
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 20px;
  min-width:0;
}
.home-sp2{ padding:56px 0 0 }
.home-grid3{
  border-top:1px solid var(--line);
  padding-top:44px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px;
}
.home-title4{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 12px;
}
.home-grid4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px 32px;
  align-content:start;
}
.home-txt5{
  font-size:15px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:9px;
}
.home-sp3{ padding:72px 0 88px }
.home-row8{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.home-grid5{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:48px;
  align-items:center;
}
.home-row9{
  aspect-ratio:4/3;
  background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
}
.home-box10{
  max-width:200px;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}
.home-title5{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,34px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 20px;
  text-wrap:pretty;
}
.home-row10{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:36px;
  border-top:1px solid var(--line);
  padding-top:20px;
  flex-wrap:wrap;
}
.home-row11{
  display:flex;
  gap:8px;
  flex:1;
  flex-wrap:wrap;
}
.home-row12{ display:flex; gap:8px }
.home-card2{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  background:none;
  cursor:pointer;
  border-radius:2px;
  color:var(--ink);
}
.home-grid6{
  background:var(--bg);
  border:1px solid var(--line);
  border-top:0;
  padding:36px 32px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
}
.home-txt6{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:60ch;
}
.home-col4{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-row13{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  color:var(--ink);
}
.home-col5{
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:box-shadow 200ms ease;
}
.home-head4{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
}
.home-box11{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding:88px 0;
}
.home-col6{
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ----------------------------------------------------------------------
   Urun ailesi kartlari — ust kenardan asagi solan ton.
   Ton, veri dosyasindaki "tone" degeriyle secilir.
   ---------------------------------------------------------------------- */
.home-fam{
  flex:1 1 280px;
  min-width:0;
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px 24px;
  box-shadow:var(--shadow-1);
}
.home-fam--brand{
  background:linear-gradient(0deg,color-mix(in srgb, var(--brand) 14%, transparent) 0%,color-mix(in srgb, var(--brand) 4%, transparent) 38%,transparent 62%),var(--bg);
}
.home-fam--slate{
  background:linear-gradient(0deg,color-mix(in srgb, var(--slate) 14%, transparent) 0%,color-mix(in srgb, var(--slate) 4%, transparent) 38%,transparent 62%),var(--bg);
}
.home-fam--gold{
  background:linear-gradient(0deg,color-mix(in srgb, var(--gold) 14%, transparent) 0%,color-mix(in srgb, var(--gold) 4%, transparent) 38%,transparent 62%),var(--bg);
}

/* Referans hikayesi kucuk basliklari: secili olan alttan marka cizgili. */
.home-thumb{
  background:none;
  cursor:pointer;
  padding:6px 12px;
  font-size:13px;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--slate);
}
.home-thumb.is-current{
  border-bottom:2px solid var(--brand);
  color:var(--ink);
}

/* ----------------------------------------------------------------------
   "Guven" sekmeleri. Yatay serit oldugu icin chrome.css > .feat-tab'in
   dikey gorunumu (sol kenarlik, zemin) burada bilerek eziliyor; bu yuzden
   secici .feat-tab ile birlestirilmis durumda.
   ---------------------------------------------------------------------- */
.feat-tab.home-tab{
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:14px 22px 15px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  color:var(--slate);
}
.feat-tab.home-tab.is-on{ color:var(--ink) }
.home-tab__rule{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--brand);
  opacity:0;
}
.home-tab.is-on .home-tab__rule{ opacity:1 }

/* ---------------------------------------------------------------------
   partners   (views/pages/partners.php)
   --------------------------------------------------------------------- */

/* Hero: metin sutunu solda, gorsel sagda; dar ekranda alt alta gecer. */
.partners-hero{
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
  align-items:center;
}
.partners-hero__col{ flex:1 1 520px; min-width:300px }
.partners-hero__art{
  flex:0 1 420px;
  min-width:220px;
  display:flex;
  justify-content:center;
}
.partners-hero__img{
  width:100%;
  max-width:400px;
  height:auto;
  display:block;
  opacity:.8;
}
.partners-title1{
  font-family:var(--font-display);
  font-size:clamp(32px,4.2vw,50px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 18px;
  max-width:20ch;
}
.partners-txt1{
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0 0 34px;
  max-width:62ch;
  text-wrap:pretty;
}
.partners-title2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.partners-row1{
  display:flex;
  flex-wrap:wrap;
  gap:24px 48px;
  margin-bottom:48px;
}
.partners-col1{
  flex:1 1 250px;
  background:var(--bg);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.partners-head1{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent);
}
.partners-txt2{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 52px;
  max-width:72ch;
  text-wrap:pretty;
}
.partners-row2{
  display:flex;
  flex-wrap:wrap;
  gap:32px 24px;
}
.partners-txt3{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin:0;
  max-width:30ch;
}
.partners-txt4{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:44px 0 0;
  max-width:72ch;
  padding-left:16px;
  border-left:2px solid var(--line);
}
.partners-txt5{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 40px;
  max-width:72ch;
}
.partners-row3, a.partners-row3{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 28px;
  padding:24px 4px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.partners-head2{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  flex:0 1 220px;
}
.partners-txt6{
  font-size:18px;
  color:var(--brand);
  margin-left:auto;
}
.partners-row4{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:48px;
}
.partners-box1{ flex:1 1 340px; max-width:52ch }
.partners-title3{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 18px;
}
.partners-txt7{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 16px;
  text-wrap:pretty;
}
.partners-txt8{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 26px;
}
.partners-btn1{
  display:inline-block;
  padding:13px 26px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.partners-box2{ flex:1 1 420px; min-width:0 }
.partners-head3{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:5px;
}
.partners-txt9{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 40px;
  max-width:72ch;
  text-wrap:pretty;
}
.partners-box3{
  flex:1 1 340px;
  background:var(--bg);
  padding:26px 24px;
}
.partners-row5{
  display:flex;
  flex-wrap:wrap;
  gap:20px 32px;
  align-items:center;
  margin-top:32px;
}
.partners-box4{
  flex:1 1 380px;
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:60ch;
}
.partners-card1, a.partners-card1{
  display:inline-block;
  padding:13px 26px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.partners-txt10{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 24px;
  text-wrap:pretty;
}

/* ----------------------------------------------------------------------
   Kilometre taslari seridi: son (guncel) adim marka rengiyle vurgulanir.
   ---------------------------------------------------------------------- */
.partners-mile{ flex:1 1 190px; position:relative; border-top:2px solid var(--line); padding-top:26px }
.partners-mile__dot{
  position:absolute;
  top:-7px;
  left:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--slate-2);
}
.partners-mile__num{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px);
  font-weight:700;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-bottom:12px;
}
.partners-mile.is-on{ border-top-color:var(--brand) }
.partners-mile.is-on .partners-mile__dot{ background:var(--brand) }
.partners-mile.is-on .partners-mile__num{ color:var(--brand) }

/* Entegrasyon alanlari listesi: ilk satirin ust cizgisi gorunmez. */
.partners-area{ padding:18px 22px; border-top:1px solid var(--line) }
.partners-area:first-child{ border-top-color:transparent }

/* ---------------------------------------------------------------------
   partners/become-a-partner   (views/pages/partners/become-a-partner.php)
   --------------------------------------------------------------------- */

.become-a-partner-row1{
  display:flex;
  flex-wrap:wrap;
  gap:24px 48px;
  align-items:center;
  margin-bottom:44px;
}
.become-a-partner-grid1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:48px;
  align-items:start;
}
.become-a-partner-card1{
  width:100%;
  height:46px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-body);
  font-size:15px;
  background:var(--bg);
}
.become-a-partner-inline1{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:14px;
  cursor:pointer;
}
.become-a-partner-box1{ accent-color:var(--brand) }
.become-a-partner-card2{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-body);
  font-size:15px;
  resize:vertical;
}
.become-a-partner-row2{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  color:var(--slate);
  line-height:1.55;
  cursor:pointer;
}
.become-a-partner-sp1{ margin-top:4px; accent-color:var(--brand) }
.become-a-partner-grid2{ display:grid; gap:24px }
.become-a-partner-card3{
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
  background:var(--bg-soft);
}
.become-a-partner-card4{
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
}
.become-a-partner-head1{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  margin-bottom:12px;
}

/* ---------------------------------------------------------------------
   partners/co-marketing   (views/pages/partners/co-marketing.php)
   --------------------------------------------------------------------- */

.co-marketing-row1{
  max-width:1280px;
  margin:0 auto;
  padding:92px 24px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
  align-items:center;
}
.co-marketing-box1{ flex:1 1 520px; min-width:300px }
.co-marketing-row2{
  flex:0 1 420px;
  min-width:220px;
  display:flex;
  justify-content:center;
}
.co-marketing-box2{
  width:100%;
  max-width:400px;
  height:auto;
  display:block;
}
.co-marketing-eyebrow1{
  text-align:left;
  padding:13px 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--line);
}
.co-marketing-head1{
  text-align:left;
  padding:18px;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  vertical-align:top;
  font-family:var(--font-display);
}
.co-marketing-sp1{
  padding:18px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
  vertical-align:top;
}
.co-marketing-sp2{
  padding:18px;
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  vertical-align:top;
}
.co-marketing-col1{
  flex:1 1 280px;
  background:var(--bg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
}
.co-marketing-row3{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
}
.co-marketing-box3{ flex:1 1 130px }
.co-marketing-title1{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 20px;
}
.co-marketing-sp3{ padding:20px 0; border-bottom:1px solid var(--line) }
.co-marketing-head2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
}
.co-marketing-txt1{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 10px;
}
.co-marketing-txt2, a.co-marketing-txt2{
  font-size:15px;
  font-weight:500;
  color:var(--brand);
}

/* ---------------------------------------------------------------------
   partners/technology-partners   (views/pages/partners/technology-partners.php)
   --------------------------------------------------------------------- */

.technology-partners-title1{
  font-family:var(--font-display);
  font-size:clamp(17px,1.7vw,21px);
  font-weight:700;
  line-height:1.25;
  color:#fff;
}
.technology-partners-txt1{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 40px;
  max-width:78ch;
  text-wrap:pretty;
}
.technology-partners-head1{
  display:inline-block;
  padding:11px 18px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg-soft);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}
.technology-partners-col1{
  flex:1 1 250px;
  background:var(--bg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
}
.technology-partners-sp1{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.technology-partners-card1{
  flex:1 1 340px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
}
.technology-partners-sp2{
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  background:var(--bg-soft);
}
.technology-partners-head2{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
}
.technology-partners-row1{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px 24px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.technology-partners-title2{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 40px;
  max-width:28ch;
}
.technology-partners-row2{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 28px;
  padding:22px 4px;
  border-bottom:1px solid var(--line);
}
.technology-partners-head3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.25;
  flex:0 1 250px;
}
.technology-partners-head4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin:44px 0 18px;
}
.technology-partners-card2, a.technology-partners-card2{
  flex:1 1 260px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:22px 24px;
  display:block;
  color:var(--ink);
}

/* Iki taraf karti: her kartin kendi vurgu rengi var. */
.tp-key{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.tp-key--accent{ color:var(--accent) }
.tp-key--brand{ color:var(--brand) }
.tp-dot{ width:6px; height:6px; margin-top:9px; flex-shrink:0 }
.tp-dot--accent{ background:var(--accent) }
.tp-dot--brand{ background:var(--brand) }

/* ---------------------------------------------------------------------
   products   (views/pages/products.php)
   --------------------------------------------------------------------- */

.products-grid1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}
.products-col1{
  border:1px solid var(--line);
  border-radius:3px;
  display:flex;
  flex-direction:column;
  transition:box-shadow 200ms ease;
}
.products-row1{
  height:170px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--line) 100%);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.products-head1{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  line-height:1.25;
}
.products-sp1{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.products-col2{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:28px;
}
.products-card1{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px;
}
.products-row2{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
}
.products-head2{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  margin:0;
}
.products-row3{
  display:flex;
  gap:16px;
  align-items:baseline;
}
.products-txt1{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.products-txt2{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 18px;
  max-width:78ch;
}
.products-col3{
  flex:1 1 240px;
  border:1px solid var(--line);
  border-radius:2px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:box-shadow 160ms ease;
}
.products-head3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.products-txt3{
  font-size:13px;
  line-height:1.5;
  color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.products-row4{
  margin-top:24px;
  border:1px solid var(--warn);
  border-left-width:3px;
  border-radius:2px;
  background:var(--bg);
  padding:16px 20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.products-box1{ flex-shrink:0; margin-top:1px }
.products-sp2{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
}
.products-box2{ font-weight:600 }
.products-card2{
  margin-top:36px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:28px 26px;
}
.products-grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px 32px;
}
.products-row5{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}
.products-row6{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
}

/* ----------------------------------------------------------------------
   Urun ailesi sekmeleri. Yatay serit oldugu icin chrome.css > .feat-tab'in
   dikey gorunumu bilerek eziliyor (secici .feat-tab ile birlesik).
   Aktif sekmeyi assets/js/ui.js .is-on ile isaretler.
   ---------------------------------------------------------------------- */
.feat-tab.products-tab{
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:14px 22px 15px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  color:var(--slate);
}
.feat-tab.products-tab.is-on{ color:var(--brand) }
.products-tab__rule{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--brand);
  opacity:0;
}
.products-tab.is-on .products-tab__rule{ opacity:1 }

/* ---------------------------------------------------------------------
   products/access-point   (views/pages/products/access-point.php)
   --------------------------------------------------------------------- */

.access-point-sp1{ padding:96px 0 104px }
.access-point-row1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:center;
}
.access-point-card1{
  width:100%;
  max-width:900px;
  border:1px solid var(--line);
  border-top:2px solid var(--ink);
  border-radius:3px;
  background:var(--bg);
  padding:56px 52px;
}
.access-point-box1{ overflow-x:auto; text-align:center }
.access-point-sp2{
  margin:0;
  display:inline-block;
  text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(9px,1.5vw,17px);
  line-height:1.05;
  color:var(--ink);
  white-space:pre;
}
.access-point-txt1{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:32px auto 0;
  max-width:56ch;
  text-align:center;
}
.access-point-sp3{ margin-top:28px; text-align:center }
.access-point-card2, a.access-point-card2{
  display:inline-block;
  padding:12px 26px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}

/* ---------------------------------------------------------------------
   products/firewall   (views/pages/products/firewall.php)
   --------------------------------------------------------------------- */

.firewall-sp1{ padding:88px 0 40px }
.firewall-txt1{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:66ch;
  text-wrap:pretty;
}
.firewall-row1{
  flex:0 1 320px;
  min-width:220px;
  display:flex;
  justify-content:center;
}
.firewall-box1{
  width:100%;
  max-width:320px;
  height:auto;
  display:block;
}
.firewall-box2{
  flex:1 1 240px;
  background:var(--bg);
  padding:26px 24px;
}
.firewall-head1{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  margin:16px 0 10px;
  line-height:1.3;
}
.firewall-title1{
  font-family:var(--font-display);
  font-size:clamp(20px,2vw,26px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.firewall-txt2{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin:10px 0 0;
}
.firewall-txt3{
  font-size:14px;
  line-height:1.6;
  color:var(--slate-2);
  margin:18px 0 0;
  max-width:76ch;
}
.firewall-sp2{ padding:48px 0 88px }
.firewall-col1{
  flex:1 1 300px;
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:3px;
  background:var(--bg-soft);
  display:flex;
  flex-direction:column;
}
.firewall-row2{
  position:relative;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:22px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:118px;
  overflow:hidden;
}
.firewall-box3{
  position:relative;
  max-width:80%;
  max-height:80px;
  width:auto;
  height:auto;
  display:block;
}
.firewall-col2{
  padding:24px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.firewall-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
.firewall-head2{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 12px;
}
.firewall-txt4{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 14px;
}
.firewall-txt5{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 18px;
}
.firewall-card1, a.firewall-card1{
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg);
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.firewall-row3{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
}
.firewall-box4{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.firewall-sp3{
  padding:15px 16px;
  font-size:14px;
  white-space:nowrap;
}
.firewall-inline1{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.firewall-inline2{
  display:inline-flex;
  align-items:center;
  min-width:70px;
}
.firewall-row4{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  align-items:flex-start;
  margin-bottom:40px;
}
.firewall-title2{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
  max-width:22ch;
}
.firewall-card2{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
}
.firewall-row5{
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
}
.firewall-head3{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.firewall-row6{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.firewall-txt6{
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
  flex:1 1 160px;
}
.firewall-sp4{
  margin:0;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:var(--ink);
  text-align:right;
}
.firewall-txt7{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 32px;
  max-width:76ch;
}
.firewall-row7{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  display:flex;
  flex-wrap:wrap;
  overflow:hidden;
}
.firewall-col3{
  flex:1 1 280px;
  min-width:240px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  background:var(--bg-soft);
  padding:8px 0;
}
.firewall-box5{
  flex:2 1 560px;
  min-width:280px;
  padding:28px 28px 32px;
}
.firewall-head4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 12px;
}
/* Modul ici alt baslik (ornek: Web Filtreleme > HTTPS Filtreleme).
   Ad .firewall-head5 OLAMAZ: o sinif "Neden XLOG" basligina ait ve dosyada
   daha sonra tanimlandigi icin buradaki kurallari ezerdi. */
.firewall-subhead{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  margin:22px 0 10px;
}

.firewall-txt8{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 22px;
  max-width:80ch;
}
.firewall-col4{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.firewall-row8{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  max-width:84ch;
}
.firewall-box6{ flex:1 1 300px; max-width:420px }
.firewall-head5{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.firewall-txt9{ font-size:clamp(46px,5.4vw,74px); margin-bottom:16px }
.firewall-txt10{ font-size:clamp(30px,3.4vw,46px); margin-bottom:16px }
.firewall-txt11{ font-size:clamp(20px,2.1vw,28px); margin-bottom:16px }
.firewall-txt12{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:70ch;
}

/* Segment filtresi: renkleri chrome.css > .seg-filter[.is-on] verir. */
.seg-chip{
  padding:9px 16px;
  border-radius:2px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

/* ---------------------------------------------------------------------
   products/hotspot   (views/pages/products/hotspot.php)
   --------------------------------------------------------------------- */

.hotspot-row1{
  flex:1 1 380px;
  min-width:280px;
  display:flex;
  justify-content:center;
}
.hotspot-box1{
  width:100%;
  max-width:560px;
  height:auto;
  display:block;
}
.hotspot-box2{ flex:1 1 auto; padding-bottom:34px }
.hotspot-sp1{ margin-top:56px }
.hotspot-title1{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 14px;
  max-width:26ch;
}
.hotspot-row2{
  flex:1 1 300px;
  background:var(--bg);
  padding:22px 24px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.hotspot-eyebrow1{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:6px;
}
.hotspot-head1{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 6px;
}
.hotspot-title2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 18px;
  max-width:20ch;
}
.hotspot-card1{
  flex:1 1 300px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
}
.hotspot-txt1{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
  border-top:1px solid var(--line);
  padding-top:12px;
}
.hotspot-box3{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.hotspot-sp2{
  padding:15px 16px;
  font-size:15px;
  color:var(--slate-2);
  white-space:nowrap;
}
.hotspot-sp3{ padding:15px 16px; white-space:nowrap }
.hotspot-sp4{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

/* ---------------------------------------------------------------------
   products/mini-tunnel   (views/pages/products/mini-tunnel.php)
   --------------------------------------------------------------------- */

.mini-tunnel-title1{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 20px;
  max-width:24ch;
}
.mini-tunnel-row1{
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
}
.mini-tunnel-row2{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:44px;
}
.mini-tunnel-box1{
  flex:1 1 260px;
  background:var(--bg);
  padding:26px 24px;
}
.mini-tunnel-txt1{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 36px;
  max-width:74ch;
}
.mini-tunnel-card1{
  flex:1 1 380px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px 26px;
}
.mini-tunnel-head1{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 10px;
}
.mini-tunnel-txt2{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 20px;
}
.mini-tunnel-sp1{ margin:0 0 24px; border-top:1px solid var(--line) }
.mini-tunnel-row3{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.mini-tunnel-sp2{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  text-align:right;
}
.mini-tunnel-btn1{
  display:inline-block;
  padding:11px 24px;
  background:var(--brand);
  color:#fff;
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.mini-tunnel-head2{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:40px 0 16px;
}
.mini-tunnel-box2{
  flex:1 1 200px;
  background:var(--bg);
  padding:18px 20px;
}
.mini-tunnel-txt3{
  font-size:13px;
  color:var(--slate);
  margin-bottom:6px;
}
.mini-tunnel-txt4{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.mini-tunnel-card2{
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:3px;
  background:var(--bg);
  padding:24px 26px;
  margin-top:32px;
}
.mini-tunnel-txt5{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:80ch;
}
.mini-tunnel-txt6{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 44px;
  max-width:78ch;
  text-wrap:pretty;
}
.mini-tunnel-row4{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:32px;
}
.mini-tunnel-box3{
  flex:1 1 240px;
  background:var(--bg);
  padding:24px 22px;
}
.mini-tunnel-head3{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--brand);
  margin-bottom:10px;
}
.mini-tunnel-txt7{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 40px;
  max-width:76ch;
}
.mini-tunnel-card3{
  flex:1 1 380px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
}
.mini-tunnel-head4{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--brand);
  margin-bottom:10px;
}
.mini-tunnel-head5{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 14px;
}
.mini-tunnel-box4{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 18px;
}
.mini-tunnel-txt8{
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 12px;
}
.mini-tunnel-txt9{
  font-size:14.5px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
}
.mini-tunnel-card4{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
  padding:28px 26px;
  margin-top:32px;
}
.mini-tunnel-txt10{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 20px;
  max-width:74ch;
}
.mini-tunnel-card5{
  display:inline-block;
  padding:9px 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:15px;
  line-height:1.4;
  color:var(--ink-2);
}
.mini-tunnel-txt11{
  font-size:14px;
  line-height:1.6;
  color:var(--slate-2);
  margin:16px 0 0;
}

/* ---------------------------------------------------------------------
   products/model   (views/pages/products/model.php)
   --------------------------------------------------------------------- */

.model-grid1{
  max-width:1280px;
  margin:0 auto;
  padding:72px 24px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:48px;
  align-items:center;
}
.model-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:16px;
}
.model-title1{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 16px;
}
.model-txt1{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0 0 28px;
  max-width:52ch;
}
.model-grid2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
}
.model-box1{ background:var(--dark); padding:22px 20px }
.model-head1{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  line-height:1.1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.model-eyebrow2{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-top:8px;
}
.model-sp1{ padding:72px 0 56px }
.model-row1{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  align-items:flex-start;
}
.model-txt2{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 14px;
  max-width:62ch;
}
.model-txt3{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:62ch;
}
.model-row2{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 22px;
  margin-top:24px;
  font-size:14px;
  color:var(--slate-2);
}
.model-txt4{ font-size:14px; font-weight:600 }
.model-col1{
  flex:1 1 340px;
  display:flex;
  flex-direction:column;
}
.model-card1{
  border:1px solid var(--line);
  background:var(--bg-soft);
  padding:20px 24px 22px;
}
.model-row3{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.model-txt5{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.model-row4{
  position:relative;
  margin-top:24px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:140px;
  overflow:hidden;
}
.model-box2{
  position:relative;
  max-width:80%;
  max-height:100px;
  width:auto;
  height:auto;
  display:block;
}
.model-txt6{
  font-size:13px;
  line-height:1.6;
  color:var(--slate-2);
  margin:10px 0 0;
}
.model-sp2{
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.model-title2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 28px;
}
.model-row5{
  margin:0 0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:0 48px;
  border-top:1px solid var(--line);
}
.model-row6{
  flex:1 1 420px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.model-txt7{
  font-size:15px;
  color:var(--slate);
  margin:0;
}
.model-txt8{
  font-size:13px;
  line-height:1.6;
  color:var(--slate-2);
  margin:0;
  max-width:72ch;
}
.model-sec1{
  padding:72px 0;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.model-row7{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.model-title3{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.2;
  margin:0;
}
.model-grid3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.model-box3{
  background:var(--bg);
  padding:22px 20px;
  display:block;
  transition:background 150ms ease;
}
.model-row8{
  max-width:1280px;
  margin:0 auto;
  padding:88px 24px;
  position:relative;
  min-height:300px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:40px;
}
.model-sp3{ padding:72px 0 64px }
.model-txt9{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 16px;
  max-width:58ch;
}
.model-txt10{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0;
  max-width:58ch;
}
.model-title4{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 16px;
  max-width:26ch;
}
.model-card2{
  display:inline-block;
  padding:8px 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:14px;
  color:var(--ink-2);
}
.model-sp4{ margin-top:26px }
.model-txt11{
  font-size:13px;
  line-height:1.6;
  color:var(--slate-2);
  margin:0 0 20px;
  max-width:72ch;
}
.model-row9{
  max-width:1280px;
  margin:0 auto;
  padding:72px 24px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:44px;
}
.model-box4{
  flex:1 1 460px;
  min-width:280px;
  max-width:620px;
}
.model-title5{
  font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,46px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 14px;
}
.model-txt12{
  font-size:17px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  margin:0 0 28px;
  max-width:54ch;
}
.model-box5{ flex:1 1 300px; min-width:260px }
.model-row10{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--dark-line-2);
  border:1px solid var(--dark-line-2);
}
.model-box6{
  flex:1 1 140px;
  background:var(--dark);
  padding:20px 18px;
}
.model-eyebrow3{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:8px;
}
.model-head2{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:#fff;
}
.model-sp5{ padding:80px 0 64px }
.model-title6{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 20px;
  max-width:26ch;
}
.model-row11{
  display:flex;
  flex-wrap:wrap;
  gap:28px 48px;
}
.model-box7{
  flex:1 1 380px;
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0;
  max-width:58ch;
  text-wrap:pretty;
}
.model-sp6{ margin-top:28px }
.model-row12{
  position:relative;
  margin-top:36px;
  max-width:520px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  overflow:hidden;
}
.model-box8{
  position:relative;
  max-width:80%;
  max-height:120px;
  width:auto;
  height:auto;
  display:block;
}
.model-row13{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid var(--line);
}
.model-box9{
  flex:1 1 220px;
  font-size:15px;
  color:var(--slate);
}
.model-box10{
  flex:1 1 220px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.model-txt13{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 32px;
  max-width:74ch;
}
.model-box11{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.model-eyebrow4{
  text-align:left;
  padding:13px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.model-box12{
  text-align:left;
  padding:16px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.model-sp7{
  padding:16px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.model-row14{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:28px;
}
.model-row15{
  max-width:1280px;
  margin:0 auto;
  padding:80px 24px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:40px;
}
.model-title7{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 12px;
}
.model-title8{
  font-family:var(--font-display);
  font-size:clamp(17px,1.9vw,22px);
  font-weight:600;
  color:rgba(255,255,255,.92);
  margin:0 0 18px;
}
.model-txt14{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0 0 28px;
  max-width:56ch;
}
.model-row16{
  display:flex;
  flex-wrap:wrap;
  gap:20px 36px;
  margin:0 0 32px;
}
.model-eyebrow5{
  margin:0 0 4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate-2);
}
.model-sp8{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.model-row17{
  flex:1 1 380px;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.model-box13{
  width:100%;
  max-width:420px;
  height:auto;
}
.model-title9{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 24px;
}
.model-card3{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  border:1px solid var(--line);
}
.model-box14{
  text-align:left;
  padding:15px 16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  color:var(--slate);
}
.model-sp9{
  padding:15px 16px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.model-txt15{
  font-size:14px;
  line-height:1.6;
  color:var(--slate-2);
  margin:20px 0 0;
  max-width:72ch;
}
.model-row18{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:16px 32px;
  max-width:900px;
}
.model-row19{
  flex:1 1 220px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.model-box15{ color:var(--accent); flex-shrink:0 }
.model-txt16{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:28px 0 0;
  max-width:72ch;
}

/* ----------------------------------------------------------------------
   Teknik ozellik degeri. Firewall'da desteklenen satirlar kalin (.is-weak
   digerleri), hotspot'ta desteklenmeyen satirlar soluk (.is-na).
   ---------------------------------------------------------------------- */
.model-spec-val{
  font-size:15px;
  color:var(--ink);
  margin:0;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.model-spec-val.is-weak{ font-weight:400 }
.model-spec-val.is-na{ color:var(--slate-2); font-weight:400 }

/* Kardes model kartinin adi; bulunulan model marka renginde. */
.model-sib__name{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.model-sib__name.is-current{ color:var(--brand) }

/* ---------------------------------------------------------------------
   products/porsuk   (views/pages/products/porsuk.php)
   --------------------------------------------------------------------- */

.porsuk-txt1{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:66ch;
  text-wrap:pretty;
}
.porsuk-box1{ flex:1 1 280px; max-width:420px }
.porsuk-title1{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:700;
  line-height:1.1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.porsuk-title2{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 44px;
  max-width:24ch;
}
.porsuk-row1{
  display:flex;
  flex-wrap:wrap;
  gap:44px 40px;
}
.porsuk-box2{ flex:1 1 280px; padding:0 20px 0 0 }
.porsuk-head1{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  margin:16px 0 8px;
  line-height:1.3;
}
.porsuk-txt2{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
  max-width:40ch;
}
.porsuk-txt3{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 44px;
  max-width:76ch;
}
.porsuk-card1{
  flex:1 1 380px;
  margin:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
}
.porsuk-box3{ max-width:100%; height:auto }
.porsuk-txt4{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin-top:16px;
}
.porsuk-box4{ color:var(--ink); font-weight:600 }
.porsuk-card2{
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.porsuk-sp1{ padding:28px 28px 22px }
.porsuk-head2{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 12px;
  max-width:34ch;
}
.porsuk-txt5{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  max-width:84ch;
}
.porsuk-txt6{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:14px 0 0;
  max-width:84ch;
  padding-left:14px;
  border-left:2px solid var(--line);
}
.porsuk-box5{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding:24px 28px;
}
.porsuk-title3{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 40px;
  max-width:24ch;
}
.porsuk-row2{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
}
.porsuk-title4{
  font-family:var(--font-display);
  font-size:clamp(26px,2.6vw,36px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 16px;
}
.porsuk-txt7{
  font-size:17px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 40px;
  max-width:76ch;
}
.porsuk-col1{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.porsuk-row3{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px;
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:center;
}
.porsuk-box6{ flex:1 1 340px; min-width:0 }
.porsuk-box7{ flex:1 1 300px; min-width:0 }
.porsuk-head3{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  margin:0 0 4px;
}
.porsuk-txt8{
  font-size:15px;
  color:var(--slate);
  margin:0 0 18px;
}
.porsuk-row4{
  margin:0 0 22px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 32px;
}
.porsuk-box8{ flex:1 1 150px }
.porsuk-sp2{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
}
.porsuk-box9{ flex:1 1 100px }
.porsuk-sp3{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.porsuk-box10{ flex:1 1 120px }
.porsuk-card3, a.porsuk-card3{
  display:inline-block;
  padding:11px 24px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
}
.porsuk-box11{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.porsuk-box12{
  text-align:left;
  padding:16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.porsuk-sp4{
  padding:16px;
  font-size:15px;
  color:var(--ink-2);
  white-space:nowrap;
}
.porsuk-sp5{ padding:16px; white-space:nowrap }
.porsuk-head4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  margin:48px 0 20px;
}

/* ---------------------------------------------------------------------
   sitemap   (views/pages/sitemap.php)
   --------------------------------------------------------------------- */

.sitemap-txt1{
  font-size:16px;
  color:var(--slate);
  margin:0 0 48px;
  max-width:62ch;
}
.sitemap-grid1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:40px 32px;
}
.sitemap-head1{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:16px;
}

/* ---------------------------------------------------------------------
   solutions   (views/pages/solutions.php)
   --------------------------------------------------------------------- */

/* Hero: metin sutunu solda, gorsel sagda; dar ekranda alt alta gecer. */
.solutions-hero{
  display:flex;
  flex-wrap:wrap;
  gap:32px 48px;
  align-items:center;
}
.solutions-hero__col{ flex:1 1 520px; min-width:300px }
.solutions-hero__art{
  flex:0 1 320px;
  min-width:200px;
  display:flex;
  justify-content:center;
}
.solutions-hero__img{
  width:100%;
  max-width:300px;
  height:auto;
  display:block;
  opacity:.8;
}
.solutions-row1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.solutions-col1{
  flex:1 1 320px;
  min-width:0;
  border:1px solid var(--line);
  border-radius:3px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow 200ms ease;
}
.solutions-box1{ background:var(--bg-soft); border-bottom:1px solid var(--line) }
.solutions-box2{
  width:100%;
  max-width:268px;
  height:auto;
  display:block;
  margin:0 auto;
}
.solutions-head1{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.25;
}
.solutions-row2{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.solutions-card1{
  font-size:12px;
  color:var(--slate);
  border:1px solid var(--line);
  border-radius:2px;
  padding:4px 9px;
}
.solutions-box3{
  background:var(--bg);
  padding:22px 20px;
  display:block;
}
.solutions-box4{
  background:var(--cta-bg);
  border-top:1px solid var(--line);
  padding:72px 0;
}

/* ---------------------------------------------------------------------
   solutions/central-branch-network   (views/pages/solutions/central-branch-network.php)
   --------------------------------------------------------------------- */

.central-branch-network-box1{
  flex:1 1 300px;
  background:var(--bg);
  padding:30px 26px;
}
.central-branch-network-row1{
  display:flex;
  flex-wrap:wrap;
  gap:32px 40px;
}
.central-branch-network-box2{
  flex:1 1 240px;
  border-top:1px solid var(--ink);
  padding-top:20px;
}
.central-branch-network-head1{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 16px;
}
.central-branch-network-col1{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.central-branch-network-row2{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
}
.central-branch-network-box3{
  width:5px;
  height:5px;
  background:var(--brand);
  margin-top:8px;
  flex-shrink:0;
}
.central-branch-network-txt1{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:28px 0 0;
  max-width:78ch;
}
.central-branch-network-row3{
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
  padding:0 0 40px;
  border-bottom:1px solid var(--line);
}
.central-branch-network-title1{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
}
.central-branch-network-txt2{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin-top:6px;
  max-width:34ch;
}
.central-branch-network-row4{
  display:flex;
  flex-wrap:wrap;
  gap:36px 40px;
  padding-top:40px;
}
.central-branch-network-head2{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 14px;
}
.central-branch-network-txt3{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 18px;
  max-width:56ch;
}
.central-branch-network-row5{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.central-branch-network-card1{
  display:inline-block;
  padding:8px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:14px;
  line-height:1.4;
  color:var(--ink-2);
}
.central-branch-network-col2{
  flex:1 1 300px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
}
.central-branch-network-head3{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 10px;
}
.central-branch-network-txt4{
  font-size:15px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 22px;
}
.central-branch-network-card2, a.central-branch-network-card2{
  margin-top:auto;
  display:inline-block;
  padding:11px 22px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  border-radius:2px;
  font-size:15px;
  font-weight:600;
  align-self:flex-start;
}

/* ---------------------------------------------------------------------
   solutions/enterprise-networks   (views/pages/solutions/enterprise-networks.php)
   --------------------------------------------------------------------- */

.enterprise-networks-card1{
  flex:1 1 280px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
  min-width:0;
}
.enterprise-networks-box1{
  flex:1 1 320px;
  background:var(--bg);
  padding:28px 26px;
  min-width:0;
}
.enterprise-networks-card2{
  display:inline-block;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:13px;
  color:var(--slate);
}
.enterprise-networks-box2, a.enterprise-networks-box2{
  flex:1 1 280px;
  background:var(--bg);
  padding:24px 22px;
  display:block;
  color:var(--ink);
  min-width:0;
}
.enterprise-networks-txt1{
  font-size:14.5px;
  line-height:1.6;
  color:var(--slate);
}

/* ---------------------------------------------------------------------
   solutions/hotel-hotspot   (views/pages/solutions/hotel-hotspot.php)
   --------------------------------------------------------------------- */

.hotel-hotspot-box1{
  flex:1 1 auto;
  padding-bottom:34px;
  min-width:0;
}
.hotel-hotspot-row1{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:44px;
}
.hotel-hotspot-row2{
  flex:1 1 240px;
  background:var(--bg);
  padding:20px 22px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  min-width:0;
}
.hotel-hotspot-head1{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.hotel-hotspot-txt1{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin-top:4px;
}
.hotel-hotspot-title1{
  font-family:var(--font-display);
  font-size:clamp(20px,2vw,24px);
  font-weight:600;
  line-height:1.3;
  margin:0 0 12px;
  max-width:30ch;
}
.hotel-hotspot-box2{
  flex:1 1 300px;
  background:var(--bg);
  padding:28px 26px;
  min-width:0;
}
.hotel-hotspot-txt2{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin:22px 0 0;
  max-width:72ch;
}
.hotel-hotspot-card1{
  flex:1 1 280px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
  min-width:0;
}
.hotel-hotspot-title2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.2;
  margin:0 0 36px;
  max-width:24ch;
}
.hotel-hotspot-row3{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.hotel-hotspot-card2, a.hotel-hotspot-card2{
  flex:1 1 280px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 24px;
  display:block;
  color:var(--ink);
  min-width:0;
}
.hotel-hotspot-sec1{
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:14px;
  font-weight:500;
  color:var(--brand);
}

/* ---------------------------------------------------------------------
   solutions/identity-based-access   (views/pages/solutions/identity-based-access.php)
   --------------------------------------------------------------------- */

.identity-based-access-box1{
  flex:1 1 340px;
  min-width:280px;
  padding:30px 32px;
  border-right:1px solid var(--line);
}
.identity-based-access-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:18px;
}
.identity-based-access-row1{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
}
.identity-based-access-box2{ color:var(--slate-2); flex-shrink:0 }
.identity-based-access-box3{
  flex:1 1 340px;
  min-width:280px;
  padding:30px 32px;
}
.identity-based-access-row2{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
}
.identity-based-access-col1{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.identity-based-access-card1{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:32px 30px;
}
.identity-based-access-row3{
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
  align-items:flex-start;
}
.identity-based-access-head1{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 12px;
  max-width:28ch;
}
.identity-based-access-row4{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin-bottom:12px;
}
.identity-based-access-txt1{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:78ch;
}
.identity-based-access-card2{
  margin:0;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
}
.identity-based-access-txt2{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin-top:18px;
  max-width:82ch;
}
.identity-based-access-box4{
  width:100%;
  min-width:780px;
  border-collapse:collapse;
}
.identity-based-access-box5{
  text-align:left;
  padding:16px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.identity-based-access-sp1{
  padding:16px;
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
}
.identity-based-access-txt3{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:78ch;
}
.identity-based-access-row5{
  padding:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.identity-based-access-card3{
  font-size:14px;
  color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:6px 12px;
  background:var(--bg-soft);
}
.identity-based-access-sec1{
  padding:18px 20px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
}
.identity-based-access-sec2{ padding:76px 0; border-top:1px solid var(--line) }
.identity-based-access-card4{
  flex:1 1 300px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px;
  display:block;
}

/* ---------------------------------------------------------------------
   solutions/industries   (views/pages/solutions/industries.php)
   --------------------------------------------------------------------- */

.industries-box1{ background:var(--bg); padding:22px 20px }

/* ---------------------------------------------------------------------
   solutions/single-device-management   (views/pages/solutions/single-device-management.php)
   --------------------------------------------------------------------- */

.single-device-management-title1{
  font-family:var(--font-display);
  font-size:clamp(34px,4.2vw,52px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 16px;
  max-width:20ch;
}
.single-device-management-row1{
  display:flex;
  flex-wrap:wrap;
  gap:24px 40px;
  align-items:flex-start;
  padding:36px 0;
  border-bottom:1px solid var(--line);
}
.single-device-management-box1{ flex:0 0 auto; min-width:64px }
.single-device-management-title2{
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,40px);
  font-weight:700;
  line-height:1;
  color:var(--line);
  font-variant-numeric:tabular-nums;
}
.single-device-management-box2{ flex:1 1 300px; max-width:400px }
.single-device-management-head1{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 12px;
  max-width:26ch;
}
.single-device-management-row2{
  flex:1 1 360px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
}
.single-device-management-row3{
  flex:1 1 300px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
}
.single-device-management-title3{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  line-height:1.1;
  color:var(--ink);
}
.single-device-management-card1{
  margin:0 0 44px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
}
.single-device-management-box3{
  width:100%;
  min-width:760px;
  height:auto;
  display:block;
}
.single-device-management-txt1{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin-top:18px;
  max-width:84ch;
}
.single-device-management-box4{
  flex:1 1 300px;
  border-top:1px solid var(--ink);
  padding-top:18px;
}
.single-device-management-head2{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 10px;
}
.single-device-management-box5{
  flex:1 1 240px;
  background:var(--bg);
  padding:22px 24px;
}
.single-device-management-row4{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.single-device-management-box6{ color:var(--ok); font-size:14px }
.single-device-management-head3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin:0;
}
.single-device-management-txt2{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
  margin:0;
}
.single-device-management-box7{
  flex:1 1 400px;
  min-width:280px;
  padding:30px 32px;
  border-right:1px solid var(--line);
}
.single-device-management-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:6px;
}
.single-device-management-head4{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:20px;
}
.single-device-management-card2{
  display:inline-block;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg-soft);
  font-size:14px;
  line-height:1.4;
  color:var(--ink-2);
}
.single-device-management-box8{
  flex:1 1 320px;
  min-width:280px;
  padding:30px 32px;
}
.single-device-management-head5{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:14px;
}
.single-device-management-row5{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  justify-content:space-between;
  align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.single-device-management-txt3{
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  color:var(--ink);
  margin:0;
  font-variant-numeric:tabular-nums;
}
.single-device-management-txt4{
  font-size:14px;
  line-height:1.7;
  color:var(--slate);
  margin:20px 0 0;
  max-width:78ch;
}
.single-device-management-title4{
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 28px;
}
.single-device-management-card3{
  flex:1 1 280px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:22px 24px;
  display:block;
}
.single-device-management-head6{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
  color:var(--ink);
}

/* ---------------------------------------------------------------------
   solutions/uninterrupted-internet   (views/pages/solutions/uninterrupted-internet.php)
   --------------------------------------------------------------------- */

.uninterrupted-internet-box1{ flex:1 1 280px; max-width:460px }
.uninterrupted-internet-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin:16px 0 8px;
}
.uninterrupted-internet-box2{
  text-align:left;
  padding:16px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.uninterrupted-internet-sp1{
  padding:16px;
  font-size:15px;
  line-height:1.6;
  color:var(--slate);
  white-space:nowrap;
}
.uninterrupted-internet-txt1{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin:18px 0 0;
  max-width:80ch;
}
.uninterrupted-internet-txt2{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:76ch;
}
.uninterrupted-internet-card1{
  margin:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:24px;
}
.uninterrupted-internet-txt3{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
  margin-top:18px;
  max-width:80ch;
}
.uninterrupted-internet-txt4{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 44px;
  max-width:76ch;
}
.uninterrupted-internet-sp2{ padding:18px 20px; border-bottom:1px solid var(--line) }
.uninterrupted-internet-txt5{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:5px;
}
.uninterrupted-internet-txt6{
  font-size:14px;
  line-height:1.65;
  color:var(--slate);
}
.uninterrupted-internet-box3{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.uninterrupted-internet-box4{
  text-align:left;
  padding:14px 16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  color:var(--ink);
}
.uninterrupted-internet-sp3{
  padding:14px 16px;
  font-size:15px;
  color:var(--ink-2);
}
.uninterrupted-internet-sp4{
  padding:14px 16px;
  font-size:15px;
  color:var(--ink-2);
  white-space:nowrap;
}
.uninterrupted-internet-card2{
  flex:1 1 300px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px;
  display:block;
}

/* ---------------------------------------------------------------------
   support/documentation   (views/pages/support/documentation.php)
   --------------------------------------------------------------------- */

.documentation-row1{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
  margin-bottom:10px;
}
.documentation-eyebrow1{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-right:4px;
}
.documentation-txt1{
  font-size:13px;
  color:var(--slate-2);
  margin:0 0 22px;
}
.documentation-row2{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.documentation-box1{ flex-shrink:0 }
.documentation-box2{ flex:1; min-width:220px }
.documentation-txt2{
  font-size:15px;
  font-weight:500;
  line-height:1.4;
}
.documentation-eyebrow2{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--slate);
  white-space:nowrap;
}
.documentation-sp1{
  padding:40px 18px;
  text-align:center;
  font-size:15px;
  color:var(--slate);
}
.documentation-row3{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
}

/* ----------------------------------------------------------------------
   Belge filtresi. Secili dugmenin gorunumu chrome.css > .seg-filter.is-on
   kuralindan farkli oldugu icin secici .seg-filter ile birlestirildi.
   ---------------------------------------------------------------------- */
.seg-filter.doc-chip{
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:2px;
  cursor:pointer;
  padding:9px 16px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
}
.seg-filter.doc-chip.is-on{ background:var(--bg-soft); font-weight:600; color:var(--ink) }

/* ---------------------------------------------------------------------
   support/downloads   (views/pages/support/downloads.php)
   --------------------------------------------------------------------- */

.downloads-sp1{ padding:0 0 48px }
.downloads-box1{
  width:100%;
  min-width:820px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.downloads-sp2{
  padding:10px 14px;
  font-size:15px;
  font-weight:500;
}
.downloads-sp3{
  padding:10px 14px;
  font-size:15px;
  color:var(--ink-2);
}
.downloads-sp4{
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.downloads-card1{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
  padding:56px 24px;
  text-align:center;
}
.downloads-txt1{
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
  margin:0 auto;
  max-width:52ch;
}
.downloads-grid1{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
}
.downloads-txt2{
  font-size:20px;
  font-weight:400;
  color:var(--slate);
}
.downloads-col1{
  padding:0 16px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.downloads-card2{
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
  padding:32px 22px;
  font-size:15px;
  line-height:1.65;
  color:var(--slate);
}
.downloads-row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
/* Bilgilendirme satirlari: baglanti metnin sagina degil, satirin en altina
   yerlesir. Ayni sinifi kullanan istemci listesi etkilenmesin diye
   degistirici sinifla veriliyor. */
.downloads-row1--notice{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.downloads-card3{
  margin-top:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-soft);
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
}

/* Urun ailesi sekmeleri: products sayfasindaki serit ile ayni dil
   (alt cizgi marka renginde, secili sekme --brand). */
.feat-tab.downloads-tab{
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:14px 22px 15px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  color:var(--slate);
}
.feat-tab.downloads-tab.is-on{ color:var(--brand) }
.downloads-tab__rule{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--brand);
  opacity:0;
}
.downloads-tab.is-on .downloads-tab__rule{ opacity:1 }
.downloads-pane{ padding-top:24px }

/* Surum tablosunun degisiklik ve durum sutunlari. */
.downloads-sp5{
  padding:10px 14px;
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
  min-width:260px;
}
.downloads-status{ padding:10px 14px; font-size:13px; font-weight:600; color:var(--slate); white-space:nowrap }
/* Baslik hucresi .th ortak siniftir; daraltma yalnizca bu tabloya uygulanir. */
.downloads-box1 .th{ padding:10px 14px }

.downloads-foot{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--slate);
  max-width:78ch;
}

/* ---------------------------------------------------------------------
   support/training   (views/pages/support/training.php)
   --------------------------------------------------------------------- */

.training-txt1{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:60ch;
}
.training-txt2{
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  margin:0 0 32px;
  max-width:72ch;
}
.training-grid1{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}
.training-col1{
  border:1px solid var(--line);
  border-radius:3px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.training-head1{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  margin:0;
}
.training-col2{
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:6px;
}
.training-row1{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
}
.training-box1{ font-weight:500; text-align:right }
.training-txt3{
  font-size:15px;
  font-weight:600;
  margin-top:8px;
}
.training-col3{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.training-row2{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}


/* ---------------------------------------------------------------------
   Slogan + donen dunya (ana sayfa, urun ailesinin ustu)
   Solda slogan dikeyde ortali, sagda 400x400 kure. Kureyi
   assets/js/cyber-globe.js cizer; kutunun olcusu buradan gelir.
   --------------------------------------------------------------------- */
.home-globe{
  border-bottom:1px solid var(--line);
  padding:0 0 64px;
  /* Beyaz zemin uzerinde seyrek "kivilcim" izleri: kisa capraz cizgiler ve
     uclarindaki noktalar. Renk sitenin mavi-gri tonunda, opaklik dusuk. */
  background:var(--bg) url('../images/other/sparks-pattern.svg') center / cover no-repeat;
}
.home-globe__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.home-globe__slogan{
  flex:1 1 520px;
  min-width:0;
  margin:0;
  font-family:var(--font-display);
  color:var(--ink);
  text-wrap:pretty;
}
/* Ilk satir marka vurgusu: buyuk ve tek satir. */
.home-globe__lead{
  display:block;
  font-size:55px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  white-space:nowrap;
}
/* Devami daha kucuk; iki satira yayilsin diye genislik sinirli. */
.home-globe__rest{
  display:block;
  margin-top:8px;
  font-size:30px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
  color:var(--ink-2);
  /* Iki satirda dursun: cumle 45 karakter, satir basina ~23 karakter. */
  max-width:24ch;
}
.home-globe__stage{
  flex:0 0 400px;
  width:400px;
  height:400px;
  max-width:100%;
}

@media (max-width: 1023px){
  .home-globe__lead{ font-size:42px }
  .home-globe__rest{ font-size:24px }
}
@media (max-width: 899px){
  .home-globe__row{ gap:28px }
  .home-globe__stage{ flex-basis:300px; width:300px; height:300px; margin:0 auto }
}
@media (max-width: 639px){
  .home-globe__lead{ font-size:34px }
  .home-globe__rest{ font-size:20px }
}
@media (max-width: 479px){
  .home-globe__stage{ flex-basis:240px; width:240px; height:240px }
  /* Cok dar ekranda marka satiri sigmazsa kirilabilsin. */
  .home-globe__lead{ white-space:normal }
}

/* ----------------------------------------------------------------------
   Arayuz ekran goruntuleri — mozaik + buyutec
   Dort gorsel: iki yanda buyuk, ortada iki kucuk. Gorsellerin en-boy orani
   ayni olmadigi icin hucreyi object-fit ile doldururlar; ust-sol kose
   sabittir, cunku panel arayuzlerinde anlamli kisim orasidir.
   Tiklaninca assets/js/ui.js buyutec katmanini acar.
   ---------------------------------------------------------------------- */
.shots{
  display:grid;
  grid-template-columns:1.35fr 1fr 1.35fr;
  grid-template-rows:repeat(2, 1fr);
  gap:14px;
  height:clamp(300px, 33vw, 440px);
}
.shots > button{
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
  overflow:hidden;
  cursor:zoom-in;
  display:block;
  min-width:0;
  min-height:0;
}
.shots > button:nth-child(1){ grid-column:1; grid-row:1 / span 2 }
.shots > button:nth-child(2){ grid-column:2; grid-row:1 }
.shots > button:nth-child(3){ grid-column:2; grid-row:2 }
.shots > button:nth-child(4){ grid-column:3; grid-row:1 / span 2 }
.shots img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
  display:block;
  transition:transform 260ms ease;
}
/* Uzerine gelince cerceve degil goruntu buyur; tasan kisim hucrede kirpilir. */
.shots > button:hover img,
.shots > button:focus-visible img{ transform:scale(1.06) }

/* Bolum basligi: solda etiket, sagda galeriyi acan metin buton. */
.shots-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.shots-open{
  padding:0;
  background:none;
  border:0;
  color:var(--slate-2);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:color 150ms ease;
}
.shots-open::after{ content:" \2192" }
.shots-open:hover{ color:var(--brand) }

@media (prefers-reduced-motion: reduce){
  .shots img{ transition:none }
  .shots > button:hover img,
  .shots > button:focus-visible img{ transform:none }
}

@media (max-width: 899px){
  .shots{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr);
    height:clamp(260px, 52vw, 380px);
  }
  .shots > button:nth-child(1){ grid-column:1; grid-row:1 }
  .shots > button:nth-child(2){ grid-column:2; grid-row:1 }
  .shots > button:nth-child(3){ grid-column:1; grid-row:2 }
  .shots > button:nth-child(4){ grid-column:2; grid-row:2 }
}

/* ---- buyutec katmani ---------------------------------------------------- */
.viewer{
  position:fixed;
  inset:0;
  z-index:340;
  background:rgba(11,22,32,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 64px;
}
.viewer img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  border-radius:var(--radius);
  background:var(--bg);
}
.viewer__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.viewer__btn:hover{ background:rgba(255,255,255,.18) }
.viewer__btn--prev{ left:14px }
.viewer__btn--next{ right:14px }
.viewer__close{
  position:absolute;
  top:14px;
  right:14px;
  transform:none;
}
.viewer__count{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
}

@media (max-width: 639px){
  .viewer{ padding:56px 12px }
  .viewer__btn{ width:40px; height:40px }
}


/* ----------------------------------------------------------------------
   Hata sayfalari — 404
   Solda hata bildirimi, sagda site icindeki ana yollar. Zemindeki ince
   izgara sadece dokudur; maske ile kenarlara dogru soner.
   ---------------------------------------------------------------------- */
.err{
  position:relative;
  overflow:hidden;
  padding:clamp(56px, 8vw, 96px) 0 var(--section-y);
}
.err-grid{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 32px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 22% 30%, #000 0%, transparent 68%);
  mask-image:radial-gradient(120% 90% at 22% 30%, #000 0%, transparent 68%);
  pointer-events:none;
}
.err-in{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, .9fr);
  gap:48px 64px;
  align-items:start;
}
.err-code{
  font-family:var(--font-display);
  font-size:clamp(96px, 15vw, 190px);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.02em;
  color:var(--bg-soft);
  -webkit-text-stroke:1px var(--line);
  margin-bottom:22px;
}
.err-act{
  display:flex;
  align-items:center;
  gap:14px 26px;
  flex-wrap:wrap;
}
.err-link{
  font-size:15px;
  font-weight:600;
  color:var(--slate);
  transition:color 150ms ease;
}
.err-link::after{ content:" \2192" }
.err-link:hover{ color:var(--brand) }
.err-nav{ padding-top:6px }
.err-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.err-list a{
  display:block;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  transition:border-color 160ms ease;
}
.err-list a:hover{ border-bottom-color:var(--brand) }
.err-t{
  display:block;
  font-size:15px;
  font-weight:600;
  transition:color 160ms ease;
}
.err-list a:hover .err-t{ color:var(--brand) }
.err-t::after{ content:" \203A" }
.err-d{
  display:block;
  margin-top:3px;
  font-size:14px;
  line-height:1.5;
  color:var(--slate);
}

@media (max-width: 899px){
  .err-in{ grid-template-columns:1fr; gap:40px }
  .err-code{ margin-bottom:14px }
}