/* ===== LOVJA Patient & Order System =====
   Tasarım dili: PORSELEN ve GRAFİT.
   Kural: renk yalnızca klinik bilgi taşır (model, implant, dişeti, uyarı).
   Arayüzün geri kalanı porselen, grafit ve boşluktan ibarettir.
   Pirinç (--brass) sadece AKTİF olanı işaretler — ekranın %1'i.
   ============================================================ */
:root{
  --bg:#F1F1EE;            /* porselen zemin */
  --surface:#FBFBF9;       /* kart yüzeyi */
  --surface-2:#F5F5F2;     /* gömük yüzey (şema zemini) */
  --raised:#FFFFFF;
  --text:#141618;          /* grafit */
  --muted:#454B52;         /* ikincil metin — okunur olmalı */
  --faint:#646B72;         /* etiketler; silik değil, sakin */
  --border:#C9C9C1;        /* saç teli ama görünür */
  --border-2:#DDDDD6;      /* satır ayrımı */
  --brass:#A3834F;         /* yalnızca aktif/yeni */
  --brand:#141618;
  --m1:#6B4E7D; --m2:#2E6B8F; --m3:#3E7A57;
  --green:#3E7A57; --amber:#A87A22; --red:#A2453E;
  --gum:#C0788A; --implant:#6E747C;
  --radius:3px;            /* keskin kenar */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  color-scheme:light;
}

/* Sistem ayarı koyuysa koyu — kullanıcı elle seçmediyse */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#111213; --surface:#191B1C; --surface-2:#151718; --raised:#1F2223;
  --text:#F0F0EC; --muted:#B0B6BC; --faint:#8D949B;
  --border:#3A3E42; --border-2:#2C3033;
  --brass:#C9A76B; --brand:#F0F0EC;
  --m1:#A98BBC; --m2:#6BA6CC; --m3:#71B48C;
  --green:#71B48C; --amber:#D9A94C; --red:#D9736B;
  --gum:#D493A3; --implant:#AEB4BE;
  color-scheme:dark;
  }
}

/* Üst bardaki düğmeyle elle seçim — her iki yönde de kazanır */
:root[data-theme="dark"]{
  --bg:#111213; --surface:#191B1C; --surface-2:#151718; --raised:#1F2223;
  --text:#F0F0EC; --muted:#B0B6BC; --faint:#8D949B;
  --border:#3A3E42; --border-2:#2C3033;
  --brass:#C9A76B; --brand:#F0F0EC;
  --m1:#A98BBC; --m2:#6BA6CC; --m3:#71B48C;
  --green:#71B48C; --amber:#D9A94C; --red:#D9736B;
  --gum:#D493A3; --implant:#AEB4BE;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F1F1EE;            /* porselen zemin */
  --surface:#FBFBF9;       /* kart yüzeyi */
  --surface-2:#F5F5F2;     /* gömük yüzey (şema zemini) */
  --raised:#FFFFFF;
  --text:#141618;          /* grafit */
  --muted:#454B52;         /* ikincil metin — okunur olmalı */
  --faint:#646B72;         /* etiketler; silik değil, sakin */
  --border:#C9C9C1;        /* saç teli ama görünür */
  --border-2:#DDDDD6;      /* satır ayrımı */
  --brass:#A3834F;         /* yalnızca aktif/yeni */
  --brand:#141618;
  --m1:#6B4E7D; --m2:#2E6B8F; --m3:#3E7A57;
  --green:#3E7A57; --amber:#A87A22; --red:#A2453E;
  --gum:#C0788A; --implant:#6E747C;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;letter-spacing:-.004em;font-size:15.5px}
button{font-family:inherit}
.muted{color:var(--muted)}
.right{text-align:right}
.mt{margin-top:16px}
.spacer{flex:1}
[hidden]{display:none !important}

/* ---------- LOGIN ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login.hide{display:none}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:44px 40px;
  max-width:440px;width:100%}
.login-logo{height:30px;width:auto;display:block;margin-bottom:26px}
.login h1{font-size:20px;margin:0 0 5px;font-weight:600;letter-spacing:-.02em}
.login p{font-size:13px;margin:0 0 22px}
.login-err{color:var(--red);font-size:12.5px;min-height:18px;margin-bottom:6px}
.demo-box{margin-top:24px;border-top:1px solid var(--border);padding-top:18px}
.demo-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.demo-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:8px;background:transparent;
  border:1px solid var(--border);border-radius:2px;cursor:pointer;text-align:left;color:var(--text);transition:.15s}
.demo-btn:hover{border-color:var(--brass)}
.demo-btn b{display:block;font-size:13px}
.demo-btn small{color:var(--muted);font-size:11.5px}
.rd{width:30px;height:30px;border-radius:2px;display:grid;place-items:center;font-size:14px;flex:none;
  border:1px solid var(--border)}

/* ---------- SHELL ---------- */
.app{display:none}
.app.on{display:block}
.topbar{position:sticky;top:0;z-index:30;background:var(--raised);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:13px 26px}
.topbar-logo{height:26px;width:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar-logo,
  :root:not([data-theme="light"]) .login-logo{filter:invert(1) brightness(1.8)}}
:root[data-theme="dark"] .topbar-logo,:root[data-theme="dark"] .login-logo{filter:invert(1) brightness(1.8)}
:root[data-theme="light"] .topbar-logo,:root[data-theme="light"] .login-logo{filter:none}
.rolechip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;background:transparent;border:1px solid var(--border);color:var(--text)}
.iconbtn{position:relative;background:transparent;border:1px solid var(--border);border-radius:2px;width:34px;height:34px;
  cursor:pointer;font-size:14px;color:var(--muted)}
.iconbtn:hover{border-color:var(--text);color:var(--text)}
.dot{position:absolute;top:-6px;right:-6px;background:var(--brass);color:var(--raised);font-family:var(--mono);
  font-size:9.5px;font-weight:700;min-width:17px;height:17px;border-radius:2px;display:grid;place-items:center;padding:0 4px}
.tabs{display:flex;gap:26px;padding:0 26px;background:var(--raised);border-bottom:1px solid var(--border);
  position:sticky;top:61px;z-index:29;overflow-x:auto}
.tab{padding:14px 0;border:none;background:none;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--brass)}
.wrap{max-width:1180px;margin:0 auto;padding:34px 26px 88px}

/* ---------- BITS ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
h2.page{font-size:27px;margin:0 0 5px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:14px;margin:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px}
.card.pad0{padding:0;overflow:auto}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.g4,.g3,.g2{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}}
.stat small{color:var(--muted);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;font-weight:700}
.stat b{display:block;font-size:29px;margin-top:9px;font-weight:600;letter-spacing:-.025em;line-height:1.05}
.btn{background:var(--text);color:var(--bg);border:1px solid var(--text);border-radius:2px;
  padding:10px 19px;font-weight:600;font-size:13px;cursor:pointer;transition:.14s}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--text);opacity:1}
.btn.sm{padding:7px 14px;font-size:12.5px;border-radius:2px}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--muted);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;padding:13px 14px;border-bottom:1.5px solid var(--border);white-space:nowrap}
td{padding:13px 14px;border-bottom:1px solid var(--border-2)}
tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--surface-2)}
tr.clickable:hover td:first-child{box-shadow:inset 2px 0 0 var(--brass)}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:2px;
  text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;border:1px solid;background:transparent}
.b-active{border-color:var(--border);color:var(--muted)}
.b-done{border-color:var(--m3);color:var(--m3)}
.b-wait{border-color:var(--brass);color:var(--brass)}
.b-new{border-color:var(--red);color:var(--red)}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:2px;background:var(--raised);
  color:var(--text);font-size:13.5px;font-family:inherit;outline:none;transition:.14s}
input:focus,select:focus,textarea:focus{border-color:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 16%,transparent)}
label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted);margin-bottom:7px}
.field{margin-bottom:14px}
.empty{padding:34px;text-align:center;color:var(--muted);font-size:13px}

/* stepper */
.stepper{display:flex;align-items:center;margin:10px 0 6px}
.sd{width:8px;height:8px;border-radius:50%;background:var(--border);flex:none}
.sd.done{background:var(--text)}
.sd.now{background:var(--brass);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brass) 22%,transparent)}
.sl{height:1.5px;background:var(--border);flex:1}
.sl.done{background:var(--text)}
.stage{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}

/* teeth mini */
.teeth{display:flex;gap:3px;flex-wrap:wrap}
.t{width:22px;height:28px;border:1.5px solid var(--border);border-radius:8px 8px 3px 3px;font-size:9px;
  display:grid;place-items:center;color:var(--muted)}
.t.on{background:rgba(0,113,227,.16);border-color:var(--brand);color:var(--text);font-weight:700}

/* balance */
.bar{height:3px;background:var(--border);overflow:hidden;margin-top:12px}
.bar>i{display:block;height:100%;background:var(--text)}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:-80px;background:var(--text);color:var(--bg);
  padding:12px 20px;border-radius:2px;font-size:12.5px;transition:.32s;z-index:100;max-width:90vw}
.toast.on{bottom:26px}

/* ===== PLANNER — anatomik levha =====
   Diş porselen beyazı, kenar saç teli. Restorasyon dişin içini boyamaz;
   üstüne ince bir renk şeridi koyar. Renk = bilgi.
   ============================================================ */
.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);background:transparent;
  color:var(--muted);border-radius:2px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:.14s}
.chip:hover{border-color:var(--text);color:var(--text)}
.chip.on{border-color:var(--text);color:var(--text);background:transparent;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--brass)}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.chip:disabled{opacity:.35;cursor:not-allowed}

/* kadran çizgileri — dişlerin arkasında, saç teli */
.pl-chart{position:relative;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:50px 24px;overflow-x:auto;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  width:fit-content;max-width:100%;margin:0 auto}
.pl-chart::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:1.5px;
  background:var(--border);transform:translateY(-50%);pointer-events:none}
.pl-chart::after{content:"";position:absolute;top:14px;bottom:14px;left:50%;width:1.5px;
  background:var(--border);transform:translateX(-50%);pointer-events:none}

.pl-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:max-content}
.pl-row.upper{margin-bottom:32px}
.pl-row.lower{margin-top:32px}

.pl-t{position:relative;width:36px;height:48px;flex:none;border:1.5px solid var(--border);
  border-radius:10px 10px 3px 3px;               /* üst çene: yuvarlak uç yukarı (kök tarafı) */
  background:var(--raised);display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;
  cursor:pointer;transition:.14s;user-select:none}
.pl-t.lower{border-radius:3px 3px 10px 10px}       /* alt çene: yuvarlak uç aşağı */
.pl-t:hover{border-color:var(--text);color:var(--text)}
.pl-t.missing{border-style:dashed;color:var(--faint);background:transparent;opacity:.75}

/* restorasyon: hafif tint + üst kenarda renk şeridi */
.pl-t.filled{border-color:var(--c);color:var(--text);font-weight:700;
  background:color-mix(in srgb,var(--c) 14%,var(--raised))}
.pl-t.filled::before{content:"";position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:3px;
  background:var(--c);border-radius:9px 9px 0 0;pointer-events:none}
.pl-t.lower.filled::before{top:auto;bottom:-1px;border-radius:0 0 9px 9px}

.pl-tag{position:absolute;top:-10px;right:-8px;background:var(--c,var(--muted));color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:800;line-height:1;padding:3px 5px;
  border-radius:3px;font-style:normal;z-index:3;letter-spacing:.02em;
  box-shadow:0 0 0 2px var(--surface-2)}
.pl-t.lower .pl-tag{top:auto;bottom:-10px}

/* implant: kök tarafına vida — dişli gövde + sivri uç */
.imp{position:absolute;left:50%;width:12px;height:25px;color:var(--implant);
  background:repeating-linear-gradient(to bottom,currentColor 0 3px,transparent 3px 4.5px);
  clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);pointer-events:none}
.pl-t:not(.lower) .imp{bottom:calc(100% + 12px);transform:translateX(-50%) scaleY(-1)}
.pl-t.lower .imp{top:calc(100% + 12px);transform:translateX(-50%)}

/* all-on-x: span boyunca tek parça, kesintisiz dişeti çizgisi */
.gum-bar{position:absolute;height:6px;background:var(--gum);border-radius:2px;pointer-events:none;z-index:0}
.pl-row.upper .gum-bar{bottom:calc(100% + 4px)}
.pl-row.lower .gum-bar{top:calc(100% + 4px)}

/* köprü bağlantısı — kalın renk çizgisi */
.conn{position:relative;width:12px;height:1.5px;background:var(--border);flex:none;align-self:center}
.conn.on{background:var(--m3);height:3.5px;border-radius:1px}

/* Liatarc — pirinç halka */
.pl-t.lia{box-shadow:0 0 0 2px color-mix(in srgb,var(--brass) 55%,transparent)}

/* salt-görüntüleme şeması */
.pl-chart.ro .pl-t{cursor:default}
.pl-chart.ro .pl-t:hover{border-color:var(--border);color:var(--muted)}
.pl-chart.ro .pl-t.filled:hover{border-color:var(--c);color:var(--text)}
.pl-chart.ro .pl-t.missing:hover{border-color:var(--border);color:var(--faint)}

/* genel yardımcı — kart/blok gizleme (Partners formu vb.) */
.hide{display:none !important}


/* ============================================================
   YAZDIRMA — ekran koyu olsa bile çıktı DAİMA açık tema.
   !important şart: yukarıdaki tema kuralları daha özeldir.
   ============================================================ */
@media print{
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#FFFFFF !important; --surface:#FFFFFF !important; --surface-2:#F5F5F2 !important;
    --raised:#FFFFFF !important; --text:#141618 !important; --muted:#454B52 !important;
    --faint:#646B72 !important; --border:#C9C9C1 !important; --border-2:#DDDDD6 !important;
    --brass:#A3834F !important; --brand:#141618 !important;
    --m1:#6B4E7D !important; --m2:#2E6B8F !important; --m3:#3E7A57 !important;
    --green:#3E7A57 !important; --amber:#A87A22 !important; --red:#A2453E !important;
    --gum:#C0788A !important; --implant:#6E747C !important;
    color-scheme:light !important;
  }
  body{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.tabs,.toast,.iconbtn,.btn{display:none !important}
  .topbar-logo,.login-logo{filter:none !important}
  .wrap{padding:0 !important;max-width:none !important}
  .card{break-inside:avoid}
}

/* ============================================================
   KAYAN KUTU — sohbet ve geçmiş sayfayı uzatmasın.
   overscroll-behavior:contain → kutunun dibine gelince kaydırma
   sayfaya ATLAMAZ. (Eski panelde iç içe kaydırma çatışıyordu,
   tekrar yaşanmasın diye.)
   ============================================================ */
.scrollbox{
  flex:1;
  min-height:200px;
  max-height:420px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-width:thin;
}
.scrollbox::-webkit-scrollbar{width:8px}
.scrollbox::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.scrollbox::-webkit-scrollbar-track{background:transparent}
@media(max-width:900px){ .scrollbox{max-height:340px} }

/* ---------- dosyalar ---------- */
.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius);padding:10px;transition:.15s}
.dropzone.over{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 7%,transparent)}
.filerow{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:var(--radius);background:var(--raised);cursor:grab}
.filerow:hover{border-color:var(--brass)}
.filerow[draggable="true"]:active{cursor:grabbing}
#chatCard.over{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 6%,transparent)}

/* hover önizleme — orta boy, imlecin altında */
.preview-pop{position:fixed;z-index:300;pointer-events:none;
  border:1.5px solid var(--border);border-radius:var(--radius);background:var(--raised);
  padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.28);max-width:320px}
.preview-pop img,.preview-pop video{display:block;max-width:308px;max-height:260px;border-radius:2px}

/* ---------- klasör grupları ---------- */
.folderbox{border:1.5px solid var(--border);border-radius:var(--radius);
  background:var(--raised);margin-bottom:10px;overflow:hidden}
.folderhead{padding:11px 13px;cursor:pointer;user-select:none}
.folderhead:hover{background:var(--surface-2)}
.folderarrow{font-size:12px}
.foldercontent{border-top:1px solid var(--border-2);padding:8px;
  display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;
  overscroll-behavior:contain}

/* ---------- dosya türleri: renk bilgidir ---------- */
:root{
  --f-stl:#4A6E8A;    /* tarama — çelik mavisi */
  --f-photo:#8A6E3A;  /* fotoğraf — kum */
  --f-video:#6E4A6E;  /* video — mürdüm */
  --f-doc:#5A6067;    /* belge — grafit */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --f-stl:#7FA8C4; --f-photo:#C4A472; --f-video:#A886A8; --f-doc:#9BA1A7;
}}
:root[data-theme="dark"]{
  --f-stl:#7FA8C4; --f-photo:#C4A472; --f-video:#A886A8; --f-doc:#9BA1A7;
}
:root[data-theme="light"]{
  --f-stl:#4A6E8A; --f-photo:#8A6E3A; --f-video:#6E4A6E; --f-doc:#5A6067;
}

.filerow.ftype{border-left:3px solid var(--fc)}
.filerow.ftype:hover{border-color:var(--border);border-left-color:var(--fc);
  background:color-mix(in srgb,var(--fc) 6%,transparent)}

/* zaman başlığı */
.label-time{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
  padding-bottom:7px;border-bottom:1px solid var(--border)}

/* ============================================================
   KÜNYE ŞERİDİ — materyal, renk, tarih
   Yanlış okunursa iş baştan gider; küçük yazı olmaz.
   Çıktıda da aynı belirginlikte basılır.
   ============================================================ */
.spec-band{display:flex;flex-wrap:wrap;gap:0;margin-top:16px;
  border:1.5px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden}
.spec-cell{flex:1;min-width:130px;padding:14px 18px;border-right:1px solid var(--border)}
.spec-cell:last-child{border-right:none}
.spec-cell.hot{background:color-mix(in srgb,var(--brass) 9%,var(--surface));
  box-shadow:inset 0 -3px 0 var(--brass)}
.spec-label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.spec-value{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.spec-cell.hot .spec-value{font-size:22px}
@media(max-width:620px){.spec-cell{min-width:50%;border-bottom:1px solid var(--border)}}

/* ============================================================
   ANA EYLEM DÜĞMESİ — ekranın en belirgin öğesi.
   Sıra kullanıcıdaysa yavaşça nefes alır ki gözden kaçmasın.
   ============================================================ */
.btn.action{font-size:14.5px;font-weight:700;padding:13px 26px;letter-spacing:.01em;
  border-radius:2px;background:var(--brass);border-color:var(--brass);color:#fff}
.btn.action:hover{opacity:1;filter:brightness(1.08)}
.btn.action.sm{font-size:12.5px;padding:9px 16px}

@keyframes lovja-nabiz{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 55%,transparent)}
  50%    {box-shadow:0 0 0 9px color-mix(in srgb,var(--brass) 0%,transparent)}
}
.btn.action.pulse{animation:lovja-nabiz 2.4s ease-in-out infinite}

/* Hareketi azaltılmış tercih edenlerde yanıp sönme yok — sabit halka */
@media (prefers-reduced-motion:reduce){
  .btn.action.pulse{animation:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 35%,transparent)}
}

/* Çıktıda: künye basılsın, nabız ve düğmeler basılmasın */
@media print{
  .spec-band{border:1.5px solid #C9C9C1 !important;break-inside:avoid}
  .spec-cell.hot{background:#F5F0E6 !important;box-shadow:inset 0 -3px 0 #A3834F !important}
  .btn.action{display:none !important}
}

/* çene başlığı — restorasyon listesinde */
.arch-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px;
  padding-bottom:6px;border-bottom:1.5px solid var(--border)}

/* ============================================================
   AŞAMA GÖSTERGESİ
   Dört durum gözle ayrılır: geçmiş dolu, şu an pirinç halkalı,
   gelecek boş, atlanan kesikli. Biten vakada şerit yeşile döner.
   ============================================================ */
.steps-wrap{overflow-x:auto;overscroll-behavior-x:contain;margin:14px 0 4px;padding-bottom:4px}
.steps{display:flex;min-width:640px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;
  text-align:center;padding:0 4px}

/* noktalar arası çizgi */
.step::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;
  background:var(--border)}
.step:first-child::before{display:none}
.step.done::before,.step.now::before{background:var(--text)}

.step-dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
  border:2px solid var(--border);background:var(--surface);color:var(--faint)}
.step-name{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-top:8px;line-height:1.35;max-width:96px}

/* geçmiş */
.step.done .step-dot{background:var(--text);border-color:var(--text);color:var(--bg)}
.step.done .step-name{color:var(--muted)}

/* şu an — en belirgin */
.step.now .step-dot{background:var(--brass);border-color:var(--brass);color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 22%,transparent)}
.step.now .step-name{color:var(--text);font-weight:800}

/* gelecek */
.step.next .step-dot{background:transparent}

/* atlanan (depozitolu klinikte ödeme adımı) */
.step.skip .step-dot{border-style:dashed;opacity:.5}
.step.skip .step-name{opacity:.45;text-decoration:line-through}

/* vaka bitti — şeridin tamamı yeşil */
.steps.complete .step::before{background:var(--m3)}
.steps.complete .step-dot{background:var(--m3);border-color:var(--m3);color:#fff}
.steps.complete .step-name{color:var(--m3)}
.steps.complete .step.now .step-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--m3) 22%,transparent)}
.steps.complete .step.skip .step-dot{background:transparent;border-color:var(--border);color:var(--faint)}
.steps.complete .step.skip .step-name{color:var(--faint)}

@media print{ .steps-wrap{overflow:visible} .steps{min-width:0} }