/* ============================================================
   IAL GAME DEV — UNIFIED STYLE (Light + Dark Theme)
   ============================================================ */

/* ── LIGHT TEMA (default) ─────────────────────────────────── */
:root,
[data-theme="light"] {
    --accent:       #F5C800;
    --accent-dark:  #c9a200;
    --accent-dim:   rgba(245,200,0,0.18);
    --accent-glow:  rgba(245,200,0,0.4);
    --purple:       #6B21A8;
    --purple-light: #9333ea;
    --purple-dim:   rgba(107,33,168,0.12);
    --bg:           #f5f3ff;
    --bg2:          #ede9fe;
    --bg3:          #ffffff;
    --card:         #ffffff;
    --card2:        #faf8ff;
    --border:       rgba(107,33,168,0.15);
    --text:         #3b2f5e;
    --text-bright:  #1a0f3d;
    --text-dim:     #7c6fa0;
    --text-light:   #a89cc8;
    --header-bg:    rgba(255,255,255,0.92);
    --header-border:rgba(107,33,168,0.12);
    --hero-bg:      linear-gradient(135deg,#fff 0%,#f0ebff 50%,#fef9e0 100%);
    --page-hero-bg: linear-gradient(135deg,#fff 0%,#ede9fe 60%,#fef9e0 100%);
    --input-bg:     #ffffff;
    --shadow:       0 4px 24px rgba(107,33,168,0.10);
    --shadow-lg:    0 12px 48px rgba(107,33,168,0.15);
}

/* ── DARK TEMA ────────────────────────────────────────────── */
[data-theme="dark"] {
    --accent:       #F5C800;
    --accent-dark:  #c9a200;
    --accent-dim:   rgba(245,200,0,0.12);
    --accent-glow:  rgba(245,200,0,0.3);
    --purple:       #a855f7;
    --purple-light: #c084fc;
    --purple-dim:   rgba(168,85,247,0.15);
    --bg:           #0d0a1a;
    --bg2:          #130e24;
    --bg3:          #1a1230;
    --card:         #1a1230;
    --card2:        #14102a;
    --border:       rgba(168,85,247,0.18);
    --text:         #c4b5d8;
    --text-bright:  #f0eaff;
    --text-dim:     #8b7aab;
    --text-light:   #6b5a8a;
    --header-bg:    rgba(13,10,26,0.95);
    --header-border:rgba(168,85,247,0.2);
    --hero-bg:      linear-gradient(135deg,#0d0a1a 0%,#130e24 50%,#0f0c1e 100%);
    --page-hero-bg: linear-gradient(135deg,#0d0a1a 0%,#130e24 60%,#0f0c1e 100%);
    --input-bg:     #1a1230;
    --shadow:       0 4px 24px rgba(0,0,0,0.4);
    --shadow-lg:    0 12px 48px rgba(0,0,0,0.5);
}

/* ── BASE ─────────────────────────────────────────────────── */
:root {
    --font-head:  'Exo 2', 'Segoe UI', 'Arial Black', sans-serif;
    --font-cond:  'Barlow Condensed', 'Arial Narrow', condensed, sans-serif;
    --font-body:  'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    --hh:         70px;
    --ease:       cubic-bezier(0.4,0,0.2,1);
    --r:          6px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.35s, color 0.35s;
}

a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

#particles {
    position:fixed; inset:0;
    pointer-events:none; z-index:0;
    opacity:0.3;
}
.scanlines,.vignette { display:none; }

body::before {
    content:'';
    position:fixed; inset:0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(245,200,0,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(107,33,168,0.06) 0%, transparent 50%);
    pointer-events:none; z-index:0;
}

/* ── HEADER ──────────────────────────────────────────────── */
#site-header {
    position:fixed; top:0; left:0; right:0;
    z-index:9000; height:var(--hh);
    transition:all 0.35s var(--ease);
}
#site-header.scrolled {
    background: var(--header-bg);
    backdrop-filter:blur(20px) saturate(1.8);
    border-bottom:2px solid var(--accent);
    box-shadow:0 4px 30px rgba(0,0,0,0.12);
}
.header-inner {
    max-width:1440px; margin:0 auto;
    padding:0 2.5rem; height:100%;
    display:flex; align-items:center; justify-content:space-between;
}

/* LOGO */
.logo { display:flex; align-items:center; gap:0.8rem; transition:opacity 0.2s; }
.logo:hover { opacity:0.8; }
.logo-icon { flex-shrink:0; filter:drop-shadow(0 2px 8px rgba(245,200,0,0.5)); }
.logo-text { display:flex; flex-direction:column; }
.logo-main {
    font-family:var(--font-head); font-size:1.1rem; font-weight:900;
    color:var(--text-bright); letter-spacing:0.06em; line-height:1;
}
.logo-accent { color:var(--accent-dark); }
.logo-sub {
    font-family:var(--font-mono); font-size:0.58rem;
    color:var(--text-dim); letter-spacing:0.18em;
    text-transform:uppercase; margin-top:2px;
}

/* NAV */
.main-nav { display:flex; align-items:center; gap:0.2rem; }
.main-nav a {
    font-family:var(--font-cond); font-weight:700;
    font-size:0.88rem; letter-spacing:0.1em; text-transform:uppercase;
    padding:0.5rem 1rem; color:var(--text-dim); position:relative;
    transition:color 0.2s;
}
.main-nav a::before {
    content:''; position:absolute; bottom:0; left:1rem; right:1rem;
    height:2px; background:var(--accent); border-radius:2px;
    transform:scaleX(0); transition:transform 0.25s var(--ease);
}
.main-nav a:hover,.main-nav a.active { color:var(--purple); }
.main-nav a:hover::before,.main-nav a.active::before { transform:scaleX(1); }



.nav-join::before { display:none !important; }

/* HEADER RIGHT ACTIONS */
.header-actions { display:flex; align-items:center; gap:0.5rem; }

/* TEMA TOGGLE */
.theme-toggle {
    width:38px; height:38px;
    border-radius:50%; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-dim); cursor:pointer;
    transition:all 0.25s var(--ease);
    background:var(--card);
    font-size:1rem;
}
.theme-toggle:hover {
    border-color:var(--accent); color:var(--accent);
    background:var(--accent-dim);
    transform:rotate(20deg);
}



/* BURGER */
.burger { display:none; flex-direction:column; gap:5px; padding:4px; }
.burger span {
    display:block; width:24px; height:2.5px;
    background:var(--text-dim); border-radius:2px;
    transition:all 0.3s var(--ease);
}
.burger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* MOBILE NAV */
.mobile-nav {
    display:none; flex-direction:column;
    background:var(--header-bg);
    border-bottom:2px solid var(--accent);
    backdrop-filter:blur(20px);
    padding:1rem 2.5rem 1.5rem;
    animation:slideDown 0.3s var(--ease);
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
    font-family:var(--font-cond); font-weight:700; font-size:1.2rem;
    letter-spacing:0.1em; text-transform:uppercase;
    padding:0.75rem 0; color:var(--text-dim);
    border-bottom:1px solid var(--border);
    transition:color 0.2s, padding-left 0.2s;
}
.mobile-nav a:hover { color:var(--purple); padding-left:0.5rem; }

@keyframes slideDown {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── MAIN CONTENT ───────────────────────────────────────── */
#main-content { padding-top:var(--hh); position:relative; z-index:1; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
    min-height:calc(100vh - var(--hh));
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; position:relative; overflow:hidden;
    background:var(--hero-bg);
}
.hero::after {
    content:''; position:absolute; top:0; right:0;
    width:55%; height:100%;
    background:linear-gradient(135deg, rgba(107,33,168,0.06), rgba(245,200,0,0.06));
    clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events:none;
}
.hero-left { padding:5rem 3rem 5rem 4rem; position:relative; z-index:2; }
.hero-right {
    position:relative; height:100%; min-height:60vh;
    display:flex; align-items:center; justify-content:center; z-index:2;
}
.hero-bg-glow {
    position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, rgba(245,200,0,0.12) 0%, transparent 65%);
    right:-50px; top:50%; transform:translateY(-50%); pointer-events:none;
}
.hero-bg-glow2 {
    position:absolute; width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(107,33,168,0.1) 0%, transparent 65%);
    left:-50px; bottom:0; pointer-events:none;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-mono); font-size:0.68rem;
    color:var(--purple); letter-spacing:0.2em; text-transform:uppercase;
    margin-bottom:1.8rem; padding:0.4rem 0.9rem;
    border:1.5px solid var(--purple-dim); border-radius:100px;
    background:var(--purple-dim);
}
.hero-badge::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 8px var(--accent);
    animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }

.hero h1 {
    font-family:var(--font-head);
    font-size:clamp(2.8rem, 5.5vw, 5.5rem);
    font-weight:900; line-height:0.95;
    letter-spacing:-0.02em; text-transform:uppercase;
    color:var(--text-bright); margin-bottom:1.8rem;
}
.hero h1 em { display:block; font-style:normal; color:transparent; -webkit-text-stroke:2px var(--purple-dim); }
.hero h1 .glow-word { display:block; color:var(--purple); position:relative; }
.hero h1 .glow-word::after {
    content:attr(data-text); position:absolute; left:0; top:0;
    color:var(--accent);
    clip-path:polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}
.hero-desc { font-size:1.1rem; color:var(--text); max-width:440px; margin-bottom:2.5rem; line-height:1.75; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem; }
.hero-stats { display:flex; gap:2.5rem; padding-top:2rem; border-top:2px solid var(--accent); }
.hstat { display:flex; flex-direction:column; }
.hstat-num { font-family:var(--font-head); font-size:1.8rem; font-weight:900; color:var(--purple); line-height:1; }
.hstat-label { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-dim); letter-spacing:0.16em; text-transform:uppercase; margin-top:4px; }

.hero-visual { position:relative; width:420px; height:420px; }
.hero-hex-outer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; animation:rotateSlow 30s linear infinite; }
.hero-hex-inner { position:absolute; inset:20px; display:flex; align-items:center; justify-content:center; animation:rotateSlow 20s linear infinite reverse; }
.hero-center-icon { position:relative; z-index:5; font-size:6rem; filter:drop-shadow(0 8px 24px rgba(107,33,168,0.3)); animation:floatIcon 4s ease-in-out infinite; }
@keyframes rotateSlow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes floatIcon { 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-12px);} }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-cond); font-weight:700;
    font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase;
    padding:0.8rem 1.8rem; border-radius:var(--r);
    transition:all 0.25s var(--ease); border:none;
}
.btn-primary { background:var(--purple); color:#fff; box-shadow:0 4px 20px rgba(107,33,168,0.35); }
.btn-primary:hover { background:var(--purple-light); transform:translateY(-2px); box-shadow:0 8px 28px rgba(107,33,168,0.45); }
.btn-yellow { background:var(--accent); color:var(--text-bright); box-shadow:0 4px 20px rgba(245,200,0,0.4); }
.btn-yellow:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,200,0,0.5); }
.btn-outline { background:transparent; color:var(--purple); border:2px solid var(--purple); }
.btn-outline:hover { background:var(--purple); color:#fff; transform:translateY(-2px); }
.btn-ghost { background:var(--purple-dim); color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover { background:rgba(107,33,168,0.12); border-color:var(--purple-light); color:var(--purple); }
.btn-sm  { padding:0.5rem 1.1rem; font-size:0.78rem; }
.btn-lg  { padding:1rem 2.4rem; font-size:1rem; }
.btn-wide { width:100%; justify-content:center; }

/* ── SECTIONS ─────────────────────────────────────────────── */
.section { padding:7rem 2.5rem; position:relative; }
.section-alt  { background:var(--bg2); }
.section-dark { background:var(--purple); color:#fff; }
.section-dark .section-title,.section-dark .section-label,.section-dark h2 { color:#fff; }
.section-dark .section-desc,.section-dark p { color:rgba(255,255,255,0.8); }

.container { max-width:1440px; margin:0 auto; width:100%; }

.section-label {
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--font-mono); font-size:0.68rem;
    color:var(--purple-light); letter-spacing:0.25em; text-transform:uppercase;
    margin-bottom:0.8rem; background:var(--purple-dim);
    padding:0.3rem 0.7rem; border-radius:100px;
    border:1px solid rgba(107,33,168,0.2);
}
.section-label::before { content:'✦'; font-size:0.5rem; }
.section-title { font-family:var(--font-head); font-size:clamp(1.8rem,4vw,3.2rem); font-weight:900; color:var(--text-bright); text-transform:uppercase; letter-spacing:-0.01em; line-height:1.05; }
.section-title .a { color:var(--purple); }
.section-desc { color:var(--text); font-size:1rem; max-width:480px; margin-top:0.8rem; line-height:1.7; }

/* ── STATS STRIP ──────────────────────────────────────────── */
.stats-strip { background:var(--purple); padding:2.5rem; }
.stats-strip .container { display:flex; justify-content:space-around; flex-wrap:wrap; gap:1.5rem; }
.sstat { text-align:center; }
.sstat-num { font-family:var(--font-head); font-size:2.8rem; font-weight:900; color:var(--accent); line-height:1; display:block; text-shadow:0 2px 12px rgba(245,200,0,0.4); }
.sstat-label { font-family:var(--font-mono); font-size:0.65rem; color:rgba(255,255,255,0.7); letter-spacing:0.2em; text-transform:uppercase; margin-top:5px; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
    background:var(--card); border:1.5px solid var(--border);
    border-radius:var(--r); position:relative; overflow:hidden;
    transition:transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
    box-shadow:var(--shadow);
}
.card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--accent)); opacity:0; transition:opacity 0.3s; }
.card:hover { transform:translateY(-5px); border-color:rgba(107,33,168,0.35); box-shadow:var(--shadow-lg); }
.card:hover::after { opacity:1; }
.card-thumb { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--bg2),var(--bg)); }
.card-thumb-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(107,33,168,0.06),rgba(245,200,0,0.06)); }
.card-body { padding:1.4rem 1.6rem 1.8rem; }
.card-tag { font-family:var(--font-mono); font-size:0.65rem; color:var(--purple-light); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0.4rem; }
.card-title { font-family:var(--font-cond); font-weight:800; font-size:1.25rem; color:var(--text-bright); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.6rem; line-height:1.2; }
.card-desc { font-size:0.92rem; color:var(--text-dim); line-height:1.65; margin-bottom:1.2rem; }

/* ── TAGS ─────────────────────────────────────────────────── */
.tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; }
.tag { font-family:var(--font-mono); font-size:0.63rem; padding:0.22rem 0.55rem; border-radius:100px; letter-spacing:0.06em; border:1px solid rgba(107,33,168,0.2); color:var(--purple-light); background:var(--purple-dim); white-space:nowrap; }

/* ── GRIDS ────────────────────────────────────────────────── */
.grid { display:grid; gap:1.5rem; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero { padding:5rem 2.5rem 4rem; background:var(--page-hero-bg); position:relative; overflow:hidden; border-bottom:3px solid var(--accent); }
.page-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 100% at 50% -10%, var(--purple-dim) 0%, transparent 60%); pointer-events:none; }
.page-hero-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:55px 55px; pointer-events:none; opacity:0.5; }
.page-hero .container { position:relative; z-index:2; }
.breadcrumb { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-dim); letter-spacing:0.15em; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.5rem; }
.breadcrumb a { color:var(--purple); }
.breadcrumb span { opacity:0.4; }
.page-hero h1 { font-family:var(--font-head); font-size:clamp(2.2rem,5vw,4.5rem); font-weight:900; color:var(--text-bright); text-transform:uppercase; letter-spacing:-0.02em; line-height:1; margin-bottom:1rem; }
.page-hero h1 .a { color:var(--purple); }
.page-hero-desc { color:var(--text); font-size:1.05rem; max-width:520px; line-height:1.7; }

/* ── FEATURED BLOCK ───────────────────────────────────────── */
.featured-block { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.featured-visual { aspect-ratio:16/9; background:linear-gradient(135deg,var(--bg2),var(--bg)); border:2px solid var(--border); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:7rem; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.featured-visual-glow { position:absolute; inset:0; background:linear-gradient(135deg,rgba(107,33,168,0.07),rgba(245,200,0,0.1)); }
.featured-visual-corner { position:absolute; top:0; right:0; width:50px; height:50px; border-top:3px solid var(--accent); border-right:3px solid var(--accent); border-radius:0 var(--r) 0 0; }
.featured-visual-corner2 { position:absolute; bottom:0; left:0; width:50px; height:50px; border-bottom:3px solid var(--purple); border-left:3px solid var(--purple); border-radius:0 0 0 var(--r); }
.featured-badge { position:absolute; top:1rem; left:1rem; background:var(--accent); color:var(--text-bright); font-family:var(--font-mono); font-size:0.6rem; font-weight:700; letter-spacing:0.15em; padding:0.25rem 0.7rem; border-radius:100px; text-transform:uppercase; }
.featured-info h2 { font-family:var(--font-head); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; color:var(--text-bright); text-transform:uppercase; line-height:1; margin-bottom:1.2rem; }
.featured-info p { color:var(--text); line-height:1.75; margin-bottom:1.5rem; }

/* ── TEAM CARDS ───────────────────────────────────────────── */
.team-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; transition:transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; box-shadow:var(--shadow); }
.team-card:hover { transform:translateY(-5px); border-color:var(--purple-light); box-shadow:var(--shadow-lg); }
.team-avatar { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:3.5rem; background:linear-gradient(135deg,var(--bg2),var(--bg)); position:relative; overflow:hidden; }
.team-avatar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:35%; background:linear-gradient(transparent,var(--purple-dim)); }
.avatar-border { position:absolute; inset:0; background:linear-gradient(135deg,rgba(107,33,168,0.04),rgba(245,200,0,0.06)); }
.team-info { padding:1.2rem 1.4rem 1.5rem; }
.team-name { font-family:var(--font-cond); font-weight:800; font-size:1.1rem; color:var(--text-bright); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.2rem; }
.team-role { font-family:var(--font-mono); font-size:0.65rem; color:var(--purple-light); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0.7rem; }
.team-bio { font-size:0.88rem; color:var(--text-dim); line-height:1.55; }

/* ── FEATURE ITEMS ────────────────────────────────────────── */
.feature-item { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:1.8rem; transition:border-color 0.3s, box-shadow 0.3s, transform 0.3s; box-shadow:var(--shadow); }
.feature-item:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.feature-icon { font-size:2.2rem; margin-bottom:1rem; }
.feature-title { font-family:var(--font-cond); font-weight:700; font-size:1rem; color:var(--text-bright); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.5rem; }
.feature-desc { font-size:0.88rem; color:var(--text-dim); line-height:1.6; }

/* ── CTA BOX ──────────────────────────────────────────────── */
.cta-box { background:var(--purple); border-radius:var(--r); padding:4.5rem 3rem; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.cta-box::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 100%, rgba(245,200,0,0.15), transparent),radial-gradient(ellipse 40% 60% at 80% 20%, rgba(255,255,255,0.05), transparent); pointer-events:none; }
.cta-box::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); }
.cta-box h2 { font-family:var(--font-head); font-size:clamp(1.6rem,3.5vw,2.8rem); font-weight:900; color:#fff; text-transform:uppercase; margin-bottom:0.8rem; position:relative; }
.cta-box h2 .accent { color:var(--accent); }
.cta-box p { color:rgba(255,255,255,0.8); max-width:440px; margin:0 auto 2rem; position:relative; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ── FORM ─────────────────────────────────────────────────── */
.form { display:grid; gap:1.2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-label { font-family:var(--font-mono); font-size:0.65rem; color:var(--purple); letter-spacing:0.18em; text-transform:uppercase; font-weight:700; }
.form-input,.form-select,.form-textarea { background:var(--input-bg); border:1.5px solid var(--border); border-radius:var(--r); color:var(--text-bright); font-family:var(--font-body); font-size:0.95rem; padding:0.8rem 1.1rem; outline:none; width:100%; transition:border-color 0.2s, box-shadow 0.2s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--purple-light); box-shadow:0 0 0 3px rgba(107,33,168,0.1); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-light); }
.form-textarea { min-height:130px; resize:vertical; }
.form-select { appearance:none; cursor:pointer; }

/* ── BLOG META ────────────────────────────────────────────── */
.blog-meta { font-family:var(--font-mono); font-size:0.63rem; color:var(--text-dim); letter-spacing:0.1em; margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1{transition-delay:0.1s;} .delay-2{transition-delay:0.2s;}
.delay-3{transition-delay:0.3s;} .delay-4{transition-delay:0.4s;}
.delay-5{transition-delay:0.5s;}

/* ── UTILS ────────────────────────────────────────────────── */
.mono{font-family:var(--font-mono);} .accent{color:var(--accent-dark);} .purple{color:var(--purple);}
.dimmed{color:var(--text-dim);} .text-center{text-align:center;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.mt-1{margin-top:0.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;}
.mb-4{margin-bottom:2rem;} .mb-6{margin-bottom:3.5rem;}

.info-row { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.info-icon { width:42px; height:42px; border:1.5px solid var(--border); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; background:var(--purple-dim); }
.info-label { font-family:var(--font-mono); font-size:0.62rem; color:var(--purple); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:2px; font-weight:700; }
.info-value { font-weight:600; color:var(--text-bright); font-size:0.95rem; }
.info-sub { font-size:0.82rem; color:var(--text-dim); }

/* ── FOOTER ───────────────────────────────────────────────── */
#site-footer { background:var(--purple); color:#fff; padding:4rem 2.5rem 2rem; position:relative; z-index:1; }
#site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); }
.footer-top { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.8fr 1fr; gap:4rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.15); }
.footer-brand p { color:rgba(255,255,255,0.7); font-size:0.9rem; line-height:1.65; max-width:340px; margin:1rem 0 1.5rem; }
.footer-logo { display:flex; align-items:center; gap:0.6rem; font-family:var(--font-head); font-size:1rem; color:#fff; }
.footer-socials { display:flex; gap:0.6rem; }
.footer-socials a { width:38px; height:38px; border:1.5px solid rgba(255,255,255,0.2); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); transition:border-color 0.2s, color 0.2s, background 0.2s; }
.footer-socials a:hover { border-color:var(--accent); color:var(--accent); background:rgba(245,200,0,0.1); }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer-col h5 { font-family:var(--font-cond); font-weight:700; font-size:0.75rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.2em; margin-bottom:1.2rem; }
.footer-col a { display:block; font-size:0.88rem; color:rgba(255,255,255,0.6); margin-bottom:0.6rem; transition:color 0.2s, padding-left 0.2s; }
.footer-col a:hover { color:var(--accent); padding-left:4px; }
.footer-bottom { max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; padding-top:2rem; font-family:var(--font-mono); font-size:0.65rem; color:rgba(255,255,255,0.5); letter-spacing:0.1em; }
.footer-heart .accent { color:var(--accent); }

/* ── CUSTOMIZER PANEL ─────────────────────────────────────── */
#customizer-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:99998; opacity:0; pointer-events:none;
    transition:opacity 0.35s var(--ease);
    backdrop-filter:blur(4px);
}
#customizer-overlay.open { opacity:1; pointer-events:all; }

#customizer {
    position:fixed; right:-420px; top:0; bottom:0;
    width:420px; max-width:100vw;
    background:var(--bg3); color:var(--text);
    z-index:99999; overflow-y:auto;
    transition:right 0.4s var(--ease);
    box-shadow:-8px 0 48px rgba(0,0,0,0.25);
    border-left:2px solid var(--accent);
    display:flex; flex-direction:column;
}
#customizer.open { right:0; }

.cst-head {
    padding:18px 20px; background:var(--purple);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
    border-bottom:3px solid var(--accent);
}
.cst-head h2 { font-family:var(--font-head); font-size:14px; color:#fff; letter-spacing:0.08em; }
.cst-head-btns { display:flex; gap:8px; align-items:center; }
.cst-close {
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.7); font-size:18px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.2s;
}
.cst-close:hover { background:rgba(255,255,255,0.15); color:#fff; }
.cst-save {
    padding:7px 16px; background:var(--accent); color:#1a0f3d;
    border-radius:5px; font-family:var(--font-mono);
    font-size:11px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; cursor:pointer;
    transition:all 0.2s; border:none;
}
.cst-save:hover { background:#fff; transform:translateY(-1px); }
.cst-save.saving { opacity:0.6; pointer-events:none; }

/* TABS */
.cst-tabs { display:flex; overflow-x:auto; background:var(--bg2); flex-shrink:0; border-bottom:1px solid var(--border); }
.cst-tabs::-webkit-scrollbar { height:3px; }
.cst-tabs::-webkit-scrollbar-thumb { background:var(--accent); }
.cst-tab {
    padding:10px 14px; font-family:var(--font-mono); font-size:10px;
    font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--text-dim); cursor:pointer; white-space:nowrap;
    border-bottom:2px solid transparent; transition:all 0.2s;
    flex-shrink:0;
}
.cst-tab:hover { color:var(--purple); }
.cst-tab.on { color:var(--accent); border-bottom-color:var(--accent); background:var(--purple-dim); }

/* PANELS */
.cst-panels { flex:1; overflow:hidden; }
.cst-panel { display:none; padding:16px; overflow-y:auto; height:100%; }
.cst-panel.on { display:block; }

.cst-section { margin-bottom:18px; }
.cst-section-title {
    font-family:var(--font-mono); font-size:9px; font-weight:700;
    letter-spacing:0.2em; text-transform:uppercase;
    color:var(--purple-light); margin-bottom:10px;
    padding-bottom:6px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:6px;
}
.cst-section-title::before { content:'◆'; font-size:7px; }

.cst-fg { margin-bottom:10px; }
.cst-fg label { display:block; font-family:var(--font-mono); font-size:9px; color:var(--text-dim); letter-spacing:0.15em; text-transform:uppercase; font-weight:700; margin-bottom:4px; }
.cst-fg input[type=text],
.cst-fg input[type=url],
.cst-fg input[type=email],
.cst-fg textarea {
    width:100%; padding:7px 9px;
    background:var(--input-bg); border:1.5px solid var(--border);
    border-radius:4px; color:var(--text-bright);
    font-family:var(--font-body); font-size:12px; outline:none;
    transition:border-color 0.2s;
}
.cst-fg input:focus,.cst-fg textarea:focus { border-color:var(--purple); box-shadow:0 0 0 2px var(--purple-dim); }
.cst-fg textarea { min-height:65px; resize:vertical; }

/* COLOR PICKER ROW */
.cst-color-row { display:flex; align-items:center; gap:8px; }
.cst-color-row input[type=color] { width:38px; height:34px; border-radius:4px; border:1.5px solid var(--border); padding:2px; cursor:pointer; background:none; }
.cst-color-row input[type=text] { flex:1; }
.cst-color-swatch { width:34px; height:34px; border-radius:4px; border:1.5px solid var(--border); flex-shrink:0; }

/* TEMA SEÇİCİ */
.cst-theme-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.cst-theme-opt {
    border:2px solid var(--border); border-radius:6px; padding:10px;
    cursor:pointer; text-align:center; transition:all 0.2s;
    background:var(--card);
}
.cst-theme-opt:hover { border-color:var(--purple); }
.cst-theme-opt.on { border-color:var(--accent); background:var(--accent-dim); }
.cst-theme-opt .preview-bar {
    height:28px; border-radius:3px; margin-bottom:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
}
.cst-theme-opt label { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; }

/* SAVED TOAST */
.cst-toast {
    position:fixed; bottom:24px; left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--purple); color:#fff;
    padding:10px 20px; border-radius:100px;
    font-family:var(--font-mono); font-size:11px;
    font-weight:700; letter-spacing:0.1em;
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
    z-index:999999; transition:transform 0.35s var(--ease);
    border:1.5px solid var(--accent);
}
.cst-toast.show { transform:translateX(-50%) translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1100px) {
    .hero { grid-template-columns:1fr; min-height:auto; }
    .hero-right { display:none; }
    .hero-left { padding:4rem 2rem 3rem; }
    .featured-block { grid-template-columns:1fr; gap:2.5rem; }
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .footer-top { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:768px) {
    .main-nav { display:none; }
    .burger { display:flex; }
    .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
    .footer-links { grid-template-columns:1fr 1fr; }
    .form-row { grid-template-columns:1fr; }
    .hero-stats { gap:1.5rem; flex-wrap:wrap; }
    .section { padding:4rem 1.5rem; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .page-hero { padding:3rem 1.5rem 2.5rem; }
    #customizer { width:100vw; right:-100vw; }
}
@media (max-width:480px) {
    .hero-ctas { flex-direction:column; }
    .footer-links { grid-template-columns:1fr; }
}

/* ── LOGO CUSTOM IMAGE ──────────────────────────────────────── */
.logo-img-custom {
    height: 38px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

/* ── KOYU TEMA: siyah yazılara beyaz outline ─────────────── */
[data-theme="dark"] .logo-main,
[data-theme="dark"] .logo-accent,
[data-theme="dark"] .hero h1,
[data-theme="dark"] .section-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .team-name,
[data-theme="dark"] .featured-info h2,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    text-shadow: 0 0 1px rgba(255,255,255,0.08);
}

/* Gerçek siyah (renk değeri #000 veya çok karanlık) yazılar için outline */
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#1a0f3d"],
[data-theme="dark"] [style*="color: #1a0f3d"] {
    color: var(--text-bright) !important;
    text-shadow: 0 0 2px rgba(255,255,255,0.15), -1px -1px 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
}

/* Buton üzerindeki koyu metinlere de uygula */
[data-theme="dark"] .btn-primary span,
[data-theme="dark"] .btn-yellow,
[data-theme="dark"] .btn.btn-yellow {
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

[data-theme="dark"] .hero h1 em {
    -webkit-text-stroke: 1px rgba(255,255,255,0.5);
    text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* ── LOGO: resim varken yazılar da görünsün ──────────────── */
.logo .logo-text { display: flex !important; }


/* ══════════════════════════════════════════════════════════════
   OKUNURLUK & MEDYA UYUMU — Her temada net kontrast
   ══════════════════════════════════════════════════════════════ */

/* ── AÇIK TEMA: yeterli kontrast ─────────────────────────── */
[data-theme="light"] {
    --text:         #2d2350;   /* biraz daha koyu */
    --text-bright:  #0f0826;
    --text-dim:     #5c4f7c;
}

/* ── KOYU TEMA: yeterli kontrast ─────────────────────────── */
[data-theme="dark"] {
    --text:         #d4c8e8;   /* biraz daha açık */
    --text-bright:  #f5f0ff;
    --text-dim:     #9d8ec0;
}

/* ── KOYU TEMADA ÖZEL ÖGELER ─────────────────────────────── */

/* Kart başlıkları */
[data-theme="dark"] .card-title,
[data-theme="dark"] .team-name,
[data-theme="dark"] .section-title,
[data-theme="dark"] .featured-info h2,
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: var(--text-bright);
}

/* Kart açıklamaları */
[data-theme="dark"] .card-desc,
[data-theme="dark"] .card-body p,
[data-theme="dark"] p {
    color: var(--text);
}

/* Etiket/tag kontrast */
[data-theme="dark"] .tag {
    background: rgba(168,85,247,0.2);
    color: #d8b4fe;
    border-color: rgba(168,85,247,0.35);
}

/* Nav linkleri */
[data-theme="dark"] .main-nav a {
    color: var(--text);
}
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active {
    color: var(--accent);
}

/* Section label */
[data-theme="dark"] .section-label {
    color: var(--accent);
    opacity: 0.95;
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a {
    color: var(--text-dim);
}
[data-theme="dark"] .breadcrumb a:hover {
    color: var(--accent);
}

/* Form inputları */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--input-bg);
    color: var(--text-bright);
    border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-dim);
}

/* Buton outline */
[data-theme="dark"] .btn-outline {
    border-color: var(--border);
    color: var(--text-bright);
}
[data-theme="dark"] .btn-outline:hover {
    background: var(--purple-dim);
    border-color: var(--purple-light);
    color: var(--text-bright);
}

/* İnfo row */
[data-theme="dark"] .info-label { color: var(--text-dim); }
[data-theme="dark"] .info-value { color: var(--text-bright); }
[data-theme="dark"] .info-sub   { color: var(--text-dim); }

/* Hero stat sayıları */
[data-theme="dark"] .hstat-num { color: var(--accent); }
[data-theme="dark"] .hstat-label { color: var(--text-dim); }

/* Team bio */
[data-theme="dark"] .team-bio { color: var(--text); }
[data-theme="dark"] .team-role { color: var(--text-dim); }

/* Footer */
[data-theme="dark"] #site-footer {
    background: var(--bg2);
    border-top: 2px solid var(--border);
}
[data-theme="dark"] .footer-col h5 { color: var(--text-bright); }
[data-theme="dark"] .footer-col a  { color: var(--text-dim); }
[data-theme="dark"] .footer-col a:hover { color: var(--accent); }
[data-theme="dark"] .footer-bottom { color: var(--text-dim); }

/* Açık temada footer okunurluk */
[data-theme="light"] #site-footer {
    background: var(--bg2);
}
[data-theme="light"] .footer-col h5 { color: var(--text-bright); }

/* ── MEDYA UYUMU ─────────────────────────────────────────── */

/* Tablet (768px altı) */
@media (max-width: 768px) {
    .cst-layout { grid-template-columns: 1fr !important; height: auto !important; }

    .featured-block {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    .featured-visual {
        min-height: 220px;
        aspect-ratio: 16/7;
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

    .hero {
        grid-template-columns: 1fr !important;
        padding-top: calc(var(--hh) + 2rem);
        min-height: auto;
    }
    .hero-right { display: none; }
    .hero-left  { padding: 0 1.5rem 3rem; }

    .stats-strip .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .section-title { font-size: clamp(1.4rem, 5vw, 2.2rem) !important; }

    .page-hero .container { padding: 2rem 1.5rem; }
    .page-hero h1 { font-size: clamp(1.8rem, 6vw, 3rem); }

    /* İletişim grid */
    .iletisim-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Tablo scroll */
    table { display: block; overflow-x: auto; }
}

/* Mobil (480px altı) */
@media (max-width: 480px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .grid-2 { grid-template-columns: 1fr !important; }

    .hero-ctas { flex-direction: column; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    .card { margin-bottom: 0; }

    .footer-links { grid-template-columns: 1fr 1fr !important; }
    .footer-top   { flex-direction: column; gap: 2rem; }

    .btn-lg { padding: 0.7rem 1.2rem; font-size: 0.9rem; }

    .breadcrumb { font-size: 0.65rem; }
    .section-label { font-size: 0.58rem; }

    /* Etkinlik detay grid */
    [style*="grid-template-columns:80px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Büyük ekran (1400px üstü) */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .hero { gap: 6rem; }
}


/* ══════════════════════════════════════════════════════════════
   FORM STİLLERİ — İletişim formu
   ══════════════════════════════════════════════════════════════ */
.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--purple-light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.form-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    color: var(--text-bright);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.form-input:focus {
    border-color: var(--purple-light);
    box-shadow: 0 0 0 3px var(--purple-dim);
}
.form-input::placeholder { color: var(--text-dim); }
textarea.form-input { resize: vertical; min-height: 120px; }
select.form-input { cursor: pointer; }

/* Koyu temada select ok rengi */
[data-theme="dark"] select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a855f7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.2rem;
}

/* İnfo row */
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: border-color 0.2s;
}
.info-row:hover { border-color: var(--purple-light); }
.info-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.info-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.info-value {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 0.95rem;
}
.info-sub {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Feature item (hakkımızda) */
.feature-item {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.2rem;
    transition: border-color 0.2s, transform 0.2s;
}
.feature-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.feature-icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.feature-title {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.feature-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }