:root {
    --kku-green: #0b5d46;
    --kku-green-2: #084c3a;
    --kku-dark: #1b1f1e;
    --kku-gold: #bfa86a;
    --kku-gray: #6c757d;
    --bg-soft: #f7faf9;
}

html,
body {
    height: 100%;
}

body {
    font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system,
        Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf8 100%);
    color: var(--kku-dark);
    overflow-x: hidden;
}

/* Accessibility / Focus */
:focus-visible {
    outline: 3px solid var(--kku-gold);
    outline-offset: 2px;
}

/* Navbar */
.kku-navbar {
    background: #fff;
    border-bottom: 1px solid #eef2ef;
}
.kku-navbar .nav-link {
    color: var(--kku-green-2);
}
.kku-navbar .nav-link:hover {
    color: var(--kku-green);
}
.brand-title {
    color: var(--kku-green);
    font-weight: 800;
    letter-spacing: 0.2px;
}
.brand-subtitle {
    color: var(--kku-gray);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Hero */
.hero {
    position: relative;
    padding: 4rem 0 3rem;
    background: radial-gradient(
            1200px 600px at 110% -20%,
            rgba(11, 93, 70, 0.08),
            transparent 60%
        ),
        radial-gradient(
            900px 500px at -10% 0%,
            rgba(191, 168, 106, 0.1),
            transparent 60%
        );
}
.hero--bg {
    padding: 4rem 0;
    background-image: url("/custom/images/KKU_Main_AR_mob.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 420px;
}
.hero--bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        radial-gradient(
            1000px 600px at 15% 15%,
            rgba(11, 93, 70, 0.15),
            transparent 60%
        );
}
.hero--bg .container {
    position: relative;
    z-index: 1;
}
.hero-content-box {
    backdrop-filter: blur(6px);
    background: rgba(8, 76, 58, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 820px;
}
@media (min-width: 768px) {
    .hero-content-box {
        padding: 2rem;
    }
}
@media (min-width: 768px) {
    .hero--bg {
        padding: 6rem 0 5rem;
        min-height: 520px;
        background-image: url("/custom/images/KKU_Main_AR.jpg");
    }
}
@media (min-width: 1200px) {
    .hero--bg {
        min-height: 600px;
    }
}
.hero .badge {
    background: rgba(11, 93, 70, 0.08);
    color: var(--kku-green);
    border: 1px solid rgba(11, 93, 70, 0.15);
}
.hero--bg .badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.hero-title {
    font-weight: 800;
    color: var(--kku-green-2);
    line-height: 1.4;
}
.hero--bg .hero-title {
    color: #fff;
}
.hero-text {
    color: #27302d;
    font-size: 1.05rem;
}
.hero--bg .hero-text {
    color: rgba(255, 255, 255, 0.9);
}
.fine-text {
    font-size: 0.95rem;
}
.text-onimage {
    color: rgba(255, 255, 255, 0.9);
}

.hero-card {
    background: linear-gradient(180deg, #fff 0%, #f9fbfa 100%);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(11, 93, 70, 0.08);
    padding: 1.75rem;
    border: 1px solid #ecf1ee;
}
.hero-media {
    background: url("/custom/images/bglogin.png") center/cover no-repeat;
    border: 1px solid #e7efec;
}

.kku-btn-primary {
    background: var(--kku-green);
    color: #fff;
    border: 1px solid var(--kku-green);
}
.kku-btn-primary:hover {
    background: var(--kku-green-2);
    color: #fff;
    border-color: var(--kku-green-2);
}

.kku-btn-outline {
    background: #fff;
    color: var(--kku-green-2);
    border: 1px solid var(--kku-green-2);
}
.kku-btn-outline:hover {
    background: var(--kku-green-2);
    color: #fff;
}
.hero--bg .kku-btn-outline {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.hero--bg .kku-btn-outline:hover {
    background: #fff;
    color: var(--kku-green-2);
}

/* Stats */
.stats {
    background: var(--bg-soft);
    border-top: 1px solid #edf3f0;
    border-bottom: 1px solid #edf3f0;
}
.stat-card {
    background: #fff;
    border: 1px solid #ecf1ee;
    border-radius: 0.85rem;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    height: 100%;
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: rgba(11, 93, 70, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kku-green);
}
.stat-value {
    font-weight: 800;
    color: var(--kku-green-2);
    font-size: 1.75rem;
}
.stat-label {
    color: var(--kku-gray);
    font-weight: 600;
}

/* Features */
.feature-card {
    background: #fff;
    border: 1px solid #ecf1ee;
    border-radius: 1rem;
    padding: 1.25rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 93, 70, 0.1);
}
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.65rem;
    background: rgba(191, 168, 106, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kku-green-2);
}

/* Footer */
footer {
    background: #fff;
    border-top: 1px solid #eef2ef;
    color: #4b5652;
}
.text-kku-primary {
    color: var(--kku-green-2) !important;
}

/* DGA-inspired utilities */
.dga-section {
    padding-block: 3rem;
}
@media (min-width: 768px) {
    .dga-section {
        padding-block: 4rem;
    }
}
@media (min-width: 1024px) {
    .dga-section {
        padding-block: 5rem;
    }
}

.dga-card {
    border-radius: 12px;
    border: 1px solid #e7ebea;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
}

/* Accessibility helpers */
.skip-link {
    position: absolute;
    top: -40px;
    inset-inline-start: 1rem;
    background: #fff;
    color: var(--kku-green-2);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #e0e6e3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: top 0.2s ease;
    z-index: 1000;
}
.skip-link:focus {
    top: 1rem;
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}