/* ==========================================================
   OZİ MERAK ORMANI v2.0
   MASTER BUILD CSS FINAL 1/4
   Ana Tema Sistemi
========================================================== */

/* ==========================================================
   FONT
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   ROOT COLORS
========================================================== */

:root{

    --sky:#CFF7FF;
    --sky-light:#EFFFFF;

    --primary:#16C7D8;
    --primary-dark:#0896A8;

    --forest:#48C774;
    --forest-dark:#2E9B55;

    --space:#7158FF;
    --space-dark:#4830C8;

    --video:#FF5C68;
    --video-dark:#D9414E;

    --sea:#22A7FF;
    --sea-dark:#1678C1;

    --game:#FFB733;
    --game-dark:#D68C08;

    --club:#FFD966;
    --club-dark:#E3B600;

    --mint:#E6FFF7;
    --cream:#FFFDF8;
    --white:#FFFFFF;

    --text:#19434A;
    --text-light:#4E6D72;

    --shadow:0 18px 40px rgba(0,0,0,.12);
    --shadow-soft:0 10px 25px rgba(0,0,0,.08);

    --radius-xl:38px;
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:12px;

    --transition:.35s ease;

}

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Baloo 2",cursive;

    background:
    linear-gradient(180deg,#DDFBFF 0%,#F5FFF9 45%,#D8FFF1 100%);

    color:var(--text);

    overflow-x:hidden;
}

/* Scroll */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--primary),#37D46A);
    border-radius:30px;
}

::-webkit-scrollbar-track{
    background:#ECFFFF;
}

/* ==========================================================
   GLOBAL ELEMENTS
========================================================== */

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
    border:none;
    cursor:pointer;
    background:none;
}

section{
    position:relative;
}

.container{

    width:min(1240px,92%);
    margin:auto;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1{
    font-size:2rem;
    font-weight:800;
}

h2{

    font-size:3rem;
    font-weight:800;
    line-height:1.15;

}

h3{
    font-size:1.45rem;
    font-weight:700;
}

p{
    color:var(--text-light);
    line-height:1.8;
    font-size:1.05rem;
}

/* ==========================================================
   SECTION TITLE
========================================================== */

.section-heading{

    text-align:center;
    margin-bottom:70px;

}

.section-heading h2{

    color:var(--text);
    margin-top:18px;
    margin-bottom:20px;

}

.section-heading p{

    max-width:700px;
    margin:auto;

}

.section-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:999px;

    background:#E6FFFF;

    color:var(--primary-dark);

    font-weight:700;
    font-size:.95rem;

    box-shadow:var(--shadow-soft);

}

/* ==========================================================
   BUTTON SYSTEM
========================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 34px;

    border-radius:999px;

    font-size:1rem;
    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-soft);

}

.btn img{
    width:24px;
}

.btn-primary{

    color:white;

    background:
    linear-gradient(135deg,#14C8D8,#3AD66A);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(20,200,216,.35);

}

.btn-secondary{

    background:white;

    color:var(--primary-dark);

    border:2px solid rgba(22,199,216,.25);

}

.btn-secondary:hover{

    background:#F0FFFF;
    transform:translateY(-5px);

}

/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;
    inset:0 0 auto 0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.78);

    border-bottom:1px solid rgba(255,255,255,.45);

}

.header-container{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    height:92px;
    width:100%;

}

.logo-area{

    display:flex;
    align-items:center;
    gap:16px;

}

.logo{

    width:72px;
    height:72px;

}

.logo-small{

    color:var(--primary-dark);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;

}

.logo-text h1{

    color:#1C5A63;
    font-size:1.55rem;

}

.navbar{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;

    flex:1;
    margin:0 24px;

}

.navbar a{

    font-weight:700;
    color:#2A5A60;

    transition:.25s;

    position:relative;

}

.navbar a::after{

    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:0%;
    height:4px;

    border-radius:99px;

    background:linear-gradient(to right,#13C8D7,#4AD868);

    transition:.3s;

}

.navbar a:hover{

    color:var(--primary-dark);

}

.navbar a:hover::after{

    width:100%;

}

/* ==========================================================
   HEADER ACTIONS
========================================================== */

/* ==========================================================
   HEADER ACTIONS
========================================================== */

.header-actions{

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

    gap:12px;

    margin-left:auto;
    flex-shrink:0;
    white-space:nowrap;

}

.search-btn,
.theme-btn{

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    background:#F5FFFF;

    border-radius:50%;

    box-shadow:var(--shadow-soft);

    transition:var(--transition);

    flex-shrink:0;

}

.search-btn:hover,
.theme-btn:hover{

    transform:translateY(-4px);

    background:white;

}

.search-btn img,
.theme-btn img{

    width:22px;

}

.login-btn{

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

    padding:13px 22px;

    border-radius:999px;

    color:white;

    background:linear-gradient(135deg,#13C8D8,#1DA2FF);

    font-weight:700;

    transition:var(--transition);

    flex-shrink:0;

}

.login-btn:hover{

    transform:translateY(-3px);

}

.mobile-menu{

    display:none;

    width:46px;
    height:46px;

    border-radius:50%;

    background:#F3FFFF;

    position:relative;

    flex-shrink:0;

}

.mobile-menu span{

    position:absolute;

    width:20px;
    height:2px;

    background:#1A5B63;

    border-radius:4px;

}

.mobile-menu span:nth-child(1){ top:14px; }
.mobile-menu span:nth-child(2){ top:22px; }
.mobile-menu span:nth-child(3){ top:30px; }
/* ==========================================================
   SKY BACKGROUND
========================================================== */

.sky-gradient{

    position:fixed;
    inset:0;

    z-index:-5;

    background:
    radial-gradient(circle at top,#F6FFFF 0%,transparent 40%),
    linear-gradient(180deg,#CFF8FF,#F5FFF8);

}

.hero-light{

    position:absolute;
    top:-180px;
    left:-120px;

    width:600px;
    height:600px;

    background:radial-gradient(circle,#D7FFFF,transparent 70%);
    filter:blur(20px);

    z-index:-2;

}

.sparkles{

    position:fixed;
    inset:0;

    pointer-events:none;

    background-image:
    radial-gradient(circle,#FFFFFF 1px,transparent 2px);

    background-size:140px 140px;

    opacity:.25;

    z-index:-1;

}

/* ==========================================================
   FLOATING CLOUDS
========================================================== */

.cloud{

    position:absolute;

    background:white;

    opacity:.75;

    border-radius:999px;

    filter:blur(2px);

}

.cloud::before,
.cloud::after{

    content:"";
    position:absolute;
    background:white;
    border-radius:50%;

}

.cloud-one{

    width:180px;
    height:60px;

    top:90px;
    left:8%;

}

.cloud-one::before{

    width:70px;
    height:70px;

    left:20px;
    top:-30px;

}

.cloud-one::after{

    width:90px;
    height:90px;

    right:18px;
    top:-40px;

}

.cloud-two{

    width:220px;
    height:70px;

    top:160px;
    right:6%;

}

.cloud-two::before{

    width:85px;
    height:85px;

    left:26px;
    top:-32px;

}

.cloud-two::after{

    width:95px;
    height:95px;

    right:24px;
    top:-45px;

}

.cloud-three{

    width:150px;
    height:52px;

    top:310px;
    left:38%;

}

.cloud-three::before{

    width:55px;
    height:55px;

    left:15px;
    top:-22px;

}

.cloud-three::after{

    width:70px;
    height:70px;

    right:12px;
    top:-28px;

}

/* ==========================================================
   GENERIC CARDS
========================================================== */

.quick-card,
.world-card,
.video-card,
.badge-card,
.map-info-card{

    background:white;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-soft);

    transition:var(--transition);

}

.quick-card:hover,
.world-card:hover,
.video-card:hover,
.badge-card:hover,
.map-info-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}
/* ==========================================================
   HERO SECTION
   MASTER BUILD CSS FINAL 2/4
========================================================== */

.hero{

    position:relative;
    overflow:hidden;

    padding-top:96px;
    min-height:900px;

}

/* ----------------------------------------------------------
   HERO BACKGROUND
---------------------------------------------------------- */

.hero-background{

    position:absolute;
    inset:0;
    z-index:-3;

}

.hero-bg{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;

    filter:saturate(110%) brightness(1.03);

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(180deg,
    rgba(255,255,255,.10),
    rgba(234,255,248,.35),
    rgba(222,255,245,.95));

}

/* ----------------------------------------------------------
   HERO LAYOUT
---------------------------------------------------------- */

.hero-container{

    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:50px;

    padding-top:8px;

}

.hero-content{
    z-index:5;
}

/* ----------------------------------------------------------
   HERO BADGE
---------------------------------------------------------- */

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 24px;

    border-radius:999px;

    background:white;

    box-shadow:var(--shadow-soft);

    color:var(--primary-dark);

    font-weight:700;

    margin-bottom:30px;

}

.hero-badge img{
    width:26px;
}

/* ----------------------------------------------------------
   HERO TITLE
---------------------------------------------------------- */

.hero h2{

    font-size:4.3rem;
    line-height:1.05;
    color:#134F58;

}

.hero h2 span{

    display:block;

    margin-top:14px;

    color:#17C6D7;

    font-size:3.1rem;

}

.hero p{

    margin:28px 0 36px;
    max-width:600px;

    font-size:1.18rem;

}

/* ----------------------------------------------------------
   HERO BUTTONS
---------------------------------------------------------- */

.hero-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:18px;

    margin-bottom:36px;

}

/* ----------------------------------------------------------
   FEATURE PILLS
---------------------------------------------------------- */

.hero-features{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

}

.feature-pill{

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    background:rgba(255,255,255,.92);

    border-radius:999px;

    box-shadow:var(--shadow-soft);

    font-weight:700;

    color:#245C63;

}

.feature-pill img{
    width:22px;
}

/* ----------------------------------------------------------
   HERO CHARACTER
---------------------------------------------------------- */

.hero-character{

    position:relative;

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

}

.ozi-main{

    width:470px;
    max-width:100%;

    filter:drop-shadow(0 28px 35px rgba(0,0,0,.18));

    animation:oziFloat 4s ease-in-out infinite;

}

@keyframes oziFloat{

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

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

}

/* ----------------------------------------------------------
   HERO HALO
---------------------------------------------------------- */

.hero-character::before{

    content:"";

    position:absolute;

    width:540px;
    height:540px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.75),
    rgba(214,255,252,.35),
    transparent 70%);

    z-index:-1;

    animation:heroGlow 6s ease infinite;

}

@keyframes heroGlow{

    0%,100%{
        transform:scale(1);
        opacity:.75;
    }

    50%{
        transform:scale(1.06);
        opacity:1;
    }

}

/* ----------------------------------------------------------
   SPEECH BUBBLE
---------------------------------------------------------- */

.speech-bubble{

    position:absolute;

    top:20px;
    left:-30px;

    width:290px;

    padding:24px;

    background:white;

    border-radius:26px;

    box-shadow:var(--shadow);

    animation:bubbleBounce 4s ease infinite;

}

.speech-bubble::after{

    content:"";

    position:absolute;

    bottom:-18px;
    right:50px;

    border-width:18px 16px 0 16px;
    border-style:solid;

    border-color:white transparent transparent transparent;

}

.bubble-title{

    color:var(--primary-dark);

    font-weight:800;

    margin-bottom:10px;

}

.speech-bubble p{

    margin:0;
    font-size:1rem;
    line-height:1.6;

}

@keyframes bubbleBounce{

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

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

}

/* ----------------------------------------------------------
   HERO DECORATION CIRCLES
---------------------------------------------------------- */

.hero::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:#D5FFF5;

    border-radius:50%;

    top:130px;
    right:-90px;

    opacity:.6;

    filter:blur(10px);

}

.hero::after{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    background:#FFF4AA;

    border-radius:50%;

    bottom:140px;
    left:-70px;

    opacity:.4;

    filter:blur(14px);

}

/* ----------------------------------------------------------
   HERO BOTTOM QUICK CARDS
---------------------------------------------------------- */

.hero-bottom{

    margin-top:90px;
    padding-bottom:70px;

}

.hero-bottom-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

}

.quick-card{

    padding:28px 22px;

    text-align:center;

    border:2px solid transparent;

}

.quick-card:hover{

    border-color:#9CEFD8;

}

.quick-card img{

    width:78px;
    margin:auto auto 18px;

}

.quick-card h3{

    color:#1C6168;
    margin-bottom:12px;

}

.quick-card p{

    font-size:.96rem;
    line-height:1.6;

}

/* ----------------------------------------------------------
   WAVE DIVIDER
---------------------------------------------------------- */

.wave-divider{

    position:absolute;
    bottom:-1px;
    left:0;

    width:100%;

    line-height:0;

}

.wave-divider svg{
    display:block;
    width:100%;
}

/* ==========================================================
   FLOATING LEAVES
========================================================== */

.floating-leaves{

    position:absolute;
    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.floating-leaves::before,
.floating-leaves::after{

    content:"🍃";

    position:absolute;

    font-size:34px;

    opacity:.45;

    animation:leafFall 12s linear infinite;

}

.floating-leaves::before{

    left:10%;
    top:-30px;

}

.floating-leaves::after{

    right:18%;
    top:-60px;

    animation-delay:5s;

}

@keyframes leafFall{

    from{

        transform:translateY(-40px) rotate(0deg);

    }

    to{

        transform:translateY(980px) rotate(360deg);

    }

}

/* ==========================================================
   FLOATING BUTTERFLIES
========================================================== */

.floating-butterflies{

    position:absolute;
    inset:0;

    pointer-events:none;

}

.butterfly{

    position:absolute;
    width:42px;

    opacity:.95;

    filter:drop-shadow(0 6px 8px rgba(0,0,0,.15));

}

.butterfly-1{

    top:170px;
    left:8%;

    animation:butterflyFly1 11s linear infinite;

}

.butterfly-2{

    top:320px;
    right:12%;

    animation:butterflyFly2 13s linear infinite;

}

.butterfly-3{

    top:520px;
    left:42%;

    animation:butterflyFly3 15s linear infinite;

}

@keyframes butterflyFly1{

    0%{transform:translate(0,0) rotate(0deg);}
    25%{transform:translate(80px,-40px) rotate(10deg);}
    50%{transform:translate(140px,20px) rotate(-8deg);}
    75%{transform:translate(70px,60px) rotate(12deg);}
    100%{transform:translate(0,0);}

}

@keyframes butterflyFly2{

    0%{transform:translate(0,0);}
    30%{transform:translate(-70px,40px);}
    60%{transform:translate(-140px,-30px);}
    100%{transform:translate(0,0);}

}

@keyframes butterflyFly3{

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

}

/* ==========================================================
   SPARKLE PARTICLES
========================================================== */

.light-particles{

    position:absolute;
    inset:0;

    pointer-events:none;

}

.particle{

    position:absolute;

    width:8px;
    height:8px;

    background:white;

    border-radius:50%;

    box-shadow:0 0 15px white;

    animation:particleFloat 8s ease infinite;

}

.p1{ top:120px; left:18%; animation-delay:0s; }
.p2{ top:260px; right:16%; animation-delay:2s; }
.p3{ top:420px; left:54%; animation-delay:4s; }
.p4{ top:640px; left:30%; animation-delay:1s; }
.p5{ top:760px; right:24%; animation-delay:5s; }

@keyframes particleFloat{

    0%,100%{
        opacity:.2;
        transform:translateY(0) scale(.8);
    }

    50%{
        opacity:1;
        transform:translateY(-35px) scale(1.2);
    }

}

/* ==========================================================
   HERO SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    bottom:28px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    color:#2E646B;

    font-weight:700;

}

.scroll-indicator .mouse{

    width:34px;
    height:54px;

    border:3px solid #2EC8D8;
    border-radius:30px;

    position:relative;

}

.scroll-indicator .mouse span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#2EC8D8;

    left:50%;
    top:10px;

    transform:translateX(-50%);

    animation:scrollWheel 1.8s infinite;

}

@keyframes scrollWheel{

    0%{
        opacity:0;
        top:10px;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        top:28px;
    }

}
/* ==========================================================
   OZİ DÜNYALARI
   MASTER BUILD CSS FINAL 3/4
========================================================== */

.worlds-section{

    padding:140px 0 120px;

    background:linear-gradient(180deg,#E8FFF8,#F7FFF9);

}

.world-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:34px;

}

.world-card{

    overflow:hidden;

    position:relative;

    border-radius:34px;

    background:white;

}

.world-card::before{

    content:"";

    position:absolute;
    inset:0;

    opacity:.08;

    transition:.35s;

}

.world-card:hover::before{
    opacity:.18;
}

.world-image{

    height:240px;

    overflow:hidden;

}

.world-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:.5s;

}

.world-card:hover .world-image img{

    transform:scale(1.08);

}

.world-content{

    padding:26px;

}

.world-content h3{

    margin:16px 0 14px;

    color:#18555F;

    font-size:1.5rem;

}

.world-content p{

    min-height:90px;

    margin-bottom:24px;

}

/* ----------------------------------------------------------
   LABELS
---------------------------------------------------------- */

.world-label{

    display:inline-flex;

    padding:8px 18px;

    border-radius:999px;

    color:white;

    font-weight:700;
    font-size:.82rem;

}

.world-label.green{background:#33C76B;}
.world-label.purple{background:#735CFF;}
.world-label.red{background:#FF6070;}
.world-label.orange{background:#FFA62B;}
.world-label.blue{background:#27A9FF;}
.world-label.yellow{background:#F8B621;color:#664000;}
.world-label.gold{background:#FFD54B;color:#624800;}

/* ----------------------------------------------------------
   WORLD BUTTONS
---------------------------------------------------------- */

.world-btn{

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

    padding:16px;

    border-radius:18px;

    color:white;

    font-weight:700;

    transition:.3s;

}

.world-btn:hover{

    transform:translateY(-4px);

}

.world-btn.green{background:#34C86C;}
.world-btn.purple{background:#715CFF;}
.world-btn.red{background:#FF5F6E;}
.world-btn.orange{background:#FFA22A;}
.world-btn.blue{background:#279FFF;}
.world-btn.yellow{background:#FDBA22;color:#5E4300;}
.world-btn.gold{background:#FFD84A;color:#5F4700;}

/* ----------------------------------------------------------
   CARD COLORS
---------------------------------------------------------- */

.world-card.forest::before{
    background:#34C86C;
}

.world-card.stars::before{
    background:#705CFF;
}

.world-card.videos::before{
    background:#FF6070;
}

.world-card.dino::before{
    background:#FFA52C;
}

.world-card.sea::before{
    background:#23A9FF;
}

.world-card.games::before{
    background:#FDBA22;
}

.world-card.club::before{
    background:#FFE26A;
}

/* ==========================================================
   FOREST DIVIDER
========================================================== */

.forest-divider{

    width:100%;
    line-height:0;

    margin-top:-5px;

}

.forest-divider img{

    width:100%;

}

/* ==========================================================
   OZİ HARİTASI
========================================================== */

.map-section{

    padding:140px 0;

    background:linear-gradient(180deg,#F5FFF9,#DFFFF4);

}

.map-wrapper{

    position:relative;

    margin-top:70px;

    border-radius:40px;

    overflow:hidden;

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.map-image{

    width:100%;
    display:block;

}

/* ----------------------------------------------------------
   MAP PIN
---------------------------------------------------------- */

.map-pin{

    position:absolute;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    transform:translate(-50%,-50%);

    transition:.3s;

}

.map-pin img{

    width:60px;

    filter:drop-shadow(0 8px 10px rgba(0,0,0,.2));

}

.map-pin span{

    background:white;

    padding:10px 16px;

    border-radius:999px;

    box-shadow:var(--shadow-soft);

    font-size:.85rem;
    font-weight:700;

    white-space:nowrap;

}

.map-pin:hover{

    transform:translate(-50%,-60%) scale(1.05);

}

/* PIN POSITIONS */

.forest-pin{
    top:62%;
    left:20%;
}

.stars-pin{
    top:18%;
    left:63%;
}

.dino-pin{
    top:40%;
    left:78%;
}

.sea-pin{
    top:74%;
    left:76%;
}

.video-pin{
    top:56%;
    left:48%;
}

.game-pin{
    top:76%;
    left:44%;
}

.club-pin{
    top:28%;
    left:34%;
}

/* ----------------------------------------------------------
   OZİ ON MAP
---------------------------------------------------------- */

.map-ozi{

    position:absolute;

    width:170px;

    bottom:30px;
    left:40px;

    animation:oziMapFloat 5s ease infinite;

}

@keyframes oziMapFloat{

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

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

}

/* ----------------------------------------------------------
   MAP INFO CARDS
---------------------------------------------------------- */

.map-info-grid{

    margin-top:60px;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;

}

.map-info-card{

    text-align:center;

    padding:28px;

}

.map-info-card img{

    width:70px;
    margin:auto auto 18px;

}

.map-info-card h4{

    color:#145A63;

    margin-bottom:10px;

}

/* ==========================================================
   MAGIC BANNER
========================================================== */

.magic-banner{

    padding:90px 0;

    background:
    linear-gradient(135deg,#8E6DFF,#31D3D8);

    color:white;

}

.magic-container{

    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:center;

}

.magic-ozi{

    width:260px;

    animation:oziFloat 4s ease infinite;

}

.magic-content h2{

    color:white;

    margin:18px 0;

}

.magic-content p{

    color:#F5F9FF;

    margin-bottom:28px;

}

.magic-content .section-badge{

    background:rgba(255,255,255,.2);

    color:white;

}

/* ==========================================================
   VIDEO SECTION
========================================================== */

.videos-section{

    padding:140px 0;

    background:#FFFDF9;

}

.video-slider{

    position:relative;

}

.video-track{

    display:grid;
    grid-template-columns:repeat(6,320px);

    gap:24px;

    overflow-x:auto;

    padding-bottom:20px;

    scroll-behavior:smooth;

}

.video-track::-webkit-scrollbar{
    display:none;
}

/* ----------------------------------------------------------
   VIDEO CARD
---------------------------------------------------------- */

.video-card{

    overflow:hidden;

    border-radius:28px;

}

.video-thumb{

    position:relative;

    overflow:hidden;

}

.video-thumb img{

    width:100%;
    height:200px;
    object-fit:cover;

    transition:.45s;

}

.video-card:hover .video-thumb img{

    transform:scale(1.08);

}

.video-duration{

    position:absolute;
    bottom:14px;
    right:14px;

    padding:8px 12px;

    border-radius:999px;

    background:rgba(0,0,0,.7);

    color:white;

    font-size:.8rem;
    font-weight:700;

}

.video-badge{

    position:absolute;
    top:14px;
    left:14px;

    padding:8px 14px;

    border-radius:999px;

    font-size:.75rem;
    font-weight:700;

}

.video-badge.new{

    background:#FF4F61;
    color:white;

}

.video-info{

    padding:22px;

}

.video-category{

    display:inline-block;

    margin-bottom:14px;

    font-size:.82rem;
    font-weight:700;

}

.video-category.green{color:#33C86B;}
.video-category.purple{color:#6E5BFF;}
.video-category.orange{color:#FF9925;}
.video-category.blue{color:#279FFF;}
.video-category.yellow{color:#C78600;}
.video-category.pink{color:#FF4FAD;}

.video-info h3{

    margin-bottom:10px;

    color:#1D5862;

}

/* ----------------------------------------------------------
   SLIDER BUTTONS
---------------------------------------------------------- */

.slider-arrow{

    position:absolute;

    top:40%;
    transform:translateY(-50%);

    width:54px;
    height:54px;

    border-radius:50%;

    background:white;

    box-shadow:var(--shadow-soft);

    font-size:22px;
    font-weight:700;

    z-index:5;

}

.slider-arrow.left{
    left:-25px;
}

.slider-arrow.right{
    right:-25px;
}

/* ==========================================================
   GÜNÜN GÖREVİ
========================================================== */

.missions-section{

    padding:140px 0;

    background:linear-gradient(180deg,#E8FFF8,#FFFDF5);

}

.mission-card{

    display:grid;
    grid-template-columns:220px 1fr 260px;
    gap:34px;

    padding:40px;

    background:white;

    border-radius:36px;

    box-shadow:var(--shadow);

}

.mission-left img{

    width:190px;
    margin:auto;

}

.mission-content h2{

    margin:18px 0;

    color:#155962;

}

.progress-box{

    margin:30px 0;

}

.progress-header{

    display:flex;
    justify-content:space-between;

    font-weight:700;

    margin-bottom:12px;

}

.progress-bar{

    height:18px;

    background:#EAF9FF;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(90deg,#13C8D8,#37D96A);

}

/* ----------------------------------------------------------
   MISSION ITEMS
---------------------------------------------------------- */

.mission-list{

    display:grid;
    gap:16px;

    margin-bottom:30px;

}

.mission-item{

    display:flex;
    gap:18px;
    align-items:center;

    padding:18px;

    border-radius:18px;

    background:#F8FFFD;

}

.mission-item img{

    width:56px;

}

.mission-item strong{

    display:block;

    margin-bottom:4px;

    color:#1B5861;

}

.reward-box{

    background:#FFF6CB;

    padding:26px;

    border-radius:28px;

    text-align:center;

    box-shadow:var(--shadow-soft);

}

.reward-box img{

    width:120px;
    margin:auto auto 18px;

}

/* ==========================================================
   OZİ TALKS
========================================================== */

.talk-section{

    padding:120px 0;

    background:#F5FFFF;

}

.talk-container{

    display:grid;
    grid-template-columns:260px 1fr;
    gap:36px;
    align-items:center;

}

.talk-ozi{

    width:220px;
    margin:auto;

}

.talk-card{

    padding:34px;

    background:white;

    border-radius:32px;

    box-shadow:var(--shadow-soft);

}

.talk-card h2{

    margin:18px 0;

    color:#145A62;

}

#dailySpeech{

    font-size:1.15rem;

    color:#35666E;

}

/* ==========================================================
   BADGES
========================================================== */

.badges-section{

    padding:140px 0;

    background:linear-gradient(180deg,#FFFDF8,#FFF6D8);

}

.badge-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:28px;

}

.badge-card{

    text-align:center;

    padding:30px 24px;

    border:3px solid transparent;

}

.badge-card img{

    width:100px;
    margin:auto auto 20px;

    transition:.35s;

}

.badge-card:hover img{

    transform:scale(1.08) rotate(-6deg);

}

.badge-card h3{

    color:#195862;

    margin-bottom:12px;

    font-size:1.15rem;

}

.badge-status{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    font-size:.82rem;
    font-weight:700;

}

.badge-card.unlocked{

    border-color:#5FD37A;

    background:#F1FFF5;

}

.badge-card.unlocked .badge-status{

    background:#33C86B;

    color:white;

}

.badge-card:not(.unlocked){

    opacity:.9;

}

.badge-card:not(.unlocked) img{

    filter:grayscale(100%);

}

.badge-card:not(.unlocked) .badge-status{

    background:#ECECEC;

    color:#666;

}

/* ==========================================================
   QUICK LINKS
========================================================== */

.quick-links{

    padding:110px 0 140px;

    background:#EFFFFB;

}

.quick-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;

}

.quick-box{

    text-align:center;

    padding:36px 24px;

    border-radius:30px;

    color:white;

    transition:.35s;

    box-shadow:var(--shadow-soft);

}

.quick-box img{

    width:82px;

    margin:auto auto 20px;

}

.quick-box h3{

    color:white;

    font-size:1.3rem;

}

.quick-box:hover{

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

}

.quick-box.green{
    background:linear-gradient(135deg,#39CB71,#2A9D55);
}

.quick-box.purple{
    background:linear-gradient(135deg,#705BFF,#4B34CC);
}

.quick-box.red{
    background:linear-gradient(135deg,#FF6070,#E43F56);
}

.quick-box.yellow{
    background:linear-gradient(135deg,#FFC541,#E99B11);
}
/* ==========================================================
   OZİ MERAK ORMANI v2.0
   MASTER BUILD CSS FINAL 4/4
   Footer • Night Mode • Mobile • Helpers
========================================================== */

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    position:relative;
    overflow:hidden;

    padding-top:120px;

    color:white;

    background:
    linear-gradient(180deg,#133B56 0%,#0B2438 100%);

}

.footer-background{

    position:absolute;
    inset:0;
    z-index:0;

}

.footer-bg{

    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.18;

}

.footer-stars{

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(circle,#FFFFFF 1px,transparent 2px);

    background-size:120px 120px;

    opacity:.35;

}

.footer-fireflies{

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(circle,#FFE56B 2px,transparent 3px);

    background-size:180px 180px;

    opacity:.4;

    animation:fireflies 12s linear infinite;

}

@keyframes fireflies{

    from{
        background-position:0 0;
    }

    to{
        background-position:180px 120px;
    }

}

.footer-container{

    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px;

    padding-bottom:70px;

}

/* ----------------------------------------------------------
   FOOTER BRAND
---------------------------------------------------------- */

.footer-brand h2{

    color:white;
    margin-top:20px;

}

.footer-brand p{

    color:#CDE7F2;

}

.footer-ozi{

    width:190px;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,.3));

}

.footer-text{

    margin-top:16px;
    max-width:320px;

}

/* ----------------------------------------------------------
   FOOTER LINKS
---------------------------------------------------------- */

.footer-links h3,
.footer-social h3{

    margin-bottom:20px;

    color:#FFE56B;

}

.footer-links{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.footer-links a{

    color:#E5F4FB;
    transition:.25s;

}

.footer-links a:hover{

    color:#67F5B4;
    transform:translateX(6px);

}

/* ----------------------------------------------------------
   SOCIAL ICONS
---------------------------------------------------------- */

.social-icons{

    display:flex;
    gap:18px;
    margin-bottom:26px;

}

.social-icons a{

    width:52px;
    height:52px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.08);

    transition:.3s;

}

.social-icons img{

    width:26px;

}

.social-icons a:hover{

    background:#16C7D8;

    transform:translateY(-5px);

}

.footer-safe{

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 18px;

    background:rgba(255,255,255,.08);

    border-radius:18px;

}

.footer-safe img{

    width:42px;

}

/* ----------------------------------------------------------
   FOOTER BOTTOM
---------------------------------------------------------- */

.footer-bottom{

    position:relative;
    z-index:2;

    border-top:1px solid rgba(255,255,255,.12);

    padding:22px 0;

}

.footer-bottom-container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;

}

.footer-bottom p{

    color:#BDD7E3;
    font-size:.92rem;

}

.footer-bottom-links{

    display:flex;
    gap:24px;
    flex-wrap:wrap;

}

.footer-bottom-links a{

    color:#D9EDF5;
    font-size:.92rem;

}

/* ==========================================================
   NIGHT MODE BUTTON
========================================================== */

.theme-toggle,
.nature-toggle{

    position:fixed;
    right:22px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    border-radius:999px;

    background:white;

    box-shadow:var(--shadow);

    z-index:999;

    transition:.3s;

}

.theme-toggle{

    bottom:28px;

}

.nature-toggle{

    bottom:96px;

}

.theme-toggle:hover,
.nature-toggle:hover{

    transform:translateY(-4px);

}

.theme-toggle img,
.nature-toggle img{

    width:22px;

}

/* ==========================================================
   MOBILE MENU PANEL
========================================================== */

.mobile-menu-panel{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    max-width:90%;

    height:100vh;

    background:white;

    box-shadow:-10px 0 30px rgba(0,0,0,.15);

    transition:.35s;

    z-index:2000;

    display:flex;
    flex-direction:column;

}

.mobile-menu-panel.active{

    right:0;

}

.mobile-header{

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

    padding:24px;

}

.mobile-header img{

    width:70px;

}

.mobile-header button{

    font-size:1.4rem;

    color:#245963;

}

.mobile-nav{

    display:flex;
    flex-direction:column;

    padding:0 24px;

}

.mobile-nav a{

    padding:18px 0;

    border-bottom:1px solid #EAF6F9;

    font-weight:700;
    color:#215963;

}

.mobile-footer{

    margin-top:auto;

    padding:24px;

    text-align:center;

    background:#F4FFFF;

}

.mobile-footer img{

    width:120px;
    margin:auto auto 14px;

}

/* ==========================================================
   LOADING SCREEN
========================================================== */

.loading-screen{

    position:fixed;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;

    background:linear-gradient(180deg,#CFF9FF,#EFFFF8);

    z-index:5000;

}

.loading-screen img{

    width:170px;

    animation:oziFloat 2.5s ease infinite;

}

.loading-bar{

    width:280px;
    height:16px;

    background:white;

    border-radius:999px;

    overflow:hidden;

}

.loading-progress{

    width:0%;

    height:100%;

    background:
    linear-gradient(90deg,#13C8D8,#36D96B,#FFE567);

    animation:loadingMove 3s linear infinite;

}

@keyframes loadingMove{

    0%{ width:0%; }

    50%{ width:65%; }

    100%{ width:100%; }

}

/* ==========================================================
   FLOATING STARS
========================================================== */

.floating-stars{

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:-1;

}

.star{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

    box-shadow:0 0 12px white;

    animation:twinkle 3s ease infinite;

}

.star-1{ top:15%; left:18%; animation-delay:0s; }
.star-2{ top:28%; left:75%; animation-delay:1s; }
.star-3{ top:60%; left:50%; animation-delay:2s; }
.star-4{ top:72%; left:15%; animation-delay:3s; }
.star-5{ top:82%; left:84%; animation-delay:1.5s; }

@keyframes twinkle{

    0%,100%{
        opacity:.25;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.6);
    }

}

/* ==========================================================
   FLOATING LEAF GROUP
========================================================== */

.floating-leaf-group{

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:2;

}

.leaf{

    position:absolute;
    width:36px;

    opacity:.45;

}

.leaf-1{

    left:8%;
    top:-30px;

    animation:leafFloat1 14s linear infinite;

}

.leaf-2{

    left:65%;
    top:-50px;

    animation:leafFloat2 18s linear infinite;

}

.leaf-3{

    left:90%;
    top:-40px;

    animation:leafFloat3 16s linear infinite;

}

@keyframes leafFloat1{

    to{
        transform:translateY(110vh) rotate(380deg);
    }

}

@keyframes leafFloat2{

    to{
        transform:translate(-120px,110vh) rotate(-360deg);
    }

}

@keyframes leafFloat3{

    to{
        transform:translate(-40px,110vh) rotate(320deg);
    }

}

/* ==========================================================
   SECTION SPACING HELPERS
========================================================== */

.pt-xl{padding-top:140px;}
.pb-xl{padding-bottom:140px;}

.mt-xl{margin-top:140px;}
.mb-xl{margin-bottom:140px;}

.center{text-align:center;}
.hidden{display:none;}

/* ==========================================================
   CARD HOVER EFFECT
========================================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

/* ==========================================================
   IMAGE RADIUS
========================================================== */

.round-xl{
    border-radius:36px;
}

.round-lg{
    border-radius:24px;
}

.round-md{
    border-radius:18px;
}

/* ==========================================================
   NIGHT MODE (JS ile aktif olacak)
========================================================== */

body.night{

    background:
    linear-gradient(180deg,#081C33,#123255,#214D63);

    color:#E8F6FF;

}

body.night .header{

    background:rgba(8,24,51,.75);

}

body.night .world-card,
body.night .video-card,
body.night .badge-card,
body.night .mission-card,
body.night .map-info-card,
body.night .talk-card{

    background:#163851;

    color:#F1FBFF;

}

body.night p{

    color:#C8E2EC;

}

body.night .section-badge{

    background:#1E536B;
    color:#7FF6FF;

}

body.night .quick-card{

    background:#18405D;

}

body.night .footer{

    background:
    linear-gradient(180deg,#04111F,#020A14);

}

/* ==========================================================
   RESPONSIVE PREP
========================================================== */

@media(max-width:1100px){

    .hero-container,
    .magic-container,
    .talk-container,
    .mission-card,
    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-buttons,
    .hero-features{

        justify-content:center;

    }

    .speech-bubble{

        position:relative;
        left:auto;
        top:auto;

        margin:30px auto 0;

    }

    .map-ozi{

        width:120px;

    }

}

@media(max-width:768px){

    .navbar{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;

    flex:1;
    margin:0 24px;

}

    .mobile-menu{

        display:grid;
        place-items:center;

    }

    h2{

        font-size:2.4rem;

    }

    .hero h2{

        font-size:2.8rem;

    }

    .hero h2 span{

        font-size:2rem;

    }

    .hero-bottom-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .video-track{

        grid-template-columns:repeat(6,260px);

    }

    .theme-toggle,
    .nature-toggle{

        right:16px;

        padding:12px 14px;

    }

}

@media(max-width:560px){

    .hero-bottom-grid,
    .quick-grid,
    .badge-grid,
    .map-info-grid{

        grid-template-columns:1fr;

    }

    .world-grid{

        grid-template-columns:1fr;

    }

    .hero{

        min-height:auto;
        padding-bottom:60px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .speech-bubble{

        width:100%;

    }

}

/* ==========================================================
   THE END
========================================================== */
/* MASTER FIX PACK v1 */

.loading-screen {
    transition: opacity .5s ease, visibility .5s ease;
}

body.page-ready {
    opacity: 1 !important;
}

body {
    opacity: 1;
}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 1/8
   HERO + WELCOME + ANIMATIONS
========================================================== */

/* ---------- HERO GOLD ---------- */

.hero-gold{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#CFF7FF;
}

.hero-background{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-bg-image{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:heroZoom 28s ease-in-out infinite alternate;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(8,45,33,.28);
}

.hero-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.55) 80%,#F7FFF9 100%);
}

@keyframes heroZoom{
    from{transform:scale(1);}
    to{transform:scale(1.08);}
}

/* ---------- HERO CONTAINER ---------- */

.hero-container{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
    padding:110px 0 80px;
}

/* ---------- SOL TARAF ---------- */

.hero-left h1{
    font-size:clamp(2.7rem,5vw,4.8rem);
    line-height:1.08;
    color:#0D3C2A;
    margin-bottom:22px;
}

.hero-left h1 span{
    color:#0FA968;
}

.hero-left p{
    font-size:1.15rem;
    color:#1E5442;
    max-width:560px;
    line-height:1.9;
    margin-bottom:28px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.95);
    color:#15945D;
    font-weight:700;
    margin-bottom:24px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* ---------- BUTONLAR ---------- */

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.hero-btn{
    padding:16px 26px;
    border-radius:999px;
    font-size:1rem;
    font-weight:700;
    transition:.35s;
}

.hero-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* ---------- HERO PILL ---------- */

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.hero-pill{
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#1D6846;
    font-weight:600;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* ---------- OZİ ---------- */

.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-ozi{
    width:min(420px,100%);
    animation:oziFloatHero 5s ease-in-out infinite;
    filter:drop-shadow(0 20px 35px rgba(0,0,0,.18));
}

@keyframes oziFloatHero{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-16px);
    }
}

/* ---------- KONUŞMA BALONU ---------- */

.hero-bubble{
    position:absolute;
    top:10px;
    right:-20px;
    width:260px;
    background:white;
    border-radius:24px;
    padding:18px;
    box-shadow:0 18px 35px rgba(0,0,0,.14);
    animation:bubbleBounce 5s ease-in-out infinite;
}

.hero-bubble h3{
    color:#149E63;
    margin-bottom:8px;
}

.hero-bubble p{
    color:#355C4D;
    line-height:1.6;
    font-size:.95rem;
}

.hero-bubble::after{
    content:"";
    position:absolute;
    left:28px;
    bottom:-14px;
    border-width:14px 14px 0 14px;
    border-style:solid;
    border-color:white transparent transparent transparent;
}

@keyframes bubbleBounce{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* ---------- GÜNÜN ROZETİ ---------- */

.daily-badge-card{
    position:absolute;
    left:-20px;
    bottom:20px;
    background:white;
    border-radius:22px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 16px 30px rgba(0,0,0,.12);
}

.daily-badge-card img{
    width:64px;
    height:64px;
}

.daily-badge-card small{
    display:block;
    color:#888;
}

.daily-badge-card strong{
    color:#118A59;
}

/* ---------- ATEŞ BÖCEKLERİ ---------- */

.fireflies{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.fireflies span{
    position:absolute;
    width:8px;
    height:8px;
    background:#FFF89E;
    border-radius:50%;
    box-shadow:0 0 14px #FFF799;
    animation:firefly 10s linear infinite;
}

.fireflies span:nth-child(1){
    left:8%;
    top:65%;
    animation-delay:0s;
}

.fireflies span:nth-child(2){
    left:22%;
    top:30%;
    animation-delay:2s;
}

.fireflies span:nth-child(3){
    left:40%;
    top:80%;
    animation-delay:5s;
}

.fireflies span:nth-child(4){
    right:12%;
    top:25%;
    animation-delay:1s;
}

.fireflies span:nth-child(5){
    right:28%;
    top:70%;
    animation-delay:3s;
}

.fireflies span:nth-child(6){
    left:55%;
    top:40%;
    animation-delay:6s;
}

.fireflies span:nth-child(7){
    left:75%;
    top:60%;
    animation-delay:8s;
}

@keyframes firefly{
    0%{
        opacity:0;
        transform:translateY(25px) scale(.5);
    }
    30%{
        opacity:1;
    }
    70%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translateY(-45px) scale(1.3);
    }
}

/* ---------- YAPRAKLAR ---------- */

.hero-leaves{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.leaf{
    position:absolute;
    width:46px;
    opacity:.9;
    animation:leafFloat linear infinite;
}

.leaf-1{
    left:5%;
    top:-40px;
    animation-duration:16s;
}

.leaf-2{
    left:35%;
    top:-70px;
    animation-duration:20s;
    animation-delay:2s;
}

.leaf-3{
    right:20%;
    top:-30px;
    animation-duration:18s;
    animation-delay:5s;
}

.leaf-4{
    right:6%;
    top:-60px;
    animation-duration:22s;
    animation-delay:1s;
}

@keyframes leafFloat{
    0%{
        transform:translateY(-80px) rotate(0deg);
    }
    100%{
        transform:translateY(110vh) translateX(40px) rotate(360deg);
    }
}

/* ---------- BULUTLAR ---------- */

.cloud{
    position:absolute;
    width:220px;
    height:70px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
    filter:blur(2px);
}

.cloud::before,
.cloud::after{
    content:"";
    position:absolute;
    background:inherit;
    border-radius:50%;
}

.cloud::before{
    width:90px;
    height:90px;
    left:24px;
    top:-24px;
}

.cloud::after{
    width:110px;
    height:110px;
    right:20px;
    top:-36px;
}

.cloud-1{
    top:90px;
    left:-240px;
    animation:cloudMove1 45s linear infinite;
}

.cloud-2{
    top:180px;
    right:-260px;
    animation:cloudMove2 55s linear infinite;
}

@keyframes cloudMove1{
    from{transform:translateX(0);}
    to{transform:translateX(calc(100vw + 480px));}
}

@keyframes cloudMove2{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-100vw - 480px));}
}

/* ---------- SCROLL DOWN ---------- */

.scroll-down{
    position:absolute;
    left:50%;
    bottom:90px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    gap:4px;
    z-index:6;
}

.scroll-down span{
    width:16px;
    height:16px;
    border-right:3px solid white;
    border-bottom:3px solid white;
    transform:rotate(45deg);
    animation:scrollArrow 2s infinite;
}

.scroll-down span:nth-child(2){
    animation-delay:.25s;
}

.scroll-down span:nth-child(3){
    animation-delay:.5s;
}

@keyframes scrollArrow{
    0%{
        opacity:0;
        transform:rotate(45deg) translate(-6px,-6px);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:rotate(45deg) translate(6px,6px);
    }
}

/* ---------- DALGA ---------- */

.hero-wave{
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    line-height:0;
    z-index:3;
}

.hero-wave svg{
    width:100%;
    height:160px;
    display:block;
}

/* ---------- WELCOME ---------- */

.welcome-section{
    background:#F7FFF9;
    padding:90px 0;
}

.welcome-container{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:60px;
    align-items:center;
}

.welcome-ozi{
    width:min(340px,100%);
    animation:oziFloatHero 6s ease-in-out infinite;
}

.welcome-right h2{
    color:#13573B;
    margin-bottom:16px;
}

.welcome-right p{
    color:#466857;
    line-height:1.8;
}

.welcome-grid{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.welcome-card{
    background:white;
    border-radius:24px;
    padding:22px;
    text-align:center;
    box-shadow:0 12px 24px rgba(20,110,60,.08);
    transition:.35s;
}

.welcome-card:hover{
    transform:translateY(-8px);
}

.welcome-icon{
    font-size:2.4rem;
    margin-bottom:12px;
}

/* ---------- MOBİL ---------- */

@media(max-width:992px){

.hero-container,
.welcome-container{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-left{
    order:2;
}

.hero-right{
    order:1;
}

.hero-bubble{
    position:relative;
    right:auto;
    top:auto;
    margin:20px auto;
}

.daily-badge-card{
    position:relative;
    left:auto;
    bottom:auto;
    margin:24px auto 0;
}

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

}

@media(max-width:640px){

.hero-left h1{
    font-size:2.3rem;
}

.hero-pills{
    justify-content:center;
}

.hero-buttons{
    justify-content:center;
}

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

.cloud{
    display:none;
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 2/8
   WELCOME + ADVENTURE + LIVE STATS
========================================================== */

/* ----------------------------------------------------------
   BUGÜNKÜ MACERA
---------------------------------------------------------- */

.today-adventure-section{
    background:linear-gradient(180deg,#F7FFF9 0%,#ECFFF4 100%);
    padding:100px 0;
    position:relative;
}

.today-adventure-section::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.05;
    background-image:radial-gradient(circle,#27C46A 2px,transparent 2px);
    background-size:80px 80px;
}

.section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.section-heading h2{
    font-size:clamp(2rem,4vw,3rem);
    color:#145A3A;
    margin-bottom:14px;
}

.section-heading p{
    color:#557868;
    line-height:1.8;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#E8FFF2;
    color:#14995E;
    padding:10px 18px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:700;
    margin-bottom:20px;
    box-shadow:0 6px 16px rgba(20,150,90,.08);
}

/* ----------------------------------------------------------
   ADVENTURE GRID
---------------------------------------------------------- */

.adventure-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.adventure-card{
    background:white;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    transition:.35s;
    position:relative;
}

.adventure-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 50px rgba(0,0,0,.12);
}

.adventure-card img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.adventure-content{
    padding:24px;
}

.adventure-content span{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    margin-bottom:14px;
}

.adventure-content h3{
    color:#165B3C;
    margin-bottom:10px;
    font-size:1.35rem;
}

.adventure-content p{
    color:#5A7367;
    line-height:1.7;
    margin-bottom:22px;
}

/* Dünya renkleri */

.adventure-card.forest span{
    background:#E8FFF1;
    color:#168A56;
}

.adventure-card.video span{
    background:#FFF0F5;
    color:#E1447B;
}

.adventure-card.stars span{
    background:#F4F0FF;
    color:#7C47E7;
}

/* ----------------------------------------------------------
   WELCOME BÖLÜMÜ GELİŞMİŞ
---------------------------------------------------------- */

.welcome-section{
    position:relative;
}

.welcome-section::after{
    content:"";
    position:absolute;
    right:0;
    top:60px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(52,199,89,.08),transparent 70%);
}

.welcome-card{
    border:2px solid transparent;
}

.welcome-card:hover{
    border-color:#C6F4D7;
    background:#FCFFFD;
}

.welcome-card h4{
    color:#166244;
    margin:12px 0;
}

.welcome-card p{
    color:#60786C;
    font-size:.95rem;
}

/* ----------------------------------------------------------
   CANLI İSTATİSTİKLER
---------------------------------------------------------- */

.live-stats-section{
    background:linear-gradient(180deg,#DFFBF0,#F7FFF9);
    padding:90px 0;
}

.stats-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.stat-card{
    background:white;
    padding:30px 24px;
    border-radius:26px;
    text-align:center;
    box-shadow:0 16px 35px rgba(0,0,0,.07);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
}

.stat-icon{
    font-size:2.5rem;
    display:block;
    margin-bottom:16px;
}

.stat-card h3{
    font-size:2.4rem;
    color:#14A45F;
    margin-bottom:8px;
    font-weight:800;
}

.stat-card p{
    color:#60786C;
    font-weight:600;
}

/* Her kart farklı renk */

.stat-card:nth-child(1){
    border-top:6px solid #28C76F;
}

.stat-card:nth-child(2){
    border-top:6px solid #FF8C42;
}

.stat-card:nth-child(3){
    border-top:6px solid #FFD84D;
}

.stat-card:nth-child(4){
    border-top:6px solid #8A5BFF;
}

/* ----------------------------------------------------------
   İSTATİSTİK SAYACI PARLAMA
---------------------------------------------------------- */

.stat-card h3{
    animation:counterGlow 4s ease-in-out infinite;
}

@keyframes counterGlow{
    0%,100%{
        text-shadow:0 0 0 rgba(34,197,94,0);
    }
    50%{
        text-shadow:0 0 12px rgba(34,197,94,.35);
    }
}

/* ----------------------------------------------------------
   DALGA AYIRICI
---------------------------------------------------------- */

.live-stats-section::after{
    content:"";
    display:block;
    margin-top:80px;
    height:2px;
    width:140px;
    background:linear-gradient(90deg,#29C76F,#A8F2C8);
    margin-left:auto;
    margin-right:auto;
    border-radius:999px;
}

/* ----------------------------------------------------------
   HOVER EFEKTİ
---------------------------------------------------------- */

.hover-lift{
    transition:.35s ease;
}

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

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

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

.stats-wrapper{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:640px){

.stats-wrapper{
    grid-template-columns:1fr;
}

.section-heading{
    margin-bottom:40px;
}

.adventure-card img{
    height:200px;
}

.stat-card{
    padding:24px;
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 3/8
   VIDEO WORLD + OZİ SHORTS
========================================================== */

/* ----------------------------------------------------------
   POPÜLER VİDEOLAR
---------------------------------------------------------- */

.videos-gold-section{
    background:linear-gradient(180deg,#FFF8FB 0%,#FFFDFE 100%);
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

.videos-gold-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#FF7AA8 2px,transparent 2px);
    background-size:100px 100px;
    opacity:.05;
    pointer-events:none;
}

/* ----------------------------------------------------------
   NETFLIX KIDS SLIDER
---------------------------------------------------------- */

.video-slider{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:28px;
}

.video-card{
    background:white;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(255,90,140,.08);
    transition:.35s;
    position:relative;
}

.video-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(255,90,140,.18);
}

.video-card.featured{
    border:3px solid #FF5E8B;
}

.video-thumbnail{
    position:relative;
    overflow:hidden;
}

.video-thumbnail img{
    width:100%;
    height:210px;
    object-fit:cover;
    transition:.45s;
}

.video-card:hover .video-thumbnail img{
    transform:scale(1.08);
}

.video-duration{
    position:absolute;
    right:14px;
    bottom:14px;
    background:rgba(0,0,0,.75);
    color:white;
    padding:7px 12px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
}

.video-label{
    position:absolute;
    top:14px;
    left:14px;
    padding:8px 14px;
    border-radius:999px;
    color:white;
    font-size:.78rem;
    font-weight:700;
}

.video-label.new{
    background:#FF4D73;
}

.video-label.soon{
    background:#835CFF;
}

.video-info{
    padding:24px;
}

.video-category{
    display:inline-block;
    background:#FFF1F7;
    color:#D63A73;
    padding:8px 14px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:14px;
}

.video-info h3{
    color:#164B38;
    font-size:1.3rem;
    margin-bottom:10px;
}

.video-info p{
    color:#60786C;
    line-height:1.7;
    margin-bottom:22px;
}

/* ----------------------------------------------------------
   TÜM VİDEOLAR BUTONU
---------------------------------------------------------- */

.section-footer-button{
    margin-top:50px;
    text-align:center;
}

/* ----------------------------------------------------------
   VIDEO KATEGORİLERİ
---------------------------------------------------------- */

.video-categories-section{
    background:#FFFDF9;
    padding:100px 0;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:24px;
}

.category-card{
    background:white;
    border-radius:26px;
    padding:24px 18px;
    text-align:center;
    text-decoration:none;
    color:#184F3B;
    box-shadow:0 14px 30px rgba(0,0,0,.06);
    transition:.35s;
}

.category-card:hover{
    transform:translateY(-8px);
}

.category-card img{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:16px;
}

.category-card h3{
    font-size:1rem;
    margin-bottom:8px;
}

.category-card span{
    font-size:.85rem;
    color:#708779;
    font-weight:600;
}

/* Kategori renkleri */

.category-card.forest{
    border-top:6px solid #22C55E;
}

.category-card.science{
    border-top:6px solid #2F80ED;
}

.category-card.animals{
    border-top:6px solid #F59E0B;
}

.category-card.songs{
    border-top:6px solid #EC4899;
}

.category-card.stories{
    border-top:6px solid #8B5CF6;
}

.category-card.stars{
    border-top:6px solid #FFD84D;
}

/* ----------------------------------------------------------
   HAFTANIN YENİ BÖLÜMÜ
---------------------------------------------------------- */

.featured-video-section{
    background:linear-gradient(180deg,#FFF5FB,#FFFDFE);
    padding:110px 0;
}

.featured-video-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.featured-video-image{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 24px 55px rgba(255,100,160,.18);
}

.featured-video-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.play-button{
    position:absolute;
    inset:50%;
    transform:translate(-50%,-50%);
    width:95px;
    height:95px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    color:#FF4E78;
    cursor:pointer;
    animation:pulsePlay 2.5s infinite;
}

@keyframes pulsePlay{
    0%,100%{
        box-shadow:0 0 0 rgba(255,78,120,0);
        transform:translate(-50%,-50%) scale(1);
    }
    50%{
        box-shadow:0 0 35px rgba(255,78,120,.35);
        transform:translate(-50%,-50%) scale(1.08);
    }
}

.featured-video-content h2{
    color:#164B38;
    margin:14px 0 20px;
}

.featured-video-content p{
    color:#5E7469;
    line-height:1.8;
}

.video-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:24px 0 32px;
}

.video-meta span{
    background:white;
    color:#E24C84;
    padding:10px 16px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(255,90,140,.08);
}

/* ----------------------------------------------------------
   OZİ SHORTS
---------------------------------------------------------- */

.shorts-section{
    background:linear-gradient(180deg,#FFFDF7,#FFF8F0);
    padding:100px 0;
}

.shorts-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;
}

.short-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    text-align:center;
    box-shadow:0 14px 28px rgba(0,0,0,.06);
    transition:.35s;
}

.short-card:hover{
    transform:translateY(-8px);
}

.short-card img{
    width:100%;
    aspect-ratio:9/14;
    object-fit:cover;
}

.short-card span{
    display:inline-block;
    margin-top:16px;
    background:#FFF0D8;
    color:#E58A00;
    padding:7px 12px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
}

.short-card h4{
    padding:16px;
    color:#17543F;
}

/* ----------------------------------------------------------
   VİDEO ARKA PLAN BALONLARI
---------------------------------------------------------- */

.videos-gold-section::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,120,170,.12),transparent 70%);
    right:-60px;
    top:50px;
}

.shorts-section::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,215,0,.10),transparent 70%);
    left:-60px;
    bottom:20px;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

.featured-video-container{
    grid-template-columns:1fr;
}

.video-slider{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

}

@media(max-width:640px){

.category-grid{
    grid-template-columns:repeat(2,1fr);
}

.shorts-row{
    grid-template-columns:repeat(2,1fr);
}

.video-thumbnail img{
    height:190px;
}

.play-button{
    width:75px;
    height:75px;
    font-size:1.6rem;
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 4/8
   MISSIONS + BADGES + PASSPORT
========================================================== */

/* ----------------------------------------------------------
   GÜNÜN GÖREVİ
---------------------------------------------------------- */

.daily-mission-gold{
    padding:110px 0;
    background:linear-gradient(180deg,#FFFDF4 0%,#F7FFF8 100%);
    position:relative;
}

.daily-mission-gold::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#FFD54A 2px,transparent 2px);
    background-size:110px 110px;
    opacity:.05;
}

.mission-wrapper{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:55px;
    align-items:center;
}

.mission-ozi{
    width:100%;
    max-width:320px;
    animation:oziMissionFloat 5s ease-in-out infinite;
}

@keyframes oziMissionFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

.mission-card{
    background:white;
    border-radius:30px;
    padding:30px;
    box-shadow:0 20px 40px rgba(255,193,7,.12);
}

.mission-card.today{
    border:3px solid #FFD54A;
}

.mission-title{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.mission-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    background:#FFF6D6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
}

.mission-title small{
    color:#D69200;
    font-weight:700;
}

.mission-title h3{
    color:#18563E;
    margin-top:4px;
}

.reward-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:22px 0;
}

.reward-row span{
    padding:10px 16px;
    background:#FFF7E1;
    color:#CC8A00;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
}

/* ----------------------------------------------------------
   İLERLEME KARTI
---------------------------------------------------------- */

.progress-card{
    margin-top:28px;
    background:white;
    padding:24px;
    border-radius:24px;
    box-shadow:0 14px 30px rgba(0,0,0,.06);
}

.progress-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    color:#16553C;
    font-weight:700;
}

.progress-bar{
    width:100%;
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:#E6F5EA;
}

.progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#FFD84A,#29C76F);
}

.progress-60{width:60%;}

/* ----------------------------------------------------------
   GÜNLÜK GÖREVLER
---------------------------------------------------------- */

.task-list-section{
    padding:100px 0;
    background:#F8FFF9;
}

.task-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:24px;
}

.task-card{
    background:white;
    padding:24px;
    border-radius:24px;
    box-shadow:0 12px 28px rgba(0,0,0,.06);
    transition:.35s;
    position:relative;
}

.task-card:hover{
    transform:translateY(-8px);
}

.task-status{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#FFF8E0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
}

.task-card.completed{
    border:2px solid #34C759;
    background:#F4FFF8;
}

.task-card.completed .task-status{
    background:#34C759;
    color:white;
}

.task-card h3{
    margin:10px 0;
    color:#17543F;
}

.task-card p{
    color:#60786C;
    line-height:1.7;
}

.task-reward{
    display:inline-block;
    margin-top:18px;
    background:#FFF3C9;
    color:#D48A00;
    padding:8px 14px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
}

/* ----------------------------------------------------------
   ROZET GALERİSİ
---------------------------------------------------------- */

.badge-gallery-section{
    padding:110px 0;
    background:linear-gradient(180deg,#FFFDF8,#F7FFF9);
}

.badge-gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:28px;
}

.badge-card{
    background:white;
    padding:26px;
    border-radius:28px;
    text-align:center;
    box-shadow:0 15px 32px rgba(0,0,0,.06);
    transition:.35s;
}

.badge-card:hover{
    transform:translateY(-10px) scale(1.02);
}

.badge-card img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:16px;
}

.badge-card h3{
    color:#17543F;
    margin-bottom:10px;
}

.badge-card p{
    color:#6B7E73;
    font-size:.92rem;
}

.badge-state{
    display:inline-block;
    margin-top:16px;
    padding:8px 14px;
    border-radius:999px;
    background:#DFF8E8;
    color:#169C5C;
    font-size:.8rem;
    font-weight:700;
}

.badge-state.locked{
    background:#F4F4F4;
    color:#8B9094;
}

.badge-card.unlocked{
    border:2px solid #34C759;
}

/* ----------------------------------------------------------
   KAŞİF PASAPORTU
---------------------------------------------------------- */

.passport-section{
    padding:110px 0;
    background:linear-gradient(180deg,#FFF6E6,#FFFDF8);
}

.passport-container{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:60px;
    align-items:center;
}

.passport-left img{
    width:100%;
    animation:passportFloat 6s ease-in-out infinite;
}

@keyframes passportFloat{
    0%,100%{transform:rotate(-2deg);}
    50%{transform:rotate(2deg);}
}

.passport-right h2{
    color:#16543D;
    margin-bottom:16px;
}

.passport-right p{
    color:#61796E;
    margin-bottom:30px;
}

.passport-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:32px;
}

.passport-item{
    background:white;
    padding:20px;
    border-radius:22px;
    display:flex;
    align-items:center;
    gap:16px;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.passport-item span{
    width:54px;
    height:54px;
    border-radius:50%;
    background:#FFF5D8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
}

.passport-item strong{
    display:block;
    font-size:1.4rem;
    color:#1C6C49;
}

.passport-item small{
    color:#72867B;
}

/* ----------------------------------------------------------
   YILDIZ KAZANMA PANELİ
---------------------------------------------------------- */

.stars-reward-section{
    padding:110px 0;
    background:linear-gradient(180deg,#FFFDF5,#FFF8E8);
}

.reward-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:24px;
}

.reward-card{
    background:white;
    padding:24px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 14px 28px rgba(255,190,0,.08);
    transition:.35s;
}

.reward-card:hover{
    transform:translateY(-8px);
}

.reward-icon{
    font-size:2rem;
    display:block;
    margin-bottom:14px;
}

.reward-card strong{
    display:block;
    margin-top:16px;
    color:#E09A00;
    font-size:1.2rem;
}

.reward-card.special{
    background:linear-gradient(180deg,#FFF5D4,#FFECA5);
    border:2px solid #FFD84A;
}

/* ----------------------------------------------------------
   HAFTANIN KAŞİFİ
---------------------------------------------------------- */

.explorer-week-section{
    padding:120px 0;
    background:linear-gradient(180deg,#F7FFF9,#ECFFF4);
}

.explorer-container{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:60px;
    align-items:center;
}

.explorer-image img{
    width:100%;
    animation:trophyBounce 4s ease-in-out infinite;
}

@keyframes trophyBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}

.explorer-content h2{
    color:#14553B;
    margin-bottom:16px;
}

.explorer-content p{
    color:#60786B;
    line-height:1.8;
}

.explorer-progress{
    margin:30px 0;
}

.explorer-bar{
    height:16px;
    background:#E7F6EA;
    border-radius:999px;
    overflow:hidden;
}

.explorer-fill{
    width:80%;
    height:100%;
    background:linear-gradient(90deg,#FFD84A,#34C759);
    border-radius:999px;
    animation:progressMove 3s ease-in-out infinite alternate;
}

@keyframes progressMove{
    from{width:75%;}
    to{width:82%;}
}

.explorer-progress span{
    display:block;
    margin-top:12px;
    color:#178E5B;
    font-weight:700;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

.mission-wrapper,
.passport-container,
.explorer-container{
    grid-template-columns:1fr;
    text-align:center;
}

.mission-ozi,
.passport-left img,
.explorer-image img{
    margin:auto;
    max-width:260px;
}

.passport-stats{
    grid-template-columns:1fr;
}

}

@media(max-width:640px){

.reward-grid{
    grid-template-columns:repeat(2,1fr);
}

.task-grid,
.badge-gallery-grid{
    grid-template-columns:1fr;
}

.reward-row{
    justify-content:center;
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 5/8
   WORLD MAP + DISCOVER WORLDS
========================================================== */

/* ----------------------------------------------------------
   DÜNYA HARİTASI
---------------------------------------------------------- */

.world-map-section{
    padding:120px 0;
    background:linear-gradient(180deg,#EAFBFF 0%,#F8FFF9 100%);
    position:relative;
    overflow:hidden;
}

.world-map-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#59C3FF 2px,transparent 2px);
    background-size:120px 120px;
    opacity:.05;
}

.world-map-wrapper{
    position:relative;
    max-width:1200px;
    margin:auto;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(25,90,140,.12);
    background:#BFEFFF;
}

.world-map-image{
    width:100%;
    display:block;
}

/* ----------------------------------------------------------
   HARİTA OZİ
---------------------------------------------------------- */

.map-ozi{
    position:absolute;
    width:150px;
    bottom:20px;
    left:45%;
    transform:translateX(-50%);
    animation:mapFloat 5s ease-in-out infinite;
    z-index:20;
}

@keyframes mapFloat{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,-12px);}
}

/* ----------------------------------------------------------
   HARİTA PINLERİ
---------------------------------------------------------- */

.world-pin{
    position:absolute;
    width:64px;
    height:64px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    text-decoration:none;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    animation:pinBounce 3s infinite;
    z-index:30;
}

.world-pin:hover{
    transform:scale(1.12);
}

@keyframes pinBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

.pin-tooltip{
    position:absolute;
    top:-82px;
    left:50%;
    transform:translateX(-50%);
    background:#163E2F;
    color:white;
    padding:12px 14px;
    border-radius:16px;
    width:170px;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}

.pin-tooltip strong{
    display:block;
    margin-bottom:4px;
}

.pin-tooltip small{
    color:#BDEFD2;
}

.world-pin:hover .pin-tooltip{
    opacity:1;
    top:-92px;
}

.pin-tooltip::after{
    content:"";
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-width:10px 10px 0;
    border-style:solid;
    border-color:#163E2F transparent transparent;
}

/* PIN KONUMLARI */

.forest-pin{
    top:56%;
    left:25%;
    background:#35C46A;
    color:white;
}

.stars-pin{
    top:18%;
    right:28%;
    background:#705BFF;
    color:white;
}

.ocean-pin{
    bottom:18%;
    left:58%;
    background:#1FA5FF;
    color:white;
}

.dino-pin{
    top:48%;
    right:14%;
    background:#FF914D;
    color:white;
}

.space-pin{
    top:12%;
    left:55%;
    background:#222D5E;
    color:#FFD84A;
}

.volcano-pin{
    bottom:34%;
    right:38%;
    background:#F15A24;
    color:white;
}

.snow-pin{
    top:14%;
    left:12%;
    background:#E9F7FF;
    color:#3B83C0;
}

.world-pin.locked{
    opacity:.75;
    filter:grayscale(.2);
}

/* ----------------------------------------------------------
   KEŞİF DÜNYALARI
---------------------------------------------------------- */

.world-cards-section{
    padding:110px 0;
    background:#F8FFF9;
}

.world-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.world-card{
    background:white;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.world-card:hover{
    transform:translateY(-10px);
}

.world-card img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.world-content{
    padding:26px;
}

.world-status{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    margin-bottom:14px;
}

.world-status.open{
    background:#E5FFF0;
    color:#159D5B;
}

.world-status.soon{
    background:#F2ECFF;
    color:#7352E5;
}

.world-status.locked{
    background:#F2F2F2;
    color:#888;
}

.world-content h3{
    color:#16543D;
    margin-bottom:10px;
}

.world-content p{
    color:#60786C;
    line-height:1.7;
}

.world-features{
    list-style:none;
    padding:0;
    margin:20px 0 28px;
}

.world-features li{
    margin-bottom:10px;
    color:#2E634C;
    font-weight:600;
}

/* ----------------------------------------------------------
   DÜNYA RENKLERİ
---------------------------------------------------------- */

.world-forest{
    border-top:6px solid #34C759;
}

.world-stars{
    border-top:6px solid #7A5CFF;
}

.world-ocean{
    border-top:6px solid #18A8F7;
}

.world-dino{
    border-top:6px solid #FF914D;
}

/* ----------------------------------------------------------
   YAKINDA GELİYOR
---------------------------------------------------------- */

.coming-worlds-section{
    padding:100px 0;
    background:linear-gradient(180deg,#FFFDF7,#F8FCFF);
}

.coming-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
}

.coming-card{
    background:white;
    padding:26px;
    border-radius:24px;
    box-shadow:0 12px 28px rgba(0,0,0,.06);
    transition:.35s;
}

.coming-card:hover{
    transform:translateY(-8px);
}

.coming-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFF6DA;
    font-size:2rem;
    margin-bottom:16px;
}

.coming-card h3{
    color:#15543D;
    margin-bottom:10px;
}

.coming-card p{
    color:#63786F;
    line-height:1.6;
    margin-bottom:18px;
}

.coming-progress{
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:#EBF5EF;
    margin-bottom:10px;
}

.coming-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#FFD84A,#33C86A);
}

/* ----------------------------------------------------------
   MACERA ROTALARI
---------------------------------------------------------- */

.adventure-route-section{
    padding:110px 0;
    background:#F5FFFB;
}

.route-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
}

.route-card{
    color:white;
    padding:30px 24px;
    border-radius:28px;
    box-shadow:0 16px 36px rgba(0,0,0,.08);
    transition:.35s;
}

.route-card:hover{
    transform:translateY(-8px);
}

.route-icon{
    font-size:2.4rem;
    margin-bottom:18px;
}

.route-card.green{
    background:linear-gradient(135deg,#25C16F,#119457);
}

.route-card.blue{
    background:linear-gradient(135deg,#1EA4F5,#1779E3);
}

.route-card.purple{
    background:linear-gradient(135deg,#7A5CFF,#5B42D8);
}

.route-card.orange{
    background:linear-gradient(135deg,#FFAE3C,#FF7E29);
}

/* ----------------------------------------------------------
   DÜNYA KOLEKSİYONU
---------------------------------------------------------- */

.world-progress-section{
    padding:120px 0;
    background:linear-gradient(180deg,#F8FFF9,#ECFFF3);
}

.progress-banner{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:50px;
    align-items:center;
    background:white;
    padding:36px;
    border-radius:34px;
    box-shadow:0 22px 50px rgba(0,0,0,.08);
}

.progress-left img{
    width:100%;
    animation:compassSpin 12s linear infinite;
}

@keyframes compassSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.world-counter{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:30px 0;
}

.counter-item{
    background:#F4FFF8;
    padding:18px;
    border-radius:20px;
    text-align:center;
}

.counter-item strong{
    display:block;
    font-size:1.5rem;
    color:#15975C;
}

.counter-item span{
    color:#6A8076;
    font-size:.88rem;
}

.progress-bar.large{
    height:18px;
    margin:18px 0;
}

.progress-15{
    width:15%;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

.progress-banner{
    grid-template-columns:1fr;
    text-align:center;
}

.world-counter{
    grid-template-columns:1fr;
}

.map-ozi{
    width:110px;
}

.world-pin{
    width:52px;
    height:52px;
    font-size:1.3rem;
}

}

@media(max-width:640px){

.world-grid,
.coming-grid,
.route-grid{
    grid-template-columns:1fr;
}

.world-map-wrapper{
    border-radius:24px;
}

.pin-tooltip{
    display:none;
}

.world-pin{
    width:46px;
    height:46px;
    font-size:1.1rem;
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 6/8
   MINI GAMES + STAR SYSTEM + PLAYGROUND
========================================================== */

/* ----------------------------------------------------------
   MİNİ OYUN MERKEZİ
---------------------------------------------------------- */

.games-hub-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFF9F4 0%,#F7FFF8 100%);
    position:relative;
    overflow:hidden;
}

.games-hub-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#FFB347 2px,transparent 2px);
    background-size:120px 120px;
    opacity:.05;
}

.games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.game-hub-card{
    background:white;
    border-radius:28px;
    padding:26px;
    text-align:center;
    box-shadow:0 18px 38px rgba(255,170,80,.08);
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.game-hub-card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 26px 52px rgba(255,170,80,.16);
}

.game-hub-card img{
    width:110px;
    height:110px;
    object-fit:contain;
    margin-bottom:18px;
    transition:.35s;
}

.game-hub-card:hover img{
    transform:rotate(6deg) scale(1.08);
}

.game-stars{
    position:absolute;
    top:16px;
    right:16px;
    background:linear-gradient(135deg,#FFD84A,#FFBF00);
    color:#6B4A00;
    padding:8px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    box-shadow:0 6px 18px rgba(255,210,60,.28);
}

.game-hub-card h3{
    color:#16543D;
    margin-bottom:10px;
}

.game-hub-card p{
    color:#61796E;
    line-height:1.7;
    margin-bottom:22px;
}

/* ----------------------------------------------------------
   GÜNÜN OYUNU
---------------------------------------------------------- */

.daily-game-section{
    padding:110px 0;
    background:linear-gradient(180deg,#FFFDF7,#FFF8E8);
}

.daily-game-container{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:60px;
    align-items:center;
    background:white;
    padding:34px;
    border-radius:34px;
    box-shadow:0 22px 48px rgba(255,200,70,.12);
}

.daily-game-left img{
    width:100%;
    animation:gameFloat 5s ease-in-out infinite;
}

@keyframes gameFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}

.daily-game-right h2{
    color:#16543C;
    margin-bottom:16px;
}

.daily-game-right p{
    color:#60786D;
    line-height:1.8;
}

.daily-game-score{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin:26px 0 34px;
}

.daily-game-score div{
    flex:1;
    min-width:150px;
    background:#FFF6D8;
    padding:18px;
    border-radius:20px;
    text-align:center;
}

.daily-game-score strong{
    display:block;
    color:#B97300;
    margin-bottom:6px;
}

.daily-game-score span{
    font-size:1.4rem;
    font-weight:700;
    color:#E09100;
}

/* ----------------------------------------------------------
   CANLI YILDIZ SAYACI
---------------------------------------------------------- */

.live-stars-section{
    padding:120px 0;
    background:linear-gradient(180deg,#F8FFF8,#ECFFF4);
}

.stars-counter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:26px;
}

.stars-counter-card{
    background:white;
    border-radius:28px;
    padding:28px;
    text-align:center;
    box-shadow:0 18px 36px rgba(0,0,0,.06);
    transition:.35s;
}

.stars-counter-card:hover{
    transform:translateY(-8px);
}

.counter-emoji{
    font-size:2.4rem;
    display:block;
    margin-bottom:14px;
}

.stars-counter-card h3{
    font-size:2.5rem;
    color:#1CA85F;
    margin-bottom:10px;
    animation:starGlow 3s ease-in-out infinite;
}

@keyframes starGlow{
    0%,100%{
        text-shadow:0 0 0 rgba(255,215,0,0);
    }
    50%{
        text-shadow:0 0 16px rgba(255,215,0,.35);
    }
}

.stars-counter-card p{
    color:#64796F;
    font-weight:600;
}

.stars-counter-card:nth-child(1){
    border-top:6px solid #FFD84A;
}

.stars-counter-card:nth-child(2){
    border-top:6px solid #F97316;
}

.stars-counter-card:nth-child(3){
    border-top:6px solid #22C55E;
}

.stars-counter-card:nth-child(4){
    border-top:6px solid #3B82F6;
}

/* ----------------------------------------------------------
   1 DAKİKALIK OYUNLAR
---------------------------------------------------------- */

.quick-games-section{
    padding:110px 0;
    background:#FFFDF8;
}

.quick-games-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:22px;
}

.quick-game-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 14px 28px rgba(0,0,0,.06);
    transition:.35s;
}

.quick-game-card:hover{
    transform:translateY(-8px);
}

.quick-game-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.quick-game-card span{
    display:inline-block;
    margin:14px;
    background:#FFF4D2;
    color:#CC8B00;
    padding:6px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
}

.quick-game-card h4{
    color:#17543F;
    padding:0 16px 18px;
}

/* ----------------------------------------------------------
   BAŞARI KOLEKSİYONU
---------------------------------------------------------- */

.achievement-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFFDF6,#F8FFF8);
}

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:28px;
}

.achievement-card{
    background:white;
    border-radius:28px;
    padding:28px;
    text-align:center;
    box-shadow:0 18px 34px rgba(0,0,0,.06);
    transition:.35s;
}

.achievement-card:hover{
    transform:translateY(-8px);
}

.achievement-card img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:16px;
}

.achievement-card h3{
    color:#18563F;
    margin-bottom:8px;
}

.achievement-card small{
    color:#70847A;
}

.achievement-card.locked{
    opacity:.65;
    filter:grayscale(1);
    background:#F7F7F7;
}

/* ----------------------------------------------------------
   OZİ OYUN PARKI
---------------------------------------------------------- */

.playground-section{
    padding:120px 0;
    background:linear-gradient(180deg,#EFFFF7,#F8FFF9);
    position:relative;
    overflow:hidden;
}

.playground-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,214,70,.18),transparent 70%);
    top:-80px;
    right:-80px;
}

.playground-container{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:60px;
    align-items:center;
}

.playground-content h2{
    color:#14553D;
    margin:14px 0 18px;
}

.playground-content p{
    color:#60786C;
    line-height:1.8;
    margin-bottom:26px;
}

.playground-list{
    list-style:none;
    padding:0;
    margin:0 0 34px;
}

.playground-list li{
    margin-bottom:12px;
    background:white;
    padding:14px 18px;
    border-radius:16px;
    box-shadow:0 8px 18px rgba(0,0,0,.04);
    color:#195E43;
    font-weight:600;
}

.playground-image img{
    width:100%;
    animation:oziParkFloat 6s ease-in-out infinite;
}

@keyframes oziParkFloat{
    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }
    50%{
        transform:translateY(-15px) rotate(1deg);
    }
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

.daily-game-container,
.playground-container{
    grid-template-columns:1fr;
    text-align:center;
}

.daily-game-left img,
.playground-image img{
    max-width:260px;
    margin:auto;
}

.daily-game-score{
    justify-content:center;
}

}

@media(max-width:640px){

.games-grid,
.achievement-grid,
.quick-games-row{
    grid-template-columns:1fr;
}

.daily-game-score{
    flex-direction:column;
}

.stars-counter-grid{
    grid-template-columns:repeat(2,1fr);
}

}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 7/8
   SCIENCE + LEARN + PARENTS
========================================================== */

/* ----------------------------------------------------------
   BUGÜN NE ÖĞRENELİM?
---------------------------------------------------------- */

.learn-today-section{
    padding:120px 0;
    background:linear-gradient(180deg,#F5FFFD,#ECFFF8);
    position:relative;
    overflow:hidden;
}

.learn-today-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,#3CCB8F 2px,transparent 2px);
    background-size:120px 120px;
    opacity:.04;
}

.learn-feature-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    background:white;
    border-radius:36px;
    overflow:hidden;
    box-shadow:0 22px 55px rgba(30,180,120,.10);
}

.learn-image{
    position:relative;
}

.learn-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* ==========================================================
   OZİ TV GOLD EDITION
   INDEX GOLD CSS 8/8  — GRAND FINAL
   FOOTER + NIGHT MODE + NEWSLETTER + RESPONSIVE
========================================================== */

/* ----------------------------------------------------------
   DOĞA SESLERİ
---------------------------------------------------------- */

.nature-sounds-section{
    padding:120px 0;
    background:linear-gradient(180deg,#EFFFF8,#F8FFF9);
}

.sound-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:22px;
}

.sound-card{
    border:none;
    cursor:pointer;
    background:white;
    padding:26px 20px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 14px 30px rgba(0,0,0,.06);
    transition:.35s;
    font:inherit;
}

.sound-card:hover{
    transform:translateY(-8px);
    background:#E9FFF3;
}

.sound-card h3{
    color:#17543F;
    margin-top:12px;
}

/* ----------------------------------------------------------
   HABER BÜLTENİ
---------------------------------------------------------- */

.newsletter-home-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFFDF9,#FFF7EF);
}

.newsletter-home-container{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:60px;
    align-items:center;
}

.newsletter-left img{
    width:100%;
    animation:mailFloat 5s ease-in-out infinite;
}

@keyframes mailFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}

.newsletter-right h2{
    color:#16543D;
    margin:16px 0;
}

.newsletter-right p{
    color:#60786C;
    line-height:1.8;
    margin-bottom:28px;
}

.newsletter-form{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.newsletter-form input{
    flex:1;
    min-width:240px;
    border:none;
    background:white;
    padding:18px 22px;
    border-radius:999px;
    font-size:1rem;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    outline:none;
}

.newsletter-form input:focus{
    box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

/* Placeholder rengi (modern tarayıcı standardı) */
.newsletter-form input::placeholder{
    color:#8A9C93;
}

/* ----------------------------------------------------------
   OZİ DİYOR Kİ
---------------------------------------------------------- */

.ozi-quote-section{
    padding:110px 0;
    background:linear-gradient(180deg,#F5FFF8,#ECFFF2);
    text-align:center;
}

.quote-container{
    max-width:760px;
    margin:auto;
}

.quote-ozi{
    width:150px;
    margin-bottom:24px;
    animation:oziQuoteFloat 6s ease-in-out infinite;
}

@keyframes oziQuoteFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

#quoteText{
    color:#15543D;
    line-height:1.5;
    font-size:2rem;
    margin-bottom:26px;
}

/* ----------------------------------------------------------
   GECE MODU BUTONU
---------------------------------------------------------- */

.theme-switch-section{
    padding:90px 0;
    background:linear-gradient(180deg,#EAF7FF,#F6FBFF);
}

.theme-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.theme-toggle-btn{
    border:none;
    cursor:pointer;
    padding:18px 28px;
    border-radius:999px;
    background:linear-gradient(135deg,#233B71,#5B6CFF);
    color:white;
    font-weight:700;
    font-size:1rem;
    transition:.35s;
}

.theme-toggle-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(91,108,255,.28);
}

/* ----------------------------------------------------------
   GECE MODU
---------------------------------------------------------- */

body.night-mode{
    background:#07131F;
    color:#EAF6FF;
}

body.night-mode section{
    background:transparent !important;
}

body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4{
    color:#F8FCFF !important;
}

body.night-mode p,
body.night-mode li,
body.night-mode small,
body.night-mode span{
    color:#C5D6E3 !important;
}

body.night-mode .hero-overlay{
    background:rgba(0,20,45,.55);
}

body.night-mode .hero-gradient{
    background:linear-gradient(180deg,rgba(2,8,20,.18),rgba(2,10,24,.70));
}

body.night-mode .hero-bubble,
body.night-mode .welcome-card,
body.night-mode .video-card,
body.night-mode .game-hub-card,
body.night-mode .curiosity-card,
body.night-mode .parent-card,
body.night-mode .world-card,
body.night-mode .achievement-card,
body.night-mode .stat-card,
body.night-mode .badge-card,
body.night-mode .coming-card,
body.night-mode .route-card,
body.night-mode .knowledge-card,
body.night-mode .calendar-home-card{
    background:#112233 !important;
    box-shadow:0 14px 30px rgba(0,0,0,.35);
}

body.night-mode .section-badge{
    background:#173146;
    color:#8EDAFF;
}

body.night-mode .btn-primary{
    background:linear-gradient(135deg,#1EBE6D,#2ED98D);
}

/* ----------------------------------------------------------
   FOOTER GOLD
---------------------------------------------------------- */

.footer-gold{
    position:relative;
    padding-top:140px;
    background:linear-gradient(180deg,#061522,#0A2335 55%,#102C3F);
    color:white;
    overflow:hidden;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:50px;
    position:relative;
    z-index:3;
}

.footer-brand h3{
    color:white;
    margin-top:16px;
}

.footer-logo{
    width:120px;
}

.footer-slogan{
    color:#7EF2AE;
    font-weight:700;
    margin:14px 0;
}

.footer-grid h4{
    color:#FFE580;
    margin-bottom:18px;
}

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

.footer-grid li{
    margin-bottom:12px;
}

.footer-grid a{
    color:#D5E7F2;
    text-decoration:none;
    transition:.3s;
}

.footer-grid a:hover{
    color:#7EF2AE;
}

/* ----------------------------------------------------------
   FOOTER YILDIZLARI
---------------------------------------------------------- */

.footer-stars{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.footer-stars span{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:white;
    animation:twinkle 4s infinite;
}

.footer-stars span:nth-child(1){top:18%;left:10%;}
.footer-stars span:nth-child(2){top:28%;left:28%;}
.footer-stars span:nth-child(3){top:14%;right:18%;}
.footer-stars span:nth-child(4){top:40%;right:30%;}
.footer-stars span:nth-child(5){top:12%;left:55%;}
.footer-stars span:nth-child(6){top:34%;left:78%;}

@keyframes twinkle{
    0%,100%{opacity:.2;transform:scale(.8);}
    50%{opacity:1;transform:scale(1.6);}
}

/* ----------------------------------------------------------
   FOOTER ALT
---------------------------------------------------------- */

.footer-bottom{
    margin-top:70px;
    padding:30px 0;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-counter{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.footer-counter span{
    background:rgba(255,255,255,.08);
    padding:10px 16px;
    border-radius:999px;
    color:#E5FFF2;
}

.back-top-btn{
    border:none;
    cursor:pointer;
    background:#22C55E;
    color:white;
    padding:14px 22px;
    border-radius:999px;
    font-weight:700;
    transition:.3s;
}

.back-top-btn:hover{
    background:#16A34A;
    transform:translateY(-3px);
}

.footer-copyright{
    text-align:center;
    padding:26px 0 40px;
    color:#AFC7D6;
    font-size:.9rem;
}

/* ----------------------------------------------------------
   BUTONLAR
---------------------------------------------------------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:.35s;
}

.btn-primary{
    background:linear-gradient(135deg,#22C55E,#16A34A);
    color:white;
    padding:16px 26px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 12px 24px rgba(34,197,94,.20);
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    background:white;
    color:#14543D;
    padding:15px 24px;
    border-radius:999px;
    font-weight:700;
    border:2px solid #E2F5E8;
}

.btn-secondary:hover{
    background:#F5FFF8;
}

/* ----------------------------------------------------------
   GLOBAL CARD HOVER
---------------------------------------------------------- */

.world-card,
.video-card,
.game-hub-card,
.badge-card,
.curiosity-card,
.parent-card,
.stat-card,
.quick-game-card,
.achievement-card{
    transition:transform .35s, box-shadow .35s;
}

.world-card:hover,
.video-card:hover,
.game-hub-card:hover,
.badge-card:hover,
.curiosity-card:hover,
.parent-card:hover,
.stat-card:hover,
.quick-game-card:hover,
.achievement-card:hover{
    box-shadow:0 24px 50px rgba(0,0,0,.12);
}

/* ----------------------------------------------------------
   SCROLLBAR (WebKit)
---------------------------------------------------------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#EEF8F1;
}

::-webkit-scrollbar-thumb{
    background:#28C76F;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#1DA45A;
}

/* ----------------------------------------------------------
   YUMUŞAK KAYDIRMA
---------------------------------------------------------- */

html{
    scroll-behavior:smooth;
}

/* ----------------------------------------------------------
   RESPONSIVE GRAND FINAL
---------------------------------------------------------- */

@media (max-width:1200px){

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:992px){

.newsletter-home-container{
    grid-template-columns:1fr;
    text-align:center;
}

.newsletter-left img{
    max-width:240px;
    margin:auto;
}

.theme-container{
    justify-content:center;
    text-align:center;
}

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

.footer-bottom{
    justify-content:center;
    text-align:center;
}

}

@media (max-width:640px){

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.footer-brand{
    text-align:center;
}

.footer-logo{
    margin:auto;
}

.newsletter-form{
    flex-direction:column;
}

.newsletter-form input,
.newsletter-form button{
    width:100%;
}

.sound-grid{
    grid-template-columns:repeat(2,1fr);
}

#quoteText{
    font-size:1.5rem;
}

}

/* ==========================================================
   GOLD MASTER END
========================================================== */
.today-label{
    position:absolute;
    top:20px;
    left:20px;
    background:#FFD84A;
    color:#5C4700;
    padding:10px 18px;
    border-radius:999px;
    font-weight:700;
    font-size:.8rem;
}

.learn-content{
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.learn-content h3{
    color:#17573F;
    font-size:2rem;
    margin-bottom:18px;
}

.learn-content p{
    color:#60786D;
    line-height:1.9;
}

.fact-box{
    margin:28px 0;
    background:#EFFFF7;
    border-left:6px solid #22C55E;
    padding:18px 22px;
    border-radius:18px;
}

.fact-box span{
    display:block;
    font-weight:700;
    color:#15965C;
    margin-bottom:8px;
}

/* ----------------------------------------------------------
   MERAK KARTLARI
---------------------------------------------------------- */

.curiosity-cards-section{
    padding:110px 0;
    background:#FFFDFB;
}

.curiosity-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:24px;
}

.curiosity-card{
    background:white;
    border-radius:26px;
    padding:28px;
    box-shadow:0 16px 34px rgba(0,0,0,.06);
    transition:.35s;
    position:relative;
}

.curiosity-card:hover{
    transform:translateY(-8px);
}

.curiosity-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#E8FFF2;
    font-size:2rem;
    margin-bottom:18px;
}

.curiosity-card h3{
    color:#16563E;
    margin-bottom:12px;
}

.curiosity-card p{
    color:#667C71;
    line-height:1.7;
}

/* ----------------------------------------------------------
   BİLİM LABORATUVARI
---------------------------------------------------------- */

.science-home-section{
    padding:120px 0;
    background:linear-gradient(180deg,#EAF7FF,#F7FFFD);
}

.science-home-container{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:60px;
    align-items:center;
}

.science-left img{
    width:100%;
    animation:labFloat 5s ease-in-out infinite;
}

@keyframes labFloat{
    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }
    50%{
        transform:translateY(-14px) rotate(1deg);
    }
}

.science-right h2{
    color:#15543E;
    margin:16px 0;
}

.science-right p{
    color:#60786D;
    line-height:1.8;
}

.science-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:32px 0;
}

.science-item{
    background:white;
    padding:18px;
    border-radius:18px;
    color:#1A6246;
    font-weight:600;
    box-shadow:0 10px 22px rgba(0,0,0,.05);
    transition:.3s;
}

.science-item:hover{
    transform:translateY(-4px);
    background:#F4FFF9;
}

/* ----------------------------------------------------------
   HIZLI BİLGİLER
---------------------------------------------------------- */

.knowledge-slider-section{
    padding:100px 0;
    background:#FFFDF7;
}

.knowledge-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;
}

.knowledge-card{
    background:white;
    border-radius:24px;
    padding:24px;
    text-align:center;
    box-shadow:0 14px 28px rgba(0,0,0,.05);
    transition:.35s;
}

.knowledge-card:hover{
    transform:translateY(-8px);
}

.knowledge-card span{
    font-size:2rem;
    display:block;
    margin-bottom:14px;
}

.knowledge-card h4{
    color:#16543E;
    margin-bottom:10px;
}

.knowledge-card p{
    color:#6C8177;
    font-size:.92rem;
}

/* ----------------------------------------------------------
   HAFTANIN KEŞFİ
---------------------------------------------------------- */

.weekly-discovery-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFF7EF,#FFFDF8);
}

.weekly-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.weekly-image{
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 24px 50px rgba(255,180,70,.14);
}

.weekly-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.weekly-content h2{
    color:#175640;
    margin:16px 0;
}

.weekly-content p{
    color:#60786E;
    line-height:1.8;
}

.weekly-list{
    list-style:none;
    padding:0;
    margin:24px 0 34px;
}

.weekly-list li{
    margin-bottom:12px;
    background:white;
    padding:14px 18px;
    border-radius:16px;
    color:#175C43;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
}

/* ----------------------------------------------------------
   OKUMA KÖŞESİ
---------------------------------------------------------- */

.reading-corner-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFFDFB,#F7FFF8);
}

.reading-container{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:60px;
    align-items:center;
}

.reading-left h2{
    color:#15533D;
    margin:16px 0;
}

.reading-left p{
    color:#60786E;
    line-height:1.8;
    margin-bottom:30px;
}

.reading-right img{
    width:100%;
    animation:readingFloat 6s ease-in-out infinite;
}

@keyframes readingFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

/* ----------------------------------------------------------
   EBEVEYNLER İÇİN
---------------------------------------------------------- */

.parents-section{
    padding:120px 0;
    background:linear-gradient(180deg,#F7FFFD,#ECFFF8);
}

.parents-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:26px;
}

.parent-card{
    background:white;
    border-radius:26px;
    padding:30px 24px;
    text-align:center;
    box-shadow:0 16px 34px rgba(0,0,0,.06);
    transition:.35s;
}

.parent-card:hover{
    transform:translateY(-8px);
}

.parent-card span{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    border-radius:50%;
    background:#E8FFF4;
    font-size:2rem;
}

.parent-card h3{
    color:#16553F;
    margin-bottom:12px;
}

.parent-card p{
    color:#647A70;
    line-height:1.7;
}

/* ----------------------------------------------------------
   MERAK TAKVİMİ
---------------------------------------------------------- */

.calendar-home-section{
    padding:120px 0;
    background:linear-gradient(180deg,#FFFDF8,#FFF8EF);
}

.calendar-home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;
}

.calendar-home-card{
    background:white;
    padding:22px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 12px 26px rgba(0,0,0,.05);
    transition:.35s;
    font-weight:700;
    color:#16543E;
}

.calendar-home-card:hover{
    transform:translateY(-6px);
}

.calendar-home-card small{
    display:block;
    margin-top:8px;
    color:#71867C;
    font-weight:500;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:992px){

.learn-feature-card,
.science-home-container,
.weekly-container,
.reading-container{
    grid-template-columns:1fr;
}

.learn-content,
.weekly-content,
.reading-left{
    padding:30px;
}

.science-left img,
.reading-right img{
    max-width:260px;
    margin:auto;
}

.science-list{
    grid-template-columns:1fr;
}

}

@media(max-width:640px){

.curiosity-grid,
.parents-grid,
.calendar-home-grid,
.knowledge-row{
    grid-template-columns:1fr;
}

.learn-content{
    padding:24px;
}

.learn-content h3{
    font-size:1.6rem;
}

}
/* ==========================================================
   OZİ TV MASTER FIX PACK 1/4
   PLACEHOLDER + POPUP + EFFECTS
========================================================== */

/* ----------------------------------------------------------
   PLACEHOLDER GÖRSELLER
---------------------------------------------------------- */

.placeholder-image,
img:not([src]),
img[src=""],
img[src*="undefined"]{
    background:linear-gradient(135deg,#DFF8E8,#B8F1D0);
    border-radius:24px;
    min-height:180px;
    object-fit:cover;
}

/* Hero görseli yoksa bile alan dolu görünsün */

.hero-background{
    background:
        linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.25)),
        linear-gradient(180deg,#78D6FF,#B5F3D3);
    overflow:hidden;
}

.hero-bg-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ----------------------------------------------------------
   JS POPUP
---------------------------------------------------------- */

.reward-popup{
    position:fixed;
    left:50%;
    bottom:40px;
    transform:translateX(-50%);
    background:linear-gradient(135deg,#22C55E,#16A34A);
    color:#fff;
    padding:16px 24px;
    border-radius:999px;
    font-weight:700;
    z-index:99999;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

/* ----------------------------------------------------------
   WORLD POPUP
---------------------------------------------------------- */

.world-popup{
    position:fixed;
    transform:translate(-50%,-100%);
    background:white;
    padding:18px 20px;
    border-radius:20px;
    width:230px;
    text-align:center;
    z-index:9999;
    box-shadow:0 18px 35px rgba(0,0,0,.18);
}

.world-popup h3{
    color:#15543D;
    margin-bottom:8px;
}

.world-popup p{
    color:#60786C;
    font-size:.92rem;
    margin-bottom:14px;
}

.world-popup-btn{
    width:100%;
    border:none;
    cursor:pointer;
    background:#22C55E;
    color:white;
    padding:12px;
    border-radius:999px;
    font-weight:700;
}

/* ----------------------------------------------------------
   KONFETİ
---------------------------------------------------------- */

.mini-confetti{
    position:fixed;
    width:10px;
    height:10px;
    border-radius:3px;
    pointer-events:none;
    z-index:99999;
}

/* ----------------------------------------------------------
   YAPRAKLAR
---------------------------------------------------------- */

.hero-leaves{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.dynamic-leaf{
    position:absolute;
    top:-40px;
    animation:leafFall linear forwards;
    opacity:.8;
}

@keyframes leafFall{

    0%{
        transform:translateY(-20px) rotate(0deg);
    }

    100%{
        transform:translateY(110vh) rotate(360deg);
    }

}

/* ----------------------------------------------------------
   ATEŞ BÖCEKLERİ
---------------------------------------------------------- */

.fireflies{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.fireflies span{
    position:absolute;
    border-radius:50%;
    background:#FFF7A5;
    box-shadow:0 0 12px #FFF38A;
    animation:fireflyMove linear forwards;
}

@keyframes fireflyMove{

    0%{
        opacity:0;
        transform:translate(0,0);
    }

    30%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(60px,-160px);
    }

}

/* ----------------------------------------------------------
   BULUTLAR
---------------------------------------------------------- */

.floating-cloud{
    position:absolute;
    width:180px;
    height:70px;
    border-radius:999px;
    background:rgba(255,255,255,.45);
    filter:blur(2px);
}

.floating-cloud::before,
.floating-cloud::after{
    content:"";
    position:absolute;
    background:inherit;
    border-radius:50%;
}

.floating-cloud::before{
    width:70px;
    height:70px;
    left:20px;
    top:-25px;
}

.floating-cloud::after{
    width:90px;
    height:90px;
    right:18px;
    top:-35px;
}

/* ----------------------------------------------------------
   SES KARTI AKTİF
---------------------------------------------------------- */

.sound-card.active{
    background:#DDFBEA;
    border:2px solid #22C55E;
    transform:translateY(-6px);
}

.sound-card.active h3{
    color:#0F7D43;
}

/* ----------------------------------------------------------
   FAVORİ BUTONU
---------------------------------------------------------- */

.favorite-video-btn{
    position:absolute;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    font-size:1.1rem;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* ----------------------------------------------------------
   BUGÜN TAKVİMİ
---------------------------------------------------------- */

.calendar-home-card.today{
    background:linear-gradient(135deg,#22C55E,#16A34A);
    color:white;
    transform:translateY(-8px);
}

.calendar-home-card.today small{
    color:#EFFFF5;
}

/* ----------------------------------------------------------
   SHOW CARD (IntersectionObserver)
---------------------------------------------------------- */

.show-card{
    opacity:1 !important;
    transform:none !important;
}

[data-animate]{
    opacity:0;
    transform:translateY(30px);
    transition:.8s ease;
}

.animate-visible{
    opacity:1;
    transform:translateY(0);
}

/* ----------------------------------------------------------
   GÖREV TAMAMLANDI
---------------------------------------------------------- */

.task-card.completed{
    border:2px solid #22C55E;
    background:#F1FFF6;
}

.task-card.completed::after{
    content:"✓ TAMAMLANDI";
    position:absolute;
    top:16px;
    right:16px;
    background:#22C55E;
    color:white;
    padding:6px 10px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:700;
}

/* ----------------------------------------------------------
   PROGRESS BAR ANİMASYONU
---------------------------------------------------------- */

.progress-fill{
    transition:width .8s ease;
}

/* ----------------------------------------------------------
   MOBİL
---------------------------------------------------------- */

@media(max-width:768px){

.hero-leaves,
.fireflies{
    display:none;
}

.reward-popup{
    width:90%;
    text-align:center;
}

.world-popup{
    width:200px;
}

}
/* ==========================================================
   OZİ TV MASTER FIX PACK 2/4
   HERO ALIGNMENT + NAVBAR + RESPONSIVE
========================================================== */

/* ----------------------------------------------------------
   HERO ANA YAPI
---------------------------------------------------------- */

.hero-gold{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
}

.hero-background{
    position:absolute;
    inset:0;
    z-index:-3;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
}

.hero-gradient{
    position:absolute;
    inset:0;
    z-index:-1;
}

/* ----------------------------------------------------------
   HERO CONTAINER
---------------------------------------------------------- */

.hero-container{
    width:100%;
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:60px;
    padding:140px 40px 120px;
}

/* ----------------------------------------------------------
   SOL TARAF
---------------------------------------------------------- */

.hero-left{
    position:relative;
    z-index:10;
}

.hero-left h1{
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1.08;
    margin-bottom:22px;
    max-width:650px;
}

.hero-left p{
    font-size:1.15rem;
    max-width:560px;
    line-height:1.9;
    margin-bottom:28px;
}

/* Rozet */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:999px;
    background:white;
    color:#16985C;
    font-weight:700;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    margin-bottom:24px;
}

/* ----------------------------------------------------------
   HERO BUTONLARI
---------------------------------------------------------- */

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:30px;
}

.hero-buttons .btn{
    min-width:180px;
    justify-content:center;
}

/* ----------------------------------------------------------
   HERO PILL
---------------------------------------------------------- */

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-pill{
    padding:10px 16px;
    background:white;
    border-radius:999px;
    font-size:.9rem;
    font-weight:600;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
}

/* ----------------------------------------------------------
   SAĞ TARAF
---------------------------------------------------------- */

.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-ozi{
    width:min(430px,95%);
    max-width:430px;
    position:relative;
    z-index:5;
    filter:drop-shadow(0 22px 35px rgba(0,0,0,.18));
}

/* ----------------------------------------------------------
   KONUŞMA BALONU
---------------------------------------------------------- */

.hero-bubble{
    position:absolute;
    top:20px;
    right:-10px;
    width:260px;
    background:white;
    padding:18px;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    z-index:20;
}

.hero-bubble h3{
    margin-bottom:10px;
    color:#149E63;
}

.hero-bubble p{
    margin:0;
    line-height:1.6;
    color:#44695A;
}

/* ----------------------------------------------------------
   GÜNÜN ROZETİ
---------------------------------------------------------- */

.daily-badge-card{
    position:absolute;
    bottom:10px;
    left:-10px;
    background:white;
    padding:16px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 18px 34px rgba(0,0,0,.12);
    z-index:20;
}

.daily-badge-card img{
    width:64px;
    height:64px;
    object-fit:contain;
}

/* ----------------------------------------------------------
   BULUTLAR
---------------------------------------------------------- */

.cloud{
    position:absolute;
    z-index:-1;
    opacity:.55;
}

.cloud-1{
    top:80px;
    left:-180px;
}

.cloud-2{
    top:180px;
    right:-200px;
}

/* ----------------------------------------------------------
   SCROLL DOWN
---------------------------------------------------------- */

.scroll-down{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    z-index:15;
}
/* ==========================================================
   OZİ TV MASTER FIX PACK 2/4
   PART 2 — NAVBAR + HERO RESPONSIVE
========================================================== */

/* ----------------------------------------------------------
   NAVBAR GOLD
---------------------------------------------------------- */

.navbar{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;

    flex:1;
    margin:0 24px;

}

.navbar.scrolled{
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.navbar-container{
    max-width:1280px;
    margin:auto;

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

    padding:14px 28px;
}

/* ----------------------------------------------------------
   LOGO
---------------------------------------------------------- */

.navbar-logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.navbar-logo img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.navbar-logo span{
    color:#17543F;
    font-weight:800;
    font-size:1.1rem;
}

/* ----------------------------------------------------------
   MENÜ
---------------------------------------------------------- */

.navbar-menu{
    display:flex;
    align-items:center;
    gap:26px;
}

.navbar-menu a{
    text-decoration:none;
    color:#24543E;
    font-weight:600;
    transition:.25s;
}

.navbar-menu a:hover{
    color:#19A45F;
}

/* ----------------------------------------------------------
   ARAMA KUTUSU
---------------------------------------------------------- */

.navbar-search input{
    width:190px;
    padding:12px 16px;
    border:none;
    border-radius:999px;
    background:#F4FFF8;
    outline:none;
    transition:.3s;
}

.navbar-search input:focus{
    width:230px;
    background:white;
    box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* ----------------------------------------------------------
   MOBİL MENÜ BUTONU
---------------------------------------------------------- */

.mobile-menu-toggle{
    display:none;
    width:48px;
    height:48px;
    border:none;
    border-radius:14px;
    background:#22C55E;
    color:white;
    font-size:1.4rem;
    cursor:pointer;
}

/* ----------------------------------------------------------
   HERO SPACING
---------------------------------------------------------- */

.hero-gold{
    padding-top:88px;
}

.hero-container{
    align-items:center;
}

.hero-left{
    padding-top:20px;
}

.hero-left h1 span{
    display:block;
    color:#16A34A;
}

/* ----------------------------------------------------------
   OZİ KONUMU
---------------------------------------------------------- */

.hero-right{
    justify-self:end;
}

.hero-ozi{
    animation:oziFloat 5s ease-in-out infinite;
}

@keyframes oziFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-14px);
    }
}

/* ----------------------------------------------------------
   HERO BALONU MOBİLDE TAŞMASIN
---------------------------------------------------------- */

.hero-bubble{
    max-width:260px;
}

.daily-badge-card{
    max-width:220px;
}

/* ----------------------------------------------------------
   HERO PILL HİZALAMA
---------------------------------------------------------- */

.hero-pills{
    max-width:560px;
}

.hero-pill{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ----------------------------------------------------------
   RESPONSIVE TABLET
---------------------------------------------------------- */

@media(max-width:1024px){

.hero-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
}

.hero-right{
    justify-self:center;
    order:-1;
}

.hero-left{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-left h1,
.hero-left p{
    max-width:700px;
}

.hero-buttons,
.hero-pills{
    justify-content:center;
}

.hero-bubble{
    top:-10px;
    right:50%;
    transform:translateX(50%);
}

.daily-badge-card{
    left:50%;
    bottom:-20px;
    transform:translateX(-50%);
}

}

/* ----------------------------------------------------------
   RESPONSIVE MOBİL
---------------------------------------------------------- */

@media(max-width:768px){

.navbar-search{
    display:none;
}

.mobile-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
}

.navbar-menu{
    position:absolute;
    top:74px;
    left:0;
    width:100%;

    display:none;
    flex-direction:column;

    background:white;
    padding:24px;

    box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.navbar-menu.open{
    display:flex;
}

.hero-container{
    padding:120px 24px 90px;
}

.hero-left h1{
    font-size:2.5rem;
}

.hero-left p{
    font-size:1rem;
}

.hero-buttons{
    flex-direction:column;
    width:100%;
}

.hero-buttons .btn{
    width:100%;
}

.hero-pill{
    width:100%;
}

.hero-bubble{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    margin-top:20px;
}

.daily-badge-card{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin-top:18px;
}

.hero-ozi{
    max-width:300px;
}

}

/* ----------------------------------------------------------
   KÜÇÜK TELEFONLAR
---------------------------------------------------------- */

@media(max-width:480px){

.hero-left h1{
    font-size:2rem;
}

.hero-badge{
    font-size:.8rem;
}

.hero-pill{
    font-size:.82rem;
}

.scroll-down{
    display:none;
}

}
/* HEADER SEARCH INPUT */

.header-search-input{
    width:0;
    opacity:0;
    border:none;
    outline:none;
    background:#F5FFF8;
    border-radius:999px;
    padding:12px 16px;
    transition:.35s ease;
}

.header-actions:hover .header-search-input,
.header-search-input:focus{
    width:180px;
    opacity:1;
    margin-left:10px;
}
/* ==========================================================
   MASTER FIX PACK 3/4 — HERO UI REPAIR
========================================================== */

/* HEADER YÜKSEKLİĞİ */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.05);
}

.header-container{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Logo */

.logo{
    width:64px;
    height:64px;
    object-fit:contain;
}

.logo-text h1{
    font-size:1.7rem;
    margin:0;
    color:#15543D;
}

.logo-small{
    font-size:.7rem;
    letter-spacing:2px;
    color:#2AA866;
}

/* HERO HEADER BOŞLUĞU */

.hero-gold{
    padding-top:88px;
}

/* OZİ */

.hero-right{
    position:relative;
    min-height:560px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.hero-ozi{
    width:420px;
    max-width:100%;
    position:relative;
    z-index:5;
    display:block;
}

/* Konuşma Balonu */

.hero-bubble{
    position:absolute;
    top:40px;
    right:-20px;
    width:260px;
    z-index:20;
}

/* Günün Rozeti */

.daily-badge-card{
    position:absolute;
    left:-20px;
    bottom:40px;
    z-index:18;
}

/* Sağ Alt Butonlar */

.theme-mini-card,
.sound-mini-card{
    position:absolute;
    right:30px;
    z-index:30;
}

.sound-mini-card{
    bottom:140px;
}

.theme-mini-card{
    bottom:50px;
}
/* ==========================================================
   MASTER REPAIR HERO 1/3
   OZİ TV GOLD — HERO HOSTINGER FIX
========================================================== */

/* ----------------------------------------------------------
   HERO GENEL DÜZEN
---------------------------------------------------------- */

.hero-gold{
    position:relative;
    min-height:100vh;
    padding-top:110px;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.hero-container{
    max-width:1280px;
    margin:0 auto;
    width:100%;

    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;

    gap:50px;
    padding:30px 32px 80px;
}

/* ----------------------------------------------------------
   SOL TARAF
---------------------------------------------------------- */

.hero-left{
    z-index:20;
}

.hero-left h1{
    font-size:clamp(2.7rem,5vw,4.8rem);
    line-height:1.08;
    color:#114B35;
    margin-bottom:20px;
}

.hero-left h1 span{
    color:#1BA562;
}

.hero-left p{
    font-size:1.12rem;
    line-height:1.9;
    color:#456E5C;
    max-width:560px;
    margin-bottom:30px;
}

/* ----------------------------------------------------------
   HERO BUTONLARI
---------------------------------------------------------- */

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:28px;
}

.hero-buttons .btn{
    min-width:190px;
    justify-content:center;
}

/* ----------------------------------------------------------
   HERO PILL
---------------------------------------------------------- */

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
}

.hero-pill{
    background:#FFFFFF;
    padding:10px 18px;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
    font-weight:600;
    color:#1D6B4B;
}

/* ----------------------------------------------------------
   SAĞ TARAF (OZİ ALANI)
---------------------------------------------------------- */

.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:580px;
}

/* OZİ görünmese bile alan boş kalmasın */

.hero-right::before{
    content:"🦉";
    position:absolute;
    font-size:180px;
    opacity:.08;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.hero-ozi{
    position:relative;
    width:min(420px,95%);
    max-width:420px;
    display:block;
    z-index:5;
    filter:drop-shadow(0 22px 34px rgba(0,0,0,.16));
}

/* ----------------------------------------------------------
   KONUŞMA BALONU
---------------------------------------------------------- */

.hero-bubble{
    position:absolute;
    top:40px;
    right:0;
    width:250px;

    background:white;
    border-radius:24px;
    padding:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.14);
    z-index:20;
}

.hero-bubble h3{
    margin:0 0 10px;
    color:#18A05E;
}

.hero-bubble p{
    margin:0;
    line-height:1.6;
    color:#4E6B60;
}

/* ----------------------------------------------------------
   GÜNÜN ROZETİ
---------------------------------------------------------- */

.daily-badge-card{
    position:absolute;
    bottom:30px;
    left:0;

    display:flex;
    align-items:center;
    gap:14px;

    background:white;
    padding:16px 18px;
    border-radius:22px;

    box-shadow:0 18px 36px rgba(0,0,0,.12);
    z-index:18;
}

.daily-badge-card img{
    width:64px;
    height:64px;
    object-fit:contain;
}

/* ----------------------------------------------------------
   BULUTLAR
---------------------------------------------------------- */

.cloud{
    position:absolute;
    width:220px;
    height:80px;
    background:rgba(255,255,255,.28);
    border-radius:999px;
    filter:blur(2px);
    z-index:0;
}

.cloud::before,
.cloud::after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:inherit;
}

.cloud::before{
    width:70px;
    height:70px;
    left:25px;
    top:-20px;
}

.cloud::after{
    width:90px;
    height:90px;
    right:25px;
    top:-30px;
}

.cloud-1{
    top:110px;
    left:-80px;
}

.cloud-2{
    top:180px;
    right:-90px;
}

/* ----------------------------------------------------------
   HERO ARKA PLAN
---------------------------------------------------------- */

.hero-background{
    position:absolute;
    inset:0;
    z-index:-5;
}

.hero-bg-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Resim yoksa hoş bir geçiş göster */

.hero-bg-image:not([src]),
.hero-bg-image[src=""]{
    display:none;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.18);
}

.hero-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(244,255,249,.72)
        );
}

/* ----------------------------------------------------------
   SCROLL OKU
---------------------------------------------------------- */

.scroll-down{
    position:absolute;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
}

/* ----------------------------------------------------------
   RESPONSIVE TABLET
---------------------------------------------------------- */

@media (max-width:1024px){

.hero-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
}

.hero-left{
    order:2;
}

.hero-right{
    order:1;
    min-height:420px;
}

.hero-buttons,
.hero-pills{
    justify-content:center;
}

.hero-bubble{
    position:relative;
    top:auto;
    right:auto;
    margin:20px auto 0;
}

.daily-badge-card{
    position:relative;
    left:auto;
    bottom:auto;
    margin:20px auto 0;
    justify-content:center;
}

}

/* ----------------------------------------------------------
   RESPONSIVE TELEFON
---------------------------------------------------------- */

@media (max-width:768px){

.hero-gold{
    padding-top:95px;
}

.hero-container{
    padding:24px 20px 60px;
}

.hero-left h1{
    font-size:2.2rem;
}

.hero-left p{
    font-size:1rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons .btn{
    width:100%;
}

.hero-pill{
    width:100%;
    justify-content:center;
}

.hero-ozi{
    max-width:280px;
}

.hero-right{
    min-height:340px;
}

}
/* ==========================================================
   OZİ PLACEHOLDER (GEÇİCİ)
========================================================== */

.hero-right{
    position:relative;
}

.hero-right::before{
    content:"🦉";
    position:absolute;
    left:50%;
    bottom:40px;
    transform:translateX(-50%);
    font-size:180px;
    opacity:.12;
    z-index:1;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.15));
}

.hero-ozi{
    position:relative;
    z-index:5;
    min-height:420px;
}
/* ==========================================================
   OZİ TV GOLD MOBILE RESTORE PACK 1/4
   HEADER + HERO RESPONSIVE
========================================================== */

@media (max-width:768px){

/* --------------------------------------------------
   GENEL
-------------------------------------------------- */

html{
    font-size:15px;
}

body{
    overflow-x:hidden;
}

.container{
    width:100%;
    padding-left:18px;
    padding-right:18px;
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.header{
    height:72px;
}

.header-container{
    min-height:72px;
    padding:0 16px;
}

.logo-area{
    gap:10px;
}

.logo{
    width:46px;
    height:46px;
}

.logo-text h1{
    font-size:1.05rem;
    line-height:1.1;
}

.logo-small{
    display:none;
}

/* Menü gizle */

.navbar{
    display:none;
}

/* Kulüp butonu gizle */

.login-btn{
    display:none;
}

/* Sağ ikonlar */

.header-actions{
    gap:10px;
}

.search-btn,
.theme-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:18px;
}

/* Hamburger görünür */

.mobile-menu{
    display:flex;
    width:42px;
    height:42px;
    justify-content:center;
    align-items:center;
}

/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.hero-gold{
    padding-top:85px;
    min-height:auto;
}

.hero-container{
    display:flex;
    flex-direction:column-reverse;
    gap:28px;
    padding:24px 18px 60px;
}

/* Sol taraf */

.hero-left{
    text-align:center;
}

.hero-badge{
    margin:0 auto 16px;
    width:max-content;
}

.hero-left h1{
    font-size:2.15rem;
    line-height:1.15;
    margin-bottom:18px;
}

.hero-left p{
    font-size:1rem;
    line-height:1.7;
    margin:0 auto 24px;
    max-width:100%;
}

/* --------------------------------------------------
   BUTONLAR
-------------------------------------------------- */

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.hero-buttons .btn{
    width:100%;
    justify-content:center;
    min-height:56px;
    font-size:1rem;
}

/* --------------------------------------------------
   PILL
-------------------------------------------------- */

.hero-pills{
    justify-content:center;
    gap:10px;
}

.hero-pill{
    width:100%;
    justify-content:center;
    padding:12px 16px;
}

/* --------------------------------------------------
   HERO DALGA
-------------------------------------------------- */

.hero-wave svg{
    height:70px;
}

.scroll-down{
    display:none;
}

}
/* --------------------------------------------------
   EKSİK GÖRSEL TOLERANSI (js/main.js ile birlikte çalışır)
   Görsel dosyası henüz eklenmediyse kırık ikon yerine
   görseli görünmez kılar; site iskeleti (boyut/hizalama)
   bozulmadan kalır. Görsel eklendiğinde otomatik düzelir.
-------------------------------------------------- */
img.img-missing{
    visibility:hidden;
}