/* ===========================================================================
   PERACHEM — main.css
   Tek dosya, bölüm bölüm yorumlarla ayrılmış (Zero-Build: derleme/Sass yok).
   Sınıf kuralı: her bileşen `pc-` önekiyle + BEM (.pc-blok, .pc-blok__oge,
   .pc-blok--durum). Yeni bir bileşen eklerken bu dosyaya YENİ bir bölüm başlığı
   aç, var olan bölümlerin arasına gömme. Bkz. proje CLAUDE.md "Bileşen Kayıt
   Defteri" — her bölüm orada da satır satır listelenir.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   RESPONSIVE BREAKPOINT ÖLÇEĞİ — proje genelinde TÜM bileşenler bu 5 değerden
   birini kullanır (CSS custom property @media içinde çalışmadığı için literal
   yazılır, burada sadece referans amaçlı listeleniyor). Yeni bir breakpoint
   İCAT ETME, buradan seç:
     ≤ 380px  → çok küçük telefonlar (iPhone SE 1./2. nesil, eski Android)
     ≤ 480px  → küçük/orta telefonlar
     ≤ 600px  → büyük telefonlar (iPhone Pro Max, çoğu Android)
     ≤ 768px  → tabletler (dikey) / phablet
     ≤ 960px  → tabletler (yatay) / küçük laptop
     (960px üstü: masaüstü, .pc-container zaten 1200px'de sabitleniyor)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   TEMEL / RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; } /* yatay taşma güvenlik ağı — hiçbir bileşen sayfayı yana kaydırmamalı */
body {
  background: #ffffff;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
  /* min-height:100vh — KALICI, doğru çözüm (geçici bir yama DEĞİL). Sayfa henüz çok
     kısa (sadece bar+header, hero/footer yok) olduğu için body'nin doğal yüksekliği
     bir açılır menüyü rahatça içine alamıyordu, bu da menü her açıldığında sayfanın
     GERÇEKTEN scroll'a ihtiyaç duymasına yol açıyordu (kırpma değil, gerçek scroll —
     ama istenmeyen bir görsel gürültüydü). min-height:100vh ile body HER ZAMAN en az
     ekran yüksekliği kadar yer kaplıyor, dropdown'lar (en fazla ~250-300px) bu alana
     rahatça sığıyor. İleride hero/footer eklenip sayfa gerçekten 100vh'den uzun
     olduğunda bu satır ZARARSIZ kalır (bir taban/minimum, tavan değil) — kaldırılması
     GEREKMEZ. */
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; } /* tarayıcı varsayılan link mavisi hiçbir bileşende sızmasın diye */
img { max-width: 100%; height: auto; } /* görseller ASLA ebeveyninden taşmasın */
.pc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 380px) {
  .pc-container { padding: 0 14px; }
}

/* ---------------------------------------------------------------------------
   İKON FONTU — self-hosted Font Awesome Free alt kümesi (açık kaynak, CC BY
   4.0 / SIL OFL 1.1 — üçüncü bir müşteri projesinin markalı varlığı DEĞİL,
   herkese açık bir ikon kütüphanesi). CDN yok, tamamen yerelden yüklenir.
   Şu an sadece topbar için gereken 2 font dosyası (solid + brands) var —
   yeni ikon ailesi (regular) gerekirse assets/fonts/'a eklenip burada
   @font-face tanımlanmalı.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fa-brands-400.woff2") format("woff2");
}
.fa-solid, .fa-brands {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-solid  { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.fa-phone:before        { content: "\f095"; }
.fa-envelope:before     { content: "\f0e0"; }
.fa-whatsapp:before     { content: "\f232"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-xmark:before        { content: "\f00d"; }
.fa-award:before          { content: "\f559"; }
.fa-vial:before           { content: "\f492"; }
.fa-graduation-cap:before { content: "\f19d"; }
.fa-chart-bar:before      { content: "\f080"; }
.fa-arrow-trend-up:before { content: "\e098"; }
.fa-industry:before        { content: "\f275"; }
.fa-bolt:before             { content: "\f0e7"; }
.fa-stethoscope:before      { content: "\f0f1"; }
.fa-truck-fast:before       { content: "\f48b"; }
.fa-palette:before          { content: "\f53f"; }
.fa-hotel:before             { content: "\f594"; }
.fa-bag-shopping:before      { content: "\f290"; }
.fa-spa:before                { content: "\f5bb"; }
.fa-utensils:before          { content: "\f2e7"; }
.fa-building:before          { content: "\f1ad"; }
.fa-arrow-right:before       { content: "\f061"; }

/* ---------------------------------------------------------------------------
   BİLGİ BARI (.pc-topbar) — sayfanın en üstünde, header'ın üzerinde.
   Dosya: views/partials/topbar.php
   İçerik $site (ayarlar tablosu) üzerinden gelir: telefon, whatsapp, email, slogan.
   --------------------------------------------------------------------------- */
.pc-topbar {
  background: #ffffff;
  border-bottom: 1px solid #eaedf1;
  padding: 10px 0;
  font-size: 13px;
  color: #64748b;
}
.pc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pc-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pc-topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  transition: color .2s;
}
.pc-topbar__item:hover { color: #1e293b; }
.pc-topbar__item i { font-size: 13px; color: #1e293b; }
.pc-topbar__item i.fa-whatsapp { color: #25d366; }
.pc-topbar__divider { color: #cbd5e1; }

/* Dil seçici (.pc-topbar__lang) — eski slogan metninin yerinde. HENÜZ İŞLEVSİZ,
   sadece görsel bir açılır menü (bkz. proje CLAUDE.md notu) — TR/EN/AR listeler,
   seçim hiçbir şeyi değiştirmez. JS: assets/js/main.js "BİLGİ BARI — dil seçici" bölümü. */
.pc-topbar__lang { position: relative; flex-shrink: 0; }
.pc-topbar__lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  padding: 4px 2px;
  letter-spacing: .03em;
}
.pc-topbar__lang-toggle i { font-size: 10px; color: #94a3b8; transition: transform .15s; }
.pc-topbar__lang-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.pc-topbar__lang-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #eaedf1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  display: none; /* JS: .pc-topbar__lang-menu--open ekleyip/kaldırıp aç/kapa yapar
    (display:none↔block — .pc-nav__dropdown'da öğrenilen sağlam desen, bkz. CLAUDE.md) */
  z-index: 1000;
}
.pc-topbar__lang-menu--open { display: block; }
.pc-topbar__lang-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: #334155;
  padding: 8px 10px;
  border-radius: 6px;
}
.pc-topbar__lang-option:hover { background: #f8fafc; color: #0f172a; }
.pc-topbar__lang-option--active { color: #0f172a; font-weight: 700; }

@media (max-width: 600px) {
  /* Dar ekranda yatay tek satıra sığmıyordu — "|" ayraçları bir sonraki satıra
     taşan öğeden koparak boşlukta asılı kalıyordu (bkz. proje CLAUDE.md notu).
     Çözüm: madde madde alt alta değil, TEK SATIR + tel/whatsapp/mail arasında
     birkaç saniyede bir otomatik geçiş yapan bir gösterge (carousel) — her an
     sadece BİRİ görünür, dil seçici sağda sabit kalır. JS: assets/js/main.js
     "BİLGİ BARI — mobil carousel" bölümü, `.pc-topbar__item--active` sınıfını
     sırayla öğeler arasında dolaştırır.
     YUMUŞAK GEÇİŞ: display:none↔flex ANİNDEN değişir, transition ETKİSİ YOKTUR —
     bu yüzden burada display DEĞİL, opacity crossfade kullanılıyor. Öğeler
     position:absolute ile üst üste bindirilip sadece opacity ile gösterilip
     gizleniyor (bkz. proje CLAUDE.md "çat çat geçiş" notu). */
  .pc-topbar__inner { flex-wrap: nowrap; }
  .pc-topbar__left {
    position: relative;
    height: 20px;
    flex: 1;
    min-width: 0; /* flex item'ın içeriğe göre taşmasını (metin sarmalanmasını) önler */
  }
  .pc-topbar__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;    /* "+90 544..." iki satıra BÖLÜNMESİN diye zorunlu */
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
  }
  .pc-topbar__item--active {
    opacity: 1;
    pointer-events: auto;
  }
  .pc-topbar__divider { display: none; }
}

/* ---------------------------------------------------------------------------
   HEADER (.pc-header) — logo + navigasyon + "Teklif Al" CTA + mobil hamburger.
   Dosya: views/partials/header.php | JS: assets/js/main.js ("HEADER — mobil menü" bölümü)
   Renk notu: marka aksan rengi HENÜZ netleşmedi — CTA butonu ve aktif link rengi
   bilinçli olarak NÖTR (koyu gri-lacivert #1e293b) bırakıldı, gerçek marka rengi
   netleşince tek satır değişecek (bkz. CLAUDE.md "Düzeltme — logo aslında görünüyor" notu).
   Sticky: header scroll ile birlikte üstte SABİT kalır (.pc-topbar sabit DEĞİL, normal
   akışta — kaydırınca bilgi barı kaybolur ama header/nav hep görünür kalır, standart
   kurumsal site deseni).
   --------------------------------------------------------------------------- */
.pc-header {
  background: #ffffff;
  border-bottom: 1px solid #eaedf1;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 500;
}
.pc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* KRİTİK: mobilde .pc-nav position:fixed olunca flex akışından
    tamamen çıkıyor — geriye sadece logo+hamburger kalıyor, bu olmadan ikisi flex-start'ta
    yan yana yapışıp sağda kocaman boş alan bırakıyordu (bkz. proje CLAUDE.md notu) */
  gap: 2rem;
}
.pc-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.pc-header__logo img { height: 40px; width: auto; display: block; }

.pc-nav { flex: 1; }
.pc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.pc-nav__item { position: relative; }
.pc-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e293b;
  padding: 8px 0;
}
.pc-nav__link i { font-size: 11px; color: #94a3b8; transition: transform .2s; }
.pc-nav__link:hover { color: #0f172a; }
.pc-nav__link--active { color: #0f172a; }

/* display:none→block arasında normal `transition` ÇALIŞMAZ (tarayıcı ara değer
   hesaplayamaz) — bunun yerine `animation` kullanılıyor, çünkü animation display
   block OLDUKTAN SONRA çalışır, "çat çat" değil yumuşak bir açılış sağlar. Kapanış
   animasyonsuz/anlık kalıyor (display:none anında olur) — bu KASITLI bir ödünleşim,
   güvenilirlik için (bkz. proje CLAUDE.md "yağ gibi" notu). */
@keyframes pcDropdownAcil {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pc-nav__dropdown {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%; /* linke BİTİŞİK — aradaki boşluk fare ":hover" alanının dışına çıkıp
                menünün erken kapanmasına yol açıyordu, bkz. proje CLAUDE.md notu */
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #eaedf1;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  /* KASITLI OLARAK EN BASİT/SAĞLAM YÖNTEM: display:none ↔ display:block.
     Önceki turlarda opacity/visibility/transform/max-height'in KARIŞIK kombinasyonu
     birkaç kez "kutu görünüyor ama içi boş" / "arkada kalıyor" gibi kırılgan
     hatalara yol açtı (bkz. proje CLAUDE.md "Bileşen Kayıt Defteri" notu). display:none
     KAPALIYKEN öğeyi render ağacından TAMAMEN çıkarır — hiçbir overflow/z-index/opacity
     belirsizliği KALMAZ, tartışmaya yer yok. Bedeli: fade-in animasyonu yok, ama
     güvenilirlik önceliğimiz. Sabit max-height/overflow de YOK — kutu kendi içeriği
     kadar (auto), sığmazsa sayfa NORMAL şekilde scroll olur (kırpma/gizleme yapmaz). */
  display: none;
  z-index: 1000;
}
.pc-nav__dropdown-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #334155;
}
.pc-nav__dropdown-link:hover { background: #f8fafc; color: #0f172a; }

@media (hover: hover) {
  .pc-nav__item--dropdown:hover .pc-nav__dropdown { display: block; animation: pcDropdownAcil .18s ease; }
  .pc-nav__item--dropdown:hover .pc-nav__link i { transform: rotate(180deg); }
}
.pc-nav__item--open .pc-nav__dropdown { display: block; animation: pcDropdownAcil .18s ease; }
.pc-nav__item--open .pc-nav__link i { transform: rotate(180deg); }

.pc-header__cta {
  flex-shrink: 0;
  background: #1e293b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  transition: background .2s;
}
.pc-header__cta:hover { background: #334155; }

.pc-header__toggle {
  /* Daha "kibar"/ince bir hamburger — dokunma alanı (36x36) korunuyor ama görsel
     çizgiler daha kısa/ince, referans site (Chemsoll) örneğine yakın (bkz. CLAUDE.md). */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.pc-header__toggle-bar {
  width: 19px;
  height: 1.5px;
  background: #334155;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.pc-header__toggle--open .pc-header__toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.pc-header__toggle--open .pc-header__toggle-bar:nth-child(2) { opacity: 0; }
.pc-header__toggle--open .pc-header__toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.pc-nav__mobile-head { display: none; } /* masaüstünde yok, sadece mobil panelde başlık+kapat satırı */
.pc-nav__close {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 16px;
}

@media (max-width: 960px) {
  .pc-header__toggle { display: flex; }
  .pc-header__cta { display: none; }

  .pc-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(300px, 85vw);
    background: #ffffff;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .12);
    padding: 0 0 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 999;
  }
  .pc-nav--open { transform: translateX(0); }

  /* Üstte boş alan bırakmıyoruz — panel doğrudan LOGO (header'daki ile birebir aynı
     görsel, $pcLogo) + kapat (X) butonuyla başlıyor. "Menü" yazısı yerine gerçek logo
     kondu ki panel header'a görsel olarak "bağlı" hissettirsin (bkz. proje CLAUDE.md). */
  .pc-nav__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
  }
  .pc-nav__mobile-logo { display: flex; align-items: center; }
  .pc-nav__mobile-logo img { height: 32px; width: auto; display: block; }

  .pc-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 20px; }
  .pc-nav__item { border-bottom: 1px solid #f1f5f9; }
  .pc-nav__link { width: 100%; justify-content: space-between; padding: 14px 4px; }

  /* Mobilde position:static (kendi paneli içinde, sayfa scroll'undan bağımsız) —
     bu yüzden max-height GEÇİŞİ burada GÜVENLİ (masaüstündeki position:absolute
     sürümünde aynı teknik sayfa scroll sorunlarına yol açmıştı, bkz. CLAUDE.md).
     box-sizing:border-box sayesinde max-height:0 iken padding de görünmez, sabit
     padding'i her durumda aynı tutmak "açılınca zıplama" riskini de ortadan kaldırıyor. */
  .pc-nav__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 12px;
    display: block;
    max-height: 0;
    overflow: hidden;
    min-width: 0;
    transition: max-height .25s ease;
  }
  .pc-nav__item--open .pc-nav__dropdown { max-height: 300px; }

  .pc-header__mobile-cta {
    display: block;
    margin: 16px 20px 0;
    text-align: center;
    background: #1e293b;
    color: #ffffff;
    font-weight: 700;
    padding: 12px;
    border-radius: 8px;
  }
}
.pc-header__mobile-cta { display: none; }

@media (max-width: 380px) {
  /* çok küçük ekranlarda (iPhone SE vb.) logo + hamburger arasındaki boşluk
     daralıyor — logo hafifçe küçültülüp header padding'i azaltılıyor */
  .pc-header { padding: 10px 0; }
  .pc-header__logo img { height: 32px; }
  .pc-nav { width: min(270px, 88vw); }
}

.pc-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 998;
}
.pc-nav__overlay--open { display: block; }

/* ---------------------------------------------------------------------------
   HERO SLIDER (.pc-hero) — ana sayfanın en üstü, header'ın HEMEN ALTINDA
   (header'ın arkasına/üstüne binmiyor — bilinçli karar, bkz. proje CLAUDE.md
   "Header İlişkisi" notu: header'ı şeffaf/overlay yapmak yeniden risk demekti).
   Dosya: views/partials/hero.php | JS: assets/js/main.js "HERO — slider" bölümü.
   Veri: hero_slaytlar tablosu (henüz admin CRUD'ı yok, ileride eklenecek).
   GÖRSEL NOTU: gerçek fabrika/ürün fotoğrafı henüz YOK — `gorsel_url` boşsa
   aşağıdaki nötr endüstriyel gradient placeholder gösteriliyor. Admin panelden
   (ileride) bir slayta gerçek görsel URL'si girilirse, o slaytın `.pc-hero__bg`'sine
   inline `background-image` yazılır ve gradient'in ÜSTÜNE biner — kod hiç
   değişmeden gerçek fotoğrafa geçer.
   --------------------------------------------------------------------------- */
.pc-hero {
  position: relative;
  overflow: hidden;
  min-height: min(620px, 82vh);
}
.pc-hero__slides {
  position: relative;
  width: 100%;
  min-height: inherit;
}
.pc-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.pc-hero__slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.pc-hero__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, #0f172a 0%, #1e3a4c 50%, #0f4c5c 100%);
  background-size: cover;
  background-position: center;
}
.pc-hero__bg::before {
  /* Metin okunabilirliği için karartma katmanı — sol taraf koyu (metin üstü),
     sağa doğru açılıyor. Gerçek fotoğraf gelince de aynı katman üstünde çalışır. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 15, 28, .85) 0%, rgba(8, 15, 28, .55) 55%, rgba(8, 15, 28, .25) 100%);
}
.pc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.pc-hero__text { max-width: 560px; color: #ffffff; }
.pc-hero__title {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.pc-hero__desc {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #e2e8f0;
  max-width: 480px;
  margin: 0 0 1.75rem;
}
.pc-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  font-size: .95rem;
  padding: .9rem 1.8rem;
  border-radius: 999px;
  transition: transform .2s, box-shadow .2s;
}
.pc-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
}

.pc-hero__dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.pc-hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.pc-hero__dot:hover { background: rgba(255, 255, 255, .7); }
.pc-hero__dot--active { background: #ffffff; transform: scale(1.3); }

@media (max-width: 768px) {
  .pc-hero { min-height: min(520px, 78vh); }
  .pc-hero__text { max-width: 100%; }
  .pc-hero__desc { max-width: 100%; }
}
@media (max-width: 480px) {
  .pc-hero { min-height: min(460px, 74vh); }
  .pc-hero__dots { bottom: 14px; }
}

/* ---------------------------------------------------------------------------
   GÜVEN BARI (.pc-trust) — hero slider'ın hemen altında, ISO sertifikaları +
   "neden biz" maddeleri. Dosya: views/partials/trust.php.
   Veri: model('GuvenMaddesi')->tumunuGetir() → guven_maddeleri tablosu.
   İçerik perachem.com.tr'den doğrulanmış GERÇEK bilgi — uydurma istatistik yok.
   --------------------------------------------------------------------------- */
.pc-trust {
  background: #f8fafc;
  border-bottom: 1px solid #eaedf1;
  padding: 22px 0;
}
.pc-trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* space-between — .pc-container header'la AYNI (max-width:1200px + padding:0 20px),
     bu yüzden ilk/son madde header'daki logo/CTA ile aynı sol-sağ hizada başlar/biter
     (kullanıcı geri bildirimi: "header'ımızla aynı hizada olsun"). */
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.pc-trust__item {
  position: relative; /* tooltip'in konumlandığı yer */
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  cursor: pointer; /* tıkla-aç HER boyutta çalışıyor, imleç de bunu yansıtmalı */
  line-height: 1;
}
.pc-trust__item i {
  font-size: 1.1rem;
  color: #0f4c5c;
  flex-shrink: 0;
}
.pc-trust__chevron {
  /* Satırın tıklanıp açılabilir olduğunu gösteren ipucu — masaüstü DAHİL her
     boyutta görünür, durum değişince (hover VEYA tıkla-aç) döner. */
  font-size: .7rem !important;
  color: #94a3b8 !important;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.pc-trust__item--open .pc-trust__chevron { transform: rotate(180deg); }
@media (hover: hover) {
  .pc-trust__item:hover .pc-trust__chevron { transform: rotate(180deg); }
}

/* Hover tooltip — perachem.com.tr'deki gerçek "Neden Biz" açıklama cümleleri
   (bkz. guven_maddeleri.aciklama, proje CLAUDE.md). Küçük/sabit boyutlu bir öğe
   olduğu için (dropdown'ların aksine) opacity+visibility burada GÜVENLİ, sayfa
   scroll'una katkı riski yok (bkz. Header/Dropdown bölümündeki uzun hata avı notu
   — o sorun BÜYÜK, viewport'u aşabilen içerikle ilgiliydi, bu tek satırlık tooltip
   asla o boyuta ulaşmaz). */
.pc-trust__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  background: #0f172a;
  color: #f1f5f9;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  padding: .6rem .8rem;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 20;
}
.pc-trust__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
@media (hover: hover) {
  .pc-trust__item:hover .pc-trust__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
/* Tıkla-aç desteği (dokunmatik/hover'sız cihazlar için) — JS `.pc-trust__item--open`
   class'ını ekler/kaldırır (assets/js/main.js "GÜVEN BARI — tıkla-aç tooltip" bölümü).
   @media(hover:hover) DIŞINDA, TÜM ekran boyutlarında geçerli — masaüstünde hover zaten
   çalışıyor, bu sadece hover'ı OLMAYAN cihazlar için ek bir yol, çakışma yaratmaz. */
.pc-trust__item--open .pc-trust__tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  /* Masaüstündeki yatay+wrap düzeni dar ekranda düzensiz/karışık görünüyordu
     (farklı uzunluktaki maddeler rastgele satırlara bölünüyordu, bkz. proje
     CLAUDE.md notu). Çözüm: TEK SÜTUN dikey liste — her madde kendi satırında,
     öngörülebilir ve düzenli. Tooltip de floating kutu yerine (mobilde konumlandırma/
     taşma riski taşır) maddenin ALTINDA açılan basit bir metin bloğuna çevrildi —
     nav akordeonuyla AYNI güvenli desen (position:static + max-height geçişi). */
  .pc-trust__inner { flex-direction: column; align-items: stretch; gap: 0; }
  .pc-trust__item {
    width: 100%;
    flex-wrap: wrap;
    white-space: normal; /* uzun başlıklar (ISO satırı gibi) tek satırda taşmasın, sarsın */
    padding: .8rem 0;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
  }
  .pc-trust__item:last-child { border-bottom: none; }
  /* Satır tam genişlik olduğu için chevron'u SAĞ KENARA yaslıyoruz — masaüstünde
     (yukarıdaki genel kuralda) chevron zaten metnin hemen yanında duruyor, oradaki
     item kendi içeriği kadar dar olduğundan margin-left:auto etkisiz/gereksiz. */
  .pc-trust__chevron { margin-left: auto; }
  .pc-trust__tooltip {
    /* Önceki hata max-height'in KENDİSİ değildi — .pc-trust__item--open için
       masaüstünden miras kalan `transform: translateX(-50%)...` sızıntısıydı
       (aşağıdaki --open kuralında kalıcı olarak sıfırlandı). Kök neden düzeldiğine
       göre max-height + opacity geçişiyle yumuşak aç/kapa GÜVENLE geri getirildi —
       display:none kullanılmıyor (transition'ı engeller), her zaman block, görünürlük
       max-height:0↔120px ile kontrol ediliyor. */
    display: block;
    position: static; /* masaüstündeki position:absolute'ü ezer — mobilde normal akışta */
    flex-basis: 100%; /* flex satırında kendi tam satırını alsın */
    width: 100%;
    max-width: none;
    background: transparent;
    color: #64748b;
    box-shadow: none;
    font-weight: 400;
    font-size: .8rem;
    line-height: 1.5;
    white-space: normal;
    padding: 0;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
  }
  .pc-trust__tooltip::after { display: none; }
  .pc-trust__item--open .pc-trust__tooltip {
    /* transform'u BURADA da (--open durumunda, aynı 2-class özgüllükte) açıkça
       sıfırlamak zorunlu — masaüstü için tanımlı genel `.pc-trust__item--open
       .pc-trust__tooltip { transform: translateX(-50%)... }` kuralı aynı özgüllükte
       olduğu için taban kuraldaki transform:none'ı EZEBİLİR, sıra önemli değil
       (bkz. proje CLAUDE.md "kaymış metin" hata notu — bu satırın neden burada
       olduğunun tam açıklaması orada). */
    max-height: 120px;
    opacity: 1;
    margin-top: .35rem;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 480px) {
  .pc-trust { padding: 8px 0; }
  .pc-trust__item { font-size: .88rem; }
}

/* ---------------------------------------------------------------------------
   ORTAK ALT-DESEN: .pc-section-head — bir bölümün üstündeki "başlık (sol) +
   alt yazı (sağ)" satırı. Sektörler için kuruldu ama BİLEREK genel/paylaşılan
   bir yardımcı sınıf — ileride Ürünler/Blog/Referanslar gibi bölümler de AYNI
   sınıfı kullanmalı, kopya CSS yazılmamalı (bkz. proje CLAUDE.md).
   Sol: başlık + altında ince ayraç çizgisi. Sağ: alt yazı — kullanıcı talebiyle
   ortalı bloktan bu iki-uçlu (space-between) düzene çevrildi (2026-08-12). */
.pc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin: 0 0 3rem;
}
.pc-section-head__left { text-align: left; }
.pc-section-head__title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .7rem;
  text-align: left;
}
.pc-section-head__separator {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #0f4c5c;
}
.pc-section-head__subtitle {
  font-size: 1rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
  text-align: right;
  max-width: 420px;
}
@media (max-width: 768px) {
  /* İki-uçlu satır dar ekranda sıkışıyor — sol hizalı, alt alta düzene dönüyor
     (ortalı DEĞİL, kullanıcının "ortalı olmasın" talebi mobilde de geçerli). */
  .pc-section-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .pc-section-head__subtitle { text-align: left; max-width: none; }
}
@media (max-width: 480px) {
  .pc-section-head { margin-bottom: 2.25rem; }
  .pc-section-head__title { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   SEKTÖRLER (.pc-sectors) — güven barının hemen altında.
   Dosya: views/partials/sectors.php · Model: app/models/Sektor.php
   İçerik perachem.com.tr'nin eski sitesindeki 11 sektörden alındı (kullanıcının
   paylaştığı ham HTML), tasarım BİREBİR kopya değil — CSS Grid + kendi kart
   dilimiz. Bölüm arka planı BEYAZ (Hero'nun koyu fotoğrafı → Güven Barı'nın açık
   gri (#f8fafc) → burası beyaz, sayfa boyunca görsel nefes ritmi) — ama kartların
   KENDİSİ artık fotoğraf arka planlı + koyu gradient overlay'li (kullanıcı talebiyle,
   "arkasına görsel" — bkz. CLAUDE.md "Sektörler — Kart Arka Plan Görselleri" notu).
   gorsel_url boşsa `background-color` (koyu lacivert) fallback olarak kalır.
   --------------------------------------------------------------------------- */
.pc-sectors {
  background: #ffffff;
  padding: 4rem 0;
}
.pc-sectors__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.pc-sectors__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 270px;
  border-radius: 14px;
  padding: 1.6rem 1.4rem;
  color: #ffffff;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pc-sectors__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, .1) 0%, rgba(15, 23, 42, .55) 55%, rgba(15, 23, 42, .92) 100%);
}
@media (hover: hover) {
  /* dokunmatik cihazda sticky-hover olmasın diye — proje genelinde uygulanan kural */
  .pc-sectors__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .28);
  }
  .pc-sectors__card:hover .pc-sectors__link i { transform: translateX(3px); }
}
.pc-sectors__title,
.pc-sectors__desc,
.pc-sectors__link {
  position: relative;
  z-index: 2;
}
.pc-sectors__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 .4rem;
}
.pc-sectors__desc {
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 1rem;
}
.pc-sectors__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pc-sectors__link i { font-size: .7rem; transition: transform .2s ease; }

@media (max-width: 960px) {
  .pc-sectors__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pc-sectors { padding: 3rem 0; }
  .pc-sectors__grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .pc-sectors__card { min-height: 220px; padding: 1.3rem 1.1rem; }
}
@media (max-width: 480px) {
  .pc-sectors__grid { grid-template-columns: 1fr; }
  .pc-sectors__card { min-height: 200px; }
}

/* ---------------------------------------------------------------------------
   BLOG (.pc-blog) — Sektörler'in hemen altında.
   Dosya: views/partials/blog.php (ŞİMDİLİK STATİK — hiçbir model/DB'ye bağlı
   değil, bkz. dosyanın kendi yorumu ve proje CLAUDE.md). Arka plan #f8fafc ile
   Sektörler'in beyazından ayrışıp sayfa ritmini sürdürüyor (Güven Barı'nda
   kurulan aynı "açık gri ara katman" mantığı).
   Yatay kaydırmalı kart şeridi: masaüstünde .pc-blog__arrows (sağ üstte, ok
   butonları) ile scrollBy tetiklenir; ≤768px'te oklar tamamen gizlenir, kart
   şeridi doğrudan parmakla kaydırılır (scroll-snap ile karta yapışır) — Ok
   butonu dokunmatik cihazda gereksiz, native kaydırma zaten var.
   --------------------------------------------------------------------------- */
.pc-blog {
  background: #f8fafc;
  padding: 4rem 0;
}
.pc-blog__head-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pc-blog__arrows {
  display: flex;
  gap: .6rem;
  flex-shrink: 0;
}
.pc-blog__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pc-blog__arrow i { font-size: .8rem; display: block; }
.pc-blog__arrow--prev i { transform: scaleX(-1); } /* tek ikon (fa-arrow-right) ayna çevrilip "geri" yapılıyor — ayrı bir sol-ok glyph'i font altkümesinde yok */
@media (hover: hover) {
  .pc-blog__arrow:hover { background: #0f4c5c; border-color: #0f4c5c; color: #ffffff; }
}

.pc-blog__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .3rem;
  scrollbar-width: none; /* Firefox */
}
.pc-blog__track::-webkit-scrollbar { display: none; } /* Chrome/Edge/Safari */

.pc-blog__card {
  scroll-snap-align: start;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
  .pc-blog__card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15, 23, 42, .12); }
  .pc-blog__card:hover .pc-blog__link i { transform: translateX(3px); }
}
.pc-blog__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
}
.pc-blog__badge {
  position: absolute;
  top: .9rem;
  left: .9rem;
  background: #0f4c5c;
  color: #ffffff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 50px;
}
.pc-blog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.3rem 1.5rem;
}
.pc-blog__date {
  font-size: .75rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: .5rem;
}
.pc-blog__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin: 0 0 .6rem;
}
.pc-blog__title a { color: inherit; }
@media (hover: hover) {
  .pc-blog__title a:hover { color: #0f4c5c; }
}
.pc-blog__excerpt {
  font-size: .85rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 1.1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-blog__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: auto;
}
.pc-blog__link i { font-size: .7rem; transition: transform .2s ease; }

@media (max-width: 960px) {
  .pc-blog__card { flex-basis: 280px; }
}
@media (max-width: 768px) {
  .pc-blog { padding: 3rem 0; }
  .pc-blog__head-right { justify-content: flex-start; width: 100%; }
  .pc-blog__arrows { display: none; } /* dokunmatik cihazda ok gereksiz — şerit doğrudan parmakla kaydırılır */
  .pc-blog__track { gap: 1rem; }
  .pc-blog__card { flex-basis: 78%; } /* bilerek küçük bir "peek" bırakılıyor — sonraki kartın kenarı görünüp kaydırılabilir olduğunu ima ediyor */
}
@media (max-width: 480px) {
  .pc-blog__card { flex-basis: 85%; }
  .pc-blog__body { padding: 1.1rem 1.1rem 1.3rem; }
}