/* ============================================================
   KÖK SAHNE — catiHero'nun CSS'i, stil.css + cati.css'ten AYIKLANDI.
   ELLE DÜZENLEME: kaynak dosyaları düzelt, sonra  node arac/kok-sahne-css.cjs
   178 kural · 11 keyframes · 50 değişken · 4 font
   ============================================================ */
@font-face {font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("/varlik/font/bricolage-latin.woff2") format("woff2");}
@font-face {font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url("/varlik/font/bricolage-latin-ext.woff2") format("woff2");}
@font-face {font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/varlik/font/schibsted-grotesk.woff2') format('woff2');}
@font-face {font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/varlik/font/martian-mono.woff2') format('woff2');}
.ca-hero {
  --alan: #a2481f;
  --alan-2: #2b2218;
  --asit: #d4f24b;
  --ayrac: #c2af92;
  --cizgi: #e4d8c6;
  --dur-kisa: 0.3s;
  --dur-yavas: 0.55s;
  --dur-yuz-dalga: 4.4s;
  --dur-yuz-yalpa: 5.9s;
  --ev: cubic-bezier(0.2, 0, 0, 1);
  --ev-2: var(--ev);
  --f-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --f-etiket: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --f-govde: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --g1: 0 1px 2px -1px rgba(61, 44, 28, 0.16);
  --gecis: var(--dur-kisa) var(--ev);
  --genis: min(82rem, 92vw);
  --golge: 0 1px 0 rgba(43, 34, 24, 0.04), 0 12px 32px -20px rgba(43, 34, 24, 0.35);
  --hat: #c2af92;
  --isik: #fffdf9;
  --kagit: #fbf7f0;
  --kagit-2: #f6e8db;
  --kagit-3: #f2ece1;
  --levha-ust: #b4552a;
  --ls-dev: 0em;
  --ls-kart: 0em;
  --murekkep: #2b2218;
  --murekkep-2: #453a2e;
  --murekkep-3: #5a5044;
  --pad: clamp(18px, 2.4vw, 36px);
  --r-md: 20px;
  --r-plaka: 14px;
  --r-tam: 999px;
  --r-xs: 8px;
  --staggered-translate-y: 30px;
  --tas: #f2ede4;
  --vurgu: #c05a2e;
  --vurgu-koyu: #a2481f;
  --yuz-don: 1.2deg;
  --yuz-faz-1: -0.78s;
  --yuz-faz-2: -1.38s;
  --yuz-x: 4px;
  --yuz-y: 9px;
  --yz-buyuk: 16.5px;
  --yz-govde: 14px;
  --yz-h1: 30px;
  --yz-h4: 18px;
  --yz-kucuk: 14px;
  --yz-mikro: 14px;
  --yz-orta: 15.5px;
}
.mono {font-family: var(--f-etiket);
  
  font-size: var(--yz-mikro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--murekkep-3);}
.kabuk {width: 100%;
  max-width: calc(var(--genis) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);}
.kutu {display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  background: var(--isik);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-kisa) var(--ev), background var(--dur-kisa) var(--ev);}
.kutu:hover {border-color: var(--vurgu);}
.kutu h3 {font-family: var(--f-display); font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.22;
  letter-spacing: var(--ls-kart);
  margin: 0;}
.kutu p {margin: 0;
  font-size: max(14px, 0.93em);
  color: var(--murekkep-2);
  line-height: 1.5;}
.kutu {padding: clamp(22px, 2.6vw, 30px);
  gap: 8px;}
.kutu h3 {font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  letter-spacing: var(--ls-kart);
  line-height: 1.16;}
.kutu > p:last-of-type {margin-top: 2px;}
.ara-kutu {position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(27rem, calc(100vw - var(--pad) * 2));
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  background: var(--kagit);
  border: 1px solid var(--ayrac);
  border-radius: var(--r-md);
  box-shadow: var(--golge);}
.ara-s {display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 60%, transparent);}
.ara-s:last-child {border-bottom: 0;}
.ara-s:hover, .ara-s.etkin {background: var(--kagit-2);}
@media (max-width: 700px) {
  .ara-kutu {right: calc(var(--pad) * -1 + 8px);
    width: calc(100vw - 16px);}
}
@media print {
  .ara-kutu {display: none !important;}
}
.kutu {box-shadow: var(--g1);}
@media (min-resolution: 2dppx) {
  .kutu {border-width: 0.5px;}
}
.g1 {position: relative; overflow: hidden;
  width: 100%; max-width: none; margin: 0; border-radius: 0;
  
  padding: clamp(20px, 2.4vw, 38px) 0 clamp(44px, 5vw, 70px);
  background: radial-gradient(120% 88% at 50% 0%, var(--isik) 0%, var(--kagit) 46%, var(--tas) 100%);}
.g1::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, var(--kagit));}
.g1 .kabuk {position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;}
.g1-mini {display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--yz-mikro); letter-spacing: 0.15em; font-weight: 600;
  
  line-height: 1.2;
  color: var(--murekkep);}
.ik-kiv {width: 13px; height: 13px; flex: none; fill: currentColor;}
.g1 h1 {font-family: var(--f-display); font-optical-sizing: auto;
  font-size: clamp(38px, 6.1vw, 88px); line-height: 1;
  letter-spacing: var(--ls-dev); font-weight: 700;
  
  max-width: 15ch; margin: 16px auto 0;
  
  text-wrap: wrap;}
.g1 .kutu {display: inline-block; background: var(--murekkep); color: var(--asit);
  border-radius: 0.3em; padding: 0.02em 0.24em 0.1em;
  margin-left: 0.04em; letter-spacing: -0.03em;}
.g1-sahne {position: relative; width: 100%; margin: 18px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center; text-align: left;}
.g1-orta {position: relative; width: clamp(250px, 31vw, 430px); aspect-ratio: 1;
  display: grid; place-items: center;}
.g1-daire {position: absolute; inset: 0; border-radius: var(--r-tam); pointer-events: none;
  background:
    radial-gradient(54% 48% at 32% 24%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(92% 88% at 36% 26%, #eaff8e 0%, #dcf75e 30%, var(--asit) 56%,
                    #bcdc36 82%, #a9c927 100%);
  box-shadow:
    0 0 0 1px rgba(120,150,30,0.22),
    0 30px 68px rgba(90,110,20,0.20),
    inset 0 2px 0 rgba(255,255,255,0.75),
    inset -20px -28px 54px rgba(108,140,18,0.24);}
.g1-daire::after {content: ''; position: absolute; inset: -18%; border-radius: inherit;
  background: radial-gradient(50% 50% at 50% 50%, rgba(196,232,74,0.28) 56%, rgba(196,232,74,0) 100%);
  filter: blur(34px); z-index: -1;}
.g1-maskot {position: relative; z-index: 2; width: 62%; height: auto;
  filter: drop-shadow(0 18px 28px rgba(60,26,8,0.26));}
.sr-yigin {display: grid; gap: 10px; position: relative; z-index: 3;}
.sr-sol {margin-right: -64px;}
.sr-sag {margin-left: 0;}
.sr {position: relative; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; min-height: 62px; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--isik), var(--tas) 94%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -9px 16px -11px rgba(120,86,52,0.30),
    0 7px 16px -7px rgba(60,40,20,0.18);
  transition: transform var(--gecis), box-shadow var(--gecis);}
a.sr:hover {transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -9px 16px -11px rgba(120,86,52,0.26),
    0 14px 26px -8px rgba(60,40,20,0.24);}
.sr-one {background: linear-gradient(180deg, #e9ff92, var(--asit) 90%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.85),
    inset 0 -9px 16px -11px rgba(108,140,18,0.42),
    0 7px 16px -7px rgba(120,150,20,0.30);}
.sr-sv {background: var(--murekkep); color: var(--isik); border-radius: var(--r-xs);
  padding: 6px 10px; font-size: var(--yz-mikro); font-weight: 600; letter-spacing: 0.05em;
  line-height: 1.2; flex: none;}
.sr-one .sr-sv {color: var(--asit);}
.sr-ad {font-size: var(--yz-buyuk); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; flex: 1;}
.sr-say {font-style: normal; font-size: var(--yz-kucuk); font-weight: 600; line-height: 1.2;
  color: var(--murekkep-2); white-space: nowrap; margin-right: 30px;}
.sr-one .sr-say {color: #3d4a12;}
.sr-ok {position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: var(--r-tam);
  background: var(--isik); color: var(--murekkep);
  display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(60,40,20,0.16);
  transition: transform var(--gecis);}
a.sr:hover .sr-ok {transform: translateY(-50%) rotate(45deg);}
.ca-hero .sr-yigin > .sr, [data-dil='en'] .g1-sahne .sr-yigin > .sr, [data-dil='de'] .g1-sahne .sr-yigin > .sr {animation: yuz-dalga var(--dur-yuz-dalga) linear infinite, yuz-yalpa var(--dur-yuz-yalpa) linear infinite;
  animation-delay: calc(var(--i, 0) * var(--yuz-faz-1)), calc(var(--i, 0) * var(--yuz-faz-2));}
.ca-hero .sr-yigin > .sr:hover, .ca-hero .sr-yigin > .sr:focus-visible, [data-dil='en'] .g1-sahne .sr-yigin > .sr:hover, [data-dil='en'] .g1-sahne .sr-yigin > .sr:focus-visible, [data-dil='de'] .g1-sahne .sr-yigin > .sr:hover, [data-dil='de'] .g1-sahne .sr-yigin > .sr:focus-visible {animation-play-state: paused;}
@media (prefers-reduced-motion: reduce) {
  .ca-hero .sr-yigin > .sr, [data-dil='en'] .g1-sahne .sr-yigin > .sr, [data-dil='de'] .g1-sahne .sr-yigin > .sr {animation: none;}
}
.ik-ok {width: 15px; height: 15px;}
.sr-olcu {cursor: default; background: none; box-shadow: none; border-radius: 0;
  min-height: 54px; padding: 0 2px; gap: 10px;
  border-bottom: 1px solid var(--cizgi);}
.sr-olcu:last-child {border-bottom: 0;}
.sr-n {font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: var(--yz-h4); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.1; flex: none; margin-left: auto;
  color: var(--murekkep); font-variant-numeric: tabular-nums;}
.sr-olcu .sr-ad {font-weight: 500; color: var(--murekkep-2); font-size: var(--yz-orta); flex: 0 1 auto;}
@media (max-width: 900px) {
  .g1-sahne {grid-template-columns: 1fr; justify-items: center; gap: 20px;}
  .sr-yigin {width: 100%; max-width: 520px;}
  .sr-sol, .sr-sag {margin-right: 0; margin-left: 0;}
  .g1-orta {width: min(300px, 70vw); height: min(300px, 70vw); aspect-ratio: auto;
    order: -1; margin-bottom: 6px;}
}
.hap-asit, .hap-kagit {display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-plaka);
  font-size: var(--yz-orta); font-weight: 600; letter-spacing: -0.014em; line-height: 1.15;
  white-space: nowrap; border: 0; cursor: pointer;
  font-family: inherit;
  transition: transform var(--gecis), box-shadow var(--gecis), color var(--gecis);}
.hap-ok {display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--r-xs); margin-right: -8px;
  transition: transform var(--gecis), background var(--gecis);}
.hap-asit .hap-ok {background: var(--murekkep); color: var(--asit);}
.hap-kagit .hap-ok {background: rgba(43,34,24,0.07); color: var(--vurgu-koyu);}
.hap-asit:hover .hap-ok {transform: translate(2px, -2px);}
.hap-kagit:hover .hap-ok {transform: translate(2px, -2px);}
.hap-asit {color: var(--murekkep);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #ddfa66 0%, var(--asit) 54%, #c1e137 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -9px 16px -10px rgba(96,124,16,0.60),
    0 0 0 1px rgba(133,162,32,0.32),
    0 2px 3px rgba(74,92,16,0.16),
    0 12px 22px -9px rgba(74,92,16,0.34);}
.hap-asit:hover {transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -9px 16px -10px rgba(96,124,16,0.50),
    0 0 0 1px rgba(133,162,32,0.38),
    0 3px 5px rgba(74,92,16,0.18),
    0 20px 32px -12px rgba(74,92,16,0.42);}
.hap-asit:active {transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(96,124,16,0.42),
    0 0 0 1px rgba(133,162,32,0.36),
    0 1px 2px rgba(74,92,16,0.18);}
.hap-kagit {color: var(--murekkep);
  background: linear-gradient(180deg, var(--isik), var(--tas));
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(43,34,24,0.18),
    0 2px 3px rgba(60,40,20,0.10),
    0 12px 22px -10px rgba(60,40,20,0.22);}
.hap-kagit:hover {transform: translateY(-2px); color: var(--vurgu-koyu);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px var(--murekkep),
    0 3px 5px rgba(60,40,20,0.10),
    0 20px 30px -12px rgba(60,40,20,0.26);}
.hap-kagit:active {transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(60,40,20,0.14), 0 0 0 1px var(--hat);}
.hap-asit[aria-disabled='true'], .hap-asit:disabled {filter: grayscale(0.65); opacity: 0.55; pointer-events: none;}
.g1-eylem {display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 26px;}
.g1 .g1-eylem {justify-content: center; gap: 14px; margin-top: 26px;}
.g1-balon {display: flex; justify-content: center; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin: 40px auto 0; max-width: 1000px;}
.bl {position: relative; display: block; text-align: left; max-width: 296px;
  padding: 16px 20px 18px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, var(--isik));
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 0 0 1px rgba(228,220,207,0.95),
    0 3px 6px rgba(60,40,20,0.08),
    0 18px 34px -14px rgba(60,40,20,0.22);
  transition: transform var(--gecis), box-shadow var(--gecis);}
.bl::after {content: ''; position: absolute; left: 28px; bottom: -19px;
  width: 26px; height: 22px; background: var(--isik);
  border-radius: 0 0 var(--r-md) 0;
  border-left: 1px solid rgba(228,220,207,0.95);
  border-bottom: 1px solid rgba(228,220,207,0.95);}
.bl-de {display: block; font-size: var(--yz-buyuk); font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; color: var(--murekkep);}
.bl-tr {display: block; margin-top: 8px; font-size: var(--yz-kucuk); line-height: 1.4; color: var(--murekkep-2);}
.bl-ne {display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--yz-mikro); letter-spacing: 0.11em; font-weight: 600; color: var(--vurgu-koyu);}
.bl:hover {transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 #fff, 0 0 0 1px var(--murekkep),
    0 3px 6px rgba(60,40,20,0.08), 0 26px 42px -16px rgba(60,40,20,0.28);}
.bl-b {margin-top: -18px;}
.bl-c {margin-top: 14px;}
@media (max-width: 900px) {
  .g1-balon {gap: 32px; margin-top: 34px;}
  .bl, .bl-b, .bl-c {margin-top: 0; max-width: none; width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
  .bl, .hap-asit, .hap-kagit, .hap-ok, .sr, .sr-ok {transition: none;}
  .bl:hover, a.sr:hover, .hap-asit:hover, .hap-kagit:hover, .hap-asit:hover .hap-ok, .hap-kagit:hover .hap-ok, a.sr:hover .sr-ok {transform: none;}
}
.g1-mini a {color: inherit; text-underline-offset: 3px;}
.hap-asit[hidden], .hap-kagit[hidden] {display: none;}
.hap-asit, .hap-asit *, .hap-kagit, .hap-kagit *, .sr, .sr *, .bl, .sr .sr-ad, .sr .sr-say, .bl-de, .bl-tr, .bl-ne {text-decoration: none;}
.hap-asit::after, .hap-kagit::after, .bl-ne::after {content: '→';
  display: inline-block;
  transition: transform var(--gecis);}
.hap-asit:hover::after, .hap-kagit:hover::after, .bl:hover .bl-ne::after {transform: translateX(4px);}
.hap-asit[data-ok='yok']::after, .hap-kagit[data-ok='yok']::after {content: none;}
html.js .g1 .g1-mini, html.js .g1 h1, html.js .g1 .g1-sahne, html.js .g1 .g1-eylem, html.js .g1 .g1-balon {animation: gnu-yukari 0.62s var(--ev-2) both;}
html.js .g1 h1 {animation-delay: 0.05s;}
html.js .g1 .g1-sahne {animation-delay: 0.13s;}
html.js .g1 .g1-eylem {animation-delay: 0.21s;}
html.js .g1 .g1-balon {animation-delay: 0.29s;}
html.js .g1-maskot {animation: gnu-suz 7s ease-in-out 1.2s infinite;}
@media (prefers-reduced-motion: reduce) {
  html.js .g1 .g1-mini, html.js .g1 h1, html.js .g1 .g1-eylem, html.js .g1 .g1-sahne, html.js .g1 .sr-yigin, html.js .g1 .g1-balon, html.js .g1-maskot {animation: none !important;
    opacity: 1;
    transform: none;}
  .hap-asit::after, .hap-kagit::after, .bl-ne::after {transition: none;}
}
[data-dil='en'] .g1 {background: radial-gradient(116% 80% at 70% 0%, #1b2743 0%, var(--kagit) 52%, #0b1220 100%);}
[data-dil='en'] .sr {background: linear-gradient(180deg, #22314f, var(--kagit-3));}
[data-dil='en'] .sr-one {background: linear-gradient(180deg, #e9ff92, var(--asit) 90%);}
[data-dil='en'] .sr-one .sr-ad {color: #0e1626;}
[data-dil='en'] .sr-one .sr-say {color: #3d4a12;}
[data-dil='en'] .sr-one .sr-sv {background: #0e1626; color: var(--asit);}
[data-dil='en'] .sr-one .sr-ok {background: #0e1626; color: var(--asit);}
[data-dil='en'] .g1 .kutu {background: var(--asit); color: #0e1626;}
[data-dil='en'] .hap-asit .hap-ok {background: #0e1626; color: var(--asit);}
[data-dil='en'] .hap-kagit .hap-ok {background: rgba(255,255,255,0.10); color: var(--vurgu);}
[data-dil='en'] .sr:not(.sr-olcu), [data-dil='en'] .hap-kagit {box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--hat),
    0 2px 4px rgba(0, 0, 0, 0.34),
    0 12px 24px -12px rgba(0, 0, 0, 0.55);}
[data-dil='en'] .hap-kagit:hover {box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px var(--murekkep-3),
    0 3px 6px rgba(0, 0, 0, 0.36),
    0 20px 34px -14px rgba(0, 0, 0, 0.62);}
[data-dil='en'] .hap-kagit:active {box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--hat);}
[data-dil='en'] .bl {background: linear-gradient(180deg, #22314f, var(--isik));}
[data-dil='en'] .bl::after {background: var(--isik); border-color: var(--hat);}
[data-dil='en'] .bl-ne {color: var(--vurgu);}
[data-dil='en'] .hap-asit {color: #0e1626;}
.g1-aurora {background: var(--kagit);
  
  padding-top: clamp(14px, 1.5vw, 22px);
  padding-bottom: clamp(56px, 6vw, 88px);}
.g1-aurora {overflow: visible;}
.aur-alan {position: absolute; left: 0; right: 0; top: -160px; bottom: 0;
  z-index: 0; overflow: hidden; background: var(--kagit);}
.aur-alan .akis {position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1;}
.aur-alan::after {content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;}
.aurora {position: absolute; inset: -24%;
  filter: blur(96px) saturate(0.98); opacity: 0.38;
  background:
    radial-gradient(40% 44% at 14% 12%, var(--alan) 0%, transparent 64%),
    radial-gradient(35% 39% at 62% 42%, var(--asit) 0%, transparent 62%),
    radial-gradient(33% 37% at 74% 70%, var(--alan-2) 0%, transparent 66%),
    radial-gradient(29% 33% at 26% 76%, var(--vurgu) 0%, transparent 64%),
    var(--kagit);
  animation: gnu-aurora 26s ease-in-out infinite;}
.g1-cam {position: relative; z-index: 2;
  width: min(100%, 70rem);
  margin-inline: auto;
  padding: clamp(20px, 2.3vw, 30px) clamp(20px, 3vw, 44px) clamp(28px, 3.6vw, 48px);
  border-radius: clamp(22px, 2.2vw, 30px);
  background: rgba(255, 253, 249, 0.46);
  backdrop-filter: blur(9px) saturate(1.3);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  box-shadow:
    0 1px 1px rgba(43, 34, 24, 0.05),
    0 18px 44px -22px rgba(43, 34, 24, 0.34);
  isolation: isolate;}
.g1-cam::after {content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; padding: 1.2px;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 25%,
    rgba(255,255,255,0.02) 47%, rgba(255,255,255,0.20) 63%,
    rgba(255,255,255,0.85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;}
.g1-cam .sr {background: rgba(255, 253, 249, 0.52);}
.g1-cam .sr-olcu, [data-dil='en'] .g1-cam .sr-olcu {background: none;}
.g1-cam .sr-one {background: linear-gradient(180deg, #e9ff92, var(--asit) 90%);}
.g1-aurora .g1-balon {position: relative; z-index: 2;}
@media (max-width: 700px) {
  .g1-cam {padding-inline: 16px; border-radius: var(--r-md);}
}
@media (prefers-reduced-motion: reduce) {
  .aurora {animation: none;}
}
[data-dil='en'] .g1-cam {background: rgba(22, 34, 58, 0.52);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.18),
    0 18px 44px -22px rgba(0, 0, 0, 0.55);}
[data-dil='en'] .g1-cam::after {background: linear-gradient(145deg,
    rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 25%,
    rgba(255,255,255,0.01) 47%, rgba(255,255,255,0.08) 63%,
    rgba(255,255,255,0.30) 100%);}
[data-dil='en'] .g1-cam .sr {background: rgba(255, 255, 255, 0.07);}
[data-dil='en'] .g1-cam .sr-one {background: linear-gradient(180deg, #e9ff92, var(--asit) 90%);}
@media (hover: none), (max-width: 760px) {
  .hap-asit, .hap-kagit {min-height: 44px;}
}
.hap-kagit:hover .hap-ok, .hap-kagit:focus-visible .hap-ok {background: var(--vurgu-koyu);
  color: var(--kagit);}
.hap-asit:active .hap-ok, .hap-kagit:active .hap-ok {transform: translate(0, 0);}
@media (max-width: 767px) {
  .aurora {animation: none;
    filter: blur(52px) saturate(0.98);}
}
.md-tabela {display: flex; align-items: center; gap: 14px;}
.ca-hero .md-tabela {justify-content: center; margin-top: 14px; gap: clamp(12px, 1.4vw, 20px);}
.tabela-levha {--lv: 64px;
  width: var(--lv); height: var(--lv); border-radius: calc(var(--lv) * 0.22); flex: none; position: relative;
  background: linear-gradient(160deg, var(--levha-ust), var(--vurgu-koyu) 70%);
  box-shadow: 0 6px 18px rgba(60, 26, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);}
.tabela-levha::before, .tabela-levha::after {content: ''; position: absolute; left: 22%; right: 22%; height: 9.5%; border-radius: var(--r-tam);}
.tabela-levha::before {top: 36%; background: var(--asit);}
.tabela-levha::after {top: 55%; background: var(--isik);}
.md-tabela-dev .tabela-levha {--lv: clamp(48px, 5.9vw, 84px);}
.ca-hero h1.tabela-ad {font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(38px, 6.1vw, 88px); line-height: 0.95; letter-spacing: var(--ls-dev);
  max-width: none; margin: 0; text-wrap: nowrap;}
.mask {display: block; overflow: hidden; padding-bottom: 0.08em;}
.mask > span {display: block;}
.ca-soru {margin: 14px auto 0; max-width: 24ch;
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 700;
  font-size: var(--yz-h1); line-height: 1.2; letter-spacing: var(--ls-kart);
  color: var(--murekkep); text-wrap: balance;}
.ca-hero .g1-cam {background: rgba(255, 253, 249, 0.36);}
.ca-hero .g1-sahne {margin-top: clamp(18px, 2.2vw, 30px);}
.ca-hero .sr-sol .sr-sv {min-width: 52px; text-align: center;}
.lobi-hesap {margin: 18px 0 0; font-size: var(--yz-mikro); letter-spacing: 0.06em; color: var(--murekkep-3); text-transform: none;}
.lobi-hesap a {color: var(--vurgu-koyu);}
.ca-hero .aurora {opacity: 0.32;
  background:
    radial-gradient(32% 30% at 50% 30%, var(--asit) 0%, transparent 68%),
    radial-gradient(54% 36% at 50% 96%, var(--kagit-2) 0%, transparent 74%),
    var(--kagit);}
html.js .ca-hero h1.tabela-ad {animation: none;}
html.js .tabela-levha::before {animation: kilit-sol 0.62s var(--ev) both;}
html.js .tabela-levha::after {animation: kilit-sag 0.62s var(--ev) 0.06s both;}
html.js .mask > span {animation: mask-yukari 0.7s var(--ev) 0.3s both;}
html.js .ca-hero .gec {--staggered-translate-y: 16px;
  animation: bel-op var(--dur-yavas) var(--ev) backwards, bel-ty var(--dur-yavas) var(--ev) backwards;}
html.js .ca-hero .g1-mini {animation-delay: 0.6s;}
html.js .ca-hero .ca-soru {animation-delay: 0.75s;}
html.js .ca-hero .lobi-hesap {animation-delay: 0.7s;}
html.js .ca-hero .g1-orta {animation: daire-bas 0.7s var(--ev) 0.45s both;}
.ca-ara {position: relative; display: flex; align-items: center; gap: 10px;
  width: min(100%, 46rem); margin: 20px auto 0;}
.ca-ara-ik {position: absolute; left: 18px; top: 26px; translate: 0 -50%;
  width: 17px; height: 17px;
  color: var(--murekkep-3); pointer-events: none;
  transition: color var(--dur-kisa) var(--ev);}
.ca-ara:focus-within .ca-ara-ik {color: var(--vurgu-koyu);}
.ca-ara-in {flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 44px;
  font-family: var(--f-govde); font-size: var(--yz-govde); line-height: 1.2;
  color: var(--murekkep); background: var(--isik);
  border: 1px solid var(--hat); border-radius: var(--r-tam);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-kisa) var(--ev);}
.ca-ara-in::placeholder {color: var(--murekkep-3);}
.ca-ara-in::-webkit-search-cancel-button {-webkit-appearance: none;}
.ca-ara-in:focus {border-color: var(--murekkep);}
.ca-ara-dug {flex: none;}
.ca-ara .ara-kutu {top: calc(100% + 8px); left: 0; right: 0; width: auto; text-align: left;}
.ca-ara .ara-s {flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px;}
.ca-ara .ara-s .mono {flex: none; font-size: var(--yz-mikro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--murekkep-3);}
.ca-ara-grup {margin: 0; padding: 10px 14px 6px; font-size: var(--yz-mikro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--murekkep-3);
  background: var(--kagit-2);}
html.js .ca-hero .ca-ara {animation-delay: 0.6s;}
@media (hover: none), (max-width: 760px) {
  .ca-ara-in {height: 44px;}
  .ca-ara-ik {top: 22px;}
}
@media (max-width: 560px) {
  .ca-ara {flex-wrap: wrap; gap: 10px;}
  .ca-ara-in {flex: 1 0 100%;}
  .ca-ara-dug {width: 100%; justify-content: center;}
}
.ca-hero {--px: 0; --py: 0;}
.ca-hero .aurora {translate: calc(var(--px) * 20px) calc(var(--py) * 13px);}
.ca-hero .g1-orta {translate: calc(var(--px) * -9px) calc(var(--py) * -6px);}
.ca-hero .sr-yigin {translate: calc(var(--px) * 4px) calc(var(--py) * 2px);}
.ca-hero .g1-balon {translate: calc(var(--px) * 6px) calc(var(--py) * 3px);}
@media (hover: none), (pointer: coarse) {
  .ca-hero .aurora, .ca-hero .g1-orta, .ca-hero .sr-yigin, .ca-hero .g1-balon {translate: none;}
}
@media (max-width: 560px) {
  .md-tabela {flex-direction: column; gap: 10px;}
  .tabela-levha, .md-tabela-dev .tabela-levha {--lv: 56px;}
  .ca-hero .g1-mini {display: inline;}
  .ca-hero .g1-mini .ik-kiv {display: inline-block; vertical-align: -1px; margin-right: 6px;}
}
@media (prefers-reduced-motion: reduce) {
  html.js .tabela-levha::before, html.js .tabela-levha::after, html.js .mask > span, html.js .ca-hero .gec, html.js .ca-hero .g1-orta {animation: none;}
  .ca-ara-in, .ca-ara-ik {transition: none;}
  .ca-hero .aurora, .ca-hero .g1-orta, .ca-hero .sr-yigin, .ca-hero .g1-balon {translate: none;}
}
@keyframes bel-op {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bel-ty {
  from {
    transform: translateY(var(--staggered-translate-y));
  }
  to {
    transform: none;
  }
}
@keyframes yuz-dalga { 0% { translate: calc(var(--yuz-x) * 0) calc(var(--yuz-y) * -0); } 8.33% { translate: calc(var(--yuz-x) * 0.5) calc(var(--yuz-y) * -0.067); } 16.67% { translate: calc(var(--yuz-x) * 0.866) calc(var(--yuz-y) * -0.25); } 25% { translate: calc(var(--yuz-x) * 1) calc(var(--yuz-y) * -0.5); } 33.33% { translate: calc(var(--yuz-x) * 0.866) calc(var(--yuz-y) * -0.75); } 41.67% { translate: calc(var(--yuz-x) * 0.5) calc(var(--yuz-y) * -0.933); } 50% { translate: calc(var(--yuz-x) * 0) calc(var(--yuz-y) * -1); } 58.33% { translate: calc(var(--yuz-x) * -0.5) calc(var(--yuz-y) * -0.933); } 66.67% { translate: calc(var(--yuz-x) * -0.866) calc(var(--yuz-y) * -0.75); } 75% { translate: calc(var(--yuz-x) * -1) calc(var(--yuz-y) * -0.5); } 83.33% { translate: calc(var(--yuz-x) * -0.866) calc(var(--yuz-y) * -0.25); } 91.67% { translate: calc(var(--yuz-x) * -0.5) calc(var(--yuz-y) * -0.067); } 100% { translate: calc(var(--yuz-x) * -0) calc(var(--yuz-y) * -0); } }
@keyframes yuz-yalpa { 0% { rotate: calc(var(--yuz-don) * 0); } 8.33% { rotate: calc(var(--yuz-don) * 0.5); } 16.67% { rotate: calc(var(--yuz-don) * 0.866); } 25% { rotate: calc(var(--yuz-don) * 1); } 33.33% { rotate: calc(var(--yuz-don) * 0.866); } 41.67% { rotate: calc(var(--yuz-don) * 0.5); } 50% { rotate: calc(var(--yuz-don) * 0); } 58.33% { rotate: calc(var(--yuz-don) * -0.5); } 66.67% { rotate: calc(var(--yuz-don) * -0.866); } 75% { rotate: calc(var(--yuz-don) * -1); } 83.33% { rotate: calc(var(--yuz-don) * -0.866); } 91.67% { rotate: calc(var(--yuz-don) * -0.5); } 100% { rotate: calc(var(--yuz-don) * -0); } }
@keyframes gnu-yukari { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gnu-suz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes gnu-aurora {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.07) rotate(2.5deg); }
}
@keyframes kilit-sol { from { transform: translateX(-46%); } 60% { transform: translateX(6%); } to { transform: none; } }
@keyframes kilit-sag { from { transform: translateX(46%); } 60% { transform: translateX(-6%); } to { transform: none; } }
@keyframes mask-yukari { from { transform: translateY(110%); } to { transform: none; } }
@keyframes daire-bas {
  from { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.04); opacity: 1; }
  to   { transform: none; }
}