/*
 * SmartEdu site styles.
 *
 * Extracted from an inline <style> block in components/layouts/app.blade.php so the
 * Content-Security-Policy can use style-src 'self' without 'unsafe-inline'. Keeping it
 * as a real file also lets the browser cache it across page loads.
 */

:root {
    --se-primary: #0f172a;
    --se-secondary: #475569;
    --se-accent: #2563eb;
    --se-bg-light: #f8fafc;
    --se-border: #e2e8f0;

    /* Başlığın normal və yığcam hündürlüyü. Shell (yer tutan blok) da
       --se-nav-h işlədir, ona görə ikisi heç vaxt bir-birindən ayrılmır.
       Qeyd: bu dəyişənlərin ÖZÜ vəziyyətdən asılı olaraq dəyişmir — .se-nav
       biri, .se-nav--scrolled digərini işlədir. Beləliklə min-height iki sabit
       uzunluq arasında keçid edir və custom property-lərin diskret animasiya
       problemi yaranmır. */
    --se-nav-h: 72px;
    --se-nav-h-sm: 58px;
}

body { font-family: 'Inter', system-ui, sans-serif; color: #1e293b; }
h1, h2, h3, h4, h5, h6 { color: var(--se-primary); font-weight: 600; }
.navbar-brand { color: var(--se-primary) !important; }
.btn-dark { background-color: var(--se-primary); border-color: var(--se-primary); }

.aca-card {
    border: 1px solid var(--se-border);
    border-radius: 6px;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.aca-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,.08); }

.aca-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--se-border);
    color: var(--se-secondary);
    font-size: 1rem;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.aca-social-link:hover {
    color: #fff;
    background-color: var(--se-accent);
    border-color: var(--se-accent);
}

.aca-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------- site header
 *
 * Hero ilə eyni dil: buzlu şüşə fon, aksent altxətt, pill düymələr.
 * .se-nav--scrolled sinfini js/header.js qoyur (səhifə yuxarıdan aşağı
 * sürüşəndə); zolağın yığcamlaşması və kölgəsi tamamilə buradakı keçidlərdir.
 *
 * Klassik variant (.navbar bg-white border-bottom) üçün əlavə qayda lazım
 * deyildi — o, sırf Bootstrap siniflərindən ibarətdir, ona görə
 * <x-layout.header-classic /> heç nə silmədən işləyir.
 */

/* Başlıq axından çıxarılıb (fixed) və altında sabit hündürlüklü shell durur.
 *
 * SƏBƏB: sticky variantda zolağın hündürlüyü dəyişəndə altdakı bütün məzmun
 * sürüşürdü. Brauzer bunu scroll anchoring ilə kompensasiya edirdi (scroll
 * mövqeyini özü dəyişirdi), üstəlik backdrop-filter qatı yenidən rənglənərkən
 * bir kadr geridə qalırdı. İkisi birlikdə "zolaq iki dəfə ölçü dəyişdirir"
 * effektini yaradırdı. Fixed olduqda hündürlük dəyişikliyi sənəd axınına
 * ümumiyyətlə toxunmur, ona görə nə kompensasiya, nə də geriləmə baş verir.
 *
 * Animasiya olunan TƏK xassə min-height-dir; padding sabit sıfırdır və məzmun
 * .navbar-ın align-items: center-i ilə şaquli mərkəzlənir. */
.se-nav-shell { height: var(--se-nav-h); }

.se-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    min-height: var(--se-nav-h);
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid transparent;
    /* Əyri qəsdən cubic-bezier(.22, 1, .36, 1) (easeOutQuint) DEYİL. O əyri çox
       "quyruqludur": məsafənin böyük hissəsi ilk anlarda gedir, son bir neçə
       piksel isə uzun müddət sürünür. Zolağın kənarında bu gözə dəymir, ancaq
       .container şaquli mərkəzləndiyi üçün onun yerdəyişməsi zolağın yarısı
       qədərdir — həmin quyruq orada aydın görünür və məzmun zolaq dayandıqdan
       sonra da mərkəzə doğru sürünməyə davam edirmiş kimi görünür.
       Aşağıdakı standart əyrinin quyruğu yoxdur, hər şey eyni anda oturur. */
    transition: min-height .24s cubic-bezier(.4, 0, .2, 1),
                border-color .24s cubic-bezier(.4, 0, .2, 1),
                box-shadow .24s cubic-bezier(.4, 0, .2, 1);
}

/* DİQQƏT: buzlu şüşə fonu qəsdən psevdo-elementdədir, .se-nav-ın ÖZÜNDƏ deyil.
   backdrop-filter təyin edilmiş element `position: fixed` övladları üçün
   containing block-a çevrilir (eynilə transform kimi). Bootstrap offcanvas-ın
   backdrop-unu panelin valideyninə (yəni navbar-ın içinə) əlavə edir, ona görə
   filtr navbar-ın üzərində qalsaydı, həm panel, həm backdrop viewport-a yox,
   navbar qutusuna nisbətən yerləşər və mobil menyu xarab açılardı. */
.se-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transition: background-color .3s ease;
}
/* Hündürlük fərqi qəsdən kiçik saxlanılır (~10px): böyük sıçrayış sticky
   zolaqda gözə çarpan silkələnmə kimi görünür. Sinfin özü js/header.js-də
   histerezislə qoyulur ki, hədd ətrafında yanıb-sönmə olmasın. */
.se-nav--scrolled {
    min-height: var(--se-nav-h-sm);
    border-bottom-color: rgba(15, 23, 42, .08);
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .28);
}
.se-nav--scrolled::before { background: rgba(255, 255, 255, .9); }

.se-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    transition: opacity .25s ease;
}
.se-nav-brand:hover { opacity: .78; }
.se-nav-brand-text { font-size: 1.12rem; }
.se-nav-brand > :first-child { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.se-nav-brand:hover > :first-child { transform: rotate(-6deg) scale(1.06); }

/* Seçicilər qəsdən .se-nav .navbar-nav ilə başlayır — Bootstrap-ın
   .navbar-nav .nav-link.active qaydasını üstələmək üçün spesifiklik lazımdır. */
.se-nav .navbar-nav .se-nav-link {
    position: relative;
    padding: .5rem .55rem;
    font-size: .84rem;
    font-weight: 500;
    /* 8 link + düymə bir sətirdə qalmalıdır — sətir keçidi zolağı ikiqat edir. */
    white-space: nowrap;
    text-align: center;
    color: var(--se-secondary);
    transition: color .25s ease;
}
/* Eni qalın variantın eninə sabitləyir: data-label-dakı eyni mətn 600 qalınlıqla,
   hündürlüyü 0 və görünməz şəkildə yerləşir. Link inline axında (və flex sətrində)
   ən geniş sətrin enini alır — bu da qalın mətnin enidir. Nəticədə .active-in
   font-weight: 600-ü eni dəyişmir, qonşu linklər yerindən oynamır.
   visibility: hidden mətni ekran oxuyucularından da gizlədir — link adı ikiləşmir. */
.se-nav .navbar-nav .se-nav-link::before {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
}
.se-nav .navbar-nav .se-nav-link::after {
    content: '';
    position: absolute;
    left: .55rem;
    right: .55rem;
    bottom: .18rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--se-accent), #60a5fa);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.se-nav .navbar-nav .se-nav-link:hover { color: var(--se-primary); }
.se-nav .navbar-nav .se-nav-link:hover::after { transform: scaleX(1); }
.se-nav .navbar-nav .se-nav-link.active { color: var(--se-accent); font-weight: 600; }
.se-nav .navbar-nav .se-nav-link.active::after { transform: scaleX(1); }
.se-nav .navbar-nav .se-nav-link:focus-visible {
    outline: 2px solid var(--se-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

.se-nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.se-nav-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease,
                background-color .25s ease, border-color .25s ease, color .25s ease;
}
.se-nav-btn:hover { transform: translateY(-2px); }
.se-nav-btn:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }
.se-nav-btn--primary {
    background: var(--se-accent);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(37, 99, 235, .7);
}
.se-nav-btn--primary:hover {
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 14px 28px -10px rgba(37, 99, 235, .8);
}
.se-nav-btn-arrow { transition: transform .25s ease; }
.se-nav-btn:hover .se-nav-btn-arrow { transform: translateX(3px); }
.se-nav-btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -140%;
    width: 55%;
    height: 100%;
    transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
}
.se-nav-btn--primary:hover::after { animation: seNavShine .8s ease forwards; }
@keyframes seNavShine { to { left: 170%; } }

/* Hamburger → X. Bootstrap collapse açıq olanda düymənin aria-expanded
   dəyərini "true" edir, ona görə əlavə JS lazım deyil. */
/* DİQQƏT: burada `display` təyin edilmir. Bootstrap ttogglerı xl-dən yuxarıda
   `.navbar-expand-xl .navbar-toggler { display: none }` ilə gizlədir və o qayda
   bununla eyni spesifiklikdədir — burada display versək, app.css sonra
   yükləndiyi üçün gizlətməni üstələyər və düymə masaüstündə də görünər.
   Ona görə `display: inline-flex` yalnız aşağıdakı mobil media blokundadır. */
.se-nav-toggler.navbar-toggler {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    transition: background-color .25s ease;
}
.se-nav-toggler.navbar-toggler:hover { background: rgba(15, 23, 42, .06); }
.se-nav-toggler.navbar-toggler:focus { box-shadow: none; }
.se-nav-toggler.navbar-toggler:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 2px; }
.se-nav-toggler-box { position: relative; width: 22px; height: 16px; }
.se-nav-toggler-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--se-primary);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, width .32s ease;
}
.se-nav-toggler-bar:nth-child(1) { top: 0; }
.se-nav-toggler-bar:nth-child(2) { top: 7px; width: 70%; }
.se-nav-toggler-bar:nth-child(3) { top: 14px; }
.se-nav-toggler[aria-expanded="true"] .se-nav-toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.se-nav-toggler[aria-expanded="true"] .se-nav-toggler-bar:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.se-nav-toggler[aria-expanded="true"] .se-nav-toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Offcanvas fonu: sadə qara örtük əvəzinə yüngül bulanıqlıq — panel səhifədən
   qopub önə çıxır. Saytda başqa offcanvas yoxdur, ona görə qlobal seçici təhlükəsizdir. */
.offcanvas-backdrop.show {
    background-color: rgba(8, 13, 28, .55);
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 1199.98px) {
    .se-nav-toggler.navbar-toggler { display: inline-flex; }

    .se-nav-panel.offcanvas {
        width: min(86vw, 360px);
        overflow: hidden;
        border: 0;
        border-radius: 22px 0 0 22px;
        background: #fff;
        box-shadow: -24px 0 60px -24px rgba(15, 23, 42, .45);
    }
    /* Yuxarıdan aşağı sönən incə aksent — düz ağ paneli canlandırır. */
    .se-nav-panel.offcanvas::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 180px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(37, 99, 235, 0));
    }

    .se-nav-panel-head {
        position: relative;
        align-items: center;
        padding: 1.15rem 1.25rem .9rem;
        border-bottom: 1px solid rgba(15, 23, 42, .07);
    }
    .se-nav-panel-title {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--se-primary);
    }
    .se-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Bootstrap .offcanvas-header-də space-between işlətmir — bağlama
           düyməsini .btn-close-a verdiyi margin-left: auto ilə sağa itələyir.
           Bu düymə .btn-close olmadığı üçün həmin marjı burada verilir. */
        margin-left: auto;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(15, 23, 42, .12);
        border-radius: 50%;
        background: #fff;
        color: var(--se-primary);
        transition: background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
    }
    .se-nav-close:hover {
        background: rgba(15, 23, 42, .05);
        border-color: rgba(15, 23, 42, .28);
        transform: rotate(90deg);
    }
    .se-nav-close:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 2px; }

    .se-nav-panel-body { position: relative; padding: .9rem 1rem 1.3rem; }

    /* Sütun düzülüşündə sətirlər bir-birinə yapışır — aralıq verilir.
       Masaüstündə siyahı sətir düzülüşündədir və aralığı ayrıca tənzimlənib,
       ona görə bu yalnız mobil blokdadır. */
    .se-nav .navbar-nav.se-nav-list { gap: .28rem; }

    /* Panel siyahı görünüşündədir — barmaq üçün böyük hədəf, seçilmiş sətir isə
       yumşaq fonla işarələnir. */
    .se-nav .navbar-nav .se-nav-link {
        padding: .78rem .85rem;
        font-size: .95rem;
        text-align: start;
        border-radius: 12px;
        transition: color .25s ease, background-color .25s ease;
    }
    .se-nav .navbar-nav .se-nav-link:hover { background: rgba(15, 23, 42, .04); }
    .se-nav .navbar-nav .se-nav-link.active { background: rgba(37, 99, 235, .07); }
    /* Altxətt əvəzinə solda şaquli aksent zolağı — siyahıya daha uyğundur. */
    .se-nav .navbar-nav .se-nav-link::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        width: 3px;
        height: 18px;
        margin-top: -9px;
        border-radius: 0 3px 3px 0;
        transform: scaleY(0);
    }
    .se-nav .navbar-nav .se-nav-link:hover::after,
    .se-nav .navbar-nav .se-nav-link.active::after { transform: scaleY(1); }

    .se-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(15, 23, 42, .07);
    }
    .se-nav-btn { justify-content: center; padding: .78rem 1.15rem; font-size: .92rem; }

    /* Sətirlər panel sürüşərkən pillə-pillə üzə çıxır.
     *
     * Seçicidə .showing DƏ olmalıdır: Bootstrap panelə əvvəlcə .showing verir,
     * sürüşmə bitəndən sonra onu .show ilə əvəz edir. Yalnız .show-a bağlasaq,
     * sətirlər əvvəl normal görünür, sonra animasiya gec başlayır və
     * `both` doldurma rejimi başlanğıc vəziyyəti (opacity: 0) tətbiq edir —
     * yazılar bir anlıq itib yenidən görünür. */
    .se-nav-panel.showing .nav-item,
    .se-nav-panel.showing .se-nav-actions,
    .se-nav-panel.show .nav-item,
    .se-nav-panel.show .se-nav-actions { animation: seNavRise .45s cubic-bezier(.22, 1, .36, 1) both; }
    .se-nav-panel.showing .nav-item:nth-child(1),
    .se-nav-panel.show .nav-item:nth-child(1) { animation-delay: .1s; }
    .se-nav-panel.showing .nav-item:nth-child(2),
    .se-nav-panel.show .nav-item:nth-child(2) { animation-delay: .14s; }
    .se-nav-panel.showing .nav-item:nth-child(3),
    .se-nav-panel.show .nav-item:nth-child(3) { animation-delay: .18s; }
    .se-nav-panel.showing .nav-item:nth-child(4),
    .se-nav-panel.show .nav-item:nth-child(4) { animation-delay: .22s; }
    .se-nav-panel.showing .nav-item:nth-child(5),
    .se-nav-panel.show .nav-item:nth-child(5) { animation-delay: .26s; }
    .se-nav-panel.showing .nav-item:nth-child(6),
    .se-nav-panel.show .nav-item:nth-child(6) { animation-delay: .3s; }
    .se-nav-panel.showing .nav-item:nth-child(7),
    .se-nav-panel.show .nav-item:nth-child(7) { animation-delay: .34s; }
    .se-nav-panel.showing .nav-item:nth-child(8),
    .se-nav-panel.show .nav-item:nth-child(8) { animation-delay: .38s; }
    .se-nav-panel.showing .se-nav-actions,
    .se-nav-panel.show .se-nav-actions { animation-delay: .42s; }
}
@keyframes seNavRise {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .se-nav,
    .se-nav-brand > :first-child,
    .se-nav .navbar-nav .se-nav-link::after,
    .se-nav-btn,
    .se-nav-btn-arrow,
    .se-nav-close,
    .se-nav-toggler-bar { transition: none; }
    .se-nav-close:hover { transform: none; }
    .se-nav-btn--primary:hover::after { animation: none; }
    .se-nav-panel.show .nav-item,
    .se-nav-panel.show .se-nav-actions { animation: none; }
}

/* Klassik hero (components/home/hero-classic.blade.php) — geri qaytarmaq mümkün
   olsun deyə saxlanılır. Aktiv dizayn aşağıdakı .se-hero-* bölməsidir. */
.hero-slide-img { width: 100%; height: 60vh; min-height: 420px; object-fit: cover; }
.hero-slide-overlay { position: absolute; inset: 0; }
.hero-slide-content {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 700px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------- hero (home)
 *
 * Kinematik tam enli hero. Bütün hərəkət sırf CSS-dir və Bootstrap carousel-in
 * aktiv slayda qoyduğu .active sinfindən asılıdır — əlavə JS yoxdur.
 *
 * Slaydın şəkli yavaş "Ken Burns" zoomu ilə canlanır, mətn elementləri isə
 * pillə-pillə (eyebrow → başlıq → alt mətn → düymələr) üzə çıxır. Aşağıdakı
 * indikator zolağı eyni zamanda avtoplay taymerini göstərir və kursor üstünə
 * gələndə Bootstrap-ın özü kimi dayanır.
 */

.se-hero { position: relative; background: #0b1120; }
.se-hero-carousel,
.se-hero-inner,
.se-hero-item { height: clamp(480px, 82vh, 820px); }
.se-hero-item { position: relative; overflow: hidden; }

.se-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    will-change: transform;
}
.se-hero-item.active .se-hero-img { animation: seHeroKen 13s ease-out both; }
@keyframes seHeroKen {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.2%, -1.8%, 0); }
}

/* İki qatlı qradiyent: soldan sağa oxunaqlılıq üçün, aşağıdan yuxarı isə
   indikator zolağının altını qaraldıb kontrastı saxlamaq üçün. */
.se-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(8, 13, 28, .93) 0%, rgba(8, 13, 28, .74) 36%, rgba(8, 13, 28, .26) 66%, rgba(8, 13, 28, .5) 100%),
        linear-gradient(to top, rgba(8, 13, 28, .78) 0%, rgba(8, 13, 28, 0) 46%);
}
/* Çox incə "film dənəsi" — düz qradiyentin plastik görünməsinin qarşısını alır. */
.se-hero-scrim::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px);
}

.se-hero-glow {
    position: absolute;
    top: -14%;
    right: -8%;
    width: 46vmax;
    height: 46vmax;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .42) 0%, rgba(37, 99, 235, .14) 42%, rgba(37, 99, 235, 0) 70%);
    animation: seHeroFloat 16s ease-in-out infinite alternate;
}
@keyframes seHeroFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-5%, 6%, 0) scale(1.14); }
}

.se-hero-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}
.se-hero-content {
    max-width: 46rem;
    padding-bottom: 4.5rem;
    color: #fff;
}

.se-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .95rem .42rem .72rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .93);
}
.se-hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #60a5fa;
    animation: seHeroPulse 2.6s ease-out infinite;
}
@keyframes seHeroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(96, 165, 250, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(96, 165, 250, 0); }
    100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
}

.se-hero-title {
    margin: 1.15rem 0 0;
    color: #fff;
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -.025em;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .38);
}
.se-hero-subtitle {
    margin: 1.1rem 0 0;
    max-width: 36rem;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .87);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}

.se-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}
.se-hero-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease,
                background-color .25s ease, border-color .25s ease, color .25s ease;
}
.se-hero-btn:hover { transform: translateY(-2px); }
.se-hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.se-hero-btn--primary {
    background: var(--se-accent);
    color: #fff;
    box-shadow: 0 10px 30px -8px rgba(37, 99, 235, .75);
}
.se-hero-btn--primary:hover {
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 16px 38px -10px rgba(37, 99, 235, .85);
}
.se-hero-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}
.se-hero-btn--ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
.se-hero-btn-arrow { transition: transform .25s ease; }
.se-hero-btn:hover .se-hero-btn-arrow { transform: translateX(4px); }

/* Əsas düymənin üzərindən keçən işıq zolağı. */
.se-hero-btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
}
.se-hero-btn--primary:hover::after { animation: seHeroShine .85s ease forwards; }
@keyframes seHeroShine { to { left: 160%; } }

/* Mətnin pilləli görünməsi — hər slayd aktiv olanda yenidən işə düşür. */
.se-hero-eyebrow,
.se-hero-title,
.se-hero-subtitle,
.se-hero-actions { opacity: 0; }
.se-hero-item.active .se-hero-eyebrow,
.se-hero--plain .se-hero-eyebrow,
.se-hero--page .se-hero-eyebrow   { animation: seHeroRise .75s .10s cubic-bezier(.22, 1, .36, 1) both; }
.se-hero-item.active .se-hero-title,
.se-hero--plain .se-hero-title,
.se-hero--page .se-hero-title     { animation: seHeroRise .85s .22s cubic-bezier(.22, 1, .36, 1) both; }
.se-hero-item.active .se-hero-subtitle,
.se-hero--plain .se-hero-subtitle,
.se-hero--page .se-hero-subtitle  { animation: seHeroRise .85s .34s cubic-bezier(.22, 1, .36, 1) both; }
.se-hero-item.active .se-hero-actions,
.se-hero--plain .se-hero-actions,
.se-hero--page .se-hero-actions   { animation: seHeroRise .85s .46s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes seHeroRise {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

.se-hero-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding-bottom: 1.6rem;
}
.se-hero-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

/* Bootstrap-ın öz indikator qaydalarını üstələmək üçün seçici qəsdən
   .se-hero-dots.carousel-indicators formasındadır (daha yüksək spesifiklik). */
.se-hero-dots.carousel-indicators {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .7rem;
    margin: 0;
}
.se-hero-dots.carousel-indicators .se-hero-dot {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 4px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    opacity: 1;
    overflow: hidden;
    text-indent: 0;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.se-hero-dots.carousel-indicators .se-hero-dot:hover { background: rgba(255, 255, 255, .5); }
.se-hero-dots.carousel-indicators .se-hero-dot.active { width: 82px; }
.se-hero-dots.carousel-indicators .se-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.se-hero-dot-fill {
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 999px;
    background: #fff;
}
.se-hero-dot.active .se-hero-dot-fill { animation: seHeroProgress 6000ms linear both; }
/* Bootstrap avtoplayı hover-də dayandırır — zolaq da onunla sinxron dayanır. */
.se-hero-carousel:hover .se-hero-dot.active .se-hero-dot-fill { animation-play-state: paused; }
@keyframes seHeroProgress { from { width: 0; } to { width: 100%; } }

.se-hero-nav { display: flex; gap: .6rem; }
.se-hero-navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.se-hero-navbtn:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .6);
    transform: translateY(-2px);
}
.se-hero-navbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Slayd yoxdursa göstərilən variant: şəkil əvəzinə qradiyent fon. */
.se-hero--plain {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(440px, 66vh, 640px);
    background:
        radial-gradient(1200px 620px at 14% 18%, #1e3a8a 0%, rgba(30, 58, 138, 0) 62%),
        radial-gradient(900px 520px at 86% 82%, #0f766e 0%, rgba(15, 118, 110, 0) 58%),
        #0b1120;
}
.se-hero--plain .se-hero-content { padding-bottom: 0; }

@media (max-width: 767.98px) {
    .se-hero-content { padding-bottom: 5.25rem; }
    .se-hero-nav { display: none; }
    .se-hero-dots.carousel-indicators .se-hero-dot { width: 32px; }
    .se-hero-dots.carousel-indicators .se-hero-dot.active { width: 58px; }
    .se-hero-btn { padding: .75rem 1.3rem; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .se-hero-item.active .se-hero-img,
    .se-hero-item.active .se-hero-eyebrow,
    .se-hero-item.active .se-hero-title,
    .se-hero-item.active .se-hero-subtitle,
    .se-hero-item.active .se-hero-actions,
    .se-hero--plain .se-hero-eyebrow,
    .se-hero--plain .se-hero-title,
    .se-hero--plain .se-hero-subtitle,
    .se-hero--plain .se-hero-actions,
    .se-hero--page .se-hero-eyebrow,
    .se-hero--page .se-hero-title,
    .se-hero--page .se-hero-subtitle,
    .se-hero--page .se-hero-actions,
    .se-hero-btn--primary:hover::after,
    .se-hero-eyebrow-dot,
    .se-hero-glow { animation: none; }
    .se-hero-eyebrow,
    .se-hero-title,
    .se-hero-subtitle,
    .se-hero-actions { opacity: 1; }
    .se-hero-img { transform: none; }
    .se-hero-dot.active .se-hero-dot-fill { width: 100%; animation: none; }
}

/* --------------------------------------------------- daxili səhifə başlığı
 *
 * Hero-nun alçaq variantı: karusel yoxdur, fon qradiyentdir, amma məzmun
 * sinifləri (.se-hero-eyebrow / -title / -subtitle) və onların pillələnmiş
 * açılış animasiyası eynilə qalır — vahid dizayn dili üçün.
 */
.se-hero--page {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(280px, 36vh, 380px);
    padding: 2.5rem 0;
    background:
        radial-gradient(900px 460px at 12% 18%, #1e3a8a 0%, rgba(30, 58, 138, 0) 62%),
        radial-gradient(700px 400px at 88% 88%, #0f766e 0%, rgba(15, 118, 110, 0) 58%),
        #0b1120;
}
.se-hero--page .se-hero-content { max-width: 52rem; padding-bottom: 0; }
.se-hero--page .se-hero-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: .95rem; }
.se-hero--page .se-hero-subtitle { max-width: 40rem; }

/* Paylaşılan <x-layout.breadcrumb /> açıq fon üçündür və əlavə sinif qəbul
   etmir, ona görə tünd zolaqda işlənən yerli variant. */
.se-hero-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    font-size: .82rem;
}
.se-hero-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .92);
}
.se-hero-crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, .35); }
.se-hero-crumbs a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s ease;
}
.se-hero-crumbs a:hover { color: #fff; }

/* --------------------------------------------------- kateqoriyalar */

.se-cat-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem;
    animation: seHeroRise .85s .46s cubic-bezier(.22, 1, .36, 1) both;
}

.se-cat-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.se-cat-search-icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    margin-top: -8.5px;
    pointer-events: none;
    color: rgba(255, 255, 255, .65);
}
.se-cat-search-input {
    width: 100%;
    padding: .72rem 1rem .72rem 2.6rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .92rem;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.se-cat-search-input::placeholder { color: rgba(255, 255, 255, .6); }
.se-cat-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .28);
}

.se-cat-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.se-cat-stat {
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 600;
}

/* --i kartın sırasıdır (blade-də verilir, 14-də kəsilir ki, son kartlar
   həddindən artıq gec görünməsin). */
.se-cat-col {
    animation: seCatRise .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes seCatRise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
}

.se-cat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.se-cat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .3);
}
.se-cat-card:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

.se-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(37, 99, 235, .09);
    color: var(--se-accent);
    font-size: 1.35rem;
    transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.se-cat-card:hover .se-cat-icon {
    background: var(--se-accent);
    color: #fff;
    transform: scale(1.06);
}

.se-cat-title {
    margin: .9rem 0 .4rem;
    color: var(--se-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.se-cat-desc {
    margin: 0;
    color: var(--se-secondary);
    font-size: .855rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.se-cat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    /* Kartların hündürlüyü fərqli olsa da, alt sətir həmişə dibə yapışır. */
    margin-top: auto;
    padding-top: 1.1rem;
}
.se-cat-count {
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    color: var(--se-secondary);
    font-size: .78rem;
    font-weight: 600;
    transition: background-color .3s ease, color .3s ease;
}
.se-cat-card:hover .se-cat-count { background: rgba(37, 99, 235, .1); color: var(--se-accent); }
.se-cat-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--se-border);
    border-radius: 50%;
    color: var(--se-secondary);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.se-cat-card:hover .se-cat-arrow {
    background: var(--se-accent);
    border-color: var(--se-accent);
    color: #fff;
    transform: translateX(3px);
}

.se-cat-empty { padding: 3.5rem 1rem; text-align: center; color: var(--se-secondary); }
.se-cat-empty i { font-size: 2rem; opacity: .45; }
.se-cat-empty p { margin: .85rem 0 1.2rem; }
.se-cat-reset {
    padding: .6rem 1.3rem;
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 999px;
    background: #fff;
    color: var(--se-primary);
    font-size: .88rem;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.se-cat-reset:hover {
    background: rgba(15, 23, 42, .045);
    border-color: rgba(15, 23, 42, .4);
    transform: translateY(-2px);
}
.se-cat-reset:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .se-cat-tools,
    .se-cat-col { animation: none; }
    .se-cat-card,
    .se-cat-icon,
    .se-cat-count,
    .se-cat-arrow,
    .se-cat-reset { transition: none; }
    .se-cat-card:hover,
    .se-cat-reset:hover { transform: none; }
    .se-cat-card:hover .se-cat-icon { transform: none; }
    .se-cat-card:hover .se-cat-arrow { transform: none; }
}

/* --------------------------------------------------- siyahı alətləri
 *
 * Açıq fonda işlənən axtarış/sayğac/boş-nəticə blokları. Tünd hero zolağındakı
 * variantı yuxarıdakı .se-cat-tools / .se-cat-search dəstidir.
 */
.se-list-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.se-list-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.se-list-search-icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    margin-top: -8.5px;
    pointer-events: none;
    color: var(--se-secondary);
}
.se-list-search-input {
    width: 100%;
    padding: .7rem 1rem .7rem 2.6rem;
    border: 1px solid var(--se-border);
    border-radius: 999px;
    background: #fff;
    color: var(--se-primary);
    font-size: .92rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.se-list-search-input::placeholder { color: var(--se-secondary); opacity: .75; }
.se-list-search-input:focus {
    outline: none;
    border-color: var(--se-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.se-list-count { margin: 0; color: var(--se-secondary); font-size: .88rem; }
.se-list-count strong { color: var(--se-primary); }

.se-list-empty { padding: 3.5rem 1rem; text-align: center; color: var(--se-secondary); }
.se-list-empty i { font-size: 2rem; opacity: .45; }
.se-list-empty p { margin: .85rem 0 1.2rem; }
.se-list-reset {
    padding: .6rem 1.3rem;
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 999px;
    background: #fff;
    color: var(--se-primary);
    font-size: .88rem;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.se-list-reset:hover {
    background: rgba(15, 23, 42, .045);
    border-color: rgba(15, 23, 42, .4);
    transform: translateY(-2px);
}
.se-list-reset:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

/* Kateqoriya keçid çipləri (bloq). Əvvəlki inline onchange="window.location…"
   <select>-inin əvəzidir — bu variant heç bir JS tələb etmir. */
.se-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.9rem; }
.se-chip {
    padding: .45rem 1rem;
    border: 1px solid var(--se-border);
    border-radius: 999px;
    background: #fff;
    color: var(--se-secondary);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.se-chip:hover { border-color: rgba(15, 23, 42, .3); color: var(--se-primary); }
.se-chip.active { background: var(--se-primary); border-color: var(--se-primary); color: #fff; }
.se-chip:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

/* --------------------------------------------------- media kartlar
 *
 * Kurs, bloq və portfolio kartlarının ortaq dəsti. Kartın daxili elementləri
 * <span>-dır (bütöv kart <a> olduğu üçün blok elementlər yuvalana bilməz),
 * ona görə display dəyərləri burada açıq şəkildə verilir.
 */
.se-card-col {
    animation: seCatRise .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.se-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.se-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .3);
}
.se-card:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }
/* Portfolio kartı klikləmə hədəfi deyil — qalxma effekti olmasın ki, kliklənən
   kimi görünməsin; yalnız kölgə dəyişir. */
.se-card--static:hover { transform: none; }

.se-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--se-bg-light);
}
.se-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.se-card:hover .se-card-media img { transform: scale(1.06); }
.se-card-media-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: var(--se-border);
}
.se-card-badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    max-width: calc(100% - 1.4rem);
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(8, 13, 28, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.se-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.15rem;
}
.se-card-title {
    margin: 0 0 .45rem;
    color: var(--se-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.se-card-text {
    margin: 0;
    color: var(--se-secondary);
    font-size: .855rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.se-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--se-border);
}
.se-card-metas { display: flex; flex-wrap: wrap; gap: .65rem; min-width: 0; }
.se-card-meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--se-secondary);
    font-size: .76rem;
    white-space: nowrap;
}
.se-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--se-border);
    border-radius: 50%;
    color: var(--se-secondary);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.se-card:hover .se-card-arrow {
    background: var(--se-accent);
    border-color: var(--se-accent);
    color: #fff;
    transform: translateX(3px);
}
.se-card-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: var(--se-accent);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}
.se-card-link:hover { background: var(--se-accent); color: #fff; }

/* --------------------------------------------------- şəxs kartı (müəllimlər) */

.se-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.se-person:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .3);
}
.se-person:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

.se-person-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    margin-bottom: .95rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--se-bg-light);
    /* İkiqat halqa: ağ boşluq, sonra nazik kənar — hover-də aksentə keçir. */
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--se-border);
    color: var(--se-secondary);
    font-size: 2rem;
    transition: box-shadow .3s ease;
}
.se-person:hover .se-person-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(37, 99, 235, .5); }
.se-person-avatar img { width: 100%; height: 100%; object-fit: cover; }

.se-person-name { color: var(--se-primary); font-size: .98rem; font-weight: 600; line-height: 1.3; }
.se-person-role { margin-top: .3rem; color: var(--se-accent); font-size: .78rem; font-weight: 600; }
.se-person-bio {
    margin-top: .55rem;
    color: var(--se-secondary);
    font-size: .82rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.se-person-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--se-secondary);
    font-size: .8rem;
    font-weight: 600;
    transition: color .25s ease;
}
.se-person-cta svg { transition: transform .25s ease; }
.se-person:hover .se-person-cta { color: var(--se-accent); }
.se-person:hover .se-person-cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .se-card-col { animation: none; }
    .se-card,
    .se-card-media img,
    .se-card-arrow,
    .se-card-link,
    .se-person,
    .se-person-avatar,
    .se-person-cta,
    .se-person-cta svg,
    .se-chip,
    .se-list-search-input,
    .se-list-reset { transition: none; }
    .se-card:hover,
    .se-person:hover,
    .se-list-reset:hover { transform: none; }
    .se-card:hover .se-card-media img,
    .se-card:hover .se-card-arrow,
    .se-person:hover .se-person-cta svg { transform: none; }
}

/* --------------------------------------------------- bölmə tipoqrafiyası */

.se-section-title {
    margin: 0 0 .75rem;
    color: var(--se-primary);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
}
.se-section-lead { margin: 0; color: var(--se-secondary); font-size: 1.02rem; line-height: 1.7; }
/* Admin paneldən gələn çoxparaqraflı mətnlər — boş sətirlər paraqraf ayırıcısıdır. */
.se-prose { color: var(--se-secondary); font-size: .98rem; line-height: 1.8; white-space: pre-line; }

.se-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.se-stat { display: flex; flex-direction: column; gap: .3rem; }
.se-stat-value {
    color: var(--se-primary);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}
.se-stat-label { color: var(--se-secondary); font-size: .84rem; }

/* --------------------------------------------------- xüsusiyyət kartı
   (missiya/vizyon, dəyərlər, mətn blokları) */

.se-feature {
    height: 100%;
    padding: 1.6rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.se-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .3);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .28);
}
/* Geniş mətn bloku kart deyil, sadəcə çərçivədir — qalxmasın. */
.se-feature--wide { padding: 2rem; }
.se-feature--wide:hover { transform: none; }
.se-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: rgba(37, 99, 235, .09);
    color: var(--se-accent);
    font-size: 1.35rem;
    transition: background-color .3s ease, color .3s ease;
}
.se-feature:hover .se-feature-icon { background: var(--se-accent); color: #fff; }
.se-feature-title { margin: 0 0 .55rem; color: var(--se-primary); font-size: 1.05rem; font-weight: 600; }
.se-feature-text { margin: 0; color: var(--se-secondary); font-size: .9rem; line-height: 1.65; }

/* --------------------------------------------------- nömrələnmiş addımlar */

.se-steps { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.se-step {
    display: flex;
    gap: 1.1rem;
    padding: 1.6rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.se-step:hover { border-color: rgba(37, 99, 235, .3); box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .22); }
.se-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--se-accent), #60a5fa);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.se-step-body { min-width: 0; }
.se-step-title { margin: .35rem 0 .7rem; color: var(--se-primary); font-size: 1.15rem; font-weight: 600; }
.se-step-text { color: var(--se-secondary); font-size: .95rem; line-height: 1.8; }
.se-step-text > :last-child { margin-bottom: 0; }
.se-step-text ul,
.se-step-text ol { padding-left: 1.2rem; }
.se-step-text li { margin-bottom: .4rem; }
.se-step-text strong { color: var(--se-primary); }

@media (max-width: 575.98px) {
    .se-step { flex-direction: column; gap: .85rem; padding: 1.25rem; }
}

/* --------------------------------------------------- alt CTA zolağı */

.se-cta {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    text-align: center;
    background:
        radial-gradient(800px 420px at 15% 20%, #1e3a8a 0%, rgba(30, 58, 138, 0) 62%),
        radial-gradient(650px 380px at 85% 85%, #0f766e 0%, rgba(15, 118, 110, 0) 58%),
        #0b1120;
}
.se-cta-inner { position: relative; z-index: 2; }
.se-cta-title {
    margin: 0 0 .9rem;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.02em;
}
.se-cta-text {
    max-width: 40rem;
    margin: 0 auto 1.8rem;
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.7;
}
/* Qəsdən .se-hero-actions deyil: o sinif hero animasiyasına bağlıdır və
   opacity: 0 ilə başlayır, hero-dan kənarda görünməz qalardı. */
.se-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }

/* --------------------------------------------------- rəy lenti
 *
 * Bu CSS əvvəl components/home/testimonials-carousel.blade.php içində inline
 * <style> bloku idi. O, CSP style-src 'self' ilə bloklanır (yalnız report-only
 * rejimdə işləyirdi), ona görə bura köçürülüb.
 *
 * Siyahı işarələmədə iki dəfə render olunur; track -50% sürüşdükdə ikinci nüsxə
 * tam birincinin yerinə düşür, ona görə dövr görünmür.
 */
.se-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.se-marquee-track { display: flex; width: max-content; animation: seMarquee 60s linear infinite; }
.se-marquee:hover .se-marquee-track { animation-play-state: paused; }
.se-marquee-item { display: flex; flex: 0 0 auto; width: 380px; padding: 0 .6rem; }
/* Rəy kartı Bootstrap sütununa bükülüdür — lentdə sütun davranışı söndürülür. */
.se-marquee-item > [class*="col-"] { display: flex; width: 100%; max-width: 100%; padding: 0; }
@keyframes seMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.se-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1.6rem 1.5rem 1.35rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.se-quote:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, .3);
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .28);
}
.se-quote-mark {
    position: absolute;
    top: .2rem;
    right: 1.1rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(37, 99, 235, .13);
    pointer-events: none;
}
.se-quote-stars { display: flex; gap: .15rem; margin-bottom: .7rem; color: #f59e0b; font-size: .8rem; }
.se-quote-text {
    position: relative;
    margin: 0 0 1.2rem;
    color: var(--se-primary);
    font-size: .92rem;
    line-height: 1.7;
}
.se-quote-author {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--se-border);
}
.se-quote-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--se-bg-light);
    color: var(--se-secondary);
}
.se-quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.se-quote-meta { display: flex; flex-direction: column; min-width: 0; }
.se-quote-name { color: var(--se-primary); font-size: .88rem; font-weight: 600; }
.se-quote-role { color: var(--se-secondary); font-size: .76rem; }

@media (prefers-reduced-motion: reduce) {
    .se-marquee-track { animation: none; }
    .se-feature,
    .se-feature-icon,
    .se-step,
    .se-quote { transition: none; }
    .se-feature:hover,
    .se-quote:hover { transform: none; }
}

/* --------------------------------------------------- detal səhifələri */

.se-block { margin-bottom: 3rem; }
.se-block:last-child { margin-bottom: 0; }
.se-block-title {
    position: relative;
    margin: 0 0 1.35rem;
    padding-bottom: .8rem;
    color: var(--se-primary);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    border-bottom: 1px solid var(--se-border);
}
/* Başlığın altındakı xəttin üstündə qısa aksent parçası. */
.se-block-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--se-accent), #60a5fa);
}

/* Uzun məzmun yanında yan sütun görünən qalsın. */
.se-sticky { position: sticky; top: 92px; }

.se-meta-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.se-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .88);
    font-size: .79rem;
    font-weight: 500;
}

/* Müəllim profilinin başlığı: avatar + ad yan-yana. */
.se-hero--profile .se-hero-content { max-width: 60rem; }
.se-profile-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; }
.se-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .6);
    font-size: 3.2rem;
}
.se-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.se-profile-meta { min-width: 0; }
.se-profile-meta .se-hero-title { margin-top: 0; }
.se-profile-meta .se-meta-pills { margin-top: .9rem; }

/* --------------------------------------------------- yan sütun kartı */

.se-side-card {
    margin-bottom: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--se-border);
    border-radius: 16px;
    background: #fff;
}
.se-side-card:last-child { margin-bottom: 0; }
.se-side-title { margin: 0 0 1.1rem; color: var(--se-primary); font-size: 1.02rem; font-weight: 600; }

.se-spec { margin: 0 0 1.35rem; }
.se-spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--se-border);
}
.se-spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.se-spec-row dt { color: var(--se-secondary); font-size: .82rem; font-weight: 400; }
.se-spec-row dd { margin: 0; color: var(--se-primary); font-size: .85rem; font-weight: 600; text-align: right; }
.se-spec-highlight { color: #059669 !important; }

.se-side-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    background: var(--se-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .75);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.se-side-cta:hover {
    background: #1d4ed8;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(37, 99, 235, .85);
}
.se-side-cta svg { transition: transform .25s ease; }
.se-side-cta:hover svg { transform: translateX(3px); }
.se-side-cta:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

.se-mini-person {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem;
    border: 1px solid var(--se-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .25s ease, background-color .25s ease;
}
.se-mini-person:hover { border-color: rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .04); }
.se-mini-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--se-bg-light);
    color: var(--se-secondary);
}
.se-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.se-mini-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.se-mini-name { color: var(--se-primary); font-size: .88rem; font-weight: 600; }
.se-mini-role { color: var(--se-secondary); font-size: .76rem; }
.se-mini-arrow { flex: 0 0 auto; color: var(--se-secondary); transition: transform .25s ease, color .25s ease; }
.se-mini-person:hover .se-mini-arrow { color: var(--se-accent); transform: translateX(3px); }

/* --------------------------------------------------- siyahılar */

.se-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.se-checklist--single { grid-template-columns: 1fr; }
.se-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--se-secondary);
    font-size: .9rem;
    line-height: 1.6;
}
.se-checklist-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    border-radius: 50%;
    background: rgba(5, 150, 105, .12);
    color: #059669;
}

.se-bullets { margin: 0; padding: 0; list-style: none; }
.se-bullets li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: .6rem;
    color: var(--se-secondary);
    font-size: .9rem;
    line-height: 1.65;
}
.se-bullets li::before {
    content: '';
    position: absolute;
    top: .62rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--se-accent);
}

.se-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.se-tag {
    padding: .32rem .75rem;
    border: 1px solid var(--se-border);
    border-radius: 999px;
    background: var(--se-bg-light);
    color: var(--se-secondary);
    font-size: .78rem;
    font-weight: 500;
}

/* --------------------------------------------------- kurikulum */

.se-modules { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.se-module {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--se-border);
    border-radius: 14px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.se-module:hover { border-color: rgba(37, 99, 235, .3); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .28); }
.se-module-num {
    flex: 0 0 auto;
    color: var(--se-accent);
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .65;
}
.se-module-body { flex: 1 1 auto; min-width: 0; }
.se-module-title { margin: 0; color: var(--se-primary); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.se-module-topics { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.se-module-topic {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--se-bg-light);
    color: var(--se-secondary);
    font-size: .74rem;
}
.se-module-duration {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    color: var(--se-secondary);
    font-size: .78rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .se-module { flex-wrap: wrap; }
    .se-module-duration { width: 100%; }
}

/* --------------------------------------------------- FAQ akkordeonu
   Davranış Bootstrap-dandır; burada yalnız görünüş dəyişdirilir. */

.se-faq { --bs-accordion-border-color: var(--se-border); }
.se-faq-item {
    margin-bottom: .7rem;
    border: 1px solid var(--se-border);
    border-radius: 14px !important;
    overflow: hidden;
    background: #fff;
}
.se-faq-button.accordion-button {
    padding: 1.05rem 1.25rem;
    background: #fff;
    color: var(--se-primary);
    font-size: .95rem;
    font-weight: 600;
    box-shadow: none;
}
.se-faq-button.accordion-button:not(.collapsed) {
    background: rgba(37, 99, 235, .05);
    color: var(--se-accent);
}
.se-faq-button.accordion-button:focus { box-shadow: none; }
.se-faq-button.accordion-button:focus-visible { outline: 2px solid var(--se-accent); outline-offset: -2px; }
.se-faq-body { padding: 0 1.25rem 1.15rem; color: var(--se-secondary); font-size: .9rem; line-height: 1.7; }

/* --------------------------------------------------- əlaqə + forma */

.se-alert {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(5, 150, 105, .3);
    border-radius: 14px;
    background: rgba(5, 150, 105, .07);
    color: #047857;
    font-size: .92rem;
}
.se-alert i { font-size: 1.1rem; }

.se-contact-links { display: flex; flex-direction: column; gap: .6rem; }
.se-contact-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem;
    border: 1px solid var(--se-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.se-contact-link:hover {
    border-color: rgba(37, 99, 235, .35);
    background: rgba(37, 99, 235, .04);
    transform: translateX(3px);
}
.se-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(37, 99, 235, .09);
    color: var(--se-accent);
    font-size: 1.05rem;
}
.se-contact-meta { display: flex; flex-direction: column; min-width: 0; }
.se-contact-label { color: var(--se-secondary); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.se-contact-value {
    color: var(--se-primary);
    font-size: .87rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}
.se-contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--se-border);
}

.se-form {
    padding: 2rem;
    border: 1px solid var(--se-border);
    border-radius: 18px;
    background: #fff;
}
.se-form-title { margin: 0 0 1.5rem; color: var(--se-primary); font-size: 1.15rem; font-weight: 600; }
.se-label {
    display: block;
    margin-bottom: .4rem;
    color: var(--se-secondary);
    font-size: .8rem;
    font-weight: 600;
}
/* Bootstrap-ın .form-control / .form-select siniflərini saxlayırıq (validasiya
   göstəriciləri onlara bağlıdır), yalnız görünüşü formaya uyğunlaşdırırıq. */
.se-form .form-control,
.se-form .form-select {
    padding: .7rem .9rem;
    border: 1px solid var(--se-border);
    border-radius: 11px;
    color: var(--se-primary);
    font-size: .92rem;
}
.se-form .form-control:focus,
.se-form .form-select:focus {
    border-color: var(--se-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.se-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    margin-top: 1.75rem;
    padding: .85rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--se-accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .75);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.se-form-submit:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(37, 99, 235, .85);
}
.se-form-submit svg { transition: transform .25s ease; }
.se-form-submit:hover svg { transform: translateX(3px); }
.se-form-submit:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }

@media (max-width: 991.98px) {
    /* Yan sütun məzmunun üstünə/altına düşəndə yapışqanlıq mənasızdır. */
    .se-sticky { position: static; }
}
@media (max-width: 575.98px) {
    .se-form { padding: 1.35rem; }
    .se-profile-avatar { width: 96px; height: 96px; font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .se-side-cta,
    .se-side-cta svg,
    .se-mini-person,
    .se-mini-arrow,
    .se-module,
    .se-contact-link,
    .se-form-submit,
    .se-form-submit svg { transition: none; }
    .se-side-cta:hover,
    .se-contact-link:hover,
    .se-form-submit:hover { transform: none; }
    .se-side-cta:hover svg,
    .se-mini-person:hover .se-mini-arrow,
    .se-form-submit:hover svg { transform: none; }
}

/* --------------------------------------------------- bloq yazısı
 *
 * .se-article redaktorun RichEditor-da yazdığı sərbəst HTML-i əhatə edir, ona
 * görə stillər element seçiciləri ilə verilir — məzmunda sinif adları yoxdur.
 * (Əvvəl bu blokun heç bir stili yox idi: başlıqlar, siyahılar və sitatlar
 * brauzerin standart görünüşü ilə çıxırdı.)
 */

.se-hero--article .se-hero-content { max-width: 54rem; }
.se-hero--article .se-hero-title { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.15; }
/* Kateqoriya eyebrow-u bu səhifədə keçiddir. */
.se-hero-eyebrow--link { text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
.se-hero-eyebrow--link:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.se-article-wrap { max-width: 820px; margin: 0 auto; padding: 0 0 3.5rem; }
/* Örtük şəkli tünd zolağın üstünə bir az dırmaşır — bloklar arasında keçid
   sərt sərhəd deyil, üst-üstə düşən qat kimi görünsün. */
.se-article-cover {
    display: block;
    width: 100%;
    max-height: 440px;
    margin: -3.5rem 0 2.5rem;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 24px 60px -28px rgba(15, 23, 42, .55);
}

.se-article { color: #334155; font-size: 1.03rem; line-height: 1.85; }
.se-article > :first-child { margin-top: 0; }
.se-article > :last-child { margin-bottom: 0; }
.se-article p { margin: 0 0 1.35rem; }
.se-article h2 {
    margin: 2.6rem 0 1rem;
    color: var(--se-primary);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.02em;
}
.se-article h3 {
    margin: 2.1rem 0 .85rem;
    color: var(--se-primary);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 600;
}
.se-article h4 { margin: 1.8rem 0 .7rem; color: var(--se-primary); font-size: 1.05rem; font-weight: 600; }
.se-article ul,
.se-article ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.se-article li { margin-bottom: .55rem; }
.se-article li::marker { color: var(--se-accent); }
.se-article a {
    color: var(--se-accent);
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}
.se-article a:hover { color: #1d4ed8; }
.se-article strong { color: var(--se-primary); font-weight: 600; }
.se-article img { max-width: 100%; height: auto; margin: 1.8rem 0; border-radius: 12px; }
.se-article hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--se-border); }
.se-article blockquote {
    margin: 1.8rem 0;
    padding: .35rem 0 .35rem 1.35rem;
    border-left: 3px solid var(--se-accent);
    color: var(--se-secondary);
    font-size: 1.06rem;
    font-style: italic;
}
.se-article blockquote > :last-child { margin-bottom: 0; }
.se-article code {
    padding: .15em .4em;
    border-radius: 5px;
    background: var(--se-bg-light);
    color: var(--se-primary);
    font-size: .88em;
}
.se-article pre {
    margin: 1.8rem 0;
    padding: 1.15rem 1.35rem;
    overflow-x: auto;
    border: 1px solid var(--se-border);
    border-radius: 12px;
    background: var(--se-bg-light);
    font-size: .88rem;
    line-height: 1.65;
}
.se-article pre code { padding: 0; background: none; }
/* Cədvəl dar ekranda səhifəni üfüqi sürüşdürməsin. */
.se-article table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.8rem 0;
    border-collapse: collapse;
    font-size: .92rem;
}
.se-article th,
.se-article td { padding: .65rem .85rem; border: 1px solid var(--se-border); text-align: left; }
.se-article th { background: var(--se-bg-light); color: var(--se-primary); font-weight: 600; }

.se-article-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--se-border);
}
.se-article-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--se-secondary);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .25s ease;
}
.se-article-back svg { transition: transform .25s ease; }
.se-article-back:hover { color: var(--se-accent); }
.se-article-back:hover svg { transform: translateX(-3px); }

@media (max-width: 575.98px) {
    .se-article-cover { margin-top: -2rem; max-height: 260px; }
    .se-article { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
    .se-hero-eyebrow--link,
    .se-article-back,
    .se-article-back svg { transition: none; }
    .se-article-back:hover svg { transform: none; }
}

/* --------------------------------------------------- certificate lookup */

/* The serial is a code, not prose, so the field is set like one: monospace,
   widely tracked and centred, which also makes a mistyped character obvious
   before the visitor submits. */
.aca-serial-input {
    font-family: 'DejaVu Sans Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
    padding: .85rem 1rem;
    border: 2px solid var(--se-border);
    border-radius: 10px;
    background-color: #fff;
    color: var(--se-primary);
}
.aca-serial-input:focus {
    border-color: var(--se-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    outline: none;
}
.aca-serial-input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
}
.aca-serial-input.is-invalid {
    border-color: #dc2626;
}

/* A round tinted plate behind an icon, used for the page mark and the
   "what to check" cards. */
.aca-icon-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #eff6ff;
    color: var(--se-accent);
    font-size: 1.35rem;
}
.aca-icon-plate--lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
}

/* Sample seal and QR, shown at the size they appear on the sheet so a visitor
   can compare the paper in their hand against the screen. */
.aca-specimen {
    background-color: #fbf7ee;
    border: 1px solid #e7dcc4;
    border-radius: 10px;
}
/* Large enough that the rim text is legible — the specimen is there to be
   compared against the paper, and an unreadable one teaches nothing. */
.aca-specimen__mark {
    width: 130px;
    height: 130px;
}
.aca-specimen__mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Honeypot: hidden from humans, visible to naive bots that fill every input. */
.aca-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ── SEO/GEO mətn bloku (x-seo.lead) ──────────────────────────────────────────
   Səhifənin ilk abzası: meta təsviri ilə eyni mətn, amma GÖRÜNƏN. Google
   səhifədə görünməyən təsviri işlətmir, AI köməkçisi isə oxuya bilmədiyini
   sitat gətirə bilmir — ona görə bu blok markap deyil, səhifə məzmunudur.

   Aralıq HƏM yuxarıda, HƏM aşağıdadır: əvvəl yalnız yuxarıya qoyulmuşdu və
   blok özündən sonrakı bölməyə yapışırdı.

   Sətir eni məhdudlaşdırılmır (istifadəçi qərarı, 2026-09-12). Tipik oxunaqlıq
   tövsiyəsi 65–75 simvoldur; burada konteynerin tam eni işlədilir. */
.se-seo-lead {
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.se-seo-answer {
    margin: 0;
    color: var(--se-primary);
    font-size: clamp(1.02rem, 1.35vw, 1.15rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -.005em;
}

.se-seo-intro {
    margin-top: 1rem;
    color: var(--se-secondary);
    font-size: 1rem;
    line-height: 1.75;
}

.se-seo-intro br + br { content: ''; display: block; height: .5rem; }

/* Qaranlıq hero-dan sonra gələn ilk blok olduğu üçün yuxarıda nazik ayırıcı:
   iki bölmənin bir-birinə axmasının qarşısını alır. */
.se-hero + .se-seo-lead .se-seo-answer {
    padding-top: .25rem;
}