/* =========================================================================
   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;
}
.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 (per-tarayıcı).
   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; }
}

/* ============================ 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ı, tabbar üstü) */
.pnl-body {
  position: absolute; left: 0; right: 0;
  top: calc(var(--phone-w) * 0.135);
  bottom: calc(var(--phone-w) * 0.16);
  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; } }
.pnl-now .kicker { font-size: calc(var(--phone-w)*0.034); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: .94; }
.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 + globe ikonlu kart) ────────── */
.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);
  display: flex; align-items: flex-start; gap: calc(var(--phone-w)*0.034);
}
.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); }
.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.062);
  background: linear-gradient(135deg, var(--purple), color-mix(in oklab, var(--purple), #000 22%));
  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.05) calc(var(--phone-w)*0.05) 0; display: flex; flex-direction: column; gap: calc(var(--phone-w)*0.025); }
.pnl-cta-stack .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-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); }

/* ────────── 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;
}
.pnl-drawer .sum-card .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;
}
.pnl-drawer .sum-card .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 .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 .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); }

/* ────────── Panel tab bar (yeni glass + ikon) ────────── */
.pnl-tab {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--phone-w) * 0.16);
  display: flex; align-items: flex-start; justify-content: space-around;
  background: var(--bg-overlay); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hair);
  padding-top: calc(var(--phone-w)*0.025);
  z-index: 6;
}
.pnl-tab .ti {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-3); font-size: calc(var(--phone-w)*0.026); font-weight: 540;
}
.pnl-tab .ti svg { width: calc(var(--phone-w)*0.062); height: calc(var(--phone-w)*0.062); }
.pnl-tab .ti.on { color: var(--accent); }

/* ────────── Panel ekran rozet satırı (showcase-copy altı) ────────── */
.panel-badge-row { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-top: 22px; }
@media (min-width: 880px) {
  /* .flip → media sağda; rozetler kopya altında soldan akar; mevcut akış uyumlu */
}

/* ════════════════════════════════════════════════════════════════════════
   "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; }
}

/* ──────────────────────────── .tpl-ready ────────────────────────────
   "Web siteniz hazır" — premium SaaS project-overview dilinde statik
   kompozisyon. Üç katmanlı yüzey: hero kart + stat şeridi + zaman
   çizelgesi. Tek hareket: yayında noktasının nabzı.
   Telefon zemini --bg → kartlar --bg-elev üstüne çıktıkça hairline +
   yumuşak gölgeyle yüzer. Sayılar tabular-nums. */
.tpl-ready {
  background: var(--bg);
  color: var(--text);
  padding:
    calc(var(--phone-w) * 0.155)
    calc(var(--phone-w) * 0.055)
    calc(var(--phone-w) * 0.06);
  display: flex; flex-direction: column;
  gap: calc(var(--phone-w) * 0.035);
}
.tpl-ready .statusbar { color: var(--text); }
:root[data-theme="dark"] .tpl-ready { background: #0c0c0e; color: #fff; }
:root[data-theme="dark"] .tpl-ready .statusbar { color: #fff; }

/* ── Hero kart ── */
.ready-card {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  padding:
    calc(var(--phone-w) * 0.045)
    calc(var(--phone-w) * 0.048)
    calc(var(--phone-w) * 0.052);
  box-shadow:
    0 1px 2px rgba(15,15,20,.05),
    inset 0 0 0 1px var(--hair-soft);
  display: flex; flex-direction: column;
  gap: calc(var(--phone-w) * 0.026);
}
.ready-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--phone-w) * 0.02);
}
.ready-live {
  display: inline-flex; align-items: center;
  gap: calc(var(--phone-w) * 0.022);
  font-size: calc(var(--phone-w) * 0.03);
  font-weight: 700;
  color: #1f8a3d;
  letter-spacing: 0.08em;
}
:root[data-theme="dark"] .ready-live { color: #5fd17b; }
.ready-live-dot {
  width: calc(var(--phone-w) * 0.026);
  height: calc(var(--phone-w) * 0.026);
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 calc(var(--phone-w) * 0.014)
              color-mix(in srgb, #34c759 26%, transparent);
}
.ready-stamp {
  font-size: calc(var(--phone-w) * 0.028);
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ready-card-title {
  font-weight: 800;
  letter-spacing: -0.028em;
  font-size: calc(var(--phone-w) * 0.092);
  line-height: 1.02;
  text-wrap: balance;
}
.ready-card-url {
  display: inline-flex; align-items: center;
  gap: calc(var(--phone-w) * 0.02);
  padding: calc(var(--phone-w) * 0.025) calc(var(--phone-w) * 0.042);
  border-radius: var(--r-pill);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--phone-w) * 0.034);
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--hair);
  align-self: flex-start;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ready-card-url svg {
  width: calc(var(--phone-w) * 0.038);
  height: calc(var(--phone-w) * 0.038);
  color: var(--accent);
  flex: 0 0 auto;
}
.ready-card-url b { color: var(--text); font-weight: 700; }

/* ── Stat şeridi ── */
.ready-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 2px rgba(15,15,20,.05),
    inset 0 0 0 1px var(--hair-soft);
  overflow: hidden;
}
.ready-stat {
  position: relative;
  padding:
    calc(var(--phone-w) * 0.034)
    calc(var(--phone-w) * 0.02);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--phone-w) * 0.005);
  text-align: center;
}
.ready-stat + .ready-stat::before {
  content: "";
  position: absolute; left: 0;
  top: 24%; bottom: 24%;
  width: 1px;
  background: var(--hair-soft);
}
.ready-stat .v {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: calc(var(--phone-w) * 0.062);
  color: var(--text);
  font-feature-settings: "tnum" 1, "ss01" 1;
  line-height: 1;
}
.ready-stat .k {
  font-size: calc(var(--phone-w) * 0.028);
  color: var(--text-2);
  font-weight: 500;
}

/* ── Kurulum zaman çizelgesi ── */
.ready-section {
  display: flex; flex-direction: column;
  gap: calc(var(--phone-w) * 0.018);
}
.ready-section-h {
  font-size: calc(var(--phone-w) * 0.028);
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.1em;
  padding-left: calc(var(--phone-w) * 0.012);
}
.ready-timeline {
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 2px rgba(15,15,20,.05),
    inset 0 0 0 1px var(--hair-soft);
  padding: calc(var(--phone-w) * 0.005) 0;
}
.ready-tl {
  position: relative;
  display: flex; align-items: center;
  gap: calc(var(--phone-w) * 0.028);
  padding:
    calc(var(--phone-w) * 0.026)
    calc(var(--phone-w) * 0.04);
}
.ready-tl + .ready-tl::before {
  /* iOS settings-list hairline ayraç (ikon sütununu içerden başlat) */
  content: "";
  position: absolute;
  left: calc(var(--phone-w) * 0.108);
  right: calc(var(--phone-w) * 0.04);
  top: 0;
  height: 1px;
  background: var(--hair-soft);
}
.ready-tl-dot {
  width: calc(var(--phone-w) * 0.04);
  height: calc(var(--phone-w) * 0.04);
  border-radius: 50%;
  background: #34c759;
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px color-mix(in srgb, #34c759 40%, transparent);
}
.ready-tl-dot svg { width: 62%; height: 62%; }
.ready-tl-text {
  flex: 1;
  font-size: calc(var(--phone-w) * 0.04);
  font-weight: 550;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ready-tl-time {
  font-size: calc(var(--phone-w) * 0.03);
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum" 1;
  flex: 0 0 auto;
}

/* ── Kapanış cümlesi ── */
.ready-foot {
  margin-top: calc(var(--phone-w) * 0.005);
  font-size: calc(var(--phone-w) * 0.04);
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
  text-wrap: balance;
}
.ready-foot b { color: var(--text); font-weight: 700; }

/* ── Tek hareket: yayında noktası nabzı ── */
@keyframes readyLivePulse {
  0%, 100% { box-shadow: 0 0 0 calc(var(--phone-w) * 0.014) color-mix(in srgb, #34c759 26%, transparent); }
  50%      { box-shadow: 0 0 0 calc(var(--phone-w) * 0.022) color-mix(in srgb, #34c759 0%,  transparent); }
}
.ready-live-dot { animation: readyLivePulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ready-live-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   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);
}