/*
 * Sayfa gövdesi yerleşimi (pages/*.php → partials/page-body.php)
 *
 * TEMA DOSYASI DEĞİLDİR — tema güncellemesinde üzerine yazılmaz.
 * Ayarlar > Özel Kod'un yazdığı custom.css ile de karıştırılmamalı.
 *
 * Float/margin değerleri temanın .alignleft / .alignright kurallarından gelir
 * (style.css ~2357, post-image.html kalıbı). Burada yalnızca carousel'in
 * genişliği ve mobil davranışı tanımlanır.
 */

.page-body-float {
    text-align: justify;
    line-height: 1.9;
}

.page-body-float p {
    margin-bottom: 1rem;
}

.page-body-float .page-float-gallery {
    width: 45%;
    max-width: 420px;
}

.page-body-float .page-float-gallery img {
    border-radius: 8px;
}

/*
 * Tema blockquote'a clear:both verir (style.css ~2423) — alıntı float galerinin
 * yanına gelmeyi reddedip altına iner, öncesindeki metin kısaysa arada boşluk kalır.
 * Sarma yapan gövdede alıntı da metinle birlikte aksın; temanın 80px sol boşluğu
 * ve 35px tırnak ikonu dar sütunda sıkıştığı için ölçüler küçültülür.
 */
.page-body-float blockquote {
    clear: none;
    /*
     * Kendi blok biçimlendirme bağlamı (BFC): kutu float galerinin yanındaki
     * alana daralır. Bu olmadan blockquote'un kutusu float'un altına yayılır —
     * gri arka plan görselin arkasına girer ve position:absolute olan :before
     * tırnak ikonu görselin altında kalır.
     * overflow:hidden eski tarayıcılar için yedek, flow-root taşmayı kırpmaz.
     */
    overflow: hidden;
    display: flow-root;
    padding: 14px 18px 14px 56px;
    margin: 24px 0;
    font-size: 16px;
    line-height: 26px;
}

.page-body-float blockquote p {
    font-size: 16px;
    line-height: 26px;
}

.page-body-float blockquote:before {
    font-size: 26px;
    left: 18px;
    top: 16px;
}

/* Dar ekranda sarma bırakılır, galeri tam genişlikte metnin üstüne alınır */
@media (max-width: 767px) {
    .page-body-float .page-float-gallery {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 24px 0;
    }
}

/* ---------------------------------------------------------------------------
   Eşit yükseklikli kutu satırı
   ---------------------------------------------------------------------------
   Kullanım: satırı saran .row'a `row-equal-boxes` eklenir.

       <div class="section-content row row-equal-boxes">
           <div class="col-xl-6 col-md-6 col-sm-12 service-box style3"> …

   Bootstrap'in .row'u sütunları zaten eşit yükseklikte uzatır (align-items:
   stretch), ama kutu görünümünü veren iç sarmalayıcı (.icon-bx-wraper, .dlab-box
   vb.) kendi içeriği kadar yüksek kalır — metni uzun olan kutu daha uzun görünür.
   Sütunu flex kabına çevirip tek çocuğunu esnetmek, iç kutuyu da satırın en uzun
   kutusuna eşitler.

   Kutuya sabit yükseklik verilmez: satır satır (wrap eden her sırada) kendi
   içinde eşitlenir, uzun metin kırpılmaz. İçerik yukarıdan hizalı kalır,
   fazla yer altta boşluk olarak görünür.

   Kutunun kendi alt boşluğu (ör. .icon-bx-wraper margin-bottom:30px) korunur;
   flex item olarak margin dışta kaldığı için sütunlar arası dikey aralık bozulmaz.
--------------------------------------------------------------------------- */
.row-equal-boxes > [class*="col-"],
.row-equal-boxes > .col {
    display: flex;
}

/* Flex item varsayılan olarak içeriği kadar genişler; sütunu tam doldurması gerekir */
.row-equal-boxes > [class*="col-"] > *,
.row-equal-boxes > .col > * {
    width: 100%;
}

/*
 * Sayaç kutusu (.counter-style-company) — kutuları eşitlemek tek başına yetmez:
 * metin iki satıra kırılınca sayı aşağı kayar ve komşularıyla hizası bozulur.
 * Kutuyu dikey flex'e çevirip metne esneme payı vermek sayıyı hep kutunun
 * altına sabitler, metin de kalan alanda ortalanır. Yalnızca row-equal-boxes
 * eklenmiş satırlarda geçerlidir — diğer sayfalardaki sayaçlar etkilenmez.
 */
.row-equal-boxes .counter-style-company {
    display: flex;
    flex-direction: column;
}

.row-equal-boxes .counter-style-company .counter-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Sayı en altta, sabit yükseklikte kalır ki tüm kutularda aynı çizgiye otursun */
.row-equal-boxes .counter-style-company .counter {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/*
 * Markalar logo şeridi (sections/brands.php)
 *
 * Şerit tema `client-logo-carousel` class'ını kullanmıyor (başlatma ayarları panelden
 * geliyor, bkz. layouts/main.php). Temanın o class'a bağlı tek kuralı buydu: hover'daki
 * kutu gölgesinin (.ow-client-logo:hover) üst/alt kenarda kırpılmaması için boşluk.
 */
.brands-logo-carousel .owl-stage-outer {
    padding: 10px 0;
}

/*
 * Footer menü akordiyonu (partials/footer.php)
 *
 * Tema footer'ında alt menü karşılığı yok: `.widget_services ul li` kuralları tek
 * seviye için yazılmış. Alt menüler varsayılan olarak kapalıdır, ok düğmesine
 * (linki yoksa başlığa) tıklanınca açılır — davranış footer.php'deki inline script'te.
 */
.site-footer .widget_services li.footer-has-sub > a {
    display: inline-block;
    max-width: calc(100% - 30px);
}

/* Aç/kapa düğmesi: li zaten position:relative, sağ üste oturur */
.site-footer .widget_services .footer-sub-toggle {
    position: absolute;
    right: 0;
    top: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 24px;
    text-align: center;
    background: transparent;
    border: 0;
    color: #b0b0b0;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}
.site-footer .widget_services .footer-sub-toggle:hover {
    color: var(--color-primary);
}
.site-footer .widget_services li.open > .footer-sub-toggle {
    transform: rotate(180deg);
}

/* Alt menü: kapalıyken gizli */
.site-footer .widget_services .footer-sub-menu {
    display: none;
    list-style: none;
    padding-left: 15px;
    margin: 5px 0 0;
}
.site-footer .widget_services li.open > .footer-sub-menu {
    display: block;
}

/* Alt menü öğeleri: üst seviyenin dashed ayracı ve boşlukları burada geçerli değil */
.site-footer .widget_services .footer-sub-menu li {
    border-bottom: 0;
    padding: 4px 0 4px 15px;
    line-height: 20px;
}
.site-footer .widget_services .footer-sub-menu li:before {
    left: 0;
    top: 4px;
}

/* ---------------------------------------------------------------------------
   Hero slider — mobil katman düzeni (≤767px)
   ---------------------------------------------------------------------------
   Revolution katmanları (.tp-parallax-wrap) mutlak konumludur: yerleri
   sections/slider.php'deki sabit data-voffset değerlerinden gelir. Dar ekranda
   başlık iki-üç satıra çıkınca alt başlık ve butonlar kendi sabit noktalarında
   kaldığı için üst üste biniyordu.

   Çözüm: mobilde katmanları normal akışa alıp slaytı dikey flex kutusuna
   çevirmek. Revolution'ın kendi "column" modunda kullandığı yöntemin aynısı
   (settings.css: .rev_column_inner .tp-parallax-wrap { position:relative }).
   Katmanlar kendi yüksekliklerince alt alta dizildiği için çakışma imkânsız
   hale gelir; voffset değerleri masaüstünde olduğu gibi çalışmaya devam eder.

   Bedeli: giriş animasyonlarının kaydırma/ölçek (transform) kısmı mobilde
   devre dışı kalır, opaklık geçişi çalışmayı sürdürür. */
@media (max-width: 767px) {
    .main-slider .tp-revslider-slidesli {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        /* üstte şeffaf header, altta gezinme okları için pay */
        padding: 90px 25px 60px;
        /* katman arası boşluk: margin yerine gap — akış dışı bırakılan
           karartma/link katmanları bu boşluğa dahil olmaz */
        gap: 18px;
    }

    /* Slayt arka planı akış dışıdır (.slotholder mutlak konumlu), ama Ken Burns
       görseli <img class="tp-kbimg"> left/top vermeden konumlandırılır: yeri
       "static position"dan gelir. Bu yüzden li'ye text-align:center verilirse
       görsel kabın ortasından başlar (414px'lik ekranda left:207px) ve slaytın
       sol kenarı boş kalır — altındaki .defaultimg görünüp "iki resim üst üste"
       görüntüsü oluşur. Ortalama yalnızca katmanlara uygulanmalı. */
    .main-slider .slotholder,
    .main-slider .tp-kbimg-wrap {
        text-align: left;
    }
    .main-slider .tp-kbimg {
        left: 0;
    }

    /* Katman sarmalayıcıları: mutlak konumdan akışa */
    .main-slider .tp-parallax-wrap,
    .main-slider .tp-parallax-wrap .tp-loop-wrap,
    .main-slider .tp-parallax-wrap .tp-mask-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: normal;
    }

    /* Katmanın kendi kutusu: min/max-width inline geldiği için ezilmeli,
       yoksa 800px'lik başlık kutusu ekrandan taşar */

    .main-slider .tp-parallax-wrap .tp-caption:not(.tp-shape):not(.slider-full-link) {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 96% !important;
        white-space: normal !important;
        text-align: center !important;
        margin: 0 8px 18px 8px !important;
    }

    /* Akışa girmemesi gerekenler: karartma katmanı ve tüm slaytı kaplayan link.
       Bunlar slaytın tamamını kaplamayı sürdürür, yer kaplamaz. */
    .main-slider .tp-parallax-wrap:has(.tp-shape),
    .main-slider .tp-parallax-wrap:has(.slider-full-link) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    /* Mobil tipografi: Revolution'ın 480px altı için verdiği ölçekle uyumlu.
       Katmanlar id son ekiyle ayrılır (layer-2 başlık, layer-3 alt başlık). */
    .main-slider [id$="-layer-2"] {
        font-size: 30px !important;
        line-height: 38px !important;
        letter-spacing: 1px !important;
    }
    .main-slider [id$="-layer-3"] {
        font-size: 15px !important;
        line-height: 24px !important;
    }
}

/* ==========================================================================
   Sayfa tabları + sayfa dosyaları (partials/page-tabs-files.php)
   Tab eklenmemiş sayfada dosyalar sekmesiz liste olarak basılır.
   ========================================================================== */

.page-tabs-section .nav-tabs {
    border-bottom: 2px solid #e6e6e6;
    gap: 4px;
}

.page-tabs-section .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: #212529;
    font-weight: 600;
    padding: 12px 22px;
    background: transparent;
}

.page-tabs-section .nav-tabs .nav-link:hover,
.page-tabs-section .nav-tabs .nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.page-tabs-section .page-tab-inner {
    padding: 25px 0 0;
}

.page-files-title {
    font-size: 20px;
    margin-bottom: 18px;
}

.page-files-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-file-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-file-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    color: var(--color-primary);
}

.page-file-icon {
    font-size: 22px;
    color: var(--color-primary);
    margin-right: 14px;
    flex-shrink: 0;
}

.page-file-name {
    font-weight: 500;
    word-break: break-word;
}

.page-file-size {
    margin-left: auto;
    padding-left: 15px;
    font-size: 13px;
    color: #77787a;
    white-space: nowrap;
}