/* =============================================================
   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. */

.vitrin-ikon, .hizmet-kart-ikon, .neden-ikon, .surec-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;
}
.vitrin-kart:hover .vitrin-ikon,
.hizmet-kart:hover .hizmet-kart-ikon{
  background:var(--marka); color:#fff;
  transform:translateY(-2px) rotate(-4deg);
}

/* Süreç ve "neden biz" ikonları vurgu renginde */
.surec-ikon, .neden-ikon{ background:var(--vurgu-sis); color:var(--vurgu-koyu); }

/* 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 }
}