/*
 * Özellikler menüsü.
 *
 * Temanın `.mega` bileşeni 52.5rem sabit genişlikte bir kart. Burada
 * sayfanın iki ucuna kadar uzanan buzlu cam bir şerit isteniyor;
 * bileşenin kendisi temanın, yalnız ölçüsü, zemini ve içindeki
 * listelerin aralığı değişiyor.
 */

:root {
    /* Camın beyaz örtüsü. Menü koyu yazı taşıyor ve arkasından ana
       sayfanın renkli görselleri geçiyor; örtü inceldikçe yazı okunmaz
       oluyor. Buradaki değer arkanın rengini geçirirken yazıyı hâlâ
       okunur bırakan yer. Camı daha saydam istersek tek yeri burası. */
    --glass-tint: 0.5;
}

/* Menü şeridi konumlandırmadan çıkıyor ki panel başlık çubuğuna göre
   ölçülsün: `.menu` yalnız maddelerin genişliğinde. */
@media (min-width: 992px) {
    .header .menu {
        position: static;
    }

    /* Panel sayfanın iki ucuna uzanıyor: başlık çubuğunun iç boşluğu
       konumlandırmaya girmiyor, `left: 0` zaten sayfanın soluna denk
       geliyor. İçerik ise ortadaki `.container` ile hizalanıyor.

       Zemin buzlu cam: arkadaki sayfa bulanıklaşıyor, üstüne beyazın
       yarı saydamı biniyor. Doygunluk da artırılıyor, yoksa bulanık
       zemin soluk kalıyor. */
    .header .mega.-wide {
        left: 0;
        right: 0;
        top: 90%;
        width: auto;
        transform: none;
        padding: 3rem 0 2.5rem;
        border-radius: 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, var(--glass-tint));
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 20px 10px rgba(255, 255, 255, 0.35);
    }

    /* Panelin üst kenarındaki ışık çizgisi. Alt köprü `::before`'u
       kullandığı için bu `::after`'a düştü. */
    .header .mega.-wide::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );
    }

    /* Dört sütun. Genişlik burada veriliyor: sütunlar temanın ızgara
       sınıflarını değil, panelin kendi ölçüsünü kullanıyor. */
    .header .mega__cols > .mega__col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Sütun açıklamaları iki ya da üç satır sürüyor; sabit yükseklik olmadan
   altlarındaki listeler farklı hizadan başlıyor. Sütun dar ekranda
   daralıp yazı bir satır daha kapladığı için iki ayrı ölçü var. */
.header .mega__column-text {
    min-height: 5.25rem;
}

@media (min-width: 1200px) {
    .header .mega__column-text {
        min-height: 3.5rem;
    }
}

/*
 * Menü içindeki bağlantılar.
 *
 * Temanın `.nav li a` kuralı her bağlantıya 20px iç boşluk, kalın yazı ve
 * iki yana yaslama veriyor — üst seviye maddeler için doğru, menü
 * listeleri için fazla; maddeler birbirinden kopuk duruyordu.
 */
.menu .nav .mega__links a,
.menu .nav .mega__more {
    width: auto !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    justify-content: flex-start !important;
}

.menu .nav .mega__links a {
    gap: 0.75rem;
}

.menu .nav .mega__links a + a {
    margin-top: 1.125rem;
}

/* Bağlantının arkasındaki açık zemin: iç boşluk kalmayınca yazıyı
   sımsıkı sarıyor, onun yerine yazı rengi değişiyor. */
.menu .nav .mega__links a::before,
.menu .nav .mega__more::before {
    display: none;
}

.menu .nav .mega__links a:hover span,
.menu .nav .mega__more:hover {
    color: var(--accent-color) !important;
}

/* Marka işaretleri feather ikonlarıyla aynı boyda dursun. */
.menu .nav .mega__links .fa {
    width: 0.875rem;
    font-size: 0.875rem;
    text-align: center;
}

.menu .nav .mega__more {
    display: inline-block !important;
    text-decoration: underline;
}

/* Alt satırdaki tanıtım kartlarını üstteki listelerden ayıran çizgi. */
.header .mega__promos {
    align-items: stretch;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    margin-top: 2rem;
    padding-top: 2rem;
}

/*
 * Tanıtım kartları.
 *
 * Cam kartın tam hâli burada: iki kenar ışığı, iç parıltı ve yumuşak
 * gölge. Kanalın rengi zeminden `bg-*-light` sınıfıyla geliyor, cam da
 * onun üstüne biniyor.
 */
.menu .nav .mega__promo {
    /* Kartların yazısı iki ya da üç satır sürüyor; sütun yüksekliğine
       yayılmazsa yan yana farklı boyda duruyorlar. */
    height: 100%;
    padding: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Sınıfın verdiği opak zemin inceltiliyor, yoksa arkayı bulanıklaştırmanın
       bir anlamı kalmıyor: cam değil, düz renk görünüyor. */
    background-color: color-mix(in srgb, var(--promo-tint) 80%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px 10px rgba(255, 255, 255, 0.25);
    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu .nav .mega__promo:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px 10px rgba(255, 255, 255, 0.25);
}

/* Üst kenar ışığı. Temanın buraya koyduğu açık zemin kutusunun yerini
   alıyor. */
.menu .nav .mega__promo::before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    opacity: 1;
}

/* Sol kenar ışığı. */
.menu .nav .mega__promo::after {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8),
        transparent,
        rgba(255, 255, 255, 0.3)
    );
}

.mega__promo-art {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    box-shadow: 0 10px 20px rgba(1, 33, 58, 0.12);
}

.mega__promo-art svg {
    width: 2rem;
    height: 2rem;
}

/* Üst maddedeki ok. Panel açılınca yukarı dönüyor. */
.menu .nav .mega__toggle {
    justify-content: flex-start !important;
}

.mega__chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu .nav li.-has-mega-menu:hover .mega__chevron {
    transform: rotate(180deg);
}

/*
 * Madde ile panel arasındaki köprü.
 *
 * Panel başlık çubuğunun altına oturuyor, madde ise çubuğun içinde
 * bitiyor: arada 28 piksellik boşluk var. Fare oradan geçerken madde
 * artık üzerinde sayılmadığı için panel kapanıyordu. Bu görünmez şerit
 * boşluğu dolduruyor; panelin kendi parçası olduğu için fare hâlâ
 * maddenin üzerinde sayılıyor.
 *
 * Panel kapalıyken `.mega` fare olaylarını almıyor, şerit de almıyor:
 * yanından geçerken menü kendiliğinden açılmıyor.
 */
.header .mega.-wide::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 2rem;
}

/*
 * Kaynaklar açılır listesi de aynı camdan.
 *
 * Tek bir menüde bir panel buzlu cam, yanındaki düz beyaz olursa ikisi
 * ayrı yerden gelmiş gibi duruyor.
 */
@media (min-width: 992px) {
    .header .menu .nav__submenu {
        background: rgba(255, 255, 255, var(--glass-tint));
        border: 1px solid rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 20px 10px rgba(255, 255, 255, 0.35);
    }
}

/*
 * Sayfa kayınca yapışan başlık çubuğu.
 *
 * Tema oraya düz beyaz bir zemin koyuyor; menü camdan olunca çubuk da
 * aynı camdan olmalı, yoksa panel açıldığında iki ayrı yüzey görünüyor.
 * Altındaki içerik bulanıklaşarak geçiyor.
 */
.header.is-sticky .header__bar {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/*
 * Camın kendisi ayrı bir katmanda, çubuğun üzerinde değil.
 *
 * `backdrop-filter` taşıdığı öğe, içindeki öğeler için arka planı
 * sıfırlıyor: bulanıklık doğrudan çubuğa verilince panel kendi arkasında
 * boşluk buluyor ve bulanıklaştıracak bir şey kalmıyordu — panel
 * cam değil, tamamen saydam görünüyordu. Cam çubuğun altına serilen bu
 * katmanda duruyor, panel de sayfayı bulanıklaştırmayı sürdürüyor.
 */
.header.is-sticky .header__bar::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, var(--glass-tint));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 20px 10px rgba(255, 255, 255, 0.35);
}

/* Çubuğun üst kenarındaki ışık çizgisi. */
.header.is-sticky .header__bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
}

/* Yapışık çubuk camken panelin kendi üst ışığı iki çizgi üst üste
   biniyor; panel çubuğa yaslandığı için biri yeter. */
.header.is-sticky .mega.-wide::after {
    display: none;
}

/* Başlığın yanındaki ok: o sütunun ayrıca bir listesi var demek. */
.mega__col-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--font-dark);
}

/*
 * Telefonda menü.
 *
 * Panel yalnız masaüstünde çıkıyor; temanın mobil açılır menüsü ise bu
 * şablonda çalışmıyor (madde tıklanınca boş bir kutu açıyor). Telefonda
 * Özellikler maddesi tamamen gizleniyor, geri kalan maddeler düz
 * bağlantı olarak sıralanıyor — sıradan bir açılır menü gibi.
 *
 * Özellikler ana sayfadaki bölümünden ulaşılabilir durumda kalıyor.
 */
@media (max-width: 991px) {
    .header .nav > li.-has-mega-menu {
        display: none;
    }
}

/*
 * Üst menü altı madde taşıyor.
 *
 * Temanın ölçüleri üç maddelik bir menüye göre: başlık çubuğunun iki
 * yanında 160px boşluk, her maddenin iki yanında 20px daha. Altı madde
 * oraya sığmayınca sağdaki düğmeler alt satıra kayıyordu. Boşluklar
 * daraltıldı; hepsi tek satırda duruyor.
 */
@media (min-width: 992px) {
    .header .header__bar {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .header.is-sticky .header__bar {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .menu .nav > li > a {
        padding-right: 0.4rem !important;
        padding-left: 0.4rem !important;
    }
}

@media (min-width: 1200px) {
    .header .header__bar {
        padding-right: 4rem;
        padding-left: 4rem;
    }

    .header.is-sticky .header__bar {
        padding-right: 4rem !important;
        padding-left: 4rem !important;
    }

    .menu .nav > li > a {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}