:root {
    --bg-color: #F8F9FB;
    --sidebar-bg: #FFFFFF;
    --text-main: #1A1D2D;
    --text-muted: #000000;
    --primary: #30d5c8;
    --primary-hover: #4ecec3;
    --primary-light: #e0f7fa;
    --primary-dark: #006064;
    --hero-bg: #ffffff;
}
      
/* BODY dark mode için*/

body{

    background:var(--bg-app);

    color:var(--text-main);

    transition:0.35s;

     font-family: system-ui, -apple-system, sans-serif;
}

/* ============================================================
   ============================================================
      MAP — COMPLETE DARK MODE
   ============================================================
   ============================================================ */


/* ============================================================
   01 — DARK THEME VARIABLES
   ============================================================ */

body.dark {

    color-scheme: dark;

    --dark-bg: #080d18;
    --dark-bg-2: #0b1120;
    --dark-bg-3: #0f172a;

    --dark-surface: #111827;
    --dark-surface-2: #151f31;
    --dark-surface-3: #1e293b;
    --dark-surface-hover: #243247;

    --dark-input: #0b1120;

    --dark-border: rgba(148,163,184,.14);
    --dark-border-strong: rgba(148,163,184,.24);

    --dark-text: #f8fafc;
    --dark-text-2: #e2e8f0;
    --dark-text-3: #cbd5e1;

    --dark-muted: #94a3b8;
    --dark-muted-2: #64748b;

    --dark-primary: #30d5c8;
    --dark-primary-hover: #2dd4bf;
    --dark-primary-soft: rgba(48,213,200,.10);
    --dark-primary-border: rgba(48,213,200,.22);

    --dark-success: #4ade80;
    --dark-warning: #fbbf24;
    --dark-danger: #fb7185;

    --dark-shadow:
        0 12px 35px rgba(0,0,0,.28);

    --dark-shadow-lg:
        0 30px 90px rgba(0,0,0,.55);
}


/* ============================================================
   02 — HTML / BODY
   ============================================================ */

html:has(body.dark) {
    background: #080d18 !important;
    color-scheme: dark !important;
}

body.dark {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(48,213,200,.035),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #080d18 0%,
            #0b1120 100%
        ) !important;

    color: var(--dark-text) !important;
}


/* ============================================================
   03 — GLOBAL TYPOGRAPHY
   ============================================================ */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: var(--dark-text) !important;
}

body.dark p {
    color: var(--dark-text-3);
}

body.dark strong {
    color: var(--dark-text);
}

body.dark small {
    color: var(--dark-muted);
}

body.dark hr {
    border-color:
        rgba(148,163,184,.12) !important;
}

body.dark a {
    color: #5eead4;
}

body.dark a:hover {
    color: #99f6e4;
}


/* ============================================================
   04 — LOGO / NAVBAR
   ============================================================ */

body.dark .subtitle {
    color: #94a3b8 !important;
}

body.dark .top-nav {
    background: transparent !important;
}

body.dark .nav-links a {
    color: #94a3b8 !important;
}

body.dark .nav-links a:hover {
    color: #5eead4 !important;
}

body.dark .nav-links a.active {
    color: #30d5c8 !important;
}


/* ============================================================
   05 — THEME BUTTON
   ============================================================ */

body.dark .theme-toggle {
    background: #172033 !important;

    border:
        1px solid rgba(148,163,184,.22) !important;

    box-shadow:
        0 6px 18px rgba(0,0,0,.25) !important;
}

body.dark .theme-toggle:hover {
    background: #1e293b !important;
}

body.dark .theme-toggle .sun-icon {
    opacity: 0 !important;
    transform:
        rotate(180deg)
        scale(0) !important;
}

body.dark .theme-toggle .moon-icon {
    opacity: 1 !important;

    transform:
        rotate(0deg)
        scale(1) !important;

    color: #f8fafc !important;
}


/* ============================================================
   06 — HERO
   ============================================================ */

body.dark .hero-banner {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(48,213,200,.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #101a2c 0%,
            #0b1424 55%,
            #0a1220 100%
        ) !important;

    color: #f8fafc !important;

    border:
        1px solid rgba(148,163,184,.10) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.25) !important;
}

body.dark .hero-content h3 {
    color: #e2e8f0 !important;
}

body.dark .hero-content h1 {
    color: #f8fafc !important;
}

body.dark .hero-content p {
    color: #cbd5e1 !important;
}

body.dark .highlight {
    color: #30d5c8 !important;
}


/* ============================================================
   07 — SEARCH BAR
   ============================================================ */

body.dark .search-bar {
    background:
        rgba(15,23,42,.78) !important;

    border:
        1px solid rgba(148,163,184,.20) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22) !important;
}

body.dark .search-bar input {
    background: transparent !important;
    color: #f8fafc !important;
}

body.dark .search-bar input::placeholder {
    color: #64748b !important;
}

body.dark .search-bar button {
    background: #14b8a6 !important;
    color: #ffffff !important;
}

body.dark .search-bar button:hover {
    background: #2dd4bf !important;
}


/* ============================================================
   08 — HERO FLOATING CARDS
   ============================================================ */

body.dark .floating.card,
body.dark .hero-right .card {
    background:
        linear-gradient(
            180deg,
            rgba(30,41,59,.94),
            rgba(15,23,42,.92)
        ) !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.30),
        0 30px 80px rgba(0,0,0,.32) !important;
}

body.dark .analytics-card .grid {
    background-image:
        linear-gradient(
            rgba(148,163,184,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.12) 1px,
            transparent 1px
        ) !important;
}

body.dark .analytics-card polyline {
    stroke: #30d5c8 !important;
}

body.dark .analytics-card circle {
    fill: #30d5c8 !important;
}

body.dark .pie {
    background:
        conic-gradient(
            #30d5c8 0 35%,
            #5eead4 35% 65%,
            #164e63 65% 100%
        ) !important;
}

body.dark .stats span {
    background: #334155 !important;
}

body.dark .music-card {
    background: #111827 !important;
    border-color: rgba(148,163,184,.18) !important;
}

body.dark .music-header {
    border-bottom-color:
        rgba(148,163,184,.14) !important;
}

body.dark .track-info h4 {
    color: #f8fafc !important;
}

body.dark .track-info p {
    color: #94a3b8 !important;
}

body.dark .sound-btn {
    background:
        rgba(148,163,184,.12) !important;

    color: #e2e8f0 !important;
}

body.dark .track {
    color: #cbd5e1 !important;
}

body.dark .track:hover {
    background:
        rgba(148,163,184,.08) !important;
}

body.dark .track.active {
    background:
        rgba(48,213,200,.14) !important;

    color: #5eead4 !important;
}


/* ============================================================
   09 — CONTINUE SECTION
   ============================================================ */

body.dark .continue-section {
    background:
        linear-gradient(
            145deg,
            #101827 0%,
            #0f172a 100%
        ) !important;

    color: #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.32) !important;
}

body.dark .continue-section .section-title {
    color: #f8fafc !important;
}

body.dark .continue-grid {
    background: transparent !important;
}


/* ============================================================
   10 — CONTINUE CARDS
   ============================================================ */

body.dark .continue-card {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #111827
        ) !important;

    color: #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25) !important;
}

body.dark .continue-card:hover {
    background:
        linear-gradient(
            145deg,
            #1b293d,
            #151f31
        ) !important;

    border-color:
        rgba(48,213,200,.28) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.36) !important;
}

body.dark .continue-card .card-text h3 {
    color: #f8fafc !important;
}

body.dark .continue-card .card-text p {
    color: #94a3b8 !important;
}

body.dark .open-btn {
    background:
        rgba(48,213,200,.10) !important;

    color:
        #5eead4 !important;

    border:
        1px solid rgba(48,213,200,.16) !important;
}

body.dark .open-btn:hover {
    background: #30d5c8 !important;
    color: #06201e !important;
}

body.dark .blue-card {
    background:
        linear-gradient(
            135deg,
            #102b45,
            #132c42
        ) !important;

    color: #7dd3fc !important;
}

body.dark .green-card {
    background:
        linear-gradient(
            135deg,
            #0e3025,
            #10382b
        ) !important;
}

body.dark .purple-card {
    background:
        linear-gradient(
            135deg,
            #241b42,
            #2b2050
        ) !important;
}


/* ============================================================
   11 — DÜNYA VERİLERİ
   ============================================================ */

body.dark .dashboard-dunya {
    background:
        #101827 !important;

    border:
        1px solid rgba(148,163,184,.13) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.25) !important;
}

body.dark .header-dunya {
    border-bottom-color:
        rgba(148,163,184,.14) !important;
}

body.dark .header-dunya h2 {
    color: #f8fafc !important;
}

body.dark .tabs {
    background:
        #0b1120 !important;
}

body.dark .tab-btn {
    color: #94a3b8 !important;
}

body.dark .tab-btn.active {
    background:
        #1e293b !important;

    color:
        #5eead4 !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.25) !important;
}


/* ============================================================
   12 — WORLD DATA CARDS
   ============================================================ */

body.dark .grid-container .card-dunya {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #111827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.24) !important;
}

body.dark .card-dunya h3 {
    color:
        #f8fafc !important;
}

body.dark .chart-placeholder {
    background:
        #0f172a !important;

    border:
        1px solid rgba(148,163,184,.12) !important;

    color:
        #cbd5e1 !important;
}

body.dark .list-item {
    background:
        #101827 !important;

    border-color:
        rgba(148,163,184,.12) !important;
}

body.dark .list-item:hover {
    background:
        #1e293b !important;
}

body.dark .country-name {
    color:
        #e2e8f0 !important;
}

body.dark .rank {
    background:
        rgba(48,213,200,.12) !important;

    color:
        #5eead4 !important;
}

body.dark .value {
    color:
        #5eead4 !important;
}


/* ============================================================
   13 — KÜRESEL ENFLASYON ÇİZGİ GRAFİĞİ
   ============================================================ */



body.dark .card-dunya:has(#line_chart_div) {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #111827
        ) !important;
}

body.dark #line-title {
    color:
        #f8fafc !important;
}

body.dark #line_chart_div {
    background:
        #0f172a !important;

    border:
        1px solid rgba(148,163,184,.14) !important;

    border-radius:
        14px !important;

    overflow:
        hidden !important;
}

/* Google Charts */
body.dark #line_chart_div svg {
    background:
        transparent !important;
}

body.dark #line_chart_div svg rect {
    fill:
        transparent !important;
}

body.dark #line_chart_div svg text {
    fill:
        #94a3b8 !important;
}

body.dark #line_chart_div svg line {
    stroke:
        rgba(148,163,184,.15) !important;
}

body.dark #line_chart_div svg path {
    stroke:
        #30d5c8 !important;
}

body.dark #line_chart_div svg circle {
    fill:
        #30d5c8 !important;

    stroke:
        #0f172a !important;
}

body.dark #line_chart_div .google-visualization-tooltip {
    background:
        #0f172a !important;

    color:
        #f8fafc !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.45) !important;
}

body.dark #line_chart_div .google-visualization-tooltip-item {
    color:
        #cbd5e1 !important;
}


/* ============================================================
   14 — MINI BOXES
   ============================================================ */

body.dark .mini-boxes {
    background: transparent !important;
}

body.dark .mini-box {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #111827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.24) !important;
}

body.dark .mini-box:hover {
    background:
        linear-gradient(
            145deg,
            #1b293d,
            #151f31
        ) !important;

    border-color:
        rgba(48,213,200,.28) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.35) !important;
}

body.dark .mini-box h3 {
    color:
        #f8fafc !important;
}

body.dark .mini-box p {
    color:
        #94a3b8 !important;
}

body.dark .mini-icon {
    background:
        rgba(48,213,200,.10) !important;

    color:
        #5eead4 !important;

    border:
        1px solid rgba(48,213,200,.15) !important;
}

body.dark .live-dot {
    box-shadow:
        0 0 0 4px rgba(48,213,200,.08),
        0 0 12px rgba(48,213,200,.35) !important;
}


/* ============================================================
   15 — HAFTANIN SÖZÜ
   ============================================================ */

body.dark .weekly-quote-card {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(48,213,200,.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #111827,
            #0f172a
        ) !important;

    color:
        #f8fafc !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.34) !important;
}

body.dark .weekly-quote-card .badge {
    background:
        rgba(48,213,200,.10) !important;

    border:
        1px solid rgba(48,213,200,.16) !important;

    color:
        #5eead4 !important;
}

body.dark .weekly-quote-card .quote-box {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #101827
        ) !important;

    border:
        1px solid rgba(148,163,184,.12) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25) !important;
}

body.dark .weekly-quote-card .quote {
    color:
        #f8fafc !important;
}

body.dark .weekly-quote-card .quote-icon {
    color:
        rgba(48,213,200,.22) !important;
}

body.dark .weekly-quote-card .line1 {
    background:
        rgba(148,163,184,.14) !important;
}

body.dark .weekly-quote-card .author h3 {
    color:
        #f8fafc !important;
}

body.dark .weekly-quote-card .author span {
    color:
        #94a3b8 !important;
}

body.dark .weekly-quote-card .footer1 {
    color:
        #64748b !important;
}


/* ============================================================
   16 — APPLE CAREER / MESLEKİ ANALİZ SİMÜLATÖRÜ
   ============================================================ */

body.dark .apple-career-module {
    color:
        #f8fafc !important;
}

body.dark .ac-header h2 {
    color:
        #f8fafc !important;
}

body.dark .ac-header p {
    color:
        #94a3b8 !important;
}

body.dark .ac-card {
    background:
        linear-gradient(
            145deg,
            rgba(21,31,49,.94),
            rgba(15,23,42,.94)
        ) !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25) !important;
}

body.dark .ac-card:hover {
    background:
        #1e293b !important;

    border-color:
        rgba(48,213,200,.28) !important;
}

body.dark .ac-card h3 {
    color:
        #f8fafc !important;
}

body.dark .ac-card p {
    color:
        #94a3b8 !important;
}

body.dark .ac-btn {
    background:
        #0f172a !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(48,213,200,.22) !important;
}

body.dark .ac-btn:hover {
    background:
        #30d5c8 !important;

    color:
        #06201e !important;
}


/* ============================================================
   17 — INSIGHT
   ============================================================ */

body.dark .insight-card {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #101827
        ) !important;

    border:
        1px solid rgba(148,163,184,.14) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25) !important;
}

body.dark .insight-header {
    color:
        #94a3b8 !important;
}

body.dark .insight-text {
    color:
        #f8fafc !important;
}

body.dark .source {
    color:
        #64748b !important;
}

body.dark .dots span {
    background:
        #334155 !important;
}

body.dark .dots span.active {
    background:
        #30d5c8 !important;
}


/* ============================================================
   18 — İŞ BİRLİĞİ / COMMUNITY
   ============================================================ */

body.dark .community-section {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(48,213,200,.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #151f31,
            #101827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.30) !important;
}

body.dark .community-content h3 {
    color:
        #f8fafc !important;
}

body.dark .community-content p {
    color:
        #94a3b8 !important;
}

body.dark .big-chat {
    background:
        #1e293b !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.30) !important;
}

body.dark .big-chat::after {
    background:
        #1e293b !important;
}

body.dark .community-section .line {
    background:
        #334155 !important;
}

body.dark .small-chat {
    background:
        #172033 !important;
}

body.dark .partner-area {
    background:
        #101827 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;
}

body.dark .partner-icon {
    background:
        rgba(48,213,200,.10) !important;

    color:
        #5eead4 !important;

    border:
        1px solid rgba(48,213,200,.16) !important;
}

body.dark .partner-text h4 {
    color:
        #f8fafc !important;
}

body.dark .partner-text p {
    color:
        #94a3b8 !important;
}


/* ============================================================
   19 — MESLEK DETAY SAYFASI
   ============================================================ */

body.dark #jobDetailsContainer,
body.dark .job-details-container {
    background:
        #0f172a !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.42) !important;
}

body.dark #detailJobTitle,
body.dark .detail-title {
    color:
        #f8fafc !important;
}

body.dark .job-info p {
    color:
        #94a3b8 !important;
}

body.dark .back-btn {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .back-btn:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}


/* ============================================================
   20 — MESLEK METRİKLERİ
   ============================================================ */

body.dark .metric-card {
    background:
        linear-gradient(
            145deg,
            #151f31,
            #111827
        ) !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25) !important;
}

body.dark .metric-card:hover {
    border-color:
        rgba(48,213,200,.25) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.35) !important;
}

body.dark .metric-label {
    color:
        #94a3b8 !important;
}

body.dark .metric-value {
    color:
        #f8fafc !important;
}

body.dark .metric-label i {
    background:
        rgba(48,213,200,.10) !important;

    color:
        #5eead4 !important;
}


/* ============================================================
   21 — MAAŞ / VERİ KATKI
   ============================================================ */

body.dark .salary-contribution {
    background:
        linear-gradient(
            135deg,
            #102d2b,
            #10232d
        ) !important;

    border:
        1px solid rgba(45,212,191,.18) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25) !important;
}

body.dark .salary-contribution-icon {
    background:
        #172033 !important;

    color:
        #2dd4bf !important;
}

body.dark .salary-contribution-badge {
    color:
        #2dd4bf !important;
}

body.dark .salary-contribution-text h3 {
    color:
        #f8fafc !important;
}

body.dark .salary-contribution-text p {
    color:
        #94a3b8 !important;
}

body.dark .salary-form-btn {
    background:
        #14b8a6 !important;

    color:
        #ffffff !important;
}

body.dark .salary-form-btn:hover {
    background:
        #2dd4bf !important;

    color:
        #06201e !important;
}


/* ============================================================
   22 — MESLEK GRAFİK / YORUM / GÜN / ARTILAR
   ============================================================ */

body.dark .chart-box,
body.dark .comments-box,
body.dark .day-in-life,
body.dark .pros-box,
body.dark .cons-box {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.14) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.24) !important;
}

body.dark .chart-box h3,
body.dark .comments-box h3,
body.dark .day-in-life h3,
body.dark .pros-box h3,
body.dark .cons-box h3 {
    color:
        #f8fafc !important;
}

body.dark .day-in-life p {
    color:
        #94a3b8 !important;
}

body.dark .comment-item {
    background:
        #101827 !important;

    border:
        1px solid rgba(148,163,184,.10) !important;

    border-left:
        3px solid #30d5c8 !important;
}

body.dark .comment-item p {
    color:
        #cbd5e1 !important;
}

body.dark .comment-author {
    color:
        #64748b !important;
}

body.dark .pros-box li,
body.dark .cons-box li {
    color:
        #cbd5e1 !important;
}


/* ============================================================
   23 — APPLE DISCOVER MODAL
   ============================================================ */

body.dark #appleDiscoverModal,
body.dark .apple-modal {
    background:
        rgba(2,6,23,.94) !important;

    color:
        #e2e8f0 !important;
}

body.dark .close-modal-btn {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .close-modal-btn:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}

body.dark .modal-search-container {
    border-bottom-color:
        #334155 !important;
}

body.dark .modal-search-container:focus-within {
    border-bottom-color:
        #30d5c8 !important;
}

body.dark .modal-search-container .search-icon {
    color:
        #64748b !important;
}

body.dark #modalJobInput {
    background:
        transparent !important;

    color:
        #f8fafc !important;
}

body.dark #modalJobInput::placeholder {
    color:
        #64748b !important;
}

body.dark .modal-suggestions {
    background:
        #111827 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .modal-suggestion-item {
    color:
        #cbd5e1 !important;
}

body.dark .modal-suggestion-item:hover {
    background:
        rgba(48,213,200,.08) !important;

    color:
        #5eead4 !important;
}

body.dark .popular-categories h3 {
    color:
        #94a3b8 !important;
}

body.dark .job-pill {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    color:
        #cbd5e1 !important;
}

body.dark .job-pill:hover {
    background:
        #30d5c8 !important;

    border-color:
        #30d5c8 !important;

    color:
        #06201e !important;
}

body.dark .other-job-card {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.14) !important;

    color:
        #cbd5e1 !important;
}

body.dark .other-job-card:hover {
    background:
        #1e293b !important;

    border-color:
        #30d5c8 !important;

    color:
        #5eead4 !important;
}


/* ============================================================
   24 — GLOBAL MESLEK MODALI
   ============================================================ */

body.dark .global-modal-overlay-2 {
    background:
        rgba(2,6,23,.82) !important;

    backdrop-filter:
        blur(7px) !important;
}

body.dark .global-modal-box-2 {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.60) !important;
}

body.dark .global-close-btn-2 {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;
}

body.dark .global-close-btn-2:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}

body.dark .global-header-2 h2 {
    color:
        #f8fafc !important;
}

body.dark .global-header-2 p {
    color:
        #94a3b8 !important;
}

body.dark .global-kicker-2 {
    color:
        #5eead4 !important;
}

body.dark .global-panel-2 {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.14) !important;
}

body.dark .panel-header-2 h3 {
    color:
        #f8fafc !important;
}

body.dark .panel-header-2 span {
    color:
        #64748b !important;
}


/* ============================================================
   25 — GLOBAL MODAL CHART
   ============================================================ */

body.dark .circle-chart-2::before {
    background:
        #151f31 !important;
}

body.dark .circle-chart-center-2 strong {
    color:
        #f8fafc !important;
}

body.dark .circle-chart-center-2 span {
    color:
        #94a3b8 !important;
}

body.dark .legend-item-2 {
    background:
        #101827 !important;

    border:
        1px solid rgba(148,163,184,.12) !important;
}

body.dark .legend-info-2 span {
    color:
        #cbd5e1 !important;
}

body.dark .legend-info-2 strong {
    color:
        #f8fafc !important;
}

body.dark .country-2 {
    border-bottom-color:
        rgba(148,163,184,.13) !important;
}

body.dark .country-header-2 strong {
    color:
        #f8fafc !important;
}

body.dark .country-header-2 span {
    color:
        #64748b !important;
}

body.dark .demand-label-2 {
    color:
        #94a3b8 !important;
}

body.dark .demand-track-2 {
    background:
        #334155 !important;
}

body.dark .demand-row-2 > strong {
    color:
        #cbd5e1 !important;
}

body.dark .global-note-2 {
    background:
        #101827 !important;

    border:
        1px solid rgba(148,163,184,.12) !important;

    color:
        #94a3b8 !important;
}


/* ============================================================
   26 — KARİYER MERKEZİ MODALI
   ============================================================ */

body.dark .career-modal,
body.dark .detail-modal {
    background:
        rgba(2,6,23,.82) !important;

    backdrop-filter:
        blur(7px) !important;
}

body.dark .career-modal-content,
body.dark .detail-content {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.60) !important;
}

body.dark .close-modal {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .close-modal:hover {
    background:
        #30d5c8 !important;

    color:
        #06201e !important;
}

body.dark .career-modal-content h1,
body.dark .detail-heading h1 {
    color:
        #f8fafc !important;
}

body.dark .career-subtitle {
    color:
        #94a3b8 !important;
}

body.dark .career-box {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;

    color:
        #e2e8f0 !important;
}

body.dark .career-box:hover {
    background:
        #1e293b !important;

    border-color:
        rgba(48,213,200,.30) !important;
}

body.dark .career-box h3 {
    color:
        #f8fafc !important;
}

body.dark .career-box p {
    color:
        #94a3b8 !important;
}

body.dark .career-icon,
body.dark .detail-heading-icon {
    background:
        rgba(48,213,200,.10) !important;

    color:
        #5eead4 !important;
}

body.dark .detail-category {
    color:
        #5eead4 !important;
}

body.dark .detail-body,
body.dark .detail-body li {
    color:
        #cbd5e1 !important;
}

body.dark .detail-body h3 {
    color:
        #f8fafc !important;
}

body.dark .detail-highlight {
    background:
        rgba(20,184,166,.09) !important;

    border:
        1px solid rgba(45,212,191,.20) !important;
}

body.dark .detail-highlight p {
    color:
        #cbd5e1 !important;
}

body.dark .detail-highlight i {
    color:
        #2dd4bf !important;
}


/* ============================================================
   27 — ÜNİVERSİTE MODALI
   ============================================================ */

body.dark .university-modal {
    background:
        rgba(2,6,23,.82) !important;

    backdrop-filter:
        blur(7px) !important;
}

body.dark .university-content {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.60) !important;
}

body.dark .university-content h1 {
    color:
        #f8fafc !important;
}

body.dark .uni-subtitle {
    color:
        #94a3b8 !important;
}

body.dark .bar-uni {
    background:
        #334155 !important;
}

body.dark .chart-row span {
    color:
        #e2e8f0 !important;
}

body.dark .chart-row strong {
    color:
        #5eead4 !important;
}

body.dark .trend-card {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.14) !important;
}

body.dark .trend-card h3 {
    color:
        #f8fafc !important;
}

body.dark .trend-card p {
    color:
        #94a3b8 !important;
}


/* ============================================================
   28 — MESLEK GÜNLÜĞÜ / VLOG
   ============================================================ */

body.dark .vlog-overlay {
    background:
        rgba(2,6,23,.84) !important;

    backdrop-filter:
        blur(7px) !important;
}

body.dark .vlog-window {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.58) !important;
}

body.dark .vlog-close-top,
body.dark .vlog-back-arrow {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;
}

body.dark .vlog-close-top:hover,
body.dark .vlog-back-arrow:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}

body.dark .vlog-main-title,
body.dark .vlog-story-nav-title,
body.dark .vlog-step-heading {
    color:
        #f8fafc !important;
}

body.dark .vlog-subtitle,
body.dark .vlog-select-footer,
body.dark .vlog-step-paragraph {
    color:
        #94a3b8 !important;
}

body.dark .vlog-select-card {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .vlog-select-card:hover {
    background:
        #1e293b !important;

    border-color:
        #30d5c8 !important;
}

body.dark .vlog-name {
    color:
        #e2e8f0 !important;
}

body.dark .vlog-story-header,
body.dark .vlog-progress-container,
body.dark .vlog-story-footer {
    background:
        #111827 !important;

    border-color:
        rgba(148,163,184,.14) !important;
}

body.dark .vlog-p-seg {
    background:
        #334155 !important;
}

body.dark .vlog-p-seg.active {
    background:
        #30d5c8 !important;
}

body.dark .vlog-counter-text {
    color:
        #94a3b8 !important;
}

body.dark .vlog-story-visual {
    background:
        #1e293b !important;
}

body.dark .vlog-time-badge {
    background:
        #172033 !important;

    color:
        #5eead4 !important;
}

body.dark .vlog-goal-box {
    background:
        rgba(34,197,94,.08) !important;

    border-left-color:
        #30d5c8 !important;
}

body.dark .vlog-goal-label {
    color:
        #5eead4 !important;
}

body.dark .vlog-goal-text {
    color:
        #cbd5e1 !important;
}

body.dark .btn-vlog-secondary {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;
}

body.dark .btn-vlog-secondary:hover {
    background:
        #334155 !important;
}

body.dark .btn-vlog-primary {
    background:
        #30d5c8 !important;

    color:
        #06201e !important;
}

body.dark .btn-vlog-primary:hover {
    background:
        #2dd4bf !important;
}


/* ============================================================
   29 — MEMUR MAAŞ MODALI
   ============================================================ */

body.dark .salary-modal-overlay {
    background:
        rgba(2,6,23,.84) !important;

    backdrop-filter:
        blur(7px) !important;
}

body.dark .salary-modal-wrapper {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.60) !important;
}

body.dark .salary-modal-header {
    border-bottom-color:
        rgba(148,163,184,.14) !important;
}

body.dark .salary-modal-header h2 {
    color:
        #f8fafc !important;
}

body.dark .salary-modal-close {
    color:
        #94a3b8 !important;
}

body.dark .salary-modal-close:hover {
    background:
        #1e293b !important;

    color:
        #ffffff !important;
}


/* ============================================================
   30 — MAAŞ MODAL SEKME
   ============================================================ */

body.dark .salary-tab-control {
    background:
        #0b1120 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .tab-target {
    color:
        #94a3b8 !important;
}

body.dark .tab-target.active {
    background:
        #1e293b !important;

    color:
        #5eead4 !important;
}


/* ============================================================
   31 — MAAŞ TABLOSU
   ============================================================ */

body.dark .table-responsive {
    border-color:
        rgba(148,163,184,.16) !important;
}

body.dark .salary-table {
    background:
        #111827 !important;
}

body.dark .salary-table th {
    background:
        #172033 !important;

    color:
        #e2e8f0 !important;

    border-bottom-color:
        rgba(148,163,184,.16) !important;
}

body.dark .salary-table td {
    color:
        #cbd5e1 !important;

    border-bottom-color:
        rgba(148,163,184,.10) !important;
}

body.dark .salary-table tr:hover td {
    background:
        #1e293b !important;
}

body.dark .price-tag {
    color:
        #4ade80 !important;
}

body.dark .salary-disclaimer {
    color:
        #64748b !important;
}


/* ============================================================
   32 — MAAŞ HESAPLAMA FORMU
   ============================================================ */

body.dark .form-group label {
    color:
        #cbd5e1 !important;
}

body.dark .form-group select,
body.dark .form-group input[type="number"] {
    background:
        #0b1120 !important;

    color:
        #f8fafc !important;

    border:
        1px solid rgba(148,163,184,.20) !important;
}

body.dark .form-group select:focus,
body.dark .form-group input[type="number"]:focus {
    border-color:
        #30d5c8 !important;

    box-shadow:
        0 0 0 3px rgba(48,213,200,.12) !important;
}

body.dark .pure-checkbox {
    color:
        #cbd5e1 !important;
}

body.dark .pure-checkbox input {
    accent-color:
        #30d5c8 !important;
}

body.dark .salary-calc-btn {
    background:
        #14b8a6 !important;

    color:
        #ffffff !important;
}

body.dark .salary-calc-btn:hover {
    background:
        #2dd4bf !important;

    color:
        #06201e !important;
}


/* ============================================================
   33 — MAAŞ SONUÇ KARTI
   ============================================================ */

body.dark .salary-result-card {
    background:
        rgba(34,197,94,.08) !important;

    border:
        1px solid rgba(74,222,128,.20) !important;

    color:
        #e2e8f0 !important;
}

body.dark .salary-result-card span {
    color:
        #86efac !important;
}

body.dark .salary-result-card h4 {
    color:
        #4ade80 !important;
}

body.dark .salary-result-card p {
    color:
        #86efac !important;
}

body.dark .bordro-details summary {
    color:
        #5eead4 !important;
}

body.dark .bordro-breakdown {
    background:
        #111827 !important;

    border:
        1px solid rgba(74,222,128,.16) !important;
}

body.dark .breakdown-item {
    color:
        #94a3b8 !important;

    border-bottom-color:
        rgba(148,163,184,.12) !important;
}

body.dark .breakdown-item strong {
    color:
        #f8fafc !important;
}


/* ============================================================
   34 — YKS SIRALAMA SİMÜLATÖRÜ
   ============================================================ */

body.dark .panel-container1 {
    background:
        linear-gradient(
            145deg,
            #111827,
            #0f172a
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.34) !important;
}

body.dark .panel-header1 {
    background:
        transparent !important;
}

body.dark .panel-header1 h3 {
    color:
        #f8fafc !important;
}

body.dark .panel-header1 p {
    color:
        #94a3b8 !important;
}

body.dark .group-title1 {
    color:
        #5eead4 !important;

    border-bottom-color:
        rgba(148,163,184,.15) !important;
}

body.dark .input-field1 label {
    color:
        #cbd5e1 !important;
}

body.dark .net-badge1 {
    background:
        #1e293b !important;

    color:
        #94a3b8 !important;

    border:
        1px solid rgba(148,163,184,.12) !important;
}

body.dark .input-field1 input,
body.dark .d-y-group1 input,
body.dark #obp-puan1 {
    background:
        #0b1120 !important;

    color:
        #f8fafc !important;

    border:
        1px solid rgba(148,163,184,.20) !important;
}

body.dark .d-y-group1 input[placeholder="D"] {
    background:
        rgba(34,197,94,.08) !important;

    border-color:
        rgb(46, 219, 109) !important;

    color:
        #86efac !important;
}

body.dark .d-y-group1 input[placeholder="Y"] {
    background:
        rgba(239,68,68,.08) !important;

    border-color:
        rgb(252, 83, 108) !important;

    color:
        #fda4af !important;
}

body.dark .input-field1 input:focus,
body.dark .d-y-group1 input:focus,
body.dark #obp-puan1:focus {
    background:
        #111827 !important;

    border-color:
        #30d5c8 !important;

    box-shadow:
        0 0 0 3px rgba(48,213,200,.12) !important;
}

body.dark .btn-primary1 {
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0d9488
        ) !important;

    color:
        #ffffff !important;
}

body.dark .btn-primary1:hover {
    background:
        linear-gradient(
            135deg,
            #2dd4bf,
            #14b8a6
        ) !important;

    color:
        #06201e !important;
}


/* ============================================================
   35 — YKS RESULT MODAL
   ============================================================ */

body.dark .modal-overlay1 {
    background:
        rgba(2,6,23,.84) !important;

    backdrop-filter:
        blur(8px) !important;
}

body.dark .modal-content1 {
    background:
        #111827 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.62) !important;
}

body.dark .result-modal-header1 {
    border-bottom-color:
        rgba(148,163,184,.14) !important;
}

body.dark .result-overline1,
body.dark .section-overline1 {
    color:
        #64748b !important;
}

body.dark .modal-title1 {
    color:
        #f8fafc !important;
}

body.dark .modal-subtitle1 {
    color:
        #94a3b8 !important;
}

body.dark .close-modal1 {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;
}

body.dark .close-modal1:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}

body.dark .user-profile1 {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.14) !important;
}

body.dark .user-profile-text1 span {
    color:
        #64748b !important;
}

body.dark .user-profile-text1 strong {
    color:
        #e2e8f0 !important;
}

body.dark .section-title-row1 h3 {
    color:
        #f8fafc !important;
}


/* ============================================================
   36 — YKS YEAR RESULTS
   ============================================================ */

body.dark .year-result1 {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.15) !important;
}

body.dark .year-result1:hover {
    background:
        #1e293b !important;

    border-color:
        rgba(148,163,184,.22) !important;
}

body.dark .year-result1.current-year1 {
    background:
        linear-gradient(
            180deg,
            #172033,
            #151f31
        ) !important;
}

body.dark .year-name1 {
    color:
        #f8fafc !important;
}

body.dark .year-note1 {
    color:
        #64748b !important;
}

body.dark .current-badge1 {
    background:
        rgba(99,102,241,.12) !important;

    color:
        #a5b4fc !important;
}


/* ============================================================
   37 — YKS RESULT TYPES
   ============================================================ */

body.dark .type-result1 {
    background:
        #1e293b !important;
}

body.dark .type-result1.tyt1 {
    background:
        rgba(99,102,241,.10) !important;
}

body.dark .type-result1.say1 {
    background:
        rgba(59,130,246,.10) !important;
}

body.dark .type-result1.ea1 {
    background:
        rgba(245,158,11,.10) !important;
}

body.dark .type-result1.soz1 {
    background:
        rgba(239,68,68,.10) !important;
}

body.dark .type-result1.dil1 {
    background:
        rgba(34,197,94,.10) !important;
}

body.dark .type-title1 {
    color:
        #cbd5e1 !important;
}

body.dark .main-rank1 {
    border-bottom-color:
        rgba(148,163,184,.14) !important;
}

body.dark .main-rank-label1 {
    color:
        #64748b !important;
}

body.dark .main-rank-value1 {
    color:
        #f8fafc !important;
}

body.dark .score-detail1 span {
    color:
        #64748b !important;
}

body.dark .score-detail1 strong {
    color:
        #cbd5e1 !important;
}

body.dark .raw-rank1 {
    border-top-color:
        rgba(148,163,184,.14) !important;

    color:
        #64748b !important;
}

body.dark .raw-rank1 strong {
    color:
        #94a3b8 !important;
}


/* ============================================================
   38 — YKS UNIVERSITY LIST
   ============================================================ */

body.dark .university-list-wrapper1 {
    background:
        #0f172a !important;

    border:
        1px solid rgba(148,163,184,.16) !important;
}

body.dark .university-list1 > li {
    background:
        #151f31 !important;

    border-bottom-color:
        rgba(148,163,184,.12) !important;
}

body.dark .university-list1 > li:hover {
    background:
        #1e293b !important;
}

body.dark .uni-final-icon1 {
    background:
        rgba(99,102,241,.12) !important;
}

body.dark .uni-final-name1 {
    color:
        #f8fafc !important;
}

body.dark .uni-final-dept1,
body.dark .uni-final-label1 {
    color:
        #64748b !important;
}

body.dark .uni-final-number1 {
    color:
        #4ade80 !important;
}

body.dark .result-modal-footer1 {
    border-top-color:
        rgba(148,163,184,.13) !important;

    color:
        #64748b !important;
}


/* ============================================================
   39 — YKS DEVELOPMENT NOTICE
   ============================================================ */

body.dark .development-notice1 {
    background:
        #080d18 !important;
}

body.dark .development-notice-card1 {
    background:
        #111827 !important;

    border:
        1px solid rgba(148,163,184,.18) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55) !important;
}

body.dark .development-notice-icon1 {
    background:
        rgba(245,158,11,.10) !important;

    border:
        1px solid rgba(245,158,11,.18) !important;
}

body.dark .development-notice-label1 {
    background:
        rgba(245,158,11,.10) !important;

    color:
        #fbbf24 !important;
}

body.dark .development-notice-card1 h2 {
    color:
        #f8fafc !important;
}

body.dark .development-notice-card1 p {
    color:
        #94a3b8 !important;
}

body.dark .development-notice-card1 p strong {
    color:
        #e2e8f0 !important;
}

body.dark .development-notice-info1 {
    background:
        #151f31 !important;

    border:
        1px solid rgba(148,163,184,.13) !important;

    color:
        #cbd5e1 !important;
}

body.dark .development-continue-btn1 {
    background:
        #30d5c8 !important;

    color:
        #06201e !important;
}

body.dark .development-warning1 {
    background:
        rgba(245,158,11,.08) !important;

    border:
        1px solid rgba(245,158,11,.18) !important;
}

body.dark .development-warning-content1 strong {
    color:
        #fbbf24 !important;
}

body.dark .development-warning-content1 p {
    color:
        #94a3b8 !important;
}

body.dark .development-warning-content1 p b {
    color:
        #cbd5e1 !important;
}

body.dark .development-warning-content1 > span {
    background:
        rgba(20,184,166,.10) !important;

    color:
        #5eead4 !important;
}


/* ============================================================
   40 — FOOTER
   ============================================================ */

body.dark .site-footer {
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(48,213,200,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(48,213,200,.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #06272b 0%,
            #041f23 100%
        ) !important;

    color:
        #eafdfc !important;
}

body.dark .footer-brand-slogan {
    color:
        #ffffff !important;
}

body.dark .footer-brand-text {
    color:
        rgba(234,253,252,.68) !important;
}

body.dark .footer-column h3 {
    color:
        #ffffff !important;
}

body.dark .footer-column > a,
body.dark .footer-contact > a,
body.dark .footer-location {
    color:
        rgba(234,253,252,.68) !important;
}

body.dark .footer-column > a:hover,
body.dark .footer-contact > a:hover,
body.dark .footer-bottom-links a:hover {
    color:
        #ffffff !important;
}

body.dark .footer-feedback {
    background:
        linear-gradient(
            135deg,
            rgba(48,213,200,.12),
            rgba(255,255,255,.025)
        ) !important;

    border:
        1px solid rgba(48,213,200,.18) !important;
}

body.dark .feedback-content strong {
    color:
        #ffffff !important;
}

body.dark .feedback-content p {
    color:
        rgba(234,253,252,.60) !important;
}

body.dark .footer-bottom {
    border-top-color:
        rgba(48,213,200,.16) !important;
}

body.dark .footer-bottom-links {
    border-top-color:
        rgba(48,213,200,.08) !important;
}

body.dark .footer-copyright,
body.dark .footer-rights,
body.dark .footer-bottom-links a {
    color:
        rgba(234,253,252,.58) !important;
}


/* ============================================================
   41 — GLOBAL FORM ELEMENTS
   ============================================================ */

body.dark input,
body.dark textarea,
body.dark select {
    color-scheme: dark;

    background-color:
        #0b1120 !important;

    color:
        #f8fafc !important;

    border-color:
        rgba(148,163,184,.20) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color:
        #64748b !important;
}

body.dark option,
body.dark optgroup {
    background:
        #111827 !important;

    color:
        #f8fafc !important;
}


/* ============================================================
   42 — GOOGLE / CHART.JS CANVAS SAFETY
   ============================================================ */

body.dark canvas {
    color-scheme: dark;
}

body.dark .chart-box canvas {
    filter:
        brightness(.90)
        contrast(1.05) !important;
}


/* ============================================================
   43 — GENERIC SCROLLBAR
   ============================================================ */

body.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark ::-webkit-scrollbar-track {
    background:
        #0b1120;
}

body.dark ::-webkit-scrollbar-thumb {
    background:
        #334155;

    border-radius:
        999px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background:
        #475569;
}

body.dark {
    scrollbar-color:
        #334155
        #0b1120;
}


/* ============================================================
   44 — TEXT SELECTION
   ============================================================ */

body.dark ::selection {
    background:
        rgba(48,213,200,.28) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   45 — MODAL GENEL GÜVENLİK KATMANI
   ============================================================ */

body.dark .modal-overlay1,
body.dark .salary-modal-overlay,
body.dark .global-modal-overlay-2,
body.dark .career-modal,
body.dark .detail-modal,
body.dark .university-modal,
body.dark .vlog-overlay {
    z-index:
        9999 !important;
}


body.dark .salary-modal-wrapper *,
body.dark .global-modal-box-2 *,
body.dark .career-modal-content *,
body.dark .detail-content *,
body.dark .university-content *,
body.dark .vlog-window *,
body.dark .modal-content1 * {
    border-color:
        rgba(148,163,184,.12);
}


/* ============================================================
   46 — MOBILE DARK MODE
   ============================================================ */

@media (max-width: 768px) {

    body.dark .hero-banner {
        background:
            linear-gradient(
                145deg,
                #101a2c,
                #0b1424
            ) !important;
    }

    body.dark .search-bar {
        background:
            #0f172a !important;
    }

    body.dark .dashboard-dunya {
        background:
            #101827 !important;
    }

    body.dark .card-dunya {
        background:
            #151f31 !important;
    }

    body.dark #line_chart_div {
        background:
            #0f172a !important;
    }

    body.dark .continue-section {
        background:
            #101827 !important;
    }

    body.dark .continue-card {
        background:
            #151f31 !important;
    }

    body.dark .mini-box {
        background:
            #151f31 !important;
    }

    body.dark .weekly-quote-card {
        background:
            #111827 !important;
    }

    body.dark .weekly-quote-card .quote-box {
        background:
            #151f31 !important;
    }

    body.dark .apple-modal {
        background:
            rgba(7,12,22,.97) !important;
    }

    body.dark .salary-modal-wrapper,
    body.dark .global-modal-box-2,
    body.dark .career-modal-content,
    body.dark .detail-content,
    body.dark .university-content,
    body.dark .vlog-window,
    body.dark .modal-content1 {
        background:
            #111827 !important;
    }

    body.dark #jobDetailsContainer {
        background:
            #0b1120 !important;
    }

    body.dark #jobDetailsContainer .metric-card,
    body.dark #jobDetailsContainer .chart-box,
    body.dark #jobDetailsContainer .comments-box,
    body.dark #jobDetailsContainer .day-in-life,
    body.dark #jobDetailsContainer .pros-box,
    body.dark #jobDetailsContainer .cons-box {
        background:
            #151f31 !important;
    }

    body.dark .community-section {
        background:
            #151f31 !important;
    }

    body.dark .site-footer {
        background:
            linear-gradient(
                180deg,
                #06272b,
                #041f23
            ) !important;
    }
}


/* ============================================================
   47 — EXTRA SMALL DEVICES
   ============================================================ */

@media (max-width: 390px) {

    body.dark .panel-container1,
    body.dark .weekly-quote-card,
    body.dark .continue-section,
    body.dark .community-section {
        border-radius:
            18px !important;
    }

    body.dark .mini-box {
        border-radius:
            16px !important;
    }

    body.dark .salary-modal-wrapper,
    body.dark .global-modal-box-2,
    body.dark .career-modal-content,
    body.dark .detail-content,
    body.dark .university-content,
    body.dark .vlog-window,
    body.dark .modal-content1 {
        border-radius:
            18px !important;
    }
}


/* ============================================================
   48 — ACCESSIBILITY / FOCUS
   ============================================================ */

body.dark button:focus-visible,
body.dark a:focus-visible,
body.dark input:focus-visible,
body.dark select:focus-visible,
body.dark textarea:focus-visible {
    outline:
        2px solid #30d5c8 !important;

    outline-offset:
        2px !important;
}


/* ============================================================
   49 — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    body.dark *,
    body.dark *::before,
    body.dark *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* ============================================================
   50 — FINAL DARK SAFETY NET
   ============================================================ */

body.dark .modal-content1,
body.dark .salary-modal-wrapper,
body.dark .global-modal-box-2,
body.dark .career-modal-content,
body.dark .detail-content,
body.dark .university-content,
body.dark .vlog-window,
body.dark .apple-modal,
body.dark .job-details-container,
body.dark .panel-container1,
body.dark .continue-section,
body.dark .weekly-quote-card,
body.dark .community-section,
body.dark .dashboard-dunya {
    color:
        #e2e8f0 !important;
}


/* ============================================================
   ============================================================
      DARK MODE FINAL — END
   ============================================================
   ============================================================ */


/* ------------------------------------------------------------
   01 — MODAL OVERLAY
   ------------------------------------------------------------ */

body.dark .ac-modal-overlay {
    background:
        rgba(2, 6, 23, .84) !important;

    backdrop-filter:
        blur(16px) saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(16px) saturate(120%) !important;

    color:
        #e2e8f0 !important;
}


/* ------------------------------------------------------------
   02 — MODAL ANA KUTU
   ------------------------------------------------------------ */

body.dark .ac-modal-content {
    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 39, .98),
            rgba(15, 23, 42, .98)
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148, 163, 184, .18) !important;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .62),
        0 0 0 1px rgba(48, 213, 200, .025) !important;

    scrollbar-color:
        #334155 #0b1120 !important;
}


/* Modal açıldığında */
body.dark .ac-modal-overlay.active .ac-modal-content {
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .68),
        0 0 60px rgba(48, 213, 200, .035) !important;
}


/* ------------------------------------------------------------
   03 — MODAL SCROLLBAR
   ------------------------------------------------------------ */

body.dark .ac-modal-content::-webkit-scrollbar {
    width:
        7px !important;
}

body.dark .ac-modal-content::-webkit-scrollbar-track {
    background:
        #0b1120 !important;

    border-radius:
        999px !important;
}

body.dark .ac-modal-content::-webkit-scrollbar-thumb {
    background:
        #334155 !important;

    border-radius:
        999px !important;
}

body.dark .ac-modal-content::-webkit-scrollbar-thumb:hover {
    background:
        #475569 !important;
}


/* ------------------------------------------------------------
   04 — MODAL BAŞLIKLARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content h1,
body.dark .ac-modal-content h2,
body.dark .ac-modal-content h3,
body.dark .ac-modal-content h4,
body.dark .ac-modal-content h5,
body.dark .ac-modal-content h6 {
    color:
        #f8fafc !important;
}


/* Modal içindeki tüm normal metinler */

body.dark .ac-modal-content p {
    color:
        #94a3b8 !important;
}


/* Strong / bold metin */

body.dark .ac-modal-content strong,
body.dark .ac-modal-content b {
    color:
        #e2e8f0 !important;
}


/* ------------------------------------------------------------
   05 — İLK KART
   MESLEK TESTİ / SORULAR
   ------------------------------------------------------------ */

body.dark .ac-modal-content .ac-option-btn {
    background:
        linear-gradient(
            145deg,
            #172033,
            #111827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148, 163, 184, .16) !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .18) !important;
}


/* İlk kart seçenek hover */

body.dark .ac-modal-content .ac-option-btn:hover {
    background:
        linear-gradient(
            145deg,
            #1e293b,
            #172033
        ) !important;

    color:
        #5eead4 !important;

    border-color:
        rgba(48, 213, 200, .32) !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .30),
        0 0 20px rgba(48, 213, 200, .05) !important;

    transform:
        translateX(4px) !important;
}


/* İlk kart seçili durum */

body.dark .ac-modal-content .ac-option-btn.active,
body.dark .ac-modal-content .ac-option-btn.selected {
    background:
        rgba(48, 213, 200, .10) !important;

    color:
        #5eead4 !important;

    border-color:
        rgba(48, 213, 200, .35) !important;
}


/* ------------------------------------------------------------
   06 — İLK MODALDAKİ BUTON / NAVİGASYON
   ------------------------------------------------------------ */

body.dark .ac-modal-content button:not(
    .ac-option-btn
):not(
    .ac-profession-select-btn
):not(
    .ac-vaka-select-btn
) {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border-color:
        rgba(148, 163, 184, .16) !important;
}

body.dark .ac-modal-content button:not(
    .ac-option-btn
):not(
    .ac-profession-select-btn
):not(
    .ac-vaka-select-btn
):hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;

    border-color:
        rgba(48, 213, 200, .25) !important;
}


/* ------------------------------------------------------------
   07 — İKİNCİ KART
   MESLEK SEÇİM MODALI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .ac-profession-select-btn {
    background:
        linear-gradient(
            145deg,
            #172033,
            #111827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148, 163, 184, .16) !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .18) !important;
}


/* Meslek seçimi hover */

body.dark .ac-modal-content .ac-profession-select-btn:hover {
    background:
        linear-gradient(
            145deg,
            #30d5c8,
            #14b8a6
        ) !important;

    color:
        #06201e !important;

    border-color:
        #30d5c8 !important;

    box-shadow:
        0 12px 30px rgba(20, 184, 166, .22) !important;

    transform:
        scale(1.02) !important;
}


/* Meslek seçimi aktif */

body.dark .ac-modal-content .ac-profession-select-btn.active,
body.dark .ac-modal-content .ac-profession-select-btn.selected {
    background:
        rgba(48, 213, 200, .12) !important;

    color:
        #5eead4 !important;

    border-color:
        rgba(48, 213, 200, .38) !important;
}


/* ------------------------------------------------------------
   08 — ÜÇÜNCÜ KART
   VAKA / SENARYO SEÇİM MODALI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .ac-vaka-select-btn {
    background:
        linear-gradient(
            145deg,
            #172033,
            #111827
        ) !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148, 163, 184, .16) !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .18) !important;
}


/* Vaka hover */

body.dark .ac-modal-content .ac-vaka-select-btn:hover {
    background:
        linear-gradient(
            145deg,
            #1e293b,
            #172033
        ) !important;

    color:
        #5eead4 !important;

    border-color:
        rgba(48, 213, 200, .34) !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .32),
        0 0 25px rgba(48, 213, 200, .05) !important;

    transform:
        translateY(-2px) !important;
}


/* Vaka seçili */

body.dark .ac-modal-content .ac-vaka-select-btn.active,
body.dark .ac-modal-content .ac-vaka-select-btn.selected {
    background:
        rgba(48, 213, 200, .11) !important;

    color:
        #5eead4 !important;

    border-color:
        rgba(48, 213, 200, .38) !important;
}


/* ------------------------------------------------------------
   09 — MODAL İÇİ KART / PANEL YAPILARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .ac-panel,
body.dark .ac-modal-content .ac-section,
body.dark .ac-modal-content .ac-question,
body.dark .ac-modal-content .ac-result,
body.dark .ac-modal-content .ac-info,
body.dark .ac-modal-content .ac-result-card {
    background:
        #151f31 !important;

    color:
        #e2e8f0 !important;

    border:
        1px solid rgba(148, 163, 184, .14) !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .18) !important;
}


/* ------------------------------------------------------------
   10 — MODAL İÇİ ETİKETLER
   ------------------------------------------------------------ */

body.dark .ac-modal-content label {
    color:
        #cbd5e1 !important;
}

body.dark .ac-modal-content .label,
body.dark .ac-modal-content .muted,
body.dark .ac-modal-content .description {
    color:
        #94a3b8 !important;
}


/* ------------------------------------------------------------
   11 — MODAL INPUT / SELECT
   ------------------------------------------------------------ */

body.dark .ac-modal-content input,
body.dark .ac-modal-content textarea,
body.dark .ac-modal-content select {
    background:
        #0b1120 !important;

    color:
        #f8fafc !important;

    border:
        1px solid rgba(148, 163, 184, .20) !important;

    color-scheme:
        dark !important;
}

body.dark .ac-modal-content input::placeholder,
body.dark .ac-modal-content textarea::placeholder {
    color:
        #64748b !important;
}

body.dark .ac-modal-content input:focus,
body.dark .ac-modal-content textarea:focus,
body.dark .ac-modal-content select:focus {
    background:
        #111827 !important;

    border-color:
        #30d5c8 !important;

    box-shadow:
        0 0 0 3px rgba(48, 213, 200, .11) !important;

    outline:
        none !important;
}

body.dark .ac-modal-content option {
    background:
        #111827 !important;

    color:
        #f8fafc !important;
}


/* ------------------------------------------------------------
   12 — MODAL AYIRICILAR
   ------------------------------------------------------------ */

body.dark .ac-modal-content hr {
    border:
        0 !important;

    border-top:
        1px solid rgba(148, 163, 184, .13) !important;

    background:
        transparent !important;
}


/* ------------------------------------------------------------
   13 — MODAL İKONLARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content i,
body.dark .ac-modal-content .ac-icon {
    color:
        #5eead4 !important;
}


/* ------------------------------------------------------------
   14 — SKOR / SONUÇ ALANLARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .score,
body.dark .ac-modal-content .result-score,
body.dark .ac-modal-content .ac-score {
    color:
        #5eead4 !important;
}

body.dark .ac-modal-content .success,
body.dark .ac-modal-content .correct {
    color:
        #4ade80 !important;
}

body.dark .ac-modal-content .warning {
    color:
        #fbbf24 !important;
}

body.dark .ac-modal-content .danger,
body.dark .ac-modal-content .wrong {
    color:
        #fb7185 !important;
}


/* ------------------------------------------------------------
   15 — İLERLEME ÇUBUKLARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .progress,
body.dark .ac-modal-content .progress-bar,
body.dark .ac-modal-content .progress-track {
    background:
        #334155 !important;
}

body.dark .ac-modal-content .progress-fill {
    background:
        linear-gradient(
            90deg,
            #14b8a6,
            #30d5c8
        ) !important;
}


/* ------------------------------------------------------------
   16 — TAG / BADGE
   ------------------------------------------------------------ */

body.dark .ac-modal-content .badge,
body.dark .ac-modal-content .tag,
body.dark .ac-modal-content .pill {
    background:
        rgba(48, 213, 200, .10) !important;

    color:
        #5eead4 !important;

    border:
        1px solid rgba(48, 213, 200, .18) !important;
}


/* ------------------------------------------------------------
   17 — KAPATMA BUTONU
   ------------------------------------------------------------ */

body.dark .ac-modal-content .close,
body.dark .ac-modal-content .close-btn,
body.dark .ac-modal-content .ac-close,
body.dark .ac-modal-content [aria-label="Kapat"] {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border:
        1px solid rgba(148, 163, 184, .16) !important;

    border-radius:
        50% !important;
}

body.dark .ac-modal-content .close:hover,
body.dark .ac-modal-content .close-btn:hover,
body.dark .ac-modal-content .ac-close:hover,
body.dark .ac-modal-content [aria-label="Kapat"]:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}


/* ------------------------------------------------------------
   18 — MODALDAKİ GERİ / DEVAM BUTONLARI
   ------------------------------------------------------------ */

body.dark .ac-modal-content .next,
body.dark .ac-modal-content .next-btn,
body.dark .ac-modal-content .continue,
body.dark .ac-modal-content .continue-btn {
    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #30d5c8
        ) !important;

    color:
        #06201e !important;

    border:
        none !important;

    box-shadow:
        0 8px 22px rgba(20, 184, 166, .18) !important;
}

body.dark .ac-modal-content .next:hover,
body.dark .ac-modal-content .next-btn:hover,
body.dark .ac-modal-content .continue:hover,
body.dark .ac-modal-content .continue-btn:hover {
    background:
        linear-gradient(
            135deg,
            #2dd4bf,
            #5eead4
        ) !important;

    transform:
        translateY(-1px) !important;
}

body.dark .ac-modal-content .back,
body.dark .ac-modal-content .back-btn,
body.dark .ac-modal-content .prev,
body.dark .ac-modal-content .prev-btn {
    background:
        #1e293b !important;

    color:
        #cbd5e1 !important;

    border:
        1px solid rgba(148, 163, 184, .16) !important;
}

body.dark .ac-modal-content .back:hover,
body.dark .ac-modal-content .back-btn:hover,
body.dark .ac-modal-content .prev:hover,
body.dark .ac-modal-content .prev-btn:hover {
    background:
        #334155 !important;

    color:
        #ffffff !important;
}


/* ------------------------------------------------------------
   19 — MODAL İÇERİĞİNDE BEYAZ ARKA PLAN GÜVENLİĞİ
   ------------------------------------------------------------ */



body.dark .ac-modal-content [style*="background: white"],
body.dark .ac-modal-content [style*="background:#fff"],
body.dark .ac-modal-content [style*="background: #fff"],
body.dark .ac-modal-content [style*="background-color: white"],
body.dark .ac-modal-content [style*="background-color:#fff"],
body.dark .ac-modal-content [style*="background-color: #fff"] {
    background:
        #151f31 !important;

    color:
        #e2e8f0 !important;
}


/* ------------------------------------------------------------
   20 — MODALDAKİ TABLO
   ------------------------------------------------------------ */

body.dark .ac-modal-content table {
    background:
        #111827 !important;

    color:
        #cbd5e1 !important;

    border-color:
        rgba(148, 163, 184, .14) !important;
}

body.dark .ac-modal-content th {
    background:
        #172033 !important;

    color:
        #f8fafc !important;

    border-color:
        rgba(148, 163, 184, .14) !important;
}

body.dark .ac-modal-content td {
    color:
        #cbd5e1 !important;

    border-color:
        rgba(148, 163, 184, .10) !important;
}

body.dark .ac-modal-content tr:hover td {
    background:
        #1e293b !important;
}


/* ------------------------------------------------------------
   21 — MODAL LINKLERİ
   ------------------------------------------------------------ */

body.dark .ac-modal-content a {
    color:
        #5eead4 !important;
}

body.dark .ac-modal-content a:hover {
    color:
        #99f6e4 !important;
}


/* ------------------------------------------------------------
   22 — FOCUS
   ------------------------------------------------------------ */

body.dark .ac-modal-content button:focus-visible,
body.dark .ac-modal-content input:focus-visible,
body.dark .ac-modal-content select:focus-visible,
body.dark .ac-modal-content textarea:focus-visible {
    outline:
        2px solid #30d5c8 !important;

    outline-offset:
        2px !important;
}


/* ------------------------------------------------------------
   23 — 3 MODALIN MOBİL DARK MODE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    body.dark .ac-modal-overlay {
        padding:
            12px !important;

        align-items:
            center !important;
    }

    body.dark .ac-modal-content {
        width:
            96% !important;

        max-width:
            96% !important;

        max-height:
            92vh !important;

        padding:
            22px !important;

        border-radius:
            20px !important;
    }

    body.dark .ac-option-btn {
        padding:
            14px 15px !important;

        font-size:
            14px !important;
    }

    body.dark .ac-profession-select-btn {
        padding:
            15px !important;

        font-size:
            14px !important;
    }

    body.dark .ac-vaka-select-btn {
        padding:
            16px !important;

        font-size:
            14px !important;
    }
}


/* ------------------------------------------------------------
   24 — ÇOK KÜÇÜK EKRAN
   ------------------------------------------------------------ */

@media (max-width: 390px) {

    body.dark .ac-modal-content {
        width:
            97% !important;

        max-width:
            97% !important;

        padding:
            17px !important;

        border-radius:
            18px !important;
    }

    body.dark .ac-option-btn {
        padding:
            12px !important;

        font-size:
            13px !important;
    }

    body.dark .ac-profession-select-btn {
        padding:
            13px !important;

        font-size:
            13px !important;
    }

    body.dark .ac-vaka-select-btn {
        padding:
            14px !important;

        font-size:
            13px !important;
    }
}


/* ------------------------------------------------------------
   25 — SON GÜVENLİK KATMANI
   ------------------------------------------------------------ */

body.dark .ac-modal-content,
body.dark .ac-modal-content * {
    border-color:
        rgba(148, 163, 184, .13);
}

body.dark .ac-modal-content {
    color:
        #e2e8f0 !important;
}

body.dark .ac-modal-content h1,
body.dark .ac-modal-content h2,
body.dark .ac-modal-content h3,
body.dark .ac-modal-content h4,
body.dark .ac-modal-content h5,
body.dark .ac-modal-content h6 {
    color:
        #f8fafc !important;
}


/* ============================================================
   MESLEKİ ANALİZ MODALLARI — END
   ============================================================ */

.logo-wrapper {
    position: absolute;
    top: 3px;
    left: 4px;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 150px;
}

.logo {
    width: 150px;
    height: auto;
    display: block;
}

.subtitle {
    margin-top: -29px;
    padding: 0;

    white-space: nowrap;
    font-size: 10px;
    line-height: 15px;
    font-weight: 500;
    color: #6b7890;
}
/* THEME BUTTON */

.theme-toggle{

    width:58px;
    height:50px;

    border-radius:18px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    cursor:pointer;

    transition:0.35s;
}

/* DARK BUTTON */

body.dark .theme-toggle{

    background:#1e293b;
    border-color:#334155;

}

/* ICONS */

.theme-toggle i{

    position:absolute;

    font-size:22px;

    transition:0.35s;
}

/* SUN */

.sun-icon{
    opacity:1;
    transform:rotate(0deg) scale(1);
    color:#f59e0b;
}

/* MOON */

.moon-icon{
    opacity:0;
    transform:rotate(180deg) scale(0);
    color:#f8fafc;
}

/* DARK ACTIVE */

body.dark .sun-icon{

    opacity:0;
    transform:rotate(180deg) scale(0);

}

body.dark .moon-icon{

    opacity:1;
    transform:rotate(0deg) scale(1);

}




*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: 'Inter',sans-serif;
    }


    

    .subtitle{
      margin-left:1px;
      font-size:14px;
      font-weight:700;
      color:#696e86;
      letter-spacing:-0.5px;
    }
.main-content {
    flex: 1;
    overflow-y: auto;
}


    .top-nav{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3px;
height: 50px;

    }

    .nav-links{

  display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100%;
    gap: 20px;
}

.nav-links a {
    margin-right: 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}

.nav-links a.active {
    color: var(--primary-hover);
    border-bottom: 2px solid var(--primary-hover);
    padding-bottom: 1px;
}
/* Hero Banner & Three.js Konteyneri */
.hero-banner {
   position:relative;
    background-color: var(--hero-bg);
    border-radius: 24px;
    padding: 0px 60px;
    color: rgb(0, 0, 0);
    overflow: hidden;
    display: flex;
    min-height: 80px;
}

#three-canvas-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 70%;
    top: 10px;
    
}

.hero-content h1 {
    font-size: 2.5rem;
    margin: 10px 0;
}

.highlight {
    color: #30D5C8;
}

.search-bar {
    display: flex;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
}

.search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: rgb(5, 0, 0);
    padding: 10px;
    outline: none;
}

.search-bar button {
    background-color: var(--primary-blue);
    border: none;
    color: #30d5c8;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
}

.hero-right{
    position:relative;
    width:700px;
    height:300px;
    margin:auto;
    top: 22px;
}

/* FLOATING */

.floating{
    animation:float 5s ease-in-out infinite;
}

.floating:nth-child(2){
    animation-delay:1s;
}

.floating:nth-child(3){
    animation-delay:2s;
}

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* CARD */

/* =========================
   PREMIUM GLASS CARD
========================= */

.card{

    position:absolute;

    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.65)
    );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border:
    1px solid rgba(255,255,255,.7);

    border-radius:32px;

    overflow:hidden;

    box-shadow:

    /* dış shadow */
    0 15px 35px rgba(17,24,39,.05),

    /* büyük shadow */
    0 30px 80px rgba(17,24,39,.10),

    /* mor glow */
    0 0 40px rgba(123,97,255,.08);

    transition:
    transform .4s ease,
    box-shadow .4s ease;
}

/* LIGHT REFLECTION */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.65),
      rgba(255,255,255,0)
    );

    pointer-events:none;
}

/* INNER GLOW */

.card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    radial-gradient(
      rgba(97, 223, 255, 0.15),
      transparent 70%
    );

    top:-70px;
    right:-60px;

    pointer-events:none;
}

/* HOVER */

.card:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:

    0 10px 45px rgba(17, 34, 39, 0.08),

    0 45px 100px rgba(17, 36, 39, 0.14),

    0 0 60px rgba(97, 250, 255, 0.18);
}
/* ANALYTICS */

.analytics-card{
    width:300px;
    height:220px;
    left:80px;
    top:10px;
    overflow:hidden;
    
}

.grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(#f1f1f1 1px, transparent 1px),
    linear-gradient(90deg,#f1f1f1 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.6;
}

.analytics-card svg{
    width:90%;
    height:90%;
    position:relative;
    z-index:2;
}

.analytics-card polyline{

    fill:none;

    stroke:#30D5C8;

    stroke-width:6;

    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
    drop-shadow(
      0 0 10px rgba(97, 255, 247, 0.45)
    );
}

.analytics-card circle{

    fill:#30D5C8;

    filter:
    drop-shadow(
      0 0 12px rgba(6, 217, 224, 0.6)
    );
}

/* PIE CARD */

.pie-card{
    width:200px;
    height:200px;
    right:80px;
    top: -20px;
    padding:28px;
}

.pie{

    width:100px;
    height:100px;

    border-radius:50%;

    background:
    conic-gradient(
      #30D5C8 0 35%,
      #a9f0ea 35% 65%,
      #e8ffff 65% 100%
    );

    box-shadow:

    inset 0 3px 10px rgba(212, 219, 221, 0.45),

    0 10px 25px rgba(13, 185, 207, 0.25);
}

.stats{
    margin-top:20px;
}

.stats span{
    display:block;
    height:100px;
    border-radius:20px;
    background:#ebeeee;
    margin-bottom:10px;
}

.stats span:nth-child(1){
    width:120px;
}

.stats span:nth-child(2){
    width:70px;
}

.stats span:nth-child(3){
    width:100px;
}



.music-card {
  background: #eafffd; 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%; 
  max-width: 180px; 
 margin-left: 650px;
 height: 200px;
 z-index: 9999;
}

.music-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 12px;
}

.album-art {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #30D5C8, #30D5C8);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 210, 247, 0.3);
}

.track-info {
  flex: 1;
}

.track-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
}

.track-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #86898b;
}

.sound-btn {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.sound-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.playlist {
 
  
  
  max-height: 100px;      
  overflow-y: auto;       
  padding-right: 4px;     


/* Apple Tarzı Minimalist Kaydırma Çubuğu Tasarımı */
.playlist::-webkit-scrollbar {
  width: 5px;             
}

.playlist::-webkit-scrollbar-track {
  background: transparent; 
}

.playlist::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 10px;           
}

.playlist::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2); 
}
}

.track {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s ease;
}

.track:hover {
  background: rgba(0, 0, 0, 0.04);
}

.track.active {
  background: rgba(122, 19, 240, 0.1);
  color: #30D5C8;
  font-weight: 600;
}

/* SVG ILLUSTRATION */

.illustration{

    position:absolute;

    width:470px;

    right:40px;
    bottom:1px;

    z-index:2;

    filter:

    drop-shadow(
      0 25px 45px rgba(0,0,0,.10)
    )

    saturate(1.05)

    contrast(1.02);

}
/* RESPONSIVE */

@media(max-width:1100px){

    .hero-right{
        transform:scale(.8);
        transform-origin:center top;
    }

}
/* KEŞFETMEYE DEVAM ET */

.continue-section{
    width:100%;
    margin-top:25px;
  
}

.section-title{
    font-size:32px;
    font-weight:900;
    color:#111827;
    margin-bottom:20px;
}

.continue-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
}

/* CARD */

.continue-card{
    background:#fff;
    border:1px solid #e9eefc;
    border-radius:26px;
    padding:20px;
    transition:0.3s;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    min-height:340px;
}

.continue-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(70,90,170,0.08);
}

/* CONTENT */

.card-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    height:100%;
}

.card-text{
    flex:1;
}

.card-text h3{
    font-size:20px;
    line-height:1.1;
    color:#0f172a;
    margin-bottom:10px;
    font-weight:700;
}

.card-text p{
    font-size:13px;
    line-height:1.7;
    color:#64748b;
    margin-bottom:28px;
}

/* BUTTON */

.open-btn{
    border:none;
    background:#eef2ff;
    color:#30D5C8;
    padding:13px 24px;
    border-radius:14px;
    font-size:15px;
    font-weight:600;
    transition:0.3s;
    cursor:pointer;
}

.open-btn:hover{
    background:#30D5C8;
    color:#fff;
}

/* ICON AREA */

.card-image{
    width:160px;
    height:160px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:75px;
    flex-shrink:0;
}

/* COLORS */

.blue-card{
    background:linear-gradient(
    135deg,
    #dbeafe,
    #eef2ff);
}

.green-card{
    background:linear-gradient(
    135deg,
    #dcfce7,
    #ecfdf5);
}

.purple-card{
    background:linear-gradient(
    135deg,
    #ede9fe,
    #f5f3ff);
}

/* RESPONSIVE */

@media(max-width:1200px){

    .continue-grid{
        grid-template-columns:1fr;
    }

    .card-text h3{
        font-size:26px;
    }

    .card-image{
        width:120px;
        height:120px;
        font-size:55px;
    }

}

@media(max-width:650px){

    .card-content{
        flex-direction:column;
        text-align:center;
    }

}


.dashboard-dunya {
            width: 100%;
            height: 50%;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            padding: 24px;
        }

        /* Üst Menü / Header */
        .header-dunya {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 2px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .header-dunya h2 {
            font-size: 22px;
            font-weight: 700;
            color: #0f172a;
        }

        .tabs {
            display: flex;
            background: #f1f5f9;
            padding: 4px;
            border-radius: 8px;
            gap: 4px;
        }

        .tab-btn {
            background: transparent;
            border: none;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            color: #64748b;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .tab-btn.active {
            background: #ffffff;
            color: #00a4b4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            font-weight: 600;
        }

        /* Grid Yapısı */
        .grid-container {
            display: grid;
            grid-template-columns: 2fr 1.5fr 1fr;
            gap: 20px;
        }

        @media (max-width: 1024px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }

        /* Kart Tasarımları */
        .card-dunya {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .card-dunya h3 {
            font-size: 15px;
            font-weight: 600;
            color: #334155;
            margin-bottom: 16px;
        }

        .chart-placeholder {
            width: 100%;
            height: 320px;
            min-height: 320px;
        }

        /* Sağ Liste Tasarımı */
        .list-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid #f1f5f9;
        }

        .list-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .rank {
            width: 26px;
            height: 26px;
            background: #e0e7ff;
            color: #30D5C8;
            font-weight: 600;
            font-size: 13px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .country-name {
            font-size: 14px;
            font-weight: 500;
            color: #1e293b;
        }

        .value {
            font-size: 14px;
            font-weight: 600;
            color: #30d5c8;
        }



/*İçgörü kısmı*
    
 */


.insight-card{
 text-align: center;
  width: 700px;
  margin: 0 auto;
}

.insight-header{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#64748b;
    margin-bottom:22px;
}

.insight-text{
    font-size:42px;
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:700;
    color:#000;
    margin-bottom:26px;
}

.source{
    font-size:15px;
    line-height:1.7;
    color:#64748b;
}

.dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:20px;
}

.dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ccc;
    cursor:pointer;
    transition:.3s;
}

.dots span.active{
    width:28px;
    border-radius:10px;
    background:#30D5C8;
}

/* =========================
   ik ortaklık CARD
========================= */

.community-section{
    max-width:640px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:28px;
    padding:70px;
    box-shadow:
    0 8px 25px rgba(0,0,0,0.03);
    justify-self:center;
}

/* TOP */

.community-top{
    display:flex;
    align-items:center;
    gap:18px;
}

/* VISUAL */

.community-visual{
    position:relative;
    width:110px;
    height:80px;
    flex-shrink:0;
}

.big-chat{
    position:absolute;
    width:72px;
    height:56px;
    background:#fff;
    border-radius:16px;
    left:0;
    top:0;
    padding:10px;
    box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.big-chat::after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    background:#fff;
    bottom:-4px;
    left:14px;
    transform:rotate(45deg);
}

.small-chat{
    position:absolute;
    width:56px;
    height:44px;
    background:linear-gradient(135deg,#30D5C8,#00a4b4);
    border-radius:14px;
    right:0;
    bottom:0;
    padding:10px;
}

.small-chat::after{
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    background:#30D5C8;
    bottom:-3px;
    right:12px;
    transform:rotate(45deg);
}

.line{
    width:100%;
    height:5px;
    background:#dbe3f0;
    border-radius:20px;
    margin-bottom:7px;
}

.line.short{
    width:70%;
}

.line.white{
    background:rgba(255,255,255,0.9);
}

.stars{
    font-size:10px;
    color:#ffbf47;
    letter-spacing:1px;
}

/* CONTENT */

.community-content h3{
    font-size:18px;
    line-height:1.18;
    color:#111827;
    margin-bottom:8px;
    letter-spacing:-0.5px;
}

.community-content p{
    font-size:14px;
    color:#6b7280;
    line-height:1.5;
}

/* PARTNER */

.partner-area{
    margin-top:16px;
    border:1px dashed #dbe3ff;
    border-radius:16px;
    padding:12px 14px;
    background:#fafbff;
}

.partner-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.partner-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#eef2ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#30D5C8;
    font-size:14px;
    flex-shrink:0;
}

.partner-text h4{
    font-size:15px;
    color:#111827;
    margin-bottom:3px;
}

.partner-text p{
    font-size:13px;
    color:#6b7280;
    line-height:1.4;
}


/* BOXES */

.mini-boxes{
    margin-bottom:4px;
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 20px;
    min-height: 100px;
}

.mini-box{
    flex:1;
    border:1px solid #eef2f7;
    border-radius:16px;
    padding:2px 2px;
    text-align:center;
    background:#fff;
    position:relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.mini-box:hover{
    transform:translateY(-6px);

    border-color:#bffffc;

    box-shadow:
    0 12px 30px rgba(91,92,240,0.10);
}


.mini-icon{
    width:20px;
    height:20px;
    border-radius:16px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    transition:
    transform .25s ease,
    background .25s ease;
}
.mini-box:hover .mini-icon{
    transform:scale(1.08);
}
.mini-box:hover h3{
    color:#30D5C8;
}
.mini-box h3{
    transition:.25s;
}


.bag-icon{
    background:#eef2ff;
    color:#30d5c8;
}

.calendar-icon{
    background:#eef2ff;
    color:#30d5c8;
}

.visitor-icon{
    background:#eef2ff;
    color:#30d5c8;
}

.increase-icon{
    background:#eef2ff;
    color: #30d5c8;
}

.mini-box h3{
    font-size:18px;
    margin-bottom:8px;
    color:#000;
}

.mini-box p{
    font-size:13px;
    line-height:1.4;
    color:#64748b;
}

.live-dot {
    width: 10px;
    height: 10px;
    background: #4ecec3;
    border-radius: 50%;
    display: inline-block;
    animation: livePulse 2.2s infinite;
}

@keyframes livePulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    }

    70% {
        opacity: .8;
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* LINKS */

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:22px;
}

.footer-links a{
    text-decoration:none;
    color:#111827;
    font-size:14px;
    transition:.2s;
}

.footer-links a:hover{
    color:#008695;
}

/* COPYRIGHT */

.copyright{
    font-size:13px;
    line-height:1.8;
    color:#64748b;
    margin-bottom:24px;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1300px){

    .footer-section{
        grid-template-columns:1fr;
        gap:30px;
    }

    .insight-card,
    .community-section,
    .footer-right{
        max-width:100%;
        width:100%;
        justify-self:start;
    }

    .insight-text{
        font-size:38px;
    }

    .footer-right{
        max-width:none;
    }
}

@media(max-width:768px){

    .footer-section{
        padding:24px 20px;
    }

    .community-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .mini-boxes{
        flex-wrap:wrap;
    }

    .mini-box{
        min-width:100px;
    }

    .insight-text{
        font-size:30px;
    }

    .logo-son{
        font-size:52px;
    }
}




/* OVERLAY */
/* =====================================================
   GLOBAL KARİYER MODALI 2
   ===================================================== */

.global-modal-overlay-2 {
    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, .22);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: .3s ease;

    z-index: 99998;
}

.global-modal-overlay-2.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   MODAL KUTUSU
   ===================================================== */

.global-modal-box-2 {
    width: 950px;
    max-width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    background: #fff;

    border: 1px solid #eef2f7;

    border-radius: 28px;

    padding: 38px;

    position: relative;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .16);

    transform: translateY(15px) scale(.98);

    transition: .3s ease;
}

.global-modal-overlay-2.active .global-modal-box-2 {
    transform: translateY(0) scale(1);
}


/* =====================================================
   KAPATMA
   ===================================================== */

.global-close-btn-2 {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #f1f5f9;

    color: #475569;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 17px;

    transition: .2s ease;

    z-index: 5;
}

.global-close-btn-2:hover {
    background: #e2e8f0;
    transform: rotate(90deg);
}


/* =====================================================
   HEADER
   ===================================================== */

.global-header-2 {
    display: flex;
    align-items: center;

    gap: 16px;

    padding-right: 50px;

    margin-bottom: 30px;
}

.global-title-icon-2 {
    width: 56px;
    height: 56px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: #eefdfb;

    color: #30D5C8;

    font-size: 24px;
}

.global-kicker-2 {
    display: block;

    color: #30D5C8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

.global-header-2 h2 {
    margin: 0;

    color: #0f172a;

    font-size: 25px;

    font-weight: 800;
}

.global-header-2 p {
    margin: 6px 0 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;
}


/* =====================================================
   İÇERİK
   ===================================================== */

.global-content-2 {
    display: grid;

    grid-template-columns: 1fr 1.45fr;

    gap: 20px;

    width: 100%;
}


/* =====================================================
   PANELLER
   ===================================================== */

.global-panel-2 {
    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 22px;

    padding: 24px;
}

.panel-header-2 {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 25px;
}

.panel-header-2 h3 {
    margin: 0;

    color: #0f172a;

    font-size: 16px;

    font-weight: 750;
}

.panel-header-2 span {
    display: block;

    color: #94a3b8;

    font-size: 12px;

    margin-top: 5px;
}

.panel-header-2 > i {
    color: #94a3b8;

    font-size: 18px;
}


/* =====================================================
   DAİRE GRAFİĞİ
   ===================================================== */

.global-chart-area-2 {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;
}

.circle-chart-2 {
    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        conic-gradient(
            #30D5C8 0 30%,
            #16A34A 30% 50%,
            #EA580C 50% 65%,
            #cbd5e1 65% 100%
        );

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;
}

.circle-chart-2::before {
    content: "";

    position: absolute;

    width: 112px;
    height: 112px;

    background: #f8fafc;

    border-radius: 50%;
}

.circle-chart-center-2 {
    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.circle-chart-center-2 strong {
    font-size: 24px;

    color: #0f172a;

    font-weight: 800;
}

.circle-chart-center-2 span {
    color: #94a3b8;

    font-size: 11px;

    margin-top: 2px;
}


/* =====================================================
   LEGEND
   ===================================================== */

.legend-2 {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.legend-item-2 {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    background: #fff;

    border-radius: 13px;

    border: 1px solid #eef2f7;
}

.legend-icon-2 {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 14px;
}

.technology-2 {
    background: #eef4ff;
    color: #30D5C8;
}

.health-2 {
    background: #ecfdf5;
    color: #16A34A;
}

.engineering-2 {
    background: #fff7ed;
    color: #ea580c;
}

.other-2 {
    background: #f1f5f9;
    color: #64748b;
}

.legend-info-2 {
    flex: 1;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.legend-info-2 span {
    color: #475569;

    font-size: 13px;

    font-weight: 600;
}

.legend-info-2 strong {
    color: #0f172a;

    font-size: 13px;
}


/* =====================================================
   ÜLKE
   ===================================================== */

.country-2 {
    padding: 15px 0;

    border-bottom: 1px solid #e2e8f0;
}

.country-2:first-of-type {
    padding-top: 0;
}

.country-2:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.country-header-2 {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;
}

.country-header-2 strong {
    color: #0f172a;

    font-size: 13px;
}

.country-header-2 span {
    color: #94a3b8;

    font-size: 11px;
}


/* =====================================================
   TALEP BARLARI
   ===================================================== */

.demand-row-2 {
    display: grid;

    grid-template-columns: 72px 1fr 36px;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;
}

.demand-row-2:last-child {
    margin-bottom: 0;
}

.demand-label-2 {
    color: #64748b;

    font-size: 11px;

    font-weight: 600;
}

.demand-track-2 {
    height: 7px;

    background: #e2e8f0;

    border-radius: 20px;

    overflow: hidden;
}

.demand-bar-2 {
    height: 100%;

    width: 0;

    border-radius: 20px;

    transition:
        width 1s cubic-bezier(.22, 1, .36, 1);
}

.technology-bar-2 {
    background: #30D5C8;
}

.health-bar-2 {
    background: #16A34A;
}

.engineering-bar-2 {
    background: #EA580C;
}

.other-bar-2 {
    background: #94a3b8;
}

.demand-row-2 > strong {
    color: #475569;

    font-size: 11px;

    text-align: right;
}


/* =====================================================
   ALT BİLGİ
   ===================================================== */

.global-note-2 {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    padding: 13px 15px;

    border-radius: 13px;

    background: #f8fafc;

    border: 1px solid #eef2f7;

    color: #94a3b8;

    font-size: 11px;
}

.global-note-2 i {
    color: #30D5C8;

    font-size: 14px;
}


/* =====================================================
   SCROLLBAR
   ===================================================== */

.global-modal-box-2::-webkit-scrollbar {
    width: 6px;
}

.global-modal-box-2::-webkit-scrollbar-track {
    background: transparent;
}

.global-modal-box-2::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 20px;
}


/* =====================================================
   MOBİL
   ===================================================== */

@media (max-width: 768px) {

    .global-modal-box-2 {
        padding: 25px 18px;

        border-radius: 22px;

        max-height: 92vh;
    }

    .global-header-2 h2 {
        font-size: 21px;
    }

    .global-content-2 {
        grid-template-columns: 1fr;
    }

    .circle-chart-2 {
        width: 150px;
        height: 150px;
    }

    .circle-chart-2::before {
        width: 94px;
        height: 94px;
    }

    .demand-row-2 {
        grid-template-columns: 65px 1fr 34px;
    }
}
/* =====================================================
   KARİYER MODALLARI
   ===================================================== */

.career-modal,
.detail-modal {

    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, 0.18);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 25px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index: 99999;
}


.career-modal.active,
.detail-modal.active {

    opacity: 1;
    visibility: visible;
}


/* =====================================================
   ANA MODAL
   ===================================================== */

.career-modal-content {

    width: 900px;
    max-width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    background: #fff;

    border: 1px solid #eef2f7;

    border-radius: 28px;

    padding: 42px;

    position: relative;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .16);

    transform: translateY(15px) scale(.98);

    transition: transform .3s ease;
}


.career-modal.active .career-modal-content {

    transform: translateY(0) scale(1);
}


/* =====================================================
   DETAY MODALI
   ===================================================== */

.detail-content {

    width: 900px;
    max-width: 100%;

    max-height: 88vh;

    overflow-y: auto;

    background: #fff;

    border: 1px solid #eef2f7;

    border-radius: 28px;

    padding: 42px;

    position: relative;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .16);

    transform: translateY(15px) scale(.98);

    transition: transform .3s ease;
}


.detail-modal.active .detail-content {

    transform: translateY(0) scale(1);
}


/* =====================================================
   KAPATMA BUTONU
   ===================================================== */

.close-modal {

    position: absolute;

    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    border: 1px solid #e2e8f0;

    border-radius: 50%;

    background: #f8fafc;

    color: #64748b;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 16px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.close-modal:hover {

    background: #30D5C8;

    color: #fff;

    transform: rotate(90deg);
}


/* =====================================================
   ANA MODAL BAŞLIK
   ===================================================== */

.career-modal-content h1 {

    margin: 0;

    color: #0f172a;

    font-size: 28px;

    font-weight: 800;

    letter-spacing: -.5px;
}


.career-subtitle {

    color: #64748b;

    margin-top: 10px;
    margin-bottom: 32px;

    line-height: 1.7;

    font-size: 15px;
}


/* =====================================================
   KARİYER KARTLARI
   ===================================================== */

.career-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


.career-box {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    padding: 25px;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.career-box:hover {

    transform: translateY(-5px);

    background: #fff;

    border-color: rgba(48, 213, 200, .35);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .08);
}


/* =====================================================
   KARİYER İKONU
   ===================================================== */

.career-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #eefdfb;

    color: #30D5C8;

    font-size: 25px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.career-box:hover .career-icon {

    transform: scale(1.08);

    background: #30D5C8;
}



.career-box:hover .career-icon {

    transform: scale(1.08);
}


.career-box h3 {

    margin-top: 18px;

    margin-bottom: 8px;

    color: #0f172a;

    font-size: 17px;

    font-weight: 700;
}


.career-box p {

    margin: 0;

    color: #64748b;

    line-height: 1.65;

    font-size: 14px;
}


/* =====================================================
   DETAY BAŞLIĞI
   ===================================================== */

.detail-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    padding-right: 45px;

    margin-bottom: 30px;
}


.detail-heading-icon {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #eefdfb;

    color: #30D5C8;

    font-size: 22px;
}


.detail-category {

    display: block;

    color: #30D5C8;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;

    margin-bottom: 4px;
}


.detail-heading h1 {

    margin: 0;

    color: #0f172a;

    font-size: 26px;

    font-weight: 800;
}


/* =====================================================
   DETAY METİNLERİ
   ===================================================== */

.detail-body {

    color: #475569;

    font-size: 15px;

    line-height: 1.8;
}


.detail-body p {

    margin: 0 0 18px;
}


.detail-body h3 {

    color: #0f172a;

    font-size: 18px;

    margin-top: 30px;

    margin-bottom: 12px;

    font-weight: 750;
}


/* =====================================================
   DETAY LİSTELERİ
   ===================================================== */

.detail-body ul {

    margin: 10px 0 22px;

    padding-left: 0;

    list-style: none;
}


.detail-body li {

    position: relative;

    padding-left: 28px;

    margin-bottom: 11px;

    color: #475569;
}


.detail-body li::before {

    content: "\f058";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    left: 0;
    top: 2px;

    color: #30D5C8;

    font-size: 15px;
}


/* =====================================================
   ÖNEMLİ BİLGİ KUTUSU
   ===================================================== */

.detail-highlight {

    display: flex;

    gap: 14px;

    align-items: flex-start;

    margin-top: 30px;

    padding: 18px 20px;

    border-radius: 16px;

    background: #f0fdfa;

    border: 1px solid #ccfbf1;
}


.detail-highlight i {

    color: #30D5C8;

    font-size: 20px;

    margin-top: 3px;
}


.detail-highlight p {

    margin: 0;

    color: #475569;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================================
   SCROLLBAR
   ===================================================== */

.career-modal-content::-webkit-scrollbar,
.detail-content::-webkit-scrollbar {

    width: 7px;
}


.career-modal-content::-webkit-scrollbar-track,
.detail-content::-webkit-scrollbar-track {

    background: transparent;
}


.career-modal-content::-webkit-scrollbar-thumb,
.detail-content::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 20px;
}


.career-modal-content::-webkit-scrollbar-thumb:hover,
.detail-content::-webkit-scrollbar-thumb:hover {

    background: #94a3b8;
}


/* =====================================================
   MOBİL
   ===================================================== */

@media (max-width: 768px) {

    .career-modal,
    .detail-modal {

        padding: 15px;

        align-items: center;
    }


    .career-modal-content,
    .detail-content {

        max-height: 92vh;

        padding: 28px 22px;

        border-radius: 22px;
    }


    .career-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .career-modal-content h1 {

        font-size: 24px;
    }


    .detail-heading h1 {

        font-size: 22px;
    }


    .detail-heading {

        gap: 12px;

        margin-bottom: 25px;
    }


    .detail-heading-icon {

        width: 48px;
        height: 48px;

        font-size: 19px;
    }


    .detail-body {

        font-size: 14px;

        line-height: 1.75;
    }

}



.university-modal{

    position:fixed;
    inset:0;

    background:rgba(255,255,255,0.18);

    backdrop-filter:blur(14px);

    display:flex;

    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:99999;
}

.university-modal.active{

    opacity:1;
    visibility:visible;
}

.university-content{

    width:1000px;
    max-width:92%;

    background:white;

    border-radius:34px;

    padding:45px;

    position:relative;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.08);
}

.university-content h1{

    font-size:52px;

    color:#0f172a;

    margin-bottom:10px;
}

.uni-subtitle{

    color:#64748b;

    margin-bottom:45px;

    line-height:1.7;
}

.chart-area{

    display:flex;

    flex-direction:column;

    gap:22px;
}

.chart-row{

    display:grid;

    grid-template-columns:220px 1fr 70px;

    align-items:center;

    gap:20px;
}

.chart-row span{

    font-weight:600;

    color:#0f172a;
}

.bar-uni{

    width:100%;
    height:18px;

    background:#e2e8f0;

    border-radius:999px;

    overflow:hidden;

    position:relative;
}

.fill{

    display:block;

    min-height:18px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #4ecec3,
        #30D5C8
    );
}

.fill-1{width:92%;}
.fill-2{width:84%;}
.fill-3{width:76%;}
.fill-4{width:71%;}
.fill-5{width:65%;}

.chart-row strong{
    color:#008695;
}

.trend-grid{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:20px;

    margin-top:50px;
}

.trend-card{

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:24px;

    padding:28px;

    transition:.25s;
}

.trend-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.06);
}

.trend-card span{
    font-size:36px;
}

.trend-card h3{

    margin-top:15px;
    margin-bottom:10px;

    color:#0f172a;
}

.trend-card p{

    color:#64748b;

    line-height:1.7;
}





/* GLOBAL BOX */

.global-box{

    width:100%;

    background:white;

}

/* CONTENT */

.global-content{

    display:flex;

    gap:25px;

    margin-top:25px;

    flex-wrap:wrap;

}

/* CARDS */

.left-card,
.right-card{

    flex:1;

    min-width:320px;

    background:#f8faff;

    border-radius:24px;

    padding:24px;

}

/* CIRCLE */

.circle-chart{

    width:220px;
    height:220px;

    margin:25px auto;

    border-radius:50%;

    background:
    conic-gradient(
        #4d7cff 0% 45%,
        #000000 45% 75%,
        #30D5C8 75% 100%
    );

    position:relative;

}

.circle-chart{
    position: relative;
}

.circle-chart::after{
    content: "100%";

    width: 90px;
    height: 90px;

    background: white;
    border-radius: 50%;

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 22px;
    font-weight: bold;
    color: #333;
}

/* LEGEND */

.legend{

    margin-top:20px;

}

.legend-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:white;

    padding:14px;

    border-radius:14px;

    margin-bottom:12px;

}

/* COLORS */

.legend-item span{

    width:22px;
    height:22px;

    border-radius:50%;

    display:inline-block;

    margin-right:10px;

}

.blue{
    background:#4d7cff;
}

.green{
    background:#000000;
}

.orange{
    background:#4F46E5;
}

/* COUNTRY */

.country{

    margin-bottom:25px;

}

.country-name{

    font-weight:600;

    margin-bottom:10px;

    color:#1c2660;

}

/* BAR */

.bar{

    height:16px;

    border-radius:30px;

    margin-bottom:10px;

    color:white;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:8px;

    width:0;

    transition:1s ease;

}

.blue-bar{
    background:#4d7cff;
}

.green-bar{
    background:#000000;
}

.orange-bar{
    background:#4F46E5;
}








/* Detay Sayfası Genel Konteyner - Açık Tema */
.job-details-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    color: #333; /* Koyu gri metin rengi */
    background-color: #fcfcfc; /* Çok açık gri/beyaz arka plan */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sayfadan ayıran hafif gölge */
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


.job-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin:20px 0 30px;
}

.job-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    background:linear-gradient(135deg,#30D5C8,#00a4b4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:32px;
    box-shadow:0 10px 25px rgba(79,70,229,.25);
    flex-shrink:0;
}

.job-info{
    flex:1;
}

.job-info p{
    margin:0;
    color:#6B7280;
    line-height:1.7;
    font-size:15px;
}








/* Geri Dön Butonu */
.back-btn {
    background: #f1f1f1;
    border: 1px solid #ddd;
    color: #444;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-btn:hover {
    background: #e4e4e4;
    color: #000;
}

/* Başlık */
.detail-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #111;
    font-weight: 800;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

/* Metrikler Satırı (Yan Yana Kartlar) */
.metric-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 24px;
    transition: all .25s ease;
    box-shadow: 0 8px 25px rgba(15,23,42,.05);

    position: relative;
    z-index: 11;
    pointer-events: auto;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 35px rgba(15,23,42,.10);
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;

    position: relative;
    z-index: 10;
}
.metric-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 18px;
}

.metric-label i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #EEF4FF;
    color: #30D5C8;
    font-size: 18px;
}

.metric-value {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    padding-left: 55px; 
}
.metric-card:nth-child(1) .metric-label i{
    background:#EEF4FF;
    color:#30D5C8;
}

.metric-card:nth-child(2) .metric-label i{
    background:#ECFDF5;
    color:#16A34A;
}

.metric-card:nth-child(3) .metric-label i{
    background:#FFF7ED;
    color:#EA580C;
}

.metric-card:nth-child(4) .metric-label i{
    background:#FEF2F2;
    color:#DC2626;
}
/* Orta Satır Düzeni (Grafik ve Yorumlar) */
.middle-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .middle-row { grid-template-columns: 1fr; }
}

/* Genel Kutu Stilleri */
.chart-box, .comments-box, .day-in-life, .pros-box, .cons-box {
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    padding: 30px;
    border-radius: 16px;
}

.chart-box h3, .comments-box h3, .day-in-life h3, .pros-box h3, .cons-box h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #222;
    font-weight: 700;
}

/* Yorumlar Alanı */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-item {
    background: #f9fbfb;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #30D5C8;
}

.comment-item p {
    font-size: 0.95rem;
    color: #444;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 8px;
}

.comment-author {
    display: block;
    font-weight: bold;
    font-size: 0.85rem;
    color: #888;
}

/* Alt Bölüm Düzeni */
.bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .bottom-section { grid-template-columns: 1fr; }
}

.day-in-life p {
    line-height: 1.7;
    color: #555;
    font-size: 1rem;
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Avantajlar / Dezavantajlar Listesi */
.pros-box ul, .cons-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pros-box li, .cons-box li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    position: relative;
    padding-left: 28px;
    color: #444;
    line-height: 1.4;
}

.pros-box li::before { 
    content: "\f058"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; 
    left: 0; 
    color: #28a745; 
    font-size: 1.1rem;
}

.cons-box li::before { 
    content: "\f057"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; 
    left: 0; 
    color: #dc3545; 
    font-size: 1.1rem;
}






/* --- APPLE STİLİ TAM EKRAN MODAL --- */
.apple-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8.5vh; 
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.apple-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Kapatma Butonu */
.close-modal-btn {
    position: absolute;
    top: 40px;
    right: 50px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}
.close-modal-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

/* Modal İçerik Kutusu */
.modal-content-wrapper {
    width: 100%;
    padding: 0 10px;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-modal.active .modal-content-wrapper {
    transform: translateY(0); 
}

/* Devasa Arama Çubuğu */
.modal-search-container {
    display: flex;
    align-items: center;
    border-bottom: 3px solid #e0e0e0;
    padding-bottom: 20px;
    transition: border-color 0.3s;
}
.modal-search-container:focus-within {
    border-color: #30D5C8; 
}
.modal-search-container .search-icon {
    font-size: 2.5rem;
    color: #a0a0a0;
    margin-right: 20px;
}
#modalJobInput {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-size: 3rem; 
    font-weight: 700;
    color: #111;
    outline: none;
    letter-spacing: -1px;
}
#modalJobInput::placeholder {
    color: #ccc;
    font-weight: 500;
}

/* Arama Önerileri Listesi */
.modal-suggestions {
    margin-top: 10px;
    max-height: 350px;
    overflow-y: auto;
}
.modal-suggestion-item {
    padding: 15px 1px;
    font-size: 1.4rem;
    color: #333;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 15px;
}
.modal-suggestion-item:hover {
    background: #f4fcfa;
    color: #30D5C8;
    padding-left: 30px;
}

/* Popüler Kapsüller (Pills) */
.popular-categories {
    margin-top: 35px;
    animation: fadeIn 0.8s ease;
}
.popular-categories h3 {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 20px;
    font-weight: 500;
}
.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.job-pill {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1.1rem;
    color: #444;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.job-pill:hover {
    background: #30D5C8;
    color: #fff;
    border-color: #30D5C8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(93, 0, 243, 0.3);
}

/* Scroll Ayarı */
.modal-suggestions::-webkit-scrollbar { width: 6px; }
.modal-suggestions::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; }



/* --- DİĞER MESLEKLER IZGARASI (GRID) --- */
.other-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    margin-top: 15px;
    padding-bottom: 40px;
}

.other-job-card {
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #eaeaea;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
   height: 60px;
}

.other-job-card i {
    color: #a0a0a0;
    transition: color 0.3s ease;
}

.other-job-card:hover {
    background: #ffffff;
    border-color: #30D5C8;
    color: #30D5C8;
    box-shadow: 0 8px 24px rgba(194, 129, 255, 0.06);
    transform: translateY(-3px);
}

.other-job-card:hover i {
    color: #30D5C8;
}


/* Ana Kapsayıcı ve Apple Tipografisi SİMÜLATÖR*/
.apple-career-module {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 4px 2px;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Başlık Alanı */
.ac-header {
  text-align: center;
  margin-bottom: 8px;
}

.ac-header h2 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.005em; 
  color: #1d1d1f;
  margin-bottom: 12px;
}

.ac-header p {
  font-size: 15px;
  line-height: 0.90;
  color: #86868b;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Kartların Dizilimi */
.ac-cards-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

/* Apple Tarzı Widget/Kart Tasarımı (Glassmorphism & Soft Shadow) */
.ac-card {
  background: rgba(255, 255, 255, 0.65); 
  backdrop-filter: saturate(180%) blur(20px); 
  -webkit-backdrop-filter: saturate(180%) blur(20px); 
  border: 1px solid rgba(255, 255, 255, 0.5); 
  border-radius: 24px; 
  padding: 3px 2px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


.ac-card:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* İkonlar */
.ac-icon {
  font-size: 42px;
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

/* Kart İçeriği */
.ac-card h3 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.ac-card p {
  font-size: 12px;
  line-height: 1.5;
  color: #515154;
  margin-bottom: 32px;
  flex-grow: 1;
}

/*(Pill) Butonlar */
.ac-btn {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 980px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s ease, transform 0.2s ease;
}

.ac-btn:hover {
  background:#718096;
}

.ac-btn:active {
  transform: scale(0.96);
}


/* Responsive Düzenleme */
@media (max-width: 992px) {
  .ac-cards-container {
    flex-direction: column;
  }
  .ac-card {
    padding: 24px 20px;
  }
}


/* Modal Arka Planı (Blur Efektli Overlay) */
.ac-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3); 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal Açıldığında Çalışacak Animasyon */
.ac-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modalın İçerik Kutusu */
.ac-modal-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 40px;
}

/* Modal İçeriği Açılma Hissi */
.ac-modal-overlay.active .ac-modal-content {
  transform: scale(1) translateY(0);
}

/* Test Ekranı Seçenek Butonları */
.ac-option-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 16px;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  width: 100%;
}

.ac-option-btn:hover {
  background: #f5f5f7;
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateX(4px);
}





/* 2. Kısım Meslek Seçim Butonları */
.ac-profession-select-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  padding: 18px;
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.ac-profession-select-btn:hover {
  background: #0071e3; /* Üzerine gelince Apple mavisine döner */
  color: #ffffff;
  border-color: #0071e3;
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.2);
}



/* Vaka Seçim Kartları */
.ac-vaka-select-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.ac-vaka-select-btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/*SÖZLER*/
.weekly-quote-card{

    width:320px;
    height:920px;

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#ffffff;

    box-shadow:
    0 15px 45px rgba(0,0,0,.06);

    padding:20px;

}


/* Glow */

.glow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(14, 179, 170, 0.18),
    transparent 70%);

    top:-100px;
    left:-80px;

    filter:blur(25px);

}


/* Statue */

.statue{

    width:220px;

    display:block;

    margin:auto;

    position:relative;
    z-index:2;

}


/* Badge */

.badge{

    width:max-content;

    margin:18px auto;

    background:white;

    padding:12px 24px;

    border-radius:100px;

    font-weight:700;

    color:#30D5C8;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    position:relative;

    z-index:2;

}


/* Quote Box */

.quote-box{

    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.05);

    position:relative;

    z-index:2;

}


.quote-icon{

    font-size:55px;

    color:#03c5cc;

    font-family:Georgia;

}


.quote-icon.end{

    float:right;

    margin-top:-30px;

}


.quote{

    font-size:37px;

    line-height:1.28;

    font-weight:800;

    color:#000000;

    margin:15px 0 25px;

}


.line1{

    width:100%;

    height:2px;

    background:#ECECEC;

    margin:25px 0;

}


.author{

    text-align:center;

}


.author h3{

    margin:0;

    color:#30d5c8;

    font-size:24px;

}


.author span{

    color:#808080;

    font-size:15px;

}


.footer1{

    text-align:center;

    margin-top:18px;

    color:#707070;

    font-size:14px;

    position:relative;

    z-index:2;

}


/* Hover */

.weekly-quote-card{

    transition:.35s;
}

.weekly-quote-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 30px 60px rgba(39, 248, 255, 0.15);

}

.page-layout{

    display:flex;

    gap:40px;

    align-items:flex-start;

}

.left-panel{

    width:320px;
    height: 900px;
    position:relative;


}

main{

    flex:1;

}

.right-panel{

    width:320px;
    height: 900px;
}



/* Sağ Panel Ana Taşıyıcı */

.panel-container1 {
    background-color: #ffffff;
    border: 1px solid #30D5C8;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width: 320px;
    margin: 0 auto;
    box-sizing: border-box;
}

.panel-header1 {
    text-align: center;
    margin-bottom: 20px;
}

.panel-header1 h3 {
    margin: 0 0 6px 0;
    color: #2d3748;
    font-size: 1.35rem;
    font-weight: 700;
}

.panel-header1 p {
    margin: 0;
    color: #718096;
    font-size: 0.88rem;
}

.group-title1 {
    font-weight: 700;
    color: #30D5C8;
    margin: 22px 0 12px 0;
    font-size: 0.95rem;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 6px;
}

.grid-inputs1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.input-field1 {
    display: flex;
    flex-direction: column;
}

.input-field1.full-width1 {
    grid-column: span 2;
}

.input-field1 label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.net-badge1 {
    font-size: 0.75rem;
    color: #4a5568;
    background-color: #edf2f7;
    padding: 1px 6px;
    border-radius: 4px;
}

.d-y-group1 {
    display: flex;
    gap: 6px;
}

.d-y-group1 input, 
.input-field1 input[type="number"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.d-y-group1 input[placeholder="D"] {
    border-color: #c3e6cb;
    background-color: #f8fff9;
    text-align: center;
    font-weight: 700;
    color: #1b5e20;
}

.d-y-group1 input[placeholder="Y"] {
    border-color: #f5c6cb;
    background-color: #fffafb;
    text-align: center;
    font-weight: 700;
    color: #721c24;
}

.d-y-group1 input:focus,
.input-field1 input:focus {
    border-color: #4ecec3 !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    background-color: #ffffff !important;
}

.btn-primary1 {
    width: 100%;
    background-color: #30D5C8;
    color: #ffffff;
    border: none;
    padding: 13px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    margin-top: 24px;
    transition: all 0.15s ease;
}

.btn-primary1:hover {
    background-color: #00a4b4;
}


/* =====================================================
   YKS SONUÇ MODALI — YENİ TASARIM
===================================================== */


/* =====================================================
   OVERLAY
===================================================== */

.modal-overlay1 {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: none !important;

    align-items: center;
    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    background:
        rgba(15, 23, 42, .66);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 999999;

    overflow-y: auto;
}


.modal-overlay1:not(.hidden1) {

    display: flex !important;
}


/* =====================================================
   MODAL
===================================================== */

.modal-content1 {
    position: relative;

    width: 100%;

    max-width: 1000px;

    max-height: calc(100vh - 40px);

    margin: auto;

    padding: 28px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 24px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .22);

    overflow-y: auto;

    animation:
        resultModalEnter1 .22s ease-out;
}


@keyframes resultModalEnter1 {

    from {

        opacity: 0;

        transform:
            translateY(12px)
            scale(.975);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =====================================================
   HEADER
===================================================== */

.result-modal-header1 {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid #edf0f4;
}


.result-heading1 {

    display: flex;

    align-items: center;

    gap: 14px;
}


.result-heading-icon1 {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #e0e7ff
        );

    font-size: 22px;
}


.result-overline1 {

    display: block;

    margin-bottom: 3px;

    color: #00a4b4;

    font-size: .58rem;

    font-weight: 800;

    letter-spacing: .1em;
}


.modal-title1 {

    margin: 0;

    color: #171923;

    font-size: 1.35rem;

    font-weight: 850;

    line-height: 1.2;
}


.modal-subtitle1 {

    margin: 5px 0 0;

    color: #858b98;

    font-size: .72rem;
}


.close-modal1 {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 0;

    border-radius: 11px;

    background: #f4f5f7;

    color: #626978;

    font-size: 24px;

    cursor: pointer;

    transition: .15s ease;
}


.close-modal1:hover {

    background: #e9ebef;

    color: #20242d;

    transform: scale(1.03);
}


/* =====================================================
   USER PROFILE
===================================================== */

.user-profile1 {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 17px;

    padding: 8px 12px;

    border:
        1px solid #e8eaf0;

    border-radius: 12px;

    background: #fafbfc;
}


.user-profile-icon1 {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef2ff;

    font-size: 14px;
}


.user-profile-text1 span {

    display: block;

    color: #a0a5b0;

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .08em;
}


.user-profile-text1 strong {

    display: block;

    margin-top: 2px;

    color: #343946;

    font-size: .72rem;

    font-weight: 800;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.ranking-section1 {

    margin-top: 24px;
}


.section-title-row1 {

    margin-bottom: 12px;
}


.section-overline1 {

    display: block;

    margin-bottom: 3px;

    color: #9ba1ad;

    font-size: .55rem;

    font-weight: 800;

    letter-spacing: .08em;
}


.section-title-row1 h3 {

    margin: 0;

    color: #242833;

    font-size: 1rem;

    font-weight: 850;
}


.section-title-row1 p {

    margin: 4px 0 0;

    color: #858b98;

    font-size: .67rem;
}


/* =====================================================
   LEGEND
===================================================== */




.legend-item1 {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #7e8592;

    font-size: .58rem;

    font-weight: 650;
}


.legend-icon1 {

    width: 19px;
    height: 19px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-size: .55rem;

    font-weight: 850;
}


.ranking-icon1 {

    background: #e9edff;

    color: #4f46e5;
}


.score-icon1 {

    background: #eef7ff;

    color: #1673b8;
}


.raw-icon1 {

    background: #f0f1f3;

    color: #6b7280;
}


/* =====================================================
   YEARS
===================================================== */

.years-list-container1 {

    display: flex;

    flex-direction: column;

    gap: 9px;

    max-height: 470px;

    padding: 3px;

    overflow-y: auto;

    border-radius: 15px;

    scrollbar-width: thin;
}


/* =====================================================
   YEAR CARD
===================================================== */

.year-result1 {

    padding: 15px;

    border:
        1px solid #e8ebef;

    border-radius: 16px;

    background: #ffffff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.year-result1:hover {

    border-color: #dfe3ea;

    box-shadow:
        0 5px 18px rgba(15,23,42,.045);
}


/* 2025 */

.year-result1.current-year1 {

    border-color: #dfe2ff;

    background:
        linear-gradient(
            180deg,
            #fcfcff 0%,
            #ffffff 100%
        );

    box-shadow:
        0 5px 20px rgba(79,70,229,.055);
}


/* =====================================================
   YEAR HEADER
===================================================== */

.year-result-header1 {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}


.year-name1 {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #252a35;

    font-size: .83rem;

    font-weight: 850;
}


.current-badge1 {

    padding: 3px 7px;

    border-radius: 6px;

    background: #eef2ff;

    color: #4f46e5;

    font-size: .49rem;

    font-weight: 850;

    letter-spacing: .02em;
}


.year-note1 {

    color: #a0a5af;

    font-size: .55rem;
}


/* =====================================================
   TYPE GRID
===================================================== */

.score-type-grid1 {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 7px;
}


/* =====================================================
   TYPE CARD
===================================================== */

.type-result1 {

    min-width: 0;

    padding: 11px 10px;

    border-radius: 12px;

    background: #f8f9fb;
}


.type-result1.tyt1 {
    background: #f4f4ff;
}

.type-result1.say1 {
    background: #f3f8ff;
}

.type-result1.ea1 {
    background: #fff8ef;
}

.type-result1.soz1 {
    background: #fff5f4;
}

.type-result1.dil1 {
    background: #f1faf4;
}


/* =====================================================
   TYPE TITLE
===================================================== */

.type-title1 {

    margin-bottom: 8px;

    color: #3d4350;

    font-size: .67rem;

    font-weight: 850;
}


.tyt1 .type-title1 {
    color: #5754d9;
}

.say1 .type-title1 {
    color: #1976bd;
}

.ea1 .type-title1 {
    color: #c87500;
}

.soz1 .type-title1 {
    color: #cf3d38;
}

.dil1 .type-title1 {
    color: #168142;
}


/* =====================================================
   MAIN RANK
===================================================== */

.main-rank1 {

    padding-bottom: 9px;

    border-bottom:
        1px solid rgba(0,0,0,.065);
}


.main-rank-label1 {

    display: block;

    margin-bottom: 2px;

    color: #8a909b;

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .035em;
}


.main-rank-value1 {

    display: block;

    color: #20242e;

    font-size: 1.05rem;

    font-weight: 900;

    line-height: 1.15;

    letter-spacing: -.025em;

    white-space: nowrap;
}


/* =====================================================
   SCORE DETAILS
===================================================== */

.score-details1 {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding-top: 7px;
}


.score-detail1 {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;
}


.score-detail1 span {

    color: #949aa5;

    font-size: .49rem;
}


.score-detail1 strong {

    color: #626a78;

    font-size: .57rem;

    font-weight: 750;
}


/* =====================================================
   RAW RANK
===================================================== */

.raw-rank1 {

    margin-top: 7px;

    padding-top: 6px;

    border-top:
        1px dashed rgba(0,0,0,.08);

    color: #a1a6b0;

    font-size: .48rem;
}


.raw-rank1 strong {

    color: #777e8a;

    font-weight: 750;
}


/* =====================================================
   DISABLED TYPE
===================================================== */

.type-result1.disabled1 {

    opacity: .42;
}


/* =====================================================
   ÜNİVERSİTE LİSTESİ - FINAL TASARIM
===================================================== */


/* Liste dış kutusu */

.university-list-wrapper1 {

    max-height: 280px !important;

    overflow-y: auto !important;

    padding: 5px !important;

    box-sizing: border-box !important;

    border: 1px solid #e5e8ee !important;

    border-radius: 14px !important;

    background: #f8f9fb !important;

}


/* Liste */

.university-list1 {

    display: block !important;

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =====================================================
   TEK ÜNİVERSİTE
===================================================== */

.university-list1 > li {

    width: 100% !important;

    min-height: 58px !important;

    height: 58px !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;

    padding: 7px 11px !important;

    margin: 0 !important;

    border: 0 !important;

    border-bottom: 1px solid #edf0f3 !important;

    border-radius: 0 !important;

    background: #ffffff !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


.university-list1 > li:last-child {

    border-bottom: none !important;
}


.university-list1 > li:hover {

    background: #fafbff !important;
}


/* =====================================================
   SOL TARAF
===================================================== */

.uni-final-left1 {

    min-width: 0 !important;

    flex: 1 1 auto !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 10px !important;

    overflow: hidden !important;
}


/* İkon */

.uni-final-icon1 {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box !important;

    border-radius: 9px !important;

    background: #eef2ff !important;

    font-size: 15px !important;

}


/* Yazı alanı */

.uni-final-info1 {

    min-width: 0 !important;

    flex: 1 1 auto !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    overflow: hidden !important;
}


/* Üniversite */

.uni-final-name1 {

    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;

    color: #252a35 !important;

    font-size: 0.70rem !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}


/* Bölüm */

.uni-final-dept1 {

    display: block !important;

    max-width: 100% !important;

    margin-top: 3px !important;

    overflow: hidden !important;

    color: #8b919c !important;

    font-size: 0.55rem !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}


/* =====================================================
   SAĞ TARAF
===================================================== */

.uni-final-rank1 {

    width: 105px !important;

    min-width: 105px !important;

    flex: 0 0 105px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-end !important;

    justify-content: center !important;

    text-align: right !important;

    box-sizing: border-box !important;
}


/* Taban sıralama yazısı */

.uni-final-label1 {

    display: block !important;

    margin: 0 0 3px 0 !important;

    color: #a0a5ae !important;

    font-size: 0.42rem !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: 0.045em !important;

    white-space: nowrap !important;
}


/* Sayı */

.uni-final-number1 {

    display: block !important;

    margin: 0 !important;

    color: #187044 !important;

    font-size: 0.76rem !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =====================================================
   MOBİL
===================================================== */

@media (max-width: 600px) {

    .university-list-wrapper1 {

        max-height: 250px !important;

        padding: 3px !important;
    }


    .university-list1 > li {

        min-height: 55px !important;

        height: 55px !important;

        padding: 6px 8px !important;

        gap: 8px !important;
    }


    .uni-final-icon1 {

        width: 31px !important;

        height: 31px !important;

        min-width: 31px !important;

        font-size: 13px !important;
    }


    .uni-final-name1 {

        font-size: 0.64rem !important;
    }


    .uni-final-dept1 {

        font-size: 0.51rem !important;
    }


    .uni-final-rank1 {

        width: 82px !important;

        min-width: 82px !important;

        flex-basis: 82px !important;
    }


    .uni-final-label1 {

        font-size: 0.38rem !important;
    }


    .uni-final-number1 {

        font-size: 0.66rem !important;
    }

}


/* =====================================================
   FOOTER
===================================================== */

.result-modal-footer1 {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-top: 15px;

    padding-top: 12px;

    border-top:
        1px solid #edf0f3;

    color: #969ca7;

    font-size: .55rem;

    line-height: 1.4;
}


.footer-info-icon1 {

    flex-shrink: 0;

    font-weight: 800;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 850px) {

    .score-type-grid1 {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .modal-overlay1 {

        padding: 8px;
    }


    .modal-content1 {

        max-height:
            calc(100vh - 16px);

        padding: 18px 14px;

        border-radius: 19px;
    }


    .result-heading-icon1 {

        width: 40px;
        height: 40px;

        font-size: 18px;
    }


    .modal-title1 {

        font-size: 1.08rem;
    }


    .modal-subtitle1 {

        font-size: .63rem;
    }


    .score-type-grid1 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .main-rank-value1 {

        font-size: 1rem;
    }


    .uni-result-item1 {

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }

}


@media (max-width: 360px) {

    .score-type-grid1 {

        grid-template-columns: 1fr;
    }

}






/*Site footer en alt*/
/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    position: relative;
    width: 100%;
    margin-top: 80px;
    padding: 65px 7% 0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(48, 213, 200, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(48, 213, 200, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #07383D 0%,
            #052F34 100%
        );

    color: #EAFDFC;
    overflow: hidden;
}


/* =========================================================
   DEKORATİF GLOW
   ========================================================= */

.site-footer::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -300px;
    left: 8%;

    border-radius: 50%;

    background: #30D5C8;

    opacity: 0.07;

    filter: blur(25px);

    pointer-events: none;
}

.site-footer::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -180px;

    border-radius: 50%;

    background: #30D5C8;

    opacity: 0.045;

    filter: blur(30px);

    pointer-events: none;
}


/* =========================================================
   ANA FOOTER
   ========================================================= */

.footer-main {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.45fr
        1fr
        1fr
        1.35fr;

    gap: 70px;
}


/* =========================================================
   MARKA
   ========================================================= */

.footer-brand {
    min-width: 0;
    padding-right: 20px;
}


/* MAP LOGO */

.footer-brand-logo {
    display: flex;
    align-items: flex-start;

    margin-bottom: 12px;
}

.footer-brand-logo img {
    width: 215px;
    height: auto;

    display: block;

    margin: 0;
    padding: 0;

    object-fit: contain;

    background: transparent;
    border: none;
    border-radius: 0;

    box-shadow: none;
}


/* Marka adı */

.footer-brand-slogan {
    margin: 0;

    font-size: 21px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: #000;
}

.footer-brand-slogan span {
    color: #30D5C8;
}


/* Açıklama */

.footer-brand-text {
    margin: 14px 0 0;

    color: rgba(234, 253, 252, 0.68);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   SOSYAL MEDYA
   ========================================================= */

.footer-socials {
    display: flex;

    gap: 10px;

    margin-top: 22px;

    min-height: 42px;
}

.footer-socials a {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #DDFDFC;

    border: 1px solid rgba(48, 213, 200, 0.22);

    background: rgba(48, 213, 200, 0.06);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.footer-socials a:hover {
    transform: translateY(-3px);

    background: #30D5C8;

    border-color: #30D5C8;

    color: #07383D;
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-column {
    min-width: 0;
}

.footer-column h3 {
    margin: 3px 0 0;

    font-size: 17px;

    font-weight: 750;

    color: #FFFFFF;
}


/* Başlık altındaki çizgi */

.footer-title-line {
    width: 32px;
    height: 3px;

    margin: 12px 0 24px;

    border-radius: 20px;

    background: #30D5C8;
}


/* =========================================================
   LİNKLER
   ========================================================= */

.footer-column > a {
    display: flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    margin-bottom: 15px;

    color: rgba(234, 253, 252, 0.68);

    text-decoration: none;

    font-size: 14px;

    line-height: 1.4;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column > a i {
    width: 18px;

    flex-shrink: 0;

    color: #30D5C8;

    text-align: center;

    font-size: 14px;
}

.footer-column > a:hover {
    color: #FFFFFF;

    transform: translateX(4px);
}


/* =========================================================
   İLETİŞİM
   ========================================================= */

.footer-contact > a,
.footer-location {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: rgba(234, 253, 252, 0.68);

    font-size: 14px;

    line-height: 1.4;
}

.footer-contact > a {
    text-decoration: none;
}

.footer-contact i {
    width: 18px;

    flex-shrink: 0;

    color: #30D5C8;

    text-align: center;
}

.footer-contact > a:hover {
    color: #FFFFFF;
}


/* =========================================================
   GERİ BİLDİRİM KARTI
   ========================================================= */

.footer-feedback {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 25px;

    padding: 17px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(48, 213, 200, 0.13),
            rgba(255, 255, 255, 0.035)
        );

    border: 1px solid rgba(48, 213, 200, 0.18);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.feedback-icon {
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(48, 213, 200, 0.12);

    color: #30D5C8;

    font-size: 18px;
}

.feedback-content {
    min-width: 0;
}

.feedback-content strong {
    display: block;

    margin: 1px 0 7px;

    color: #FFFFFF;

    font-size: 12.5px;

    line-height: 1.4;
}

.feedback-content p {
    margin: 0 0 12px;

    color: rgba(234, 253, 252, 0.60);

    font-size: 11.5px;

    line-height: 1.55;
}

.feedback-content > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border-radius: 8px;

    background: #30D5C8;

    color: #07383D;

    text-decoration: none;

    font-size: 11px;

    font-weight: 750;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.feedback-content > a:hover {
    transform: translateX(3px);

    background: #54DED4;
}


/* =========================================================
   ALT COPYRIGHT
   ========================================================= */

.footer-bottom {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 48px auto 0;

    padding: 22px 0;

    display: flex;

    align-items: center;

    gap: 20px;

    border-top: 1px solid rgba(48, 213, 200, 0.16);
}

.footer-bottom-line {
    flex: 1;

    height: 1px;

    background: rgba(48, 213, 200, 0.13);
}

.footer-copyright,
.footer-rights {
    white-space: nowrap;

    color: rgba(234, 253, 252, 0.62);

    font-size: 12px;
}



.footer-separator {
    color: #30D5C8;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    opacity: 0.7;
}

/* =========================================================
   ALT LİNKLER
   ========================================================= */

.footer-bottom-links {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 19px 0 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px 12px;

    border-top: 1px solid rgba(48, 213, 200, 0.08);
}

.footer-bottom-links a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: rgba(234, 253, 252, 0.55);

    text-decoration: none;

    font-size: 11.5px;

    transition:
        color 0.2s ease;
}

.footer-bottom-links a i {
    color: #30D5C8;

    font-size: 11px;
}

.footer-bottom-links a:hover {
    color: #FFFFFF;
}

.footer-bottom-links > span {
    color: #30D5C8;

    opacity: 0.45;

    font-size: 10px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .site-footer {
        padding-left: 5%;
        padding-right: 5%;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 45px 55px;
    }

    .footer-brand {
        padding-right: 0;
    }

    .footer-contact {
        grid-column: span 1;
    }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 650px) {

    .site-footer {
        margin-top: 55px;

        padding:
            45px 24px 0;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .footer-brand {
        padding-right: 0;
    }

    .footer-brand-logo img {
        width: 155px;
    }

    .footer-brand-slogan {
        font-size: 19px;
    }

    .footer-brand-text {
        font-size: 13px;
    }

    .footer-column h3 {
        font-size: 16px;
    }

    .footer-feedback {
        max-width: 100%;
    }

    .footer-bottom {
        margin-top: 40px;

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px;

        text-align: center;
    }

    .footer-bottom-line {
        display: none;
    }

    .footer-copyright,
    .footer-rights {
        white-space: normal;

        font-size: 11px;
    }

    

    .footer-bottom-links {
        justify-content: flex-start;

        padding-bottom: 24px;

        gap: 10px 13px;
    }

    .footer-bottom-links > span {
        display: none;
    }
}


/* =========================================================
   ÇOK KÜÇÜK EKRAN
   ========================================================= */

@media (max-width: 400px) {

    .site-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer-brand-logo img {
        width: 140px;
    }

    .footer-feedback {
        padding: 14px;
    }

    .feedback-icon {
        width: 36px;
        height: 36px;

        font-size: 16px;
    }

    .footer-bottom-links {
        font-size: 11px;
    }
}








/* ========================= */
/* Meslek Günlüğü Modal */
/* ========================= */

.career-modal-vlog{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.career-modal-vlog.active{
    display:flex;
}

.career-modal-content-vlog{

    width:900px;
    max-width:90%;
    background:#fff;
    border-radius:18px;
    padding:35px;
    position:relative;

}

.career-close-vlog{

    position:absolute;
    right:25px;
    top:18px;
    font-size:30px;
    cursor:pointer;

}

.career-modal-vlog h2{

    text-align:center;
    margin-bottom:10px;

}

.career-subtitle-vlog{

    text-align:center;
    color:#666;
    margin-bottom:30px;

}

.career-grid-vlog{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.career-item-vlog{

    border:1px solid #e5e5e5;
    border-radius:15px;
    padding:25px;
    text-align:center;
    cursor:pointer;
    transition:.25s;

}

.career-item-vlog:hover{

    transform:translateY(-5px);
    border-color:#30D5C8;
    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.career-item-vlog span{

    font-size:35px;

}

.career-item-vlog h4{

    margin-top:15px;

}







/* 🎬 PERFORMANS ODAKLI MESLEK GÜNLÜĞÜ STİLLERİ */
.vlog-hidden { display: none !important; }

.vlog-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(30, 41, 59, 0.7); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100000; padding: 20px; font-family: system-ui, -apple-system, sans-serif;
}

.vlog-window {
    background: #f8fafc; width: 100%; max-width: 900px;
    border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
    overflow: hidden; position: relative; display: flex; flex-direction: column;
}

.vlog-close-top {
    position: absolute; top: 20px; right: 24px; background: #e2e8f0;
    border: none; font-size: 24px; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; color: #475569;
    display: flex; align-items: center; justify-content: center; z-index: 10;
}
.vlog-close-top:hover { background: #cbd5e1; color: #0f172a; }

.vlog-back-arrow {
    background: #e2e8f0; border: none; font-size: 18px; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; color: #475569; transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center;
}
.vlog-back-arrow:hover { background: #cbd5e1; }

/* SEÇİM EKRANI */
.vlog-header { padding: 30px 40px 20px 40px; text-align: center; }
.vlog-main-title { font-size: 1.6rem; color: #0f172a; margin: 0 0 6px 0; font-weight: 700; }
.vlog-subtitle { font-size: 0.95rem; color: #64748b; margin: 0; }

.vlog-select-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 10px 40px 30px 40px;
}
@media (max-width: 768px) {
    .vlog-select-grid { grid-template-columns: repeat(2, 1fr); }
}

.vlog-select-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 20px 12px; display: flex; flex-direction: column; align-items: center;
    gap: 12px; cursor: pointer; text-align: center; transition: all 0.2s ease;
}
.vlog-select-card:hover {
    transform: translateY(-4px); border-color: #4ecec3; box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.1);
}
.vlog-icon { font-size: 2rem; }
.vlog-name { font-size: 0.88rem; font-weight: 600; color: #334155; }
.vlog-select-footer { text-align: center; color: #64748b; font-size: 0.85rem; padding-bottom: 30px; }

/* AKIŞ / STORY PANELİ */
.vlog-story-header {
    padding: 20px 30px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #e2e8f0; background: #ffffff;
}
.vlog-story-nav-title { font-size: 1.2rem; color: #0f172a; margin: 0; font-weight: 700; }

.vlog-progress-container {
    padding: 16px 30px; background: #ffffff; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #f1f5f9;
}
.vlog-segments-row { flex-grow: 1; display: flex; gap: 6px; }
.vlog-p-seg { height: 6px; flex-grow: 1; background: #e2e8f0; border-radius: 4px; transition: all 0.3s ease; }
.vlog-p-seg.active { background: #4ecec3; }
.vlog-counter-text { font-size: 0.85rem; font-weight: 700; color: #475569; white-space: nowrap; }

.vlog-story-body { padding: 30px; display: flex; gap: 30px; min-height: 380px; }
@media (max-width: 640px) {
    .vlog-story-body { flex-direction: column; }
}

.vlog-story-visual { position: relative; flex: 1.2; border-radius: 16px; overflow: hidden; background: #e2e8f0; }
.vlog-main-img-mock {
    width: 100%; height: 100%; min-height: 280px; background-size: cover; background-position: center;
    background-repeat: no-repeat; transition: background-image 0.15s ease-in-out;
}
.vlog-time-badge {
    position: absolute; bottom: 16px; left: 16px; background: #ffffff; color: #30d5c8;
    padding: 6px 16px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.vlog-story-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.vlog-step-heading { font-size: 1.6rem; color: #0f172a; margin: 0 0 12px 0; font-weight: 700; }
.vlog-step-paragraph { font-size: 1rem; color: #475569; line-height: 1.6; margin: 0 0 24px 0; }

.vlog-goal-box { background: #f0fdf4; border-radius: 12px; padding: 16px; border-left: 4px solid #30d5c8; }
.vlog-goal-label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #30D5C8; letter-spacing: 0.5px; margin-bottom: 4px; }
.vlog-goal-text { font-size: 0.9rem; color: #4ecec3; margin: 0; font-weight: 500; }

.vlog-story-footer { padding: 20px 30px; display: flex; justify-content: space-between; background: #ffffff; border-top: 1px solid #e2e8f0; }
.vlog-nav-btn { padding: 12px 24px; font-weight: 600; font-size: 0.95rem; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; border: none; }
.btn-vlog-secondary { background: #f1f5f9; color: #475569; }
.btn-vlog-secondary:hover { background: #e2e8f0; }
.btn-vlog-primary { background: #30d5c8; color: #ffffff; padding: 12px 32px; }
.btn-vlog-primary:hover { background: #4338ca; }










/* Kart Renk Değişimi */
.blue-card {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

/* ==========================================================================
   2. GELİŞMİŞ MODAL PANELİ (PENCERE SISTEMİ)
   ========================================================================== */
.salary-modal-overlay {
  display: none; /* JS ile 'flex' yapılacak */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
}

.salary-modal-wrapper {
  background: #ffffff;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.salary-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
}

.salary-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #0f172a;
}

.salary-modal-close {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.salary-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==========================================================================
   3. SEKMELER (TAB CONTROL)
   ========================================================================== */
.salary-tab-control {
  display: flex;
  background: #4ecec3;
  padding: 6px;
  margin: 15px 24px 0 24px;
  border-radius: 12px;
  gap: 6px;
  border: 1px solid #e2e8f0;
}

.tab-target {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-target.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Tab İçerik Alanı */
.salary-tab-content {
  display: none; 
  padding: 24px;
  overflow-y: auto;
}

.salary-tab-content.active {
  display: block !important; 
}

/* ==========================================================================
   4. SEKMELİ İÇERİK 1: MAAŞ LİSTESİ TABLOSU
   ========================================================================== */
.table-responsive {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.salary-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.salary-table th {
  background: #f8fafc;
  color: #475569;
  padding: 12px 16px;
  font-weight: 600;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #e2e8f0;
  z-index: 2;
}

.salary-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.salary-table tr:hover td {
  background: #f8fafc;
}

.text-right { text-align: right; }

.price-tag {
  font-weight: 700;
  color: #16a34a;
}

.salary-disclaimer {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 12px;
  line-height: 1.4;
}

/* ==========================================================================
   5. SEKMELİ İÇERİK 2: MAAŞ HESAPLAMA FORMU VE FORM DÜZENİ
   ========================================================================== */
.salary-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.form-group select, 
.form-group input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
  background-color: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select:focus, 
.form-group input[type="number"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-row {
  display: flex;
  gap: 12px;
}

.checkboxes-row {
  flex-wrap: wrap;
  align-items: center;
}

.pure-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}

.pure-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  cursor: pointer;
}

/* Hesapla Butonu */
.salary-calc-btn {
  background: #30d5c8;
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.salary-calc-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.salary-calc-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   6. SONUÇ EKRANI VE BORDRO DETAYLARI
   ========================================================================== */
.salary-result-card {
  margin-top: 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.salary-result-card span {
  font-size: 0.85rem;
  color: #166534;
  font-weight: 600;
}

.salary-result-card h4 {
  margin: 8px 0;
  font-size: 2.2rem;
  color: #15803d;
  font-weight: 800;
}

.salary-result-card p {
  margin: 0;
  font-size: 0.775rem;
  color: #166534;
}

/* Akordeon Bordro Detayı */
.bordro-details summary {
  user-select: none;
  font-size: 0.875rem;
  padding: 4px 0;
}

.bordro-breakdown {
  background: #ffffff;
  border: 1px solid #dcfce7;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 6px;
  color: #475569;
}

.breakdown-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.breakdown-item strong {
  color: #0f172a;
}

/* Mobil Ekranlar İçin Uyum */
@media (max-width: 580px) {
  .form-row {
    flex-direction: column;
    gap: 16px;
  }
}

/* =========================================================
   DEVELOPMENT NOTICE
   ========================================================= */

.development-notice1 {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 40px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f7f9fb;

    z-index: 1000000;

    overflow: hidden;
}


/* =========================================================
   UYARI KARTI
   ========================================================= */

.development-notice-card1 {
    position: relative;

    width: 100%;
    max-width: 560px;

    margin: auto;

    padding: 30px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 24px;

    text-align: center;

    border: 1px solid rgba(15, 23, 42, 0.07);

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.20),
        0 8px 25px rgba(15, 23, 42, 0.07);

    overflow: hidden;
}


/* =========================================================
   ÜST RENKLİ ÇİZGİ
   ========================================================= */

.development-notice-card1::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #f59e0b,
            #fbbf24,
            #14b8a6
        );
}

/* =========================================================
   İKON
   ========================================================= */

.development-notice-icon1 {
    width: 66px;
    height: 66px;

    margin: 2px auto 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 19px;

    background: #fff7ed;

    border: 1px solid rgba(245, 158, 11, 0.15);

    font-size: 29px;

    box-shadow:
        0 7px 20px rgba(245, 158, 11, 0.10);
}


/* =========================================================
   ETİKET
   ========================================================= */

.development-notice-label1 {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding: 5px 11px;

    box-sizing: border-box;

    border-radius: 999px;

    background: #fff7ed;

    color: #c2410c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.55px;

    line-height: 1;
}


/* =========================================================
   BAŞLIK
   ========================================================= */

.development-notice-card1 h2 {
    margin: 14px 0 11px;

    color: #0f172a;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.35px;
}


/* =========================================================
   AÇIKLAMALAR
   ========================================================= */

.development-notice-card1 p {
    max-width: 390px;

    margin: 0 auto 9px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;
}

.development-notice-card1 p strong {
    color: #334155;

    font-weight: 750;
}


/* =========================================================
   BİLGİ KUTUSU
   ========================================================= */

.development-notice-info1 {
    width: 100%;

    min-height: 42px;

    margin: 17px 0 19px;

    padding: 9px 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;

    border-radius: 12px;

    background: #f8fafc;

    border: 1px solid rgba(15, 23, 42, 0.06);

    color: #475569;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.4;
}

.development-notice-info1 > span:first-child {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #14b8a6;

    font-size: 14px;
}


/* =========================================================
   DEVAM ET BUTONU
   ========================================================= */

.development-continue-btn1 {
    width: 100%;

    height: 47px;

    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    box-sizing: border-box;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #14b8a6,
            #0d9488
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(20, 184, 166, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.development-continue-btn1 span {
    font-size: 16px;

    transition:
        transform 0.18s ease;
}

.development-continue-btn1:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(20, 184, 166, 0.26);
}

.development-continue-btn1:hover span {
    transform: translateX(3px);
}

.development-continue-btn1:active {
    transform: translateY(0);
}


/* =========================================================
   YKS DEVELOPMENT WARNING
   ========================================================= */


/* =========================================================
   MASAÜSTÜ
   ========================================================= */

.development-warning1 {
    width: 100%;

    margin: 0 0 18px;

    padding: 14px 17px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

    border: 1px solid rgba(245, 158, 11, 0.20);

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   İKON
   ========================================================= */

.development-warning-icon1 {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 11px;

    background: #fff7ed;

    border: 1px solid rgba(245, 158, 11, 0.16);

    font-size: 18px;
}


/* =========================================================
   İÇERİK
   ========================================================= */

.development-warning-content1 {
    min-width: 0;

    flex: 1;
}


/* =========================================================
   BAŞLIK
   ========================================================= */

.development-warning-content1 strong {
    display: block;

    margin: 0 0 4px;

    color: #92400e;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.35;
}


/* =========================================================
   AÇIKLAMA
   ========================================================= */

.development-warning-content1 p {
    margin: 0;

    color: #64748b;

    font-size: 10.5px;

    line-height: 1.5;
}

.development-warning-content1 p b {
    color: #475569;

    font-weight: 800;
}


/* =========================================================
   ALT RESMÎ SONUÇ UYARISI
   ========================================================= */

.development-warning-content1 > span {
    display: inline-flex;

    align-items: center;

    margin-top: 7px;

    padding: 4px 8px;

    box-sizing: border-box;

    border-radius: 7px;

    background: rgba(20, 184, 166, 0.08);

    color: #0f766e;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.3;
}





/* =========================================================
   💰 MESLEK VERİSİ KATKI ALANI
   ========================================================= */

.salary-contribution {
    width: 100%;
    margin: 20px 0;

    padding: 20px 22px;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f0fdfa 0%,
            #ecfeff 100%
        );

    border: 1px solid rgba(20, 184, 166, .12);

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .055);

    position: relative;

    overflow: hidden;
}


/* Hafif dekoratif ışık */

.salary-contribution::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -55px;
    top: -70px;

    border-radius: 50%;

    background: rgba(20, 184, 166, .07);

    pointer-events: none;
}


.salary-contribution-content {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    width: 100%;

    position: relative;

    z-index: 1;
}


/* =====================================================
   İKON
   ===================================================== */

.salary-contribution-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    border-radius: 16px;

    background: #ffffff;

    color: #14b8a6;

    font-size: 23px;

    border: 1px solid rgba(20, 184, 166, .12);

    box-shadow:
        0 5px 15px rgba(20, 184, 166, .10);
}


/* =====================================================
   METİN
   ===================================================== */

.salary-contribution-text {

    min-width: 0;
}


.salary-contribution-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 5px;

    font-size: 9px;

    font-weight: 700;

    color: #0f9f91;

    text-transform: uppercase;

    letter-spacing: .35px;
}


.salary-contribution-badge i {
    font-size: 9px;
}


.salary-contribution-text h3 {

    margin: 0 0 5px;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.25;

    color: #0f172a;
}


.salary-contribution-text p {

    margin: 0;

    max-width: 600px;

    font-size: 11px;

    line-height: 1.5;

    color: #64748b;
}


/* =====================================================
   BUTON
   ===================================================== */

.salary-form-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 175px;

    height: 42px;

    padding: 0 17px;

    box-sizing: border-box;

    border-radius: 11px;

    background: #14b8a6;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 6px 16px rgba(20, 184, 166, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.salary-form-btn i {
    font-size: 10px;

    transition:
        transform .2s ease;
}


.salary-form-btn:hover {

    background: #0d9488;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(20, 184, 166, .25);
}


.salary-form-btn:hover i {

    transform: translateX(3px);
}








/* =========================================================
   =========================================================
   📱 ANA SAYFA — MOBILE FINAL
   =========================================================

   768px ve altı için ana sayfa düzeni.
   Tek parça responsive yapı.
   ========================================================= */


@media screen and (max-width: 768px) {

    /* =====================================================
       01 — TEMEL / SAYFA
       ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    .main-content {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 10px !important;

        flex: none !important;

        overflow: visible !important;
    }


    /* =====================================================
       02 — LOGO
       ===================================================== */

    .logo-wrapper {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        z-index: 9999 !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 52px !important;

        margin: 0 !important;
        padding: 4px 10px !important;

        background: transparent !important;
    }

    .logo-wrapper .logo {
        position: relative !important;

        display: block !important;

        width: 95px !important;
        max-width: 95px !important;

        height: auto !important;
    }

    .logo-wrapper .subtitle {
        display: none !important;
    }

    .logo-wrapper + br {
        display: none !important;
    }


    /* =====================================================
       03 — NAVBAR
       ===================================================== */

    .main-content .top-nav {
        position: relative !important;

        z-index: 9999 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 0 12px !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        background: transparent !important;
    }


    /* Menü */

    .main-content .top-nav .nav-links {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: calc(100% - 48px) !important;

        gap: 4px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;

        white-space: nowrap !important;

        flex: 1 1 auto !important;
    }

    .main-content .top-nav .nav-links::-webkit-scrollbar {
        display: none !important;
    }

    .main-content .top-nav .nav-links a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        margin: 0 !important;

        padding: 7px 8px !important;

        font-size: 10px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    .main-content .top-nav .nav-links a i {
        margin-right: 4px !important;

        font-size: 10px !important;
    }


    /* Tema */

    .main-content .top-nav .theme-toggle {
        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        margin-left: 5px !important;
        padding: 0 !important;

        z-index: 10000 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Navbar sonrası boşluk */

    .main-content > br {
        display: none !important;
    }


    /* =====================================================
       04 — HERO
       ===================================================== */

    .hero-banner {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 300px !important;
        min-height: 300px !important;

        margin: 0 !important;
        padding: 18px 14px !important;

        overflow: hidden !important;

        border-radius: 20px !important;
    }

    .hero-content {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        z-index: 20 !important;

        text-align: center !important;
    }

    .hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 25px !important;
        line-height: 1.15 !important;
    }

    .hero-content p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 12px !important;
        line-height: 1.05 !important;
    }

    .search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-bar input {
        width: 100% !important;
        min-width: 0 !important;
    }

    #three-canvas-container {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 125px !important;
    }


    /* =====================================================
       05 — MİNİ KUTULAR
       ===================================================== */

    .mini-boxes {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .mini-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =====================================================
       06 — DÜNYA VERİLERİ
       ===================================================== */

    .dashboard-dunya {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 25px 0 0 !important;
        padding: 12px !important;

        overflow: hidden !important;

        border-radius: 18px !important;
    }

    .header-dunya {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 8px !important;
    }

    .header-dunya h2 {
        font-size: 19px !important;
        line-height: 1.2 !important;
    }

    .tabs {
        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
    }

    .tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab-btn {
        flex: 0 0 auto !important;

        padding: 8px 11px !important;

        font-size: 11px !important;
    }


    /* =====================================================
       DÜNYA GRID
       
       1. satır  → HARİTA
       2. satır  → 2'li
       3. satır  → 2'li
       ===================================================== */

    .grid-container {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }

    .grid-container > .card-dunya:first-child {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .card-dunya {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 10px !important;

        overflow: hidden !important;
    }

    .card-dunya h3 {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .chart-placeholder {
        width: 100% !important;
        max-width: 100% !important;

        height: 210px !important;
        min-height: 210px !important;
    }


    /* =====================================================
       07 — KEŞFETMEYE DEVAM ET
       
       MOBİLDE:
       [ KART 1 ][ KART 2 ][ KART 3 ] →
       ===================================================== */

    .continue-section {
        width: 100% !important;
        max-width: 100% !important;

        margin: 25px 0 0 !important;

        overflow: hidden !important;
    }

    .continue-grid {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 12px !important;

        padding: 4px 0 15px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
    }

    .continue-grid::-webkit-scrollbar {
        display: none !important;
    }

    .continue-card {
        flex: 0 0 84% !important;

        width: 84% !important;
        min-width: 84% !important;
        max-width: 84% !important;

        min-height: 220px !important;

        scroll-snap-align: start;

        overflow: hidden !important;
    }


    /* =====================================================
       08 — PAGE LAYOUT
       
       MASAÜSTÜ:
       [ HAFTANIN SÖZÜ ][ MESLEK ]
       
       ===================================================== */

    .page-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 25px 0 0 !important;
        padding: 0 !important;
    }

    .page-layout > main {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       09 — MESLEK ANALİZ SİMÜLATÖRÜ
       
       [ 1 ][ 2 ][ 3 ]
       ===================================================== */

    .apple-career-module {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .ac-header {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ac-header h2 {
        font-size: 23px !important;
        line-height: 1.2 !important;
    }

    .ac-header p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .ac-cards-container {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }

    .ac-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 12px 5px !important;

        border-radius: 16px !important;

        overflow: hidden !important;
    }

    .ac-icon {
        font-size: 24px !important;

        margin-bottom: 7px !important;
    }

    .ac-card h3 {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .ac-card p {
        font-size: 8px !important;
        line-height: 1.35 !important;
    }

    .ac-btn {
        width: 100% !important;

        padding: 7px 2px !important;

        font-size: 8px !important;
    }


    /* =====================================================
       10 — İÇGÖRÜ
       ===================================================== */

    .insight-card {
        width: 100% !important;
        max-width: 100% !important;

        margin: 28px 0 0 !important;

        overflow: hidden !important;
    }

    .insight-text {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 23px !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       11 — İŞBİRLİĞİ
       ===================================================== */

    .community-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 28px 0 0 !important;
        padding: 20px 14px !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }

    .community-top,
    .community-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       12 — YKS
       ===================================================== */

    .panel-container1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 28px 0 0 !important;

        overflow: hidden !important;
    }

    .panel-header1 {
        width: 100% !important;
        max-width: 100% !important;
    }


/* =========================================================
   YKS MOBİL — 4'LÜ DERS DÜZENİ
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       ANA DERS GRID
       ===================================================== */

    .panel-container1 .grid-inputs1 {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 10px 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        align-items: start !important;
    }


    /* =====================================================
       DERS KARTI
       ===================================================== */

    .panel-container1 .grid-inputs1 > .input-field1 {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            3px 1px 5px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =====================================================
       DERS ADI
       ===================================================== */

    .panel-container1
    .grid-inputs1
    .input-field1 label {

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 27px !important;

        margin: 0 0 2px !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-size: 7px !important;

        line-height: 1.15 !important;

        white-space: normal !important;

        overflow: hidden !important;

        text-overflow: clip !important;
    }


    /* =====================================================
       NET INPUT
       ===================================================== */

    .panel-container1
    .grid-inputs1
    .input-field1 > input {

        display: block !important;

        width: 100% !important;

        max-width: 58px !important;

        min-width: 0 !important;

        height: 27px !important;

        margin: 0 auto 4px !important;

        padding:
            3px 1px !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-size: 10px !important;

        line-height: 1 !important;
    }


    /* =====================================================
       D / Y GRUBU
       ===================================================== */

    .panel-container1
    .grid-inputs1
    .input-field1
    .d-y-group1 {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        max-width: 72px !important;

        min-width: 0 !important;

        gap: 4px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       D / Y INPUTLARI
       ===================================================== */

    .panel-container1
    .grid-inputs1
    .d-y-group1 > input {

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        height: 33px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-size: 11px !important;
    }


    /* =====================================================
       GRUP BAŞLIKLARI
       ===================================================== */

    .panel-container1 .group-title1 {

        width: 100% !important;

        margin-top: 15px !important;
        margin-bottom: 7px !important;

        box-sizing: border-box !important;

        font-size: 13px !important;

        line-height: 1.25 !important;
    }
}


/* =========================================================
   iPHONE 15 / 15 PRO
   390–400 PX
   ========================================================= */

@media (min-width: 390px) and (max-width: 400px) {

    .panel-container1 .grid-inputs1 {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 10px 5px !important;
    }

    .panel-container1
    .grid-inputs1
    .input-field1 label {

        font-size: 7px !important;
    }

    .panel-container1
    .grid-inputs1
    .input-field1 > input {

        max-width: 57px !important;
        height: 27px !important;

        font-size: 10px !important;
    }

    .panel-container1
    .grid-inputs1
    .d-y-group1 {

        max-width: 71px !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .panel-container1
    .grid-inputs1
    .d-y-group1 > input {

        height: 33px !important;
    }
}


/* =========================================================
   DAR EKRAN — iPHONE SE
   ========================================================= */

@media (max-width: 389px) {

    .panel-container1 .grid-inputs1 {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 8px 4px !important;
    }

    .panel-container1
    .grid-inputs1
    .input-field1 label {

        font-size: 6.5px !important;
    }

    .panel-container1
    .grid-inputs1
    .input-field1 > input {

        max-width: 52px !important;

        height: 26px !important;

        font-size: 9.5px !important;
    }

    .panel-container1
    .grid-inputs1
    .d-y-group1 {

        max-width: 65px !important;

        gap: 3px !important;
    }

    .panel-container1
    .grid-inputs1
    .d-y-group1 > input {

        height: 30px !important;

        font-size: 10px !important;
    }
}
/* =========================================================
   YKS MOBİL — DİPLOMA NOTU FİNAL
   ========================================================= */

@media (max-width: 768px) {

    /* Genel Bilgilerdeki grid */
    .panel-container1 .group-title1 + .grid-inputs1 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Diploma alanı 4'lü grid'in tamamını kaplasın */
    .panel-container1 .grid-inputs1 .input-field1.full-width1 {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 10px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;
    }


    /* Diploma yazısı */
    .panel-container1
    .input-field1.full-width1
    label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        text-align: center !important;

        font-size: 9px !important;

        line-height: 1.25 !important;
    }


    /* Diploma input */
    .panel-container1
    .input-field1.full-width1
    #obp-puan1 {
        display: block !important;

        width: 100% !important;
        max-width: 180px !important;
        min-width: 0 !important;

        height: 38px !important;

        margin: 0 auto !important;
        padding: 5px 10px !important;

        box-sizing: border-box !important;

        text-align: center !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   iPHONE 15 / 15 PRO
   ========================================================= */

@media (min-width: 390px) and (max-width: 400px) {

    .panel-container1
    .input-field1.full-width1
    #obp-puan1 {
        max-width: 180px !important;
    }
}


/* =========================================================
   DAR EKRAN — iPHONE SE
   ========================================================= */

@media (max-width: 389px) {

    .panel-container1
    .input-field1.full-width1 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .panel-container1
    .input-field1.full-width1
    label {
        font-size: 8px !important;
    }

    .panel-container1
    .input-field1.full-width1
    #obp-puan1 {
        max-width: 160px !important;

        height: 36px !important;

        font-size: 11px !important;
    }
}

    /* =====================================================
       13 — YKS SONUÇ KARTLARI
       ===================================================== */

    .score-type-grid1 {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }

    .type-result1 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 8px 3px !important;

        overflow: hidden !important;
    }

    .type-title1 {
        font-size: 8px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .main-rank-label1 {
        font-size: 6px !important;
    }

    .main-rank-value1 {
        font-size: 10px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .score-detail1 span {
        font-size: 6px !important;
    }

    .score-detail1 strong {
        font-size: 7px !important;
    }


    /* =====================================================
       14 — HAFTANIN SÖZÜ
       ===================================================== */

    .weekly-quote-mobile {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;
    }

    .weekly-quote-mobile .weekly-quote-card {

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 330px !important;

        margin: 0 !important;
        padding: 20px !important;

        border-radius: 22px !important;

        overflow: hidden !important;
    }

    .weekly-quote-mobile .statue {
        width: 130px !important;
        max-width: 45% !important;

        height: auto !important;
    }

    .weekly-quote-mobile .quote-box {
        width: 100% !important;
        max-width: 100% !important;

        padding: 16px !important;
    }

    .weekly-quote-mobile .quote {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 21px !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       15 — FOOTER
       ===================================================== */

    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-top: 35px !important;

        overflow: hidden !important;
    }

    .footer-main {
        display: grid !important;

        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }
}


/* =========================================================
   📱 ÇOK KÜÇÜK TELEFON — 390px
   ========================================================= */

@media screen and (max-width: 390px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .main-content {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    /* LOGO */

    .logo-wrapper {
        height: 48px !important;

        padding-left: 7px !important;
    }

    .logo-wrapper .logo {
        width: 88px !important;
        max-width: 88px !important;
    }


    /* NAVBAR */

    .main-content .top-nav {
        height: 45px !important;
        min-height: 45px !important;
    }

    .main-content .top-nav .nav-links {
        max-width: calc(100% - 45px) !important;

        gap: 2px !important;
    }

    .main-content .top-nav .nav-links a {
        padding: 6px !important;

        font-size: 9px !important;
    }

    .main-content .top-nav .nav-links a i {
        font-size: 9px !important;

        margin-right: 3px !important;
    }

    .main-content .top-nav .theme-toggle {
        flex-basis: 38px !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
    }


    /* HERO */

    .hero-banner {
        height: 280px !important;
        min-height: 280px !important;
    }


    /* KEŞFET */

    .continue-card {
        flex-basis: 88% !important;

        width: 88% !important;
        min-width: 88% !important;
        max-width: 88% !important;
    }


    /* HARİTA */

    .chart-placeholder {
        height: 190px !important;
        min-height: 190px !important;
    }


    /* MESLEK */

    .ac-cards-container {
        gap: 5px !important;
    }

    .ac-card {
        padding: 9px 3px !important;
    }

    .ac-card h3 {
        font-size: 9px !important;
    }

    .ac-card p {
        font-size: 7px !important;
    }

    .ac-btn {
        font-size: 7px !important;
    }


    /* YKS */

    .panel-container1 .grid-inputs1 {
        gap: 4px !important;
    }

    .panel-container1 .input-field1 {
        padding: 5px 3px !important;
    }

    .panel-container1 .input-field1 label {
        font-size: 7px !important;
    }

    .score-type-grid1 {
        gap: 4px !important;
    }

    .type-result1 {
        padding: 6px 2px !important;
    }

    .type-title1 {
        font-size: 7px !important;
    }

    .main-rank-value1 {
        font-size: 9px !important;
    }

}




/* =========================================================
   📱 HAFTANIN SÖZÜ — GERÇEK YAPISINA GÖRE FINAL
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Ana alt bölüm artık dikey akacak */
    .page-layout {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 0 !important;

        margin: 25px 0 0 !important;
        padding: 0 !important;

        align-items: stretch !important;
    }


    /* =====================================================
       MAIN
       ===================================================== */

    .page-layout > main {
        order: 1 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: none !important;
    }


    /* =====================================================
       HAFTANIN SÖZÜ
       ===================================================== */

    .page-layout > .left-panel {
        order: 2 !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;

        flex: none !important;
    }


    /* Haftanın Sözü kartı */

    .page-layout > .left-panel .weekly-quote-card {
        position: relative !important;

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 18px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 22px !important;
    }


    /* Glow taşmasın */

    .page-layout > .left-panel .weekly-quote-card .glow {
        pointer-events: none !important;

        max-width: none !important;
    }


    /* Heykel */

    .page-layout > .left-panel .weekly-quote-card .statue {
        display: block !important;

        width: 150px !important;
        max-width: 55% !important;
        height: auto !important;

        margin: 0 auto !important;
    }


    /* Başlık rozeti */

    .page-layout > .left-panel .weekly-quote-card .badge {
        width: fit-content !important;
        max-width: 100% !important;

        margin: 12px auto !important;

        padding: 8px 15px !important;

        font-size: 12px !important;

        text-align: center !important;
    }


    /* Söz kutusu */

    .page-layout > .left-panel .weekly-quote-card .quote-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 16px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 18px !important;
    }


    /* Tırnak işaretleri */

    .page-layout > .left-panel .weekly-quote-card .quote-icon {
        font-size: 38px !important;
    }


    /* Söz */

    .page-layout > .left-panel .weekly-quote-card .quote {
        width: 100% !important;
        max-width: 100% !important;

        margin: 8px 0 18px !important;

        font-size: 22px !important;
        line-height: 1.3 !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* Yazar */

    .page-layout > .left-panel .weekly-quote-card .author h3 {
        font-size: 20px !important;
    }

    .page-layout > .left-panel .weekly-quote-card .author span {
        font-size: 12px !important;
    }


    /* Alt yazı */

    .page-layout > .left-panel .weekly-quote-card .footer1 {
        margin-top: 12px !important;

        font-size: 11px !important;
    }
}


/* =========================================================
   📱 KÜÇÜK TELEFON
   ========================================================= */

@media screen and (max-width: 390px) {

    .page-layout > .left-panel {
        margin-top: 25px !important;
    }

    .page-layout > .left-panel .weekly-quote-card {
        padding: 14px !important;

        border-radius: 19px !important;
    }

    .page-layout > .left-panel .weekly-quote-card .statue {
        width: 130px !important;
        max-width: 50% !important;
    }

    .page-layout > .left-panel .weekly-quote-card .badge {
        font-size: 11px !important;

        padding: 7px 12px !important;
    }

    .page-layout > .left-panel .weekly-quote-card .quote-box {
        padding: 13px !important;

        border-radius: 16px !important;
    }

    .page-layout > .left-panel .weekly-quote-card .quote {
        font-size: 19px !important;
    }

    .page-layout > .left-panel .weekly-quote-card .author h3 {
        font-size: 18px !important;
    }
}








/* =========================================================
   📱 MESLEK ANALİZ + İÇGÖRÜ + İŞBİRLİĞİ
   ========================================================= */

@media screen and (max-width: 768px) {

    /* -----------------------------------------------------
       MESLEK ANALİZ
       ----------------------------------------------------- */

    .ac-cards-container {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;
    }

    .ac-card {
        min-height: 220px !important;

        padding: 16px 8px !important;

        border-radius: 18px !important;
    }

    .ac-icon {
        font-size: 30px !important;

        margin-bottom: 10px !important;
    }

    .ac-card h3 {
        font-size: 12px !important;

        line-height: 1.25 !important;
    }

    .ac-card p {
        font-size: 9px !important;

        line-height: 1.4 !important;
    }

    .ac-btn {
        min-height: 32px !important;

        padding: 7px 4px !important;

        font-size: 9px !important;
    }


    /* -----------------------------------------------------
       İÇGÖRÜ + İŞBİRLİĞİ
       YAN YANA
       ----------------------------------------------------- */

    .page-layout > main {
        width: 100% !important;
    }

    

    .insight-card,
    .community-section {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* İçgörü */

    .insight-card {
        margin: 25px 0 0 !important;
    }


    /* İşbirliği */

    .community-section {
        margin: 25px 0 0 !important;
    }


    .insight-community-row {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;
    }

    .insight-community-row .insight-card,
    .insight-community-row .community-section {
        margin: 0 !important;

        min-width: 0 !important;
    }
}


/* =========================================================
   📱 KÜÇÜK TELEFON
   ========================================================= */

@media screen and (max-width: 390px) {

    .ac-cards-container {
        gap: 6px !important;
    }

    .ac-card {
        min-height: 205px !important;

        padding: 12px 5px !important;
    }

    .ac-icon {
        font-size: 26px !important;
    }

    .ac-card h3 {
        font-size: 10px !important;
    }

    .ac-card p {
        font-size: 8px !important;
    }

    .ac-btn {
        font-size: 8px !important;
    }

    .insight-community-row {
        gap: 7px !important;
    }
}


/* =========================================================
   📱 MESLEK + İÇGÖRÜ + İŞBİRLİĞİ — FINAL
   ========================================================= */

@media screen and (max-width: 768px) {

    /* =====================================================
       MESLEK ANALİZ
       TAM GENİŞLİK
       ===================================================== */

    .page-layout > main .apple-career-module {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    .page-layout > main .ac-cards-container {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 9px !important;

        width: 100% !important;
    }

    .page-layout > main .ac-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 210px !important;

        padding: 14px 7px !important;

        border-radius: 17px !important;
    }

    .page-layout > main .ac-icon {
        font-size: 28px !important;

        margin-bottom: 8px !important;
    }

    .page-layout > main .ac-card h3 {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .page-layout > main .ac-card p {
        font-size: 8.5px !important;
        line-height: 1.4 !important;
    }

    .page-layout > main .ac-btn {
        min-height: 30px !important;

        padding: 6px 3px !important;

        font-size: 8px !important;
    }


    /* =====================================================
       İÇGÖRÜ + İŞBİRLİĞİ
       ===================================================== */

    .page-layout > main {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 9px !important;

        row-gap: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        align-items: start !important;
    }


    /* Meslek analiz TAM SATIR */

    .page-layout > main .apple-career-module {
        grid-column: 1 / -1 !important;
    }


    /* -----------------------------------------------------
       Meslekten sonra gelen BR'ler
       ----------------------------------------------------- */

    .page-layout > main > br {
        display: none !important;
    }


    /* -----------------------------------------------------
       İÇGÖRÜ
       ----------------------------------------------------- */

    .page-layout > main .insight-card {

        grid-column: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;
        min-height: 230px !important;

        margin: 20px 0 0 !important;
        padding: 15px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 18px !important;
    }


    .page-layout > main .insight-header {
        font-size: 10px !important;
    }

    .page-layout > main .insight-text {
        width: 100% !important;

        font-size: 17px !important;
        line-height: 1.3 !important;

        overflow-wrap: break-word !important;
    }

    .page-layout > main .source {
        font-size: 8px !important;
    }


    /* -----------------------------------------------------
       İŞBİRLİĞİ
       ----------------------------------------------------- */

    .page-layout > main .community-section {

        grid-column: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;
        min-height: 230px !important;

        margin: 20px 0 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 18px !important;
    }


    .page-layout > main .community-top {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        gap: 8px !important;
    }


    .page-layout > main .community-visual {

        width: 100% !important;
        max-width: 100% !important;

        min-height: 75px !important;

        overflow: hidden !important;
    }


    .page-layout > main .community-content {

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }


    .page-layout > main .community-content h3 {
        font-size: 12px !important;

        line-height: 1.3 !important;
    }

    .page-layout > main .community-content p {
        font-size: 8px !important;

        line-height: 1.35 !important;
    }


    /* =====================================================
       YKS
       ===================================================== */

    .page-layout > main .panel-container1 {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 25px !important;
    }
}


/* =========================================================
   📱 390px ALTI
   ========================================================= */

@media screen and (max-width: 390px) {

    .page-layout > main {
        column-gap: 6px !important;
    }

    .page-layout > main .ac-cards-container {
        gap: 5px !important;
    }

    .page-layout > main .ac-card {
        min-height: 200px !important;

        padding: 11px 4px !important;
    }

    .page-layout > main .ac-icon {
        font-size: 25px !important;
    }

    .page-layout > main .ac-card h3 {
        font-size: 9px !important;
    }

    .page-layout > main .ac-card p {
        font-size: 7px !important;
    }

    .page-layout > main .ac-btn {
        font-size: 7px !important;
    }

    .page-layout > main .insight-card,
    .page-layout > main .community-section {
        min-height: 215px !important;

        padding: 10px !important;
    }

    .page-layout > main .insight-text {
        font-size: 15px !important;
    }

    .page-layout > main .community-content h3 {
        font-size: 10px !important;
    }

    .page-layout > main .community-content p {
        font-size: 7px !important;
    }
}



/* =========================================================
   📱 MESLEK DETAYI — FINAL MOBILE UI
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       ANA DETAY EKRANI
       ===================================================== */

    #jobDetailsContainer.job-details-container {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding:
            max(12px, env(safe-area-inset-top))
            12px
            calc(24px + env(safe-area-inset-bottom))
            12px !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;

        background: #f7f9fb !important;

        z-index: 999999 !important;

        border-radius: 0 !important;

        scrollbar-width: none !important;
    }

    #jobDetailsContainer::-webkit-scrollbar {
        display: none !important;
    }


    /* =====================================================
       GERİ DÖN BUTONU
       ===================================================== */

    #jobDetailsContainer .back-btn {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        width: auto !important;

        min-height: 38px !important;

        margin: 0 0 14px !important;

        padding: 8px 13px !important;

        border-radius: 11px !important;

        font-size: 11px !important;
        font-weight: 600 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MESLEK BAŞLIĞI
       ===================================================== */

    #jobDetailsContainer .detail-title {
        display: block !important;

        width: 100% !important;

        margin: 0 0 14px !important;

        padding:
            0
            2px
            11px !important;

        font-size: clamp(21px, 6vw, 25px) !important;

        line-height: 1.18 !important;

        font-weight: 800 !important;

        letter-spacing: -.35px !important;

        border-bottom:
            1px solid rgba(15, 23, 42, .07) !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MESLEK İKON + AÇIKLAMA
       ===================================================== */

    #jobDetailsContainer .job-header {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;

        gap: 10px !important;

        margin: 0 0 17px !important;

        text-align: center !important;
    }


    #jobDetailsContainer .job-icon {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;

        border-radius: 19px !important;

        font-size: 26px !important;

        box-shadow:
            0 7px 20px rgba(20, 184, 166, .18) !important;
    }


    #jobDetailsContainer .job-info {
        width: 100% !important;

        max-width: 520px !important;

        min-width: 0 !important;
    }


    #jobDetailsContainer .job-info p {
        margin: 0 !important;

        font-size: 11px !important;

        line-height: 1.55 !important;

        color: #64748b !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       4 METRİK KART
       2 × 2
       ===================================================== */

    #jobDetailsContainer .metrics-row {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 0 0 13px !important;
    }


    #jobDetailsContainer .metric-card {
        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        width: 100% !important;

        min-width: 0 !important;

        height: 86px !important;

        min-height: 86px !important;

        padding: 10px 11px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        background: #fff !important;

        border:
            1px solid rgba(15, 23, 42, .055) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .055) !important;
    }


    #jobDetailsContainer .metric-label {
        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

        width: 100% !important;

        margin-bottom: 7px !important;

        font-size: 9px !important;

        font-weight: 600 !important;

        line-height: 1.25 !important;

        color: #64748b !important;
    }


    #jobDetailsContainer .metric-label i {
        flex-shrink: 0 !important;

        font-size: 11px !important;
    }


    #jobDetailsContainer .metric-value {
        display: block !important;

        width: 100% !important;

        font-size: 15px !important;

        font-weight: 800 !important;

        line-height: 1.2 !important;

        color: #0f172a !important;

        overflow-wrap: break-word !important;
    }


    /* =========================================================
   📱 MOBİL — MESLEK VERİSİ KATKI ALANI
   ========================================================= */

@media (max-width: 768px) {

    #jobDetailsContainer .salary-contribution {

        width: 100% !important;

        margin: 0 0 13px !important;

        padding: 13px !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;

        background:
            linear-gradient(
                135deg,
                #f0fdfa 0%,
                #ecfeff 100%
            ) !important;

        border:
            1px solid rgba(20, 184, 166, .11) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .04) !important;

        position: relative !important;

        overflow: hidden !important;
    }


    /* Dekoratif arka plan */

    #jobDetailsContainer .salary-contribution::after {

        content: "" !important;

        position: absolute !important;

        width: 100px !important;
        height: 100px !important;

        right: -45px !important;
        top: -50px !important;

        border-radius: 50% !important;

        background:
            rgba(20, 184, 166, .06) !important;

        pointer-events: none !important;
    }


    #jobDetailsContainer .salary-contribution-content {

        display: grid !important;

        grid-template-columns:
            40px
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 9px !important;

        row-gap: 8px !important;

        width: 100% !important;

        position: relative !important;

        z-index: 1 !important;
    }


    /* =====================================================
       İKON
       ===================================================== */

    #jobDetailsContainer .salary-contribution-icon {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        border-radius: 12px !important;

        background: #ffffff !important;

        color: #14b8a6 !important;

        font-size: 17px !important;

        border:
            1px solid rgba(20, 184, 166, .10) !important;

        box-shadow:
            0 4px 12px rgba(20, 184, 166, .08) !important;
    }


    /* =====================================================
       METİN
       ===================================================== */

    #jobDetailsContainer .salary-contribution-text {

        width: 100% !important;

        min-width: 0 !important;
    }


    #jobDetailsContainer .salary-contribution-badge {

        display: inline-flex !important;

        align-items: center !important;

        gap: 4px !important;

        margin-bottom: 3px !important;

        font-size: 7px !important;

        font-weight: 700 !important;

        letter-spacing: .25px !important;

        color: #0f9f91 !important;
    }


    #jobDetailsContainer .salary-contribution-badge i {

        font-size: 7px !important;
    }


    #jobDetailsContainer .salary-contribution-text h3 {

        margin: 0 0 3px !important;

        font-size: 11.5px !important;

        font-weight: 800 !important;

        line-height: 1.25 !important;

        color: #0f172a !important;
    }


    #jobDetailsContainer .salary-contribution-text p {

        margin: 0 !important;

        font-size: 8.5px !important;

        line-height: 1.4 !important;

        color: #64748b !important;
    }


    /* =====================================================
       BUTON
       ===================================================== */

    #jobDetailsContainer .salary-form-btn {

        grid-column: 1 / -1 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        width: 100% !important;

        height: 34px !important;

        min-height: 34px !important;

        margin: 0 !important;

        padding: 0 10px !important;

        box-sizing: border-box !important;

        border-radius: 10px !important;

        background: #14b8a6 !important;

        color: #ffffff !important;

        font-size: 9.5px !important;

        font-weight: 700 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-shadow:
            0 5px 13px rgba(20, 184, 166, .17) !important;
    }


    #jobDetailsContainer .salary-form-btn i {

        font-size: 9px !important;
    }
}


    /* =====================================================
       GRAFİK + YORUMLAR
       ===================================================== */

    #jobDetailsContainer .middle-row {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        min-width: 0 !important;

        gap: 9px !important;

        margin: 0 0 13px !important;
    }


    /* GRAFİK */

    #jobDetailsContainer .chart-box {
        width: 100% !important;

        min-width: 0 !important;

        height: 270px !important;

        min-height: 270px !important;

        margin: 0 !important;

        padding: 13px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        background: #fff !important;

        border:
            1px solid rgba(15, 23, 42, .055) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .05) !important;

        overflow: hidden !important;
    }


    #jobDetailsContainer .chart-box h3 {
        margin: 0 0 7px !important;

        font-size: 12px !important;

        line-height: 1.3 !important;

        font-weight: 750 !important;
    }


    #jobDetailsContainer #salaryChart {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 215px !important;

        max-height: 215px !important;
    }


    /* =====================================================
       SEKTÖREL YORUMLAR
       ===================================================== */

    #jobDetailsContainer .comments-box {
        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 145px !important;

        margin: 0 !important;

        padding: 13px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        background: #fff !important;

        border:
            1px solid rgba(15, 23, 42, .055) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .05) !important;

        overflow: visible !important;
    }


    #jobDetailsContainer .comments-box h3 {
        margin: 0 0 9px !important;

        font-size: 12px !important;

        line-height: 1.3 !important;

        font-weight: 750 !important;
    }


    #jobDetailsContainer .comments-list {
        display: flex !important;

        flex-direction: column !important;

        gap: 7px !important;

        width: 100% !important;
    }


    /* =====================================================
       BİR GÜN
       ===================================================== */

    #jobDetailsContainer .bottom-section {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 9px !important;

        margin: 0 !important;
    }


    #jobDetailsContainer .day-in-life {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 115px !important;

        padding: 13px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        background: #fff !important;

        border:
            1px solid rgba(15, 23, 42, .055) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .05) !important;
    }


    #jobDetailsContainer .day-in-life h3 {
        margin: 0 0 7px !important;

        font-size: 12px !important;

        line-height: 1.3 !important;
    }


    #jobDetailsContainer .day-in-life p {
        margin: 0 !important;

        font-size: 9.5px !important;

        line-height: 1.55 !important;

        color: #64748b !important;
    }


    /* =====================================================
       AVANTAJ / DEZAVANTAJ
       ===================================================== */

    #jobDetailsContainer .pros-cons-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        width: 100% !important;
    }


    #jobDetailsContainer .pros-box,
    #jobDetailsContainer .cons-box {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 135px !important;

        padding: 12px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;

        background: #fff !important;

        border:
            1px solid rgba(15, 23, 42, .055) !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, .05) !important;

        overflow: hidden !important;
    }


    #jobDetailsContainer .pros-box h3,
    #jobDetailsContainer .cons-box h3 {
        margin: 0 0 8px !important;

        font-size: 10.5px !important;

        line-height: 1.3 !important;
    }


    #jobDetailsContainer .pros-box ul,
    #jobDetailsContainer .cons-box ul {
        margin: 0 !important;

        padding-left: 17px !important;
    }


    #jobDetailsContainer .pros-box li,
    #jobDetailsContainer .cons-box li {
        margin-bottom: 5px !important;

        font-size: 8.5px !important;

        line-height: 1.4 !important;
    }


    /* ALT BOŞLUK */
    #jobDetailsContainer::after {
        content: "" !important;

        display: block !important;

        width: 100% !important;

        height: 18px !important;
    }
}


/* =========================================================
   📱 390px ALTI — DAHA DAR TELEFONLAR
   ========================================================= */

@media (max-width: 390px) {

    #jobDetailsContainer.job-details-container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }


    #jobDetailsContainer .detail-title {
        font-size: 20px !important;
    }


    #jobDetailsContainer .job-icon {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;

        font-size: 24px !important;
    }


    #jobDetailsContainer .job-info p {
        font-size: 10.5px !important;
    }


    #jobDetailsContainer .metric-card {
        height: 82px !important;
        min-height: 82px !important;

        padding: 9px !important;
    }


    #jobDetailsContainer .metric-label {
        font-size: 8px !important;
    }


    #jobDetailsContainer .metric-value {
        font-size: 14px !important;
    }


    #jobDetailsContainer .salary-contribution {
        padding: 11px !important;
    }


    #jobDetailsContainer .chart-box {
        height: 255px !important;
        min-height: 255px !important;

        padding: 11px !important;
    }


    #jobDetailsContainer #salaryChart {
        height: 200px !important;
        max-height: 200px !important;
    }


    #jobDetailsContainer .comments-box {
        padding: 11px !important;
    }


    #jobDetailsContainer .day-in-life {
        padding: 11px !important;
    }


    #jobDetailsContainer .pros-box,
    #jobDetailsContainer .cons-box {
        min-height: 125px !important;

        padding: 10px !important;
    }
}







/* =========================================================
   DEVELOPMENT NOTICE
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .development-notice1 {
        width: 100%;
    }


    .development-notice-card1 {
        width: 100%;

        padding: 23px 18px 19px;

        border-radius: 20px;

        box-shadow:
            0 20px 55px rgba(15, 23, 42, 0.20);
    }



    .development-notice-card1::before {
        height: 4px;
    }


    /* =====================================================
       İKON
       ===================================================== */

    .development-notice-icon1 {
        width: 55px;
        height: 55px;

        margin: 1px auto 12px;

        border-radius: 16px;

        font-size: 24px;
    }


    /* =====================================================
       ETİKET
       ===================================================== */

    .development-notice-label1 {
        min-height: 23px;

        padding: 5px 9px;

        font-size: 7.5px;

        letter-spacing: 0.45px;
    }


    /* =====================================================
       BAŞLIK
       ===================================================== */

    .development-notice-card1 h2 {
        margin: 12px 0 9px;

        font-size: 20px;

        line-height: 1.2;

        letter-spacing: -0.25px;
    }


    /* =====================================================
       AÇIKLAMA
       ===================================================== */

    .development-notice-card1 p {
        max-width: 340px;

        margin: 0 auto 8px;

        font-size: 10.5px;

        line-height: 1.55;
    }


    /* =====================================================
       BİLGİ KUTUSU
       ===================================================== */

    .development-notice-info1 {
        width: 100%;

        min-height: 39px;

        margin: 14px 0 15px;

        padding: 8px 9px;

        gap: 6px;

        border-radius: 10px;

        font-size: 8.5px;

        line-height: 1.35;
    }


    .development-notice-info1 > span:first-child {
        font-size: 12px;
    }


    /* =====================================================
       BUTON
       ===================================================== */

    .development-continue-btn1 {
        width: 100%;

        height: 43px;

        padding: 0 14px;

        border-radius: 11px;

        gap: 7px;

        font-size: 10.5px;
    }


    .development-continue-btn1 span {
        font-size: 14px;
    }
}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
   ========================================================= */

@media (max-width: 390px) {

    .development-notice-card1 {
        padding: 19px 15px 16px;

        border-radius: 18px;
    }


    .development-notice-icon1 {
        width: 50px;
        height: 50px;

        margin-bottom: 10px;

        border-radius: 14px;

        font-size: 22px;
    }


    .development-notice-label1 {
        min-height: 21px;

        padding: 4px 8px;

        font-size: 7px;
    }


    .development-notice-card1 h2 {
        margin-top: 10px;

        font-size: 18px;
    }


    .development-notice-card1 p {
        font-size: 9.5px;

        line-height: 1.5;
    }


    .development-notice-info1 {
        min-height: 36px;

        margin: 12px 0;

        font-size: 8px;
    }


    .development-continue-btn1 {
        height: 41px;

        font-size: 10px;
    }
}

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .development-warning1 {
        width: 100%;

        margin:
            0
            0
            12px;

        padding:
            11px
            12px;

        gap: 10px;

        border-radius: 12px;

        align-items: flex-start;
    }


    /* -----------------------------------------------------
       MOBİL İKON
       ----------------------------------------------------- */

    .development-warning-icon1 {
        width: 34px;
        height: 34px;

        min-width: 34px;

        border-radius: 9px;

        font-size: 16px;
    }


    /* -----------------------------------------------------
       MOBİL BAŞLIK
       ----------------------------------------------------- */

    .development-warning-content1 strong {
        margin-bottom: 3px;

        font-size: 10.5px;

        line-height: 1.35;
    }


    /* -----------------------------------------------------
       MOBİL AÇIKLAMA
       ----------------------------------------------------- */

    .development-warning-content1 p {
        font-size: 9px;

        line-height: 1.45;
    }


    /* -----------------------------------------------------
       MOBİL ALT UYARI
       ----------------------------------------------------- */

    .development-warning-content1 > span {
        margin-top: 6px;

        padding:
            4px
            7px;

        border-radius: 6px;

        font-size: 8px;

        line-height: 1.25;
    }
}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
   ========================================================= */

@media (max-width: 380px) {

    .development-warning1 {
        padding:
            10px;

        gap: 8px;

        border-radius: 11px;
    }


    .development-warning-icon1 {
        width: 31px;
        height: 31px;

        min-width: 31px;

        border-radius: 8px;

        font-size: 14px;
    }


    .development-warning-content1 strong {
        font-size: 9.5px;
    }


    .development-warning-content1 p {
        font-size: 8.3px;

        line-height: 1.4;
    }


    .development-warning-content1 > span {
        font-size: 7.5px;

        padding:
            3px
            6px;
    }
}



/* =========================================================
   MOBİL HERO — FINAL DÜZEN
   Yazı aralıkları + Music + Character + boşluk
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       HERO ALANI
       ===================================================== */

    .hero-banner {

        position: relative !important;

        height: 355px !important;
        min-height: 355px !important;

        padding: 0 12px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       ANA HERO YAZILARI
       ===================================================== */

    .hero-content {

        position: relative !important;

        z-index: 30 !important;

        width: 100% !important;
        max-width: 100% !important;

        top: 0 !important;

        padding-top: 8px !important;

        text-align: center !important;
    }


    /* Üst açıklama */

    .hero-content h3 {

        margin:
            0 auto 6px !important;

        padding: 0 !important;

        max-width: 350px !important;

        font-size: 18px !important;

        line-height: 1.12 !important;

        font-weight: 800 !important;
    }


    /* Meslekleri Keşfet */

    .hero-content h1 {

        margin:
            0 0 10px !important;

        padding: 0 !important;

        font-size: 25px !important;

        line-height: 1.08 !important;

        font-weight: 900 !important;
    }


    /* Açıklama */

    .hero-content p {

        margin:
            0 auto !important;

        padding: 0 !important;

        max-width: 340px !important;

        font-size: 11.5px !important;

        line-height: 1.35 !important;
    }


    /* =====================================================
       ARAMA KUTUSU
       ===================================================== */

    .hero-content .search-bar {

        position: absolute !important;

        top: 285px !important;

        left: 4px !important;
        right: 4px !important;

        width:
            calc(100% - 8px) !important;

        height: 48px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        z-index: 40 !important;

        border-radius: 15px !important;

        background:
            rgba(255,255,255,.97) !important;

        box-shadow:
            0 7px 22px rgba(15,23,42,.08) !important;
    }


    .hero-content .search-bar input {

        height: 100% !important;

        font-size: 12px !important;

        padding:
            0 10px !important;

        box-sizing: border-box !important;
    }


    .hero-content .search-bar button {

        width: 45px !important;

        height: 100% !important;

        padding: 0 !important;
    }


    /* =====================================================
       FLOATING ALAN
       ===================================================== */

    .hero-right {

        position: absolute !important;

        left: 0 !important;
        top: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        transform: none !important;

        z-index: 20 !important;

        pointer-events: none !important;
    }


    /* =====================================================
       ANALYTICS — SOL ÜST
       ===================================================== */

    .hero-right .analytics-card {

        position: absolute !important;

        left: 15px !important;
        top: 12px !important;

        width: 82px !important;
        height: 62px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 15px !important;

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: none !important;

        transform: none !important;

        z-index: 21 !important;
    }


    .hero-right .analytics-card .grid {

        opacity: .35 !important;

        background-size:
            14px 14px !important;
    }


    .hero-right .analytics-card svg {

        width: 90% !important;
        height: 90% !important;
    }


    .hero-right .analytics-card polyline {

        stroke-width: 5 !important;
    }


    /* =====================================================
       PIE — SAĞ ÜST
       ===================================================== */

    .hero-right .pie-card {

        position: absolute !important;

        right: 15px !important;
        top: 12px !important;

        width: 68px !important;
        height: 68px !important;

        margin: 0 !important;
        padding: 9px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        border-radius: 16px !important;

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: none !important;

        transform: none !important;

        z-index: 21 !important;
    }


    .hero-right .pie {

        width: 39px !important;
        height: 39px !important;

        flex-shrink: 0 !important;
    }


    .hero-right .stats {

        width: 100% !important;

        margin-top: 5px !important;
    }


    .hero-right .stats span {

        height: 2px !important;

        margin-bottom: 2px !important;
    }


    .hero-right .stats span:nth-child(1) {
        width: 29px !important;
    }


    .hero-right .stats span:nth-child(2) {
        width: 18px !important;
    }


    .hero-right .stats span:nth-child(3) {
        width: 24px !important;
    }


    /* =====================================================
       MUSIC + CHARACTER
       AYNI YATAY BANT
       ===================================================== */


    /* -----------------------------------------------------
       MUSIC
       ----------------------------------------------------- */

    .hero-right .music-card {

        position: absolute !important;

        left: 10px !important;

        /*
         * Character ile AYNI yükseklik
         */
        top: 188px !important;

        right: auto !important;
        bottom: auto !important;

        width: 158px !important;
        max-width: 158px !important;

        height: 92px !important;

        margin: 0 !important;
        padding: 7px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 5px !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;

        background:
            rgba(234,255,253,.98) !important;

        border:
            1px solid rgba(48,213,200,.17) !important;

        box-shadow:
            0 9px 25px rgba(15,23,42,.12) !important;

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        transform: none !important;

        z-index: 10000 !important;
    }


    /* Music header */

    .hero-right .music-header {

        width: 100% !important;

        height: 34px !important;
        min-height: 34px !important;

        margin: 0 !important;
        padding:
            0 0 5px !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

        box-sizing: border-box !important;

        border-bottom:
            1px solid rgba(0,0,0,.07) !important;

        pointer-events: auto !important;
    }


    .hero-right .album-art {

        width: 29px !important;
        height: 29px !important;

        min-width: 29px !important;

        border-radius: 8px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 14px !important;

        flex-shrink: 0 !important;
    }


    .hero-right .track-info {

        flex: 1 !important;

        min-width: 0 !important;

        overflow: hidden !important;
    }


    .hero-right .track-info h4 {

        margin: 0 !important;

        font-size: 10px !important;

        line-height: 1.15 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    .hero-right .track-info p {

        margin: 2px 0 0 !important;

        font-size: 7.5px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    .hero-right .sound-btn {

        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        padding: 0 !important;

        border: none !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        flex-shrink: 0 !important;
    }


    /* Playlist */

    .hero-right .music-card .playlist {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        height: 39px !important;
        max-height: 39px !important;

        margin: 0 !important;
        padding: 0 2px 0 0 !important;

        gap: 2px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;

        pointer-events: auto !important;

        touch-action: pan-y !important;
    }


    .hero-right .music-card .track {

        width: 100% !important;

        min-height: 17px !important;
        height: 17px !important;

        padding:
            2px 6px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 6px !important;

        font-size: 8.5px !important;

        line-height: 10px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        user-select: none !important;
    }


    .hero-right .music-card .track.active {

        background:
            rgba(48,213,200,.16) !important;

        color: #0faaa0 !important;

        font-weight: 700 !important;
    }


    /* =====================================================
       CHARACTER
       MUSIC İLE AYNI YATAY HİZADA
       ===================================================== */

    .hero-right .chracters {

        position: absolute !important;

        /*
         * Music ile aynı top
         */
        top: 188px !important;

        right: 7px !important;

        bottom: auto !important;

        width: 153px !important;
        height: 92px !important;

        margin: 0 !important;

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: none !important;

        z-index: 22 !important;
    }


    .hero-right .chracters .illustration {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   KÜÇÜK TELEFONLAR
   ========================================================= */

@media (max-width: 390px) {

    .hero-banner {

        height: 350px !important;
        min-height: 350px !important;
    }


    .hero-content h3 {

        font-size: 17px !important;

        margin-bottom: 5px !important;
    }


    .hero-content h1 {

        font-size: 23px !important;

        margin-bottom: 9px !important;
    }


    .hero-content p {

        font-size: 11px !important;

        line-height: 1.3 !important;
    }


    .hero-content .search-bar {

        top: 280px !important;

        height: 46px !important;
    }


    /* Music */

    .hero-right .music-card {

        left: 8px !important;

        top: 184px !important;

        width: 145px !important;
        max-width: 145px !important;

        height: 88px !important;

        padding: 6px !important;
    }


    .hero-right .music-header {

        height: 32px !important;
        min-height: 32px !important;
    }


    .hero-right .album-art {

        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        font-size: 13px !important;
    }


    .hero-right .sound-btn {

        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
    }


    .hero-right .music-card .playlist {

        height: 37px !important;
        max-height: 37px !important;
    }


    .hero-right .music-card .track {

        height: 13px !important;
        min-height: 13px !important;

        font-size: 6px !important;
    }


    /* Character */

    .hero-right .chracters {

        top: 184px !important;

        right: 5px !important;

        width: 76px !important;
        height: 88px !important;
    }
}





/* =========================================================
   MOBİL — MESLEK KEŞFET MODALI
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       ANA MODAL
       ===================================================== */

    #appleDiscoverModal.apple-modal {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        min-height: 100dvh !important;

        padding:
            72px 10px 20px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background:
            rgba(255,255,255,.94) !important;

        z-index: 999999 !important;
    }


    /* =====================================================
       İÇERİK
       ===================================================== */

    #appleDiscoverModal .modal-content-wrapper {

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* =====================================================
       KAPATMA BUTONU
       ===================================================== */

    #appleDiscoverModal .close-modal-btn {

        position: fixed !important;

        top: 38px !important;
        right: 18px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;

        padding: 0 !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background:
            rgba(0,0,0,.055) !important;

        font-size: 20px !important;

        z-index: 1000000 !important;
    }


    /* =====================================================
       ARAMA ALANI
       ===================================================== */

    #appleDiscoverModal .modal-search-container {

        width: 100% !important;

        height: 62px !important;

        margin: 0 !important;

        padding:
            0 0 10px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;

        border-bottom:
            3px solid #30d5c8 !important;
    }


    /* Arama ikonu */

    #appleDiscoverModal .modal-search-container .search-icon {

        flex-shrink: 0 !important;

        margin:
            0 10px 0 0 !important;

        font-size: 34px !important;

        line-height: 1 !important;

        color: #999 !important;
    }


    /* =====================================================
       ARAMA INPUT
       ===================================================== */

    #appleDiscoverModal #modalJobInput {

        width: 100% !important;

        min-width: 0 !important;

        height: 52px !important;

        padding: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        font-size: 29px !important;

        line-height: 1.05 !important;

        font-weight: 600 !important;

        letter-spacing: -1px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: clip !important;
    }


    #appleDiscoverModal #modalJobInput::placeholder {

        color: #c8c8c8 !important;

        opacity: 1 !important;

        font-size: 21px !important;

        font-weight: 500 !important;
    }


    /* =====================================================
       ÖNERİLER
       ===================================================== */

    #appleDiscoverModal .modal-suggestions {

        width: 100% !important;

        max-height: none !important;

        margin:
            8px 0 0 !important;

        padding: 0 !important;

        overflow-y: auto !important;
    }


    #appleDiscoverModal .modal-suggestion-item {

        padding:
            12px 4px !important;

        font-size: 15px !important;

        gap: 9px !important;
    }


    /* =====================================================
       POPÜLER MESLEKLER
       ===================================================== */

    #appleDiscoverModal .popular-categories {

        width: 100% !important;

        margin:
            30px 0 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    #appleDiscoverModal .popular-categories h3 {

        margin:
            0 0 12px !important;

        padding: 0 !important;

        font-size: 17px !important;

        line-height: 1.2 !important;

        font-weight: 600 !important;

        color: #888 !important;
    }


    /* =====================================================
       EN ÇOK KEŞFEDİLENLER
       YATAY KAYDIRMA
       ===================================================== */

    #appleDiscoverModal .pill-container {

        display: flex !important;

        flex-direction: column !important;

        flex-wrap: nowrap !important;

        align-items: flex-start !important;

        gap: 9px !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    #appleDiscoverModal .job-pill {

        flex: 0 0 auto !important;

        width: max-content !important;

        max-width: 100% !important;

        min-height: 45px !important;

        padding:
            0 16px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;

        border-radius: 23px !important;

        font-size: 14px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        box-shadow:
            0 3px 10px rgba(0,0,0,.04) !important;
    }


    /* =====================================================
       TÜM MESLEKLER BAŞLIĞI
       ===================================================== */

    #appleDiscoverModal .popular-categories > h3:nth-of-type(2) {

        margin-top: 30px !important;

        margin-bottom: 10px !important;
    }


    /* =====================================================
       TÜM MESLEKLER
       3'LÜ GRID
       ===================================================== */

    #appleDiscoverModal .other-jobs-grid {

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap: 3px !important;

        row-gap: 3px !important;

        width: 100% !important;

        margin:
            0 !important;

        padding:
            0 0 25px !important;

        box-sizing: border-box !important;

        align-items: stretch !important;
    }


    /* =====================================================
       MESLEK KARTLARI
       ===================================================== */

    #appleDiscoverModal .other-job-card {

        width: 100% !important;

        min-width: 0 !important;

        height: 58px !important;

        min-height: 58px !important;

        margin: 0 !important;

        padding:
            6px 5px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 5px !important;

        border-radius: 10px !important;

        font-size: 9px !important;

        line-height: 1.15 !important;

        overflow: hidden !important;
    }


    /* Kart ikonu */

    #appleDiscoverModal .other-job-card i {

        flex:
            0 0 auto !important;

        width: 11px !important;

        font-size: 9px !important;

        text-align: center !important;
    }


    /* Kart metni */

    #appleDiscoverModal .other-job-card {

        word-break: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       391-768px 
       ===================================================== */

    @media (min-width: 391px) {

        #appleDiscoverModal .other-job-card {

            height: 60px !important;

            min-height: 60px !important;

            padding:
                7px 6px !important;

            font-size: 9.5px !important;
        }
    }
}


/* =========================================================
   ÇOK KÜÇÜK TELEFONLAR
   ========================================================= */

@media (max-width: 390px) {

    #appleDiscoverModal.apple-modal {

        padding:
            68px 10px 18px !important;
    }


    #appleDiscoverModal .close-modal-btn {

        top: 38px !important;
        right: 16px !important;

        width: 44px !important;
        height: 44px !important;
    }


    #appleDiscoverModal .modal-search-container {

        height: 60px !important;
    }


    #appleDiscoverModal .modal-search-container .search-icon {

        font-size: 31px !important;

        margin-right: 8px !important;
    }


    #appleDiscoverModal #modalJobInput {

        font-size: 27px !important;

        height: 50px !important;
    }


    #appleDiscoverModal #modalJobInput::placeholder {

        font-size: 27px !important;
    }


    #appleDiscoverModal .popular-categories {

        margin-top: 27px !important;
    }


    #appleDiscoverModal .popular-categories h3 {

        font-size: 16px !important;

        margin-bottom: 10px !important;
    }


    #appleDiscoverModal .job-pill {

        min-height: 43px !important;

        padding:
            0 14px !important;

        font-size: 13px !important;
    }


    #appleDiscoverModal .popular-categories > h3:nth-of-type(2) {

        margin-top: 27px !important;
    }


    #appleDiscoverModal .other-jobs-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 3px !important;
    }


    #appleDiscoverModal .other-job-card {

        height: 55px !important;

        min-height: 55px !important;

        padding:
            5px 4px !important;

        gap: 4px !important;

        border-radius: 9px !important;

        font-size: 8.5px !important;

        line-height: 1.1 !important;
    }


    #appleDiscoverModal .other-job-card i {

        width: 10px !important;

        font-size: 8px !important;
    }
}




/* =========================================================
   ÜNİVERSİTE TERCİH MODALI — MOBİL -Card5
   ========================================================= */

@media (max-width: 768px) {

    .university-modal {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 12px !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 999999 !important;
    }


    /* =====================================================
       ANA MODAL
       ===================================================== */

    .university-modal .university-content {

        position: relative !important;

        width: 100% !important;
        max-width: 620px !important;

        min-width: 0 !important;
        max-height: calc(100dvh - 24px) !important;

        margin: auto !important;

        padding: 22px 16px 18px !important;

        box-sizing: border-box !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border-radius: 20px !important;
    }


    /* =====================================================
       KAPATMA BUTONU
       ===================================================== */

    .university-modal .close-modal {

        position: absolute !important;

        top: 10px !important;
        right: 10px !important;

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        border-radius: 50% !important;

        font-size: 16px !important;

        z-index: 5 !important;
    }


    /* =====================================================
       BAŞLIK
       ===================================================== */

    .university-modal .university-content h1 {

        width: 100% !important;

        margin: 5px 35px 7px 0 !important;

        font-size: 21px !important;

        line-height: 1.2 !important;

        text-align: left !important;

        box-sizing: border-box !important;
    }


    .university-modal .uni-subtitle {

        width: 100% !important;

        margin: 0 0 18px !important;

        font-size: 11px !important;

        line-height: 1.45 !important;
    }


    /* =====================================================
       GRAFİK ALANI
       ===================================================== */

    .university-modal .chart-area {

        width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;

        margin: 0 !important;
    }


    .university-modal .chart-row {

        display: grid !important;

        grid-template-columns:
            72px minmax(0, 1fr) 55px !important;

        align-items: center !important;

        gap: 7px !important;

        width: 100% !important;

        min-width: 0 !important;

        margin-bottom: 12px !important;

        box-sizing: border-box !important;
    }


    .university-modal .chart-row > span {

        min-width: 0 !important;

        font-size: 9px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    .university-modal .bar-uni {

        width: 100% !important;

        min-width: 0 !important;

        height: 10px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        border-radius: 999px !important;
    }


    .university-modal .fill {

        height: 100% !important;

        border-radius: inherit !important;
    }


    .university-modal .chart-row strong {

        min-width: 0 !important;

        font-size: 9px !important;

        line-height: 1 !important;

        text-align: right !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ALT BİLGİ KARTLARI
       ===================================================== */

    .university-modal .trend-grid {

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;

        width: 100% !important;

        min-width: 0 !important;

        margin-top: 18px !important;

        box-sizing: border-box !important;
    }


    .university-modal .trend-card {

        min-width: 0 !important;

        width: 100% !important;

        padding: 11px 8px !important;

        box-sizing: border-box !important;

        border-radius: 13px !important;

        overflow: hidden !important;
    }


    .university-modal .trend-card > span {

        display: block !important;

        margin-bottom: 5px !important;

        font-size: 19px !important;
    }


    .university-modal .trend-card h3 {

        margin: 0 0 5px !important;

        font-size: 9px !important;

        line-height: 1.2 !important;
    }


    .university-modal .trend-card p {

        margin: 0 !important;

        font-size: 7.5px !important;

        line-height: 1.4 !important;

        overflow-wrap: break-word !important;
    }
}


/* =========================================================
   DAR EKRAN
   ========================================================= */

@media (max-width: 389px) {

    .university-modal {
        padding: 8px !important;
    }


    .university-modal .university-content {

        max-height: calc(100dvh - 16px) !important;

        padding:
            20px 12px 14px !important;

        border-radius: 17px !important;
    }


    .university-modal .university-content h1 {
        font-size: 19px !important;
    }


    .university-modal .chart-row {

        grid-template-columns:
            65px minmax(0, 1fr) 50px !important;

        gap: 5px !important;
    }


    .university-modal .chart-row > span {
        font-size: 8px !important;
    }


    .university-modal .chart-row strong {
        font-size: 8px !important;
    }


    .university-modal .trend-grid {
        gap: 5px !important;
    }


    .university-modal .trend-card {
        padding: 9px 6px !important;
    }


    .university-modal .trend-card h3 {
        font-size: 8px !important;
    }


    .university-modal .trend-card p {
        font-size: 7px !important;
    }
}













/* =========================================================
   MAAŞ VERİSİ İKONU
   MOBİL TOOLTIP
   ========================================================= */

@media (max-width: 768px) {

    .salary-source-icon {
        position: relative !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;
    }


    .salary-source-icon::after {

        content: attr(data-tooltip);

        position: absolute;

        left: 50%;
        top: calc(100% + 8px);

        transform:
            translateX(-50%)
            translateY(-4px);

        width: max-content;

        max-width: 145px;

        padding: 7px 10px;

        box-sizing: border-box;

        border-radius: 8px;

        background: #0f172a;

        color: #ffffff;

        font-size: 9px;

        font-weight: 600;

        line-height: 1.3;

        text-align: center;

        white-space: normal;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        z-index: 1000;

        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
    }


    
    .salary-source-icon.tooltip-active::after {

        opacity: 1;

        visibility: visible;

        transform:
            translateX(-50%)
            translateY(0);
    }


    
    .metric-card:first-child
    .salary-source-icon::after {

        left: 0;

        transform:
            translateY(-4px);
    }


    .metric-card:first-child
    .salary-source-icon.tooltip-active::after {

        transform:
            translateY(0);
    }
}

.salary-form-btn{
    pointer-events: none; 
    opacity: 0.5;         
    cursor: not-allowed;  
}