/* =====================================================================
 * view2 — İÇERİK / YERLEŞİM KATMANI
 *
 * mobile.css mobil davranış düzeltmelerine ayrılmış durumda; bu dosya
 * anasayfa içerik düzenlemelerinin stillerini taşır.
 * main.css ve mobile.css'ten SONRA yüklenir.
 * Yeni renk tanımlanmaz — mevcut --ztc-* tokenları kullanılır.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. HİZMET IZGARASI — yan yana 2, toplam 4 kutu
 *
 * Kutular artık .service-header'ın içinde değil, kardeş bir .row içinde.
 * Metin uzunlukları farklı olduğu için kutuların eşit yükseklikte durması
 * ve "Detaylı Bilgi" linkinin alt kenara hizalanması gerekiyor.
 * ------------------------------------------------------------------- */
.service-section-area .service-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.service-section-area .service-grid .service-main-boxes {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* space16 kendinden önceki <p>'yi aşağı iter → link hep altta kalır */
.service-section-area .service-grid .service-main-boxes .space16 {
  margin-top: auto;
}

/* Tek kolona düşen genişliklerde kutular arası boşluk korunur,
   son kutunun altındaki fazlalık alınır. */
.service-section-area .service-grid > [class*="col-"]:last-child .space30 {
  height: 0;
}

@media (min-width: 992px) {
  /* Son satırdaki iki kutunun altındaki boşluk gereksiz */
  .service-section-area
    .service-grid
    > [class*="col-"]:nth-last-child(-n + 2)
    .space30 {
    height: 0;
  }
}

/* 32px padding + 32px başlık dar ekranda çok yer kaplıyor */
@media (max-width: 767px) {
  .service-section-area .service-grid .service-main-boxes {
    padding: 24px;
  }
}

/* ---------------------------------------------------------------------
 * 3. EĞİTİM KUTUSU
 * İş deneyimindeki logo + metin hizasıyla aynı desende
 * ------------------------------------------------------------------- */
.about-section-area .about-others-box .row .col-3 img {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
 * 4. AOS YATAY ANİMASYON TAŞMASI
 *
 * aos.css: [data-aos=fade-left] { transform: translate3d(100px,0,0) }
 * Henüz görünür alana girmemiş 34 eleman sayfanın 100px sağında bekliyor
 * ve yatay taşma yaratıyor (belge 1440px yerine 1480px oluyor).
 *
 * Bu, view'da da olan eski bir sorun; masaüstü UA'da ortaya çıkıyor.
 * Gerçek telefonda görünmüyor çünkü main.js AOS'u UA'ya bakarak kapatıyor
 * (AOS.init({disable:"mobile"}) → data-aos attribute'ları siliniyor).
 * DevTools cihaz modunda ise UA masaüstü kaldığı için görünüyor.
 *
 * Çözüm: giriş animasyonunun yönünü yataydan dikeye çevirmek. Animasyon
 * korunur (fade + yükselme), taşma tamamen biter, sticky/overflow gibi
 * yan etkisi olan bir kural gerekmez.
 * ------------------------------------------------------------------- */
[data-aos="fade-left"],
[data-aos="fade-right"] {
  transform: translate3d(0, 40px, 0);
}

/* zoom-out kutuyu scale(1.2) ile %20 büyütüp sağa taşırıyor (marka ızgarası).
   Küçülterek başlatınca aynı "yerine oturma" hissi kalıyor, taşma bitiyor. */
[data-aos="zoom-out"] {
  transform: scale(0.94);
}

/* ---------------------------------------------------------------------
 * 5. COMMUNITY FOUNDER — soloyazilim.com bağlantısı
 * header.php'de tanımlı .service-link bileşeni yeniden kullanılıyor;
 * burada sadece ortalanma ve dokunma hedefi ayarlanıyor.
 * ------------------------------------------------------------------- */
/* main.css:1058 → .about-section-area .about-boxarea .about-others-box a
   { display: inline-block } . Aynı seçiciyle eziyoruz (eşit özgüllük,
   sonraki dosya kazanır) ki kutu içindeki bağlantılar ortalansın. */
.about-section-area .about-boxarea .about-others-box a {
  display: flex;
  justify-content: center;
}

.about-section-area .about-others-box .service-link {
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-size: var(--ztc-font-size-font-s16);
}

/* Logo da tıklanabilir; hover'da hafif geri bildirim */
.about-section-area .about-others-box > a > img {
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .about-section-area .about-others-box > a:hover > img {
    opacity: 0.85;
  }
}

/* ---------------------------------------------------------------------
 * 6. HAKKIMDA — vurgulu ifadeler
 *
 * main.css:966 → .about-main-boxes p { opacity: 80% }
 * opacity elemanın tamamına uygulandığı için içindeki <strong> asla
 * gövde metninden parlak olamıyor. Şeffaflığı renk kanalına taşıyoruz;
 * böylece <strong> tam parlaklıkta öne çıkabiliyor.
 * ------------------------------------------------------------------- */
.about-section-area .about-boxarea .about-main-boxes p {
  opacity: 1;
  /* color-mix desteklenmezse metin tam parlaklıkta kalır — okunur */
  color: var(--ztc-text-text-1);
  color: color-mix(in srgb, var(--ztc-text-text-1) 78%, transparent);
}

.about-section-area .about-boxarea .about-main-boxes p strong {
  color: var(--ztc-text-text-1);
  font-weight: var(--ztc-weight-semibold);
}

/* ---------------------------------------------------------------------
 * 7. İLETİŞİM FORMU — güven notu
 * Form 3 alana indi; buton altındaki kısa not etkileşimi teşvik ediyor.
 * ------------------------------------------------------------------- */
.contact-section-area .contact-boxarea .form-note {
  /* Renk verilmeyince tarayıcı varsayılanı (koyu) geliyordu ve not
     koyu zeminde okunmuyordu. Kural yazıldığında hiçbir sayfada
     kullanılmıyordu, bu yüzden fark edilmemiş. */
  color: var(--ztc-text-text-1);
  margin-top: 14px;
  margin-bottom: 0;
  font-size: var(--ztc-font-size-font-s14);
  line-height: 1.5;
  opacity: 0.65;
}

/* =====================================================================
 * 8. İKONLAR — SVG <img> yerine Font Awesome glifleri
 *
 * main.css'in ikon boyutlandırma kuralları `img` hedefliyordu ve artık
 * eşleşmiyor. Karşılıkları burada `i` için yazılıyor.
 *
 * Asıl kazanç: glif rengi `color` ile geliyor. main.css'teki
 * `filter: brightness(0)` yamaları (açık tema) bu elemanlarda artık
 * hiçbir şeye denk gelmiyor; aktif/hover renkleri tek bildirimle çözülüyor.
 * ===================================================================== */

/* ---- Masaüstü bölüm rayı (main.css:1354 + 1400-1700px kırılımları) ---- */
.main-hero-area7 .list-group a i {
  font-size: 26px;
  line-height: 1;
  color: var(--ztc-text-text-1);
  transition: all 0.4s;
}

/* main.css bu aralıklarda tile'ı 63/69px'e küçültüyor, ikon da küçülmeli */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .main-hero-area7 .list-group a i {
    font-size: 22px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .main-hero-area7 .list-group a i {
    font-size: 22px;
  }
}

/* Aktif ve hover durumunda tile mavi doluyor — ikon beyaz kalsın.
   Eskiden bu, açık temada `filter: none` yamasıyla yapılıyordu. */
.main-hero-area7 .list-group a.active i {
  color: #fff;
}

@media (hover: hover) {
  .main-hero-area7 .list-group a:hover i {
    color: #fff;
  }
}

/* ---- Butonlardaki ikon (main.css:723 → .vl-btn1 img{margin:-5px 0 0 0}) ---- */
.vl-btn1 i {
  margin-left: 6px;
  font-size: 0.9em;
  line-height: 1;
  transition: all 0.4s;
}

/* ---- Hamburger ---- */
.hamburger_menu i {
  font-size: 22px;
  line-height: 1;
  color: var(--ztc-text-text-1);
}

/* ---- about-us.php değer kartları ----
   main.css: img { position:absolute } + .content-area { padding-left:58px }
   Glif de aynı konumda duracak. */
.about-section-area .about-boxarea .about-boxes2 i {
  position: absolute;
  font-size: 34px;
  line-height: 1;
  width: 40px;
  text-align: center;
  color: var(--ztc-bg-btn-bg1);
}

@media (max-width: 991px) {
  .about-section-area .about-boxarea .about-boxes2 i {
    position: relative;
    display: inline-block;
  }
}

/* =====================================================================
 * 9. PROFİL FOTOĞRAFI ARKAPLANI
 *
 * Profil görseli alfa kanallı bir kesim (WebP VP8X + ALPH), yani arkası
 * şeffaf. Arkasına binary-rain banner konunca kişi zeminden ayrılıyor.
 *
 * Sadece CSS ile yapılıyor — markup'a dokunulmuyor, dolayısıyla profil
 * kartının bulunduğu 15 sayfada birden geçerli.
 *
 * DİKKAT: anasayfa `.main-hero-area7`, diğer sayfalar `.main-hero-area`
 * kullanıyor. Bu yüzden seçiciye hero varyantı YAZILMIYOR — yoksa yalnız
 * bir grup sayfada çalışır.
 *
 * GSAP .reveal animasyonu (main.js:88-108) konteyneri soldan, <img>'i
 * sağdan kaydırıyor. Arkaplan konteynerde olduğu için banner ile kişi
 * ayrı ayrı süzülerek giriyor — animasyonla uyumlu.
 * ===================================================================== */
.personal-contact-box .img1 {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--ztc-bg-bg-1);
  background-image: url("../img/profile-banner.webp");
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

/* Alttan yukarı yumuşak koyulaşma: lacivert takım elbisenin koyu zemine
   gömülmesini engelliyor ve karta derinlik veriyor. */
.personal-contact-box .img1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      120% 65% at 50% 8%,
      rgba(32, 77, 131, 0.35),
      transparent 60%
    ),
    linear-gradient(to bottom, transparent 45%, rgba(6, 12, 24, 0.75) 100%);
  pointer-events: none;
}

/* Fotoğraf gradyanın üstünde kalmalı */
.personal-contact-box .img1 img {
  position: relative;
  z-index: 1;
}

/* =====================================================================
 * 10. PROFİL KARTI YÜKSEKLİĞİ = BÖLÜM RAYI YÜKSEKLİĞİ
 *
 * Kart ile soldaki ikon rayı farklı yüksekliklerde bitiyordu. Metni
 * kısaltmak tek başına yetmiyor: fotoğraf yüksekliği (365/230/280px) ve
 * ray karo boyutu (80/63/69px) kırılımlarda BİRBİRİNDEN BAĞIMSIZ
 * değiştiği için her genişlikte farklı bir açık kalıyor.
 *
 * Çözüm: kartı sabit yükseklikli bir flex kolona çevirip fotoğrafı
 * kalan alanı doldurmaya bırakmak. Böylece kart her kırılımda rayla
 * tam olarak eşit biter; metin uzunluğu yalnızca fotoğrafın ne kadar
 * göründüğünü belirler.
 *
 * Ray yüksekliği = 6 karo + 5 × 16px boşluk (son bağlantıda .m-0 var):
 *   varsayılan   6×80 + 80 = 560px
 *   1400-1599px  6×63 + 80 = 458px
 *   1600-1700px  6×69 + 80 = 494px
 *
 * Yalnız anasayfada ve rayın görünür olduğu ≥1400px'te uygulanır.
 * ===================================================================== */
@media (min-width: 1400px) {
  .main-hero-area7 .personal-contact-box {
    display: flex;
    flex-direction: column;
    height: 560px;
  }

  /* Fotoğraf kalan alanı doldurur */
  .main-hero-area7 .personal-contact-box .img1 {
    flex: 1 1 auto;
    min-height: 0;
  }

  .main-hero-area7 .personal-contact-box .img1 img {
    height: 100%;
    object-position: center;
  }

  /* Sabit yükseklikli öğeler küçülmesin */
  .main-hero-area7 .personal-contact-box > h1,
  .main-hero-area7 .personal-contact-box > p,
  .main-hero-area7 .personal-contact-box > ul,
  .main-hero-area7 .personal-contact-box > [class^="space"] {
    flex: 0 0 auto;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .main-hero-area7 .personal-contact-box {
    height: 520px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .main-hero-area7 .personal-contact-box {
    height: 494px;
  }
}

/* =====================================================================
 * 11. İKON RAYI EKRAN DIŞINA TAŞMASIN
 *
 * main.css: .main-hero-area7 .list-group { left: -100px } (1400-1700: -90px)
 * Ray, kartın soluna sarkıyor; gereken yer container'ın yan boşluğundan
 * geliyor. Bootstrap container'ı kırılımlarda 960 → 1140 → 1320'ye
 * büyüdüğü için yan boşluk her adımda tekrar daralıyor ve ray kırpılıyordu.
 *
 * ≥1400px'te container 1320 sabit; kart sol kenarı = 50vw - 648px.
 * Rayın viewport'a en az 8px mesafede kalması için:
 *     left >= 8 - (50vw - 648)  ->  656px - 50vw
 * max() ile taban değeri koruyoruz: geniş ekranda orijinal -90/-100px,
 * dar tarafta ise ekran kenarına kilitleniyor.
 *
 * <1400px'te ray zaten gizli (mobile.css), yerine alt bar geçiyor.
 * ===================================================================== */
@media only screen and (min-width: 1400px) and (max-width: 1700px) {
  .main-hero-area7 .list-group {
    left: max(-90px, calc(656px - 50vw));
  }
}

@media only screen and (min-width: 1701px) {
  .main-hero-area7 .list-group {
    left: max(-100px, calc(656px - 50vw));
  }
}


/* =====================================================================
 * 12. KATKILARIM — yoğun logo duvarı
 *
 * Önceki hâl: Bootstrap col-lg-3 ile satırda 4 kutu, her logonun altında
 * marka adı. 34 markanın 16'sı gösteriliyordu ve seyrek duruyordu.
 *
 * Yeni: akışkan grid, satırda 6 (mobilde 3). Marka adı kaldırıldı,
 * `alt` ve `title` ile erişilebilirlikte korunuyor. Detaylı liste zaten
 * /referanslar sayfasında.
 * ===================================================================== */
.skill-section-area .brand-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 576px) {
    .skill-section-area .brand-wall {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 768px) {
    .skill-section-area .brand-wall {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .skill-section-area .brand-wall {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Karo: logolar beyaz zeminde daha okunur, temanın 8px yarıçapı korunuyor.
   Kaynak logolar 500x500 kare ve içlerinde hazır kenar boşluğu var; bu yüzden
   karo da kare ve iç dolgu düşük tutuluyor, yoksa logo iki kat boşlukla
   küçücük kalıyor. */
.skill-section-area .brand-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ztc-border-border-2);
    transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.skill-section-area .brand-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (hover: hover) {
    .skill-section-area .brand-tile:hover {
        transform: translateY(-4px);
        border-color: var(--ztc-bg-btn-bg1);
        box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
    }
}

/* Başlık ile duvar arası 80px mobilde fazla */
@media (max-width: 767px) {
    .skill-section-area .space80 {
        height: 40px;
    }
}


/* =====================================================================
 * 13. FAREYİ TAKİP EDEN DAİRE KAPATILDI
 *
 * main.css:4572 .procus-cursor (40px turuncu halka) + .procus-cursor2
 * Her cihazda gizleniyor.
 *
 * Div'ler DOM'da BIRAKILIYOR: main.js:171-204 bu elemanları hiç kontrol
 * etmeden kullanıyor (cursor.style.transform). Silinirlerse her fare
 * hareketinde TypeError fırlar. display:none ile eleman düzen ve boyama
 * dışına çıkıyor, JS ise sorunsuz çalışmaya devam ediyor.
 *
 * Yerel imleç etkilenmiyor: tema hiçbir yerde `cursor: none` kullanmıyor.
 * ===================================================================== */
.procus-cursor,
.procus-cursor2 {
    display: none !important;
}


/* =====================================================================
 * 14. PORTFOLYO — marka rozetli iş kartları
 *
 * Önceki hâl: satırda 2 kart, altında `.portfolio-title` çipinde
 * t_model.model yazıyordu. O alan proje TÜRÜNÜ tutuyor ("Kurumsal
 * Website"), müşteri adını değil; 37 projenin çoğunda aynı metin
 * tekrarlanıyor ve asıl değerli bilgi (hangi marka) hiç görünmüyordu.
 *
 * Yeni: satırda 3 kart, sol üstte marka logosu rozeti (t_marka üzerinden),
 * proje türü hover'daki karartmada. Dokunmatikte hover olmadığı için tür
 * çipi orada hep görünür.
 *
 * Seçiciler bilerek .portfolio-section-area önekli DEĞİL: aynı kartlar
 * hizmet yazısı sayfalarında da (.service-section-area) kullanılıyor.
 * Önekliyken oralarda hiçbir kural tutmuyor ve kartlar dağılıyordu.
 * ===================================================================== */
.work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

/* --- Kart --- */
.work-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--ztc-border-border-2);
    background: var(--ztc-bg-bg2);
    /* kaynak görseller 1920x900 (oran ~2.1); 2/1 en az kırpma demek */
    aspect-ratio: 2 / 1;
    transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.work-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .work-card:hover {
        transform: translateY(-4px);
        border-color: var(--ztc-bg-btn-bg1);
        box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.7);
    }
    .work-card:hover .work-shot {
        transform: scale(1.06);
    }
}

/* --- Marka rozeti (sol üst) --- */
.work-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 5px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.65);
}

.work-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Tür bilgisi + büyüteç --- */
.work-meta {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 30px 14px 12px;
    background: linear-gradient(to top, rgba(6, 12, 24, 0.9), transparent);
    color: #fff;
}

.work-type {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s14);
    font-weight: var(--ztc-weight-medium);
    line-height: 1.3;
}

.work-meta i {
    flex: none;
    font-size: 15px;
    opacity: 0.85;
}

/* Hover'lı cihazlarda gizli dursun, üzerine gelince belirsin */
@media (hover: hover) {
    .work-meta {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.35s, transform 0.35s;
    }
    .work-card:hover .work-meta,
    .work-card:focus-visible .work-meta {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rozet boyutu karta göre ayarlanır. Satırda 3 karta düşülen genişliklerde
   kart en dar hâlini alıyor (1200px'te 225px), rozet orada orantısız
   büyük kalmasın. */
@media (min-width: 1200px) {
    .work-badge {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }
}

@media (min-width: 1600px) {
    .work-badge {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 575.98px) {
    .work-badge {
        width: 44px;
        height: 44px;
        top: 8px;
        left: 8px;
    }
}


/* =====================================================================
 * 15. BÖLÜM ÜST BAŞLIĞI — logo ile metin dikey hizalansın
 *
 * Markup: <h2 class="section-top-title"><img logo><img logo>Hizmetlerim</h2>
 * Satır içi akışta logo ile metin taban çizgisine göre hizalanıyordu.
 *
 * Seçicide `h2` var: header.php'deki inline <style> bu sayfada theme.css'ten
 * SONRA geliyor, eşit özgüllükte o kazanırdı. h2 ile (0,2,1) yapıp geçiyoruz.
 * ===================================================================== */
.heading1 h2.section-top-title {
    display: flex;
    align-items: center;
}

/* =====================================================================
 * 16. PROFİL FOTOĞRAFI KADRAJI (1400–1599px)
 *
 * main.css:1435 bu aralıkta görseli 230px'e kısaltıp `object-position: top`
 * veriyor; kırpma üstten yapılınca yüz kadrajın dışında kalabiliyor.
 * `center` ile kırpma iki uçtan eşit alınıyor, portre ortada duruyor.
 *
 * main.css ortak dosya (view de kullanıyor), bu yüzden orada değil burada
 * geçersiz kılınıyor. theme.css main.css'ten SONRA yükleniyor, aynı
 * seçici + aynı medya sorgusu olduğu için bu kural kazanır.
 * ===================================================================== */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .main-hero-area .personal-contact-box .img1 img {
    -o-object-position: center;
    object-position: center;
  }
}

/* =====================================================================
 * 17. KATKILARIM SAYFASI — marka ızgarası
 *
 * Eskiden Bootstrap kolonlarıyla (col-lg-3) satırda 4 marka vardı ve
 * 35 marka 9 satır tutuyordu. CSS grid ile satırda 5'e çıkıldı, sayfa
 * kısaldı. Grid seçildi çünkü Bootstrap'te 5 eşit kolon yok.
 *
 * Kart görünümü (.skill-boxarea) temanın kendi stili; burada yalnızca
 * daralan kolona uyacak ölçüler geçersiz kılınıyor.
 * ===================================================================== */
.portfolio-section-area .work-intro,
.skill-section-area .brand-intro {
  /* --ztc-text-text-3 diye bir token yok, tanımsız değişken metni
     okunmaz yapıyordu. Temanın paragraf kalıbı text-1.
     Not: opaklık burada işe yaramaz, AOS .aos-animate ile opacity:1 basıyor. */
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  line-height: 30px;
  max-width: 62ch;
}

.portfolio-section-area .work-intro strong,
.skill-section-area .brand-intro strong {
  color: var(--ztc-text-text-1);
  font-weight: var(--ztc-weight-semibold);
}

.skill-section-area .brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

/* 992–1199: içerik kolonu daralıyor, 5 marka sığmıyor */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .skill-section-area .brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 992 altında col-lg-8 tam genişliğe çıktığı için 4 marka rahat sığıyor */
@media only screen and (max-width: 991.98px) {
  .skill-section-area .brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767.98px) {
  .skill-section-area .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Telefonda 2 sütun 35 marka için 18 satır demekti; 3 sütunda 12 satıra
   iniyor ve logo hâlâ ~80px, yani okunur kalıyor. */
@media only screen and (max-width: 479.98px) {
  .skill-section-area .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

/* main.css kartlara margin-bottom:20px veriyor; grid'in kendi gap'i var */
.skill-section-area .brand-grid .skill-boxarea {
  margin-bottom: 0;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* main.css: .icons 100x100 sabit + line-height:100px.
   Dar kolonda taşıyor, bu yüzden akışkan kareye çevriliyor. */
.skill-section-area .brand-grid .skill-boxarea .icons {
  /* Logolar koyu zeminde kayboluyordu; eski markup'ta bu beyaz zemin
     satır içi stildeydi, buraya taşındı. */
  background-color: #fff;
  width: 100%;
  max-width: 96px;
  height: auto;
  aspect-ratio: 1 / 1;
  line-height: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-section-area .brand-grid .skill-boxarea .icons img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* main.css'te line-height:16px; iki satıra düşen uzun marka adlarında
   satırlar üst üste biniyordu. İsim bloğu kartın altına sabitleniyor,
   böylece farklı uzunluktaki adlarda logolar aynı hizada kalıyor. */
.skill-section-area .brand-grid .skill-boxarea p {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.35;
}

@media only screen and (max-width: 767.98px) {
  .skill-section-area .brand-grid .skill-boxarea {
    padding: 12px;
  }

  .skill-section-area .brand-grid .skill-boxarea p {
    font-size: 13px;
  }
}

/* =====================================================================
 * 18. İLETİŞİM — bot tuzağı ve doğrudan iletişim alternatifleri
 * ===================================================================== */

/* Tuzak alanı ekrandan tamamen çıkarılıyor. display:none KULLANILMIYOR:
   bazı botlar gizli alanları atlar, ekran dışına taşınan alanı ise
   normal alan sanıp doldurur. Ekran okuyucular için de aria-hidden
   ve tabindex="-1" ile sıradan çıkarıldı. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-section-area .contact-boxarea .contact-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ztc-border-border-2);
}

.contact-section-area .contact-boxarea .contact-alt span {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  opacity: 0.65;
}

.contact-section-area .contact-boxarea .contact-alt .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* =====================================================================
 * 19. HİZMET YAZISI SAYFASI
 *
 * Uzun metin col-lg-8 içinde akıyor. Eski detay sayfalarında yazı tek
 * blok hâlindeydi ve okuma ritmi yoktu; burada başlık aralıkları,
 * satır yüksekliği, içindekiler ve adım listesi ile yapı veriliyor.
 * ===================================================================== */

/* --- Kırıntı navigasyonu --- */
.service-section-area .service-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
}

.service-section-area .service-breadcrumb a,
.service-section-area .service-breadcrumb span,
.service-section-area .service-breadcrumb i {
  color: var(--ztc-text-text-1);
  opacity: 0.6;
  transition: opacity 0.3s;
}

.service-section-area .service-breadcrumb a:hover {
  opacity: 1;
}

.service-section-area .service-breadcrumb span {
  opacity: 0.95;
}

.service-section-area .service-breadcrumb i {
  font-size: 11px;
}

/* --- Giriş cümlesi --- */
.service-section-area .service-lead {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  line-height: 32px;
  opacity: 0.85;
}

/* --- İçindekiler --- */
.service-section-area .service-toc {
  padding: 22px 24px;
  border: 1px solid var(--ztc-border-border-2);
  border-radius: 8px;
  background: var(--ztc-bg-bg2);
}

.service-section-area .service-toc-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-weight: var(--ztc-weight-semibold);
}

.service-section-area .service-toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-section-area .service-toc-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--ztc-border-border-2);
  border-radius: 999px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  line-height: 1.3;
  opacity: 0.75;
  transition: all 0.3s;
}

.service-section-area .service-toc-links a:hover {
  opacity: 1;
  border-color: var(--ztc-bg-btn-bg1);
  transform: translateY(-2px);
}

/* --- Yazı gövdesi --- */
.service-section-area .service-article h3 {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s32);
  font-weight: var(--ztc-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.5px;
  /* İçindekiler bağlantısıyla atlandığında başlık sayfanın en tepesine
     yapışmasın; üstte nefes payı kalsın. */
  scroll-margin-top: 90px;
  margin-top: 52px;
  margin-bottom: 20px;
}

.service-section-area .service-article h3:first-child {
  margin-top: 0;
}

.service-section-area .service-article p {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: 30px;
  opacity: 0.8;
  margin-bottom: 16px;
}

.service-section-area .service-article p:last-child {
  margin-bottom: 0;
}

/* --- Süreç adımları --- */
.service-section-area .service-steps {
  counter-reset: adim;
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section-area .service-steps > li {
  counter-increment: adim;
  position: relative;
  padding: 0 0 0 62px;
  margin-bottom: 26px;
}

.service-section-area .service-steps > li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ztc-bg-btn-bg1);
  color: #fff;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-semibold);
}

/* Adımları birbirine bağlayan dikey çizgi, sonuncuda yok */
.service-section-area .service-steps > li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50px;
  bottom: -26px;
  width: 1px;
  background: var(--ztc-border-border-2);
}

.service-section-area .service-steps > li:last-child {
  margin-bottom: 0;
}

.service-section-area .service-steps > li:last-child::after {
  display: none;
}

.service-section-area .service-steps h4 {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-semibold);
  line-height: 42px;
  margin-bottom: 6px;
}

/* --- Kimler için uygun listesi --- */
.service-section-area .service-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.service-section-area .service-checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: 28px;
  opacity: 0.8;
}

.service-section-area .service-checklist li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ztc-bg-btn-bg1);
  font-size: 14px;
  line-height: 28px;
}

/* --- Ara başlık (iş örnekleri) --- */
.service-section-area .service-side-title {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s32);
  font-weight: var(--ztc-weight-semibold);
  line-height: 1.3;
}

/* --- Kapanış çağrısı --- */
.service-section-area .service-cta {
  padding: 34px;
  border: 1px solid var(--ztc-border-border-2);
  border-radius: 8px;
  background: var(--ztc-bg-bg2);
}

.service-section-area .service-cta h3 {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s32);
  font-weight: var(--ztc-weight-semibold);
  line-height: 1.3;
}

.service-section-area .service-cta p {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: 28px;
  opacity: 0.8;
}

.service-section-area .service-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

@media only screen and (max-width: 767px) {
  .service-section-area .service-toc,
  .service-section-area .service-cta {
    padding: 20px;
  }

  .service-section-area .service-article h3,
  .service-section-area .service-side-title,
  .service-section-area .service-cta h3 {
    font-size: var(--ztc-font-size-font-s24);
  }

  .service-section-area .service-article h3 {
    margin-top: 40px;
  }

  .service-section-area .service-steps > li {
    padding-left: 52px;
  }

  .service-section-area .service-steps > li::before {
    width: 36px;
    height: 36px;
    font-size: var(--ztc-font-size-font-s16);
  }

  .service-section-area .service-steps > li::after {
    left: 17px;
    top: 44px;
  }

  .service-section-area .service-steps h4 {
    line-height: 36px;
  }
}

/* ---------------------------------------------------------------------
 * 19b. Hizmet yazısı: vurgu kutusu ve düz madde listesi
 *
 * .service-checklist tik ikonlu ve "şunları yapabilirsiniz" anlamı taşıyor.
 * Nötr sıralamalarda (süreç adları, ihtiyaç listeleri) tik yanıltıcı
 * duruyordu, onlar için sade noktalı liste kullanılıyor.
 * ------------------------------------------------------------------- */
.service-section-area .service-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.service-section-area .service-bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: 28px;
  opacity: 0.8;
}

.service-section-area .service-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ztc-bg-btn-bg1);
}

/* Yazının içindeki "şu soruyla değil, bu soruyla" karşıtlığı düz metinde
   kayboluyordu; kutuya alınıp iki soru görsel olarak ayrıldı. */
.service-section-area .service-callout {
  margin: 26px 0;
  padding: 24px 26px;
  border: 1px solid var(--ztc-border-border-2);
  border-left: 3px solid var(--ztc-bg-btn-bg1);
  border-radius: 8px;
  background: var(--ztc-bg-bg2);
}

.service-section-area .service-callout p {
  margin-bottom: 0;
}

.service-section-area .service-callout .service-callout-lead {
  font-size: var(--ztc-font-size-font-s14);
  opacity: 0.6;
  margin-bottom: 14px;
}

.service-section-area .service-callout .service-callout-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-medium);
  line-height: 28px;
  opacity: 1;
}

.service-section-area .service-callout .service-callout-q + .service-callout-q {
  margin-top: 12px;
}

.service-section-area .service-callout .service-callout-q i {
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ztc-bg-btn-bg1);
}

/* Elenen soru: üstü çizili değil, yalnızca soluk. Üstü çizili metin
   ekran okuyucuda ve küçük ekranda okumayı zorlaştırıyor. */
.service-section-area .service-callout .service-callout-q.is-muted {
  opacity: 0.5;
}

.service-section-area .service-callout .service-callout-q.is-muted i {
  color: var(--ztc-text-text-1);
}

@media only screen and (max-width: 767px) {
  .service-section-area .service-callout {
    padding: 18px 20px;
  }

  .service-section-area .service-callout .service-callout-q {
    font-size: var(--ztc-font-size-font-s16);
    line-height: 26px;
  }
}

/* ---------------------------------------------------------------------
 * 19c. Hizmet yazısı: çip listesi ve kutu içi liste
 * ------------------------------------------------------------------- */

/* Tek kelimelik maddeler (Başvurular, Müşteriler, Siparişler...) alt alta
   dizildiğinde 9 satır yer kaplıyordu. Çip olarak iki satıra sığıyorlar. */
.service-section-area .service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.service-section-area .service-tags li {
  padding: 7px 15px;
  border: 1px solid var(--ztc-border-border-2);
  border-radius: 999px;
  background: var(--ztc-bg-bg2);
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  line-height: 1.3;
  opacity: 0.85;
}

/* Vurgu kutusu yalnızca soru listesi taşıdığında alttaki boşluk çift
   sayılmasın (li'nin margin'i + kutunun padding'i). */
.service-section-area .service-callout .service-bullets {
  margin-bottom: 0;
}

.service-section-area .service-callout .service-bullets li:last-child {
  margin-bottom: 0;
}

/* =====================================================================
 * 20. 404 SAYFASI
 *
 * Eski hâl: ortada tek bir "404" ve küçük bir geri dön linki. Ziyaretçi
 * kaybolduğunda gidecek yer sunmuyordu. Artık ana bölümlere kısa yol var.
 *
 * Not: eskiden sarmalayıcıda height:100vh vardı; mobil tarayıcılarda
 * adres çubuğu açılıp kapandıkça yükseklik zıplıyor ve footer ekran
 * dışına itiliyordu. min-height ile bırakıldı.
 * ===================================================================== */
.notfound-area {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0;
}

.notfound-area .notfound-code {
  display: block;
  font-family: var(--ztc-family-font1);
  font-size: 132px;
  font-weight: var(--ztc-weight-bold);
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 18px;
  /* Rakam dekoratif; içeriği bastırmasın diye içi boş bırakıldı. */
  color: transparent;
  -webkit-text-stroke: 2px var(--ztc-border-border-2);
}

.notfound-area h1 {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s48);
  font-weight: var(--ztc-weight-semibold);
  line-height: 1.2;
  letter-spacing: -1px;
}

.notfound-area p {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  line-height: 30px;
  opacity: 0.75;
  max-width: 52ch;
}

.notfound-area .notfound-divider {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  opacity: 0.5;
}

/* Metnin iki yanına ince çizgi */
.notfound-area .notfound-divider::before,
.notfound-area .notfound-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 90px;
  height: 1px;
  background: var(--ztc-border-border-2);
}

.notfound-area .notfound-divider::before {
  left: 0;
}

.notfound-area .notfound-divider::after {
  right: 0;
}

.notfound-area .notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.notfound-area .notfound-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--ztc-border-border-2);
  border-radius: 8px;
  background: var(--ztc-bg-bg2);
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  transition: all 0.3s;
}

.notfound-area .notfound-links a i {
  color: var(--ztc-bg-btn-bg1);
  font-size: 15px;
  transition: all 0.3s;
}

@media (hover: hover) {
  .notfound-area .notfound-links a:hover {
    border-color: var(--ztc-bg-btn-bg1);
    transform: translateY(-3px);
  }
}

@media only screen and (max-width: 767px) {
  .notfound-area {
    min-height: 48vh;
    padding: 40px 0;
  }

  .notfound-area .notfound-code {
    font-size: 92px;
  }

  .notfound-area h1 {
    font-size: var(--ztc-font-size-font-s32);
  }

  .notfound-area .notfound-links a {
    padding: 10px 16px;
    font-size: var(--ztc-font-size-font-s14);
  }

  .notfound-area .notfound-divider::before,
  .notfound-area .notfound-divider::after {
    width: 52px;
  }
}