/* ============================================================================
 * theme.css — KURUMA ÖZEL TEMA KATMANI
 *
 * Bu dosya en son yüklenir ve site.css'teki nötr varsayılanları ezer.
 * Kuruma özel ne yazılacaksa buraya yazılır; site.css'e dokunulmaz.
 *
 * Katman sırası:
 *   1. site.css          bileşen ve düzen katmanı (markasız, tüm okullarda ortak)
 *   2. ventum-layers.css CMS banner katman sistemi
 *   3. theme.css         BU DOSYA — kurumun rengi, tipografisi, ince ayarları
 *
 * site.css bir bileşeni renklendirmek için aşağıdaki değişkenleri okur; burada
 * yeniden tanımlamak o bileşenin tüm kullanımlarını birden değiştirir.
 * ==========================================================================*/

:root {
    /* ---------------------------------------------------------------- palet
     * Eski bilokullari.com.tr temasından alınan değerler.
     * Kaynak: ventedu.css içindeki --theme-* tanımları.
     */
    --theme-primary-color: #e20f64;
    --theme-secondary-color: #193282;
    --theme-tertiary-color: #f8f8f8;
    --theme-quaternary-color: #5b5b5b;
    --theme-quinary-color: #ffffff;

    --theme-gradient-bg-1: linear-gradient(45deg, #da1832 0%, #da5246 100%);
    --theme-gradient-bg-2: linear-gradient(45deg, #da5246 0%, #da1832 100%);
    --theme-box-shadow-lg: rgb(50 50 93 / 15%) 0 6px 15px -5px, rgb(0 0 0 / 20%) 0 5px 6px -6px;

    /* ------------------------------------------------------------ tipografi */
    --theme-primary-font: 'Open Sans', sans-serif;

    /* ------------------------------------- site.css değişkenlerinin bağlanması
     * Soldakiler site.css'in kullandığı adlar, sağdakiler kurumun paleti.
     * Yeni bir kurum için yalnızca yukarıdaki palet bloğu değiştirilir.
     */
    --navy-950: #0f2566;
    --navy-900: var(--theme-secondary-color);
    --gold-500: var(--theme-primary-color);
    --gold-400: #e8437f;

    --brand-navy: var(--theme-secondary-color);
    --brand-orange: var(--theme-primary-color);
    --brand-yellow: #edb513;
    --brand-green: #03ca97;

    --surface-light: var(--theme-tertiary-color);
    --white: var(--theme-quinary-color);
    --shadow-lg: var(--theme-box-shadow-lg);
}

body {
    font-family: var(--theme-primary-font);
}

/* ============================================================================
 * Buradan sonrası kuruma özel ince ayar.
 *
 * Kural: önce değişkenle çözmeyi dene. Değişken yetmiyorsa buraya bileşen
 * bazlı kural yaz — ama site.css'i düzenleme, orası tüm okullarda ortak.
 * ==========================================================================*/

@import "helpers.css?v=1.2";

@-ms-viewport {
    width: device-width;
}

:root{
    --theme-primary-color: #e20f64;
    --theme-secondary-color: #193282;
    --theme-tertiary-color: #f8f8f8;
    --theme-quaternary-color: #5b5b5b;
    --theme-quinary-color: #ffffff;
    --theme-primary-font: 'Open Sans', sans-serif;
    --theme-gradient-bg-1: linear-gradient(45deg, #da1832 0%, #da5246 100%);
    --theme-gradient-bg-2: linear-gradient(45deg, #da5246 0%, #da1832 100%);
    --theme-box-shadow-lg: rgb(50 50 93 / 15%) 0px 6px 15px -5px, rgb(0 0 0 / 20%) 0px 5px 6px -6px;
}
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior:smooth
}
body {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500;
    font-style: normal;
    color: #5b5b5b;
    /* line-height: 1.8;*/
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
header {
    position: relative;
    z-index: 990;
    padding: 15px 15px;
}

/*
 * ÇIPLAK ETİKET SEÇİCİSİNİN SIZINTISI — kapatıldı.
 *
 * Yukarıdaki kural devralınan temadan geliyor ve SİTE HEADER'I için yazılmış; ama
 * seçici çıplak `header` olduğu için sayfadaki HER `<header>` etiketini yakalıyor:
 * arama sonuç sayacı, SSS başlığı, blok ve kart başlıkları… Hepsi `z-index: 990`
 * ve 15px dolgu alıyordu. Sonuçları: bileşen başlıkları site header'ıyla aynı
 * yığın düzeyine çıkıp önüne geçebiliyor, kartlarla hizası 15px kayıyordu.
 *
 * Yanına bir de `header::after` vardı: `backdrop-filter: blur(20px)` taşıyan,
 * `bottom: -120px` ile header'ın 120px ALTINA taşan bir katman. Görünmez olduğu
 * hâlde tıklamaları yiyor ve altındaki içeriği bulanıklaştırıyordu — bir bileşende
 * `<header>` varsa altındaki alanda işlem yapılamıyordu. O katman kaldırıldı;
 * TEK kullanıcısı olan site header'ında zaten ayrıca `content: none` ile
 * söndürülmüş durumdaydı, yani hiçbir yerde bir işe yaramıyordu.
 *
 * `career/_hero.php` bu sızıntıyı biliyor ve başlık alanını `<header>` yerine
 * `<div>` yaparak kaçınmış; kaynak burada kapandığı için o tür kaçınmalara artık
 * gerek yok.
 *
 * ANA HEADER DIŞARIDA: `.site-header` yalnız site header'ında var ve dolgusunu
 * BAŞKA hiçbir kural vermiyor — kapsam dışı bırakılmasaydı header'ın yüksekliği
 * değişirdi. `:not()` özgüllüğü (0,1,1) yukarıdaki kuralı (0,0,1) eziyor;
 * `.site-ui-header`in `position: sticky` / `z-index: 40` kuralına dokunmuyor.
 */
header:not(.site-header) {
    z-index: auto;
    padding: 0;
}
header .header-top{
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    height: 70px;
}
body.content-page header .header-top{
    border-bottom: 1px solid var(--theme-primary-color);
}
body.content-page.has-cover header .header-top{
    border-bottom: 1px solid #fff;
}
header .header-bottom{
    padding: 10px 0;
    display: flex;
    align-items: center;
    height: 70px;
}
body#tinymce{
    width: auto;
    height: auto;
}
.home-full-page {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
iframe[data-iframe-form]{
    width: 100% !important;
}
body.form-page {
    width: unset;
    height: unset;
}
.d-high-res-block{
    display: block;
}
.d-high-res-flex{
    display: flex;
}
.d-low-res-block, .d-low-res-flex{
    display: none;
}

/*Responsive Menu*/
.nav-open{
    display: none;
}
nav.module-menu{
    display: block;
}
.page-header nav {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    align-items: center;
}
.responsive-menu-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
@media only screen and (max-width: 768px){
    .responsive-menu-btn {
        float: none;
        margin: 0;
        position: relative;
        display: inline-block;
        width: 100%;
        height: 75px;
        text-indent: 29px;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}
/*Home Page Full Screen Swiper*/
.home-full-page .swiper-wrapper .swiper-slide img{
    width: auto;
}
.home-full-page .swiper-scrollbar-drag {
    background: #e20f64;
}
@media (min-width: 1200px){
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1200px;
    }
}
.brand-bg-1{
    background-color: #e20f64 !important;
    color: #ffffff;
}
.brand-bg-2{
    background-color: #193282 !important;
    color: #ffffff;
}
.text-brand-1{
    color: #e20f64 !important;
}
.text-brand-2{
    color: #193282 !important;
}
.text-p{
    font-size: 18px;
    color: #5b5b5b;
}
.page-home-wrapper{
    position: absolute;
    inset: 0px;
    opacity: 1;
}
.video-area .decorative-lines{
    position: absolute;
    width: 80px;
    height: 250px;
    z-index: 99;
    right: 0;
    overflow: hidden;
}
.video-area .decorative-lines:after{
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, #193282 2px, transparent 1px);
    background-size: 10px 12px;
}
.wow.animate{
    visibility: hidden;
}
.no-visible{
    visibility: hidden;
}
.more-info-btn{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
}
.more-info-btn.static{
    transform: none;
}
.more-info-btn span{
    font-size: .8em;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-flex;
}
.more-info-btn a{
    display: inline-flex;
    text-align: center;
    justify-content: center;
    font-size: 1.4em;
    margin-top: 5px;
    text-decoration: none;
}
.home {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    z-index: 0;
    height: 100vh;
    /* height: calc(var(--vh, 1vh)*100); */
}
section.page{
    position: relative;
    flex-shrink: 0;
    /* height: 100vh; */
    /* height: calc(var(--vh, 1vh)*100); */
    width: calc(100vw);
    background: #fff;
    overflow: hidden;
}
section.page.home-video-area{
    height: 100vh;
    margin-top: -170px;
    /* height: calc(var(--vh, 1vh)*100); */
}
section.home-video-area .news-area{
    display: none;
}
body.campus-page section.page{
    height: auto;
}
section.page.seperator:after{
    position: absolute;
    content: "";
    background-color: #ffffff;
    height: 100%;
    width: 120px;
    right: -60px;
    top: 0;
    transform: skew(-6deg, 0deg);
    display: none;
}
.page.page-1{
    background-image: url("../images/page1-bg.jpg");
    background-size: cover;
    background-position: center;
}
.header {
    position: relative;
    z-index: 999;
    padding: 25px 25px;
}
.site-logo{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 15px;
}
.site-logo img{
    position: relative;
    z-index: 300;
}
.site-menu{
    display: flex;
    height: 174px;
    align-items: center;
    position: absolute;
    right: 25px;
    z-index: 999;
}
ul#main-menu-new-sitemenu {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: center;
    column-gap: 15px;
    margin: 0;
    padding: 0;
}
ul#main-menu-new-sitemenu li{

}
ul#main-menu-new-sitemenu li a {
    font-size: 1.2em;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: 250ms all linear;
    border: 1px solid;
    border-radius: 6px;
    padding: 5px 12px;
}
body.page-content ul#main-menu-new-sitemenu li a{
    color: var(--theme-primary-color);
}
body.page-content.has-cover ul#main-menu-new-sitemenu li a{
    color: #fff;
}
ul#main-menu-new-sitemenu li a:hover {
    color: var(--theme-primary-color);
}
body.page-content  ul#main-menu-new-sitemenu li a:hover {
    color: var(--theme-secondary-color);
}
body.page-content.has-cover  ul#main-menu-new-sitemenu li a:hover {
    color: var(--theme-primary-color);
}
ul#top-menu-sitemenu {
    display: flex;
    list-style: none;
    justify-content: center;
    width: 100%;
    column-gap: 10px;
    margin: 0;
    padding: 0;
}
ul#top-menu-sitemenu li a{
    font-size: 1em;
    color: #ffffff;
    text-decoration: none;
    transition: 250ms all linear;
    text-transform: uppercase;
    font-weight: 100;
    border-right: 1px solid #fff;
    padding-right: 10px;
    white-space: nowrap;
}
body.page-content ul#top-menu-sitemenu > li > a{
    color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}
body.page-content.has-cover ul#top-menu-sitemenu > li > a{
    color: #fff;
    border-color: #fff;
}
ul#top-menu-sitemenu li:first-child a{
    border-right: 0;
    padding-right: 0;
}
ul#top-menu-sitemenu li:last-child a{
    border-right: 0;
    padding-right: 0;
}
ul#top-menu-sitemenu li a:hover{
    color: var(--theme-primary-color);
}
body.page-content.has-cover ul#top-menu-sitemenu li a:hover{
    color: var(--theme-primary-color);
}
body.page-content ul#top-menu-sitemenu li a:hover{
    color: var(--theme-secondary-color);
}

ul#top-menu-sitemenu li ul{
    display: none;
}
ul#top-menu-sitemenu li:hover ul {
    display: block;
    position: absolute;
    top: calc(100% + -1px);
    left: 50%;
    width: 190px;
    background: #fff;
    box-shadow: var(--theme-box-shadow-lg);
    z-index: 15;
    padding: 8px 0;
    border-radius: 10px;
    transform: translateX(-50%);
    overflow: hidden;
}
ul#top-menu-sitemenu li ul li a {
    color: var(--theme-secondary-color);
    transition: all ease-in-out 250ms;
    border-bottom: 1px solid var(--theme-secondary-color);
}
ul#top-menu-sitemenu li ul li:last-child a {
    border-bottom: 0;
}
ul#top-menu-sitemenu li ul li a i{
    margin-right: 8px;
}

ul#top-menu-sitemenu li ul li a {
    padding: 10px 20px;
    transition: all ease-in-out 250ms;
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: 600;
    font-size: .9em;
}
a.bil-learn-btn, button.bil-learn-btn {
    outline: none;
    border-radius: 25px;
    font-weight: bold;
    letter-spacing: 0px;
    font-size: 1em;
    padding: 10px 25px !important;
    color: #ffffff !important;
    border: 0;
    transition: all linear 250ms;
    background-color: #e0005a;
    border-right: 0 !important;
}
a.bil-learn-btn:hover, button.bil-learn-btn:hover {
    background-color: var(--theme-secondary-color);
    color: #ffffff !important;
}
.menu-opener{
    color: #333;
    border-left: 1px solid;
    font-size: 1.4em;
    transition: all linear 350ms;
    cursor: pointer;
}
body.campus-page .menu-opener {
    color: #fff;
}
body[data-active-page="1"] .menu-opener{
    color: #fff;
    transition: all linear 350ms;
}
footer{
    background-color: #f8f8f8;
    padding: 10px 0 30px 0;
    position: relative;
}
.footer-seperator {
    position: relative;
    background-color: #f8f8f8;
    height: 200px;
    z-index: -1;
}
.footer-seperator:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    height: 200px;
    width: 100%;
    transform: SkewY(5deg);
    transform-origin: bottom right;
    background: #ffffff;
    /* box-shadow: -6px 0px 12px 0px rgb(0 0 0 / 20%); */
}
.footer-menu-nav.nav{
    justify-content: center;
}
footer .footer-menu{
    display: flex;
    list-style: none;
    padding: 0 80px;
    margin: 0;
    justify-content: center;
}
footer .footer-menu li{
    border-right: 1px solid;
    display: flex;
    height: 20px;
}
footer .footer-menu li:last-child{
    border-right: 0;
}
footer .footer-menu li.dropdown::after{

}
footer .footer-menu li a{
    font-size: 0.7em;
    color: #333;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 0 25px;
    text-align: center;
    transition: all ease-out 350ms;
}
footer .footer-menu li a:hover{
    text-decoration: none;
    color: #e20f64;
    transition: all ease-in 350ms;
}
footer .footer-message{
    text-align: center;
    margin-top: 15px;
    font-size: .6em;
}
video.playing {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: opacity 1s cubic-bezier(.215,.61,.355,1);
    height: 100vh;
    width: auto;
}
@media (min-aspect-ratio: 249 / 155) {
    video.playing {
        width: 112vw;
        height: 125vh;
    }
}
video.popup-video {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: opacity 1s cubic-bezier(.215,.61,.355,1);
    height: 100%;
    width: auto;
}
.slider-text .text{
    padding-left: 70px;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff;
    font-size: 4.2em;
    line-height: 1.2;
    font-weight: 800;
}
.slider-text .text.low-res {
    display: none;
}
.slider-text.text-lines-hor:before{
    top: 20px;
    bottom: 15px;
    height: auto;
}
.text-lines-hor:before{
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 60px;
    background-image: linear-gradient(to bottom, #ffffff 2px, transparent 1px);
    background-size: 10px 20px;
}
.text-lines-ver:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 8px;
    width: 100%;
    background-image: linear-gradient(to right, #e20f64 2px, transparent 1px);
    background-size: 10px 20px;
}
.news-area{
    /* position: absolute; */
    bottom: 30px;
    left: 80px;
    display: flex;
    width: 100%;
    height: 355px;
    background-color: #f0f0f0;
    overflow: hidden;
    padding: 0;
    border-radius: 2em;
    box-shadow: 0px 12px 0px -6px rgb(226 15 100 / 61%), 0px 25px 0px -14px rgb(226 15 100 / 27%), 0px 10px 15px -3px rgba(0,0,0,0.1);
    align-content: center;
    align-items: stretch;
}
.news-area .title {
    letter-spacing: 2px;
    font-size: 1em;
}
.news-area .news-desc {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    color: #5b5b5b;
    height: 70%;
    align-items: center;
}
.news-area .news-navs {
    bottom: 0;
    right: 0;
}
.news-area .news-navs a{
    width: 30px;
    height: 30px;
}
.news-area .news-navs a:last-child{
    border-left: 1px solid #fff;
}
.news-area .show-all-btn{
    position: relative;
    font-size: 1em;
    letter-spacing: 2px;
    padding-bottom: 8px;
    height: 35px;
}
.news-image-wrapper{
    display: flex;
    justify-content: flex-end;
}
.play-button{
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-button:after{
    position: absolute;
    content: "";
    width: 74px;
    height: 74px;
    border: 2px solid #e20f64;
    border-radius: 50%;
}
.play-button-text{
    letter-spacing: 2px;
    font-size: 1em;
    font-weight: bold;
}
.scroll-alert{
    position: absolute;
    bottom: -22px;
    right: 60px;
    display: flex;
    align-items: center;
    z-index: 99;
}
.scroll-alert .text{
    font-weight: 600;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Page - 2 */
.page.page-2 .page-content{
    padding-left: 200px;
    padding-right: 200px;
    width: 100%;
    justify-content: center;
}
.page.page-2 .page-content .video-title h1 {
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: -8px;
}
.page.page-2 .page-content .video-desc {
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.4;
    color: #5b5b5b;
    padding-right: 255px;
    font-size: 1.5em;
}
.page.page-2 .video-area{
    justify-content: center;
    width: max-content;
}
.page.page-2 .video-area .play-button-wrapper{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page.page-2 .video-area .play-button-wrapper .play-button{
    background-color: #fff;
    box-shadow: 0 0 20px 0px #333333c2;
}
.page.page-2 .video-area .play-button-wrapper .play-button:after{
    border: 2px solid #fff;
}
.page.page-2 .video-area .stamp{
    bottom: -140px;
    left: -140px;
}
.page.page-2 .video-area .sign{
    bottom: -100px;
    right: -100px;
}
.page.page-2 .scroll-alert{
    right: 15px;
}
.page.page-2 .page-header {
    display: flex;
    flex: 100% 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 25px;
    height: 174px;
    align-items: center;
    z-index: 1000;
    margin-left: -100px;
}
.page.page-2 .page-header .nav-pills .nav-link {
    display: inline-flex;
    background-color: #dbdbdb;
    outline: none;
    border-radius: 25px;
    letter-spacing: 0;
    color: #000;
    padding: 0 45px;
    border: 0;
    text-align: center;
    line-height: 1;
    height: 45px;
    align-items: center;
    white-space: nowrap;
    font-size: 1em;
    font-weight: bold;
}
.page.page-2 .page-header .nav-pills .nav-link.active{
    background-color: #193282;
    color: #fff;
}
.page.page-2 .video-area .decorative-lines{
    transform: translateX(50%);
    top: 40px;
}

/*Page 3*/
.page.page-3{
    background-image: url("../images/page-3-bg.png");
    background-repeat: no-repeat;
    background-position: bottom right;
}
.page.page-3 .page-content{
    padding-left: 250px;
    padding-right: 200px;
    width: 100%;
}
.page.page-3 .page-content .video-title-top-title {
    letter-spacing: 8px;
    font-weight: 400;
    font-size: 1.1em;
}
.page.page-3 .page-content .video-title h1 {
    padding-left: 0;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #e20f64;
    font-size: 5em;
    line-height: 0.9;
    font-weight: 800;
}
.page.page-3 .page-content .video-desc {
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.4;
    color: #5b5b5b;
    padding-right: 425px;
}
.page.page-3 .video-area{
    justify-content: center;
    width: 100%;
}
.page.page-3 .video-poster{
    z-index: 11;
}
.page.page-3 .video-area .play-button-wrapper{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 13;
}
.page.page-3 .video-area .play-button-wrapper .play-button{
    background-color: #fff;
    box-shadow: 0 0 20px 0px #333333c2;
}
.page.page-3 .video-area .play-button-wrapper .play-button:after{
    border: 2px solid #fff;
}
.page.page-3 .video-area .sign{
    bottom: 50px;
    right: auto;
    left: -110px;
    z-index: 12;
}
.page.page-3 .video-area .decorative-lines{
    top: 40px;
    right: -20px;
    left: 40%;
    width: auto;
    height: 210px;
    z-index: 10;
}

/*Page - 4*/
.page.page-4{
    background-image: url("../images/page-4-bg.png");
    background-repeat: no-repeat;
    background-position: bottom 20% center;
}
.page.page-4 .page-content{
    padding-left: 180px;
    padding-right: 180px;
    width: 100%;
}
.page.page-4 .page-content .video-title-top-title {
    letter-spacing: 8px;
    font-weight: 400;
    font-size: 1.1em;
}
.page.page-4 .page-content .video-title h1 {
    padding-left: 0;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #e20f64;
    font-size: 3.6em;
    line-height: 1;
    font-weight: 800;
}
.page.page-4 .page-content .video-desc {
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.4;
    color: #5b5b5b;
    text-align: center;
    margin-top: 35px;
    font-size: 1.5em;
}
.page.page-4 .video-area{
    justify-content: center;
    width: 100%;
}
.page.page-4 .video-poster{
    z-index: 11;
}
.page.page-4 .video-area .play-button-wrapper{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 13;
}
.page.page-4 .video-area .play-button-wrapper .play-button{
    background-color: #fff;
    box-shadow: 0 0 20px 0px #333333c2;
}
.page.page-4 .video-area .play-button-wrapper .play-button:after{
    border: 2px solid #fff;
}
.page.page-4 .video-area .sign{
    bottom: 50px;
    right: auto;
    left: -110px;
    z-index: 12;
}
.page.page-4 .video-area .decorative-lines{
    top: 40px;
    right: -20px;
    left: 40%;
    width: auto;
    height: 210px;
    z-index: 10;
}

/* Page - 5 */
.page.page-5{
    background-image: url("../images/page5-title-image.png");
    background-repeat: no-repeat;
    background-position: top 20% left;
}
.page.page-5 .page-content{
    padding-left: 150px;
    padding-right: 150px;
    width: 100%;
}
.page.page-5 .page-content .video-title h1 {
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: -8px;
}
.page.page-5 .page-content .video-desc {
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.4;
    color: #5b5b5b;
    padding-right: 145px;
    font-size: 1.5em;
}
.page.page-5 .video-area{
    justify-content: center;
    width: max-content;
}
.page.page-5 .video-area .play-button-wrapper{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page.page-5 .video-area .play-button-wrapper .play-button{
    background-color: #fff;
    box-shadow: 0 0 20px 0px #333333c2;
}
.page.page-5 .video-area .play-button-wrapper .play-button:after{
    border: 2px solid #fff;
}
.page.page-5 .video-area .stamp{
    bottom: -140px;
    left: -140px;
}
.page.page-5 .video-area .sign{
    bottom: -100px;
    right: -150px;
}
.page.page-5 .scroll-alert{
    right: 15px;
}
.page.page-5 .video-area .decorative-lines{
    transform: translateX(50%);
    top: 40px;
}
.page.page-5 .text-area{
    padding-left: 45px;
}
.page.page-5  .text-lines-hor:before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    top: 0px;
    width: 45px;
    background-image: linear-gradient(to bottom, #e20f64 2px, transparent 1px);
    background-size: 10px 12px;
}
/*Menu*/
.menu {
    width: 650px;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.93);
    border-radius: 1px;
    transform: translateX(calc(100% + 200px));
    right: 0;
    z-index: 9999;;
}
.menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    height: 100%;
    width: 200px;
    transform: Skewx(-6deg);
    transform-origin: top right;
    background: inherit;
    box-shadow: -6px 0px 12px 0px rgba(0 0 0 0.2);
}
.slide-in {
    animation: slide_in 600ms ease-in-out 0s;
    animation-fill-mode: forwards;
}
@keyframes slide_in {
    100% {
        transform: translateX(0px);
    }
}
.slide-out {
    animation: slide_out 600ms ease-in-out 0s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
}
@keyframes slide_out {
    100% {
        transform: translateX(0px);
    }
}
.menu_icon {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 2;
    transition: all 300ms ease-in-out;
}
.menu_icon:hover {
    fill: #534;
    transform: scale(0.9);
    cursor: pointer;
}
.menu_visiblity {
    z-index: -2;
}
.close_icon {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 3;
    transition: all 300ms ease-in-out;
}
.close_icon:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.menu-close {
    background: rgba(255 255 255 0.77);
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
}
.close_cover {
    z-index: 999;
    animation: fade 300ms ease-in-out 0s 1;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.menu-close-btn{
    cursor: pointer;
    transition: all ease-out 350ms;
}
.menu-close-btn:hover{
    color: #e20f64;
    transition: all ease-in 350ms;
}
.menu-wrapper {
    position: relative;
    padding: 45px 45px 45px 50px;
    height: 100%;
}
.menu-title{
    font-size: 1em;
    letter-spacing: 1px;
}
.menu-content{

}
.menu-content .main-menu{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.menu-content .main-menu li{
    width: 100%;
    display: flex;
    margin: 5px 0;
    position: relative;
}
.menu-content .main-menu li.dropdown a::after{
    font-family: "Font Awesome 5 Pro";
    content: "\f054";
    font-weight: 900;
    position: absolute;
    color: #e20f64;
    font-size: .7em;
    line-height: 1;
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.menu-content .main-menu li a{
    position: relative;
    color: #ffffff;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1;
    transition: all ease-out 350ms;
    padding-right: 30px;
    text-transform: uppercase;
}
.menu-content .main-menu li a:hover{
    text-decoration: none;
    color: #193282;
    transition: all ease-in 350ms;
}

.menu-content .mini-menu{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-content .mini-menu li a{
    color: #fff;
    transition: all ease-out 350ms;
    font-size: 2em;
}
.menu-content .mini-menu li a:hover{
    text-decoration: none;
    color: #193282;
    transition: all ease-in 350ms;
}

.menu-footer .footer-menu{
    display: flex;
    list-style: none;
    padding: 0 30px;
    margin: 0;
}
.menu-footer .footer-menu li{
    border-right: 1px solid;
}
.menu-footer .footer-menu li:last-child{
    border-right: 0;
}
.menu-footer .footer-menu li.dropdown::after{

}
.menu-footer .footer-menu li a{
    color: #fff;
    font-size: 1em;
    margin: 25px;
    text-align: center;
    transition: all ease-out 350ms;
}
.menu-footer .footer-menu li a:hover{
    text-decoration: none;
    color: #193282;
    transition: all ease-in 350ms;
}
.menu-content .seperator-line{
    margin: 10px 0;
    background-color: #fff;
    height: 2px;
    width: 180px;
}
.social-media-icons{
    justify-content: flex-end;
    text-align: center;
    position: relative;
    width: auto;
    column-gap: 10px;
}
.social-media-icons a{
    color: #fff;
    font-size: 1em;
    margin: 10px 0;
    transition: all ease-out 350ms;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-content .social-media-icons a{
    color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}
body.page-content.has-cover .social-media-icons a{
    color: #fff;
    border-color: #fff;
}
.social-media-icons a:hover{
    position: relative;
    text-decoration: none;
    color: #193282;
    transition: all ease-in 350ms;
}
body.page-content.has-cover .social-media-icons a:hover{
    color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}
body.page-content .social-media-icons a:hover{
    color: var(--theme-secondary-color);
    border-color: var(--theme-secondary-color);
}

/*Content Page*/
body.bil-learn .page-content{
    background-image: url("../images/bil-learn-page-bg.png");
    background-repeat: no-repeat;
    background-position: top 180px left 45%;
    background-size: 40%;
}
body.bil-learn .page-content-custom{
    /* background-image: url("../images/bil-learn-bg-3-v1.png"); */
    background-repeat: no-repeat;
    background-position: top 20px center;
}
body.bil-learn .page-content-custom .container{
    background-image: url("../images/bil-learn-bg-3.png");
    background-repeat: no-repeat;
    background-position: left top 38%;
    background-size: 55%;
}
.content-page .page-header{
    position: relative;
    height: 850px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-repeat: repeat-x;
    background-position: center;
}
/*
.content-page .page-header:after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -220px;
    height: 230px;
    width: 100%;
    transform: SkewY(5deg);
    transform-origin: bottom right;
    background: #ffffff;
}
*/
.content-page .page-header .overlay{
    position: absolute;
    background: #0000008f;
    width: 100%;
    height: 100%;
}
.content-page .page-header .text{
    position: relative;
    z-index: 10;
}
.content-page .page-header .text .top-title{
    color: #e20f64;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1;
}
.content-page .page-header .text h1{
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-size: 2.8em;
}
.content-box{
    display: flex;
}
.content-box .box-image{

}
.content-box .box-content{

}
.content-box .box-content .box-title{
    line-height: 1.2;
    font-size: 1.2em;
    font-weight: 700;
}
.content-box .box-content .box-title.big{
    line-height: 1;
    font-size: 2.4em;
    font-weight: 700;
}
.content-box .box-content .box-desc{
    color: #5b5b5b;
    line-height: 1.4;
    font-size: 1.5em;
    font-weight: 300;
}
.content-box .box-image .image-lines-v-top{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    top: -75px;
}
.content-box .box-image .image-lines-v-bottom{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    bottom: -75px;
}
.content-box .box-image .image-lines-h-right{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}
.content-box .box-image .image-lines-v-top-navy{
    position: absolute !important;
    left: 50px;
    transform: translateY(-50%);
    top: 0;
}
.content-box .box-image .image-lines-h-bottom{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    bottom: -85px;
}
.content-box.cross-line .box-image{
    margin-top: -100%;
}
/* Contact Page */
.contact-map{
    position: absolute;
    width: 100%;
    height: 100%;
}
body.contact-page .content-box .box-content{
    padding-left: 170px;
}
body.contact-page .page-content .container{
    background-image: url("../images/contact-page-bg.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 1.2rem 0.2rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #e20f64;
    outline: 0;
    box-shadow: none;
}
.form-group div.error {
    font-size: 0.7rem;
    color: #e20f64;
}
textarea.form-control{
    min-height: 150px;
}
/*Main Menu*/
ul.main-menu {
    padding: 0;
    list-style: none;
    margin: 20px auto;
    clear: both;
    display: table;
}
ul.main-menu .list {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    vertical-align: sub;
    clear: both;
    flex-flow: column;
}
ul.main-menu .list > a:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f054";
    font-weight: 900;
    position: absolute;
    color: #ffffff;
    font-size: .7em;
    line-height: 1;
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul.main-menu .list:before {
    content: '\f07b';
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: 17px;
    top: 17px;
    padding: 0px 5px;
    color: #fff;
    display: none;
}
ul.main-menu .list a {
    text-decoration: none;
    color: #fff;
    display: block;
    height: 100%;
    box-sizing: border-box;
    width: fit-content;
}
ul.main-menu .list a:hover {
    transition: 300ms all;
}
ul.main-menu .list .items {
    height: 0px;
    overflow: hidden;
}
ul.main-menu .list .items a {
    padding: 0 2px;
    font-size: 2em;
    font-weight: normal;
}
ul.main-menu .list .items a:hover {
    color: #193282;
    transition: 300ms all;
}
ul.main-menu .list:last-child {
    border-bottom: none;
}
ul.main-menu .active > a:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    color: #e20f64;
    font-size: .7em;
    line-height: 1;
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
ul.main-menu .active:before {
    content: '\f07c';
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 17px;
    top: 17px;
    padding: 0px 5px;
    color: #fff;
}
ul.main-menu .active > .items {
    display: block;
    padding: 0px;
    height: auto;
    color: #fff;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: all 200ms;
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border-top: 0px solid #e00f64;
    margin-top: 6px;
}
ul.main-menu .active > .items li {
    padding: 5px 0 10px 0;
    border-bottom: 0px solid #324252;
    list-style: none;
}
ul.main-menu .active > .items li:last-child {
    border-color: transparent;
    padding-bottom: 0px;
}
ul.main-menu .active > .items .active > .items {
    background-color: #2f4b67;
}
ul.main-menu .active > a {
    color: #222c78;
    text-transform: uppercase;
    font-weight: bold;
    height: auto;
}
ul.main-menu .active .list {
    background: #697d92;
}
ul.main-menu .active .list a {
    padding: 17px 0px 17px 45px;
}
/*Contact Page*/
img.map-pin-btn {
    position: relative;
    z-index: 99;
    margin-top: -50px;
    margin-left: 190px;
}
.sss-box {
    margin-bottom: 35px;
    position: relative;
    padding-left: 25px;
    color: #5b5b5b;
}
.sss-box:before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 0px;
    width: 18px;
    background-image: linear-gradient(to bottom, #e00f64 2px, transparent 1px);
    background-size: 10px 12px;
}
.sss-box .title{
    margin-bottom: 15px;
    font-weight: bold;
}
.sss-box .desc{
    font-weight: 300;
}
.arrow-connector-left{
    background-image: url("../images/arrows-bg-left.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 80%;
}
.arrow-connector-right{
    background-image: url("../images/arrows-bg-right.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 80%;
}
body.campus-list .container-bg {
    background-image: url(../images/contact-page-bg.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    padding-left: 85px;
}
body.campus-list .content-page-detail-section {
    margin-top: -80px;
    position: relative;
    z-index: 90;
}
body.campus-list .page-header .overlay {
    position: absolute;
    background: linear-gradient(
            180deg
            , rgba(2,0,36,1) 0%, rgba(40,49,117,1) 35%, rgba(255,255,255,0) 100%);
    width: 100%;
    height: 30%;
    top: 0;
    z-index: 13;
}
body.campus-list .page-header .overlay-bottom {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -200px;
    height: 230px;
    width: 100%;
    transform: SkewY(
            5deg
    );
    transform-origin: bottom right;
    background: #193282;
    z-index: 14;
}
body.campus-list .page-header:after {
    z-index: 14;
}

body.campus-list .filter-area, body.campus-page .filter-area{
    background-color: #e20f64;
    padding: 45px 45px 45px 45px;
    border-radius: 10px;
}
body.campus-page .filter-area{
    padding: 6px;
}
body.campus-list .filter-area .filter-info-area, body.campus-page .filter-area .filter-info-area{
    color: #fff;
    text-align: center;
    margin-top: 25px;
    font-size: 1.4em;
}
body.campus-list .filter-area .filter-btn, body.campus-page .filter-area .filter-btn {
    background: white;
    width: 100%;
    color: #243b86;
    font-weight: bold;
    border-left: 2px solid;
    height: calc(1.8em + 0.75rem + 5px);
}
body.campus-list .form-control, body.campus-page .filter-area .form-control{
    border: 0;
    border-radius: 4px;
    padding: 0px 10px;
    border-left: 2px solid;
    height: calc(1.8em + 0.75rem + 5px);
}
body.campus-page .filter-area .form-control{
    border-radius: 6px;
    border-left: 0px solid;
}
.custom-list-wrapper ul{
    list-style: none;
    padding: 0;
}
.custom-list-wrapper ul li:before {
    color: #e00f64;
    content: "\f111";
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    width: 1.3em;
    font-size: 0.8em;
}
.content-box.campus-list-title .box-content .box-title.big {
    font-size: 44px;
}
.content-box.campus-list-title {
    position: relative;
}
.content-box.campus-list-title:before {
    position: absolute;
    content: "";
    background-image: url(../images/placemark-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 227px;
    height: 268px;
    z-index: -1;
    top: 50%;
    transform: translate(-50%, -50%);
}
.campus-list-card {
    display: flex;
    margin-bottom: 4em;
    align-items: start;
    position: relative;
}
.campus-list-card:after {
    position: absolute;
    content: "";
    background-color: #f7f7f7;
    left: 10%;
    right: 10%;
    height: 2px;
    bottom: -2em;
}
.campus-list-row > div:last-child .campus-list-card:after {
    display: none;
}
.campus-image {
    margin-right: 50px;
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.campus-image-wrapper {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.campus-image-wrapper img{
    height: 100%;
    width: auto;
}
.campus-image:after{
    position: absolute;
    content: "";
    background-image: url("../images/hor-img-right-lines.png");
    background-repeat: no-repeat;
    background-position: center right;
    top: 0;
    bottom: 0;
    right: -30px;
    width: 50%;
    z-index: -1;
}
.campus-detail{
    flex: auto;
}
.campus-title {
    font-size: 28px;
    font-weight: bold;
    color: #193282;
}
.campus-levels {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: -8px;
    margin-bottom: 15px;
    display: flex;
}
.campus-info {
    color: #5b5b5b;
}
.campus-info p{
    margin-left: 5px;
    margin-bottom: 0;
}
.campus-counter span{
    width: 100%;
    text-align: right;
    line-height: 1;
}
span.campus-count-number {
    font-size: 1.15em;
}
.text-block.campus-phones a{
    border-right: 1px solid #8a8a8a;
    padding-right: 0.3em;
    z-index: 2;
    color: #4e4a67;
    font-weight: bold;
}
.text-block.campus-phones a:last-child{
    border-right: 0;
    padding-right: 0;
}
.input-group {
    margin-bottom: 30px !important;
    position: relative;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px 15px;
    transition: all linear 250ms;
}
.input-group:hover {
    border: 1px solid #e00f64;
    transition: all linear 250ms;
    box-shadow: 0 0 11px -4px #0000002e;
}
.input-group:hover:after {
    opacity: 0;
    transition: all linear 250ms;
}
.input-group:after {
    opacity: 1;
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 1px;
    width: auto;
    bottom: -1px;
    background-image: linear-gradient(to right, #e00f64 2px, transparent 1px);
    background-size: 5px 20px;
    transition: all linear 250ms;
}
.input-group-title {
    padding: 0 10px;
    position: relative;
    z-index: 999;
    font-size: 1em;
    font-weight: bold;
    color: #e00f64;
    width: 100%;
    margin-bottom: 15px;
    margin-left: 0.4rem;
}
.input-group-action-btn {
    position: absolute;
    z-index: 99;
    width: auto;
    height: 22px;
    background: linear-gradient(135deg, #e20f64 5%, #e0005a 90%);
    right: 15px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    border-radius: 4px;
    padding: 0 6px;
    color: #fff;
}
.bs-placeholder .input-group-action-btn {
    transform: none;
}
.bs-placeholder {
    margin: 5px 18px;
}
.form-custom-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    border-bottom: 1px dashed #e20f64;
    margin-bottom: 15px;
    padding-right: 15px;
}
.form-custom-row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.input-group-action-btn a{;
    color: #fff;
    font-size: 0.8em;
    line-height: 1;
}
.remove-item {
    position: absolute;
    right: 0px;
    background: #969696;
    padding: 2px;
    width: 12px;
    line-height: 1;
    font-size: .5em;
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 4px;
    justify-content: center;
    top: 0;
    bottom: 15px;
    cursor: pointer;
}
select.form-control {
    padding: 0rem 0rem;
}

/*Popup*/
.popup-window button {
    position: absolute;
    background: #fff;
    border: 4px solid #24499e;
    border-radius: 100%;
    top: -16px;
    right: -16px;
    font-weight: bold;
    height: 35px;
    width: 35px;
    line-height: 1;
}
.popup-window {
    background: rgba(100, 100, 100, 0.6);
    position: fixed;
    display: none;
    z-index: 9999;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.popup-window div.content-wrapper {
    border-radius: 10px;
    position: fixed;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
    padding: 0px;
    width: 80%;
    max-width: 580px;
    z-index: 5001;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    text-align: center;
    border: 0px solid #24499e;
}
.popup-window div.content-wrapper img {
    width: 100% !important;
    height: auto;
    border-radius: 10px;
}
.dont-show-again {
    font-weight: bold;
    font-size: .9em;
    padding: 7px 0px;
}
.dont-show-again a{
    text-decoration: none;
    transition: all linear 250ms;
}
.dont-show-again:hover a{
    color: rgba(0, 0, 0, 0.3);;
}
.popup-window .stretched-link::after {
    left: 15px;
    top: 15px;
    right: 15px;
    bottom: 40px;
}
/*Swiper General*/
.module-section.slider{
    padding: 0;
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}
.swiper-wrapper {
    align-items: center;
}
.ventedu-slider{
    margin: auto;
    max-width: 100%;
}
.ventedu-slider-wrapper{
    width: fit-content;
    margin: auto;
    position: relative;
}
.ventedu-slider-wrapper.news-slider-wrapper{
    width: 100%;
    margin: auto;
    position: relative;
}
.ventedu-slider.news-slider-container .swiper-slide{
    padding-top: 50px;
}
.ventedu-slider-wrapper.gallery-slider-wrapper{
    width: 100%;
    margin: auto;
    position: relative;
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide{
    width: 585px;
    height: 435px;
    display: flex;
    overflow: hidden;
    align-items: center;
    background: #f6f6f6;
    position: relative;
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide .video-play-btn{
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e20f64;
    position: absolute;
    border-radius: 50%;
    font-size: 1.8em;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(2px 4px 6px #00000061);
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide .video-play-btn i{
    margin-right: -5px;
}
.galleries-block .send-email-btn{
    width: auto;
    height: auto;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e20f64;
    position: absolute;
    border-radius: 10px;
    left: 50%;
    transform: translate(-50%, 100%);
    filter: drop-shadow(2px 4px 6px #00000061);
    z-index: 999;
    padding: 4px 15px;
    font-size: 1.2em;
    bottom: 0;
    transition: all linear 250ms;
}
.galleries-block .send-email-btn i{
    margin-right: -5px;
}
.galleries-block .send-email-btn a{
    color: #fff;
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide .caption{
    bottom: 0;
    left: 0;
    right: 0;
    background: #0d0d0dad;
    position: absolute;
    color: #fff;
    padding: 15px;
    line-height: 1.4;
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide .caption p{
    margin: 0;
}
.ventedu-slider-wrapper.gallery-slider-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.ventedu-slider .swiper-slide{
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
}
.ventedu-slider-wrapper.staff-slider-wrapper {
    width: 100%;
    margin: auto;
    position: relative;
}
.ventedu-slider.swiper-container-horizontal>.swiper-pagination-bullets, .ventedu-slider .swiper-pagination-custom, .ventedu-slider .swiper-pagination-fraction {
    bottom: 15px !important;
}
.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #e20f64 !important;
}
.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2;
}
.swiper-button-next, .swiper-button-prev {
    background-image: none !important;
    background-color: #e20f64 !important;
    width: 42px;
    height: 42px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: -60px;
    left: auto;
    border-radius: 50%;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    right: auto;
    left: -60px;
    border-radius:50%;
}
.swiper-slide img{
    width: 100%;
    height: auto;
}
.ventedu-slider.anasayfa-slider{
    padding: 0;
    overflow: hidden;
    height: 100%;
}
.ventedu-slider.anasayfa-slider .swiper-slide {
    border-radius: 0;
    overflow: hidden;
    align-items: center;
    height: 100%;
}
.ventedu-slider.anasayfa-slider .swiper-slide img {
    width: auto;
    height: 100%;
}
.ventedu-slider-wrapper.anasayfa-slider {
    width: 100%;
    margin: auto;
    position: relative;
    height: 100%;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-button-next, .ventedu-slider-wrapper.anasayfa-slider .swiper-container-rtl .swiper-button-prev {
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
    border-radius: 15px 0px 0px 15px;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-button-prev, .ventedu-slider-wrapper.anasayfa-slider .swiper-container-rtl .swiper-button-prev {
    right: auto;
    left: auto;
    top: auto;
    bottom: 0;
    border-radius: 0 15px 15px 0;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-button-next, .ventedu-slider-wrapper.anasayfa-slider .swiper-button-prev {
    background-color: #d50d5f !important;
    font-size: 1.8em;
    top: 50%;
    transition: 250ms all linear;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-button-next:hover, .ventedu-slider-wrapper.anasayfa-slider .swiper-button-prev:hover {
    background-color: var(--theme-secondary-color) !important;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-container-horizontal>.swiper-pagination-bullets, .ventedu-slider-wrapper.anasayfa-slider .swiper-pagination-custom, .ventedu-slider-wrapper.anasayfa-slider .swiper-pagination-fraction {
    bottom: 20px;
}
.ventedu-slider-wrapper.anasayfa-slider .swiper-pagination-bullet {
    width: 15px;
    height: 6px;
    margin: 2px;
    display: inline-block;
    border-radius: 4px;
    background: #000;
    opacity: .2;
}
.title-outline {
    padding-left: 0;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #e20f64;
    font-size: 5em;
    line-height: 0.9;
    font-weight: 800;
}
.video-js{
    background-color: transparent;
}
.lang-picker{
    margin-right: 20px;
    display: flex;
    align-items: center;
}
.lang-picker ul{
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}
.lang-picker ul li.active a{
    color: #ffffff;
}
.lang-picker ul li a{
    color: #193282;
}
.lang-picker ul li a:hover{
    color: #ffffff;
    text-decoration: none;
}
.lang-picker ul li{
    position: relative;
    margin-right: 15px;
}
.lang-picker ul li:last-child{
    margin-right: 0;
}
.lang-picker ul li:after{
    position: absolute;
    content: " /";
    right: -12px;
}
.lang-picker ul li:last-child:after{
    display: none;
}
.search-box{
    position: relative;
}
.search-box:before{
    position: absolute;
    content: "\f002";
    font-family: "Font Awesome 5 Pro";
    left: 10px;
    color: #193282;
    top: 50%;
    transform: translateY(-50%);
}
.search-form{

}
.search-form input{
    border-radius: 20px;
    border: 0;
    padding: 5px 20px 5px 40px;
}

ul.home-top-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    justify-content: center;
    width: 100%;
}
ul.home-top-menu li {
    display: flex;
    margin: 0 5px;
    max-width: 180px;
    min-width: 115px;
}
ul.home-top-menu li a{
    display: inline-flex;
    background-color: #eee;
    outline: none;
    border-radius: 25px !important;
    font-family: 'Open Sans';
    letter-spacing: 0;
    color: #222c78;
    white-space: normal;
    padding: 0 20px;
    border: 0;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    height: 45px;
    align-items: center;
    font-size: 0.8em;
    font-weight: bold;
    transition: all linear 250ms;
    width: 100%;
    justify-content: center;
}
ul.home-top-menu li a:hover {
    background-color: #e20f64;
    font-family: 'Open Sans';
    color: #fff;
    text-decoration: none;
    transition: all linear 250ms;
    padding: 0 20px;
    line-height: 1.2;
    font-weight: bold;
    border-radius: 25px !important;
}
ul.home-top-menu li.active a {
    background-color: #e20f64;
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
    transition: all linear 250ms;
    font-weight: bold;
    border-radius: 25px !important;
}
section.ve-default-section{
    width: 100%;
}

body.page-content .page-header{
    position: relative;
    height: 500px;
    overflow: hidden;
    align-items: start;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}
body.page-content.no-cover .page-header{
    height: 170px;
}
body.page-content.no-cover .page-header h1{
    color: var(--theme-secondary-color);
}
body.campus-page.campus-home .page-header{
    position: relative;
    height: calc(100vh);
    overflow: hidden;
    align-items: start;
    justify-content: start;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 0;
    margin-top: -170px;
    margin-bottom: 25px;
}
body.has-cover .page-header{
    height: 500px;
    margin-top: -170px;
    margin-bottom: 0;
    justify-content: end;
}
.campus-page.campus-static-page .page-header {
    height: calc(30vh + 80px);
    margin-top: -170px;
}
.page-header.default-page-cover {
    height: 180px;
    /* background: #f2f2f2; */
    /* background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1080%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(242%2c 242%2c 242%2c 1)'%3e%3c/rect%3e%3cuse xlink:href='%23SvgjsSymbol1087' x='0' y='0'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsSymbol1087' x='720' y='0'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1080'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1086'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1085'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1081'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1082'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1083'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1084'%3e%3c/path%3e%3c/defs%3e%3csymbol id='SvgjsSymbol1087'%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='30' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='30' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='30' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='30' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='30' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='30' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='90' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='90' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='90' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='150' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='150' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='210' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='210' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='210' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='270' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='270' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='270' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='330' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='390' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='390' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='390' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='390' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='450' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='450' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='450' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='450' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='510' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='510' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='510' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='510' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='570' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='570' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='570' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='630' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='630' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='630' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='690' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='690' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='690' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='690' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3c/symbol%3e%3c/svg%3e); */
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 30px;
}
.page-header.default-page-cover .overlay {
    background: #eee !important;
}
.campus-page.campus-static-page .static-page-title {
    margin-top: -90px;
}
.campus-page .menu-lines{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    z-index: 9;
}
.campus-page .page-header:after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -220px;
    height: 230px;
    width: 100%;
    transform: SkewY(5deg);
    transform-origin: bottom right;
    background: #fff;
    display: none;
    /* box-shadow: -6px 0px 12px 0px rgb(0 0 0 / 20%); */
}
.campus-page .page-header .campus-header-bottom-lines{
    background-image: url(../images/page-header-bottom-lines.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
    height: 180px;
    bottom: -18px;
    z-index: 1;
}
.campus-page .page-header .campus-header-bottom-lines-full{
    background-image: url(../images/page-header-bottom-lines-v2.png);
    background-position: center;
    background-size: cover;
    top: auto;
    left: 0;
    right: 0;
    bottom: -230px;
    height: 230px;
    width: 100%;
    transform: SkewY(5deg);
    transform-origin: bottom right;
    z-index: 1;
}
.campus-page .page-header .overlay{
    position: absolute;
    background: #000000b8;
    width: 100%;
    height: 100%;
}
.campus-page .page-header .text{
    position: relative;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}
body.has-cover .page-header .text{
    margin-bottom: 100px;
}
.campus-page .campus-name{
    top: 30%;
    z-index: 100;
}
.campus-page .campus-name .campus-name-text{
    padding-left: 50px;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff;
    font-size: 5em;
    line-height: 1.1;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.campus-page .campus-logo-text{
    padding-left: 30px;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
    font-size: 3em;
    line-height: 1.1;
    font-weight: 800;
    display: flex;
    align-items: center;
}
body.campus-home.campus-page .campus-logo-text{
    display: none;
}
.campus-page .campus-name .campus-name-text.text-lines-hor:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    bottom: 0px;
    height: auto;
    width: 35px;
    background-image: linear-gradient(to bottom, #ffffff 2px, transparent 1px);
    background-size: 10px 15px;
}
.campus-page .page-header .campus-basic-info{
    margin-top: 10px;
}
.campus-page .page-header .campus-basic-info .contact-info{
    padding-left: 50px;
    list-style: none;
}
.campus-page .page-header .campus-basic-info .contact-info li{
    color: #fff;
}
.campus-page .page-header .campus-basic-info .contact-info li a{
    color: #fff;
    transition: all linear 250ms;
}
.campus-page .page-header .campus-basic-info .contact-info li a:hover{
    text-decoration: none;
    color: #e20f64;
    transition: all linear 250ms;
}
.campus-page .page-header .text .top-title{
    color: #e20f64;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1;
}
.campus-page .page-header .text h1{
    font-weight: 700;
    color: #1f2976;
    line-height: 1;
    font-size: 2.8em;
    margin: 0;
    text-align: center;
}
body.has-cover .page-header .text h1{
    color: #fff;
}
.social-media-icons.campus-page{
    justify-content: flex-end;
    text-align: center;
    position: absolute;
    right: 40px;
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
}
.social-media-icons.campus-page a{
    color: #fff;
    font-size: 1.3em;
    margin: 10px 0;
    transition: all ease-out 350ms;
}
.social-media-icons.campus-page a:hover{
    position: relative;
    text-decoration: none;
    color: #193282;
    transition: all ease-in 350ms;
}
.social-media-icons.campus-page:after{
    content: "";
    position: absolute;
    left: auto;
    right: -50px;
    top: 25px;
    height: auto;
    bottom: 15px;
    width: 35px;
    background-image: linear-gradient(to bottom, #ffffff 2px, transparent 1px);
    background-size: 10px 18px;
}

section.campus-menu-wrapper {
    position: relative;
    z-index: 99;
    display: flex;
    align-self: flex-end;
    width: 100%;
    margin-top: -11px;
    background: #e20f64;
    margin-bottom: 35px;
}
.campus-menu {
    background: rgb(255 255 255 / 0%);
    border-radius: 8px;
    padding: 0;
    border: 0px solid #011a5d;
}
@media (min-width: 768px){
    .campus-menu .sm-simple>li {
        border-left: 0px solid #eee;
    }
    .campus-menu .sm-simple {
        background: transparent;
        border: 0;
        box-shadow: none;
        justify-content: space-between;
        display: flex;
    }
    .campus-menu ul.sm-simple li a, .campus-menu ul.sm-simple li a.header {
        color: #ffffff;
        font-weight: bold;
        display: flex;
        height: 100%;
        text-transform: uppercase;
        padding: 8px 20px;
        transition: all linear 250ms;
    }
    .campus-menu ul.sm-simple li a:hover, .campus-menu ul.sm-simple li a.header:hover {
        transition: all linear 250ms;
        color: #fff;
        background-color: #001a5e;
        border-radius: 6px !important;
    }
    .campus-menu .sm-simple li i{
        margin-right: 6px;
        font-size: .9em;
    }
}
.campus-page .ventedu-slider {
    margin: auto;
    max-width: 100%;
    padding-bottom: 50px;
}
.campus-page .form-module .section-title {
    font-weight: bold;
    font-size: 42px;
    line-height: 1.2;
    color: #e60d64;
    margin-bottom: 25px;
    position: relative;
    padding-top: 0;
    text-align: center;
}
.campus-page .form-module .desc-text {
    font-size: 24px;
    line-height: 1.5;
}
/*
.campus-page .form-module .section-title:before{
    position: absolute;
    content: "";
    background-image: url(../images/ver-lines.png);
    background-size: auto 75px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    top: 0;
}

 */
.campus-contact-info .campus-contact-card {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.16);
}
.campus-contact-info .campus-contact-card .card-image {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.51);
}
.campus-contact-info .campus-contact-card .card-image img{
    width: 100%
}
.campus-contact-info .campus-contact-card .card-title {
    /* background: linear-gradient(
135deg
, #011a5d 5%, #3d6ae3 90%); */
    color: #e20f64;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 0;
    padding: 6px 0;
    /* margin: 0 10px; */
    border-radius: 0 0 8px 8px;
    margin: auto;
}
.campus-contact-info .campus-contact-card .card-footer {
    padding: .75rem 1.25rem;
    background-color: #eee;
    border-top: 1px solid rgba(0,0,0,.125);
}
.campus-contact-info .campus-contact-card .card-desc {
    padding: 10px 0;
}
.campus-contact-info .campus-map{
    display: flex;
    height: 100%;
    min-height: 435px;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.16);
}
.campus-contact-card ul.contact-info {
    margin: 0;
    list-style: none;
    padding: 0 25px;
}
.campus-contact-card ul.contact-info li{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px dashed #d2d2d2;
    padding: 5px 0;
}
.campus-contact-card ul.contact-info li.phone a{
    color: #5b5b5b;
    font-weight: bold;
    font-size: .9em;
    text-decoration: none;
    transition: all linear 250ms;
}
.campus-contact-card ul.contact-info li.phone a:hover{
    color: #e60d64;
    text-decoration: none;
    transition: all linear 250ms;
}
.campus-contact-card ul.contact-info li:last-child{
    border-bottom: 0px dashed #d2d2d2;
    padding-bottom: 0;
}
.campus-contact-card ul.contact-info li i{
    /*
    margin-right: 8px;
    color: #011a5d;
    */
}
.campus-contact-card .social-media-accounts {
    display: flex;
    justify-content: center;
}
.campus-contact-card .social-media-accounts a {
    margin: 0 6px;
    width: 40px;
    height: 40px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    font-size: 1.2em;
    color: #949494;
}
.campus-contact-card .social-media-accounts a.facebook:hover {
    background: #1877f2;
    color: #fff;
}
.campus-contact-card .social-media-accounts a.instagram:hover {
    background: #011a5d;
    color: #fff;
}
.campus-contact-card .social-media-accounts a.twitter:hover {
    background: #1da1f2;
    color: #fff;
}
.campus-levels{

}
.campus-levels .level-box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: auto;
}
.campus-levels .level-box .level-image{
    width: 200px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}
.campus-levels .level-box .level-title{
    margin-top: 15px;
}
/*Scroll Down Animations*/
.single-scroll-down-animation{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
}
.single-scroll-down-animation h4 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.scroll-down1 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #00b4ff;
    font-size: 30px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.scroll-down1 i {
    color: #00b4ff;
    animation: scrollDown1 1.5s ease infinite;
}

@keyframes scrollDown1 {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }
    50% {
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}
.scroll-down2 {
    width: 30px;
    height: 50px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.scroll-down2:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    transform: translateX(-50%);
    background: #ffffff;
    animation: scrollDown2 1.5s ease infinite;
}
.scroll-down2:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 6px;
    height: 15px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: #ffffff;
}

@keyframes scrollDown2 {
    0% {
        transform: translate(-50%, 0px);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, 8px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 16px);
        opacity: 0;
    }
}
.scroll-down3 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #00b4ff;
    font-size: 30px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.scroll-down3 i {
    color: #00b4ff;
    animation: scrollDown3 2s ease infinite;
}

@keyframes scrollDown3 {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }
    45% {
        transform: translateY(0px);
        opacity: 1;
    }
    65% {
        transform: translateY(-5px);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}
.scroll-down4 {
    width: 3px;
    height: 80px;
    background: #00b0ff;
    animation: scrollDown4 2s ease infinite;
    margin: 0 auto;
}

@keyframes scrollDown4 {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }
    45% {
        transform-origin: top;
        transform: scaleY(1);
    }
    55% {
        transform-origin: bottom;
        transform: scaleY(1);
    }
    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}
.scroll-down5 {
    width: 2px;
    height: 110px;
    position: relative;
    background: transparent;
    animation: scrollDown5 1.5s ease infinite;
    border-radius: 100%;
    margin: 0 auto;
}
.scroll-down5:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, #00b0ff, transparent);
}

@keyframes scrollDown5 {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }
    45% {
        transform-origin: top;
        transform: scaleY(1);
    }
    55% {
        transform-origin: bottom;
        transform: scaleY(1);
    }
    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

/*Pagination Defaults*/
.pagination-wrapper {
    display: flex;
    justify-content: center;
}
.pagination .page-link{
    padding: 0;
    display: flex;
}
.pagination .page-item.active .page-link{
    padding: .5rem .75rem;
    display: flex;
}
.pagination .page-link a{
    padding: .5rem .75rem;
    color: #17355c;
    transition: all linear 250ms;
    text-decoration: none;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #e20f64;
    background-image: linear-gradient(
            147deg
            , #e20f64 0%, #d02258 74%);
}


/*News Card*/
.news-card {
    margin-top: 20px;
    background-color: #fff;
    height: 250px;
    box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 0 0 20px 20px;
    border-top: 2px solid #e20f64;
}
.news-card .content-wrapper{
    display: flex;
    border-bottom: 1px solid #ebedef;
    position: relative;
    height: 200px;
    align-items: start;
}
.news-card-img-wrapper{
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin-top: -25px;
    border-radius: 8px;
    box-shadow: 0px 1px 7px 2px #c7c9d3;
    border-bottom: 1px solid #dcddde;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    flex: none;
}
.news-card-img {
    width: auto;
    height: 100% !important;
    transition: 0.3s ease;
}
.news-card .link-indicator{
    transition: all 0.3s ease;
}
.news-card:hover .news-card-img{
    transform: scale(1.04);
}
.news-card:hover .link-indicator{
    color: #e20f64;
    margin-right: -5px;
}
.news-card:hover{
    border-bottom: 2px solid #e20f64;
    transition: all 0.3s ease;
}
.card-content {
    padding: 15px 30px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
}
.news-card .news-desc{
    font-size: 13px;
    line-height: 1.6em;
    -webkit-line-clamp: 4;
    margin-top: 15px;
}
.news-title {
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #e20f64;
    line-height: 1.3;
}
.news-card .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.6em;
    -webkit-line-clamp: 4;
    margin-top: 15px;
    padding-right: 20px;
}

/*Announcement Card*/
.ann-card {
    margin-top: 20px;
    background-color: #fff;
    height: auto;
    box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-right: 2px solid #e20f64;
    position: relative;
}
.ann-card .category-info-wrapper{
    display: flex;
    align-items: center;
    position: absolute;
    padding: 6px 12px;
    background: #e21664;
    transform: translateY(-50%);
    border-radius: 6px;
    font-size: 0.8em;
    top: 5px;
    left: 15px;
    color: #fff;
}
.ann-card .category-info-wrapper .cat-info{

}
.ann-card .content-wrapper{
    display: flex;
    position: relative;
    height: auto;
    align-items: center;
    justify-content: space-between;
}
.ann-card .content-wrapper span.date {
    display: block;
    white-space: nowrap;
    margin-left: 4px;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px dashed #c7c7c7;
}
.ann-card-img-wrapper{
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin-top: -25px;
    border-radius: 8px;
    box-shadow: 0px 1px 7px 2px #c7c9d3;
    border-bottom: 1px solid #dcddde;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.ann-card-img {
    width: auto;
    height: 100%;
    transition: 0.3s ease;
}
.ann-card .link-indicator{
    transition: all 0.3s ease;
}
.ann-card:hover .ann-card-img{
    transform: scale(1.04);
}
.ann-card:hover .link-indicator{
    color: #e20f64;
    margin-right: -5px;
}
.ann-card:hover{
    border-right: 2px solid #e20f64;
    transition: all 0.3s ease;
}
.ann-card .card-content {
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-top: 15px;
    align-items: center;
}
.ann-card .ann-desc{
    font-size: 13px;
    margin-top: -1px;
}
.ann-title {
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #e20f64;
    line-height: 1.2;
}
.ann-card .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.6em;
    -webkit-line-clamp: 4;
    margin-top: 15px;
    padding-right: 20px;
}

/*Vertical Content Box*/
.blog-card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border-bottom: 2px solid #fff;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.blog-card .link-indicator{
    transition: all 0.3s ease;
}
.blog-card:hover .blog-card-image img{
    transform: scale(1.04);
}
.blog-card:hover .link-indicator{
    color: #e20f64;
    margin-right: -5px;
}
.blog-card:hover{
    border-bottom: 2px solid #e20f64;
    transition: all 0.3s ease;
}

.blog-card .blog-card-image {
    height: 60%;
    position: relative;
    background-color: #f2f2f2;
    min-height: 200px;
    max-height: 340px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}
.blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none;
}
.blog-card .blog-table {
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    justify-content: space-between;
}
.blog-table {
    margin-bottom: 0px;
}
.blog-category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}
.blog-text-success {
    color: #28a745!important;
}
.blog-card-blog .blog-card-caption {
    margin-top: 5px;
}
.blog-card-caption {
    font-weight: 700;
}
.blog-card .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blog-card-caption, .blog-card-caption a {
    color: #e20f64;
    text-decoration: none;
}
.blog-card .ftr {
    margin-top: 15px;
}
.blog-card .ftr .author {
    color: #888;
}

.blog-card .ftr div {
    display: inline-block;
}
.blog-card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
.blog-card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}
.blog-card .ftr .stats {
    float: right;
    line-height: 30px;
}
/*Modules*/
section.module-section {
    overflow: hidden;
}
.module-section .section-title{
    position: relative;
    font-size: 2em;
    font-weight: bold;
    color: #e20f64;
    margin-bottom: 50px;
}
.module-section .detail-btn {
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 1.2em;
    box-shadow: 0px 3px #333;
    transition: all ease 0.3s;
    background-color: var(--theme-primary-color);
    color: #fff;
}
.module-section .detail-btn:hover {
    background-color: #222c78 !important;
    color: #fff;
    box-shadow: 0px 0px #333;
}
.module-section .section-title span{
    position: relative;
}
.module-section .section-title span:after {
    position: absolute;
    content: "";
    background-image: url(../images/ver-lines.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    right: -105%;
    top: 0;
}
.module-section .section-title span:before {
    position: absolute;
    content: "";
    background-image: url(../images/ver-lines.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    top: 0;
    left: calc(-105%);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.module-section.campus-news{
    background-image: url("../images/abstract-shadows.svg");
    background-size: cover;
}
.module-section.campus-success{
    background-image: url(../images/success-bg-2.png), url(../images/abstract-shadows-mirrored-1.png);
    background-color: #fafafa;
    background-repeat: no-repeat, no-repeat;
    background-size: 310px, cover;
    background-position: left 30px top -10px, center bottom;
    box-shadow: inset 0px 10px 10px -15px #333;
}
.module-section.campus-events{
    background-image: url("../images/wave-lines.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.module-section.campus-events .section-title{
    margin-bottom: 100px;
}
/*404 Page*/
.content-page.error-404 .page-header {
    height: 450px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1032%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(183%2c 206%2c 229%2c 1)'%3e%3c/rect%3e%3cuse xlink:href='%23SvgjsSymbol1039' x='0' y='0'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsSymbol1039' x='720' y='0'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1032'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1036'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1037'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1034'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1035'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1033'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1038'%3e%3c/path%3e%3c/defs%3e%3csymbol id='SvgjsSymbol1039'%3e%3cuse xlink:href='%23SvgjsPath1033' x='30' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='30' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='30' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='30' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='30' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='30' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='30' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='30' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='30' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='30' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='90' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='90' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='90' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='90' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='90' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='90' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='90' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='90' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='90' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='90' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='150' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='150' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='150' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='150' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='150' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='150' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='150' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='150' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='150' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='150' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='210' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='210' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='210' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='210' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='210' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='210' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='210' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='210' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='210' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='210' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='270' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='270' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='270' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='270' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='270' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='270' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='270' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='270' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='270' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='270' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='330' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='330' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='330' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='330' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='330' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='330' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='330' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='330' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='330' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='330' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='390' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='390' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='390' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='390' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='390' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='390' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='390' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='390' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='390' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='390' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='450' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='450' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='450' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='450' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='450' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='450' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='450' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='450' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='450' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='450' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='510' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='510' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='510' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='510' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='510' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='510' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='510' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='510' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='510' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='510' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='570' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='570' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='570' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='570' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='570' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='570' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='570' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='570' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='570' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='570' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='630' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='630' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='630' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='630' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1036' x='630' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='630' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1037' x='630' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='630' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='630' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='630' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='690' y='30' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1038' x='690' y='90' stroke='rgba(255%2c 18%2c 156%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='690' y='150' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='690' y='210' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1035' x='690' y='270' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='690' y='330' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='690' y='390' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1034' x='690' y='450' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='690' y='510' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1033' x='690' y='570' stroke='rgba(255%2c 18%2c 156%2c 1)'%3e%3c/use%3e%3c/symbol%3e%3c/svg%3e");
}
.content-page.error-404 .page-header .text {
    position: relative;
    z-index: 10;
    margin-top: -70px;
    text-align: center;
}
/*News Detail*/
.news-header {
    background: #f2f2f2;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.news-header .left-side {
    display: flex;
    flex: 60% 0 0;
    flex-wrap: wrap;
    padding-right: 15px;
    align-items: center;
    height: auto;
}

.news-header .right-side {
    display: flex;
    flex: 40% 0 0;
}

.news-header .top, .news-header .middle, .news-header .bottom {
    display: flex;
    flex: 100%;
    align-items: center;
}
.news-header .top{
    justify-content: space-between;
    align-self: end;
    width: 100%;
    display: flex;
    flex: 100%;
    align-items: center;
    margin-bottom: 20px;
}

.news-header .social-buttons {
    display: flex;
}

.news-header ul.share-buttons {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.news-header ul.share-buttons li{
    margin-right: 5px
}
.news-header ul.share-buttons li img{
    width: 28px;
    filter: grayscale(1);
    opacity: .6
}
.news-header .cover-image-wrapper {
    display: flex;
}
.news-header .cover-image {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0px 5px 8px -4px rgba(0, 0, 0, 0.6);
    max-height: fit-content;
}
.news-header .cover-image img {
    width: 100%;
    height: auto;
}
.news-header .news-title{
    font-size: 2em;
    font-weight: 600;
    text-align: center;
    color: #0083c0;
    letter-spacing: -1px;
}
.news-header .more-images-video {
    display: flex;
    justify-content: flex-end;
    flex: 100% 0 0;
}
.news-header .photo-btn-wrapper{
    display: grid;
    margin: 0 -5px;
    grid-column: 3;
    grid-row: 3;
    width: 100%;
    grid-template-columns: 90px 90px 90px;
    grid-template-rows: 75px 75px 75px;
    column-gap: 10px;
    row-gap: 10px;
}
.news-header .photo-btn-wrapper a{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: inline-grid;
    border-radius: 6px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}
.news-header .photo-btn-wrapper a:hover img {
    opacity: 1;
    filter: grayscale(0);
}
.news-header .photo-btn-wrapper a img{
    width: 130%;
    margin: auto;
    height: auto;
    filter: grayscale(1);
    opacity: .6;
    justify-self: center;
    transition: all linear 250ms;
    margin-left: 50%;
    transform: translateX(-50%);
}
.news-header .photo-counter-info{
    background-color: rgba(33, 33, 33, 0.3);
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    z-index: 1;
    color: #fff;
    text-shadow: 1px 1px black;
}
.news-header .photo-btn-wrapper a.news-video-btn .photo-counter-info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.news-header .photo-btn-wrapper a.news-video-btn .photo-counter-info span{
    font-size: 0.5em;
    width: 100%;
}
.news-header .news-photos-container {
    padding: 15px;
    background: #6e6e6c;
    display: none;
    margin-top: -25px;
    margin-bottom: 25px;
    float: left;
    width: 100%;
    position: relative;
    z-index: 100;
    padding-top: 38px;
}
.campus-news-detail span.cat-info {
    font-weight: 100;
    line-height: 1.5;
    color: #394385;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: -2px;
    opacity: 0.4;
}
.campus-news-detail .other-news .sidebar-title {
    background: linear-gradient(
            135deg
            , #e30059 5%, #e20f64 90%);
    color: #fff;
    font-weight: bold;
    padding: 20px 10px;
    margin-bottom: 10px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    font-weight: bold;
}

ul.other-news {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.other-news li{
    text-align: left;
    margin-bottom: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    border-left: 4px solid #ddd;
    transition: all linear 250ms;
}
ul.other-news li a{
    padding-left: 10px;
    font-size: .9em;
    color: #011a5d;
    flex: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
    transition: all linear 250ms;
    text-decoration: none;
}
ul.other-news li a img {
    max-width: 80px;
    margin-left: 10px;
}
ul.other-news li:hover{
    border-left: 4px solid #e20f64;
    transition: all linear 250ms;
}
ul.other-news li i{
    display: none;
}
ul.other-news li:last-child{
    border-radius: 0 0 10px 10px;
}

/*Form Module*/
.module-section.info-form {
    background: #f2f2f2;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1080%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(242%2c 242%2c 242%2c 1)'%3e%3c/rect%3e%3cuse xlink:href='%23SvgjsSymbol1087' x='0' y='0'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsSymbol1087' x='720' y='0'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1080'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1086'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1085'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1081'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1082'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1083'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1084'%3e%3c/path%3e%3c/defs%3e%3csymbol id='SvgjsSymbol1087'%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='30' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='30' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='30' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='30' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='30' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='30' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='30' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='90' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='90' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='90' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='90' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='90' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='150' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='150' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='150' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='150' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='210' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='210' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='210' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='210' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='270' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='270' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='270' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='270' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='270' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='330' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='330' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='330' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='390' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='390' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='390' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='390' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='390' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='390' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='450' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1084' x='450' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='450' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='450' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='450' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='450' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='510' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='510' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='510' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='510' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='510' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='510' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='570' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='570' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='570' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='570' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='570' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='630' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='630' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='630' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='630' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='630' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='30' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='90' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='690' y='150' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1081' x='690' y='210' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='270' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1082' x='690' y='330' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='390' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1083' x='690' y='450' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1086' x='690' y='510' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1085' x='690' y='570' stroke='rgba(255%2c 18%2c 156%2c 0.19)'%3e%3c/use%3e%3c/symbol%3e%3c/svg%3e");
}

/*Success Tabs*/
.nav-pills.success-tab .nav-link.active, .nav-pills.success-tab .show>.nav-link {
    color: #fff;
    background-color: #e31768;
    border-bottom: 2px solid #222b78;
}
.nav-pills.success-tab li{
    margin: 0 10px;
}
.nav-pills.success-tab .nav-link {
    display: block;
    padding: .5rem 1rem;
    background: white;
    font-weight: bold;
    border-bottom: 2px solid;
    color: #e31768;
}
/*Staff Box*/
.staff-box {
    display: block;
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-top: 4px solid #e21664;
}
.staff-box .top {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 90%;
}
.staff-box .top #star {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30px;
    left: 75%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: 0.5s;
    text-decoration: none;
    z-index: 3;
}
.staff-box .top #star:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    background-color: white;
}
.staff-box .top #star:hover .ico {
    color: #FFAE00;
}
.staff-box .top #star .ico {
    text-align: center;
    font-size: 18px;
    color: #626262;
    transition: 0.5s;
}
.staff-box .top .profile, .staff-box .top .title, .staff-box .top .job {
    margin: 5px;
}
.staff-box .top .profile {
    width: 200px;
    height: 200px;
    border: 4px solid white;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.staff-box .top .title {
    font-size: 18px;
    font-weight: 700;
    color: #19365d;
}
.staff-box .top .job {
    font-size: 14px;
    font-weight: 400;
}
.staff-box .bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 10%;
    background-color: #e21664;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.staff-box .bottom .links ul {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.staff-box .bottom .links ul li {
    padding: 5px;
}
.staff-box .bottom .links ul a {
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
}
.staff-box .bottom .links ul a:hover {
    text-decoration: none;
    color: #011a5d;
}
.staff-box .bottom .links ul .green {
    color: #50E3B3;
    font-size: 15px;
    padding-right: 5px;
}
.staff-box .bottom .social-links ul {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 60px;
}
.staff-box .bottom .social-links ul li {
    padding: 10px;
    font-size: 24px;
}
.staff-box .bottom .social-links ul li a {
    color: #626262;
}
.staff-box .hover-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    transition: 0.5s ease;
    background-color: #FDF4DA;
    border-radius: 10px;
    opacity: 0;
    z-index: -1;
}
.staff-box .hover-box .text {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    text-align: center;
}
.staff-box .hover-box .text h1 {
    color: #574A21;
    line-height: 1.5;
    font-weight: 400;
    font-size: 22px;
}
.campus-page-title .page-title {
    background: #130f40;
    color: #fff;
    padding: 25px 15px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
.campus-contact-form-wrapper{
    background-color: #130f40;
    border-radius: 10px;
    padding: 25px 15px;
}
/*Blog*/
body.blog #page-content{
    margin-top: -100px;
}
.blog-sidebar{
    margin-top: -40px;
    border-top: 2px solid #e20f64;
    background: #fff;
    display: flex;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
.blog-sidebar .categories-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.blog-sidebar .categories-wrapper .cat-side-title{
    text-align: center;
    color: #e20f64;
    font-size: 1.2em;
    font-weight: 600;
    position: relative;
    margin-bottom: 15px;
}
.blog-sidebar .categories-wrapper .cat-side-title:after{

}
.blog-sidebar .categories-wrapper ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-sidebar .categories-wrapper ul li{
    display: flex;
}
.blog-sidebar .categories-wrapper ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding: 5px 15px;
    background: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: .9em;
    font-weight: bold;
    color: #2c357d;
    text-decoration: none;
    transition: all linear 250ms;
}
.blog-sidebar .categories-wrapper ul li a .badge{
    background-color: #e20f64;
    transition: all linear 250ms;
}
.blog-sidebar .categories-wrapper ul li a:hover{
    background: #e20f64;
    color: #fff;
    transition: all linear 250ms;
}
.blog-sidebar .categories-wrapper ul li a:hover .badge{
    background: #fff;
    color: #e20f64;
    transition: all linear 250ms;
}
body.blog span.cat-info {
    font-weight: 100;
    line-height: 1.5;
    color: #394385;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: -2px;
    opacity: 0.4;
}
/*Gallery Box*/
.gallery-item-box {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-top: 4px solid #e21664;
    overflow: hidden;
}
.gallery-item-box .title{
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    font-size: 2em;
    color: #e20f64;
}
.gallery-item-box .desc{
    text-align: center;
    font-size: 1.2em;
}
.ajax-model-body img{
    max-width: 100%;
    height: auto;
}
.dropdown.brand-dropdown .dropdown-menu {
    background: #e20f64;
    right: 0;
    border-radius: 20px;
    padding: 15px;
}
.dropdown.brand-dropdown .dropdown-menu a{
    color: #fff;
    font-size: .9em;
    font-weight: bold;
    padding: 5px 5px;
    border-radius: 10px;
    transition: all linear 250ms;
}
.dropdown.brand-dropdown .dropdown-menu a:hover{
    color: #000;
}

/*Home Page News Block*/
.home-full-page .module-section.news-block{
    height: 100%;
    align-items: center;
    display: flex;
}
.home-full-page .module-section.news-block .section-title{
    padding-left: 0;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #e20f64;
    font-size: 5em;
    line-height: 0.9;
    font-weight: 800;
}
.home-full-page .module-section.news-block .detail-btn {
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 1.2em;
    box-shadow: 0px 3px #333;
    transition: all ease 0.3s;
    background: #e20f64;
    color: #fff;
    margin-bottom: 30px !important;
}
.home-full-page .module-section.news-block .section-title span:after{
    display: none;
}
.home-full-page .module-section.news-block .section-title span:before{
    display: none;
}

/*Archive Page*/
.archive-page .page-header {
    position: relative;
    height: 450px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-repeat: repeat-x;
    background-position: center;
}
.archive-page .page-header .text {
    position: relative;
    z-index: 10;
    margin-top: -170px;
}
.archive-page .content-page-detail-section {
    margin-top: -100px;
}
.module-no-content-error {
    display: flex;
    margin: 15px;
    border-radius: 8px;
    border: 4px dashed #eee;
    padding: 15px;
    background: #f9f9f9;
    color: #8a8a8a;
    justify-content: center;
    font-weight: 300;
}
section.galleries-block .gallery-item {
    justify-content: center;
    position: relative;
    display: flex;
    margin-bottom: 25px;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    transition: all linear 250ms;
    border: 1px solid #c5c5c5;
}
section.galleries-block .gallery-item:hover {
    box-shadow: 0 0 20px 0px #333333c2;
    transition: all linear 250ms;
}
section.galleries-block .gallery-item:hover .send-email-btn{
    display: flex;
    transform: translate(-50%, -30%);
    transition: all linear 250ms;
}
section.galleries-block .gallery-item img{
    width: 100%;
}
section.galleries-block .gallery-item .caption{
    padding: 10px;
    margin: 10px;
    background-color: #e8e8e8;
    border-radius: 6px;
}
section.galleries-block .gallery-item .caption p{
    margin: 0;
}
.acc-player {
    position: absolute;
    background-color: #eee;
    height: auto;
    width: 250px;
    border-radius: 15px;
    bottom: 45px;
    right: 45px;
    z-index: 999;
    padding: 8px;
    display: none;
}
.acc-player div.player-wrapper{
    border-radius: 50%;
    overflow: hidden;
}
.acc-player div.player-progress-bar{
    background: rgb(207, 207, 207) !important;
}
.acc-player div.player-play-btn{
    cursor: pointer;
    font-family: monospace;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
}
body.basari-list.content-page .page-header {
    height: 500px;
    background-size: cover;
    background-color: #e40f63 !important;
}
body.basari-list.content-page .page-header .overlay{
    opacity: 0;
}
body.basari-list.content-page .page-header .overlay-bottom{
    display: none;
}
body.basari-list .content-page-detail-section > .container-fluid {
    max-width: 1920px;
}
.basarilar-table p{
    margin: 0;
}
.basarilar-table th.degree-icon img{
    width: 60px;
    height: auto;
}
.basarilar-table tbody td{
    vertical-align: middle;
}
body.basari-list .content-box.campus-list-title:before {
    position: absolute;
    content: "";
    background-image: url(../images/basarilar-page-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 227px;
    height: 268px;
    opacity: .2;
    z-index: -1;
    top: 50%;
    transform: translate(-50%, -50%);
}
.plyr {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    align-items: center;
    direction: ltr;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1.7;
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease;
    z-index: 0;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
    margin: 16px auto;
}
.bilmun-page-header .text {
    position: relative;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}
.bilmun-page-header {
    position: relative;
    height: calc(100vh);
    overflow: hidden;
    align-items: start;
    margin-bottom: 20px;
    justify-content: center;
}
.bilmun-page-header:after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -220px;
    height: 230px;
    width: 100%;
    transform: SkewY(5deg);
    transform-origin: bottom right;
    background: #ffffff;
    /* box-shadow: -6px 0px 12px 0px rgb(0 0 0 / 20%); */
}
.bilmun-page-header .overlay{
    position: absolute;
    background: #0000008f;
    width: 100%;
    height: 100%;
}
.bilmun-page-header .text .top-title{
    color: #e20f64;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1;
}
.bilmun-page-header .text h1{
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-size: 2.8em;
}
.bilmun-social-box{
    background: linear-gradient(45deg, rgba(25,50,130,1) 0%, rgba(226,15,100,1) 67%);
    border-radius: 10px;
    width: 90%;
    margin: auto;
    display: flex;
    padding: 50px;
    height: 300px;
    align-items: center;
}
.accordion .card-header {
    border-bottom: 1px solid rgb(226 14 99);
}
.skewed-top:before{
    position: absolute;
    content: "";
    clip-path: polygon(0 0%, 0% 100%, 100% 100%);
    width: 100%;
    height: 150px;
    top: 0;
    transform: translateY(calc(-100% + 1px ));
}
.skewed-bottom:after{
    position: absolute;
    content: "";
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    width: 100%;
    height: 150px;
    bottom: 0;
    transform: translateY(calc(100% - 1px))
}
.skewed-grey:before, .skewed-grey:after{
    background: #ecf0f8;
}
.skewed-grey:before, .skewed-grey:after{
    background: #ecf0f8;
}
.skewed-red:before, .skewed-red:after{
    background: #e20e63;
}
.skewed-top.skep-flipped-x:before{
    clip-path: polygon(100% 100%, 100% 0%, 0% 0%);
}
.skewed-top.skewed-green:before, .skewed-bottom.skewed-green:after{
    background-color: inherit;
}
.skewed-top.skewed-navy:before, .skewed-bottom.skewed-navy:after{
    background-color: inherit;
}
a.header-phone-number {
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: 250ms all linear;
}
body.page-content a.header-phone-number{
    color: var(--theme-primary-color);
}
body.page-content.has-cover a.header-phone-number{
    color: #fff;
}
a.header-phone-number:hover{
    color: var(--theme-primary-color);
}
body.page-content.has-cover a.header-phone-number:hover{
    color: var(--theme-primary-color);
}
body.page-content a.header-phone-number:hover{
    color: var(--theme-secondary-color);
}
section.action-box-section {
    margin-top: -170px;
    position: relative;
    z-index: 500;
}
.action-box {
    background-color: #fff;
    border-radius: 2em;
    display: flex;
    padding: 15px 55px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: 0px 12px 0px -6px rgb(226 15 100 / 61%), 0px 25px 0px -14px rgb(226 15 100 / 27%), 0px 10px 15px -3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.action-box div.image{
    margin-bottom: 0;
}
.action-box div.image img{
    width: auto;
    height: 75px;
}
.action-box p{
    line-height: 1.4;
    margin: 0;
    font-size: 1.2em;
    text-align: center;
    font-weight: 600;
    width: 165px;
}
.module-section.levels{
    background-color: #f7f7f7;
    padding-top: 280px !important;
    position: relative;
    margin-top: -200px;
    background: linear-gradient(1deg, #fff 0%, #dfdfdf 150%);
}
body.campus-home .module-section.levels{
    margin-top: 0;
    padding-top: 50px !important;
}
.homepage .campus-levels .level-box .level-image {
    width: 240px;
    height: 240px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0px 4px 0 var(--theme-primary-color), 0px 8px 0 #e20f644a;
}
.homepage .campus-levels .level-box .level-title {
    margin-top: 15px;
    text-align: center;
    font-size: 1.5em;
}
.homepage .level-desc {
    font-weight: 100;
    font-size: 0.6em;
}
.swiper.news-swiper{
    padding-bottom: 60px;
}
.swiper.news-swiper .swiper-slide.swiper-slide-visible.swiper-slide-next, .swiper.news-swiper .swiper-slide.swiper-slide-visible.swiper-slide-prev {
    filter: blur(2px);
    transform: translate3d(0px, 0px, -650px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    pointer-events: none;
    opacity: .6;
}
.swiper.news-swiper .swiper-slide.swiper-slide-visible.swiper-slide-prev .news-card, .swiper.news-swiper .swiper-slide.swiper-slide-visible.swiper-slide-next .news-card {
    pointer-events: none !important;
}
.news-swiper .news-card {
    margin-top: 0;
    background-color: #fff;
    height: 250px;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    border-top: 0px solid #e20f64;
}
.news-swiper  .news-card .content-wrapper {
    display: flex;
    border-bottom: 0px solid #ebedef;
    position: relative;
    height: 175px;
    align-items: start;
}
.news-swiper  .news-card  .card-content {
    padding: 15px 25px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
}
.news-swiper .news-card-img-wrapper {
    overflow: hidden;
    width: 250px;
    height: 250px;
    border-radius: 0;
    /* box-shadow: 0px 1px 7px 2px #c7c9d3; */
    border-bottom: 1px solid #dcddde;
    transition: all 0.3s ease;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    flex: none;
    margin: 0;
}
.news-swiper .news-card .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.6em;
    -webkit-line-clamp: 4;
    margin-top: 15px;
    padding-right: 20px;
    padding-left: 280px;
}
.news-swiper .swiper-button-next, .news-swiper .swiper-button-prev {
    background-image: none !important;
    background-color: #e20f64 !important;
    width: 42px;
    height: 42px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 2px solid;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    transition: 250ms all linear;
}
.news-swiper .swiper-button-next:hover, .news-swiper .swiper-button-prev:hover {
    background-color: var(--theme-secondary-color) !important;
    transform: scale(1.2) translateY(-50%);
}
.news-swiper .swiper-button-next, .news-swiper .swiper-container-rtl .swiper-button-prev {
    right: 100px;
    left: auto;
    border-radius: 50%;
}
.news-swiper .swiper-button-prev, .news-swiper .swiper-container-rtl .swiper-button-next {
    right: auto;
    left: 100px;
    border-radius: 50%;
}
body.homepage .module-section .section-title span:before , body.homepage .module-section .section-title span:after{
    display: none;
}

#yottie_1 .yottie-widget-feed {
    background: rgba(0,0,0,0) !important;
}
#yottie_1 .yottie-widget-feed-section-slide {
    background: rgba(0,0,0,0) !important;
    padding-bottom: 15px;
}
#yottie_1 .yottie-widget-video {
    background: rgb(255, 255, 255);
    border-radius: 1.4em;
    margin-bottom: 55px !important;
    box-shadow: 0px 12px 0px -6px rgb(226 15 100 / 61%), 0px 25px 0px -14px rgb(226 15 100 / 27%), 0px 10px 15px -3px rgba(0,0,0,0.1);

}
.yottie-widget-video-classic .yottie-widget-video-info {
    padding: 16px 14px !important;
    height: 72px;
}
.yottie-widget-video-info-title {
    display: inline-block;
    overflow: hidden;
    white-space: normal !important;
    line-height: 18px;
    font-weight: 700;
    font-size: 14px;
}
span.yottie-widget-feed-section-pagination-bullet {
    text-align: center;
    min-width: 18px;
    font-size: 11px;
    padding: 5px 7px;
    margin: 0 3px;
    width: 30px !important;
    border-radius: 50% !important;
    height: 30px !important;
    display: inline-flex !important;
    color: #aaa;
    line-height: 1;
    background: rgba(175,175,175,.1);
    opacity: 1;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
    align-items: center;
    justify-content: center;
}
.yottie-widget-feed-section-pagination .swiper-pagination-bullet-active {
    color: #ffffff !important;
    background: var(--theme-primary-color) !important;
}
span.yottie-widget-feed-section-pagination-bullet-more::after, span.yottie-widget-feed-section-pagination-bullet-more::before {
    top: 14px !important;
    right: 44% !important;
}
.yottie.yottie-popup {
    z-index: 999999 !important;
}

::-webkit-scrollbar-thumb {
    border: 5px solid transparent;
    border-radius: 10px;
    background-color: grey;
    background-clip: content-box;
    -webkit-background-clip: content-box;
    transition: all ease-in-out 250ms;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-primary-color);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    transition: all ease-in-out 250ms;
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
}

/** menu style variables */
.menu-wrapper.mobile{
    display: none;
}
.mobile-menu-opener-wrapper{
    height: 100%;
    align-items: center;
    justify-content: end;
    -webkit-justify-content: flex-end;
    -webkit-align-items: center;
}
.menu-opener .bar {
    width: 2.5rem;
    height: 1.5rem;
    position: relative;
    display: block;
    margin-top: -6px;
    margin-right: 0.5em
}
.menu-opener .bar span, .menu-opener .bar:before, .menu-opener .bar:after {
    display: block;
    background: #ffffff;
    width: 100%;
    height: 0.2rem;
    position: absolute;
    left: 0;
    border-radius: 0.3rem;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
.menu-opener .bar span {
    top: 0;
}
.menu-opener .bar:before, .menu-opener .bar:after {
    content: "";
}
.menu-opener .bar:before {
    top: 50%;
}
.menu-opener .bar:after {
    top: 100%;
}
/*
.menu-opener:hover .bar span {
    transform: translateY(-0.3rem);
    -webkit-transform: translateY(-0.3rem);
    -moz-transform: translateY(-0.3rem);
}
.menu-opener:hover .bar:after {
    transform: translateY(0.3rem);
    -webkit-transform: translateY(0.3rem);
    -moz-transform: translateY(0.3rem);
}

 */
.menu-active .menu-opener .bar span, .menu-active .menu-opener .bar:before, .menu-active .menu-opener .bar:after {
    background: var(--theme-gradient-bg-2);
}
.menu-active .menu-opener .bar span {
    transform: translateY(1.6rem) translateX(0) rotate(45deg);
    -webkit-transform: translateY(0.8rem) translateX(0) rotate(45deg);
    -moz-transform: translateY(1.6rem) translateX(0) rotate(45deg);
}
.menu-active .menu-opener .bar:before {
    opacity: 0;
}
.menu-active .menu-opener .bar:after {
    transform: translateY(-1.6rem) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-0.7rem) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-1.6rem) translateX(0) rotate(-45deg);
}
.menu-opener, .menu-opener:hover, .menu-opener:focus, .menu-opener:active {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border: 0;
}
.menu-opener .text,
.menu-opener .bar {
    display: inline-block;
    vertical-align: middle;
}
.menu-opener .bar {
    margin-left: .5rem;
}
.ve-default-section{
    overflow: hidden;
}
.sub-menu-opener{
    display: none;
}
section.page-sub-menu {
    margin-top: -45px;
    margin-bottom: 65px;
}
body.has-cover section.page-sub-menu {
    margin-top: -25px;
}
.feed-powered-by-es{
    opacity: 0;
}
ul.contact-info.in-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.contact-info.in-menu li{
    position: relative;
}
ul.contact-info.in-menu li ul{
    display:none;
}
ul.contact-info.in-menu li:hover ul{
    display:block;
    position: absolute;
    list-style: none;
    margin: 0;
    background: #fff;
    border-radius: 10px;
    right: 0;
    left: auto;
    width: max-content;
    padding: 4px 0;
}
ul.contact-info.in-menu li ul li a{
    color: var(--theme-secondary-color);
    font-size: 1.2em;
    padding: 8px 15px;
    border-bottom: 1px solid var(--theme-secondary-color);
    display: inline-block;
    border-radius: 0;
}
ul.contact-info.in-menu li ul li a:hover{
    color: var(--theme-primary-color);
}
ul.contact-info.in-menu li ul li:last-child a{
    border-bottom: 0;
}
.content-page-detail-section{
    overflow: hidden;
}
.site-logo .campus-logo-name{
    position: absolute;
    left: 0;
    top: -9px;
    transform: translateY(50%);
}
.site-logo .campus-logo-name .campus-name-text {
    padding-left: 130px;
    color: transparent;
    -webkit-text-stroke-width: 0.02rem;
    -webkit-text-stroke-color: #ffffff;
    font-size: 2em;
    line-height: 1.3;
    margin-top: -8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.blog-card.project-card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    border-bottom: 2px solid #fff;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card.project-card .blog-card-image {
    height: 250px;
    position: relative;
    background-color: #f2f2f2;
    min-height: 200px;
    max-height: 340px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    border-radius: 6px;
    box-shadow: none;
}
.blog-card.project-card .blog-card-image img {
    width: 130%;
    height: 100%;
    border-radius: 6px;
    pointer-events: auto;
}
.blog-card.project-card .blog-table {
    padding: 15px 15px;
    display: flex;
    flex-direction: column;
    min-height: 130px;
    justify-content: space-between;
}
/* ============================================================================
 * HEADER — canlı bilokullari.com.tr düzeni
 *
 * DÜZEN her sayfada aynı; değişen yalnızca RENK:
 *   anasayfa   → saydam header, hero üstünde, beyaz yazı
 *   iç sayfa   → beyaz zemin, koyu/pembe yazı
 * Bu yüzden geometri kuralları ortak, renkler iki ayrı bölümde.
 *
 * SATIR HEDEFLEME: Studio'da satır sırası panelden değişebiliyor, bu yüzden
 * satırlar içeriklerine göre seçiliyor:
 *   sosyal medya taşıyan satır → üst satır
 *   telefon taşıyan satır      → ana menü satırı
 *
 * SPESİFİKLİK: site.css bu bölgede 0-4-1'lik seçiciler kullanıyor
 * (.site-ui-header--modern > .site-ui-studio-row:first-child ...).
 * ==========================================================================*/

/* ------------------------------------------------------------ ORTAK DÜZEN */

/* Menü çubuklarının dolu zemini kalkıyor: site.css .site-ui-nav ögesine
 * background: var(--brand-orange) veriyor ve bu değişken kurumun pembesine
 * bağlı olduğu için menüler dolu pembe çubuk görünüyordu.
 *
 * YALNIZ MASAÜSTÜ. Mobilde .site-ui-nav artık bir çubuk değil, ekranı kaplayan
 * menü paneli; zemini burada silmek paneli saydam bırakıyor ve arkadaki hero
 * blur'un içinden okunuyordu. Mobil panelin kendi yüzeyi dosyanın sonundaki
 * "MOBİL BAŞLIK VE MENÜ" bölümünde tanımlı. */
@media (min-width: 769px) {
    .site-ui-header .site-ui-nav,
    .site-ui-header .site-ui-nav__inner {
        background: transparent;
        box-shadow: none;
    }
}

/* Logo solda, header yüksekliğinde ortalı.
 * .site-ui-studio-row position:relative olduğu için ortalama satıra göre
 * yapılıyordu; logoyu taşıyan satır static'e alınıyor. */
.site-ui-header .site-ui-studio-row:has(.site-ui-layout-logo) {
    position: static;
}

.site-ui-header .site-ui-layout-logo {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

@media (min-width: 769px) {
    /* site.css logoyu max-height: 66px ile kısıtlıyor (0-4-1, aynı sorgu). */
    .site-ui-header--modern .site-ui-studio-row:has(.site-ui-layout-logo) .site-ui-layout-logo img {
        width: 145px;
        height: auto;
        max-height: none;
        max-width: none;
    }
}

/* Menüler sayfa ortasında: kenar kolonlarına eşit esneklik verilir, ana menü
 * satırında solda ::before ile dengeleyici boşluk üretilir. */
.site-ui-header--modern .site-ui-studio-columns {
    justify-content: center;
}

.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-layout-logo),
.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-socials),
.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-phone) {
    flex: 1 1 0;
    min-width: 0;
}

.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-socials),
.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-phone) {
    justify-content: flex-end;
}

.site-ui-header--modern .site-ui-studio-column:has(> .site-ui-nav) {
    flex: 0 1 auto;
    justify-content: center;
}

.site-ui-header--modern .site-ui-studio-row:has(.site-ui-phone) .site-ui-studio-columns::before {
    content: "";
    flex: 1 1 0;
}

/* Satır boşlukları: site.css --padding-md ögesine 20px veriyor, header daha
 * derli toplu duruyor. Yalnızca header'a uygulanır. */
.site-ui-header .site-ui-studio-row--padding-md {
    padding-block: 10px;
}

/* Üst satır: bağlantı geometrisi */
.site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) {
    padding-bottom: 0;
}

.site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link {
    position: relative;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    font-weight: 600;
}

/*
 * VURGULU HAP — hangi başlığın pembe olacağını PANEL söyler.
 *
 * Önceden `:first-child` idi, yani vurgu menüdeki ilk ögeye kilitliydi ve sırayı
 * değiştirmeden başka bir başlığı öne çıkarmak imkânsızdı. Artık Menü Yönetimi'nde
 * ögenin "CSS class" alanına `is-highlighted` yazmak yetiyor.
 */
.site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link.is-highlighted {
    background: var(--theme-primary-color);
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    padding: 8px 20px;
}

/* Vurgulu hapta ayırıcı çizgi olmaz — hapın kendisi zaten ayırıyor. */
.site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link.is-highlighted::before {
    display: none;
}

/*
 * Ayırıcı çizgi ögelerin ARASINDAKİ boşlukta durur, ögenin kendi kutusunun sol
 * kenarında değil.
 *
 * `left: 0` iken çizgi bağlantının dolgu kutusunun içindeydi; üzerine gelindiğinde
 * hover kutusu (arka plan + 1px iç gölge) çizginin üstünü örtüyor ve çizgi kutunun
 * sol kenarına yapışmış fazladan bir çerçeve gibi görünüyordu. Aradaki boşluk 10px,
 * çizgi onun tam ortasına (`-5px`) alındı: artık hiçbir hover kutusuyla kesişmiyor.
 */
.site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
}

/* Ana menü satırı: çerçeveli haplar */
.site-ui-header--modern .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav__link {
    border: 1px solid;
    border-radius: 6px;
    padding: 9px 18px;
    margin: 0 5px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    transition: 250ms all linear;
}

.site-ui-header--modern .site-ui-phone {
    font-size: 1.5em;
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 0;
}

@media (min-width: 769px) {
    .site-ui-header--modern .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a {
        width: 30px;
        height: 30px;
        background: transparent;
        border: 1px solid;
        border-radius: 50%;
    }
}


/* ---------------------------------------- logonun yanındaki kampüs adı */

/*
 * İskelet adı gövdeden renk devralıyor: gri `#5b5b5b`. Beyaz header'da idare
 * ediyor ama SAYDAM header koyu kapağın üstünde duruyor ve gri metin orada
 * neredeyse görünmüyordu (bkz. kampüs haber arşivi).
 *
 * Ölçü de canlıya göre küçüktü: logo 145px iken ad 16px kalıyor, yan yana
 * durduklarında ad logonun gölgesinde kayboluyordu.
 */
.site-ui-layout-logo__campus {
    color: var(--theme-secondary-color);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: 0.05em;
}

/*
 * SAYDAM HEADER — kampüs adı açık ton.
 *
 * Header iki ayrı yoldan saydamlaşabiliyor ve ikisi de aynı görünümü doğuruyor:
 *   1. `.site-header--home`  — anasayfa ve `headerOverlay` geçen sayfalar
 *   2. `body:has(.page-hero--image)` — kapak görselli başlık alanı olan sayfalar
 *      (blog yazısı, kapaklı içerik sayfası); orada header `:not(.site-header--home)`
 *      olduğu hâlde `position:absolute` + `background:transparent` alıyor.
 *
 * İkinci yol için kampüs adı listeye alınmamıştı: nav bağlantıları beyaza dönerken
 * kampüs adı lacivert kalıyor ve koyu kapağın üstünde okunmuyordu.
 *
 * Kapak YOKSA kural hiç çalışmaz; ad beyaz zeminde laciverti korur.
 */
.site-header--home .site-ui-layout-logo__campus,
body:has(.page-hero--image) .site-ui-header:not(.site-header--home) .site-ui-layout-logo__campus {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
    .site-ui-layout-logo__campus {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .site-ui-layout-logo__campus {
        font-size: 15px;
    }
}

/* ------------------------------------------- ANASAYFA: saydam, beyaz yazı */

.site-ui-header.site-header--home {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    border-bottom: 0;
    z-index: 990;
    padding: 12px 24px 0;
}

.site-ui-header.site-header--home .site-ui-studio-row,
.site-ui-header.site-header--home .site-ui-header__top {
    background: transparent;
}

.site-ui-header--modern.site-header--home .site-ui-nav__link,
.site-ui-header--modern.site-header--home .site-ui-nav__search,
.site-ui-header--modern.site-header--home .site-ui-phone {
    color: #fff;
}

.site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-socials) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link:nth-child(n + 3)::before {
    background: rgba(255, 255, 255, 0.45);
}

.site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav__link {
    border-color: rgba(255, 255, 255, 0.7);
}

.site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link:hover,
.site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link.is-active {
    background: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}

@media (min-width: 769px) {
    .site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a {
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
    }

    .site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a:hover {
        background: var(--theme-primary-color);
        border-color: var(--theme-primary-color);
        color: #fff;
    }
}

/* ---------------------------------- İÇ SAYFA: beyaz zemin, pembe/koyu yazı */

.site-ui-header:not(.site-header--home) {
    /* `.site-ui-layout-header--studio` header'a display:contents veriyor; kutu
     * uretmedigi icin mutlak konumlu logo header'a gore hizalanamiyordu. */
    display: block;
    position: relative;
    background: #ffffff;
    padding: 12px 24px 0;
}


.site-ui-header--modern:not(.site-header--home) .site-ui-nav__link,
.site-ui-header--modern:not(.site-header--home) .site-ui-nav__search {
    color: var(--theme-secondary-color);
}

.site-ui-header--modern:not(.site-header--home) .site-ui-phone {
    color: var(--theme-primary-color);
}

.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link:nth-child(n + 3)::before {
    background: rgba(0, 0, 0, 0.18);
}

/* ana menü: pembe çerçeveli, pembe yazı */
.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav__link {
    border-color: var(--theme-primary-color);
    color: var(--theme-primary-color);
}

.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link:hover,
.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link.is-active {
    background: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}

@media (min-width: 769px) {
    .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a {
        border-color: rgba(0, 0, 0, 0.16);
        color: var(--theme-secondary-color);
    }

    .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a:hover {
        background: var(--theme-primary-color);
        border-color: var(--theme-primary-color);
        color: #fff;
    }
}

/* Ic sayfada aktif ana menu ogesi canlida da dolu degil, cerceveli duruyor;
 * dolgu yalnizca hover'da. */
.site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link.is-active {
    background: transparent;
    color: var(--theme-primary-color);
}

/* ============================================================================
 * KAMPÜS SAYFASI — menü hero'nun üstüne biner
 *
 * Header'ın saydam / beyaz yazılı hâli temada zaten var (`.site-header--home`);
 * kampüs sayfası `headerOverlay` bayrağıyla aynı sınıfı alıyor. Bu yüzden burada
 * renk kuralı YOK — geriye yalnız hero'nun header'a yer ayırması kalıyor.
 *
 * Yer ayırma `padding-top` ile: hero bir flex kutusu ve içeriğini DİKEY ORTALIYOR.
 * Dolgu içerik kutusunun dışında kaldığı için ortalama artık header'ın altındaki
 * alana göre yapılıyor. Hero'nun kendi boyu değişmiyor (`min-height: 100vh` +
 * `box-sizing: border-box`), kaydırma ipucu da etkilenmiyor (mutlak konumlu,
 * hero'nun alt kenarına bağlı).
 *
 * Ölçüler header'ın gerçek boyundan alındı: masaüstünde 164px; 992px altında
 * satırlar tek sütuna indiği için 130px.
 * ==========================================================================*/

.is-campus-page .vt-campus-hero {
    padding-top: 164px;
}

@media (max-width: 991px) {
    .is-campus-page .vt-campus-hero {
        padding-top: 130px;
    }
}

/* --------------------------------------- hero yazıları: canlıdaki gibi solda */

/*
 * İskelet hero içeriğini ortak container genişliğine (`--container`) oturtuyor,
 * yani geniş ekranda metin ekranın ortasından başlıyor. Canlı kampüs sayfasında
 * ise blok ekranın SOL KENARINA yakın duruyor.
 *
 * Container yerine tam genişlik + kenar boşluğu veriliyor; metnin kendi ölçüsü
 * `__meta`nın 640px'inden geliyor, yani satırlar yine okunur uzunlukta kalıyor.
 */
.is-campus-page .vt-campus-hero__inner {
    width: 100%;
    max-width: none;
    padding-inline: clamp(20px, 3.5vw, 56px);
}

/* Başlık dar bir kolona sığsın: canlıda "ADANA / BİL KOLEJİ" iki satıra iniyor
 * ve alttaki künyeyle aynı hizada duruyor. */
.is-campus-page .vt-campus-hero__title {
    max-width: 640px;
}

/* ============================================================================
 * FORMLAR (forms.embed bloğu)
 *
 * Alan markup'ı form kurucusundan geliyor (`.vef-*`) ve iskelette yalnız Oran'a
 * özel bir yuva için biçimlenmiş; bizim blok kabuğumuz (`.vt-form`) biçimsiz
 * kalıyordu. Kurallar burada, tema katmanında ve BLOK KABUĞUNA bağlı — kurucunun
 * markup'ına da iskelete de dokunulmuyor, sitedeki her form bloğu bunu alıyor.
 *
 * HİZA MESELESİ: girdiler hap biçiminde ve metni içeriden başlıyor; etiket ise
 * kutunun sol kenarından. İkisi arasında ~19px'lik görünmez bir kayma oluşuyor ve
 * etiket girdinin dışına taşmış gibi duruyordu. `--vt-form-inset` ikisini TEK
 * değerden besliyor: etiketin sol dolgusu ile girdinin metin başlangıcı hep aynı.
 * ==========================================================================*/

.vt-form {
    --vt-form-inset: 20px;
    --vt-form-border: #e4e7ef;
    --vt-form-muted: #8a93a5;

    padding: clamp(22px, 3vw, 34px);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(25, 50, 130, 0.08);
}

/* ---- ızgara ritmi ---- */

.vt-form .vef-builder {
    gap: 18px;
}

.vt-form .vef-row {
    gap: 14px 20px;
}

.vt-form .vef-field {
    gap: 7px;
}

/* ---- etiket ---- */

.vt-form .vef-label {
    padding-left: var(--vt-form-inset);
    color: var(--theme-secondary-color);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---- girdiler ---- */

/*
 * `!important` BURADA GEREKLİ — üç özellikte.
 *
 * Formun kendi tasarımı panelde saklanıyor ve gövdeye bir `<style>` olarak
 * BASILIYOR; içinde `.form-control { height: …; padding: 1.2rem; border-radius: 25px }`
 * var. O blok theme.css'ten sonra geldiği için bu üç ölçüyü geri alıyor — özgüllüğü
 * artırmak çözmedi, denendi. Sayfanın yükleme sırasına karışmak yerine yalnız
 * çakışan üç özellik işaretleniyor; geri kalan her şey normal öncelikle çalışıyor.
 *
 * `height: auto`: form tasarımı sabit bir yükseklik veriyor ve dolgu değişince
 * metin kutunun içinde kayıyordu. Boyu dolgu belirlesin.
 */
.vt-form .vef-field .vef-control {
    min-height: 50px;
    height: auto !important;
    padding: 12px var(--vt-form-inset) !important;
    border: 1px solid var(--vt-form-border);
    border-radius: 999px !important;
    background-color: #fff;
    color: #1f2637;
    font-size: 15px;
    line-height: 1.35;
    box-shadow: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

/* Çok satırlı alanda hap biçimi köşeleri metnin üstüne kıvırıyor. */
.vt-form .vef-field textarea.vef-control {
    min-height: 132px;
    border-radius: 20px !important;
    resize: vertical;
}

.vt-form .vef-control::placeholder {
    color: var(--vt-form-muted);
}

.vt-form .vef-control:hover:not(:disabled) {
    border-color: #c9cfdd;
}

.vt-form .vef-control:focus {
    border-color: var(--theme-primary-color);
    box-shadow: 0 0 0 4px rgba(226, 15, 100, 0.12);
    outline: 0;
}

/* ---- açılır listeler ---- */

.vt-form .vef-field select.vef-control {
    appearance: none;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23193282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 15px;
    cursor: pointer;
    text-overflow: ellipsis;
}

/*
 * Kilitli kampüs alanı: seçilemez olduğu GÖRÜNSÜN. Tıklanamayan ama tıklanabilir
 * duran bir alan, kullanıcının önce denemesine sonra vazgeçmesine yol açıyor.
 */
.vt-form .vef-field select.vef-control.ve-form-embed__field--locked {
    border-color: transparent;
    background-color: #f3f5fa;
    color: var(--theme-secondary-color);
    font-weight: 600;
    opacity: 1;
}

/* ---- hata durumu ---- */

.vt-form .vef-control.is-invalid,
.vt-form .vef-control[aria-invalid="true"] {
    border-color: #e0446a;
    background-color: #fff7f9;
}

.vt-form .vef-control.is-invalid:focus,
.vt-form .vef-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(224, 68, 106, 0.14);
}

.vt-form .ve-form-embed__field-error {
    padding-left: var(--vt-form-inset);
    color: #d33a5f;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---- gönderim sonrası bildirimler ---- */

.vt-form .ve-form-embed__message {
    margin-bottom: 16px;
    padding: 13px 18px;
    border-radius: 16px;
    font-size: 14.5px;
    font-weight: 600;
}

.vt-form .ve-form-embed__message--success {
    background: #e9f8f1;
    color: #10714c;
}

.vt-form .ve-form-embed__message--error,
.vt-form .ve-form-embed__message--validation {
    background: #fdecf1;
    color: #b32a4d;
}

/* ---- gönder düğmesi ---- */

/*
 * Kurucu düğmeye mor bir degrade basıyor (`linear-gradient(135deg, #4f46e5 …)`);
 * `background-color` tek başına onu ezmiyor, degradenin de kapatılması gerekiyor.
 */
.vt-form .vef-submit {
    min-height: 50px;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    background-color: var(--theme-primary-color);
    background-image: none;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 26px rgba(226, 15, 100, 0.24);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.vt-form .vef-submit:hover:not(:disabled) {
    background-color: var(--theme-secondary-color);
    box-shadow: 0 16px 30px rgba(25, 50, 130, 0.26);
    transform: translateY(-1px);
}

.vt-form .vef-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(25, 50, 130, 0.22);
}

.vt-form .vef-submit:focus-visible {
    outline: 3px solid rgba(226, 15, 100, 0.35);
    outline-offset: 3px;
}

.vt-form .vef-submit:disabled {
    opacity: 0.6;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ---- KVKK metni ---- */

.vt-form .ve-form-embed__kvkk {
    margin-top: 18px;
    color: var(--vt-form-muted);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.vt-form .ve-form-embed__kvkk a {
    color: var(--theme-primary-color);
    text-decoration: underline;
}

/* ---- form POPUP içinde: kabuğu şeffaflaştır ----
 *
 * `.vt-form` bağımsız bir kart olarak tasarlandı: beyaz zemin, yuvarlak köşe,
 * gölge ve clamp(22px, 3vw, 34px) dolgu. Sayfa içindeki bir blokta doğru; ama
 * popup penceresinin İÇİNDE aynı işi `.vt-popup__modal` zaten yapıyor (beyaz
 * zemin + köşe + gölge). İkisi üst üste gelince kart-içinde-kart çıkıyor:
 * dolgular toplanıyor (22px gövde + 34px form = 56px), pencerenin 560px'lik
 * genişliğinden alanlara yalnız 448px kalıyor ve iki sütunlu satırlar sıkışık
 * görünüyor. Gölge de pencerenin kendi gölgesinin üstüne biniyor.
 *
 * Pencere içinde kabuk şeffaflaşıyor; alanlar gövde dolgusunun tam genişliğini
 * (516px) kullanıyor. Sayfa içindeki form bloğu kart görünümünü koruyor —
 * kural yalnız `.vt-popup__modal--form` altına bakıyor.
 */
.vt-popup__modal--form .vt-form {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 640px) {
    .vt-form {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .vt-form .vef-control {
        min-height: 46px;
        font-size: 14.5px;
    }
}

/* ============================================================================
 * LIGHTBOX — tek öğeli açılışta medyanın çökmesi
 *
 * site.css dialog'u üç kolonlu grid kuruyor:
 *   grid-template-columns: 64px minmax(0, 1fr) 64px;   (sol ok | medya | sağ ok)
 *
 * Galeride tek öğe varsa ok düğmeleri `display: none` oluyor ve grid'de hücre
 * tüketmiyorlar; otomatik yerleşim medyayı 64px'lik İLK kolona koyuyor. Sonuç:
 * video 64px genişliğe sıkışıyor, `width: 100%` de o 64px'e göre çözülüyor.
 *
 * Oran'da galeriler çok öğeli olduğu için oklar görünür ve sorun ortaya
 * çıkmıyor — yani hata paylaşılan site.css'te, Bil'e özel değil. Kalıcı çözüm
 * yukarı akışta (Oran deposu); burada yalnızca etkisi giderildi.
 */
.ve-lightbox__dialog > .ve-lightbox__figure {
    grid-column: 2;
}

/* Mobilde dialog tek kolona düşüyor (site.css @media max-width: 767px). */
@media (max-width: 767px) {
    .ve-lightbox__dialog > .ve-lightbox__figure {
        grid-column: 1;
    }
}

/* --------------------------------- lightbox: header'ın üstünde ve tam ortada
 * 1) site.css lightbox'a `z-index: 120` veriyor; anasayfa header'ı ise 990.
 *    Header lightbox'ın üstüne biniyordu.
 * 2) Dialog `margin: 24px auto` ile YALNIZCA yatay ortalanıyor; overlay
 *    `display: block` olduğu için dikey ortalama yok ve uzun ekranlarda
 *    dialog yukarıda kalıyordu. Overlay flex'e alınıp iki eksende ortalanıyor.
 */
.ve-lightbox {
    z-index: 1000;
}

.ve-lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ve-lightbox__dialog {
    margin: 0;
}

/* ============================================================================
 * FOOTER — canlı bilokullari.com.tr düzeni
 *
 * Eski temada footer şöyleydi:
 *   footer                  #f8f8f8 zemin, 10px 0 30px dolgu
 *   .footer-seperator:before beyaz, 200px, `SkewY(5deg)` ile eğik kama
 *   .footer-menu li          sağında 1px ayraç
 *   .footer-menu li a        0.7em, #333, 2px harf aralığı, 0 25px kenar boşluğu
 *   .footer-message          ortalı, 0.6em
 *
 * Yeni yapı Studio ile kurulu: `footer.site-footer` içinde iki satır —
 * biri menü (nav taşır), diğeri telif metni. Satırlar içeriğine göre seçiliyor
 * ki panelden sıraları değişirse kurallar kırılmasın.
 * ==========================================================================*/

/*
 * `margin-top` YOK.
 *
 * Burada 140px'lik bir üst boşluk vardı: eski temadaki `SkewY(5deg)` eğik beyaz
 * kamaya yer açmak için konmuştu (bkz. yukarıdaki not). Kama yeni yapıya hiç
 * taşınmadı, boşluk kaldı — canlı sitede de böyle bir boşluk yok, orada ayrımı
 * kamanın kendisi yapıyor (`.footer-seperator`, üst öğeyle arası 0px).
 * Sonuç: her sayfanın altında sebepsiz bir boşluk oluşuyordu.
 */
.site-footer {
    position: relative;
    background: #f8f8f8;
    padding: 10px 0 30px;
}

/* Menü çubuğunun dolu pembe zemini kalkıyor (site.css `.site-ui-nav`
 * `background: var(--brand-orange)` veriyor). */
.site-footer .site-ui-nav,
.site-footer .site-ui-nav__inner,
.site-footer .site-ui-studio-row {
    background: transparent;
    box-shadow: none;
}

/* ------------------------------------------------- menü satırı (nav taşıyan) */
.site-footer .site-ui-studio-row:has(.site-ui-nav) .site-ui-nav__inner {
    justify-content: center;
}

.site-footer .site-ui-studio-row:has(.site-ui-nav) .site-ui-nav__link {
    position: relative;
    font-size: 0.75rem;
    color: #333;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 0 25px;
    padding: 0;
    border: 0;
    background: transparent;
    text-transform: uppercase;
    transition: all ease-out 350ms;
}

.site-footer .site-ui-studio-row:has(.site-ui-nav) .site-ui-nav__link:hover {
    color: var(--theme-primary-color);
    text-decoration: none;
}

/* bağlantılar arası ince dikey ayraç (sonuncuda yok) */
.site-footer .site-ui-studio-row:has(.site-ui-nav) .site-ui-nav__link:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: #333;
}

/* --------------------------------------------- telif satırı (nav taşımayan) */
.site-footer .site-ui-studio-row:not(:has(.site-ui-nav)) {
    text-align: center;
    font-size: 0.7rem;
    color: #666;
    margin-top: 15px;
}

/* ============================================================================
 * SAYFA BAŞLIK ALANI — canlı bilokullari.com.tr düzeni
 *
 * İskeletin varsayılanı: gradyan zemin, sola hizalı başlık.
 * Canlıda: açık gri, yuvarlak köşeli bir kutu; başlık ortada, lacivert ve kalın.
 * Kutunun altında kategori menüsü hap satırı olarak duruyor.
 * ==========================================================================*/

.page-hero.page-hero--content {
    background: #efefef;
    border-radius: 30px;
    margin: 0 24px;
    padding: 42px 0 0;
    overflow: visible;
}

.page-hero.page-hero--content .page-hero__overlay {
    display: none;
}

.page-hero.page-hero--content .page-hero__content {
    text-align: center;
}

.page-hero.page-hero--content h1 {
    text-align: center;
    color: var(--theme-secondary-color);
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 3rem);
    margin: 0;
    width: 100%;
}

/* ------------------------------------------------- başlık alanı: sade gri
 * site.css başlık alanına iki dekor bindiriyor:
 *   ::before → 1px'lik yatay çizgiler (not defteri deseni)
 *   ::after  → köşeden gelen açılı beyaz yıkama
 * Başlığın altındaki renkli çubuk da h1::after. Üçü de Oran'ın görsel dili;
 * canlı Bil tasarımında alan düz gri.
 */
.page-hero.page-hero--content::after,
.page-hero.page-hero--content h1::after {
    content: none;
}

/* ::before yasar ama desen yerine KAPAK GORSELINI basar.
 *
 * site.css'te iki ayri `.page-hero::before` kurali var: onceki gorseli
 * (`background-image: var(--hero-image)`), sonraki izgara desenini basiyor ve
 * sonraki oncekini eziyor. Yani iskelette icerik sayfalarinda kapak gorseli hic
 * gorunmuyordu. Burada gorsel geri aliniyor; `--hero-image` yoksa saydam kalir
 * ve altindaki gri zemin gorunur.
 */
.page-hero.page-hero--content::before {
    background: var(--hero-image, none) center / cover no-repeat;
    opacity: 1;
    border-radius: 30px;
}

/* Baslik, perdenin (`.page-hero__overlay`) uzerinde kalsin. */
.page-hero.page-hero--content.page-hero--image .page-hero__content {
    position: relative;
    z-index: 1;
}

/* Header altındaki bulanıklığı söndüren `.site-ui-header::after { content: none }`
 * kuralı buradaydı. Bulanıklığı üreten `header::after` dosyanın başında tümden
 * kaldırıldı (bkz. "ÇIPLAK ETİKET SEÇİCİSİNİN SIZINTISI"), söndürecek bir şey
 * kalmadığı için kural da gitti. */

/* ------------------------------------------- telefon: buton değil, düz yazı
 * site.css telefona hap butonu görünümü veriyor (gölge + 8px yuvarlaklık).
 * Canlıda ikon + yazıdan ibaret.
 */
.site-ui-header .site-ui-phone {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

/* ============================================================================
 * SAYFA MENÜSÜ — "Üst" konumu (canlı bilokullari.com.tr düzeni)
 *
 * Panelde Menü Pozisyonu "Üst (içerikten önce)" seçildiğinde iskelet menüyü
 * içerikten önce ayrı bir blok olarak basıyor. Canlıda ise hap satırı gri
 * başlık kutusunun İÇİNDE, başlığın hemen altında duruyor.
 *
 * Markup'ı değiştirmeden (paylaşılan view) menü şeridi yukarı çekilip kutunun
 * alt kısmına bindiriliyor; zemini saydam olduğu için altındaki gri görünür.
 * ==========================================================================*/

/* Başlık kutusu daraltıldı; altta menünün bineceği kadar boşluk bırakılıyor. */
.page-hero.page-hero--content {
    padding: 40px 0 24px;
    min-height: 0;
}

/* site.css `.page-hero__content` ögesine `min-height: 230px` ve 48/42px dolgu
 * veriyor; kutunun yüksekliğini asıl belirleyen bu. Başlık alanı daraltılırken
 * burası da kısılmalı. */
.page-hero.page-hero--content .page-hero__content {
    min-height: 0;
    padding: 8px 0 0;
}

/* Menü "üst" konumdayken şerit kutunun içine bineceği için altta yer açılır. */
body:has(.page-detail-layout--menu-top) .page-hero.page-hero--content {
    padding-bottom: 65px;
}

.page-hero.page-hero--content h1 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* Menü şeridi kutunun içine binsin.
 * Not: aradaki `.page-detail-section` kendi üst dolgusunu getirdiği için
 * negatif değer onu da kapsıyor; sayı buna göre ayarlandı. */
.page-detail-section:has(.page-detail-layout--menu-top) {
    padding-top: 0;
}

.page-detail-layout--menu-top {
    margin-top: -22px;
    position: relative;
    z-index: 2;
}

.page-detail-layout--menu-top .page-side-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 28px;
}

/* Canlıda şeridin başlığı görünmüyor; ama `display: none` başlığı belge
 * taslağından ve erişilebilirlik ağacından da siler. Ekran okuyucular ve
 * arama motorları için yerinde kalsın diye görsel olarak gizleniyor. */
.page-detail-layout--menu-top .page-side-menu > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* site.css yan menünün tepesine 3px'lik pembe gradyan çizgi koyuyor
 * (`.page-side-menu::before`); üst konumda haplar kutunun kenarına oturduğu
 * için bu çizgi araya giriyor. */
.page-detail-layout--menu-top .page-side-menu::before {
    content: none;
}

.page-detail-layout--menu-top .page-side-menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-detail-layout--menu-top .page-side-menu__row > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #e6e6e6;
    color: var(--theme-secondary-color);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    text-decoration: none;
    transition: 250ms all linear;
}

.page-detail-layout--menu-top .page-side-menu__row > a:hover,
.page-detail-layout--menu-top .page-side-menu__row > a.is-active {
    background: var(--theme-primary-color);
    color: #fff;
}

/* Üst konumda alt kırılım okları gereksiz. */
.page-detail-layout--menu-top .page-side-menu__toggle {
    display: none;
}

/* ============================================================================
 * BAŞLIK ALANI — kapak fotoğraflı varyant
 *
 * Kapak görseli YOKSA: gri, yuvarlak köşeli, kenarlardan içeride kutu
 * (yukarıdaki temel kurallar).
 * Kapak görseli VARSA: kenardan kenara tam genişlik banner, koyu perde,
 * beyaz başlık. Header de görselin üstüne biner.
 *
 * Ayrım `.page-hero--image` sınıfıyla yapılıyor; onu view, sayfanın kendi
 * kapağı ya da kategorininki varsa ekliyor.
 * ==========================================================================*/

.page-hero.page-hero--content.page-hero--image {
    margin: 0;
    border-radius: 0;
    background: #0f1b3d;
    /* Kapaklı alan daha ferah: başlık, saydam header ile alt şerit arasında
     * optik olarak ortalanacak kadar dolgu alıyor. */
    padding-top: 250px;
    padding-bottom: 88px;
}

/* Alt şerit varken taban dolgusunu `body:has(.page-detail-layout--menu-top)`
 * kuralı 65px'e çekiyor ve seçici bizimkinden daha güçlü; kapaklı varyantta
 * ferah ölçü korunsun diye aynı güçte tekrar yazılıyor. */
body:has(.page-detail-layout--menu-top) .page-hero.page-hero--content.page-hero--image {
    padding-bottom: 88px;
}

/* Perde artık ::before'da değil: ::before kapak görselini basıyor, perde
 * onun üstündeki `.page-hero__overlay` katmanında. Böylece düz bir örtü
 * yerine dikey gradyan kullanılabiliyor — üst uç daha koyu, çünkü saydam
 * header'ın beyaz menüsü orada duruyor ve açık kapaklarda okunmuyordu. */
.page-hero.page-hero--content.page-hero--image::before {
    border-radius: 0;
    box-shadow: none;
}

.page-hero.page-hero--content.page-hero--image .page-hero__overlay {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(10, 20, 45, 0.82) 0%,
        rgba(10, 20, 45, 0.68) 40%,
        rgba(10, 20, 45, 0.62) 72%,
        rgba(10, 20, 45, 0.74) 100%
    );
}

/* Mobilde header 164px yerine 130px; aynı dolguyla başlık aşağı kaçıyordu. */
@media (max-width: 768px) {
    .page-hero.page-hero--content.page-hero--image,
    body:has(.page-detail-layout--menu-top) .page-hero.page-hero--content.page-hero--image {
        padding-top: 190px;
        padding-bottom: 64px;
    }
}

.page-hero.page-hero--content.page-hero--image h1 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Kapak varken header saydam ve beyaz yazılı — görselin üstünde durur. */
body:has(.page-hero--image) .site-ui-header:not(.site-header--home) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 990;
}

body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-nav__link,
body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-nav__search,
body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-phone {
    color: #fff;
}

body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) .site-ui-nav__link:nth-child(n + 3)::before {
    background: rgba(255, 255, 255, 0.45);
}

body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav__link {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

@media (min-width: 769px) {
    body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) .site-ui-socials a {
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
    }
}

/* Kapaklı sayfada aktif ana menü öğesi: koyu görsel üstünde pembe yazı
 * kayboluyordu; dolu hap olarak vurgulanıyor. */
body:has(.page-hero--image) .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-phone) .site-ui-nav .site-ui-nav__link.is-active {
    background: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}

/* ============================================================================
 * POPUP BANNER — panelden girilen başlık ziyaretçiye gösterilmiyor
 *
 * `banner.popup` bloğu slide'ın başlığını görselin altında beyaz bir şerit
 * olarak basıyor. Panelde o alan banner'ı listede ayırt etmek için doldurulan
 * bir addır ("Yks puan hesaplama 2026" gibi), ziyaretçiye gösterilecek bir
 * metin değil; mesajı zaten görselin kendisi taşıyor.
 *
 * Blok Oran'dan senkronlanıyor ve burada düzenlenmiyor — ayrım tema katmanında.
 * ==========================================================================*/

/*
 * KURAL YALNIZ BANNER PENCERESİNE: popup FORM penceresinin başlığı panelde ayrıca
 * yazılıyor ("Pencere başlığı") ve ziyaretçiye gösterilmesi gerekiyor — banner'ın
 * yönetim içi alan adıyla aynı şey değil. Kapsam daraltılmasaydı form penceresi
 * başlıksız açılırdı.
 */
.vt-popup:not(.vt-popup--form) .vt-popup__body h3 {
    display: none;
}

/* Başlıktan başka içerik yoksa (açıklama ya da buton) şerit bütünüyle kalksın;
 * yoksa görselin altında boş beyaz bir bant kalıyor.
 *
 * Form penceresi yine DIŞARIDA: gövdesinde `p` olmayabilir (açıklama boş
 * bırakılabiliyor) ve o durumda bu kural formun kendisini de gizlerdi. */
.vt-popup:not(.vt-popup--form) .vt-popup__body:not(:has(p, .vt-popup__cta)) {
    display: none;
}

/* site.css görselin alt köşelerini yalnız `.vt-popup__media:only-child` iken
 * yuvarlıyor; kapatma düğmesi kardeş olduğu için o kural pratikte hiç tutmuyor.
 * Şerit gizlendiğinde görsel en alttaki öge olur, köşeleri kare kalmasın. */
.vt-popup__modal:not(:has(.vt-popup__body p, .vt-popup__body .vt-popup__cta)) .vt-popup__media {
    border-radius: 14px;
}

/* ============================================================================
 * BLOK BAŞLIĞI VE "TÜMÜNÜ GÖSTER" BUTONU — yerleşim kararı TEMANIN
 *
 * İskelet (site.css) blok kabuğunu tek bir düzenle basıyor: başlık solda,
 * arşiv/tümünü göster butonu sağ üstte. Bu düzen Oran'da doğru; Bil'in canlı
 * sitesinde ise başlık ortada ve buton içeriğin ALTINDA duruyor.
 *
 * Ayrım burada, tema katmanında yapılıyor — paylaşılan markup'a ya da
 * site.css'e dokunulmuyor. theme.css kuruma özeldir ve senkronlanmaz; yani
 * Bil'de butonu aşağı almak Oran'ın sağ üst düzenini etkilemez. Başka bir okul
 * için yalnızca bu bölüm değişir (ya da hiç yazılmaz, iskelet düzeni kalır).
 *
 * Nasıl çalışıyor: başlık kabuğu (`__head` / `__header`) `display: contents`
 * ile kutusundan çıkarılıyor; içindeki başlık ve buton, blok kabuğunun doğrudan
 * flex çocuğu haline geliyor ve `order` ile serbestçe sıralanabiliyor. Markup
 * aynı kaldığı için Oran senkronunu bozmuyor.
 *
 * Blok bazında istisna: panelden bloğa `site-ui-cta-top` özel sınıfı verilirse
 * bu bölüm hiç uygulanmaz ve iskeletin sağ üst düzeni geri gelir.
 * ==========================================================================*/

/* ------------------------------------------------ ortak başlık tipografisi */

.vt-block__head h2,
.news-carousel__header h2 {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.vt-block__head p,
.news-carousel__header p {
    margin-inline: auto;
}

/* ----------------------------------- `_shell.php` kabuğu: tüm modül blokları */

.vt-block:not(.site-ui-cta-top) .vt-block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vt-block:not(.site-ui-cta-top) .vt-block__head {
    display: contents;
}

/* Başlık + açıklamayı taşıyan sarmalayıcı. */
.vt-block:not(.site-ui-cta-top) .vt-block__head > div {
    order: 1;
    margin-bottom: 28px;
    text-align: center;
}

/* Gövde: `$body` tek bir öge olmak zorunda değil, hepsi aynı sıraya girer. */
.vt-block:not(.site-ui-cta-top) .vt-block__inner > * {
    order: 2;
    width: 100%;
}

.vt-block:not(.site-ui-cta-top) .vt-block__cta {
    order: 3;
    margin-top: 26px;
}



/* ============================================================================
 * HABER ARŞİVİ BAŞLIK ALANI — Bil'in kendi sayfa başlığı diliyle
 *
 * İskeletteki alan Oran'ın imzası: lacivert–mavi gradyan, altın ve yeşil radyal
 * lekeler, 52px'lik ızgara deseni, altın renkli başlık vurgusu ve camsı bir sayaç
 * kartı. Bil'de sayfa başlıkları böyle değil — `.page-hero--content` bölümüne
 * bakılırsa düz gri, yuvarlatılmış, ortalanmış ve lacivert başlıklı.
 *
 * Burada yeni bir tasarım uydurulmuyor: Bil'in KENDİ sayfa başlığı ölçüleri
 * (30px köşe, 24px yan boşluk, ortalı lacivert başlık) arşive taşınıyor ki iç
 * sayfayla arşiv aynı dili konuşsun. Vurgu rengi altın yerine kurumun pembesi.
 * ==========================================================================*/

/*
 * KAPAK GÖRSELLİ VARYANT: iç sayfaların `page-hero--image` hâliyle aynı dil —
 * tam genişlik, kapak görseli, üstünde koyu perde, beyaz ortalı başlık.
 *
 * Görsel `--news-archive-cover` değişkeninden geliyor; bölümün standart kapağı
 * `page-hero-bg.jpg` (içerik sayfalarının da varsayılan kapağı). Başka bir görsel
 * istenirse tek satır: `.news-archive-hero { --news-archive-cover: url(...) }`.
 *
 * Perde İKİ DURAKLI: üst uç daha koyu, çünkü kırıntı yolu ve başlık orada; alt uç
 * açılıyor ki filtre kartı zemine oturduğunda sert bir kenar oluşmasın.
 */
.news-archive-hero {
    --news-archive-cover: url('../images/page-hero-bg.jpg');

    /*
     * SAYDAM HEADER'A YER: header bu sayfada kapağın üstüne biniyor
     * (`headerOverlay`, bkz. NewsController::index) ve akıştan çıkıyor. Üst dolgu
     * onun boyunu karşılıyor; 992px altında header tek sütuna inip kısaldığı için
     * dolgu da azalıyor. Alt dolgu filtre kartının bindiği payı bırakıyor.
     */
    margin: 0;
    padding: 210px 0 96px;
    border-radius: 0;
    /*
     * Karartma PANELDEN (`Görsel Karartma` sürgüsü) — `--news-archive-overlay`
     * satır içinde geliyor. Üst uç seçilen değerin biraz üstünde: başlık ve kırıntı
     * yolu orada duruyor ve saydam header'ın altında kalıyor.
     */
    background:
        linear-gradient(
            rgba(10, 20, 45, calc(var(--news-archive-overlay, 0.55) + 0.16)) 0%,
            rgba(10, 20, 45, var(--news-archive-overlay, 0.55)) 100%
        ),
        var(--news-archive-cover) center / cover no-repeat,
        #0f1b3d;
    color: #ffffff;
    text-align: center;
}

/* Izgara deseni ve köşe yıkaması Oran'ın dekoru; düz zeminde ikisi de yok. */
.news-archive-hero::before {
    content: none;
}

/* ---- kırıntı yolu ---- */

.news-archive-breadcrumb {
    justify-content: center;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.72);
}

.news-archive-breadcrumb a {
    color: #ffffff;
}

.news-archive-breadcrumb a:hover {
    color: var(--theme-primary-color);
}

/* ---- başlık ---- */

/*
 * Başlık bloğu ile sayaç yan yana değil ALT ALTA: Bil'in sayfa başlıkları ortalı
 * ve tek eksenli. Sayaç sağda dursaydı ortalanmış başlıkla aynı hizada olmayan
 * ikinci bir odak oluştururdu.
 */
.news-archive-hero__content {
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.news-archive-hero__content > div:first-child {
    max-width: 760px;
}

.news-archive-hero h1 {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Vurgu altın değil kurumun pembesi. */
.news-archive-hero h1 span {
    color: var(--theme-primary-color);
}

.news-archive-hero p {
    max-width: 640px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
}

/* ---- içerik sayacı ---- */

/*
 * Camsı kart koyu zemin için tasarlanmıştı; düz gri üstünde çerçevesi de gölgesi
 * de kayboluyordu. Sayaç artık beyaz bir hap: sayı pembe, etiketi lacivert.
 */
.news-archive-hero__stat {
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(25, 50, 130, 0.1);
    backdrop-filter: none;
}

.news-archive-hero__stat strong {
    color: var(--theme-primary-color);
    font-size: 26px;
    font-weight: 800;
}

.news-archive-hero__stat span {
    margin-top: 0;
    color: var(--theme-secondary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/*
 * KAPAK YÜKSEKLİĞİ panelden: alt dolgu değişiyor, üst dolgu saydam header'a ayrılan
 * pay olduğu için sabit kalıyor.
 */
.news-archive-hero--compact { padding-bottom: 56px; }
.news-archive-hero--tall { padding-bottom: 148px; }

/* Sütun sayısı panelden (`--news-archive-columns`); verilmezse iskeletin 3'ü. */
@media (min-width: 992px) {
    .news-archive-grid {
        grid-template-columns: repeat(var(--news-archive-columns, 3), minmax(0, 1fr));
    }
}

/* ============================================================================
 * HABER ARŞİVİ — SÜZGEÇ ALANLARI DEĞİŞKEN SAYIDA
 *
 * İskelette süzgeç dört sabit sütunlu bir ızgara: arama, kategori, gönder, temizle.
 * Panelde kampüs ve yıl süzgeçleri de açılabiliyor ve alan sayısı 1 ile 4 arasında
 * değişiyor; sabit ızgarada beşinci alan yeni satıra düşüp butonları tek başına
 * bırakıyordu. Esnek kutuya çevriliyor: alanlar büyür, butonlar kendi boyunda kalır.
 * ==========================================================================*/
.news-archive-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.news-archive-filter__field {
    flex: 1 1 190px;
}

/* Arama en geniş alan: yazılan metin kırpılmadan görünsün. */
.news-archive-filter__field--search {
    flex: 2 1 260px;
}

/*
 * Yıl dört haneli bir sayı; kategori kadar yer kaplaması gereksiz. Daraltma
 * YALNIZ alanların yan yana durduğu genişlikte: alt alta dizildiklerinde 150px
 * kalan tek alan olur ve satırın kalanı boş dururdu.
 */
@media (min-width: 768px) {
    .news-archive-filter__field--year {
        flex: 0 1 150px;
    }
}

.news-archive-filter__submit,
.news-archive-filter__clear {
    flex: 0 0 auto;
}

/* ============================================================================
 * HABER ARŞİVİ — KART BİÇİMİ (panelde "Kart Stili")
 *
 * Üç seçenek tek bir sınıfla bölüme yazılıyor (`news-archive-section--<stil>`) ve
 * hem öne çıkan kart hem ızgara ondan besleniyor. Varsayılan `cover` iskeletin
 * kendisi olduğu için burada karşılığı YOK — yazılsaydı iki yerde aynı değerler
 * durur, biri değişince diğeri unutulurdu.
 * ==========================================================================*/

/* --- compact: aynı düzen, daha sıkı ölçüler ------------------------------ */
.news-archive-section--compact .news-archive-grid {
    gap: 16px;
}

.news-archive-section--compact .news-archive-card__media {
    aspect-ratio: 16 / 9;
}

.news-archive-section--compact .news-archive-card__body {
    padding: 15px 16px 16px;
}

.news-archive-section--compact .news-archive-card__body > strong {
    margin-top: 11px;
    font-size: 16px;
    -webkit-line-clamp: 2;
}

.news-archive-section--compact .news-archive-card__body > p {
    margin-top: 9px;
    font-size: 12.5px;
    -webkit-line-clamp: 2;
}

.news-archive-section--compact .news-archive-card__body .news-archive-read-more {
    padding-top: 14px;
    font-size: 12px;
}

.news-archive-section--compact .news-archive-lead > a {
    min-height: 300px;
}

.news-archive-section--compact .news-archive-lead__body {
    padding: clamp(24px, 3vw, 38px);
}

.news-archive-section--compact .news-archive-lead__body > strong {
    font-size: clamp(23px, 2.4vw, 32px);
}

/* --- list: görsel solda, metin sağda -------------------------------------- */
/*
 * SÜTUN SAYISINA KARIŞMIYOR. Kart biçimi ile sütun sayısı panelde iki AYRI ayar
 * (dokümanda da öyle tanımlı: "columns = masaüstü sütun sayısı"). Bir ara burada
 * `grid-template-columns: 1fr` yazılıydı ve "3 sütun" seçili sayfa tek sütun
 * geliyordu — ayar sessizce yok sayılmış oluyordu.
 *
 * Genişlik ölçüleri yüzdeyle: kart üç sütunda ~377px, tek sütunda ~1176px oluyor
 * ve sabit bir görsel genişliği ikisinden birinde bozuluyor.
 */
.news-archive-section--list .news-archive-grid {
    gap: 14px;
}

.news-archive-section--list .news-archive-card > a {
    flex-direction: row;
    align-items: stretch;
}

.news-archive-section--list .news-archive-card__media {
    flex: 0 0 38%;
    max-width: 300px;
    aspect-ratio: 16 / 11;
}

.news-archive-section--list .news-archive-card__body {
    justify-content: center;
    padding: 20px 24px;
}

.news-archive-section--list .news-archive-card__body > strong {
    font-size: 20px;
    -webkit-line-clamp: 2;
}

.news-archive-section--list .news-archive-card__body .news-archive-read-more {
    margin-top: 14px;
    padding-top: 0;
}

/*
 * DAR KARTTA ÖLÇÜLER KÜÇÜLÜR — kapsayıcı sorgusuyla.
 *
 * Ölçüyü belirleyen ekran değil KARTIN KENDİ genişliği: aynı 1200px ekranda kart
 * tek sütunda 1176px, dört sütunda ~280px. Medya sorgusu bu farkı göremez, sütun
 * sayısı CSS'e sayı olarak değil değişken olarak geliyor. Kapsayıcı sorgusu tam
 * olarak bunun için var.
 */
.news-archive-section--list .news-archive-card {
    container-type: inline-size;
}

@container (max-width: 520px) {
    .news-archive-section--list .news-archive-card__body {
        padding: 14px 16px;
    }

    .news-archive-section--list .news-archive-card__body > strong {
        font-size: 15px;
        line-height: 1.28;
    }

    .news-archive-section--list .news-archive-card__body > p {
        margin-top: 8px;
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    .news-archive-section--list .news-archive-card__meta {
        font-size: 11px;
    }

    .news-archive-section--list .news-archive-card__body .news-archive-read-more {
        margin-top: 10px;
        font-size: 12px;
    }
}

/* Çok dar kartta yan yana düzen anlamını yitiriyor: görsel üste geçiyor. */
@container (max-width: 330px) {
    .news-archive-section--list .news-archive-card > a {
        flex-direction: column;
    }

    .news-archive-section--list .news-archive-card__media {
        flex: 0 0 auto;
        max-width: none;
        aspect-ratio: 16 / 10;
    }
}

/* Telefonda sütun sayısı ne olursa olsun tek sütun ve alt alta. */
@media (max-width: 575.98px) {
    .news-archive-section--list .news-archive-card > a {
        flex-direction: column;
    }

    .news-archive-section--list .news-archive-card__media {
        flex: 0 0 auto;
        max-width: none;
        aspect-ratio: 16 / 10;
    }
}

/* ============================================================================
 * HABER ARŞİVİ — GÖRSELSİZ KART (panelde "Kart görseli" kapalı)
 *
 * Öne çıkan kart iki sütunlu bir ızgara: solda metin, sağda görsel. Görsel
 * basılmadığında metin solda kalıp sağ sütun bomboş duruyordu — kart yarısı boş
 * bir kutu gibi görünüyordu. Metin tek çocuksa iki sütunu da kaplıyor.
 * ==========================================================================*/
.news-archive-lead__body:only-child {
    grid-column: 1 / -1;
    justify-content: center;
}

/* Görselin ayırdığı 390px'lik boya artık gerek yok; metin kendi boyunu alsın. */
.news-archive-lead > a:has(> .news-archive-lead__body:only-child) {
    min-height: 0;
}

/* ============================================================================
 * MANŞET DÜZENİ — "Üst üste" (panelde `spotlight_style: overlay`)
 *
 * Aynı markup, farklı yerleşim: görsel ve metin iki sütun yerine TEK hücrede
 * üst üste biniyor, metin alta yaslanıp koyu bir geçişin üstünde duruyor.
 * "Yan yana" (`split`) iskeletin kendisi olduğu için burada karşılığı yok.
 *
 * Kural `:has()` ile GÖRSEL VARSA'ya bağlı: panelde kart görseli kapatıldığında
 * altta görsel olmaz, koyu geçişin üstündeki beyaz yazı beyaz zemine düşer ve
 * manşet okunmaz olurdu.
 * ==========================================================================*/
/* ============================================================================
 * MANŞET YÜKSEKLİĞİ — sınır GÖRSELDE, kartta değil
 *
 * Manşetin boyunu editörün yüklediği görselin oranı belirliyordu: dikey bir afiş
 * "yan yana" düzende kartı 690px'e, "üst üste" düzende 1160px'e çıkarıyor ve her
 * haberde başka bir yükseklik veriyordu.
 *
 * Sınır KARTA değil GÖRSELE konuyor. Karta sabit yükseklik verilseydi uzun
 * başlıklı bir manşette metin kırpılırdı; görsel sınırlıyken satır yüksekliği
 * `max(sınırlı görsel, metin)` oluyor — metin her zaman sığıyor, kırpılan görsel
 * oluyor (`object-fit: cover` zaten ortadan kırpıyor).
 *
 * Kural iki düzen için de geçerli: `--split` görseli sol sütunda, `--overlay`
 * metnin altında tutuyor ama ikisinde de boyu görsel dayatıyordu.
 * ==========================================================================*/
.news-archive-lead__media {
    max-height: clamp(380px, 40vw, 560px);
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) {
    grid-template-columns: minmax(0, 1fr);
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) > .news-archive-lead__media,
.news-archive-lead--overlay > a:has(> .news-archive-lead__media) > .news-archive-lead__body {
    grid-area: 1 / 1;
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) > .news-archive-lead__body {
    position: relative;
    justify-content: flex-end;
    background: linear-gradient(
        180deg,
        rgba(9, 16, 38, 0) 22%,
        rgba(9, 16, 38, 0.78) 72%,
        rgba(9, 16, 38, 0.94) 100%
    );
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) .news-archive-card__meta {
    color: rgba(255, 255, 255, 0.78);
}

/* Kategori rozeti markanın pembesi; koyu geçişin üstünde açık tonu okunuyor. */
.news-archive-lead--overlay > a:has(> .news-archive-lead__media) .news-archive-card__meta > span {
    color: #ff8fbe;
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) .news-archive-lead__body > strong {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(9, 16, 38, 0.45);
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) .news-archive-lead__body > p {
    color: rgba(255, 255, 255, 0.88);
}

.news-archive-lead--overlay > a:has(> .news-archive-lead__media) .news-archive-read-more {
    color: #ffffff;
}

/*
 * Üst dolgu header'ın GERÇEK boyuna göre: ölçüldü, uydurulmadı.
 *   ≥992px  → header 164px  (iki şerit yan yana)
 *   769–991 → header 204px  (şeritler alt alta, menü hâlâ yatay)
 *   ≤768px  → header 130px  (mobil çekmece)
 * Her aralıkta başlığın üstünde ~45px nefes payı kalıyor.
 */
@media (min-width: 769px) and (max-width: 991.98px) {
    .news-archive-hero {
        padding-top: 250px;
    }
}

@media (max-width: 768px) {
    .news-archive-hero {
        padding-top: 172px;
        padding-bottom: 72px;
    }
}

/* ============================================================================
 * BLOK CTA BUTONLARI — hepsi tek görünüm
 *
 * Her blok ailesi kendi CTA sınıfını taşıyor (`__cta`, `__archive`) ve iskelette
 * hepsi ayrı biçimlenmiş: duyurularda lacivert hap, haber ızgarasında 7px köşeli
 * turuncu, haber şeridinde başka bir ölçü… Aynı sayfada alt alta gelen üç blok üç
 * ayrı buton gösteriyordu. Burada tek imzaya bağlanıyorlar — canlıdaki pembe hap.
 *
 * Sınıf adları tek tek yazılıyor; ortak bir sınıf iskelet markup'ına eklenebilirdi
 * ama o Oran'ı da değiştirirdi ve buton görünümü kuruma özel bir karar.
 * ==========================================================================*/

.vt-block__cta,
.news-grid__archive,
.news-carousel__archive,
.announcement-list__cta,
.events-upcoming__cta,
.meals-today__cta,
.site-ui-tv-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--theme-primary-color);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(226, 15, 100, 0.24);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.vt-block__cta:hover,
.news-grid__archive:hover,
.news-carousel__archive:hover,
.announcement-list__cta:hover,
.events-upcoming__cta:hover,
.meals-today__cta:hover,
.site-ui-tv-block__cta:hover,
.site-ui-tv-block__cta:focus-visible {
    background: var(--theme-secondary-color);
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(25, 50, 130, 0.26);
    transform: translateY(-1px);
}

.vt-block__cta:active,
.news-grid__archive:active,
.news-carousel__archive:active,
.announcement-list__cta:active,
.events-upcoming__cta:active,
.meals-today__cta:active,
.site-ui-tv-block__cta:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(25, 50, 130, 0.22);
}

/* ---------------------------------------- duyurular: buton içeriğin altında ortada */

/*
 * Buton `__inner`ın doğrudan çocuğu ve satır akışında solda kalıyordu. Öteki
 * bloklarda (bkz. yukarısı) buton içeriğin altında ORTADA duruyor; duyurular da
 * aynı ritmi izlesin.
 */
/*
 * `inline-flex` kutuda `margin: auto` ortalamaz — satır içi öge olduğu için
 * hizayı satır belirler. Blok seviyesine alınıp genişliği içeriğine sabitleniyor;
 * asıl ortalamayı yapan da bu ikisi.
 */
.announcement-list__cta {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    margin-top: 26px;
}

/* ------------------------------------ haber ızgarası: başlık ortada, buton altta */

/*
 * `_shell` kullanmayan bloklarda düzen ayrı ayrı kuruluyor (bkz. `.vt-block` ve
 * `.news-carousel` bölümleri). Haber ızgarası da aynı kalıba alınıyor: başlık
 * kabı `display: contents` ile kutusundan çıkıyor, başlık ve buton bölümün
 * doğrudan çocuğu olup `order` ile sıralanıyor.
 */
.news-grid:not(.site-ui-cta-top) > .container-xl {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-grid:not(.site-ui-cta-top) .news-grid__header {
    display: contents;
}

.news-grid:not(.site-ui-cta-top) .news-grid__header > div {
    order: 1;
    margin-bottom: 28px;
    text-align: center;
}

.news-grid:not(.site-ui-cta-top) .news-grid__items {
    order: 2;
    width: 100%;
}

.news-grid:not(.site-ui-cta-top) .news-grid__archive {
    order: 3;
    margin-top: 26px;
}

/* Başlık ölçüsü öteki bloklarla AYNI: iskelette 42px/900 ile basılıyor ve aynı
 * sayfadaki komşu blok başlıklarının yanında orantısız duruyordu. */
.news-grid__header h2 {
    color: var(--theme-primary-color);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.news-grid__header p {
    margin-inline: auto;
}


/* ---------------------------------- haber ızgarası kartları: şerit kartlarıyla aynı dil */

/*
 * İskelet ızgara kartını şeritten farklı biçimlendiriyor: 900 ağırlıkta koyu
 * başlık, altında turuncu çubuk, sert köşe. Aynı sayfada haber şeridiyle yan yana
 * gelince iki ayrı tasarım gibi duruyordu. Ölçüler haber şeridi kartından
 * (bkz. HABER KARTLARI bölümü) birebir alındı; yerleşim ızgaranın kendi dikey
 * düzeninde kalıyor — 3 kolonda yatay kart okunmuyor.
 */

.news-grid__card {
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
}

.news-grid__card:hover,
.news-grid__card:focus-visible {
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.13);
}

.news-grid__body {
    padding: 22px 24px 20px;
}

.news-grid__body h3 {
    color: var(--theme-primary-color);
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

/* Başlık altındaki çubuk canlı kartta yok. */
.news-grid__body h3::after {
    display: none;
}

.news-grid__body p {
    margin: 12px 0 0;
    color: #5a6474;
    font-size: 14.5px;
    line-height: 1.55;
}

.news-grid__meta {
    color: #7c8595;
    font-size: 13px;
    font-weight: 600;
}

.news-grid__meta span {
    color: var(--theme-primary-color);
}
/* ---- ızgara kartı YATAY: haber şeridiyle aynı kart ---- */

/*
 * İskelet ızgara kartını dikey basıyor: üstte 16/10 görsel, altında metin. Üç
 * kolonda kart 425×785px oluyordu — ekranın yarısını üç haber kaplıyor ve satırdaki
 * kartlar en uzunun boyuna gerildiği için altlarında koca boşluklar kalıyordu.
 *
 * Haber şeridindeki kart düzeni buraya taşınıyor: solda görsel, sağda metin, künye
 * kartın altına sabitli. Boy artık metnin belirlediği kadar.
 *
 * KOLON SAYISI MASAÜSTÜNDE İKİYE İNİYOR: yatay kart üç kolonda 425px'e sıkışıyor,
 * geriye metne 250px kalıyor ve başlık üç kelimede bir satır atlıyor. Şeritte de
 * kartlar ikişerli duruyor — aynı görünüm. Panelde 3 seçili olsa da masaüstünde
 * 2'ye iniyor; üç kolon isteniyorsa kart dikey kalmalı.
 */

@media (min-width: 992px) {
    .news-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Tablet aralığında TEK kolon: yatay kart iki kolona bölününce 375px'e iniyor ve
 * metne 225px kalıyor — başlık her iki kelimede satır atlıyor. Tam genişlikte
 * yatay kart bu aralıkta hem okunur hem de masaüstüyle aynı dili konuşuyor.
 */
@media (min-width: 769px) and (max-width: 991.98px) {
    .news-grid__items {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 769px) {
    .news-grid__card {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        min-height: 230px;
    }

    /*
     * Görsel ızgara satırını doldurur ama akıştan ÇIKAR: akışta kalırsa dikey
     * fotoğraflar kartı kendi boylarına uzatıyor ve satırdaki öteki kartları da
     * geriyor. Kutu satırı dolduruyor, satırın boyunu metin belirliyor.
     */
    .news-grid__image {
        position: relative;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .news-grid__image img {
        position: absolute;
        inset: 0;
    }

    /*
     * Gövde blok akışında KALIYOR: flex/grid yapılırsa çocuklar bloklaşıp
     * `-webkit-line-clamp` devre dışı kalır ve özet satır ortasından kesilir.
     * Künye bu yüzden akıştan çıkarılıp alta konumlanıyor, yeri de alt dolguyla
     * ayrılıyor.
     */
    .news-grid__body {
        position: relative;
        padding: 24px 26px 52px;
    }

    .news-grid__body p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Künye markup'ta başlıktan ÖNCE geliyor; şeritteki kartta olduğu gibi alta alınıyor. */
    .news-grid__meta {
        position: absolute;
        left: 26px;
        right: 26px;
        bottom: 18px;
        min-height: 0;
    }
}


/* ------------------------------------- haber bloğu: kendi başlığını basıyor */

.news-carousel:not(.site-ui-cta-top) > .container-xl {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-carousel:not(.site-ui-cta-top) .news-carousel__header {
    display: contents;
}

.news-carousel:not(.site-ui-cta-top) .news-carousel__header > div {
    order: 1;
    margin-bottom: 28px;
    text-align: center;
}

.news-carousel:not(.site-ui-cta-top) .news-carousel__viewport {
    order: 2;
    width: 100%;
}

.news-carousel:not(.site-ui-cta-top) .news-carousel__pager {
    order: 3;
    width: 100%;
}

.news-carousel:not(.site-ui-cta-top) .news-carousel__archive {
    order: 4;
    margin-top: 26px;
}

/* İskelet mobilde rozeti `margin-right: auto` ile başlığın sol hizasına
 * çekiyor; buton artık altta ve ortada olduğu için o hiza gereksiz. */
@media (max-width: 768px) {
    .news-carousel:not(.site-ui-cta-top) .news-carousel__archive {
        margin-right: 0;
    }
}

/* --------------------------------------- video bloğu: kendi kabuğunu basıyor */

/*
 * YouTube bloğu `_shell.php`'yi KULLANMIYOR; `_dispatch.php` içinde kendi
 * `site-ui-tv-block` kabuğunu basıyor. Bu yüzden yukarıdaki `.vt-block`
 * kuralları ona uğramaz ve aynı yerleşim burada ayrıca kurulur: başlık ortada,
 * buton içeriğin altında.
 *
 * Renk de burada bağlanıyor. İskelet bu bileşende paleti değişkenden değil
 * SABİT değerden okuyor (`#ef4638`, iskeletin turuncusu) — sayfadaki öbür
 * blokların başlığı ve butonu pembeyken video bloğu tek başına turuncu kalırdı.
 */

.site-ui-tv-block__head h2 {
    color: var(--theme-primary-color);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* İkon başlıkla birlikte ölçeklensin; iskeletteki 34px sabit ölçü küçülen
 * başlığın yanında orantısız kalıyor. */
.site-ui-tv-block__head h2 i {
    font-size: 0.82em;
}

.site-ui-tv-block__head p {
    margin-inline: auto;
}

.site-ui-tv-block__cta {
    background: var(--theme-primary-color);
    box-shadow: 0 12px 24px rgba(226, 15, 100, 0.18);
}

.site-ui-tv-block__cta:hover,
.site-ui-tv-block__cta:focus-visible {
    background: var(--theme-secondary-color);
    box-shadow: 0 16px 30px rgba(25, 50, 130, 0.22);
}

/* ---- yerleşim: başlık ortada, buton en altta ---- */

.site-ui-tv-block:not(.site-ui-cta-top) .site-ui-tv-block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-ui-tv-block:not(.site-ui-cta-top) .site-ui-tv-block__head {
    display: contents;
}

.site-ui-tv-block:not(.site-ui-cta-top) .site-ui-tv-block__head > div {
    order: 1;
    margin-bottom: 30px;
    text-align: center;
}

/* Yottie widget'ı (ve blok gövdesine giren başka ne varsa) ortada kalır. */
.site-ui-tv-block:not(.site-ui-cta-top) .site-ui-tv-block__inner > * {
    order: 2;
    width: 100%;
}

.site-ui-tv-block:not(.site-ui-cta-top) .site-ui-tv-block__cta {
    order: 3;
    margin-top: 26px;
}

/* ============================================================================
 * ANA SAYFA BANNER'I — beyaz kartın içine tam oturur
 *
 * Banner bloğu ana sayfada `.news-area` kartının içinde duruyor: yuvarlatılmış
 * köşe, pembe katmanlı gölge ve 355px sabit yükseklik KARTIN kendi tasarımı.
 * İskelet ise banner'ı bağımsız bir bölüm gibi basıyor — kendi dolgusu
 * (18px/15px), kendi `container-xl` genişliği, kendi köşe yarıçapı ve gölgesi
 * var. İkisi üst üste binince slayt yuvanın içinde 24px dar, 26px kısa kalıyor
 * ve etrafında istenmeyen bir beyaz çerçeve oluşuyordu.
 *
 * Çözüm: kartın İÇİNDE iskeletin kabuk süslerini kapat, slaydı yuvaya birebir
 * ver. Kart dışındaki banner blokları (iç sayfalar) iskelet düzeninde kalır.
 * ==========================================================================*/

.news-area > .vcms-rendered-block--banner {
    width: 100%;
    height: 100%;
}

.news-area .site-ui-hero {
    height: 100%;
    padding: 0;
    background: transparent;
}

.news-area .site-ui-hero > .container-xl {
    width: 100%;
    height: 100%;
}

/*
 * `aspect-ratio` bilerek iptal ediliyor: yüksekliği artık kartın 355px'i
 * belirliyor, banner ayarındaki oran değil. Oran ayarı yine işe yarıyor —
 * kartın ölçüsüyle aynı tutulduğunda görsel kırpılmadan oturuyor.
 */
.news-area .site-ui-hero__frame {
    max-width: none;
    height: 100%;
    border-radius: 0;
}

.news-area .site-ui-hero__slides {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: transparent;
    /* Köşe yuvarlaklığı ve gölge kartın kendisinde var; ikincisi köşelerde
     * kartın gri zeminini sızdırıyordu. */
    box-shadow: none;
}

/* ------------------------------------ sayfalama: canlı bilokullari düzeni */

/*
 * İskeletin sayfalaması Oran'ın: turuncu çerçeveli hap, etkin olan uzuyor.
 * Canlıda (ventedu.css `.anasayfa-slider`) hepsi aynı boyda ve sönük siyah;
 * yalnız etkin olan pembeye dönüyor. Ölçüler oradan birebir alındı.
 *
 * Kurum geneli: kart içi/dışı ayrımı YOK — sayfalama sitenin slayt imzası,
 * her banner bloğunda aynı görünmeli.
 */
.site-ui-hero__pager {
    bottom: 20px;
    gap: 4px;
}

.site-ui-hero__pager-item {
    width: 15px;
    height: 6px;
    border: 0;
    border-radius: 4px;
    background: #000000;
    opacity: 0.2;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Etkin olan GENİŞLEMİYOR: canlıda tüm haplar aynı boyda, ayrım yalnız renkte.
 * 29 slaytlık bir banner'da uzayan hap şeridi belirgin biçimde kaydırıyordu. */
.site-ui-hero__pager-item.is-active {
    width: 15px;
    background: var(--theme-primary-color);
    opacity: 1;
}

.site-ui-hero__pager-item:hover {
    opacity: 0.45;
}

.site-ui-hero__pager-item.is-active:hover {
    opacity: 1;
}

/* Aynı slayt ailesinin öbür sayfalama tipleri de paletle uyumlu olsun. */
.site-ui-hero__progress-value {
    background: var(--theme-primary-color);
}

.site-ui-hero__pager--fraction {
    background: rgba(25, 50, 130, 0.78);
}

/* ============================================================================
 * HABER KARTLARI — canlı bilokullari.com.tr düzeni (masaüstü)
 *
 * İskelette kart, solda kare küçük görsel + sağda metin; üstelik track'in
 * 396px taban yüksekliği kartı metnin bittiği yerden çok aşağıya uzatıyor ve
 * altta boş beyaz alan kalıyordu. Canlıda kart kompakt: solda kartın tüm
 * boyunu kaplayan görsel, sağda pembe başlık, özet ve en altta tarih künyesi.
 *
 * Mobil düzen (`max-width: 768px`) iskelette ayrıca kurgulanmış ve iyi
 * çalışıyor; bu yüzden değişiklikler 769px ve üstüyle sınırlı.
 * ==========================================================================*/

@media (min-width: 769px) {
    /* Kartın kendi yüksekliği yetiyor; taban ölçüsü boşluk üretiyordu. */
    .news-carousel__track {
        min-height: 0;
    }

    .news-carousel__card {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        min-height: 240px;
        border-radius: 10px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
    }

    /*
     * Görsel kartın boyunu kaplasın. Kare oran kartın yanında beyaz bir şerit
     * bırakıyordu; ama oranı kaldırıp `height: 100%` demek de yetmiyor —
     * görsel akışta kalırsa dikey fotoğraflar kartı kendi boylarına uzatıyor
     * (bir haberin 405px'lik kapağı tüm satırı geriyordu). Bu yüzden `img`
     * akıştan çıkarılıyor: kutu ızgara satırını dolduruyor, satırın boyunu ise
     * metin belirliyor.
     */
    .news-carousel__image {
        position: relative;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
    }

    .news-carousel__image img {
        position: absolute;
        inset: 0;
    }

    /*
     * Gövde blok akışında KALIYOR. Flex/grid yapılırsa çocuklar bloklaşır ve
     * `-webkit-line-clamp` (display: -webkit-box) devre dışı kalır; başlık ve
     * özet satır ortasından kesilirdi. Tarih künyesi bu yüzden akıştan çıkarılıp
     * kartın altına konumlandırılıyor, yeri de alt dolguyla ayrılıyor.
     */
    .news-carousel__body {
        position: relative;
        padding: 26px 28px 54px;
    }

    .news-carousel__body h3 {
        margin: 0;
        color: var(--theme-primary-color);
        font-size: 19px;
        font-weight: 800;
        line-height: 1.28;
        letter-spacing: -0.01em;
    }

    /* Başlık altındaki turuncu çubuk canlı kartta yok. */
    .news-carousel__body h3::after {
        display: none;
    }

    .news-carousel__body p {
        margin: 12px 0 0;
        -webkit-line-clamp: 3;
        color: #5a6474;
        font-size: 14.5px;
        line-height: 1.55;
    }

    .news-carousel__meta {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 20px;
        min-height: 0;
        justify-content: flex-start;
        align-items: center;
        color: #7c8595;
        font-size: 13px;
        font-weight: 600;
    }

    .news-carousel__meta time::before {
        content: "\f133";
        margin-right: 8px;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #9aa3b2;
    }
}

/* ============================================================================
 * HABER DETAYI — canlı bilokullari.com.tr düzeni
 *
 * Kapak alanı içerik sayfalarıyla aynı bileşeni kullanıyor (`page-hero--image`),
 * bu yüzden burada yalnız gövde var: gri künye paneli (paylaşım + tarih + görsel
 * ızgarası), altında metin, sağda "İlginizi Çekebilir" listesi.
 * ==========================================================================*/

.news-detail-section {
    padding: 42px 0 72px;
}

/* İskelet 1200px altında sütunları alt alta yığıyor; bu ölçü yalnız iki
 * sütunun yan yana durduğu genişlikte geçerli. */
@media (min-width: 1200px) {
    .news-detail-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 32px;
    }
}

/* ------------------------------------------------------------ künye paneli */

.news-detail-panel {
    padding: 16px;
    border-radius: 12px;
    background: #f2f2f2;
}

.news-detail-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.news-detail-share {
    display: flex;
    gap: 6px;
}

.news-detail-share__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: #58595b;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background 160ms ease;
}

.news-detail-share__item:hover,
.news-detail-share__item:focus-visible {
    background: var(--theme-primary-color);
    color: #fff;
}

.news-detail-panel__date {
    color: #6b6b6b;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

/* --------------------------------------------------------- görsel ızgarası */

/*
 * Büyük görsel solda, galeri sağda üç sütun. Küçük görseller üstten hizalı:
 * canlıda da büyük görsel daha uzun ve sağdaki ızgara onun boyuna yayılmıyor.
 */
.news-detail-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

@media (min-width: 769px) {
    .news-detail-media {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    }

    /* Galerisi olmayan haberde tek görsel tüm paneli kaplayıp sayfayı eziyordu;
     * galerili düzendeki büyük görselle aynı ölçüde kalıyor. */
    .news-detail-media--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-detail-media--single .news-detail-media__main {
        max-width: 60%;
    }
}

.news-detail-media__main,
.news-detail-media__thumb {
    display: block;
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #e2e2e2;
    cursor: pointer;
}

.news-detail-media__main img,
.news-detail-media__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.news-detail-media__main:hover img,
.news-detail-media__thumb:hover img {
    transform: scale(1.03);
}

.news-detail-media__main {
    aspect-ratio: 7 / 6;
}

.news-detail-media__thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.news-detail-media__thumb {
    aspect-ratio: 4 / 3;
}

/* Dokuzdan sonrası panelde görünmüyor ama DOM'da kalıyor: lightbox grubu
 * sayfadaki tetikleyicilerden kuruluyor, gizli kareler de galeriye dahil. */
.news-detail-media__thumb.is-overflow {
    display: none;
}

.news-detail-media__more {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.62);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

/* --------------------------------------------------------------- metin */

.news-detail-content {
    margin-top: 22px;
    color: #444;
    font-size: 15.5px;
    line-height: 1.75;
}

.news-detail-lead {
    color: #333;
    font-weight: 600;
}

/* ------------------------------------------------- "İlginizi Çekebilir" */

/* Yan sütunun kenar çizgisi pembe başlık kutusuyla gereksizleşti. Köşeler
 * sütunun kendisinde yuvarlanıyor: pembe başlığın üstü ile son satırın altı
 * tek bir kutuymuş gibi kavislensin diye taşan kısım kırpılıyor. */
.news-detail-sidebar {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
    padding-top: 0;
    border-radius: 12px;
    overflow: hidden;
}

.news-detail-sidebar h2 {
    margin: 0;
    padding: 18px 16px;
    background: var(--theme-primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.news-detail-related__item {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 0;
    background: #fff;
}

/* Satırlar dönüşümlü zeminde: canlıda liste bu ritimle okunuyor. */
.news-detail-related__item:nth-child(even) {
    background: #f2f2f2;
}

.news-detail-related__item strong {
    color: var(--theme-secondary-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.news-detail-related__image {
    width: 78px;
    aspect-ratio: 3 / 2;
    border-radius: 0;
}

/* ============================================================================
 * LIGHTBOX — görsel ekrana sığsın, çerçeve görselin dışına taşmasın
 *
 * İskelette iki ayrı sorun vardı:
 *
 * 1. TAŞMA. `.ve-lightbox__image` yüksekliğini `calc(100vh - 130px)` ile
 *    ekrandan alıyor, oysa diyalog `min(900px, 100vh - 48px)` ile 900px'de
 *    sabitleniyor. 1030px'den uzun ekranlarda ikisi çelişiyor ve görsel
 *    diyalogun altından/üstünden taşıp kırpılıyordu.
 *
 * 2. TAŞAN ÇERÇEVE. `img` kutusu `width: 100%` ile alanı tamamen kaplıyor,
 *    resim ise `object-fit: contain` ile içine sığdırılıyor. Zemin ve 24px
 *    yuvarlaklık `img` kutusuna ait olduğu için resmin bittiği yerden sonra da
 *    devam ediyordu — 1264px'lik kutuda 778px'lik resmin iki yanında 243'er
 *    piksel çerçeve kalıyordu.
 *
 * Çözüm ikisini birden kapatıyor: diyalog satırı figürü gerdiriyor, böylece
 * görsel alanının yüksekliği KESİNLEŞİYOR ve yüzde ölçüsü çözülebiliyor;
 * `img` de gerilmek yerine kendi oranında büyüyor. Kutu artık resmin ta kendisi
 * olduğu için zemin ve yuvarlaklık resmi kucaklıyor.
 *
 * Not: bu iskelet kaynaklı bir hata, Bil'e özel bir tercih değil — Oran'da da
 * geçerli. Kalıcı çözüm site.css'te, orada düzeltilip senkronlanmalı.
 * ==========================================================================*/

.ve-lightbox__dialog {
    align-items: stretch;
}

.ve-lightbox__figure {
    min-height: 0;
    justify-content: center;
}

.ve-lightbox__media {
    flex: 1 1 auto;
    min-height: 0;
}

.ve-lightbox__image,
.ve-lightbox__video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    background: transparent;
}

/* Telefonda ileri/geri düğmeleri görselin üstüne biniyor; alttan pay bırak. */
@media (max-width: 767px) {
    .ve-lightbox__media {
        padding-bottom: 56px;
    }
}

/* ============================================================================
 * BAŞLIK ALANI İLE İÇERİK ARASINDAKİ BOŞLUK
 *
 * Sayfa Tasarımcısı ile kurulan sayfalarda içerik, yan menü yoksa hiçbir
 * sarmalayıcıya alınmadan basılıyor (`pages/show.php`) — tasarımcı sayfaları
 * genelde tam genişlik kurgulandığı için bilinçli bir tercih. Ama o zaman
 * araya boşluk koyacak bir öge de kalmıyor ve içerik başlık kutusunun alt
 * kenarına yapışıyor (ölçüldü: `/okullarimiz` içinde ikisi de 275px'te).
 *
 * Kendi üst dolgusunu getiren iki bilinen sarmalayıcı hariç tutuluyor;
 * onlarda boşluk zaten var, üstüne eklemek iki kat boşluk yapardı.
 * ==========================================================================*/

.page-hero.page-hero--content:not(:has(+ .page-detail-section)):not(:has(+ .news-detail-section)):not(:has(+ .archive-page)):not(:has(+ .publication-archive)):not(:has(+ .blog-archive)):not(:has(+ .blog-post)) {
    margin-bottom: 40px;
}

/* ============================================================================
 * KAMPÜSLER BLOĞU — canlı bilokullari.com.tr düzeni
 *
 * İskeletin varsayılanı: beyaz gölgeli filtre kartı + ızgarada dikey kartlar.
 * Canlıda filtreler pembe bir şeridin içinde, kampüsler ise alt alta uzanan
 * liste satırları — solda yuvarlak fotoğraf, sağda bilgi ve iki hap buton.
 * ==========================================================================*/

/* ------------------------------------------------------------ filtre şeridi */

/*
 * Filtreler ile sonuç sayacı markup'ta iki ayrı kardeş; ikisi de pembe zemin
 * alıp yalnız dış köşeleri yuvarlanınca tek bir kutu gibi okunuyor.
 */
.vt-campuses__filters {
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
    padding: 14px;
    border-radius: 10px 10px 0 0;
    background: var(--theme-primary-color);
    box-shadow: none;
}

/* Canlıda alan adları ayrı bir etiket olarak değil, kutunun içinde ipucu
 * metni olarak duruyor. Etiket ekran okuyucular için yerinde kalsın diye
 * görsel olarak gizleniyor, `display: none` ile silinmiyor. */
.vt-campuses__field > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vt-campuses__field {
    position: relative;
    gap: 0;
}

.vt-campuses__field input,
.vt-campuses__field select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: var(--theme-secondary-color);
    font-size: 0.92rem;
}

.vt-campuses__field input::placeholder {
    color: #8b93a3;
}

/* Canlıdaki sıra: kampüs adı → kademe → şehir. */
.vt-campuses__filters { display: flex; flex-wrap: wrap; }
.vt-campuses__field { flex: 1 1 200px; }
.vt-campuses__field:has([data-vt-campus-filter="search"]) { order: 1; }
.vt-campuses__field:has([data-vt-campus-filter="level"]) { order: 2; }
.vt-campuses__field:has([data-vt-campus-filter="city"]) { order: 3; }

.vt-campuses__count {
    margin: 0 0 30px;
    padding: 13px 14px;
    border-radius: 0 0 10px 10px;
    background: var(--theme-primary-color);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
}

.vt-campuses__count strong {
    color: #fff;
    font-weight: 800;
}

/* --------------------------------------------------------- kampüs satırları
 *
 * Bu düzen TEK SÜTUN için yazıldı (panelde "Desktop sütun: 1"). İki sütunda da
 * çalışır ama yuvarlak fotoğraf + yan yana metin dar kalır; çok sütunlu bir
 * kurum için bu bölüm yeniden ölçülendirilmeli.
 */

@media (min-width: 769px) {
    .vt-campuses__grid {
        gap: 0;
    }

    .vt-campus {
        flex-direction: row;
        align-items: center;
        /* Boşluk fotoğrafa değil, ÇİZGİ DEMETİNE göre ölçüldü: demet dairenin
         * sağ kenarını ~25px geçiyor, bu yüzden 34px'lik aralıkta metin çizgilere
         * yapışık duruyordu. */
        gap: 64px;
        padding: 30px 6px;
        border-radius: 0;
        border-bottom: 1px solid #e6e8ec;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .vt-campus:last-child {
        border-bottom: 0;
    }

    /* Yuvarlak fotoğraf. Kırpma `img` üzerinde: kutunun taşması serbest kalsın
     * ki yanındaki çizgi süsü dışarı uzanabilsin. */
    .vt-campus__media {
        position: relative;
        flex: 0 0 232px;
        width: 232px;
        aspect-ratio: 1;
        background: none;
        overflow: visible;
    }

    .vt-campus__media img {
        border-radius: 50%;
    }

    /*
     * Canlıdaki çizgi süsü: dairenin sağ kenarından çıkan kısa bir demet.
     * Ölçüsü dairenin kendisine bağlı (yüzde), piksele sabitlenirse fotoğraf
     * boyutu değiştiğinde oranı bozulur. Metne KARIŞMAMASI önemli: demet
     * dairenin sağ kenarını birkaç piksel geçtikten sonra biter, gövde
     * sütununa girmez.
     */
    .vt-campus__media::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 72%;
        width: 39%;
        height: 66%;
        transform: translateY(-50%);
        background: repeating-linear-gradient(
            180deg,
            var(--theme-primary-color) 0 2px,
            transparent 2px 12px
        );
        pointer-events: none;
    }

    .vt-campus__body {
        padding: 0;
    }
}

.vt-campus__body h3 {
    margin: 0 0 3px;
    color: var(--theme-primary-color);
    font-size: 1.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Kademeler canlıda hap değil, eğik çizgiyle ayrılmış tek satır. */
/* Başlık ile kademe satırı bir İKİLİ: aralarında boşluk olmaz, birlikte
 * okunurlar. Ama panelden kademe etiketleri kapatılınca başlık doğrudan
 * telefonun üstüne düşüyordu — o durumda başlık kendi boşluğunu alır. */
.vt-campus__body h3:not(:has(+ .vt-campus__levels)) {
    margin-bottom: 15px;
}

.vt-campus__levels {
    gap: 0 6px;
    margin: 0 0 18px;
}

.vt-campus__levels li {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--theme-secondary-color);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.vt-campus__levels li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--theme-secondary-color);
}

/* Kart içindeki satırlar birbirine yapışıktı; her blok kendi nefesini alsın. */
.vt-campus__address {
    margin: 0;
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.55;
}

.vt-campus__phone {
    margin: 0 0 14px;
    font-size: 0.95rem;
}

.vt-campus__email {
    margin: 0 0 14px;
    font-size: 0.95rem;
}

.vt-campus__email a {
    display: inline-flex;
    align-items: center;
    color: var(--theme-secondary-color);
    font-weight: 600;
    text-decoration: none;
}

.vt-campus__email a:hover {
    color: var(--theme-primary-color);
}

/* Telefon ve e-posta ikonları: metinden bir tık soluk ve küçük — bilgiyi
 * işaret ederler, onunla yarışmazlar. */
.vt-campus__phone a i,
.vt-campus__email a i {
    margin-right: 8px;
    font-size: 0.78em;
    opacity: 0.75;
}

.vt-campus__phone a {
    color: var(--theme-secondary-color);
    font-weight: 700;
}

/* İki buton da canlıda dolu pembe hap; iskelette ikincisi çerçeveliydi. */
.vt-campus__actions {
    justify-content: flex-end;
    gap: 12px;
    padding-top: 18px;
}

.vt-campus__actions a {
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 0.9rem;
}

.vt-campus__actions .is-ghost {
    border-color: var(--theme-primary-color);
    background: var(--theme-primary-color);
    color: #fff;
}

.vt-campus__actions .is-ghost:hover {
    background: var(--theme-secondary-color);
    border-color: var(--theme-secondary-color);
    color: #fff;
}

/* ------------------------------------------------------- telefon numaraları
 *
 * Panelde telefon çoklu bir alan; kampüsün altı numarası olabiliyor. Tek satıra
 * dizilince okunmuyordu, her numara ayrı bir hap olarak duruyor.
 */

.vt-campus__phone {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vt-campus__phone a {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border: 1px solid rgba(25, 50, 130, 0.16);
    border-radius: 999px;
    background: #f4f6fa;
    color: var(--theme-secondary-color);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: 180ms all linear;
}

.vt-campus__phone a:hover {
    border-color: var(--theme-primary-color);
    background: var(--theme-primary-color);
    color: #fff;
    text-decoration: none;
}

/* Kapak görseli olmayan kampüs: kutu gri daire olur, logo içinde ortalanır.
 * Yuvarlaklık burada KUTUYA veriliyor (normalde `img` üzerinde) — logo daire
 * biçiminde kırpılmasın diye. `overflow` açık bırakılıyor ki dairenin sağından
 * çıkan çizgi süsü yedekli satırda da görünsün. */
.vt-campus__media.vt-media-placeholder {
    border-radius: 50%;
    background: #eceff4;
}

.vt-campus__media.vt-media-placeholder img {
    border-radius: 0;
}

/* Başlık alanı ile onu izleyen İLK blok arasındaki boşluk tek kaynaktan gelsin.
 *
 * Başlık alanı kendi alt boşluğunu veriyor (tasarımcı içeriği sarmalayıcısız
 * basıldığı için gerekli). Blok kabuğu `.vt-block` ise bloklar arası ritim için
 * 56px üst dolgu getiriyor. İkisi yan yana gelince toplam 96px oluyor ve başlık
 * ile içerik arasında koca bir boşluk kalıyordu.
 *
 * `.vt-block`in dolgusu KAPATILMIYOR — o kural bütün modül bloklarında ortak ve
 * asıl işi blokları birbirinden ayırmak. Yalnız başlık alanının hemen ardındaki
 * ilk blok üst dolgusunu bırakıyor; alt dolgusu ve sonraki blokların ritmi
 * olduğu gibi duruyor.
 */
.page-hero--content + * > .vt-block:first-child {
    padding-top: 0;
}

/* ============================================================================
 * DUYURU ARŞİVİ — başlık ve süzgeçler ORTADA
 *
 * İskelet sayfayı sola yaslıyor (haber arşivinden farklı olarak burada kapak
 * alanı fabrika ayarında kapalı, yani sayfa doğrudan başlıkla açılıyor ve sola
 * yaslı bir başlık + çip satırı boş bir sağ yarım bırakıyordu).
 *
 * Ortalama SATIR SATIR yapılıyor, kapsayıcıya `text-align: center` verilip
 * geçilmiyor: o, aşağıdaki duyuru satırlarının içindeki metni de ortalar ve
 * liste okunmaz hâle gelirdi.
 * ==========================================================================*/
.announcement-archive__head {
    text-align: center;
}

.announcement-archive__head h1,
.announcement-archive__head p {
    margin-inline: auto;
}

/* Açıklama ve sayaç satırı çok uzarsa ortalanmış blok dağılmasın. */
.announcement-archive__head p {
    max-width: 720px;
}

/* Çip satırları: hem kategori hem önem/yıl alt satırı. */
.announcement-archive__filters {
    justify-content: center;
}

/* Arama kutusu ve açılır süzgeç formu da aynı eksende. */
.announcement-archive__search,
.announcement-archive__selects {
    justify-content: center;
}

.announcement-archive__search {
    margin-inline: auto;
}

/*
 * KAPAK AÇIKSA başlık zaten kapağın içinde. O blok da ortalanıyor ki iki görünüm
 * (kapaklı / kapaksız) arasında geçiş yapıldığında hizalama değişmesin.
 */
.announcement-hero__inner {
    text-align: center;
}

.announcement-hero__crumb {
    justify-content: center;
}

/* ============================================================================
 * DUYURU ARŞİVİ KAPAĞI — saydam header'ın altına uzanır
 *
 * Kapak açıkken header akıştan çıkıp kapağın üstüne biniyor (`headerOverlay`,
 * bkz. AnnouncementsController::index). Üst dolgu onun boyunu karşılıyor; ölçüler
 * haber arşivi kapağıyla AYNI, çünkü karşıladıkları header de aynı:
 *   ≥992px  → header 164px
 *   769-991 → header 204px (şeritler alt alta)
 *   ≤768px  → header 130px (mobil çekmece)
 * ==========================================================================*/
.announcement-hero {
    padding-top: 210px;
    padding-bottom: 56px;
}

@media (min-width: 769px) and (max-width: 991.98px) {
    .announcement-hero {
        padding-top: 250px;
    }
}

@media (max-width: 768px) {
    .announcement-hero {
        padding-top: 172px;
        padding-bottom: 44px;
    }
}

.announcement-hero__inner {
    width: 100%;
}

/*
 * "KAPAK YÜKSEKLİĞİ" AYARININ KARŞILIĞI — alt dolguda.
 *
 * Panel yüksekliği satır içi `min-height` olarak geliyor (220/300/380px) ama saydam
 * header için konan 266px'lik dolgu üç kademede de bu değerleri aşıyor; ayar hiçbir
 * fark üretmiyordu. Kademe ALT DOLGUYA çevriliyor: üst dolgu header'ın boyu olduğu
 * için sabit kalmalı, değişebilecek tek pay alttaki.
 */
.announcement-hero--compact { padding-bottom: 32px; }
.announcement-hero--medium { padding-bottom: 56px; }
.announcement-hero--tall { padding-bottom: 116px; }

@media (max-width: 768px) {
    .announcement-hero--compact { padding-bottom: 26px; }
    .announcement-hero--medium { padding-bottom: 44px; }
    .announcement-hero--tall { padding-bottom: 78px; }
}

/* ============================================================================
 * DUYURU SATIRLARI — gölgeler hafifletildi
 *
 * İskelette satır `0 8px 24px rgba(15,23,42,.06)` taşıyor: alfa düşük ama 24px
 * bulanıklık geniş bir hale bırakıyor ve alt alta sekiz satırda sayfa "kabarık"
 * duruyordu. Bil'in kart dili daha düz: küçük yayılım, ince ayrım.
 *
 * Rozetteki gölge MARKA RENGİNDE bir parlamaydı (`rgba(37,99,235,.28)`); mavi
 * halka rozetin kendisinden daha çok yer kaplıyordu. Nötr ve dar bir gölgeye
 * çevrildi — rozet yine zeminden ayrılıyor ama parlamıyor.
 *
 * Kural `site.css` yerine burada: gölge kuruma özel bir tercih, iskeleti
 * değiştirmek Oran'ın görünümünü de değiştirirdi.
 * ==========================================================================*/
.announcement-list__item {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

a.announcement-list__item:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
}

.announcement-list__badge {
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

/* ============================================================================
 * DUYURU DETAYI — üst blok toparlandı
 *
 * İskelette rozet, başlık ve künye sola yaslı ince bir yığındı; altlarındaki tam
 * genişlik çizgisi ile gövde arasında da bağ yoktu, sayfa "başlamamış" gibi
 * duruyordu. Arşiv sayfasını ortaladık, detay da aynı eksende olsun diye üst blok
 * ortalanıyor ve kendi içinde gruplanıyor.
 *
 * Gövde ORTALANMIYOR: uzun metin ortalanınca okunmaz. Yalnız başlık bloğu.
 * ==========================================================================*/
.announcement-detail {
    padding-top: 64px;
}

/*
 * Ortalama ÖĞE ÖĞE yapılıyor. Kapsayıcıya `text-align: center` verilemez: gövde
 * metni de onun içinde ve ortalanmış uzun metin okunmaz olur.
 */
.announcement-detail__badge {
    display: flex;
    width: fit-content;
    margin: 0 auto 6px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

.announcement-detail h1 {
    margin: 10px auto 12px;
    max-width: 22ch;
    text-align: center;
    text-wrap: balance;
}

/*
 * Künye satırı: ortada ve daha okunur bir tonda. İskelette `#94a3b8` ile çok
 * soluktu ve tarih/kategori kaybolup gidiyordu.
 */
.announcement-detail__meta {
    justify-content: center;
    padding-bottom: 22px;
    color: #64748b;
}

/*
 * ÇİZGİ TAM GENİŞLİK DEĞİL. Başlığın altındaki 860px'lik kural sayfayı ikiye
 * bölüyordu; kısa ve ortalanmış bir ayraç başlığı gövdeye bağlıyor.
 */
.announcement-detail__meta {
    position: relative;
    border-bottom: 0;
}

.announcement-detail__meta::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent, #2563eb);
    transform: translateX(-50%);
}

/* Gövdenin başlıktan ayrılması için üst pay. */
.announcement-detail__body {
    margin-top: 34px;
}

/*
 * Gövdedeki tek başına duran belge görselleri (ücret ilanı gibi taranmış formlar)
 * kenarlıksız duruyordu ve sayfada yüzüyor gibiydi; ince bir çerçeve ve köşe onları
 * "belge" olarak okutuyor.
 */
.announcement-detail__body img {
    border: 1px solid #e6eaf2;
    border-radius: 10px;
}

/* Geri bağlantısı da ortada; sayfanın sonunu kapatıyor. */
.announcement-detail__back {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

/*
 * KAPAK ALANI VARKEN ÜST BLOK KÜÇÜLÜYOR.
 *
 * Başlık artık kenardan kenara kapağın içinde (bkz. announcements/show.php);
 * gövdenin başında yalnız rozet ve künye kalıyor. 64px'lik üst dolgu o iki satır
 * için fazlaydı, kapakla metin arasında boş bir şerit açılıyordu.
 */
.announcement-detail--hero {
    padding-top: 34px;
}

.announcement-detail--hero .announcement-detail__badge {
    margin-bottom: 10px;
}

/* ============================================================================
 * ARŞİV SAYFALARI (başarılar / kadro)
 *
 * Kapak `page-hero` bileşeni; buradaki kurallar yalnız arşive özgü parçalar için.
 * ==========================================================================*/
/*
 * Seçici kapağa BAĞLI: iskeletteki `.page-hero p` kuralı (0,1,1) yalnız sınıf adıyla
 * yazılan bir kuralı (0,1,0) eziyor ve sayaç koyu gri kalıyordu — fotoğrafın üstünde
 * okunmuyordu. `.page-hero` öneki özgüllüğü eşitliyor.
 */
.page-hero .archive-hero__count {
    max-width: none;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 600;
}

.page-hero .archive-hero__crumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
}

.page-hero .archive-hero__crumb a {
    color: inherit;
    text-decoration: none;
}

.page-hero .archive-hero__crumb a:hover {
    color: #ffffff;
}

/*
 * BOŞLUK TEK KAYNAKTAN — blok kabuğundan.
 *
 * Kapakla liste arasında 150px vardı ve üç ayrı katmandan geliyordu: kapağın 40px
 * alt boşluğu, bu bölümün 54px üst dolgusu ve blok kabuğunun kendi 56px'i. Üçü de
 * aynı işi yapıyordu. Kabuğunki kalıyor (blok nerede kullanılırsa aynı payı
 * getirsin), ötekiler sıfırlanıyor.
 *
 * Kapağın 40px'i kendi kuralındaki `:not()` zincirine `.archive-page` eklenerek
 * düşürüldü — o kural zaten "sonraki bölüm kendi payını veriyorsa boşluk verme"
 * mantığında yazılmış (detay sayfaları da orada dışlanıyor). Ayrı bir ezme kuralı
 * yazmak, aynı kararı iki yere dağıtmak olurdu.
 */
.archive-page {
    padding: 0;
}

/*
 * Kapak KAPALIYKEN sayfa düz başlıkla açılıyor ve üstünde kabuk yok; başlığın
 * header'dan ayrılması için pay burada veriliyor. Kapak açıkken bu blok hiç
 * basılmadığı için kural da devreye girmiyor.
 */
.archive-page__head {
    margin-bottom: 8px;
    padding-top: 56px;
    text-align: center;
}

.archive-page__head h1 {
    margin: 0;
    color: #16265c;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 900;
}

.archive-page__head p {
    margin: 8px auto 0;
    max-width: 720px;
    color: #64748b;
}

.archive-page__count {
    margin: 0 0 26px;
    color: #64748b;
    font-size: 15px;
    text-align: center;
}

.archive-page__empty {
    padding: 56px 20px;
    text-align: center;
}

.archive-page__empty h2 {
    margin: 0 0 8px;
    color: #16265c;
    font-size: 21px;
    font-weight: 900;
}

.archive-page__empty p {
    margin: 0;
    color: #64748b;
}

/* ============================================================================
 * KADRO — kategori etiketi ve gruplu liste
 * ==========================================================================*/
.vt-person__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.vt-person__cat {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2f8;
    color: #52607a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* Gruplar arası ayrım: başlık + ızgara tek blok gibi okunsun. */
.vt-staff-group + .vt-staff-group {
    margin-top: 42px;
}

.vt-staff-group__title {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6eaf2;
    color: var(--brand-navy, #193282);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* ============================================================================
 * KADRO SÜZGEÇLERİ
 *
 * Süzme istemcide; gizlenen kart `display:none` yerine sınıfla düşürülüyor ki
 * ızgara boşlukları kaymasın. Grubunda görünür kart kalmayan başlık da gizleniyor.
 * ==========================================================================*/
.staff-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border: 1px solid rgba(29, 76, 158, 0.1);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.staff-filters__field {
    flex: 1 1 200px;
    min-width: 0;
}

.staff-filters__field--search {
    flex: 2 1 260px;
}

.staff-filters__field label {
    display: block;
    margin: 0 0 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.staff-filters__field > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #94a3b8;
}

.staff-filters__field > span:focus-within {
    border-color: var(--brand-orange);
    background: #ffffff;
}

.staff-filters input,
.staff-filters__select {
    width: 100%;
    padding: 11px 0;
    border: 0;
    background: transparent;
    color: #16265c;
    font-size: 14px;
    font-weight: 600;
}

.staff-filters input:focus,
.staff-filters__select:focus {
    outline: none;
}

.staff-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 100%;
}

.staff-filters__chip {
    padding: 8px 16px;
    border: 1px solid #e6e9ef;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.staff-filters__chip:hover {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

.staff-filters__chip.is-active {
    border-color: transparent;
    background: var(--brand-navy, #193282);
    color: #ffffff;
}

.staff-filters__empty {
    flex: 1 1 100%;
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.vt-card.is-filtered-out,
.vt-staff-group.is-filtered-out {
    display: none;
}

/* ============================================================================
 * ARŞİV SÜZGEÇ ÇUBUĞU KAPAĞA BİNER — Bil standardı
 *
 * Haber arşivinde süzgeç kartı kapağın alt kenarına 22px biniyor
 * (`.news-archive-filter`, `transform: translateY(-22px)`). Aynı davranış başarı ve
 * kadro arşivlerine de veriliyor ki bu tür süzgeç alanları sitede tek bir dile
 * sahip olsun.
 *
 * `transform` DEĞİL negatif üst boşluk: `transform` yerleşimi değiştirmediği için
 * kartın altında 78px'lik boş bir şerit kalırdı. Negatif boşluk hem bloğun 56px
 * üst dolgusunu geri alıyor hem de 22px bindirmeyi veriyor.
 *
 * Seçici `.page-hero +` ile başlıyor: kapak KAPALIYKEN sayfa düz bir başlıkla
 * açılıyor, orada süzgeci yukarı çekmek onu header'ın altına sokardı. Kural
 * kendiliğinden yalnız kapaklı sayfada geçerli.
 * ==========================================================================*/
.page-hero + .archive-page .staff-filters,
.page-hero + .archive-page .ach-table__filters {
    position: relative;
    z-index: 2;
    margin-top: -78px;
}

/* Kapağın üstüne binen kart, koyu zeminden ayrılsın diye daha belirgin gölge. */
.page-hero + .archive-page .staff-filters,
.page-hero + .archive-page .ach-table__filters {
    box-shadow: 0 18px 48px rgba(29, 76, 158, 0.18);
}

/* ============================================================================
 * KADRO — SATIR LİSTESİ (panelde "Satır listesi")
 *
 * Kart ızgarasıyla AYNI markup; yalnız diziliş değişiyor. Panelin tarifi:
 * "alt alta dar satırlar; kalabalık kadroyu kısa tutar" — yani amaç yoğunluk,
 * fotoğraf küçülüyor, kart yatay akıyor.
 *
 * Sütun sayısı ayarı burada GEÇERSİZ: satır listesi tanımı gereği tek sütun.
 * Özgüllük (0,2,0) ızgaranın `--vt-cols` kuralını (0,1,0) geçiyor.
 * ==========================================================================*/
.vt-cards.vt-cards--rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.vt-cards--rows .vt-card {
    display: flex;
    /*
     * YÖN AÇIKÇA `row`: `.vt-card` tabanı `flex-direction: column` veriyor ve
     * yalnız `display: flex` yazmak yönü değiştirmiyordu — fotoğraf metnin üstünde
     * kalıyor, `align-items: center` de dikey yerine yatay ortalıyordu.
     * `--people` kuralının `text-align: center`'ı da burada geri alınıyor.
     */
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 12px 18px;
    text-align: left;
}

.vt-cards--rows .vt-card__image {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
}

.vt-cards--rows .vt-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-cards--rows .vt-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 0;
    text-align: left;
}

.vt-cards--rows .vt-card__body > h3 {
    margin: 0;
    flex: 0 0 auto;
    font-size: 15px;
}

/* Unvan adın yanında, altında değil: satırın yüksekliği artmasın. */
.vt-cards--rows .vt-person__role {
    margin: 0;
    font-size: 12.5px;
}

.vt-cards--rows .vt-person__cats {
    margin: 0;
    justify-content: flex-start;
}

.vt-cards--rows .vt-person__contact {
    margin: 0;
    font-size: 12.5px;
}

/* Özet satır düzeninde basılmıyor: satırı iki katına çıkarıp "dar" olmaktan
   çıkarırdı. Panelde özet isteniyorsa kart ızgarası doğru seçim. */
.vt-cards--rows .vt-card__body > p {
    display: none;
}

.vt-cards--rows .vt-person__bio-btn {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .vt-cards--rows .vt-card {
        align-items: flex-start;
    }

    .vt-cards--rows .vt-person__bio-btn {
        margin-left: 0;
    }
}

/* ============================================================================
 * KADRO SAYFALAYICI
 *
 * Süzgeçlerle aynı motorda: sayfalar süzülmüş küme üzerinden hesaplanıyor, süzgeç
 * değişince ilk sayfaya dönülüyor. Görünüm haber arşivi sayfalayıcısının dilinde.
 * ==========================================================================*/
.staff-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
}

.staff-pager button {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.staff-pager button:hover:not(:disabled):not(.is-active) {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

.staff-pager button.is-active {
    border-color: transparent;
    background: var(--brand-navy, #193282);
    color: #ffffff;
}

.staff-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ==========================================================================
   BULUNAMAYAN SAYFA (404)
   Yalnız Bil'de: `site.css` Oran ile ortak ve orada böyle bir sayfa yok.
   Zemin BEYAZ bırakıldı — gerekçesiz gri bantlar sitede zaten sorun çıkarmıştı;
   derinliği rakamın arkasındaki yumuşak ışık veriyor.
   ========================================================================== */
.error-page {
    padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 120px);
    /*
     * Rakamın arkasındaki ışık BÖLÜMÜN KENDİ ARKA PLANINDA.
     *
     * Önce konumlandırılmış bir sözde öğeydi; kutusu bölümün üst kenarında
     * kırpılınca ışık daha sönmeden kesiliyor ve ortada sert bir yatay çizgi
     * bırakıyordu. Yüzdeyle tanımlı elips bölümün içinde başlayıp içinde
     * bittiği için kırpılması olanaksız: %70'te tamamen saydam, kenarlara
     * hiç değmiyor.
     */
    background:
        radial-gradient(
            50% 45% at 50% 55%,
            rgba(226, 15, 100, 0.13) 0%,
            rgba(226, 15, 100, 0) 70%
        ),
        var(--theme-quinary-color, #fff);
}

.error-page__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.error-page__code {
    margin: 0;
    font-family: var(--theme-primary-font, 'Open Sans', sans-serif);
    font-size: clamp(104px, 22vw, 228px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--theme-primary-color, #e20f64);
}

/* Degrade yazı yalnız destekleniyorsa: `color: transparent` desteksiz tarayıcıda
   rakamı görünmez yapardı. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .error-page__code {
        background: linear-gradient(
            135deg,
            var(--theme-primary-color, #e20f64) 0%,
            var(--theme-secondary-color, #193282) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.error-page__title {
    margin: 18px 0 0;
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 700;
    color: var(--theme-secondary-color, #193282);
}

.error-page__text {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--theme-quaternary-color, #5b5b5b);
}

.error-page__text strong {
    color: var(--theme-secondary-color, #193282);
}

.error-page__search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(520px, 100%);
    margin: 30px 0 0;
    padding: 6px 6px 6px 20px;
    border: 1px solid rgba(25, 50, 130, 0.16);
    border-radius: 999px;
    background: var(--theme-quinary-color, #fff);
    box-shadow: 0 10px 30px rgba(25, 50, 130, 0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.error-page__search:focus-within {
    border-color: var(--theme-primary-color, #e20f64);
    box-shadow: 0 10px 30px rgba(226, 15, 100, 0.14);
}

.error-page__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-size: 15px;
    color: var(--theme-secondary-color, #193282);
}

.error-page__input:focus {
    outline: none;
}

/* Tarayıcının kendi temizleme düğmesi hap biçimini bozuyordu. */
.error-page__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.error-page__submit {
    flex: none;
    border: 0;
    border-radius: 999px;
    padding: 12px 28px;
    background: var(--theme-primary-color, #e20f64);
    color: var(--theme-quinary-color, #fff);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.error-page__submit:hover,
.error-page__submit:focus-visible {
    background: var(--theme-secondary-color, #193282);
}

.error-page__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 0;
}

.error-page__link {
    display: inline-block;
    border: 1px solid rgba(25, 50, 130, 0.18);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-secondary-color, #193282);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.error-page__link:hover,
.error-page__link:focus-visible {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: var(--theme-quinary-color, #fff);
}

@media (max-width: 575.98px) {
    .error-page__search {
        padding-left: 16px;
    }

    .error-page__submit {
        padding: 11px 20px;
    }
}
/* ============================================================================
 * YAYIN ARŞİVİ — Bil'in kendi sayfa dili
 *
 * İskeletteki (`site.css`) başlık alanı Oran'ın imzasıydı: lacivert–mavi gradyan,
 * 56px'lik ızgara deseni, sağ üstte radyal leke ve sağa yaslanmış camsı bir sayaç
 * kutusu. Bil'de sayfa başlıkları böyle değil — içerik sayfaları, haber detayı ve
 * başarı/kadro arşivleri hep aynı bileşeni kullanıyor: `page-hero--content`,
 * kapak fotoğrafı, koyu perde, ortalanmış beyaz başlık.
 *
 * Bu yüzden görünüm artık kendi kapak alanını çizmiyor, O BİLEŞENİ kullanıyor
 * (`publications/index.php`). Buradaki kurallar yalnız yayınlara özgü parçalar
 * için: üst etiket, sayaç, panelden gelen karartma ve kapak yüksekliği.
 * ==========================================================================*/

/*
 * KAPAK GÖRSELİ VARSAYILANI içerik sayfalarıyla aynı dosya. Panelde kapak
 * seçilmemişse alan boş bir lacivert dikdörtgen olarak kalırdı; `--hero-image`
 * satır içinde yalnız panel bir görsel verdiğinde yazılıyor, verilmediğinde bu
 * varsayılan görünüyor (haber arşivinde de aynı kural var).
 */
.page-hero.page-hero--content.page-hero--publication {
    --hero-image: url('../images/page-hero-bg.jpg');
}

/*
 * KARARTMA PANELDEN (`Görsel Karartma` sürgüsü) — `--hero-overlay` satır içinde
 * geliyor. İskeletin sabit gradyanı sürgüyü hiç dinlemiyordu. Üst uç seçilen
 * değerin biraz üstünde: saydam header'ın beyaz menüsü orada duruyor ve açık
 * kapaklarda okunmuyordu. Alfa 1'i aşarsa tarayıcı kırpıyor, ayrıca sınırlamak
 * gerekmiyor.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--publication .page-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.22)) 0%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.08)) 42%,
        rgba(10, 20, 45, var(--hero-overlay, 0.55)) 74%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.14)) 100%
    );
}

/*
 * KAPAK YÜKSEKLİĞİ panelden. Üst dolgu SABİT: o pay saydam header'a ayrılmış,
 * yükseklik ayarı onu kısaltsaydı menü başlığın üstüne binerdi. Haber arşivinde
 * de yalnız alt dolgu değişiyor.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--publication-compact {
    padding-bottom: 56px;
}

.page-hero.page-hero--content.page-hero--image.page-hero--publication-tall {
    padding-bottom: 140px;
}

/* ---- başlık alanının parçaları ---- */

/*
 * İÇERİK KUTUSU ORTALANIYOR.
 *
 * `.page-hero__content` bir sütun esnek kutu ve varsayılan `align-items: stretch`
 * ile çalışıyor: içindeki her öge tam genişliğe uzuyor. İçerik sayfalarında bunun
 * görünen bir etkisi yok (tek çocuk `h1` zaten tam genişlik istiyor), ama burada
 * üst etiket sola yapışıyor ve sayaç hapı ekranı baştan başa kaplayan beyaz bir
 * şeride dönüşüyordu. Ortalama `text-align`la yapılamaz; esnek kutuda hizayı
 * `align-items` belirliyor.
 */
.page-hero.page-hero--publication .page-hero__content {
    align-items: center;
}

/*
 * TANITIM CÜMLESİ BEYAZ. İskeletteki `.page-hero p` kuralı metni koyu griye
 * (`--text-soft`) çekiyor ve kapak fotoğrafının üstünde okunmuyordu. Seçici
 * `.page-hero` önekiyle yazılıyor, yoksa (0,1,0) ile (0,1,1)'i ezemez — haber
 * arşivinde ve başarı/kadro arşivinde de aynı tuzağa düşülmüştü.
 */
.page-hero.page-hero--publication p {
    max-width: 660px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

.page-hero.page-hero--publication .archive-hero__crumb {
    margin-bottom: 18px;
}

.page-hero .archive-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--theme-primary-color, #e20f64);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Kapak fotoğrafı hareketli olabiliyor; pembe etiket açık bir zeminin
     * üstünde eriyordu. */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Etiketin solundaki kısa çizgi — kurumun vurgu rengiyle. */
.page-hero .archive-hero__eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/*
 * SAYAÇ başlığın altında, beyaz bir hap. Camsı kutu koyu zemin için tasarlanmıştı
 * ve sağa yaslanınca ortalanmış başlıkla aynı eksende olmayan ikinci bir odak
 * oluşturuyordu — haber arşivinde de aynı gerekçeyle hapa çevrilmişti.
 */
/*
 * Seçici `--publication` ile: sayaç bir `<p>` ve yukarıdaki beyaz metin kuralı
 * (0,2,1) tek sınıfla yazılmış bir kuralı (0,2,0) eziyor — hap beyaz zeminde
 * beyaz yazıya düşüp içindeki "yayın" etiketi görünmez oluyordu. Kapsam da
 * doğrusu: başarı/kadro arşivlerinin kendi sayaç kuralı yukarıda duruyor ve
 * onlar koyu zeminli düz bir satır, hap değil.
 */
.page-hero.page-hero--publication .archive-hero__count {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    max-width: none;
    margin: 18px 0 0;
    padding: 10px 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(25, 50, 130, 0.12);
    color: var(--theme-secondary-color, #193282);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.page-hero.page-hero--publication .archive-hero__count strong {
    color: var(--theme-primary-color, #e20f64);
    font-size: 22px;
    font-weight: 800;
}

/* ---- liste alanı ---- */

/*
 * `min-height: 100vh` İSKELETTE ana kabuğa veriliyordu; kapak ayrı bir bölüme
 * çıkınca aynı kural liste bölümüne düştü ve tek yayınlık bir kategoride sayfanın
 * altında bir ekran boyu boşluk bırakıyordu. Yükseklik içeriğe bırakılıyor.
 */
.publication-archive {
    min-height: 0;
    padding: 56px 0 88px;
    background: linear-gradient(180deg, #f7f9fd 0, #ffffff 320px);
}

/* Kapak kapalıyken sayfa düz başlıkla açılıyor; başlığın header'dan ayrılması
 * için gereken payı `archive-page__head` zaten veriyor, bölüm kendi payını
 * ikinci kez eklemesin. */
.publication-archive:has(.archive-page__head) {
    padding-top: 0;
}

/*
 * SÜZGEÇ KARTI kapağın alt kenarına biniyor — haber arşivindeki gibi. Negatif
 * boşluk yalnız KAPAK VARKEN doğru; kapak kapalıyken kart başlığın üstüne
 * çıkardı, o yüzden komşuluk seçicisine bağlı.
 */
.page-hero--publication + .publication-archive .publication-archive__filter,
.page-hero--publication + .publication-archive .publication-archive__filters {
    margin-top: -46px;
    margin-bottom: 44px;
}

.publication-archive__filter {
    padding: 20px;
    border: 1px solid #e6ebf4;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(25, 50, 130, 0.1);
}

/* Çip satırı ile arama kutusu birlikte açıldığında ikisi üst üste binmesin:
 * bindirmeyi üstteki eleman yapar, ikincisi normal akışta kalır. */
.publication-archive__filters + .publication-archive__filter {
    margin-top: 0;
}

.publication-archive__summary h2 {
    color: var(--theme-secondary-color, #193282);
    font-weight: 800;
}

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

/*
 * SÜTUN SAYISI panelden (`--publication-columns`). Yalnız masaüstünde geçerli:
 * telefonda dört sütun okunmaz, aşağıdaki kırılımlar sayıyı kendisi düşürüyor.
 */
@media (min-width: 992px) {
    .publication-archive--grid .publication-archive__grid {
        grid-template-columns: repeat(var(--publication-columns, 4), minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .publication-archive--grid .publication-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .publication-archive--grid .publication-archive__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * KAPAK ORANI panelden. İskelette kapak kutusu 350px sabit yükseklikte ve görsel
 * 306px'ti; dergi kapağı (A4) sığıyordu ama kare ya da geniş bir kapak kutunun
 * ortasında küçücük kalıyordu. Oran `aspect-ratio` ile veriliyor, görsel kutuyu
 * dolduruyor.
 */
.publication-archive__grid {
    --publication-cover-ratio: 1 / 1.414;
}

.publication-archive--ratio-square .publication-archive__grid {
    --publication-cover-ratio: 1 / 1;
}

.publication-archive--ratio-wide .publication-archive__grid {
    --publication-cover-ratio: 16 / 10;
}

.publication-card__cover {
    min-height: 0;
    aspect-ratio: var(--publication-cover-ratio, 1 / 1.414);
    padding: 20px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 46%),
        #eef2f9;
}

.publication-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.publication-card > a {
    border-color: #e7ecf5;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(25, 50, 130, 0.08);
}

.publication-card > a:hover {
    border-color: rgba(226, 15, 100, 0.28);
    box-shadow: 0 22px 48px rgba(25, 50, 130, 0.16);
}

.publication-card__open {
    background: var(--theme-primary-color, #e20f64);
}

.publication-card__body > strong {
    color: var(--theme-secondary-color, #193282);
}

.publication-card__excerpt {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.publication-card__link {
    color: var(--theme-primary-color, #e20f64);
}

/* Öne çıkarılan yayın: kart kenarı kurumun vurgu rengiyle işaretleniyor. */
.publication-card.is-featured > a {
    border-color: rgba(226, 15, 100, 0.35);
}

/* ---- satır listesi (`list.layout = rows`) ---- */

/*
 * Kapak solda, metin sağda. Izgaradan tek farkı kartın yönü olduğu için ayrı bir
 * kart bileşeni yazılmıyor: aynı işaretleme, farklı yön.
 */
.publication-archive--rows .publication-archive__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.publication-archive--rows .publication-card > a {
    flex-direction: row;
    align-items: stretch;
}

.publication-archive--rows .publication-card__cover {
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: var(--publication-cover-ratio, 1 / 1.414);
    padding: 12px;
}

.publication-archive--rows .publication-card__body {
    justify-content: center;
    padding: 20px 24px;
}

/*
 * Satır kartında bağlantı METNİN HEMEN ALTINDA. Izgarada `margin-top: auto` ile
 * kartın dibine itiliyor — eşit yükseklikteki kartların bağlantıları aynı hizada
 * dursun diye. Satırda kartın boyunu kapak belirliyor ve aynı kural bağlantıyı
 * başlıktan koparıp ortada kocaman bir boşluk bırakıyordu (özet kapalıyken ya da
 * yayının açıklaması yokken iyice göze batıyor).
 */
.publication-archive--rows .publication-card__link {
    margin-top: 14px;
    padding-top: 0;
}

/* İnce ekranda satır kartı da alt alta iner; 168px'lik kapağın yanında metne
 * yer kalmıyordu. */
@media (max-width: 575.98px) {
    .publication-archive--rows .publication-card > a {
        flex-direction: column;
    }

    .publication-archive--rows .publication-card__cover {
        width: 100%;
    }
}

.publication-archive__empty {
    border-color: #e7ecf5;
    border-radius: 20px;
}

.publication-archive__empty h2 {
    color: var(--theme-secondary-color, #193282);
}

.publication-archive__empty > i {
    color: var(--theme-primary-color, #e20f64);
}

/* Sayfalama hapları da kurumun rengiyle. */
.publication-archive__pagination a:hover,
.publication-archive__pagination a.is-active {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.publication-archive__filters a.is-active,
.publication-archive__filters a.is-child.is-active {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
}

@media (max-width: 991.98px) {
    /* Kapak alanı mobilde kısalıyor; süzgeç kartının bindirmesi de azalsın,
     * yoksa kart başlığın üstüne çıkıyor. */
    .page-hero--publication + .publication-archive .publication-archive__filter,
    .page-hero--publication + .publication-archive .publication-archive__filters {
        margin-top: -28px;
        margin-bottom: 32px;
    }

    .publication-archive {
        padding: 40px 0 64px;
    }
}

/*
 * Üst etiket dar ekranda SATIRA SIĞMIYOR: "… Dijital Kütüphanesi" gibi uzun bir
 * kurum adıyla tek satır 390px'i aşıyor. Esnek kutu sarmaya açılıyor ve harf
 * aralığı kısılıyor; kısa bir etikette hiçbir şey değişmiyor.
 */
@media (max-width: 575.98px) {
    .page-hero .archive-hero__eyebrow {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}

/*
 * GÖMÜLÜ PDF (`reader.mode = pdf`): tarayıcının kendi görüntüleyicisi. Kabuk
 * sayfa çevirmeli okuyucununkiyle aynı (`publication-reader__frame`), içi yalnız
 * bir çerçeve — yükleme perdesi yok, gömülü görüntüleyici kendi göstergesini
 * çiziyor.
 */
.publication-reader__embed {
    display: block;
    width: 100%;
    min-height: 760px;
    border: 0;
}

@media (max-width: 991.98px) {
    .publication-reader__embed {
        min-height: 560px;
    }
}

/* ============================================================================
 * YAYIN DETAYI — Bil'in kendi sayfa dili
 *
 * İskeletteki (`site.css`) başlık alanı Oran için çizilmişti: lacivert–mavi
 * gradyan, 56px'lik ızgara deseni, 470px'e kadar büyüyen bir kapak, 66px'lik
 * başlık ve 54/76px dolgu. Toplamda ekranın neredeyse tamamını kaplıyordu ve
 * asıl iş — derginin kendisi — ilk ekranda hiç görünmüyordu.
 *
 * Bil'de sayfa başlıkları böyle değil: açık gri, yuvarlak köşeli, kenarlardan
 * içeride bir kutu; lacivert başlık, pembe vurgu (bkz. `.page-hero--content`).
 * Burada o dil iki sütunlu düzene taşınıyor — kapak solda küçük bir kart,
 * künye ve düğmeler sağda. Yeni bir tasarım uydurulmuyor, sitenin kendi
 * ölçüleri (30px köşe, 24px yan boşluk, lacivert başlık) kullanılıyor.
 * ==========================================================================*/

.publication-detail {
    background: #ffffff;
}

/*
 * KUTU, BANNER DEĞİL. Dolgu bölümden `.container-xl`e taşınıyor: kutunun
 * yuvarlak köşeleri kenardan içeride duruyor ve dolgu da o kutuya ait.
 */
.publication-detail__hero {
    margin: 0 24px;
    padding: 0;
    border-radius: 30px;
    background: #eef1f7;
    color: var(--theme-secondary-color, #193282);
}

/* Izgara deseni ve radyal leke Oran'ın dekoru; düz zeminde ikisi de yok. */
.publication-detail__hero::before {
    content: none;
}

.publication-detail__hero > .container-xl {
    padding-top: 26px;
    padding-bottom: 30px;
}

/* ---- kırıntı yolu ---- */

.publication-detail__breadcrumb {
    margin-bottom: 20px;
    color: #64748b;
}

.publication-detail__breadcrumb a {
    color: var(--theme-secondary-color, #193282);
}

.publication-detail__breadcrumb a:hover {
    color: var(--theme-primary-color, #e20f64);
    text-decoration: none;
}

/* ---- iki sütun: kapak + künye ---- */

/*
 * KAPAK KÜÇÜLDÜ. İskelette sütun 360px'e kadar açılıyor ve görsel 470px
 * yüksekliğe çıkıyordu; A4 bir dergi kapağı tek başına bir ekran boyu yer
 * kaplıyordu. Burada kapak bir önizleme: okumak için zaten aşağıdaki
 * görüntüleyici var.
 */
.publication-detail__hero-grid {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 32px;
    max-width: none;
    align-items: center;
}

.publication-detail__hero-grid.is-coverless {
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
}

.publication-detail__cover {
    width: 100%;
    margin: 0;
}

/* Koyu bulanık leke koyu zemin için vardı; açık kutuda kirli bir gölge
 * bırakıyordu. Kapağın kendi gölgesi yeterli. */
.publication-detail__cover-glow {
    display: none;
}

.publication-detail__cover img {
    max-height: 270px;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(25, 50, 130, 0.2);
}

/* ---- künye ---- */

/*
 * Kategori hapları camsıydı (yarı saydam beyaz, blur) — koyu zemine göre
 * tasarlanmış. Açık kutuda beyaz hap, lacivert yazı.
 */
.publication-detail__categories {
    margin-bottom: 12px;
}

.publication-detail__categories a,
.publication-detail__categories span {
    border-color: rgba(25, 50, 130, 0.16);
    background: #ffffff;
    color: var(--theme-secondary-color, #193282);
    backdrop-filter: none;
}

.publication-detail__categories a:hover {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.publication-detail__meta {
    margin-bottom: 10px;
    color: #64748b;
}

/*
 * BAŞLIK: 66px'lik ve -0.045em sıkışık Oran ölçüsü yerine sitenin kendi
 * başlık ölçüsü (`.page-hero--content h1` ile aynı aralık).
 */
.publication-detail__intro h1 {
    max-width: 720px;
    color: var(--theme-secondary-color, #193282);
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.publication-detail__intro > p {
    max-width: 660px;
    margin-top: 14px;
    color: #4b5675;
    font-size: 16px;
    line-height: 1.7;
}

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

.publication-detail__actions {
    margin-top: 20px;
}

.publication-detail__primary-action,
.publication-detail__secondary-action {
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 14px;
}

.publication-detail__primary-action {
    background: var(--theme-primary-color, #e20f64);
    box-shadow: 0 12px 28px rgba(226, 15, 100, 0.26);
}

.publication-detail__primary-action:hover {
    background: #c40d57;
    box-shadow: 0 16px 32px rgba(226, 15, 100, 0.34);
}

/* İkincil düğme koyu zeminde yarı saydam beyazdı; açık kutuda görünmez
 * oluyordu. Beyaz zemin, lacivert çerçeve ve yazı. */
.publication-detail__secondary-action {
    border-color: rgba(25, 50, 130, 0.2);
    background: #ffffff;
    color: var(--theme-secondary-color, #193282);
}

.publication-detail__secondary-action:hover {
    border-color: var(--theme-secondary-color, #193282);
    background: #ffffff;
    color: var(--theme-secondary-color, #193282);
}

/* ---- okuyucu bölümü ---- */

/*
 * Başlık kutusu ile görüntüleyici arasındaki 72px'lik pay, kutu kısaldıktan
 * sonra sayfayı yine ikiye bölüyordu. Bölüm yukarı çekiliyor.
 */
.publication-reader {
    padding: 44px 0 72px;
}

@media (max-width: 991.98px) {
    .publication-detail__hero-grid {
        grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
        gap: 24px;
    }

    .publication-detail__cover img {
        max-height: 220px;
    }
}

/*
 * DAR EKRANDA TEK SÜTUN. İskelet burada kapağı 70vw'ye büyütüp künyeyi
 * ortalıyor; kutu yine bir ekranı doldururdu. Kapak solda küçük kalıyor,
 * künye yanında akıyor — yalnız en dar ekranda alt alta iniyor.
 */
@media (max-width: 575.98px) {
    .publication-detail__hero {
        margin: 0 12px;
        border-radius: 22px;
    }

    .publication-detail__hero > .container-xl {
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .publication-detail__hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .publication-detail__cover {
        width: min(48vw, 170px);
    }

    /* İskelet dar ekranda künyeyi ortalıyor; kapak da solda kaldığı için
     * ikisi aynı eksende dursun. */
    .publication-detail__intro {
        text-align: left;
    }

    .publication-detail__categories,
    .publication-detail__meta,
    .publication-detail__actions {
        justify-content: flex-start;
    }

    .publication-detail__intro > p {
        margin-right: 0;
        margin-left: 0;
    }
}

/* ============================================================================
 * MOBİL BAŞLIK VE MENÜ — Bil'e özel
 *
 * Canlıdaki düzenin karşılığı: başlıkta koyu bir şerit (logo + kapatma), altında
 * kurumsal pembe zeminli tam ekran panel. Panelde ANA MENÜ çerçeveli haplar
 * olarak ortada, ÜST MENÜ (BİLGİ FORMU, BLOG, ...) altında üçlü kutu ızgarası,
 * en dipte telefon + sosyal medya ikonları.
 *
 * İki menünün tek panelde toplanmasını site.js yapıyor (bkz. bindMobileNavigation):
 * çekmeceyi taşıyan nav'ın kendi ögeleri `--extra` grubuna alınır, başlıktaki
 * diğer menüler `--main` grubuna KOPYALANIR. Kopyalama olduysa panele `is-merged`
 * sınıfı eklenir — tek menülü bir başlıkta `--extra` grubu hap listesi olarak
 * kalsın diye ayrım gerekiyor.
 *
 * Seçiciler bilerek uzun: site.css'in mobil blokları 0-3-0 / 0-4-1 seviyesinde,
 * ayrıca bu dosyanın MASAÜSTÜ başlık kuralları (`:has(.site-ui-socials)` bloğu)
 * medya sorgusu içinde olmadığı için mobil panele de sızıyor — 13px yazı, dar
 * hap ve ögeler arası dikey ayraç oradan geliyor.
 * ==========================================================================*/

/* Masaüstünde gruplar görünmez olmalı: `--extra` `display: contents` ile
 * çekmecenin kendi ögelerini başlıktaki yerinde bırakır, `--main` ise yalnızca
 * mobil için üretilmiş kopyalar olduğundan tamamen gizlenir. */
.site-ui-mobile-nav__group--extra {
    display: contents;
}

.site-ui-mobile-nav__group--main {
    display: none;
}

@media (max-width: 768px) {

    /* ============================================ 1) BAŞLIK ŞERİDİ */

    /*
     * HİZALAMA. Logo ile sağdaki iki buton ayrı sistemlerde duruyordu: logo
     * mutlak konumlu ve BAŞLIĞIN tamamına göre ortalıydı (başlık ikinci satırı
     * da kapsıyor), butonlar ise sabit konumlu ve `top: 16px`. Bu yüzden logo
     * butonlardan aşağıda kalıyordu.
     *
     * Çözüm tek ölçüye bağlamak: başlığın kendi dolgusu sıfırlanıyor, şerit
     * `--bil-mobile-header-h` yüksekliğinde bir flex kutusu oluyor, logo akışa
     * dönüp o kutuda dikey ortalanıyor, butonların `top` değeri de aynı
     * değişkenden hesaplanıyor.
     */
    .site-ui-header--modern {
        --bil-mobile-header-h: 92px;
        --bil-mobile-btn: 46px;
    }

    .site-ui-header--modern.site-header--home,
    .site-ui-header--modern:not(.site-header--home) {
        padding: 0;
    }

    /*
     * `position` BURADA TEKRAR VERİLİYOR. Bu dosyanın masaüstü kuralı logoyu
     * taşıyan satırı `position: static` yapıyor (mutlak konumlu logo header'a
     * göre ortalansın diye) ve bu, site.css'in mobil `position: sticky`
     * kuralını eziyor. Static bir öge `z-index` dinlemediği için şerit yığın
     * sırasından düşüyor ve tam ekran panel logonun üstünü kapatıyordu.
     * Mobilde logo zaten akışta (aşağıya bakınız), o kurala gerek yok.
     */
    .site-ui-header--modern > .site-ui-studio-row:first-child {
        position: sticky;
        top: 0;
        z-index: 47;
        min-height: var(--bil-mobile-header-h);
        display: flex;
        align-items: center;
        padding: 0 118px 0 18px;
        border-bottom: 0;
        box-shadow: none;
    }

    .site-ui-header--modern > .site-ui-studio-row:first-child > .site-ui-studio-row__inner {
        width: 100%;
        min-height: 0;
    }

    /* Ana menü satırı mobilde tamamen boş: menü çekmeceye, telefon dip bloğa
     * taşındı. Dolgusu kalırsa iç sayfalarda beyaz bir boşluk şeridi bırakıyor. */
    .site-ui-header--modern > .site-ui-studio-row:not(:first-child) {
        padding-block: 0;
    }

    /*
     * BEYAZ ÇİZGİ. Üst satırın alt kenarlığı masaüstünde sosyal medya şeridini
     * ayırmak için var; mobilde o satırın içindekiler gizlenince geriye
     * yalnızca logonun sağından uzanan çizgi kalıyordu.
     */
    .site-ui-header--modern.site-header--home .site-ui-studio-row:has(.site-ui-socials),
    .site-ui-header--modern:not(.site-header--home) .site-ui-studio-row:has(.site-ui-socials) {
        border-bottom: 0;
    }

    /*
     * Logo akışa dönüyor: şeridin dikey merkezinde, solda. Masaüstündeki
     * `position: absolute; left: 15px; top: 50%` değerleri de sıfırlanmalı,
     * yoksa `relative` ile birlikte logoyu kaydırırlar.
     *
     * `z-index` GEREKLİ: menü çekmecesi logoyla AYNI satırın içinde (başlıktaki
     * ilk menü bloğu bu satırda duruyor) ve satır bir yığın bağlamı kökü
     * (sticky + z-index). Panel `z-index: 46` ile o bağlamda konumlu olarak
     * çizildiği için, konumsuz bir logo panelin ALTINDA kalıyordu.
     */
    .site-ui-header .site-ui-layout-logo {
        position: relative;
        z-index: 48;
        top: auto;
        left: auto;
        margin: 0;
        transform: none;
    }

    /*
     * LOGO BOYUTU. Görsel 103x104 kare; site.css `width: min(240px, 100%)` ile
     * genişliği zorluyor, `max-height` da kısıtlayınca `object-fit: contain`
     * devreye giriyor ve armayı 158px'lik kutunun ORTASINA bırakıyordu — logo
     * hem küçük hem de soldan kaymış görünüyordu. `width: auto` ile ölçü
     * yüksekliğe bağlanıyor.
     */
    .site-ui-header--modern > .site-ui-studio-row:first-child .site-ui-layout-logo img,
    .site-ui-header--modern .site-ui-logo img {
        width: auto;
        max-width: 200px;
        max-height: 72px;
    }

    .site-ui-header--modern > .site-ui-layout-menu-toggle,
    .site-ui-header--modern .site-mobile-search {
        top: calc((var(--bil-mobile-header-h) - var(--bil-mobile-btn)) / 2);
    }

    /* ==================================== 2) TAM EKRAN MENÜ PANELİ */

    /*
     * PANEL YALNIZ ÇEKMECEYİ TAŞIYAN NAV.
     *
     * site.css'in mobil kuralları `.site-ui-nav` seçicisiyle yazılmış ve başlıkta
     * birden fazla menü olduğunda HEPSİNİ ekrana taşıyor; açılış kuralı
     * (`.site-header.is-mobile-nav-open .site-ui-nav`) de hepsini birden
     * görünür yapıyor. İkinci menü DOM'da sonra geldiği için asıl çekmecenin
     * üstünü örtüyor, panelde yalnız onun ögeleri görünüyordu.
     *
     * Diğer menülerin ögeleri zaten panele kopyalanıyor (site.js), bu yüzden
     * mobilde kendi kutuları tamamen kapatılıyor.
     */
    .site-ui-header--modern .site-ui-layout-nav.site-ui-nav:not([data-site-nav]) {
        display: none;
    }

    .site-ui-header--modern .site-ui-layout-nav.site-ui-nav {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        height: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--theme-primary-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: translateY(-12px);
        transition:
            opacity 0.22s ease,
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.22s ease;
    }

    .site-ui-header--modern.is-mobile-nav-open .site-ui-layout-nav.site-ui-nav {
        transform: translateY(0);
    }

    /*
     * MENÜ AÇIKKEN LOGO GÖRÜNMEYE DEVAM EDER. Şerit panelin üstünde kalıyor
     * (şerit z-index 47, panel 46, butonlar 48); açıkken koyu bir bant alıp
     * pembe zeminden ayrışıyor.
     */
    .site-ui-header--modern.is-mobile-nav-open > .site-ui-studio-row:first-child {
        border-bottom: 0;
        box-shadow: none;
    }

    /*
     * Koyu bant AYRI BİR KATMAN. Satırın kendi `background`u yığın bağlamının
     * kökünde çizildiği için panelin altında kalıyor; bant konumlu bir
     * sözde-öge olarak panelin (z-index 46) üstüne alınıyor.
     */
    .site-ui-header--modern.is-mobile-nav-open > .site-ui-studio-row:first-child::before {
        content: "";
        position: absolute;
        z-index: 47;
        inset: 0;
        background: #2d3542;
    }

    /* Kapatma: kutusuz, kurumsal renkte çarpı. */
    .site-ui-header--modern.is-mobile-nav-open .site-ui-menu-toggle {
        border-color: transparent;
        background: transparent;
        color: var(--theme-primary-color);
    }

    /* Yükseklik 2px kalmalı: çarpıya dönüşteki 7px kaydırma bu ölçüye göre. */
    .site-ui-header--modern.is-mobile-nav-open .site-ui-menu-toggle span {
        width: 26px;
        height: 2px;
    }

    /* Panel açıkken arama ikonu çekiliyor; ekranın tepesinde tek eylem kalsın. */
    .site-ui-header--modern.is-mobile-nav-open .site-mobile-search {
        opacity: 0;
        pointer-events: none;
    }

    /* ======================================== 3) PANEL YERLEŞİMİ */

    /* Panel tam ekran ve logo tepede duruyor; "MENÜ" etiketi fazlalık. */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main::before {
        display: none;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__detail {
        padding:
            calc(var(--bil-mobile-header-h) + 30px)
            20px
            max(20px, env(safe-area-inset-bottom));
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    /* Masaüstü şeridinden sızan, ögeler arasındaki dikey ayraç. */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main .site-ui-nav__link::before {
        display: none;
    }

    /*
     * Arama, başlıkta menü açıcının solunda duruyor. site.css onu panelde
     * gizliyor ama kuralı `__main`in DOĞRUDAN çocuğuna bakıyor; ögeler artık
     * grup kutularının içinde olduğu için o seçici tutmuyor.
     */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group .site-ui-nav__search {
        display: none;
    }

    /* ================================ 4) ANA MENÜ: ÇERÇEVELİ HAPLAR */

    /*
     * Tek menülü bir başlıkta kopyalanacak bir şey olmuyor; o zaman çekmecenin
     * kendi ögeleri (`--extra`) ana menü sayılır ve aynı hap düzenini alır.
     */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main:not(.is-merged) .site-ui-mobile-nav__group--extra {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main:not(.is-merged) .site-ui-mobile-nav__group--extra > .site-ui-nav__item {
        width: auto;
        display: block;
        border: 0;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__link,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item > .site-ui-nav__link,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main:not(.is-merged) .site-ui-mobile-nav__group--extra > .site-ui-nav__link,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main:not(.is-merged) .site-ui-mobile-nav__group--extra > .site-ui-nav__item > .site-ui-nav__link {
        width: auto;
        min-height: 46px;
        margin: 0;
        padding: 10px 22px;
        display: inline-flex;
        justify-content: center;
        border: 2px solid rgba(255, 255, 255, 0.92);
        border-radius: 8px;
        background: transparent;
        color: #ffffff;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-align: center;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__link:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__link:focus-visible,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__link.is-active,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__link.is-highlighted,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item > .site-ui-nav__link:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item > .site-ui-nav__link:focus-visible,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item > .site-ui-nav__link[aria-expanded="true"],
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item > .site-ui-nav__link.is-active {
        padding: 10px 22px;
        border-color: #ffffff;
        background: #ffffff;
        color: var(--theme-primary-color);
    }

    /* Alt kırılımı olan hapta ok, kutusuz ve hapın içinde. */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__group--main > .site-ui-nav__item.has-children > .site-ui-nav__link i {
        width: auto;
        height: auto;
        margin-left: 10px;
        border: 0;
        background: transparent;
        color: currentColor;
        font-size: 11px;
    }

    /* ============================ 5) ÜST MENÜ: ÜÇLÜ KUTU IZGARASI */

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 32px;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__item {
        width: auto;
        display: flex;
        border: 0;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__link,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__item > .site-ui-nav__link {
        width: 100%;
        min-height: 66px;
        margin: 0;
        padding: 8px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 10px;
        background: transparent;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0.01em;
        text-align: center;
        /* Kutu dar; "INTERNATIONAL EDUCATION SERVICE" gibi uzun başlıklar
         * sarmazsa kutudan taşıyor. */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Panelde "BİLGİ FORMU" gibi vurgulu ögeler: masaüstünde dolu pembe hap,
     * pembe zeminde görünmez kalacağı için burada koyulaştırılmış dolgu. */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__link.is-highlighted,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__link.is-active,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__item > .site-ui-nav__link.is-highlighted {
        padding: 8px 6px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.16);
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__link:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__main.is-merged .site-ui-mobile-nav__group--extra > .site-ui-nav__link:focus-visible {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    /* ================================= 6) DİP: TELEFON + SOSYAL MEDYA */

    /*
     * Canlıdaki gibi tek satır ikon şeridi. Telefon numarasının metni gözden
     * kaldırılıyor ama DOM'da kalıyor: bağlantının erişilebilir adı numaranın
     * kendisi, `display: none` onu ekran okuyucudan da silerdi.
     */
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__footer {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.45);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__phone {
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__phone:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__phone:focus-visible {
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__phone i {
        font-size: 20px;
        opacity: 1;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__phone span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__socials {
        gap: 22px;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__socials a {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #ffffff;
        font-size: 19px;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__socials a:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__socials a:focus-visible {
        border-color: transparent;
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
    }

    /* ============================== 7) ALT KIRILIM PANELİ (drill-down) */

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__detail-header {
        border-bottom-color: rgba(255, 255, 255, 0.35);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__back {
        border-color: rgba(255, 255, 255, 0.6);
        background: transparent;
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__back:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__back:focus-visible {
        border-color: #ffffff;
        background: rgba(255, 255, 255, 0.16);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__detail-title {
        color: #ffffff;
        font-size: 19px;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mobile-nav__overview {
        border-color: rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-nav__submenu,
    .site-ui-header--modern .site-ui-nav .site-ui-mega,
    .site-ui-header--modern .site-ui-nav .site-ui-mega--full {
        border-left-color: rgba(255, 255, 255, 0.4);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-nav__submenu-link,
    .site-ui-header--modern .site-ui-nav .site-ui-mega .site-ui-mega__link {
        border-bottom-color: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.92);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-nav__submenu-link:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-nav__submenu-link.is-active,
    .site-ui-header--modern .site-ui-nav .site-ui-mega a.site-ui-mega__link:hover,
    .site-ui-header--modern .site-ui-nav .site-ui-mega a.site-ui-mega__link.is-active {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mega__group-title {
        color: #ffffff;
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mega .site-ui-mega__link small {
        color: rgba(255, 255, 255, 0.7);
    }

    .site-ui-header--modern .site-ui-nav .site-ui-mega .site-ui-mega__link i {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* ----------------------------------------------------------------------------
 * BAŞLIK ALANININ ZEMİNİ YAYININ KAPAĞI (`--cover` varyantı)
 *
 * Yayının kendi kapağı zemine taşınıyor: her dergi kendi rengini getiriyor ve
 * alan yayından yayına değişiyor. Ayrı bir kapak fotoğrafı ayarı gerekmiyor.
 *
 * GÖRSEL BULANIK basılıyor. Dikey bir A4 kapağı 1370×280'lik bir şeride
 * `cover` ile yayıldığında kapağın yalnız orta şeridi görünür ve tanınmaz bir
 * doku olur; bulanıklık onu bilinçli bir zemine çeviriyor. Üstündeki koyu perde
 * de yazının okunmasını kapağın rengine bırakmıyor: pembe bir kapakla beyaz
 * başlık perdesiz okunmazdı.
 *
 * Kapak YOKSA bu sınıf hiç eklenmiyor ve alan yukarıdaki düz gri kutu olarak
 * kalıyor (bkz. `publications/show.php`).
 * --------------------------------------------------------------------------*/
/*
 * KAPAKLI ALAN TAM GENİŞLİK VE HEADER'IN ALTINA UZANIYOR.
 *
 * Sitenin her yerindeki kural: kapak görseli olan başlık alanı kenardan kenara
 * gidiyor, header saydamlaşıp onun üstüne biniyor (içerik sayfaları
 * `page-hero--image`, haber ve yayın arşivleri de böyle). Kapaksız varyantta ise
 * alan kenarlardan içeride, yuvarlak köşeli gri bir kutu — o hâliyle beyaz menü
 * okunmazdı. Header'ı saydamlaştıran karar denetleyicide, aynı kapak adresine
 * bakarak veriliyor (`headerOverlay`).
 */
.publication-detail__hero--cover {
    margin: 0;
    border-radius: 0;
    /* Görsel yüklenene kadar (ve şeffaf kapaklarda) altta duran zemin. */
    background: #17204a;
    color: #ffffff;
}

/*
 * ÜST DOLGU header'a ayrılan pay. Arşivdeki 250px yerine 196px: orada başlık tek
 * satırlık bir metin, burada 270px'lik bir kapak kartı var ve aynı payla alan
 * gereksiz yere bir ekranı doldururdu. Alt dolgu da kısa tutuluyor — alanın
 * yüksekliğini asıl kart belirliyor.
 */
.publication-detail__hero--cover > .container-xl {
    padding-top: 196px;
    padding-bottom: 34px;
}

/* Mobilde header 164px yerine ~130px; aynı dolguyla alan aşağı kaçıyordu. */
@media (max-width: 991.98px) {
    .publication-detail__hero--cover > .container-xl {
        padding-top: 150px;
    }
}

@media (max-width: 575.98px) {
    .publication-detail__hero--cover > .container-xl {
        padding-top: 132px;
        padding-bottom: 26px;
    }
}

/*
 * İskeletin `::before`'ı ızgara desenini basıyordu, yukarıda `content: none` ile
 * kapatılmıştı; burada aynı katman bulanık kapak için geri alınıyor — ikinci bir
 * öge eklemeye gerek yok.
 *
 * `inset: -60px`: bulanıklık kenarlarda saydamlaşıyor ve kutunun köşelerinde açık
 * bir hâle bırakıyordu. Katman kutudan taşacak kadar büyütülüp `overflow: hidden`
 * ile kırpılıyor.
 */
.publication-detail__hero--cover::before {
    content: "";
    position: absolute;
    inset: -60px;
    opacity: 1;
    background: var(--publication-cover) center / cover no-repeat;
    filter: blur(38px) saturate(1.2);
    pointer-events: none;
}

/*
 * PERDE İKİ KATMAN.
 *
 * Alttaki yatay katman sola doğru koyulaşıyor: kapak kartı ve başlık orada duruyor,
 * sağ uç kapağın rengini biraz daha göstersin.
 *
 * Üstteki dikey katman yalnız ÜST ŞERİDİ koyulaştırıyor — saydam header'ın beyaz
 * menüsü orada duruyor ve açık renkli bir kapakta sağ üstteki bağlantılar okunmaz
 * hâle geliyordu. Aşağı doğru sıfırlanıyor, yani alanın geri kalanı kapağın rengini
 * göstermeye devam ediyor. İçerik sayfalarının kapaklı başlık alanında da aynı
 * gerekçeyle üst uç daha koyu.
 */
.publication-detail__hero--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 16, 40, 0.55) 0%, rgba(8, 16, 40, 0) 190px),
        linear-gradient(
            112deg,
            rgba(12, 22, 52, 0.9) 0%,
            rgba(12, 22, 52, 0.78) 48%,
            rgba(12, 22, 52, 0.68) 100%
        );
}

/* ---- koyu zeminde künye ---- */

.publication-detail__hero--cover .publication-detail__breadcrumb {
    color: rgba(255, 255, 255, 0.7);
}

.publication-detail__hero--cover .publication-detail__breadcrumb a {
    color: #ffffff;
}

.publication-detail__hero--cover .publication-detail__breadcrumb a:hover {
    color: var(--theme-primary-color, #e20f64);
}

.publication-detail__hero--cover .publication-detail__categories a,
.publication-detail__hero--cover .publication-detail__categories span {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.publication-detail__hero--cover .publication-detail__categories a:hover {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.publication-detail__hero--cover .publication-detail__meta {
    color: rgba(255, 255, 255, 0.78);
}

.publication-detail__hero--cover .publication-detail__intro h1 {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

.publication-detail__hero--cover .publication-detail__intro > p {
    color: rgba(255, 255, 255, 0.86);
}

/* Kapak kartı kendi bulanık kopyasının üstünde duruyor; net kalması için gölge
 * koyulaşıyor ve ince bir açık kenar ekleniyor. */
.publication-detail__hero--cover .publication-detail__cover img {
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.48);
    outline: 1px solid rgba(255, 255, 255, 0.16);
    outline-offset: -1px;
}

/* İkincil düğme koyu zeminde beyaz çerçeveli cam hap. */
.publication-detail__hero--cover .publication-detail__secondary-action {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.publication-detail__hero--cover .publication-detail__secondary-action:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

/* ============================================================================
 * BLOG — arşiv ve yazı sayfası
 *
 * İskelette (`site.css`) blog diye bir bölüm yok: modül siteye burada bağlandı.
 * Bu yüzden kurallar "ezme" değil, bölümün TAMAMI — ama yeni bir tasarım dili
 * uydurulmuyor: ölçüler, renkler ve köşe yarıçapları yayın arşivinden (20px köşe,
 * `#f7f9fd` zemin, `rgba(25,50,130,…)` gölge, pembe vurgu) birebir alınıyor ki
 * blog sitenin geri kalanıyla aynı dili konuşsun.
 *
 * Süzgeç formu ve haber arşivinin filtre kartı olduğu gibi kullanılıyor
 * (`news-archive-filter*`), burada yalnız kapağa bindirme payı veriliyor.
 *
 * KART SINIFI `blog-entry`, `blog-card` DEĞİL: bu dosyada yukarıda (bkz. "Vertical
 * Content Box") devralınan temadan gelen bir `.blog-card` bileşeni duruyor — beyaz
 * zemin, 6px köşe, gölge ve hover'da pembe alt çizgi veriyor. Aynı adı kullanınca
 * iki kural üst üste biniyor ve kart, köşe yarıçapları tutmayan ikinci bir kutunun
 * içinde görünüyordu. Eski kural başka yerlerde (panelden gelen içerik HTML'i)
 * kullanılıyor olabilir; ona dokunmak yerine yeni bileşen kendi adını aldı.
 * ==========================================================================*/

/* ---- başlık alanı (arşiv) ---------------------------------------------- */

/*
 * KAPAK GÖRSELİ VARSAYILANI içerik sayfalarıyla aynı dosya: panelde kapak
 * seçilmemişse alan boş bir lacivert dikdörtgen olarak kalırdı. `--hero-image`
 * satır içinde yalnız panel bir görsel verdiğinde yazılıyor.
 */
.page-hero.page-hero--content.page-hero--blog,
.page-hero.page-hero--content.page-hero--blog-post {
    --hero-image: url('../images/page-hero-bg.jpg');
}

/*
 * KARARTMA PANELDEN (`Görsel Karartma` sürgüsü) — `--hero-overlay` satır içinde
 * geliyor; iskeletin sabit gradyanı sürgüyü hiç dinlemiyor. Üst uç seçilen değerin
 * üstünde: saydam header'ın beyaz menüsü orada duruyor ve açık kapaklarda
 * okunmuyordu. Yayın arşivindeki kuralın aynısı.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--blog .page-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.22)) 0%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.08)) 42%,
        rgba(10, 20, 45, var(--hero-overlay, 0.55)) 74%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.14)) 100%
    );
}

/*
 * KAPAK YÜKSEKLİĞİ panelden. Üst dolgu SABİT: o pay saydam header'a ayrılmış,
 * yükseklik ayarı onu kısaltsaydı menü başlığın üstüne binerdi.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--blog-compact {
    padding-bottom: 56px;
}

.page-hero.page-hero--content.page-hero--image.page-hero--blog-tall {
    padding-bottom: 140px;
}

/*
 * İÇERİK KUTUSU ORTALANIYOR: `.page-hero__content` bir sütun esnek kutu ve
 * varsayılan `align-items: stretch` ile çalışıyor — sayaç hapı ekranı baştan başa
 * kaplayan beyaz bir şeride dönüşüyordu. Hizayı `text-align` değil `align-items`
 * belirliyor.
 */
.page-hero.page-hero--blog .page-hero__content,
.page-hero.page-hero--blog-post .page-hero__content {
    align-items: center;
}

/*
 * TANITIM CÜMLESİ BEYAZ. İskeletteki `.page-hero p` kuralı metni koyu griye
 * çekiyor ve kapak fotoğrafının üstünde okunmuyordu. Seçici `.page-hero` önekiyle
 * yazılıyor, yoksa (0,1,0) ile (0,1,1)'i ezemez.
 */
.page-hero.page-hero--blog p,
.page-hero.page-hero--blog-post p {
    max-width: 680px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

/*
 * SAYAÇ beyaz bir hap: koyu zemin için tasarlanmış camsı kutu düz kapakta
 * kayboluyordu (haber ve yayın arşivinde de aynı gerekçeyle hapa çevrilmişti).
 * Seçici `--blog` ile: yukarıdaki beyaz metin kuralı (0,2,1) tek sınıflı bir
 * kuralı ezer ve hap beyaz zeminde beyaz yazıya düşerdi.
 */
.page-hero.page-hero--blog .archive-hero__count {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    max-width: none;
    margin: 18px 0 0;
    padding: 10px 22px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(25, 50, 130, 0.12);
    color: var(--theme-secondary-color, #193282);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.page-hero.page-hero--blog .archive-hero__count strong {
    color: var(--theme-primary-color, #e20f64);
    font-size: 22px;
    font-weight: 800;
}

.page-hero.page-hero--blog .archive-hero__crumb,
.page-hero.page-hero--blog-post .archive-hero__crumb {
    margin-bottom: 16px;
}

/* ---- liste alanı -------------------------------------------------------- */

.blog-archive {
    padding: 56px 0 88px;
    background: linear-gradient(180deg, #f7f9fd 0, #ffffff 320px);
}

/* Kapak kapalıyken başlığın header'dan ayrılması için gereken payı
 * `archive-page__head` zaten veriyor; bölüm kendi payını ikinci kez eklemesin. */
.blog-archive:has(.archive-page__head) {
    padding-top: 0;
}

/*
 * SÜZGEÇ KARTI kapağın alt kenarına biniyor — haber ve yayın arşivindeki gibi.
 * Negatif boşluk yalnız KAPAK VARKEN doğru; kapak kapalıyken kart başlığın üstüne
 * çıkardı, o yüzden komşuluk seçicisine bağlı.
 */
.page-hero--blog + .blog-archive .blog-archive__filter,
.page-hero--blog + .blog-archive .blog-archive__chips {
    margin-top: -46px;
}

/*
 * KAPAĞA BİNEN KUTULAR KONUMLANDIRILIYOR.
 *
 * `.page-hero` konumlandırılmış (`position: relative`) ve boyama sırasına göre
 * konumlanmış öge, sonrasında gelen AKIŞ İÇİ bir kutunun üstüne basıyor: negatif
 * boşlukla kapağa binen kart kapağın arkasında kalıp yarısı görünmez oluyordu.
 * `z-index` verilen bir konumlandırma bunu tersine çeviriyor.
 */
.blog-archive__filter {
    position: relative;
    z-index: 1;
    margin-bottom: 34px;
    padding: 20px;
    border: 1px solid #e6ebf4;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(25, 50, 130, 0.1);
}

/*
 * ÇİP SATIRI VE ARAMA KARTI BİRLİKTE AÇIKKEN bindirmeyi yalnız ÜSTTEKİ yapar;
 * ikincisi normal akışta kalır, yoksa arama kartı çiplerin üstüne çıkıp onları
 * örtüyordu.
 *
 * Seçici kapak komşuluğunu da taşıyor: kısa yazılsaydı (`.blog-archive__chips +
 * .blog-archive__filter`) özgüllüğü yukarıdaki kuraldan (0,3,0) düşük kalır ve
 * hiçbir şey değiştirmezdi.
 */
.page-hero--blog + .blog-archive .blog-archive__chips + .blog-archive__filter {
    margin-top: 0;
}

/* ---- kategori çipleri --------------------------------------------------- */

.blog-archive__chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding: 16px 18px;
    border: 1px solid #e6ebf4;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(25, 50, 130, 0.1);
}

.blog-archive__chips a {
    padding: 9px 18px;
    border: 1px solid #e6ebf4;
    border-radius: 999px;
    background: #f7f9fd;
    color: var(--theme-secondary-color, #193282);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.blog-archive__chips a:hover {
    border-color: rgba(226, 15, 100, 0.35);
    color: var(--theme-primary-color, #e20f64);
}

.blog-archive__chips a.is-active {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

/* Alt kategori çipi bir basamak içeriden: ağaçtaki yeri düz bir satırda başka
 * türlü okunmuyor. */
.blog-archive__chips a.is-child::before {
    content: "└ ";
    opacity: 0.55;
}

/* ---- iki sütunlu düzen (yan sütun) -------------------------------------- */

.blog-archive__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
}

@media (min-width: 992px) {
    .blog-archive--aside-right .blog-archive__layout,
    .blog-archive--aside-left .blog-archive__layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }

    /*
     * SOLDAKİ YAN SÜTUN sütun sırasıyla veriliyor, işaretleme değişmiyor:
     * `<aside>` belgede listeden SONRA duruyor ve klavyeyle gezinen ziyaretçi
     * önce yazılara ulaşıyor. Görsel yer değiştirme yalnız ızgara sırası.
     */
    .blog-archive--aside-left .blog-archive__layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .blog-archive--aside-left .blog-archive__main {
        order: 2;
    }

    .blog-archive--aside-left .blog-archive__side {
        order: 1;
    }

    /* Yan sütun sayfayla birlikte kayıyor: uzun bir listede kutular ekranın
     * dışında kalıp boş bir sütun bırakmasın. */
    .blog-archive__side {
        position: sticky;
        top: 96px;
    }
}

/* ---- liste başlığı ------------------------------------------------------ */

.blog-archive__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
}

.blog-archive__summary h2 {
    margin: 0;
    color: var(--theme-secondary-color, #193282);
    font-size: 22px;
    font-weight: 800;
}

.blog-archive__summary strong {
    display: block;
    margin-top: 4px;
    color: var(--theme-primary-color, #e20f64);
    font-size: 14px;
}

.blog-archive__summary > span {
    color: #64748b;
    font-size: 14px;
}

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

/*
 * SÜTUN SAYISI panelden (`--blog-columns`) ve YALNIZ masaüstünde: telefonda dört
 * sütun okunmaz, aşağıdaki kırılımlar sayıyı kendisi düşürüyor (doküman §6:
 * "telefonda kendiliğinden tek sütuna inmelidir").
 */
.blog-archive__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 992px) {
    .blog-archive--grid .blog-archive__grid {
        grid-template-columns: repeat(var(--blog-columns, 3), minmax(0, 1fr));
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .blog-archive--grid .blog-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * KAPAK YÜKSEKLİĞİ panelden: sabit piksel değil ORAN, çünkü kart genişliği sütun
 * sayısına göre değişiyor ve sabit yükseklik dört sütunda görseli eziyordu.
 */
.blog-archive__grid,
.blog-post__related-grid {
    --blog-cover-ratio: 3 / 2;
}

.blog-archive--img-sm .blog-archive__grid { --blog-cover-ratio: 16 / 9; }
.blog-archive--img-lg .blog-archive__grid { --blog-cover-ratio: 4 / 3; }

.blog-entry {
    display: flex;
    height: 100%;
}

.blog-entry > a {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid #e7ecf5;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(25, 50, 130, 0.08);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-entry > a:hover {
    transform: translateY(-4px);
    border-color: rgba(226, 15, 100, 0.28);
    box-shadow: 0 22px 48px rgba(25, 50, 130, 0.16);
}

.blog-entry__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--blog-cover-ratio, 3 / 2);
    background: #eef2f9;
}

.blog-entry__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.blog-entry > a:hover .blog-entry__media img {
    transform: scale(1.05);
}

/* Görseli olmayan yazıda kutu boş kalmasın: bölümün simgesi soluk basılıyor. */
.blog-entry__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(25, 50, 130, 0.22);
    font-size: 34px;
}

.blog-entry__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.blog-entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
}

.blog-entry__badge {
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(226, 15, 100, 0.1);
    color: var(--theme-primary-color, #e20f64);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.blog-entry__body > strong {
    display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--theme-secondary-color, #193282);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.blog-entry__body > p {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.blog-entry__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

/*
 * BAĞLANTI SATIRI kartın DİBİNE itiliyor (`margin-top: auto`): özeti kısa olan
 * kartta satır yukarıda kalırsa yan yana duran kartların bağlantıları farklı
 * hizalarda görünüyor.
 */
.blog-entry__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--theme-primary-color, #e20f64);
    font-size: 13px;
    font-weight: 800;
}

.blog-entry__more i {
    transition: transform 0.2s ease;
}

.blog-entry > a:hover .blog-entry__more i {
    transform: translateX(4px);
}

/* Öne çıkarılan yazı: kart kenarı kurumun vurgu rengiyle işaretleniyor. */
.blog-entry.is-featured > a {
    border-color: rgba(226, 15, 100, 0.35);
}

/* ---- kompakt liste düzeni (`list.layout = list`) ------------------------ */

/*
 * Görsel solda, metin sağda. Aynı işaretleme, farklı yön — ikinci bir kart
 * bileşeni yazmak, birinde yapılan düzeltmenin ötekine geçmemesi demekti.
 * SÜTUN SAYISINA KARIŞMIYOR: düzen ile sütun sayısı panelde iki ayrı ayar.
 */
.blog-archive--list .blog-archive__grid {
    gap: 16px;
}

.blog-archive--list .blog-entry > a {
    flex-direction: row;
    align-items: stretch;
}

.blog-archive--list .blog-entry__media {
    flex: 0 0 34%;
    max-width: 300px;
    aspect-ratio: 16 / 11;
}

.blog-archive--list .blog-entry__body {
    justify-content: center;
    padding: 20px 24px;
}

.blog-archive--list .blog-entry__more {
    margin-top: 14px;
    padding-top: 0;
}

/* Dar ekranda yan yana düzen anlamını yitiriyor: görsel üste geçiyor. */
@media (max-width: 575.98px) {
    .blog-archive--list .blog-entry > a {
        flex-direction: column;
    }

    .blog-archive--list .blog-entry__media {
        flex: 0 0 auto;
        max-width: none;
        aspect-ratio: 16 / 10;
    }
}

/* ---- manşet (`list.spotlight`) ------------------------------------------ */

.blog-spotlight {
    display: block;
    margin-bottom: 26px;
}

.blog-spotlight > a {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #e7ecf5;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(25, 50, 130, 0.1);
    color: inherit;
    text-decoration: none;
}

.blog-spotlight > a:hover {
    border-color: rgba(226, 15, 100, 0.28);
    box-shadow: 0 26px 56px rgba(25, 50, 130, 0.16);
}

/*
 * YÜKSEKLİK SINIRI KARTA DEĞİL GÖRSELE: dikey bir afiş manşeti 900px'e çıkarıyor
 * ve her yazıda başka bir boy veriyordu. Karta sabit yükseklik verilseydi uzun
 * başlıkta metin kırpılırdı; görsel sınırlıyken satır yüksekliği "metin sığar"
 * olarak kalıyor (`object-fit: cover` zaten ortadan kırpıyor). Haber arşivindeki
 * manşette de aynı karar yazılı.
 */
.blog-spotlight__media {
    display: block;
    overflow: hidden;
    max-height: clamp(320px, 34vw, 460px);
    background: #eef2f9;
}

.blog-spotlight__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-spotlight__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3vw, 42px);
}

.blog-spotlight__body > strong {
    margin-top: 14px;
    color: var(--theme-secondary-color, #193282);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 900;
    line-height: 1.22;
}

.blog-spotlight__body > p {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

/* Görsel yoksa metin iki sütunu da kaplıyor: yarısı boş bir kutu kalmasın. */
.blog-spotlight.is-coverless > a {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * "ÜST ÜSTE" DÜZEN (`spotlight_style: overlay`): aynı işaretleme, tek hücre.
 * Kural GÖRSEL VARSA'ya bağlı — görselsiz manşette koyu geçişin üstündeki beyaz
 * yazı beyaz zemine düşer ve okunmaz olurdu.
 */
.blog-spotlight--overlay:not(.is-coverless) > a {
    grid-template-columns: minmax(0, 1fr);
}

.blog-spotlight--overlay:not(.is-coverless) > a > .blog-spotlight__media,
.blog-spotlight--overlay:not(.is-coverless) > a > .blog-spotlight__body {
    grid-area: 1 / 1;
}

.blog-spotlight--overlay:not(.is-coverless) > a > .blog-spotlight__body {
    position: relative;
    justify-content: flex-end;
    background: linear-gradient(
        180deg,
        rgba(9, 16, 38, 0) 24%,
        rgba(9, 16, 38, 0.76) 70%,
        rgba(9, 16, 38, 0.94) 100%
    );
}

.blog-spotlight--overlay:not(.is-coverless) .blog-entry__meta {
    color: rgba(255, 255, 255, 0.78);
}

.blog-spotlight--overlay:not(.is-coverless) .blog-entry__badge {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.blog-spotlight--overlay:not(.is-coverless) .blog-spotlight__body > strong {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(9, 16, 38, 0.45);
}

.blog-spotlight--overlay:not(.is-coverless) .blog-spotlight__body > p {
    color: rgba(255, 255, 255, 0.88);
}

/*
 * ÜST ÜSTE DÜZENDE METİN ALTA TOPLANIYOR.
 *
 * Kartın "Yazıyı oku" satırı normalde `margin-top: auto` ile kutunun dibine
 * itiliyor (ızgarada yan yana kartların bağlantıları aynı hizada dursun diye).
 * Burada o otomatik boşluk aradaki bütün payı yutuyor ve başlık kutunun TEPESİNE,
 * yani koyu geçişin dışına, görselin açık kısmına çıkıyordu — okunmuyordu.
 * Otomatik boşluk kaldırılınca `justify-content: flex-end` iş görüyor ve künye,
 * başlık, özet, bağlantı tek blok hâlinde geçişin üstünde duruyor.
 */
.blog-spotlight--overlay:not(.is-coverless) .blog-entry__more {
    margin-top: 14px;
    padding-top: 0;
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .blog-spotlight > a {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-spotlight__media {
        max-height: 240px;
    }
}

/* ---- boş sonuç ---------------------------------------------------------- */

.blog-archive__empty {
    padding: 56px 24px;
    border: 1px solid #e7ecf5;
    border-radius: 20px;
    background: #ffffff;
    text-align: center;
}

.blog-archive__empty > i {
    color: var(--theme-primary-color, #e20f64);
    font-size: 34px;
}

.blog-archive__empty h2 {
    margin: 16px 0 8px;
    color: var(--theme-secondary-color, #193282);
    font-size: 21px;
    font-weight: 900;
}

.blog-archive__empty p {
    margin: 0;
    color: #64748b;
}

.blog-archive__empty a {
    display: inline-block;
    margin-top: 18px;
    padding: 11px 24px;
    border-radius: 999px;
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

/* ---- sayfalama ---------------------------------------------------------- */

.blog-archive__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.blog-archive__pagination a,
.blog-archive__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e6ebf4;
    border-radius: 12px;
    background: #ffffff;
    color: var(--theme-secondary-color, #193282);
    font-weight: 700;
    text-decoration: none;
}

.blog-archive__pagination span {
    border-color: transparent;
    background: transparent;
}

.blog-archive__pagination a:hover,
.blog-archive__pagination a.is-active {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

/* ---- yan sütun ---------------------------------------------------------- */

.blog-archive__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-side__box {
    padding: 20px 22px;
    border: 1px solid #e7ecf5;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(25, 50, 130, 0.07);
}

.blog-side__title {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f9;
    color: var(--theme-secondary-color, #193282);
    font-size: 16px;
    font-weight: 800;
}

.blog-side__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-side__search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #e6ebf4;
    border-radius: 12px;
    background: #f7f9fd;
    font-size: 14px;
}

.blog-side__search button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.blog-side__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-side__list li + li {
    margin-top: 4px;
}

/* Alt kategori bir basamak içeride: yan sütunda ağacı gösteren tek işaret bu. */
.blog-side__list li.is-child {
    padding-left: 16px;
}

.blog-side__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--theme-secondary-color, #193282);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.blog-side__list a:hover {
    background: #f7f9fd;
    color: var(--theme-primary-color, #e20f64);
}

.blog-side__list a.is-active {
    background: rgba(226, 15, 100, 0.1);
    color: var(--theme-primary-color, #e20f64);
}

.blog-side__posts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-side__post {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.blog-side__post-media {
    flex: 0 0 auto;
    width: 64px;
    height: 52px;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2f9;
}

.blog-side__post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-side__post-body strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--theme-secondary-color, #193282);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.blog-side__post-body time {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
}

.blog-side__post:hover .blog-side__post-body strong {
    color: var(--theme-primary-color, #e20f64);
}

.blog-side__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-side__tags a {
    padding: 6px 13px;
    border: 1px solid #e6ebf4;
    border-radius: 999px;
    background: #f7f9fd;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.blog-side__tags a:hover,
.blog-side__tags a.is-active {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    /* Kapak mobilde kısalıyor; süzgeç kartının bindirmesi de azalsın, yoksa kart
     * başlığın üstüne çıkıyor. */
    .page-hero--blog + .blog-archive .blog-archive__filter,
    .page-hero--blog + .blog-archive .blog-archive__chips {
        margin-top: -28px;
    }

    .blog-archive {
        padding: 40px 0 64px;
    }
}

/* ============================================================================
 * BLOG YAZISI
 * ==========================================================================*/

/* Yazının kategorileri başlığın ÜSTÜNDE, kapağın üstünde duran hap bağlantılar. */
.blog-post__categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.blog-post__categories a,
.blog-post__categories span {
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.blog-post__categories a:hover {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
}

.blog-post {
    padding: 0 0 88px;
    background: linear-gradient(180deg, #f7f9fd 0, #ffffff 420px);
}

/*
 * METİN SÜTUNU DAR: uzun bir yazıda satır uzunluğu okunabilirliği belirliyor ve
 * 1200px'lik kapta satır başına 150 karakter düşüyordu. Ölçü tipografik (~75ch),
 * kabın genişliğinden bağımsız.
 */
.blog-post__layout {
    max-width: 860px;
    margin: 0 auto;
}

/*
 * KÜNYE ŞERİDİ kapağın alt kenarına biniyor: yazının başlığı kapakta, künyesi
 * hemen altındaki beyaz kartta — haber detayındaki panel ile aynı fikir.
 */
.blog-post__byline {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: -40px;
    margin-bottom: 28px;
    padding: 18px 24px;
    border: 1px solid #e7ecf5;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(25, 50, 130, 0.1);
}

.blog-post__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Yazar fotoğrafı YOK (panelde böyle bir alan yok): baş harfi taşıyan yuvarlak. */
.blog-post__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(226, 15, 100, 0.12);
    color: var(--theme-primary-color, #e20f64);
    font-size: 18px;
    font-weight: 900;
}

.blog-post__author strong {
    display: block;
    color: var(--theme-secondary-color, #193282);
    font-size: 15px;
    font-weight: 800;
}

.blog-post__author small {
    display: block;
    color: #64748b;
    font-size: 12.5px;
}

.blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.blog-post__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.blog-post__meta i {
    color: var(--theme-primary-color, #e20f64);
}

.blog-post__share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-post__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e6ebf4;
    border-radius: 50%;
    background: #f7f9fd;
    color: var(--theme-secondary-color, #193282);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.blog-post__share a:hover {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.blog-post__content {
    padding: 4px 0 8px;
    color: #334155;
    font-size: 16.5px;
    line-height: 1.85;
}

.blog-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e7ecf5;
}

.blog-post__tags a,
.blog-post__tags span {
    padding: 7px 15px;
    border: 1px solid #e6ebf4;
    border-radius: 999px;
    background: #f7f9fd;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.blog-post__tags a:hover {
    border-color: var(--theme-primary-color, #e20f64);
    background: var(--theme-primary-color, #e20f64);
    color: #ffffff;
}

.blog-post__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: var(--theme-primary-color, #e20f64);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

/* ---- ilgili yazılar ----------------------------------------------------- */

.blog-post__related {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #e7ecf5;
}

.blog-post__related > h2 {
    margin: 0 0 24px;
    color: var(--theme-secondary-color, #193282);
    font-size: 24px;
    font-weight: 900;
    text-align: center;
}

.blog-post__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 991.98px) {
    .blog-post__related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .blog-post__related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-post__byline {
        margin-top: -24px;
        padding: 16px 18px;
    }
}

/* ============================================================================
 * SİTE ARAMASI — başlık alanı
 *
 * Sayfa kendi kapak alanını çiziyordu (degrade zemin, sağda büyüteç simgesi) ve
 * kapak fotoğrafı seçilmesine rağmen sitenin geri kalanına benzemiyordu: içerik
 * sayfaları, haber detayı ve haber/yayın/blog arşivleri hep `page-hero--image`
 * kullanıyor — tam genişlik banner, koyu perde, ortalanmış beyaz başlık, üstüne
 * binen saydam header.
 *
 * Görünüm artık o bileşeni kullanıyor (`search/index.php`); buradaki kurallar
 * yalnız aramaya özgü parçalar için. Yapı yayın ve blog arşivindekiyle birebir
 * aynı — üç sayfada aynı kararın üç ayrı biçimde yazılmaması için.
 * ==========================================================================*/

/*
 * KAPAK GÖRSELİ VARSAYILANI içerik sayfalarıyla aynı dosya. Panelde kapak
 * seçilmemişse alan boş bir lacivert dikdörtgen olarak kalırdı; `--hero-image`
 * satır içinde yalnız panel bir görsel verdiğinde yazılıyor.
 */
.page-hero.page-hero--content.page-hero--search {
    --hero-image: url('../images/page-hero-bg.jpg');
}

/*
 * KARARTMA PANELDEN (`Görsel Karartma` sürgüsü) — `--hero-overlay` satır içinde
 * geliyor; iskeletin sabit gradyanı sürgüyü hiç dinlemiyor. Üst uç seçilen
 * değerin üstünde: saydam header'ın beyaz menüsü orada duruyor ve açık
 * kapaklarda okunmuyordu. Yayın ve blog arşivindeki kuralın aynısı.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--search .page-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.22)) 0%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.08)) 42%,
        rgba(10, 20, 45, var(--hero-overlay, 0.55)) 74%,
        rgba(10, 20, 45, calc(var(--hero-overlay, 0.55) + 0.14)) 100%
    );
}

/*
 * KAPAK YÜKSEKLİĞİ panelden. Üst dolgu SABİT: o pay saydam header'a ayrılmış,
 * yükseklik ayarı onu kısaltsaydı menü başlığın üstüne binerdi.
 *
 * Alt dolgu ötekilerden BİR TIK FAZLA (56/88/140 yerine 96/128/180): arama
 * kutusu kapağın üstüne -50px biniyor ve dar ölçüde kutu başlığın altına değil
 * ÜSTÜNE geliyordu. Fark tam olarak kutunun bindiği pay kadar.
 */
.page-hero.page-hero--content.page-hero--image.page-hero--search {
    padding-bottom: 128px;
}

.page-hero.page-hero--content.page-hero--image.page-hero--search-compact {
    padding-bottom: 96px;
}

.page-hero.page-hero--content.page-hero--image.page-hero--search-tall {
    padding-bottom: 180px;
}

/*
 * Mobilde header 164px yerine 130px ve iskelet kapaklı varyantın dolgusunu
 * (190/64) buna göre kısıyor. Yukarıdaki kurallar dört sınıflı olduğu için o
 * daralmayı eziyordu — telefonda kapak gereksiz uzun kalıyordu. Aynı kırılım
 * burada da yazılıyor; alt dolgu yine kutunun bindiği payı taşıyor.
 */
@media (max-width: 768px) {
    .page-hero.page-hero--content.page-hero--image.page-hero--search,
    .page-hero.page-hero--content.page-hero--image.page-hero--search-compact {
        padding-bottom: 92px;
    }

    .page-hero.page-hero--content.page-hero--image.page-hero--search-tall {
        padding-bottom: 128px;
    }
}

/*
 * İÇERİK KUTUSU ORTALANIYOR: `.page-hero__content` bir sütun esnek kutu ve
 * varsayılan `align-items: stretch` ile çalışıyor — üst etiket sola yapışıyordu.
 * Hizayı `text-align` değil `align-items` belirliyor.
 */
.page-hero.page-hero--search .page-hero__content {
    align-items: center;
}

/*
 * TANITIM CÜMLESİ BEYAZ. İskeletteki `.page-hero p` kuralı metni koyu griye
 * çekiyor ve kapak fotoğrafının üstünde okunmuyordu. Seçici `.page-hero`
 * önekiyle yazılıyor, yoksa (0,1,0) ile (0,1,1)'i ezemez.
 */
.page-hero.page-hero--search p {
    max-width: 680px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}