/* VITRIN KATMANI - Ilker'in 14 Eyl 2026 listesi (13 madde).
   Site sayfalarinda en son yuklenir; oncekileri ezmesi bu yuzden.

   RENKLER BURADA YAZILMAZ (15 Eyl 2026): degiskenler vitrin-palet.css'te,
   panelin Tasarim ekrani onlari ezer. Buraya sabit renk eklenirse panelden
   degistirilemez - Ilker'in "panelde yok" dedigi tam buydu.

   OZGULLUK NOTU: site.css ve site-gorunum.css koyu tema kurallarini
   `:root[data-tema="koyu"] .x` ve `:root:not([data-tema="acik"]) .x`
   bicimiyle yaziyor (0,3,0 - 0,4,0). Buradaki bazi seciciler bilerek
   uzun (`.govde .bolum.bolum-cagri .dugme.dugme-ana`): kisa yazilirsa
   acik temada gecip koyu temada sessizce kaybediyor. */

.ekran-disi {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Temaya gore degisen gorsel: biri basilir, biri gizlenir.
   Tema hem cihazdan hem ust bardaki dugmeden geliyor; <picture> dugmeyi gormez. */
.tema-gorsel-koyu { display: none; }
:root[data-tema="koyu"] .tema-gorselli .tema-gorsel-acik { display: none; }
:root[data-tema="koyu"] .tema-gorsel-koyu { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-gorselli .tema-gorsel-acik { display: none; }
  :root:not([data-tema="acik"]) .tema-gorsel-koyu { display: block; }
}

/* ═══ 1 + 11. Yalniz logo: yazi yok, yazidan kalan alan logoya ═══ */
/* Enver, 14 Eyl aksam: "logo buyusun". 52px'te slogan seridi okunmuyordu;
   tepe cubugu logoyla birlikte kalinlasir (min-height icerige uyar). */
.marka-yalniz-logo img {
  width: auto; height: var(--logo-boy); border-radius: 0;
}
.alt-marka .marka-yalniz-logo img { height: var(--logo-boy-alt); }
@media (max-width: 640px) {
  .marka-yalniz-logo img { height: var(--logo-boy-mobil); }
}

/* ═══ 4. Hero basligi gorsel ═══ */
.kahraman-baslik-gorselli { margin-bottom: var(--aralik-5); }
.kahraman-baslik-gorsel { width: min(100%, 30rem); height: auto; }

/* ═══ 3. Bolum ayrimi: cizgi + sirali zemin ═══
   Acik: giris > beyaz > giris > beyaz. Koyu: giris > siyah > giris > siyah.
   Panelden renk secilmis bolum kendi rengini korur (site.css --sira-zemin). */
.govde > .bolum:nth-child(odd of .bolum) { --sira-zemin: var(--giris-zemin); }
.govde > .bolum:nth-child(even of .bolum) { --sira-zemin: var(--duz-zemin); }
.govde > .bolum + .bolum { border-top: 1px solid var(--elektrik-cizgi); }
.govde > .bolum:last-child { border-bottom: 1px solid var(--elektrik-cizgi); }

/* Iletisim vitrini kendi zeminini kisayolla yaziyordu; sira rengi onun
   altina alinir, ustteki isik lekesi korunur. */
:root .govde > .bolum.bolum-iletisimVitrin {
  background-color: var(--sira-zemin);
  background-image: radial-gradient(120% 80% at 78% 8%, color-mix(in srgb, var(--ana) 14%, transparent), transparent 60%);
}

/* ═══ 2. Giris: yari saydam devre karti deseni ═══
   Desen maskedir, rengi CSS verir - iki tema icin ayri gorsel gerekmez.
   Kaynak: Uzak Baglanti sitesinin giris deseni. */
.bolum-kahraman { isolation: isolate; overflow: hidden; }
.bolum-kahraman::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--devre-renk);
  opacity: var(--devre-saydam);
  -webkit-mask: url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat;
  mask: url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat;
}

/* ═══ 5. Uygulama kartlari: mavi / beyaz / mor ═══
   Ikinci kartin yazisi birinci kartin renginden turer. */
.bolum-ozellikler .izgara > .kart { border-color: transparent; }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) { background: var(--kart-1); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) {
  background: var(--kart-2); border-color: color-mix(in srgb, var(--kart-1) 22%, transparent);
}
.bolum-ozellikler .izgara > .kart:nth-child(3n) { background: var(--kart-3); }

.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-baslik,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-baslik { color: #ffffff; }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-metin,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-metin { color: rgba(255, 255, 255, .86); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-simge,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-simge {
  background: rgba(255, 255, 255, .16); color: #ffffff;
}

.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-baslik { color: var(--kart-1); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-metin {
  /* Varsayilan kart-1 (#015798) ile tam #24527a verir - 14 Eylul'deki renk. */
  color: color-mix(in srgb, var(--kart-1) 50%, #474d5c);
}
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-simge {
  background: color-mix(in srgb, var(--kart-1) 10%, transparent); color: var(--kart-1);
}

/* ═══ 6. Ilk uygulama ve XML: koselerden koyu mavi gradyan ═══ */
.bolum-metinGorsel { isolation: isolate; overflow: hidden; }
.bolum-metinGorsel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 65% at 0% 0%, var(--kose-gradyan), transparent 72%),
    radial-gradient(50% 65% at 100% 100%, var(--kose-gradyan), transparent 72%);
}

/* ═══ 7. Uc adim: elektrik mavisi hap cerceve, ustune gelince buyur ═══ */
.bolum-adimlar .adim {
  border: 2px solid var(--elektrik);
  border-radius: var(--kose-tam);
  padding: 1.1rem 1.9rem;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.bolum-adimlar .adim:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--elektrik) 32%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .bolum-adimlar .adim:hover { transform: scale(1.04); }
}

/* ═══ 8. Kurumsal sayilar: dolu ama saydam hap ═══ */
.bolum-istatistik .sayi-oge {
  border: 2px solid var(--elektrik);
  border-radius: var(--kose-tam);
  background: var(--elektrik-yumusak);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.2rem 1.6rem;
}
.bolum-istatistik .sayi-deger,
.bolum-istatistik .sayi-etiket { color: var(--sayi-metin); }
/* Oge sayisi degisince (Teknokent hapi kalkti, 3 -> 2) haplar sabit 3 sutunda
   bos yer birakmasin; kac oge varsa satiri esit paylassin. */
.bolum-istatistik .sayi-grubu {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ═══ 9. Calisma bicimimiz: kutulari saran tek serit ═══ */
.bolum-bilgiKutulari .izgara {
  border: 2px solid var(--elektrik);
  border-radius: calc(var(--kose-buyuk) * 1.75);
  padding: clamp(1rem, .5rem + 2vw, 2rem);
}

/* ═══ 10. Kapanis cagrisi: elektrik mavisi bant ═══
   Zemin ve yazi rengi bolumun Gorunum sekmesinde; dugme renkleri
   Tasarim ekraninda (cagriDugmeRenk, cagriIkincilRenk). */
.govde .bolum.bolum-cagri .dugme.dugme-ana {
  background: var(--cagri-dugme); color: #ffffff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(1, 29, 51, .35);
}
.govde .bolum.bolum-cagri .dugme.dugme-ana:hover {
  background: color-mix(in srgb, var(--cagri-dugme) 80%, var(--elektrik)); color: #ffffff;
}
.govde .bolum.bolum-cagri .dugme.dugme-ikincil {
  background: var(--cagri-ikincil); color: #ffffff; border-color: transparent;
}
.govde .bolum.bolum-cagri .dugme.dugme-ikincil:hover {
  background: color-mix(in srgb, var(--cagri-ikincil) 85%, #000000); color: #ffffff;
}

/* ═══ Guven bandi - kurum rozetleri (Enver, 15 Eyl 2026) ═══
   dropshipping.gen.tr'deki bandin karsiligi. Logolar koyu alt bilgi icin
   secilmis (Harran'inki beyaz), bu yuzden logo yuvasi iki temada da koyu. */
.guven-bandi {
  border-top: 1px solid var(--elektrik-cizgi);
  padding: var(--aralik-6) 0 var(--aralik-5);
}
.guven-baslik {
  margin: 0 0 var(--aralik-4); font-size: var(--olcek-1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3);
}
.guven-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aralik-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.guven-rozet {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: .55rem .75rem; border-radius: var(--kose-orta);
  background: var(--kart); border: 1px solid var(--elektrik-cizgi);
  color: inherit; text-decoration: none;
}
a.guven-rozet { transition: border-color .2s ease, box-shadow .2s ease; }
a.guven-rozet:hover { border-color: var(--elektrik); box-shadow: 0 6px 18px color-mix(in srgb, var(--elektrik) 18%, transparent); }
.guven-logo {
  flex: none; width: 72px; height: 48px; padding: 5px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: #0b1a2e;
}
.guven-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.guven-yazi { min-width: 0; line-height: 1.3; }
.guven-yazi strong { display: block; font-size: .8rem; font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }
.guven-yazi small { display: block; margin-top: 2px; font-size: .72rem; color: var(--metin-3); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .guven-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aralik-2); }
  .guven-rozet { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .55rem; }
  .guven-logo { width: 100%; height: 44px; }
}

/* ═══ 11. Alt bilgi basliklari ═══ */
.alt-sutun h3 {
  color: var(--alt-baslik);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* ═══ Ust menu (Ilker, 14 Eyl aksam) ═══
   Acik temada girisin koyu mavisi; koyu temada eski renk kalir.
   Ustune gelince yukari kalkar ve elektrik mavisiyle parlar.
   Yalniz ust duzey baglantilar - acilir alt menu etkilenmez. */
.tepe .menu > ul > li > a {
  color: var(--menu-renk);
  transition: color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1), text-shadow .2s ease;
}
.tepe .menu > ul > li > a:hover,
.tepe .menu > ul > li > a:focus-visible {
  color: var(--menu-parlak);
  background: transparent;
  text-shadow: 0 0 14px color-mix(in srgb, var(--elektrik) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .tepe .menu > ul > li > a:hover { transform: translateY(-2px); }
}

/* ═══ Devre deseni - bolume panelden verilir (Gorunum > Desen: devre) ═══
   Giristeki desenin aynisi; ust ve altta yumusakca kaybolur ki bolum
   sinirinda sert bir kesik olusmasin (Ilker: "devre karti gecisi"). */
.desen-devre { isolation: isolate; overflow: hidden; }
.desen-devre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Iletisim vitrini ayni katmana kendi nokta dokusunu ciziyor; devre
     seciliyse o doku silinir, yoksa ikisi ust uste biner. */
  background-image: none;
  background-size: auto;
  background-color: var(--devre-renk);
  opacity: var(--devre-saydam);
  -webkit-mask:
    url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat,
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat,
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}

/* ═══ Beyaz ve siyah bolumlere nokta deseni (Ilker, 14 Eyl aksam) ═══
   Beyaz/siyah = sirali zeminin cift sirasi. Panelden kendi rengi verilmis
   bolum (kapanis cagrisi gibi) deseni almaz.
   Zemin site.css'te kisayolla (background:) yaziliyor; koyu tema kurali
   (0,3,0) resmi sifirlamasin diye secici bilerek uzun (0,5,0).
   Nokta rengi ve gorunurlugu vitrin-palet.css'ten; panelden kapatilinca
   --nokta-oran 0% olur, desen seffaflasir. */
.govde > .bolum:nth-child(even of .bolum):not([style*="--bolum-zemin"]) {
  background-image: radial-gradient(var(--nokta-renk) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ═══ Metin + gorsel bolumu girisle ayni gorunur (Ilker, 15 Eyl 2026) ═══
   "Yazilarin sagina gorseli giris sayfasindaki efekt gibi efektleyelim."
   Giris gorseli kose + derin golge + ustune gelince kalkma tasiyor;
   ikili gorsel yalniz hafif golgedeydi. Hareket asagidaki 12. maddede ortak. */
.ikili-gorsel img { border-radius: var(--kose-buyuk); box-shadow: var(--golge-3); }

/* ═══ 12. Gorseller ustune gelince hareket eder ═══ */
@media (prefers-reduced-motion: no-preference) {
  .kahraman-gorsel img,
  .ikili-gorsel img {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
  }
  .kahraman-gorsel:hover img,
  .ikili-gorsel:hover img {
    transform: translateY(-8px) scale(1.025);
    box-shadow: var(--golge-3);
  }
}