/* Sherlock — uygulama teması.
 *
 * ECHO tasarımının krem/altın paleti. Yüzeyler cam (blur + yarı saydam beyaz),
 * tek vurgu rengi altın, mürekkep sıcak kahve. Koyu Deep ID temasından hiçbir
 * token taşınmadı; bu dosya app'in tamamını tek başına giydirir.
 */

:root {
  --cream:      #FBF4E6;
  --cream-1:    #FDF9F1;
  --cream-2:    #F7EFDF;
  --cream-3:    #F2E6CE;
  --ink:        #241B12;
  --ink-70:     rgba(42, 32, 20, .70);
  --ink-55:     rgba(42, 32, 20, .55);
  --ink-45:     rgba(42, 32, 20, .45);
  --ink-32:     rgba(42, 32, 20, .32);
  --ink-12:     rgba(42, 32, 20, .12);

  --gold:       #E9C264;
  --gold-2:     #D2A63C;
  --gold-3:     #E4A33C;
  --gold-deep:  #9A6F14;
  --gold-ink:   #8A5E10;

  --glass:      rgba(255, 255, 255, .62);
  --glass-hi:   rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .95);
  --shadow:     0 14px 34px rgba(90, 66, 26, .10);
  --shadow-lg:  0 24px 58px rgba(90, 66, 26, .14);

  --f-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:    20px;
  --r-lg: 28px;
  --r-xl: 34px;

  --device-w: 402px;
  --device-h: 874px;

  /* Ekran dolgusu; gerçek telefonda güvenli alana göre yeniden tanımlanır. */
  --pad-t: 46px;
  --pad-x: 20px;
  --pad-b: 34px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* `[hidden]` tarayıcının `display:none`'ı, ama `.btn { display: flex }` gibi
   sınıf kuralları onu eziyor: gizlediğini sandığın düğme ekranda kalıyor. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream-3);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
input, select { font-family: inherit; }

@keyframes floaty  { 0%,100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-10px) rotate(1.5deg) } }
@keyframes rise    { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes pop     { 0% { opacity: 0; transform: scale(.92) translateY(8px) } 60% { transform: scale(1.02) } 100% { opacity: 1; transform: none } }
@keyframes blink   { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes glow    { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes drift   { to { background-position: 44px 44px, 44px 44px } }
@keyframes scanline{ 0% { transform: translateY(-118px); opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { transform: translateY(118px); opacity: 0 } }
@keyframes pulse   { 0%,100% { opacity: .4; transform: scale(1) } 50% { opacity: .95; transform: scale(1.05) } }
@keyframes fall    { to { transform: translateY(220px) rotate(300deg); opacity: 0 } }

/* --------------------------------------------------------------- the stage */

.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }

.device {
  width: var(--device-w);
  height: min(var(--device-h), calc(100vh - 96px));
  height: min(var(--device-h), calc(100dvh - 96px));
  border-radius: 48px;
  background: var(--cream-1);
  box-shadow: 0 40px 80px rgba(90, 66, 26, .22), 0 0 0 1px rgba(90, 66, 26, .10);
  position: relative;
  overflow: hidden;
}
.device-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 33px; border-radius: 24px; background: #14100B; z-index: 50;
}
.device-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 132px; height: 5px; border-radius: 100px; background: rgba(42, 32, 20, .22); z-index: 60;
}
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.stage-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-32); }

/* Each screen paints its own warm gradient plus two soft gold pools. */
.view {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  position: relative;
  animation: rise .34s ease both;
}
.view::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 380px at 84% 6%, rgba(228, 163, 60, .24), transparent 66%),
    radial-gradient(380px 340px at 6% 88%, rgba(226, 183, 90, .22), transparent 68%),
    linear-gradient(170deg, var(--cream-1) 0%, var(--cream-2) 52%, var(--cream-3) 100%);
  z-index: -1;
}
.view > * { position: relative; }

/* ----------------------------------------------------------------- pieces */

.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  border-radius: var(--r-lg);
}

.mono { font-family: var(--f-mono); }
.eyebrow {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-deep);
}
.dim { color: var(--ink-45); }
.h1 { font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -.028em; text-wrap: pretty; }
.h2 { font-size: 31px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
.h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.sub { font-size: 15.5px; line-height: 1.55; color: var(--ink-55); }
.spacer { flex: 1; }

.brand { display: flex; align-items: center; gap: 9px; }
/* Marka işareti artık bir görsel: dedektifin yüzü. */
.brand__mark { width: 28px; height: 28px; border-radius: 9px; flex: none;
  object-fit: cover; object-position: 50% 20%;
  box-shadow: 0 5px 12px rgba(190, 140, 40, .3); }
.brand__name { font-size: 14.5px; font-weight: 700; letter-spacing: .24em;
  text-indent: .24em; color: var(--ink); }   /* bağlantı içinde de mürekkep rengi kalsın */

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-line);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-55);
}
.pill--gold { border-color: rgba(226, 183, 90, .6); color: var(--gold-deep); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.dot--live { animation: blink 1.4s ease-in-out infinite; }

.btn {
  width: 100%; height: 58px; border-radius: 29px;
  font-size: 17px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: filter .18s, transform .12s;
}
.btn--gold { background: linear-gradient(96deg, var(--gold), var(--gold-2));
  box-shadow: 0 14px 30px rgba(190, 140, 40, .30); }
.btn--gold:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.985); }
.btn--glass { background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line);
  font-weight: 600; box-shadow: var(--shadow); }
.btn--quiet { height: 44px; background: none; color: var(--ink-45);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.btn--quiet:hover { color: var(--ink); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn__spin {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 2px solid rgba(36, 27, 18, .25); border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}

/* ------------------------------------------------------- mascot + bubbles */

.vee { flex: none; display: flex; align-items: flex-end; justify-content: center;
  animation: floaty 5.4s ease-in-out infinite; }
.vee img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 12px 20px rgba(90, 66, 26, .24)); }
.vee--tile {
  border-radius: 30%; overflow: hidden; animation: none;
  background: linear-gradient(150deg, rgba(233, 194, 100, .32), rgba(255, 255, 255, .88));
  border: 1px solid var(--glass-line); box-shadow: 0 12px 26px rgba(90, 66, 26, .14);
}
.vee--tile img { object-fit: cover; object-position: 50% 6%; filter: none; }

.bubble {
  position: relative; padding: 12px 15px; border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); box-shadow: 0 10px 24px rgba(90, 66, 26, .10);
  font-size: 14.5px; line-height: 1.45; animation: pop .5s ease both;
}
.bubble::after {
  content: ''; position: absolute; width: 11px; height: 11px; background: inherit;
  border-left: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line);
  transform: rotate(45deg);
}
.bubble--l::after { left: -6px; bottom: 17px; }
.bubble--r::after { right: -6px; bottom: 17px; border: 0;
  border-right: 1px solid var(--glass-line); border-top: 1px solid var(--glass-line); }
.bubble--t::after { left: 50%; top: -6px; margin-left: -6px; border: 0;
  border-left: 1px solid var(--glass-line); border-top: 1px solid var(--glass-line); }

.row { display: flex; align-items: flex-end; gap: 11px; }

/* ------------------------------------------------------------------ splash */

/* "Gönderilen foto ≈ bulunan foto" karşılaştırması. Eski düzende kartlar
   döndürülüp üst üste biniyordu ve maskot balonun altında kalıyordu; burada
   ikisi eşit boyutta yan yana ve maskot kartın dışında. */
.pair { position: relative; margin-top: 20px; padding: 20px 16px 16px;
  border-radius: var(--r-xl); background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .92); box-shadow: var(--shadow-lg); }
.pair__tag { position: absolute; right: 14px; top: -13px; animation: floaty 6.4s ease-in-out infinite; }
.pair__row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pair__card { position: relative; margin: 0; flex: 1; max-width: 132px; aspect-ratio: 3/4;
  border-radius: 20px; overflow: hidden; background: linear-gradient(150deg, #EFE6D4, #F8F2E6);
  border: 1px solid var(--glass-line); box-shadow: 0 12px 26px rgba(90, 66, 26, .16); }
.pair__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pair__card figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px;
  border-radius: 7px; background: rgba(255, 255, 255, .88);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; color: var(--ink-55); }
.pair__eq { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid;
  place-items: center; font-size: 17px; color: var(--gold-deep);
  background: rgba(255, 255, 255, .95); border: 1px solid var(--glass-line);
  box-shadow: 0 8px 18px rgba(90, 66, 26, .14); animation: pulse 4.6s ease-in-out infinite; }

.faces { display: flex; }
.faces i {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cream-1);
  background: linear-gradient(140deg, #EFE6D4, #F5EEE1);
}
.faces i + i { margin-left: -8px; }
.faces i:last-child { background: rgba(226, 183, 90, .18); display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 8.5px; color: var(--gold-deep); font-style: normal; }

/* -------------------------------------------------------------- onboarding */

.bars { display: flex; gap: 6px; flex: 1; }
.bars i { flex: 1; height: 6px; border-radius: 3px; background: var(--ink-12); }
.bars i[data-on="1"] { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

/* Onboarding görseli mevcut yüksekliği kullanır: sabit 232px telefonda ortada
   büyük bir boşluk bırakıyordu. */
.onb-view { padding: var(--pad-t) 22px var(--pad-b); }
.onb-art { position: relative; flex: 1; min-height: 0; }
.onb-copy { flex: none; }

/* Görsel alanı kalan boşluğa göre büyür ama üst sınırı var: altındaki başlık
   ve düğme her telefonda ekrana sığmalı, "devam" düğmesi kaydırma istememeli.

   Yükseklik `top`/`bottom` ile veriliyor, `height:100%` ile değil: kartın bütün
   çocukları mutlak konumlu olduğu için doğal yüksekliği sıfır ve yüzde
   yüksekliği sıfıra çözülüyordu — kart tamamen kayboluyordu. Genişlik oranından
   geliyor, `margin:auto` da sınıra takıldığında dikeyde ortalıyor. */
/* Yükseklik yuvadan geliyor, `max-height` ile DEĞİL. Eski hâli
   `top/bottom:12px` + `max-height:420px` + `margin:auto` idi: kap 420px'den
   kısaldığında kart yuvaya sığmıyor, `margin:auto` taşmayı altta ve üstte
   eşit dağıtıyor ve kartın alt kenarı bir sonraki satırın ("USE 01 — ...")
   üstüne biniyordu. Şimdi yükseklik kabın kendisinden türüyor, genişlik de
   orandan; kart hiçbir pencere boyunda yuvasından çıkamıyor. */
.quest { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: min(420px, calc(100% - 24px));
  width: auto; max-width: 100%; aspect-ratio: 640 / 800;
  border-radius: 26px; overflow: hidden;
  background: var(--cream-2); box-shadow: 0 18px 38px rgba(90, 66, 26, .18); }
.quest__film { position: absolute; inset: 0; }
.quest img, .quest video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dedektifin cümlesi kartın içinde, alt kenarında: kime ait olduğu belli ve
   ekrandan fazladan yükseklik almıyor. */
.quest__say { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  padding: 11px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.4;
  font-weight: 600; color: var(--cream-1); background: rgba(38, 28, 17, .9);
  box-shadow: 0 10px 22px rgba(60, 42, 10, .28); }
/* Poz, konumunu saran div'den alır; .vee'nin kendisi absolute olursa
   sarmalayıcı 0 yükseklikte kalır ve figür kartın altına düşer. */

/* ------------------------------------------------------------------- perm */

.perk {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px;
  border-radius: var(--r); background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 24px rgba(90, 66, 26, .07);
}
.perk i { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--gold); }
.perk b { display: block; font-size: 15px; font-weight: 600; }
.perk span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-55); }

/* ------------------------------------------------------------------- scan */

.cam {
  flex: 1; min-height: 0; position: relative; border-radius: 32px; overflow: hidden;
  background: linear-gradient(150deg, #EAE0CD, #F5EEE1);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 20px 44px rgba(90, 66, 26, .12);
}
.cam video, .cam img.cam__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);            /* selfie kamerası ayna gibi davranmalı */
}
.cam__mesh {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(228, 163, 60, .20) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(228, 163, 60, .20) 1px, transparent 1px);
  background-size: 44px 44px; animation: drift 9s linear infinite;
}
.cam__corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--gold-2); }
.cam__corner--tl { left: 16px; top: 16px; border-left-width: 2.5px; border-top-width: 2.5px; border-radius: 10px 0 0 0; }
.cam__corner--tr { right: 16px; top: 16px; border-right-width: 2.5px; border-top-width: 2.5px; border-radius: 0 10px 0 0; }
.cam__corner--bl { left: 16px; bottom: 16px; border-left-width: 2.5px; border-bottom-width: 2.5px; border-radius: 0 0 0 10px; }
.cam__corner--br { right: 16px; bottom: 16px; border-right-width: 2.5px; border-bottom-width: 2.5px; border-radius: 0 0 10px 0; }
.cam__label { position: absolute; left: 14px; top: 13px; font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-32); }
.cam__oval {
  position: absolute; left: 50%; top: 50%; width: 182px; height: 230px; transform: translate(-50%, -50%);
}
.cam__oval::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(226, 183, 90, .85);
  border-radius: 91px 91px 78px 78px; background: rgba(255, 255, 255, .16); }
.cam__oval::after { content: ''; position: absolute; inset: 13px; border: 1px dashed rgba(42, 32, 20, .2);
  border-radius: 82px 82px 70px 70px; }
.cam__sweep { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px 3px rgba(226, 183, 90, .35); animation: scanline 2.8s ease-in-out infinite; }

.dock {
  flex: none; display: flex; flex-direction: column; gap: 13px; padding: 15px;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 16px 38px rgba(90, 66, 26, .10);
}
.chips { display: flex; gap: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--ink-55); }
.chips span { flex: 1; text-align: center; padding: 7px 4px; border: 1px solid var(--ink-12); border-radius: 999px; }
.track { height: 8px; border-radius: 4px; background: rgba(42, 32, 20, .1); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .12s linear; }

/* --------------------------------------------------------------- analysis */

.dial { width: 246px; height: 246px; position: relative; display: grid; place-items: center; margin: 0 auto; }
.dial__ring { position: absolute; inset: 0; border-radius: 50%; }
.dial__face { position: absolute; inset: 10px; border-radius: 50%; background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 46px rgba(90, 66, 26, .12); }
.dial__dash { position: absolute; inset: 34px; border: 1px dashed rgba(42, 32, 20, .16);
  border-radius: 50%; animation: spin 32s linear infinite; }
.dial__n { position: relative; text-align: center; }
.dial__n b { display: block; font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }

.steps { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 15px; border-radius: 16px; background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9); font-size: 13.5px; }
.step small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; }

/* ---------------------------------------------------------------- results */

.match {
  display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 22px;
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 24px rgba(90, 66, 26, .07);
  text-align: left; width: 100%; transition: border-color .2s, transform .16s;
}
.match:hover { border-color: rgba(226, 183, 90, .6); }
.match:active { transform: scale(.99); }
.match__av { position: relative; width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 19px; color: rgba(255,255,255,.9); }
.match__rank { position: absolute; left: -5px; top: -5px; padding: 3px 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(226, 183, 90, .5);
  font-family: var(--f-mono); font-size: 8.5px; color: var(--gold-deep); }
.match__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.match__name { font-size: 16px; font-weight: 600; }
.match__handle { font-family: var(--f-mono); font-size: 12px; color: var(--ink-55); }
.match__socials { display: flex; gap: 5px; }
.match__socials i {
  width: 26px; height: 26px; border-radius: 9px; background-color: rgba(255, 255, 255, .92);
  border: 1px solid var(--ink-12); background-repeat: no-repeat; background-position: center;
  background-size: 13px 13px;
}
.match__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.match__pct { font-size: 19px; font-weight: 700; color: var(--gold-ink); }
.match__loc { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-45); }
.blurred { filter: blur(7px); display: inline-block; user-select: none; }

.lock {
  padding: 20px; border-radius: 26px;
  background: linear-gradient(150deg, rgba(226, 183, 90, .24), rgba(228, 163, 60, .24)), rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-line); box-shadow: 0 18px 42px rgba(90, 66, 26, .12);
}

/* ---------------------------------------------------------------- paywall */

.paywall-hero { position: relative; height: 208px; margin-top: 4px; display: grid;
  place-items: end center; }
.paywall-hero__glow { position: absolute; inset: 6% 8% 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,163,60,.34), transparent 66%); filter: blur(8px); }
.paywall-hero__vee { position: relative; z-index: 2; height: 198px; width: auto;
  filter: drop-shadow(0 16px 26px rgba(90, 66, 26, .32)); }
.paywall-hero__fan { position: absolute; inset: 0; z-index: 1; }

/* Kilitli profil kartı: yüz bulanık, platform rozeti net, üstünde kilit. */
.pfan { position: absolute; right: 4px; width: 82px; padding: 6px;
  border-radius: 16px; background: rgba(255, 255, 255, .96);
  border: 1px solid var(--glass-line); box-shadow: 0 10px 24px rgba(90, 66, 26, .2);
  transform: rotate(calc(var(--i) * 4deg - 4deg));
  top: calc(8px + var(--i) * 58px);
  animation: floaty 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .5s); }
.pfan img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px;
  display: block; filter: blur(4px); }
.pfan__row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.pfan__row i { width: 16px; height: 16px; flex: none; border-radius: 5px;
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
  background-color: rgba(42, 32, 20, .07); }
.pfan__row em { flex: 1; height: 6px; border-radius: 3px; background: rgba(42, 32, 20, .12); }
.pfan__lock { position: absolute; right: -7px; top: -7px; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border: 2px solid var(--cream-1); box-shadow: 0 4px 10px rgba(190, 140, 40, .4); }
.pfan__lock svg { width: 12px; height: 12px; }


/* ------------------------------------------------------- tam ekran kamera */

/* Uygulamanın tek koyu ekranı: kamera görüntüsü öne çıksın diye arayüz geri
   çekiliyor. .view'in krem zeminini burada devre dışı bırakıyoruz. */
.cam-view { padding: 0 !important; background: #14100B; overflow: hidden; }
.cam-view::before { display: none; }
.cam-view__feed { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1); }
.cam-view__mesh { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(233,194,100,.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(233,194,100,.10) 1px, transparent 1px);
  background-size: 46px 46px; }
.cam-view__vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(10,8,5,.72) 100%); }

.cam-view__top { position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(52px, calc(20px + env(safe-area-inset-top))) 18px 0; }
.cbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(253,249,241,.9); background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); }
.cbtn svg { width: 17px; height: 17px; }
.cpill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 999px; background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(253,249,241,.92); }

.cam-view__frame { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 250px; height: 320px; z-index: 2; }
.cframe { position: absolute; inset: 0; }
.cframe__oval { position: absolute; inset: 0; border: 2px solid rgba(233,194,100,.95);
  border-radius: 125px 125px 112px 112px;
  box-shadow: 0 0 34px rgba(233,194,100,.45), inset 0 0 34px rgba(233,194,100,.16); }
.cframe__dash { position: absolute; inset: 16px; border: 1px dashed rgba(253,249,241,.35);
  border-radius: 110px 110px 98px 98px; }
.cframe i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #FDF9F1; box-shadow: 0 0 10px rgba(253,249,241,.9);
  animation: blip 2.2s ease-in-out infinite; }
.cframe__mouth { position: absolute; left: 50%; top: 72%; width: 62px; height: 2px;
  margin-left: -31px; border-radius: 2px; background: rgba(253,249,241,.75); }
.cframe__sweep { position: absolute; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 22px 5px rgba(233,194,100,.55);
  animation: camsweep 3s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes camsweep { 0% { top: 6% } 50% { top: 92% } 100% { top: 6% } }
.cframe__corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--gold); }
.cframe__corner--tl { left: -12px; top: 34px; border-left-width: 2.5px; border-top-width: 2.5px; }
.cframe__corner--tr { right: -12px; top: 34px; border-right-width: 2.5px; border-top-width: 2.5px; }
.cframe__corner--bl { left: -12px; bottom: 34px; border-left-width: 2.5px; border-bottom-width: 2.5px; }
.cframe__corner--br { right: -12px; bottom: 34px; border-right-width: 2.5px; border-bottom-width: 2.5px; }
.cpoints { position: absolute; left: 50%; bottom: -42px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(233,194,100,.5); color: rgba(253,249,241,.9);
  background: rgba(20,16,11,.5); font-size: 11px; letter-spacing: .12em; }

.cam-view__coach { position: absolute; left: 14px; right: 14px; bottom: 132px; z-index: 3;
  display: flex; align-items: flex-end; gap: 8px; }
.cam-view__coach img { width: 74px; flex: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.cam-view__coach .bubble { flex: 1; }
.cam-view__coach .bubble b { display: block; font-size: 15px; font-weight: 600; }
.cam-view__coach .bubble span { display: block; margin-top: 2px; font-size: 13px;
  color: var(--ink-55); }

.cam-view__bar { position: absolute; left: 14px; right: 14px; z-index: 3;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 26px; background: rgba(30, 24, 16, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); }
.cthumb { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: rgba(253,249,241,.9); background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18); }
.cthumb svg { width: 19px; height: 19px; }
.cshutter { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 2px solid rgba(253,249,241,.55);
  transition: transform .12s; }
.cshutter span { width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #F4DC9A, var(--gold-2));
  box-shadow: 0 6px 18px rgba(190,140,40,.5); }
.cshutter:active { transform: scale(.94); }
.clight { width: 46px; text-align: right; font-size: 10px; letter-spacing: .06em;
  line-height: 1.35; color: rgba(253,249,241,.6); }

/* Deklanşör parlaması */
.cam-view[data-shot="1"]::after {
  content: ''; position: absolute; inset: 0; background: #fff; z-index: 5;
  animation: flash .45s ease-out forwards; pointer-events: none;
}

/* ------------------------------------------------------- kırpma düzenleyici */

.crop { position: relative; margin-top: 14px; width: 100%; aspect-ratio: 1;
  border-radius: var(--r-xl); overflow: hidden; cursor: grab; touch-action: none;
  background: #EFE6D4; border: 1px solid var(--glass-line);
  box-shadow: 0 18px 40px rgba(90, 66, 26, .18); }
.crop:active { cursor: grabbing; }
.crop img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transform-origin: center; max-width: none; user-select: none; -webkit-user-drag: none; }
/* Biyometrik hizalama çerçevesi.
   Hedef (oval, eksen, göz hattı) sabit duruyor; ölçülen noktalar face.js'ten
   gelen gerçek konumlar. İkisi örtüşünce hat yeşile dönüyor. */
.bioframe { position: absolute; inset: 0; pointer-events: none; }

/* Oval de ölçüme göre: yüz %20 (saç çizgisi) ile %84 (çene) arasında
   duruyor, yani merkez ortada değil biraz aşağıda. */
.bioframe__oval { position: absolute; left: 50%; top: 53%; width: 58%; height: 74%;
  transform: translate(-50%, -50%); border: 1.5px solid rgba(226, 183, 90, .85);
  border-radius: 50% 50% 46% 46%; }

.bioframe__axis { position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px;
  background: repeating-linear-gradient(180deg,
    rgba(226, 183, 90, .55) 0 5px, transparent 5px 11px); }

/* Göz hattı: kullanıcının gözleri buraya getirmesi bekleniyor. */
.bioframe__eyeline { position: absolute; left: 16%; right: 16%; height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(226, 183, 90, .7) 0 6px, transparent 6px 12px);
  transition: background .25s; }
.bioframe__eyeline i { position: absolute; top: 50%; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  border: 1.5px solid rgba(226, 183, 90, .9); }

/* Ölçülen noktalar: gözler halka, kalanı küçük artı. */
.bioframe__pts i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: rgba(154, 111, 20, .9);
  box-shadow: 0 0 0 3px rgba(253, 249, 241, .55);
  transition: background .25s, box-shadow .25s; }
.bioframe__pts i[data-k="eye"] { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: transparent; border: 2px solid rgba(154, 111, 20, .95); }

/* Hizalandı: hem noktalar hem hat yeşile dönüyor, sözle anlatmaya gerek yok. */
.bioframe__pts.is-ok i { background: #2E7D53; }
.bioframe__pts.is-ok i[data-k="eye"] { background: transparent; border-color: #2E7D53; }
.bioframe__pts.is-ok ~ .bioframe__eyeline,
.bioframe:has(.is-ok) .bioframe__eyeline {
  background: repeating-linear-gradient(90deg,
    rgba(46, 125, 83, .8) 0 6px, transparent 6px 12px); }
.bioframe:has(.is-ok) .bioframe__eyeline i { border-color: rgba(46, 125, 83, .9); }

@media (prefers-reduced-motion: reduce) {
  .bioframe__eyeline, .bioframe__pts i { transition: none }
}
.crop .cam__corner { pointer-events: none; }

.zoom { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.zbtn { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid;
  place-items: center; color: var(--ink); background: rgba(255, 255, 255, .82);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.zbtn svg { width: 17px; height: 17px; }
.zbtn:active { transform: scale(.94); }
.zrange { flex: 1; height: 4px; border-radius: 2px; appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, rgba(226,183,90,.5), var(--gold-2)); }
.zrange::-webkit-slider-thumb { appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--cream-1);
  border: 2px solid var(--gold-2); box-shadow: 0 3px 8px rgba(90, 66, 26, .25); }
.zrange::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream-1); border: 2px solid var(--gold-2); }

/* --------------------------------------------------------- analiz ekranı */

@keyframes gridpan2 { to { background-position: 44px 44px, 44px 44px } }
/* Gerçek ölçüm kullanılırken noktalar kırpılmış karenin kendi koordinatında,
   o yüzden kılavuz da tam kareye oturur; genel kılavuzda içeri alınır. */
.anbig .fg { inset: 12% 18%; }
.anbig .fg--real { inset: 0; }
.anbig .fg--real .fg__oval { width: 62%; height: 74%; }
.anbig .fg i { width: 7px; height: 7px; }
.anbig__sweep { position: absolute; left: 0; right: 0; height: 66px;
  background: linear-gradient(180deg, transparent, rgba(233,194,100,.42), transparent);
  border-top: 1.5px solid rgba(233, 194, 100, .95);
  box-shadow: 0 0 28px 6px rgba(226, 183, 90, .4);
  animation: anscan 2.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes anscan { 0% { top: -14% } 100% { top: 100% } }

/* Sayılar fotoğrafın altında, kendi alanında. */
.anread__n b { font-size: 46px; font-weight: 700; letter-spacing: -.03em; }
.anread__n small { font-size: 18px; font-weight: 600; color: var(--ink-32); margin-left: 2px; }

.andots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(42, 32, 20, .14);
  transition: background .3s; }
.andots i[data-s="done"] { background: var(--gold-deep); }
.andots i[data-s="now"] { background: var(--gold-2); animation: glow 1.4s ease-in-out infinite; }

/* --------------------------------------------------------------- plan satırı */

/* `.plan span` mono ve soluk olduğu için daha yüksek özgüllükle geri alınır;
   aksi hâlde plan adı da mono görünüyor. */
.plan .plan__l { flex: 1; min-width: 0; display: block; margin: 0;
  font-family: var(--f-body); font-size: 16px; color: var(--ink); }
.plan .plan__t { display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--f-body); font-size: 16px; color: var(--ink); }
.plan .plan__t b { display: inline; font-size: 16px; font-weight: 600; }
.plan .plan__l > span + span { display: block; margin-top: 4px;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-45); }

/* ------------------------------------------------------ ana ekran (04c düzeni) */

.hero-card { position: relative; margin-top: 20px;
  border-radius: 34px; text-align: left; overflow: hidden; color: var(--ink);
  background: linear-gradient(150deg, var(--gold), var(--gold-2));
  box-shadow: 0 20px 42px rgba(190, 140, 40, .32);
  transition: filter .18s, transform .12s; }
.hero-card:hover { filter: brightness(1.04); }
.hero-card:active { transform: scale(.99); }
.hero-card__title { display: block; margin-top: 10px; font-size: 30px; font-weight: 700;
  line-height: 1.05; letter-spacing: -.028em; max-width: 200px; }
.hero-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  padding: 12px 19px; border-radius: 999px; background: rgba(253, 249, 241, .94);
  font-size: 15px; font-weight: 700; }
.hero-card__cta svg { width: 17px; height: 17px; flex: none; }

/* Yarım kalan aramaya dönüş */
.resume { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px;
  padding: 13px 15px; border-radius: 22px; background: rgba(255, 255, 255, .78);
  border: 1.5px solid rgba(226, 183, 90, .55); box-shadow: var(--shadow); }
.resume:hover { border-color: var(--gold-2); }
.resume b { display: block; font-size: 15px; font-weight: 600; }
.resume > span > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4;
  color: var(--ink-55); }
.resume svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
.resume__st { display: flex; flex: none; }
.resume__st i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cream-1);
  background-size: cover; background-position: center; }
.resume__st i + i { margin-left: -11px; }
.resume__q { display: grid; place-items: center; background: rgba(226, 183, 90, .3);
  font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold-ink); }

/* Galeriden yükleme satırı */
.upload-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px;
  padding: 13px 15px; border-radius: 22px; background: rgba(255, 255, 255, .68);
  border: 1.5px solid var(--glass-line); box-shadow: var(--shadow); }
.upload-row:hover { border-color: var(--gold-2); background: rgba(255, 255, 255, .9); }
.upload-row b { display: block; font-size: 14.5px; font-weight: 600; }
.upload-row > span > span { display: block; margin-top: 2px; font-family: var(--f-mono);
  font-size: 11px; color: var(--ink-45); }
.upload-row__ic { width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid;
  place-items: center; color: var(--gold-ink); background: rgba(228, 163, 60, .16); }
.upload-row__ic svg { width: 17px; height: 17px; }
.upload-row__btn { flex: none; padding: 7px 13px; border-radius: 999px;
  background: rgba(228, 163, 60, .18); color: var(--gold-ink);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

.sect-row { display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 0 10px; }
.seeall { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--gold-deep); }
.hrow--card { border-bottom: 0; padding: 12px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .68); border: 1px solid var(--glass-line);
  box-shadow: 0 6px 16px rgba(90, 66, 26, .06); }
.hrow--card:hover { border-color: rgba(226, 183, 90, .6); opacity: 1; }

/* ------------------------------------------------ ana ekran: canlı öğeler */

.live { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.live__n { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-55); }

.pstrip { margin-top: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pstrip__row { display: flex; gap: 20px; width: max-content;
  animation: lanemove 34s linear infinite; }
@keyframes lanemove { to { transform: translateX(-50%) } }
.pstrip__row svg { color: rgba(42, 32, 20, .34); flex: none; }
@media (prefers-reduced-motion: reduce) { .pstrip__row { animation: none } }

/* Boş ana ekranda kısa anlatım: kullanıcı ne olacağını bilsin. */
.steps3 { display: flex; flex-direction: column; gap: 8px; }
.step3 { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 18px; background: rgba(255, 255, 255, .58);
  border: 1px solid var(--glass-line); }
.step3__n { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid;
  place-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--gold-ink);
  background: rgba(228, 163, 60, .16); }
.step3__t { font-size: 14px; line-height: 1.4; color: var(--ink-70); }
.legal-link { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-32); text-decoration: none; }
.legal-link:hover { color: var(--gold-deep); }

/* Ölçüm sürerken: fotoğraf ekranda, üstünde tarama ve halka. */
.crop--busy { cursor: default; }
.crop__scan { position: absolute; left: 0; right: 0; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(233,194,100,.45), transparent);
  border-top: 1.5px solid rgba(233, 194, 100, .95);
  box-shadow: 0 0 28px 6px rgba(226, 183, 90, .4);
  animation: anscan 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.crop__spin { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(253, 249, 241, .45); border-top-color: var(--gold);
  animation: spin .9s linear infinite; }

/* ------------------------------------------------------------- skor cetveli */

.scale { margin-top: 16px; padding: 12px 14px; border-radius: var(--r);
  background: rgba(255, 255, 255, .66); border: 1px solid var(--glass-line);
  box-shadow: var(--shadow); cursor: help; }
.scale__bar { height: 7px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, #A33B2A 0%, #A33B2A 35%, #B07B12 35%,
              #B07B12 70%, #2E7D53 70%, #2E7D53 100%); }
.scale__keys { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.scale__keys span { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--ink-55); white-space: nowrap; }
.scale__keys i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.scale__keys em { font-style: normal; font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-32); }

/* --------------------------------------------------------------- kalite puanı */

.qscore { display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .7);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.qscore__n { flex: none; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.qscore__n small { font-size: 14px; font-weight: 600; color: var(--ink-32); }
.qscore__l { min-width: 0; }
.qscore__l b { display: block; font-size: 15px; font-weight: 600; }
.qscore__l span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-55); }

/* -------------------------------------------------------------- açılış ekranı */

/* Tek işi markayı bir saniye göstermek: logo büyüyerek gelir, iki halka nefes
   alır, ad harf harf belirir, altta ince bir çubuk dolar. */
.boot { align-items: center; justify-content: center; gap: 0; text-align: center; }
.boot__mark { position: relative; width: 116px; height: 116px; display: grid; place-items: center;
  animation: bootin .7s cubic-bezier(.2, .9, .3, 1.4) both; }
.boot__mark img { width: 100px; height: 100px; border-radius: 30px; position: relative; z-index: 2;
  box-shadow: 0 18px 36px rgba(90, 66, 26, .3); }
.boot__ring { position: absolute; inset: 0; border-radius: 34px;
  border: 2px solid rgba(226, 183, 90, .8); animation: bootring 2.4s ease-out infinite; }
.boot__ring--2 { animation-delay: 1.2s; }
@keyframes bootring {
  0%   { transform: scale(.86); opacity: .9 }
  70%  { transform: scale(1.3); opacity: 0 }
  100% { transform: scale(1.3); opacity: 0 }
}
@keyframes bootin { from { opacity: 0; transform: scale(.82) } to { opacity: 1; transform: none } }
.boot__glass { position: absolute; z-index: 3; right: 2px; bottom: 2px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border: 2.5px solid var(--cream-1); box-shadow: 0 6px 16px rgba(190, 140, 40, .45);
  animation: bootin .6s .25s cubic-bezier(.2, .9, .3, 1.4) both; }
.boot__glass svg { width: 16px; height: 16px; }
.boot__name { margin-top: 22px; font-size: 19px; font-weight: 700; letter-spacing: .32em;
  text-indent: .32em; animation: bootup .6s .2s ease both; }
.boot__tag { margin-top: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-45); animation: bootup .6s .35s ease both; }
@keyframes bootup { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.boot__bar { display: block; width: 108px; height: 3px; border-radius: 2px; margin-top: 26px;
  background: rgba(42, 32, 20, .1); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  animation: bootbar 1.7s .15s ease-out forwards; }
@keyframes bootbar { to { width: 100% } }

/* --------------------------------------------------------------- giriş ekranı */

.gbtn { background: #FFFFFF; border: 1px solid rgba(42, 32, 20, .14);
  box-shadow: 0 8px 20px rgba(90, 66, 26, .1); font-weight: 600; }
.gbtn svg { width: 19px; height: 19px; flex: none; }
.auth__legal { margin-top: 14px; text-align: center; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-45); }
.auth__legal a { color: var(--ink-55); }
.auth__legal a:hover { color: var(--gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .boot__mark, .boot__ring, .boot__name, .boot__tag, .boot__bar i { animation: none; }
  .boot__bar i { width: 100% }
}

/* ------------------------------------------------------- analiz: yüz ağı */

.anmesh { position: absolute; inset: 10% 14%; z-index: 2; pointer-events: none;
  overflow: visible; }
.anmesh__lines line { stroke: rgba(233, 194, 100, .85); stroke-width: .35;
  stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60;
  filter: drop-shadow(0 0 1px rgba(233, 194, 100, .9));
  animation: meshdraw 2.6s ease-out infinite; }
@keyframes meshdraw {
  0%   { stroke-dashoffset: 60; opacity: 0 }
  25%  { opacity: 1 }
  60%  { stroke-dashoffset: 0; opacity: 1 }
  100% { stroke-dashoffset: 0; opacity: .25 }
}
.anmesh__dots circle { fill: #FDF9F1; filter: drop-shadow(0 0 2px rgba(233, 194, 100, 1));
  animation: meshdot 2.6s ease-in-out infinite; }
@keyframes meshdot {
  0%, 100% { r: .55; opacity: .35 }
  50%      { r: 1.1; opacity: 1 }
}

/* Tarama bandı ve kilitlenme halkası */
@keyframes lockon {
  0%, 100% { transform: translate(-50%, -50%) scale(1.04); opacity: .35 }
  50%      { transform: translate(-50%, -50%) scale(1); opacity: .9 }
}

/* ------------------------------------------------------------ kilit çubuğu */

/* Kilitli sonuçta alttan yükselen çubuk: paywall kendiliğinden açılmıyor,
   kullanıcı önce bulanık listeyi görüyor. */
.view--locked { padding-bottom: 190px !important; }
.unlockbar { position: absolute; left: 12px; right: 12px; bottom: 88px; z-index: 45;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 15px;
  border-radius: 26px; cursor: pointer;
  background: linear-gradient(150deg, rgba(233,194,100,.96), rgba(210,166,60,.96));
  box-shadow: 0 -6px 34px rgba(90, 66, 26, .26), 0 14px 30px rgba(190, 140, 40, .34);
  animation: unlockup .5s .35s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes unlockup { from { transform: translateY(120%); opacity: 0 } to { transform: none; opacity: 1 } }
.unlockbar__grip { position: absolute; left: 50%; top: 7px; width: 34px; height: 3px;
  margin-left: -17px; border-radius: 2px; background: rgba(36, 27, 18, .25); }
.unlockbar__ic { width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid;
  place-items: center; color: var(--ink); background: rgba(253, 249, 241, .8); }
.unlockbar__ic svg { width: 18px; height: 18px; }
.unlockbar__l { flex: 1; min-width: 0; }
.unlockbar__l b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.unlockbar__l span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(36, 27, 18, .68); }
.unlockbar__go { flex: none; color: var(--ink); display: flex; }
.unlockbar__go svg { width: 18px; height: 18px; }
.unlockbar:active { transform: scale(.99); }

/* ==========================================================================
   Geri yüklenen bölümler. Ekranları tek tek yeniden yazarken bu blokların
   bulunduğu aralıklar kesilmişti; hepsi burada, tek yerde.
   ========================================================================== */

/* ------------------------------------------------------------ üst çubuk */

.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --------------------------------------------------------- alt sekmeler */

.tabbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; padding: 10px 18px calc(14px + env(safe-area-inset-bottom));
  background: rgba(253, 249, 241, .9);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(42, 32, 20, .08); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 14px; color: var(--ink-45);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.tab svg { width: 20px; height: 20px; }
.tab[data-on="1"] { color: var(--gold-ink); }

/* Ortadaki Sherlock düğmesi çubuğun üstüne taşar ve tek hareketli öğedir. */
.hub { position: relative; width: 74px; height: 74px; margin: -30px 0 2px;
  display: grid; place-items: center; border-radius: 50%;
  animation: hubbob 4.6s ease-in-out infinite; }
@keyframes hubbob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.hub__face { position: relative; z-index: 2; width: 60px; height: 60px; border-radius: 50%;
  overflow: hidden; border: 2.5px solid var(--cream-1);
  box-shadow: 0 12px 26px rgba(90, 66, 26, .3); }
.hub__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hub__ring { position: absolute; inset: 2px; border-radius: 50%;
  border: 2px solid rgba(226, 183, 90, .8); animation: hubring 3.2s ease-out infinite; }
.hub__ring--2 { animation-delay: 1.6s; }
@keyframes hubring {
  0%   { transform: scale(.86); opacity: .9 }
  70%  { transform: scale(1.22); opacity: 0 }
  100% { transform: scale(1.22); opacity: 0 }
}
.hub__glass { position: absolute; z-index: 3; right: -2px; bottom: -2px; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border: 2px solid var(--cream-1); box-shadow: 0 6px 14px rgba(190, 140, 40, .4); }
.hub__glass svg { width: 13px; height: 13px; }
.hub--on .hub__face { border-color: var(--gold); }
.hub:active { transform: scale(.96); }

/* -------------------------------------------------------- ortak parçalar */

.tag { display: inline-flex; width: auto; flex: none; align-items: center;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; padding: 3px 8px;
  border-radius: 999px; background: rgba(228, 163, 60, .22); color: var(--gold-ink); }
.sect { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-45); margin: 22px 0 10px; }
.feat { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.feat i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2);
  margin-top: 8px; flex: none; }
.plan__price { font-size: 17px; font-weight: 700; white-space: nowrap; }
.tip { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px;
  line-height: 1.45; color: var(--ink-70); }
.tip svg { color: var(--gold-2); margin-top: 2px; }
.tipline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.tipline span { font-family: var(--f-mono); font-size: 9.5px; padding: 5px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(42, 32, 20, .08); color: var(--ink-45); }
.perks { display: flex; flex-direction: column; gap: 8px; }
.perk-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border-radius: 16px; background: rgba(255, 255, 255, .56);
  border: 1px solid var(--glass-line); font-size: 14px; line-height: 1.45; color: var(--ink-70); }
.perk-row svg { color: var(--gold-2); margin-top: 1px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px;
  animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translateY(220px) rotate(300deg); opacity: 0 } }

/* ------------------------------------------------------- kredi paketleri */

.pack { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px;
  border-radius: 22px; text-align: left; background: rgba(255, 255, 255, .74);
  border: 1.5px solid var(--glass-line); box-shadow: var(--shadow);
  transition: border-color .18s, transform .12s, box-shadow .18s; }
.pack:hover { border-color: rgba(226, 183, 90, .75); transform: translateY(-1px); }
.pack:active { transform: scale(.99); }
.pack[data-best="1"] { border-color: var(--gold); background: rgba(255, 255, 255, .92); }
.pack__coin { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #F6E3AC, var(--gold-2));
  box-shadow: 0 8px 18px rgba(190, 140, 40, .34), inset 0 -2px 4px rgba(140, 100, 24, .35); }
.pack__coin b { position: relative; z-index: 2; font-size: 19px; font-weight: 700; color: var(--ink); }
.pack__coin i { position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px dashed rgba(36, 27, 18, .22); }
.pack[data-best="1"] .pack__coin { animation: coin 3.6s ease-in-out infinite; }
@keyframes coin { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.pack__l { flex: 1; min-width: 0; }
.pack__t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.pack__l > span + span { display: block; margin-top: 3px; font-family: var(--f-mono);
  font-size: 11px; color: var(--ink-45); }
.pack__r { flex: none; text-align: right; }
.pack__r b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; }
.pack__r span { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 10px;
  color: var(--gold-ink); white-space: nowrap; }

/* ------------------------------------------------------------ dil seçici */

.lrows { display: flex; flex-direction: column; gap: 8px; }
.lrow { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px;
  border-radius: var(--r); text-align: left; background: rgba(255, 255, 255, .62);
  border: 1.5px solid var(--glass-line); transition: border-color .18s, background .18s; }
.lrow[data-on="1"] { border-color: var(--gold); background: rgba(255, 255, 255, .92); }
.lrow__code { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid;
  place-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--gold-ink); background: rgba(228, 163, 60, .16); }
.lrow[data-on="1"] .lrow__code { background: linear-gradient(140deg, var(--gold), var(--gold-2));
  color: var(--ink); }
.lrow__l { flex: 1; min-width: 0; }
.lrow__l b { display: block; font-size: 15.5px; font-weight: 600; }
.lrow__l span { display: block; margin-top: 2px; font-family: var(--f-mono);
  font-size: 10.5px; color: var(--ink-45); }
.lrow__tick { opacity: 0; color: var(--gold-ink); flex: none; }
.lrow[data-on="1"] .lrow__tick { opacity: 1; }

/* --------------------------------------------------------------- sheet */

.sheet-back { position: absolute; inset: 0; z-index: 90; display: flex; align-items: flex-end;
  background: rgba(60, 44, 20, .28); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s; }
.sheet-back[data-on="1"] { opacity: 1; }
.sheet { width: 100%; padding: 10px 20px calc(26px + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--cream-1);
  border-top: 1px solid var(--glass-line); box-shadow: 0 -20px 50px rgba(90, 66, 26, .2);
  transform: translateY(14px); transition: transform .28s; }
.sheet-back[data-on="1"] .sheet { transform: none; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-12);
  margin: 4px auto 16px; }
.sheet__title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }

/* ------------------------------------------------------- profil ve ayarlar */

.who { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.who__av { width: 84px; height: 84px; flex: none; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--glass-line); box-shadow: 0 14px 30px rgba(90, 66, 26, .2); }
.who__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.who__l { flex: 1; min-width: 0; }
.who__name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.who__since { margin-top: 4px; font-size: 11px; letter-spacing: .08em; color: var(--ink-45); }

.alias { position: relative; cursor: help; display: inline-block; }
.alias__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 232px;
  padding: 11px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.45;
  font-weight: 400; letter-spacing: 0; color: var(--ink-70);
  background: rgba(255, 255, 255, .97); border: 1px solid var(--glass-line);
  box-shadow: 0 14px 30px rgba(90, 66, 26, .2);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .18s, transform .18s; }
.alias:hover .alias__tip, .alias:focus .alias__tip { opacity: 1; transform: none; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat { padding: 14px; border-radius: var(--r); background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .9); text-align: center; }
.stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.stat span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-45); }

.hrow { display: flex; align-items: center; gap: 12px; padding: 12px 4px; width: 100%;
  border-bottom: 1px solid var(--ink-12); text-align: left; transition: opacity .15s; }
.hrow:last-child { border-bottom: 0; }
.hrow:hover { opacity: .75; }
.hrow svg { width: 16px; height: 16px; }
.hrow b { display: block; font-size: 15px; font-weight: 600; }
.hrow span span { display: block; font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-45); margin-top: 2px; }
.hface { position: relative; width: 42px; height: 42px; flex: none; }
.hface img { width: 32px; height: 32px; margin: 5px; border-radius: 50%; object-fit: cover; }
.hface i { position: absolute; inset: 0; border-radius: 50%;
  mask: radial-gradient(circle, transparent 16px, #000 17px);
  -webkit-mask: radial-gradient(circle, transparent 16px, #000 17px); }

.srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px;
  border-radius: var(--r); background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9); text-align: left; font-size: 15px; }
.srow:hover { border-color: rgba(226, 183, 90, .55); }
.srow .spacer { text-align: right; }
.srow em { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--ink-45); }
.srow--danger { color: #A33B2A; }

/* ------------------------------------------------------- paylaşım kartı */

.card { border-radius: var(--r-xl); padding: 22px 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(253, 249, 241, .8));
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg); }
.card__pair { display: flex; align-items: center; justify-content: center; gap: 10px; }
.card__face { width: 98px; height: 126px; border-radius: 20px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, #EFE6D4, #F5EEE1); display: grid; place-items: end center;
  padding-bottom: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  color: var(--ink-32); }
.card__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__face span { position: relative; z-index: 1; padding: 3px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .86); }
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.act i { width: 100%; aspect-ratio: 1; border-radius: 22px; background: rgba(255, 255, 255, .72);
  border: 1px solid var(--glass-line); box-shadow: 0 10px 22px rgba(90, 66, 26, .08);
  display: grid; place-items: center; font-style: normal; font-size: 17px;
  transition: border-color .18s; }
.act:hover i { border-color: var(--gold); }
.act span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-55); }

/* ---------------------------------------------------- onboarding görselleri */

.qface { position: relative; width: 62%; aspect-ratio: 1; border-radius: 26px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(90, 66, 26, .18); }
.qface img { width: 100%; height: 100%; object-fit: cover; }
.qface__oval { position: absolute; left: 50%; top: 50%; width: 62%; height: 78%;
  margin: 0; transform: translate(-50%, -50%); border: 1.5px solid rgba(233, 194, 100, .95);
  border-radius: 50% 50% 46% 46%; }
.qface__line { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 16px 3px rgba(226, 183, 90, .5);
  animation: scanline 3s ease-in-out infinite; }
.qface__pt { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(233, 194, 100, .9);
  animation: glow 2.6s ease-in-out infinite; }

.qgrid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 9px; width: 72%; }
.qgrid img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  opacity: .38; filter: grayscale(1); transition: opacity .3s; }
.qgrid img[data-hit="1"] { opacity: 1; filter: none;
  box-shadow: 0 0 0 2.5px var(--gold), 0 8px 18px rgba(90, 66, 26, .22);
  animation: glow 3.2s ease-in-out infinite; }

.qfound { position: relative; display: flex; flex-direction: column; gap: 9px; width: 78%; }
.qfound__row { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px;
  border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--glass-line);
  box-shadow: 0 8px 18px rgba(90, 66, 26, .12); animation: pop .5s ease both; }
.qfound__row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.qfound__row i { width: 22px; height: 22px; border-radius: 7px; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  background-color: rgba(42, 32, 20, .06); }
.qfound__row b { margin-left: auto; font-size: 13px; font-weight: 700; }

.fg__mesh { position: absolute; left: 50%; top: 50%; width: 76%; height: 82%;
  transform: translate(-50%, -50%); border-radius: 50% 50% 46% 46%; overflow: hidden;
  background-image: linear-gradient(rgba(226,183,90,.28) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(226,183,90,.28) 1px, transparent 1px);
  background-size: 18px 18px; opacity: .55; }

/* ------------------------------------------------------------ kredi rozeti */

/* Her ekranın üstünde duruyor: her arama bir kredi yakıyor, kalan sayı
   kullanıcıdan saklanmamalı. Sıfırken altın gider, uyarı rengi gelir. */
.creds { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(226, 183, 90, .6); box-shadow: 0 6px 16px rgba(90, 66, 26, .1);
  transition: border-color .18s, transform .12s; }
.creds:hover { border-color: var(--gold); }
.creds:active { transform: scale(.97); }
.creds b { font-size: 15px; font-weight: 700; line-height: 1; }
.creds span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-45); }
.creds i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 14px; line-height: 1; color: var(--ink);
  background: linear-gradient(140deg, var(--gold), var(--gold-2)); }
.creds--empty { border-color: rgba(163, 59, 42, .35); }
.creds--empty b { color: #A33B2A; }

/* -------------------------------------------------- ana ekran arama şeridi */

/* Geçmiş aramalar dikey liste olarak ana ekranın yarısını yiyordu. Şerit
   hâlinde yatay duruyorlar: kart başına aranan karenin kendisi, kaç profil
   çıktığı ve kilit durumu. Sonuncusu yeni arama kısayolu. */
.srail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 20px 4px; margin: 0 -20px; scrollbar-width: none; }
.srail::-webkit-scrollbar { display: none; }

.scard { flex: none; width: 104px; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; gap: 6px; }
.scard__ph { position: relative; width: 104px; height: 104px; border-radius: 20px;
  overflow: hidden; background: rgba(255, 255, 255, .6);
  border: 1px solid var(--glass-line); box-shadow: 0 8px 18px rgba(90, 66, 26, .12);
  transition: transform .16s, box-shadow .16s; }
.scard:hover .scard__ph { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(90, 66, 26, .18); }
.scard:active .scard__ph { transform: scale(.98); }
.scard__ph img { width: 100%; height: 100%; object-fit: cover; }

/* Rozet sağ altta: açık aramada eşleşme yüzdesi, kilitlide asma kilit. */
.scard__pct, .scard__lock { position: absolute; right: 6px; bottom: 6px; display: grid;
  place-items: center; font-style: normal; border: 2px solid var(--cream-1);
  box-shadow: 0 4px 10px rgba(90, 66, 26, .24); }
.scard__pct { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: #fff; }
.scard__lock { width: 28px; height: 28px; border-radius: 50%; color: var(--ink);
  background: linear-gradient(140deg, var(--gold), var(--gold-2)); }
.scard__lock svg { width: 13px; height: 13px; }
/* Kilitli aramada kendi fotoğrafını bulanıklaştırmak anlamsız; kilidi vurgulamak
   için kare yalnızca soluyor. */
.scard--locked .scard__ph img { opacity: .55; filter: saturate(.6); }

.scard__n { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.scard__d { font-size: 10px; color: var(--ink-45); letter-spacing: .04em; }

.scard--new .scard__plus { width: 104px; height: 104px; border-radius: 20px; display: grid;
  place-items: center; color: var(--gold-ink); background: rgba(228, 163, 60, .1);
  border: 1.5px dashed rgba(226, 183, 90, .7); transition: background .16s; }
.scard--new:hover .scard__plus { background: rgba(228, 163, 60, .18); }
.scard--new .scard__plus svg { width: 22px; height: 22px; }

/* --------------------------------------------------------- ekran dolgusu */

/* Satır içi padding'ler cihaz çerçevesinin çentiğine göre elle yazılmıştı;
   gerçek telefonda çentik yerine güvenli alan geçerli, o yüzden tek yerden. */
.view.boot, .view.cam-view { padding: 0; }
.view--tabs { padding-bottom: calc(var(--pad-b) + 70px) !important; }

/* ----------------------------------------------------------- gerçek telefon */

/* Masaüstünde ürünü telefon çerçevesi içinde göstermek anlamlı; gerçek
   telefonda ekranın içinde ikinci bir ekran çiziyordu. Dokunmatik ve dar
   ekranda çerçeve tamamen kalkar, uygulama viewport'u kaplar. */
@media (max-width: 760px) and (pointer: coarse) {
  body { display: block; overflow: hidden; }
  .stage { padding: 0; gap: 0; display: block; }
  .device {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .device-island, .device-home, .stage-hint { display: none; }

  :root {
    --pad-t: calc(env(safe-area-inset-top) + 18px);
    --pad-b: calc(env(safe-area-inset-bottom) + 24px);
  }
  .tabbar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Dar ama dokunmatik olmayan pencere (küçültülmüş masaüstü tarayıcısı) da
   çerçeveyi taşıyamaz; orada da tam ekrana geçilir ama güvenli alan yoktur. */
@media (max-width: 520px) {
  /* body ve .stage blok olmalı: ikisi de flex kalırsa .stage daralıp içeriğine
     göre ölçülüyor, .device'ın tüm çocukları mutlak konumlu olduğu için doğal
     genişlik sıfır çıkıyor ve `width:100%` sıfıra çözülüyor — uygulama
     tamamen kayboluyordu. */
  body { display: block; overflow: hidden; }
  .stage { display: block; padding: 0; gap: 0; }
  .device { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .device-island, .device-home, .stage-hint { display: none; }
}

/* -------------------------------------------------- sabit kabuk katmanları */

/* Sekme çubuğu ekranın değil cihazın parçası: .screen kendi içinde kayarken
   çubuk yerinde kalmalı. Konumlandırması burada olmazsa statik akışa düşüp
   ekranın üstünde beliriyor. */
#tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; }
#tabs[hidden] { display: none; }

.toast {
  position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 10px);
  z-index: 95; max-width: calc(100% - 40px); padding: 11px 16px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.35; text-align: center; color: var(--cream-1);
  background: rgba(36, 27, 18, .94); box-shadow: 0 14px 30px rgba(36, 27, 18, .3);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.toast[data-on="1"] { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- ana ekran */

/* Bloklar birbirine yapışıktı: her biri kendi margin-top'unu taşıyordu ve
   toplamı 12-14px'te kalıyordu. Aralık tek yerden, daha geniş veriliyor. */
.view.home { gap: 20px; }
.view.home > .hero-card,
.view.home > .live,
.view.home > .pstrip,
.view.home > .upload-row,
.view.home > .resume { margin-top: 0; }
.view.home > .sect-row { margin: 2px 0 0; }
.view.home > .srail { margin-top: -8px; }

/* Sayaç ile platform şeridi aynı fikrin iki yarısı; aralarındaki boşluk
   diğerlerinden dar olsun ki tek blok gibi okunsunlar. */
.view.home > .pstrip { margin-top: -10px; }

/* ------------------------------------------------------------ giriş ekranı */

/* Eskiden konuşma balonu, başlık, üç madde ve iki düğme aynı kolona sıkışıp
   küçük ekranda üst üste biniyordu. Üç bölge var: marka, sebepler, eylemler —
   ortadaki esner, alttaki her zaman parmağın altında kalır. */
.auth { justify-content: space-between; gap: 22px; }

.auth__top { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; padding-top: 8px; }
.auth__mark { position: relative; width: 92px; height: 92px; }
.auth__mark img { width: 100%; height: 100%; border-radius: 26px; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 36px rgba(90, 66, 26, .24); }
.auth__glass { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(140deg, var(--gold), var(--gold-2));
  border: 3px solid var(--cream-1); box-shadow: 0 8px 18px rgba(190, 140, 40, .4); }
.auth__glass svg { width: 15px; height: 15px; }

.auth__h { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.18;
  max-width: 20ch; }
.auth__sub { font-size: 14.5px; line-height: 1.5; color: var(--ink-70); max-width: 34ch; }

.auth__perks { display: flex; flex-direction: column; gap: 8px; }
.auth__foot { display: flex; flex-direction: column; gap: 10px; }

.auth__legal { margin-top: 2px; text-align: center; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-45); }
.auth__legal a { color: var(--gold-ink); }

/* Kısa ekranda maddeler ilk feda edilecek şey: marka ve düğmeler kalır. */
@media (max-height: 680px) {
  .auth__perks { display: none; }
  .auth__mark { width: 76px; height: 76px; }
  .auth__h { font-size: 22px; }
}

/* ----------------------------------------------------- onay penceresi */

/* Hesap silme geri alınamaz; tek dokunuşla olmamalı. */
.confirm { display: flex; flex-direction: column; gap: 8px; }
.confirm__t { font-size: 18px; font-weight: 700; }
.confirm__b { font-size: 14.5px; line-height: 1.5; color: var(--ink-70); }
.confirm__list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.confirm__list div { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px;
  line-height: 1.45; color: var(--ink-70); }
.confirm__list i { width: 5px; height: 5px; border-radius: 50%; margin-top: 7px;
  flex: none; background: #A33B2A; }
.confirm__acts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.btn--danger { background: #A33B2A; color: #fff; }
.btn--danger:hover { background: #8E3122; }

/* --------------------------------------------------- ana ekran altın kartı */

/* Kartın altın zemini. Klip yüklenemezse kart yine de doğru renkte durur. */
.hero-card { background: linear-gradient(148deg, #F0CE7A 0%, var(--gold) 38%, #C9962C 100%); }

/* Baloncuk dedektifin üstünde ve koyu. Krem hap olarak bırakınca eylem
   düğmesiyle aynı şeye benziyordu: karttaki tek krem öğe düğme olmalı ki
   nereye basılacağı tartışmasız kalsın. */
.hero-card__say { position: absolute; left: 18px; right: 18px; top: 16px; width: auto;
  pointer-events: none; padding: 10px 13px 11px; border-radius: 16px 16px 4px 16px;
  font-size: 14px; line-height: 1.36; font-weight: 600; color: var(--cream-1);
  background: rgba(38, 28, 17, .92); box-shadow: 0 10px 22px rgba(60, 42, 10, .3);
  opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .38s ease, transform .38s ease; }
.hero-card__say[data-on="1"] { opacity: 1; transform: none; }

/* Kuyruk aşağı sola, dedektif değil kart konuşuyormuş gibi durmasın diye
   figürün tarafında kalıyor. */
.hero-card__say::after { content: ''; position: absolute; right: 34px; bottom: -7px;
  border: 8px solid transparent; border-top-color: rgba(38, 28, 17, .92);
  border-bottom: 0; }

/* Klip kartın tamamı: oran ona göre sabit, içerik üstüne biniyor.
   Genişlik açıkça veriliyor — tüm çocuklar absolute olduğu için düğmenin
   doğal genişliği sıfır kalıyor ve kart görünmez oluyordu. */
.hero-card { width: 100%; aspect-ratio: 720 / 900; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; }
.hero-card__film { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.hero-card__film img, .hero-card__film video { width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block; }

/* Kartta artık başlık yok: üstteki dönen mesaj ne aradığını söylüyor, altındaki
   tek düğme de ne yapılacağını. Aradaki her şeyi dedektif dolduruyor. */

/* Dönen altın çizgi. Düğmenin arkasında büyük bir koni geçişi dönüyor; ortayı
   düğmenin kendisi kapattığı için dışarıya yalnızca kenarda dolaşan bir ışık
   yayı düşüyor. Kartın zemini altın olduğu için yay krem, iz koyu. */
.hero-card__ring { position: relative; z-index: 2; align-self: stretch;
  margin: 0 18px 18px; display: flex; padding: 3.5px;
  border-radius: 999px; overflow: hidden;
  background: rgba(52, 38, 14, .30);
  box-shadow: 0 10px 24px rgba(90, 62, 8, .3); }
.hero-card__ring::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0 38%, rgba(255, 248, 231, .3) 52%, #FFFDF4 66%,
    rgba(255, 248, 231, .3) 80%, transparent 94% 100%);
  animation: ringspin 3.4s linear infinite; }
@keyframes ringspin { to { transform: translate(-50%, -50%) rotate(360deg) } }

.hero-card__cta { position: relative; z-index: 1; flex: 1; margin-top: 0;
  justify-content: center; padding: 15px 24px; font-size: 16.5px;
  box-shadow: 0 4px 12px rgba(90, 62, 8, .18); }
.hero-card__cta svg { width: 19px; height: 19px; }

@media (max-width: 380px) {
  .hero-card__cta { padding: 12px 19px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card__ring::before { animation: none; }
}



/* Google'a bağlama satırı: iki satırlık açıklamayla, silme satırının hemen
   üstünde. Misafir olmayan kullanıcıda hiç basılmıyor. */
.srow--link { align-items: flex-start; }
.srow--link .gmark { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.srow--link b { display: block; font-size: 15px; font-weight: 600; }
.srow--link b + span { display: block; margin-top: 2px; font-family: var(--f-mono);
  font-size: 10.5px; line-height: 1.4; color: var(--ink-45); }

/* ------------------------------------------------- fotoğraf kaynağı seçimi */

/* Düğme "fotoğrafla ara" diyip doğrudan kamerayı açıyordu; galeriden seçmek de
   aynı akış olduğu için kaynak burada soruluyor. Kamera seçilirse cihazın
   kendi kamerası değil, çerçeveli kendi ekranımız açılır. */
.picks { display: flex; flex-direction: column; gap: 9px; }
.pick { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 15px;
  border-radius: var(--r); text-align: left; background: rgba(255, 255, 255, .66);
  border: 1.5px solid var(--glass-line); transition: border-color .16s, transform .12s; }
.pick:hover { border-color: rgba(226, 183, 90, .75); }
.pick:active { transform: scale(.99); }
.pick__ic { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid;
  place-items: center; color: var(--ink);
  background: linear-gradient(140deg, var(--gold), var(--gold-2)); }
.pick__ic--alt { background: rgba(228, 163, 60, .18); color: var(--gold-ink); }
.pick__l { flex: 1; min-width: 0; }
.pick__l b { display: block; font-size: 15.5px; font-weight: 600; }
.pick__l span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4;
  color: var(--ink-45); }

/* Sahneler uygulamanın kendi paletinde ve açık; koyu bir perde artık gereksiz
   ağır duruyordu. Geriye yalnızca balonun oturduğu üst şeritte çok hafif bir
   koyulaşma kaldı — düğme zaten koyu izli halkasıyla kendini ayırıyor. */
.hero-card__film::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 19, 7, .26) 0%,
    rgba(28, 19, 7, .05) 16%, transparent 26%);
}

/* ------------------------------------------------------- biyometrik tarama */

/* Ölçüm sırasında yüzün NEREDE olduğu daha bilinmiyor, o yüzden konum iddia
   eden hiçbir öğe yok. Eskiden dönen bir altın elips, kayan bir ışık lekesi ve
   sabit konumlu artılar vardı — artılar sakala, alına, boşluğa denk geliyordu
   ve biyometri değil süs gibi duruyordu. Yerine ölçüm ızgarası ve tek bir
   tarama hattı: bir şeyin ölçüldüğü belli, nerede ölçüldüğü iddia edilmiyor. */
.bio { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  border-radius: inherit; background: rgba(26, 18, 8, .18); }

/* İnce ölçüm ızgarası; kenarlara doğru soluyor ki kutuyu kafeslemesin. */
.bio__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 224, .16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(255, 246, 224, .16) 0 1px, transparent 1px 34px);
  -webkit-mask: radial-gradient(ellipse 78% 78% at 50% 50%, #000 40%, transparent 92%);
          mask: radial-gradient(ellipse 78% 78% at 50% 50%, #000 40%, transparent 92%);
}

/* Tarama hattı: keskin bir çizgi ve arkasında kısa bir iz. */
.bio__sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 240, 205, .10) 62%,
    rgba(255, 240, 205, .34) 92%,
    rgba(255, 250, 235, .95) 100%);
  box-shadow: 0 1px 12px rgba(255, 236, 190, .6);
  /* Adı yörüngedeki `biosweep`ten AYRI olmak zorunda: aynı adı kullanınca
     sonradan tanımlanan onu eziyor ve yörüngenin taraması bozuluyor. */
  animation: cropsweep 2.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes cropsweep {
  0%   { transform: translateY(-22%) }
  100% { transform: translateY(455%) }
}

.bio__hud { position: absolute; right: 12px; bottom: 11px; font-size: 11px;
  letter-spacing: .06em; color: rgba(255, 250, 236, .92);
  text-shadow: 0 1px 6px rgba(26, 18, 8, .8); }
.bio__hud b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bio__sweep { animation: none; top: 40%; }
}

/* Kare henüz okunmadıysa fotoğrafın yerinde nefes alan bir yer tutucu durur. */
.crop__ph { position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,.5), rgba(233,214,178,.55) 46%,
    rgba(255,255,255,.5));
  background-size: 220% 100%; animation: phshimmer 1.5s linear infinite; }
@keyframes phshimmer { to { background-position: -220% 0 } }

/* -------------------------------------------------------------- adımlar */

/* Bekleme sırasında yakınlaştırma kolu işe yaramıyordu ve altta koca bir
   boşluk kalıyordu. Yerine ne yapıldığı yazıyor. */
.steps { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.steps__i { display: flex; align-items: center; gap: 11px; font-size: 14px;
  color: var(--ink-32); transition: color .3s; }
.steps__i i { width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--ink-12); position: relative; transition: border-color .3s; }
.steps__i[data-on="now"] { color: var(--ink); }
.steps__i[data-on="now"] i { border-color: var(--gold-2); }
.steps__i[data-on="now"] i::after { content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--gold-2); animation: blink 1.1s ease-in-out infinite; }
.steps__i[data-on="done"] { color: var(--ink-55); }
.steps__i[data-on="done"] i { border-color: #2E7D53; background: #2E7D53; }
.steps__i[data-on="done"] i::after { content: ''; position: absolute; inset: 0;
  background: no-repeat center/9px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .crop__ph { animation: none; }
}

/* ---------------------------------------------------------- arama ekranı */

/* Tek fikir: yüz ortada, platformlar çevresinde dönüyor, altta her platform
   kendi hızında doluyor. Eskiden fotoğrafın üstünde ızgara, mesh, bant ve dört
   ayrı gösterge vardı; ne olduğu anlaşılmıyordu. */
.an-view { align-items: center; }

.orbit { position: relative; width: min(290px, 76vw); aspect-ratio: 1;
  margin: 22px auto 0; display: grid; place-items: center; }

.orbit__ring { position: absolute; border-radius: 50%;
  border: 1px solid rgba(42, 32, 20, .1); }
.orbit__ring--1 { inset: 0; }
.orbit__ring--2 { inset: 17%; border-style: dashed;
  border-color: rgba(226, 183, 90, .55); animation: spin 26s linear infinite; }

/* Halka döner, ikonlar ters döner: hepsi dik kalır.

   Yuva merkezden dışarı uzanan görünmez bir çubuk (yükseklik = yarıçap) ve
   kendi açısıyla döndürülüyor; ikon o çubuğun ucunda duruyor. Böylece ikonlar
   çember üzerine eşit aralıklarla diziliyor. */
.orbit__spin { position: absolute; inset: 0; animation: spin 30s linear infinite; }
.orbit__slot { position: absolute; left: 50%; top: 50%; width: 0; height: 43%;
  transform-origin: 0 0; }
.orbit__ic { position: absolute; left: -19px; bottom: -19px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 13px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--glass-line);
  box-shadow: 0 6px 14px rgba(90, 66, 26, .16);
  /* Halkanın dönüşünü birebir geri alır. Yalnızca sabit açıyı geri almak
     yetmiyordu: dönüş sürdükçe ikonlar yatıyordu. */
  animation: spinback 30s linear infinite; }
@keyframes spinback { to { transform: rotate(-360deg) } }

/* Yuvanın sabit açısını geri alan katman; nabız da burada. */
.orbit__up { display: grid; place-items: center;
  animation: orbitpulse 2.8s ease-in-out infinite; }
/* Nabız ölçeği sabit açıyı ezmesin diye açı da her kareye yazılıyor; bu
   yüzden ölçek yerine yalnızca opaklık değişiyor. */
@keyframes orbitpulse {
  0%, 100% { opacity: .55 }
  50%      { opacity: 1 }
}

.orbit__face { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--cream-1);
  box-shadow: 0 16px 34px rgba(90, 66, 26, .26); }
.orbit__face img { width: 100%; height: 100%; object-fit: cover; }
.orbit__sweep { position: absolute; left: 0; right: 0; height: 46%; top: -46%;
  background: linear-gradient(180deg, transparent, rgba(255, 246, 224, .22) 66%,
    rgba(255, 250, 236, .8));
  box-shadow: 0 1px 16px 4px rgba(233, 194, 100, .6);
  animation: biosweep 2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes biosweep {
  0%   { transform: translateY(0); opacity: 0 }
  12%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { transform: translateY(calc(100% + 46%)); opacity: 0 }
}

.anhead { text-align: center; margin-top: 22px; }
.anhead__n { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.anhead__n small { font-size: 20px; font-weight: 600; color: var(--ink-45); margin-left: 2px; }
.anhead__p { margin-top: 6px; font-size: 14.5px; color: var(--ink-70); }
.anhead__cmp { margin-top: 14px; text-align: center; font-size: 11px;
  letter-spacing: .06em; color: var(--ink-45); }

/* Şeritler. Hepsi aynı anda dolarsa tek çubuğun kopyası gibi duruyor; her
   platformun kendi hızı var. */
.lanes { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.lane { display: flex; align-items: center; gap: 10px; }
.lane__ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.lane__bar { flex: 1; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(42, 32, 20, .09); }
.lane__bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width .32s linear; }
.lane__n { width: 54px; flex: none; text-align: right; font-size: 11px;
  color: var(--ink-45); }

@media (prefers-reduced-motion: reduce) {
  .orbit__spin, .orbit__ring--2, .orbit__ic, .orbit__up, .orbit__sweep { animation: none; }
  .orbit__sweep { display: none; }
}

/* ------------------------------------------------------------------ iskelet */

/* Fotoğraf okunurken yerinde duran kutu. Parıldayan bir bant koymak ekranı
   daha da titrek gösteriyordu; iskelet sessizce nefes alıyor ve son düzenin
   yerini tutuyor. */
.skel { display: block; border-radius: 14px;
  background: rgba(42, 32, 20, .07);
  animation: skelpulse 1.6s ease-in-out infinite; }
.skel--fill { position: absolute; inset: 0; border-radius: inherit; }
@keyframes skelpulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) { .skel { animation: none } }

/* ------------------------------------------------------------ plan satırı */

/* Paywall'daki seçilebilir plan kartı. Taban kuralı bir bölüm yazımında
   silinmişti: satırlar çerçevesiz, dolgusuz ve seçili hâli belirsiz kalıyordu. */
.plan { display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 17px; border-radius: 22px; text-align: left;
  background: rgba(255, 255, 255, .66);
  border: 1.5px solid var(--glass-line);
  box-shadow: 0 8px 20px rgba(90, 66, 26, .08);
  transition: border-color .18s, background .18s, transform .12s; }
.plan:hover { border-color: rgba(226, 183, 90, .75); }
.plan:active { transform: scale(.99); }
.plan[data-on="1"] { border-color: var(--gold); background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 26px rgba(190, 140, 40, .2); }

/* Seçili planın fiyatı öne çıksın: hangi tutarın ödeneceği tartışmasız olmalı. */
.plan[data-on="1"] .plan__price { color: var(--gold-ink); }

/* ------------------------------------------------- tanıtım panel adımları */

/* İki adım klip değil, içeriğin kendisi: platform ızgarası ve yorumlar. Aynı
   kart kabında duruyorlar ki tanıtım tek bir ritimde aksın. */
.quest--plat, .quest--revs { background: linear-gradient(165deg,
  var(--cream-1) 0%, var(--cream-2) 58%, rgba(233, 194, 100, .3) 100%); }
.quest__panel { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 22px 18px 74px; }

.platgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
.platgrid__i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 15px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--glass-line);
  box-shadow: 0 6px 14px rgba(90, 66, 26, .12);
  animation: pop .5s ease both; }
.platgrid__more { font-size: 10.5px; letter-spacing: .1em; color: var(--ink-45); }

.revcards { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.revcard { display: block; padding: 12px 14px; border-radius: 16px; text-align: left;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--glass-line);
  box-shadow: 0 8px 18px rgba(90, 66, 26, .12); animation: pop .5s ease both; }
.revcard__stars { display: block; font-size: 11px; letter-spacing: .12em; color: var(--gold-2); }
.revcard__q { display: block; margin-top: 5px; font-size: 13px; line-height: 1.42;
  color: var(--ink); }
.revcard__who { display: block; margin-top: 6px; font-size: 10.5px; color: var(--ink-45); }

/* ------------------------------------------------------- tanıtım kabuğu */

.onb-top { display: flex; align-items: center; gap: 10px; }
.onb-step { font-size: 10px; letter-spacing: .14em; color: var(--ink-45); }
.onb-acts { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .platgrid__i, .revcard { animation: none; }
}


/* --------------------------------------------------- çözümleme katmanı --- */
/* Fotoğraf okunurken ve ölçülürken ekran değişmiyor: bulunulan ekran yerinde
   kalıp bulanıklaşıyor, kare bu katmanda netleşiyor ve ölçüm onun üstünde
   çalışıyor. Eskiden `check` ekranına atlanıp orada boş bir iskelet
   gösteriliyordu. */
.rsv {
  position: absolute; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(251, 244, 230, .56);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; transition: opacity .26s ease;
}
.rsv[data-on="1"] { opacity: 1; }

.rsv__card {
  width: 100%; max-width: 300px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: translateY(10px) scale(.97);
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}
.rsv[data-on="1"] .rsv__card { transform: none; }

/* Kutunun içindeki her şey absolute, o yüzden ölçü `aspect-ratio`'dan geliyor:
   yüzdeyle vermek doğal boyut sıfır olduğu için sıfıra çözülürdü. */
.rsv__frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 22px; overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 22px 46px rgba(90, 66, 26, .26), 0 0 0 1px rgba(90, 66, 26, .12);
}
.rsv__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: rsvsharp .85s ease .04s both;
}
/* Kare bulanık gelip netleşiyor: fotoğrafın "çözümlendiği" hissi buradan. */
@keyframes rsvsharp {
  from { filter: blur(15px); transform: scale(1.07); opacity: 0 }
  to   { filter: blur(0);    transform: none;        opacity: 1 }
}

.rsv__t { font-size: 16.5px; font-weight: 600; color: var(--ink); text-align: center; }
.rsv__s { font-size: 12.5px; line-height: 1.45; color: var(--ink-55);
  text-align: center; max-width: 262px; }
.rsv .steps { width: 100%; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rsv, .rsv__card { transition: none }
  .rsv__frame img { animation: none }
}

/* ------------------------------------------------- sınıfa alınan düzenler */
/* Bu üçü eskiden satır içi stildeydi; sınıfa alındılar ki geniş ekran
   şablonları da aynı görünümü kullanabilsin. Telefondaki sonuç birebir aynı. */
.histlist { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.setlist { display: flex; flex-direction: column; gap: 9px; }
/* Telefonda bu iki kap yokmuş gibi davranır; yalnız geniş şablonlarda anlam
   taşıyorlar. */
.home__rest, .prof__set { display: contents; }

/* ====================================================== GENİŞ EKRAN ====== */
/* Geniş ekranda ekranlar ayrı işaretleme üretiyor (bkz. Layout, js/ui.js).
   Buradaki kuralların tamamı yalnızca o işaretlemeye ait sınıflara dokunuyor
   (.wide, .wmedia, .wside, .sgrid); telefon sınıfları hiç ezilmiyor, bu yüzden
   iki düzen birbirini kıramaz. */

@media (min-width: 1080px) {
  :root[data-shell="wide"] .stage { min-height: 100vh; min-height: 100dvh;
    justify-content: center; }

  /* Kabuk yatıyor. Çentik ve alt çizgi telefonun işaretleri, burada yok. */
  /* Yükseklik telefondaki formülün aynısı: 96px, sahnenin dolgusu + altındaki
     satır. `90vh` yetmiyordu — kısa pencerelerde kabuk viewport'u taşıp altı
     kesiliyordu. */
  :root[data-shell="wide"] .device {
    width: min(1520px, 97vw);
    height: min(880px, calc(100vh - 68px));
    height: min(880px, calc(100dvh - 68px));
    border-radius: 26px;
  }
  /* Sahnenin dolgusu da masaüstünde daha ince; kabuk ekranı doldursun. */
  :root[data-shell="wide"] .stage { padding: 14px; gap: 8px; }

  /* Zemini KABUK boyuyor, ekran değil.
     `.view::before` mutlak konumlu ve `.view` kaydırma kabı olduğu için
     gradyan yalnız bir ekran boyu kaplıyordu: içerik uzayınca altta, üst
     çubuğun ardında da beyaz alan kalıyordu. */
  :root[data-shell="wide"] .device {
    background:
      radial-gradient(760px 620px at 88% 0%, rgba(228, 163, 60, .20), transparent 66%),
      radial-gradient(680px 560px at 4% 100%, rgba(226, 183, 90, .18), transparent 68%),
      linear-gradient(170deg, var(--cream-1) 0%, var(--cream-2) 52%, var(--cream-3) 100%);
  }
  :root[data-shell="wide"] .view::before { display: none; }

  /* Üst çubuk beyaz görünüyordu; zeminle aynı sıcaklıkta olsun. */
  :root[data-shell="wide"] .webbar { background: rgba(250, 242, 226, .66); }
  :root[data-shell="wide"] .device-island,
  :root[data-shell="wide"] .device-home { display: none; }

  /* Üst çubuk: alt sekme çubuğunun yerini alıyor ve HER ekranda duruyor.
     Gezinmeyi tek bir ekranın paneline gömmek kullanıcıyı sıkıştırıyordu. */
  :root[data-shell="wide"] #tabs {
    top: 0; bottom: auto; left: 0; right: 0; height: 62px; z-index: 45;
  }
  :root[data-shell="wide"] .screen { top: 62px; left: 0; }
  :root[data-shell="wide"] .view--tabs { padding-bottom: var(--pad-b) !important; }

  .webbar {
    height: 62px; display: flex; align-items: center; gap: 22px;
    padding: 0 22px; background: rgba(253, 249, 241, .8);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(42, 32, 20, .08);
  }
  .webbar__brand { display: flex; align-items: center; gap: 10px; flex: none; }
  .webbar__brand img { width: 30px; height: 30px; border-radius: 10px; }
  .webbar__brand b { font-size: 13px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink); }
  .webbar__nav { display: flex; align-items: center; gap: 4px; flex: 1; }

  .wtab {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 12px; color: var(--ink-55);
    font-size: 13.5px; font-weight: 600;
    transition: background .16s, color .16s;
  }
  .wtab svg { width: 17px; height: 17px; }
  .wtab:hover { background: rgba(255, 255, 255, .8); color: var(--ink); }
  .wtab[data-on="1"] { background: rgba(233, 194, 100, .3); color: var(--gold-ink); }

  /* ------------------------------------------------ geniş ekran şablonu -- */
  /* Ortak sayfa kabı: içerik ortalanmış, kendi içinde kayan bir sütun. */
  /* `.view` kabuğun tamamını kaplamak ZORUNDA: kendi gradyanını
     `.view::before` ile boyuyor, `max-width` verilince gradyan içerik
     sütununda kalıyor ve kenarlarda kabuğun açık kremi beyaz şerit gibi
     görünüyordu. Genişlik tam, ortalama simetrik dolguyla yapılıyor. */
  .view.wide {
    max-width: none; width: 100%; height: 100%;
    padding: 18px 24px 22px; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 14px;
  }
  /* Ortalanan sütun genişliği; her sayfa kendi ölçüsünü bu değişkene yazıyor. */
  .view.wide { --col: 1360px;
    padding-inline: max(24px, calc((100% - var(--col)) / 2)); }
  .view.wide > * { flex: none; }
  .view.wide .h2 { font-size: 26px; }

  /* Kendi geniş şablonu olmayan ekranlar (giriş, arama animasyonu, sonuç,
     kredi paketleri) ortalanmış bir sayfa sütununda duruyor. Üst çubuk
     olduğu için bu artık boşlukta kalmış bir şerit değil, sayfa gibi
     okunuyor. */
  /* Kendi geniş şablonu olmayan ekranlar da tam genişlikte; sütun dolguyla
     ortalanıyor, yoksa kenarlarda beyaz şerit kalıyor. */
  .view:not(.wide) {
    width: 100%; padding: 26px 30px;
    padding-inline: max(30px, calc((100% - 680px) / 2));
  }
  /* Alt sekme çubuğu yok; onun için ayrılan boşluk da gereksiz. */
  :root[data-shell="wide"] .view--tabs { padding-bottom: 30px !important; }
  /* Çubuksuz ekranlarda içerik dikeyde ortalansın. */
  :root[data-shell="wide"] #tabs[hidden] ~ .screen .view:not(.wide) {
    min-height: 100%; justify-content: center;
  }

  /* --------------------------------------------------------- ana ekran -- */
  .view.wide--home { --col: 1360px; }

  /* Yatay klip şeridi: web için ayrı üretilen 16:9 klipler burada.
     Kare yan kart bu oranı taşıyamıyordu. */
  /* Klip ve bırakma alanı yan yana: klip geniş, bırakma alanı dar. İkisi de
     satırın yüksekliğini alıyor. */
  .wbanner {
    position: relative; height: 100%; border-radius: 24px; overflow: hidden;
    background: var(--cream-2); box-shadow: 0 14px 30px rgba(90, 66, 26, .14);
  }
  .wbanner__film { position: absolute; inset: 0; }
  .wbanner__film img, .wbanner__film video {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
    display: block; }
  /* Cümle solda: kliplerde negatif alan orada. */
  /* Klibin sol tarafı açık krem: düz mürekkep yazı orada kayboluyordu.
     Yumuşak bir cam panel hem okutuyor hem markanın diline uyuyor. */
  .wbanner__say {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    max-width: 46%; z-index: 2;
    padding: 14px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 10px 24px rgba(90, 66, 26, .12);
    font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink);
    opacity: 0; transition: opacity .35s;
  }
  .wbanner__say[data-on="1"] { opacity: 1; }

  /* Satır ne kadar yüksekse klip o kadar az dikey kırpılıyor (kaynak 16:9).
     Pencere yüksekliğine göre ölçekleniyor ki kısa ekranlarda taşmasın. */
  .whead { display: grid; grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px; height: clamp(320px, 46vh, 480px); }

  /* Bırakma alanı sabit yükseklikte: ekranı yutuyordu. */
  .wdrop {
    height: 100%; display: grid; place-items: center;
    border-radius: 24px; cursor: pointer;
    border: 2px dashed rgba(154, 111, 20, .38);
    background: linear-gradient(160deg, rgba(255, 255, 255, .58), rgba(247, 239, 223, .72));
    transition: border-color .18s, background .18s;
  }
  .wdrop:hover { border-color: var(--gold-2); background: rgba(255, 255, 255, .74); }
  .wdrop[data-on="1"] { border-color: var(--gold-deep); background: rgba(233, 194, 100, .16); }

  .wdrop__in { display: flex; flex-direction: column; align-items: center;
    gap: 7px; padding: 18px; text-align: center; }
  .wdrop__ic { display: grid; place-items: center; width: 52px; height: 52px;
    border-radius: 18px; background: rgba(233, 194, 100, .3); color: var(--gold-ink); }
  .wdrop__ic svg { width: 23px; height: 23px; }
  .wdrop__t { font-size: 18px; font-weight: 600; color: var(--ink); }
  .wdrop__s { font-size: 12.5px; color: var(--ink-55); max-width: 290px; line-height: 1.42; }
  .wdrop__b { margin-top: 8px; pointer-events: none; padding: 10px 22px; font-size: 14px; }

  /* Sayaç ve platform şeridi tek satırda. */
  .wbar { display: flex; align-items: center; gap: 22px; }
  .wbar .live { margin: 0; flex: none; }
  .wbar .pstrip { flex: 1; min-width: 0; margin: 0; }

  .wrevs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* --------------------------------------------------- geçmiş ve hesap -- */
  .view.wide--list, .view.wide--prof { --col: 1360px; }

  /* Geçmiş: kart ızgarası. */
  .wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 1500px) { .wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Izgara hücresi dar: satır içi metinler birbirinin üstüne biniyordu.
     Tarih tek satırda kalıyor, sağdaki blok kendi genişliğini koruyor. */
  .wgrid .match { padding: 12px 14px; gap: 10px; }
  .wgrid .match__body { min-width: 0; }
  .wgrid .match__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wgrid .match__handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11.5px; }
  .wgrid .match__side { flex: none; text-align: right; }
  .wgrid .match__pct { font-size: 16px; }
  .wgrid .match__loc { display: none; }

  .wempty { display: flex; flex-direction: column; align-items: center;
    gap: 16px; margin-top: 40px; text-align: center; }
  .wnone { padding: 26px; border-radius: 20px; text-align: center;
    color: var(--ink-45); font-size: 13.5px;
    background: rgba(255, 255, 255, .5); border: 1px dashed rgba(42, 32, 20, .14); }

  /* Hesap. Telefon ölçüleri geniş ekranda devasa duruyordu. */
  .wide--prof .who { margin: 0; }
  .wide--prof .who__av { width: 62px; height: 62px; }
  .wide--prof .who__name { font-size: 21px; }
  .wide--prof .stats { margin: 0; }
  .wide--prof .stat { padding: 14px 16px; }
  .wide--prof .stat b { font-size: 26px; }
  .wide--prof .srow { padding: 12px 15px; font-size: 14px; }
  .wide--prof .srow svg { width: 18px; height: 18px; }
  .wide--prof .hrow { padding: 9px 0; }

  .wcols { display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px; align-items: start; }
  .wcol { min-width: 0; }
  .wcol .sect { margin-top: 0; }

  /* Kırpma: solda kare, sağda puan ve eylemler. */
  /* `.view.wide` iki sınıf değerinde; tek sınıflı seçici display'i ezemiyor. */
  .view.wide--check { display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 30px; --col: 1360px; flex: 1; min-height: 0; }
  .wide--check .wmain { display: grid; place-items: center; min-height: 0; }
  .wide--check .crop { width: auto; height: min(100%, 520px); aspect-ratio: 1 / 1; margin: 0; }
  .wide--check .wside { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .wide--check .wside > * { flex: none; }
  .wide--check .spacer { flex: 1; min-height: 10px; }

  /* Paywall: solda görsel, sağda planlar. */
  .view.wide--pay { display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    column-gap: 44px; align-items: center; --col: 1280px; flex: 1; min-height: 0; }
  .wpay__l { display: grid; place-items: center; min-height: 0; }
  .wide--pay .paywall-hero { margin: 0; width: 100%; max-width: 420px; }
  .wpay__r { display: flex; flex-direction: column; gap: 14px; }
  .wpay__r > * { flex: none; }
  .wide--pay .h1 { font-size: 30px; }
  .wfeats { display: flex; flex-direction: column; gap: 9px; }
  .wplans { display: flex; flex-direction: column; gap: 9px; }
  .wlegal { display: flex; justify-content: center; gap: 14px; }
  .wpay__back { width: auto; padding: 0; align-self: flex-start; }

  /* Tanıtım: solda kart, sağda metin. */
  .view.wide--onb { display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    column-gap: 56px; align-items: center; --col: 1280px; flex: 1; min-height: 0; }
  .wonb__art { display: grid; place-items: center; min-height: 0; height: 100%; }
  /* Kart yüksekliğini kabından alıyor; çocukları mutlak konumlu olduğu için
     yüzde yükseklik sıfıra çözülürdü. */
  .wide--onb .quest { position: relative; inset: auto; transform: none;
    height: min(100%, 460px); width: auto; aspect-ratio: 640 / 800; margin: 0; }
  .wonb__copy { display: flex; flex-direction: column; gap: 14px; }
  .wonb__copy > * { flex: none; }
  .wide--onb .h1 { font-size: 34px; line-height: 1.1; }
  .wide--onb .bars { max-width: 200px; }
  .wide--onb .onb-acts { margin-top: 8px; }
  /* Balon hem kartta hem metinde duruyordu; kartta kalsın. */
  .wide--onb .sub { display: none; }

  /* Arama: solda yörünge, sağda çubuklar. */
  .view.wide--an { display: grid; grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 56px; align-items: center; --col: 1280px; flex: 1; min-height: 0; }
  .wan__l { display: grid; place-items: center; min-height: 0; }
  /* Yörünge telefon ölçüsünde kalınca sol sütunda kaybolmuş gibi duruyordu;
     sütunun kısa kenarına göre ölçekleniyor. */
  .wide--an .orbit { margin: 0; width: min(100%, 60vh, 520px); height: auto;
    aspect-ratio: 1 / 1; }
  /* İkon kutusu px cinsinden sabit: kap büyüyünce onlar küçük kalıyordu. */
  .wide--an .orbit__ic { left: -25px; bottom: -25px; width: 50px; height: 50px;
    border-radius: 17px; }
  .wide--an .orbit__ic svg { width: 26px; height: 26px; }
  .wan__r { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .wan__r > * { flex: none; }
  .wide--an .anhead { margin: 0; }
  .wide--an .lanes { width: 100%; }

  /* Sonuç: solda özet ve eylemler, sağda eşleşmeler. */
  .view.wide--res { display: grid; grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 30px; --col: 1360px; flex: 1; min-height: 0; }
  .wres__side { display: flex; flex-direction: column; gap: 14px; min-height: 0;
    overflow-y: auto; padding-right: 4px; }
  .wres__side > * { flex: none; }
  /* Eylemleri sayfanın en dibine itmek, kısa sonuçlarda ortada kocaman bir
     boşluk bırakıyordu; içeriğin hemen altında dursunlar. */
  .wres__side .spacer { flex: none; min-height: 18px; }
  .wres__side { justify-content: flex-start; }
  .wres__no { font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-45); }
  .wres__idx { display: flex; align-items: baseline; gap: 9px; }
  .wres__idx .mono { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-45); }
  .wres__n { font-size: 23px; font-weight: 700; color: var(--gold-deep); }
  .wide--res .h1 { font-size: 27px; }

  .wres__main { min-height: 0; overflow-y: auto; padding-right: 4px; }
  .wres__grid { display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    gap: 10px; margin-top: 12px; align-content: start;
    /* Az sonuçta kartlar saçma genişliğe uzamasın. */
    max-width: calc(var(--cols, 2) * 420px); }
  .wres__grid .match__body { min-width: 0; }
  .wres__grid .match__name, .wres__grid .match__handle {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wres__grid .match__side { flex: none; text-align: right; }

  .sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sgrid .scard { width: auto; }
  .sgrid .scard__ph { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}