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

:root {
    /* Gold Palette */
    --gold-100: #fff9e6;
    --gold-200: #f4d58d;
    --gold-300: #e8c547;
    --gold-400: #d4a853;
    --gold-500: #c49a3d;
    --gold-600: #a67c2e;
    --gold-700: #8b6914;
    --gold-glow: rgba(212, 168, 83, 0.5);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #050508;
    --bg-secondary: #0a0a12;
    --bg-tertiary: #12121a;
    --bg-card: rgba(18, 18, 30, 0.85);
    --bg-item: rgba(255, 255, 255, 0.03);
    --bg-item-hover: rgba(212, 168, 83, 0.15);
    --border-primary: rgba(255, 255, 255, 0.08);
    --border-gold: rgba(212, 168, 83, 0.4);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.35);
    --shadow-glow: 0 0 60px rgba(212, 168, 83, 0.15);
    --gradient-bg: radial-gradient(ellipse at top, #1a1428 0%, #0a0a12 40%, #050508 100%);
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #fefcf7;
    --bg-secondary: #f8f4eb;
    --bg-tertiary: #f0e9d8;
    --bg-card: rgba(255, 252, 245, 0.9);
    --bg-item: rgba(139, 105, 20, 0.05);
    --bg-item-hover: rgba(212, 168, 83, 0.2);
    --border-primary: rgba(139, 105, 20, 0.15);
    --border-gold: rgba(164, 124, 46, 0.5);
    --text-primary: #1a1a1a;
    --text-secondary: rgba(26, 26, 26, 0.7);
    --text-muted: rgba(26, 26, 26, 0.4);
    --shadow-glow: 0 0 60px rgba(212, 168, 83, 0.25);
    --gradient-bg: radial-gradient(ellipse at top, #fff9e6 0%, #f8f4eb 40%, #fefcf7 100%);
}

html,
body {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--gradient-bg);
    color: var(--text-primary);
    transition: background var(--transition-medium), color var(--transition-medium);
}

/* Background Image */
.bg-image {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('arka_plan.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Animated Overlay */
.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
            rgba(10, 10, 20, 0.85) 0%,
            rgba(26, 20, 40, 0.75) 50%,
            rgba(10, 10, 20, 0.85) 100%);
}

[data-theme="light"] .bg-overlay {
    background: linear-gradient(135deg,
            rgba(254, 252, 247, 0.88) 0%,
            rgba(248, 244, 235, 0.82) 50%,
            rgba(254, 252, 247, 0.88) 100%);
}

/* Animated Particles */
.particles-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-400);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 15s infinite ease-in-out;
}

.particle:nth-child(1) {
    left: 5%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    left: 15%;
    animation-delay: 2s;
}

.particle:nth-child(3) {
    left: 25%;
    animation-delay: 4s;
}

.particle:nth-child(4) {
    left: 35%;
    animation-delay: 1s;
}

.particle:nth-child(5) {
    left: 45%;
    animation-delay: 3s;
}

.particle:nth-child(6) {
    left: 55%;
    animation-delay: 5s;
}

.particle:nth-child(7) {
    left: 65%;
    animation-delay: 2.5s;
}

.particle:nth-child(8) {
    left: 75%;
    animation-delay: 0.5s;
}

.particle:nth-child(9) {
    left: 85%;
    animation-delay: 3.5s;
}

.particle:nth-child(10) {
    left: 95%;
    animation-delay: 1.5s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-50px) scale(1);
        opacity: 0;
    }
}

/* Shimmer Effect */
.shimmer-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(212, 168, 83, 0.08) 50%,
            transparent 70%);
    background-size: 200% 100%;
    animation: shimmerMove 8s infinite linear;
    pointer-events: none;
}

@keyframes shimmerMove {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Glow Orbs */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    animation: orbPulse 6s ease-in-out infinite;
}

.glow-orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(212, 168, 83, 0.2);
    top: 10%;
    right: 10%;
}

.glow-orb-2 {
    width: 250px;
    height: 250px;
    background: rgba(139, 105, 20, 0.15);
    bottom: 20%;
    left: 5%;
    animation-delay: -3s;
}

@keyframes orbPulse {

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

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Light rays */
.light-rays {
    position: fixed;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translateX(-50%);
    background: conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(212, 168, 83, 0.03) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(212, 168, 83, 0.03) 50deg,
            transparent 60deg,
            transparent 80deg,
            rgba(212, 168, 83, 0.03) 90deg,
            transparent 100deg,
            transparent 120deg,
            rgba(212, 168, 83, 0.03) 130deg,
            transparent 140deg,
            transparent 160deg,
            rgba(212, 168, 83, 0.03) 170deg,
            transparent 180deg,
            transparent 200deg,
            rgba(212, 168, 83, 0.03) 210deg,
            transparent 220deg,
            transparent 240deg,
            rgba(212, 168, 83, 0.03) 250deg,
            transparent 260deg,
            transparent 280deg,
            rgba(212, 168, 83, 0.03) 290deg,
            transparent 300deg,
            transparent 320deg,
            rgba(212, 168, 83, 0.03) 330deg,
            transparent 340deg,
            transparent 360deg);
    animation: lightRaysRotate 60s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes lightRaysRotate {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Animated Background Pattern */
.bg-pattern {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    background-image:
        radial-gradient(circle at 20% 80%, var(--gold-glow) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--gold-glow) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(212, 168, 83, 0.1) 0%, transparent 30%);
    animation: patternShift 20s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes patternShift {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Decorative Lines */
.deco-line {
    position: fixed;
    background: linear-gradient(180deg, transparent, var(--gold-400), transparent);
    opacity: 0.1;
    z-index: 0;
}

.deco-line-1 {
    left: 10%;
    top: 0;
    width: 1px;
    height: 100%;
    animation: lineFloat 8s ease-in-out infinite;
}

.deco-line-2 {
    right: 10%;
    top: 0;
    width: 1px;
    height: 100%;
    animation: lineFloat 8s ease-in-out infinite 2s;
}

.deco-line-3 {
    left: 25%;
    top: 0;
    width: 1px;
    height: 60%;
    animation: lineFloat 6s ease-in-out infinite 1s;
}

.deco-line-4 {
    right: 25%;
    top: 40%;
    width: 1px;
    height: 60%;
    animation: lineFloat 6s ease-in-out infinite 3s;
}

@keyframes lineFloat {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.15;
    }
}

/* Corner Decorations */
.corner-deco {
    position: fixed;
    width: 120px;
    height: 120px;
    border: 1px solid var(--border-gold);
    opacity: 0.3;
    z-index: 0;
}

.corner-deco-tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.corner-deco-tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
}

.corner-deco-bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
}

.corner-deco-br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

/* Main Container */
.main-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Glass Card */
.glass-card {
    width: 100%;
    max-width: 500px;
    background: var(--bg-card);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--border-primary);
    border-radius: 28px;
    padding: 28px 24px;
    position: relative;
    box-shadow: var(--shadow-glow), 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    transition: background var(--transition-medium), border var(--transition-medium), box-shadow var(--transition-medium);
    animation: cardReveal 0.8s ease-out;
}

@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card Glow Border */
.glass-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(135deg, var(--gold-400), transparent 40%, transparent 60%, var(--gold-400));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
}

/* Theme Toggle */
.theme-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background: var(--bg-item);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-medium);
    z-index: 10;
}

.theme-toggle:hover {
    background: var(--bg-item-hover);
    transform: rotate(15deg) scale(1.05);
}

.theme-toggle:focus-visible,
.link-item:focus-visible,
.contact-btn:focus-visible {
    outline: 3px solid var(--gold-600);
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    fill: var(--gold-400);
    transition: transform var(--transition-medium);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: none;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 20px;
}

.logo-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.logo-frame {
    position: relative;
    width: 220px;
    height: 110px;
    border: 2px solid var(--gold-400);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    margin-bottom: 10px;
    box-shadow: 0 8px 32px rgba(212, 168, 83, 0.3);
    padding: 12px;
    overflow: hidden;
}

.logo-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--border-gold);
    border-radius: 14px;
    pointer-events: none;
}

.logo-crown {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.logo-crown svg {
    width: 28px;
    height: 28px;
    fill: var(--gold-400);
    filter: drop-shadow(0 2px 4px var(--gold-glow));
}

.logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--gold-glow));
}

.brand-name {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 10px;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500), var(--gold-300));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    margin-bottom: 4px;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.brand-tagline {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
}

.divider-line {
    height: 1px;
    width: 50px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.divider-diamond {
    width: 6px;
    height: 6px;
    background: var(--gold-400);
    transform: rotate(45deg);
}

/* Links Grid - 2 columns */
.links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.link-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--bg-item);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-medium);
    overflow: hidden;
    cursor: pointer;
}

.link-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--gold-glow), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.link-item:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: 0 12px 24px -8px var(--gold-glow);
}

.link-item:hover::before {
    opacity: 1;
}

.link-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.2), rgba(212, 168, 83, 0.05));
    transition: all var(--transition-medium);
}

.link-item:hover .link-icon {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    transform: scale(1.1);
}

.link-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--gold-400);
    transition: fill var(--transition-medium);
}

.link-item:hover .link-icon svg {
    fill: var(--bg-primary);
}

.link-title {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    position: relative;
}

/* Featured Link (WhatsApp) */
.link-item.featured {
    grid-column: span 2;
    flex-direction: row;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.1), rgba(212, 168, 83, 0.02));
    border-color: var(--border-gold);
}

.link-item.featured .link-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
}

.link-item.featured .link-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--bg-primary);
}

.link-item.featured .link-content {
    flex: 1;
    text-align: left;
}

.link-item.featured .link-title {
    font-size: 14px;
    margin-bottom: 2px;
}

.link-item.featured .link-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
}

.link-item.featured .link-arrow {
    opacity: 0.5;
    transition: all var(--transition-medium);
}

.link-item.featured .link-arrow svg {
    width: 18px;
    height: 18px;
    fill: var(--gold-400);
}

.link-item.featured:hover .link-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Pulse animation for featured */
.link-item.featured::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--gold-400);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* Contact Row */
.contact-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-item);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    transition: all var(--transition-medium);
}

.contact-btn:hover {
    background: var(--bg-item-hover);
    border-color: var(--border-gold);
    color: var(--text-primary);
}

.contact-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--gold-400);
}

/* Address Row */
.address-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-item);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    animation: itemIn 0.5s ease-out 0.6s both;
}

.address-row svg {
    width: 14px;
    height: 14px;
    fill: var(--gold-400);
    flex-shrink: 0;
}

.address-row span {
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

/* Footer */
.footer {
    text-align: center;
    margin-top: 10px;
}

.footer-text {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Stagger Animations */
.link-item:nth-child(1) {
    animation: itemIn 0.5s ease-out 0.1s both;
}

.link-item:nth-child(2) {
    animation: itemIn 0.5s ease-out 0.15s both;
}

.link-item:nth-child(3) {
    animation: itemIn 0.5s ease-out 0.2s both;
}

.link-item:nth-child(4) {
    animation: itemIn 0.5s ease-out 0.25s both;
}

.link-item:nth-child(5) {
    animation: itemIn 0.5s ease-out 0.3s both;
}

.link-item:nth-child(6) {
    animation: itemIn 0.5s ease-out 0.35s both;
}

.link-item:nth-child(7) {
    animation: itemIn 0.5s ease-out 0.4s both;
}

.link-item:nth-child(8) {
    animation: itemIn 0.5s ease-out 0.45s both;
}

.link-item:nth-child(9) {
    animation: itemIn 0.5s ease-out 0.5s both;
}

@keyframes itemIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-height: 700px) {
    .glass-card {
        padding: 20px 20px;
    }

    .logo-frame {
        width: 180px;
        height: 90px;
    }

    .logo-letter {
        font-size: 26px;
    }

    .brand-name {
        font-size: 22px;
    }

    .links-grid {
        gap: 8px;
    }

    .link-item {
        padding: 12px 6px;
    }

    .link-icon {
        width: 32px;
        height: 32px;
    }

    .link-item.featured {
        padding: 14px 16px;
    }
}

@media (max-width: 400px) {
    .glass-card {
        padding: 20px 16px;
        border-radius: 24px;
    }

    .logo-frame {
        width: min(180px, calc(100vw - 190px));
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .brand-name {
        font-size: 20px;
        letter-spacing: 6px;
    }

    .contact-btn {
        padding: 8px 12px;
        font-size: 10px;
    }
}

/* Keep the original click effect in the external stylesheet. */
.link-ripple {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background: var(--gold-glow);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}