:root {
  --bg: #faf9f7;
  --panel: #ffffff;
  --panel-2: #f3f1ee;
  --ink: #1b1a18;
  --muted: #756c60;
  --line: #e5e2dd;
  --brand: #146b70;
  --brand-dark: #0f5458;
  --brand-soft: #e3f1f1;
  --accent: #b4740e;
  --danger: #b0402c;
  --danger-soft: #fbe9e5;
  --ok: #1e7f4f;
  --ok-soft: #e5f4ec;
  --warn: #b4740e;
  --warn-soft: #faf0dc;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(27,26,24,.04), 0 1px 8px rgba(27,26,24,.04);

  /* Sidebar — PYRO navbar dilinin dikey uyarlaması (yalnızca .sidebar icinde kullanilir) */
  --side-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --side-bg: #241F30;
  --side-bg-2: #2C2740;
  --side-ink: rgba(255,255,255,.92);
  --side-muted: rgba(255,255,255,.56);
  --side-faint: rgba(255,255,255,.38);
  --side-line: rgba(255,255,255,.09);
  --side-hover: rgba(255,255,255,.07);
  --side-accent: #F08915;
  --side-accent-deep: #E4472A;
  --side-accent-ink: #241F30;
}

@font-face{ font-family:'PyroDisplay'; src:url('fonts/pyro-display.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'PyroSans'; src:url('fonts/pyro-sans-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'PyroSans'; src:url('fonts/pyro-sans-600.ttf') format('truetype'); font-weight:600; font-display:swap; }

/* Yonetici/Personel paneli (index.html, concierge.html): sidebar'daki PYRO
   dilini ana icerige de tasir. Misafir sayfalari (portal/book/guest) bu
   sinifi tasimaz, dolayisiyla eski teal paletinde kalir. */
body.pyro-theme {
  --bg: #F6F4F0;
  --panel-2: #EFEDE9;
  --ink: #241F30;
  --brand: #F08915;
  --brand-dark: #E4472A;
  --brand-soft: #FCE7D1;
  font-family: 'PyroSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
body.pyro-theme h1,
body.pyro-theme h2,
body.pyro-theme h3 {
  font-family: 'PyroDisplay', Georgia, serif;
  font-weight: 400;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--brand); }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; background: var(--side-bg); background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2) 140%);
  color: var(--side-ink); border-right: 1px solid var(--side-line);
  display: flex; flex-direction: column; padding: 22px 0;
}
.sidebar .logo {
  position: relative; padding: 0 22px 18px 26px; margin-bottom: 4px; font-family: var(--side-serif);
  font-weight: 400; font-size: 17px; color: var(--side-ink); line-height: 1.3; letter-spacing: .01em;
}
.sidebar .logo::before {
  content: ""; position: absolute; left: 22px; top: 3px; width: 4px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--side-accent), var(--side-accent-deep));
}
.sidebar .logo small {
  display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--side-accent); margin-top: 6px;
}
.nav a {
  display: flex; align-items: center; gap: 10px; margin: 2px 10px; padding: 9px 13px; border-radius: 9px;
  color: var(--side-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: none; width: calc(100% - 20px); text-align: left;
  transition: background .12s ease, color .12s ease; position: relative;
}
.nav a:hover { background: var(--side-hover); color: var(--side-ink); }
/* Aktif durum, logonun yanindaki aksan cubugu ile ayni motifi kullanir (dolu blok degil). */
.nav a.active { background: rgba(240,137,21,.14); color: var(--side-ink); font-weight: 700; }
.nav a.active::before {
  content: ""; position: absolute; left: -10px; top: 4px; bottom: 4px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--side-accent), var(--side-accent-deep));
}
.nav a.active .nav-ic svg { color: var(--side-accent); opacity: 1; }
.nav a.active .nav-badge { background: var(--side-accent); color: var(--side-accent-ink); }
.nav-badge { margin-left: auto; background: var(--side-accent-deep); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.nav-ic { font-size: 16px; line-height: 1; display: inline-flex; flex: none; }
.nav-ic svg { width: 1em; height: 1em; opacity: .8; }
.nav-group { margin-bottom: 14px; }
.nav-group-title { display: inline-block; margin: 0 22px 6px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--side-accent), var(--side-accent-deep)); border-radius: 6px; }
.nav-settings-group { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--side-line); }

/* ---------- Mesajlar (birlesik gelen kutusu) ---------- */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 170px); min-height: 420px; }
.msg-list { overflow-y: auto; padding: 8px !important; }
.conv-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; }
.conv-item:hover { background: var(--panel-2); }
.conv-item.active { background: var(--brand-soft); }
.conv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-preview { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
.msg-thread-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.msg-bubbles { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 65%; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); align-self: flex-start; }
.bubble span { display: block; margin-top: 3px; }
.bubble.out { background: var(--brand-soft); align-self: flex-end; }
.bubble.out.ai { background: var(--ok-soft); }
.msg-reply { padding: 12px 18px; border-top: 1px solid var(--line); gap: 10px; }
.msg-reply input { flex: 1; }
@media (max-width: 760px) { .msg-layout { grid-template-columns: 1fr; height: auto; } .msg-list { max-height: 260px; } }
.sidebar .foot { margin-top: auto; padding: 16px 22px 0; border-top: 1px solid var(--side-line); display: flex; flex-direction: column; gap: 6px; }
.sidebar .foot a { color: var(--side-muted); font-size: 12.5px; text-decoration: none; }
.sidebar .foot a:hover { color: var(--side-ink); }
.sidebar .whoami { color: var(--side-faint); }

.main { flex: 1; padding: 26px 32px; overflow-x: hidden; }
.page-title { margin: 0 0 4px; font-size: 22px; }
.page-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

/* ---------- Gunluk Rapor: 2 kademeli ozet (hero + ikincil), sadece bu goruntu icin -
   diger sayfalardaki genel .stats/.stat'a dokunmuyor. Doluluk + konaklayan oncelikli
   metrik olarak buyutuldu; giris/cikis hacmi ve dikkat gerektiren odalar (temizlik/kontrol)
   kucuk ikincil kartlara indi, "dikkat" olanlar bir noktayla isaretlendi. */
.dash-hero-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dash-hero { background: var(--brand-soft); border-radius: var(--radius-lg); padding: 18px 20px; transition: transform .2s ease, box-shadow .2s ease; }
.dash-hero .n { font-size: 32px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; line-height: 1; }
.dash-hero .l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--brand-dark); opacity: .75; margin-top: 6px; }
.dash-hero-track { height: 5px; border-radius: 3px; background: rgba(0,0,0,.1); margin-top: 10px; overflow: hidden; }
.dash-hero-track i { display: block; height: 100%; background: var(--brand-dark); border-radius: 3px; }
.dash-hero.ghost { background: var(--panel); border: 1px solid var(--line); }
.dash-hero.ghost .n { color: var(--ink); } .dash-hero.ghost .l { color: var(--muted); opacity: 1; }
.dash-stats-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; margin-bottom: 24px; }
.dash-stat-sm { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; box-shadow: var(--shadow); position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.dash-stat-sm .n { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dash-stat-sm .l { color: var(--muted); font-size: 10.5px; margin-top: 3px; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.dash-stat-sm .flag { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- Cards / grid ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.stat .n { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 11.5px; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.stat.brand { background: var(--brand-soft); border-color: transparent; }
.stat.brand .n { color: var(--brand-dark); }
.stat.accent .n { color: var(--accent); }
.stat.clickable { cursor: pointer; position: relative; padding-right: 30px; }
.stat.clickable:hover { border-color: var(--brand); }
.stat.clickable::after { content: "\203A"; position: absolute; top: 13px; right: 12px; font-size: 18px; font-weight: 700; color: var(--brand); opacity: .5; }
.stat.clickable:hover::after { opacity: 1; }

/* ---------- Gun Sonu ust panel: kimlik+ana aksiyon (ust sira) ile ikincil
   raporlar+geri-al (alt sira) ayrildi - "Gun Sonu Yap" tek belirgin CTA kalsin,
   nadir/riskli "Geri Al" ise ayri grupta, metin-agirlikli ve soluk dursun. */
.eod-head-top { padding-bottom: 14px; }
.eod-head-bottom { padding-top: 14px; border-top: 1px solid var(--line); }
.eod-reports-group { gap: 8px; }
.eod-undo { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.eod-undo:hover:not(:disabled) { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
.eod-undo:disabled { opacity: .4; cursor: default; }
.eod-guest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eod-guest-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.panel h3 { margin: 0 0 14px; font-size: 14.5px; font-weight: 650; letter-spacing: -0.005em; }

/* ---------- Table ---------- */
/* table() yardimcisinin (app.js) sardigi kutu: tablo dar ekrana sigmadiginda (ör. Talepler'in
   7 sutunu bir telefonda) icerik kesilip kaybolmak yerine yatay kaydirilabilir olur. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }

/* ---------- Rezervasyon kartlari (renderReservationsList/viewReservationsWeek/renderDailyReport) ----------
   Grid kullaniliyor (flex degil): her sutun sabit/orantili genislikte oldugu icin ust uste
   gelen kartlarda misafir/oda/tarih/durum hizasi tam hizali kalir - flex'teki gibi icerik
   uzunluguna gore kayma olmaz. Sutun sirasi grid-template-areas ile belirlendigi icin HTML'deki
   (app.js resCard()) eleman sirasi onemli degil, sadece class isimleri eslesmeli. */
.res-cards { display: flex; flex-direction: column; gap: 10px; }
.res-card {
  display: grid;
  grid-template-columns: 18px 34px minmax(120px, 1.3fr) 56px 130px auto 1fr;
  grid-template-areas: "check avatar who room dates meta actions";
  align-items: center; column-gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 13px 16px; box-shadow: var(--shadow);
}
.res-card .res-check {
  grid-area: check; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--brand);
}
.res-card .res-avatar {
  grid-area: avatar; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand-dark); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
}
.res-card .res-who { grid-area: who; min-width: 0; line-height: 1.35; }
.res-card .res-who b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-card .res-who .fs-12 { display: block; margin-top: 1px; }
.res-card .res-room { grid-area: room; font-weight: 600; font-size: 13px; }
.res-card .res-dates { grid-area: dates; font-size: 13px; font-weight: 600; line-height: 1.4; }
.res-card .res-dates .res-nights { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.res-card .res-meta { grid-area: meta; display: flex; gap: 6px; align-items: center; justify-content: flex-start; }
/* Aksiyon dugmeleri sabit genislikte 2 sutunluk grid'e oturur - Ozet/Duzenle/Sil gibi
   satirdan satira sayisi degisen dugmeler yine de her kartta ayni hizada, duzgun bir
   blok olusturur (flex-wrap'taki gibi rastgele genislikte dagilmaz). */
.res-card .res-actions {
  grid-area: actions; display: grid; grid-template-columns: repeat(2, 104px);
  gap: 6px; justify-content: end; align-content: center;
}
.res-card .res-actions > * { width: 100%; text-align: center; box-sizing: border-box; white-space: normal; line-height: 1.25; }
.res-card .res-actions > .badge { display: flex; align-items: center; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 960px) {
  .res-card {
    grid-template-columns: 18px 34px 1fr 1fr;
    grid-template-areas:
      "check avatar who   who"
      ".     .      room  dates"
      ".     .      meta  meta"
      "actions actions actions actions";
    row-gap: 10px;
  }
  .res-card .res-room, .res-card .res-dates { align-self: start; }
  .res-card .res-meta { justify-content: flex-start; flex-wrap: wrap; }
  .res-card .res-actions {
    justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--line);
    grid-template-columns: repeat(auto-fill, 104px);
  }
}
@media (max-width: 480px) {
  .res-card {
    grid-template-columns: 18px 34px 1fr;
    grid-template-areas:
      "check avatar who"
      ".     .      room"
      ".     .      dates"
      ".     .      meta"
      "actions actions actions";
    row-gap: 8px;
  }
}

/* ---------- Giris ekrani ---------- */
.login-bg { display: none; position: fixed; inset: 0; background: var(--brand-dark); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.login-bg.open { display: flex; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; width: 100%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; }
.login-card h2 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.login-card p { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.login-card input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; margin-bottom: 12px; }
.login-card .btn { width: 100%; padding: 11px; font-size: 15px; }
.login-err { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 6px; }

/* ---------- Musaitlik Takvimi ---------- */
table.cal { border-collapse: separate; border-spacing: 0; min-width: 720px; }
table.cal th, table.cal td { border: 1px solid var(--line); padding: 0; }
.cal-corner, .cal-room { background: var(--bg); font-weight: 700; color: var(--ink); text-transform: none; font-size: 14px; text-align: center; padding: 8px 12px; position: sticky; left: 0; z-index: 1; white-space: nowrap; }
.cal-day { text-align: center; padding: 6px 4px; line-height: 1.15; min-width: 44px; }
.cal-day .cal-wd { display:block; font-size: 10px; color: var(--muted); }
.cal-day .cal-dn { display:block; font-size: 15px; font-weight: 700; color: var(--ink); }
.cal-day .cal-mo { display:block; font-size: 9px; color: var(--muted); text-transform: uppercase; }
.cal-day.today { background: var(--brand); }
.cal-day.today .cal-wd, .cal-day.today .cal-dn, .cal-day.today .cal-mo { color: #fff; }
.cal-day.wknd { background: #eef1f5; }
.cal-cell { height: 40px; position: relative; }
.cal-cell.free.wknd { background: #f5f7fa; }
.cal-cell.busy { background: var(--brand); }
.cal-cell.busy.booking { background: #2f6fb0; }
.cal-cell.busy.airbnb { background: #d05a6e; }
.cal-cell.busy.expedia { background: #b4740e; }
.cal-cell.busy.agoda { background: #7a5cc4; }
.cal-cell.busy.tripcom { background: #2e9e6b; }
.cal-cell.busy.direct { background: var(--brand); }
.cal-cell.busy.cal-dim { opacity: .3; }
.cal-guest { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 2; pointer-events: none; }
.cal-legend { display:flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cal-legend i.dot { display:inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.cal-legend .booking { background: #2f6fb0; } .cal-legend .airbnb { background: #d05a6e; } .cal-legend .expedia { background: #b4740e; }
.cal-legend .agoda { background: #7a5cc4; } .cal-legend .tripcom { background: #2e9e6b; }
.cal-legend .direct { background: var(--brand); } .cal-legend .free-dot { background: var(--ok-soft); border: 1px solid var(--ok); }
.cal-legend .busy-dot { background: var(--danger-soft); border: 1px solid var(--danger); }

/* ---------- Musaitlik Takvimi: ay gorunumu (gun kutusu icinde oda seritleri) ----------
   Her gun hucresi sabit boyutta kalir; oda sayisi oteller arasinda degistigi (4-20+) icin
   serit alani .cal-m-strips icinde dikey kayar, hucre boyu asla degismez. */
.cal-m-head { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; padding: 0 1px 7px; }
.cal-m-wd { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.cal-m-grid { display: grid; grid-template-columns: repeat(7,1fr); grid-auto-rows: 108px; gap: 4px; }
.cal-m-cell {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 5px 4px; overflow: hidden; display: flex; flex-direction: column;
}
.cal-m-cell.out { opacity: .4; }
.cal-m-cell.today { background: var(--brand-soft); border-color: var(--brand); }
.cal-m-daynum { font-size: 12px; font-weight: 700; margin-bottom: 3px; flex: none; }
.cal-m-cell.today .cal-m-daynum { color: var(--brand-dark); }
.cal-m-strips { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cal-m-strip {
  font-size: 10.5px; line-height: 16px; height: 16px; border-radius: 3px; padding: 0 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.cal-m-strip.free { background: var(--ok-soft); color: var(--ok); text-align: left; }
.cal-m-strip.busy { background: var(--danger-soft); color: var(--danger); text-align: right; font-weight: 600; }
.cal-m-strip.busy.cal-dim { opacity: .35; }
.cal-m-dots { display: none; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.cal-m-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cal-m-dot.free { background: var(--ok); }
.cal-m-dot.busy { background: var(--danger); }
@media (max-width: 720px) {
  .cal-m-grid { grid-auto-rows: 86px; }
  .cal-m-wd { font-size: 9.5px; }
  .cal-m-cell { cursor: pointer; }
  .cal-m-strips { display: none; }
  .cal-m-dots { display: flex; }
}

/* ---------- Musaitlik Takvimi: gun detayi (salt-okunur, dokunma ile acilan popup) ---------- */
.cal-day-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.cal-day-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; }
.cal-day-row.free { background: var(--ok-soft); color: var(--ok); }
.cal-day-row.busy { background: var(--danger-soft); color: var(--danger); }
.cal-day-room { font-weight: 700; flex: none; }
.cal-day-status { text-align: right; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.badge.temiz, .badge.confirmed { background: var(--ok-soft); color: var(--ok); }
.badge.kirli, .badge.yeni, .badge.iptal { background: var(--danger-soft); color: var(--danger); }
.badge.bakimda, .badge.no-show, .badge.pending-payment { background: var(--warn-soft); color: var(--warn); }
.badge.in-house { background: var(--brand-soft); color: var(--brand-dark); }
.badge.tamamlandi, .badge.islemde { background: var(--panel-2); color: var(--muted); }
.badge.checked-out { background: var(--panel-2); color: var(--muted); }
.badge.kontrol { background: var(--brand-soft); color: var(--brand-dark); }
.badge.accent-badge { background: var(--warn-soft); color: var(--warn); }
/* Kanal rozetleri (rez. kartındaki Kanal sütunu) bilerek durum rozetleriyle (Onaylandı/
   Konaklıyor/Çıktı/İptal = yeşil/brass/gri/kırmızı) AYNI renk ailesini kullanmaz - aksi halde
   "Airbnb" (önceden kırmızı) ile "İptal" (kırmızı) ayırt edilemiyordu. Her kanalın da kendi
   arasında benzersiz bir rengi var, böylece bir kartta kanal + durum rozeti yan yana
   gorundugunde goz hicbir ikisini ayni renk sanmiyor. */
.badge.direct { background: #e1f2f5; color: #0e7c96; }
.badge.booking { background: #e1ecfb; color: #2158a6; }
.badge.tripcom { background: #e8edf0; color: #3e5c6b; }
.badge.expedia { background: #e7e6fa; color: #4a3fb0; }
.badge.agoda { background: #f2e6f7; color: #8341a8; }
.badge.airbnb { background: #fbe2ee; color: #c2376f; }

/* ---------- Gunluk rapor / ayarlar ---------- */
.sec { margin: 22px 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.back-link { display:inline-block; color: var(--brand); cursor:pointer; font-size:13.5px; margin-bottom:8px; font-weight:600; }
.whoami { display:block; color:#9fc3c0; font-size:12px; margin-top:8px; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--brand-dark); color:#fff; padding: 13px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); transition: all .3s; z-index: 200; }
.sidebar .today-badge { display: inline-block; margin: 0 22px 16px 26px; padding: 5px 12px; background: var(--side-hover); border: 1px solid var(--side-line); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--side-muted); }
.toast.show { opacity: 1; transform: translateY(0); }
.back-link:hover { text-decoration: underline; }
/* Misafir panelinde geri donus butonu: daha buyuk, dikkat cekici renk, dokunma alani genis */
.portal-main .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 15px; font-weight: 700; padding: 8px 16px; margin-bottom: 12px; border: 1.5px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 20%, white); }
.portal-main .back-link:hover, .portal-main .back-link:active { background: var(--accent); color: #fff; text-decoration: none; }
.settings-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.settings-card { display:flex; gap:14px; align-items:center; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:15px 17px; cursor:pointer; box-shadow: var(--shadow); transition: border-color .12s; color: inherit; text-decoration: none; }
.settings-card:hover { border-color: var(--brand); }
.settings-card .ic { font-size: 24px; flex-shrink:0; }
.id-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.id-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.qr-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.qr-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; text-align:center; }
.qr-card img { width: 100%; max-width: 240px; }
.qr-hotel { font-weight: 700; color: var(--brand-dark); font-size: 15px; }
.qr-room { font-size: 22px; font-weight: 800; color: var(--ink); margin: 4px 0 8px; }
.qr-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ---------- Utilities (inline style temizligi; CSP style-src self) ----------
   !important: eski inline style oncelik davranisini birebir korumak icin. */
.ai-center { align-items: center !important; }
.ai-start { align-items: flex-start !important; }
.b-line { border: 1px solid var(--line) !important; }
.b-none { border: none !important; }
.bb-line { border-bottom: 1px solid var(--line) !important; }
.bc-brand { border-color: var(--brand) !important; }
.bc-danger { border-color: var(--danger) !important; }
.bg-none { background: none !important; }
.bg-panel2 { background: var(--panel-2) !important; }
.bg-softblue { background: #f7f9fb !important; }
.bg-white { background: #fff !important; }
.br-10 { border-radius: 10px !important; }
.br-12 { border-radius: 12px !important; }
.bt-line { border-top: 1px solid var(--line) !important; }
.bt-none { border-top: none !important; }
.cur-p { cursor: pointer !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-ib { display: inline-block !important; }
.ff-inherit { font-family: inherit !important; }
.flex-1 { flex: 1 !important; }
.flex-2 { flex: 2 !important; }
.flex-none { flex: 0 0 auto !important; }
.fs-115 { font-size: 11.5px !important; }
.fs-12 { font-size: 12px !important; }
.fs-125 { font-size: 12.5px !important; }
.fs-13 { font-size: 13px !important; }
.fs-135 { font-size: 13.5px !important; }
.fs-14 { font-size: 14px !important; }
.fs-145 { font-size: 14.5px !important; }
.fs-15 { font-size: 15px !important; }
.fs-22 { font-size: 22px !important; }
.fw-400 { font-weight: 400 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.gap-10 { gap: 10px !important; }
.gap-14 { gap: 14px !important; }
.gap-4 { gap: 4px !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.jc-between { justify-content: space-between !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-16 { line-height: 1.6 !important; }
.lh-17 { line-height: 1.7 !important; }
.lh-18 { line-height: 1.8 !important; }
.lh-19 { line-height: 1.9 !important; }
.lh-20 { line-height: 2 !important; }
.m-0 { margin: 0 !important; }
.m-0-0-8 { margin: 0 0 8px !important; }
.m-10-0 { margin: 10px 0 !important; }
.m-10-0-16 { margin: 10px 0 16px !important; }
.m-10-0-4 { margin: 10px 0 4px !important; }
.m-14-0 { margin: 14px 0 !important; }
.m-2 { margin: 2px !important; }
.m-4-0 { margin: 4px 0 !important; }
.m-6-0 { margin: 6px 0 !important; }
.m-8-0 { margin: 8px 0 !important; }
.m-8-0-4 { margin: 8px 0 4px !important; }
.maxh-160 { max-height: 160px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-6 { margin-bottom: 6px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mh-140 { min-height: 140px !important; }
.mh-220 { min-height: 220px !important; }
.mh-300 { min-height: 300px !important; }
.mh-50 { min-height: 50px !important; }
.mh-60 { min-height: 60px !important; }
.mh-70 { min-height: 70px !important; }
.mh-80 { min-height: 80px !important; }
.mh-90 { min-height: 90px !important; }
.minw-110 { min-width: 110px !important; }
.minw-120 { min-width: 120px !important; }
.minw-130 { min-width: 130px !important; }
.minw-150 { min-width: 150px !important; }
.minw-160 { min-width: 160px !important; }
.minw-170 { min-width: 170px !important; }
.minw-180 { min-width: 180px !important; }
.ml-6 { margin-left: 6px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-18 { margin-top: 18px !important; }
.mt-2 { margin-top: 2px !important; }
.mt-4 { margin-top: 4px !important; }
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.mtn-4 { margin-top: -4px !important; }
.mtn-6 { margin-top: -6px !important; }
.mw-140 { max-width: 140px !important; }
.mw-160 { max-width: 160px !important; }
.mw-full { max-width: 100% !important; }
.nowrap { white-space: nowrap !important; }
.o-auto { overflow: auto !important; }
.ox-auto { overflow-x: auto !important; }
.p-0 { padding: 0 !important; }
.p-10-0 { padding: 10px 0 !important; }
.p-10-0-0 { padding: 10px 0 0 !important; }
.p-10-8 { padding: 10px 8px !important; }
.p-12-14 { padding: 12px 14px !important; }
.p-6-0 { padding: 6px 0 !important; }
.p-8-0 { padding: 8px 0 !important; }
.p-8-0-14 { padding: 8px 0 14px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-20 { padding-left: 20px !important; }
.pre-wrap { white-space: pre-wrap !important; }
.pt-0 { padding-top: 0 !important; }
.select-all { user-select: all !important; }
.ta-center { text-align: center !important; }
.td-none { text-decoration: none !important; }
.text-brand { color: var(--brand) !important; }
.text-brand-dark { color: var(--brand-dark) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--muted) !important; }
.text-ok { color: var(--ok) !important; }
.text-warn { color: var(--warn) !important; }
.w-100 { width: 100% !important; }
.w-70 { width: 70px !important; }
.w-auto { width: auto !important; }
.wrap { flex-wrap: wrap !important; }

/* Dinamik durum siniflari */
.row-urgent { background: var(--danger-soft); }

/* Analitik bar grafigi (app.js sablonundan tasindi) */
.an-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.an-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; }
.an-label { flex:0 0 42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.an-track { flex:1; height:10px; background:var(--bg); border-radius:6px; overflow:hidden; }
.an-fill { display:block; height:100%; border-radius:6px; transition:width .3s; }
.an-val { flex:0 0 auto; min-width:34px; text-align:right; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Gelismeler hava durumu seridi (app.js sablonundan tasindi) */
.wx-strip { display:flex; gap:10px; overflow-x:auto; }
.wx-day { flex:0 0 auto; text-align:center; padding:8px 12px; background:var(--bg); border-radius:8px; min-width:56px; }
.dev-warn { background:var(--danger-soft); border-radius:8px; }

/* Misafir paneli: etkinlik takvimi (portal.js pgCalendar) */
.gcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:8px; }
.gcal-wdays { margin-top:14px; margin-bottom:2px; }
.gcal-wday { text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:2px 0; }
.gcal-cell { position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; font-size:13px; background:var(--bg); }
.gcal-cell.gcal-empty { background:none; cursor:default; }
.gcal-cell.gcal-stay { background:var(--brand-soft); font-weight:700; color:var(--brand-dark); }
.gcal-cell.gcal-today { box-shadow: inset 0 0 0 2px var(--brand); }
.gcal-cell.gcal-sel { box-shadow: inset 0 0 0 2px var(--accent); }
.gcal-daynum { line-height:1; }
.gcal-dot { font-size:7px; letter-spacing:1px; color:var(--accent); line-height:1; margin-top:2px; }
.gcal-legend-swatch { display:inline-block; }
.gcal-legend-swatch.gcal-legend-stay { width:11px; height:11px; border-radius:3px; background:var(--brand-soft); vertical-align:middle; }
.gcal-legend-swatch.gcal-legend-dot { color:var(--accent); font-weight:700; }

@media print {
  .sidebar, .no-print, .back-link, .page-sub, .btn, .row .spacer { display: none !important; }
  .main { padding: 0 !important; }
  .app { display: block !important; }
  .qr-grid { grid-template-columns: 1fr 1fr; }
  .qr-card { break-inside: avoid; page-break-inside: avoid; }
  .modal-bg { position: static !important; background: none !important; padding: 0 !important; }
  .modal { box-shadow: none !important; border: none !important; max-height: none !important; width: 100% !important; overflow: visible !important; }
}

/* ---------- Rezervasyon Ozeti (Voucher) ---------- */
.voucher { max-width: 560px; margin: 0 auto; font-size: 13px; border: 1px solid #BFBFBF; background: #fff; color: #222; }
.voucher-header { background: var(--brand-dark); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.voucher-header-brand { display: flex; align-items: center; gap: 10px; }
.voucher-logo { display: block; width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; flex-shrink: 0; }
.voucher-header-title { font-size: 15px; font-weight: 700; }
.voucher-header-sub { font-size: 11px; opacity: .8; margin-top: 1px; }
.voucher-header-no { text-align: right; font-size: 11px; opacity: .85; line-height: 1.5; }
.voucher-header-no b { font-size: 13px; display: block; }
.voucher-body { padding: 16px 18px; }
.voucher-section-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--brand-dark); margin: 18px 0 8px; }
.voucher-section-title:first-child { margin-top: 0; }
.voucher-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); border: 1px solid #BFBFBF; }
.voucher-info-cell { padding: 9px 10px; border-right: 1px solid #BFBFBF; border-bottom: 1px solid #BFBFBF; }
.voucher-info-cell:nth-last-child(-n+1) { border-right: none; }
.voucher-info-label { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.voucher-info-value { font-size: 13.5px; font-weight: 700; }
.voucher-table { width: 100%; border-collapse: collapse; border: 1px solid #BFBFBF; }
.voucher-table th, .voucher-table td { border-bottom: 1px solid #BFBFBF; padding: 8px 12px; text-align: left; font-size: 12.5px; }
.voucher-table tr:last-child th, .voucher-table tr:last-child td { border-bottom: none; }
.voucher-table th { background: #F1F1F1; font-weight: 600; width: 38%; }
.voucher-table.voucher-price th, .voucher-table.voucher-price td { font-weight: 700; }
.voucher-table.voucher-price tr.total th, .voucher-table.voucher-price tr.total td { background: #F1F1F1; }
.voucher-table tr[data-act] { cursor: pointer; }
.voucher-table tr[data-act]:hover th, .voucher-table tr[data-act]:hover td { background: #F1F1F1; }
.voucher-price td.due { color: var(--warn); }
.voucher-price td.ok { color: var(--ok); }
.voucher-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 16px; padding-top: 12px; border-top: 1px dashed #BFBFBF; }
@media print {
  .voucher { border: none; }
  .voucher-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .voucher-table th, .voucher-table.voucher-price tr.total th, .voucher-table.voucher-price tr.total td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Buttons / forms ---------- */
.btn { background: var(--brand); color:#fff; border: 1px solid var(--brand); padding: 8px 15px; border-radius: 6px; font-size: 13.5px; cursor: pointer; font-weight: 600; box-shadow: var(--shadow); }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--line); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.spacer { flex: 1; }

label { display:block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; font-family: inherit; background: var(--panel); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea { resize: vertical; min-height: 60px; }
.pinfo-static { padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; background: var(--panel-2); color: var(--ink); font-weight: 600; }
/* Telefon giris maskesi: +90 sabit on ek + arkada gri sablon ("5XX XXX XXXX"),
   misafir yazdikca ustune biner (ayni monospace hiza sayesinde rakamlar sablonu kapatir). */
.phone-mask-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 8px 11px; }
.phone-mask-wrap:focus-within { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.phone-cc { position: relative; border-right: 1px solid var(--line); padding-right: 8px; }
.phone-cc-btn { border: none; background: none; font-weight: 700; color: var(--ink); font-size: 13.5px; white-space: nowrap; cursor: pointer; padding: 0; font-family: inherit; }
.phone-cc-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: 240px; max-width: 70vw; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; }
.phone-cc-panel.hidden { display: none; }
.phone-cc-search { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 11px; font-size: 13.5px; }
.phone-cc-search:focus { outline: none; }
.phone-cc-items { max-height: 220px; overflow-y: auto; }
.phone-cc-item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 13.5px; cursor: pointer; }
.phone-cc-item:hover { background: var(--panel-2); }
.phone-cc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-cc-dial { color: var(--muted); font-size: 12.5px; }
.phone-cc-empty { padding: 10px 11px; font-size: 13px; color: var(--muted); }
.phone-mask-field { position: relative; flex: 1; }
.phone-mask-ghost { position: absolute; left: 0; top: 0; color: var(--muted); pointer-events: none; white-space: pre; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; letter-spacing: .5px; line-height: 1.3; }
.phone-mask-wrap #regPhone { border: none; background: transparent; padding: 0; width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; letter-spacing: .5px; }
.phone-mask-wrap #regPhone:focus { outline: none; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,20,18,.5); display:none; align-items:center; justify-content:center; z-index: 50; padding: 20px; }
.modal-bg.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; width: 520px; max-width: 100%; max-height: 90vh; overflow:auto; box-shadow: 0 20px 60px rgba(20,20,18,.25); }
.modal h3 { margin: 0 0 6px; font-weight: 650; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.empty { text-align:center; color: var(--muted); padding: 30px; }

/* ---------- Guest chat ---------- */
.chat-wrap { max-width: 640px; margin: 0 auto; min-height: 100vh; display:flex; flex-direction:column; background: var(--panel); box-shadow: var(--shadow); }
.chat-head { background: var(--brand-dark); color:#fff; padding: 18px 22px; }
.chat-head.book { background: linear-gradient(135deg, var(--brand-dark), var(--accent)); }
.chat-head h1 { margin:0; font-size: 18px; }
.chat-head p { margin: 3px 0 0; font-size: 13px; color:#a7ccc9; }
.head-brand { display:flex; align-items:center; gap:12px; }
.head-logo { display:block; width: 42px; height: 42px; object-fit: contain; background:#fff; border-radius: 10px; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.2); flex-shrink:0; }
.room-bar { display:flex; align-items:center; gap: 8px; padding: 10px 20px; background:#eef4f3; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--brand-dark); flex-wrap: wrap; }
.room-bar input { width: 90px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.room-bar .btn.sm { padding: 6px 12px; font-size: 13px; }
.room-bar.done { background:#e7f2ec; color: var(--ok); font-weight: 600; }
.room-bar .change { margin-left:auto; background:none; border:none; color: var(--brand); cursor:pointer; font-size: 12.5px; text-decoration: underline; }
.room-bar .err { color:#b3462e; }
.chat-body { flex:1; padding: 20px; overflow-y:auto; display:flex; flex-direction:column; gap: 12px; background:#f7f9fb; }
.msg { max-width: 80%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--brand); color:#fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background:#fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .ts { display:block; margin-top: 4px; font-size: 10.5px; opacity: .6; }
.msg.user .ts { color: rgba(255,255,255,.75); text-align: right; }
.msg.bot .ts { color: var(--muted); }
.chips { display:flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 10px; background:#f7f9fb; }
.chip { background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 7px 13px; font-size: 13px; cursor:pointer; color: var(--brand-dark); }
.chip:hover { background: var(--brand); color:#fff; border-color: var(--brand); }
.chat-input { display:flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background:#fff; }
.chat-input input { flex:1; }
#consentGate { margin: 14px; padding: 18px; }
#consentGate .consent-icon {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px;
  display:flex; align-items:center; justify-content:center; font-size: 17px;
  background: linear-gradient(135deg, var(--brand-soft), var(--warn-soft));
}
#consentGate .consent-lead { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 4px; line-height: 1.4; }
#consentGate .consent-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 9px; }
#consentGate label { accent-color: var(--brand); }
#consentGate #consentBtn { width: 100%; transition: opacity .15s; }
#consentGate #consentBtn:disabled { opacity: .5; cursor: not-allowed; }
#chatArea { flex:1; display:flex; flex-direction:column; min-height:0; }
.typing { font-size: 13px; color: var(--muted); padding: 0 4px; }
.msg.typing { display:flex; align-items:center; gap: 4px; padding: 13px 14px; }
.msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .45; animation: typingBounce 1.1s infinite ease-in-out; }
.msg.typing span:nth-child(2) { animation-delay: .15s; }
.msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: translateY(0); opacity:.4; } 40% { transform: translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .msg.typing span { animation: none; opacity: .8; } }

/* Erisilebilirlik: misafir panelindeki tum etkilesimli ogeler icin net focus halkasi
   (portal/guest/book ucu de body.guest-theme tasir, tek kuralla hepsine uygulanir). */
body.guest-theme button:focus-visible,
body.guest-theme .chip:focus-visible,
body.guest-theme .menu-card:focus-visible,
body.guest-theme input:focus-visible,
body.guest-theme textarea:focus-visible,
body.guest-theme a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(36,31,48,.45);
}

/* ---------- Misafir paneli (portal) ---------- */
.head-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.lang-row { display:flex; gap:4px; flex-shrink:0; }
.lang-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:6px; padding:4px 8px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.lang-btn:hover { background:rgba(255,255,255,.25); }
.lang-btn.active { background:#fff; color:var(--brand-dark); border-color:#fff; }
.lang-gate { text-align:center; padding: 34px 10px; }
.lang-gate .lg-icon { font-size: 44px; }
.lang-gate .lg-title { font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.7; margin: 12px 0 22px; }
.lang-gate .lg-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 360px; margin: 0 auto; }
.lg-btn { display:flex; flex-direction:column; align-items:center; gap:6px; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 10px; font-size: 15px; font-weight: 700; color: var(--ink); cursor:pointer; font-family:inherit; transition: border-color .12s, transform .08s; }
.lg-btn:hover { border-color: var(--brand); }
.lg-btn:active { transform: scale(.96); }
.lg-btn .lg-flag { font-size: 30px; }
.ptabs { display:flex; background:#fff; border-bottom: 1px solid var(--line); }
.ptab { flex:1; padding: 12px 6px; background:none; border:none; border-bottom: 3px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor:pointer; font-family: inherit; }
.ptab.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.ptab-page { flex:1; overflow-y:auto; background:#f7f9fb; padding: 16px; display:flex; flex-direction:column; gap: 14px; }
.ptab-page .chat-body { border-radius: 12px; }
.pcard { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.pcard h3 { margin: 0 0 10px; font-size: 15.5px; color: var(--ink); }
.pinfo-row { display:flex; justify-content:space-between; align-items:center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pinfo-row:last-child { border-bottom: none; }
.pinfo-row b { text-align:right; }
.pinfo-block { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.pinfo-block:last-child { border-bottom: none; }
.portal .chat-input { border-top: none; padding-top: 10px; }
.svc-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.svc-info b { font-size: 14.5px; color: var(--ink); }
.svc-price { font-weight: 700; color: var(--brand-dark); font-size: 14px; margin-top: 2px; }
.svc-form { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.grid2p { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2p input, .svc-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.grid2p label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.portal-main { flex:1; overflow-y:auto; background:#f7f9fb; padding: 16px; }
.portal-main:has(> .pcard-center) { display:flex; flex-direction:column; }
.pcard-center { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.menu-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-card { display:block; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 14px; text-align:center; cursor:pointer; text-decoration:none; transition: transform .1s, border-color .1s; }
.menu-card:active { transform: scale(.97); }
.menu-card:hover { border-color: var(--brand); }
.menu-card .mic { font-size: 30px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.menu-card .mic svg { width: 30px; height: 30px; }
/* Her karta konusuna uygun farkli renk - hepsi ayni accent tonunda olunca
   kartlar birbirinden ayirt edilemiyordu. */
.mic.mic-daily { color: #e8a93b; }
.mic.mic-calendar { color: #4f7cde; }
.mic.mic-info { color: #4a90c4; }
.mic.mic-id { color: #7c5cbf; }
.mic.mic-checkinout { color: #3fa66b; }
.mic.mic-emergency { color: #d9453d; }
.mic.mic-help { color: #3b9fd8; }
.mic.mic-request { color: #d65ba0; }
.mic.mic-services { color: #5b6b7a; }
.mic.mic-restaurant { color: #e07a3f; }
.mic.mic-rental { color: #2f6690; }
.mic.mic-chat { color: #8a5fd1; }
.mic.mic-guide { color: #2f9e74; }
.mic.mic-review { color: #e0b324; }
.mic.mic-summary { color: #8a6d4b; }
.mic.mic-whatsapp { color: #25d366; }
.mic.mic-website { color: #3576d1; }
.mic.mic-privacy { color: #6b7280; }
.menu-card .mtitle { font-weight: 700; font-size: 15px; margin-top: 6px; color: var(--ink); }
.menu-card .mdesc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.io-actions { display:flex; gap: 12px; margin-bottom: 14px; }
.io-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:none; border-radius: 24px; padding: 20px 8px; font-size: 15px; font-weight: 700; color:#fff; cursor:pointer; font-family:inherit; line-height:1.2; box-shadow: 0 8px 20px rgba(0,0,0,.14); transition: transform .12s, box-shadow .12s; }
.io-btn:active { transform: scale(.96); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.io-ic { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.22); }
.io-ic svg { width:24px; height:24px; }
.io-btn.in { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.io-btn.out { background: linear-gradient(135deg, var(--accent), #c0392b); }
.ptitle { font-size: 20px; margin: 4px 0 14px; color: var(--ink); }
.fb-stars { display:flex; gap: 8px; font-size: 30px; }
.fb-star { cursor:pointer; filter: grayscale(1) opacity(.45); transition: filter .1s; }
.fb-star.on { filter: none; }
.call-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; text-decoration:none; color: var(--ink); }
.call-row:last-child { border-bottom:none; }
.call-row b { color: var(--brand-dark); }
.acc { border-bottom: 1px solid var(--line); }
.acc:last-child { border-bottom: none; }
.acc-q { width:100%; text-align:left; background:none; border:none; padding: 13px 0; font-size: 15px; font-weight: 600; color: var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:inherit; }
.acc-q span { color: var(--brand); font-size: 20px; }
.acc-a { display:none; padding: 0 0 13px; font-size: 14px; line-height: 1.6; color: var(--muted); white-space: normal; }
.acc.open .acc-a { display:block; }
.acc.open .acc-q span { transform: rotate(45deg); }
.weather-card { display:flex; align-items:center; gap: 18px; background: linear-gradient(135deg, #eef7f6, #fdf6ec); }
.w-icon { font-size: 52px; }
.w-desc { font-weight: 700; font-size: 17px; color: var(--ink); }
.w-temp { font-size: 26px; font-weight: 800; color: var(--brand-dark); }

/* ---------- Misafir paneli — cam (glassmorphism) teması ----------
   Yalnizca body.guest-theme (portal.html) icinde etkili; yonetici/personel
   panelini (pyro-theme) veya diger sayfalari etkilemez. */
body.guest-theme {
  --brand: #F08915;
  --brand-dark: #E4472A;
  background: #1A1624 url('guest-bg.svg?v=2') center / cover no-repeat fixed;
  min-height: 100vh;
}
body.guest-theme h1, body.guest-theme h2, body.guest-theme h3,
body.guest-theme .ptitle, body.guest-theme .mtitle,
body.guest-theme .lg-title, body.guest-theme #pTitle {
  font-family: var(--side-serif);
  letter-spacing: .2px;
}
body.guest-theme #pWelcome { font-style: italic; opacity: .92; }

body.guest-theme .chat-wrap {
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 25px 70px rgba(5,30,32,.45);
}
@media (min-width: 721px) {
  body.guest-theme .chat-wrap { margin: 24px auto; border-radius: 22px; overflow: hidden; max-height: calc(100vh - 48px); }
}
body.guest-theme .chat-head {
  background: linear-gradient(135deg, rgba(36,31,48,.65), rgba(44,39,64,.78));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
body.guest-theme .chat-head.book { background: linear-gradient(135deg, rgba(44,39,64,.72), rgba(240,137,21,.6)); }
body.guest-theme .room-bar, body.guest-theme .ptabs {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.4);
}
body.guest-theme .room-bar.done { background: rgba(231,242,236,.7); }
body.guest-theme .portal-main, body.guest-theme .ptab-page, body.guest-theme .chat-body, body.guest-theme .chips {
  background: transparent;
}
body.guest-theme .chat-body { background: rgba(255,255,255,.12); }
body.guest-theme .msg.bot { background: rgba(255,255,255,.85); border-color: rgba(255,255,255,.6); }
body.guest-theme .msg.user {
  background: linear-gradient(135deg, rgba(36,31,48,.85), rgba(44,39,64,.9));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.guest-theme .chip {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.55);
}
body.guest-theme .chip:hover { background: rgba(36,31,48,.85); }
body.guest-theme .chat-input {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.4);
}

body.guest-theme .pcard, body.guest-theme .menu-card, body.guest-theme .settings-card,
body.guest-theme .qr-card, body.guest-theme .weather-card, body.guest-theme .modal {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(6,40,43,.18);
}
body.guest-theme .lg-btn {
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.55);
}
body.guest-theme .modal-bg { background: rgba(6,30,32,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.guest-theme .room-bar input, body.guest-theme .chat-input input,
body.guest-theme .grid2p input, body.guest-theme .svc-form textarea,
body.guest-theme #guestCodeInput, body.guest-theme #gateCodeInput {
  background: rgba(255,255,255,.85);
  border-color: rgba(36,31,48,.25);
}
body.guest-theme .pinfo-static {
  background: rgba(255,255,255,.55);
  border-color: rgba(36,31,48,.2);
}

/* Camsi tuşlar */
body.guest-theme .btn {
  background: linear-gradient(135deg, rgba(36,31,48,.6), rgba(44,39,64,.72));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 6px 18px rgba(6,40,43,.3), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
body.guest-theme .btn:hover {
  background: linear-gradient(135deg, rgba(36,31,48,.78), rgba(44,39,64,.88));
}
body.guest-theme .btn.ghost {
  background: rgba(255,255,255,.4);
  color: var(--brand-dark);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: none;
}
body.guest-theme .btn.ghost:hover { background: rgba(255,255,255,.6); }
body.guest-theme .io-btn.in {
  background: linear-gradient(135deg, rgba(36,31,48,.62), rgba(44,39,64,.76));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
}
body.guest-theme .io-btn.out {
  background: linear-gradient(135deg, rgba(240,137,21,.62), rgba(228,71,34,.76));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.4);
}
body.guest-theme .lang-btn {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---------- Yonetici/Personel paneli (pyro-theme) — cam (glassmorphism) temasi ----------
   Yalnizca body.pyro-theme (index.html, concierge.html) icinde etkili; misafir
   panelinin (guest-theme) kendi cam temasini etkilemez, ikisi paralel yasar. */
body.pyro-theme .app {
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(240,137,21,.28), transparent 60%),
    radial-gradient(ellipse 55% 55% at 95% 95%, rgba(140,124,174,.32), transparent 60%),
    linear-gradient(160deg, #EFE9DE 0%, #F6F2EA 45%, #ECE6F2 100%);
}
body.pyro-theme .sidebar {
  background: rgba(36,31,48,.5);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border-right: 1px solid rgba(255,255,255,.12);
}
body.pyro-theme .stat,
body.pyro-theme .panel,
body.pyro-theme .dash-stat-sm,
body.pyro-theme .dash-hero.ghost {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
}
body.pyro-theme .stat.brand,
body.pyro-theme .dash-hero:not(.ghost) { background: rgba(248,230,210,.6); border-color: rgba(255,255,255,.6); }
body.pyro-theme .stat.accent { background: rgba(250,233,229,.6); border-color: rgba(255,255,255,.6); }
body.pyro-theme .panel:hover,
body.pyro-theme .stat:hover,
body.pyro-theme .dash-stat-sm:hover,
body.pyro-theme .dash-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(36,31,48,.35);
}
@media (prefers-reduced-motion: reduce) {
  body.pyro-theme .panel:hover,
  body.pyro-theme .stat:hover,
  body.pyro-theme .dash-stat-sm:hover,
  body.pyro-theme .dash-hero:hover { transform: none; }
}

/* backdrop-filter desteklemeyen tarayicilar icin daha opak yedek */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.guest-theme .chat-wrap { background: rgba(250,249,247,.94); }
  body.guest-theme .portal-main, body.guest-theme .ptab-page { background: rgba(247,249,251,.92); }
  body.guest-theme .pcard, body.guest-theme .menu-card, body.guest-theme .modal,
  body.guest-theme .settings-card, body.guest-theme .qr-card, body.guest-theme .weather-card {
    background: rgba(255,255,255,.94);
  }
  body.pyro-theme .sidebar { background: var(--side-bg); }
  body.pyro-theme .stat, body.pyro-theme .panel { background: rgba(255,255,255,.94); }
}

@media (max-width: 720px) {
  /* Sidebar: ikon-rail kalir (kullanicinin tercihi) ama 60px'ten 86px'e genisler ve her
     ikonun altina kisa bir etiket eklenir (nav-ic/nav-lb - bkz. index.html/concierge.html,
     flexbox zaten bunlari dikeyde ustuste diziyor). position:sticky + overflow-y:auto: admin
     hesabinin 20+ nav ogesi tek ekran boyuna sigmaz - rail artik kendi icinde kayar, "Ayarlar"
     gibi listenin sonundaki ogeler viewport altinda kaybolup erisilemez kalmaz. */
  .sidebar { width: 86px; height: 100vh; position: sticky; top: 0; overflow-y: auto; }
  .sidebar .logo, .sidebar .today-badge, .nav-group-title { display:none; }
  /* .foot (cikis + diger panellere gecis linkleri) rail'de gizlenmiyordu, kullanici
     telefonda bu kisayollara erisemiyordu - rail genisligine (86px) sigacak sekilde
     kucultulup merkeze hizalandi, metinler sarmali kalabilir. */
  .sidebar .foot { margin-top: 10px; padding: 10px 4px 16px; align-items: center; text-align: center; }
  .sidebar .foot a, .sidebar .foot .whoami { font-size: 9.5px; line-height: 1.3; }
  .nav a { flex-direction: column; gap: 3px; margin: 2px 6px; padding: 9px 2px 7px; position: relative; }
  .nav a.active { background: var(--side-accent); color: var(--side-accent-ink); }
  .nav a.active::before { display: none; }
  .nav a.active .nav-ic svg { color: var(--side-accent-ink); }
  .nav-ic { font-size: 18px; line-height: 1; }
  .nav-lb { display: block; font-size: 9px; line-height: 1.2; font-weight: 600; text-align: center; white-space: normal; }
  .nav-badge { position: absolute; top: 1px; right: 4px; margin-left: 0; }
  .main { padding: 18px; }
  .grid2 { grid-template-columns: 1fr; }
  /* iOS Safari, font-size 16px'in altindaki bir input/select/textarea'ya dokununca sayfayi
     otomatik yakinlastirir (kullanici manuel geri uzaklastirmak zorunda kalir) - telefonla
     giris yapan personel (HK/teknik servis) her form alanina her dokunusunda bunu yasardi.
     16px'e sabitlemek bu davranisi tetiklemeyen minimum deger; masaustu (>720px) etkilenmez. */
  input, select, textarea { font-size: 16px; }
  /* Modal'lar (ör. talep/rezervasyon duzenleme formlari) dar ekranda kenarlara yapismasin. */
  .modal { padding: 18px 16px; }

  /* ---------- Tablo -> kart (bkz. app.js table() - her <td>'ye data-label islenmis durumda) ----------
     Talepler/Odalar/Rezervasyonlar/Misafirler/Hatirlaticilar... app genelindeki TUM table()
     ciktilari ayni mekanizmadan gectigi icin bu blok tek basina her panelde calisir. Her satir
     ayri bir kart olur, her hucre basligini kendi uzerinde (kucuk, gri, BUYUK HARF) tasir -
     yatay kaydirma tamamen ortadan kalkar. */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 2px 13px; margin-bottom: 10px; box-shadow: var(--shadow);
  }
  /* Talepler'deki acil-talep vurgusu (row-urgent) karta otomatik tasinir - ozel bir kural gerekmez. */
  .table-wrap tbody tr.row-urgent { border-left: 4px solid var(--danger); background: var(--danger-soft); }
  .table-wrap td { padding: 9px 0; border-bottom: 1px solid var(--line); }
  .table-wrap td:last-child { border-bottom: none; }
  .table-wrap td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted); margin-bottom: 3px;
  }
  /* Basligi olmayan hucreler (ör. aksiyon butonlari, toplu-secim checkbox'u) etiketsiz kalir. */
  .table-wrap td:not([data-label]) { padding-top: 9px; }
  /* Durum/typ degistirme select'leri tek basina bir hucrede oldugu icin (app genelinde kontrol
     edildi) tam genislik guvenle buyutulebilir - parmakla dokunmasi cok daha kolay olur. */
  .table-wrap td select { width: 100%; }

  /* Buyuk KPI rakamlari (ciro/tahsilat/net - fmtMoney "1.234.567 TL" gibi uzun degerler
     uretebiliyor) dar ekranda kart genisligine sigmayip satir kirabiliyordu (kart yuksekligi
     bozuluyor, .l etiketiyle cakisabiliyordu). Mobilde font kuculterek ve nowrap ile tek satirda
     tutuyoruz - ellipsis ile KESMIYORUZ, cunku bu bir tutar: kirpilmis "473..." gibi bir deger
     yanlis okunabilir. Buyumeyen deger kesinlikle gorunur kalmali. */
  .dash-hero .n { font-size: 24px; white-space: nowrap; }
  .stat .n { font-size: 19px; white-space: nowrap; }
  .dash-stat-sm .n { font-size: 16px; white-space: nowrap; }

  /* Misafir paneli (portal.js) kendi input/select ozel siniflarini tasidigindan (ornegin
     .grid2p input, .room-bar input, telefon maskesi) yukaridaki genel "input,select,textarea"
     kurali onlari ezemiyor (sinif secici element seciciden daha ozgul). Ayni 16px tabanini
     burada ayni secicilerle tekrarlayarak kazandiriyoruz - telefon maskesinde ghost (sablon)
     metni de ayni font-size'da kalmazsa rakamlar sablonun ustune hizali binmez. */
  .grid2p input, .svc-form textarea,
  .room-bar input,
  .phone-mask-wrap #regPhone, .phone-mask-ghost { font-size: 16px; }
}

/* ---------- Dokunma hedefleri: parmakla dokunulan cihazlarda (touch) butonlar/chip/sekmeler
   min 44px yuksekliginde olmali (Apple HIG / WCAG 2.5.5) - masaustu fare ile kullanimda
   (pointer: fine) sik tasarim korunur, yalnizca touch/pointer:coarse cihazlar buyur. */
@media (pointer: coarse) {
  .btn, .chip, .ptab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}