/* ==========================================
   ROOT VARIABLES & RESET
   ========================================== */
:root {
    --orange: #FF6B35;
    --yellow: #FFD700;
    --pink:   #FF1493;
    --green:  #00FF88;
    --purple: #9B59B6;
    --blue:   #00BFFF;
    --dark:   #0a0a2e;
    --dark2:  #1a0533;
    --white:  #ffffff;
    --nav-h:       72px;
    --font-heading: 'Exo 2', 'Nunito', sans-serif;
    --font-body:    'Nunito', sans-serif;
    --transition:   all .3s ease;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ==========================================
   NAVBAR — Ultra Enterprise
   ========================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(6, 6, 30, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .4s ease, box-shadow .4s ease, border-color .4s ease;
}

/* Scroll progress bar */
.nav-progress {
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #FF1493, #FFD700, #00BFFF);
    background-size: 200% 100%;
    animation: progress-shine 2s linear infinite;
    z-index: 10;
    border-radius: 0 2px 2px 0;
    transition: width .1s linear;
}

@keyframes progress-shine {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Bottom glow line — only visible before scroll */
.nav-glow-line {
    position: absolute;
    bottom: -1px; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155,89,182,.6), rgba(0,191,255,.6), rgba(255,215,0,.4), transparent);
    transition: opacity .4s;
}

.navbar.scrolled .nav-glow-line { opacity: 0; }

.navbar.scrolled {
    background: rgba(6, 6, 30, 0.94);
    border-bottom-color: rgba(255,255,255,.1);
    box-shadow:
        0 1px 0 rgba(255,255,255,.05),
        0 4px 32px rgba(0,0,0,.6),
        0 8px 64px rgba(0,0,0,.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ── Logo ── */
.nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-logo::after {
    content: '';
    position: absolute;
    inset: -6px -10px;
    border-radius: 16px;
    background: rgba(155,89,182,.0);
    transition: background .3s;
}

.nav-logo:hover::after { background: rgba(155,89,182,.12); }

.logo-img {
    height: 62px;
    display: block;
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(155,89,182,.4));
    transition: filter .3s, transform .3s;
    position: relative;
    z-index: 1;
}

.nav-logo:hover .logo-img {
    filter: brightness(1.25) drop-shadow(0 0 16px rgba(155,89,182,.7));
    transform: scale(1.04);
}

/* ── Nav links ── */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-links li { position: relative; }

.nav-links a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    border-radius: 12px;
    transition: color .22s, background .22s;
    white-space: nowrap;
    position: relative;
}

/* Animated underline dot */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 16px; height: 2px;
    border-radius: 2px;
    background: var(--yellow);
    transition: transform .25s cubic-bezier(.34,1.3,.64,1), opacity .25s;
    opacity: 0;
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.nav-links a:hover::after,
.nav-links a.active-nav::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

.nav-links a.active-nav {
    color: var(--yellow);
    background: rgba(255,215,0,.1);
}

/* ── CTA button ── */
.nav-links a.nav-cta {
    background: linear-gradient(135deg, var(--orange), var(--pink));
    color: #fff;
    padding: 9px 22px;
    border-radius: 50px;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .03em;
    box-shadow: 0 4px 20px rgba(255,107,53,.4), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-width: max-content;
}

.nav-links a.nav-cta span {
    position: relative;
    z-index: 2;
}

.nav-links a.nav-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .45s ease;
    pointer-events: none;
}

.nav-links a.nav-cta:hover::before { left: 160%; }

.nav-links a.nav-cta::after { display: none; }

.nav-links a.nav-cta:hover {
    background: linear-gradient(135deg, var(--pink), var(--orange));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,107,53,.6), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── Hamburger ── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}

.hamburger:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.22);
}

.hamburger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.34,1.3,.64,1), opacity .2s, width .3s;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* ==========================================
   HERO
   ========================================== */
.hero {
    position: relative;
    height: var(--hero-h, 100dvh);
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 40%, #1e0050 0%, #0a0a2e 45%, #000814 100%);
    overflow: hidden;
    padding: 0 max(16px, 4vw);
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
}

/* ---- Deep space gradient layers ---- */
.space-layer-1 {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 60% at 15% 20%, rgba(80,0,160,.45) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 85% 80%, rgba(0,60,140,.4) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.space-layer-2 {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 15%, rgba(180,0,80,.25) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 20% 85%, rgba(0,180,100,.18) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ---- Cosmic dot grid ---- */
.cosmic-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
    animation: grid-drift 25s linear infinite;
}

@keyframes grid-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 46px 46px; }
}

/* ---- Nebula layers ---- */
.nebula {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: nebula-drift var(--nd, 14s) ease-in-out infinite alternate;
    will-change: transform;
}

.nebula-1 { --nd:20s; width:900px; height:600px;  background:radial-gradient(ellipse,rgba(155,89,182,.5),transparent 70%);  top:-20%;  left:-20%;   filter:blur(50px); }
.nebula-2 { --nd:26s; width:800px; height:800px;  background:radial-gradient(ellipse,rgba(0,191,255,.35),transparent 70%);   bottom:-25%;right:-18%;  filter:blur(55px); animation-delay:-8s; }
.nebula-3 { --nd:16s; width:600px; height:500px;  background:radial-gradient(ellipse,rgba(255,20,147,.28),transparent 70%);  top:20%;   left:30%;    filter:blur(45px); animation-delay:-4s; }
.nebula-4 { --nd:22s; width:500px; height:400px;  background:radial-gradient(ellipse,rgba(255,165,0,.22),transparent 70%);   top:60%;   right:20%;   filter:blur(40px); animation-delay:-6s; }
.nebula-5 { --nd:28s; width:400px; height:320px;  background:radial-gradient(ellipse,rgba(0,255,136,.18),transparent 70%);   top:5%;    right:35%;   filter:blur(38px); animation-delay:-10s; }

@keyframes nebula-drift {
    0%   { transform: translate(0,0)        scale(1);    opacity:.75; }
    50%  { transform: translate(50px,-40px) scale(1.14); opacity:1;   }
    100% { transform: translate(-25px,25px) scale(.92);  opacity:.8;  }
}

/* ---- Rotating cosmic rings ---- */
.cosmic-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.c-ring { position:absolute; border-radius:50%; top:50%; left:50%; }

.c-ring-1 { width:540px;  height:540px;  margin:-270px 0 0 -270px; animation:ring-spin 20s linear infinite; }
.c-ring-1::before {
    content:''; position:absolute; inset:0; border-radius:50%; padding:1.5px;
    background:conic-gradient(from 0deg,transparent 0%,rgba(0,255,136,.95) 20%,rgba(0,191,255,.95) 40%,transparent 55%,rgba(0,255,136,.3) 80%,transparent 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude; -webkit-mask-composite:xor;
}

.c-ring-2 { width:860px;  height:860px;  margin:-430px 0 0 -430px; animation:ring-spin 18s linear infinite reverse; }
.c-ring-2::before {
    content:''; position:absolute; inset:0; border-radius:50%; padding:1.5px; opacity:.7;
    background:conic-gradient(from 120deg,transparent 0%,rgba(255,20,147,.8) 20%,rgba(255,215,0,.8) 40%,transparent 60%,rgba(255,107,53,.3) 85%,transparent 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude; -webkit-mask-composite:xor;
}

.c-ring-3 { width:1160px; height:1160px; margin:-580px 0 0 -580px; animation:ring-spin 28s linear infinite; }
.c-ring-3::before {
    content:''; position:absolute; inset:0; border-radius:50%; padding:1px; opacity:.55;
    background:conic-gradient(from 240deg,transparent 0%,rgba(155,89,182,.6) 15%,rgba(0,191,255,.4) 30%,transparent 50%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude; -webkit-mask-composite:xor;
}

@keyframes ring-spin { to { transform:rotate(360deg); } }

/* ---- Aurora beams ---- */
.aurora { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }

.aurora-beam {
    position:absolute; bottom:0; border-radius:40% 40% 0 0;
    transform-origin:bottom center; filter:blur(16px);
    animation:aurora-rise var(--ar,5s) ease-in-out infinite alternate;
}

.beam-1 { --ar:6s;   left:8%;  width:80px;  height:60vh; background:linear-gradient(to top,rgba(0,255,136,.75),rgba(0,255,136,.2),transparent); transform:skewX(-8deg);  animation-delay:0s; }
.beam-2 { --ar:8s;   left:42%; width:120px; height:78vh; background:linear-gradient(to top,rgba(0,191,255,.7),rgba(0,191,255,.15),transparent);  transform:skewX(5deg);   animation-delay:-2s; }
.beam-3 { --ar:5.5s; left:70%; width:95px;  height:55vh; background:linear-gradient(to top,rgba(155,89,182,.75),rgba(155,89,182,.2),transparent); transform:skewX(-10deg); animation-delay:-1s; }
.beam-4 { --ar:7s;   left:25%; width:65px;  height:44vh; background:linear-gradient(to top,rgba(255,107,53,.55),rgba(255,107,53,.12),transparent);transform:skewX(12deg);  animation-delay:-3.5s; }
.beam-5 { --ar:9s;   left:58%; width:75px;  height:50vh; background:linear-gradient(to top,rgba(255,20,147,.55),rgba(255,20,147,.12),transparent); transform:skewX(-6deg);  animation-delay:-4.5s; }
.beam-6 { --ar:7.5s; left:18%; width:55px;  height:38vh; background:linear-gradient(to top,rgba(255,215,0,.45),rgba(255,215,0,.1),transparent);   transform:skewX(9deg);   animation-delay:-6s; }
.beam-7 { --ar:11s;  left:82%; width:70px;  height:46vh; background:linear-gradient(to top,rgba(0,255,255,.45),rgba(0,255,255,.1),transparent);    transform:skewX(-4deg);  animation-delay:-2.5s; }

@keyframes aurora-rise {
    0%   { opacity:.25; transform:skewX(var(--sk,-12deg)) scaleY(.55); }
    100% { opacity:.9;  transform:skewX(var(--sk,-12deg)) scaleY(1); }
}

/* ---- Glowing orbs ---- */
.orb { position:absolute; border-radius:50%; pointer-events:none; animation:orb-float var(--of,8s) ease-in-out infinite; will-change:transform; }

.orb-1 { --of:9s;  width:360px;height:360px; background:radial-gradient(circle,rgba(255,107,53,.7) 0%,rgba(255,20,147,.25) 50%,transparent 70%);  top:8%;    right:4%;  filter:blur(42px); }
.orb-2 { --of:13s; width:300px;height:300px; background:radial-gradient(circle,rgba(0,255,136,.6) 0%,rgba(0,191,255,.25) 50%,transparent 70%);     bottom:12%;left:2%;   filter:blur(36px); animation-delay:-3s; }
.orb-3 { --of:7s;  width:240px;height:240px; background:radial-gradient(circle,rgba(255,215,0,.7) 0%,rgba(155,89,182,.25) 50%,transparent 70%);    top:40%;   left:16%;  filter:blur(30px); animation-delay:-5s; }
.orb-4 { --of:10s; width:200px;height:200px; background:radial-gradient(circle,rgba(0,191,255,.55) 0%,rgba(155,89,182,.2) 50%,transparent 70%);    bottom:25%;right:30%; filter:blur(28px); animation-delay:-7s; }

@keyframes orb-float {
    0%,100% { transform:translate(0,0); }
    33%      { transform:translate(30px,-40px); }
    66%      { transform:translate(-22px,25px); }
}

/* ---- Hero center glow ---- */
.hero-center-glow {
    position:absolute; width:900px; height:520px;
    top:50%; left:50%; margin:-260px 0 0 -450px;
    background:radial-gradient(ellipse,rgba(155,89,182,.28) 0%,rgba(0,191,255,.18) 30%,rgba(255,20,147,.1) 55%,transparent 70%);
    pointer-events:none; z-index:2; filter:blur(35px);
    animation:center-pulse 5s ease-in-out infinite;
}

@keyframes center-pulse {
    0%,100% { opacity:.75; transform:scale(1); }
    50%      { opacity:1;   transform:scale(1.18); }
}

/* ---- Meteor canvas ---- */
.meteor-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* ---- Floating planets ---- */
.hero-planets { position:absolute; inset:0; pointer-events:none; z-index:3; }

.planet {
    position:absolute; font-size:3rem;
    animation:planet-float var(--dur,6s) ease-in-out infinite var(--del,0s);
    display:flex; align-items:center; justify-content:center;
    will-change:transform;
}

.p-disc {
    position:absolute; inset:-40%; border-radius:50%;
    filter:blur(14px); opacity:0; pointer-events:none;
    animation:disc-pulse var(--dur,6s) ease-in-out infinite var(--del,0s);
}

@keyframes disc-pulse {
    0%,100% { opacity:.5; transform:scale(.85); }
    50%      { opacity:.9; transform:scale(1.1); }
}

.planet-1 { --dur:7s;  --del:0s;   top:10%; left:3%;    font-size:clamp(3rem,6.5vw,6.5rem); filter:drop-shadow(0 0 30px rgba(255,165,0,1)) drop-shadow(0 0 70px rgba(255,165,0,.5)); }
.planet-1 .p-disc { background:radial-gradient(circle,rgba(255,165,0,.9),rgba(255,100,0,.4),transparent); }

.planet-2 { --dur:9s;  --del:1s;   top:55%; left:1%;    font-size:clamp(2rem,4.5vw,4.5rem); filter:drop-shadow(0 0 25px rgba(0,191,255,1)) drop-shadow(0 0 55px rgba(0,191,255,.5)); }
.planet-2 .p-disc { background:radial-gradient(circle,rgba(0,191,255,.9),rgba(0,100,200,.4),transparent); }

.planet-3 { --dur:5s;  --del:2s;   top:10%; right:4%;   font-size:clamp(2rem,4vw,4rem);   filter:drop-shadow(0 0 22px rgba(255,215,0,1)) drop-shadow(0 0 50px rgba(255,215,0,.5)); }
.planet-3 .p-disc { background:radial-gradient(circle,rgba(255,215,0,.9),rgba(255,180,0,.4),transparent); }

.planet-4 { --dur:8s;  --del:.5s;  top:62%; left:5%;    font-size:clamp(2.5rem,5.5vw,5.5rem); filter:drop-shadow(0 0 28px rgba(200,180,255,1)) drop-shadow(0 0 60px rgba(155,89,182,.6)); }
.planet-4 .p-disc { background:radial-gradient(circle,rgba(200,180,255,.9),rgba(155,89,182,.5),transparent); }

.planet-5 { --dur:6s;  --del:1.5s; top:35%; left:0%;    font-size:clamp(1.5rem,3.5vw,3.5rem); filter:drop-shadow(0 0 20px rgba(255,80,0,1)) drop-shadow(0 0 45px rgba(255,80,0,.5)); }
.planet-5 .p-disc { background:radial-gradient(circle,rgba(255,80,0,.9),rgba(255,30,0,.4),transparent); }

.planet-6 { --dur:10s; --del:3s;   top:4%;  left:38%;   font-size:clamp(1.4rem,3vw,3rem);   filter:drop-shadow(0 0 18px rgba(255,255,100,1)) drop-shadow(0 0 40px rgba(255,215,0,.5)); }
.planet-6 .p-disc { background:radial-gradient(circle,rgba(255,255,100,.9),rgba(255,220,0,.4),transparent); }

.planet-7 { --dur:7.5s;--del:2.5s; bottom:10%;left:28%; font-size:clamp(2rem,4.5vw,4.5rem); filter:drop-shadow(0 0 25px rgba(0,255,136,1)) drop-shadow(0 0 55px rgba(0,255,136,.5)); }
.planet-7 .p-disc { background:radial-gradient(circle,rgba(0,255,136,.9),rgba(0,200,100,.4),transparent); }

@keyframes planet-float {
    0%   { transform:translateY(0)     rotate(0deg)  scale(1); }
    25%  { transform:translateY(-30px) rotate(6deg)  scale(1.07); }
    50%  { transform:translateY(-12px) rotate(-3deg) scale(.97); }
    75%  { transform:translateY(-38px) rotate(8deg)  scale(1.09); }
    100% { transform:translateY(0)     rotate(0deg)  scale(1); }
}

/* ---- Hero content ---- */
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: min(860px, 100%);
    margin-top: clamp(52px, 7vh, 82px);
    background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,.35) 0%, transparent 75%);
    padding: 24px clamp(12px, 4vw, 40px) 0;
    border-radius: 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,215,0,.14); border:1px solid rgba(255,215,0,.5);
    color:var(--yellow); font-weight:700; font-size:.9rem;
    padding:9px 24px; border-radius:50px; margin-bottom:clamp(12px, 2.5vh, 24px);
    animation:badge-glow 2s ease-in-out infinite; position:relative;
    backdrop-filter:blur(8px);
    box-shadow:0 0 30px rgba(255,215,0,.15),inset 0 1px 0 rgba(255,255,255,.1);
}

.badge-pulse {
    width:8px; height:8px; border-radius:50%;
    background:var(--yellow); display:inline-block;
    animation:pulse-dot 1.4s ease-in-out infinite; flex-shrink:0;
}

@keyframes pulse-dot {
    0%,100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,215,0,.6); }
    50%      { transform:scale(1.3); box-shadow:0 0 0 7px rgba(255,215,0,0); }
}

@keyframes badge-glow {
    0%,100% { box-shadow:0 0 12px rgba(255,215,0,.3),0 0 30px rgba(255,215,0,.1); }
    50%      { box-shadow:0 0 30px rgba(255,215,0,.7),0 0 60px rgba(255,215,0,.25); }
}

.hero-title {
    font-family: var(--font-heading);
    line-height: 1.05;
    margin-bottom: clamp(10px, 2vh, 22px);
    word-break: break-word;
    overflow-wrap: break-word;
}

.title-line1 {
    display:block;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size:clamp(1.9rem,7vw,6.5rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #7df9ff 30%, #e040fb 65%, #ffffff 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    background-size:200% auto;
    animation:shine 4s linear infinite, title-enter-1 .9s cubic-bezier(.34,1.56,.64,1) .2s both;
    filter:
        drop-shadow(0 0 6px #fff)
        drop-shadow(0 0 20px #7df9ff)
        drop-shadow(0 0 45px rgba(224,64,251,.8));
}

.title-line2 {
    display:block;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size:clamp(2.6rem,11vw,9.5rem);
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #FFE066 0%, #FFB347 30%, #FF4DA6 65%, #FFE066 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    background-size:200% auto;
    animation:shine 4s linear infinite reverse, title-enter-2 .9s cubic-bezier(.34,1.56,.64,1) .45s both;
    filter:
        drop-shadow(0 0 6px #fff)
        drop-shadow(0 0 22px #FFB347)
        drop-shadow(0 0 55px rgba(255,77,166,.75));
}

.title-rocket {
    display:inline-block; font-size:clamp(2.2rem,5vw,3.8rem);
    animation:rocket-pop .6s ease-out .8s both,rocket-hover 2s ease-in-out infinite 1.4s;
}

@keyframes title-enter-1 {
    from { opacity:0; transform:translateY(-60px) scale(.75); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes title-enter-2 {
    from { opacity:0; transform:translateY(60px) scale(.75); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes shine {
    0%   { background-position:0% center; }
    100% { background-position:200% center; }
}

@keyframes rocket-pop {
    0%   { transform:scale(0) rotate(0deg); }
    100% { transform:scale(1) rotate(360deg); }
}

@keyframes rocket-hover {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50%      { transform:translateY(-12px) rotate(5deg); }
}

.hero-subtitle {
    font-size:clamp(.92rem,1.9vw,1.18rem); font-weight:700;
    color:#fff; margin-bottom:clamp(18px, 3vh, 32px);
    line-height:1.8;
    text-shadow: 0 0 12px rgba(125,249,255,.5), 0 2px 24px rgba(0,0,0,.8);
    letter-spacing: .02em;
}

.hero-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }

/* ============================================
   HERO BUTTONS — Ultra Enterprise
   ============================================ */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(.95rem, 1.6vw, 1.12rem);
    padding: clamp(14px, 1.8vh, 18px) clamp(28px, 3.5vw, 44px);
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform .35s cubic-bezier(.34,1.3,.64,1), box-shadow .35s ease;
    z-index: 0;
    white-space: nowrap;
}

/* Shimmer sweep on both buttons */
.btn-primary::before, .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transition: left .55s ease;
    z-index: 1;
    pointer-events: none;
}
.btn-primary:hover::before, .btn-secondary:hover::before { left: 160%; }

/* Text stays above shimmer */
.btn-primary span, .btn-secondary span { position: relative; z-index: 2; }

/* ── PRIMARY: vivid orange→pink gradient ── */
.btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #FF1493 60%, #a855f7 100%);
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(255,107,53,.5),
        0 8px 28px rgba(255,107,53,.5),
        0 0 60px rgba(255,20,147,.25),
        inset 0 1px 0 rgba(255,255,255,.25);
    animation: btn-pulse 3s ease-in-out infinite 2s;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    background: conic-gradient(from var(--angle,0deg), #FF6B35, #FF1493, #a855f7, #FF6B35);
    z-index: -1;
    animation: border-spin 3s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
}

@keyframes btn-pulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(255,107,53,.5), 0 8px 28px rgba(255,107,53,.5), 0 0 60px rgba(255,20,147,.25), inset 0 1px 0 rgba(255,255,255,.25); }
    50%      { box-shadow: 0 0 0 1px rgba(255,107,53,.5), 0 8px 28px rgba(255,107,53,.6), 0 0 100px rgba(255,20,147,.45), inset 0 1px 0 rgba(255,255,255,.25); }
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        0 0 0 1px rgba(255,107,53,.7),
        0 20px 50px rgba(255,107,53,.7),
        0 0 80px rgba(255,20,147,.45),
        inset 0 1px 0 rgba(255,255,255,.3);
}

/* ── SECONDARY: glassy with gold border glow ── */
.btn-secondary {
    background: rgba(255,255,255,.06);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 8px 28px rgba(0,0,0,.3),
        0 0 0 0 rgba(255,215,0,0);
}

.btn-secondary:hover {
    background: rgba(255,215,0,.12);
    border-color: rgba(255,215,0,.7);
    color: #FFE566;
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 16px 44px rgba(255,215,0,.3),
        0 0 40px rgba(255,215,0,.2);
}


/* ---- Hero side rocket ---- */
.hero-rocket {
    position:absolute; right:5%; bottom:22%; z-index:4;
    animation:rocket-drift 3.5s ease-in-out infinite;
}

.rocket-container {
    font-size:9rem; position:relative; transform:rotate(-35deg);
    filter:drop-shadow(0 0 25px rgba(255,107,53,1)) drop-shadow(0 0 60px rgba(255,107,53,.6)) drop-shadow(0 0 100px rgba(255,107,53,.3));
}

.rocket-trail {
    position:absolute; bottom:-20px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:16px; height:160px;
    background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,220,0,1),rgba(255,107,53,.8),rgba(255,20,147,.3),transparent);
    filter:blur(8px); border-radius:0 0 50% 50%;
    animation:trail-pulse .3s ease-in-out infinite;
}

.rocket-trail::after {
    content:''; position:absolute; top:0; left:50%;
    transform:translateX(-50%); width:6px; height:100%;
    background:linear-gradient(to bottom,#fff,rgba(255,220,0,.8),transparent);
    filter:blur(3px);
}

@keyframes trail-pulse {
    0%,100% { height:160px; opacity:.9; transform:translateX(-50%) rotate(45deg) scaleX(1); }
    50%      { height:210px; opacity:1;  transform:translateX(-50%) rotate(45deg) scaleX(1.4); }
}

@keyframes rocket-drift {
    0%,100% { transform:translate(0,0); }
    25%      { transform:translate(-18px,-32px); }
    50%      { transform:translate(-32px,-58px); }
    75%      { transform:translate(-12px,-35px); }
}

.rocket-fire {
    position:absolute; bottom:-22px; left:50%;
    transform:translateX(-50%) rotate(180deg);
    font-size:2.5rem; animation:fire .3s ease-in-out infinite;
}

@keyframes fire {
    0%,100% { opacity:1;  transform:translateX(-50%) rotate(180deg) scale(1); }
    50%      { opacity:.7; transform:translateX(-50%) rotate(180deg) scale(1.3); }
}


/* ==========================================
   SHARED SECTION STYLES
   ========================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FF6B35, #FF1493);
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: 2px;
    padding: 8px 22px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.section-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
    margin-bottom: 14px;
}

.section-title span {
    background: linear-gradient(135deg, #FFD700, #FF6B35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,.75);
    max-width: 580px;
    margin: 0 auto;
}

/* Scroll reveal */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity .7s ease, transform .7s ease;
}
.reveal        { transform: translateY(40px); }
.reveal-left   { transform: translateX(-50px); }
.reveal-right  { transform: translateX(50px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
    opacity: 1;
    transform: translate(0);
}

/* ==========================================
   SAYAÇ (COUNTER)
   ========================================== */
.sayac {
    background: linear-gradient(135deg, #1a0533, #0d1b4b);
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.sayac::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B35, #FFD700, #00FF88, #00BFFF, #FF1493);
}

.sayac::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF1493, #00BFFF, #00FF88, #FFD700, #FF6B35);
}

.sayac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.sayac-item {
    padding: 36px 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    transition: all .3s ease;
    backdrop-filter: blur(10px);
}

.sayac-item:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,.1);
    border-color: rgba(255,215,0,.3);
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

.sayac-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.sayac-number {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #FFD700;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(255,215,0,.5);
}

.sayac-label {
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   ETKİNLİKLER
   ========================================== */
.etkinlikler {
    background: linear-gradient(180deg, #070720 0%, #0e0030 50%, #070720 100%);
    position: relative;
    overflow: hidden;
}

.etkinlikler::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(124,58,237,.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 50%, rgba(245,158,11,.10) 0%, transparent 60%);
    pointer-events: none;
}

.etkinlik-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* === CARD BASE === */
.etkinlik-card {
    position: relative;
    border-radius: 28px;
    padding: 44px 36px 40px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .4s ease, border-color .4s ease;
    cursor: default;
}

/* Animated top-edge gradient line */
.etkinlik-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #7c3aed 30%, #00BFFF 70%, transparent 100%);
    opacity: 0;
    transition: opacity .4s;
}

/* Inner subtle radial bg per card */
.ek-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity .4s;
}

.etkinlik-card:hover {
    transform: translateY(-12px) scale(1.015);
    border-color: rgba(255,255,255,.22);
    box-shadow:
        0 32px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 60px rgba(124,58,237,.2);
}

.etkinlik-card:hover::before { opacity: 1; }

/* === FEATURED CARD — animated conic border === */
.etkinlik-card.featured {
    background: rgba(245,158,11,.06);
}

.etkinlik-card.featured::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: conic-gradient(
        from var(--angle, 0deg),
        #FFD700, #FF6B35, #FF1493, #a855f7, #00BFFF, #FFD700
    );
    z-index: -1;
    animation: border-spin 4s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes border-spin {
    to { --angle: 360deg; }
}

.etkinlik-card.featured::before {
    background: linear-gradient(90deg, #FFD700, #FF6B35, #FF1493);
    opacity: 1;
    height: 2px;
}

/* === FLOATING PARTICLES === */
.ek-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.ek-p {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    animation: ek-float var(--d, 6s) ease-in-out infinite var(--delay, 0s);
}

.ek-p:nth-child(1) { --d:7s; --delay:0s;   left:15%; top:80%; }
.ek-p:nth-child(2) { --d:9s; --delay:2s;   left:70%; top:90%; width:3px; height:3px; }
.ek-p:nth-child(3) { --d:6s; --delay:4s;   left:45%; top:85%; width:5px; height:5px; }
.ek-p:nth-child(4) { --d:8s; --delay:1.5s; left:85%; top:75%; width:3px; height:3px; }

@keyframes ek-float {
    0%,100% { transform: translateY(0); opacity:1; }
    50%      { transform: translateY(-60px); opacity:.2; }
}

/* === BIG NUMBER BACKDROP === */
.ek-num {
    position: absolute;
    top: 16px; right: 24px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 6rem;
    line-height: 1;
    color: rgba(255,255,255,.04);
    letter-spacing: -.02em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: color .4s;
}

.etkinlik-card:hover .ek-num { color: rgba(255,255,255,.07); }

/* === HEADER ROW === */
.ek-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

/* Icon circle */
.ek-icon-wrap {
    position: relative;
    width: 76px; height: 76px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.ek-icon-emoji { font-size: 2.4rem; position: relative; z-index: 1; }

.ek-icon-ring {
    position: absolute;
    inset: -5px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    animation: ek-ring-pulse 2.5s ease-in-out infinite;
}

@keyframes ek-ring-pulse {
    0%,100% { transform: scale(1);   opacity:.7; }
    50%      { transform: scale(1.1); opacity:0; }
}

.ek-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ek-age-badge {
    display: inline-block;
    background: rgba(0,191,255,.15);
    border: 1px solid rgba(0,191,255,.4);
    color: #00BFFF;
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ek-duration {
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    letter-spacing: .3px;
}

/* === TITLE === */
.ek-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 1.65rem;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #fff;
    position: relative;
    z-index: 1;
    letter-spacing: -.01em;
}

.ek-title span {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etkinlik-card.featured .ek-title span {
    background: linear-gradient(135deg, #FFD700, #FF6B35);
    -webkit-background-clip: text;
    background-clip: text;
}

/* === DESCRIPTION === */
.ek-desc {
    font-size: .91rem;
    color: rgba(255,255,255,.68);
    line-height: 1.75;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

/* === FEATURE LIST === */
.etkinlik-list {
    list-style: none;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.etkinlik-list li {
    font-size: .89rem;
    font-weight: 700;
    color: rgba(255,255,255,.88);
    display: flex;
    align-items: center;
    gap: 10px;
}

.etkinlik-list li::before {
    content: '';
    width: 18px; height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, #00FF88, #00BFFF);
    flex-shrink: 0;
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
    box-shadow: 0 0 8px rgba(0,255,136,.4);
}

/* === CTA BUTTON === */
.etkinlik-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all .35s cubic-bezier(.34,1.3,.64,1);
    box-shadow: 0 8px 28px rgba(124,58,237,.4);
    position: relative;
    z-index: 1;
    letter-spacing: .3px;
}

.etkinlik-btn span { font-size: 1.1rem; transition: transform .3s; }

.etkinlik-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 44px rgba(124,58,237,.55);
}

.etkinlik-btn:hover span { transform: translateX(4px) rotate(-10deg); }

.etkinlik-card.featured .etkinlik-btn {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 8px 28px rgba(245,158,11,.45);
}

.etkinlik-card.featured .etkinlik-btn:hover {
    box-shadow: 0 16px 44px rgba(245,158,11,.6);
}

/* === FEATURED BADGE === */
.featured-badge {
    position: absolute;
    top: 22px; right: 22px;
    background: linear-gradient(135deg, #FFD700, #FF6B35);
    color: #000;
    font-size: .72rem;
    font-weight: 900;
    padding: 5px 16px;
    border-radius: 50px;
    letter-spacing: .8px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(255,215,0,.4);
}

/* ==========================================
   GEZEGENLER — Ultra Enterprise
   ========================================== */

@property --gz-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes gz-border-spin  { to { --gz-angle: 360deg; } }
@keyframes gz-ring-spin    { to { transform: rotate(360deg); } }
@keyframes gz-orbit-slow   { to { transform: rotate(360deg); } }
@keyframes gz-orbit-slow-c { to { transform: translate(-50%,-50%) rotate(360deg); } }

.gezegenler {
    background: linear-gradient(180deg, #0a0a2e 0%, #0d0d3a 50%, #1a0533 100%);
    position: relative;
    overflow: hidden;
}

/* Background orbital ring decorations */
.gz-bg-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.gz-bg-ring--1 {
    width: 700px; height: 700px;
    top: -250px; left: -200px;
    border: 1px solid rgba(155,89,182,.07);
    animation: gz-orbit-slow 60s linear infinite;
}
.gz-bg-ring--2 {
    width: 900px; height: 900px;
    bottom: -350px; right: -280px;
    border: 1px solid rgba(0,191,255,.05);
    animation: gz-orbit-slow 80s linear infinite reverse;
}
.gz-bg-ring--3 {
    width: 500px; height: 500px;
    top: 50%; left: 50%;
    border: 1px solid rgba(255,215,0,.04);
    animation: gz-orbit-slow-c 45s linear infinite;
}

/* Grid */
.gz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Card wrapper */
.gz-card {
    height: 290px;
    perspective: 1000px;
    cursor: pointer;
    outline: none;
    position: relative;
}

.gz-card:focus-visible .gz-inner {
    box-shadow: 0 0 0 3px var(--pc, #FFD700);
}

/* Inner flip container + conic border */
.gz-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.4,0,.2,1);
    border-radius: 22px;
}

.gz-inner::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 23px;
    background: conic-gradient(from var(--gz-angle), transparent 65%, var(--pc, #9B59B6) 80%, transparent 95%);
    animation: gz-border-spin 3.5s linear infinite paused;
    z-index: 0;
    opacity: 0;
    transition: opacity .35s;
}

.gz-card:hover .gz-inner::before,
.gz-card.flipped .gz-inner::before {
    animation-play-state: running;
    opacity: 1;
}

.gz-card.flipped .gz-inner {
    transform: rotateY(180deg);
}

/* Front / Back shared */
.gz-front, .gz-back {
    position: absolute;
    inset: 2px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 18px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

/* Front face */
.gz-front {
    background: linear-gradient(145deg, rgba(12,12,48,.9), rgba(25,10,55,.82));
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    transition: border-color .3s, background .3s;
    gap: 4px;
}

.gz-card:hover .gz-front {
    background: linear-gradient(145deg, rgba(20,10,60,.94), rgba(10,10,40,.9));
    border-color: var(--pc, rgba(155,89,182,.4));
}

/* Glow blob at bottom of front */
.gz-front::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 50%;
    transform: translateX(-50%);
    width: 150px; height: 70px;
    background: var(--ps, rgba(155,89,182,.35));
    border-radius: 50%;
    filter: blur(34px);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.gz-card:hover .gz-front::after { opacity: 1; }

/* Number badge */
.gz-num {
    position: absolute;
    top: 12px; left: 14px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: .64rem;
    letter-spacing: .15em;
    color: var(--pc, rgba(255,255,255,.3));
    opacity: .45;
    line-height: 1;
}

/* Emoji wrap + orbital ring */
.gz-emoji-wrap {
    position: relative;
    width: 82px; height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.gz-emoji {
    font-size: 3rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 10px var(--pc, rgba(255,215,0,.5)));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .4s;
}

.gz-card:hover .gz-emoji {
    transform: scale(1.22) rotate(-6deg);
    filter: drop-shadow(0 0 22px var(--pc, rgba(255,215,0,1))) drop-shadow(0 0 44px var(--ps, rgba(255,215,0,.4)));
}

/* Spinning orbital ring around emoji */
.gz-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.13);
    animation: gz-ring-spin 7s linear infinite;
}

.gz-ring::before {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--pc, #FFD700);
    box-shadow: 0 0 10px 2px var(--pc, #FFD700);
}

.gz-card:hover .gz-ring {
    border-color: rgba(255,255,255,.28);
    animation-duration: 2.5s;
}

/* Planet name */
.gz-name {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: .02em;
    background: linear-gradient(135deg, #fff 30%, var(--pc, #FFD700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}

.gz-hint {
    font-family: 'Nunito', sans-serif;
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .04em;
}

.gz-hint span {
    color: var(--pc, #FFD700);
    display: inline-block;
    transition: transform .2s;
}

.gz-card:hover .gz-hint span { transform: translateX(5px); }

/* Back face */
.gz-back {
    background: linear-gradient(145deg, var(--ps, rgba(155,89,182,.22)), rgba(8,8,42,.92));
    border: 1px solid rgba(255,255,255,.11);
    transform: rotateY(180deg);
    backdrop-filter: blur(18px);
    gap: 7px;
}

.gz-back-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: #fff;
    line-height: 1;
}

.gz-fact {
    font-family: 'Nunito', sans-serif;
    font-size: .79rem;
    color: rgba(255,255,255,.84);
    line-height: 1.55;
}

/* Stat chips */
.gz-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.gz-stat {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;
    padding: 3px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: .71rem;
    font-weight: 700;
    color: rgba(255,255,255,.78);
    white-space: nowrap;
}

/* Fun fact badge */
.gz-fun {
    display: inline-block;
    background: linear-gradient(135deg, var(--pc, #FFD700), var(--orange, #FF6B35));
    color: #000;
    font-family: 'Nunito', sans-serif;
    font-size: .73rem;
    font-weight: 800;
    padding: 4px 13px;
    border-radius: 50px;
    box-shadow: 0 3px 14px var(--ps, rgba(255,215,0,.3));
}

/* ==========================================
   GALERİ — Ultra Enterprise
   ========================================== */

@keyframes gl-orb-drift  { 0%,100%{transform:translate(0,0) scale(1)}  50%{transform:translate(40px,-30px) scale(1.08)} }
@keyframes gl-play-pulse { 0%{transform:scale(1);opacity:.55} 100%{transform:scale(2.1);opacity:0} }
@keyframes gl-shine      { to { left: 110%; } }
@keyframes gl-ov-in      { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }

.galeri {
    background: linear-gradient(180deg, #1a0533 0%, #0d0d3a 50%, #0a0a2e 100%);
    position: relative;
    overflow: hidden;
}

/* Ambient orbs */
.gl-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    z-index: 0;
}
.gl-bg-orb--1 {
    width: 480px; height: 480px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, rgba(155,89,182,.18), transparent 70%);
    animation: gl-orb-drift 18s ease-in-out infinite;
}
.gl-bg-orb--2 {
    width: 560px; height: 560px;
    bottom: -180px; right: -140px;
    background: radial-gradient(circle, rgba(0,191,255,.14), transparent 70%);
    animation: gl-orb-drift 24s ease-in-out infinite reverse;
}

/* ── Tab Switcher ── */
.galeri-tab-content          { display: none; }
.galeri-tab-content.active   { display: block; }

.gl-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.gl-tab-track {
    position: relative;
    display: inline-flex;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50px;
    padding: 5px;
    gap: 0;
    backdrop-filter: blur(12px);
}

.gl-tab-pill {
    position: absolute;
    top: 5px; left: 5px;
    height: calc(100% - 10px);
    background: linear-gradient(135deg, #FF6B35, #FF1493);
    border-radius: 50px;
    transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 22px rgba(255,107,53,.45);
    z-index: 0;
    pointer-events: none;
}

.gl-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 28px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.6);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .93rem;
    border-radius: 50px;
    cursor: pointer;
    transition: color .3s;
    white-space: nowrap;
}

.gl-tab.active { color: #fff; }
.gl-tab-icon   { font-size: 1rem; }

/* ── Photo Grid ── */
.gl-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: 280px;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.gl-item.gl-large { grid-row: auto; }
.gl-item.gl-full  { grid-column: 1 / -1; }

/* Item base */
.gl-item {
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.34,1.2,.64,1);
}

.gl-item:hover {
    border-color: var(--ac, rgba(255,255,255,.3));
    box-shadow: 0 12px 50px var(--as, rgba(255,255,255,.2));
    transform: translateY(-4px) scale(1.012);
}

/* Dark background fill */
.gl-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .5s ease;
}

.gl-item:hover .gl-fill { transform: scale(1.06); }

/* Real photo fill */
.gl-fill--img {
    display: block;
    background: #000;
}

.gl-real-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease, filter .6s ease;
    filter: brightness(.85) saturate(1.2);
}

.gl-item:hover .gl-real-img {
    transform: scale(1.08);
    filter: brightness(1) saturate(1.4);
}

/* Dark vignette so overlay text stays readable */
.gl-img-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%),
        linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Overlay always slightly visible for photo cards */
.gl-overlay--img {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,.75) 55%, transparent);
}

/* Emoji icon */
.gl-icon {
    font-size: clamp(3rem, 6vw, 4.5rem);
    filter: drop-shadow(0 0 20px var(--as, rgba(255,255,255,.4)));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .4s;
    display: block;
    user-select: none;
}

.gl-item:hover .gl-icon {
    transform: scale(1.18) rotate(-5deg);
    filter: drop-shadow(0 0 36px var(--ac, #fff)) drop-shadow(0 0 70px var(--as, rgba(255,255,255,.3)));
}

/* Hover overlay slides up */
.gl-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88) 60%, transparent);
    padding: 20px 16px 16px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .32s;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gl-item:hover .gl-overlay {
    transform: translateY(0);
    opacity: 1;
}

.gl-ov-cat {
    font-family: 'Nunito', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ac, #FFD700);
}

.gl-ov-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}

.gl-ov-desc {
    font-family: 'Nunito', sans-serif;
    font-size: .75rem;
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.35;
}

/* Galeri rozeti (çoklu fotoğraf kartı üzerinde) */
.gl-gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
    transition: background .3s;
}
.gl-item:hover .gl-gallery-badge {
    background: rgba(255,107,53,.75);
}

/* Accent corner triangle */
.gl-corner {
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-top: 36px solid var(--ac, rgba(255,255,255,.3));
    border-left: 36px solid transparent;
    opacity: .45;
    transition: opacity .3s;
}

.gl-item:hover .gl-corner { opacity: .8; }

/* Shimmer on hover */
.gl-item::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.12), transparent);
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .1s;
}

.gl-item:hover::before {
    opacity: 1;
    animation: gl-shine .6s ease forwards;
}

/* ── Video Grid ── */
.gl-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.gl-video-card {
    border-radius: 20px;
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.34,1.2,.64,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gl-video-card:hover {
    border-color: var(--vc, rgba(255,255,255,.3));
    box-shadow: 0 14px 55px var(--vs, rgba(0,0,0,.4));
    transform: translateY(-5px);
}

.gl-video-bg {
    position: absolute;
    inset: 0;
    transition: transform .5s ease;
}

.gl-video-card:hover .gl-video-bg { transform: scale(1.05); }

/* Play button + rings */
.gl-play-wrap {
    position: relative;
    width: 70px; height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-bottom: 16px;
}

.gl-play-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--vc, #fff);
    opacity: 0;
    animation: gl-play-pulse 2s ease-out infinite;
}

.gl-play-ring--2 { animation-delay: 1s; }

.gl-video-card:hover .gl-play-ring { opacity: 1; }

.gl-play-btn {
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.92);
    color: #000;
    font-size: 1.3rem;
    padding-left: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.gl-video-card:hover .gl-play-btn {
    background: #fff;
    transform: scale(1.14);
    box-shadow: 0 8px 36px var(--vs, rgba(0,0,0,.5));
}

/* Video info bar */
.gl-video-info {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gl-video-badge {
    display: inline-block;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    font-family: 'Nunito', sans-serif;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--vc, #FFD700);
    padding: 3px 10px;
    border-radius: 50px;
}

.gl-video-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: .98rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.gl-video-sub {
    font-family: 'Nunito', sans-serif;
    font-size: .72rem;
    color: rgba(255,255,255,.65);
    margin: 0;
}

/* ==========================================
   HAKKINDA
   ========================================== */
.hakkinda {
    background: linear-gradient(135deg, #0a0a2e 0%, #1a0533 50%, #0a0a2e 100%);
}

.hakkinda-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.hakkinda-content .section-badge { margin-bottom: 16px; }

.hakkinda-content p {
    font-size: .98rem;
    color: rgba(255,255,255,.8);
    line-height: 1.8;
    margin-bottom: 16px;
}

.hakkinda-content strong { color: #FFD700; }

.hakkinda-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 16px 20px;
    transition: all .3s ease;
}

.feature-item:hover {
    background: rgba(155,89,182,.12);
    border-color: rgba(155,89,182,.3);
    transform: translateX(6px);
}

.feature-icon { font-size: 2rem; flex-shrink: 0; }
.feature-item h4 { font-family: 'Nunito', sans-serif; font-size: 1rem; margin-bottom: 4px; color: #FFD700; }
.feature-item p  { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ---- CSS Solar System ---- */
.hakkinda-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.solar-system {
    position: relative;
    width: 320px; height: 320px;
}

.sun {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 3.5rem;
    filter: drop-shadow(0 0 20px rgba(255,215,0,.9)) drop-shadow(0 0 50px rgba(255,165,0,.5));
    animation: sun-pulse 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes sun-pulse {
    0%,100% { filter: drop-shadow(0 0 20px rgba(255,215,0,.9)) drop-shadow(0 0 50px rgba(255,165,0,.5)); transform: translate(-50%,-50%) scale(1); }
    50%      { filter: drop-shadow(0 0 35px rgba(255,215,0,1))  drop-shadow(0 0 80px rgba(255,165,0,.7)); transform: translate(-50%,-50%) scale(1.08); }
}

.orbit {
    position: absolute;
    top: 50%; left: 50%;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.orbit-1 { width: 130px; height: 130px; animation: orbit-spin 5s linear infinite; }
.orbit-2 { width: 210px; height: 210px; animation: orbit-spin 10s linear infinite; }
.orbit-3 { width: 290px; height: 290px; animation: orbit-spin 16s linear infinite reverse; }

@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.orbit-planet {
    position: absolute;
    top: -1rem; left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
}

/* ==========================================
   İLETİŞİM
   ========================================== */
.iletisim {
    background: linear-gradient(180deg, #0a0a2e 0%, #12003a 100%);
}

.iletisim-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: start;
}

.info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all .3s ease;
}

.info-card:hover {
    background: rgba(155,89,182,.1);
    border-color: rgba(155,89,182,.3);
    transform: translateX(6px);
}

.info-icon { font-size: 1.5rem; flex-shrink: 0; }
.info-card h4 { font-family: 'Nunito', sans-serif; font-size: 1rem; margin-bottom: 4px; color: #FFD700; }
.info-card p  { font-size: .9rem; color: rgba(255,255,255,.78); }
.info-card a  { color: #00BFFF; text-decoration: none; transition: color .2s; }
.info-card a:hover { color: #FFD700; }

.sosyal-medya { margin-top: 24px; }
.sosyal-medya h4 { font-family: 'Nunito', sans-serif; font-size: 1.1rem; margin-bottom: 14px; color: #FFD700; }
.sosyal-icons { display: flex; gap: 10px; flex-wrap: wrap; }

.sosyal-btn {
    padding: 9px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .85rem;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: #fff;
    text-decoration: none;
    transition: all .3s ease;
}

.sosyal-btn:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.sosyal-btn.instagram { border-color: rgba(225,48,108,.4); }
.sosyal-btn.instagram:hover { background: rgba(225,48,108,.2); border-color: rgba(225,48,108,.7); }
.sosyal-btn.facebook { border-color: rgba(66,103,178,.4); }
.sosyal-btn.facebook:hover { background: rgba(66,103,178,.2); border-color: rgba(66,103,178,.7); }
.sosyal-btn.youtube { border-color: rgba(255,0,0,.4); }
.sosyal-btn.youtube:hover { background: rgba(255,0,0,.15); border-color: rgba(255,0,0,.6); }

/* Form */
.iletisim-form {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 36px;
    backdrop-filter: blur(12px);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 7px;
    color: rgba(255,255,255,.85);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: .93rem;
    transition: all .3s ease;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.4); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(155,89,182,.6);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 3px rgba(155,89,182,.2);
}

.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; cursor: pointer; }
.select-wrapper select option { background: #1a0533; color: #fff; }
.select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,.5); font-size: .75rem; }

.form-group textarea { resize: vertical; min-height: 110px; }

.form-submit {
    width: 100%;
    background: linear-gradient(135deg, #FF6B35, #FF1493);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 16px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 8px 28px rgba(255,107,53,.4);
}

.form-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 40px rgba(255,107,53,.6);
}

.form-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.form-wa-hint {
    margin-top: 12px;
    font-size: .82rem;
    color: rgba(255,255,255,.45);
    line-height: 1.55;
    text-align: center;
}
.form-wa-hint strong { color: rgba(255,255,255,.65); }

.form-error,
.form-error-msg {
    background: rgba(255,20,60,.15);
    border: 1px solid rgba(255,20,60,.4);
    color: #ff6b8a;
    font-size: .88rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 12px;
    text-align: center;
}

.form-success {
    text-align: center;
    padding: 40px 20px;
}

/* ==========================================
   VİDEO PLAYER MODAL
   ========================================== */

@keyframes vp-in      { from { opacity:0; transform:scale(.9) translateY(28px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes vp-fade    { from { opacity:0; } to { opacity:1; } }
@keyframes vp-scan    { 0%   { transform:translateY(-100%); } 100% { transform:translateY(100vh); } }
@keyframes vp-pulse   { 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.18); opacity:1; } }
@keyframes vp-icon-in { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }

/* Backdrop */
.vp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(2,2,16,.88);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: vp-fade .26s ease;
}

.vp-backdrop[hidden] { display: none; }

/* Close */
.vp-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, transform .28s cubic-bezier(.34,1.3,.64,1);
    z-index: 2;
}

.vp-close:hover {
    background: rgba(255,60,60,.3);
    transform: rotate(90deg) scale(1.12);
}

/* Modal card */
.vp-modal {
    position: relative;
    width: 100%;
    max-width: 820px;
    background: linear-gradient(155deg, rgba(10,6,40,.97), rgba(6,4,28,.97));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
        0 40px 110px rgba(0,0,0,.75),
        0 0 0 1px rgba(255,255,255,.055),
        inset 0 1px 0 rgba(255,255,255,.08);
    animation: vp-in .34s cubic-bezier(.34,1.15,.64,1);
}

/* Top accent line */
.vp-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vp-color, #FF6B35) 40%, var(--vp-color, #FF6B35) 60%, transparent);
    z-index: 2;
}

/* 16:9 screen area */
.vp-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.vp-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Placeholder (no video src) */
.vp-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(155deg, rgba(8,4,32,.98), rgba(6,3,22,.98));
}

/* CRT scanlines overlay */
.vp-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 3px,
        rgba(0,0,0,.18) 3px,
        rgba(0,0,0,.18) 4px
    );
    opacity: .55;
    z-index: 1;
}

/* Scanning line animation */
.vp-scanlines::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(var(--vp-rgb,255,107,53),.06), transparent);
    animation: vp-scan 4s linear infinite;
}

.vp-pl-icon {
    font-size: 4.5rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 24px var(--vp-color, #FF6B35));
    animation: vp-icon-in .5s .08s cubic-bezier(.34,1.4,.64,1) both;
}

/* Pulsing glow behind icon */
.vp-pl-pulse {
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vp-color, rgba(255,107,53,.25)), transparent 70%);
    animation: vp-pulse 2.6s ease-in-out infinite;
    z-index: 1;
}

.vp-pl-label {
    position: relative;
    z-index: 2;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-top: 4px;
}

/* Info bar */
.vp-info {
    padding: 18px 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vp-badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;
    padding: 3px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--vp-color, #FF6B35);
}

.vp-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.vp-sub {
    font-family: 'Nunito', sans-serif;
    font-size: .83rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* ==========================================
   LİGHTBOX MODAL
   ========================================== */

@keyframes lb-in   { from { opacity:0; transform:scale(.93) translateY(24px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }

/* Backdrop */
.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2,2,14,.92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 80px;
    animation: lb-fade .28s ease;
}

.lb-backdrop[hidden] { display: none; }

/* ==========================================
   OKUL GALERİ MODALİ
   ========================================== */
#sgBackdrop {
    position: fixed;
    inset: 0;
    z-index: 8900;
    background: rgba(2,2,14,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 40px;
    overflow-y: auto;
    animation: lb-fade .25s ease;
}
#sgBackdrop[hidden] { display: none; }

#sgModal {
    width: 100%;
    max-width: 940px;
    background: linear-gradient(160deg, #0c0020 0%, #170038 60%, #0a0015 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(78,205,196,.08);
}

#sgHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
}

#sgTitle {
    flex: 1;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 1.45rem;
    margin: 0;
    letter-spacing: .02em;
}

#sgClose {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
#sgClose:hover { background: rgba(255,80,80,.25); color: #fff; }

#sgBack {
    background: rgba(78,205,196,.12);
    border: 1px solid rgba(78,205,196,.3);
    color: #4ECDC4;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .2s;
    flex-shrink: 0;
}
#sgBack:hover { background: rgba(78,205,196,.25); }
#sgBack[hidden] { display: none; }

#sgContent { padding: 22px; }

/* Okul klasör kartları */
.sg-folders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}

.sg-folder {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    position: relative;
}
.sg-folder::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fc, #4ECDC4);
    border-radius: 14px 14px 0 0;
}
.sg-folder:hover {
    transform: translateY(-5px);
    border-color: var(--fc, #4ECDC4);
    box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 20px color-mix(in srgb, var(--fc, #4ECDC4) 25%, transparent);
}

/* Mozaik kapak */
.sg-folder-mosaic {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    gap: 2px;
    background: rgba(0,0,0,.5);
}

/* 1 fotoğraf: tam kare */
.sg-folder-mosaic.m1 { grid-template-columns: 1fr; }

/* 2-3 fotoğraf: yan yana */
.sg-folder-mosaic.m2,
.sg-folder-mosaic.m3 { grid-template-columns: 1fr 1fr; }
.sg-folder-mosaic.m3 .sg-mc:first-child { grid-row: span 2; }

/* 4+ fotoğraf: 2x2 */
.sg-folder-mosaic.m4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.sg-mc {
    overflow: hidden;
    position: relative;
}
.sg-mc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.sg-folder:hover .sg-mc img { transform: scale(1.07); }
.sg-mc.empty { background: rgba(255,255,255,.04); }

.sg-folder-info {
    padding: 10px 12px 12px;
}

.sg-folder-icon {
    font-size: 1.1rem;
    margin-bottom: 4px;
    display: block;
}

.sg-folder-name {
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 1.35;
}

.sg-folder-count {
    color: rgba(255,255,255,.45);
    font-size: .76rem;
    margin: 0;
}

/* Okul fotoğraf grid */
.sg-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.sg-photo-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: rgba(255,255,255,.04);
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s;
}
.sg-photo-wrap:hover {
    border-color: #4ECDC4;
    transform: scale(1.03);
}

.sg-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sg-photo-num {
    position: absolute;
    bottom: 5px;
    right: 7px;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.7);
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 8px;
}

/* Boş durum */
.sg-empty {
    color: rgba(255,255,255,.4);
    text-align: center;
    padding: 50px 20px;
    font-size: 1rem;
}

@media (max-width: 600px) {
    #sgBackdrop { padding: 0; align-items: stretch; }
    #sgModal    { border-radius: 0; min-height: 100svh; }
    .sg-folders { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sg-photos  { grid-template-columns: repeat(2, 1fr); }
    #sgContent  { padding: 14px; }
}


/* Close button */
.lb-close {
    position: fixed;
    top: max(22px, calc(env(safe-area-inset-top, 0px) + 14px)); right: 26px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, transform .25s;
    z-index: 2;
}

.lb-close:hover {
    background: rgba(255,70,70,.35);
    transform: rotate(90deg) scale(1.1);
}

/* Arrows — kartın dışında, ortalanmış */
.lb-arrow {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,.85);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, transform .25s;
    z-index: 9001;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.lb-arrow:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (hover: hover) {
    .lb-prev:hover { transform: translateY(-50%) translateX(-4px); }
    .lb-next:hover { transform: translateY(-50%) translateX(4px); }
}

/* Card — sinematik, geniş */
.lb-card {
    position: relative;
    border-radius: 16px;
    max-width: min(1040px, 94vw);
    width: 100%;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
    animation: lb-in .36s cubic-bezier(.34,1.15,.64,1);
    background: #060616;
}

/* Glow — üstten renkli ışıma */
.lb-glow {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0;
    filter: none;
    opacity: 1;
    pointer-events: none;
    z-index: 4;
    transition: background .5s;
}

/* Fotoğraf alanı — baskın */
.lb-img-wrap {
    aspect-ratio: 16 / 9;
    max-height: clamp(320px, 70vh, 660px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    display: block;
}

.lb-emoji {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    display: block;
    filter: drop-shadow(0 0 40px var(--lb-color, rgba(255,215,0,.7)));
    animation: lb-in .4s .06s cubic-bezier(.34,1.4,.64,1) both;
    user-select: none;
}

.lb-real-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s ease;
}
.lb-card:hover .lb-real-img { transform: scale(1.03); }

/* Metin: fotoğraf üzerine overlay olarak */
.lb-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px 28px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.88) 60%, transparent);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}

.lb-cat {
    font-family: 'Nunito', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lb-color, #FFD700);
    opacity: .9;
}

.lb-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

.lb-desc {
    font-family: 'Nunito', sans-serif;
    font-size: .78rem;
    color: rgba(255,255,255,.62);
    margin: 0;
    line-height: 1.5;
}

/* Navigation dots — kartın altında */
.lb-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
}

.lb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s, transform .3s, width .3s;
    pointer-events: auto;
}

.lb-dot.active {
    background: var(--lb-color, #FFD700);
    transform: scale(1.4);
    width: 18px;
    border-radius: 4px;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
    background: linear-gradient(135deg, #0d001a, #050518);
    padding: 60px 0 0;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B35, #FFD700, #00FF88, #00BFFF, #FF1493);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-logo { margin-bottom: 14px; }

.footer-logo-img {
    height: 130px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(1.1);
    transition: all .3s ease;
}

.footer-logo-img:hover { filter: brightness(1.3); transform: scale(1.05); }

.footer-brand p {
    font-size: .9rem;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    max-width: 300px;
}

.footer-links h4, .footer-contact h4 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    color: #FFD700;
    margin-bottom: 18px;
}

.footer-links ul { display: flex; flex-direction: column; gap: 10px; }

.footer-links a {
    font-size: .9rem;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    transition: color .2s, padding-left .2s;
}

.footer-links a:hover { color: #FFD700; padding-left: 6px; }

.footer-contact p {
    font-size: .9rem;
    color: rgba(255,255,255,.68);
    margin-bottom: 8px;
    line-height: 1.6;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: .85rem;
    color: rgba(255,255,255,.5);
}

/* ==========================================
   STARS BACKGROUND
   ========================================== */
.stars-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle var(--dur, 3s) ease-in-out infinite var(--del, 0s);
}

@keyframes twinkle {
    0%, 100% { opacity: var(--op, .4); transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.4); }
}

/* ==========================================
   TOUCH & TAP IMPROVEMENTS
   ========================================== */
a, button, [role="button"], [tabindex="0"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Safe area support (notch / home indicator) */
.navbar {
    padding-top: env(safe-area-inset-top, 0px);
}

.footer-bottom {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0px)));
}

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

/* ── Tablet geniş (≤1200px) ── */
@media (max-width: 1200px) {
    .container { padding: 0 32px; }
    .gz-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    section { padding: 80px 0; }
    .container { padding: 0 28px; }
    .section-header { margin-bottom: 44px; }

    .sayac-grid    { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .etkinlik-grid { grid-template-columns: 1fr; max-width: 100%; gap: 28px; }
    .gz-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gl-grid { grid-template-columns: 1fr 1.4fr; grid-template-rows: 220px; }
    .gl-item  { min-height: 190px; }
    .gl-item.gl-full  { grid-column: auto; }
    .gl-video-grid { grid-template-columns: repeat(2, 1fr); }

    .iletisim-grid { grid-template-columns: 1fr; gap: 40px; }
    .hakkinda-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid   { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand  { grid-column: 1 / -1; text-align: center; }

    .c-ring-3 { display: none; }
    .hero-rocket { right: 2%; bottom: 18%; }
}

/* ── Tablet dar / Mobil büyük (≤768px) ── */
@media (max-width: 768px) {
    section { padding: 60px 0; }
    .container { padding: 0 20px; }
    .section-header { margin-bottom: 32px; }
    .section-title    { font-size: clamp(1.7rem, 6vw, 2.4rem); }
    .section-subtitle { font-size: .93rem; }

    /* --- Navbar mobile drawer --- */
    .nav-links {
        position: fixed;
        top: 0; right: -100%;
        width: min(78vw, 290px);
        height: 100svh;
        background: rgba(8, 8, 40, 0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 6px;
        padding: 80px 32px 40px;
        padding-top: max(80px, calc(60px + env(safe-area-inset-top, 0px)));
        transition: right .38s cubic-bezier(.4,0,.2,1);
        z-index: 999;
        border-left: 1px solid rgba(255,255,255,.08);
        box-shadow: -12px 0 60px rgba(0,0,0,.6);
    }
    .nav-links.open { right: 0; }

    .nav-links li { width: 100%; }
    .nav-links a {
        font-size: 1.1rem;
        font-weight: 700;
        padding: 14px 16px;
        border-radius: 12px;
        width: 100%;
        display: block;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .nav-links a.nav-cta {
        margin-top: 16px;
        text-align: center;
        justify-content: center;
    }

    /* Hamburger */
    .hamburger { display: flex; z-index: 1001; }

    /* Overlay behind drawer */
    .nav-links::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition: opacity .38s;
    }
    .nav-links.open::before { opacity: 1; pointer-events: auto; }

    .logo-img { height: 48px; }

    /* --- Hero --- */
    .hero-content { margin-top: 72px; padding: 16px 4px 0; overflow: hidden; }
    .hero-rocket  { display: none; }
    .hero-buttons { flex-direction: column; align-items: center; gap: 12px; }
    .btn-primary, .btn-secondary { width: 100%; max-width: 320px; text-align: center; justify-content: center; min-height: 52px; }
    .hero-badge { font-size: .8rem; padding: 8px 18px; }
    .title-line1 { font-size: clamp(1.6rem, 9vw, 3rem);  letter-spacing: 0; }
    .title-line2 { font-size: clamp(2.2rem, 13vw, 5rem); letter-spacing: 0; }
    .hero-subtitle { font-size: .9rem; }

    /* Hide heavy background elements on mobile */
    .c-ring-2, .c-ring-3 { display: none; }
    .cosmic-rings .c-ring-1 { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
    .orb-3, .orb-4 { display: none; }
    .nebula-4, .nebula-5 { display: none; }

    /* --- Sayac --- */
    .sayac-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .sayac-number { font-size: 2.4rem; }
    .sayac-item { padding: 28px 16px; }

    /* --- Etkinlik --- */
    .etkinlik-grid  { grid-template-columns: 1fr; max-width: 100%; gap: 24px; }
    .etkinlik-card  { padding: 28px 22px 24px; }
    .ek-num         { font-size: 4.5rem; }
    .ek-title       { font-size: 1.4rem; }
    .ek-icon-wrap   { width: 64px; height: 64px; border-radius: 18px; }
    .ek-icon-emoji  { font-size: 2rem; }

    /* --- Gezegen --- */
    .gz-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .gz-card { height: 210px; }

    /* --- Galeri --- */
    .gl-grid       { grid-template-columns: 1fr 1.4fr; grid-template-rows: 220px; }
    .gl-item       { min-height: unset; }
    .gl-item.gl-full { grid-column: auto; }
    .gl-video-grid { grid-template-columns: 1fr; }
    .gl-tab        { padding: 10px 22px; font-size: .88rem; }

    /* --- Lightbox: WhatsApp Status tam ekran --- */
    .lb-backdrop   { padding: 0; align-items: stretch; justify-content: stretch; }
    .lb-card       { max-width: 100%; width: 100%; height: 100vh; height: 100svh; border-radius: 0; animation: none; }
    .lb-img-wrap   { aspect-ratio: unset; max-height: none; height: 100%; }
    .lb-dots       {
        position: absolute;
        top: max(12px, env(safe-area-inset-top, 12px));
        left: 12px; right: 64px;
        background: transparent;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        padding: 0; gap: 4px;
        z-index: 10;
        pointer-events: none;
    }
    .lb-dot        { flex: 1; width: auto; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); pointer-events: auto; }
    .lb-dot.active { width: auto; transform: none; border-radius: 2px; }
    .lb-body       {
        padding-top: 80px;
        padding-bottom: max(28px, env(safe-area-inset-bottom, 28px));
        padding-left: 20px; padding-right: 20px;
        background: linear-gradient(to top, rgba(0,0,0,.92) 55%, transparent);
    }
    .lb-arrow      { width: 44px; height: 60px; border-radius: 8px; font-size: 1.6rem; top: auto; bottom: 30%; transform: none; }
    .lb-prev       { left: 0; border-radius: 0 8px 8px 0; }
    .lb-next       { right: 0; border-radius: 8px 0 0 8px; }
    .lb-prev:hover, .lb-next:hover { transform: none; }

    /* --- Hakkında --- */
    .hakkinda-grid { grid-template-columns: 1fr; }
    .hakkinda-content p { font-size: .93rem; }
    .solar-system  { width: 260px; height: 260px; margin: 0 auto; }
    .feature-item  { padding: 14px 16px; }
    .feature-icon  { font-size: 1.8rem; }

    /* --- İletişim --- */
    .iletisim-grid { grid-template-columns: 1fr; gap: 28px; }
    .iletisim-form { padding: 28px 20px; }
    .iletisim-info { gap: 14px; }
    .info-card     { padding: 16px; gap: 14px; }
    .sosyal-medya  { margin-top: 20px; }
    .sosyal-icons  { gap: 8px; flex-wrap: wrap; }
    .sosyal-btn    { min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; }

    /* --- Footer --- */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .footer-brand { grid-column: auto; text-align: center; }
    .footer-brand p { max-width: 100%; }
    .footer-links { align-items: center; }
    .footer-links ul { align-items: center; }
    .footer-social { justify-content: center; }
    .footer-logo-img { margin: 0 auto; height: 90px; }
    .footer-contact { text-align: center; }
}

/* ── Mobil (≤480px) ── */
@media (max-width: 480px) {
    section { padding: 48px 0; }
    .container { padding: 0 16px; }
    .section-header { margin-bottom: 28px; }

    /* Navbar */
    .logo-img { height: 42px; }
    .nav-links { width: 100%; border-left: none; padding: 80px 24px 40px; }

    /* Hero */
    .hero-badge { font-size: .75rem; }
    .title-line1 { font-size: clamp(1.4rem, 10vw, 2.2rem); letter-spacing: 0; }
    .title-line2 { font-size: clamp(2rem,   14vw, 3.2rem); letter-spacing: 0; }
    .hero-subtitle { font-size: .85rem; }
    .btn-primary, .btn-secondary { font-size: .9rem; padding: 14px 24px; }
    .cosmic-rings { display: none; }
    .aurora { display: none; }

    /* Sayac */
    .sayac-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sayac-item { padding: 20px 12px; }
    .sayac-number { font-size: 2rem; }
    .sayac-label  { font-size: .75rem; }

    /* Etkinlik */
    .etkinlik-card { padding: 24px 16px 20px; border-radius: 20px; }
    .ek-title { font-size: 1.25rem; }
    .ek-header { gap: 14px; margin-bottom: 20px; }
    .ek-icon-wrap { width: 56px; height: 56px; border-radius: 16px; }
    .etkinlik-list { gap: 8px; margin-bottom: 24px; }
    .etkinlik-btn { font-size: .85rem; padding: 13px 22px; min-height: 48px; width: 100%; justify-content: center; }

    /* Gezegen */
    .gz-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gz-card { height: 185px; }
    .gz-front, .gz-back { padding: 14px 12px; }
    .gz-emoji-wrap      { width: 60px; height: 60px; margin-bottom: 4px; }
    .gz-emoji           { font-size: 2.1rem; }
    .gz-name            { font-size: 1.05rem; }
    .gz-hint            { font-size: .68rem; }
    .gz-back            { gap: 5px; }
    .gz-back-title      { font-size: .9rem; }
    .gz-fact            { font-size: .72rem; line-height: 1.4; }
    .gz-stats           { gap: 4px; }
    .gz-stat            { font-size: .63rem; padding: 2px 7px; }
    .gz-fun             { font-size: .65rem; padding: 3px 10px; }

    /* Galeri */
    .gl-grid { grid-template-columns: 1fr; grid-template-rows: 200px 200px; }
    .gl-item { min-height: unset; }
    .gl-item.gl-large { grid-row: auto; }
    .gl-video-grid { grid-template-columns: 1fr; }
    .gl-tab { padding: 9px 16px; font-size: .82rem; }
    .gl-tabs { margin-bottom: 24px; }

    /* Lightbox — 768px tam ekran mirası devam eder, sadece font boyutları */
    .lb-title    { font-size: 1rem; }
    .lb-desc     { font-size: .74rem; }

    /* Hakkında */
    .solar-system  { width: 220px; height: 220px; }
    .feature-item  { padding: 12px 14px; gap: 10px; }
    .feature-icon  { font-size: 1.5rem; }
    .feature-item h4 { font-size: .92rem; }
    .feature-item p  { font-size: .8rem; }

    /* İletişim */
    .iletisim-form { padding: 20px 14px; border-radius: 18px; }
    .info-card { padding: 14px; gap: 12px; border-radius: 12px; }
    .info-icon { font-size: 1.3rem; }
    .info-card h4 { font-size: .9rem; }
    .info-card p  { font-size: .82rem; }
    .sosyal-btn { font-size: .82rem; padding: 10px 14px; }
    /* iOS ZOOM FIX — input font-size must be ≥16px */
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px; padding: 13px 15px; }
    .form-group label { font-size: .9rem; }
    .form-submit { font-size: .95rem; padding: 15px; min-height: 52px; }

    /* Footer */
    .footer-logo-img { height: 70px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .footer-grid { gap: 22px; }
}

/* ── Küçük mobil (≤380px) ── */
@media (max-width: 380px) {
    .container { padding: 0 12px; }
    .sayac-grid   { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gz-grid      { grid-template-columns: 1fr 1fr; gap: 10px; }
    .gz-card      { height: 168px; }
    .gz-front, .gz-back { padding: 10px 8px; }
    .gz-emoji-wrap      { width: 50px; height: 50px; margin-bottom: 2px; }
    .gz-emoji           { font-size: 1.8rem; }
    .gz-name            { font-size: .92rem; }
    .gz-hint            { font-size: .6rem; }
    .gz-back            { gap: 3px; }
    .gz-back-title      { font-size: .82rem; }
    .gz-fact            { font-size: .63rem; line-height: 1.3; }
    .gz-stats           { gap: 3px; }
    .gz-stat            { font-size: .58rem; padding: 2px 5px; }
    .gz-fun             { font-size: .58rem; padding: 2px 7px; }
    .hero-badge   { display: none; }
    .etkinlik-card { padding: 20px 14px; }
    .sosyal-icons { flex-direction: column; }
    .sosyal-btn   { width: 100%; justify-content: center; min-height: 44px; }
    .gl-tab       { padding: 8px 13px; font-size: .78rem; }
    .section-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .footer-logo-img { height: 58px; }
}

/* ==========================================
   ERİŞİLEBİLİRLİK — Azaltılmış Hareket
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    /* Scroll reveal — direkt göster */
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}