/**
 * Eski sayfa şablonları için uyumluluk katmanı.
 *
 * views/page/*.php ve bazı iç sayfalar klasik temanın Bootstrap tabanlı
 * işaretlemesiyle yazılmıştır (container / row / col-md-* / inner-box …).
 * Modern tema bu CSS'i yüklemediği için sayfalar düzensiz görünüyordu.
 *
 * Burada o sınıflar, sayfaları tek tek yeniden yazmadan modern temanın
 * tasarım diline (kapsayıcı genişliği, kart görünümü, tipografi)
 * eşleniyor. Yeni sayfalar modern sınıflarla yazılmalı; bu dosya yalnızca
 * mevcut içeriği ayakta tutar.
 */

/* --- kapsayıcı ve ızgara ------------------------------------------------ */

.hys-modern .container {
    width: 100%;
    max-width: var(--hys-kapsayici);
    margin: 0 auto;
    padding: 0 20px;
}

.hys-modern .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -11px;
}
.hys-modern .row > [class*="col-"] {
    padding: 0 11px;
    margin-bottom: 22px;
    min-width: 0;   /* uzun metin taşmasını önler */
}

/* Bootstrap sütun genişlikleri (masaüstü) */
.hys-modern .col-md-12, .hys-modern .col-12, .hys-modern .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.hys-modern .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
.hys-modern .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.hys-modern .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
.hys-modern .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.hys-modern .col-md-9  { flex: 0 0 75%;     max-width: 75%; }
.hys-modern .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.hys-modern .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }

.hys-modern .clearfix::after { content: ""; display: table; clear: both; }
.hys-modern .text-center { text-align: center; }
.hys-modern .pull-left  { float: none; }   /* flex düzende float bozuyor */
.hys-modern .pull-right { float: none; }

/* --- bölüm boşlukları --------------------------------------------------- */

.hys-modern .sp-one { padding: clamp(32px, 4vw, 52px) 0; }
.hys-modern .sp-two { padding: clamp(44px, 5vw, 72px) 0; }
.hys-modern section[class] { position: relative; }

/* --- sayfa başlığı şeridi ----------------------------------------------- */

.hys-modern .page-title-imha {
    position: relative;
    padding: clamp(40px, 5vw, 64px) 0 clamp(30px, 4vw, 44px);
    background: linear-gradient(135deg, #eaf2fd 0%, #f6f9fd 55%, #ffffff 100%);
    border-bottom: 1px solid var(--hys-cizgi);
    margin-bottom: clamp(28px, 4vw, 44px);
}
.hys-modern .page-title-imha h1 {
    margin: 0 0 12px;
    color: var(--hys-lacivert);
}
/* Şablonlarda başlık boyutu inline span ile geliyor; temaya uyduruyoruz. */
.hys-modern .page-title-imha h1 span { font-size: inherit !important; }
.hys-modern .page-title-imha p {
    margin: 0;
    max-width: 68ch;
    color: var(--hys-metin-soluk);
    font-size: 1.02rem;
}
/* Eski karartma katmanı modern zeminde gereksiz. */
.hys-modern .page-title-imha .overlay { display: none; }

/* --- kart blokları ------------------------------------------------------ */

.hys-modern .services-block-four .inner-box,
.hys-modern .services-block-seven .inner-box,
.hys-modern .project-block-two .inner-box,
.hys-modern .mobil-evrak-box {
    height: 100%;
    padding: 22px 22px 24px;
    background: var(--hys-zemin);
    border: 1px solid var(--hys-cizgi);
    border-radius: var(--hys-radius);
    box-shadow: var(--hys-golge-sm);
    transition: box-shadow var(--hys-gecis), transform var(--hys-gecis);
}
.hys-modern .services-block-four .inner-box:hover,
.hys-modern .services-block-seven .inner-box:hover,
.hys-modern .project-block-two .inner-box:hover,
.hys-modern .mobil-evrak-box:hover {
    box-shadow: var(--hys-golge);
    transform: translateY(-2px);
}

.hys-modern .inner-box h4,
.hys-modern .inner-box h3 {
    margin: 0 0 10px;
    font-size: 1.02rem;
    color: var(--hys-lacivert);
}
.hys-modern .inner-box h4 b { font-weight: 700; }
.hys-modern .inner-box .text,
.hys-modern .inner-box p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--hys-metin-soluk);
}

/* İkon kutusu: şablonlarda boyutsuz <img> geliyor, dev görünüyordu. */
.hys-modern .icon-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 14px;
}
.hys-modern .icon-box img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.hys-modern .text-center .icon-box { justify-content: center; }

/* --- görsel blokları ---------------------------------------------------- */

.hys-modern .image-box img,
.hys-modern .image img,
.hys-modern .image-column img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hys-radius-sm);
}

/* --- içerik tipografisi ------------------------------------------------- */

.hys-modern .about-trade h2,
.hys-modern .content-column h2 { color: var(--hys-lacivert); }
.hys-modern .text-dark-blue { color: var(--hys-lacivert); }
.hys-modern .inner-column { height: 100%; }

/* --- eski düğmeler ------------------------------------------------------ */

.hys-modern .theme-btn,
.hys-modern .btn-style-one,
.hys-modern .btn-style-twelve {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 999px;
    background: var(--hys-lacivert);
    color: #fff !important;
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hys-gecis);
}
.hys-modern .theme-btn:hover,
.hys-modern .btn-style-one:hover,
.hys-modern .btn-style-twelve:hover { background: var(--hys-lacivert-acik); }

/* --- kullanılmayan/bozuk parçalar --------------------------------------- */
/* Klasik temanın grafik bileşenleri modern temada karşılıksız; gizliyoruz. */
.hys-modern .btc-chart,
.hys-modern .chart-line,
.hys-modern .chart-area { display: none; }

/* --- duyarlı davranış --------------------------------------------------- */

@media (max-width: 991px) {
    .hys-modern .col-md-4,
    .hys-modern .col-md-3,
    .hys-modern .col-md-5,
    .hys-modern .col-md-7,
    .hys-modern .col-md-8,
    .hys-modern .col-md-9 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 640px) {
    .hys-modern .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* =======================================================================
   Hizmet detay sayfaları
   themes/modern/views/page/_hizmet-detay.php ile birlikte kullanılır.
   ======================================================================= */

/* Başlıkta sayfaya özel görsel; metnin okunurluğu için üstüne degrade
   bindirilir, görselin kendisi sağ tarafta soluk kalır. */
.hys-modern .hys-hizmet-basligi {
    position: relative;
    overflow: hidden;
}
.hys-modern .hys-hizmet-basligi::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Kaynak görsellerin sol yarısı, klasik temanın koyu metin paneli için
       konmuş düz siyah bir alan; tam ortada sert bir dikey çizgi bırakıyor.
       Bu yüzden yalnızca sağdaki fotoğraf yarısını, sola doğru silinerek
       biten bir maskeyle gösteriyoruz. */
    background-image: var(--hys-hizmet-gorsel);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 200% 100%;
    opacity: .22;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
            mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
.hys-modern .hys-hizmet-basligi > .hys-kapsayici {
    position: relative;
    z-index: 1;
}

/* Adım ikonu — sayının altında, sabit kutu içinde */
.hys-modern .hys-adim-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--hys-zemin-alt);
    border: 1px solid var(--hys-cizgi);
}
.hys-modern .hys-adim-ikon img {
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

/* Bölüm butonunu sola yaslayan varyant (ortalı olan .hys-bolum-dugme) */
.hys-modern .hys-bolum-dugme--sol { text-align: left; }

/* "Güvenli / Kolay / Ekonomik" şeridi — klasik temadaki mavi görselin yerine */
.hys-modern .hys-hizmet-serit .hys-kart--serit {
    text-align: center;
    border-top: 3px solid var(--hys-mavi);
}

/* Sayfa sonu teklif çağrısı */
.hys-modern .hys-cta-kutu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(26px, 4vw, 40px);
    border-radius: var(--hys-radius);
    background: linear-gradient(135deg, #12356b 0%, #1e5bb0 100%);
    color: #fff;
}
.hys-modern .hys-cta-kutu h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.hys-modern .hys-cta-kutu p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
}
/* .hys-modern a (0,1,1) tekil sınıf kuralını yendiği için buton
   seçicisi de eleman + sınıf olarak yazılır. */
.hys-modern .hys-cta-kutu a.hys-dugme--birincil {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    background: #fff;
    border-color: #fff;
    color: var(--hys-lacivert);
}
.hys-modern .hys-cta-kutu a.hys-dugme--birincil:hover {
    background: var(--hys-zemin-alt);
    border-color: var(--hys-zemin-alt);
    color: var(--hys-lacivert);
}

@media (max-width: 575px) {
    .hys-modern .hys-cta-kutu { flex-direction: column; align-items: flex-start; }
}

/* Adımlar <ol> olduğu için tarayıcının kendi işareti, .hys-adim'in
   sayaç rozetiyle üst üste biniyordu; işareti kaldırıyoruz. */
.hys-modern .hys-adimlar {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hys-modern .hys-adimlar > .hys-adim { list-style: none; }
.hys-modern .hys-adimlar > .hys-adim::marker { content: none; }

/* Sertifika görselleri geç yüklendiğinde kutu sıfıra çökmesin. */
.hys-modern .hys-rozet-kutu { min-height: 120px; }

/* Sertifika görsellerinin kendi tuvalinde geniş boşluk var; kutuyu
   daraltıp görseli büyüterek oranı dengeliyoruz. */
.hys-modern .hys-rozetler {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 200px));
    gap: 16px;
}
.hys-modern .hys-rozet-kutu {
    min-height: 0;
    padding: 14px 16px;
    aspect-ratio: 1.22;
}
.hys-modern .hys-rozet-kutu img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =======================================================================
   Sektör sayfaları
   Bu şablonlar başlık görselini inline background-image ile veriyor ve
   kartları Bootstrap float sütunlarına yerleştiriyor.
   ======================================================================= */

/* Inline arka plan görseli degradenin üstünü kaplıyordu; görseli
   ::after katmanına alıp kaynak görselin düz siyah sol yarısını
   maskeyle gizliyoruz (hizmet başlıklarıyla aynı yaklaşım). */
.hys-modern .page-title-imha {
    overflow: hidden;
    /* Inline background-image öğenin kendisinde kalır ama görünmez olur;
       görseli ::after katmanı maskeleyerek çizer (bkz. .hys-sektor-gorsel). */
    background-clip: padding-box;
}
.hys-modern .page-title-imha::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hys-sektor-gorsel, none);
    background-repeat: no-repeat;
    /* Kaynak görselin sol yarısı düz siyah bir panel; sağ yarısı sağa
       yaslanıp taşarak yalnızca fotoğraf kısmı görünür. */
    background-position: right center;
    background-size: auto 100%;
    opacity: .22;
    pointer-events: none;
    /* Görsel sağ yarıda kalsın; sola doğru silinerek metnin altında
       kaybolsun. Sağ kenardaki tekrar izini önlemek için soldan
       başlayan maskeyi sağda da hafifçe yumuşatıyoruz. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 97%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 97%, transparent 100%);
}
.hys-modern .page-title-imha > .container { position: relative; z-index: 1; }

/* Şablonlardaki <h3>&nbsp;</h3> başlıkları kartların içinde kocaman
   boşluk bırakıyor; içi yalnızca boşluk olanları gizliyoruz.
   (:empty eşleşmez, çünkü &nbsp; bir metin düğümüdür.) */
.hys-modern .inner-box h3.bos-baslik { display: none; }

/* --- kart ızgarası ------------------------------------------------------ */

/* Aynı satırdaki kartlar eşit yükseklikte olsun; float yerine grid. */
/* Şablon kartları col-md-6 sütunlarının içine yığıyor; bu da kartları
   sütun genişliğinin yarısına düşürüyordu. Satır ve sütunları düzleştirip
   kartların tek bir ızgara oluşturmasını sağlıyoruz. */
.hys-modern .service-single .content-box .row,
.hys-modern .service-single .content-box .row > [class*="col-"] {
    display: contents;
}

/* Kartların tamamı içerik kutusunda tek ızgarada toplanır. */
.hys-modern .service-single .content-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 18px;
    align-items: stretch;
}
/* Paragraflar ve başlıklar satırın tamamını kaplasın. */
.hys-modern .service-single .content-box > p,
.hys-modern .service-single .content-box > h2,
.hys-modern .service-single .content-box > h3,
.hys-modern .service-single .content-box > h4 {
    grid-column: 1 / -1;
    margin: 0;
}
.hys-modern .service-single .services-block-four { height: 100%; }
.hys-modern .service-single .services-block-four .inner-box { height: 100%; }

/* Metin bloklarının kenar boşlukları ızgarada ikiye katlanmasın. */
.hys-modern .service-single .content-box > .row > .col-md-12 > p { margin: 0 0 4px; }

/* --- kart içi düzen ----------------------------------------------------- */

/* İkon üstte, başlık ve metin altında; aradaki boşluk sabit kalsın. */
.hys-modern .service-single .inner-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hys-modern .service-single .icon-box { margin-bottom: 2px; }

/* Uzun başlıklar sağdaki görselin üstüne taşmasın. */
.hys-modern .page-title-imha .row > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}
.hys-modern .page-title-imha h1 { max-width: 46%; }

@media (max-width: 991px) {
    /* Dar ekranda görsel çok yer kaplıyor; başlığa tam genişlik verilir. */
    .hys-modern .page-title-imha h1 { max-width: 100%; }
    .hys-modern .page-title-imha::after { opacity: .12; }
}

/* =======================================================================
   Giriş animasyonları
   Öğeler assets/js/animasyon.js tarafından işaretlenir; JS çalışmazsa
   hiçbir öğe gizlenmez, sayfa olduğu gibi görünür.
   ======================================================================= */

.hys-animasyon {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1) var(--hys-gecikme, 0ms),
                transform .55s cubic-bezier(.22, .61, .36, 1) var(--hys-gecikme, 0ms);
    /* Geçiş sırasında metnin titremesini önler. */
    will-change: opacity, transform;
}
.hys-animasyon.hys-gorunur {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Sayfa başlığı ve kahraman alanı sayfa açılır açılmaz görünmeli;
   ilk ekranda bekleyen boşluk kötü bir izlenim bırakır. */
.hys-sayfa-basligi .hys-animasyon,
.hys-hero .hys-animasyon {
    opacity: 1;
    transform: none;
}

/* Butonlar ve kartlarda etkileşim geri bildirimi */
.hys-modern .hys-dugme {
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.hys-modern .hys-dugme:hover { transform: translateY(-1px); }
.hys-modern .hys-dugme:active { transform: translateY(0); }

.hys-modern .hys-kart,
.hys-modern .services-block-four .inner-box {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hys-modern .hys-kart:hover,
.hys-modern .services-block-four .inner-box:hover {
    transform: translateY(-3px);
}

/* Bağlantı altı çizgisi ve menü geçişleri */
.hys-modern .hys-menu a,
.hys-modern .hys-alt-menu a {
    transition: color .2s ease;
}

/* Hareket azaltma tercihi her şeyin üstündedir. */
@media (prefers-reduced-motion: reduce) {
    .hys-animasyon,
    .hys-animasyon.hys-gorunur {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hys-modern .hys-dugme:hover,
    .hys-modern .hys-kart:hover,
    .hys-modern .services-block-four .inner-box:hover {
        transform: none;
    }
}