/* =========================================================================
   TAM Randevu — mockups.css
   El ile çizilmiş telefon kabuğu + içine oturan temsili ürün ekranları.
   Slotlar sabit oranlı; gerçek screenshot geldiğinde layout'u bozmadan
   .screen içeriği değiştirilebilir.
   ========================================================================= */

/* ============================ TELEFON KABUĞU ============================ */
.phone {
  --phone-w: 280px;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #2a2a2e, #161618);
  border-radius: calc(var(--phone-w) * 0.155);
  padding: calc(var(--phone-w) * 0.035);
  box-shadow:
    var(--sh-lg),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 1px 2.5px rgba(0,0,0,.5);
  position: relative;
  flex: none;
}
.phone::after { /* yan tuş */
  content: ""; position: absolute; right: -2px; top: 26%;
  width: 2px; height: 9%; border-radius: 2px;
  background: rgba(255,255,255,.12);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: calc(var(--phone-w) * 0.125);
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  /* Ekranın İÇİ dışarıdaki hizaya BAĞLI DEĞİL. Mockup'lar uygulamanın
     replikası; uygulama her yerde sola hizalı akar. Bu satır yokken hizayı
     ebeveyn belirliyordu: showcase bölümlerinde sol (doğru), ama `.hero`
     `text-align: center` verdiği için hero sahnesindeki AYNI panel ekranı
     ortalanmış çıkıyordu (selamlama, "Şu an" kartı, ciro kartı, akış
     kartları). Yüz A'da fark edilmiyordu, çünkü `.na-sheet` kendi hizasını
     zaten yazıyor. Aynı sızıntı daha önce `.sum-hero`da da yakalanmıştı;
     kökü burada kapatıyoruz — mockup nereye konursa konsun aynı görünür.
     Nöbetçi: tests/hero-panel-parity.test.mjs. */
  text-align: left;
}
.phone-island {
  position: absolute; top: calc(var(--phone-w) * 0.03); left: 50%;
  transform: translateX(-50%);
  width: 34%; height: calc(var(--phone-w) * 0.085);
  background: #000; border-radius: var(--r-pill);
  z-index: 40;
}

/* iOS status bar (mini) */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--phone-w) * 0.13);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--phone-w) * 0.07);
  padding-top: calc(var(--phone-w) * 0.02);
  font-size: calc(var(--phone-w) * 0.04); font-weight: 600;
  z-index: 30; pointer-events: none;
}
.statusbar .dots { display: flex; gap: 3px; align-items: center; }
.statusbar .dots i { width: calc(var(--phone-w)*0.018); height: calc(var(--phone-w)*0.018); border-radius: 50%; background: currentColor; display: block; }

/* Ekranlar yığını — morph için */
.screen-stack { position: absolute; inset: 0; }
.screen {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  overflow: hidden;
}
.screen.active { opacity: 1; transform: none; pointer-events: auto; }
/* Mobil swipe sırasında transition'ı kapat → aktif ekran parmağı bire bir takip etsin;
   parmak kalkınca data-dragging düşer, transition geri gelir, snap yumuşar. */
.screen-stack[data-dragging="true"] .screen.active { transition: none; }

/* Tek seferlik "bu kaydırılır" jesti — App Store ürün kartı dilinde küçük nudge.
   JS, mockup viewport'a girince stack'e .nudge sınıfı bir kez basar.
   Stack'in tamamına uygulanır → tüm telefon ekranı tek parça olarak sallanır,
   kullanıcı bu sırada chip'e dokunsa bile yarım animation görmez. */
@keyframes screenNudge {
  0%   { transform: translate3d(0,0,0); }
  35%  { transform: translate3d(10px,0,0); }
  65%  { transform: translate3d(-4px,0,0); }
  100% { transform: translate3d(0,0,0); }
}
.screen-stack.nudge { animation: screenNudge .85s cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion: reduce) {
  .screen { transition: opacity .25s linear; transform: none; }
  .screen-stack.nudge { animation: none; }
}

/* ════════════════ MOCKUP GEZİNME AFFORDANCE'I (ok · ipucu · imleç) ═══════
   Mockup'lar gezilebilirdi ama gezilebildikleri BELLİ DEĞİLDİ: telefonun
   üstünde tek bir işaret yoktu, tek ipucu rozet satırıydı ve o da
   masaüstünde metnin yanında ayrı bir kutu gibi duruyor. Üç işaret:

     · .scr-arrow  — telefonun iki yanında ok düğmeleri. YALNIZ ince
       pointer'da (fare) görünür; dokunmatikte jest swipe'tır, dar ekranda
       telefonun yanında zaten yer yok.
     · .scr-hint   — ilk görünüşte ekranın alt kenarında "Kaydırın" hapı.
     · imleç       — farede .screen-stack üzerinde grab/grabbing.

   Hepsini app.js ÜRETİR; bu dosya yalnız görünüşü tarif eder. Sınıflar
   markup'ta yoksa hiçbir kural bir şeye tutunmaz (JS yoksa yalan jest de
   yok). Nöbetçi: tests/landing-mockup-affordance.test.mjs. */
.scr-arrow {
  position: absolute; top: 50%; z-index: 6;
  display: none;                       /* ince pointer'da açılır (aşağıda) */
  align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  padding: 0; border: 0; cursor: pointer;
  background: var(--bg-elev); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--hair), var(--sh-sm);
  opacity: .6; transform: translateY(-50%);
  transition: opacity .25s, color .25s, box-shadow .25s;
}
.scr-arrow svg { width: 17px; height: 17px; }
.scr-arrow.next svg { transform: scaleX(-1); }
/* right/left: 100% → düğmenin kenarı telefonun kenarına yaslanır; margin
   onu bezelin dışına iter. Sabit px offset yerine yüzde: --phone-w
   clamp'le değiştiğinde (256→312px) oklar telefonla birlikte kayar. */
.scr-arrow.prev { right: 100%; margin-right: 14px; }
.scr-arrow.next { left: 100%;  margin-left: 14px; }
.scr-arrow:hover { opacity: 1; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-sm); }
.scr-arrow:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  /* İmleç, okların yanındaki ikinci sessiz işaret: ekranın kendisi de
     sürüklenir (app.js attachDrag). Genişlikten bağımsız — imleç taşmaz. */
  .screen-stack { cursor: grab; }
  .screen-stack[data-dragging="true"] { cursor: grabbing; }
}
/* Oklar telefonun DIŞINDA durur ve ~43px yer ister. Dar pencerede (mobil
   düzen ama fareli) telefonun yanında o yer yok: `body { overflow-x:
   hidden }` yüzünden sayfa kaymaz ama ok yarısından KIRPILIR ve bozuk
   görünür. 420px altında oklar kapalı; gezinme rozetler + sürükleme
   üzerinden zaten sürüyor. */
@media (hover: hover) and (pointer: fine) and (min-width: 420px) {
  .scr-arrow { display: inline-flex; }
}

/* İpucu hapı — ekranın İÇİNDE, alt kenara yakın. Koyu cam: altındaki
   mockup açık da olsa koyu da olsa okunur, iki temada da aynı görünür.

   Dikey yeri rastgele değil, ÖLÇÜLDÜ: ekranların alt mobilyasını temizler.
   Alt kenara yapıştırıldığında hap mockup'ın kendi yüzen kontrollerinin
   üstüne biniyor ve "mockup'ın bir parçası" sanılıyordu. Tarayıcıda
   ölçülen iki eşik (--phone-w'nin katı olarak, ekranın altından):
     · panel tab bar `.pnl-tab`        → üst kenarı 0.214
     · TAM AI yazı çubuğu `.pnlai-input` → üst kenarı 0.352
   Hap ~0.106 yüksektir, yani 0.38'den başlayınca ikisini de temizler.
   Alt yaprak (`.pnl-drawer`, `.cus-sheet`) ekranın yarısını kapladığı
   için onun üstüne gelmesi kaçınılmaz ve doğru: hap zaten bir toast.
   Yeni bir alt çubuk eklenirse bu sayı YENİDEN ÖLÇÜLÜR (nöbetçi:
   tests/landing-mockup-affordance.test.mjs). */
.scr-hint {
  position: absolute; z-index: 45;
  left: 50%; bottom: calc(var(--phone-w) * 0.38);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(22,22,24,.78);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  /* İnce halka + gölge: koyu temada hap, altındaki koyu ekrana yapışıyor
     ve bir yüzey gibi okunmuyordu. Renk tokenı DEĞİL sabit beyaz/siyah —
     hap her iki temada da koyu cam, tokenlar temayla dönseydi açık temada
     halka kaybolurdu. */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 20px rgba(0,0,0,.32);
  color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.scr-hint svg { width: 12px; height: 12px; opacity: .8; }
.scr-hint svg:last-child { transform: scaleX(-1); }
.phone.is-hinting .scr-hint { opacity: 1; transform: translate(-50%, 0); }
/* Oklar ipucuyla birlikte bir kez nefes alır: ilk bakışta "bunlar
   basılabilir" der, sonra sessiz haline döner. */
@keyframes hintChevL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes hintChevR { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(-3px); } }
@keyframes arrowWake { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.phone.is-hinting .scr-hint svg:first-child { animation: hintChevL 1.5s ease-in-out infinite; }
.phone.is-hinting .scr-hint svg:last-child  { animation: hintChevR 1.5s ease-in-out infinite; }
.phone.is-hinting .scr-arrow { animation: arrowWake 1.5s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  /* Hap yine GÖRÜNÜR (bilgi), yalnız hareket eder kısımları durur.
     `animation: none` şart: kısayol, play-state gibi longhand'leri de
     sıfırlar ve donmuş bir kare bırakmaz. */
  .scr-hint { transition: opacity .2s linear; transform: translate(-50%, 0); }
  .phone.is-hinting .scr-hint svg:first-child,
  .phone.is-hinting .scr-hint svg:last-child,
  .phone.is-hinting .scr-arrow { animation: none; }
}

/* ============================ ORTAK EKRAN PARÇALARI ============================ */
.scr-pad { padding: calc(var(--phone-w) * 0.155) calc(var(--phone-w)*0.06) calc(var(--phone-w)*0.06); }
.scr-img {
  position: relative; width: 100%; border-radius: 12px; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(128,128,128,.10) 0 8px, rgba(128,128,128,.04) 8px 16px);
}
.scr-img::after {
  content: attr(data-ph);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: calc(var(--phone-w)*0.032); letter-spacing: 0;
  color: rgba(128,128,128,.65); text-align: center; padding: 8px;
}

/* ====== Müşteri portali — temsili şablon ekranları ====== */
.tpl { width: 100%; height: 100%; position: relative; }

/* Şablon: Sinematik (koyu) */
.tpl-cine {
  background: radial-gradient(120% 80% at 50% 0%, #2b2b30 0%, #141416 60%, #0c0c0e 100%);
  color: #fff;
}
/* Şablon: Maison Barbé (sıcak editöryel) */
.tpl-maison { background: #efe7dc; color: #2a241d; }
/* Şablon: Minimal (temiz) */
.tpl-min { background: #ffffff; color: #111; }
:root[data-theme="dark"] .tpl-min { background: #f7f7f9; color: #111; }

.tpl .hero-strip { position: relative; width: 100%; height: 44%; overflow: hidden; }
.tpl .hero-strip .scr-img { height: 100%; border-radius: 0; }
.tpl-cine .hero-strip .scr-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 8px, rgba(255,255,255,.02) 8px 16px); }
.tpl-cine .hero-strip .scr-img::after { color: rgba(255,255,255,.5); }
.tpl-maison .hero-strip .scr-img { background: repeating-linear-gradient(135deg, rgba(90,70,45,.12) 0 8px, rgba(90,70,45,.05) 8px 16px); }

.tpl-body { padding: calc(var(--phone-w)*0.055) calc(var(--phone-w)*0.06); }
.tpl-name { font-weight: 800; letter-spacing: -0.02em; }
.tpl-cine .tpl-name { font-size: calc(var(--phone-w)*0.085); }
.tpl-maison .tpl-name { font-size: calc(var(--phone-w)*0.082); font-weight: 700; }
.tpl-min .tpl-name { font-size: calc(var(--phone-w)*0.078); }
.tpl-sub { font-size: calc(var(--phone-w)*0.04); opacity: .6; margin-top: 3px; }

.tpl-svc {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--phone-w)*0.035) 0;
  font-size: calc(var(--phone-w)*0.044);
  border-top: 1px solid currentColor;
}
.tpl-svc { border-color: color-mix(in srgb, currentColor 14%, transparent); }
.tpl-svc span:last-child { font-weight: 600; opacity: .85; }
.tpl-cta {
  margin-top: calc(var(--phone-w)*0.05);
  text-align: center; font-weight: 600; font-size: calc(var(--phone-w)*0.046);
  padding: calc(var(--phone-w)*0.04); border-radius: var(--r-pill);
}
.tpl-cine .tpl-cta { background: #fff; color: #111; }
.tpl-maison .tpl-cta { background: #2a241d; color: #efe7dc; }
.tpl-min .tpl-cta { background: var(--accent); color: #fff; }

/* Saat slotu (hero portali) */
.slot {
  text-align: center; font-size: calc(var(--phone-w)*0.042); font-weight: 600;
  padding: calc(var(--phone-w)*0.03) 0; border-radius: 9px;
  background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}
.tpl-min .slot { background: #f1f1f4; color: #111; }
.slot.sel { background: var(--accent); color: #fff; box-shadow: none; }
.slot.off { opacity: .35; text-decoration: line-through; }

/* Şablon adı rozeti (telefon altı) */
/* ============================ "VE DAHA FAZLASI" KAPANIŞ EKRANI ============================
   Hem #tplStack hem #panelStack'in son ekranı: siyah zemin + beyaz tipografi
   (tema bağımsız, kasti). Telefon mockup'ı bittikten sonra kullanıcı şablonların
   / panel sekmelerinin ürünün tamamı olmadığını anlasın diye bir "kapanış
   slaytı". Wraparound ile sonrasında ilk ekrana döner. */
.scr-more {
  position: absolute; inset: 0;
  background: #000; color: #fff;
  display: flex; flex-direction: column;
  text-align: center;
  /* statusbar absolute → onun yüksekliği kadar padding-top ile altından başla;
     alt padding dotlar için yer açar */
  padding: calc(var(--phone-w) * 0.155) calc(var(--phone-w) * 0.1) calc(var(--phone-w) * 0.075);
}
.scr-more .statusbar { color: #fff; }
.scr-more .more-core {
  flex: 1;
  display: grid; place-items: center;
}
.scr-more .more-title {
  font-weight: 800;
  letter-spacing: -0.028em;
  font-size: calc(var(--phone-w) * 0.105);
  line-height: 1.02;
  text-wrap: balance;
}
.scr-more .more-sub {
  margin-top: calc(var(--phone-w) * 0.04);
  font-size: calc(var(--phone-w) * 0.046);
  line-height: 1.42;
  color: rgba(235,235,245,.62);
  font-weight: 400;
  text-wrap: balance;
}
.scr-more .more-dots {
  display: flex; gap: calc(var(--phone-w) * 0.024);
  justify-content: center;
}
.scr-more .more-dots i {
  width: calc(var(--phone-w) * 0.018);
  height: calc(var(--phone-w) * 0.018);
  border-radius: 999px;
  background: rgba(235,235,245,.35);
}

.tpl-badge-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.tpl-dot {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--hair);
  transition: color .3s, box-shadow .3s, background .3s;
}
.tpl-dot i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; }
.tpl-dot[aria-selected="true"] { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tpl-dot[aria-selected="true"] i { opacity: 1; }

/* ====== İşletme paneli — yönetim ekranı ====== */
.panel-scr { background: var(--bg); color: var(--text); height: 100%; }
.panel-top {
  padding: calc(var(--phone-w)*0.16) calc(var(--phone-w)*0.06) calc(var(--phone-w)*0.03);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.panel-top h4 { margin: 0; font-size: calc(var(--phone-w)*0.072); font-weight: 800; letter-spacing: -0.02em; }
.panel-top .date { font-size: calc(var(--phone-w)*0.04); color: var(--text-2); }
.week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; padding: 0 calc(var(--phone-w)*0.05); }
.week .day {
  text-align: center; padding: calc(var(--phone-w)*0.022) 0; border-radius: 10px;
  font-size: calc(var(--phone-w)*0.036); color: var(--text-2);
}
.week .day b { display: block; font-size: calc(var(--phone-w)*0.046); color: var(--text); font-weight: 600; margin-top: 2px; }
.week .day.sel { background: var(--accent); }
.week .day.sel, .week .day.sel b { color: #fff; }
.appts { padding: calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.05); display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.028); }
.appt {
  display: flex; gap: calc(var(--phone-w)*0.04); align-items: stretch;
  background: var(--bg-elev); border-radius: var(--r-tile);
  padding: calc(var(--phone-w)*0.038); box-shadow: var(--sh-sm);
}
.appt .bar { width: 3px; border-radius: 3px; background: var(--accent); flex: none; }
.appt.green .bar { background: var(--green); }
.appt.orange .bar { background: var(--orange); }
.appt .t { font-size: calc(var(--phone-w)*0.04); color: var(--text-2); width: calc(var(--phone-w)*0.14); flex: none; font-variant-numeric: tabular-nums; }
.appt .who { font-size: calc(var(--phone-w)*0.046); font-weight: 600; }
.appt .svc { font-size: calc(var(--phone-w)*0.038); color: var(--text-2); margin-top: 1px; }
.panel-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--phone-w)*0.16);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--bg-overlay); backdrop-filter: blur(20px);
  border-top: 1px solid var(--hair);
}
.panel-tabbar i { width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); border-radius: 6px; background: var(--text-3); display: block; }
.panel-tabbar i.on { background: var(--accent); }

/* =========================================================================
   İŞLETME PANELİ — 4 EKRAN MORPH (gerçek panel diliyle birebir)
   .panel-scr (taban) + ekran-bazlı pnl-* parçalar. Her şey --phone-w
   ölçeklidir; tek vurgu --accent; tema değişkenleriyle açık/koyu çalışır.
   Gerçek panel: panel/src/styles.css + screen-*.jsx. Tasarım dili oradan
   damıtıldı — hero blob, NowCard mavi gradient + canlı pulse, list-row
   ailesi, segmented, filter chip'ler, ay grid'i + density dotlar,
   appointment detail hero, staff card + status dot. Burada tabbar
   blur'lu glass + accent ikon; sayfa scroll DEĞİL — 4 ekran tek seferde
   .screen-stack içinde dönüyor. mockups.css telefon → gerçek ürün.
   ========================================================================= */

/* Panel ekranları arası geçiş: SADECE opacity fade — scale "snap"ı kaldırıldı.
   Showcase'in tplStack'i (sinematik/maison/min) scale(1.04)→1 etkisini koruyor;
   panel daha kalabalık ekranlar olduğu için orada hafif sıçrama hissediliyordu. */
#panelStack .screen { transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
#panelStack .screen.active { transform: none; }

/* Ortak: scrollsuz panel gövde alanı (status bar altı, yüzen tabbar üstü).
   Alt sınır tab bar'ın YÜZDÜĞÜ yüksekliğe göre: bottom(0.056) + h(0.158). */
.pnl-body {
  position: absolute; left: 0; right: 0;
  top: calc(var(--phone-w) * 0.135);
  bottom: calc(var(--phone-w) * 0.214);
  overflow: hidden;
}

/* ────────── Selamlama başlık (Dashboard) ────────── */
.pnl-greet {
  padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.06) 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--phone-w)*0.03);
}
.pnl-greet .hi   { font-size: calc(var(--phone-w)*0.04); color: var(--text-2); font-weight: 500; line-height: 1; }
.pnl-greet .name { font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin-top: 4px; }
.pnl-greet .sub  { font-size: calc(var(--phone-w)*0.038); color: var(--text-2); font-weight: 500; margin-top: calc(var(--phone-w)*0.018); }
.pnl-greet .actions { display: flex; gap: calc(var(--phone-w)*0.025); flex: none; }
.pnl-greet .ab {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.108);
  border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.pnl-greet .ab svg { width: 48%; height: 48%; }
.pnl-greet .ab .bdg {
  position: absolute; top: 18%; right: 20%;
  width: 22%; height: 22%; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--bg);
}
.pnl-greet .ab.av {
  background: #0a0a0c;
  color: #fff; font-size: calc(var(--phone-w)*0.044); font-weight: 600; letter-spacing: -0.01em;
}
:root[data-theme="dark"] .pnl-greet .ab.av { background: #1c1c1e; }

/* ────────── Mavi "Şu an" hero kartı (NowCard birebir) ────────── */
.pnl-now {
  margin: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.05) 0;
  border-radius: calc(var(--phone-w)*0.078);
  padding: calc(var(--phone-w)*0.058);
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent), #000 18%) 100%);
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.1) color-mix(in oklab, var(--accent), transparent 64%);
}
.pnl-now::before {
  content: ""; position: absolute; right: -14%; top: -28%;
  width: 70%; height: 90%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
}
.pnl-now .top {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.025);
  margin-bottom: calc(var(--phone-w)*0.04); position: relative;
}
.pnl-now .live {
  position: relative; display: inline-flex;
  width: calc(var(--phone-w)*0.028); height: calc(var(--phone-w)*0.028);
}
.pnl-now .live::before, .pnl-now .live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.pnl-now .live::before { animation: pnl-pulse 1.6s infinite cubic-bezier(.2,.7,.2,1); }
@keyframes pnl-pulse { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
/* `color: inherit` şart: base.css'te KAPSAMSIZ `.kicker { color: var(--accent) }`
   var (landing bölüm üstbaşlığı). Kart zaten --accent gradyanı olduğu için
   "ŞU AN" mavi üstüne mavi düşüyordu; kartın kendi beyazını devral. */
.pnl-now .kicker { font-size: calc(var(--phone-w)*0.034); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: .94; color: inherit; }
.pnl-now .range { margin-left: auto; font-size: calc(var(--phone-w)*0.036); font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.pnl-now .who { font-size: calc(var(--phone-w)*0.072); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; position: relative; }
.pnl-now .svc { font-size: calc(var(--phone-w)*0.044); font-weight: 500; opacity: .94; margin-top: 2px; position: relative; }
.pnl-now .foot { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--phone-w)*0.05); position: relative; }
.pnl-now .staff { display: flex; align-items: center; gap: calc(var(--phone-w)*0.025); font-size: calc(var(--phone-w)*0.038); font-weight: 500; opacity: .94; }
.pnl-now .staff .ava {
  width: calc(var(--phone-w)*0.092); height: calc(var(--phone-w)*0.092);
  border-radius: 50%; background: rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: calc(var(--phone-w)*0.038); letter-spacing: -0.01em;
}
.pnl-now .cta {
  display: inline-flex; align-items: center; gap: calc(var(--phone-w)*0.022);
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.046);
  border-radius: 999px;
  font-size: calc(var(--phone-w)*0.036); font-weight: 600;
}
.pnl-now .cta svg { width: calc(var(--phone-w)*0.038); height: calc(var(--phone-w)*0.038); }
@media (prefers-reduced-motion: reduce) {
  .pnl-now .live::before { animation: none; }
}

/* ────────── Bölüm başlığı + "Tümü" linki ────────── */
.pnl-sec-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--phone-w)*0.05) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.025);
}
.pnl-sec-h .t { font-size: calc(var(--phone-w)*0.056); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.pnl-sec-h .more { color: var(--accent); font-size: calc(var(--phone-w)*0.038); font-weight: 600; }

/* ────────── Yatay scroll randevu kartları (DayFlow) ──────────
   Üç kart sığsın diye sağ padding kaldırıldı + kart genişliği daraltıldı:
   3. (NOW mavi) kart artık tam görünür. Sıra: done → NOW → next (saat
   sırası korunur, mavi vurgu ortada). */
.pnl-flow {
  display: flex; gap: calc(var(--phone-w)*0.022);
  padding: 0 0 0 calc(var(--phone-w)*0.05);
  overflow: hidden;
}
.pnl-flow .fc {
  flex: 0 0 calc(var(--phone-w)*0.42);
  background: var(--bg-elev); color: var(--text);
  border-radius: calc(var(--phone-w)*0.045);
  padding: calc(var(--phone-w)*0.026) calc(var(--phone-w)*0.03);
  box-shadow: var(--sh-sm);
}
.pnl-flow .fc.now {
  background: var(--accent); color: #fff;
  box-shadow: 0 calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.052) color-mix(in oklab, var(--accent), transparent 70%);
}
.pnl-flow .fc.done { opacity: .55; }
.pnl-flow .fc .row { display: flex; align-items: center; gap: calc(var(--phone-w)*0.018); margin-bottom: calc(var(--phone-w)*0.01); }
.pnl-flow .fc .tm { font-size: calc(var(--phone-w)*0.044); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.pnl-flow .fc .dur { font-size: calc(var(--phone-w)*0.03); opacity: .6; font-weight: 500; }
.pnl-flow .fc .chk {
  margin-left: auto;
  width: calc(var(--phone-w)*0.042); height: calc(var(--phone-w)*0.042);
  border-radius: 50%; background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-flow .fc .chk svg { width: 60%; height: 60%; }
.pnl-flow .fc .nm { font-size: calc(var(--phone-w)*0.038); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-flow .fc .sv { font-size: calc(var(--phone-w)*0.03); opacity: .78; margin-top: 1px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-flow .fc .sf { display: flex; align-items: center; gap: 4px; margin-top: calc(var(--phone-w)*0.014); font-size: calc(var(--phone-w)*0.028); opacity: .78; line-height: 1; }
.pnl-flow .fc .sf .pdot { width: calc(var(--phone-w)*0.02); height: calc(var(--phone-w)*0.02); border-radius: 50%; flex: none; }

/* ────────── Sıradaki + Bugün Ciro 2-kart grid (NowCard altı) ──────────
   Gerçek panel: NowCard'tan hemen sonra eşit yükseklikte iki kart yan yana.
   Sol: "SIRADAKİ" + saat (sağ üst) + müşteri + hizmet + personel dot.
   Sağ: "BUGÜN CİRO" + ₺ büyük metrik + accent progress bar + beklenen alt yazı. */
.pnl-pair {
  margin: calc(var(--phone-w)*0.034) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--phone-w)*0.028);
}
.pnl-pair .pc {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  padding: calc(var(--phone-w)*0.04); box-shadow: var(--sh-sm);
  min-height: calc(var(--phone-w)*0.36);
  display: flex; flex-direction: column; justify-content: space-between;
}
.pnl-pair .kc {
  font-size: calc(var(--phone-w)*0.03); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2);
}
.pnl-pair .top { display: flex; align-items: center; justify-content: space-between; }
.pnl-pair .next .tm { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pnl-pair .next .nm { font-size: calc(var(--phone-w)*0.046); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pnl-pair .next .sv { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 1px; }
.pnl-pair .next .sf { display: flex; align-items: center; gap: 5px; font-size: calc(var(--phone-w)*0.03); color: var(--text-2); font-weight: 500; }
.pnl-pair .next .sf .pdot { width: calc(var(--phone-w)*0.022); height: calc(var(--phone-w)*0.022); border-radius: 50%; flex: none; }
.pnl-pair .rev .v {
  font-size: calc(var(--phone-w)*0.084); font-weight: 700; letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1;
}
.pnl-pair .rev .bar {
  position: relative; height: calc(var(--phone-w)*0.018);
  border-radius: 99px; background: var(--surface-2); overflow: hidden;
}
.pnl-pair .rev .bar i {
  display: block; height: 100%; background: var(--accent); border-radius: 99px;
  width: 28%;
}
.pnl-pair .rev .note {
  font-size: calc(var(--phone-w)*0.03); color: var(--text-2); margin-top: 5px; font-weight: 500;
}

/* ────────── Bekleyen onaylar (sec-h + kanal ikonlu kart + onay/red) ──────────
   Gerçek panel (PendingCard): kart = kanal ikonu + [isim · kanal] + hizmet/
   zaman + personel; ALTINDA iki buton — "Reddet" (surface) ve "Onayla"
   (siyah/ters). Onay kartı SEYİRLİK değildir, karar verilen yerdir; butonsuz
   çizmek ekranı yanlış anlatıyordu. */
.pnl-pending {
  margin: 0 calc(var(--phone-w)*0.05);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.055);
  padding: calc(var(--phone-w)*0.038);
  box-shadow: var(--sh-sm);
}
.pnl-pending .pr-top { display: flex; align-items: flex-start; gap: calc(var(--phone-w)*0.034); }
.pnl-pending .nm-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--phone-w)*0.028); min-width: 0;
}
.pnl-pending .pr-acts {
  display: flex; gap: calc(var(--phone-w)*0.028);
  margin-top: calc(var(--phone-w)*0.038);
}
.pnl-pending .pr-acts .b {
  flex: 1; height: calc(var(--phone-w)*0.092);
  border-radius: calc(var(--phone-w)*0.036);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text);
  font-size: calc(var(--phone-w)*0.036); font-weight: 600; letter-spacing: -0.01em;
}
.pnl-pending .pr-acts .b.pri { background: var(--text); color: var(--bg-elev); }
.pnl-pending .ic {
  width: calc(var(--phone-w)*0.092); height: calc(var(--phone-w)*0.092);
  border-radius: calc(var(--phone-w)*0.03);
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pnl-pending .ic svg { width: 54%; height: 54%; }
.pnl-pending .body { flex: 1; min-width: 0; }
.pnl-pending .nm { font-size: calc(var(--phone-w)*0.046); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pnl-pending .sv { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 2px; }
.pnl-pending .st { font-size: calc(var(--phone-w)*0.032); color: var(--text-3); margin-top: 1px; font-weight: 500; }
.pnl-pending .ch { font-size: calc(var(--phone-w)*0.028); color: var(--text-3); font-weight: 500; }
.pnl-sec-h .bdg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(var(--phone-w)*0.054); height: calc(var(--phone-w)*0.054);
  padding: 0 calc(var(--phone-w)*0.018); margin-left: calc(var(--phone-w)*0.022);
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: calc(var(--phone-w)*0.034); font-weight: 700; line-height: 1;
}

/* ────────── Takvim ekranı (CalendarScreen) ────────── */
.pnl-cal-nav { display: flex; align-items: center; gap: calc(var(--phone-w)*0.025); padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.07) 0; }
.pnl-cal-nav .chev {
  width: calc(var(--phone-w)*0.072); height: calc(var(--phone-w)*0.072);
  border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pnl-cal-nav .chev svg { width: 42%; height: 42%; }
.pnl-cal-nav .label {
  font-size: calc(var(--phone-w)*0.032); color: var(--text-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.pnl-cal-h { display: flex; align-items: flex-end; justify-content: space-between; padding: calc(var(--phone-w)*0.015) calc(var(--phone-w)*0.07) 0; gap: 8px; }
.pnl-cal-h .t { font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pnl-cal-h .today {
  display: inline-flex; align-items: center; gap: 5px;
  height: calc(var(--phone-w)*0.082); padding: 0 calc(var(--phone-w)*0.032);
  border-radius: 999px; background: var(--surface-2);
  font-size: calc(var(--phone-w)*0.034); font-weight: 540; color: var(--text);
}
.pnl-cal-h .today svg { width: calc(var(--phone-w)*0.04); height: calc(var(--phone-w)*0.04); }
.pnl-seg {
  margin: calc(var(--phone-w)*0.035) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface-2); border-radius: 999px; padding: calc(var(--phone-w)*0.012);
  font-size: calc(var(--phone-w)*0.036); font-weight: 600;
}
.pnl-seg span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--phone-w)*0.022) 0; border-radius: 999px; color: var(--text);
}
.pnl-seg span.on { background: var(--bg-elev); box-shadow: var(--sh-sm); }
.pnl-staff-row {
  display: flex; gap: calc(var(--phone-w)*0.022);
  padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.05) 0;
  overflow: hidden;
}
.pnl-staff-row .chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: calc(var(--phone-w)*0.082); padding: 0 calc(var(--phone-w)*0.04);
  border-radius: 999px; background: var(--surface-2); color: var(--text);
  font-size: calc(var(--phone-w)*0.034); font-weight: 540;
  white-space: nowrap; flex: none;
}
.pnl-staff-row .chip.on { background: var(--text); color: var(--bg-elev); }
.pnl-staff-row .chip .pdot { width: calc(var(--phone-w)*0.022); height: calc(var(--phone-w)*0.022); border-radius: 50%; }
.pnl-staff-row .chip .ct { opacity: .6; margin-left: 2px; }
.pnl-month {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w)*0.04);
}
.pnl-month .wkd { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: calc(var(--phone-w)*0.022); }
.pnl-month .wkd span {
  text-align: center; font-size: calc(var(--phone-w)*0.028); font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-2); text-transform: uppercase;
}
.pnl-month .wkd span:nth-child(n+6) { color: var(--text-3); }
.pnl-month .grid { display: grid; grid-template-columns: repeat(7,1fr); gap: calc(var(--phone-w)*0.012); }
.pnl-month .grid .c {
  aspect-ratio: 1; border-radius: calc(var(--phone-w)*0.038);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: calc(var(--phone-w)*0.038); font-weight: 500; color: var(--text);
  letter-spacing: -0.005em; position: relative;
}
.pnl-month .grid .c.muted { color: transparent; }
.pnl-month .grid .c.today { color: var(--accent); font-weight: 700; }
.pnl-month .grid .c.sel { background: var(--text); color: var(--bg-elev); font-weight: 700; }
.pnl-month .grid .c .dens { display: flex; gap: 2px; margin-top: 2px; }
.pnl-month .grid .c .dens i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); display: block; }
.pnl-month .grid .c.today .dens i { background: var(--accent); }
.pnl-month .grid .c.sel .dens i { background: rgba(255,255,255,.7); }

/* ────────── Takvim · Gün görünümü (DayListView) ──────────
   Gerçek panel: filtered randevular önce sortByTime, sonra Sabah / Öğleden
   sonra olarak iki bölüme ayrılıp ApptRow kartı olarak listelenir.
   Satır = zaman kolonu (50px) + renkli bar (3px) + müşteri/hizmet + sağda
   personel avatarı. Şu an / Bekliyor rozetleri ve done check ikonu. */
.pnl-day { padding: calc(var(--phone-w)*0.022) 0 0; }
.pnl-day .sec-t {
  font-size: calc(var(--phone-w)*0.03); font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;
  padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.022);
}
.pnl-day .rows {
  padding: 0 calc(var(--phone-w)*0.05);
  display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.022);
}
.pnl-day .ar {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.034);
  padding: calc(var(--phone-w)*0.038);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.055);
  box-shadow: var(--sh-sm);
}
.pnl-day .ar.done { opacity: .62; }
.pnl-day .ar.now {
  box-shadow: 0 calc(var(--phone-w)*0.018) calc(var(--phone-w)*0.045) color-mix(in oklab, var(--accent), transparent 78%);
}
.pnl-day .ar .tm-col { width: calc(var(--phone-w)*0.13); text-align: center; flex: none; }
.pnl-day .ar .tm-col .tm {
  font-size: calc(var(--phone-w)*0.046); font-weight: 700; letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pnl-day .ar.done .tm-col .tm { color: var(--text-2); }
.pnl-day .ar .tm-col .du {
  font-size: calc(var(--phone-w)*0.028); color: var(--text-3); font-weight: 500; margin-top: 1px;
}
.pnl-day .ar .bar { width: 3px; height: calc(var(--phone-w)*0.118); border-radius: 99px; flex: none; align-self: stretch; }
.pnl-day .ar.done .bar { opacity: .4; }
.pnl-day .ar .body { flex: 1; min-width: 0; }
.pnl-day .ar .body .row1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pnl-day .ar .body .nm {
  font-size: calc(var(--phone-w)*0.044); font-weight: 600; letter-spacing: -0.012em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnl-day .ar .body .sv {
  font-size: calc(var(--phone-w)*0.032); color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnl-day .ar .tag {
  flex-shrink: 0;
  font-size: calc(var(--phone-w)*0.024); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 5px; border-radius: 4px; color: #fff;
}
.pnl-day .ar .tag.now-tag  { background: var(--accent); }
.pnl-day .ar .tag.wait-tag { background: var(--orange); }
.pnl-day .ar .check { color: var(--green); display: inline-flex; flex-shrink: 0; }
.pnl-day .ar .check svg { width: calc(var(--phone-w)*0.04); height: calc(var(--phone-w)*0.04); }
.pnl-day .ar .ava-mini {
  width: calc(var(--phone-w)*0.092); height: calc(var(--phone-w)*0.092); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: calc(var(--phone-w)*0.032); letter-spacing: -0.01em;
  flex: none;
}

/* ────────── Randevu detayı (AppointmentDetail) ────────── */
.pnl-sh {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.05);
}
.pnl-sh .ab {
  width: calc(var(--phone-w)*0.092); height: calc(var(--phone-w)*0.092);
  border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-sh .ab svg { width: 44%; height: 44%; }
.pnl-sh .ttl { font-size: calc(var(--phone-w)*0.05); font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
/* ────────── TAM AI sohbet ekranı (mockup) ──────────
   Kaynak: panel/src/screen-ai.jsx. Sınıf öneki bilinçli olarak `pnlai-`:
   kısa/jenerik bir ad (.ai, .chat) paylaşılan mockup stilinde başka bir
   öğeyi yakalayıp altını yutabiliyor (docs/LANDING-DESIGN.md · jenerik
   sınıf adı tuzağı). Ekran KAYDIRILMAZ: içerik .pnl-body'ye sığar. */
.pnlai-chat {
  position: absolute; left: 0; right: 0;
  top: calc(var(--phone-w)*0.135); bottom: calc(var(--phone-w)*0.13);
  padding: calc(var(--phone-w)*0.02) calc(var(--phone-w)*0.05) 0;
  display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.028);
  overflow: hidden;
}
/* Kullanıcı balonu — panelin accent'i, sağa yaslı. */
.pnlai-b.me {
  align-self: flex-end; max-width: 82%;
  background: var(--accent); color: #fff;
  border-radius: calc(var(--phone-w)*0.052);
  border-bottom-right-radius: calc(var(--phone-w)*0.018);
  padding: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.038);
  font-size: calc(var(--phone-w)*0.038); font-weight: 500; line-height: 1.35;
}
.pnlai-ai { display: flex; gap: calc(var(--phone-w)*0.024); align-items: flex-start; }
.pnlai-ai .av {
  flex: none; width: calc(var(--phone-w)*0.062); height: calc(var(--phone-w)*0.062);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  margin-top: calc(var(--phone-w)*0.008);
}
.pnlai-ai .av svg { width: 62%; height: 62%; }
.pnlai-ai .bd { min-width: 0; flex: 1; }
.pnlai-ai .tx {
  background: var(--surface-2); color: var(--text);
  border-radius: calc(var(--phone-w)*0.052);
  border-bottom-left-radius: calc(var(--phone-w)*0.018);
  padding: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.038);
  font-size: calc(var(--phone-w)*0.038); font-weight: 500; line-height: 1.35;
}
.pnlai-ai .note {
  margin-top: calc(var(--phone-w)*0.018);
  font-size: calc(var(--phone-w)*0.031); color: var(--text-2); font-weight: 500;
}
/* Boş saatler slot motorundan gelir — modelin uydurduğu saat değildir. */
.pnlai-slots { display: flex; gap: calc(var(--phone-w)*0.018); margin-top: calc(var(--phone-w)*0.02); flex-wrap: wrap; }
.pnlai-slots span {
  font-size: calc(var(--phone-w)*0.033); font-weight: 600;
  padding: calc(var(--phone-w)*0.016) calc(var(--phone-w)*0.03);
  border-radius: calc(var(--phone-w)*0.03);
  background: var(--surface-2); color: var(--text-2);
}
.pnlai-slots span.on { background: var(--accent); color: #fff; }
/* Onay kartı — ürünün pazarlıksız kuralı: onaysız yazma yok. */
.pnlai-card {
  margin-top: calc(var(--phone-w)*0.022);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.036);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.pnlai-card .hd {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.022);
  font-size: calc(var(--phone-w)*0.04); font-weight: 700; letter-spacing: -0.012em;
  color: var(--text); margin-bottom: calc(var(--phone-w)*0.026);
}
.pnlai-card .hd .ic {
  width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); flex: none;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
}
.pnlai-card .hd .ic svg { width: 60%; height: 60%; }
.pnlai-card .r {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--phone-w)*0.03); padding: calc(var(--phone-w)*0.013) 0;
}
.pnlai-card .r .k { font-size: calc(var(--phone-w)*0.033); color: var(--text-2); font-weight: 500; }
.pnlai-card .r .v { font-size: calc(var(--phone-w)*0.035); color: var(--text); font-weight: 600; text-align: right; }
.pnlai-card .r.tot { margin-top: calc(var(--phone-w)*0.012); padding-top: calc(var(--phone-w)*0.022); border-top: 1px solid var(--hairline); }
.pnlai-card .r.tot .v { font-size: calc(var(--phone-w)*0.044); font-weight: 700; letter-spacing: -0.02em; }
.pnlai-card .ax { display: flex; gap: calc(var(--phone-w)*0.022); margin-top: calc(var(--phone-w)*0.03); }
.pnlai-card .ax span {
  flex: 1; text-align: center; border-radius: calc(var(--phone-w)*0.038);
  padding: calc(var(--phone-w)*0.026) 0;
  font-size: calc(var(--phone-w)*0.036); font-weight: 600;
}
.pnlai-card .ax .no { background: var(--surface-2); color: var(--text-2); }
.pnlai-card .ax .ok { background: var(--accent); color: #fff; }
/* Karşılama ekranı (boş sohbet) — gerçek ekranda hızlı eylem kartları
   modele hiç gitmeden yerel katmandan yanıtlanır (ai-intents.js). */
.pnlai-hello { padding: calc(var(--phone-w)*0.06) calc(var(--phone-w)*0.055) 0; text-align: center; }
.pnlai-hello .orb {
  width: calc(var(--phone-w)*0.17); height: calc(var(--phone-w)*0.17);
  margin: 0 auto calc(var(--phone-w)*0.035); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  display: grid; place-items: center;
}
.pnlai-hello .orb svg { width: 52%; height: 52%; }
.pnlai-hello .ttl { font-size: calc(var(--phone-w)*0.062); font-weight: 700; letter-spacing: -0.022em; color: var(--text); }
.pnlai-hello .sub { margin-top: calc(var(--phone-w)*0.022); font-size: calc(var(--phone-w)*0.036); color: var(--text-2); font-weight: 500; line-height: 1.4; }
.pnlai-quick {
  display: flex; flex-wrap: wrap; gap: calc(var(--phone-w)*0.02);
  padding: calc(var(--phone-w)*0.05) calc(var(--phone-w)*0.055) 0; justify-content: center;
}
.pnlai-quick span {
  font-size: calc(var(--phone-w)*0.034); font-weight: 600; color: var(--text);
  background: var(--surface-2); border-radius: calc(var(--phone-w)*0.05);
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.036);
}
/* Araç çıktısı listesi (randevu / işlem satırları) */
.pnlai-list { margin-top: calc(var(--phone-w)*0.022); display: grid; gap: calc(var(--phone-w)*0.008); }
.pnlai-list .rw {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.028);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.04);
  padding: calc(var(--phone-w)*0.024) calc(var(--phone-w)*0.032);
}
.pnlai-list .tm { flex: none; font-size: calc(var(--phone-w)*0.033); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pnlai-list .mn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pnlai-list .mn b { font-size: calc(var(--phone-w)*0.035); font-weight: 600; color: var(--text); }
.pnlai-list .mn em { font-style: normal; font-size: calc(var(--phone-w)*0.03); color: var(--text-2); font-weight: 500; }
.pnlai-list .pl {
  flex: none; font-size: calc(var(--phone-w)*0.027); font-weight: 600;
  color: var(--orange, #ff9500);
  background: color-mix(in srgb, var(--orange, #ff9500) 14%, transparent);
  border-radius: calc(var(--phone-w)*0.03); padding: calc(var(--phone-w)*0.012) calc(var(--phone-w)*0.024);
}
/* İki sayı yan yana (kalan seans / geciken taksit) */
.pnlai-stat { display: flex; gap: calc(var(--phone-w)*0.022); margin-top: calc(var(--phone-w)*0.022); }
.pnlai-stat .s {
  flex: 1; background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.045);
  padding: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.03);
  display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.008);
}
.pnlai-stat .k { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); font-weight: 500; }
.pnlai-stat .v { font-size: calc(var(--phone-w)*0.052); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.pnlai-stat .s.warn .v { color: var(--red, #ff3b30); }

/* Giriş çubuğu — gerçek ekranda yüzen bar'ın üstünde durur. */
.pnlai-input {
  position: absolute; left: calc(var(--phone-w)*0.05); right: calc(var(--phone-w)*0.05);
  bottom: calc(var(--phone-w)*0.018);
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.024);
  background: var(--surface-2); border-radius: calc(var(--phone-w)*0.06);
  padding: calc(var(--phone-w)*0.024) calc(var(--phone-w)*0.024) calc(var(--phone-w)*0.024) calc(var(--phone-w)*0.042);
}
.pnlai-input .ph { flex: 1; font-size: calc(var(--phone-w)*0.037); color: var(--text-3); font-weight: 500; }
.pnlai-input .snd {
  flex: none; width: calc(var(--phone-w)*0.072); height: calc(var(--phone-w)*0.072);
  border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pnlai-input .snd svg { width: 52%; height: 52%; }

/* ── SESLİ KOMUT (mockup) ───────────────────────────────────────────
   Gerçek ekranın sırası: [girdi] [mikrofon] [gönder]. Mikrofon SAĞDA,
   gönderin hemen SOLUNDA durur (panel/src/screen-ai.jsx · kullanıcı
   testi 2026-08-31: parmak ChatGPT/WhatsApp düzenine alışkın). Mockup
   aynı sırayı taşır; ürünün gerisinde kalan bir yazı çubuğu, canlı bir
   özelliği ziyaretçiden gizler.

   Mikrofon DOLU DAİRE DEĞİL: gönder vurgu rengiyle dolu ve birincil
   eylem; iki dolu daire yan yana durunca hangisinin birincil olduğu
   okunmaz. Nötr yüzey + saç teli kenarlık "burada bir kontrol var" der. */
.pnlai-input .mic {
  flex: none; width: calc(var(--phone-w)*0.072); height: calc(var(--phone-w)*0.072);
  border-radius: 50%; background: var(--bg-elev); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
}
.pnlai-input .mic svg { width: 52%; height: 52%; }
/* Kayıt sürerken kırmızı ve dolu. Gerçek ekranda ayrıca nabız atar;
   mockup'ta NABIZ YOK ve bu bilinçli: yığın zaten kendi kendine dönüyor,
   ikinci bir sonsuz animasyon sahneyi huzursuz eder (hareketi azalt
   tercihinde de ayrıca susturulması gerekirdi). Kırmızı tek başına
   "canlı" der. */
.pnlai-input .mic.on { background: var(--red, #ff3b30); color: #fff; box-shadow: none; }

/* Durum şeridi — composer'ın ÜSTÜNDE, gerçek ekrandaki gibi
   (.ai-voice-bar). Girdi kutusunun yanına sıkıştırılsaydı canlı
   transkript hiç sığmazdı. */
.pnlai-vbar {
  position: absolute; left: calc(var(--phone-w)*0.05); right: calc(var(--phone-w)*0.05);
  /* Girdi çubuğunun ÜST kenarına oturur. Sayıların çıpası EKRAN değil,
     çubuğun kendi kapsayıcısıdır (.pnl-body): girdi çubuğu 0.018w'de
     başlar ve 0.12w yüksektir, üst kenarı 0.138w. Şerit onun 0.012w
     üstüne oturur. (Aynı öğe EKRANIN altından 0.352w'de görünür çünkü
     kapsayıcının kendisi 0.214w yukarıda biter; ilk yazımda bu iki çıpa
     karıştırıldı ve şerit çubuktan 58px kopuk durdu.) */
  bottom: calc(var(--phone-w)*0.15);
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.024);
  padding: calc(var(--phone-w)*0.024) calc(var(--phone-w)*0.042);
  border-radius: calc(var(--phone-w)*0.06);
  background: var(--surface-2);
  font-size: calc(var(--phone-w)*0.034); font-weight: 600; color: var(--text-2);
}
.pnlai-vbar .dot {
  flex: none; width: calc(var(--phone-w)*0.026); height: calc(var(--phone-w)*0.026);
  border-radius: 50%; background: var(--red, #ff3b30);
}
.pnlai-vbar .tx { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Şerit taşıyan ekranda sohbet ALTA YASLANIR ve şeridin üstünde biter.
   İki sebebi var: gerçek sohbette son mesaj her zaman yazma kutusunun
   hemen üstündedir (üstte durunca sahne yarım kalmış görünüyordu), ve
   üstten yaslanan blok şeridin ALTINA girip kesiliyordu. 0.26w ölçülerek
   seçildi: şerit kapsayıcıda 0.15w'de başlar, yüksekliği ~0.099w. */
.screen:has(.pnlai-vbar) .pnlai-chat {
  justify-content: flex-end;
  bottom: calc(var(--phone-w)*0.26);
}
/* ⛔ İPUCU HAPI ÇARPIŞMASI — ÖLÇÜLDÜ (gerçek Chrome, 390x844).
   Hap ekranın altından 0.380w'de durur ve bu sayı panel tab bar'ına göre
   seçilmişti. Sesli komut şeridi taşıyan ekranda şerit, ekranın altından
   0.364w → 0.463w aralığını kaplıyor: hap tam ortasına oturuyordu.
   Yalnız o telefonda hap yukarı alınıyor; diğer yığınlar (panel, portal,
   müşteri paneli) 0.380w'de kalır.
   0.58w seçildi ölçerek: hapın kendi kapsayıcısı (.phone-screen) ekranın
   10px üstünde bittiği için yazılan değer ~10px aşağı düşer; 0.58w
   şeridin üstünde ~20px boşluk bırakır. Nöbetçi:
   tests/landing-voice.test.mjs (hap · şerit) +
   tests/landing-mockup-affordance.test.mjs (hap · tab bar) */
.phone:has(.pnlai-vbar) .scr-hint { bottom: calc(var(--phone-w) * 0.58); }

.pnl-hero {
  margin: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.05) 0;
  border-radius: calc(var(--phone-w)*0.078);
  padding: calc(var(--phone-w)*0.056);
  /* Renk hizmetin kategorisinden gelir (gerçek panel: appt.color) — --c ile
     satır bazında verilir, verilmezse mor. */
  background: linear-gradient(135deg, var(--c, var(--purple)), color-mix(in oklab, var(--c, var(--purple)), #000 20%));
  color: #fff; position: relative; overflow: hidden;
}
.pnl-hero::before {
  content: ""; position: absolute; right: -10%; top: -30%;
  width: 58%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.pnl-hero .tm { font-size: calc(var(--phone-w)*0.118); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; position: relative; }
.pnl-hero .tm small { font-size: calc(var(--phone-w)*0.054); font-weight: 500; opacity: .85; }
.pnl-hero .meta { font-size: calc(var(--phone-w)*0.04); font-weight: 500; opacity: .92; margin-top: calc(var(--phone-w)*0.022); position: relative; }
.pnl-shead {
  font-size: calc(var(--phone-w)*0.032); font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-2); text-transform: uppercase;
  padding: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.022);
}
.pnl-list {
  margin: 0 calc(var(--phone-w)*0.05);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.pnl-list .row { display: flex; align-items: center; gap: calc(var(--phone-w)*0.034); padding: calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.05); position: relative; }
.pnl-list .row + .row::before { content: ""; position: absolute; left: calc(var(--phone-w)*0.16); right: 0; top: 0; height: 1px; background: var(--hair); }
.pnl-list .row .ic {
  width: calc(var(--phone-w)*0.078); height: calc(var(--phone-w)*0.078);
  border-radius: calc(var(--phone-w)*0.03);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pnl-list .row .ic svg { width: 52%; height: 52%; }
.pnl-list .row .ic.surf { background: var(--surface-2); color: var(--text); }
.pnl-list .row .ic.pink { background: color-mix(in oklab, var(--pink), transparent 86%); color: var(--pink); }
.pnl-list .row .ic.purple { background: color-mix(in oklab, var(--purple), transparent 86%); color: var(--purple); }
.pnl-list .row .ic.accent { background: var(--accent-soft); color: var(--accent); }
.pnl-list .row .ava-bg {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.108); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-size: calc(var(--phone-w)*0.04); font-weight: 600; letter-spacing: -0.01em; flex: none;
}
.pnl-list .row .nm { font-size: calc(var(--phone-w)*0.044); font-weight: 500; letter-spacing: -0.005em; color: var(--text); }
.pnl-list .row .sb { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 1px; }
.pnl-list .row .body { flex: 1; min-width: 0; }
.pnl-list .row .chev { margin-left: auto; color: var(--text-3); display: inline-flex; flex: none; }
.pnl-list .row .chev svg { width: calc(var(--phone-w)*0.038); height: calc(var(--phone-w)*0.038); }
.pnl-cta-stack { padding: calc(var(--phone-w)*0.032) calc(var(--phone-w)*0.05) 0; display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.02); }
.pnl-cta-stack .b {
  height: calc(var(--phone-w)*0.122); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: calc(var(--phone-w)*0.04); font-weight: 600; letter-spacing: -0.005em;
}
.pnl-cta-stack .b svg { width: calc(var(--phone-w)*0.046); height: calc(var(--phone-w)*0.046); }
.pnl-cta-stack .b.primary   { background: var(--accent); color: #fff; }
.pnl-cta-stack .b.secondary { background: var(--surface-2); color: var(--text); }
/* Yıkıcı eylem: dolu buton DEĞİL, yalnız kırmızı metin (gerçek panelde de
   iptal butonu zeminsizdir — yanlışlıkla basılması zorlaşsın diye). */
.pnl-cta-stack .b.danger    { background: transparent; color: var(--red); }

/* ────────── Müşteriler (CustomersScreen) ──────────
   Gerçek panel: büyük başlık + toplam/haftalık sayısı + plus; arama input'u;
   segment chip'leri (Tümü / VIP / Düzenli / Tek seferlik / Kayıp / Engelli);
   alfabetik gruplara ayrılmış list-row'lar (avatar + isim + ziyaret/son
   geliş + sağda segment rozeti). Crown ikonu yalnız VIP'te. */
.pnl-cust-h {
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.07) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.pnl-cust-h .t { font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pnl-cust-h .sub { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); font-weight: 500; margin-top: 3px; }
.pnl-cust-h .sub b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pnl-cust-h .add {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.108);
  border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pnl-cust-h .add svg { width: 50%; height: 50%; }
.pnl-search {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  height: calc(var(--phone-w)*0.118);
  border-radius: calc(var(--phone-w)*0.04);
  background: var(--surface-2);
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.025);
  padding: 0 calc(var(--phone-w)*0.045);
  font-size: calc(var(--phone-w)*0.04); color: var(--text-3); font-weight: 500;
}
.pnl-search svg { width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); flex: none; }
.pnl-cust-groups { padding-top: calc(var(--phone-w)*0.012); }
.pnl-cust-groups .gt {
  padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.018);
  font-size: calc(var(--phone-w)*0.028); font-weight: 700;
  color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase;
}
.pnl-cust-list {
  margin: 0 calc(var(--phone-w)*0.05);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.pnl-cust-list .crow {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.034);
  padding: calc(var(--phone-w)*0.034) calc(var(--phone-w)*0.05);
  position: relative;
}
.pnl-cust-list .crow + .crow::before {
  content: ""; position: absolute; left: calc(var(--phone-w)*0.16); right: 0; top: 0;
  height: 1px; background: var(--hair);
}
.pnl-cust-list .crow .ava {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.108); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: calc(var(--phone-w)*0.038); letter-spacing: -0.01em;
  flex: none;
}
.pnl-cust-list .crow .body { flex: 1; min-width: 0; }
.pnl-cust-list .crow .nm-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pnl-cust-list .crow .nm {
  font-size: calc(var(--phone-w)*0.044); font-weight: 500; letter-spacing: -0.005em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnl-cust-list .crow .crown { color: var(--purple); display: inline-flex; flex: none; }
.pnl-cust-list .crow .crown svg { width: calc(var(--phone-w)*0.035); height: calc(var(--phone-w)*0.035); }
.pnl-cust-list .crow .vis { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); margin-top: 1px; }
.pnl-cust-list .crow .seg-bdg {
  padding: 3px calc(var(--phone-w)*0.028); border-radius: 999px;
  font-size: calc(var(--phone-w)*0.028); font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.pnl-cust-list .crow .seg-bdg.vip  { background: color-mix(in oklab, var(--purple), transparent 86%); color: var(--purple); }
.pnl-cust-list .crow .seg-bdg.reg  { background: color-mix(in oklab, var(--green),  transparent 86%); color: var(--green); }
.pnl-cust-list .crow .seg-bdg.one  { background: color-mix(in oklab, var(--orange), transparent 86%); color: var(--orange); }
.pnl-cust-list .crow .seg-bdg.lost { background: rgba(142,142,147,0.18); color: #8e8e93; }
:root[data-theme="dark"] .pnl-cust-list .crow .seg-bdg.lost { color: rgba(235,235,245,0.6); }

/* ────────── Hizmetler (ServicesScreen) ──────────
   Gerçek panel: büyük başlık + sayım + plus → 3 sütunlu kategori tile grid
   ("Tümü" siyah-aktif + her kategori renkli gradient tile, ikon + isim +
   "X hizmet"). Sağda "Kategorileri düzenle" accent link. Altında hizmet
   kartları: gradient kategori-renkli ikon kutusu + isim + "X dk · kategori"
   + ₺ fiyat sağda. */
.pnl-svc-h {
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.07) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.pnl-svc-h .t { font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pnl-svc-h .sub { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); font-weight: 500; margin-top: 3px; }
.pnl-svc-h .sub b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pnl-svc-h .add {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.108);
  border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pnl-svc-h .add svg { width: 50%; height: 50%; }

.pnl-cat-grid {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--phone-w)*0.025);
}
.pnl-cat-grid .ct {
  padding: calc(var(--phone-w)*0.032) calc(var(--phone-w)*0.026);
  border-radius: calc(var(--phone-w)*0.042);
  background: var(--bg-elev); color: var(--text); box-shadow: var(--sh-sm);
  text-align: left; position: relative; overflow: hidden;
  min-height: calc(var(--phone-w)*0.2);
}
.pnl-cat-grid .ct svg { width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); display: block; }
.pnl-cat-grid .ct .nm { font-size: calc(var(--phone-w)*0.038); font-weight: 600; letter-spacing: -0.005em; margin-top: calc(var(--phone-w)*0.015); }
.pnl-cat-grid .ct .ct-sub { font-size: calc(var(--phone-w)*0.028); margin-top: 1px; opacity: 0.6; }
.pnl-cat-grid .ct.all { background: var(--text); color: var(--bg-elev); }
/* Diğer kategoriler beyaz/bg-elev arkaplanlı; yalnız ikon kategori rengini
   taşır — gerçek panel filtresi (Tümü aktif) bu görünümle eşleşir. */

.pnl-svc-edit {
  padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.06) 0;
  display: flex; justify-content: flex-end;
  font-size: calc(var(--phone-w)*0.032); font-weight: 500; color: var(--accent);
}

.pnl-svc-list {
  margin: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.05) 0;
  display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.022);
}
.pnl-svc-list .sr {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.038);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.055);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w)*0.038);
}
.pnl-svc-list .sr .ic-tile {
  width: calc(var(--phone-w)*0.118); height: calc(var(--phone-w)*0.118);
  border-radius: calc(var(--phone-w)*0.04);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: none;
}
.pnl-svc-list .sr .ic-tile svg { width: 50%; height: 50%; }
.pnl-svc-list .sr .body { flex: 1; min-width: 0; }
.pnl-svc-list .sr .nm {
  font-size: calc(var(--phone-w)*0.044); font-weight: 600; letter-spacing: -0.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pnl-svc-list .sr .meta { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pnl-svc-list .sr .price {
  font-size: calc(var(--phone-w)*0.05); font-weight: 700; letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums; color: var(--text); flex: none;
}

/* ────────── Raporlar (ReportsScreen) ──────────
   Gerçek panel: Hafta/Ay/Yıl segmented → Toplam ciro hero kartı (büyük metrik
   + delta + sparkline) → 2×2 KPI grid (Randevu / Ort. bilet / Yeni müşteri /
   Doluluk, her birinde mini sparkline arka planda) → "EN ÇOK YAPILAN HİZMET"
   liste (renkli dot + isim + adet + accent progress bar). */
.pnl-rep-hero {
  margin: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w)*0.05);
}
.pnl-rep-hero .kc {
  font-size: calc(var(--phone-w)*0.03); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2);
}
.pnl-rep-hero .row-top { display: flex; align-items: baseline; gap: calc(var(--phone-w)*0.03); margin-top: 5px; }
.pnl-rep-hero .v {
  font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
}
.pnl-rep-hero .delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: calc(var(--phone-w)*0.038); font-weight: 600;
}
.pnl-rep-hero .delta.pos { color: var(--green); }
.pnl-rep-hero .delta.neg { color: var(--red); }
.pnl-rep-hero .delta svg { width: calc(var(--phone-w)*0.036); height: calc(var(--phone-w)*0.036); }
.pnl-rep-hero .sub { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 2px; }
.pnl-rep-hero .spark { margin-top: calc(var(--phone-w)*0.034); height: calc(var(--phone-w)*0.2); }
.pnl-rep-hero .spark svg { width: 100%; height: 100%; display: block; }

.pnl-rep-kpi {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--phone-w)*0.025);
}
.pnl-rep-kpi .k {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  padding: calc(var(--phone-w)*0.034);
  box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  min-height: calc(var(--phone-w)*0.28);
}
.pnl-rep-kpi .k .l {
  font-size: calc(var(--phone-w)*0.028); color: var(--text-2);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.pnl-rep-kpi .k .v {
  font-size: calc(var(--phone-w)*0.066); font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--text);
}
.pnl-rep-kpi .k .d { font-size: calc(var(--phone-w)*0.03); font-weight: 600; margin-top: 1px; position: relative; z-index: 2; }
.pnl-rep-kpi .k .d.pos { color: var(--green); }
.pnl-rep-kpi .k .d.neg { color: var(--red); }
.pnl-rep-kpi .k .mini {
  position: absolute; right: calc(var(--phone-w)*-0.012); bottom: calc(var(--phone-w)*0.022);
  width: 56%; height: calc(var(--phone-w)*0.1); opacity: 0.85; pointer-events: none;
}
.pnl-rep-kpi .k .mini svg { width: 100%; height: 100%; display: block; }

.pnl-rep-sec-h {
  font-size: calc(var(--phone-w)*0.03); font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: calc(var(--phone-w)*0.034) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.018);
}
.pnl-rep-top {
  margin: 0 calc(var(--phone-w)*0.05);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  padding: calc(var(--phone-w)*0.038) calc(var(--phone-w)*0.045);
  box-shadow: var(--sh-sm);
}
.pnl-rep-top .tr { padding: calc(var(--phone-w)*0.025) 0; border-top: 1px solid var(--hair); }
.pnl-rep-top .tr:first-child { border-top: none; padding-top: 0; }
.pnl-rep-top .tr .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.pnl-rep-top .tr .nm-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pnl-rep-top .tr .pdot2 { width: calc(var(--phone-w)*0.022); height: calc(var(--phone-w)*0.022); border-radius: 50%; flex: none; }
.pnl-rep-top .tr .nm { font-size: calc(var(--phone-w)*0.036); font-weight: 500; color: var(--text); }
.pnl-rep-top .tr .ct2 { font-size: calc(var(--phone-w)*0.032); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pnl-rep-top .tr .pbar { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pnl-rep-top .tr .pbar i { display: block; height: 100%; border-radius: 99px; }

/* ────────── Yeni Randevu Drawer (NewAppointmentFlow · Onay adımı) ──────────
   Gerçek panel: fullHeight bottom-sheet. Üstte grabber + sticky head + 6-pip
   progress bar + "Adım 6/6 · Onay" + hizmet rengi gradient hero kartı (saat +
   tarih) + SumRow x3 (Müşteri/Hizmet/Personel, avatar + isim/alt) +
   hatırlatma toggle + alt CTA bar (Geri + "Randevuyu Oluştur"). Statik
   mockup'ta drawer'ın üst ~%12'sinde scrim peek → bottom-sheet açık hissi. */
.pnl-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 1;
}
.pnl-drawer {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 88%;
  background: var(--bg);
  border-top-left-radius: calc(var(--phone-w)*0.075);
  border-top-right-radius: calc(var(--phone-w)*0.075);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 2;
}
.pnl-drawer .grabber {
  width: calc(var(--phone-w)*0.13); height: 4px;
  border-radius: 999px; background: var(--text-3); opacity: .5;
  margin: calc(var(--phone-w)*0.022) auto calc(var(--phone-w)*0.01);
}
.pnl-drawer .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--phone-w)*0.018) calc(var(--phone-w)*0.05) calc(var(--phone-w)*0.018);
}
.pnl-drawer .head .close { font-size: calc(var(--phone-w)*0.042); color: var(--accent); font-weight: 500; }
.pnl-drawer .head .ttl { font-size: calc(var(--phone-w)*0.046); font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.pnl-drawer .head .save { font-size: calc(var(--phone-w)*0.042); color: var(--accent); font-weight: 600; opacity: 0; pointer-events: none; }

.pnl-drawer .progress { padding: calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.07) 0; }
.pnl-drawer .progress .bar { display: flex; gap: calc(var(--phone-w)*0.012); }
.pnl-drawer .progress .bar i { flex: 1; height: 3px; border-radius: 99px; background: var(--surface-2); }
.pnl-drawer .progress .bar i.on { background: var(--accent); }
.pnl-drawer .progress .meta {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: calc(var(--phone-w)*0.022);
}
.pnl-drawer .progress .step-num {
  font-size: calc(var(--phone-w)*0.026); font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;
}
.pnl-drawer .progress .step-title {
  font-size: calc(var(--phone-w)*0.068); font-weight: 700;
  letter-spacing: -0.025em; margin-top: 2px; color: var(--text); line-height: 1;
}

.pnl-drawer .body {
  flex: 1; overflow: hidden;
  padding: calc(var(--phone-w)*0.038) calc(var(--phone-w)*0.05) 0;
}
.pnl-drawer .sum-card {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm); overflow: hidden;
}
/* Ad alanı `.sum-*`: bir zamanlar `.hero` idi ve sections.css'teki KAPSAMSIZ
   `.hero` kuralını (landing başlık bloğu) da yiyordu — ortalama oradan sızmıştı.
   Görünüm bilerek korunuyor, ama artık kaza değil: text-align burada yazılı. */
.pnl-drawer .sum-card .sum-hero {
  background: linear-gradient(135deg, #0a84ff, color-mix(in oklab, #0a84ff, #000 18%));
  color: #fff; padding: calc(var(--phone-w)*0.058) calc(var(--phone-w)*0.058);
  position: relative; overflow: hidden; text-align: center;
}
.pnl-drawer .sum-card .sum-hero::before {
  content: ""; position: absolute; right: -8%; top: -25%;
  width: 50%; height: 85%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.pnl-drawer .sum-card .sum-hero .tm {
  font-size: calc(var(--phone-w)*0.088); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1; font-variant-numeric: tabular-nums; position: relative;
}
.pnl-drawer .sum-card .sum-hero .dt {
  font-size: calc(var(--phone-w)*0.036); font-weight: 500;
  opacity: .9; margin-top: 4px; position: relative;
}
.pnl-drawer .sum-card .sum-body { padding: 0 calc(var(--phone-w)*0.05) calc(var(--phone-w)*0.025); }
.pnl-drawer .sum-card .srow {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.03);
  padding: calc(var(--phone-w)*0.04) 0;
  border-top: 1px solid var(--hair);
}
.pnl-drawer .sum-card .srow:first-child { border-top: none; }
.pnl-drawer .sum-card .srow .lbl {
  font-size: calc(var(--phone-w)*0.026); font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;
  width: calc(var(--phone-w)*0.2);
}
.pnl-drawer .sum-card .srow .ava {
  width: calc(var(--phone-w)*0.082); height: calc(var(--phone-w)*0.082); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: calc(var(--phone-w)*0.034); letter-spacing: -0.01em;
  flex: none;
}
.pnl-drawer .sum-card .srow .v-body { flex: 1; min-width: 0; }
.pnl-drawer .sum-card .srow .v { font-size: calc(var(--phone-w)*0.04); font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.pnl-drawer .sum-card .srow .sub { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); margin-top: 1px; }

.pnl-drawer .reminder {
  margin-top: calc(var(--phone-w)*0.022);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  padding: calc(var(--phone-w)*0.038);
  box-shadow: var(--sh-sm);
}
.pnl-drawer .reminder .top { display: flex; align-items: center; justify-content: space-between; }
.pnl-drawer .reminder .ttl { font-size: calc(var(--phone-w)*0.04); font-weight: 600; color: var(--text); }
.pnl-drawer .reminder .sub { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); margin-top: 3px; }
.pnl-drawer .reminder .tog {
  width: calc(var(--phone-w)*0.108); height: calc(var(--phone-w)*0.064);
  border-radius: 99px; background: var(--green); position: relative; flex: none;
}
.pnl-drawer .reminder .tog::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05);
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.pnl-drawer .cta-bar {
  padding: calc(var(--phone-w)*0.034) calc(var(--phone-w)*0.05) calc(var(--phone-w)*0.045);
  border-top: 0.5px solid var(--hair);
  background: var(--bg);
  display: flex; gap: calc(var(--phone-w)*0.025);
}
.pnl-drawer .cta-bar .b {
  height: calc(var(--phone-w)*0.13); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: calc(var(--phone-w)*0.04); font-weight: 600; letter-spacing: -0.005em;
}
.pnl-drawer .cta-bar .b svg { width: calc(var(--phone-w)*0.044); height: calc(var(--phone-w)*0.044); }
.pnl-drawer .cta-bar .b.sec { background: var(--surface-2); color: var(--text); padding: 0 calc(var(--phone-w)*0.055); }
.pnl-drawer .cta-bar .b.pri { flex: 1; background: var(--accent); color: #fff; }

/* ────────── Personel listesi (StaffListScreen) ────────── */
.pnl-staff-grid {
  padding: calc(var(--phone-w)*0.018) calc(var(--phone-w)*0.05) 0;
  display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.028);
}
.pnl-staff-card {
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.04);
  padding: calc(var(--phone-w)*0.04); background: var(--bg-elev);
  border-radius: calc(var(--phone-w)*0.058); box-shadow: var(--sh-sm);
}
.pnl-staff-card.off { opacity: .78; }
.pnl-staff-card .ava-wrap { position: relative; flex: none; }
.pnl-staff-card .ava {
  width: calc(var(--phone-w)*0.13); height: calc(var(--phone-w)*0.13); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 600; font-size: calc(var(--phone-w)*0.046); letter-spacing: -0.01em;
}
.pnl-staff-card .pulse {
  position: absolute; bottom: -2%; right: -2%;
  width: calc(var(--phone-w)*0.04); height: calc(var(--phone-w)*0.04);
  border-radius: 50%; background: var(--green);
  border: 2px solid var(--bg-elev);
}
.pnl-staff-card.off .pulse { background: var(--text-3); }
.pnl-staff-card .body { flex: 1; min-width: 0; }
.pnl-staff-card .nm { font-size: calc(var(--phone-w)*0.048); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pnl-staff-card .rl { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 2px; }
.pnl-staff-card .av { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); font-weight: 500; margin-top: calc(var(--phone-w)*0.012); }
.pnl-staff-card.off .av { color: var(--orange); }
.pnl-staff-card .ct { text-align: right; flex: none; }
.pnl-staff-card .ct b { display: block; font-size: calc(var(--phone-w)*0.052); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.pnl-staff-card .ct span { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); }

/* ────────── Ekip erişimi (TeamScreen) ──────────
   Gerçek panel: ScreenHeader (geri + "Ekip erişimi" + ekle); açıklama metni;
   list-row'lar (rol renkli avatar + görünen ad + rol rozeti + @kullanıcı/durum
   + chevron); en altta sahip-PIN kurtarma bilgi notu. Rol renkleri gerçek
   TEAM_ROLE_META ile birebir: sahip mor, yönetici mavi, personel yeşil. */
.pnl-intro {
  padding: calc(var(--phone-w)*0.012) calc(var(--phone-w)*0.07) calc(var(--phone-w)*0.04);
  font-size: calc(var(--phone-w)*0.036); line-height: 1.45; color: var(--text-2);
}
.pnl-list .row .nm-line { display: flex; align-items: center; gap: calc(var(--phone-w)*0.028); min-width: 0; }
.pnl-list .row .nm-line .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-list .row .rl-bdg {
  flex: none; font-size: calc(var(--phone-w)*0.03); font-weight: 600; letter-spacing: 0;
  padding: calc(var(--phone-w)*0.006) calc(var(--phone-w)*0.026);
  border-radius: var(--r-pill); line-height: 1.3;
}
.pnl-list .row .rl-bdg.owner { color: var(--purple); background: color-mix(in oklab, var(--purple), transparent 86%); }
.pnl-list .row .rl-bdg.admin { color: var(--accent); background: var(--accent-soft); }
.pnl-list .row .rl-bdg.staff { color: var(--green);  background: color-mix(in oklab, var(--green), transparent 86%); }
.pnl-list .row.off { opacity: .55; }
.pnl-help {
  display: flex; gap: calc(var(--phone-w)*0.034); align-items: flex-start;
  padding: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.07) 0;
}
.pnl-help svg { width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); flex: none; color: var(--text-3); margin-top: 1px; }
.pnl-help p { margin: 0; font-size: calc(var(--phone-w)*0.034); line-height: 1.45; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════
   PARA + MÜŞTERİ MODÜLLERİ (Bitir · Müşteri kartı · Kasa · Prim · Stüdyo · Daha)
   ───────────────────────────────────────────────────────────────────────
   Bu ekranlar panele paket/adisyon (F1-F3b) ve rapor stüdyosu ile geldi;
   mockup onlardan önce çizildiği için yıllarca eksik kaldı. Kaynak ekranlar:
   panel/src/screen-checkout.jsx · screen-packages.jsx · screen-cash.jsx ·
   screen-commission.jsx · screen-reports.jsx · screen-more.jsx.
   Yeni görsel dil İCAT EDİLMEDİ: yukarıdaki .pnl-* ailesi (list/hero/kart/
   segmented/chip) aynen kullanılır, yalnız bu ekranlara özgü parçalar eklenir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Renk taşıyan ikon karesi (hub satırları, kasa uyarıları) ──
   Gerçek panelde ikon kutusu her zaman kendi anlam rengini %14 opaklıkla
   taşır: color-mix(in oklab, <renk>, transparent 86%). --c satır bazında. */
.pnl-list .row .ic.tint,
.pnl-tile.tint { background: color-mix(in oklab, var(--c), transparent 86%); color: var(--c); }

/* ────────── BİTİR — hesap kapatma sheet'i (CheckoutSheet) ──────────
   Gerçek panelde tam ekran değil, alttan gelen bir Sheet: grabber + üç
   bölgeli başlık şeridi (İptal · Bitir · —) + içerik. Paketli müşteride
   ödeme ekranı yerine PAKET kartı çıkar; tutar ₺0 gizlenmez ("para almadım"
   ile "almayı unuttum" farkı görünsün diye). */
.pnl-drawer.sheet { height: 64%; }
.pnl-drawer .head-line { border-bottom: 0.5px solid var(--hair); }
.pnl-ck-who {
  padding: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.07) 0;
}
.pnl-ck-who .nm { font-size: calc(var(--phone-w)*0.05); font-weight: 600; letter-spacing: -0.018em; color: var(--text); }
.pnl-ck-who .sb { font-size: calc(var(--phone-w)*0.038); color: var(--text-2); margin-top: 2px; }

/* Paket kartı — seans noktaları sayılabilir; DÜŞECEK olan nokta halkalı. */
.pnl-pkg {
  margin: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.06) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.078);
  padding: calc(var(--phone-w)*0.05);
  box-shadow: 0 calc(var(--phone-w)*0.042) calc(var(--phone-w)*0.114) color-mix(in oklab, var(--c, var(--accent)), transparent 78%);
}
.pnl-dots { display: flex; gap: calc(var(--phone-w)*0.021); align-items: center; }
.pnl-dots i {
  width: calc(var(--phone-w)*0.032); height: calc(var(--phone-w)*0.032);
  border-radius: 50%; display: block; flex: none;
  background: var(--c, var(--accent));
}
.pnl-dots i.next { background: transparent; box-shadow: inset 0 0 0 2px var(--c, var(--accent)); }
.pnl-dots i.off  { background: transparent; box-shadow: inset 0 0 0 1.5px var(--surface-3); }
.pnl-pkg .nm { font-size: calc(var(--phone-w)*0.05); font-weight: 600; letter-spacing: -0.012em; margin-top: calc(var(--phone-w)*0.042); color: var(--text); }
.pnl-pkg .sb { font-size: calc(var(--phone-w)*0.038); color: var(--text-2); margin-top: 2px; }

/* Tek büyük rakam — hesabın cevabı */
.pnl-amount { text-align: center; padding: calc(var(--phone-w)*0.05) 0 calc(var(--phone-w)*0.045); }
.pnl-amount .v {
  font-size: calc(var(--phone-w)*0.128); font-weight: 700; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
}
.pnl-amount .v.muted { color: var(--text-2); }
.pnl-amount .note { font-size: calc(var(--phone-w)*0.038); color: var(--text-3); margin-top: calc(var(--phone-w)*0.018); }

/* Ödeme yöntemi chip'leri (PayMethodChips: eşit üç kapsül, seçili = ters) */
.pnl-pay { display: flex; gap: calc(var(--phone-w)*0.028); padding: 0 calc(var(--phone-w)*0.06); }
.pnl-pay span {
  flex: 1; height: calc(var(--phone-w)*0.114);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--surface-2); color: var(--text);
  font-size: calc(var(--phone-w)*0.038); font-weight: 540;
}
.pnl-pay span.on { background: var(--text); color: var(--bg-elev); }

/* Sheet içindeki tam genişlik butonlar */
.pnl-ck-cta { padding: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.06) 0; display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.022); }
.pnl-ck-cta .b {
  height: calc(var(--phone-w)*0.128); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--phone-w)*0.042); font-weight: 600; letter-spacing: -0.008em;
}
.pnl-ck-cta .b.pri   { background: var(--accent); color: #fff; }
.pnl-ck-cta .b.ghost { background: transparent; color: var(--accent); }

/* Açılır satır (İndirim ekle) — kapalı hâli tek satır + chevron */
.pnl-row-toggle {
  margin: calc(var(--phone-w)*0.038) calc(var(--phone-w)*0.06) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center;
  padding: calc(var(--phone-w)*0.042) calc(var(--phone-w)*0.05);
  font-size: calc(var(--phone-w)*0.042); font-weight: 500; color: var(--text);
}
.pnl-row-toggle svg { width: calc(var(--phone-w)*0.038); height: calc(var(--phone-w)*0.038); margin-left: auto; color: var(--text-3); }

/* ────────── MÜŞTERİ KARTI (CustomerDetail) ──────────
   Ortalanmış büyük avatar (VIP'te taç madalyonu) + ad; üç istatistik kartı;
   Ara / Mesaj / Randevu üçlüsü; ardından PAKETLER ve KALAN BORÇ bölümleri. */
.pnl-cd-hero { text-align: center; padding: calc(var(--phone-w)*0.022) 0 0; }
.pnl-cd-hero .ava-wrap { display: inline-flex; position: relative; }
.pnl-cd-hero .ava {
  width: calc(var(--phone-w)*0.2); height: calc(var(--phone-w)*0.2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: calc(var(--phone-w)*0.082); letter-spacing: -0.01em;
}
.pnl-cd-hero .crown {
  position: absolute; right: -2%; bottom: -2%;
  width: calc(var(--phone-w)*0.082); height: calc(var(--phone-w)*0.082);
  border-radius: 50%; background: linear-gradient(135deg, #af52de, #6c2db0); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: calc(var(--phone-w)*0.0076) solid var(--bg);
  box-shadow: 0 4px 12px rgba(175,82,222,.4);
}
.pnl-cd-hero .crown svg { width: 48%; height: 48%; }
.pnl-cd-hero .nm { font-size: calc(var(--phone-w)*0.086); font-weight: 700; letter-spacing: -0.025em; margin-top: calc(var(--phone-w)*0.03); color: var(--text); }

.pnl-stat3 {
  margin: calc(var(--phone-w)*0.045) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--phone-w)*0.028);
}
.pnl-stat3 .s {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.036) calc(var(--phone-w)*0.02);
  text-align: center;
}
.pnl-stat3 .s .v { font-size: calc(var(--phone-w)*0.058); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.pnl-stat3 .s .l { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); margin-top: 2px; }

.pnl-act3 {
  margin: calc(var(--phone-w)*0.032) calc(var(--phone-w)*0.05) 0;
  display: flex; gap: calc(var(--phone-w)*0.028);
}
.pnl-act3 .b {
  flex: 1; height: calc(var(--phone-w)*0.114); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--phone-w)*0.02);
  background: var(--surface-2); color: var(--text);
  font-size: calc(var(--phone-w)*0.036); font-weight: 600;
}
.pnl-act3 .b.pri { background: var(--accent); color: #fff; }
.pnl-act3 .b svg { width: calc(var(--phone-w)*0.042); height: calc(var(--phone-w)*0.042); }

/* Bölüm başlığı + sağda eylem linki (PAKETLER · Paket sat) */
.pnl-shead.with-act { display: flex; align-items: baseline; justify-content: space-between; }
.pnl-shead .act { color: var(--accent); font-size: calc(var(--phone-w)*0.034); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Serbest kart (paket / borç / verilmemiş hizmet) */
.pnl-card {
  margin: 0 calc(var(--phone-w)*0.05);
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.055);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.042);
}
.pnl-card + .pnl-card { margin-top: calc(var(--phone-w)*0.028); }
.pnl-card .nm { font-size: calc(var(--phone-w)*0.046); font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.pnl-card .sb { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 1px; }
.pnl-card .sb.warn { color: var(--orange); }
.pnl-card .big {
  font-size: calc(var(--phone-w)*0.078); font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1;
}
.pnl-card .big.red { color: var(--red); }
.pnl-card .top-row { display: flex; align-items: flex-start; gap: calc(var(--phone-w)*0.03); }
.pnl-card .top-row .grow { flex: 1; min-width: 0; }
.pnl-card .dots-more { color: var(--text-3); display: inline-flex; flex: none; }
.pnl-card .dots-more svg { width: calc(var(--phone-w)*0.05); height: calc(var(--phone-w)*0.05); }

/* Taksit takvimi satırları — vadesi geçen turuncu */
.pnl-plan { margin-top: calc(var(--phone-w)*0.028); }
.pnl-plan .pr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--phone-w)*0.04); padding: calc(var(--phone-w)*0.018) 0;
}
.pnl-plan .pr .d { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); font-weight: 500; }
.pnl-plan .pr.late .d { color: var(--orange); font-weight: 600; }
.pnl-plan .pr .a { font-size: calc(var(--phone-w)*0.036); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

/* ────────── KASA (CashScreen) ──────────
   TAHSİLAT hero + CİRO/GİDER ikilisi + KALAN BORÇ + VERİLMEMİŞ HİZMET.
   Tahsilat ile ciro asla TOPLANMAZ; ekran bunu boyutla ve etiketle anlatır. */
.pnl-money-hero {
  margin: calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.078);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.055);
}
.pnl-money-hero .kc {
  font-size: calc(var(--phone-w)*0.03); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2);
}
.pnl-money-hero .v {
  font-size: calc(var(--phone-w)*0.114); font-weight: 700; letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums; line-height: 1; margin-top: calc(var(--phone-w)*0.022); color: var(--text);
}
.pnl-money-hero .sb { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: calc(var(--phone-w)*0.018); }

.pnl-duo {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--phone-w)*0.028);
}
.pnl-duo .c {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.042);
}
.pnl-duo .c .kc {
  font-size: calc(var(--phone-w)*0.028); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2);
}
.pnl-duo .c .v {
  font-size: calc(var(--phone-w)*0.062); font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: calc(var(--phone-w)*0.014); color: var(--text);
}
.pnl-duo .c .v.red { color: var(--red); }
.pnl-duo .c .sb { font-size: calc(var(--phone-w)*0.028); color: var(--text-3); margin-top: 2px; }
.pnl-duo .c .sb.warn { color: var(--orange); font-weight: 600; }

/* Turuncu nöbetçi satırı (kapanmamış hesap) — kırmızı DEĞİL: hatırlatma */
.pnl-warn {
  margin: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.034);
  padding: calc(var(--phone-w)*0.042);
}
.pnl-tile {
  width: calc(var(--phone-w)*0.078); height: calc(var(--phone-w)*0.078);
  border-radius: calc(var(--phone-w)*0.03); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-tile svg { width: 52%; height: 52%; }
.pnl-warn .body { flex: 1; min-width: 0; }
.pnl-warn .nm { font-size: calc(var(--phone-w)*0.042); font-weight: 600; color: var(--text); }
.pnl-warn .sb { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); margin-top: 1px; }
.pnl-warn .chev { color: var(--text-3); display: inline-flex; flex: none; }
.pnl-warn .chev svg { width: calc(var(--phone-w)*0.038); height: calc(var(--phone-w)*0.038); }

/* ────────── PRİM (CommissionScreen) ────────── */
.pnl-list .row .metric-v {
  font-size: calc(var(--phone-w)*0.05); font-weight: 700; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; color: var(--text); flex: none;
}

/* ────────── RAPOR STÜDYOSU (ReportsDetailScreen) ──────────
   Kompakt başlık (geri + dışa aktarma) → büyük başlık + tarih aralığı →
   hazır aralık chip'leri → sekme şeridi → hero + KPI. */
.pnl-sh .ab.sm { width: calc(var(--phone-w)*0.092); height: calc(var(--phone-w)*0.092); }
.pnl-sh .abs { display: inline-flex; gap: calc(var(--phone-w)*0.022); }
.pnl-rs-title { padding: calc(var(--phone-w)*0.012) calc(var(--phone-w)*0.07) 0; }
.pnl-rs-title .t { font-size: calc(var(--phone-w)*0.086); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.pnl-rs-title .d { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pnl-chips {
  display: flex; gap: calc(var(--phone-w)*0.028);
  padding: calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.05) 0;
  overflow: hidden;
}
.pnl-chips span {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--phone-w)*0.018);
  padding: calc(var(--phone-w)*0.025) calc(var(--phone-w)*0.046);
  border-radius: 999px; background: var(--bg-elev); color: var(--text);
  box-shadow: var(--sh-sm);
  font-size: calc(var(--phone-w)*0.033); font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
}
.pnl-chips span.on   { background: var(--text); color: var(--bg-elev); box-shadow: none; }
.pnl-chips.tabs span.on { background: var(--accent); color: #fff; }
.pnl-chips span svg { width: calc(var(--phone-w)*0.036); height: calc(var(--phone-w)*0.036); }

/* ────────── EKİP DUYURUSU (MessagesScreen) ──────────
   Gerçek ekran iki sekmelidir (Gelen · Gönderilen) ve "kim okudu" bilgisi
   satırın DEĞİL, satıra dokununca açılan sheet'in içindedir. Mockup da öyle
   kurulur: arkada Gönderilen listesi, üstünde okundu dökümü. Okunmamış
   işareti tek sinyaldir (nokta) — gerçek panelde de kalın metin + nokta
   birlikte gürültü yaptığı için biri kaldırılmıştı. */
.pnl-seg.two { grid-template-columns: 1fr 1fr; }
.pnl-msg {
  margin: calc(var(--phone-w)*0.038) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.pnl-msg .m {
  display: flex; gap: calc(var(--phone-w)*0.028);
  padding: calc(var(--phone-w)*0.042) calc(var(--phone-w)*0.05);
  position: relative;
}
.pnl-msg .m + .m::before {
  content: ""; position: absolute; left: calc(var(--phone-w)*0.05); right: 0; top: 0;
  height: 1px; background: var(--hair);
}
.pnl-msg .dot {
  width: calc(var(--phone-w)*0.022); height: calc(var(--phone-w)*0.022);
  border-radius: 50%; background: transparent; flex: none;
  margin-top: calc(var(--phone-w)*0.016);
}
.pnl-msg .m.unread .dot { background: var(--accent); }
.pnl-msg .bd { flex: 1; min-width: 0; }
.pnl-msg .hd { display: flex; justify-content: space-between; gap: calc(var(--phone-w)*0.025); }
.pnl-msg .hd .nm { font-size: calc(var(--phone-w)*0.036); font-weight: 600; color: var(--text); }
.pnl-msg .hd .tm { font-size: calc(var(--phone-w)*0.03); color: var(--text-3); flex: none; }
.pnl-msg .tx { font-size: calc(var(--phone-w)*0.036); color: var(--text-2); line-height: 1.45; margin-top: 3px; }
.pnl-msg .rc { font-size: calc(var(--phone-w)*0.03); color: var(--text-3); margin-top: calc(var(--phone-w)*0.014); }

/* Okundu dökümü (sheet içi). Okumayan turuncu yazılır: kırmızı "hata"
   demek olurdu, oysa burada yalnızca "henüz açmadı" bilgisi var. */
/* İçeriğe göre boylanan sheet. Okundu dökümü kısa: sabit %64'te altta
   ekranın üçte biri kadar boş bant kalıyordu ve sheet "yarım yüklenmiş"
   gibi okunuyordu. */
.pnl-drawer.sheet.auto { height: auto; max-height: 74%; padding-bottom: calc(var(--phone-w)*0.075); }
.pnl-read { padding: calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.06) 0; }
.pnl-read .when { font-size: calc(var(--phone-w)*0.032); color: var(--text-3); }
.pnl-read .full {
  font-size: calc(var(--phone-w)*0.04); line-height: 1.55; color: var(--text);
  margin-top: calc(var(--phone-w)*0.028);
}
.pnl-read .sep { height: 1px; background: var(--hair); margin: calc(var(--phone-w)*0.05) 0 calc(var(--phone-w)*0.032); }
.pnl-read .cnt { font-size: calc(var(--phone-w)*0.032); font-weight: 600; color: var(--text-3); }
.pnl-read .r {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--phone-w)*0.018) 0;
  font-size: calc(var(--phone-w)*0.038); color: var(--text);
}
.pnl-read .r .seen { font-size: calc(var(--phone-w)*0.034); color: var(--text-3); }
.pnl-read .r .seen.no { color: var(--orange); }

/* ────────── ŞUBELER (BranchesScreen) ──────────
   Satır düzeni .pnl-list ailesinden gelir; şubeye özel olan üç şey var:
   durum çipi (aktif/kapalı), satır sonundaki metin eylemleri (Düzenle ·
   Geç) ve zincir adresi kartı. Kapalı şube .row.off ile soluklaşır —
   gerçek ekranda da silinmez, geçmişiyle listede durur (migration 060). */
.pnl-list .row .br-tag {
  font-size: calc(var(--phone-w)*0.028); font-weight: 600; line-height: 1; flex: none;
  padding: calc(var(--phone-w)*0.013) calc(var(--phone-w)*0.024);
  border-radius: 999px;
}
.pnl-list .row .br-tag.on  { color: var(--accent);  background: var(--accent-soft); }
.pnl-list .row .br-tag.off { color: var(--text-3);  background: var(--surface-2); }
.pnl-list .row .acts { display: inline-flex; align-items: center; gap: calc(var(--phone-w)*0.038); flex: none; margin-left: auto; }
.pnl-list .row .acts .a { font-size: calc(var(--phone-w)*0.034); font-weight: 500; color: var(--text-2); }
.pnl-list .row .acts .a.pri { color: var(--accent); font-weight: 600; }
/* Avatarsız liste: ayraç, avatar payı kadar değil metin kadar içeriden
   başlar (şube satırlarında sol ikon yok). */
.pnl-list.flush .row + .row::before { left: calc(var(--phone-w)*0.05); }
.pnl-addr {
  margin: calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.058);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w)*0.042) calc(var(--phone-w)*0.05);
}
.pnl-addr .l {
  font-size: calc(var(--phone-w)*0.028); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2);
}
.pnl-addr .v {
  font-size: calc(var(--phone-w)*0.042); font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); margin-top: 3px;
}
.pnl-addr .n { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); line-height: 1.45; margin-top: calc(var(--phone-w)*0.022); }

/* ────────── ZİNCİR PANOSU (GroupOverviewScreen) ──────────
   Dönem seçimi burada segmented DEĞİL üç ayrı düğmedir (gerçek ekranla
   birebir); Kasa/Raporlar'ın .pnl-seg'i ile karışmaması da iyi olur.
   Dörtlü kutu = MiniStat: renkli ikon → sayı → etiket. */
.pnl-range {
  display: flex; gap: calc(var(--phone-w)*0.022);
  padding: calc(var(--phone-w)*0.028) calc(var(--phone-w)*0.05) 0;
}
.pnl-range span {
  flex: 1; height: calc(var(--phone-w)*0.088); border-radius: calc(var(--phone-w)*0.026);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2);
  font-size: calc(var(--phone-w)*0.035); font-weight: 560;
}
.pnl-range span.on { background: var(--accent); color: #fff; }
.pnl-mini4 {
  margin: 0 calc(var(--phone-w)*0.05);
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--phone-w)*0.026);
}
.pnl-mini4 .m {
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.05);
  box-shadow: var(--sh-sm); padding: calc(var(--phone-w)*0.038);
}
.pnl-mini4 .m .ic {
  width: calc(var(--phone-w)*0.082); height: calc(var(--phone-w)*0.082);
  border-radius: calc(var(--phone-w)*0.03);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--c, var(--accent)), transparent 86%);
  color: var(--c, var(--accent));
}
.pnl-mini4 .m .ic svg { width: 52%; height: 52%; }
.pnl-mini4 .m .v {
  font-size: calc(var(--phone-w)*0.062); font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1;
  margin-top: calc(var(--phone-w)*0.024);
}
.pnl-mini4 .m .l { font-size: calc(var(--phone-w)*0.032); color: var(--text-2); margin-top: 1px; }

/* Şube kırılımı .pnl-rep-top'u ödünç alır (aynı çubuk dili); farkı ciroyu
   satırın başlığı yapması ve çubuğun altına kırılım satırı koymasıdır. */
.pnl-rep-top.branches .tr .nm  { font-size: calc(var(--phone-w)*0.04); font-weight: 600; }
.pnl-rep-top.branches .tr .ct2 { font-size: calc(var(--phone-w)*0.04); color: var(--text); }
.pnl-rep-top .tr .mt { font-size: calc(var(--phone-w)*0.03); color: var(--text-2); margin-top: calc(var(--phone-w)*0.016); }
.pnl-rep-top .tr.off .nm, .pnl-rep-top .tr.off .ct2 { color: var(--text-3); }

/* ────────── DAHA (MoreHubScreen) ──────────
   Panelin gerçek envanteri burada görünür: kasa, paketler, raporlar, ekip,
   log kayıtları, portal, QR, web sitene ekle. Landing'in "ve daha fazlası"
   siyah kartı bunu ANLATIYORDU; artık GÖSTERİYOR. */
.pnl-hub-h { padding: calc(var(--phone-w)*0.022) calc(var(--phone-w)*0.07) 0; }
.pnl-hub-h .t { font-size: calc(var(--phone-w)*0.108); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pnl-hub-biz {
  margin: calc(var(--phone-w)*0.038) calc(var(--phone-w)*0.05) 0;
  background: var(--bg-elev); border-radius: calc(var(--phone-w)*0.055);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center; gap: calc(var(--phone-w)*0.04);
  padding: calc(var(--phone-w)*0.045);
}
.pnl-hub-biz .logo {
  width: calc(var(--phone-w)*0.132); height: calc(var(--phone-w)*0.132);
  border-radius: calc(var(--phone-w)*0.038); flex: none;
  background: linear-gradient(135deg, #0a0a0c, #1f3a2e); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--phone-w)*0.048); font-weight: 700; letter-spacing: -0.02em;
}
.pnl-hub-biz .body { flex: 1; min-width: 0; }
.pnl-hub-biz .nm { font-size: calc(var(--phone-w)*0.048); font-weight: 600; letter-spacing: -0.012em; color: var(--text); }
.pnl-hub-biz .sb { font-size: calc(var(--phone-w)*0.034); color: var(--text-2); margin-top: 2px; }
.pnl-hub-biz .edit {
  width: calc(var(--phone-w)*0.082); height: calc(var(--phone-w)*0.082); border-radius: 50%;
  background: var(--surface-2); color: var(--text); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-hub-biz .edit svg { width: 46%; height: 46%; }
/* Hub satırları list-row ailesinden; yalnız yoğunluk biraz daha sıkı. */
.pnl-list.hub .row { padding: calc(var(--phone-w)*0.032) calc(var(--phone-w)*0.05); }
.pnl-list.hub .row .nm { font-weight: 500; }
.pnl-list.hub .row .sb { font-size: calc(var(--phone-w)*0.03); }
.pnl-list .row .soon {
  flex: none; align-self: flex-start; margin-top: 2px;
  padding: calc(var(--phone-w)*0.008) calc(var(--phone-w)*0.026);
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: calc(var(--phone-w)*0.028); font-weight: 600; white-space: nowrap;
}
.pnl-list .row.dim { opacity: 0.5; }

/* ────────── INSTAGRAM OTOMASYONU (InstagramScreen · bağlı değil hâli) ──────────
   Gerçek ekran bağlantı kurulmadan önce böyle görünür: ortalanmış yumuşak
   ikon + "Henüz bağlı değil" + açıklama, ardından numaralı 3 adım ve tam
   genişlik "Instagram ile bağlan" butonu. */
.pnl-ig-empty { text-align: center; padding: calc(var(--phone-w)*0.075) calc(var(--phone-w)*0.085) 0; }
.pnl-ig-empty .ic {
  width: calc(var(--phone-w)*0.163); height: calc(var(--phone-w)*0.163);
  border-radius: calc(var(--phone-w)*0.046);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-ig-empty .ic svg { width: 44%; height: 44%; }
.pnl-ig-empty .t { font-size: calc(var(--phone-w)*0.05); font-weight: 600; letter-spacing: -0.012em; margin-top: calc(var(--phone-w)*0.036); color: var(--text); }
.pnl-ig-empty .d { font-size: calc(var(--phone-w)*0.038); color: var(--text-2); line-height: 1.45; margin-top: calc(var(--phone-w)*0.022); }
.pnl-list .row .num {
  width: calc(var(--phone-w)*0.061); height: calc(var(--phone-w)*0.061); border-radius: 50%; flex: none;
  background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--phone-w)*0.031); font-weight: 600;
}

/* Rozet satırında "Yakında" işareti — henüz yayında olmayan ekran (Instagram)
   kullanıcının umudunu boşa çıkarmasın. */
.tpl-dot em {
  font-style: normal; font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px; margin-left: 2px;
  background: var(--accent-soft); color: var(--accent);
}

/* ────────── Panel tab bar (gerçek .navbar: YÜZEN cam kapsül) ──────────
   Gerçek panelde tab bar tam genişlikte düz bir çubuk DEĞİL: kenarlardan
   içeride duran, blur'lu, 26px yarıçaplı yüzen bir kapsül. Pasif sekme
   YALNIZ ikon taşır; aktif sekme accent-soft bir kapsüle açılıp etiketini
   ikonun YANINDA gösterir (panel/src/styles.css .navbar/.navtab + tabbar.jsx).
   Ölçüler 393px cihaz → 280px mockup oranıyla türetildi (62/280≈0.221 …).

   Etiketler markup'ta HER sekmede durur (<b>) — EN sözlüğü ve ekran okuyucu
   için gerekli; pasif olanları CSS gizler. Böylece 9 tab bar kopyası tek
   kuraldan yönetilir. */
.pnl-tab {
  position: absolute; z-index: 6;
  left: calc(var(--phone-w)*0.036); right: calc(var(--phone-w)*0.036);
  bottom: calc(var(--phone-w)*0.056);
  height: calc(var(--phone-w)*0.158);
  border-radius: calc(var(--phone-w)*0.066);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--phone-w)*0.02);
  background: var(--bg-overlay);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--hair-soft);
  box-shadow: 0 calc(var(--phone-w)*0.03) calc(var(--phone-w)*0.1) rgba(15,15,20,.14),
              0 1px 4px rgba(15,15,20,.05);
}
:root[data-theme="dark"] .pnl-tab {
  box-shadow: 0 calc(var(--phone-w)*0.036) calc(var(--phone-w)*0.12) rgba(0,0,0,.6);
}
.pnl-tab .ti {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--phone-w)*0.112);
  padding: 0 calc(var(--phone-w)*0.0305);
  border-radius: 999px;
  color: var(--text-3);
  font-size: calc(var(--phone-w)*0.0331); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
}
.pnl-tab .ti svg { width: calc(var(--phone-w)*0.0636); height: calc(var(--phone-w)*0.0636); flex: none; }
/* Pasif sekmede etiket YOK (gerçek panelde 0fr grid ile kapalı) */
.pnl-tab .ti b { display: none; font-weight: inherit; }
.pnl-tab .ti.on {
  background: var(--accent-soft); color: var(--accent);
}
.pnl-tab .ti.on b { display: block; padding-left: calc(var(--phone-w)*0.0204); }
.pnl-tab .ti.on svg { transform: scale(1.04); }

/* Gövde altındaki soluma — gerçek paneldeki .bottom-scrim: içerik yüzen
   bar'ın ARDINDA yumuşayarak biter, çizgiyle kesilmez. */
   Kısa tutulur: mockup KAYDIRILMAZ, yalnız kesiğin sert olmaması istenir —
   uzun bir soluma sığan içeriği de yutar. */
.pnl-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--phone-w)*0.1); pointer-events: none; z-index: 3;
  background: linear-gradient(to top, var(--bg) 32%, transparent 100%);
}

/* ────────── FAB (yeni randevu) ──────────
   Gerçek panelde Bugün ve Takvim sekmelerinde yüzen bar'ın ÜSTÜNDE durur;
   panelin tek birincil eylemi. Mockup'ta da yalnız o iki ekranda çizilir. */
.pnl-fab {
  position: absolute; z-index: 7;
  right: calc(var(--phone-w)*0.046);
  bottom: calc(var(--phone-w)*0.243);
  width: calc(var(--phone-w)*0.1425); height: calc(var(--phone-w)*0.1425);
  border-radius: calc(var(--phone-w)*0.046);
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 calc(var(--phone-w)*0.036) calc(var(--phone-w)*0.107) rgba(10,132,255,.4),
              0 2px 6px rgba(10,132,255,.3);
}
.pnl-fab svg { width: 50%; height: 50%; }

/* ────────── Panel ekran rozet satırı (showcase-copy altı) ────────── */
/* 17 ekran → rozet bulutu masaüstünde dört satıra çıkıyordu; şablon rozet
   satırıyla aynı görsel dilde ama biraz daha sıkı (yalnız panel rozetleri). */
.panel-badge-row { display: flex; gap: 7px; justify-content: flex-start; flex-wrap: wrap; margin-top: 22px; }
.panel-badge-row .tpl-dot { padding: 7px 12px; font-size: 12.5px; gap: 6px; }
.panel-badge-row .tpl-dot i { width: 8px; height: 8px; }
@media (min-width: 880px) {
  /* .flip → media sağda; rozetler kopya altında soldan akar; mevcut akış uyumlu */
}

/* ────────── Rozet satırı, kontrol ettiği telefonun YANINDA durmalı ──────────
   .showcase 880px altında TEK sütuna düşer: önce telefon, sonra kopya sütunu
   (kicker → başlık → lead → rozetler → feature-mini). Rozetler böylece
   kontrol ettikleri mockup'tan ~700-800px aşağıda kalıyordu. Rozet satırı
   rahatça ekrandayken telefon çoktan yukarı kaymış oluyor; kullanıcı
   "Müşteriler"e basıyor, değişen ekranı GÖREMİYOR. Tıklama ya hiçbir şey
   yapmamış ya da onu bir yere götürmüş gibi okunuyor — 800px'te bir alt
   bölümün (müşteri paneli) telefonu görünürde olduğu için daha da beter:
   basılan rozet ilgisiz bir mockup'ın yanında yanıp sönüyor.

   Çözüm mesafeyi kapatmak: kopya sütunu flex olur, rozet satırı sütunun
   BAŞINA alınır — yani doğrudan telefonun altına, karusel noktaları gibi.
   Sayfayı JS ile kaydırmak bilinçli olarak tercih edilmedi (bkz.
   tests/landing.test.mjs "scrollIntoView sayfayı dikey kaydırır").
   ≥880px iki sütun: telefon zaten rozetlerin yanında, orada hiçbir şey
   değişmez. Kural .showcase-copy tabanlı → panel ve müşteri paneli
   mockup'larının ikisi de tek yerden düzelir. */
@media (max-width: 879px) {
  .showcase-copy { display: flex; flex-direction: column; }
  .showcase-copy > .panel-badge-row { order: -1; margin: 0 0 26px; }
  /* Flex sütunu margin collapse'ı kapatır: blok akışında h2'nin alt margin'i
     lead'in üst margin'ini yutuyordu, flex'te ikisi TOPLANIR ve bölüm 40px
     şişer. Üç kopya sütunu da aynı şablonu (kicker → h2 → lead → [rozetler]
     → feature-mini) taşıdığı için lead'in dikey margin'lerini sıfırlamak
     eski ritmi birebir geri verir: aradaki boşluk yine h2'nin alt margin'i
     ve feature-mini'nin üst margin'idir. */
  .showcase-copy > .lead { margin-top: 0; margin-bottom: 0; }
  /* .kicker satır-içi bir <span>: blok akışında satır kutusu, harf kutusunun
     altına ~3px daha bırakıyordu. Flex çocuğu bloklaşınca o pay kaybolur ve
     kicker başlığa 3px yaklaşır; kazara oluşan boşluğu açık yazıyoruz. */
  .showcase-copy > .kicker { margin-bottom: 3px; }
}

/* Mobil: 10 rozet sararak 4-5 satır yapıyor ve ekranın yarısını yiyordu.
   Dar ekranda tek satır + yatay kaydırma; aktif rozet JS'te görünüre alınır
   (app.js pGo). Kenarda maskeyle "devamı var" sinyali. */
@media (max-width: 759px) {
  /* Kaydırma kutusunun içeriği (10 rozet, ~1000px) grid item'ın otomatik
     minimum genişliğini şişirip TÜM SAYFAYI yatay taşırıyordu. min-width:0
     olmadan overflow-x tek başına yetmez — sütun içeriğe göre büyüyor. */
  .showcase-copy { min-width: 0; }
  .panel-badge-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Kart kenarına kadar kayabilsin: wrap padding'ini iptal edip iç boşlukla telafi */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 28px), transparent 100%);
  }
  .panel-badge-row::-webkit-scrollbar { display: none; }
  .panel-badge-row .tpl-dot { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-badge-row { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   MÜŞTERİ PANELİ — 8 EKRAN MORPH (.cus-*)  ·  #cuStack
   ────────────────────────────────────────────────────────────────────────
   Ürünün ÜÇÜNCÜ yüzeyi: randevu ALAN kişinin kendi ekranı (/musteri).
   Kaynak: js/customer/panel.js + css/customer.css. Oradaki dil buraya
   damıtıldı — kabuk (üst bar + kart listesi), sıradaki randevu kartı,
   işletme satırı + rozetleri, segment, randevu satırı, nokta sayacı,
   borç kartı ve taksit satırı. YENİ görsel dil icat edilmedi.

   Ad alanı NEDEN `.cus-` (`.cu-` DEĞİL): gerçek müşteri paneli `.cu-*`
   kullanır. İki dosya bugün asla aynı sayfaya yüklenmiyor (customer.css
   yalnız /musteri rotasında iner) ama isimler çakışsaydı ileride tek bir
   içe aktarma sessizce iki tasarımı birbirine karıştırırdı.

   Ölçü: her şey --phone-w oranlıdır (mockups.css'in genel kuralı).
   Ekran KAYDIRILMAZ; içerik .cus-body'ye sığmalı (bkz. LANDING-DESIGN §8).
   ════════════════════════════════════════════════════════════════════════ */

/* Panel showcase ile aynı geçiş: yalnız opacity. Kalabalık ekranlarda
   scale(1.04) sıçrama gibi okunuyordu (bkz. #panelStack notu). */
#cuStack .screen { transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
#cuStack .screen.active { transform: none; }

.cus-scr { background: var(--bg); color: var(--text); height: 100%; position: relative; }

/* ────────── Üst bar (gerçek .cu-bar) ──────────
   Üç sütunlu grid: başlık, yanlardaki eylemlerin genişliğinden BAĞIMSIZ
   olarak tam ortada kalır (flex + space-between'de kayardı).

   ⚠️ Gerçek barda `backdrop-filter` var (içerik altından kayar). Burada
   İÇERİK KAYMADIĞI için blur görsel olarak hiçbir şey katmıyordu ama iki
   bedeli vardı: (1) her ekranda ayrı bir compositing katmanı, (2) Chrome'da
   backdrop-filter'lı eleman, daha yüksek z-index'li kardeş karartmanın
   ÜSTÜNDE boyanıyordu → iptal sheet'inin scrim'i üst barı karartmıyordu.
   Statik mockup'ta düz zemin doğru cevap. */
.cus-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--phone-w) * 0.245);
  padding: calc(var(--phone-w) * 0.125) calc(var(--phone-w) * 0.035) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: calc(var(--phone-w) * 0.02);
  background: var(--bg);
  box-shadow: inset 0 -0.5px 0 var(--hair-soft);
}
.cus-bar .ttl {
  font-size: calc(var(--phone-w) * 0.048); font-weight: 600;
  letter-spacing: -0.018em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cus-bar .b {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: calc(var(--phone-w) * 0.042); font-weight: 500;
  color: var(--accent); white-space: nowrap;
}
.cus-bar .b.end { justify-self: end; }
.cus-bar .b svg { width: calc(var(--phone-w) * 0.05); height: calc(var(--phone-w) * 0.05); }

/* Gövde: bar altı, telefonun dibine kadar. Alt kenarda panel gövdesiyle
   aynı yumuşak solma — kesilen içerik "kırpılmış" değil "devamı var". */
.cus-body {
  position: absolute; left: 0; right: 0;
  top: calc(var(--phone-w) * 0.245); bottom: 0;
  overflow: hidden;
  padding: calc(var(--phone-w) * 0.045) calc(var(--phone-w) * 0.05);
  display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.032);
}
.cus-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--phone-w) * 0.09); pointer-events: none; z-index: 3;
  background: linear-gradient(to top, var(--bg) 30%, transparent 100%);
}

.cus-card {
  background: var(--bg-elev); border-radius: calc(var(--phone-w) * 0.052);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w) * 0.048) calc(var(--phone-w) * 0.052);
}
.cus-sec {
  font-size: calc(var(--phone-w) * 0.032); font-weight: 600;
  letter-spacing: 0.07em; color: var(--text-3);
  padding: calc(var(--phone-w) * 0.012) calc(var(--phone-w) * 0.012) 0;
}
.cus-btn {
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--phone-w) * 0.148); border-radius: calc(var(--phone-w) * 0.042);
  background: var(--accent); color: #fff;
  font-size: calc(var(--phone-w) * 0.046); font-weight: 600; letter-spacing: -0.012em;
  flex: none;
}
.cus-btn.sec { background: var(--surface-2); color: var(--text); }
.cus-btn.danger { background: var(--red); color: #fff; }

/* ────────── 1 · Giriş ──────────
   Ürün vaadi (3 madde) burada durur: "numaramı neden vereyim" sorusunun
   yanıtıdır ve sola hizalıdır (ortalanmış liste okunmaz). */
.cus-auth { text-align: center; padding: calc(var(--phone-w) * 0.062) calc(var(--phone-w) * 0.055); }
.cus-auth .ic {
  width: calc(var(--phone-w) * 0.155); height: calc(var(--phone-w) * 0.155);
  margin: 0 auto calc(var(--phone-w) * 0.045);
  border-radius: calc(var(--phone-w) * 0.045);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.cus-auth .ic svg { width: 46%; height: 46%; }
.cus-auth .ttl { font-size: calc(var(--phone-w) * 0.068); font-weight: 700; letter-spacing: -0.028em; }
.cus-auth .sub {
  font-size: calc(var(--phone-w) * 0.038); color: var(--text-2);
  line-height: 1.45; margin-top: calc(var(--phone-w) * 0.022);
}
.cus-feats {
  display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.026);
  text-align: left; margin: calc(var(--phone-w) * 0.05) 0;
}
.cus-feats .f {
  display: flex; align-items: center; gap: calc(var(--phone-w) * 0.03);
  font-size: calc(var(--phone-w) * 0.038); color: var(--text-2); line-height: 1.3;
}
.cus-feats .f svg { width: calc(var(--phone-w) * 0.046); height: calc(var(--phone-w) * 0.046); color: var(--accent); flex: none; }

/* Telefon alanı: +90 öneki görsel olarak ayrıdır, müşteri yalnız 10 hane
   yazar (ülke kodunu yazdırmak gerçekte en sık girdi hatasıydı). */
.cus-input {
  display: flex; align-items: center;
  height: calc(var(--phone-w) * 0.152);
  border-radius: calc(var(--phone-w) * 0.042);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair);
  overflow: hidden; text-align: left;
}
.cus-input .cc {
  padding: 0 calc(var(--phone-w) * 0.038);
  font-size: calc(var(--phone-w) * 0.046); font-weight: 600; color: var(--text-2);
  box-shadow: inset -1px 0 0 var(--hair-soft); line-height: calc(var(--phone-w) * 0.152);
  flex: none;
}
.cus-input .val {
  padding: 0 calc(var(--phone-w) * 0.04);
  font-size: calc(var(--phone-w) * 0.05); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; color: var(--text);
}
.cus-input .val.ph { color: var(--text-3); }
.cus-auth .cus-btn { margin-top: calc(var(--phone-w) * 0.038); }
.cus-note {
  font-size: calc(var(--phone-w) * 0.03); color: var(--text-3);
  line-height: 1.45; margin-top: calc(var(--phone-w) * 0.038);
}
.cus-note b { color: var(--accent); font-weight: 500; }

/* ────────── 2 · Kod ──────────
   Tek input + harf aralığı yerine 6 ayrı kutu: kaç hane girildiği
   sayılabilir olur, hangi kutunun boş kaldığı görünür. */
.cus-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--phone-w) * 0.022); margin: calc(var(--phone-w) * 0.05) 0 calc(var(--phone-w) * 0.03); }
.cus-code i {
  height: calc(var(--phone-w) * 0.155);
  border-radius: calc(var(--phone-w) * 0.038);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center;
  font-size: calc(var(--phone-w) * 0.062); font-weight: 600; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.cus-code i.on { box-shadow: inset 0 0 0 2px var(--accent); }
.cus-code i.cur { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text-3); }
.cus-resend { font-size: calc(var(--phone-w) * 0.038); color: var(--text-3); font-weight: 500; }
.cus-resend b { color: var(--accent); font-weight: 500; }

/* ────────── 3 · Liste ──────────
   Kimlik satırı aynı zamanda profil girişidir: numaraya dokunmak
   "burası benim" beklentisinin doğal karşılığı. */
.cus-id {
  display: flex; align-items: center; gap: calc(var(--phone-w) * 0.025);
  padding: 0 calc(var(--phone-w) * 0.018);
}
.cus-id .ph { flex: 1; font-size: calc(var(--phone-w) * 0.038); color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.cus-id .open { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; color: var(--accent); }
.cus-chev { color: var(--text-3); display: inline-flex; flex: none; }
.cus-chev svg { width: calc(var(--phone-w) * 0.05); height: calc(var(--phone-w) * 0.05); }

/* Sıradaki randevu: listenin ÜSTÜNDE, tek başına, aksan zeminli. Müşterinin
   ilk sorusu budur; işletme kartlarıyla aynı ağırlıkta olsaydı liste
   düzleşir ve hiyerarşi kaybolurdu. */
.cus-next {
  border-radius: calc(var(--phone-w) * 0.052);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
  padding: calc(var(--phone-w) * 0.05) calc(var(--phone-w) * 0.055);
}
.cus-next .lbl {
  font-size: calc(var(--phone-w) * 0.03); font-weight: 700; letter-spacing: 0.09em;
  color: var(--accent); margin-bottom: calc(var(--phone-w) * 0.028);
}
.cus-next .day { font-size: calc(var(--phone-w) * 0.062); font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; }
.cus-next .row { display: flex; align-items: baseline; gap: calc(var(--phone-w) * 0.025); margin-top: 2px; }
.cus-next .tm { font-size: calc(var(--phone-w) * 0.062); font-weight: 700; letter-spacing: -0.028em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cus-next .rel { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; color: var(--accent); opacity: .75; }
.cus-next .meta {
  font-size: calc(var(--phone-w) * 0.038); color: var(--text-2);
  margin-top: calc(var(--phone-w) * 0.025);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cus-biz {
  display: flex; align-items: center; gap: calc(var(--phone-w) * 0.04);
  background: var(--bg-elev); border-radius: calc(var(--phone-w) * 0.052);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w) * 0.045) calc(var(--phone-w) * 0.05);
}
.cus-av {
  width: calc(var(--phone-w) * 0.145); height: calc(var(--phone-w) * 0.145); flex: none;
  border-radius: calc(var(--phone-w) * 0.042);
  background: var(--surface-2); color: var(--text-2);
  display: grid; place-items: center;
  font-size: calc(var(--phone-w) * 0.046); font-weight: 600;
}
/* Ad ve meta AYRI SATIRDIR: inline bırakılırsa kısa bir isimde ikisi yan yana
   dizilir ("Glow Kadıköy · 3 ziyaret") ve satır bir anda okunmaz olur. */
.cus-biz .main { flex: 1; min-width: 0; display: block; }
.cus-biz .nm { display: block; font-size: calc(var(--phone-w) * 0.048); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cus-biz .mt { display: block; font-size: calc(var(--phone-w) * 0.034); color: var(--text-3); margin-top: 1px; }
/* Rozetler SARAR: üç rozet (yaklaşan · seans · borç) tek satıra sığmaz ve
   nowrap'ta kartın dışına taşıyordu. */
.cus-tags { display: flex; flex-wrap: wrap; gap: calc(var(--phone-w) * 0.018); margin-top: calc(var(--phone-w) * 0.026); }
.cus-tag {
  display: inline-flex; align-items: center;
  padding: calc(var(--phone-w) * 0.008) calc(var(--phone-w) * 0.028);
  border-radius: var(--r-pill);
  font-size: calc(var(--phone-w) * 0.032); font-weight: 600;
  background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
/* Durum renkleri YALNIZ anlam taşıdıkları için: yaklaşan (accent),
   kalan seans (green = elde var), borç (orange = dikkat). */
.cus-tag.is-next { background: var(--accent-soft); color: var(--accent); }
.cus-tag.is-pkg  { background: color-mix(in srgb, var(--green) 16%, transparent);  color: color-mix(in srgb, var(--green) 78%, var(--text)); }
.cus-tag.is-due  { background: color-mix(in srgb, var(--orange) 18%, transparent); color: color-mix(in srgb, var(--orange) 74%, var(--text)); }

/* ────────── 4 · İşletme detayı ──────────
   Kimlik kartı + eylemler: "nereye gideceğim" ve "nasıl ararım" detayda
   cevapsız kalıyordu. Eylemler yalnız VERİ VARSA basılır. */
.cus-head { display: flex; align-items: center; gap: calc(var(--phone-w) * 0.04); }
.cus-head .main { flex: 1; min-width: 0; }
.cus-head .nm { font-size: calc(var(--phone-w) * 0.052); font-weight: 700; letter-spacing: -0.02em; }
.cus-head .sub { font-size: calc(var(--phone-w) * 0.034); color: var(--text-3); margin-top: 2px; }
.cus-acts {
  display: flex; gap: calc(var(--phone-w) * 0.026);
  margin-top: calc(var(--phone-w) * 0.042); padding-top: calc(var(--phone-w) * 0.042);
  box-shadow: inset 0 1px 0 var(--hair-soft);
}
.cus-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--phone-w) * 0.02);
  height: calc(var(--phone-w) * 0.118); border-radius: calc(var(--phone-w) * 0.036);
  background: var(--surface-2); color: var(--accent);
  font-size: calc(var(--phone-w) * 0.038); font-weight: 600;
}
.cus-act svg { width: calc(var(--phone-w) * 0.044); height: calc(var(--phone-w) * 0.044); }

.cus-seg {
  display: flex; gap: 2px; padding: 3px;
  border-radius: calc(var(--phone-w) * 0.042);
  background: var(--surface-2); flex: none;
}
.cus-seg span {
  flex: 1; text-align: center;
  padding: calc(var(--phone-w) * 0.026) 0;
  border-radius: calc(var(--phone-w) * 0.034);
  font-size: calc(var(--phone-w) * 0.038); font-weight: 500; color: var(--text-2);
}
.cus-seg span.on { background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: var(--sh-sm); }

/* Randevu satırı — soldaki tarih bloğu KASITLI: liste tarandığında gözün
   tutunacağı tek sabit sütun odur. Saat ikinci satırda, çünkü müşteri
   önce "hangi gün" diye bakar. */
.cus-bk {
  display: flex; gap: calc(var(--phone-w) * 0.04);
  background: var(--bg-elev); border-radius: calc(var(--phone-w) * 0.052);
  box-shadow: var(--sh-sm);
  padding: calc(var(--phone-w) * 0.045) calc(var(--phone-w) * 0.05);
}
.cus-bk.past { box-shadow: inset 0 0 0 1px var(--hair-soft); background: transparent; }
.cus-bk .dt { width: calc(var(--phone-w) * 0.16); flex: none; text-align: center; }
.cus-bk .dt .d { font-size: calc(var(--phone-w) * 0.066); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cus-bk .dt .m { font-size: calc(var(--phone-w) * 0.032); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; }
.cus-bk .dt .t { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; color: var(--accent); margin-top: calc(var(--phone-w) * 0.016); font-variant-numeric: tabular-nums; }
.cus-bk.past .dt .t { color: var(--text-3); }
.cus-bk .main { flex: 1; min-width: 0; }
/* Göreli zaman rozeti: mutlak tarih HANGİ GÜN olduğunu, bu ne kadar
   YAKIN olduğunu söyler. İkisi farklı sorular, ikisi de sorulur. */
.cus-rel {
  display: inline-block;
  padding: calc(var(--phone-w) * 0.006) calc(var(--phone-w) * 0.026);
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: calc(var(--phone-w) * 0.032); font-weight: 700;
  margin-bottom: calc(var(--phone-w) * 0.02);
}
.cus-bk .svc { font-size: calc(var(--phone-w) * 0.046); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.cus-bk .sf { font-size: calc(var(--phone-w) * 0.034); color: var(--text-3); margin-top: 2px; }
.cus-bk .pr { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; color: var(--text-2); margin-top: calc(var(--phone-w) * 0.018); font-variant-numeric: tabular-nums; }
.cus-st {
  display: inline-block; margin-top: calc(var(--phone-w) * 0.02);
  padding: calc(var(--phone-w) * 0.006) calc(var(--phone-w) * 0.024);
  border-radius: var(--r-pill);
  font-size: calc(var(--phone-w) * 0.03); font-weight: 600;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}
.cus-bk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--phone-w) * 0.025);
  margin-top: calc(var(--phone-w) * 0.036); padding-top: calc(var(--phone-w) * 0.036);
  box-shadow: inset 0 1px 0 var(--hair-soft);
}
.cus-bk-foot .dl { font-size: calc(var(--phone-w) * 0.03); color: var(--text-3); line-height: 1.3; min-width: 0; }
.cus-bk-btn {
  display: inline-flex; align-items: center; gap: calc(var(--phone-w) * 0.014);
  padding: calc(var(--phone-w) * 0.022) calc(var(--phone-w) * 0.036);
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--hair);
  font-size: calc(var(--phone-w) * 0.034); font-weight: 500; color: var(--text-2);
  white-space: nowrap; flex: none;
}
.cus-bk-btn svg { width: calc(var(--phone-w) * 0.038); height: calc(var(--phone-w) * 0.038); }
.cus-bk-btn.cancel { color: var(--red); }
.cus-month {
  font-size: calc(var(--phone-w) * 0.032); font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-3); text-transform: uppercase;
  padding: calc(var(--phone-w) * 0.01) calc(var(--phone-w) * 0.012) 0;
}

/* ────────── 5 · İptal onayı (bottom sheet) ────────── */
.cus-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); z-index: 25; }
.cus-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 26;
  background: var(--bg-elev);
  border-top-left-radius: calc(var(--phone-w) * 0.075);
  border-top-right-radius: calc(var(--phone-w) * 0.075);
  padding: calc(var(--phone-w) * 0.03) calc(var(--phone-w) * 0.055) calc(var(--phone-w) * 0.062);
  box-shadow: 0 calc(var(--phone-w) * -0.02) calc(var(--phone-w) * 0.08) rgba(0,0,0,.16);
}
.cus-sheet .grab {
  width: calc(var(--phone-w) * 0.13); height: 4px; border-radius: 999px;
  background: var(--text-3); opacity: .5;
  margin: 0 auto calc(var(--phone-w) * 0.042);
}
.cus-sheet .ttl { font-size: calc(var(--phone-w) * 0.056); font-weight: 700; letter-spacing: -0.022em; text-align: center; }
.cus-sheet .bd {
  font-size: calc(var(--phone-w) * 0.038); color: var(--text-2); line-height: 1.5;
  text-align: center; margin-top: calc(var(--phone-w) * 0.03);
}
.cus-sheet .acts { display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.026); margin-top: calc(var(--phone-w) * 0.05); }

/* ────────── 6 · Paket kartı ──────────
   Nokta sayacı /p/<token> ekranıyla AYNI dilde: müşteri iki yerde aynı
   görseli görsün diye yeniden tasarlanmadı. */
.cus-pkg-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--phone-w) * 0.03); }
.cus-pkg-top .nm { font-size: calc(var(--phone-w) * 0.048); font-weight: 600; letter-spacing: -0.015em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cus-pkg-top .left { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; color: var(--accent); flex: none; }
.cus-dots { display: flex; flex-wrap: wrap; gap: calc(var(--phone-w) * 0.018); margin-top: calc(var(--phone-w) * 0.04); }
.cus-dots i {
  width: calc(var(--phone-w) * 0.038); height: calc(var(--phone-w) * 0.038);
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); display: block;
}
.cus-dots i.used { background: var(--accent); }
.cus-pkg-items {
  display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.024);
  margin-top: calc(var(--phone-w) * 0.042); padding-top: calc(var(--phone-w) * 0.042);
  box-shadow: inset 0 1px 0 var(--hair-soft);
}
.cus-pkg-items .it { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--phone-w) * 0.03); font-size: calc(var(--phone-w) * 0.038); }
.cus-pkg-items .it span:first-child { color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cus-pkg-items .it span:last-child { font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.cus-pkg-exp { font-size: calc(var(--phone-w) * 0.034); color: var(--text-3); margin-top: calc(var(--phone-w) * 0.036); }

/* ────────── 7 · Hesap ────────── */
.cus-bal { text-align: center; }
.cus-bal .lbl { font-size: calc(var(--phone-w) * 0.034); font-weight: 600; color: var(--text-3); letter-spacing: 0.02em; }
.cus-bal .amt {
  font-size: calc(var(--phone-w) * 0.105); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1; margin-top: calc(var(--phone-w) * 0.022);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--orange) 74%, var(--text));
}
.cus-bal .next {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--phone-w) * 0.022);
  margin-top: calc(var(--phone-w) * 0.042); padding-top: calc(var(--phone-w) * 0.042);
  box-shadow: inset 0 1px 0 var(--hair-soft);
  font-size: calc(var(--phone-w) * 0.036); color: var(--text-2);
}
.cus-bal .next b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cus-tk-top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--phone-w) * 0.03); }
.cus-tk-top .dt { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; }
.cus-tk-top .due { font-size: calc(var(--phone-w) * 0.038); font-weight: 600; flex: none; color: color-mix(in srgb, var(--orange) 74%, var(--text)); font-variant-numeric: tabular-nums; }
.cus-tk-lines {
  display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.02);
  margin-top: calc(var(--phone-w) * 0.036); padding-top: calc(var(--phone-w) * 0.036);
  box-shadow: inset 0 1px 0 var(--hair-soft);
}
.cus-tk-lines .l { display: flex; justify-content: space-between; gap: calc(var(--phone-w) * 0.03); font-size: calc(var(--phone-w) * 0.036); color: var(--text-2); }
.cus-tk-sum {
  display: flex; justify-content: space-between;
  font-size: calc(var(--phone-w) * 0.038); font-weight: 700;
  margin-top: calc(var(--phone-w) * 0.03); padding-top: calc(var(--phone-w) * 0.03);
  box-shadow: inset 0 1px 0 var(--hair-soft);
  font-variant-numeric: tabular-nums;
}
.cus-inst {
  display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.018);
  margin-top: calc(var(--phone-w) * 0.036); padding-top: calc(var(--phone-w) * 0.036);
  box-shadow: inset 0 1px 0 var(--hair-soft);
}
.cus-inst .h { font-size: calc(var(--phone-w) * 0.03); font-weight: 600; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 1px; }
.cus-inst .r { display: flex; align-items: center; gap: calc(var(--phone-w) * 0.028); font-size: calc(var(--phone-w) * 0.036); font-variant-numeric: tabular-nums; }
.cus-inst .r .sq { width: calc(var(--phone-w) * 0.05); color: var(--text-3); font-weight: 600; flex: none; }
.cus-inst .r .dd { flex: 1; color: var(--text-2); }
.cus-inst .r .am { font-weight: 600; }
.cus-inst .r .fl {
  padding: calc(var(--phone-w) * 0.004) calc(var(--phone-w) * 0.024);
  border-radius: var(--r-pill);
  font-size: calc(var(--phone-w) * 0.03); font-weight: 600; flex: none;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: color-mix(in srgb, var(--green) 78%, var(--text));
}

/* ────────── 8 · Profil ──────────
   Her alanın ALTINDA tek cümlelik açıklama var (mikro-eğitim); ayrı bir
   "nasıl çalışır" kutusu okunmuyor ve ekranı şişiriyordu. */
.cus-form { display: flex; flex-direction: column; gap: calc(var(--phone-w) * 0.045); }
.cus-field .lb { font-size: calc(var(--phone-w) * 0.034); font-weight: 600; color: var(--text-2); margin-bottom: calc(var(--phone-w) * 0.022); }
.cus-field .lb span { font-weight: 500; color: var(--text-3); }
.cus-field .hp { font-size: calc(var(--phone-w) * 0.032); color: var(--text-3); line-height: 1.4; margin-top: calc(var(--phone-w) * 0.02); }
/* Değiştirilemeyen alan gri zeminde: "neden yazamıyorum" sorusunu görsel
   olarak yanıtlar, disabled'ın sessizliğine bırakmaz. */
.cus-input.ro { background: var(--surface-2); box-shadow: none; }
.cus-input.ro .val { color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════════════
   "WEB SİTENİZ HAZIR" — STATİK KURULUM ONAY SAHNESİ (.tpl-ready)
   ────────────────────────────────────────────────────────────────────────
   Müşteri portali tasarımını GÖSTERMEZ. Yalnız mesaj: site oluşturuldu,
   kendi adınızda yayında, müşteri online randevu alabilir, dakikalar içinde.
   Telefon kabuğunda iOS sistem-onay diliyle.
   Aşağıdaki .tpl-url + .tpl-act-time + .tpl-act-done blokları başka markup
   yerlerinde de bulunabileceği için kaldırılmadı; index.html'de o markup
   olmadığı sürece sessizce no-op kalır.
   ──────────────────────────────────────────────────────────────────────── */

/* ── URL kromu ── */
.tpl-url {
  position: absolute;
  top: calc(var(--phone-w) * 0.142);
  left: calc(var(--phone-w) * 0.18);
  right: calc(var(--phone-w) * 0.18);
  height: calc(var(--phone-w) * 0.054);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--phone-w) * 0.032);
  letter-spacing: -0.005em;
  white-space: nowrap;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 20;
  pointer-events: none;
}
.tpl-url b { font-weight: 700; opacity: .95; }
.tpl-cine   .tpl-url { background: rgba(255,255,255,.12); color: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tpl-maison .tpl-url { background: rgba(255,255,255,.5);  color: #2a241d;             box-shadow: inset 0 0 0 1px rgba(90,70,45,.12); }
.tpl-min    .tpl-url { background: rgba(0,0,0,.045);      color: #5a5a60;             box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* ── Akt overlay'leri (ortak iskelet) ── */
.tpl-act {
  position: absolute; inset: 0;
  z-index: 25;
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column;
}

/* ── Akt 2: Saat seçim sheet (alttan kayar) ── */
.tpl-act-time { justify-content: flex-end; padding: 0; }
.tpl-act-time .act-card {
  margin: 0 calc(var(--phone-w) * 0.04) calc(var(--phone-w) * 0.045);
  border-radius: var(--r-sheet);
  padding: calc(var(--phone-w) * 0.035) calc(var(--phone-w) * 0.05) calc(var(--phone-w) * 0.05);
}
.tpl-act-time .act-grab {
  width: calc(var(--phone-w) * 0.1); height: 3.5px; border-radius: 999px;
  background: currentColor; opacity: .22;
  margin: 0 auto calc(var(--phone-w) * 0.03);
}
.tpl-act-time .act-title {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: calc(var(--phone-w) * 0.055);
}
.tpl-act-time .act-sub {
  font-size: calc(var(--phone-w) * 0.036); opacity: .58; margin-top: 2px;
}
.tpl-act-time .act-slots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--phone-w) * 0.025);
  margin-top: calc(var(--phone-w) * 0.04);
}
.tpl-act-time .act-cta {
  margin-top: calc(var(--phone-w) * 0.04);
  text-align: center; font-weight: 600;
  font-size: calc(var(--phone-w) * 0.044);
  padding: calc(var(--phone-w) * 0.038); border-radius: var(--r-pill);
}

/* Akt 2 — şablon tonları */
.tpl-cine   .tpl-act-time .act-card { background: rgba(20,20,22,.92); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.1) rgba(0,0,0,.55); }
.tpl-cine   .tpl-act-time .act-cta  { background: #fff; color: #111; }
.tpl-maison .tpl-act-time .act-card { background: #f5ece0; color: #2a241d; box-shadow: 0 calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.1) rgba(90,70,45,.25); }
.tpl-maison .tpl-act-time .act-cta  { background: #2a241d; color: #efe7dc; }
.tpl-min    .tpl-act-time .act-card { background: #ffffff; color: #111; box-shadow: 0 calc(var(--phone-w)*0.04) calc(var(--phone-w)*0.1) rgba(0,0,0,.14); }
.tpl-min    .tpl-act-time .act-cta  { background: var(--accent); color: #fff; }

/* Slot tonları — akt-time içi */
.tpl-cine   .tpl-act-time .slot { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tpl-maison .tpl-act-time .slot { background: rgba(42,36,29,.06);    color: #2a241d; box-shadow: inset 0 0 0 1px rgba(42,36,29,.1); }
.tpl-min    .tpl-act-time .slot { background: #f1f1f4; color: #111; box-shadow: none; }
.tpl-act-time .slot { text-align: center; font-size: calc(var(--phone-w)*0.04); font-weight: 600; padding: calc(var(--phone-w)*0.028) 0; border-radius: 10px; }
.tpl-act-time .slot.sel { background: var(--accent); color: #fff; box-shadow: none; }
.tpl-act-time .slot.off { opacity: .35; text-decoration: line-through; }

/* ── Akt 3: Onay — tam ekran "alındı + panelinize iletildi" ── */
.tpl-act-done {
  align-items: center; justify-content: center;
  padding: calc(var(--phone-w) * 0.18) calc(var(--phone-w) * 0.08) calc(var(--phone-w) * 0.08);
  text-align: center;
}
.tpl-act-done .act-done-core {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--phone-w) * 0.018);
}
.tpl-act-done .act-check {
  width: calc(var(--phone-w) * 0.2); height: calc(var(--phone-w) * 0.2);
  border-radius: 50%;
  background: #34c759; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 calc(var(--phone-w) * 0.025) calc(var(--phone-w) * 0.06) rgba(52,199,89,.45);
  margin-bottom: calc(var(--phone-w) * 0.02);
}
.tpl-act-done .act-check svg { width: 56%; height: 56%; }
.tpl-act-done .act-done-title {
  font-weight: 800; letter-spacing: -0.025em;
  font-size: calc(var(--phone-w) * 0.085);
}
.tpl-act-done .act-done-sub {
  font-size: calc(var(--phone-w) * 0.042);
  opacity: .65;
}
.tpl-act-done .act-done-toast {
  margin-top: calc(var(--phone-w) * 0.07);
  display: inline-flex; align-items: center; gap: calc(var(--phone-w) * 0.022);
  padding: calc(var(--phone-w) * 0.03) calc(var(--phone-w) * 0.052);
  border-radius: var(--r-pill);
  font-size: calc(var(--phone-w) * 0.036); font-weight: 600;
}
.tpl-act-done .act-done-toast-ic {
  width: calc(var(--phone-w) * 0.05); height: calc(var(--phone-w) * 0.05);
  display: grid; place-items: center; color: var(--accent);
  flex: 0 0 auto;
}
.tpl-act-done .act-done-toast-ic svg { width: 100%; height: 100%; }

/* Akt 3 — şablon zeminleri */
.tpl-cine   .tpl-act-done { background: radial-gradient(120% 80% at 50% 0%, #2b2b30 0%, #141416 60%, #0c0c0e 100%); color: #fff; }
.tpl-cine   .tpl-act-done .act-done-toast { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tpl-maison .tpl-act-done { background: #efe7dc; color: #2a241d; }
.tpl-maison .tpl-act-done .act-done-toast { background: rgba(42,36,29,.06); box-shadow: inset 0 0 0 1px rgba(42,36,29,.12); }
.tpl-min    .tpl-act-done { background: #ffffff; color: #111; }
:root[data-theme="dark"] .tpl-min .tpl-act-done { background: #f7f7f9; }
.tpl-min    .tpl-act-done .act-done-toast { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ── Animasyon döngüsü — 5.4sn, sonsuz ──
   Tek mockup; üç akt kendi içinde sürekli döner:
     · 0–18%   : sade home
     · 26–54%  : saat sheet slayt-in / out
     · 64–88%  : onay görünür
     · 88–100% : onay söner, döngü 0%'a temiz dönsün
   tplActTime: alttan slayt-in, sonra alta slayt-out.
   tplActDone: scale fade-in, sonra fade-out. */
@keyframes tplActTime {
  0%, 18%  { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.22)); }
  26%      { opacity: 1; transform: translateY(0); }
  54%      { opacity: 1; transform: translateY(0); }
  60%      { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.04)); }
  100%     { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.22)); }
}
@keyframes tplActDone {
  0%, 54%  { opacity: 0; transform: scale(.94); }
  64%      { opacity: 1; transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.94); }
}

.screen.active .tpl-act-time { animation: tplActTime 5.4s cubic-bezier(.32,.72,0,1) infinite; }
.screen.active .tpl-act-done { animation: tplActDone 5.4s cubic-bezier(.32,.72,0,1) infinite; }

/* Reduced-motion: aktlar gizli kalır, kullanıcı sadece sade şablon home'unu görür.
   Şablon morph kendisi de DESIGN.md §6.6 gereği reduced-motion'da kısa fade'e
   düşer (.screen 0.25s linear), bu yapı ile uyumlu. */
@media (prefers-reduced-motion: reduce) {
  .screen.active .tpl-act-time,
  .screen.active .tpl-act-done { animation: none; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   RANDEVU SİTENİZ — 2 EKRANLI DURUM KARTI (.st-*)  ·  #tplStack
   ────────────────────────────────────────────────────────────────────────
   Bu bölüm ürünün ARAYÜZÜNÜ TAKLİT ETMEZ (kullanıcı kararı 2026-08-08).
   Denendi ve bilerek geri alındı: önce salon sayfası + 4 adımlı sihirbaz +
   dört şablonun galerisi (12 ekran), sonra sadeleştirilmiş 3 ekranlık
   simülasyon. İkisi de "ne anlatılıyor?" sorusunu doğurdu — ziyaretçi
   ekrandaki tasarımı okumaya çalışıyor, cümleyi kaçırıyordu.

   Bunun yerine DURUM KARTI: telefon ekranı bir bildirim panosu gibi
   davranır, olan biteni düz Türkçeyle söyler. İki ekran = iki cümle:

     0 · "Web siteniz yayına alındı"     → tam-randevu.com/salonunuz
     1 · "Sitenize randevu sistemi eklendi" → salonunuz.com

   Her kart aynı üç katmanı taşır: durum kartı (rozet + başlık + adres) →
   kurulum kontrol listesi → tek cümlelik kapanış. Anlatımın taşıyıcısı
   ADRES: birinde bizim verdiğimiz alan adı, diğerinde işletmenin kendi
   sitesi. Ekran ekleme; cümle eklemen gerekiyorsa yeri /ozellikler.

   RENK: burası ürün ekranı olmadığı için landing'in KENDİ token'larını
   kullanır (--bg, --bg-elev, --text…) ve koyu temada landing'le birlikte
   döner. Portal ekranı taklit eden mockup'lar (panel, müşteri paneli)
   bunun tersini yapar — onlar sabit aydınlık kalır.

   ÖLÇÜ: --u = --phone-w / 390 (px düşün, oran yaz).
   AD ALANI bilerek `.st-`: `.tpl-*` eski ailedir, iki yedek HTML kullanır.

   EKRAN KÖKÜ `.st-screen` — SAKIN `.st`'ye kısaltma. Bir dönem kısaydı ve
   kapsamsızdı; panel mockup'ının bekleyen-onay kartındaki personel satırı da
   `<div class="st">` yazıyordu (2026-06'dan beri). 2026-08-08'de bu blok
   eklenince o küçük satır `position:absolute; inset:0; background` alıp
   "Bugün" ekranının TAMAMINI yutan opak bir katmana dönüştü — mockup 13 gün
   boyunca bomboş göründü. Kapsamsız + jenerik ad = paylaşımlı stilde tuzak
   (bkz. tests/landing-mockup-paint.test.mjs nöbetçisi).
   ════════════════════════════════════════════════════════════════════════ */

.st-screen {
  --u: calc(var(--phone-w) / 390);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* Üç blok (durum kartı → kurulum listesi → kapanış) tek kompozisyon olarak
     dikeyde ortalanır: içerik ekranı doldurmadığı için alta yığılan boş bant
     "yarım ekran" gibi okunuyordu. */
  justify-content: center;
  gap: calc(16 * var(--u));
  padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .st-screen { background: #0c0c0e; }
.st-screen .statusbar { color: var(--text); }

/* ── Durum kartı ── */
.st-card {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
  box-shadow: 0 1px calc(2 * var(--u)) rgba(15, 15, 20, .05),
              inset 0 0 0 1px var(--hair-soft);
  display: flex; flex-direction: column;
  gap: calc(11 * var(--u));
}
.st-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(8 * var(--u));
}
.st-live {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .09em;
  color: #1f8a3d;
}
:root[data-theme="dark"] .st-live { color: #5fd17b; }
.st-live i {
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%; background: #34c759;
}
/* Tek hareket: yayında noktasının nabzı. */
@keyframes stLivePulse {
  0%, 100% { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(52, 199, 89, .26); }
  50%      { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(52, 199, 89, 0); }
}
.screen.active .st-live i { animation: stLivePulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .screen.active .st-live i { animation: none; }
}
.st-stamp {
  font-size: calc(10.5 * var(--u)); color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.st-card-t {
  font-weight: 800; letter-spacing: -.03em;
  font-size: calc(30 * var(--u)); line-height: 1.05;
  text-wrap: balance;
}

/* Adres satırı — bölümün en önemli tek parçası. */
.st-addr {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(13 * var(--u));
  color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}
.st-addr svg {
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  color: var(--accent); flex: 0 0 auto;
}
.st-addr b { color: var(--text); font-weight: 700; }

/* Tek satır kod — "sitenize yapıştırın" cümlesinin görünen hâli. */
.st-code {
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(9.5 * var(--u)); line-height: 1.5;
  color: var(--text-2);
  /* Tek satır kod TEK SATIR görünmeli: sarınca ">" tek başına alt satıra
     düşüyor ve "tek satır" iddiası görsel olarak çürüyor. */
  white-space: nowrap; overflow: hidden;
}
.st-code b { color: var(--accent); font-weight: 600; }

/* ── Kurulum kontrol listesi ── */
.st-sec-h {
  font-size: calc(10.5 * var(--u)); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
  padding-left: calc(4 * var(--u));
}
.st-steps {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow: 0 1px calc(2 * var(--u)) rgba(15, 15, 20, .05),
              inset 0 0 0 1px var(--hair-soft);
  padding: calc(2 * var(--u)) 0;
}
.st-step {
  position: relative;
  display: flex; align-items: center; gap: calc(11 * var(--u));
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: -.01em;
}
/* iOS ayar listesi hairline'ı — ikon sütunundan sonra başlar. */
.st-step + .st-step::before {
  content: ""; position: absolute; top: 0;
  left: calc(41 * var(--u)); right: 0; height: 1px;
  background: var(--hair-soft);
}
.st-step .ck {
  flex: 0 0 auto;
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 199, 89, .14); color: #1f8a3d;
}
:root[data-theme="dark"] .st-step .ck { color: #5fd17b; }
.st-step .ck svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.st-step .when {
  margin-left: auto; flex: 0 0 auto;
  font-size: calc(10.5 * var(--u)); font-weight: 500; color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Kapanış cümlesi ── */
.st-foot-line {
  margin-top: calc(2 * var(--u));
  font-size: calc(13.5 * var(--u)); line-height: 1.45;
  color: var(--text-2); text-align: center; text-wrap: balance;
  padding: 0 calc(6 * var(--u));
}
.st-foot-line b { color: var(--text); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   TARAYICI MOCKUP'I — "kendi sitende gömülü randevu" (#embed)
   Her şey --bw-w'ye oranlı (telefon mockup'ının --phone-w mantığı).
   İşletmenin KENDİ sitesi (nötr) + TAM randevu penceresi (accent).
   ════════════════════════════════════════════════════════════════ */
.browser { --bw-w: clamp(300px, 92vw, 560px); width: var(--bw-w); }
@media (min-width: 880px) { .showcase-media .browser { --bw-w: clamp(360px, 46vw, 560px); } }
.browser {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.bw-bar {
  display: flex; align-items: center; gap: calc(var(--bw-w) * 0.028);
  padding: calc(var(--bw-w) * 0.026) calc(var(--bw-w) * 0.034);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair-soft);
}
.bw-dots { display: flex; gap: calc(var(--bw-w) * 0.014); flex: none; }
.bw-dots i { width: calc(var(--bw-w) * 0.022); height: calc(var(--bw-w) * 0.022); border-radius: 50%; background: var(--surface-3); display: block; }
.bw-url {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: var(--bg-elev); border-radius: var(--r-pill);
  padding: calc(var(--bw-w) * 0.016) calc(var(--bw-w) * 0.032);
  font-size: calc(var(--bw-w) * 0.026); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}
.bw-url svg { width: calc(var(--bw-w) * 0.03); height: calc(var(--bw-w) * 0.03); color: var(--green); flex: none; }  /* kilit = güvenli, semantik */
.bw-canvas {
  position: relative; aspect-ratio: 4 / 3; background: var(--bg);
  padding: calc(var(--bw-w) * 0.042);
  display: flex; flex-direction: column; gap: calc(var(--bw-w) * 0.036);
  overflow: hidden;
}
.bw-nav { display: flex; align-items: center; justify-content: space-between; }
.bw-logo { width: calc(var(--bw-w) * 0.12); height: calc(var(--bw-w) * 0.04); border-radius: var(--r-pill); background: var(--surface-3); display: block; }
.bw-links { display: flex; gap: calc(var(--bw-w) * 0.028); }
.bw-links i { width: calc(var(--bw-w) * 0.058); height: calc(var(--bw-w) * 0.022); border-radius: var(--r-pill); background: var(--surface-2); display: block; }
.bw-hero { flex: 1; display: flex; flex-direction: column; gap: calc(var(--bw-w) * 0.03); min-height: 0; }
.bw-hero .scr-img { flex: 1; border-radius: var(--r-tile); min-height: calc(var(--bw-w) * 0.26); }
.bw-lines { display: flex; flex-direction: column; gap: calc(var(--bw-w) * 0.018); }
.bw-lines span { height: calc(var(--bw-w) * 0.022); border-radius: var(--r-pill); background: var(--surface-2); display: block; }
.bw-lines .l1 { width: 50%; height: calc(var(--bw-w) * 0.034); background: var(--surface-3); }
.bw-lines .l2 { width: 78%; }
.bw-lines .l3 { width: 62%; }

/* Yüzen "Randevu Al" butonu (embed.js) — sağ-alt köşe; popup tam üstünden
   açılır (gerçek popover davranışı + sayfa canlı-bildirim toast'ıyla çakışmaz) */
.embed-fab {
  position: absolute; right: calc(var(--bw-w) * 0.042); bottom: calc(var(--bw-w) * 0.042);
  background: var(--accent); color: var(--text-on-accent);
  font-size: calc(var(--bw-w) * 0.028); font-weight: 600; letter-spacing: -0.01em;
  padding: calc(var(--bw-w) * 0.024) calc(var(--bw-w) * 0.042);
  border-radius: var(--r-pill);
  box-shadow: 0 calc(var(--bw-w) * 0.018) calc(var(--bw-w) * 0.045) rgba(10,132,255,.34);
}

/* TAM randevu penceresi — sitenin içinde açık (gömülü widget); butonun üstünde */
.embed-pop {
  --phone-w: calc(var(--bw-w) * 0.64);   /* .slot phone-w ölçeğini besle */
  position: absolute; right: calc(var(--bw-w) * 0.042); bottom: calc(var(--bw-w) * 0.155);
  width: calc(var(--bw-w) * 0.48);
  background: var(--bg-elev); border-radius: var(--r-tile);
  box-shadow: var(--sh-lg); border: 1px solid var(--hair);
  padding: calc(var(--bw-w) * 0.032);
  display: flex; flex-direction: column; gap: calc(var(--bw-w) * 0.02);
}
.ep-head { display: flex; align-items: center; justify-content: space-between; }
.ep-title { font-weight: 700; font-size: calc(var(--bw-w) * 0.032); letter-spacing: -0.015em; }
.ep-x { color: var(--text-3); display: flex; }
.ep-x svg { width: calc(var(--bw-w) * 0.028); height: calc(var(--bw-w) * 0.028); display: block; }
.ep-step { font-size: calc(var(--bw-w) * 0.023); color: var(--accent); font-weight: 600; }
.ep-svc {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--bw-w) * 0.022) calc(var(--bw-w) * 0.028);
  border-radius: 10px; background: var(--surface-2);
  font-size: calc(var(--bw-w) * 0.027); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}
.ep-svc.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ep-meta { font-size: calc(var(--bw-w) * 0.022); color: var(--text-2); font-weight: 500; }
.ep-svc.sel .ep-meta { color: var(--accent); }
.ep-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--bw-w) * 0.018); }
.embed-pop .slot { font-size: calc(var(--bw-w) * 0.024); padding: calc(var(--bw-w) * 0.016) 0; }
.ep-cta {
  margin-top: calc(var(--bw-w) * 0.006); text-align: center;
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 600; font-size: calc(var(--bw-w) * 0.028);
  padding: calc(var(--bw-w) * 0.026) 0; border-radius: var(--r-pill);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SAHNESİ — 3B dönen telefon: "panelden oluştur → gününe düşer"
   ────────────────────────────────────────────────────────────────────────
   YÜZ A: Yeni Randevu sihirbazı "Saat" adımı (.na-*) — panelin gerçek
          ekranından demo modda ölçülerek çıkarıldı.
   YÜZ B: panelin "Bugün" ekranı — showcase bölümüyle AYNI .pnl-* sınıfları.
          Hero ile alt bölümler tek ürün görünümü konuşsun diye kasten ortak.

   ── HAREKET KURGUSU (kaliteyi belirleyen şey teknik değil, bu) ──────────
   1. ANTICIPATION: dönüşten önce ters yöne ~7° yaslanma. Düz 0→180 ucuz durur.
   2. Z BAĞLAŞIMI: dönerken uzaklaşır (translateZ) — gerçek nesne düzlemde dönmez.
   3. GÖLGE BAĞLAŞIMI: silüet daraldıkça yer gölgesi hem daralır hem soluklaşır.
      Fizik hissini asıl satan detay budur.
   4. SEGMENT BAŞINA EASING: yaslanma yumuşak, ana dönüş sert, oturma yumuşak
      + 186°'ye küçük aşma (spring hissi, elastik değil).
   5. SPECULAR: cam kenara döndüğü an ışığı yakalar (.hs-glare).
   6. FOLLOW-THROUGH: iniş sonrası panel kartları ~50ms gecikmelerle oturur.
   7. Mavi darbe X'te doğrusal, Y'de yay çizer; yayın TEPESİ telefonun kenara
      döndüğü ana denk gelir (senkron kasıtlı).

   Tüm hareket transform/opacity. JS yok → app.js çökse de çalışır, jank yok.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 3B sahne ── */
.hs-scene {
  position: relative;
  width: var(--hs-w);
  perspective: calc(var(--hs-w) * 4.6);
  -webkit-perspective: calc(var(--hs-w) * 4.6);
  perspective-origin: 50% 44%;
  -webkit-perspective-origin: 50% 44%;
}
.hs-depth {
  /* Z / ölçek / eğilme burada; DÖNÜŞ .hs-flip'te. Ayrı elemanlar → her biri
     kendi doğal eğrisinde. Tek transform'a sıkışınca ikisi aynı easing'i
     paylaşmak zorunda kalıyor ve dönüş sertleşiyordu. */
  position: relative; width: 100%; aspect-ratio: 9 / 19.5;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.hs-flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* will-change: transform YOK — bilinçli. Çalışan transform animasyonu zaten
     compositing katmanı doğuruyor; will-change ek olarak katmanın raster
     ölçeğini KİLİTLER ve retina ekranda metni bulanıklaştırır. */
}
.hs-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --phone-w: var(--hs-w);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* ⚠️ Yüzleri gövde kalınlığına yaymak için Z'de İTME. Denendi ve GERİ ALINDI:
     perspektif, z>0 olan yüzü P/(P−z) kadar büyütür (ölçüldü: 324px → 327.38px,
     yani kalıcı 1.0104×). Metin o zaman hiçbir zaman piksele oturmaz, sürekli
     yeniden örneklenir → tüm sahne bulanık görünür. Yüzler perspektifin SIFIR
     düzleminde kalmalı: 0° ve 180° birebir 1:1 eşlenir, metin cam gibi olur.
     Kalınlık hissi zaten .hs-edge ile veriliyor (o da yalnız ~90°'de görünür). */
  transform: none;
}
.hs-face-b { transform: rotateY(180deg); }

/* Gövde kalınlığı (≈%9.5 — gerçek telefon oranı). Telefon tam 90°'ye gelince
   sıfır kalınlıklı düzlemler yok olur; bu plaka o an KENAR olarak görünür.
   Ucuz flip'lerle pahalı olanı ayıran detay budur. backface-visibility
   AÇIK bırakılır: hem 90° hem 270°'de görünmesi gerekiyor. */
.hs-edge {
  position: absolute; top: 1%; bottom: 1%; left: 50%;
  width: calc(var(--hs-w) * 0.095);
  margin-left: calc(var(--hs-w) * -0.0475);
  transform: rotateY(90deg);
  border-radius: calc(var(--hs-w) * 0.022);
  background: linear-gradient(90deg, #0e0e10 0%, #303036 26%, #4a4a52 50%, #303036 74%, #0e0e10 100%);
  opacity: 0;   /* yalnız kenar anında açılır — bkz. hsEdge */
}

/* yer gölgesi — dönüşle birlikte daralır/soluklaşır (fizik) */
.hs-ground {
  position: absolute; z-index: 0; pointer-events: none;
  left: 9%; right: 9%; bottom: -3.2%; height: 5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,15,20,.38), transparent 74%);
  filter: blur(13px);
  opacity: .3;
}
:root[data-theme="dark"] .hs-ground { background: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 74%); }

/* cam parlaması — yüz kenara döndüğü an */
.hs-glare {
  position: absolute; inset: -12% -45%; z-index: 34; pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
}

/* ══════════════ YÜZ A · Yeni Randevu → Saat ══════════════
   Ölçüler panelin gerçek ekranından (402pt) --phone-w oranına çevrildi. */
.na-scr { position: relative; }
.na-scr::before {           /* sheet'in altındaki sayfanın karartması */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,.3);
}
.na-sheet {
  position: absolute; z-index: 2;
  left: 0; right: 0; top: calc(var(--phone-w) * 0.12); bottom: 0;
  background: var(--bg); color: var(--text);
  border-radius: calc(var(--phone-w) * 0.045) calc(var(--phone-w) * 0.045) 0 0;
  display: flex; flex-direction: column;
  text-align: left;
  overflow: hidden;
}
:root[data-theme="dark"] .na-sheet { background: #1c1c1e; }
.na-grab {
  width: calc(var(--phone-w) * 0.09); height: calc(var(--phone-w) * 0.013);
  border-radius: 999px; background: var(--surface-3);
  margin: calc(var(--phone-w) * 0.018) auto 0;
}
.na-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--phone-w) * 0.028) calc(var(--phone-w) * 0.045);
  border-bottom: 1px solid var(--hair-soft);
}
.na-cancel { font-size: calc(var(--phone-w) * 0.037); font-weight: 500; color: var(--accent); }
.na-ttl { font-size: calc(var(--phone-w) * 0.042); font-weight: 600; letter-spacing: -0.012em; }
.na-prog { display: flex; gap: calc(var(--phone-w) * 0.011); padding: calc(var(--phone-w) * 0.035) calc(var(--phone-w) * 0.055) 0; }
.na-prog i { flex: 1; height: calc(var(--phone-w) * 0.009); border-radius: 999px; background: var(--surface-2); }
.na-prog i.on { background: var(--accent); }
.na-steph {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: calc(var(--phone-w) * 0.032) calc(var(--phone-w) * 0.055) 0;
}
.na-sl .k {
  display: block; font-size: calc(var(--phone-w) * 0.028); font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;
}
.na-sl .t {
  display: block; font-size: calc(var(--phone-w) * 0.058); font-weight: 700;
  letter-spacing: -0.028em; margin-top: 2px;
}
.na-close { font-size: calc(var(--phone-w) * 0.036); font-weight: 500; color: var(--text-2); }

.na-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 calc(var(--phone-w) * 0.04); }
.na-hint {
  font-size: calc(var(--phone-w) * 0.036); color: var(--text-2);
  padding: calc(var(--phone-w) * 0.03) calc(var(--phone-w) * 0.015) 0;
}
.na-gl {
  font-size: calc(var(--phone-w) * 0.028); font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-left: calc(var(--phone-w) * 0.015);
  margin: calc(var(--phone-w) * 0.032) 0 calc(var(--phone-w) * 0.018);
}
.na-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--phone-w) * 0.02);
}
.na-slot {
  position: relative;
  background: var(--bg-elev); color: var(--text);
  border-radius: calc(var(--phone-w) * 0.036);
  padding: calc(var(--phone-w) * 0.032) 0;
  text-align: center; font-size: calc(var(--phone-w) * 0.038); font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-sm);
}
/* seçilen saat: dolgu + üst üste iki etiket (renk geçişi yerine opacity) */
.na-fill { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--accent); }
.na-pick b { position: relative; z-index: 2; display: block; font-weight: inherit; }
.na-pick .na-lbl-a { opacity: 0; }
.na-pick .na-lbl-b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.na-tap {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: calc(var(--phone-w) * 0.3); height: calc(var(--phone-w) * 0.3);
  margin: calc(var(--phone-w) * -0.15) 0 0 calc(var(--phone-w) * -0.15);
  border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--accent);
  opacity: 0; pointer-events: none;
}

.na-foot {
  flex: none; display: flex; align-items: center; gap: calc(var(--phone-w) * 0.028);
  padding: calc(var(--phone-w) * 0.032) calc(var(--phone-w) * 0.04) calc(var(--phone-w) * 0.07);
  border-top: 1px solid var(--hair-soft);
}
.na-back, .na-next {
  border-radius: 999px; text-align: center;
  font-size: calc(var(--phone-w) * 0.042); font-weight: 600;
  padding: calc(var(--phone-w) * 0.036) 0;
}
.na-back { min-width: calc(var(--phone-w) * 0.22); background: var(--surface-2); color: var(--text); }
.na-next {
  flex: 1; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--phone-w) * 0.012);
}
.na-next svg { width: calc(var(--phone-w) * 0.05); height: calc(var(--phone-w) * 0.05); }

/* ══════════════ YÜZ B · sayaç 11→12 ══════════════ */
/* Hero'daki panel yüzü showcase'ten dar; selamlama alt satırı tek satırda
   kalsın diye YALNIZ burada bir tık küçültülür — aksi halde sarıp sağdaki
   zil/avatar'ı ekran dışına itiyor (koyu temada yakalandı). */
.hs-face-b .pnl-greet .sub { font-size: calc(var(--phone-w) * 0.034); white-space: nowrap; }
.hs-roll { display: inline-block; height: 1.05em; overflow: hidden; vertical-align: -0.16em; }
.hs-roll i { display: block; transform: translateY(-50%); }
.hs-roll b { display: block; height: 1.05em; line-height: 1.05em; font-weight: 600; }
/* yeni düşen randevu kartı — accent çerçeve, gerçek panelde de böyle vurgulanır */
.pnl-flow .fc.hs-fresh { box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-md); }

/* ══════════════ RANDEVUNUN KENDİSİ (mavi darbe) ══════════════ */
.hs-dot {
  position: absolute; z-index: 6; pointer-events: none; opacity: 0;
  left: calc(var(--hs-w) * 0.390);        /* yüz A'daki 14:30 slotunun merkezi */
  top:  calc(var(--hs-w) * 1.190);        /* (tarayıcıya ölçtürüldü, _measure) */
}
.hs-dot i {
  display: block;
  width: calc(var(--hs-w) * 0.05); height: calc(var(--hs-w) * 0.05);
  margin: calc(var(--hs-w) * -0.025) 0 0 calc(var(--hs-w) * -0.025);
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 calc(var(--hs-w) * 0.026) var(--accent-soft);
}
.hs-land {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  left: var(--hs-lx);                     /* yüz B'deki yeni kartın merkezi */
  top:  calc(var(--hs-w) * 1.669);        /* (tarayıcıya ölçtürüldü, _measure) */
  width: calc(var(--hs-w) * 0.09); height: calc(var(--hs-w) * 0.09);
  margin: calc(var(--hs-w) * -0.045) 0 0 calc(var(--hs-w) * -0.045);
  border-radius: 50%; box-shadow: 0 0 0 2px var(--accent);
}

/* ══════════════ FAZ ETİKETLERİ ══════════════ */
/* İki etiket aynı grid hücresinde yığılır → kapsayıcı en uzun etiket kadar
   yükselir, sabit height gerekmez (dar ekranda metin sarınca kırpılmasın). */
.hs-caps { display: grid; margin-top: clamp(16px, 2.6vw, 26px); width: 100%; }
.hs-cap {
  grid-area: 1 / 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-align: center; text-wrap: balance;
  font-size: clamp(12.5px, 1.05vw, 15px); font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-2);
}
.hs-cap i {
  flex: none; font-style: normal;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.hs-cap b { font-weight: 600; }
.hs-cap-b { opacity: 0; }

/* ════════════════════════════════════════════════════════════════════════
   ZAMAN ÇİZELGESİ — tek --hs-beat (18sn)

   ── DÖNÜŞ NEDEN ARTIK YUMUŞAK? ──────────────────────────────────────────
   Önceki kurguda dönüş 5 ayrı keyframe'e bölünmüştü ve her parçanın kendi
   cubic-bezier'i vardı. Bezier'ler uçlarda hızı sıfıra çektiği için her ek
   noktada telefon duruyor ve yeniden hızlanıyordu (velocity discontinuity)
   — "sert" hissin kaynağı buydu.

   Artık TÜM jest TEK easing eğrisi: `linear()` içine gerçek bir SÖNÜMLÜ YAY
   simülasyonu (ζ=0.80, ωn=7.4) örneklendi. İki incelik:
   · `linear()` PARÇALI DOĞRUSALDIR → her kontrol noktasında hız kademe atlar.
     Noktalar düz değil HIZ EKSENİNDE EŞİT aralıklarla dağıtıldı: 89 noktayla
     %4.8 hız adımı (düz 221 noktayla %8.8 idi) — hem daha pürüzsüz hem küçük.
   · Yayın t=1'deki 0.78°'lik artığı zorla 1'e ÇAKILMAZ (o bir hız sıçraması,
     yani jestin sonunda "tık" demektir); smoothstep penceresiyle eritilir. eğrinin başındaki negatif kısım
   anticipation'ı (−8°), sonundaki küçük aşma (+2.9°) follow-through'u taşır.
   Ara keyframe yok → kink yok. Bezier bunu YAPAMAZ: kübik olduğu için kendi
   üzerine kıvrılamaz, aşma üretemez. `linear()` desteklenmezse üstteki
   cubic-bezier fallback devreye girer (progressive enhancement).

   Jest 1.4sn → 2.97sn'ye uzatıldı. Ayrıca Z/ölçek/eğilme DÖNÜŞTEN AYRILDI
   (.hs-depth): ikisi tek transform'a sıkışınca aynı easing'i paylaşmak
   zorunda kalıyordu; artık her biri kendi doğal eğrisinde.

   ── AKIŞ ────────────────────────────────────────────────────────────────
     0–6      duruş: Saat adımı, seçim yok, "Devam" pasif
     5.5–9    14:30'a dokunulur → dolgu oturur, "Devam" etkinleşir
     14–17    "Devam" basılır
     17–20    randevu darbesi ekrandan çıkar
     20–36.5  DÖNÜŞ 0°→180° (tek yay eğrisi, 2.97sn)
                · 25.56 → 90° (kenar anı; darbe tam burada yayın tepesinde)
                · 30.44 → 180°'ye ilk varış, sonra 2.9° aşıp oturur
     26–33    yüz B kartları ≈60ms gecikmelerle oturur (follow-through)
     31–40    darbe iner, dalga halkası, yeni kart kayar, sayaç 11→12
     36.5–74  DURUŞ ≈6.75sn — panel rahat okunur
     74–90.5  DÖNÜŞ 180°→360° (aynı eğri) · 79.56 → 270°
     90.5–100 duruş: yüz A yeniden hazır
   Yüz A görünür: 0–25.56 ve 79.56–100 → sıfırlamalarını 55–60'ta yapar.
   Yüz B görünür: 25.56–79.56 → sıfırlamalarını 82–86'da yapar.
   ════════════════════════════════════════════════════════════════════════ */

/* ζ=0.80 · ωn=7.4 sönümlü yay + anticipation, 72 noktada örneklendi */
@keyframes hsFlip {
  0%, 20% {
    transform: rotateY(0deg);
    animation-timing-function: cubic-bezier(.42,0,.2,1);   /* fallback */
    animation-timing-function: linear(-0.0000 0.00%, -0.0005 1.03%, -0.0019 2.09%, -0.0045 3.26%, -0.0089 4.70%, -0.0209 7.64%, -0.0359 11.25%, -0.0404 12.69%, -0.0431 13.88%, -0.0445 14.94%, -0.0450 15.96%, -0.0448 16.21%, -0.0442 16.44%, -0.0432 16.68%, -0.0418 16.91%, -0.0397 17.18%, -0.0372 17.44%, -0.0340 17.71%, -0.0302 18.00%, -0.0258 18.30%, -0.0205 18.61%, -0.0145 18.94%, -0.0072 19.30%, 0.0010 19.68%, 0.0057 19.88%, 0.0105 20.08%, 0.0158 20.29%, 0.0217 20.51%, 0.0281 20.75%, 0.0346 20.99%, 0.0421 21.25%, 0.0499 21.51%, 0.0590 21.81%, 0.0684 22.11%, 0.0792 22.45%, 0.0907 22.80%, 0.1043 23.20%, 0.1199 23.65%, 0.1378 24.15%, 0.1601 24.76%, 0.1891 25.54%, 0.2375 26.80%, 0.3707 30.23%, 0.4206 31.54%, 0.4573 32.52%, 0.4886 33.39%, 0.5165 34.17%, 0.5415 34.90%, 0.5646 35.59%, 0.5867 36.26%, 0.6070 36.90%, 0.6267 37.54%, 0.6456 38.16%, 0.6634 38.77%, 0.6804 39.38%, 0.6973 39.99%, 0.7132 40.59%, 0.7289 41.20%, 0.7438 41.80%, 0.7585 42.41%, 0.7726 43.03%, 0.7864 43.65%, 0.8000 44.29%, 0.8130 44.92%, 0.8257 45.57%, 0.8381 46.24%, 0.8503 46.92%, 0.8621 47.62%, 0.8735 48.34%, 0.8846 49.08%, 0.8955 49.84%, 0.9060 50.62%, 0.9161 51.44%, 0.9261 52.30%, 0.9356 53.19%, 0.9448 54.12%, 0.9538 55.12%, 0.9624 56.19%, 0.9706 57.34%, 0.9784 58.58%, 0.9858 59.94%, 0.9927 61.46%, 0.9990 63.20%, 1.0047 65.24%, 1.0094 67.75%, 1.0128 71.16%, 1.0133 77.03%, 1.0000 99.99%, 1.0000 100.00%);
  }
  36.5%, 74% {
    transform: rotateY(180deg);
    animation-timing-function: cubic-bezier(.42,0,.2,1);
    animation-timing-function: linear(-0.0000 0.00%, -0.0005 1.03%, -0.0019 2.09%, -0.0045 3.26%, -0.0089 4.70%, -0.0209 7.64%, -0.0359 11.25%, -0.0404 12.69%, -0.0431 13.88%, -0.0445 14.94%, -0.0450 15.96%, -0.0448 16.21%, -0.0442 16.44%, -0.0432 16.68%, -0.0418 16.91%, -0.0397 17.18%, -0.0372 17.44%, -0.0340 17.71%, -0.0302 18.00%, -0.0258 18.30%, -0.0205 18.61%, -0.0145 18.94%, -0.0072 19.30%, 0.0010 19.68%, 0.0057 19.88%, 0.0105 20.08%, 0.0158 20.29%, 0.0217 20.51%, 0.0281 20.75%, 0.0346 20.99%, 0.0421 21.25%, 0.0499 21.51%, 0.0590 21.81%, 0.0684 22.11%, 0.0792 22.45%, 0.0907 22.80%, 0.1043 23.20%, 0.1199 23.65%, 0.1378 24.15%, 0.1601 24.76%, 0.1891 25.54%, 0.2375 26.80%, 0.3707 30.23%, 0.4206 31.54%, 0.4573 32.52%, 0.4886 33.39%, 0.5165 34.17%, 0.5415 34.90%, 0.5646 35.59%, 0.5867 36.26%, 0.6070 36.90%, 0.6267 37.54%, 0.6456 38.16%, 0.6634 38.77%, 0.6804 39.38%, 0.6973 39.99%, 0.7132 40.59%, 0.7289 41.20%, 0.7438 41.80%, 0.7585 42.41%, 0.7726 43.03%, 0.7864 43.65%, 0.8000 44.29%, 0.8130 44.92%, 0.8257 45.57%, 0.8381 46.24%, 0.8503 46.92%, 0.8621 47.62%, 0.8735 48.34%, 0.8846 49.08%, 0.8955 49.84%, 0.9060 50.62%, 0.9161 51.44%, 0.9261 52.30%, 0.9356 53.19%, 0.9448 54.12%, 0.9538 55.12%, 0.9624 56.19%, 0.9706 57.34%, 0.9784 58.58%, 0.9858 59.94%, 0.9927 61.46%, 0.9990 63.20%, 1.0047 65.24%, 1.0094 67.75%, 1.0128 71.16%, 1.0133 77.03%, 1.0000 99.99%, 1.0000 100.00%);
  }
  90.5%, 100% { transform: rotateY(360deg); }
}

/* Derinlik: dönüşten AYRI eleman. Kenar anında uzaklaşır + hafifçe eğilir
   (elde tutuluyormuş hissi), sonra yumuşakça yerine oturur. */
@keyframes hsDepth {
  0%, 20%     { transform: none; animation-timing-function: cubic-bezier(.38,0,.34,1); }
  25.56%      { transform: translateZ(calc(var(--hs-w) * -0.28)) scale(.952) rotateX(-2deg); animation-timing-function: cubic-bezier(.3,0,.28,1); }
  33%         { transform: translateZ(calc(var(--hs-w) * -0.045)) scale(.995) rotateX(-0.3deg); animation-timing-function: cubic-bezier(.25,.9,.3,1); }
  36.5%, 74%  { transform: none; animation-timing-function: cubic-bezier(.38,0,.34,1); }
  79.56%      { transform: translateZ(calc(var(--hs-w) * -0.28)) scale(.952) rotateX(-2deg); animation-timing-function: cubic-bezier(.3,0,.28,1); }
  87%         { transform: translateZ(calc(var(--hs-w) * -0.045)) scale(.995) rotateX(-0.3deg); animation-timing-function: cubic-bezier(.25,.9,.3,1); }
  90.5%, 100% { transform: none; }
}
/* gölge: silüet daraldıkça hem daralır hem soluklaşır (fizik) */
@keyframes hsGround {
  0%, 20%     { opacity: .3;  transform: none; animation-timing-function: cubic-bezier(.38,0,.34,1); }
  25.56%      { opacity: .07; transform: scaleX(.28) scaleY(.66); animation-timing-function: cubic-bezier(.3,0,.28,1); }
  36.5%, 74%  { opacity: .3;  transform: none; animation-timing-function: cubic-bezier(.38,0,.34,1); }
  79.56%      { opacity: .07; transform: scaleX(.28) scaleY(.66); animation-timing-function: cubic-bezier(.3,0,.28,1); }
  90.5%, 100% { opacity: .3;  transform: none; }
}
/* cam parlaması: yüz kenara döndüğü iki anda */
@keyframes hsGlare {
  0%, 22%     { opacity: 0;   transform: translateX(-70%); }
  25%         { opacity: .38; }
  29%         { opacity: 0;   transform: translateX(70%); }
  29.01%, 76% { opacity: 0;   transform: translateX(-70%); }
  79%         { opacity: .38; }
  83%, 100%   { opacity: 0;   transform: translateX(70%); }
}
/* Kenar plakası yalnız telefon ~90°/270°'ye geldiği dar pencerede görünür.
   CSS 3B düzlem kesişimi yapmadığı için, aksi halde ön yüzün ÜSTÜNE boydan
   boya siyah bir çizgi olarak biner (kontakt sayfasında yakalandı). */
@keyframes hsEdge {
  0%, 24.6%    { opacity: 0; }
  25.1%, 26.0% { opacity: 1; }
  26.5%, 78.6% { opacity: 0; }
  79.1%, 80.0% { opacity: 1; }
  80.5%, 100%  { opacity: 0; }
}

/* — yüz A: saat seçimi — */
@keyframes naTap  { 0%,5.5% { opacity: 0; transform: scale(.3); } 7.5% { opacity: .5; } 13%,100% { opacity: 0; transform: scale(1.7); } }
@keyframes naFill { 0%,5.5% { opacity: 0; transform: scale(.7); } 9%,55% { opacity: 1; transform: scale(1); } 60%,100% { opacity: 0; transform: scale(.7); } }
@keyframes naLblA { 0%,5.5% { opacity: 1; } 8%,56% { opacity: 0; } 60%,100% { opacity: 1; } }
@keyframes naLblB { 0%,5.5% { opacity: 0; } 9%,55% { opacity: 1; } 60%,100% { opacity: 0; } }
@keyframes naNext {
  0%,8%    { opacity: .45; transform: scale(1); }
  12%      { opacity: 1;   transform: scale(1); }
  15.5%    { opacity: 1;   transform: scale(.962); }
  18%,55%  { opacity: 1;   transform: scale(1); }
  60%,100% { opacity: .45; transform: scale(1); }
}

/* — randevunun kendisi: X doğrusal, Y yay; tepe 25.56% = telefonun kenar anı — */
@keyframes hsDotX {
  0%, 17%   { opacity: 0; transform: translateX(0); }
  20%       { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  31%       { opacity: 1; transform: translateX(var(--hs-dx)); }
  34%, 100% { opacity: 0; transform: translateX(var(--hs-dx)); }
}
@keyframes hsDotY {
  0%, 18%   { transform: translateY(0) scale(.25); animation-timing-function: cubic-bezier(.1,.86,.3,1); }
  21.5%     { transform: translateY(calc(var(--hs-w) * -0.32)) scale(1.14); }
  25.56%    { transform: translateY(calc(var(--hs-w) * -0.62)) scale(1); animation-timing-function: cubic-bezier(.5,0,.7,.45); }
  31%       { transform: translateY(calc(var(--hs-w) * 0.479)) scale(.82); }
  34%, 100% { transform: translateY(calc(var(--hs-w) * 0.479)) scale(.25); }
}
@keyframes hsLand { 0%,30% { opacity: 0; transform: scale(.3); } 33.5% { opacity: .8; transform: scale(1); } 41%,100% { opacity: 0; transform: scale(2.7); } }

/* — yüz B: follow-through (≈60ms gecikmeli oturma) + yeni kart + sayaç — */
@keyframes hsSt1 { 0%,26%   { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } 31.5%,80% { opacity: 1; transform: none; } 84%,100% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } }
@keyframes hsSt2 { 0%,26.4% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } 31.9%,80% { opacity: 1; transform: none; } 84%,100% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } }
@keyframes hsSt3 { 0%,26.8% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } 32.3%,80% { opacity: 1; transform: none; } 84%,100% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } }
@keyframes hsSt4 { 0%,27.2% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } 32.7%,80% { opacity: 1; transform: none; } 84%,100% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } }
@keyframes hsSt5 { 0%,27.6% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } 33.1%,80% { opacity: 1; transform: none; } 84%,100% { opacity: 0; transform: translateY(calc(var(--phone-w) * 0.028)); } }
@keyframes hsFreshIn {
  0%, 30%   { opacity: 0; transform: translateX(calc(var(--phone-w) * 0.16)) scale(.96); }
  37%, 80%  { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translateX(calc(var(--phone-w) * 0.16)) scale(.96); }
}
@keyframes hsRoll { 0%,32% { transform: translateY(0); } 38%,80% { transform: translateY(-50%); } 84%,100% { transform: translateY(0); } }

/* — faz etiketleri — */
@keyframes hsCapA { 0%,21% { opacity: 1; transform: none; } 23.5%,84% { opacity: 0; transform: translateY(-7px); } 88%,100% { opacity: 1; transform: none; } }
@keyframes hsCapB { 0%,27% { opacity: 0; transform: translateY(7px); } 31%,72% { opacity: 1; transform: none; } 75%,100% { opacity: 0; transform: translateY(7px); } }

.hs-flip            { animation: hsFlip   var(--hs-beat) linear infinite; }
.hs-depth           { animation: hsDepth  var(--hs-beat) linear infinite; }
.hs-ground          { animation: hsGround var(--hs-beat) linear infinite; }
.hs-edge            { animation: hsEdge   var(--hs-beat) linear infinite; }
.hs-glare           { animation: hsGlare  var(--hs-beat) linear infinite; }
.na-tap             { animation: naTap    var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
.na-fill            { animation: naFill   var(--hs-beat) cubic-bezier(.32,.72,0,1) infinite; }
.na-pick .na-lbl-a  { animation: naLblA   var(--hs-beat) linear infinite; }
.na-pick .na-lbl-b  { animation: naLblB   var(--hs-beat) linear infinite; }
.na-next            { animation: naNext   var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
.hs-dot             { animation: hsDotX   var(--hs-beat) linear infinite; }
.hs-dot i           { animation: hsDotY   var(--hs-beat) linear infinite; }
.hs-land            { animation: hsLand   var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
.hs-face-b .hs-st1  { animation: hsSt1 var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.hs-face-b .hs-st2  { animation: hsSt2 var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.hs-face-b .hs-st3  { animation: hsSt3 var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.hs-face-b .hs-st4  { animation: hsSt4 var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.hs-face-b .hs-st5  { animation: hsSt5 var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.pnl-flow .fc.hs-fresh { animation: hsFreshIn var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
.hs-roll i          { animation: hsRoll  var(--hs-beat) cubic-bezier(.32,.72,0,1) infinite; }
.hs-cap-a           { animation: hsCapA  var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
.hs-cap-b           { animation: hsCapB  var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }

/* ── EKRAN DIŞINDA DURAKLAT ─────────────────────────────────────────────
   Sahne ~15 sonsuz animasyon çalıştırır. Ziyaretçi sayfanın altına indiğinde
   bunlar görünmediği hâlde compositor'ı meşgul etmeye devam eder; orta sınıf
   bir Android'de bu doğrudan pil ve termal bütçesidir. app.js sahne
   viewport'tan çıkınca `.hs-idle` basar, girince kaldırır.

   FAIL-SAFE: duraklatmayı YALNIZ JS ekler. app.js hiç çalışmazsa sınıf hiç
   basılmaz, animasyon eskisi gibi döner — yani bu bir iyileştirme katmanıdır,
   bağımlılık değil (DESIGN.md §6.1 "JS yok" ilkesiyle uyumlu).
   Duraklatılan animasyon KALDIĞI yerden devam eder; geri dönüşte sıfırdan
   başlatılmaz — tekrar tekrar girip çıkan kullanıcıda seğirme olmasın diye.

   ⚠️ KURALIN KENDİSİ DOSYANIN EN SONUNDA (bkz. "DURAKLATMA KAPISI").
   Burada duramaz: mobil media bloğu aynı seçicilere `animation:` KISAYOLUNU
   yeniden atıyor ve kısayol `animation-play-state`i `running`e sıfırlıyor. */

/* ── Reduced motion ────────────────────────────────────────────────────
   Dönüş durur, YÜZ A okunur hâlde kalır (saat seçili, "Devam" etkin),
   iki etiket birden alt alta görünür → hikâye yazıyla anlaşılır.
   base.css'teki genel kural da animasyonları durdurur; niyeti burada
   açıkça yazıyoruz ki ileride yanlışlıkla bozulmasın. */
@media (prefers-reduced-motion: reduce) {
  .hs-flip, .hs-depth, .hs-ground, .hs-glare, .hs-edge, .na-tap, .na-fill, .na-pick .na-lbl-a,
  .na-pick .na-lbl-b, .na-next, .hs-dot, .hs-dot i, .hs-land,
  .hs-face-b .hs-st1, .hs-face-b .hs-st2, .hs-face-b .hs-st3,
  .hs-face-b .hs-st4, .hs-face-b .hs-st5, .pnl-flow .fc.hs-fresh,
  .hs-roll i, .hs-cap-a, .hs-cap-b { animation: none; }
  .hs-flip, .hs-depth { transform: none; }
  .hs-dot, .hs-land, .hs-glare, .hs-edge { display: none; }
  .na-fill { opacity: 1; transform: none; }
  .na-pick .na-lbl-a { opacity: 0; }
  .na-pick .na-lbl-b { opacity: 1; }
  .na-next { opacity: 1; }
  .hs-caps { height: auto; display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .hs-cap { position: static; opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   DOKUNMATİK CİHAZLAR — 3B YOK; hikâye iOS SHEET DİLİNDE anlatılır
   ────────────────────────────────────────────────────────────────────────
   ── Neden 3B kapalı (bunu geri açma) ───────────────────────────────────
   `transform-style: preserve-3d` + `backface-visibility` mobil tarayıcıların
   (özellikle iOS Safari) en kırılgan CSS yüzeyi. Sahada iki belirti görüldü:
   telefon yerine BOŞ GRİ katman (3B katman ilk karede boş raster'lanıyor) ve
   dönüş sırasında telefonun ORTADAN İKİ BÖLÜNMESİ (eş düzlemli yüzlerin
   sıralanamaması). Masaüstünde ikisi de yok. Ölçüt olarak genişlik DEĞİL
   `pointer: coarse` de kullanılır: iPad de aynı motoru çalıştırır.

   ── Neden yatay push/pop DEĞİL (2026-08 revizyonu) ──────────────────────
   Önceki mobil yol yüz A'yı ve yüz B'yi YATAY KAYDIRIYORDU. Üç kusuru vardı:
   1. TELEFONUN KENDİSİ kayıyordu (`.hs-face` = kasa + ada + yan tuş). Gerçek
      hiçbir arayüzde cihaz hareket etmez; ekranın İÇİ hareket eder. "Bir
      resim kaydı" gibi okunuyordu — ucuzluğun asıl kaynağı buydu.
   2. `scale(.968)` canlı metnin üstünde çalışıyordu. Masaüstü yolunda yüzleri
      1:1 tutmak için sayfalarca not var (perspektifte 1.0104× bile kabul
      edilmedi); mobilde aynı kural sessizce çiğneniyordu → sürekli yeniden
      örnekleme, bulanık ekran.
   3. Yüz A aslında bir BOTTOM SHEET (`.na-sheet`: tutamaç, "İptal", "Kapat").
      Bir sheet'in kapanışı yatay değil DİKEYDİR. Yanlış jest, yanlış anlam.

   Şimdiki kurgu doğru jesti kullanır: telefon hiç kıpırdamaz, **sheet aşağı
   düşerek kapanır** ve altındaki "Bugün" ekranı ortaya çıkar. Bu, iOS'un en
   tanıdık ve en güvenilir hareketidir; üstelik anlatıyı da düzeltir:
   "saati sheet'te seçtin → günün akışına düştü".

   ── Katman kurgusu ──────────────────────────────────────────────────────
   Yüz A ve yüz B üst üste duran iki TAM telefondur. Mobilde yalnız yüz B
   telefon olarak boyanır; yüz A kabuğunu tamamen bırakır ve sadece iki şey
   katkı verir: karartma (`.na-scr::before`) + sheet'in kendisi. Böylece
   ekranda TEK statusbar, TEK ada, TEK kasa gölgesi olur (öncekinde hepsi
   çiftti) ve sheet gerçekten "üstte duran bir katman" gibi davranır.

   ── Darbenin iniş noktası DEĞİŞMEZ ──────────────────────────────────────
   3B yolda yüz B'nin kendi rotateY(180)'i ebeveynin 180°'siyle sadeleşir;
   burada yüz B'ye hiç transform uygulanmaz. Kart her iki yolda da aynı ekran
   koordinatında (ölçüldü: 0.7369w) → `--hs-lx` tek değer olarak yeter.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px), (pointer: coarse) {
  .hs-scene { perspective: none; -webkit-perspective: none; }
  .hs-depth, .hs-flip {
    transform-style: flat; -webkit-transform-style: flat;
    animation: none; transform: none;
  }
  /* Yer gölgesi burada BİLEREK sabittir. 3B'de silüet daraldığı için gölge
     de daralır (fizik); burada cihaz hiç hareket etmez → gölgenin oynaması
     yalan olurdu. Hareket etmeyen şeyin gölgesi de hareket etmez. */
  .hs-ground { animation: none; }
  .hs-edge, .hs-glare { display: none; }
  .hs-face {
    backface-visibility: visible; -webkit-backface-visibility: visible;
    transform: none; animation: none;
  }

  /* ── Yüz B = TABAN. Telefonu o boyar, hiç kıpırdamaz. ── */
  .hs-face-b { z-index: 1; }
  /* ⚠️ Panel kartlarının gecikmeli oturması (follow-through) burada KAPALI.
     3B yolda yüz B kenar anına kadar görünmez, kartlar tam inişte oturur.
     Burada yüz B ilk kareden itibaren (sheet'in altında) görünür → kartlar
     opacity:0 olsaydı sheet düştüğü an ekran BOŞ GRİ olurdu. Sahadaki
     "mockup yerine gri bir yer" belirtisinin kaynağı buydu.
     Yerine hareket bütçesi DEĞİŞEN şeye harcanır: düşen kart, sayaç, halka.
     Küçük ekranda 5 kartın kademeli oturması zaten okunmuyordu. */
  .hs-face-b .hs-st1, .hs-face-b .hs-st2, .hs-face-b .hs-st3,
  .hs-face-b .hs-st4, .hs-face-b .hs-st5 { animation: none; }

  /* ── Yüz A = yalnız ÜST KATMAN. Kabuğunu tamamen bırakır. ── */
  .hs-face-a { z-index: 2; background: none; box-shadow: none; }
  .hs-face-a::after,                       /* çift yan tuş */
  .hs-face-a .phone-island,                /* çift ada     */
  .hs-face-a .statusbar { display: none; } /* çift saat    */
  .hs-face-a .phone-screen { background: none; }
  /* .na-scr kendi opak zeminini bırakır; artık altındaki paneli görürüz.
     .phone-screen'in overflow:hidden + border-radius'u kırpıcı olarak kalır
     → sheet ekranın dışına düştüğünde temiz kesilir. */
  .hs-face-a .na-scr { background: none; }

  /* Sheet gerçek bir katman gibi görünsün: üst kenarında yumuşak gölge.
     iOS'ta modal sheet'i "yüzen" yapan tek görsel ipucu budur. */
  .hs-face-a .na-sheet {
    box-shadow: 0 calc(var(--phone-w) * -0.022) calc(var(--phone-w) * 0.075) rgba(0,0,0,.20);
  }
  :root[data-theme="dark"] .hs-face-a .na-sheet {
    box-shadow: 0 calc(var(--phone-w) * -0.022) calc(var(--phone-w) * 0.075) rgba(0,0,0,.55);
  }

  /* ── Zaman çizelgesi bağlantıları ── */
  .hs-face-a .na-sheet     { animation: hsSheetM var(--hs-beat) linear infinite; }
  .hs-face-a .na-scr::before { animation: hsScrimM var(--hs-beat) cubic-bezier(.4,0,.3,1) infinite; }
  .hs-dot                  { animation: hsDotXM  var(--hs-beat) linear infinite; }
  .hs-dot i                { animation: hsDotYM  var(--hs-beat) linear infinite; }
  .hs-land                 { animation: hsLandM  var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
  .pnl-flow .fc.hs-fresh   { animation: hsFreshM var(--hs-beat) cubic-bezier(.2,.78,.24,1) infinite; }
  .hs-roll i               { animation: hsRollM  var(--hs-beat) cubic-bezier(.32,.72,0,1) infinite; }
  .hs-cap-a                { animation: hsCapAM  var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
  .hs-cap-b                { animation: hsCapBM  var(--hs-beat) cubic-bezier(.2,.7,.2,1) infinite; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBİL ZAMAN ÇİZELGESİ — tek --hs-beat (11sn; masaüstü 18sn)
   ────────────────────────────────────────────────────────────────────────
   Neden 18 değil 11? Masaüstündeki 18sn'nin çoğu 2.97sn'lik 3B dönüşe ve onun
   nefesine ayrılmıştı. Burada dönüş yok; aynı beat mobilde ödülü ~6.7sn'ye
   itiyordu. Mobil hero'da ziyaretçinin bakış süresi saniyelerle ölçülür —
   hikâye TEK BAKIŞTA kapanmalı. Yeni kurguda kart ~3.6sn'de düşüyor,
   ardından ~5sn okuma duruşu var.

     0–5.5    duruş: sheet açık, "Saat" adımı, seçim yok, "Devam" pasif
     5.5–13   14:30'a dokunulur → dolgu oturur
     8–18     "Devam" etkinleşir ve basılır
    17.5–20   randevu darbesi slottan doğar
    20–26.5   SHEET AŞAĞI DÜŞER (0.72sn) · karartma 0.5sn'de ÖNDEN söner
    20–29     darbe yay çizerek iner; yayın TEPESİ (23.3) sheet yarı yoldayken
    29–33     halka, yeni kart kayarak girer, sayaç 11→12
    33–78     DURUŞ ≈4.95sn — panel rahat okunur
    78–86     SHEET GERİ YÜKSELİR (yay eğrisi, %2 aşma ile oturur)
    86–100    duruş: yüz A yeniden hazır

   Sıfırlamalar sheet'in ARKASINDA yapılır: yüz A'nın kendi sıfırlaması
   (naFill/naNext, %55–60) sheet ekran dışındayken; yeni kart %79.6–82'de
   (o an sheet kartı çoktan örtmüş); sayaç %88–92'de (sheet tam oturmuş).
   Bu pencereleri kaydırırken hangi öğenin ne zaman ÖRTÜLÜ olduğunu yeniden
   hesapla — yoksa sahnede "kendiliğinden değişen" bir öğe görünür.
   ════════════════════════════════════════════════════════════════════════ */

/* Sheet — tek elemanda iki farklı jest, bu yüzden iki farklı eğri:
   · KAPANIŞ hızlanarak çıkar (ease-in). Bir sheet kapanırken yavaşlayarak
     oturmaz; gideceği yer ekranın dışıdır, orada "oturma" görünmez ve
     yavaşlama gecikme gibi okunur.
   · AÇILIŞ sönümlü yay: linear() içine ζ=0.78 / ωn=9.2 örneklendi, tepe aşma
     %1.97. Noktalar HIZ EKSENİNDE eşit dağıtıldı → kontrol noktası başına
     %4.1 hız adımı (masaüstündeki hsFlip %4.8 ile aynı disiplin).
     `linear()` desteklenmezse üstteki cubic-bezier devreye girer. */
@keyframes hsSheetM {
  0%, 20% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.4, 0, .72, .5);
  }
  26.5%, 78% {
    transform: translateY(112%);   /* yuvarlak köşe + gölge dâhil tam temizler */
    animation-timing-function: cubic-bezier(.32,.72,0,1);   /* fallback */
    animation-timing-function: linear(0.0000 0.00%, 0.0001 0.19%, 0.0005 0.36%, 0.0012 0.54%, 0.0021 0.73%, 0.0034 0.91%, 0.0050 1.11%, 0.0068 1.31%, 0.0090 1.51%, 0.0116 1.73%, 0.0147 1.95%, 0.0180 2.17%, 0.0219 2.41%, 0.0264 2.66%, 0.0314 2.93%, 0.0371 3.20%, 0.0435 3.49%, 0.0506 3.79%, 0.0584 4.10%, 0.0676 4.45%, 0.0776 4.81%, 0.0893 5.21%, 0.1023 5.64%, 0.1179 6.13%, 0.1359 6.66%, 0.1581 7.30%, 0.1867 8.09%, 0.2277 9.18%, 0.3677 12.74%, 0.4585 15.07%, 0.5112 16.49%, 0.5539 17.68%, 0.5905 18.74%, 0.6236 19.74%, 0.6541 20.70%, 0.6820 21.63%, 0.7083 22.54%, 0.7329 23.44%, 0.7566 24.35%, 0.7790 25.26%, 0.8001 26.17%, 0.8205 27.11%, 0.8400 28.07%, 0.8586 29.06%, 0.8765 30.09%, 0.8936 31.15%, 0.9100 32.27%, 0.9255 33.45%, 0.9404 34.71%, 0.9545 36.08%, 0.9677 37.55%, 0.9801 39.20%, 0.9916 41.08%, 1.0018 43.26%, 1.0106 45.98%, 1.0174 49.66%, 1.0197 56.29%, 1.0000 100.00%);
  }
  86%, 100% { transform: translateY(0); }
}

/* Karartma sheet'ten ÖNDE söner (26.5 yerine 24.5'te biter) ve geri gelirken
   yine önden gelir. iOS'un imzası budur: ışık, katmandan önce değişir.
   İkisi aynı anda bitseydi geçiş tek düz blok gibi okunurdu. */
@keyframes hsScrimM {
  0%, 20%     { opacity: 1; }
  24.5%, 78%  { opacity: 0; }
  84%, 100%   { opacity: 1; }
}

/* Randevunun kendisi — X doğrusal, Y yay. Yayın TEPESİ (23.3%) sheet'in tam
   yarı yolda olduğu ana denk gelir: darbe, kapanan sheet'in üzerinden atlayıp
   günün akışına iniyormuş gibi okunur (senkron kasıtlı, masaüstünde tepe
   telefonun kenar anına kilitliydi — burada kenar anı yok). */
@keyframes hsDotXM {
  0%, 17.5% { opacity: 0; transform: translateX(0); }
  20%       { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  29%       { opacity: 1; transform: translateX(var(--hs-dx)); }
  32%, 100% { opacity: 0; transform: translateX(var(--hs-dx)); }
}
@keyframes hsDotYM {
  0%, 18%   { transform: translateY(0) scale(.3); animation-timing-function: cubic-bezier(.12,.85,.3,1); }
  23.3%     { transform: translateY(calc(var(--hs-w) * -0.28)) scale(1.1); animation-timing-function: cubic-bezier(.5,0,.72,.5); }
  29%       { transform: translateY(calc(var(--hs-w) * 0.479)) scale(.85); }
  32%, 100% { transform: translateY(calc(var(--hs-w) * 0.479)) scale(.25); }
}
@keyframes hsLandM {
  0%, 28%   { opacity: 0;   transform: scale(.3); }
  31.5%     { opacity: .85; transform: scale(1); }
  39%, 100% { opacity: 0;   transform: scale(2.7); }
}

/* Yeni kart + sayaç: sahnenin ÖDÜLÜ. Sıfırlama pencereleri sheet'in altında. */
@keyframes hsFreshM {
  0%, 28.5%   { opacity: 0; transform: translateX(calc(var(--phone-w) * 0.16)); }
  35%, 79.6%  { opacity: 1; transform: none; }
  82%, 100%   { opacity: 0; transform: translateX(calc(var(--phone-w) * 0.16)); }
}
/* Selamlama ekranın EN ÜSTÜNDE; sheet ancak tam oturduğunda (%86) örter →
   sayaç sıfırlaması en geç pencerede, %88–92'de. */
@keyframes hsRollM {
  0%, 29%   { transform: translateY(0); }
  35%, 88%  { transform: translateY(-50%); }
  92%, 100% { transform: translateY(0); }
}

@keyframes hsCapAM {
  0%, 18%     { opacity: 1; transform: none; }
  21.5%, 80%  { opacity: 0; transform: translateY(-7px); }
  85%, 100%   { opacity: 1; transform: none; }
}
@keyframes hsCapBM {
  0%, 24%   { opacity: 0; transform: translateY(7px); }
  28%, 75%  { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: translateY(7px); }
}

/* ── Reduced motion — MOBİL yol ────────────────────────────────────────
   ⚠️ Bu blok yukarıdaki genel reduced-motion bloğundan SONRA gelmek
   ZORUNDA. Mobil media bloğu `.hs-roll i`, `.fc.hs-fresh`, `.hs-cap-*` gibi
   seçicilere animasyonu YENİDEN atıyor; eşit özgüllükte ve daha sonra
   geldiği için genel bloktaki `animation: none`'ı eziyordu. Yani mobil +
   reduced-motion kullanıcıda sahne yine oynuyordu. Mobil blokta animasyon
   atadığın HER seçiciyi buraya da ekle.

   Sonuç durum: sheet açık, saat seçili, arkasındaki panel son hâliyle
   (12 randevu + düşmüş kart) → hikâye hareketsiz de okunur. */
@media (prefers-reduced-motion: reduce) {
  .hs-face-a, .hs-face-b,
  .hs-face-a .na-sheet,
  .hs-face-a .na-scr::before,
  .hs-dot, .hs-dot i, .hs-land,
  .pnl-flow .fc.hs-fresh,
  .hs-roll i,
  .hs-cap-a, .hs-cap-b { animation: none; transform: none; }
  /* .hs-roll'un tabanı translateY(-50%) = "12" — yukarıdaki `transform:none`
     onu "11"e düşürürdü; düşen kart görünürken sayaç 11 kalamaz. */
  .hs-roll i { transform: translateY(-50%); }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO SAHNESİ · DURAKLATMA KAPISI (tek anahtar, koşulsuz)
   ────────────────────────────────────────────────────────────────────────
   app.js sahne ekranda değilken `.hs-idle` basar (ilk görünüşe kadar 0.
   karede donar; sonra ekran dışında pil yakmasın diye durur). Gerekçenin
   tamamı yukarıda, "EKRAN DIŞINDA DURAKLAT" başlığında.

   ⚠️ `!important` BURADA BİLİNÇLİ. Kapı, sahnedeki HER animasyonu tek
   hamlede durdurmak zorunda; iki ayrı yoldan sessizce deliniyordu:

     • `animation-play-state` bir LONGHAND'dir, `animation:` KISAYOLU onu
       her seferinde `running`e sıfırlar. Mobil zaman çizelgesi bloğu
       (@media) tam olarak bunu yapıyor.
     • Özgüllük: `.pnl-flow .fc.hs-fresh` üç sınıflıdır (0,3,0) ve
       `.hero-stage.hs-idle *` (0,2,0) ile yarışı kaybeder — sıra ne
       olursa olsun.

   Ölçüm (2026-08-29, gerçek Chrome + getAnimations): kapı bu hâline
   gelmeden önce 15 animasyonun 3'ü mobilde HİÇ duraklamıyordu. Sahne
   katlamanın altındayken bile dönüyor, ziyaretçi oraya indiğinde
   hikâyenin ortasına düşüyordu.

   `!important` sayesinde kuralın dosyadaki YERİ artık kritik değil; yine
   de en sonda durur ki okuyan "son söz bu" diye görsün. Aynı tuzağın
   reduced-motion kardeşi için yukarıdaki "Reduced motion — MOBİL yol"
   bloğuna bak (orada çözüm hâlâ seçici listesini elle çoğaltmak).
   Nöbetçi: tests/landing-hero-timing.test.mjs
   ════════════════════════════════════════════════════════════════════════ */
.hero-stage.hs-idle,
.hero-stage.hs-idle *,
.hero-stage.hs-idle *::before,
.hero-stage.hs-idle *::after { animation-play-state: paused !important; }