:root {
            --kaira-glass-bg: linear-gradient(135deg, rgba(15,23,42,0.82), rgba(30,41,59,0.68));
            --kaira-glass-border: rgba(148,163,184,0.22);
            --kaira-glass-shadow: 0 35px 65px rgba(2,6,23,0.45);
            --kaira-glass-blur: 16px;
            --kaira-chip-bg: rgba(15,23,42,0.72);
            --kaira-chip-border: rgba(96,165,250,0.4);
            --kaira-chip-shadow: 0 20px 40px rgba(8,47,73,0.35);
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #000000;
            color: #e2e8f0;
            overflow-x: hidden;
            overflow-y: auto;
        }
        /* Safe-area + small-viewport helpers for mobile */
        :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
        .h-screen-safe { height: 100vh; height: 100svh; min-height: 100svh; }
        .min-h-screen-safe { min-height: 100vh; min-height: 100svh; }
        .pb-safe { padding-bottom: calc(1rem + var(--safe-bottom)); }
        .mb-safe { margin-bottom: var(--safe-bottom); }
        /* Smooth scrolling on iOS */
        .overflow-y-auto { -webkit-overflow-scrolling: touch; }
        /* Global starfield background canvas */
        #starfield-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
        .view { display: none; }
        .view.active { display: block; }

        .view-shell {
          min-height: 100vh;
          background: radial-gradient(circle at 20% 20%, rgba(56,189,248,0.08), rgba(2,6,23,0) 60%),
                      radial-gradient(circle at 80% 80%, rgba(236,72,153,0.08), rgba(2,6,23,0) 60%),
                      rgba(2,6,23,0.92);
          position: relative;
          overflow: hidden;
        }
        .view-shell > * { position: relative; z-index: 1; }
        .view-shell::before,
        .view-shell::after {
          content: '';
          position: absolute;
          inset: -20%;
          pointer-events: none;
          opacity: 0.35;
          z-index: 0;
        }
        .view-shell::before {
          background:
            linear-gradient(115deg, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0) 55%),
            linear-gradient(295deg, rgba(236,72,153,0.12) 0%, rgba(236,72,153,0) 60%);
          filter: blur(32px);
          transform: translate3d(0,0,0) scale(1.1);
        }
        .view-shell::after {
          background:
            repeating-linear-gradient(90deg, rgba(148,163,184,0.06) 0 2px, transparent 2px 110px),
            repeating-linear-gradient(0deg, rgba(148,163,184,0.05) 0 2px, transparent 2px 110px);
          animation: viewGridDrift 28s linear infinite;
          mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.9) 70%);
        }

        @keyframes viewGridDrift {
          from { transform: translate3d(0,0,0) rotate(0deg) scale(1.2); }
          to { transform: translate3d(-6%, -4%, 0) rotate(2deg) scale(1.2); }
        }

        /* Selection (Landing) visual polish */
        #selection-view { position: relative; overflow: hidden; }
        .selection-stage { position: relative; width: 100%; z-index: 1; }
        .selection-stage::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at 50% -10%, rgba(56,189,248,0.18), rgba(15,23,42,0) 55%),
                      radial-gradient(circle at 10% 90%, rgba(236,72,153,0.12), rgba(15,23,42,0) 55%);
          opacity: 0.7;
          z-index: -2;
        }
        .selection-links {
          position: absolute;
          top: env(safe-area-inset-top, 0px);
          right: env(safe-area-inset-right, 0px);
          display: flex;
          gap: 0.75rem;
          z-index: 3;
        }
        .selection-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.55rem 1.35rem;
          border-radius: 999px;
          font-size: 0.85rem;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          background: rgba(15,23,42,0.65);
          border: 1px solid rgba(148,163,184,0.35);
          color: #e2e8f0;
          box-shadow: 0 15px 30px rgba(15,23,42,0.35);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }
        .selection-link:hover,
        .selection-link:focus-visible {
          background: rgba(56,189,248,0.2);
          border-color: rgba(56,189,248,0.45);
          box-shadow: 0 25px 45px rgba(8,47,73,0.4);
          transform: translateY(-3px);
        }
        .selection-link:focus-visible {
          outline: 2px solid rgba(56,189,248,0.6);
          outline-offset: 4px;
        }
        .selection-effects {
          position: absolute;
          inset: 0;
          pointer-events: none;
          overflow: hidden;
          z-index: -1;
        }
        .selection-grid-content { position: relative; z-index: 2; }
        .selection-aurora {
          position: absolute;
          width: 120vw;
          height: 120vh;
          filter: blur(50px);
          opacity: 0.45;
          transform: translate3d(0,0,0);
          animation: selectionAuroraDrift 24s ease-in-out infinite;
          mix-blend-mode: screen;
        }
        .selection-aurora--left {
          top: -25vh;
          left: -30vw;
          background: radial-gradient(circle at 40% 40%, rgba(59,130,246,0.55), rgba(12,74,110,0) 60%);
          animation-delay: -6s;
        }
        .selection-aurora--right {
          bottom: -30vh;
          right: -25vw;
          background: radial-gradient(circle at 55% 45%, rgba(147,51,234,0.45), rgba(30,58,138,0) 65%);
        }
        .selection-orb {
          position: absolute;
          width: 420px;
          height: 420px;
          border-radius: 50%;
          filter: blur(2px);
          opacity: 0.35;
          transform: translate3d(0,0,0);
          animation: selectionOrbFloat 18s ease-in-out infinite;
        }
        .selection-orb--cyan {
          top: 12vh;
          right: 18vw;
          background: radial-gradient(circle, rgba(45,212,191,0.55) 0%, rgba(45,212,191,0) 65%);
        }
        .selection-orb--violet {
          bottom: 8vh;
          left: 14vw;
          background: radial-gradient(circle, rgba(168,85,247,0.5) 0%, rgba(168,85,247,0) 60%);
          animation-delay: -9s;
        }
        .selection-grid-layer {
          position: absolute;
          inset: 8% 6%;
          border-radius: 40px;
          background:
            linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(148,163,184,0.08) 1px, transparent 1px);
          background-size: 120px 120px;
          opacity: 0.25;
          transform: rotate(2deg) translate3d(0,0,0);
          animation: selectionGridShift 12s linear infinite;
        }
        .selection-title span {
          display: inline-block;
          background: linear-gradient(120deg, rgba(236,72,153,0.9), rgba(59,130,246,0.9));
          -webkit-background-clip: text;
          color: transparent;
          text-shadow: 0 10px 35px rgba(59,130,246,0.35);
        }

        .kaira-gradient-title {
          background: linear-gradient(120deg, rgba(236,72,153,0.75), rgba(59,130,246,0.85));
          -webkit-background-clip: text;
          color: transparent;
          text-shadow: 0 12px 32px rgba(59,130,246,0.35);
          letter-spacing: 0.05em;
        }

        .selection-title {
          margin-right: clamp(192px, 22vw, 360px);
        }
        .selection-subtitle {
          position: relative;
        }
        .selection-subtitle::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -18px;
          transform: translateX(-50%);
          width: 160px;
          height: 2px;
          background: linear-gradient(90deg, rgba(236,72,153,0), rgba(236,72,153,0.5), rgba(56,189,248,0));
          opacity: 0.6;
        }
        .choice-card {
          position: relative;
          overflow: hidden;
          border-radius: 22px;
          background: linear-gradient(135deg, rgba(15,23,42,0.84), rgba(30,41,59,0.75));
          border: 1px solid rgba(148,163,184,0.18);
          box-shadow: 0 25px 40px rgba(2,6,23,0.55);
          transition: transform 0.45s cubic-bezier(.21,1,.23,1), box-shadow 0.45s cubic-bezier(.21,1,.23,1), border-color 0.35s ease;
        }
        .choice-card::before,
        .choice-card::after {
          content: '';
          position: absolute;
          inset: -40%;
          opacity: 0;
          transition: opacity 0.35s ease;
          pointer-events: none;
        }
        .choice-card::before {
          background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(96,165,250,0.35), rgba(59,130,246,0) 55%);
        }
        .choice-card::after {
          background: conic-gradient(from 120deg, rgba(236,72,153,0.3), rgba(34,211,238,0.35), rgba(236,72,153,0.3));
          mix-blend-mode: screen;
          filter: blur(28px);
        }
        .choice-card:hover,
        .choice-card:focus-within {
          transform: translateY(-8px) scale(1.01);
          box-shadow: 0 35px 60px rgba(14,51,95,0.45);
          border-color: rgba(96,165,250,0.4);
        }
        .choice-card:hover::before,
        .choice-card:hover::after,
        .choice-card:focus-within::before,
        .choice-card:focus-within::after { opacity: 1; }
        .choice-card h2 {
          text-shadow: 0 12px 30px rgba(14,165,233,0.2);
        }
        .choice-card:focus-visible {
          outline: 2px solid rgba(96,165,250,0.7);
          outline-offset: 4px;
        }
        .selection-grid-content .choice-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

        .glass-panel {
          background: var(--kaira-glass-bg);
          border: 1px solid var(--kaira-glass-border);
          box-shadow: var(--kaira-glass-shadow);
          backdrop-filter: blur(var(--kaira-glass-blur));
          -webkit-backdrop-filter: blur(var(--kaira-glass-blur));
          border-radius: 22px;
          position: relative;
          overflow: hidden;
          transition: transform 0.35s cubic-bezier(.21,1,.23,1), box-shadow 0.35s ease;
        }
        .glass-panel::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at 20% 20%, rgba(59,130,246,0.22), rgba(59,130,246,0));
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.4s ease, transform 0.4s ease;
          transform: translateY(12%);
        }
        .glass-panel:hover,
        .glass-panel:focus-within {
          transform: translateY(-4px);
          box-shadow: 0 40px 70px rgba(4,11,28,0.45);
        }
        .glass-panel:hover::before,
        .glass-panel:focus-within::before {
          opacity: 0.6;
          transform: translateY(0);
        }

        .glass-chip-group {
          padding: 4px;
          border-radius: 999px;
          background: rgba(15,23,42,0.55);
          border: 1px solid rgba(148,163,184,0.25);
          box-shadow: inset 0 0 0 1px rgba(59,130,246,0.1);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }

        .glass-chip {
          background: var(--kaira-chip-bg);
          border: 1px solid var(--kaira-chip-border);
          color: #e2e8f0;
          box-shadow: var(--kaira-chip-shadow);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .glass-chip:hover {
          transform: translateY(-2px);
          box-shadow: 0 18px 35px rgba(8,47,73,0.45);
        }

        .glass-input {
          background: rgba(15,23,42,0.7);
          border: 1px solid rgba(148,163,184,0.35);
          box-shadow: inset 0 0 0 1px rgba(59,130,246,0.1);
        }
        .glass-input:focus {
          border-color: rgba(56,189,248,0.55);
          box-shadow: 0 0 0 1px rgba(56,189,248,0.4);
        }

        .glass-console {
          background: rgba(10,19,46,0.85);
          border: 1px solid rgba(59,130,246,0.35);
          box-shadow: inset 0 0 0 1px rgba(56,189,248,0.08);
          border-radius: 18px;
        }

        @keyframes selectionAuroraDrift {
          0% { transform: translate3d(0,0,0) scale(1); opacity: 0.45; }
          50% { transform: translate3d(4%, -2%, 0) scale(1.06); opacity: 0.55; }
          100% { transform: translate3d(0,0,0) scale(1); opacity: 0.45; }
        }
        @keyframes selectionOrbFloat {
          0% { transform: translate3d(0,0,0) scale(1); }
          50% { transform: translate3d(0,-18px,0) scale(1.05); }
          100% { transform: translate3d(0,0,0) scale(1); }
        }
        @keyframes selectionGridShift {
          to { background-position: 120px 120px, 120px 120px; }
        }

        @media (max-width: 768px) {
          .selection-grid-layer { inset: 12% 4%; border-radius: 28px; }
          .choice-card { border-radius: 20px; }
          .selection-links { position: static; margin-bottom: 1.75rem; justify-content: center; flex-wrap: wrap; }
          .selection-stage { padding-top: 4.5rem; }
          .selection-title { margin-right: 0; }
          .selection-link { font-size: 0.78rem; padding: 0.5rem 1.1rem; }
          .selection-links + .selection-title { margin-top: 0.5rem; }
          .selection-subtitle::after { width: 120px; }
        }

        @media (prefers-reduced-motion: reduce) {
          .selection-aurora,
          .selection-orb,
          .selection-grid-layer { animation: none !important; }
          .choice-card { transition: border-color 0.3s ease; transform: none !important; }
        }

        /* Digital Afterlife Stilleri */
        #afterlife-bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.6; }
        .afterlife-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5rem 1.5rem;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        .afterlife-section::before {
            content: '';
            position: absolute;
            inset: 12% 6%;
            border-radius: 40px;
            background: radial-gradient(circle at 20% 20%, rgba(56,189,248,0.18), rgba(15,23,42,0) 60%),
                        radial-gradient(circle at 80% 65%, rgba(236,72,153,0.18), rgba(15,23,42,0) 65%);
            opacity: 0.75;
            filter: blur(35px);
            z-index: -1;
        }
        .afterlife-section::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, rgba(15,23,42,0.35), rgba(2,6,23,0));
            z-index: -2;
        }
        .font-serif { font-family: 'Source Serif 4', serif; }
        .fade-in-up { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .is-visible .fade-in-up { opacity: 1; transform: translateY(0); }
        .delay-1 { transition-delay: 0.2s; }
        .delay-2 { transition-delay: 0.4s; }
        .delay-3 { transition-delay: 0.6s; }
        .feature-card {
            border: 1px solid var(--kaira-glass-border);
            background: var(--kaira-glass-bg);
            box-shadow: var(--kaira-glass-shadow);
            backdrop-filter: blur(var(--kaira-glass-blur));
            -webkit-backdrop-filter: blur(var(--kaira-glass-blur));
            border-radius: 22px;
            padding: 1.75rem;
        }
        #countdown-container .time-block { min-width: 90px; }

        /* KΔIRA Demo Stilleri */
        #demo-bg-canvas, #ai-avatar-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
        #demo-bg-canvas { z-index: -1; }
        #ai-avatar-canvas { z-index: 10; pointer-events: none; }
        .glass-container {
            z-index: 1;
            position: relative;
            background: var(--kaira-glass-bg);
            border: 1px solid var(--kaira-glass-border);
            box-shadow: var(--kaira-glass-shadow);
            backdrop-filter: blur(var(--kaira-glass-blur));
            -webkit-backdrop-filter: blur(var(--kaira-glass-blur));
        }
        #chat-container::-webkit-scrollbar, #chat-history::-webkit-scrollbar { width: 6px; }
        #chat-container::-webkit-scrollbar-thumb, #chat-history::-webkit-scrollbar-thumb { background-color: #4a5568; border-radius: 3px; }
        #chat-container::-webkit-scrollbar-track, #chat-history::-webkit-scrollbar-track { background-color: #1a202c; }
        .user-bubble { background: linear-gradient(135deg, #3B82F6, #2563EB); color: white; align-self: flex-end; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25); }
        .assistant-bubble { background: rgba(55, 65, 81, 0.9); color: #E5E7EB; align-self: flex-start; }
        .mic-wrapper { position: relative; display: flex; justify-content: center; align-items: center; }
        .mic-wrapper::before { content: ''; position: absolute; width: 110px; height: 110px; background: radial-gradient(circle, rgba(0, 191, 255, 0.35) 0%, rgba(0, 191, 255, 0) 65%); border-radius: 50%; z-index: 0; animation: aurora 5s infinite linear; }
        #mic-btn { z-index: 1; animation: breathe 3s infinite ease-in-out; }
        @keyframes aurora { 0% { transform: scale(1) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.5) rotate(180deg); opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 0.7; } }
        @keyframes breathe { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(0, 191, 255, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(0, 191, 255, 0.6); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(0, 191, 255, 0.3); } }
        .is-listening { animation: pulse 1.5s infinite !important; }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8); } 70% { box-shadow: 0 0 0 30px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .user-bubble, .assistant-bubble, .chat-user-bubble, .chat-assistant-bubble { animation: fadeIn 0.4s ease-out; }
        #visualizer { width: 100%; height: 60px; margin-bottom: 1rem; opacity: 0; transition: opacity 0.5s ease-in-out; }
#fun-fact-bubble { position: fixed; background: rgba(55, 65, 81, 0.95); color: #E5E7EB; padding: 12px 16px; border-radius: 12px; max-width: 250px; font-size: 14px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, top 1s linear, left 1s linear; transform: scale(0.9) translate(-50%, -100%); }
        #fun-fact-bubble.visible { opacity: 1; transform: scale(1) translate(-50%, -100%); }
        #fun-fact-bubble::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(55, 65, 81, 0.95); }

#asistan-bg-canvas, #asistan-avatar-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#asistan-bg-canvas { z-index: -1; pointer-events: none !important; }
#asistan-avatar-canvas { z-index: 10; pointer-events: none; }
#asistan-fun-fact { position: fixed; background: rgba(55, 65, 81, 0.95); color: #E5E7EB; padding: 12px 16px; border-radius: 12px; max-width: 250px; font-size: 14px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, top 1s linear, left 1s linear; transform: scale(0.9) translate(-50%, -100%); }
#asistan-fun-fact.visible { opacity: 1; transform: scale(1) translate(-50%, -100%); }
#asistan-fun-fact::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(55, 65, 81, 0.95); }
#asistan-visualizer { width: 100%; height: 60px; margin-bottom: 1rem; opacity: 0; transition: opacity 0.5s ease-in-out; }
#asistan-mic-btn { z-index: 1; animation: breathe 3s infinite ease-in-out; }
/* Ensure Asistan UI is always clickable above decorative layers */
#asistan-view .glass-container,
#asistan-view .mic-wrapper,
#asistan-view button,
#asistan-view [id^="asistan-"] {
  pointer-events: auto !important;
  position: relative;
  z-index: 50;
}
/* Make asistan fixed canvases obey the reveal clip during transition */
.reveal-mode #asistan-bg-canvas,
.reveal-mode #asistan-avatar-canvas { position: absolute !important; }

        /* Evrensel Sohbet Arayüzü Stilleri */
        .chat-loader {
            border-top-color: #6366f1;
            animation: spin 1s linear infinite;
        }
        .chat-user-bubble { background-color: #4f46e5; align-self: flex-end; }
        .chat-assistant-bubble { background-color: #374151; align-self: flex-start; }

        /* Enable selection/copy site-wide (was previously disabled globally) */
        /* If you ever need to disable selection in a specific area, wrap it
           with a class like .no-select and target it explicitly instead of * */
        /* Example:
           .no-select, .no-select * { user-select: none; -webkit-user-select: none; }
        */
        input, textarea, select, [contenteditable], .allow-select {
            -webkit-user-select: text !important;
            user-select: text !important;
            pointer-events: auto !important;   /* tıklanıp odaklanabilsin */
            caret-color: #fff;                 /* koyu zeminde imleç görünür olsun */
        }
        /* Disable printing */
        @media print { html, body { display: none !important; } }

        /* Watermark / anti-leak overlay (captured by screenshots) */
        #anti-leak-overlay {
            position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.12;
            background-image:
                repeating-linear-gradient(45deg, transparent, transparent 180px, rgba(255,255,255,.15) 180px, rgba(255,255,255,.15) 200px),
                repeating-linear-gradient(-45deg, transparent, transparent 180px, rgba(255,255,255,.15) 180px, rgba(255,255,255,.15) 200px);
        }
#anti-leak-overlay::before {
            content: 'KΔIRA • UMUT KÖKGÖZ • ' attr(data-stamp) ' • NO REPRODUCTION';
            position: absolute; top: -10%; left: -10%; width: 140%; height: 140%;
            display: grid; place-items: center; white-space: nowrap;
            transform: rotate(-30deg); font-size: 28px; letter-spacing: 2px; text-transform: uppercase;
            color: #ffffff; opacity: 0.25;
        }

        #comments-section {
            position: relative;
            z-index: 1;
        }
        #comments-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(130deg, rgba(56,189,248,0.08), rgba(14,165,233,0));
            opacity: 0.7;
            pointer-events: none;
            z-index: -1;
        }

        #comment-form button {
            border-radius: 999px;
            padding-inline: 1.6rem;
        }
        #comments-list > * {
            background: var(--kaira-glass-bg);
            border: 1px solid var(--kaira-glass-border);
            box-shadow: var(--kaira-glass-shadow);
            backdrop-filter: blur(var(--kaira-glass-blur));
            -webkit-backdrop-filter: blur(var(--kaira-glass-blur));
            border-radius: 18px;
            padding: 1rem 1.2rem;
        }
        /* NASA Platform Stilleri (Adım 2/5) */
        .nasa-tab { 
            padding: 0.5rem 1rem; 
            border-radius: 0.5rem; 
            cursor: pointer; 
            transition: background-color 0.3s, color 0.3s; 
            border: 1px solid transparent; 
            background-color: rgba(31,41,55,0.6); /* gray-800-ish */
            color: #9ca3af; /* gray-400 */
        }
        .nasa-tab.active { 
            background-color: rgba(59,130,246,0.2); /* blue-500 tint */ 
            color: #60a5fa; /* blue-400 */ 
            border-color: rgba(59,130,246,0.5);
        }
        .nasa-content { display: none; }
        .nasa-content.active { display: block; }
        /* Aladin zoom controls */
        #aladin-map { position: relative; }
        .al-zoom {
          position: absolute;
          bottom: 12px;
          right: 12px;
          display: flex;
          flex-direction: column; /* üst üste */
          gap: 8px;
          z-index: 2147483647; /* en üstte kal */
          pointer-events: auto; /* tıklanabilir */
        }
        .al-zoom .al-btn {
          width: 38px;
          height: 38px;
          padding: 0;
          line-height: 1;
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(255,255,255,0.25);
          box-shadow: 0 2px 8px rgba(0,0,0,0.35);
          cursor: pointer;
          pointer-events: auto;
        }
#zoom-controls {
  position: absolute;
  z-index: 2147483647; /* ekstra güvence */
  pointer-events: auto;
}
        .al-legend { pointer-events: none; }

#aladin-map canvas {
  position: relative;
  z-index: 0; /* overlay butonlardan düşük */
}
/* === How-to hover hints === */
.howto-hint { position: fixed; top: 16px; right: 16px; z-index: 30; pointer-events: none; }
.howto-hint .howto-label { display: inline-block; font-size: 12px; color: #93c5fd; background: rgba(30,41,59,0.8); border: 1px solid rgba(148,163,184,0.35); padding: 6px 10px; border-radius: 9999px; backdrop-filter: blur(8px); cursor: pointer; touch-action: manipulation; pointer-events: auto; }
.howto-hint .howto-popover { position: absolute; top: 40px; right: 0; width: min(92vw, 360px); background: rgba(2,6,23,0.92); border: 1px solid rgba(148,163,184,0.25); color: #e5e7eb; padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
/* JS toggled open state (always allowed) */
.howto-hint.open .howto-popover { opacity: 1; transform: translateY(0); pointer-events: auto; }
.howto-popover h4 { margin: 0 0 6px; font-size: 14px; color: #93c5fd; }
.howto-popover ul { margin: 0; padding-left: 18px; font-size: 13px; color: #cbd5e1; }
.howto-popover li { margin: 4px 0; }
/* Mobile sizing: limit height and allow scroll, smaller width */
@media (max-width: 640px) {
  .howto-hint .howto-popover { max-height: 60vh; overflow: auto; width: min(94vw, 320px); right: 8px; }
}
/* Optional close button styling (injected on mobile) */
.howto-popover .howto-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(15,23,42,0.8); border: 1px solid rgba(148,163,184,0.25); color: #93c5fd; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; }
/* === Post-intro black-hole EXIT reveal === */
#site-content { position: relative; will-change: clip-path; }
#site-content.reveal-prep { clip-path: circle(0% at 50% 50%); }
#site-content.reveal-open { animation: siteReveal 1.2s cubic-bezier(.2,.7,0,1) forwards; }
        @keyframes siteReveal {
          from { clip-path: circle(0% at 50% 50%); }
          to   { clip-path: circle(150% at 50% 50%); }
        }

        /* Make fixed canvases obey the reveal clip during transition */
        .reveal-mode #afterlife-bg-canvas,
        .reveal-mode #demo-bg-canvas,
        .reveal-mode #ai-avatar-canvas,
        .reveal-mode #anti-leak-overlay {
          position: absolute !important; /* temporarily not fixed */
        }
        /* --- NASA tabs: force clickability & stacking --- */
        #nasa-view nav, #nasa-view .nasa-tab { pointer-events: auto !important; }
        #nasa-view nav { position: relative; z-index: 50; }
        /* === Editor view typing & z-order safety === */
        #editor-view, #editor-view * {
          -webkit-user-select: text !important;
          user-select: text !important;
          pointer-events: auto !important;
        }
        #editor-view { position: relative; z-index: 2000; }
        #site-content { position: relative; z-index: 0; }
        /* === Chat view typing & click safety === */
        #chat-view, #chat-view * {
          -webkit-user-select: text !important;
          user-select: text !important;
          pointer-events: auto !important;
        }
        #chat-view { position: relative; z-index: 2000; }
        /* === Code Lab view typing & click safety === */
        #code-view, #code-view * {
          -webkit-user-select: text !important;
          user-select: text !important;
          pointer-events: auto !important;
        }
        #code-view { position: relative; z-index: 2000; }

        /* Mobile-friendly tweaks */
        @media (max-width: 640px) {
          .glass-container { padding: 1rem; }
          #asistan-status { font-size: 13px; }
          #asistan-view .rounded-full.w-16.h-16 { width: 60px; height: 60px; }
        }

        /* Respect reduced-motion preferences: tone down background glow */
        @media (prefers-reduced-motion: reduce) {
          .mic-wrapper::before { animation: none; opacity: .4; }
          .is-listening { animation: none !important; }
        }