/* ==========================================================================
   LogWa — Telefon çerçevesi ve içindeki uygulama ekranı
   --------------------------------------------------------------------------
   Sitede ekran görüntüsü dosyası kullanılmıyor; uygulamanın Analizler
   ekranı HTML/CSS ile yeniden çiziliyor. Böylece görsel her çözünürlükte
   keskin kalıyor, grafikler canlı animasyon alabiliyor ve metin gerçek
   metin olduğu için seçilebilir/erişilebilir oluyor.

   ÖLÇEKLEME STRATEJİSİ — NEDEN transform: scale()
   ------------------------------------------------
   Uygulamanın tasarım referansı 375x812 (`app.dart` designSize) ve tüm
   ölçüleri `.r`/`.sp` ile bu tabana göre hesaplanıyor. Ekranı burada da
   TAM 375x812 olarak kuruyoruz ve `transform: scale()` ile küçültüyoruz.

   Alternatif (daha küçük genişlikte kurup yazı tiplerini ayrı ölçekleme)
   her ölçüyü elle yeniden hesaplamayı gerektirirdi ve oranlar kayardı.
   scale() ile tek bir çarpan bütün düzeni birlikte taşıyor: uygulamayla
   oran hatası ihtimali sıfır.

   TİPOGRAFİ İZOLASYONU
   --------------------
   Sitenin tipografisi akışkan (`clamp()`), uygulamanınki sabit. Telefonun
   içine sitenin ölçeği sızarsa mockup uygulamaya benzemez. Bu yüzden
   `.phone` kapsamındaki her metin, uygulamanın SABİT sp değerini alır
   (aşağıdaki `--pf-*` değişkenleri). Bunlar bilinçli olarak tokens.css'in
   akışkan ölçeğini kullanmaz.
   ========================================================================== */

.phone {
  /* Ölçek: kırılım noktalarına göre ayarlanır (dosya sonunda) */
  --phone-scale: 0.78;

  /* ----------------------------------------------------------------------
     Uygulamanın SABİT tipografi değerleri (app_typography.dart)
     `sp` birimi 375px tabanında px'e eşit olduğu için doğrudan px.
     ---------------------------------------------------------------------- */
  --pf-display-md: 21px; /* displayMedium — "Hoş geldin, ..." */
  --pf-headline: 18px; /* headline — bölüm başlığı */
  --pf-title: 15px; /* title — kart başlığı */
  --pf-body-lg: 13px;
  --pf-body-md: 12px;
  --pf-body-sm: 11px;
  --pf-caption: 10px;
  --pf-counter: 26px; /* stat_card.dart: counter 32sp -> 26sp'ye kısılıyor */

  position: relative;
  width: calc(375px * var(--phone-scale));
  height: calc(812px * var(--phone-scale));
  flex: none;
}

/* Gerçek 375x812 düzeni taşıyan katman. Sol üstten ölçeklenir ki
   sarmalayıcının kutusuyla birebir örtüşsün. */
.phone__scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 812px;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   ÇERÇEVE
   --------------------------------------------------------------------------
   Uygulamada bir karşılığı yok (bu bir sunum öğesi). Koyu metal hissi
   paletin yüzey renklerinden kuruluyor, yeni renk uydurulmuyor.
   -------------------------------------------------------------------------- */

.phone__frame {
  position: absolute;
  inset: 0;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(
    160deg,
    #2b3a42 0%,
    #16222a 38%,
    #0d171d 68%,
    #223038 100%
  );
  /* Çerçevenin kendi hairline'ı: kenarda ince bir ışık çizgisi */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 60px -12px rgba(0, 0, 0, 0.75),
    0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--c-background);
  overflow: hidden;
  /* Ekranı izole et: içindeki blur'lu katmanlar dışarı sızmasın */
  isolation: isolate;
}

/* Dynamic island */
.phone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 20;
  width: 96px;
  height: 27px;
  margin-left: -48px;
  border-radius: var(--r-pill);
  background: #05090b;
}

/* --------------------------------------------------------------------------
   DURUM ÇUBUĞU
   -------------------------------------------------------------------------- */

.phone__statusbar {
  position: relative;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 24px 0 28px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-text-primary);
  font-variant-numeric: tabular-nums;
}

.phone__statusicons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--c-text-primary);
}

/* --------------------------------------------------------------------------
   EKRAN İÇERİĞİ
   --------------------------------------------------------------------------
   Uygulamanın Analizler sekmesi: yatay padding lg (20), üstte safe-area,
   altta navbar payı. (analytics_view.dart)
   -------------------------------------------------------------------------- */

.phone__body {
  position: relative;
  z-index: 10;
  height: calc(812px - 44px);
  padding: 4px 20px 0;
  /* Gerçek uygulamada burası kaydırılabilir bir ListView. Mockup'ta
     kaydırma istemiyoruz: taşan kısım navbar'ın erime bandında sönüyor. */
  overflow: hidden;
}

/* Ekran içi aurora — uygulamada RootTabsView intensity 0.45 ve
   `animate: false` veriyor. Mockup'ta da hareketsiz: telefonun içindeki
   kıpırtı dikkati grafiklerden çalıyor. */
.phone__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.phone__aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
}

.phone__aurora span:nth-child(1) {
  top: -60px;
  left: -50px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.16) 0%, transparent 70%);
}

.phone__aurora span:nth-child(2) {
  top: 240px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 168, 132, 0.14) 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   WelcomeHeader  (analytics/widgets/welcome_header.dart)
   --------------------------------------------------------------------------
   caption "GENEL BAKIŞ" + 4px + displayMedium selam, sağda 40px avatar
   (surfaceHigh zemin, border kenarlık, NÖTR metin — gradyanlı avatar
   bilinçli olarak kaldırılmış).
   -------------------------------------------------------------------------- */

.pf-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pf-welcome__text {
  flex: 1;
  min-width: 0;
}

.pf-welcome__kicker {
  font-size: var(--pf-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.pf-welcome__greeting {
  margin-top: 4px;
  font-size: var(--pf-display-md);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
  color: var(--c-text-primary);
}

.pf-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-high);
  font-size: var(--pf-title);
  font-weight: var(--fw-bold);
  color: var(--c-text-secondary);
}

/* --------------------------------------------------------------------------
   PersonChipsRow  (core/widgets/person_chips_row.dart)
   Satır yüksekliği 38px, ayraç 8px.
   -------------------------------------------------------------------------- */

.pf-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-bottom: 16px;
}

.pf-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px 0 7px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--pf-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  white-space: nowrap;
}

.pf-chip--selected {
  border-color: var(--c-selected-border);
  background: var(--c-selected-card);
  font-size: var(--pf-title);
  font-weight: var(--fw-bold);
  color: var(--c-text-primary);
}

/* Çip içindeki 24px baş harf avatarı: seçiliyken primary %16 zemin +
   primary %35 kenarlık, değilse surfaceHigh + border. */
.pf-chip__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface-high);
  font-size: var(--pf-caption);
  font-weight: var(--fw-bold);
  color: var(--c-text-secondary);
}

.pf-chip--selected .pf-chip__avatar {
  border-color: rgba(37, 211, 102, 0.35);
  background: rgba(37, 211, 102, 0.16);
  color: var(--c-primary);
}

/* Ekle düğmesi: 38x38 pill, ortada 16px artı */
.pf-chip-add {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-primary);
}

.pf-chip-add .icon {
  --icon-size: 16px;
}

/* --------------------------------------------------------------------------
   SectionHeader  (core/widgets/section_header.dart)
   headline (18) + bodySmall alt satır + sağda pill etiket
   -------------------------------------------------------------------------- */

.pf-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pf-section__title {
  font-size: var(--pf-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--c-text-primary);
}

.pf-section__sub {
  margin-top: 2px;
  font-size: var(--pf-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

.pf-section__tag {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: rgba(31, 44, 52, 0.7);
  font-size: var(--pf-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-secondary);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   SurfaceCard (telefon içi)
   radius 20, surface, 1px border, GÖLGESİZ
   -------------------------------------------------------------------------- */

.pf-card {
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

/* --------------------------------------------------------------------------
   StatsGrid + StatCard  (analytics/widgets/stats_grid.dart, stat_card.dart)
   --------------------------------------------------------------------------
   2x2, aralar 12px (AppSpacing.sm). Kart: padding 12, IconTile 28px
   (ikon 14), etiket bodySmall/textSecondary, değer counter 26sp,
   birim bodyMedium, trend satırı 12px ikon.
   -------------------------------------------------------------------------- */

.pf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.pf-stat__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pf-stat__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface-high);
  color: var(--c-primary);
}

.pf-stat__tile .icon {
  --icon-size: 14px;
}

.pf-stat__label {
  font-size: var(--pf-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--c-text-secondary);
}

.pf-stat__value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.pf-stat__number {
  font-size: var(--pf-counter);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-counter);
  color: var(--c-text-primary);
  font-variant-numeric: tabular-nums;
}

.pf-stat__unit {
  font-size: var(--pf-body-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

.pf-stat__trend {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: var(--pf-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
}

.pf-stat__trend .icon {
  --icon-size: 12px;
}

/* Yükselen trend yeşil, düşen kırmızı, değişmeyen sönük.
   (stat_card.dart _TrendRow) */
.pf-stat__trend--up {
  color: var(--c-success);
}

.pf-stat__trend--down {
  color: var(--c-danger);
}

/* --------------------------------------------------------------------------
   Grafik kartı gövdesi
   Grafiklerin kendisi Task 5'te charts.css/charts.js ile geliyor.
   -------------------------------------------------------------------------- */

.pf-chart-card {
  margin-bottom: 12px;
}

.pf-chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.pf-chart-card__title {
  font-size: var(--pf-title);
  font-weight: var(--fw-bold);
  color: var(--c-text-primary);
}

.pf-chart-card__sub {
  margin-top: 2px;
  font-size: var(--pf-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

/* --------------------------------------------------------------------------
   AppNavBar (telefon içi)  (design_system/components/app_nav_bar.dart)
   --------------------------------------------------------------------------
   Erime bandı 28px + bar 62px + cihaz alt payı. Blur 26, marka tonlu
   3 duraklı gradient, üst kenar primary %22 / 0.8px, üstünde beyaz sheen.
   Sekme: 30px ikon kutusu, 22px ikon, 2px boşluk, 14px etiket satırı.
   -------------------------------------------------------------------------- */

.pf-navbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
}

/* _TopFade: içeriği zemine eriten 28px bant */
.pf-navbar__fade {
  height: 28px;
  background: linear-gradient(
    to bottom,
    rgba(11, 20, 26, 0) 0%,
    rgba(11, 20, 26, 0.26) 55%,
    rgba(11, 20, 26, 0.58) 100%
  );
}

.pf-navbar__bar {
  position: relative;
  /* 62px bar + iPhone home indicator payı */
  height: calc(62px + 22px);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  /* Marka tonlu cam — layout.css'teki header ile aynı hesaplanmış
     değerler, ama yön uygulamadaki gibi (üstten alta koyulaşır). */
  background: linear-gradient(
    to bottom,
    rgba(25, 66, 66, 0.4) 0%,
    rgba(15, 47, 47, 0.54) 55%,
    rgba(13, 40, 42, 0.66) 100%
  );
  border-top: 0.8px solid rgba(37, 211, 102, 0.22);
}

/* _BarSheen */
.pf-navbar__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    transparent 100%
  );
}

.pf-navbar__tabs {
  position: relative;
  display: flex;
  height: 62px;
}

.pf-tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
}

.pf-tab__icon {
  display: grid;
  place-items: center;
  height: 30px;
}

.pf-tab__icon .icon {
  --icon-size: 22px;
}

.pf-tab__label {
  height: 14px;
  margin-top: 2px;
  font-size: var(--pf-caption);
  /* Etiketler caption'ın w600'ünden bir kademe kalın: 10sp'de ince
     ağırlık koyu zeminde siliniyor (app_nav_bar.dart gerekçesi). */
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caption);
  line-height: 14px;
}

/* Aktif sekme: yalnızca renk ve dolu/outline ikon değişir.
   İkon ne büyür ne kayar — bu bilinçli. */
.pf-tab--active {
  color: var(--c-primary);
}

.pf-tab--active .pf-tab__label {
  font-weight: var(--fw-extrabold);
}

/* Home indicator */
.pf-navbar__indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: var(--r-pill);
  background: rgba(245, 247, 247, 0.3);
}

/* Sekme ikonunun sağ üstündeki bildirim sayacı */
.pf-tab__badge {
  position: absolute;
  top: -5px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1.5px solid var(--c-surface);
  border-radius: var(--r-pill);
  background: var(--c-danger);
  box-shadow: var(--sh-badge);
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text-primary);
}

.pf-tab__icon-wrap {
  position: relative;
}

/* --------------------------------------------------------------------------
   ÖLÇEK KIRILIM NOKTALARI
   --------------------------------------------------------------------------
   Telefon dar ekranda kapsayıcıya sığacak kadar küçülür, geniş ekranda
   okunabilirlik için büyür.
   -------------------------------------------------------------------------- */

@media (min-width: 420px) {
  .phone {
    --phone-scale: 0.86;
  }
}

@media (min-width: 1024px) {
  .phone {
    --phone-scale: 0.8;
  }
}

@media (min-width: 1200px) {
  .phone {
    --phone-scale: 0.88;
  }
}

/* --------------------------------------------------------------------------
   SAATLİK ÇUBUK GRAFİK (telefon içi)
   --------------------------------------------------------------------------
   `components/charts/hourly_online_chart.dart`: 24 çubuk, YALNIZ üst
   köşeler yuvarlak, dikey `chartTeal -> chartMint` gradient (alttan
   yukarı açılan mint tonu hacim hissi veriyor; düz yeşil koyu zeminde
   donuk kalıyordu).

   Çubuk yüksekliği veriden `--bar-height` olarak satır içi gelir.
   Animasyon `animations.css`teki `.chart-bar` sınıfından (820ms
   easeOutQuint, scaleY) gelir; Task 5'te charts.js tetikler.
   -------------------------------------------------------------------------- */

.pf-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
}

.pf-bar {
  flex: 1;
  /* Veri sıfır olsa bile ince bir taban çizgisi kalır: eksen okunur
     olmalı, boş saatler "veri yok" gibi görünmemeli. */
  min-height: 3px;
  height: var(--bar-height, 3px);
  border-radius: 3px 3px 0 0;
  background: var(--g-chart-bar);
}

/* Veri sıfır olan saatler: dolgu yerine sönük track */
.pf-bar[data-empty="true"] {
  background: rgba(31, 44, 52, 0.75);
}

/* Tepe saati: uygulamada dokunulan nokta primary daire ile işaretleniyor.
   Mockup'ta zirve çubuğu vurgulanır. */
.pf-bar--peak {
  background: linear-gradient(
    to top,
    var(--c-chart-teal) 0%,
    var(--c-chart-mint) 60%,
    var(--c-primary) 100%
  );
}

.pf-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--pf-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Eksen üzerinde vurgulanan etiket (en aktif saat) */
.pf-axis span[data-active="true"] {
  color: var(--c-text-secondary);
}

/* --------------------------------------------------------------------------
   HAFTALIK ÇİZGİ GRAFİK (telefon içi)
   --------------------------------------------------------------------------
   `components/charts/weekly_activity_chart.dart`: 7 noktalı eğri
   (isCurved, curveSmoothness 0.28), barWidth 2.4, altında üç duraklı
   alan dolgusu, noktalar mint dolgulu daireler.

   Yol geometrisi SVG içinde; animasyon `.chart-line` / `.chart-area` /
   `.chart-dot` sınıflarından gelir (animations.css).
   -------------------------------------------------------------------------- */

.pf-line {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   GÜNDÜZ / GECE DONUT (telefon içi)
   --------------------------------------------------------------------------
   `components/charts/day_night_donut_chart.dart`: 110x110 kutu,
   centerSpaceRadius 34, halka kalınlığı 16, dilim arası 2,
   startDegreeOffset -90 (tepeden başlar, saat yönünde kurulur).
   -------------------------------------------------------------------------- */

.pf-donut-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pf-donut {
  position: relative;
  flex: none;
  width: 110px;
  height: 110px;
}

.pf-donut svg {
  display: block;
}

/* Halkanın ortasındaki toplam. Uygulamada da merkezde duruyor; kilitli
   durumda sayı yerine '**' yazılır. */
.pf-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pf-donut__total {
  font-size: 22px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--c-text-primary);
  font-variant-numeric: tabular-nums;
}

.pf-donut__unit {
  margin-top: 1px;
  font-size: var(--pf-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
}

.pf-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pf-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pf-legend__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pf-legend__dot[data-series="day"] {
  background: var(--c-chart-mint);
}

.pf-legend__dot[data-series="night"] {
  background: var(--c-chart-violet);
}

.pf-legend__label {
  font-size: var(--pf-body-md);
  font-weight: var(--fw-bold);
  color: var(--c-text-primary);
}

.pf-legend__value {
  width: 100%;
  font-size: var(--pf-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}