/* AppLab — tek stil dosyası, bağımlılık yok.
   Uzay laboratuvarı teması: gece zemini, ay ışığı vurgusu, Bebas Neue
   başlıklar. Her uygulama kendi --accent değerini getirmeye devam eder;
   koyu zeminde okunsun diye açık türevi --accent-isik ile üretilir.

   HTML'e dokunulmaz: bütün görünüm bu dosyadan gelir. */

:root {
  --accent: #8ab4ff;

  /* Koyu zeminde okunabilir accent. Renk karışımını desteklemeyen eski
     tarayıcı accent'in kendisine düşer; yazı yine görünür. */
  --accent-isik: var(--accent);
  --accent-isik: color-mix(in srgb, var(--accent) 58%, #dbe6ff);

  /* Eski değişken adları korunuyor: mevcut kurallar olduğu gibi çalışsın. */
  --kagit: #05060b;
  --kagit-2: #0f1220;
  --murekkep: #eceef5;
  --murekkep-soft: #9aa1b8;
  --cizgi: rgba(200, 212, 255, .11);
  --cizgi-kuvvetli: rgba(200, 212, 255, .26);
  --golge: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 50px -24px rgba(0, 0, 0, .9);
  --yuvarlak: 16px;

  --lunar: #8ab4ff;
  --lunar-parlak: #c9dbff;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 500 17px/1.75 "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em;
  color: var(--murekkep);
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(138, 180, 255, .12), transparent 62%),
    var(--kagit);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Laboratuvar ızgarası — ekrana sabit, kenarlara doğru siliniyor. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 212, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 212, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 35%, transparent 78%);
}

/* Yıldızlar — yavaşça soluklaşıp parlıyor. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1.2px 1.2px at 23% 62%, rgba(201, 219, 255, .7), transparent 60%),
    radial-gradient(1.6px 1.6px at 37% 27%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.1px 1.1px at 51% 78%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 12%, rgba(201, 219, 255, .8), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 48%, rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(1.7px 1.7px at 86% 31%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.1px 1.1px at 93% 71%, rgba(201, 219, 255, .6), transparent 60%),
    radial-gradient(1.3px 1.3px at 16% 89%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 42%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 79% 86%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 58%, rgba(201, 219, 255, .5), transparent 60%);
  animation: yildiz 7s ease-in-out infinite;
}

@keyframes yildiz {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* İçerik yıldızların üstünde kalsın. */
.ust, main, .alt { position: relative; z-index: 1; }

h1, h2, h3, .marka-ad {
  font-family: "Bebas Neue", "Haettenschweiler", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .98;
}

a { color: var(--accent-isik); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lunar-parlak); }

::selection { background: var(--lunar); color: #05060b; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--kagit); }
::-webkit-scrollbar-thumb { background: #1c2036; border: 2px solid var(--kagit); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--lunar); }

main { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

/* ---------- üst bar ---------- */

.ust {
  position: sticky;
  top: .75rem;
  z-index: 20;
  max-width: 62rem;
  width: calc(100% - 2.5rem);
  margin: .75rem auto 0;
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: rgba(9, 11, 19, .78);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.marka { display: flex; flex-direction: column; text-decoration: none; color: inherit; line-height: 1.1; }
.marka-ad {
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: var(--murekkep);
  text-shadow: 0 0 22px rgba(138, 180, 255, .35);
}
.marka-alt {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--lunar);
}
.ust nav { display: flex; gap: 1.5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.ust nav a { color: var(--murekkep-soft); text-decoration: none; transition: color .25s; }
.ust nav a:hover { color: var(--murekkep); }
.ust nav a.secili { color: var(--murekkep); }

/* ---------- giriş ---------- */

.giris { position: relative; padding: 4.5rem 0 1.5rem; max-width: 44rem; }
.giris::before {
  content: "";
  position: absolute;
  top: -9rem;
  right: -10rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 219, 255, .18), rgba(138, 180, 255, .06) 45%, transparent 70%);
  pointer-events: none;
}
.giris h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: .95;
  letter-spacing: .03em;
  margin: 0 0 .9rem;
}
.giris h1::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--lunar), transparent);
}
.giris p { color: var(--murekkep-soft); margin: 0; font-size: 1.05rem; max-width: 38rem; }

/* ---------- kategori + kartlar ---------- */

.kategori { margin-top: 3.5rem; }
.kategori h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.85rem;
  letter-spacing: .05em;
  margin: 0 0 .35rem;
}
.kategori h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cizgi-kuvvetli), transparent);
}
.kategori-not { color: var(--murekkep-soft); margin: 0 0 1.5rem; font-size: .95rem; }

.izgara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

.kart {
  position: relative;
  overflow: hidden;
  display: flex; gap: 1.1rem; align-items: center;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(22, 26, 44, .72), rgba(15, 18, 32, .92));
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  text-decoration: none; color: inherit;
  box-shadow: var(--golge);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .45s;
  --accent-isik: var(--accent);
  --accent-isik: color-mix(in srgb, var(--accent) 58%, #dbe6ff);
}
.kart::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-isik), transparent);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.kart:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-isik) 45%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 26px 60px -28px rgba(0, 0, 0, 1);
}
.kart:hover::after { width: 100%; }
.kart-ikon {
  border-radius: 18px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--cizgi), 0 12px 30px -14px rgba(0, 0, 0, .95);
}
.kart-metin h3 { margin: 0 0 .2rem; font-size: 1.35rem; letter-spacing: .04em; }
.kart-metin p { margin: 0 0 .65rem; color: var(--murekkep-soft); font-size: .92rem; line-height: 1.5; }

.rozet {
  display: inline-block;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .28rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-isik) 14%, transparent);
  color: var(--accent-isik);
  border: 1px solid color-mix(in srgb, var(--accent-isik) 34%, transparent);
}
.rozet-yakinda::before {
  content: "";
  display: inline-block;
  width: .4rem; height: .4rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: nabiz 2.6s ease-in-out infinite;
}

@keyframes nabiz {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* ---------- uygulama sayfası ---------- */

.uygulama-ust { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; padding: 3.5rem 0 .5rem; }
.uygulama-ikon {
  border-radius: 26px;
  box-shadow: 0 0 0 1px var(--cizgi), 0 24px 60px -24px rgba(0, 0, 0, 1), 0 0 60px -18px color-mix(in srgb, var(--accent-isik) 45%, transparent);
}
.uygulama-ust h1 { margin: 0 0 .35rem; font-size: clamp(2.2rem, 5.5vw, 3.4rem); letter-spacing: .04em; }
.slogan { margin: 0 0 .6rem; color: var(--murekkep-soft); font-size: 1.1rem; }
.kunye {
  margin: 0 0 .9rem;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--murekkep-soft);
}

.dugme {
  display: inline-block; margin-right: .5rem;
  padding: .7rem 1.5rem; border-radius: 999px;
  background: var(--accent-isik);
  color: #05060b;
  text-decoration: none;
  font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .1em;
  transition: transform .3s, box-shadow .3s, filter .3s;
}
.dugme:hover {
  color: #05060b;
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent-isik) 80%, transparent);
}

.lead { font-size: 1.15rem; line-height: 1.75; max-width: 44rem; margin: 2rem 0 3rem; color: var(--murekkep); }

.vitrin {
  display: grid; gap: 1rem;
  grid-auto-flow: column; grid-auto-columns: minmax(15rem, 16rem);
  overflow-x: auto; padding-bottom: 1.25rem;
  scroll-snap-type: x mandatory;
}
.vitrin figure { margin: 0; scroll-snap-align: start; }
.vitrin img {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}
.vitrin figure:hover img { transform: translateY(-4px); border-color: var(--cizgi-kuvvetli); }
.vitrin figcaption {
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--murekkep-soft); margin-top: .75rem; text-align: center;
}

.ozellikler {
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 3rem 0;
  padding-top: 2.25rem;
  border-top: 1px solid var(--cizgi);
}
.ozellik h3 { margin: 0 0 .4rem; font-size: 1.25rem; letter-spacing: .04em; }
.ozellik h3::before {
  content: "";
  display: inline-block;
  width: .45rem; height: .45rem;
  border-radius: 1px;
  background: var(--accent-isik);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-isik) 70%, transparent);
  margin-right: .6rem;
  transform: rotate(45deg);
  vertical-align: middle;
}
.ozellik p { margin: 0; color: var(--murekkep-soft); font-size: .97rem; }

.alt-baglantilar {
  display: flex; gap: 1.75rem; flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cizgi);
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
}

/* ---------- metin sayfaları (gizlilik / destek) ---------- */

.metin { max-width: 44rem; padding-top: 3rem; }
.metin h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 .4rem; letter-spacing: .04em; }
.metin h2 { font-size: 1.35rem; margin: 2.75rem 0 .6rem; letter-spacing: .05em; color: var(--murekkep); }
.metin p { color: var(--murekkep-soft); }
.metin ul { padding-left: 1.2rem; color: var(--murekkep-soft); }
.metin li { margin: .4rem 0; }
.metin li::marker { color: var(--accent-isik); }
.firari { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 1.25rem; }
.firari a { color: var(--murekkep-soft); text-decoration: none; }
.firari a:hover { color: var(--murekkep); }

.ozet {
  background: linear-gradient(180deg, rgba(22, 26, 44, .7), rgba(15, 18, 32, .9));
  border: 1px solid var(--cizgi);
  border-left: 2px solid var(--accent-isik);
  border-radius: var(--yuvarlak);
  padding: .4rem 1.3rem;
  margin: 1.75rem 0;
}
.ozet p { color: var(--murekkep); }

details {
  border-bottom: 1px solid var(--cizgi);
  padding: 1rem 0;
}
details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--murekkep);
  transition: color .25s;
}
details summary:hover { color: var(--accent-isik); }
details[open] summary { color: var(--accent-isik); }
details p { color: var(--murekkep-soft); margin: .7rem 0 0; }

/* ---------- alt bilgi ---------- */

.alt {
  max-width: 62rem; margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
  border-top: 1px solid var(--cizgi);
  color: var(--murekkep-soft);
  font-size: .82rem;
  letter-spacing: .04em;
}
.alt p { margin: 0; }

/* E-posta adresinin düz metin hâli — Cloudflare gizlemesine karşı yedek. */
.adres { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==================== Hareket katmanı (assets/lab.js) ====================
   Aşağıdaki sınıfların hepsini lab.js ekler. JS yoksa hiçbiri devreye girmez,
   sayfa yukarıdaki düz haliyle kalır. */

/* ---------- hava kilidi ---------- */

body.kilit-kapali { overflow: hidden; }

.hava-kilidi {
  position: fixed; inset: 0; z-index: 100;
  cursor: pointer;
}
.kapi {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(90deg, rgba(200, 212, 255, .04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(200, 212, 255, .04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(180deg, #0b0e1a, #05060b);
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.kapi::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--lunar) 30%, var(--lunar) 70%, transparent);
  box-shadow: 0 0 24px 2px rgba(138, 180, 255, .55);
}
.kapi-sol { left: 0; }
.kapi-sol::after { right: 0; }
.kapi-sag { right: 0; }
.kapi-sag::after { left: 0; }
.hava-kilidi.aciliyor .kapi-sol { transform: translate3d(-102%, 0, 0); }
.hava-kilidi.aciliyor .kapi-sag { transform: translate3d(102%, 0, 0); }

.hk-orta {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, 86vw);
  text-align: center;
  transition: opacity .45s ease, transform .45s ease;
}
.hava-kilidi.aciliyor .hk-orta { opacity: 0; transform: translate(-50%, -54%); }
.hk-marka {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--murekkep);
  text-shadow: 0 0 30px rgba(138, 180, 255, .45);
  animation: hkNefes 2.4s ease-in-out infinite;
}
.hk-alt {
  margin-top: .3rem;
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .32em;
  color: var(--lunar);
}
.hk-satirlar { margin: 1.6rem 0 1rem; min-height: 4.2rem; text-align: left; }
.hk-satir {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .74rem; letter-spacing: .04em;
  color: var(--murekkep-soft);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.hk-satir.goster { opacity: 1; transform: none; }
.hk-cubuk {
  height: 2px; border-radius: 2px;
  background: rgba(200, 212, 255, .12);
  overflow: hidden;
}
.hk-cubuk i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--lunar), var(--lunar-parlak));
  box-shadow: 0 0 14px rgba(138, 180, 255, .7);
  transition: width 1.7s cubic-bezier(.2, .8, .2, 1);
}
@keyframes hkNefes {
  0%, 100% { text-shadow: 0 0 22px rgba(138, 180, 255, .3); }
  50% { text-shadow: 0 0 44px rgba(138, 180, 255, .65); }
}

/* Kapılar açılınca giriş başlığı ve satırı yükselerek gelir.
   body.js sınıfını script ekler: script yoksa başlık hiç gizlenmez. */
body.js[data-giris] .giris h1,
body.js[data-giris] .giris p {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
}
body.js[data-giris].lab-acik .giris h1 { opacity: 1; transform: none; transition-delay: .25s; }
body.js[data-giris].lab-acik .giris p { opacity: 1; transform: none; transition-delay: .42s; }

/* ---------- durum şeridi ---------- */

.lab-durum {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  margin: .5rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 26, 44, .55), rgba(15, 18, 32, .75));
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--murekkep-soft);
}
.ld-madde { display: inline-flex; align-items: center; gap: .5rem; }
.ld-nokta {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: #6fd39a;
  box-shadow: 0 0 10px #6fd39a;
  animation: nabiz 2s ease-in-out infinite;
}
.ld-saat {
  margin-left: auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  color: var(--lunar);
  font-variant-numeric: tabular-nums;
}

/* ---------- kaydırdıkça belirme ---------- */

.gizli {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1) var(--gecikme, 0ms),
              transform .75s cubic-bezier(.22, 1, .36, 1) var(--gecikme, 0ms);
}
.gizli.gorunur { opacity: 1; transform: none; }
/* Kartın kendi hover dönüşümü belirme dönüşümüyle çakışmasın. */
.kart.gizli, .marka-kart.gizli { transition-property: opacity, transform, border-color, box-shadow; }

/* ---------- kart eğilmesi ---------- */

.kart, .marka-kart {
  transform-style: preserve-3d;
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%;
}
.kart.egik, .marka-kart.egik {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  transition: transform .12s ease-out, border-color .35s, box-shadow .45s;
}
.kart::before, .marka-kart::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--px) var(--py), rgba(201, 219, 255, .10), transparent 60%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.kart.egik::before, .marka-kart.egik::before { opacity: 1; }

/* ---------- imleç ışığı ---------- */

.imlec-isigi {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 180, 255, .16), rgba(138, 180, 255, .04) 40%, transparent 68%);
  pointer-events: none;
  transition: opacity .5s;
  will-change: transform;
}
.imlec-isigi.sonuk { opacity: 0; }

/* ---------- simge yörüngesi ---------- */

.ikon-yuva { position: relative; display: inline-block; flex: 0 0 auto; }
.ikon-yuva .uygulama-ikon { position: relative; z-index: 1; display: block; }
.yorunge {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(200, 212, 255, .12);
  animation: donus 22s linear infinite;
  pointer-events: none;
}
.yorunge i {
  position: absolute; top: 50%; right: -3px;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: var(--accent-isik);
  box-shadow: 0 0 12px var(--accent-isik);
}
.yorunge-2 {
  inset: -28px;
  border-style: dashed;
  border-color: rgba(200, 212, 255, .08);
  animation-duration: 40s;
  animation-direction: reverse;
}
.yorunge-2 i { width: 4px; height: 4px; margin-top: -2px; background: var(--lunar); box-shadow: 0 0 10px var(--lunar); }
@keyframes donus { to { transform: rotate(360deg); } }

/* ---------- üst bar küçülmesi ---------- */

.ust { transition: padding .35s, background .35s, box-shadow .35s; }
.ust.kucuk {
  padding: .6rem 1.4rem;
  background: rgba(9, 11, 19, .9);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .9);
}

@media (prefers-reduced-motion: reduce) {
  .gizli { opacity: 1; transform: none; }
  .yorunge, .hk-marka, .ld-nokta { animation: none; }
}

/* ---------- markalar (FINDCO, Seansta) ---------- */

.markalar { margin-top: 4.5rem; }
.marka-izgara {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.marka-kart {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 26, 44, .72), rgba(15, 18, 32, .92));
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  text-decoration: none; color: inherit;
  box-shadow: var(--golge);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .45s;
  --accent-isik: var(--accent);
  --accent-isik: color-mix(in srgb, var(--accent) 58%, #dbe6ff);
}
.marka-kart::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-isik), transparent);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.marka-kart:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-isik) 45%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 26px 60px -28px rgba(0, 0, 0, 1);
}
.marka-kart:hover::after { width: 100%; }
.marka-gorsel {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--cizgi);
  filter: saturate(.9);
  transition: filter .5s, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.marka-kart:hover .marka-gorsel { filter: saturate(1); transform: scale(1.02); }
.marka-metin { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.marka-etiket {
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--accent-isik);
}
.marka-metin h3 { margin: .35rem 0 .6rem; font-size: 2.2rem; letter-spacing: .05em; }
.marka-metin p { margin: 0 0 1rem; color: var(--murekkep-soft); font-size: .95rem; line-height: 1.6; }
.marka-maddeler {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  font-size: .88rem; color: var(--murekkep);
}
.marka-maddeler li { position: relative; padding-left: 1.05rem; }
.marka-maddeler li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .4rem; height: .4rem;
  border-radius: 1px; transform: rotate(45deg);
  background: var(--accent-isik);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-isik) 70%, transparent);
}
.marka-alan { align-self: flex-start; margin-top: auto; }