:root {
    --container-max: 1840px; /* ümumi maksimal eni — geniş ekranlarda yanlarda boşluq çox qalmasın */
    /* DARK MODE (Mövcud Gecə Rejimi) */
    --bg-color: #0b1120;
    --text-color: #ffffff;
    --text-muted: #cbd5e1;
    --header-bg: rgba(15, 23, 42, 0.7);
    --border-color: rgba(255, 255, 255, 0.15);
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-hover: rgba(255, 255, 255, 0.09);
    --hero-photo: url('../baku_light.jpg'); /* backend-dən (Sayt parametrləri) js/site-settings.js ilə əvəzlənə bilər */
    --hero-bg: linear-gradient(135deg, rgba(11, 17, 32, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%), var(--hero-photo) no-repeat center center/cover;
}

body.light-theme {
    /* Tam ağ deyil, yumşaq boz-mavi (slate) fon — göz üçün daha rahatdır */
    --bg-color: #eef2f6;

    /* Foto üzərinə mülayim örtük: nə xam foto (əvvəlki 0.4/0.5 — çox parlaq idi),
       nə də tam ağ vərəq (0.88/0.92 — çox yastı və "ağ" görünürdü). Slate tonlu,
       orta şəffaflıqda örtük fotonun dərinliyini saxlayır, amma göz yormur. */
    --hero-bg: linear-gradient(150deg, rgba(226, 232, 240, 0.74) 0%, rgba(203, 213, 225, 0.82) 100%), var(--hero-photo) no-repeat center center/cover;
    /* Mətnlərin tam qara olaraq daha yaxşı oxunması üçün */
    --text-color: #0f172a;
    --text-muted: #334155;

    /* Header-in daha aydın və səliqəli olması üçün */
    --header-bg: rgba(248, 250, 252, 0.9);

    /* Kartların arxa fondan seçilməsi üçün nəzərəçarpacaq tünd kənar xətti */
    --border-color: rgba(15, 23, 42, 0.15);

    /* Kartların ağ və kənarlarının yüngülcə seçilməsi üçün */
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-hover: rgba(255, 255, 255, 0.95);
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Səhifənin ÖZÜ heç vaxt üfüqi sürüşməsin (yalnız şaquli scroll) — html-ə də
   overflow-x:hidden lazımdır, təkcə body kifayət etmir və bəzi mobil
   brauzerlərdə "yan-yana sürüşmə/bounce" effekti yarada bilir. Səhifə daxilindəki
   qəsdən edilmiş üfüqi scroll-lar (məs. .cat-list) buna görə məhdudlaşmır,
   çünki onlar öz overflow-x:auto sərhədləri daxilində qalır. */
html {
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    background-color: var(--bg-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Form elementləri brauzerdə öz sistem şriftini götürür — bütün saytda eyni Poppins
   görünsün deyə body-nin şriftini miras alırlar. */
button, input, select, textarea, summary {
    font-family: inherit;
}

.btn-primary {
    background-color: #c4642f;
    color: #fff;
    padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 30px);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
    box-shadow: 0 6px 20px rgba(196, 100, 47, 0.3);
    border: 1px solid #b35624;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #b35624; 
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(179, 86, 36, 0.4);
}
.btn-primary.btn-sm { padding: 8px 18px; font-size: 14px; }

/* Ortaq Şüşə Kart Dizaynı (about.css və services.css-də istifadə olunur) */
.glass-effect {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.4s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.glass-effect:hover {
    transform: translateY(-5px);
    border-color: #d97742;
    background: var(--card-hover, rgba(255, 255, 255, 0.08));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Ortaq Form Komponentləri (contact.css və cv.css-də istifadə olunur) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.25s;
    resize: vertical;
}

/* Məcburi sahə: label-in sonunda "*" (innerHTML dəyişsə də ::after qalır), boş/səhv
   buraxılanda js/cv.js .invalid sinfi əlavə edir */
.form-group label.req::after {
    content: " *";
    color: #d97742;
}

.form-group input.invalid {
    border-color: #e5484d;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #d97742;
}

/* Fayl seçimi (CV yükləmə) — brauzerin standart "Choose file" görünüşünü
   dizaynla üst-üstə salmaq üçün yüngül üslublaşdırma */
.form-group input[type="file"] {
    padding: 9px 14px;
    cursor: pointer;
}

.form-group input[type="file"]::file-selector-button {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #c4642f;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    margin-right: 12px;
    cursor: pointer;
    transition: background 0.25s;
}

.form-group input[type="file"]::file-selector-button:hover {
    background: #b35624;
}

.form-note {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.75;
    min-height: 16px;
}

.form-note.status-success { color: #2e9e5b; opacity: 1; font-weight: 600; }
.form-note.status-error { color: #d9534f; opacity: 1; font-weight: 600; }

/* Spam-bot tələsi — insan istifadəçiyə görünmür, botlar isə adətən doldurur */
.botcheck-field {
    display: none;
}

/* Absolute Header */
.glass-header {
    display: flex;
    justify-content: space-around; /* Dəyişdirildi */
    align-items: center;
    padding: 10px 20px;
    background: var(--header-bg, rgba(15, 23, 42, 0.2));
    backdrop-filter: blur(20px);
    position: absolute; 
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: var(--container-max);
    z-index: 1000;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.logo-container { margin-right: auto; }
.site-logo { height: clamp(28px, 2.5vw, 38px); object-fit: contain; } /* loqo PNG-si kənar boşluqlardan kəsilib — görünən loqo böyük, menyu çubuğu isə eyni qalır */

/* Hamburger İkonu - Kompüterdə gizlidir */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}
.hamburger span {
    width: 100%; height: 2px; background-color: var(--text-color, #fff);
    transition: all 0.3s;
}

nav { flex-grow: 2; display: flex; justify-content: center; }
nav ul { display: flex; list-style: none; gap: clamp(10px, 1.2vw, 22px); align-items: center; }
nav ul li a {
    text-decoration: none; color: var(--text-muted, #cbd5e1);
    font-size: clamp(12px, 1vw, 14px); font-weight: 500; white-space: nowrap;
}
nav ul li a:hover { color: #d97742; }

/* FAQ linki — tema düyməsinin (gecə/gündüz) yanında, əvvəl footer-də idi.
   Əsas nav linkləri ilə eyni üslubda, ona görə eyni ölçü/rəng/hover. */
.header-faq-link {
    text-decoration: none;
    color: var(--text-muted, #cbd5e1);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.25s;
}
.header-faq-link:hover { color: #d97742; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1vw, 15px); }

.lang-dropdown {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    transition: border 0.4s, color 0.4s;
}
body.light-theme .lang-dropdown {
    background-color: #ffffff;
}
/* Gündüz rejimində menyu daha mat və göz yormayan formada */
body.light-theme .glass-header {
    background: rgba(248, 250, 252, 0.85); /* Tam ağ yox, çox açıq boz/mat */
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Yüngül kölgə ayırıcılığı artırır */
}

/* Gündüz rejimində loqo artıq JS tərəfindən logo_light.png ilə əvəz olunur,
   ona görə burda əlavə filter tətbiq etmirik (əks halda loqo yenidən invert olub itir) */
.lang-dropdown option { color: #000; }

/* CV Göndər (Kompüter və Noutbuklar üçün əsas dizayn) */
.theme-switch { position: relative; display: inline-block; width: 60px; height: 30px; margin-right: 5px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
/* Gecə/gündüz keçidi: düymənin özü cari rejimin ikonunu daşıyır (gecədə ay, gündüzdə günəş),
   fon da rejimə uyğundur — əvvəl ikonlar düymənin əks tərəfində görünürdü və qarışıq görünürdü.
   HTML-dəki .icon span-ları gizlədilir (11 səhifədə toxunmamaq üçün qalıb). */
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    transition: background .4s, border-color .4s, box-shadow .4s;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    /* Gecə: tünd göy + kiçik ulduzlar */
    background:
        radial-gradient(1.2px 1.2px at 70% 28%, #fff 99%, transparent),
        radial-gradient(1px 1px at 82% 66%, rgba(255,255,255,.85) 99%, transparent),
        radial-gradient(1px 1px at 56% 70%, rgba(255,255,255,.7) 99%, transparent),
        linear-gradient(135deg, #0b1226 0%, #1e293b 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.slider.round { border-radius: 34px; }
.slider .icon { display: none; }
.slider:before {
    position: absolute; content: ""; height: 24px; width: 24px; left: 2px; top: 2px;
    border-radius: 50%; z-index: 2;
    background: #e2e8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='9' r='2.4' fill='%23cbd5e1'/%3E%3Ccircle cx='15.5' cy='14.5' r='3' fill='%23cbd5e1'/%3E%3Ccircle cx='9' cy='17' r='1.4' fill='%23cbd5e1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 0 8px rgba(226, 232, 240, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: transform .4s cubic-bezier(0.4, 0.0, 0.2, 1), background-color .4s, box-shadow .4s;
}
/* Gündüz: açıq səma + günəş */
input:checked + .slider {
    background:
        radial-gradient(7px 4px at 30% 72%, rgba(255,255,255,.9) 99%, transparent),
        radial-gradient(6px 3.5px at 44% 80%, rgba(255,255,255,.75) 99%, transparent),
        linear-gradient(135deg, #7dd3fc 0%, #bae6fd 100%);
    border-color: rgba(14, 116, 144, 0.25);
    box-shadow: inset 0 1px 3px rgba(14, 116, 144, 0.25);
}
input:checked + .slider:before {
    transform: translateX(30px);
    background: #fbbf24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.2' fill='%23f59e0b'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.theme-switch:hover .slider:before { filter: brightness(1.08); }
input:focus-visible + .slider { outline: 2px solid #c4642f; outline-offset: 2px; }

/* Noutbuk/Planşet Uyğunlaşması */
@media (max-width: 1024px) {
    .glass-header { padding: 8px 10px; width: 98%; }
    nav ul { gap: 10px; }
    nav ul li a { font-size: 11px; }
}

/* Mobil Üçün - Açılan Hamburger Menyu */
@media (max-width: 768px) {
    .hamburger { display: flex; } 
    
    nav, .header-right {
        display: none; 
        width: 100%;
        text-align: center;
        flex-direction: column;
    }

    .glass-header.active {
        flex-wrap: wrap; 
        background: rgba(15, 23, 42, 0.75); 
        backdrop-filter: blur(25px); 
        border-radius: 12px;
    }

    .glass-header.active nav {
        display: flex;
        order: 3;
        margin-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 15px;
    }

    .glass-header.active .header-right {
        display: flex;
        order: 2;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        gap: 15px; 
    }

    nav ul { flex-direction: column; gap: 15px; padding-bottom: 15px; }
    nav ul li a { font-size: 15px; padding: 5px 0; }
    
    /* Hamburger ikonunun X şəklinə düşməsi */
    .glass-header.active .hamburger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .glass-header.active .hamburger span:nth-child(2) { opacity: 0; }
    .glass-header.active .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* --- FOOTER (ortaq komponent, bütün səhifələrdə eyni görünəcək) --- */
.site-footer {
    width: 100%;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 95%;
    padding: 24px 0 18px 0;
    /* Tək sətir: hüquq yazısı solda, sosial ikonlar sağda (HTML-də ikonlar əvvəldir, order ilə yerləri dəyişirik) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}

/* --- FAQ Akkordeonu (faq.html-in özündə istifadə olunur, native
   <details>/<summary> ilə — JS-ə ehtiyac yoxdur) --- */
.faq-item {
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid var(--border-color);
}

.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: clamp(18px, 1.4vw, 24px) 6px;
    cursor: pointer;
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 600;
    color: var(--text-color);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: clamp(22px, 1.6vw, 28px);
    font-weight: 400;
    color: #d97742;
    transition: transform 0.25s;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

/* Açılmış sual çərçivəyə alınır ki, cavabın hansı suala aid olduğu digərlərindən
   dərhal seçilsin. Mənfi margin padding-i kompensasiya edir — mətn açılanda
   yerindən oynamır, çərçivə sadəcə onun ətrafına "çıxır". */
.faq-item[open] {
    margin: 8px -14px;
    padding: 0 14px 4px;
    border: 1px solid #d97742;
    border-radius: 12px;
    background: rgba(217, 119, 66, 0.08);
    box-shadow: 0 6px 18px rgba(217, 119, 66, 0.12);
}

.faq-item[open] summary {
    color: #d97742;
}

.faq-item p {
    padding: 0 30px 22px 6px;
    color: var(--text-muted);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.7;
}

.footer-bottom {
    display: flex;
    order: 2;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-social-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.footer-social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.25s, color 0.25s, transform 0.25s;
}

.social-icon svg {
    width: 17px;
    height: 17px;
}

.social-icon:hover {
    border-color: #d97742;
    color: #d97742;
    transform: translateY(-2px);
}

/* Footer 3 hissə: solda hüquq yazısı, ORTADA "Talentcore, / Strateji karyera
   qərarları üçün doğru tərəfdaş" şüarı, sağda "Bizi İzləyin" ikonları.
   .footer-left HTML-də wrapper-dir (şüar + hüquq yazısı), amma display:contents
   ilə "yox olur" — uşaqları birbaşa .footer-container-in grid/flex elementləri sayılır. */
.footer-left {
    display: contents;
}

.footer-tagline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline; /* "Talentcore," və cümlə TƏK sətirdə ardıcıl durur */
    gap: 4px 8px;
    text-align: left;
}

.footer-tagline-brand {
    font-size: 17px;
    font-weight: 700;
    color: #d97742;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.footer-tagline-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.85;
}

/* Geniş ekran (≥1000px): 3 sütunlu grid — orta sütun (şüar) sol/sağ hissələrin
   eni fərqli olsa belə dəqiq ORTADA qalır (1fr auto 1fr). */
@media (min-width: 1000px) {
    .site-footer .footer-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: baseline; /* şüarın 1-ci sətri ("Talentcore,") sol/sağ yazılarla EYNİ baseline-da */
        gap: 16px 32px;
    }
    .footer-copyright {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .footer-tagline {
        grid-column: 2;
        grid-row: 1;
    }
    .footer-bottom {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

/* Dar ekran (<1000px): hamısı alt-alta, ortalanmış: şüar, ikonlar, hüquq yazısı */
@media (max-width: 999px) {
    .site-footer .footer-container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .footer-tagline { order: 1; justify-content: center; text-align: center; }
    .footer-bottom { order: 2; justify-content: center; }
    .footer-copyright { order: 3; text-align: center; }
}

.footer-copyright {
    text-align: left;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

@media (max-width: 640px) {
    .site-footer .footer-container { flex-direction: column; justify-content: center; text-align: center; }
    .footer-copyright { text-align: center; }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-social {
        flex-direction: column;
        gap: 10px;
    }
    .footer-social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* Sosial ikonlar — platformaların öz loqoları (Simple Icons, CC0), öz rəngləri ilə.
   Hover-də dairənin çərçivəsi və yüngül yuxarı qalxma qalır (yuxarıdakı .social-icon:hover). */
.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon[aria-label="Instagram"] { color: #e4405f; }
.social-icon[aria-label="LinkedIn"] { color: #0a66c2; }
.social-icon[aria-label="Facebook"] { color: #1877f2; }
.social-icon[aria-label="Telegram"] { color: #26a5e4; }
.social-icon[aria-label="WhatsApp"] { color: #25d366; }


/* LinkedIn-in rəsmi tünd mavisi qara fonda zəif seçilir — qara rejimdə bir qədər açıq ton */
body:not(.light-theme) .social-icon[aria-label="LinkedIn"] { color: #2f8de4; }