:root {
    --mek-red: #bd1e3c;
    --mek-red-dark: #8e142d;
    --mek-blue: #18375f;
    --mek-ink: #273242;
    --mek-soft: #f4f5f7;
    --mek-border: #e5e7eb;
    --brand-orange: #bd1e3c;
    --brand-navy: #18375f;
}

html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { color: var(--mek-ink); font-family: "Barlow", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.site-main,
main.home { align-content: initial; display: block; grid-auto-flow: initial; grid-auto-rows: initial; grid-template-columns: none; justify-content: initial; max-width: none; min-height: 55vh; width: 100%; }
.site-main a,
main.home a { overflow: visible; }
.site-main a:nth-of-type(n),
main.home a:nth-of-type(n) { grid-column: auto; grid-row: auto; }
.site-main img,
main.home img { filter: none; height: auto; transform: none; }
.site-main a:focus img,
.site-main a:hover img,
main.home a:focus img,
main.home a:hover img { filter: none; }
.box-shadow { box-shadow: 0 5px 22px rgba(18, 28, 45, .09); }

.mektebim-header { background: #fff; display: block; height: auto; min-height: 0; padding: 0; position: relative; z-index: 1000; }
.header-top-row { background: var(--mek-red); min-height: 40px; }
.top-helper-menu,
.main-menu,
.mobile-main-menu,
.canvas-main-menu,
.footer-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.top-helper-menu { align-items: center; justify-content: flex-end; min-height: 40px; }
.top-helper-menu > li > a { align-items: center; color: #fff; display: flex; font-size: 12px; font-weight: 600; gap: 7px; letter-spacing: .02em; padding: 10px 13px; text-transform: uppercase; }
.top-helper-menu > li + li > a { border-left: 1px solid rgba(255,255,255,.2); }
.header-bottom-row { background: #fff; min-height: 102px; }
.logo { align-items: center; display: flex; min-height: 102px; }
.mektebim-header .logo img { filter: none; height: auto; max-height: 76px; width: auto; }
.menu-wrapper { height: 100%; }
.mektebim-header ul.main-menu { align-items: stretch; height: 100%; justify-content: flex-end; padding: 0; width: auto; }
.main-menu > li { align-items: stretch; display: flex; position: relative; }
.mektebim-header ul.main-menu > li > a { align-items: center; color: #1e2c3d; display: flex; font-size: 15px; font-weight: 600; padding: 0 17px; position: relative; text-transform: none; }
.main-menu > li > a::after { background: var(--mek-red); bottom: 0; content: ""; height: 3px; left: 50%; position: absolute; right: 50%; transition: .25s ease; }
.mektebim-header ul.main-menu > li:hover > a::after,
.mektebim-header ul.main-menu > li > a.active::after { left: 14px; right: 14px; }
.sub-menu { background: #fff; border-top: 3px solid var(--mek-red); box-shadow: 0 18px 35px rgba(20,35,55,.14); display: none; left: 0; list-style: none; min-width: 240px; padding: 10px 0; position: absolute; top: 100%; }
.has-children:hover > .sub-menu { display: block; }
.sub-menu a { display: block; padding: 9px 18px; }
.side-menu-opener { background: var(--mek-red); border: 0; color: #fff; font-size: 24px; min-width: 62px; }
.menu-ataturk-image { align-items: center; display: flex; justify-content: center; padding-left: 12px; width: 98px; }
.menu-ataturk-image img { max-height: 92px; }
.menu-opener { background: transparent; border: 0; height: 50px; margin-right: 14px; position: relative; width: 50px; }
.menu-opener .bar { background: transparent; display: block; height: 24px; left: 9px; margin: 0; position: absolute; top: 13px; width: 32px; }
.menu-opener .bar > span,
.menu-opener .bar::before,
.menu-opener .bar::after { background: var(--mek-red); border-radius: 2px; content: ""; display: block; height: 3px; left: 0; position: absolute; transition: .2s; width: 32px; }
.menu-opener .bar > span { top: 10px; }
.menu-opener .bar::before { top: 1px; }
.menu-opener .bar::after { top: 19px; }
.menu-wrapper.mobile { background: #fff; display: none; height: auto; left: 0; max-height: calc(100vh - 90px); overflow: auto; position: absolute; right: 0; top: 100%; }
.menu-wrapper.mobile.opened { display: block; transform: translateX(0) !important; z-index: 1100; }
.menu-inside-wrapper { padding: 18px; }
.mobile-main-menu { display: block; }
.mobile-main-menu a { border-bottom: 1px solid var(--mek-border); display: flex; gap: 10px; padding: 12px 4px; }
.mobile-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 18px 0 0; padding: 0; }
.mobile-socials a { color: var(--mek-red); }

.canvas-menu { backdrop-filter: blur(10px); background: rgba(218,24,50,.91); border-left: 4px solid #fff; bottom: 0; box-shadow: -5px 0 15px rgba(0,0,0,.1); max-width: 92vw; overflow: hidden auto; padding: 0; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .35s ease; width: 350px; z-index: 1200; }
.canvas-menu.active { transform: translateX(0); }
.canvas-menu::after { animation: canvas-spin 60s linear infinite; background: url("../site/default/images/box-bg-item.png") left center / cover no-repeat; content: ""; height: 800px; left: 0; mix-blend-mode: exclusion; opacity: .18; pointer-events: none; position: absolute; top: 50%; width: 800px; z-index: -1; }
@keyframes canvas-spin { to { transform: rotate(360deg); } }
.canvas-backdrop { background: rgba(12,23,37,.55); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .3s; z-index: 1150; }
.canvas-menu-active .canvas-backdrop { opacity: 1; pointer-events: auto; }
.canvas-menu-header { border-bottom: 1px solid #fff; height: 57px; padding: 0 15px; position: relative; z-index: 1; }
.canvas-menu-header > img { max-height: 38px; max-width: 170px; }
.canvas-menu-close-btn { align-items: center; background: rgba(255,255,255,.25); border: 0; border-radius: 50%; color: #fff; display: flex; height: 25px; justify-content: center; width: 25px; }
.canvas-menu-content { padding: 20px; position: relative; z-index: 1; }
.canvas-main-menu { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 0; }
.canvas-main-menu > li { display: flex; justify-content: center; width: 100%; }
.canvas-main-menu > li > a { align-items: center; color: #fff; display: flex; font-size: 18px; gap: 10px; justify-content: center; padding: 4px 0; text-align: center; transition: color .2s; width: 100%; }
.canvas-main-menu > li:nth-child(1),
.canvas-main-menu > li:nth-child(2) { border: 1px solid #fff; border-radius: 10px; flex: 1 1 calc(50% - 8px); margin-bottom: 5px; padding: 10px 6px; width: calc(50% - 8px); }
.canvas-main-menu > li:nth-child(1) > a,
.canvas-main-menu > li:nth-child(2) > a { font-size: 16px; line-height: 1.15; }
.canvas-main-menu > li:nth-child(1) i,
.canvas-main-menu > li:nth-child(2) i { font-size: 24px; }
.canvas-main-menu > li > a:hover { color: #1b2230; }

.home-levels { overflow: hidden; }
.level-card { background-image: linear-gradient(rgba(16,24,40,.06), rgba(16,24,40,.32)), var(--level-bg); background-position: center; background-size: cover; display: block; height: 270px; overflow: hidden; position: relative; }
.level-card::after { background: linear-gradient(180deg, transparent 32%, rgba(19,35,58,.72)); content: ""; inset: 0; position: absolute; transition: .3s; }
.level-card:hover::after { background: linear-gradient(180deg, rgba(189,30,60,.06), rgba(115,13,36,.78)); }
.level-card__figure { bottom: -8px; height: 92%; left: 50%; object-fit: contain; position: absolute; transform: translateX(-50%); transition: transform .35s ease; width: 75%; z-index: 1; }
.level-card:hover .level-card__figure { transform: translateX(-50%) scale(1.035); }
.level-card__title { color: #fff; font-size: clamp(25px, 2.3vw, 36px); font-weight: 800; left: 24px; position: absolute; text-shadow: 0 3px 14px rgba(0,0,0,.25); top: 20px; z-index: 2; }
.level-card__action { bottom: 18px; color: #fff; font-size: 14px; font-weight: 600; position: absolute; right: 22px; z-index: 2; }

.home-slider-section { background: #eef0f3; }
.mektebim-home-slider { max-width: 100%; overflow: hidden; }
.mektebim-home-slider .swiper-slide img { display: block; height: auto; min-height: 250px; object-fit: cover; width: 100%; }
.mektebim-home-slider a:hover img { transform: none; }
.mektebim-home-slider .swiper-button-next,
.mektebim-home-slider .swiper-button-prev { background: rgba(255,255,255,.92); border-radius: 50%; color: var(--mek-red); height: 52px; width: 52px; }
.mektebim-home-slider .swiper-button-next::after,
.mektebim-home-slider .swiper-button-prev::after { font-size: 19px; font-weight: 800; }
.mektebim-home-slider .swiper-pagination-bullet-active { background: var(--mek-red); }

.section-kicker { color: var(--mek-red); display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .16em; margin-bottom: 8px; text-transform: uppercase; }
.home-video-section h1,
.home-campus-callout h2 { color: var(--mek-blue); font-size: clamp(32px, 4vw, 54px); font-weight: 800; line-height: 1.03; }
.home-video-section p,
.home-campus-callout p { color: #667085; font-size: 18px; line-height: 1.65; }
.video-frame { background: #0b1422; border-radius: 4px; box-shadow: 0 22px 48px rgba(22,37,60,.18); overflow: hidden; }
.mektebim-button { align-items: center; background: var(--mek-red); border: 1px solid var(--mek-red); color: #fff; display: inline-flex; font-weight: 600; gap: 10px; padding: 13px 20px; transition: .2s; }
.mektebim-button:hover { background: var(--mek-red-dark); color: #fff; transform: translateY(-1px); }
.home-campus-callout { background: linear-gradient(120deg, var(--mek-blue), #264e7c); color: #fff; }
.home-campus-callout h2,
.home-campus-callout p,
.home-campus-callout .section-kicker { color: #fff; }
.mektebim-button--light { background: #fff; border-color: #fff; color: var(--mek-blue); }
.mektebim-button--light:hover { background: #f5f5f5; color: var(--mek-blue); }

.mektebim-page-cover { background: linear-gradient(120deg, var(--mek-blue), #315e8d); color: #fff; height: auto; margin: 0 0 30px; min-height: 250px; overflow: hidden; padding: 64px 0; position: relative; text-align: center; }
.mektebim-page-cover > .container { overflow: visible; position: relative; z-index: 2; }
.mektebim-page-cover h1 { color: #fff; display: block; font-size: clamp(34px, 5vw, 58px); font-weight: 800; margin: 0 0 14px; position: relative; z-index: 2; }
.mektebim-page-cover nav { color: #fff; position: relative; z-index: 2; }
.mektebim-page-cover nav,
.campus-hero nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; opacity: .82; }
.campus-filter { background: #fff; border: 1px solid var(--mek-border); box-shadow: 0 16px 40px rgba(22,36,54,.09); display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr auto; margin: -80px 0 32px; padding: 24px; position: relative; z-index: 2; }
.campus-filter label { display: block; margin: 0; }
.campus-filter label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.campus-filter input,
.campus-filter select { border: 1px solid #d5d9df; height: 48px; padding: 0 13px; width: 100%; }
.campus-filter button { align-self: end; background: var(--mek-red); border: 0; color: #fff; height: 48px; padding: 0 28px; }
.campus-count { margin-bottom: 22px; text-align: center; }
.campus-grid { display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campus-card { background: #fff; border: 1px solid var(--mek-border); box-shadow: 0 12px 32px rgba(20,35,55,.07); display: grid; grid-template-columns: 42% 58%; overflow: hidden; }
.campus-card__image { min-height: 290px; overflow: hidden; }
.campus-card__image img { height: 100%; object-fit: cover; transition: transform .35s; width: 100%; }
.campus-card:hover .campus-card__image img { transform: scale(1.04); }
.campus-card__body { display: flex; flex-direction: column; padding: 24px; }
.campus-card h2 { color: var(--mek-blue); font-size: 22px; font-weight: 750; }
.campus-card p,
.campus-contact { color: #667085; display: flex; font-size: 14px; gap: 9px; line-height: 1.45; }
.campus-card__levels { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.campus-card__levels span { background: #f1f3f5; border-radius: 15px; font-size: 11px; padding: 4px 8px; }
.campus-card__actions { display: flex; gap: 12px; margin-top: auto; padding-top: 16px; }
.campus-card__actions a { color: var(--mek-red); font-size: 13px; font-weight: 650; }
.campus-card__actions a + a { color: var(--mek-blue); }
.empty-state { background: var(--mek-soft); margin: 24px 0; padding: 44px; text-align: center; }
.empty-state i { color: var(--mek-red); font-size: 38px; }
.campus-pagination { display: flex; gap: 7px; justify-content: center; margin-top: 36px; }
.campus-pagination a { align-items: center; border: 1px solid var(--mek-border); display: flex; height: 40px; justify-content: center; width: 40px; }
.campus-pagination a.active { background: var(--mek-red); border-color: var(--mek-red); color: #fff; }

.campus-hero { background-image: linear-gradient(90deg, rgba(19,37,61,.9), rgba(19,37,61,.28)), var(--campus-cover); background-position: center; background-size: cover; color: #fff; min-height: 440px; position: relative; }
.campus-hero .container { align-items: center; display: flex; min-height: 440px; }
.campus-hero__content { max-width: 760px; }
.campus-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; line-height: 1.02; }
.campus-hero nav { justify-content: flex-start; }
.campus-hero__logo { background: rgba(255,255,255,.94); max-height: 86px; max-width: 210px; padding: 10px; }
.campus-detail .wysiwyg-content { font-size: 17px; line-height: 1.75; }
.campus-detail__levels { border-top: 1px solid var(--mek-border); margin-top: 30px; padding-top: 24px; }
.campus-detail__levels h2 { color: var(--mek-blue); font-weight: 750; }
.campus-detail__levels > div { display: flex; flex-wrap: wrap; gap: 8px; }
.campus-detail__levels a,
.campus-detail__levels span { background: var(--mek-soft); border-radius: 20px; padding: 8px 14px; }
.campus-contact-card { border-top: 5px solid var(--mek-red); box-shadow: 0 14px 38px rgba(20,35,55,.11); padding: 28px; position: sticky; top: 24px; }
.campus-contact-card h2 { color: var(--mek-blue); font-weight: 750; }
.campus-contact-card p { align-items: flex-start; display: flex; gap: 12px; }
.campus-contact-card p i { color: var(--mek-red); margin-top: 4px; }

.mektebim-footer { color: #fff; padding: 0 !important; }
.mektebim-footer .top-footer-row { background: #f5f5f5; color: var(--mek-blue); }
.footer-logo-wrapper { flex: 0 0 auto; margin-right: 30px; }
.footer-logo { max-height: 82px; width: auto; }
.footer-menu { align-items: center; flex-wrap: wrap; gap: 5px 20px; }
.footer-menu a { font-size: 14px; font-weight: 550; }
.mektebim-footer .top-footer-row .footer-menu li a { border: 0; color: var(--mek-blue) !important; font-size: 14px; margin: 0; padding: 0; }
.social-media-links { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.social-media-link { color: var(--mek-red); font-size: 19px; }
.social-media-link.phone-number { font-size: 16px; font-weight: 650; }
.bottom-footer-row { background: #192d49; }
.bottom-footer-row .footer-menu a { color: #fff; font-size: 12px; opacity: .8; }
.mektebim-footer .bottom-footer-row .footer-menu li a { color: #fff !important; }

.wysiwyg-content img { height: auto; max-width: 100%; }
.wysiwyg-content table { max-width: 100%; }

@media (max-width: 1199px) {
    .mektebim-header ul.main-menu > li > a { font-size: 14px; padding: 0 10px; }
    .campus-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .header-bottom-row, .logo { min-height: 82px; }
    .mektebim-header .logo img { max-height: 61px; }
    .mobile-menu-opener-wrapper { display: flex !important; min-height: 82px; position: relative; z-index: 2; }
    .mobile-menu-opener-wrapper .menu-opener { display: block !important; flex: 0 0 50px; }
    .level-card { height: 230px; }
    .mektebim-home-slider .swiper-slide img { min-height: 210px; }
    .mektebim-home-slider .swiper-button-next,
    .mektebim-home-slider .swiper-button-prev { display: none; }
    .canvas-menu { padding: 0; width: 350px; }
    .campus-filter { grid-template-columns: 1fr; margin-top: -45px; }
    .campus-card { display: block; }
    .campus-card__image { display: block; min-height: 220px; }
    .campus-hero, .campus-hero .container { min-height: 360px; }
    .footer-logo-wrapper { margin: 0 0 20px; }
    .footer-menu, .social-media-links { justify-content: center; }
    .bottom-footer-row .footer-menu { margin-bottom: 18px; }
}