/* Fontlar və Rənglər */
:root {
   --primary: #a67c52;       /* əsas premium bej */
    --accent: #d4af37;        /* qızılı */
    --bg-light: #f6f1e7;      /* açıq bej fon */
    --bg-dark: #14110f;       /* isti tünd */
    --text-light: #3e2f22;    /* isti qəhvəyi */
    --text-dark: #f5f0e6;
    --font-main: 'Quicksand', sans-serif;
    --font-heading: 'Playfair Display', serif;
}

body {
    margin: 0; padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-light);
    color: var(--text-light);
    transition: 0.4s;
    line-height: 1.6;
}

.light-mode { --bg: var(--bg-light); --text: var(--text-light); }
.dark-mode { --bg: var(--bg-dark); --text: var(--text-dark); }

/* Navbar Düzəlişi */
.main-header {
background: linear-gradient(90deg,#f6f1e7,#efe2cf);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dark-mode .main-header {
background: #14110f;
border-bottom: 1px solid #2a2118;
}
.container {
    width: 90%; max-width: 1200px; margin: auto;
    display: flex; justify-content: space-between; align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 26px; color: var(--primary); font-weight: bold;
}

.navbar a {
    text-decoration: none; color: inherit;
    margin: 0 15px; font-weight: 600; font-size: 15px;
    transition: 0.3s;
}

.navbar a:hover { color: var(--accent); }

/* Axtarış və Mode Switch */
.header-actions { display: flex; align-items: center; gap: 20px; }
.search-bar input {
    padding: 8px 15px; border-radius: 20px; border: 1px solid #ddd;
    outline: none; font-family: var(--font-main);
}

/* Xəritə Sahəsi */
.hero-map-section { padding: 140px 20px; text-align: center; }
.section-header h1 { font-family: var(--font-heading); font-size: 38px; margin-bottom: 10px; }

.map-wrapper {
   width: 95%;
    max-width: 1200px;
    height: 600px;
    margin: 40px auto;
    border-radius: 30px;
    overflow: hidden;
    background: #0f172a; /* yalnız xəritə qaranlıq */
    box-shadow: 0 25px 70px rgba(0,0,0,0.3);
}

.map-container {
    width: 100%; 
    height: 100%;
  background: #f1e3d3; /* açıq torpaq tonu */
    cursor: grab;
}

.watercolor-map {
    width: 100%;
    height: 100%;
    background: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') center/contain no-repeat;
      background-color: #f3e4d4;
    position: relative;
    transition: transform 0.3s ease;
}


/* Ölkə Markerləri */
.country-marker {
    position: absolute; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: 0.3s;
}

.flag-wrapper img {
    width: 50px; border-radius: 8px; border: 3px solid white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.country-label {
    background: white; padding: 2px 10px; border-radius: 10px;
    font-size: 12px; font-weight: bold; margin-top: 5px; color: #333;
}

.az { top: 35%; left: 58%; }
.tr { top: 38%; left: 52%; }
.ru { top: 20%; left: 62%; }

#world-map {
    width: 100%;
    height: 100%;
}

/* Ölkələrin default rəngi */
#world-map path {
    fill: #c9a96e;
    stroke: #ffffff;
    stroke-width: 1;
    transition: 0.3s ease;
}

/* Hover premium effekti */
#world-map path:hover {
    fill: #d4af37;
    stroke: gold;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px gold);
    cursor: pointer;
}

/* Dark mode */
body.dark-mode #world-map path {
    fill: #1f2937;
    stroke: #d4af37;
}




/* Nağıl Kartları */
.stories-section { padding: 40px 5%; background: rgba(0,0,0,0.02); }
.filter-wrapper { margin-bottom: 30px; display: flex; justify-content: center; gap: 15px; }

.filter-btn {
    padding: 10px 25px; border-radius: 25px; border: none;
    background: white; color: var(--primary); font-weight: bold;
    cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.filter-btn.active { background: var(--primary); color: white; }

.stories-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.story-card {
    background: white; padding: 25px; border-radius: 25px;
    position: relative; transition: 0.3s;
    border-bottom: 5px solid var(--accent);
}

.story-card:hover { transform: translateY(-10px); }
.card-badge { background: var(--accent); color: white; padding: 4px 12px; border-radius: 15px; font-size: 12px; width: fit-content; }

/* ===== DARK MODE PREMIUM ===== */

body.dark-mode {
    background: #0f0f14;
    color: #eaeaea;
}

/* Header */
.dark-mode .main-header {
    background: #111;
    border-bottom: 1px solid #222;
}

/* Logo */
.dark-mode .logo {
    color: gold;
}

/* Navbar */
.dark-mode .navbar a {
    color: #ccc;
}

.dark-mode .navbar a:hover {
    color: gold;
}

/* Section başlıq */
.dark-mode .section-header h1 {
    color: gold;
}

.dark-mode .section-header p {
    color: #bbb;
}

/* Kartlar */
.dark-mode .story-card {
    background: #1c1c26;
    border-bottom: 4px solid gold;
}

/* Hover effekti */
.dark-mode .story-card:hover {
    transform: translateY(-10px);
}

/* Yazılar hover zamanı */
.dark-mode .story-card h3 {
    transition: 0.3s;
}

.dark-mode .story-card:hover h3 {
    color: gold;
}

/* Ümumi link hover */
.dark-mode a:hover {
    color: white;
}

.dark-mode .nav-link {
    color: #ccc;
    transition: 0.3s;
}

.dark-mode .nav-link:hover {
    color: white;
}

.dark-mode .section-header h1:hover {
    color: white;
}

/* footer hisse */

.main-footer {
    background: #f1efe7;
    padding: 50px 10%;
    margin-top: 60px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col h3, .footer-col h4 {
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.footer-col ul li:hover {
    color: var(--accent);
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

/* Dark footer */
.dark-mode .main-footer {
    background: #111;
    color: #ccc;
}

.dark-mode .footer-col ul li:hover {
    color: gold;
}

.dark-mode .footer-bottom {
    border-top: 1px solid #222;
}


/* stori hisse */
.popular-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 32px;
    margin-bottom: 40px;
}

.dark-mode .popular-title {
    color: gold;
}

/* panel */
.country-panel {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 300px;
    padding: 25px;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.1);
    color: white;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
}
.dark-mode .country-panel {
    background: rgba(20,20,30,0.8);
    color: white;
}
.story-card {
    background: white;
    padding: 25px;
    border-radius: 25px;
    transition: 0.4s;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.story-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: 0.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.country-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 2000;
}

.country-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    transform: translateY(50px);
    transition: 0.4s;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}

.country-modal.active .modal-content {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
}
.dark-mode .modal-content {
    background: #1c1c26;
    color: white;
}
/* Dark mode xəritə 
body.dark-mode #world-map path {
    fill: #8a6a2f;
    stroke: #5c4a1f;
    transition: 0.3s ease;
}

/* Hover parlaq olsun 
body.dark-mode #world-map path:hover {
    fill: #ffd700;
    stroke: #fff3b0;
    stroke-width: 2;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.8));
} 
 body.dark-mode #world-map path:hover {
    fill: #ffdf3a;
    filter: drop-shadow(0 0 12px rgba(255,223,58,0.9))
            drop-shadow(0 0 25px rgba(255,215,0,0.5));
} */
.jvm-region {
  transition: all 0.3s ease;
}

.jvm-region:hover {
  filter: drop-shadow(0 0 8px #d4af37 );
}
/* ===== PREMIUM INFO SECTION ===== */

/* ===== DEFAULT (GÜNDÜZ QALIR) =====*/

.country-info {
    padding: 120px 10%;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, #f6f1e7, #e9dccb);
} 
 

.info-card {
    background: #ffffff;
    padding: 60px;
    border-radius: 30px;
    width: 100%;
    max-width: 700px;
    text-align: center;
    border: 1px solid #e5d6c2;
    box-shadow: 0 10px 40px rgba(166,124,82,0.15);
    transition: all 0.4s ease;
}
/* ===== INFO CARD - LIGHT MODE ===== */

.country-info .info-card {
    background: #ffffff;
    color: #333;
    transition: all 0.4s ease;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* ✨ Hover effekti */
.country-info .info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ===== DARK MODE (HANSI CLASS OLSA DA TUTSUN) ===== */

body.dark .country-info,
body.dark-mode .country-info,
.dark .country-info,
.dark-mode .country-info {
    background: #0f0f0f !important;
}

body.dark .info-card,
body.dark-mode .info-card,
.dark .info-card,
.dark-mode .info-card {
    background: #ffffff !important;
    border: 2px solid transparent;
}

/* Qızılı hover */
body.dark .info-card:hover,
body.dark-mode .info-card:hover,
.dark .info-card:hover,
.dark-mode .info-card:hover {
    border: 2px solid #d4af37;
    box-shadow:
        0 0 25px rgba(212,175,55,0.7),
        0 0 60px rgba(212,175,55,0.4);
    transform: translateY(-6px);
}

/* Text */
.info-card h2 {
    font-size: 36px;
    margin-bottom: 20px;
    background: linear-gradient(90deg,#a67c52,#d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.info-card p {
    font-size: 18px;
    color: #1e293b;
}

.hidden {
    display: none;
}
/* ===== PREMIUM HEADER ===== */

.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(245,230,200,0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid #e0d2b5;
    z-index: 1000;
    transition: 0.4s ease;
}

.main-header.scrolled {
    padding: 12px 0;
    background: rgba(235,215,190,0.98);
}

.container {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
.logo {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(90deg,#ffd700,#fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
}

/* NAV LINKS */
.navbar {
    display: flex;
    gap: 30px;
}

.nav-link {
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    transition: 0.3s;
}

.nav-link::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -5px;
    background: linear-gradient(90deg,#ffd700,#ffb300);
    transition: 0.4s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: #ffd700;
}

/* SEARCH */
.search-bar input {
    padding: 8px 15px;
    border-radius: 20px;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    width: 180px;
    transition: 0.3s;
}

.search-bar input:focus {
    width: 220px;
    background: rgba(255,255,255,0.15);
}

/* THEME SWITCH 
.mode-switch {
    margin-left: 15px;
    padding: 8px 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,0.08);
    color: #fff;
    transition: 0.3s;
}
*/
.mode-switch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: 0.3s ease;
}

.mode-switch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.6), transparent 70%);
    opacity: 0;
    transition: 0.4s ease;
}

.mode-switch:hover::after {
    opacity: 1;
    animation: pulseGlow 1.2s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.3; }
    100% { transform: scale(1); opacity: 0.6; }
}

.mode-switch:hover {
    background: #ffd700;
    color: #000;
     transform: scale(1.15);
}

.light-mode {
    background: #f5f5f5;
    color: #111;
}

.light-mode .main-header {
    background: #fdfaf1;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.light-mode .search-bar input {
    background: rgba(0,0,0,0.05);
    color: #000;
}

.light-mode .logo {
    background: linear-gradient(90deg,#d4af37,#f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.light-mode .nav-link {
    color: #222;
}

.light-mode .nav-link:hover {
    color: #a67c52; /* premium bej */;
}

/* magiccc*/
.magic-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

.magic-stars span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    animation: floatStar 6s linear infinite;
    opacity: 0.8;
}
.dark-mode .magic-stars {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.dark-mode .magic-stars span {
position:absolute;
width:4px;
height:4px;
background:#ffd700;
border-radius:50%;
animation:floatStar 6s linear infinite;
opacity:0.8;
}
@keyframes floatStar {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) scale(0.5);
        opacity: 0;
    }
}

.light-mode {
    background: linear-gradient(
        180deg,
         #f6f1e7 0%,
        #f1e3d3 50%,
        #e9dccb 100%
    );
    color: #1e293b;
}

/* Navbar gündüz */
.light-mode .main-header {
    background: linear-gradient(90deg, #f6f1e7,#efe2cf);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Günəş şəfəqi effekti */
.light-mode .main-header::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(237, 193, 18, 0.6), transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
}
   
/*rengleri oxunaqli edek*/
.light-mode .nav-link {
    color: #1e293b;
    font-weight: 500;
}

.light-mode .nav-link:hover {
    color: #2f855a; /* soft yaşıl */
}



/*reng deyisikliyi*/

/* Scroll zamanı navbar dəyişməsin */
.dark-mode .main-header,
.dark-mode .main-header.scrolled {
    background: #14110f;  /* sabit isti tünd rəng */
    border-bottom: 1px solid #2a2118;
}
.dark-mode .main-header,
.dark-mode .main-header.scrolled {
    background: rgba(20,17,15,0.95);
    backdrop-filter: blur(15px);
}
.dark-mode .main-header.scrolled {
    box-shadow: 0 10px 40px rgba(212,175,55,0.15);
}


/* ============================= */
/* ABOUT PAGE PREMIUM DESIGN */
/* ============================= */

.about-hero {
    padding: 180px 10% 100px;
    text-align: center;
}

.about-hero h1 {
    font-family: var(--font-heading);
    font-size: 42px;
    margin-bottom: 20px;
    background: linear-gradient(90deg,#d4af37,#a67c52);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-hero p {
    max-width: 700px;
    margin: auto;
    font-size: 18px;
    opacity: 0.8;
}

.about-content {
    padding: 80px 10% 120px;
}

.about-content .container {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.about-box {
    flex: 1;
    min-width: 280px;
    background: white;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    transition: 0.4s;
}

.about-box:hover {
    transform: translateY(-10px);
}

.about-box h2 {
    font-family: var(--font-heading);
    margin-bottom: 20px;
}

.about-box ul {
    padding-left: 20px;
}

/* Dark mode about */

.dark-mode .about-box {
    background: #1c1c26;
    color: #eaeaea;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.dark-mode .about-hero h1 {
    background: linear-gradient(90deg,#ffd700,#fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================= */
/* CONTACT PAGE PREMIUM DESIGN */
/* ============================= */

.contact-hero {
    padding: 180px 10% 80px;
    text-align: center;
}

.contact-hero h1 {
    font-family: var(--font-heading);
    font-size: 40px;
    margin-bottom: 15px;
    background: linear-gradient(90deg,#d4af37,#a67c52);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-section {
    padding: 60px 10% 120px;
}

.contact-wrapper {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.contact-info {
    flex: 1;
    min-width: 260px;
}

.contact-info h2 {
    font-family: var(--font-heading);
    margin-bottom: 20px;
}

.contact-form {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid #ddd;
    outline: none;
    font-family: var(--font-main);
    transition: 0.3s;
    font-size: 14px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}

.contact-form button {
    padding: 15px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(90deg,#d4af37,#a67c52);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
}

.contact-form button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(212,175,55,0.4);
}

/* Dark mode contact */

.dark-mode .contact-form input,
.dark-mode .contact-form textarea {
    background: #1c1c26;
    border: 1px solid #333;
    color: white;
}

.dark-mode .contact-info {
    color: #ddd;
}

.dark-mode .contact-form button {
    background: linear-gradient(90deg,#ffd700,#c9a96e);
    color: #111;
}




/* ================= KATEQORIYALAR PAGE ================= */
/* */
.categories-hero{
padding:180px 10% 80px;
text-align:center;
}

.categories-hero h1{
font-family:var(--font-heading);
font-size:42px;
background:linear-gradient(90deg,#d4af37,#a67c52);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.categories-section{
padding:60px 10% 120px;
}

.category-title{
text-align:center;
font-family:var(--font-heading);
font-size:30px;
margin:60px 0 40px;
}
.category-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:30px;
}

/* Tablet */
@media(max-width:1200px){
.category-grid{
grid-template-columns:repeat(3, 1fr);
}
}

@media(max-width:900px){
.category-grid{
grid-template-columns:repeat(2, 1fr);
}
}

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

/* Mobil*/
@media(max-width:600px){
.category-grid{
grid-template-columns:1fr;
}
}

.category-card{
background:white;
padding:40px 30px;
border-radius:30px;
text-align:center;
transition:0.4s;
box-shadow:0 15px 50px rgba(0,0,0,0.08);
cursor:pointer;
}

.category-card:hover{
transform:translateY(-12px);
box-shadow:0 0 40px rgba(212,175,55,0.4);
}

.cat-icon{
font-size:40px;
display:block;
margin-bottom:20px;
}

.age-grid{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:30px;
}

.age-card{
padding:15px 35px;
border-radius:50px;
background:linear-gradient(90deg,#d4af37,#a67c52);
color:white;
font-weight:bold;
transition:0.3s;
cursor:pointer;
}

.age-card:hover{
transform:scale(1.1);
box-shadow:0 10px 40px rgba(212,175,55,0.5);
}

/* DARK MODE */

.dark-mode .category-card{
background:#1c1c26;
color:white;
box-shadow:0 15px 40px rgba(0,0,0,0.4);
}

.dark-mode .category-card:hover{
box-shadow:0 0 40px rgba(255,215,0,0.6);
}

.dark-mode .category-title{
color:gold;
}
 


 .main-3-cards{
display:flex;
justify-content:center;
gap:50px;
padding:100px 10%;
flex-wrap:wrap;
}

.big-card{
background:white;
padding:80px 100px;
border-radius:30px;
font-size:30px;
cursor:pointer;
transition:0.3s;
box-shadow:0 20px 60px rgba(0,0,0,0.1);
text-align:center;
}

.big-card:hover{
transform:translateY(-10px);
box-shadow:0 0 50px rgba(212,175,55,0.6);
}

.dark-mode .big-card{
background:#1c1c26;
color:white;
}