/* ============================================================
   instrument.css — "ölçüm cihazı" katmanı (2026-08-31)

   Higgsfield'da üretilen alternatif tasarımdan harmanlanan görsel
   dil. home.css'in ÜSTÜNE biner, onu değiştirmez — tek satırlık
   <link> ile tamamen geri alınabilir.

   Alınanlar: şampanya altını ince detay rengi, ölçüm etiketleri için
   monospace tipografi, hairline kurallar + bölüm numaraları,
   viewfinder köşe braketleri, hero tarama çizgisi, metrik barlarında
   parlama.

   Alınmayanlar (bilinçli): ana marka rengi amber KALIR — uygulamanın
   markası o; şampanya yalnız ince detaylarda kullanılır. Hero'daki
   gerçek uygulama ekranı yapay zekâ görseliyle değiştirilmez.
   ============================================================ */

:root {
  /* Şampanya altını — Higgsfield tasarımının vurgu tonu. Amber'in
     yerine değil, yanına: ölçüm/teknik detay rengi. */
  --gold:      #D8B45A;
  --gold-dim:  rgba(216, 180, 90, 0.45);
  --gold-hair: rgba(216, 180, 90, 0.22);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 1) Bölüm etiketleri: hairline + numara ----------
   "— ANALİZLER / 01 —" görünümü. Numara data-num ile verilir;
   verilmeyen etiket eski haline yakın kalır (kırılmaz). */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
  flex: none;
}

.eyebrow[data-num]::after {
  content: "/ " attr(data-num);
  color: var(--gold-dim);
  letter-spacing: 0.18em;
}

.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::before { display: none; }

/* ---------- 2) Ölçüm sayıları monospace ----------
   Rakamlar "cihaz okuması" gibi dursun; başlıklar Archivo kalır. */

.stat b,
.metric-val,
.score-num,
.price-num {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* ---------- 3) Viewfinder köşe braketleri ----------
   .vf sınıfı verilen her kutuya dört köşe braketi. Higgsfield'ın
   mağaza butonlarındaki çerçevenin aynısı. */

.vf {
  position: relative;
  isolation: isolate;
}

.vf::before,
.vf::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
  transition: border-color .25s var(--ease), inset .25s var(--ease);
}

.vf::before {
  top: -5px; left: -5px;
  border-right: 0; border-bottom: 0;
}

.vf::after {
  bottom: -5px; right: -5px;
  border-left: 0; border-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vf:hover::before, .vf:hover::after { border-color: var(--gold); }
}

/* ---------- 4) Çerçeveli mağaza butonu ----------
   Higgsfield'ın final bölümündeki "▢ APP STORE'DAN İNDİR ——" butonu.
   Amber dolgu yerine çizgi çerçeve; ana buton (.btn) dolgulu kalır. */

.btn--frame {
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--gold-hair);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  gap: 12px;
  padding: 15px 22px;
}

.btn--frame::before {
  content: "";
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  flex: none;
}

.btn--frame::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold-dim);
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--frame:hover {
    background: rgba(216, 180, 90, 0.06);
    box-shadow: inset 0 0 0 1px var(--gold-dim);
  }
}

/* ---------- 5) Hero tarama çizgisi ----------
   Sürekli aşağı inen ince altın çizgi. Sayfanın "canlı ölçüm
   yapıyor" hissini veren şey bu. */

.scanline {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.scanline i {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 25%, var(--gold) 50%, var(--gold-dim) 75%, transparent);
  opacity: .5;
  animation: scan 7s linear infinite;
}

@keyframes scan {
  0%   { transform: translateY(-10%); opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .55; }
  100% { transform: translateY(1000%); opacity: 0; }
}

/* ---------- 6) Metrik barlarında parlama ----------
   Dolan barın üzerinden bir kez geçen ışık. */

.bar > i,
.metric-bar > i {
  position: relative;
  overflow: hidden;
}

.bar > i::after,
.metric-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: sheen 2.6s var(--ease) 1.1s infinite;
}

@keyframes sheen {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}

/* ---------- 7) Decode (yazı karışması) ----------
   JS efekti çalışırken sabit genişlik: buton zıplamasın. */

[data-decode] {
  font-variant-ligatures: none;
}

[data-decode].is-decoding {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* ---------- 8) İnce ayrım çizgileri ----------
   Bölüm başlıklarının altına saç teli çizgi. */

.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--gold-hair), transparent 60%);
}

/* ---------- Erişilebilirlik ---------- */

@media (prefers-reduced-motion: reduce) {
  .scanline i,
  .bar > i::after,
  .metric-bar > i::after { animation: none; }
  .scanline i { opacity: .25; transform: translateY(400%); }
}

/* ============================================================
   2. TUR (2026-08-31) — owner'ın işaret ettiği iki bölüm

   Higgsfield tasarımında bizimkinden daha iyi olan iki yer:
   skor bölümünün iki sütunlu "rapor" düzeni (solda büyük skor,
   sağda sekmeler + satır satır metrikler) ve gizlilik bölümünün
   kutusuz, büyük mono rakamlı sayı sütunları.

   İçerik aynı — yalnızca düzen ve tipografi değişiyor. Kart
   ızgarası satır listesine dönüşüyor; dolum animasyonu (--v
   değişkeni ve .is-filled) home.css'teki haliyle çalışmaya
   devam ediyor, sadece bar artık satırın altındaki saç teli.
   ============================================================ */

/* ---------- Skor: iki sütunlu rapor düzeni ---------- */

@media (min-width: 900px) {
  #skor {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }

  #skor .sec-head { grid-column: 1 / -1; }
  #skor .switch   { grid-column: 2; grid-row: 2; }
  /* display:contents → .report-head ve .mgrid doğrudan ızgara öğesi olur;
     gizli sekme [hidden] ile display:none kalır, ızgaraya girmez. */
  #skor .report:not([hidden]) { display: contents; }
  #skor .report-head { grid-column: 1; grid-row: 2 / span 2; }
  #skor .mgrid       { grid-column: 2; grid-row: 3; }
}

/* başlık artık sola yaslı — ortalanmış hali iki sütunla uyuşmuyor */
#skor .sec-head--center { text-align: left; margin-inline: 0; }
#skor .sec-head--center .sec-lede { margin-inline: 0; }
#skor .sec-head--center .eyebrow { justify-content: flex-start; }
#skor .sec-head--center .eyebrow::before { display: block; }

/* ---------- Skor: sol sütun (büyük okuma) ---------- */

#skor .report-head {
  display: block;
  padding: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#skor .panel-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--text-3);
  margin-bottom: 16px;
}

#skor .panel-score {
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 96px);
  color: var(--text);
  gap: 12px;
}

#skor .report[data-report="psl"] .panel-score { color: var(--text); }
#skor .panel-score small { font-family: var(--mono); font-size: 16px; }

/* "Alfa" rozeti: yuvarlak hap değil, köşeli ölçüm etiketi */
#skor .panel-score .badge--tier {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  border-color: var(--gold-dim);
  color: var(--gold);
  padding: 4px 8px;
}

#skor .report-note { margin-top: 18px; max-width: 34ch; }

/* iki mini istatistik: kutu yerine üstten saç teli çizgi */
#skor .report-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

#skor .pill {
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  gap: 8px;
}

#skor .pill i {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

#skor .pill b { font-family: var(--mono); font-size: 15px; font-weight: 500; }

/* ---------- Skor: sekmeler (hap değil, altı çizili) ---------- */

#skor .switch {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  gap: clamp(18px, 2.4vw, 34px);
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}

#skor .sw {
  padding: 0 0 13px;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
}

#skor .sw.is-on { background: none; color: var(--gold); }

#skor .sw.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
}

/* ---------- Skor: metrikler artık satır ---------- */

#skor .mgrid {
  display: block;
  gap: 0;
}

#skor .mgrid li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 16px;
  padding: 17px 0 18px;
  border: 0;
  border-radius: 0;
  background: none;
}

#skor .mg-i { display: none; }          /* satır düzeninde ikon kutusu fazlalık */

#skor .mgrid p {
  margin: 0;
  min-height: 0;
  font-size: 14.5px;
  color: var(--text);
}

#skor .mgrid .badge {
  order: 2;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

#skor .mgrid b {
  order: 3;
  display: block;
  margin: 0;
  min-width: 62px;
  text-align: right;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}

#skor .mgrid b small { font-family: var(--mono); font-size: 14px; margin-left: 0; }

/* bar: satırın altındaki saç teli, dolan kısmı şampanya */
#skor .mgrid i {
  left: 0; right: 0; bottom: 0;
  height: 1px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.07);
}

#skor .mgrid i::after,
#skor .report[data-report="psl"] .mgrid i::after {
  --bar: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 0;
}

/* ---------- Gizlilik: kutusuz büyük sayılar ---------- */

.pv-facts {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 3.8vw, 46px);
  gap: clamp(18px, 4vw, 48px);
}

.pv-facts > div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

.pv-facts b {
  font-family: var(--mono);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.pv-facts span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--text-3);
}

/* gizlilik bölümü ortalı — etiketi de ortala (varsayılan sola yaslı) */
.privacy-in .eyebrow { justify-content: center; }

/* ============================================================
   3. TUR (2026-08-31) — "kutu kokusunu" kaldırma

   Owner teşhisi: kutu içinde kutu, 18px köşe yuvarlaklığı, dolgulu
   yüzeyler, her yerde aynı sans font, yuvarlak ikon kutucukları ve
   üç ayrı vurgu rengi — hepsi birlikte "hazır şablon" hissi veriyor.

   Çözüm, Higgsfield tasarımındaki ilke: ayırma işini kutu değil
   SAÇ TELİ ÇİZGİ + BOŞLUK yapar; hiyerarşiyi kutu değil TİPOGRAFİ
   kurar (mono/büyük harf/geniş aralık = etiket, büyük mono = değer).
   ============================================================ */

/* ---------- Ortak: ölçüm etiketi ---------- */

.panel-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- İlerleme: dış kutular kalkıyor ---------- */

.chartcard,
.areas {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.prog-grid { gap: clamp(28px, 4vw, 64px); }

/* iki sütunu kutu değil, aradaki tek dikey çizgi ayırsın */
@media (min-width: 900px) {
  .areas {
    border-left: 1px solid var(--line);
    padding-left: clamp(28px, 3.4vw, 56px);
  }
}

.chart-now {
  font-family: var(--mono);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.chart-now small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* 7/30/90 Gün: hap grubu değil, altı çizili sekmeler */
.ranges {
  gap: clamp(16px, 2vw, 26px);
  padding: 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}

.rg {
  position: relative;
  padding: 0 0 11px;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rg.is-on { background: none; color: var(--gold); }

.rg.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
}

/* ikinci seri yeşil değil sessiz gri — tek vurgu rengi kuralı */
.chart-line--2 { stroke: var(--text-3); opacity: .55; }
.chart-legend .k--appear { background: var(--text-3); }
.chart-legend { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.chart-axis text, .chart-x text, .chart-unit { font-family: var(--mono); }
.chart-tip { font-family: var(--mono); font-size: 14px; font-weight: 500; }

/* ---------- İlerleme: alt kutular satıra dönüyor ---------- */

.area-grid {
  display: block;
  margin: 18px 0 0;
}

.area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 16px;
  padding: 16px 0 17px;
  border: 0;
  border-radius: 0;
  background: none;
}

.area-i { display: none; }            /* yuvarlak ikon kutucuğu = şablon kokusu */

.area b {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}

.area em {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: right;
}

.area u {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: .75;
}

.area i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- Egzersiz sayıları: kutusuz ---------- */

.ex-facts {
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 34px);
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(26px, 3vw, 38px);
}

.ex-facts > div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}

.ex-facts b {
  font-family: var(--mono);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 10px;
}

.ex-facts span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* ---------- Modül listesi: süre/metrik etiketi mono ---------- */

.modlist em { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

/* ============================================================
   4. TUR — Fiyatlandırma (2026-08-31)

   Higgsfield'ın düzeni: iki panel tek çerçeve içinde, aralarında
   saç teli dikey çizgi; keskin köşe, dolgusuz yüzey; "EN KAPSAMLI"
   dolu amber hap yerine altın çerçeveli mono etiket; madde işareti
   daire yerine ✓; butonlar dolgu yerine çizgi çerçeve.

   Owner'ın yakaladığı kusur da düzeltildi: Higgsfield'ın kendi
   sitesinde madde sayısı farklı olduğu için butonlar farklı
   hizadaydı. Burada paneller eşit yükseklikte (grid stretch) ve
   buton `margin-top:auto` ile her zaman en alta yapışır — madde
   sayısı değişse bile iki buton aynı hizada kalır.
   ============================================================ */

.plans {
  gap: 0;
  max-width: 1020px;
  border: 1px solid var(--line);
  align-items: stretch;
}

.plan {
  padding: clamp(26px, 3vw, 40px);
  border: 0;
  border-radius: 0;
  background: none;
}

.plan + .plan { border-left: 1px solid var(--line); }

/* premium panel: amber dolgu yerine çok hafif şampanya yıkaması */
.plan--lead {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.055), transparent 62%);
}

/* üst şerit: solda rozet, sağda mono plan etiketi */
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 18px;
}

.plan-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

/* dolu amber hap → altın çerçeveli ölçüm etiketi, panelin içinde */
.plan-flag {
  position: static;
  padding: 6px 11px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: none;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* iki plan adı da beyaz — tek vurgu rengi kuralı */
.plan-name { font-size: clamp(26px, 2.6vw, 32px); }
.plan--lead .plan-name { color: var(--text); }

.plan-line { max-width: 34ch; }

/* madde işareti: boş daire → ✓ */
.plan li { padding-left: 26px; }

.plan li::before {
  content: "✓";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.55;
}

/* butonlar: ikisi de çizgi çerçeve, mono, keskin köşe, en altta */
.plan .btn {
  margin-top: auto;
  border-radius: 3px;
  padding: 17px 20px;
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.plan--lead .btn {
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-hair);
}

@media (hover: hover) and (pointer: fine) {
  .plan .btn:hover { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--text-3); }
  .plan--lead .btn:hover { background: rgba(216, 180, 90, 0.07); box-shadow: inset 0 0 0 1px var(--gold-dim); }
}

.plans-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.9; }

/* dar ekran: yan yana çizgi yerine üstten çizgi */
@media (max-width: 760px) {
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============================================================
   Dar ekran menü düzeltmesi (2026-08-31)

   Eski hata (bu turda ölçülerek yakalandı): 375px'te marka yazısı
   kendi kutusundan taşıp (sağ kenar 161px) dil düğmesinin (139px'te
   başlıyor) üstüne biniyordu; ayrıca "Uygulamayı indir" iki satıra
   düşüp menüyü 88px yüksekliğe çıkarıyordu.

   Çözüm: küçük ekranda wordmark ve düğmeler ölçülü şekilde küçülür,
   buton tek satırda kalır. Tasarım aynı, sadece sığıyor.
   ============================================================ */

@media (max-width: 560px) {
  .nav { gap: 10px; }
  .brand { min-width: 0; gap: 9px; }
  .brand img { width: 28px; height: 28px; }
  .brand-text b { font-size: 13.5px; letter-spacing: 0.12em; }
  .brand-text i { font-size: 8px; }
  .lang { padding: 2px; }
  .lang .lg { padding: 6px 11px; font-size: 11px; }
  .nav .btn--sm { padding: 9px 14px; font-size: 12px; white-space: nowrap; }
}