/* =============================================================================
KKTCRoyal — design-tokens.css
Single source of truth for the kktcroyal.info access-layer shell and the
later content front end. Derived from the live KKTCRoyal site (dark neon
theme). Hand this to Claude Code; drive ALL styling from these tokens.
Notes
- Dark theme only (the live brand is dark). Structured so a theme could be
layered later via [data-theme].
- Effects are pure CSS (glow via box-shadow / text-shadow, gradient neon).
No animation libraries. prefers-reduced-motion is honored at the bottom.
- Hex values are a faithful approximation of the screenshots. Sample the
live site with a color picker and fine-tune the four or five "brand" /
"neon" values if you want an exact match — everything else cascades.
- Fonts: load via in the document (faster than @import):
If you must inline, an @import equivalent is provided (commented) below.
============================================================================= */
/* @import url('https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); */
:root {
/* ---------------------------------------------------------------------------
BACKGROUNDS (near-black with a faint purple tint, layered surfaces)
--------------------------------------------------------------------------- */
--bg-deep: #06060a; /* page edges / behind everything */
--bg-base: #0a0a0f; /* main page background */
--bg-panel: #14101c; /* cards, header bar */
--bg-elevated: #1c1726; /* hovered card / popovers */
--bg-input: #1a1622; /* search field, inputs */
--bg-overlay: rgba(6, 6, 10, 0.82); /* iOS add-to-home dim overlay */
/* ---------------------------------------------------------------------------
BRAND (logodan ölçülen — tahmin değil, sıcak kırmızı + altın)
--------------------------------------------------------------------------- */
--brand-red: #cd3c23; /* harf gövdesi — ANA marka rengi */
--brand-red-bright: #ff5e49; /* parlak kenar / highlight / hover */
--brand-orange: #ff9a6b; /* kırmızı→turuncu geçiş / orta ton */
--brand-gold: #d9ba7e; /* taç / kenar altını — premium vurgu */
--brand-red-deep: #500000; /* gölge / derinlik / pressed */
/* Geriye dönük uyumluluk alias'ları (shell.css var() referansları bozulmasın) */
--brand: var(--brand-red);
--brand-bright: var(--brand-red-bright);
--brand-deep: var(--brand-red-deep);
/* ---------------------------------------------------------------------------
NEON PALETTE (card outlines, icons, accent text)
--------------------------------------------------------------------------- */
--neon-magenta: #ff2d9b; /* dominant accent (headings, gift card) */
--neon-pink: #ff5cc8; /* softer magenta */
--neon-purple: #a855f7; /* secondary accent / footer headings */
--neon-cyan: #00e5ff; /* live-casino / cool accents */
--neon-blue: #3b82f6; /* links / info */
--neon-red: #ff1e3c; /* "LIVE" / urgent */
--neon-green: #2ee6a6; /* success / positive amounts */
/* ---------------------------------------------------------------------------
TEXT
--------------------------------------------------------------------------- */
--text-primary: #f4f1f8; /* main text, clock */
--text-secondary: #c7bdd6; /* nav, secondary copy */
--text-muted: #8a7f9c; /* captions, placeholders, footer links */
--text-accent: var(--neon-magenta); /* magenta section headings */
--text-on-brand: #1a0a06; /* text on top of brand-colored fills */
--text-on-neon: #0a0a0f; /* text on bright neon fills */
/* ---------------------------------------------------------------------------
BORDERS
--------------------------------------------------------------------------- */
--border-subtle: rgba(168, 85, 247, 0.18); /* faint panel edge */
--border-hairline:rgba(255, 255, 255, 0.06);
--border-neon: var(--neon-magenta);
/* ---------------------------------------------------------------------------
GRADIENTS
--------------------------------------------------------------------------- */
--grad-brand: linear-gradient(180deg, var(--brand-red-bright) 0%, var(--brand-red) 100%);
/* CTA: bright-red → brand-red (logodan ölçülen, kullanıcı spec) */
--grad-cta: linear-gradient(135deg, var(--brand-red-bright) 0%, var(--brand-red) 100%);
/* Heading: turuncu→parlak-kırmızı→altın — koyu zeminde NET OKUNUR, sıcak metalik */
--grad-heading: linear-gradient(92deg, var(--brand-orange) 0%, var(--brand-red-bright) 55%, var(--brand-gold) 100%);
--grad-panel: linear-gradient(160deg, #16111f 0%, #100c18 100%);
--grad-banner: linear-gradient(120deg, #1b1130 0%, #0c0a16 60%);
/* ---------------------------------------------------------------------------
GLOWS & SHADOWS (the signature neon look)
--------------------------------------------------------------------------- */
--glow-magenta: 0 0 6px rgba(255, 45, 155, 0.55), 0 0 18px rgba(255, 45, 155, 0.35);
--glow-cyan: 0 0 6px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.30);
--glow-purple: 0 0 6px rgba(168, 85, 247, 0.55), 0 0 18px rgba(168, 85, 247, 0.30);
--glow-red: 0 0 6px rgba(255, 30, 60, 0.60), 0 0 18px rgba(255, 30, 60, 0.35);
--glow-brand: 0 0 8px rgba(205, 60, 35, 0.65), 0 0 24px rgba(205, 60, 35, 0.35);
--glow-gold: 0 0 6px rgba(217, 186, 126, 0.55), 0 0 18px rgba(217, 186, 126, 0.30);
--glow-text: 0 0 10px rgba(205, 60, 35, 0.50); /* brand-red tabanlı */
--shadow-card: 0 8px 28px rgba(0, 0, 0, 0.55);
--shadow-card-hover: 0 12px 38px rgba(0, 0, 0, 0.65);
/* ---------------------------------------------------------------------------
RADIUS
--------------------------------------------------------------------------- */
--radius-sm: 8px;
--radius-md: 14px; /* cards */
--radius-lg: 20px;
--radius-pill: 999px; /* "Tıkla & Oyna" pill buttons */
/* ---------------------------------------------------------------------------
SPACING SCALE (4px base)
--------------------------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* ---------------------------------------------------------------------------
TYPOGRAPHY
--------------------------------------------------------------------------- */
--font-display: 'Anton', 'Saira Condensed', 'Arial Narrow', sans-serif; /* big neon headings */
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-numeric: 'Saira Condensed', 'Inter', sans-serif; /* clock / countdown */
--fs-xs: 0.75rem; /* 12 */
--fs-sm: 0.875rem; /* 14 */
--fs-base: 1rem; /* 16 */
--fs-lg: 1.25rem; /* 20 */
--fs-xl: 1.5rem; /* 24 */
--fs-2xl: 2rem; /* 32 */
--fs-3xl: 2.75rem; /* 44 */
--fs-4xl: 3.75rem; /* 60 — hero */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold:600;
--fw-bold: 700;
--lh-tight: 1.1;
--lh-base: 1.55;
--tracking-display: 0.02em; /* uppercase display headings */
--tracking-wide: 0.08em; /* button labels */
/* ---------------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------------- */
--container-max: 1240px;
--header-h: 64px;
/* ---------------------------------------------------------------------------
Z-INDEX
--------------------------------------------------------------------------- */
--z-header: 100;
--z-overlay: 800; /* iOS add-to-home instruction overlay */
--z-toast: 900;
--z-chat: 1000; /* Comm100 widget sits above content */
/* ---------------------------------------------------------------------------
MOTION
--------------------------------------------------------------------------- */
--dur-fast: 120ms;
--dur-base: 220ms;
--dur-slow: 420ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* =============================================================================
BASE
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
}
a { color: var(--neon-blue); text-decoration: none; }
a:hover { color: var(--neon-cyan); }
/* =============================================================================
COMPONENT PRIMITIVES (all driven by the tokens above)
Use these as a reference / starting point; rename to your component system.
============================================================================= */
/* Big neon gradient heading — e.g. "SPOR ÖDÜLLERİ" */
.neon-heading {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--tracking-display);
line-height: var(--lh-tight);
background: var(--grad-heading);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: var(--glow-text);
}
/* Dark card with glowing neon edge — e.g. category tiles (CASINO, OKEY...) */
.neon-card {
background: var(--grad-panel);
border: 1px solid var(--border-neon);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card), var(--glow-magenta);
padding: var(--space-5);
transition: transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease);
}
.neon-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover), var(--glow-magenta), var(--glow-purple);
}
/* Color variants — set the accent and the glow together */
.neon-card--cyan { border-color: var(--neon-cyan); box-shadow: var(--shadow-card), var(--glow-cyan); }
.neon-card--red { border-color: var(--neon-red); box-shadow: var(--shadow-card), var(--glow-red); }
.neon-card--brand{ border-color: var(--brand); box-shadow: var(--shadow-card), var(--glow-brand); }
/* Primary CTA — the "TIKLA & OYNA" / "KKTCRoyal'i Aç" launch button */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-on-neon);
background: var(--grad-cta);
border: none;
border-radius: var(--radius-pill);
padding: var(--space-3) var(--space-6);
cursor: pointer;
box-shadow: var(--glow-magenta);
transition: filter var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease),
transform var(--dur-fast) var(--ease);
}
.btn-cta:hover { filter: brightness(1.08); box-shadow: var(--glow-magenta), var(--glow-purple); }
.btn-cta:active { transform: translateY(1px); }
/* Outline (secondary) button */
.btn-outline {
display: inline-flex; align-items: center; justify-content: center;
font-weight: var(--fw-semibold);
color: var(--text-primary);
background: transparent;
border: 1px solid var(--neon-purple);
border-radius: var(--radius-pill);
padding: var(--space-3) var(--space-5);
cursor: pointer;
transition: box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.btn-outline:hover { background: rgba(168, 85, 247, 0.12); box-shadow: var(--glow-purple); }
/* Thin glowing neon divider line */
.neon-divider {
height: 1px;
border: 0;
background: var(--grad-heading);
box-shadow: var(--glow-magenta);
opacity: 0.7;
}
/* Top-right live clock — "23:13:57 | 22/06/2026" */
.clock {
font-family: var(--font-numeric);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
color: var(--text-primary);
}
/* Dark rounded search field — "Oyun arayın" (content phase) */
.search-field {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
color: var(--text-primary);
padding: var(--space-3) var(--space-5);
font-size: var(--fs-base);
outline: none;
transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.search-field::placeholder { color: var(--text-muted); }
.search-field:focus { border-color: var(--neon-magenta); box-shadow: var(--glow-magenta); }
/* Subtle attention pulse — use sparingly on the launch CTA */
@keyframes neon-pulse {
0%, 100% { box-shadow: var(--glow-magenta); }
50% { box-shadow: var(--glow-magenta), var(--glow-purple); }
}
.pulse { animation: neon-pulse 2.4s var(--ease) infinite; }
/* =============================================================================
ACCESSIBILITY — respect reduced motion (required by the build spec)
============================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}