/* ---------------------------------------------------------------------------
   helixteknoloji.com - siteye ozel duzeltmeler
   main.css'ten SONRA yuklenir, tema dosyalarina dokunulmaz.

   Asagidaki kurallarin tamami YALNIZCA urun kartlarini hedefler
   (gorsel adi "urun-" ile baslayanlar). Anasayfadaki hizmet kartlari
   temanin ozgun tasarimiyla calismaya devam eder.
   --------------------------------------------------------------------------- */

/* 1) Logolarin arkasindaki dekoratif mavi sekli kaldirir.
      Tema bu sekli (.icon::before -> img/service/shape.png) kendi cizgi
      ikonlari icin tasarlamis; gercek urun logolarinin altinda yamali duruyor. */
.service-box-items .icon:has(img[src*="/urun-"])::before {
    display: none;
}

/* 2) Hover'da kartin komple maviye boyanmasini kaldirir.
      Tema .service-box-items::before katmanini scale(1,0) -> scale(1,1)
      buyuterek karti var(--theme) rengiyle dolduruyor; ::after ise
      dekoratif cizgi seklini getiriyor. Ikisini de kapali tutuyoruz. */
.service-box-items:has(img[src*="/urun-"]):hover::before {
    transform: scale(1, 0);
}

.service-box-items:has(img[src*="/urun-"]):hover::after {
    visibility: hidden;
    opacity: 0;
}

/* 3) Mavi zemin gelmedigi icin metinler beyaza donmemeli -
      aksi halde beyaz kart uzerinde beyaz yazi kalirdi. */
.service-box-items:has(img[src*="/urun-"]):hover .content h4,
.service-box-items:has(img[src*="/urun-"]):hover .content h4 a {
    color: var(--header);
}

.service-box-items:has(img[src*="/urun-"]):hover .content p {
    color: var(--text);
}

.service-box-items:has(img[src*="/urun-"]):hover .content .theme-btn-2 {
    color: var(--header);
}

/* 4) Hover geri bildirimi tamamen kaybolmasin diye yumusak bir alternatif:
      hafif golge ve cok az yukari kayma. */
.service-box-items:has(img[src*="/urun-"]) {
    transition: box-shadow 300ms ease, transform 300ms ease;
}

.service-box-items:has(img[src*="/urun-"]):hover {
    box-shadow: 0 10px 30px rgba(15, 13, 29, 0.10);
    transform: translateY(-4px);
}

/* 5) Kart yuksekliklerini esitler.
      Bootstrap sutunlari (.col-*) zaten ayni yukseklikte uzuyor ama icteki
      .service-box-items kutusu kendi icerigi kadar kaliyordu; aciklama
      uzunluklari farkli oldugu icin kartlar farkli boyda goruntuleniyordu.
      Sutunu ve karti flex yapip karti sutun yuksekligine yayiyoruz. */
.row > [class*="col-"]:has(.service-box-items img[src*="/urun-"]) {
    display: flex;
}

.service-box-items:has(img[src*="/urun-"]) {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.service-box-items:has(img[src*="/urun-"]) .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Butonlar da ayni hizada, kartin en altinda dursun.
      p'nin alt bosluğu asgari araligi garanti eder, margin-top:auto ise
      kalan bosluğu yukari iterek butonu tabana yaslar. */
.service-box-items:has(img[src*="/urun-"]) .content p {
    margin-bottom: 30px;
}

.service-box-items:has(img[src*="/urun-"]) .content .theme-btn-2 {
    margin-top: auto;
    align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   6) Ic sayfalardaki baslik bandinin yuksekligi
   Tema bu banda masaustunde 180px alt + 180px ust dolgu veriyordu; basligi
   ve breadcrumb'i da ekleyince wrapper'in alt bosluguyla birlikte ~500px
   tutuyor, yani 1080p bir ekranda ilk ekranin tamami banttan ibaret kaliyordu.
   Ziyaretci icerigi gorebilmek icin kaydirmak zorundaydi.

   Bandi kaldirmiyoruz - sayfa basligini tasidigi icin islevi var - sadece
   yuksekligi yaklasik yariya indiriyoruz.
   --------------------------------------------------------------------------- */
.breadcrumb-wrapper .page-heading {
    padding: 75px 0;
}

.breadcrumb-wrapper {
    margin-bottom: 50px;
}

@media (max-width: 1199px) {
    .breadcrumb-wrapper .page-heading { padding: 65px 0; }
}

@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading { padding: 60px 0; }
    .breadcrumb-wrapper { margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .breadcrumb-wrapper .page-heading { padding: 50px 0; }
}

@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading { padding: 45px 0; }
    .breadcrumb-wrapper { margin-bottom: 30px; }
}

/* ---------------------------------------------------------------------------
   7) Ic sayfalarda baslik bandi ile icerik arasindaki bosluk
   Tema, baslik bandindan sonraki bolume 120px ust dolgu veriyor; bandin
   kendi alt boslugu (50px) da eklenince araya ~170px bos alan giriyordu.
   Yalnizca breadcrumb'i izleyen bolumu hedefliyoruz - .section-padding
   site genelinde kullanildigi icin anasayfa etkilenmiyor.
   --------------------------------------------------------------------------- */
.breadcrumb-wrapper + section.section-padding {
    padding-top: 50px;
}

/* Giris metni ile onu izleyen kart bolumu arasindaki bosluk */
.service-details-section.section-padding {
    padding-bottom: 70px;
}

@media (max-width: 1199px) {
    .breadcrumb-wrapper + section.section-padding { padding-top: 45px; }
    .service-details-section.section-padding      { padding-bottom: 60px; }
}

@media (max-width: 991px) {
    .breadcrumb-wrapper + section.section-padding { padding-top: 40px; }
    .service-details-section.section-padding      { padding-bottom: 50px; }
}

@media (max-width: 767px) {
    .breadcrumb-wrapper + section.section-padding { padding-top: 30px; }
    .service-details-section.section-padding      { padding-bottom: 40px; }
}