@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ---------------------------------------------------------------
   CORPORATE BLUE THEME — birebir src/index.css token değerleri
----------------------------------------------------------------*/
:root {
  color-scheme: light;

  --background-50: 0.19 0.032 264;
  --background-100: 0.25 0.036 264;
  --background-200: 0.33 0.04 264;
  --background-300: 0.45 0.04 264;
  --background-400: 0.58 0.035 262;
  --background-500: 0.72 0.025 260;
  --background-600: 0.85 0.018 258;
  --background-700: 0.912 0.014 256;
  --background-800: 0.948 0.011 254;
  --background-900: 0.998 0.001 255;
  --background-950: 0.973 0.008 251;

  --foreground-50: 0.16 0.022 264;
  --foreground-100: 0.23 0.026 264;
  --foreground-200: 0.31 0.026 264;
  --foreground-300: 0.4 0.024 262;
  --foreground-400: 0.47 0.022 260;
  --foreground-500: 0.55 0.02 258;
  --foreground-600: 0.64 0.018 256;
  --foreground-700: 0.73 0.015 254;
  --foreground-800: 0.82 0.012 252;
  --foreground-900: 0.9 0.008 250;
  --foreground-950: 0.958 0.005 250;

  --primary-50: 0.972 0.015 255;
  --primary-100: 0.94 0.035 255;
  --primary-200: 0.875 0.062 257;
  --primary-300: 0.52 0.19 262;
  --primary-400: 0.465 0.19 262;
  --primary-500: 0.53 0.2 262;
  --primary-600: 0.45 0.185 263;
  --primary-700: 0.38 0.16 263;
  --primary-800: 0.31 0.13 263;
  --primary-900: 0.25 0.1 263;
  --primary-950: 0.19 0.07 263;

  --accent-50: 0.975 0.014 225;
  --accent-100: 0.945 0.03 226;
  --accent-200: 0.895 0.058 228;
  --accent-300: 0.5 0.11 232;
  --accent-400: 0.58 0.125 232;
  --accent-500: 0.66 0.13 233;
  --accent-600: 0.58 0.12 234;
  --accent-700: 0.49 0.105 235;
  --accent-800: 0.41 0.088 236;
  --accent-900: 0.33 0.07 237;
  --accent-950: 0.25 0.05 238;

  --secondary-50: 0.972 0.008 252;
  --secondary-100: 0.94 0.014 252;
  --secondary-200: 0.89 0.02 252;
  --secondary-300: 0.48 0.048 255;
  --secondary-400: 0.52 0.048 255;
  --secondary-500: 0.56 0.045 255;
  --secondary-600: 0.49 0.042 256;
  --secondary-700: 0.41 0.038 257;
  --secondary-800: 0.33 0.032 258;
  --secondary-900: 0.26 0.026 259;
  --secondary-950: 0.19 0.02 260;

  --on-primary: 0.995 0.002 255;

  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: 'Manrope', system-ui, sans-serif;
}

.theme-dark {
  color-scheme: dark;

  --background-50: 0.96 0.01 250;
  --background-100: 0.91 0.015 250;
  --background-200: 0.83 0.02 251;
  --background-300: 0.7 0.025 252;
  --background-400: 0.55 0.032 254;
  --background-500: 0.42 0.04 256;
  --background-600: 0.33 0.045 258;
  --background-700: 0.27 0.05 259;
  --background-800: 0.225 0.054 260;
  --background-900: 0.185 0.055 261;
  --background-950: 0.145 0.05 262;

  --foreground-50: 0.985 0.004 250;
  --foreground-100: 0.965 0.008 250;
  --foreground-200: 0.92 0.012 251;
  --foreground-300: 0.87 0.015 251;
  --foreground-400: 0.76 0.02 252;
  --foreground-500: 0.66 0.025 253;
  --foreground-600: 0.56 0.03 254;
  --foreground-700: 0.47 0.032 255;
  --foreground-800: 0.38 0.034 256;
  --foreground-900: 0.29 0.032 257;
  --foreground-950: 0.2 0.03 258;

  --primary-50: 0.97 0.02 250;
  --primary-100: 0.93 0.045 252;
  --primary-200: 0.87 0.08 255;
  --primary-300: 0.8 0.11 256;
  --primary-400: 0.71 0.15 259;
  --primary-500: 0.63 0.175 261;
  --primary-600: 0.55 0.19 262;
  --primary-700: 0.46 0.17 263;
  --primary-800: 0.37 0.14 263;
  --primary-900: 0.28 0.11 263;
  --primary-950: 0.2 0.08 263;

  --accent-50: 0.97 0.02 225;
  --accent-100: 0.94 0.04 226;
  --accent-200: 0.89 0.07 228;
  --accent-300: 0.84 0.1 230;
  --accent-400: 0.78 0.12 231;
  --accent-500: 0.72 0.13 232;
  --accent-600: 0.63 0.12 233;
  --accent-700: 0.54 0.11 234;
  --accent-800: 0.45 0.09 235;
  --accent-900: 0.36 0.07 236;
  --accent-950: 0.27 0.05 237;

  --secondary-50: 0.96 0.01 250;
  --secondary-100: 0.92 0.016 251;
  --secondary-200: 0.86 0.024 252;
  --secondary-300: 0.78 0.032 253;
  --secondary-400: 0.69 0.04 254;
  --secondary-500: 0.6 0.045 255;
  --secondary-600: 0.51 0.042 256;
  --secondary-700: 0.43 0.038 257;
  --secondary-800: 0.35 0.032 258;
  --secondary-900: 0.28 0.026 259;
  --secondary-950: 0.2 0.02 260;

  --on-primary: 0.995 0.002 255;
}

/* ---------------- base ---------------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: oklch(var(--background-950));
  color: oklch(var(--foreground-300));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: radial-gradient(circle at 8% -10%, oklch(var(--primary-500) / 0.1), transparent 40%),
    radial-gradient(circle at 96% 2%, oklch(var(--accent-500) / 0.09), transparent 36%);
  background-attachment: fixed;
}

img, video, iframe { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: oklch(var(--foreground-50));
  letter-spacing: -0.02em;
}

::selection {
  background-color: oklch(var(--primary-500) / 0.22);
  color: oklch(var(--foreground-50));
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: oklch(var(--background-950)); }
::-webkit-scrollbar-thumb { background: oklch(var(--foreground-50) / 0.18); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--foreground-50) / 0.3); }

/* ---------------- components ---------------- */
.container-x {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .container-x { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) {
  .section-pad { padding-top: 6rem; padding-bottom: 6rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid oklch(var(--primary-500) / 0.2);
  background-color: oklch(var(--primary-50));
  padding: 0.25rem 0.625rem;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: oklch(var(--primary-700));
  font-family: var(--font-label);
}

.theme-dark .eyebrow {
  border-color: oklch(var(--primary-400) / 0.3);
  background-color: oklch(var(--primary-500) / 0.16);
  color: oklch(var(--primary-300));
}

.h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: oklch(var(--foreground-50));
}
@media (min-width: 768px) {
  .h2 { font-size: 38px; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background-color: oklch(var(--primary-500));
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 300ms;
  cursor: pointer;
  color: oklch(var(--on-primary));
  box-shadow: 0 16px 32px -22px oklch(var(--primary-600) / 0.95);
  font-family: var(--font-label);
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background-color: oklch(var(--primary-600));
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid oklch(var(--foreground-50) / 0.14);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 300ms;
  cursor: pointer;
  background-color: oklch(var(--background-900) / 0.8);
  color: oklch(var(--foreground-100));
  font-family: var(--font-label);
  text-decoration: none;
}
.btn-outline:hover {
  transform: translateY(-2px);
  border-color: oklch(var(--primary-500) / 0.5);
  color: oklch(var(--primary-600));
}

.glass {
  background: oklch(var(--background-900) / 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid oklch(var(--foreground-50) / 0.08);
}

.card-surface {
  border-radius: 1rem;
  border: 1px solid oklch(var(--foreground-50) / 0.08);
  background-color: oklch(var(--background-900));
  box-shadow: 0 22px 50px -38px oklch(var(--foreground-50) / 0.4);
}

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: oklch(var(--foreground-300));
  transition: color 300ms;
  text-decoration: none;
}
.link-underline:hover { color: oklch(var(--primary-500)); }

.text-opal {
  background-image: linear-gradient(96deg, oklch(var(--primary-700)), oklch(var(--primary-500)) 46%, oklch(var(--accent-600)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.theme-dark .text-opal {
  background-image: linear-gradient(96deg, oklch(var(--primary-200)), oklch(var(--primary-400)) 45%, oklch(var(--accent-300)) 100%);
}

.on-primary { color: oklch(var(--on-primary)); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.grid-noise {
  background-image: linear-gradient(oklch(var(--foreground-50) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--foreground-50) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.radial-fade {
  mask-image: radial-gradient(circle at 50% 45%, black 35%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 35%, transparent 72%);
}

.shadow-panel {
  box-shadow: 0 30px 70px -46px oklch(var(--primary-900) / 0.55),
    0 2px 8px -4px oklch(var(--foreground-50) / 0.08);
}

/* ---------------------------------------------------------------
   OPENING SEQUENCE — faceted gem → light burst → letter reveal
----------------------------------------------------------------*/
.opal-preloader { animation: preloaderOut 0.68s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@keyframes preloaderOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; visibility: hidden; transform: scale(1.06); }
}

.opal-stage { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.opal-preloader .opal-stage { opacity: 0; transform: translateY(-16px) scale(0.985); }

.opal-aurora { opacity: 0; animation: opalAurora 3.1s cubic-bezier(0.33, 0, 0.2, 1) forwards; }

@keyframes opalAurora {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  32% { opacity: 0.95; }
  100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.35); }
}

.opal-burst {
  opacity: 0;
  background-image: radial-gradient(circle, oklch(1 0 0 / 0.98) 0%, oklch(var(--primary-200) / 0.9) 20%, oklch(var(--primary-500) / 0.42) 44%, transparent 68%);
  animation: opalBurst 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards;
}

@keyframes opalBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  16% { opacity: 1; }
  52% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6.4); }
}

.opal-burst-ring {
  opacity: 0;
  border: 1px solid oklch(var(--primary-100) / 0.55);
  animation: opalBurstRing 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
}

@keyframes opalBurstRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24); }
  18% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
}

.opal-gem-in { animation: opalGemIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes opalGemIn {
  0% { opacity: 0; transform: scale(0.42) rotate(-16deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.opal-letter {
  opacity: 0;
  margin-right: 0.18em;
  animation: opalLetterIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes opalLetterIn {
  0% { opacity: 0; transform: translateY(18px); filter: blur(10px); text-shadow: 0 0 34px oklch(var(--primary-200) / 0.95); }
  60% { opacity: 1; text-shadow: 0 0 20px oklch(var(--primary-200) / 0.55); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); text-shadow: 0 0 0 oklch(var(--primary-200) / 0); }
}

.opal-rule {
  transform: scaleX(0);
  transform-origin: center;
  animation: opalRuleDraw 1s cubic-bezier(0.22, 1, 0.36, 1) 1.14s forwards;
}

@keyframes opalRuleDraw { to { transform: scaleX(1); } }

.opal-fade-up { opacity: 0; animation: opalFadeUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes opalFadeUp {
  0% { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------------------------------------------------------------
   BRAND MARK — octagonal opal stone in a blue setting
----------------------------------------------------------------*/
.opal-mark { filter: drop-shadow(0 7px 14px oklch(var(--primary-900) / 0.26)); }

.opal-bezel,
.opal-bezel-ring,
.opal-setting,
.opal-stone,
.opal-stone-top,
.opal-stone-left,
.opal-stone-right,
.opal-stone-iris {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.opal-bezel {
  background-image: linear-gradient(155deg, oklch(var(--primary-300)) 0%, oklch(var(--primary-600)) 42%, oklch(var(--primary-900)) 100%);
}

.opal-bezel-ring { background-color: oklch(1 0 0 / 0.62); }

.opal-setting { background-image: linear-gradient(160deg, oklch(var(--primary-800)) 0%, oklch(var(--primary-950)) 100%); }

.opal-stone {
  background-image: linear-gradient(150deg, oklch(0.995 0.006 240) 0%, oklch(var(--primary-100)) 44%, oklch(var(--accent-200)) 100%);
}

.opal-stone-top {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 50% 45%, 0% 30%);
  background-color: oklch(1 0 0 / 0.92);
}

.opal-stone-left {
  clip-path: polygon(0% 30%, 50% 45%, 50% 100%, 30% 100%, 0% 70%);
  background-color: oklch(var(--primary-700) / 0.52);
}

.opal-stone-right {
  clip-path: polygon(50% 45%, 100% 30%, 100% 70%, 70% 100%, 50% 100%);
  background-color: oklch(var(--primary-500) / 0.3);
}

.opal-stone-iris {
  background-image: linear-gradient(90deg, transparent 44%, oklch(1 0 0 / 0.8) 50%, transparent 56%);
}

.opal-spark {
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  background-color: oklch(1 0 0 / 0.96);
  filter: drop-shadow(0 0 5px oklch(var(--primary-200) / 0.9));
}

/* ---------------- helpers ---------------- */
.reveal-init {
  opacity: 0;
  transform: translateY(26px);
}

.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .opal-preloader,
  .opal-aurora,
  .opal-burst,
  .opal-burst-ring,
  .opal-gem-in,
  .opal-letter,
  .opal-rule,
  .opal-fade-up {
    animation-duration: 0.01ms;
    animation-delay: 0ms !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}