/* ==========================================================================
   5G Panorama — Canvas teması üzerine marka katmanı

   style.css (Canvas) olduğu gibi bırakılır; markaya özgü ne varsa burada
   tanımlanır. Böylece tema güncellenirse bu dosya korunur.

   Palet logo.svg'den:  lacivert #35398E · koyu #14152D
   ========================================================================== */

:root {
    --cnvs-themecolor:     #35398E;
    --cnvs-themecolor-rgb: 53, 57, 142;

    --pnr-ink:    #14152D;
    --pnr-accent: #35398E;
}

/* Açılır menü genişliği. Elimizdeki style.css eski torosandpartners.com
   kopyasından geldiği için bu değer Canvas'ın özgün 240px'i yerine 140px
   yapılmıştı. Canvas alt menü bağlantısını hover'da kalınlaştırdığı
   (font-weight 600 → 700) için uzun başlıklar — "İNŞAAT VE TAAHHÜT" — o dar
   kutuya sığmayıp alt satıra kayıyordu. Özgün değere döndürüldü.

   Değişken style.css'te `#header` üzerinde tanımlı; `:root` ile ezilmez,
   aynı seçicide karşılanması gerekir. */
#header {
    --cnvs-primary-menu-submenu-width: 240px;
}

/* --------------------------------------------------------------------------
   Logo — SVG oranı 1034.6 × 283.5 (3.65:1)

   Canvas başlığı kaydırıldığında küçülür (sticky-header). Logonun her iki
   durumda da taşmaması için yükseklik açıkça sabitlenir.
   -------------------------------------------------------------------------- */

/* Canvas logoyu `height: var(--cnvs-header-height)` ile başlık yüksekliğine
   eşitler. Bizim logomuzun içinde boşluk payı olmadığı için bu onu taşırır;
   aşağıdaki kurallar aynı seçiciyi daha spesifik biçimde ezer. */

/* Canvas'ta başlığın yüksekliğini menü bağlantılarının dikey boşluğu belirler
   ve bu boşluk başlık yüksekliği değişkeninden türetilir:
       --cnvs-primary-menu-padding-y: (--cnvs-sticky-header-height - 22px) / 2
   Kaydırınca değişken 120px'ten 60px'e iner, `.menu-link` üzerindeki
   `transition: padding .4s ease` sayesinde başlık yumuşakça küçülür.

   Elimizdeki style.css eski torosandpartners.com kopyasından geldiği için bu
   satır orada yorum içine alınmıştı; boşluk sabit kalıyor, başlık kaydırma
   anında zıplayarak küçülüyordu. Aşağıdaki satır Canvas'ın özgün davranışını
   geri getirir. (Bkz. Canvas 7.3.1 style.css → `.is-expanded-menu .menu-link`) */
.is-expanded-menu .menu-link {
    --cnvs-primary-menu-padding-y: calc(calc(var(--cnvs-sticky-header-height) - 22px) * 0.5);
}

#header #logo { display: flex; align-items: center; }

/* Başlıkta ikon görsel, ad/unvan/slogan metindir — bunları yan yana dizer. */
#header #logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    text-decoration: none;
}

/* Canvas logoyu başlık yüksekliğine eşitler; bizim logomuzda iç boşluk payı
   olmadığı için bu onu taşırır. Sabit yükseklik veriyoruz — başlığın kendisi
   yukarıdaki menü boşluğundan doğduğu için küçülme yine çalışır. */
#header #header-wrap #logo img {
    height: 40px; width: auto;
    max-width: none; max-height: none;
}

/* --------------------------------------------------------------------------
   Logo yazısı — ad + ticari unvan + slogan

   Üç bilgi üç ayrı ölçekte: ad baskın, unvan sessiz, slogan marka renginde.
   Böylece birbiriyle yarışmadan tek bakışta okunuyor. Slogan aynı zamanda
   "5G" adının telekom çağrışımını kapatıyor.
   -------------------------------------------------------------------------- */

.pnr-logotype {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    color: var(--pnr-ink);
    transition: gap .4s ease, color .3s ease;
}

/* Ad, logo ikonunun zemin rengini taşır — yazı ile rozet tek parça okunur.
   Harfler birbirine yanaştırıldı: geniş aralık adı dağıtıyordu. */
.pnr-logotype__ad {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pnr-accent);
    transition: font-size .4s ease, color .3s ease;
}

/* Ticari unvan adın altında, ayrı satırda. Harf aralığı adınkine yakın
   tutuldu ki iki satır aynı ritimde okunsun. */
.pnr-logotype__unvan {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .34em;
    color: rgba(20, 21, 45, .55);
    transition: font-size .4s ease, color .3s ease;
}

.pnr-logotype__slogan {
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pnr-accent);
    transition: font-size .4s ease, color .3s ease;
}

/* Koyu zemin (anasayfa slaytı) — Canvas `#header.dark` ile işaretler,
   ikonun açık sürümünü de aynı koşulla değiştirir. */
#header.dark #logo .pnr-logotype        { color: #fff; }
#header.dark #logo .pnr-logotype__unvan { color: rgba(255, 255, 255, .6); }
#header.dark #logo .pnr-logotype__slogan{ color: rgba(255, 255, 255, .78); }

/* Ad kendi rengini taşıdığı için üstteki kalıtım ona işlemez; koyu zeminde
   marka mavisi okunmaz, bu yüzden ayrıca beyaza çevriliyor. */
#header.dark #logo .pnr-logotype__ad    { color: #fff; }

/* Kapaklı iç sayfada başlık koyu bir görselin üstüne biner. Bulunulan sayfanın
   menü öğesi marka mavisinde kaldığı için koyu zeminde okunmuyordu.
   `:not(.sticky-header)` şart: sayfa kaydırılıp başlık beyaz zemine
   döndüğünde bu kural devre dışı kalmalı, yoksa yazı beyaz üstünde beyaz olur. */
#header.dark:not(.sticky-header) .menu-item.current > .menu-link,
#header.dark:not(.sticky-header) .menu-item > .menu-link:hover {
    color: #fff;
}

/* Başlık küçülürken yazı da orantılı iner (geçiş süresi logoyla aynı). */
.is-expanded-menu #header.sticky-header-shrink #logo .pnr-logotype         { gap: 3px; }
.is-expanded-menu #header.sticky-header-shrink #logo .pnr-logotype__ad     { font-size: 14.5px; }
.is-expanded-menu #header.sticky-header-shrink #logo .pnr-logotype__unvan  { font-size: 8px; }
.is-expanded-menu #header.sticky-header-shrink #logo .pnr-logotype__slogan { font-size: 7px; }

/* Dar ekranda slogan yer bırakmıyor; ad ve unvan kalır. */
@media (max-width: 767px) {
    #header #logo a { gap: 9px; }
    .pnr-logotype__slogan { display: none; }
    .pnr-logotype__ad { font-size: 15px; letter-spacing: .08em; }
    .pnr-logotype__unvan { font-size: 8px; }
}

@media (max-width: 419px) {
    .pnr-logotype__ad { font-size: 13px; letter-spacing: .06em; }
}

/* Başlık küçülürken logo da küçülür (geçişi Canvas veriyor: height .4s ease).
   Yalnızca `sticky-header-shrink` durumunda — `sticky-header` tek başına
   başlığı küçültmez, logo da küçülmemeli. */
.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
    height: 30px;
}

/* NOT: Mobilde logo görselini küçülten bir kural YOK. Eskiden 991px altında
   30px'e indiriliyordu; bu, başlık bandını da beraberinde çökertip bandı
   referans tasarımdan 28px alçak bırakıyordu (bkz. aşağıdaki bölüm). */

/* --------------------------------------------------------------------------
   Hamburger menülü (dar) başlık — yükseklik

   `data-menu-breakpoint="1200"` ile 1200px altında menü hamburgere döner.
   Canvas'ta başlık yüksekliği menü bağlantılarının dikey dolgusundan doğar;
   menü hamburgere dönünce o dolgu ortadan kalkar. Canvas'ın kendi logosu
   `height: var(--cnvs-header-height)` ile başlık yüksekliğini takip ettiği
   için orada bir boşluk oluşmaz — bizde logo sabit yükseklikte olduğundan
   başlık logo boyuna (30px) büzülüyor, logo ve hamburger sıkışık duruyordu.

   Çözüm, yüksekliği TAŞIYAN öğeyi düzeltmek. `flex-wrap` KESİNLİKLE
   değiştirilmez: Canvas mobilde menüyü (`nav.primary-menu`) alt satıra sarmak
   için wrap'e güvenir; `nowrap` verilirse menü aynı satırda yer kaplar ve
   hamburger sağa yaslanamaz.

   Yüksekliği `#logo` kutusu taşıyor, `.header-row` değil. Sebebi: satır
   sarmalı olduğu için satıra verilen `min-height` menü açılınca menü
   tarafından karşılanır ve üst bant kendi doğal boyuna (40px) çöker —
   hamburgere basınca logo yukarı zıplardı. `#logo` ilk satırın içinde
   olduğundan bandı her iki durumda da ayakta tutar.

   Değer `var(--cnvs-header-height)`: `#header` zaten bu kadar yer ayırıyor,
   bant da tam onu doldursun. Sabit bir sayı (72px gibi) yazılırsa görünen
   çubuk, ayrılan yerden alçak kalır ve başlık "küçülmüş" görünür — referans
   tasarımda (Canvas'ın kendi logosu `height: var(--cnvs-header-height)`
   olduğu için) bant 100px'tir.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    #header #header-wrap #logo { min-height: var(--cnvs-header-height); }
}

/* NOT: .logo-default / .logo-dark görünürlüğü Canvas tarafından yönetilir
   (şeffaf başlıkta açık sürüm, beyaz başlıkta koyu sürüm). Buraya
   `display` kuralı YAZILMAMALI — yazılırsa iki logo üst üste biner. */

/* --------------------------------------------------------------------------
   Slider imleçleri

   Canvas, slaytın sol ve sağ yarısını tıklanabilir alan yapar ve imleç olarak
   özel bir ok ikonu gösterir. Ancak style.css bu ikonları mutlak `/images/...`
   yolundan çağırıyor; bizde görseller `/assets/img/` altında olduğu için ikon
   yüklenemiyor ve tarayıcı yedek `e-resize` (çift yönlü ok) imlecine düşüyordu.
   Aşağıdaki kurallar yalnızca yolu düzeltir; davranış orijinaliyle aynıdır.

   İkonun kendisi ince, keskin köşeli bir chevron (bkz. assets/img/arrow-*.svg).
   Önceki çizim içi dolu bir ok başıydı ve mimarlık sitelerinin sade dilinden
   ayrı duruyordu. Hotspot 12 20 — çizimin tam ortası; okun ucu değil merkezi
   imleç noktasıdır, yön hissi böyle daha doğru.
   -------------------------------------------------------------------------- */

/* `?v=2`: .htaccess görselleri bir yıl önbelleğe aldırıyor ve CSS içindeki
   `url()` adresleri PHP'nin `?v=filemtime` damgasından geçmiyor. Çizim
   değiştiğinde bu sayı da artırılmalı, yoksa daha önce siteye girmiş
   ziyaretçiler eski oku görmeye devam eder. */
.slider-arrow-left  { cursor: url(/assets/img/arrow-left.svg?v=2) 12 20, w-resize; }
.slider-arrow-right { cursor: url(/assets/img/arrow-right.svg?v=2) 12 20, e-resize; }

/* Basılı tutarken ikon değişir */
.slider-arrow-left:active  { cursor: url(/assets/img/arrow-left-click.svg?v=2) 12 20, w-resize; }
.slider-arrow-right:active { cursor: url(/assets/img/arrow-right-click.svg?v=2) 12 20, e-resize; }

/* --------------------------------------------------------------------------
   Slayttaki aşağı ok — her ekranda görünür

   Canvas 576px altında `.one-page-arrow`'u `display: none !important` ile
   gizliyor. Telefonda slayt tam ekran olduğu için ziyaretçinin altta bir şey
   olduğunu anlamasının tek işareti bu ok: gizlenince sayaç bandı ve projeler
   ancak tesadüfen kaydırınca bulunuyordu. `!important` şart — Canvas'ın kuralı
   da öyle yazılmış.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .one-page-arrow { display: block !important; }
}

/* Dokunmatik cihazlarda imleç kavramı yok; oklar da gereksiz yer kaplamasın. */
@media (hover: none) {
    .slider-arrow-left,
    .slider-arrow-right { cursor: default; }
}

/* --------------------------------------------------------------------------
   Hakkımızda kapağı — tam genişlik görsel/video başlık

   Yapı Canvas'ın kendi demolarını izler (page-title-video.html,
   shape-dividers.html): min-vh-75 + dikey padding, arka plan `.parallax-bg`.
   Bu yüzden yerleşim için ek kurala gerek yok; yalnızca başlık boyutu
   ve karartma rengi markaya göre ayarlanır.
   -------------------------------------------------------------------------- */

/* Canvas, page-title başlığına kendi renk değişkenini uygular; koyu kapakta
   yazının okunması için açık renge sabitliyoruz (span dahil — metin
   text-rotater içindeyken iç span'e düşer). */
.page-title.vh-75.dark .vertical-middle h1,
.page-title.vh-75.dark .vertical-middle h1 span {
    color: #fff;
}

.page-title.vh-75.dark .vertical-middle h1 {
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

/* Kapak görseli bölümü tam kaplasın (Canvas .parallax-bg). */
.page-title.vh-75 > .parallax-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

/* --------------------------------------------------------------------------
   Proje durumu rozeti — portfolyo görselinin sol üstünde durur.
   Canvas'ta karşılığı olmadığı için burada tanımlanır.
   -------------------------------------------------------------------------- */

.portfolio-image { position: relative; }

.badge-status {
    position: absolute; top: 1rem; left: 1rem; z-index: 3;
    padding: .3rem .85rem;
    font-size: .6875rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: rgba(20, 21, 45, .82);
    pointer-events: none;
}
.badge-status--ongoing   { background: var(--pnr-accent); }
.badge-status--completed { background: rgba(20, 21, 45, .82); }
.badge-status--planned   { background: rgba(20, 21, 45, .55); }

/* --------------------------------------------------------------------------
   Proje künyesi — detay sayfasında sağ sütun

   Etiket solda sessiz, değer sağda baskın; satırlar ince çizgiyle ayrılır.
   Sayısal değerler (alan, bağımsız bölüm) sağa yaslı olduğu için basamaklar
   alt alta hizalanır ve karşılaştırmak kolaylaşır.
   -------------------------------------------------------------------------- */

.pnr-specs__status {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .35rem .9rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20, 21, 45, .82);
    border-radius: 2px;
}
.pnr-specs__status--ongoing   { background: var(--pnr-accent); }
.pnr-specs__status--completed { background: rgba(20, 21, 45, .82); }
.pnr-specs__status--planned   { background: rgba(20, 21, 45, .5); }

.pnr-specs__list {
    margin: 0;
    border-top: 1px solid rgba(20, 21, 45, .1);
}

.pnr-specs__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(20, 21, 45, .1);
}

.pnr-specs__row dt {
    margin: 0;
    /* Flex öğesinin varsayılan `min-width: auto` değeri, uzun metnin sarmasını
       engelleyip satırı taşırır — sayfada yatay kaydırma çubuğu doğar.
       `min-width: 0` sarmayı serbest bırakır. */
    min-width: 0;
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(20, 21, 45, .55);
}

.pnr-specs__row dd {
    margin: 0;
    min-width: 0;
    /* Uzun değerler ("Kentsel dönüşüm · lüks konut ve işyeri") sarsın. */
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pnr-ink);
    /* Rakamlar sabit genişlikte dizilsin: 48.000 m² ile 300 alt alta hizalanır. */
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   İletişim bilgileri — ikonlu, etiketli satırlar

   Önceden adres, iki telefon ve e-posta etiketsiz düz satırlar hâlindeydi;
   ziyaretçi hangi numaranın ne olduğunu ya da adresin nerede bittiğini
   ayırt edemiyordu. Her bilgi artık kendi satırında: solda marka renginde
   yuvarlak ikon, sağda küçük harf etiketi ve değeri.
   -------------------------------------------------------------------------- */
.pnr-iletisim {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.pnr-iletisim__satir {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.pnr-iletisim__ikon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(53, 57, 142, .08);
    color: #35398E;
    font-size: .95rem;
}

.pnr-iletisim__govde {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pnr-iletisim__etiket {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8A8BA0;
}

/* Değerler bağlantı da olabilir düz metin de; ikisi de aynı görünür. */
.pnr-iletisim__deger {
    color: #14152D;
    font-size: 1rem;
    line-height: 1.45;
    text-decoration: none;
    word-break: break-word;
}

a.pnr-iletisim__deger:hover { color: #35398E; }

.pnr-iletisim__ek {
    font-size: .82rem;
    color: #6B6D85;
    text-decoration: none;
}

a.pnr-iletisim__ek { color: #35398E; }
a.pnr-iletisim__ek:hover { text-decoration: underline; }

/* Giriş metni. Sol kenarı altındaki "Bize Ulaşın" başlığıyla hizalı; sağdan
   yalnızca satır okunamayacak kadar uzamasın diye sınırlanıyor. Ölçü geniş
   tutuldu bilerek: dar bir kolon metni dikeyde uzatıp asıl istenen şeyi —
   formun ve adresin ekranda erken görünmesini — geciktiriyordu.
   Son paragrafın alt boşluğu, iki bloğu yaklaştırmak için kırpılıyor. */
.pnr-iletisim-giris { max-width: 96ch; }
.pnr-iletisim-giris > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   İletişim haritası
   -------------------------------------------------------------------------- */

.pnr-map {
    position: relative;
    /* Sabit yükseklik yerine oran: dar ekranda harita ezilmiyor. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(20, 21, 45, .05);
}

.pnr-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 992px) {
    .pnr-map { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   İletişim sayfası — iki sütunun eşit bitmesi

   Sol sütun (bilgiler + harita) formdan yaklaşık iki yüz piksel uzun
   bitiyordu; sayfanın altında formun sağında geniş bir boşluk kalıyor,
   bölüm yamuk duruyordu. Sütun bir flex kolonuna çevrildi ve harita kalan
   boşluğu doldurmakla görevlendirildi: iki sütun artık aynı çizgide biter.

   Yalnızca sütunların yan yana durduğu genişlikte (lg ve üstü) geçerli;
   altında sütunlar alt alta geçtiği için harita kendi oranına döner.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .pnr-iletisim-sutun {
        display: flex;
        flex-direction: column;
    }

    /* Harita esner; `aspect-ratio` devreden çıkar, alt sınır onun yerini alır
       ki kısa bir formda harita şerit gibi ezilmesin.

       Alt sınır bilerek düşük: sütunun DOĞAL yüksekliği formunkini aşarsa
       eşitlenecek taraf form olur ve sağda boşluk kalır. Düşük tutulunca sol
       sütun kısa kalır, satır formun boyunu alır ve harita aradaki farkı
       yutar — iki sütun aynı çizgide biter. */
    .pnr-iletisim-sutun .pnr-map {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 120px;
    }
}

.pnr-map__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pnr-accent);
}
.pnr-map__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Anasayfa slaytı — buton tıklanabilirliği

   Sorun: slayttaki düğme tıklanamıyordu. Sebep katman sırası değil, yığın
   bağlamıydı: `.swiper-wrapper` transform taşıdığı için kendi bağlamını kurar
   ve z-index'i 1'dir. Caption'a verilen z-index:20 o bağlamın İÇİNDE kalır,
   dışarıdaki `.slider-arrow-*` (z-index:10) ile karşılaştırılmaz. Sonuç:
   görünmez, yarım ekranı kaplayan oklar düğmenin üstünde duruyordu.

   (Bu oklar Canvas'ın özgün kutu oklarının eski torosandpartners kurulumunda
   "görünmez + yarım ekran + özel imleç" hâline getirilmiş sürümü.)

   Çözüm: sarmalayıcı okların üstüne çıkarılır, ama slayt ve caption tıklamayı
   YUTMAZ — yalnızca gerçek bağlantılar tıklama alır. Böylece düğme çalışır,
   boş alana tıklandığında ok işlevi de korunur.
   -------------------------------------------------------------------------- */

#slider .swiper-wrapper { z-index: 11; }

/* Sarmalayıcı, slayt ve caption tıklamayı geçirir; altlarındaki görünmez
   gezinme okları çalışmaya devam eder. Swiper'ın dokunma sürüklemesi
   `.swiper` kapsayıcısında dinlendiği için bundan etkilenmez. */
#slider .swiper-wrapper,
#slider .swiper-slide,
#slider .slider-caption { pointer-events: none; }

#slider .slider-caption a,
#slider .slider-caption button { pointer-events: auto; }

/* Slayttaki düğme, caption'ın genişliği kadar uzuyordu: `.slider-caption`
   flex-column ve varsayılan hizalaması `stretch`, düğme de blok seviyesinde.
   İçeriği kadar genişlesin — hizası slaydın metin hizasını izler. */
#slider .slider-caption a.button {
    align-self: flex-start;
    width: auto;
}
#slider .slider-caption-center a.button { align-self: center; }
#slider .slider-caption.text-end a.button { align-self: flex-end; }

/* Panelden yüklenen (YouTube olmayan) slayt videosu.
 *
 * Canvas'ın html5video eklentisi videoyu "kaplasın" diye satır içi
 * `width/height/left` yazıyor, ama yüksekliği PENCEREYE göre hesaplıyor
 * (ör. 855px), slaydın yüksekliğine göre değil (641px). Slayt tam ekran
 * olmadığından video taşıyor ve altı kırpılıyordu.
 *
 * `object-fit: cover` bu hesabı tarayıcı tarafında zaten doğru yapar; en boy
 * oranı korunur, fazlalık ortadan kırpılır. Bu yüzden eklentinin satır içi
 * değerleri geçersiz kılınıyor — satır içi stili ancak `!important` yener. */
#slider .video-wrap video {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover;
}

/* Slayt başlığı — Canvas'ın varsayılanı bu tasarım için fazla iri kalıyordu. */
#slider .slider-caption h2 {
    font-size: 56px;
    line-height: 1.1;
}

@media (max-width: 991px) {
    #slider .slider-caption h2 { font-size: 40px; }
}

@media (max-width: 575px) {
    #slider .slider-caption h2 { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Slayt yazı kutusunun genişliği

   Canvas kutuyu 550px'de sınırlıyor. "Geleceği İnşa Ediyoruz" 56px puntoda tek
   satır için 577px istiyor — 27px eksik kalıyor ve "Ediyoruz" tek başına alt
   satıra düşüyordu. Kutu 680px'e çıkarıldı: bugünkü başlıklar tek satıra
   sığıyor, panelden biraz daha uzun bir başlık girilse de yeri var.

   Paragraf ayrıca 550px'de tutuluyor: kutunun tamamını kullansa satırlar
   okunamayacak kadar uzardı (tek satıra dizilse 978px sürüyor). Kural yalnızca
   geniş ekranda — dar ekranda puntolar zaten küçülüyor ve kutu viewport'a göre
   daralıyor.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    #slider .slider-caption   { max-width: 680px; }
    #slider .slider-caption p { max-width: 550px; }
}

/* Slayt açıklaması. Canvas bu paragrafı 576px altında viewport genişliğine göre
   akışkan küçültüyor ve telefonda okunmaz hâle geliyordu: 345px ekranda 9.4px,
   375px'te 10.1px. Sabit bir taban veriyoruz — 16px, mobil gövde metninin
   standart boyu. Masaüstündeki 24px'e dokunulmuyor. */
@media (max-width: 575px) {
    #slider .slider-caption p {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Menüde harf aralığı Canvas varsayılanından (0.3rem) daha dar: uzun
   başlıklar ("FAALİYETLER", "HAKKIMIZDA") yan yana daha derli toplu duruyor. */
#header .menu-link { --cnvs-primary-menu-ls: 0.16rem; }

/* --------------------------------------------------------------------------
   Proje detayında sağ kolon — kaydırırken göz önünde kalır

   Solda uzun bir görsel ızgarası, sağda künye ve açıklama var. Görseller
   kaydırılırken metnin ekrandan çıkması, okuyucuyu hangi projeye baktığını
   hatırlamak için yukarı dönmeye zorluyordu.

   Görünümde `position-lg-sticky` sınıfı zaten vardı ama Canvas o sınıfla
   yalnızca `position: sticky` veriyor — `top` değeri olmadan sticky HİÇBİR
   ZAMAN yapışmaz, sessizce sıradan bir kolon gibi davranır. Eksik olan tek
   şey buydu.

   105px: sabit başlık 81px (`header-size-md`) + bir tutam nefes payı; kolon
   başlığın altına sıkışmadan durur. `align-self` şart — kolon flex öğesi ve
   varsayılan `stretch` yüksekliği satıra eşitler, kayacak yer kalmazdı.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .position-lg-sticky {
        top: 105px;
        align-self: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Anasayfa başlığı (Ayarlar → Site Kimliği → "Anasayfa başlığı")

   Sayfanın H1'i; kısa tanıtımın hemen üstünde durur. Slaytlar H2 kullandığı
   için anasayfanın tek H1'i budur. Slogan gibi okunması istendiğinden Canvas'ın
   varsayılan H1'inden daha yumuşak: büyük harfe çevrilmez, harf aralığı sıkı.
   -------------------------------------------------------------------------- */
.home-heading {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: none;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .home-heading { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Sayaç bandı (Ayarlar → Sayaçlar)

   Slaytın hemen altındaki marka renkli şerit. Yerleşim ve tipografi Canvas'ın
   kendi `.counter` bileşeninden gelir (`.counter`, `.counter-large`,
   `.counter + h5`); burada yalnızca bandın rengi ve okunabilirlik ayarlanır.
   -------------------------------------------------------------------------- */

.pnr-counters-band {
    background: var(--pnr-accent);
    padding: 1.9rem 0;
}

/* Ölçüler Canvas'ın kendi değişkenleri üzerinden veriliyor — bileşenin
   yapısına dokunmadan yalnızca bu bandaki görünümü küçültür. */
.pnr-counters .counter {
    --cnvs-counter-font-size: 30px;
    --cnvs-counter-caption-size: .72rem;
    color: #fff;
    /* Sayarken basamak genişliği değişip rakam yerinde zıplamasın. */
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* `.h5` de yazılı: etiket görünüşte h5, seviyesi h3 (başlık sırası atlamasın).
   Yalnız `h5` yazıldığında bu kural sessizce eşleşmez olmuştu. */
.pnr-counters h5,
.pnr-counters .h5 {
    margin-top: .3rem;
    margin-bottom: 0;
    font-size: var(--cnvs-counter-caption-size, .72rem);
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .72);
}

/* Sütunlar alt alta düştüğünde araları açılsın. Bootstrap'ın `col-mb-*`
   sınıfı yerine satır aralığı kullanılıyor: o sınıf son satıra da dolgu
   eklediği için bandın alt boşluğu üsttekinden kalın kalıyordu. */
.pnr-counters { row-gap: 1.4rem; }

/* Sayaçlar arası ince dikey ayırıcı — bant kalabalıklaşmadan bölümleniyor. */
@media (min-width: 992px) {
    .pnr-counters > [class*="col-"] + [class*="col-"] {
        border-left: 1px solid rgba(255, 255, 255, .18);
    }
}

@media (max-width: 575px) {
    .pnr-counters .counter { --cnvs-counter-font-size: 22px; }
    .pnr-counters-band { padding: 1.35rem 0; }
}

/* Portfolyo hover katmanındaki alt satır (konum · yıl) */
.portfolio-desc span {
    display: block; margin-top: .35rem;
    font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   Proje künyesi — Canvas'ta karşılığı yok
   -------------------------------------------------------------------------- */

.specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0; margin: 2.5rem 0 0;
    border-top: 1px solid var(--cnvs-contrast-200, #e5e5e5);
}
.specs__row {
    padding: 1.35rem 1.5rem 1.35rem 0;
    border-bottom: 1px solid var(--cnvs-contrast-200, #e5e5e5);
}
.specs dt {
    margin-bottom: .3rem;
    font-size: .6875rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--cnvs-contrast-500, #888);
}
.specs dd {
    margin: 0; font-size: 1.1rem; font-weight: 500;
    color: var(--pnr-ink);
}

/* --------------------------------------------------------------------------
   Proje durumu filtreleri
   -------------------------------------------------------------------------- */

.pnr-filters {
    display: flex; flex-wrap: wrap; gap: 1.75rem;
    justify-content: center; margin-bottom: 2.5rem;
}
.pnr-filters a {
    position: relative; padding-bottom: .25rem;
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cnvs-contrast-500, #888);
}
.pnr-filters a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor;
    transform: scaleX(0); transition: transform .3s ease;
}
.pnr-filters a:hover,
.pnr-filters a.active { color: var(--pnr-ink); }
.pnr-filters a.active::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Firmalar — sayfa altındaki grup şirketleri ızgarası

   Logolar farklı en boy oranlarında ve farklı zeminlerde geliyor. Kartlar eşit
   yükseklikte açık gri kutular; logo içinde ortalanır ve `contain` ile oranı
   bozulmadan sığdırılır. Böylece dar bir dikey logo ile geniş bir yatay logo
   yan yana derli toplu durur.
   -------------------------------------------------------------------------- */
.pnr-companies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.pnr-companies__item {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    padding: 1.5rem;
    background: #F7F7FA;
    border-radius: 6px;
}

/* Logo alanı esner: açıklaması olan ve olmayan kartlar yan yana dururken
   logoların hepsi aynı hizada kalsın. */
.pnr-companies__logo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.pnr-companies__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pnr-companies__desc {
    margin: 1rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: #5A5B6E;
    text-align: center;
}

.pnr-companies__item img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Logosu olmayan firma: kart boş kalmasın, adı yazılır. */
.pnr-companies__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #14152D;
    text-align: center;
}

@media (max-width: 575px) {
    .pnr-companies__item { min-height: 120px; padding: 1rem; }
    .pnr-companies__item img { max-height: 64px; }
}

/* --------------------------------------------------------------------------
   Sosyal medya ikonları — alt bilgide, ortalanmış

   Başlıktan alt bilgiye taşındılar. Canvas'ın `.social-icon` bileşeni koyu zemin
   için tasarlanmış (ikon beyaz); alt bilgimiz açık renk olduğundan renkleri
   burada markaya göre yeniden veriliyor: normalde soluk lacivert, üzerine
   gelince marka mavisi zemin üstünde beyaz.
   -------------------------------------------------------------------------- */
.pnr-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

/* Alt bilgide marka sütununun içinde duruyor; orada sola dayalı olmalı,
   dar ekranda sütunlar alt alta geçince ortalamaya döner. */
@media (min-width: 768px) {
    .pnr-footer .pnr-social { justify-content: flex-start; }
}

/* Canvas satır içindeki ikonlara kendi dış boşluğunu veriyor; flex `gap`
   ile çakışmasın diye sıfırlanıyor. */
.pnr-social .social-icon {
    margin: 0;
    background-color: rgba(20, 21, 45, .06);
    color: #14152D;
}

.pnr-social .social-icon:hover {
    background-color: #35398E;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Alt bilgi

   Üç sütun (marka · site haritası · iletişim) ve altında ince bir şerit:
   telif notu solda, yasal bağlantılar sağda. Şerit üstteki bloktan bir çizgi
   ile ayrılır; iki yarısı dar ekranda alt alta geçip ortalanır.
   -------------------------------------------------------------------------- */

.pnr-footer__ust { padding: 3.5rem 0 2.75rem; }

.pnr-footer__logo { height: 42px; width: auto; margin-bottom: 1.15rem; }

.pnr-footer__ozet {
    max-width: 42ch;
    margin-bottom: 1.15rem;
    font-size: .9rem;
    line-height: 1.7;
    color: #6B6D85;
}

.pnr-footer__baslik {
    margin-bottom: 1.1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pnr-ink);
}

.pnr-footer__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.55;
    color: #6B6D85;
}

.pnr-footer__liste a { color: #6B6D85; text-decoration: none; }
.pnr-footer__liste a:hover { color: var(--pnr-accent); }

/* Açılır menünün alt başlıkları — düzleştirilip bir kademe içeri alınıyor. */
.pnr-footer__alt { padding-left: .9rem; font-size: .85rem; }

.pnr-footer__iletisim li { color: #6B6D85; }

/* Alt şerit ---------------------------------------------------------------- */

/* Canvas `#copyrights` için ID ağırlığında padding veriyor; ID + sınıf ile
   yazılmazsa buradaki değer kaybeder. */
#copyrights.pnr-footer__alt-serit {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(20, 21, 45, .09);
}

.pnr-footer__telif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    font-size: .85rem;
    color: #6B6D85;
}

.pnr-footer__yasal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.pnr-footer__yasal a { color: var(--pnr-ink); text-decoration: none; }
.pnr-footer__yasal a:hover { color: var(--pnr-accent); text-decoration: underline; }
.pnr-footer__yasal span { color: rgba(20, 21, 45, .28); }

/* Sabit WhatsApp düğmesi sağ alt köşede duruyor ve şeridin sağ ucundaki
   yasal bağlantının üstüne biniyordu. Düğme kadar yer boş bırakılıyor —
   `:has()` sayesinde yalnızca düğme gerçekten sayfadayken. */
@media (min-width: 768px) {
    body:has(.pnr-whatsapp) .pnr-footer__telif { padding-right: 4.75rem; }
}

/* Dar ekranda şerit ortalanıyor, düğme de yukarı çıkıyor: yan boşluk değil,
   alttan pay gerekiyor. */
@media (max-width: 767.98px) {
    body:has(.pnr-whatsapp) #copyrights.pnr-footer__alt-serit { padding-bottom: 4.5rem; }
}

/* Vergi dairesi / serbest not — en altta, en soluk kademe. */
.pnr-footer__kunye {
    margin: .5rem 0 0;
    font-size: .78rem;
    color: #9295A8;
}

/* Dar ekranda her şey ortalanır: sütunlar alt alta geçtiğinde sola dayalı
   bir yığın sayfanın ortasında asılı kalıyor gibi duruyordu. */
@media (max-width: 767.98px) {
    .pnr-footer__ust { padding: 2.5rem 0 2rem; text-align: center; }
    .pnr-footer__ozet { max-width: none; }
    .pnr-footer__liste { align-items: center; }
    .pnr-footer__alt { padding-left: 0; }
    .pnr-footer__telif { justify-content: center; text-align: center; }
    .pnr-footer__kunye { text-align: center; }
}

/* --------------------------------------------------------------------------
   Referans logoları — gri tonlu, üzerine gelince renklenir
   (custom.css'teki .logo-image kuralını tamamlar)
   -------------------------------------------------------------------------- */

.logo-image .oc-item img {
    max-height: 60px; width: auto; margin-inline: auto;
    opacity: .55; transition: opacity .3s ease, filter .3s ease;
}
.logo-image .oc-item img:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   İletişim formu — bal küpü alanı gizli kalmalı
   -------------------------------------------------------------------------- */

.hp { position: absolute !important; left: -9999px !important; }

.form-status { margin-top: 1rem; font-size: .9375rem; }
.form-status.is-ok    { color: #1B8A5A; }
.form-status.is-error { color: #C0392B; }

/* --------------------------------------------------------------------------
   Arama sonuçları
   -------------------------------------------------------------------------- */

.results { margin: 0; padding: 0; list-style: none; }
.results__item { border-bottom: 1px solid var(--cnvs-contrast-200, #e5e5e5); }
.results__item a { display: block; padding: 1.75rem 0; }
.results__type {
    font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pnr-accent);
}
.results__title { margin: .4rem 0 .5rem; font-size: 1.35rem; }


/* --------------------------------------------------------------------------
   WhatsApp düğmesi — Ayarlar'da numara girilirse görünür
   -------------------------------------------------------------------------- */

.pnr-whatsapp {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 400;
    display: grid; place-items: center;
    width: 54px; height: 54px;
    font-size: 1.75rem; color: #fff;
    background: #25D366; border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease,
                opacity .25s ease, visibility .25s ease;

    /* Sayfa başındayken gizli: tam ekran slaydın üzerine binmesin.
       `site.js` aşağı kaydırılınca `is-visible` sınıfını ekler. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
}

.pnr-whatsapp.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Hover kuralı aşağıda ayrıca tanımlı; `is-visible` ile aynı ağırlıkta olduğu
   ve ondan önce geldiği için burada özellikle yeniden veriliyor. */
.pnr-whatsapp.is-visible:hover { transform: translateY(-2px); }
.pnr-whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

/* Canvas'ın "yukarı çık" düğmesiyle çakışmasın. */
#gotoTop { bottom: 5.5rem; }

@media (max-width: 575px) {
    .pnr-whatsapp { width: 48px; height: 48px; font-size: 1.5rem; right: 1rem; bottom: 1rem; }
    #gotoTop { bottom: 4.75rem; }
}

/* --------------------------------------------------------------------------
   Kapağı olmayan proje kartı
   Görsel yüklenene kadar kart boş bir kutu olarak durmasın diye marka
   renginde zemin ve proje adı gösterilir.
   -------------------------------------------------------------------------- */

.pf-nocover {
    background: linear-gradient(135deg, var(--pnr-accent, #35398E), var(--pnr-ink, #14152D));
}

/* Kartın yüksekliğini şeffaf 640x360 ölçü görseli belirlediği için başlık
   onun üstüne mutlak konumla serilir. */
.pf-nocover__text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    color: rgba(255, 255, 255, .85);
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   404 sayfası
   -------------------------------------------------------------------------- */

.pnr-404 { padding: 120px 0; }

/* Kapak görseli `<img class="parallax-bg">` ile konur ve Canvas ona
   `z-index: -1` verir. `.page-title` kendi gri zeminini taşıdığı için görsel
   bu zeminin arkasına düşüp görünmez kalıyordu; kapak varken zemin kalkar. */
.pnr-404.parallax { background-color: transparent; }

/* Canvas'ın varsayılanı 19vw; o boyutta rakam tek başına ekranı doldurup
   altındaki arama kutusunu ve düğmeleri dışarı itiyor. */
.pnr-404 .error404 {
    font-size: clamp(5rem, 14vw, 11rem);
    margin-bottom: 1.5rem;
    opacity: .22;
}

/* Kapak görseli yoksa zemin düz renk kalır; parallax katmanı olmadığı için
   yazıların üstünde duracak bir şey de yoktur. */
.pnr-404 .heading-block span { font-size: 1rem; }

/* Arama kutusu koyu zeminde açık kalır — kullanıcının çıkış yolu olduğu için
   göze çarpması gerekiyor. */
.pnr-404 .form-control {
    background-color: rgba(255, 255, 255, .95);
    border-color: transparent;
    color: var(--pnr-ink, #14152D);
}
.pnr-404 .form-control::placeholder { color: rgba(20, 21, 45, .5); }
.pnr-404 .form-control:focus {
    background-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

@media (max-width: 575.98px) {
    .pnr-404 { padding: 80px 0; }
}

/* --------------------------------------------------------------------------
   Müşteri yorumları — Canvas'ın testimonial-col kartı, markaya uyarlanmış
   -------------------------------------------------------------------------- */

.testimonial-col {
    display: flex; flex-direction: column;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--cnvs-contrast-200, #e8e9ef);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(20, 21, 45, .05);
    transition: box-shadow .3s ease, transform .3s ease;
}
.testimonial-col:hover {
    box-shadow: 0 10px 26px rgba(20, 21, 45, .1);
    transform: translateY(-2px);
}

/* Alıntı işareti — yorumun tırnak olduğunu belli eder. */
.testimonial-col::before {
    content: '“';
    display: block;
    font-size: 3rem; line-height: .7;
    color: var(--pnr-accent); opacity: .25;
    margin-bottom: .35rem;
}

.testimonial-col p {
    flex: 1;
    margin-bottom: 1.25rem;
    font-size: 1rem; line-height: 1.7;
    color: var(--cnvs-contrast-700, #4a4c63);
}

.testimonial-col img { object-fit: cover; }

/* Fotoğrafı olmayan için baş harf rozeti */
.testimonial-initial {
    display: grid; place-items: center; flex-shrink: 0;
    width: 44px; height: 44px;
    font-size: 1.125rem; font-weight: 500; line-height: 1;
    color: #fff; background: var(--pnr-accent);
    border-radius: 50%;
}

/* Yorumların uzunluğu farklı olduğu için kartlar kendiliğinden farklı boyda
   kalır. Şeridi flex yapıp öğeleri esnetince hepsi en uzun karta eşitlenir;
   owl-carousel'in genişlik hesabı bozulmasın diye owl-item büyüyüp küçülmez. */
.testimonials-carousel .owl-stage { display: flex; }
.testimonials-carousel .owl-item  { display: flex; flex: 0 0 auto; }
.testimonials-carousel .oc-item   { display: flex; width: 100%; }


/* ==========================================================================
   Sıkça Sorulan Sorular
   ==========================================================================
   Açılır kapanır liste `<details>` ile kuruldu: eklenti yok, klavyeyle
   gezilebiliyor ve cevap kapalıyken de HTML'de duruyor — arama motoru
   metni görebiliyor. İlk soru açık gelir, ziyaretçi neyle karşılaştığını
   ilk bakışta anlar. */

.pnr-sss {
    max-width: 860px;
    margin: 0 auto;
}

.pnr-sss__item {
    border: 1px solid rgba(20, 21, 45, .12);
    border-radius: 8px;
    margin-bottom: .75rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.pnr-sss__item[open] {
    border-color: rgba(53, 57, 142, .35);
    box-shadow: 0 4px 16px rgba(20, 21, 45, .06);
}

.pnr-sss__q {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem; font-weight: 600;
    color: var(--pnr-ink);
}

.pnr-sss__q::-webkit-details-marker { display: none; }

/* Sağdaki artı/eksi göstergesi */
.pnr-sss__q::after {
    content: '+';
    margin-left: auto;
    flex: none;
    font-size: 1.375rem; font-weight: 400; line-height: 1;
    color: var(--pnr-accent);
    transition: transform .2s;
}

.pnr-sss__item[open] .pnr-sss__q::after {
    content: '−';
}

.pnr-sss__q:hover { color: var(--pnr-accent); }

.pnr-sss__a {
    padding: 0 1.25rem 1.25rem;
    font-size: .9375rem; line-height: 1.75;
    color: rgba(20, 21, 45, .78);
}

@media (max-width: 575px) {
    .pnr-sss__q { padding: .875rem 1rem; font-size: 1rem; }
    .pnr-sss__a { padding: 0 1rem 1rem; }
}

/* Proje kartı kapağı --------------------------------------------------------
   Kapak artık CSS arka planı değil gerçek bir <img> (bkz. _card-project.php).
   Kartların aynı boyda kalması için görsel sabit oranda kırpılıyor; eskiden
   bunu `background-size: cover` yapıyordu. */

.portfolio-item .pf-cover {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(20, 21, 45, .04);
}

.portfolio-item .pf-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Alt bilgi markası ---------------------------------------------------------
   Başlıktaki logo kurgusunun aynısı: ikon görsel, ad ve unvan metin
   (bkz. layout/site.php). Tek fark ölçü — alt bilgide biraz daha büyük
   durabiliyor, çünkü sabit başlık gibi yükseklik kısıtı yok. */

.pnr-footer__marka {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.15rem;
    text-decoration: none;
}

.pnr-footer__marka:hover { text-decoration: none; }

.pnr-footer__ikon {
    width: 48px;
    height: 48px;
    flex: none;
}

/* Alt bilgi açık zeminde: başlıktaki daralan/genişleyen geçişe gerek yok. */
.pnr-footer__marka .pnr-logotype { gap: 5px; }

/* Konsol hatası: images/grid.png 404 -------------------------------------- */

/* Canvas, video karartma katmanına ızgara deseni bir PNG ile veriyor:
       .video-overlay { background: transparent url("images/grid.png") repeat; }
   Tema paketinde o dosya yok, tarayıcı her sayfa yüklemesinde 404 alıyordu.
   Desen tasarımda zaten kullanılmıyor — karartma rengi slayt ayarından
   inline style ile geliyor. Yalnızca görsel katmanı kapatıyoruz; renk kalır. */

.video-overlay,
.video-placeholder {
    background-image: none;
}

/* Carousel noktaları: dokunma hedefi boyutu ------------------------------- */

/* Canvas noktaları 8×8 piksel çiziyordu. Lighthouse (ve WCAG 2.5.8) dokunma
   hedefleri için en az 24×24 piksel istiyor; küçük hedefler titremesi olan ya
   da kalın parmakla dokunan kullanıcılar için sorun.

   Görünüm değişmiyor: nokta yine 8 piksel, yalnızca artık `::before` ile
   çiziliyor. Düğmenin kendisi 24×24'lük şeffaf bir kutu — büyüyen tek şey
   tıklama alanı. Renk ve opaklık temanın kendi değişkenlerinden geliyor,
   böylece tema ayarı değişirse noktalar da onunla değişir. */

.owl-carousel .owl-dots .owl-dot,
.slider-element .owl-dots button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border-radius: 0;
    opacity: 1;
}

.owl-carousel .owl-dots .owl-dot::before,
.slider-element .owl-dots button::before {
    content: '';
    width: var(--cnvs-owl-dots-sizes, 8px);
    height: var(--cnvs-owl-dots-sizes, 8px);
    border-radius: 50%;
    background-color: var(--cnvs-owl-nav-bg, var(--pnr-accent));
    opacity: .5;
    transition: opacity .2s ease;
}

.owl-carousel .owl-dots .owl-dot.active::before,
.owl-carousel .owl-dots .owl-dot:hover::before,
.slider-element .owl-dots button.active::before,
.slider-element .owl-dots button:hover::before {
    opacity: 1;
}
/* --------------------------------------------------------------------------
   İçerik tipografisi — panelden girilen metinler

   Canvas'ın gövde ölçüsü 12.8px (0.8rem). Arayüz öğeleri için yeterli ama
   OKUNAN metin için değil: iletişim sayfasında adres/telefon 16px, form
   alanları 16px iken hemen yanlarındaki paragraf 12.8px kalıyordu — aradaki
   %25'lik fark "yazı boyutları tutmuyor" olarak görünüyordu. Faaliyetlerde
   ise 26px başlığın altına 12.8px metin geliyordu; ikisi arasında ölçek yok.

   Buradaki ölçek tek bir kural üzerine kurulu: gövde 1rem, başlıklar ondan
   yukarı doğru 1.375 / 1.625 / 1.875 katı. Bu sınıf, editörden gelen HTML'in
   basıldığı HER yere veriliyor (page.php, content.php) — arayüz öğeleri
   (menü, breadcrumb, etiketler) küçük kalmaya devam eder, ki doğrusu da odur.
   -------------------------------------------------------------------------- */

.pnr-icerik {
    font-size: 1rem;
    line-height: 1.75;
    color: #33354D;
}

.pnr-icerik p,
.pnr-icerik li {
    font-size: 1rem;
    line-height: 1.75;
}

.pnr-icerik p { margin-bottom: 1.15rem; }

/* Giriş paragrafı: gövdeden ayrılsın ama başlıkla yarışmasın. 20px iken
   başlığa fazla yakındı ve gövdeyle arasındaki fark uçurum gibiydi. */
.pnr-icerik .lead {
    font-size: 1.1875rem;
    line-height: 1.65;
    font-weight: 300;
    color: var(--pnr-ink);
}

/* Başlıklar. Ölçek gövdeye bağlı; renk marka lacivertine çekildi — metnin
   grisi içinde başlıklar artık kendiliğinden ayrışıyor. */
.pnr-icerik h2,
.pnr-icerik h3,
.pnr-icerik h4 {
    color: var(--pnr-ink);
    letter-spacing: -.01em;
}

.pnr-icerik h2 { font-size: 1.875rem; margin-bottom: .85rem; }
.pnr-icerik h3 { font-size: 1.5rem;   margin-bottom: .7rem; }
.pnr-icerik h4 { font-size: 1.1875rem; margin-bottom: .6rem; }

/* İlk başlık üstten boşluk almasın, sonrakiler bölüm arası nefes bıraksın. */
.pnr-icerik > h2:not(:first-child),
.pnr-icerik > h3:not(:first-child) { margin-top: 2.25rem; }

.pnr-icerik > *:first-child { margin-top: 0; }
.pnr-icerik > *:last-child  { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Renk dokunuşları

   Sayfa baştan sona koyu gri metindi. Aşağıdakiler yeni bir renk katmıyor —
   yalnızca zaten var olan marka lacivertini, gözün yapıyı taradığı yerlere
   (bölüm başlığı, vurgulu kelime, liste işareti, bağlantı) taşıyor.
   -------------------------------------------------------------------------- */

/* h3'ün soluna kısa marka çizgisi: alt bölümler tarama sırasında ayrışıyor. */
.pnr-icerik h3 {
    position: relative;
    padding-left: .9rem;
}

.pnr-icerik h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: 2px;
    background: var(--pnr-accent);
}

/* Vurgulu kelimeler markanın rengini alır. Metin içinde <strong> zaten
   "buraya bak" demek; rengi de söyleyince ikisi aynı yöne çalışıyor. */
.pnr-icerik strong,
.pnr-icerik b {
    color: var(--pnr-ink);
    font-weight: 600;
}

/* Madde işaretleri marka renginde — varsayılan siyah nokta yerine. */
.pnr-icerik ul {
    list-style: none;
    padding-left: 1.4rem;
}

.pnr-icerik ul > li {
    position: relative;
    margin-bottom: .55rem;
}

.pnr-icerik ul > li::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pnr-accent);
}

.pnr-icerik ol { padding-left: 1.25rem; }
.pnr-icerik ol > li { margin-bottom: .55rem; }
.pnr-icerik ol > li::marker { color: var(--pnr-accent); font-weight: 600; }

/* Metin içi bağlantılar: altı ince çizili, üstüne gelince koyulaşıyor. */
.pnr-icerik a:not(.button):not(.pnr-iletisim__ek) {
    color: var(--pnr-accent);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(53, 57, 142, .35);
}

.pnr-icerik a:not(.button):hover {
    text-decoration-color: var(--pnr-accent);
}

/* Alıntı bloğu: solunda marka çizgisi, hafif zeminli. */
.pnr-icerik blockquote {
    margin: 1.75rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--pnr-accent);
    background: none;
    font-size: 1.0625rem;
    font-style: normal;
    color: var(--pnr-ink);
}

/* Dar ekranda ölçek bir tık iner — satır uzunluğu korunsun. */
@media (max-width: 575.98px) {
    .pnr-icerik h2 { font-size: 1.5rem; }
    .pnr-icerik h3 { font-size: 1.25rem; }
    .pnr-icerik .lead { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   Kapak şeridi yüksekliği — üç kademe

   Canvas'ın `vh-75` sınıfının yerini alır. O sabit tek boydu: kısa metinli bir
   sayfada şerit ekranın dörtte üçünü yiyip içeriği kaydırma gerektirir hâle
   getiriyordu. Artık panelden seçiliyor (Sayfa düzenle → Kapak yüksekliği).

   `min-height` piksel tabanı, alçak ekranlarda (yatay tutulan telefon) şeridin
   başlığın altında ezilmesini engeller. `height` yerine ikisi birden veriliyor
   ki içerik taşarsa şerit kendini büyütebilsin.
   -------------------------------------------------------------------------- */

.pnr-kapak--kucuk { height: 42vh; min-height: 300px; }
.pnr-kapak--orta  { height: 58vh; min-height: 380px; }
.pnr-kapak--buyuk { height: 75vh; min-height: 460px; }

/* Canvas `.page-title.dark` şeridine 1px'lik `rgba(255,255,255,.1)` alt çizgi
   veriyor. Kapakta o çizgi kendi arka planının (koyu gri) üstüne düşüyor —
   görsel ve karartma yalnızca kenarlığın içini kaplıyor — ve şeridin altında
   ince bir siyah çizgi olarak görünüyordu. Kapağı dalga biçimli bir
   `shape-divider` bitirdiği için burada kenarlığın hiçbir işlevi yok. */
.pnr-kapak { border-bottom: 0; }

/* Dar ekranda oranlar bir tık yükselir: 42vh telefonda başlığı ve sayfa adını
   sığdıramayacak kadar kısa kalıyor. */
@media (max-width: 767.98px) {
    .pnr-kapak--kucuk { height: 46vh; min-height: 280px; }
    .pnr-kapak--orta  { height: 60vh; min-height: 340px; }
    .pnr-kapak--buyuk { height: 72vh; min-height: 400px; }
}

/* İletişim formu: alan içindeki yazı 16px iken etiketi 12.8px kalıyordu —
   etiket kendi alanına ait görünmüyordu. Ölçek biraz yukarı çekildi; yine
   gövdeden küçük, çünkü etiket okunan metin değil yönlendirmedir. */
form label { font-size: .875rem; }

/* --------------------------------------------------------------------------
   Anasayfa ilk ekranı — slayt + sayaç bandı birlikte sığar

   Slayt eskiden 75vh, bandın yüksekliği de üstüne binince ilk ekran taşıyordu:
   sayaçların alt satırı ekranın altında kalıyor, ziyaretçi bandın var olduğunu
   ancak kaydırınca fark ediyordu. Artık slayt, ekran boyundan bandın ÖLÇÜLEN
   yüksekliği kadar kısa: ikisi birlikte tam bir ekran eder.

   `svh` kullanılıyor — mobilde adres çubuğu kaybolup görünürken `vh` değişmez
   ve slayt ekrandan taşar; `svh` en küçük görünür alanı esas alır.

   `--pnr-bant` yedeği (118px) masaüstündeki tipik bant boyu: betik henüz
   çalışmamışken bile yerleşim doğruya yakın başlar, sıçrama olmaz.

   `--pnr-header` ise başlığın slayttan ÖNCE kapladığı yer. Canvas'ın
   `include-header` negatif payı yalnızca `.is-expanded-menu` altında —
   yani menü çubuğu açıkken, 1200px'ten geniş ekranlarda— geçerli. Dar
   ekranda başlık slaydın üstüne binmez, akışta yer kaplar: slayda tam
   ekran verilince toplam boy başlık kadar taşıyor, slaydın altı ekranın
   altında kalıyordu. Değer site.js'te slaydın gerçek konumundan ölçülür;
   binme durumunda 0 yazılır, formül kendiliğinden eski hâline döner.
   -------------------------------------------------------------------------- */

/* Mobil: slayt ekranın BAŞLIKTAN ARTAKALANINI tam doldurur. Dar ekranda sayaç
   bandı da sığdırılmaya çalışılınca slayt eziliyor, başlık iki satıra kırılıyor
   ve altta ne slayt ne bant düzgün görünüyordu. Telefonda ilk ekranı tek bir işe
   ayırmak daha güçlü duruyor; bant hemen bir kaydırma altında kalıyor. */
/* Boy tek bir değişkende toplanıyor: aynı hesabı hem slaydın kutusu hem de
   içindeki paralaks katmanı kullanıyor (bkz. aşağıdaki `.slider-inner`). İkisi
   ayrı ayrı yazıldığında biri güncellenip diğeri unutulabiliyordu. */
.pnr-ilk-ekran {
    --pnr-ilk-boy: calc(100vh - var(--pnr-header, 100px)); /* svh bilmeyen için taban */
    min-height: var(--pnr-ilk-boy);
}

@supports (height: 100svh) {
    .pnr-ilk-ekran { --pnr-ilk-boy: calc(100svh - var(--pnr-header, 100px)); }
}

/* Masaüstü: slayt + bant birlikte tam bir ekran eder. Bandın gerçek boyu
   site.js'te ölçülüp `--pnr-bant` değişkenine yazılır. Başlık bu genişlikte
   slaydın üstüne bindiği için `--pnr-header` 0'dır; 768–1199px arasında ise
   binme yok ve ikisi birlikte düşülür. */
@media (min-width: 768px) {
    .pnr-ilk-ekran {
        --pnr-ilk-boy: calc(100vh - var(--pnr-header, 0px) - var(--pnr-bant, 118px));
    }
}

@supports (height: 100svh) {
    @media (min-width: 768px) {
        .pnr-ilk-ekran {
            --pnr-ilk-boy: calc(100svh - var(--pnr-header, 0px) - var(--pnr-bant, 118px));
        }
    }
}

/* Alçak ekranda (yatay telefon) slayt yazısı sığmayacak kadar ezilmesin —
   o durumda ilk ekrana sığdırma iddiasından vazgeçilir. */
@media (max-height: 520px) {
    .pnr-ilk-ekran { --pnr-ilk-boy: 340px; }
}

/* --------------------------------------------------------------------------
   Paralaks katmanı — slaydın kutusuyla aynı boyda

   Canvas geniş ekranda `.slider-inner`'ı `position: fixed` yapıp yüksekliğini
   SATIR İÇİ stille sabitliyor; ölçümü sayfa açılışında bir kez, yarım saniyelik
   gecikmeyle alıyor (functions.bundle.js → sliderDimensions). Bizim ilk ekran
   hesabımız o andan sonra da değişiyor — yazı tipi geç yüklenince sayaç
   bandının boyu oynuyor, `--pnr-bant` güncelleniyor. Kutu büyüyor, içerdeki
   görsel eski ölçüde kalıyor ve aradaki fark, mavi bandın üstünde beyaz bir
   şerit olarak görünüyordu (masaüstünde ~100px).

   `!important` şart: satır içi stil başka türlü ezilmez. Kural yalnızca
   Canvas'ın o satır içi yüksekliği yazdığı genişlikte (992px+, `device-up-lg`)
   geçerli; dar ekranda Canvas alanı boş bırakıyor, biz de karışmıyoruz.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .pnr-ilk-ekran > .slider-inner { height: var(--pnr-ilk-boy) !important; }
}