/* SERENAS Brand Overrides
   KURAL: Tema'nın orijinal style.css/header.css davranışına ASLA override koyma.
   Hero, sticky, button, subtitle, border-radius, padding, margin, position — tema default'unu kullan.
   Brand.css yalnızca: :root renkleri + theme remnants gizleme + custom navbar markup styling + Jost font.
*/

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primaryFont: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --secondaryFont: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --optionalFont: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* SERENAS marka renkleri tema'nın değişkenlerine map */
    --primaryColor: #E16B30;       /* turuncu — buton default bg, vurgu */
    --secondaryColor: #FFB50F;     /* sarı/altın — buton hover bg, hero subtitle text */
    --optionalColor: #021E2F;      /* hero zemini :after, sticky navbar bg — lacivert */
    --titleColor: #021E2F;         /* başlıklar */

    /* Geriye uyumluluk için */
    --brand-primary: #E16B30;
    --brand-dark: #021E2F;
    --brand-text: #1f1f1f;
    --brand-white: #FFFFFF;
    --brand-light: #F8F8F8;

    /* İkincil renk paleti — Kurumsal Kimlik Kılavuzu s.16
       Sertifika/VIP/özel uygulamalar + grup şirket vurgu renkleri.
       Kullanım utility class'ları: .brand-*  (bg-brand-* + text-brand-*) */
    --brand-red:    #C4352A;   /* özel kullanım kırmızı — Neden SERENAS feature ikonları */
    --brand-adors:  #FFB50F;   /* Adors sarısı = secondaryColor */
    --brand-cream:  #EDE6D6;   /* krem — kart zemin */
    --brand-gray:   #BFBFBF;   /* gri — nötr yardımcı */
    --brand-medyas: #BAA4DD;   /* Medyas mor */
    --brand-frame:  #358ABC;   /* Frame mavi */
    --brand-mint:   #C0E3CD;   /* mint yeşil */
    --brand-green:  #77AF8A;   /* koyu yeşil */
}

/* Utility class'lar — grup şirket sayfaları ve özel bloklar için */
.bg-brand-red    { background-color: var(--brand-red)    !important; }
.bg-brand-adors  { background-color: var(--brand-adors)  !important; }
.bg-brand-cream  { background-color: var(--brand-cream)  !important; }
.bg-brand-gray   { background-color: var(--brand-gray)   !important; }
.bg-brand-medyas { background-color: var(--brand-medyas) !important; }
.bg-brand-frame  { background-color: var(--brand-frame)  !important; }
.bg-brand-mint   { background-color: var(--brand-mint)   !important; }
.bg-brand-green  { background-color: var(--brand-green)  !important; }

.text-brand-red    { color: var(--brand-red)    !important; }
.text-brand-adors  { color: var(--brand-adors)  !important; }
.text-brand-medyas { color: var(--brand-medyas) !important; }
.text-brand-frame  { color: var(--brand-frame)  !important; }
.text-brand-green  { color: var(--brand-green)  !important; }

/* Theme remnants — istemiyoruz */
.cursor, .cursor-inner,
.switch-theme-mode, .switch,
[class*="theme-switcher"], [class*="switch-theme"],
.scroll-top, .progress-wrap, #progress-wrap, .back-to-top,
.preloader-area, #preloader { display: none !important; }

/* scrollcue.js init olmadığında data-cue elementleri görünür kalsın */
[data-cue], [data-cues] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

body {
    font-family: var(--primaryFont);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   CUSTOM NAVBAR STYLING
   Tema'nın megamenu yapısı yerine Bootstrap-based custom navbar kullanıyoruz.
   Tema'nın style.css/header.css'i bizim navbar markup'ına tam uymadığı için
   logo + menu + phone + CTA wrapper styling burada tanımlı.
   POSITION'A DOKUNMUYORUZ — markup'taki `position-relative` Bootstrap utility ile relative,
   sticky'de header.css `position: sticky !important; top: 0` aktif.
   ========================================================================== */

.navbar-area .navbar-brand img {
    max-height: 44px;
    width: auto;
}
/* GL events + SERENAS birleşik logo — Kurumsal Kimlik s.7-8 zorunlu birlikte kullanım.
   Aralarındaki boşluk SERENAS güneş sembolünün yaklaşık 1.5 katı (~14px). */
.navbar-area .navbar-brand .brand-gl-events {
    max-height: 34px;
    margin-right: 14px;
    flex-shrink: 0;
}
.navbar-area .navbar-brand .brand-serenas {
    max-height: 44px;
}
@media (max-width: 575px) {
    .navbar-area .navbar-brand .brand-gl-events { max-height: 28px; margin-right: 8px; }
    .navbar-area .navbar-brand .brand-serenas { max-height: 36px; }
}

.navbar-area .navbar-wrapper {
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.navbar-area .menu-section {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-area .menu-section > li { position: relative; }
.navbar-area .menu-section > li > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.25s;
    white-space: nowrap;
}
.navbar-area .menu-section > li > a:hover,
.navbar-area .menu-section > li > a.active { color: var(--brand-primary); }
.navbar-area .menu-section > li.menu-item-has-children > a::after {
    content: "+";
    margin-left: 4px;
    color: var(--brand-primary);
    font-weight: 400;
}
.navbar-area .menu-subs {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 240px;
    padding: 12px 0;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.18);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 1000;
}
.navbar-area .menu-section > li:hover > .menu-subs {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.navbar-area .menu-subs li a {
    display: block;
    padding: 10px 22px;
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}
.navbar-area .menu-subs li a:hover {
    background: rgba(225,107,48,0.08);
    color: var(--brand-primary);
    padding-left: 28px;
}

.navbar-area .other-options {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.navbar-area .contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    transition: all 0.25s;
    flex-shrink: 0;
    white-space: nowrap;
}
.navbar-area .contact-link .contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(225,107,48,0.22);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 20px;
    flex-shrink: 0;
}
.navbar-area .contact-link:hover .contact-icon {
    background: var(--brand-primary);
    color: #fff;
}
.navbar-area .contact-link .contact-text { line-height: 1.2; white-space: nowrap; }
.navbar-area .contact-link .contact-text small {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    letter-spacing: 0.5px;
    display: block;
}
.navbar-area .contact-link .contact-text strong {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-top: 4px;
}

.menu-mobile-trigger {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.1);
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.menu-mobile-trigger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
}

@media (max-width: 1199px) {
    .navbar-area .menu-section > li > a { padding: 12px 10px; font-size: 14px; }
}
@media (max-width: 991px) {
    .navbar-area .navbar-wrapper { padding: 14px 20px; }
    .navbar-area .menu-area { display: none; }
    .navbar-area .menu-area.active {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 280px;
        height: 100vh;
        background: var(--brand-dark);
        padding: 24px;
        z-index: 9999;
        overflow-y: auto;
    }
    .navbar-area .menu-section { flex-direction: column; align-items: stretch; gap: 0; }
    .navbar-area .menu-section > li > a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 0; }
    .navbar-area .menu-subs { position: static; box-shadow: none; background: rgba(255,255,255,0.05); opacity: 1; visibility: visible; transform: none; padding-left: 16px; }
    .navbar-area .menu-subs li a { color: rgba(255,255,255,0.85); }
}

/* ==========================================================================
   İÇ SAYFA BREADCRUMB / PAGE HEADER
   Tema'nın .breadcrumb-area pattern'i (style.css 1582+) krem zeminli tasarlanmış.
   SERENAS lacivert zemine çekiyoruz — hero pattern'i ile uyumlu.
   ========================================================================== */
.breadcrumb-area {
    background-color: var(--brand-dark) !important;
}
.breadcrumb-area .section-title {
    color: #fff !important;
}
.breadcrumb-area .br-menu li {
    color: rgba(255,255,255,0.7);
}
.breadcrumb-area .br-menu li::after {
    background-color: rgba(255,255,255,0.25) !important;
}
.breadcrumb-area .br-menu li a {
    color: var(--brand-primary);
}
.breadcrumb-area .br-menu li a:hover {
    color: #fff;
}
.breadcrumb-area .br-menu li a img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.breadcrumb-area .breadcrumb-subtitle {
    color: rgba(255,255,255,0.78);
    max-width: 720px;
    margin: 0 auto 18px;
}

/* İç sayfa içerik bitişi ile footer arası ferah boşluk.
   Sadece breadcrumb-area olan sayfalarda (yani iç sayfalarda) uygulanır;
   ana sayfada (.hero-area.style-one olan) etkisi yoktur. */
body:has(.breadcrumb-area) > .footer-area {
    margin-top: 80px;
}

/* ==========================================================================
   NEDEN SERENAS — feature-item ikonlarını marka kırmızısına (#C4352A) boya.
   Tema'nın pembemsi PNG'lerini CSS filter chain ile renklendiriyoruz.
   Filter chain codepen.io/sosuke/pen/Pjoqqp mantığıyla #C4352A hedefine göre üretildi.
   ========================================================================== */
.wh-area .feature-item img {
    filter: brightness(0) saturate(100%)
            invert(29%) sepia(75%) saturate(2456%)
            hue-rotate(346deg) brightness(87%) contrast(94%);
}

/* ==========================================================================
   ÜYELİKLER bölümü partner-card (tema'da yok, biz ekledik — Üyelikler section)
   Logo grid — grayscale + hover'da renklenir. Logo yoksa isim gösterilir.
   ========================================================================== */
.partner-card {
    background: #fff;
    border: 1px solid rgba(2,30,47,0.1);
    padding: 24px 16px;
    border-radius: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    text-align: center;
    transition: all 0.25s ease;
    text-decoration: none;
}
.partner-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(2,30,47,0.08);
}
.partner-card .partner-logo {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: all 0.25s ease;
}
.partner-card:hover .partner-logo {
    filter: grayscale(0);
    opacity: 1;
}
.partner-card .partner-name-fallback {
    color: var(--brand-dark);
    letter-spacing: 0.3px;
}