/* ============================================================================
   AFR AYARI ADANA — TASARIM SİSTEMİ / DÜZELTME KATMANI
   ----------------------------------------------------------------------------
   Bu dosya sitenin görsel dilini TEK yerde toplar. Sebebi:

   Sitede üç ayrı kuşak stil üst üste binmiş durumdaydı ve üçü de farklı bir
   kırmızı kullanıyordu:
     1) Marka kırmızısı   #C21F12  (Atiker/BRC tabelasındaki gerçek renk)
     2) Eski "arm" teması #e11d48 · #be123c · #fb7185   (gül/crimson)
     3) İçerik içine gömülü #B76E79 · #7E2D45 · #C98A97 (gül kurusu)

   Sonuç: aynı sayfada birbirini tutmayan kırmızılar, "Ara" butonunun bordo
   çıkması, buton ve başlıkların birbirinden kopuk görünmesi.

   Burada tek bir ölçek (tipografi), tek bir palet ve tek bir yüzey dili
   tanımlanıyor. Dosya, head'deki diğer stillerden SONRA yükleniyor
   (page.php → inline_min_css_multi listesinin sonunda), böylece çakışmalarda
   bu dosya kazanır ve tek dosya geri alınarak eski hâle dönülebilir.
   ========================================================================= */

:root{
  /* ---- Marka paleti (tek kaynak) ---- */
  --oh-red:#C21F12;
  --oh-red-dark:#8E0E00;
  --oh-red-darker:#6B0A00;
  --oh-red-light:#E0675C;
  --oh-red-tint:#FBEDEB;

  /* ---- Mürekkep / yüzey ---- */
  --oh-ink:#141A42;          /* ana başlık rengi */
  --oh-ink-2:#363C5A;        /* gövde metni */
  --oh-ink-3:#5A6080;        /* ikincil / muted */
  --oh-line:#E4E7EC;         /* ayırıcı çizgi */
  --oh-surface:#FFFFFF;
  --oh-surface-2:#F7F8FA;    /* hafif gri bölüm zemini */

  /* ---- Tipografi ölçeği (tek ramp) ---------------------------------------
     Daha önce her bölüm kendi ölçüsünü kullanıyordu: h1 47px/w800 solda,
     bölüm h2'si 33px/w900 ortada, kart başlığı 24px/w600 solda...
     Aşağıdaki ramp bunları tek bir düzene bağlar. */
  --fs-h1:clamp(30px, 3.4vw, 46px);
  --fs-h2:clamp(24px, 2.5vw, 34px);
  --fs-h3:clamp(19px, 1.6vw, 23px);
  --fs-body:clamp(16px, 1.05vw, 18px);
  --fs-small:15px;
  --fs-eyebrow:12.5px;

  --lh-tight:1.12;
  --lh-head:1.2;
  --lh-body:1.65;

  /* ---- Ritim ---- */
  --oh-radius:14px;
  --oh-radius-lg:20px;
  --oh-shadow:0 8px 24px rgba(16,20,28,.07);
  --oh-shadow-lift:0 14px 36px rgba(16,20,28,.11);

  /* ---- Okuma genişliği ----
     Gövde metni ~75 karakteri geçince göz satır sonundan satır başına
     dönmekte zorlanır. Uzun paragraflar bu ölçüyle sınırlanıyor.

     DİKKAT: burada `ch` KULLANILMIYOR. `ch` birimi "0" rakamının
     genişliğidir; Plus Jakarta Sans'ta bu 12px iken metnin gerçek
     ortalama karakter genişliği 7.05px (16px punto ile ölçüldü).
     Yani 68ch = 816px = ~116 karakter ederdi — hedefin tam tersi.
     `em` kullanılıyor: 31em ≈ 70 karakter ve punto ile birlikte
     ölçekleniyor. */
  --oh-measure:31em;
}

/* =========================================================================
   1) ESKİ PALETLERİN NÖTRLENMESİ
   Eski tema değişkenleri hâlâ birçok dosyada okunuyor; değerlerini marka
   paletine bağlayarak o dosyaları tek tek düzenlemeye gerek kalmıyor.
   ========================================================================= */
:root{
  --arm-rose:var(--oh-red);
  --arm-rose-dark:var(--oh-red-dark);
  --arm-ink:var(--oh-ink);
  --arm-border:var(--oh-line);
}

/* Bootstrap "danger" ve eski gül tonlu butonlar → marka kırmızısı.
   app.css bu kuralları !important ile kilitlediği için burada da gerekiyor. */
.btn-danger,
.btn-danger:focus{
  background:var(--oh-red) !important;
  border-color:var(--oh-red) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.btn-danger:hover,
.btn-danger:active{
  background:var(--oh-red-dark) !important;
  border-color:var(--oh-red-dark) !important;
}
.btn-outline-danger{
  border-color:var(--oh-red) !important;
  color:var(--oh-red) !important;
}
.btn-outline-danger:hover{
  background:var(--oh-red) !important;
  color:#fff !important;
}
.text-danger,
.text-danger-emphasis{ color:var(--oh-red) !important; }

/* =========================================================================
   2) NAVBAR
   NOT: Navbar düzeltmeleri BU DOSYADA DEĞİL, assets/css/oh-navbar.css
   içindedir. Sebebi: navbar.php o dosyayı <style> olarak GÖVDEYE gömüyor,
   yani head'deki bu dosyadan sonra geliyor ve cascade'i o kazanıyor.
   Kuralı buraya yazsaydık sessizce ezilirdi.
   ========================================================================= */

/* =========================================================================
   3) TİPOGRAFİ — TEK RAMP
   ========================================================================= */
.oh-below-title,
.uo-title{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--oh-ink);
  text-wrap:balance;
}
.oh-below-eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oh-red);
}
.oh-below-text p{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--oh-ink-2);
  max-width:var(--oh-measure);
}
.oh-below-note{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--oh-ink-3);
  max-width:var(--oh-measure);
}

/* Bölüm başlıkları (Son Eklenen Hizmetler / Ürünler) aynı ölçeğe girer */
.home-svc-title{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--oh-ink);
}
.home-svc-sub{
  font-size:var(--fs-small);
  color:var(--oh-ink-3);
}

/* İçerik blokları: başlık ağırlığı 900 → 800, gövde ölçüsü sınırlanıyor.
   900 ağırlık Plus Jakarta Sans'ta çok "bağıran" bir tona düşüyordu ve
   sayfadaki diğer başlıklarla (800) uyuşmuyordu. */
.page-card .content h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--oh-ink);
  text-wrap:balance;
}
.page-card .content h3{
  font-size:var(--fs-h3);
  line-height:1.3;
  font-weight:700;
  color:var(--oh-ink);
}
.page-card .content p,
.page-card .content li{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--oh-ink-2);
}

/* Ortalanmış uzun paragraflar: ortalama kalıyor ama satır uzunluğu
   sınırlanıyor. 900px genişliğinde ortalanmış metin okunmuyordu. */
/* Not: doğrudan-çocuk (>) seçici kullanılmıyor — paragraflar çoğu yerde
   bir ara sarmalayıcının (ör. .lr-products-head) içinde duruyor. */
.page-card .content .text-center p,
.page-card .content .text-center .lead{
  max-width:var(--oh-measure);
  margin-left:auto;
  margin-right:auto;
}

/* --- ID ile kapsanmış içerik bölümleri -------------------------------------
   Sayfa içeriğine gömülü <style> blokları seçicilerini ID ile kapsıyor
   (#marka-lpg-sistemleri, #qs-search — toplam 30 kural). ID taşıyan bir
   seçiciyi kaç sınıf eklersek ekleyelim geçemeyiz; bu yüzden aşağıdaki
   kurallar da ID içeriyor ve bir sınıf daha ekleyerek öne geçiyor.

   Burada bölümün TASARIMI değiştirilmiyor — büyük harfli, ağır başlık
   gibi bilinçli tercihler olduğu gibi bırakılıyor. Yalnız OKUNABİLİRLİK
   düzeltiliyor: açıklama paragrafı 900px genişlikte, ortalanmış ve
   15.68px idi; satır başına ~115 karakter düşüyordu (rahat okuma aralığı
   45-75). Ölçü daraltılıp punto 16px'e çekiliyor.

   Kalıcı çözüm bu değil: doğrusu admin > sayfa içeriğindeki gömülü
   <style> bloğunu düzeltmek. Bu kural o yapılana kadar geçerli. */
.content #marka-lpg-sistemleri .lr-products-subtitle{
  max-width:var(--oh-measure);
  font-size:1rem;
  line-height:1.7;
}
.content #marka-lpg-sistemleri .lr-products-head{
  max-width:none;
}

/* Kart içindeki metin ortalı kalır (kartın kendi düzeni öyle kurulmuş),
   yalnız satır uzunluğu sınırlanır — dar kartta 5-6 satır ortalanmış metin
   satır başlarını kaybettiriyordu. */
.page-card .content article p,
.page-card .content .card p{
  max-width:46ch;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================================
   4) MARKA LOGO ŞERİDİ (slider altı)
   Logolar farklı en-boy oranlarında geldiği için daire içinde farklı
   ölçeklerde duruyordu. Ortak bir optik kutu veriliyor.
   ========================================================================= */
.oh-brandstrip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2.4vw, 34px);
}
.oh-brand img{
  max-height:38px;
  width:auto;
  object-fit:contain;
}

/* =========================================================================
   5) FOOTER — KOLON DENGESİ
   ----------------------------------------------------------------------
   Üç kolon eşit yükseklikte geriliyordu (365px) ama listeler 6 / 4 / 10
   maddeydi. İlk iki kolonun altında ~180px ve ~240px boşluk kalıyor,
   ayırıcı çizgiler bu boşluğun içinden geçtiği için hata gibi duruyordu.
   Uzun liste iki sütuna bölünerek yükseklikler yakınsıyor.
   ========================================================================= */
@media (min-width:901px){
  .uysal-grid{ align-items:start; }
  /* En uzun liste (LPG Markalar) iki sütuna akar */
  .uysal-col:nth-child(3) .uysal-links{
    columns:2;
    column-gap:20px;
  }
  .uysal-col:nth-child(3) .uysal-links li{
    break-inside:avoid;
  }
  /* Ayırıcı çizgiler artık boşlukta asılı kalmasın */
  .uysal-col + .uysal-col{
    border-left:1px solid var(--oh-line);
    align-self:stretch;
  }
}
.uysal-col h6{
  font-size:var(--fs-small);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--oh-ink);
}
.uysal-links li::before{ color:var(--oh-red); }
.uysal-links a{ color:var(--oh-ink-2); opacity:1; }
.uysal-links a:hover{ color:var(--oh-red); text-decoration:none; }

/* =========================================================================
   6) KARANLIK MOD SIZINTISI — DÜZELTME
   ----------------------------------------------------------------------
   content-blocks.css içinde bir @media (prefers-color-scheme: dark) bloğu
   var ve içerik kartlarının zeminini lacivert (#0b1220) yapıyordu. Sitenin
   geri kalanının karanlık modu YOK; telefonu koyu temada olan ziyaretçi
   beyaz sayfanın ortasında lacivert kartlar görüyordu.
   Site tek temalı olduğu için o blok burada geri alınıyor.
   ========================================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --cb-bg:#ffffff;
    --cb-border:#e5e7eb;
    --cb-text:#0f172a;
    --cb-muted:#6b7280;
    --cb-shadow:0 10px 30px rgba(2,6,23,.08);
  }
  .content-feature-card,
  .content-mini-card,
  .page-card .content .content-feature-card,
  .page-card .content .content-mini-card{
    background:#fff;
    color:#0f172a;
    box-shadow:0 10px 30px rgba(2,6,23,.08);
  }
}

/* =========================================================================
   7) ODAK GÖRÜNÜRLÜĞÜ (klavye erişilebilirliği)
   Sitede odak halkası birçok yerde kaldırılmıştı; klavyeyle gezen
   ziyaretçi nerede olduğunu göremiyordu.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--oh-red);
  outline-offset:2px;
  border-radius:4px;
}
/* Hero üstünde odak halkası beyaz olmalı, kırmızı fotoğrafta kayboluyor */
.arm-nav.oh-nav-hero:not(.oh-scrolled) a:focus-visible,
.arm-nav.oh-nav-hero:not(.oh-scrolled) button:focus-visible{
  outline-color:#fff;
}

/* "İçeriğe atla" bağlantısı: sr-only olduğu için odaklanınca da
   görünmüyordu. Klavye kullanıcısı için görünür hâle getiriliyor. */
a.sr-only:focus,
a.sr-only:focus-visible{
  position:fixed !important;
  left:16px; top:16px;
  width:auto !important;
  height:auto !important;
  padding:12px 18px;
  margin:0 !important;
  clip:auto !important;
  clip-path:none !important;
  overflow:visible !important;
  white-space:nowrap;
  z-index:2000;
  background:var(--oh-red);
  color:#fff;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}

/* =========================================================================
   8) DOKUNMA HEDEFLERİ (mobil)
   Ölçümde 86 tıklanabilir öğenin 38'i 40px'in altındaydı. Telefonda
   parmakla isabet ettirmek zordu.
   ========================================================================= */
@media (max-width:991.98px){
  .uysal-links a,
  .arm-m-pill,
  .oh-m-socials a{
    display:flex;
    align-items:center;
    min-height:44px;
  }
  .uysal-links li{ margin:.15rem 0; }
}

/* =========================================================================
   9) MOBİL TİPOGRAFİ
   H1 telefonda 24px'e düşüyordu; sayfanın ana başlığı için fazla küçüktü.
   ========================================================================= */
@media (max-width:600px){
  :root{
    --fs-h1:clamp(27px, 8vw, 34px);
    --fs-h2:clamp(21px, 6vw, 26px);
    --fs-body:16.5px;
  }
  .oh-below-title,
  .uo-title{ letter-spacing:-.015em; }
  /* Telefonda ortalanmış uzun metin daha da zor okunuyor. Dar ekranda
     ortalı metnin satır başları her satırda kayıyor ve göz satırı
     kaybediyor; sola yaslanınca taranabilir hâle geliyor. */
  .page-card .content .text-center p{
    text-align:left;
    max-width:none;
  }
  /* Başlıklar ortalı kalır — kısa oldukları için sorun çıkarmıyorlar. */
  .page-card .content .text-center h2,
  .page-card .content .text-center h3{ text-align:center; }

  /* Gövde metni telefonda 15.68px'e düşüyordu. Bu ölçüyü içeriğin İÇİNE
     gömülü <style> dayatıyor; o blok gövdede olduğu için head'deki bu
     dosyayı cascade'de yeniyor. Yalnız telefon genişliğinde ve yalnız
     bu tek özellik için !important kullanılıyor — 16px, rahat okuma
     için pratikteki alt sınır. */
  .page-card .content p,
  .page-card .content li{ font-size:16.5px !important; line-height:1.65 !important; }

  /* ID ile kapsanmış bölümler telefonda da sola yaslanır (yukarıdaki
     açıklamaya bakınız — ID'yi ancak ID ile geçebiliyoruz). */
  .content #marka-lpg-sistemleri .lr-products-subtitle,
  .content #marka-lpg-sistemleri .lr-products-title{
    text-align:left;
    max-width:none;
  }
}

/* =========================================================================
   10) HAREKET AZALTMA TERCİHİ
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .arm-nav .arm-pill::before,
  .arm-nav.oh-nav-hero::before{ transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* Kurumsal sayfalar alt gezinme (Hakkımızda · Misyonumuz · Vizyonumuz · Değerlerimiz,
   02.10.2026): düz bağlantı satırı yerine hap düğmeler; noktalar gizli. */
.oh-kur-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0 !important; padding-top:16px; border-top:1px dashed #E7E9EC; font-size:0 !important; line-height:0; color:transparent !important; }
.oh-kur-nav a{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:#F6F7F8; border:1px solid #E7E9EC;
  color:#15181A !important; font-size:14px !important; line-height:1.3; font-weight:700; text-decoration:none !important; transition:background-color .15s, color .15s, border-color .15s; }
.oh-kur-nav a:hover{ background:#FDECEE; border-color:#F9D3D7; color:#C21F12 !important; }

/* =========================================================================
   AFR AYARI ADANA — MARKA KATMANI (16.10.2026)
   Logo paleti: lacivert #141A42 · kırmızı #A81D0E (vurgu #C21F12).
   ========================================================================= */
:root{ --afr-navy:#141A42; --afr-navy-2:#1F2A66; --afr-red:#C21F12; }

/* Sıkça sorulan sorular (pages.faq_json → {{faq}} / anasayfa SSS bölümü) */
.afr-faq{ display:grid; gap:10px; margin:18px 0 8px; }
.afr-faq-item{ border:1px solid var(--oh-line); border-radius:var(--oh-radius); background:#fff; box-shadow:var(--oh-shadow); overflow:hidden; }
.afr-faq-item summary{ list-style:none; cursor:pointer; padding:16px 52px 16px 18px; font-weight:700; color:var(--afr-navy); position:relative; line-height:1.4; }
.afr-faq-item summary::-webkit-details-marker{ display:none; }
.afr-faq-item summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--oh-red-tint); color:var(--afr-red); font-weight:800; font-size:18px; line-height:1; transition:transform .2s ease; }
.afr-faq-item[open] summary::after{ content:"–"; }
.afr-faq-item[open] summary{ border-bottom:1px solid var(--oh-line); }
.afr-faq-item p{ margin:0; padding:14px 18px 18px; color:var(--oh-ink-2); }
.afr-faq-wrap{ max-width:900px; margin-inline:auto; }

/* Videolar sayfası */
.afr-video-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; margin:18px 0 26px; }
.afr-video{ margin:0; background:var(--afr-navy); border-radius:var(--oh-radius); overflow:hidden; box-shadow:var(--oh-shadow); }
.afr-video video{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#0b0f2a; }
.afr-video figcaption{ padding:10px 12px 12px; color:#fff; font-weight:600; font-size:14.5px; line-height:1.35; }
@media (max-width:575.98px){ .afr-video-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .afr-video figcaption{ font-size:13px; padding:8px 10px 10px; } }