/* =============================================================
   GIGAPORT — assets/css/tema.css
   Modern görünüm katmanı.

   NEDEN AYRI DOSYA?
   site.css sitenin yapısal iskeleti — sütunlar, tipografi,
   boşluk düzeni. Onu yeniden yazmak her sayfayı riske atardı.
   Bu dosya site.css'ten SONRA yüklenir ve yalnızca görünümü
   zenginleştirir: ikon rozetleri, renkli kartlar, yumuşak
   gölgeler, akordiyon ve giriş animasyonları.

   Beğenmezseniz head_stil.php'den tek satır kaldırmak yeterli —
   site eski görünümüne döner, hiçbir şey bozulmaz.

   HAREKET: Tüm animasyonlar prefers-reduced-motion tercihine
   saygılıdır. Sistemde hareket azaltma açıksa devre dışı kalır.
   ============================================================= */


/* ═══ 1. KART — renkli üst şerit, yükselen gölge ═══════════ */

.kart{
  border-radius:calc(var(--kose) * 1.4);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease,
             border-color .22s ease;
}
.kart:hover{
  box-shadow:0 12px 32px -12px rgba(10,41,61,.28);
}

/* Üstünde ince renkli şerit — yalnız hover'da beliriyor */
.vitrin-kart, .marka-kart, .hizmet-kart, .satis-kart, .yazi-kart{
  position:relative;
  overflow:hidden;
}
.vitrin-kart::after, .marka-kart::after, .hizmet-kart::after,
.satis-kart::after, .yazi-kart::after{
  content:'';
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--marka), var(--vurgu));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.vitrin-kart:hover::after, .marka-kart:hover::after, .hizmet-kart:hover::after,
.satis-kart:hover::after, .yazi-kart:hover::after{ transform:scaleX(1); }


/* ═══ 2. İKON ROZETLERİ ════════════════════════════════════ */
/* İkonlar çıplak durmasın — yumuşak renkli zemin üstünde. */

/* Not: .vitrin-ikon, .neden-ikon ve .surec-ikon artık
   inc/alim_gorunum.php içindeki bölüm stillerinde tanımlı —
   o bloklar sayfada daha sonra geldiği için buradan ezilemiyor.
   Burada yalnız diğer ikon rozetleri kalıyor. */
.hizmet-kart-ikon, .kur-blok-ikon, .marka-ikon{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem;
  border-radius:calc(var(--kose) * 1.2);
  background:var(--marka-sis);
  color:var(--marka);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.hizmet-kart:hover .hizmet-kart-ikon{
  background:var(--marka); color:#fff;
  transform:translateY(-2px) rotate(-4deg);
}


/* Kategori sayfası büyük ikonu */
.kategori-ikon, .marka-ust-ikon, .hizmet-ikon{
  display:inline-flex; align-items:center; justify-content:center;
  width:4.25rem; height:4.25rem;
  border-radius:calc(var(--kose) * 1.4);
  background:linear-gradient(135deg, var(--marka-sis), #fff);
  color:var(--marka);
  border:1px solid var(--gri-200);
}


/* ═══ 3. SÜREÇ ADIMLARI — bağlantı çizgisi ════════════════ */

.surec-adim{
  border-radius:calc(var(--kose) * 1.4);
  border-color:var(--gri-200);
  transition:transform .22s ease, box-shadow .22s ease;
}
.surec-adim:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px -14px rgba(10,41,61,.3);
}
.surec-no{
  font-size:1.6rem !important;
  font-weight:800;
  letter-spacing:-.02em !important;
  color:var(--vurgu) !important;
  opacity:.35;
}

/* Geniş ekranda adımlar arasında kesik çizgi */
@media (min-width:1080px){
  .surec-liste{ position:relative; }
  .surec-liste::before{
    content:''; position:absolute; top:3.4rem; left:8%; right:8%;
    border-top:2px dashed var(--gri-200); z-index:0;
  }
  .surec-adim{ position:relative; z-index:1; }
}


/* ═══ 4. "NEDEN BİZ" — kart görünümü ══════════════════════ */

.neden-oge{
  background:#fff;
  border:1px solid var(--gri-200);
  border-top:3px solid var(--vurgu);
  border-radius:calc(var(--kose) * 1.4);
  padding:var(--olcu-6);
  transition:transform .22s ease, box-shadow .22s ease;
}
.neden-oge:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px -14px rgba(10,41,61,.28);
}


/* ═══ 5. AKORDİYON — yumuşak açılma ═══════════════════════ */

.sss-oge{
  background:#fff;
  border:1px solid var(--gri-200);
  border-radius:calc(var(--kose) * 1.2);
  margin-bottom:.6rem;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sss-liste{ border-top:0 }
.sss-oge:hover{ border-color:var(--gri-300) }
.sss-oge[open]{
  border-color:var(--marka);
  box-shadow:0 10px 26px -14px rgba(10,41,61,.25);
}
.sss-soru{
  padding:var(--olcu-5) var(--olcu-6) !important;
  font-weight:500;
  transition:background .18s ease;
}
.sss-oge[open] .sss-soru{ background:var(--marka-sis) }
.sss-soru:hover{ background:var(--gri-100) }
.sss-ok{
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--gri-100); color:var(--gri-700);
  padding:.28rem; box-sizing:border-box;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), background .2s, color .2s;
}
.sss-oge[open] .sss-ok{ background:var(--marka); color:#fff }
.sss-cevap{ padding:0 var(--olcu-6) var(--olcu-6) !important }

/* İçerik açılırken kayarak gelsin */
.sss-oge[open] .sss-cevap{ animation:akordiyon-ac .32s cubic-bezier(.2,.7,.3,1) }
@keyframes akordiyon-ac{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:none }
}


/* ═══ 6. BÖLÜM ETİKETİ — rozet biçiminde ══════════════════ */

.goz-etiketi{
  display:inline-flex !important; align-items:center; gap:.5rem;
  padding:.3rem .75rem .3rem .6rem;
  background:var(--vurgu-sis);
  border-radius:999px;
  color:var(--vurgu-koyu) !important;
}
.goz-etiketi::before{
  width:.45rem !important; height:.45rem !important;
  border-radius:50%;
  background:var(--vurgu) !important;
}


/* ═══ 7. DÜĞMELER ═════════════════════════════════════════ */

.dugme{
  border-radius:calc(var(--kose) * 1.2);
  transition:transform .16s ease, box-shadow .2s ease,
             background .2s ease, color .2s ease;
}
.dugme-ana{ box-shadow:0 6px 18px -8px rgba(10,41,61,.45) }
.dugme-ana:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(10,41,61,.5) }
.dugme:active{ transform:translateY(0) }

/* Teklif düğmesi — dikkat çekmesi gereken tek düğme */
.teklif-dugme{
  box-shadow:0 6px 20px -8px rgba(245,130,13,.65);
  font-weight:700;
}
.teklif-dugme:hover{ box-shadow:0 12px 28px -10px rgba(245,130,13,.75) }


/* Teklif düğmesi — panelden yönetilen renk.
   Ayarlar › Görünüm › Teklif Düğmesi Zemini/Yazısı buraya işler.
   Üst menüdeki düğmeyle aynı renkte olur; kategori sayfaları,
   marka sayfaları ve banner şeritleri dahil her yerde. */
.dugme-teklif{
  background:var(--teklif-zemin);
  color:var(--teklif-metin);
  border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(10,41,61,.35);
}
.dugme-teklif:hover{
  background:var(--teklif-hover);
  color:var(--teklif-metin);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(10,41,61,.45);
}

/* Yan sütundaki teklif kutusu */
.teklif-kutu{
  background:linear-gradient(160deg, var(--gri-900), var(--gri-800));
  color:#fff;
  padding:var(--olcu-6);
  border-radius:calc(var(--kose) * 1.4);
  position:relative;
  overflow:hidden;
}
.teklif-kutu::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 8%, var(--teklif-zemin), transparent 60%);
  opacity:.28; pointer-events:none;
}
.teklif-kutu > *{ position:relative; z-index:1 }

/* ═══ 8. VİTRİN IZGARASI — daha ferah ═════════════════════ */

.vitrin-kart{ padding:var(--olcu-6) !important; gap:.85rem !important }
.vitrin-ad{ font-weight:600; font-size:1.02rem !important }

.marka-kart{ border-radius:calc(var(--kose) * 1.2) }
.marka-kart:hover{ transform:translateY(-3px) }


/* ═══ 9. BANNER — degrade zemin ══════════════════════════ */

.banner-serit{
  background-image:linear-gradient(120deg, var(--gri-900) 0%, #103750 45%, var(--marka-koyu) 100%);
  position:relative; overflow:hidden;
}
.banner-serit::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(245,130,13,.22), transparent 55%);
  pointer-events:none;
}
.banner-ic{ position:relative; z-index:1 }


/* ═══ 10. TABLO — satır vurgusu ═══════════════════════════ */

.metin table tr:hover td{ background:var(--gri-100) }
.metin table th{ background:var(--gri-900); color:#fff; font-weight:600 }
.ozellik-tablo tr:hover th,
.ozellik-tablo tr:hover td{ background:var(--marka-sis) }


/* ═══ 11. KURUMSAL BLOKLAR ════════════════════════════════ */

.kur-blok{
  background:#fff;
  border:1px solid var(--gri-200);
  border-radius:calc(var(--kose) * 1.4);
  padding:var(--olcu-8);
  margin-bottom:var(--olcu-5);
  transition:box-shadow .22s ease, border-color .22s ease;
}
.kur-blok:hover{
  border-color:var(--gri-300);
  box-shadow:0 14px 34px -18px rgba(10,41,61,.28);
}
.kur-blok-ust{
  display:flex; align-items:center; gap:var(--olcu-4);
  margin-bottom:var(--olcu-5);
  padding-bottom:var(--olcu-4);
  border-bottom:1px solid var(--gri-100);
}
.kur-blok-baslik{ font-size:1.25rem; margin:0 }


/* ═══ 12. GİRİŞ ANİMASYONLARI ═════════════════════════════ */
/* site.css'teki .beliren sınıfı zaten var; burada yumuşatılıyor
   ve kart ızgaralarına kademeli gecikme ekleniyor. */

.js .beliren{ transform:translateY(20px) }
.js .beliren.gorundu{ transform:none }

.js .vitrin-izgara > *,
.js .marka-izgara > *,
.js .hizmet-izgara > *,
.js .neden-izgara > *,
.js .surec-liste > *{
  opacity:0;
  transform:translateY(16px);
  animation:kart-gir .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes kart-gir{ to{ opacity:1; transform:none } }

/* Kademeli gecikme — kartlar sırayla belirir */
.js .vitrin-izgara > *:nth-child(1),.js .marka-izgara > *:nth-child(1),
.js .hizmet-izgara > *:nth-child(1),.js .neden-izgara > *:nth-child(1),
.js .surec-liste > *:nth-child(1){ animation-delay:.02s }
.js .vitrin-izgara > *:nth-child(2),.js .marka-izgara > *:nth-child(2),
.js .hizmet-izgara > *:nth-child(2),.js .neden-izgara > *:nth-child(2),
.js .surec-liste > *:nth-child(2){ animation-delay:.07s }
.js .vitrin-izgara > *:nth-child(3),.js .marka-izgara > *:nth-child(3),
.js .hizmet-izgara > *:nth-child(3),.js .neden-izgara > *:nth-child(3),
.js .surec-liste > *:nth-child(3){ animation-delay:.12s }
.js .vitrin-izgara > *:nth-child(4),.js .marka-izgara > *:nth-child(4),
.js .hizmet-izgara > *:nth-child(4),.js .neden-izgara > *:nth-child(4),
.js .surec-liste > *:nth-child(4){ animation-delay:.17s }
.js .vitrin-izgara > *:nth-child(n+5),.js .marka-izgara > *:nth-child(n+5),
.js .hizmet-izgara > *:nth-child(n+5),.js .neden-izgara > *:nth-child(n+5),
.js .surec-liste > *:nth-child(n+5){ animation-delay:.22s }


/* ═══ 13. FORM ALANLARI ═══════════════════════════════════ */

.alan input[type=text], .alan input[type=tel], .alan input[type=email],
.alan input[type=number], .alan select, .alan textarea,
.ilan-form input, .ilan-form textarea{
  border-radius:calc(var(--kose) * 1.1) !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.alan input:focus, .alan select:focus, .alan textarea:focus,
.ilan-form input:focus, .ilan-form textarea:focus{
  outline:none !important;
  border-color:var(--marka) !important;
  box-shadow:0 0 0 3px var(--marka-sis) !important;
}


/* ═══ 14. HAREKET AZALTMA TERCİHİ ═════════════════════════ */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .vitrin-izgara > *, .js .marka-izgara > *, .js .hizmet-izgara > *,
  .js .neden-izgara > *, .js .surec-liste > *{ opacity:1; transform:none }
  .kart:hover, .surec-adim:hover, .neden-oge:hover,
  .dugme-ana:hover, .marka-kart:hover{ transform:none }
}

/* ═══ 15. SLIDER PERDESİ ══════════════════════════════════
   site.css'te perde rengi eski gri (#0e1720) olarak sabitti.
   Logo laciverti (#0a293d) ile değiştiriliyor ki hero ile
   sayfanın geri kalanı aynı tonda olsun. */
.slayt-perde{
  background:linear-gradient(90deg,
    rgba(10,41,61,calc(var(--perde) + .35)) 0%,
    rgba(10,41,61,var(--perde)) 45%,
    rgba(10,41,61,calc(var(--perde) * .45)) 100%) !important;
}

/* ═══ 16. MARKA KAROLARI ══════════════════════════════════
   site.css'te .partner img'e grayscale(1) + opacity .62
   uygulanıyordu. Bu kural renkli logolar için yazılmış;
   bizim karolarımız tek renk lacivert yazı olduğu için
   soluk gri lekeye dönüşüyor ve okunmuyordu.

   Ayrıca eski kural yalnız <a> sarmalı logolarda hover'da
   netleşiyordu; linki olmayan logolar hep soluk kalıyordu. */
.partner img{
  filter:none;
  opacity:.82;
  max-height:2.9rem;
}
.partner:hover img{ opacity:1 }
.partner{
  border-radius:calc(var(--kose) * 1.1);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
a.partner:hover{ transform:translateY(-2px) }

/* ═══ 17. ÜST MENÜ HOVER ══════════════════════════════════
   site.css'te hover rengi doğrudan --tepe-etkin (turuncu) idi.
   Turuncu "açık olan sayfa" işareti olduğu için hem karışıyor
   hem de koyu zeminde okunurluğu sınırda kalıyordu.

   Artık: üzerine gelince yazı --tepe-hover-metin (varsayılan
   beyaz, panelden değiştirilebilir), altında turuncu çizgi.
   Açık olan sayfa ise turuncu yazı olarak kalıyor — ikisi
   birbirine karışmıyor. */
.nav-baglanti{ position:relative }
.nav-baglanti:hover{ color:var(--tepe-hover-metin, #fff) }
.nav-baglanti::after{
  content:''; position:absolute; left:0; right:0; bottom:-.35rem; height:2px;
  background:var(--tepe-etkin); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.nav-baglanti:hover::after{ transform:scaleX(1) }
.nav-baglanti.etkin{ color:var(--tepe-etkin) }
.nav-baglanti.etkin::after{ transform:scaleX(1) }
.mobil-baglanti:hover,.mobil-alt:hover{ color:var(--tepe-hover-metin, #fff) }


/* ═══ 18. ÜST İLETİŞİM ŞERİDİ — MOBİLDE TEK SATIR ═════════
   Şerit dar ekranda iki satıra kayıyordu. Artık yatay
   kaydırılabilir tek satır: telefon ve sosyal simgeler
   yan yana kalıyor, taşan kısım parmakla kaydırılıyor. */
@media (max-width:760px){
  .ust-serit .kap{
    display:flex; align-items:center; gap:.9rem;
    flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-block:.4rem;
  }
  .ust-serit .kap::-webkit-scrollbar{ display:none }
  .ust-serit .kap > *{ flex:0 0 auto }
  .ust-serit{ font-size:.72rem }
  .sosyal{ margin-left:auto }
}

/* ═══ 19. ÜST ŞERİT BAĞLANTILARI ══════════════════════════
   Şerit metni bilerek soluk (--serit-metin). Üzerine gelince
   netleşmesi gerekiyordu ama hiçbir hover kuralı yoktu.
   Renk panelden yönetiliyor: Ayarlar › Üst Şerit — Üzerine Gelince */
.ust-serit a{
  color:var(--serit-metin);
  text-decoration:none;
  transition:color .15s ease;
}
.ust-serit a:hover,
.ust-serit a:focus-visible{
  color:var(--serit-hover, #fff);
}
.ust-serit a:focus-visible{
  outline:2px solid var(--serit-hover, #fff);
  outline-offset:2px;
}

/* ═══ 20. SOSYAL SİMGELER ═════════════════════════════════
   Biçim panelden seçilir: Ayarlar › Görünüm › Sosyal Simge Biçimi
   Sarmalayıcıya sosyal-b-sade / -marka-hover / -dolu sınıfı basılır.

   Neden sade varsayılan: üst şerit ikincil bir alan. Altı renkli
   dolu kutu, logoyla ve teklif düğmesiyle dikkat için yarışıyor
   ve şeridi bir çıkartma tahtasına çeviriyor. */

.sosyal-linkedin  { --sos:#0a66c2 }
.sosyal-instagram { --sos:#e1306c }
.sosyal-facebook  { --sos:#1877f2 }
.sosyal-youtube   { --sos:#ff0000 }
.sosyal-x_twitter { --sos:#000000 }
.sosyal-whatsapp  { --sos:#25d366 }

.sosyal-link{
  opacity:1;
  border:0;
  border-radius:calc(var(--kose) * .8);
  transition:background .16s ease, color .16s ease,
             transform .16s ease, box-shadow .16s ease;
}
.sosyal-link:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.alt-sosyal .sosyal-link{ border:0; border-radius:calc(var(--kose) * .9) }


/* ── A · SADE (varsayılan) ───────────────────────────────
   Zemin yok, simge şeridin metin rengiyle aynı.
   Üzerine gelince marka mavimiz doluyor. */
.sosyal-b-sade .sosyal-link{
  background:transparent;
  color:var(--serit-metin);
}
.alt-sosyal.sosyal-b-sade .sosyal-link{ color:rgba(255,255,255,.62) }

.sosyal-b-sade .sosyal-link:hover,
.sosyal-b-sade .sosyal-link:focus-visible{
  background:var(--marka);
  color:#fff;
  transform:translateY(-1px);
}


/* ── B · SADE + PLATFORM RENGİ ───────────────────────────
   Zemin yok; üzerine gelince o platformun kendi rengi doluyor.
   X'in siyahı koyu şeritten ayrılmadığı için ince çerçeve. */
.sosyal-b-marka-hover .sosyal-link{
  background:transparent;
  color:var(--serit-metin);
}
.alt-sosyal.sosyal-b-marka-hover .sosyal-link{ color:rgba(255,255,255,.62) }

.sosyal-b-marka-hover .sosyal-link:hover,
.sosyal-b-marka-hover .sosyal-link:focus-visible{
  background:var(--sos);
  color:#fff;
  transform:translateY(-1px);
}
.sosyal-b-marka-hover .sosyal-instagram:hover{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.sosyal-b-marka-hover .sosyal-x_twitter:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}


/* ── C · DOLU ────────────────────────────────────────────
   Her simge kendi renginde kutu; üzerine gelince marka mavimiz. */
.sosyal-b-dolu .sosyal-link{
  background:var(--sos, rgba(255,255,255,.1));
  color:#fff;
}
.sosyal-b-dolu .sosyal-instagram{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.sosyal-b-dolu .sosyal-x_twitter{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28) }

.sosyal-b-dolu .sosyal-link:hover,
.sosyal-b-dolu .sosyal-link:focus-visible{
  background:var(--marka);
  background-image:none;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:none;
}