@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

/* ============================================================
   KONAK — Butik Otel Operasyon Omurgası
   Tasarım dili: "Konak Defteri"
   Kağıt zemin, mürekkep metin, ince çizgiler; tek vurgu gece mavisi,
   VIP ve söz anları için bir damla altın. Kutu ve gölge yerine çizgi.
   Tip:   Newsreader (başlık + büyük rakam) / Hanken Grotesk (arayüz) / Geist Mono (veri)
   Not:   değişken adları (pirinc, yuzey…) geriye uyumluluk için korunur;
          --pirinc artık marka vurgusu = gece mavisi demektir.
   ============================================================ */

:root {
  /* kağıt */
  --zemin:      #F4F0E8;
  --yuzey:      #FCFAF6;
  --yuzey-2:    #F0EBE1;
  --yuzey-3:    #E8E2D6;
  --cizgi:      #D9D2C5;
  --cizgi-soft: #E6E0D5;

  /* mürekkep */
  --metin:      #1B1916;
  --metin-2:    #524C45;
  --metin-3:    #6E675E;

  /* marka vurgusu — gece mavisi. SADECE kimlik + seçili durum. */
  --pirinc:     #223055;
  --pirinc-ac:  #34467A;
  --pirinc-zem: #E3E5EC;

  /* altın — VIP, söz, ödül; az kullanılır */
  --altin:      #7E6322;
  --altin-zem:  #F1E9D4;

  /* durum — her zaman metin etiketiyle */
  --ok:         #2F6B4F;
  --ok-zem:     #E1EBE3;
  --risk:       #A8601C;
  --risk-zem:   #F5E8D8;
  --kritik:     #A6322C;
  --kritik-zem: #F5E0DD;
  --bekle:      #4E4A86;
  --bekle-zem:  #E6E4EF;
  --notr:       #6E675E;
  --notr-zem:   #ECE7DD;

  --golge: 0 1px 0 rgba(27,25,22,.04), 0 12px 32px -18px rgba(27,25,22,.28);
  --r: 2px;

  --harita-zemin: #ECE7DD;
  --harita-bag:   #C9C3A6;
  --harita-yol:   #D9D2C5;
  --harita-yapi:  #8E877B;

  --f-marka: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-veri: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* gece: tersine çevrilmiş sayfa — mürekkep zemin, kağıt yazı, altın vurgu */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin:      #15140F;
    --yuzey:      #1C1A15;
    --yuzey-2:    #23201A;
    --yuzey-3:    #2B2821;
    --cizgi:      #3A362E;
    --cizgi-soft: #2A2722;
    --metin:      #EDE7DC;
    --metin-2:    #B9B1A3;
    --metin-3:    #9B9386;
    --pirinc:     #C9B46A;
    --pirinc-ac:  #DCC985;
    --pirinc-zem: #2E2918;
    --altin:      #D9B85C;
    --altin-zem:  #302812;
    --ok:         #7DB894;
    --ok-zem:     #1C2A21;
    --risk:       #D9A441;
    --risk-zem:   #33270F;
    --kritik:     #E0675E;
    --kritik-zem: #361C19;
    --bekle:      #A49FDC;
    --bekle-zem:  #25233A;
    --notr:       #9B9386;
    --notr-zem:   #26231D;
    --harita-zemin: #1C1A15;
    --harita-bag: #34321F;
    --harita-yol: #2B2821;
    --harita-yapi: #57513F;
    --golge: 0 1px 0 rgba(0,0,0,.3), 0 14px 36px -16px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --zemin:      #15140F;
  --yuzey:      #1C1A15;
  --yuzey-2:    #23201A;
  --yuzey-3:    #2B2821;
  --cizgi:      #3A362E;
  --cizgi-soft: #2A2722;
  --metin:      #EDE7DC;
  --metin-2:    #B9B1A3;
  --metin-3:    #9B9386;
  --pirinc:     #C9B46A;
  --pirinc-ac:  #DCC985;
  --pirinc-zem: #2E2918;
  --altin:      #D9B85C;
  --altin-zem:  #302812;
  --ok:         #7DB894;
  --ok-zem:     #1C2A21;
  --risk:       #D9A441;
  --risk-zem:   #33270F;
  --kritik:     #E0675E;
  --kritik-zem: #361C19;
  --bekle:      #A49FDC;
  --bekle-zem:  #25233A;
  --notr:       #9B9386;
  --notr-zem:   #26231D;
  --harita-zemin: #1C1A15;
  --harita-bag: #34321F;
  --harita-yol: #2B2821;
  --harita-yapi: #57513F;
  --golge: 0 1px 0 rgba(0,0,0,.3), 0 14px 36px -16px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; border-radius: 2px; }

.yukleniyor { padding: 48px; color: var(--metin-3); font-family: var(--f-veri); }

/* ---------------- kabuk ---------------- */

.kabuk { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.kabuk.misafir-modu { grid-template-columns: 1fr; }

.ray {
  background: var(--yuzey);
  border-right: 1px solid var(--cizgi);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marka { padding: 18px 16px 14px; border-bottom: 1px solid var(--cizgi-soft); }
.marka-ad {
  font-family: var(--f-marka); font-weight: 800; font-size: 23px;
  letter-spacing: .1em; line-height: 1; margin: 0;
}
.marka-ad em { font-style: normal; color: var(--pirinc); }
.marka-alt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--metin-3); margin-top: 6px; }

.ray-grup { padding: 12px 8px 4px; }
.ray-baslik {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--metin-3); padding: 0 8px 6px;
}
.ray-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; text-align: left;
  padding: 7px 8px; border-radius: var(--r); cursor: pointer;
  color: var(--metin-2); font-size: 13.5px;
}
.ray-btn:hover { background: var(--yuzey-2); color: var(--metin); }
.ray-btn[aria-current="page"] { background: var(--pirinc-zem); color: var(--metin); font-weight: 600; }
.ray-btn[aria-current="page"] .ray-ikon { color: var(--pirinc); }
.ray-ikon { width: 15px; height: 15px; flex: none; color: var(--metin-3); }
.ray-rozet {
  margin-left: auto; font-family: var(--f-veri); font-size: 10.5px;
  background: var(--kritik); color: #fff; border-radius: 999px; padding: 1px 6px; font-weight: 600;
}
.ray-rozet.sakin { background: var(--notr-zem); color: var(--metin-2); }

.ray-dip { margin-top: auto; padding: 12px; border-top: 1px solid var(--cizgi-soft); }

/* ---------------- üst şerit ---------------- */

.ust {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 22px; background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 30;
}
.ust-kim { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--yuzey-3); border: 1px solid var(--cizgi);
  display: grid; place-items: center;
  font-family: var(--f-veri); font-size: 11px; font-weight: 600; color: var(--metin-2);
}
.ust-ad { font-weight: 600; line-height: 1.2; }
.ust-rol { font-size: 11.5px; color: var(--metin-3); line-height: 1.2; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.saat {
  font-family: var(--f-veri); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi-soft);
  padding: 4px 10px; border-radius: var(--r);
}
.saat small { font-family: var(--f-ui); font-weight: 400; font-size: 11px; color: var(--metin-3); }

.secim {
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 5px 8px; font-size: 13px; max-width: 240px;
}

/* ---------------- içerik ---------------- */

.icerik { padding: 22px 22px 64px; max-width: 1320px; }
.sayfa-bas { margin-bottom: 18px; }
.sayfa-bas h1 {
  font-family: var(--f-marka); font-weight: 600; font-size: 27px;
  margin: 0 0 4px; letter-spacing: -.01em; text-wrap: balance;
}
.sayfa-bas p { margin: 0; color: var(--metin-2); max-width: 68ch; }

.bolum { margin-top: 26px; }
.bolum > h2 {
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--metin-3); margin: 0 0 10px; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px;
}
.bolum > h2::after { content: ""; flex: 1; height: 1px; background: var(--cizgi-soft); }

/* ---------------- genel parçalar ---------------- */

.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); }
.kutu-ic { padding: 14px 16px; }

.izgara { display: grid; gap: 12px; }
.i2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.i3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.i4 { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }

.pil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.pil::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.p-ok     { background: var(--ok-zem);     color: var(--ok); }
.p-risk   { background: var(--risk-zem);   color: var(--risk); }
.p-kritik { background: var(--kritik-zem); color: var(--kritik); }
.p-bekle  { background: var(--bekle-zem);  color: var(--bekle); }
.p-notr   { background: var(--notr-zem);   color: var(--metin-2); }
.p-marka  { background: var(--pirinc-zem); color: var(--pirinc); }
.pil.sade::before { display: none; }

.etiket { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); font-weight: 600; }
.veri { font-family: var(--f-veri); font-variant-numeric: tabular-nums; }

.btn {
  background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin);
  padding: 6px 12px; border-radius: var(--r); cursor: pointer; font-size: 13px; font-weight: 500;
}
.btn:hover:not(:disabled) { background: var(--yuzey-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ana { background: var(--pirinc); border-color: var(--pirinc); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .btn-ana, :root:not([data-theme="light"]) .btn-ana { color: #15190f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-ana { color: #fff; } }
.btn-ana:hover:not(:disabled) { background: var(--pirinc-ac); border-color: var(--pirinc-ac); }
.btn-kck { padding: 3px 8px; font-size: 12px; }
.btn-satir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.giris {
  width: 100%; background: var(--yuzey-2); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 7px 10px; font-size: 13.5px;
}
textarea.giris { resize: vertical; min-height: 62px; }

.bos { color: var(--metin-3); font-size: 13px; padding: 18px 2px; }

/* ---------------- görev kartı + SLA ---------------- */

.gorev {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--notr); border-radius: var(--r);
  padding: 12px 14px; display: grid; gap: 9px;
}
.gorev.s-ok     { border-left-color: var(--ok); }
.gorev.s-risk   { border-left-color: var(--risk); }
.gorev.s-kritik { border-left-color: var(--kritik); }
.gorev.s-bekle  { border-left-color: var(--bekle); }
.gorev-ust { display: flex; align-items: flex-start; gap: 10px; }
.gorev-bas { font-weight: 600; line-height: 1.35; flex: 1; min-width: 0; }
.gorev-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--metin-2); }
.gorev-meta .veri { font-size: 12px; }

.sla { display: grid; gap: 4px; }
.sla-cizgi { height: 3px; background: var(--yuzey-3); border-radius: 2px; overflow: hidden; }
.sla-dolu { height: 100%; background: var(--ok); transition: width .6s linear; }
.sla-dolu.risk { background: var(--risk); }
.sla-dolu.kritik { background: var(--kritik); }
.sla-yazi { display: flex; justify-content: space-between; font-size: 11px; color: var(--metin-3); }

/* zincir — bayrak değişimi */
.zincir { display: flex; align-items: center; gap: 0; flex-wrap: wrap; font-size: 11.5px; }
.zincir-adim {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--yuzey-2); color: var(--metin-3); white-space: nowrap;
}
.zincir-adim.bitti { color: var(--metin-2); border-color: var(--cizgi); }
.zincir-adim.bitti::before { content: "✓"; font-size: 10px; color: var(--ok); }
.zincir-adim.aktif {
  background: var(--pirinc-zem); border-color: var(--pirinc); color: var(--metin); font-weight: 600;
}
.zincir-ok { color: var(--metin-3); padding: 0 5px; font-size: 11px; }

/* ---------------- oda ızgarası ---------------- */

.oda-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
.oda {
  border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--yuzey); padding: 8px 9px; text-align: left; cursor: pointer;
  display: grid; gap: 4px; position: relative; overflow: hidden;
}
.oda::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--notr); }
.oda:hover { border-color: var(--metin-3); }
.oda-no { font-family: var(--f-veri); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.oda-no .cadir { font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .1em; color: var(--metin-3); text-transform: uppercase; }
.oda-durum { font-size: 11px; line-height: 1.3; color: var(--metin-2); }
.oda-alt { font-size: 10.5px; color: var(--metin-3); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.oda.d-temiz::before   { background: var(--ok); }
.oda.d-kirli::before   { background: var(--risk); }
.oda.d-ariza::before   { background: var(--kritik); }
.oda.d-islem::before   { background: var(--bekle); }
.oda.d-dolu::before    { background: var(--pirinc); }
.oda-bayrak {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 4px; border-radius: 2px; background: var(--kritik); color: #fff;
}
.oda-bayrak.vip { background: var(--pirinc); color: #1d1706; }
.oda-bayrak.dnd { background: var(--bekle); color: #fff; }

/* ---------------- tablolar ---------------- */

.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
table.tablo { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tablo th {
  text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-3); font-weight: 600; padding: 9px 12px;
  border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); white-space: nowrap;
}
.tablo td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi-soft); vertical-align: top; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo td.veri { font-variant-numeric: tabular-nums; }

/* ---------------- checklist ---------------- */

.madde {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--cizgi-soft);
}
.madde:last-child { border-bottom: 0; }
.madde-kutu {
  width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--cizgi);
  border-radius: 3px; background: var(--yuzey-2); cursor: pointer; display: grid; place-items: center;
  color: transparent; font-size: 12px; font-weight: 700;
}
.madde-kutu[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.madde-kutu.hayir { background: var(--kritik); border-color: var(--kritik); color: #fff; }
.madde-metin { line-height: 1.4; }
.madde-alt { font-size: 11.5px; color: var(--metin-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.madde-sag { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sayi-giris { width: 76px; text-align: right; font-family: var(--f-veri); }

.foto-yuva {
  width: 42px; height: 42px; border-radius: 3px; border: 1px dashed var(--cizgi);
  background: var(--yuzey-2); display: grid; place-items: center; cursor: pointer;
  color: var(--metin-3); font-size: 10px; overflow: hidden; padding: 0;
}
.foto-yuva.dolu { border-style: solid; border-color: var(--ok); }
.foto-yuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-yuva.gerekli { border-color: var(--kritik); color: var(--kritik); }

/* ---------------- misafir yüzü ---------------- */

.misafir-sayfa {
  max-width: 480px; margin: 0 auto; padding: 0 0 90px;
  background: var(--yuzey); min-height: 100vh; border-left: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi);
}
.misafir-bas {
  padding: 30px 22px 24px;
  background: linear-gradient(165deg, var(--yuzey-3), var(--yuzey));
  border-bottom: 1px solid var(--cizgi);
}
.misafir-bas h1 { font-family: var(--f-marka); font-weight: 600; font-size: 25px; margin: 10px 0 4px; letter-spacing: -.01em; }
.misafir-bas p { margin: 0; color: var(--metin-2); font-size: 13.5px; }
.misafir-govde { padding: 18px 22px; display: grid; gap: 22px; }
.misafir-alt-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; background: var(--yuzey); border-top: 1px solid var(--cizgi);
  max-width: 480px; margin: 0 auto;
}
.misafir-alt-menu button {
  flex: 1; background: none; border: 0; padding: 10px 4px 12px; cursor: pointer;
  font-size: 11px; color: var(--metin-3); display: grid; gap: 4px; justify-items: center;
}
.misafir-alt-menu button[aria-current="page"] { color: var(--pirinc); font-weight: 600; }
.misafir-alt-menu svg { width: 17px; height: 17px; }

.istek-sec {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.istek-btn {
  text-align: left; padding: 11px 12px; border: 1px solid var(--cizgi);
  border-radius: var(--r); background: var(--yuzey-2); cursor: pointer; display: grid; gap: 3px;
}
.istek-btn:hover { border-color: var(--pirinc); }
.istek-btn b { font-weight: 600; font-size: 13.5px; }
.istek-btn span { font-size: 11px; color: var(--metin-3); }

/* ---------------- ısı haritası ---------------- */

.isi-satir { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center; padding: 5px 0; }
.isi-hucreler { display: flex; gap: 3px; }
.isi-h { flex: 1; height: 26px; border-radius: 2px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; font-family: var(--f-veri); }

/* ---------------- diğer ---------------- */

.kanit-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kanit {
  aspect-ratio: 4/3; border-radius: var(--r); border: 1px solid var(--cizgi);
  background: var(--yuzey-2); padding: 7px; display: grid; align-content: space-between;
  font-size: 10px; color: var(--metin-3); overflow: hidden; position: relative;
}
.kanit .kanit-gorsel { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.kanit > * { position: relative; }
.kanit b { font-family: var(--f-veri); font-size: 11px; color: var(--metin); }

.olay-akis { display: grid; gap: 0; }
.olay {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi-soft); font-size: 13px;
}
.olay:last-child { border-bottom: 0; }
.olay-saat { font-family: var(--f-veri); font-size: 11.5px; color: var(--metin-3); padding-top: 2px; }
.olay-govde { line-height: 1.45; }
.olay-govde b { font-weight: 600; }

.uyari {
  border: 1px solid var(--risk); background: var(--risk-zem); color: var(--metin);
  border-radius: var(--r); padding: 11px 13px; font-size: 13px; display: grid; gap: 5px;
}
.uyari b { color: var(--risk); }
.bilgi { border-color: var(--cizgi); background: var(--yuzey-2); }
.bilgi b { color: var(--metin); }

.modal-fon {
  position: fixed; inset: 0; background: rgba(10,14,11,.62); z-index: 90;
  display: grid; place-items: center; padding: 18px; backdrop-filter: blur(2px);
}
.modal {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px;
  max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--golge);
}
.modal-bas { padding: 16px 20px; border-bottom: 1px solid var(--cizgi); display: flex; align-items: flex-start; gap: 12px; }
.modal-bas h2 { font-family: var(--f-marka); font-weight: 600; font-size: 19px; margin: 0; flex: 1; }
.modal-govde { padding: 18px 20px; display: grid; gap: 14px; }
.modal-dip { padding: 13px 20px; border-top: 1px solid var(--cizgi); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.kapat { background: none; border: 0; cursor: pointer; color: var(--metin-3); font-size: 19px; line-height: 1; padding: 2px 4px; }

.tost-kap { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: grid; gap: 8px; max-width: 330px; }
.tost {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--pirinc);
  border-radius: var(--r); padding: 10px 13px; box-shadow: var(--golge); font-size: 13px;
  animation: gir .22s ease-out;
}
.tost.uyari-tost { border-left-color: var(--kritik); }
@keyframes gir { from { opacity: 0; transform: translateY(6px); } }

.sayac-tile {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 13px 15px; display: grid; gap: 3px;
}
.sayac-tile .rakam { font-family: var(--f-veri); font-size: 26px; font-weight: 600; line-height: 1.1; }
.sayac-tile .aciklama { font-size: 11.5px; color: var(--metin-3); }
.sayac-tile.vurgu .rakam { color: var(--kritik); }

details.katlan { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); }
details.katlan > summary {
  padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; list-style: none;
}
details.katlan > summary::-webkit-details-marker { display: none; }
details.katlan > summary::before { content: "▸"; color: var(--metin-3); font-size: 11px; }
details.katlan[open] > summary::before { content: "▾"; }
details.katlan > div { padding: 0 14px 14px; }

.ilerleme { height: 5px; background: var(--yuzey-3); border-radius: 3px; overflow: hidden; }
.ilerleme > div { height: 100%; background: var(--pirinc); }
.ilerleme.tam > div { background: var(--ok); }

.liste-sade { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.liste-sade li { line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 860px) {
  .kabuk { grid-template-columns: 1fr; }
  .ray {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--cizgi); align-items: center; gap: 4px;
  }
  .marka { border: 0; padding: 12px 14px; flex: none; }
  .marka-alt { display: none; }
  .ray-grup { display: flex; gap: 4px; padding: 8px 4px; flex: none; }
  .ray-baslik { display: none; }
  .ray-btn { white-space: nowrap; width: auto; }
  .ray-dip { display: none; }
  .icerik { padding: 16px 14px 60px; }
  .isi-satir { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Periyodik checklist · denetim · SOP kataloğu katmanı
   ============================================================ */

/* bölüm şeridi — departmanın iç birimleri */
.bolum-serit {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.bolum-cip {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 7px 11px; cursor: pointer; text-align: left; min-width: 118px;
  border-bottom: 2px solid var(--cizgi);
}
.bolum-cip b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.bolum-cip .veri { font-size: 11px; color: var(--metin-3); }
.bolum-cip:hover { border-color: var(--metin-3); }
.bolum-cip.tam { border-bottom-color: var(--ok); }
.bolum-cip.gecik { border-bottom-color: var(--kritik); }
.bolum-cip[aria-current="true"] {
  background: var(--pirinc-zem); border-color: var(--pirinc); border-bottom-color: var(--pirinc);
}

/* periyot sekmeleri */
.periyot-serit {
  display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--cizgi);
}
.periyot-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 7px 11px; cursor: pointer; color: var(--metin-2); font-size: 13px;
  margin-bottom: -1px;
}
.periyot-btn .veri { font-size: 10.5px; color: var(--metin-3); background: var(--yuzey-3); padding: 0 5px; border-radius: 999px; }
.periyot-btn:hover { color: var(--metin); }
.periyot-btn[aria-current="true"] { color: var(--metin); font-weight: 600; border-bottom-color: var(--pirinc); }
.periyot-btn[aria-current="true"] .veri { background: var(--pirinc-zem); color: var(--pirinc); }

.liste-bas { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }

/* madde satırındaki beklenen standart metni */
.madde-std {
  font-size: 12px; color: var(--metin-3); line-height: 1.45; margin-top: 3px; max-width: 74ch;
}
.madde.disi { opacity: .5; }
.sop-no { color: var(--pirinc); font-weight: 600; font-size: 11px; }
.kayit-giris { width: 116px; font-family: var(--f-veri); font-size: 12px; }

/* vardiyam ekranındaki bölüm özeti */
button.bolum-ozet {
  text-align: left; cursor: pointer; font: inherit; color: inherit; display: block; width: 100%;
}
button.bolum-ozet:hover { border-color: var(--metin-3); }

/* denetim tablosu */
.denetim-tablo td { vertical-align: top; }
.denetim-sec { min-width: 132px; font-size: 12.5px; }
.satir-kritik td { background: var(--kritik-zem); }

/* katalog filtreleri */
.filtre-serit { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* kurulumdaki bölüm listesi */
.bolum-liste { margin-top: 9px; display: grid; gap: 1px; }
.bolum-satir {
  display: flex; gap: 10px; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--cizgi-soft);
}
.bolum-satir:last-child { border-bottom: 0; }
.bolum-satir .veri { font-size: 11.5px; color: var(--metin-3); }

/* panel — uyum oranı çubukları */
.uyum-satir { display: flex; align-items: center; gap: 11px; padding: 5px 0; }
.uyum-ad { width: 178px; font-size: 12.5px; flex: none; }
.uyum-bar { flex: 1; height: 16px; background: var(--yuzey-3); border-radius: 2px; overflow: hidden; min-width: 90px; }
.uyum-bar > div { height: 100%; background: var(--pirinc); }
.uyum-rakam { width: 46px; text-align: right; font-size: 12.5px; flex: none; }

@media (max-width: 860px) {
  .uyum-satir { flex-wrap: wrap; }
  .uyum-ad { width: 100%; }
  .liste-bas > div:last-child { margin-left: 0 !important; }
}

.kapsam-btn {
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--metin-3); font-size: 11px; padding: 3px 7px; cursor: pointer; white-space: nowrap;
}
.kapsam-btn:hover { border-color: var(--cizgi); color: var(--metin-2); background: var(--yuzey-2); }

/* ---------------- menüde departman listesi ---------------- */

.ray-altbaslik {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--metin-3); padding: 12px 8px 5px; margin-top: 4px;
  border-top: 1px solid var(--cizgi-soft);
}
.ray-btn.dept { padding-left: 6px; font-size: 13px; }
.ray-kisa {
  width: 19px; height: 17px; flex: none; display: grid; place-items: center;
  font-family: var(--f-veri); font-size: 9px; font-weight: 600; letter-spacing: .02em;
  color: var(--metin-3); background: var(--yuzey-2);
  border: 1px solid var(--cizgi-soft); border-radius: 2px;
}
.ray-btn.dept:hover .ray-kisa { color: var(--metin-2); }
.ray-btn.dept[aria-current="page"] .ray-kisa {
  background: var(--pirinc); border-color: var(--pirinc); color: var(--yuzey);
}

/* tıklanabilir özet satırları */
button.uyum-satir {
  width: 100%; background: none; border: 0; border-radius: var(--r);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
button.uyum-satir:hover { background: var(--yuzey-2); }

@media (max-width: 860px) {
  .ray-altbaslik {
    border-top: 0; border-left: 1px solid var(--cizgi-soft);
    padding: 0 10px; margin: 0 2px; align-self: center; writing-mode: initial;
  }
}

/* ---------------- pozisyon & yetki matrisi ---------------- */

.rol-kart { border-left: 3px solid var(--pirinc); }

table.yetki-tablo { min-width: 980px; }
.yetki-tablo .poz-sutun { min-width: 230px; max-width: 260px; }
.yetki-tablo th.yetki-bas {
  padding: 8px 4px; width: 34px; vertical-align: bottom; text-align: center;
  font-size: 9.5px; letter-spacing: .02em; text-transform: none; line-height: 1.15;
}
.yetki-tablo th.yetki-bas span {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; max-height: 118px; overflow: hidden; margin: 0 auto;
}
.yetki-tablo td.yetki-h { text-align: center; padding: 7px 4px; }
.yetki-tablo .grup-bas { border-left: 2px solid var(--cizgi); }
.yetki-kutu {
  width: 21px; height: 21px; border-radius: 3px; cursor: pointer;
  border: 1.5px solid var(--cizgi); background: var(--yuzey-2);
  color: transparent; font-size: 12px; font-weight: 700; line-height: 1;
}
.yetki-kutu.acik { background: var(--ok); border-color: var(--ok); color: #fff; }
.yetki-kutu:disabled { cursor: default; opacity: .75; }
.yetki-kutu:not(:disabled):hover { border-color: var(--pirinc); }

/* ---------------- checklist maddesinde uygunsuzluk kaydı ---------------- */

.madde-kutu.kismen { background: var(--risk); border-color: var(--risk); color: #fff; }
.madde.sorunlu { background: var(--yuzey-2); border-radius: var(--r); padding-left: 8px; margin-left: -8px; }

.sorun-btn {
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--metin-3); font-size: 11px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
}
.sorun-btn:hover:not(:disabled) { border-color: var(--risk); color: var(--risk); }
.sorun-btn.aktif { border-color: var(--risk); color: var(--risk); background: var(--risk-zem); font-weight: 600; }
.sorun-btn:disabled { opacity: .4; cursor: not-allowed; }

.bulgu-blok {
  display: grid; gap: 6px; margin-top: 9px; padding: 10px 12px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 2px solid var(--risk);
  border-radius: var(--r); max-width: 74ch;
}
.bulgu-blok textarea.giris { min-height: 38px; font-size: 12.5px; }
.bulgu-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.termin-giris { width: 130px; font-family: var(--f-veri); font-size: 12px; }

.bolum-cip.uygunsuz { border-bottom-color: var(--risk); }
.bolum-cip.kritik { border-bottom-color: var(--kritik); }
.cip-uyari { color: var(--risk); font-weight: 600; }

.bolum-cip.benim { border-color: var(--pirinc); }
.cip-benim {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pirinc); margin-left: 4px;
}

/* ---------------- pozisyon vardiya listesi ---------------- */

button.vl-kart {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-left: 3px solid var(--pirinc);
}
button.vl-kart:hover { border-color: var(--metin-3); border-left-color: var(--pirinc); }
.faz-serit { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.faz-rozet {
  font-size: 11px; color: var(--metin-3); background: var(--yuzey-2);
  border: 1px solid var(--cizgi-soft); border-radius: 999px; padding: 2px 9px;
  display: inline-flex; gap: 5px; align-items: baseline;
}
.faz-rozet b { color: var(--metin-2); font-size: 10.5px; }
.faz-rozet.tam { background: var(--ok-zem); border-color: var(--ok-zem); color: var(--ok); }
.faz-rozet.tam b { color: var(--ok); }

/* ---------------- günlük rapor ---------------- */

.rapor-bas { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rapor-bas > div:first-child { flex: 1; min-width: 260px; }
.rapor-satir {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi-soft);
}
.rapor-satir:last-child { border-bottom: 0; }
.rapor-saat { font-size: 11.5px; color: var(--metin-3); padding-top: 2px; }
.rapor-alt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 11.5px; color: var(--metin-3); }
.rapor-not {
  font-size: 12.5px; color: var(--metin-2); line-height: 1.5; margin-top: 6px;
  padding: 7px 10px; background: var(--yuzey-2); border-radius: 3px; border-left: 2px solid var(--cizgi);
}

/* ---------------- rapor tarih şeridi ---------------- */

.rapor-kontrol { display: grid; gap: 8px; justify-items: flex-end; }
.tarih-serit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tarih-giris {
  width: 148px; font-family: var(--f-veri); font-size: 12.5px; padding: 5px 8px;
  color-scheme: light dark;
}
.tarih-serit .btn-kck { min-width: 30px; }

@media (max-width: 860px) {
  .rapor-kontrol { justify-items: flex-start; width: 100%; }
}

/* ---------------- göreve özgü eylemler ---------------- */

.gorev-ipucu {
  font-size: 11.5px; color: var(--metin-3); line-height: 1.45;
  padding: 6px 9px; background: var(--yuzey-2); border-radius: 3px;
  border-left: 2px solid var(--cizgi);
}
.adim-btn { border-color: var(--cizgi); }
.adim-btn:hover:not(:disabled) { border-color: var(--pirinc); color: var(--metin); }
.kapanis-uyari { font-size: 11.5px; color: var(--risk); line-height: 1.4; }

.beklet-serit {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--metin-2);
  padding: 8px 10px; background: var(--bekle-zem); border-radius: var(--r);
}

details.gorev-gunluk { border: 0; background: none; }
details.gorev-gunluk > summary {
  padding: 6px 0; font-size: 11.5px; font-weight: 600; color: var(--metin-3);
  border-top: 1px solid var(--cizgi-soft);
}
details.gorev-gunluk > div { padding: 0 0 4px; }
.gunluk-akis { display: grid; gap: 2px; }
.gunluk-satir { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.gunluk-ikon { color: var(--metin-3); font-size: 11px; text-align: center; line-height: 1.5; }
.gunluk-alt { font-size: 11px; color: var(--metin-3); margin-top: 2px; }

/* ---------------- oda kontrolü ---------------- */

.oda.d-kontrol::before { background: var(--bekle); }
.oda-kontrol-kart { border-left: 3px solid var(--bekle); }
.oda-kontrol-kart.rush { border-left-color: var(--kritik); }

/* ---------------- arıza bildirimi + oda dağılımı ---------------- */

.btn-ariza { border-color: var(--kritik); color: var(--kritik); }
.btn-ariza:hover:not(:disabled) { background: var(--kritik-zem); border-color: var(--kritik); }

.ar-blok { border-top: 1px solid var(--cizgi); padding-top: 12px; margin-top: 12px; }
.ar-blok:first-of-type { border-top: 0; padding-top: 0; }
.ar-blok .etiket { margin-bottom: 7px; }
.ar-uyari {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r); font-size: 12px; line-height: 1.5;
  background: var(--risk-zem); color: var(--metin-2); border-left: 2px solid var(--risk);
}
.ar-acil {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  font-size: 12.5px; color: var(--metin-2); line-height: 1.45; cursor: pointer;
}
.ar-acil input { margin-top: 2px; accent-color: var(--kritik); }

.ariza-not {
  margin-top: 7px; padding: 8px 10px; border-radius: var(--r); max-width: 62ch;
  background: var(--yuzey-2); border-left: 2px solid var(--kritik);
  font-size: 12.5px; color: var(--metin-2); line-height: 1.5;
}

.gorev-yer { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--metin-3); }
.yer-pil {
  font-family: var(--f-veri); font-size: 11.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin-2);
}
.gorev-foto {
  width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--cizgi); display: block;
}

.yuk-serit { display: flex; gap: 8px; flex-wrap: wrap; }
.yuk-kart {
  display: grid; gap: 2px; min-width: 150px; flex: 1 1 150px;
  padding: 9px 11px; border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--yuzey-2); border-left: 2px solid var(--pirinc);
}
.yuk-kart.bos { border-left-color: var(--cizgi); opacity: .72; }
.yuk-kart .veri { font-size: 12px; color: var(--metin-2); }

/* ---------------- evet / hayır soru maddesi ---------------- */

.evet-hayir { display: inline-flex; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.eh-btn {
  background: var(--yuzey-2); border: 0; border-left: 1px solid var(--cizgi);
  padding: 6px 14px; font: inherit; font-size: 12.5px; color: var(--metin-2);
  cursor: pointer; white-space: nowrap;
}
.eh-btn:first-child { border-left: 0; }
.eh-btn:hover:not(:disabled) { background: var(--yuzey); color: var(--metin); }
.eh-btn:disabled { opacity: .45; cursor: not-allowed; }
.eh-btn.secili-hayir { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.eh-btn.secili-evet { background: var(--kritik); border-color: var(--kritik); color: #fff; font-weight: 600; }

/* ---------------- bildirimler ve havuz ---------------- */

.bildirim-btn { position: relative; }
.bildirim-btn.var { border-color: var(--pirinc); color: var(--metin); font-weight: 600; }
.bildirim-say {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: 6px; border-radius: 999px; background: var(--kritik); color: #fff;
  font-family: var(--f-veri); font-size: 10.5px; font-weight: 700;
}
.bildirim-liste { display: grid; gap: 8px; }
.bildirim {
  padding: 9px 11px; border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--yuzey-2); font-size: 13px; line-height: 1.5; color: var(--metin-2);
}
.bildirim.yeni { border-left: 2px solid var(--pirinc); background: var(--yuzey); }
.bildirim-ust { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 11.5px; color: var(--metin-3); }

.gorev-ipucu.havuz { border-left-color: var(--pirinc); color: var(--metin-2); font-weight: 500; }
.gorev.vurgulu { outline: 2px solid var(--pirinc); outline-offset: 2px; }

/* ---------------- oda programı ---------------- */

.plan-serit {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-bottom: 7px; padding: 5px 9px; border-radius: var(--r);
  background: var(--yuzey-2); border-left: 2px solid var(--pirinc);
  font-size: 12px; color: var(--metin-2);
}
.plan-serit.gec { border-left-color: var(--risk); }
.plan-serit.asiyor { border-left-color: var(--kritik); }
.plan-sira {
  font-family: var(--f-veri); font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; background: var(--pirinc); color: #fff;
}
.plan-serit.gec .plan-sira { background: var(--risk); }
.plan-serit.asiyor .plan-sira { background: var(--kritik); }
.yuk-kart.asiyor { border-left-color: var(--kritik); }
.kritik-yazi { color: var(--kritik); font-weight: 600; }

/* ---------------- molalar ---------------- */

.mola-serit {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
  padding: 8px 11px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey-2);
}
.mola-pil {
  font-size: 12px; color: var(--metin-2); padding: 3px 9px; border-radius: 999px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
}
.mola-pil.simdi { border-color: var(--pirinc); color: var(--metin); font-weight: 600; }

/* ---------------- gün akışı ve sabah sırası ---------------- */

.akis-satir { display: grid; gap: 7px; padding-left: 9px; border-left: 2px solid var(--cizgi); }
.akis-satir.geride { border-left-color: var(--risk); }
.akis-bas { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.akis-bas .veri { font-size: 12px; color: var(--metin-3); }
.akis-serit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.akis-oda {
  display: inline-flex; gap: 5px; align-items: baseline; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cizgi);
  background: var(--yuzey-2); color: var(--metin-2);
}
.akis-oda .veri { font-size: 11px; color: var(--metin-3); }
.akis-oda.bitti { border-color: var(--ok); color: var(--ok); }
.akis-oda.bitti .veri { color: var(--ok); }
.akis-oda.aktif { border-color: var(--pirinc); background: var(--pirinc); color: #fff; font-weight: 600; }
.akis-oda.aktif .veri { color: rgba(255,255,255,.85); }
.akis-oda.asiyor { border-color: var(--kritik); color: var(--kritik); }
.akis-etiket { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.akis-mola {
  display: inline-flex; gap: 5px; align-items: baseline; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--cizgi); color: var(--metin-3);
}

.gun-basi { display: grid; gap: 9px; border-left: 2px solid var(--pirinc); }
.gun-adim { list-style: none; counter-reset: adim; margin: 0; padding: 0; display: grid; gap: 7px; }
.gun-adim li {
  counter-increment: adim; display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--metin-2);
}
.gun-adim li::before {
  content: counter(adim); display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 999px; background: var(--yuzey-2); border: 1px solid var(--cizgi);
  font-family: var(--f-veri); font-size: 11px; font-weight: 700; color: var(--metin-3);
}
.gun-adim li.acik::before { background: var(--pirinc); border-color: var(--pirinc); color: #fff; }
.gun-adim li.bitti::before { background: var(--ok); border-color: var(--ok); color: #fff; }
.gun-adim li.kapali { opacity: .55; }
.akis-oda.dnd { border-style: dashed; border-color: var(--risk); color: var(--risk); }

.refakat-serit {
  margin-bottom: 7px; padding: 6px 10px; border-radius: var(--r); font-size: 12px;
  background: var(--yuzey-2); border-left: 2px solid var(--risk); color: var(--metin-2);
}

.taslak-kutu {
  padding: 10px 12px; border-radius: var(--r); background: var(--yuzey-2);
  border-left: 2px solid var(--pirinc); font-size: 12.5px; color: var(--metin-2); line-height: 1.5;
}
.taslak-kutu .liste-sade { margin: 6px 0 0; }

/* ---------------- ön büro giriş listesi ---------------- */

.satir-vip td { background: var(--pirinc-zem, var(--yuzey-2)); }
.izgara.i5 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------------- giriş–çıkış tahtası ---------------- */

.gelis-kart { display: grid; gap: 8px; margin-bottom: 10px; border-left: 2px solid var(--cizgi); }
.gelis-kart.vip { border-left-color: var(--pirinc); }
.gelis-bas { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.gelis-bas .veri { font-size: 12px; color: var(--metin-3); }
.gelis-tercih, .gelis-oda { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- senkron farkı ---------------- */

.fark-kayit { display: grid; gap: 5px; padding-left: 9px; border-left: 2px solid var(--cizgi); font-size: 13px; }
.fark-satir {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  color: var(--metin-2); line-height: 1.45; cursor: pointer;
}
.fark-satir.kilitli { opacity: .7; cursor: not-allowed; }
.fark-satir input { margin-top: 3px; accent-color: var(--pirinc); }

/* ---------------- misafir talep takibi ---------------- */

.talep-izle { display: grid; gap: 6px; padding-left: 9px; border-left: 2px solid var(--cizgi); }
.talep-izle.gecikti { border-left-color: var(--risk); }
.talep-izle.sikayet { border-left-color: var(--kritik); }
.talep-izle-bas { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.talep-izle-bas .veri { font-size: 12px; color: var(--metin-3); }
.talep-izle-not {
  font-size: 11.5px; color: var(--metin-3); padding: 4px 8px;
  background: var(--yuzey-2); border-radius: var(--r); max-width: 70ch;
}

/* ---------------- etkinlikler ---------------- */

.etkinlik-kart { display: grid; gap: 7px; padding-left: 9px; border-left: 2px solid var(--pirinc); }
.etkinlik-kart.iptal { border-left-color: var(--cizgi); opacity: .62; }
.etkinlik-bas { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.etkinlik-bas .veri { font-size: 12px; color: var(--metin-3); }
.etkinlik-dept { display: flex; gap: 6px; flex-wrap: wrap; }
.gelis-zincir {
  font-size: 12px; color: var(--metin-2); line-height: 1.5;
  padding: 6px 10px; border-radius: var(--r); background: var(--yuzey-2);
  border-left: 2px solid var(--pirinc);
}

/* Amenity şeridi: kararı ön büro verir, halkaları mutfak ve F&B kapatır. */
.amenity-serit {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--metin-2); line-height: 1.5;
  padding: 7px 10px; border-radius: var(--r); background: var(--yuzey-2);
  border-left: 2px solid var(--pirinc);
}
.amenity-serit.bekliyor { border-left-color: var(--risk); }
.amenity-serit.gecikti { border-left-color: var(--kritik); }
.amenity-serit.tamam { border-left-color: var(--ok); }
.amenity-serit > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.amenity-halka { display: inline-flex; gap: 5px; flex: 0 0 auto; }

/* Varış / erken giriş / bagaj şeridi ve hafıza şeridi: geliş kartının
   içinde, amenity şeridiyle aynı dilde. */
.varis-serit, .hafiza-serit {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--metin-2); line-height: 1.5;
  padding: 7px 10px; border-radius: var(--r); background: var(--yuzey-2);
  border-left: 2px solid var(--cizgi);
}
.varis-serit.gecikti { border-left-color: var(--kritik); }
.varis-serit.tamam { border-left-color: var(--ok); }
.hafiza-serit { border-left-color: var(--pirinc); }
.varis-serit > span:nth-child(2), .hafiza-serit > span:nth-child(2) { flex: 1 1 200px; min-width: 0; }
.varis-dugme { display: inline-flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }


/* ============================================================
   KONAK DEFTERİ KATMANI
   Yukarıdaki bileşenlerin üzerine yazar; sınıf adları değişmez,
   böylece hiçbir .js dosyasına dokunmak gerekmez.
   İlke: kutu yerine çizgi, gölge yerine boşluk, rakam kahramandır.
   ============================================================ */

body { font-variant-numeric: tabular-nums; font-feature-settings: "ss01"; }
::selection { background: var(--pirinc); color: var(--zemin); }

/* ---------- kenar dizini ---------- */
.ray { background: var(--zemin); border-right: 1px solid var(--cizgi); }
.marka { border-bottom: 0; padding: 28px 20px 20px; }
.marka-ad { font-family: var(--f-marka); font-weight: 600; font-size: 27px; letter-spacing: .06em; }
.marka-ad em { font-style: italic; font-weight: 400; color: var(--pirinc); }
.marka-alt { font-family: var(--f-veri); font-size: 10px; letter-spacing: .1em; margin-top: 8px; }
.ray-grup { padding: 14px 12px 6px; }
.ray-baslik, .ray-altbaslik { font-family: var(--f-veri); font-size: 9.5px; letter-spacing: .14em; font-weight: 500; }
.ray-altbaslik { border-top: 1px solid var(--cizgi); }
.ray-btn { border-radius: 0; padding: 6px 8px; font-size: 14px; font-weight: 500; color: var(--metin-2); }
.ray-btn:hover { background: none; color: var(--metin); }
.ray-btn[aria-current="page"] { background: none; color: var(--metin); font-weight: 700; box-shadow: inset 2px 0 0 var(--pirinc); }
.ray-btn[aria-current="page"] .ray-ikon { color: var(--metin); }
.ray-ikon { color: var(--metin-3); }
.ray-rozet { border-radius: 0; font-weight: 500; padding: 0 5px; }
.ray-rozet.sakin { background: none; color: var(--metin-3); }
.ray-kisa { border-radius: 0; background: none; border-color: var(--cizgi); }
.ray-btn.dept[aria-current="page"] .ray-kisa { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.ray-dip { border-top: 1px solid var(--cizgi); padding: 16px 20px; }

/* ---------- üst şerit: defterin künyesi ---------- */
.ust { background: var(--zemin); padding: 12px 36px; border-bottom: 1px solid var(--cizgi); }
.avatar { background: none; border-color: var(--metin-3); color: var(--metin); }
.saat {
  background: none; border: 0; padding: 0;
  font-family: var(--f-veri); font-size: 12px; letter-spacing: .04em; font-weight: 600;
}
.saat small { font-family: var(--f-veri); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.secim { background: var(--yuzey); border-radius: var(--r); }

/* ---------- sayfa ---------- */
.icerik { padding: 44px 40px 80px; max-width: 1240px; }
.sayfa-bas { margin-bottom: 34px; }
.sayfa-bas h1 {
  font-family: var(--f-marka); font-weight: 500;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.sayfa-bas h1 em { font-style: italic; font-weight: 400; color: var(--pirinc); }
.sayfa-bas p { font-size: 15px; line-height: 1.6; max-width: 62ch; }

.bolum { margin-top: 48px; }
.bolum > h2 {
  font-family: var(--f-marka); font-size: 25px; font-weight: 500; letter-spacing: -.01em;
  text-transform: none; color: var(--metin);
  margin: 0 0 16px; padding-bottom: 11px; border-bottom: 1px solid var(--cizgi);
}
.bolum > h2::after { display: none; }

.etiket { font-family: var(--f-veri); font-weight: 500; font-size: 10px; letter-spacing: .12em; }

/* ---------- yüzeyler: kutu değil, kağıt yaprağı ---------- */
.kutu { border-radius: 0; background: var(--yuzey); border-color: var(--cizgi); }
.kutu-ic { padding: 18px 20px; }
.izgara { gap: 18px 28px; }

/* sayaçlar: kutusuz, üst çizgili, serif rakam */
.sayac-tile {
  background: none; border: 0; border-radius: 0; border-top: 1px solid var(--metin);
  padding: 16px 0 4px; gap: 10px;
}
.sayac-tile .aciklama {
  order: -1; font-family: var(--f-veri); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--metin-3);
}
.sayac-tile .rakam {
  font-family: var(--f-marka); font-weight: 500; font-size: 54px;
  line-height: .9; letter-spacing: -.03em;
}
.sayac-tile .rakam.veri { font-family: var(--f-marka); }
.sayac-tile.vurgu { border-top-color: var(--kritik); }
.sayac-tile.vurgu .aciklama { color: var(--kritik); }

/* ---------- etiketler: zemin yok, nokta + kelime ---------- */
.pil { background: none !important; border-radius: 0; padding: 1px 0; font-weight: 600; letter-spacing: .01em; }
.pil.sade { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: 1px 7px; font-weight: 500; }
.p-notr { color: var(--metin-2); }
.p-marka { color: var(--pirinc); }

/* ---------- düğmeler ---------- */
.btn {
  background: transparent; border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 8px 14px; font-weight: 500; color: var(--metin);
}
.btn:hover:not(:disabled) { background: var(--yuzey); border-color: var(--metin-3); }
.btn.btn-ana { background: var(--metin); border-color: var(--metin); color: var(--zemin) !important; font-weight: 600; }
.btn.btn-ana:hover:not(:disabled) { background: var(--pirinc); border-color: var(--pirinc); }
.btn-kck { padding: 5px 11px; font-size: 12.5px; }
.btn-ariza { border-color: var(--kritik); color: var(--kritik); }

.giris { background: var(--yuzey); border-radius: var(--r); padding: 9px 12px; }
.giris:focus { outline: none; border-color: var(--metin); }
textarea.giris { font-size: 14px; line-height: 1.55; }

/* ---------- görev: defter satırı, durum üst çizgide ---------- */
.gorev {
  background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid var(--cizgi); padding: 16px 0 14px; gap: 10px;
}
.gorev.s-ok     { border-left: 0; border-top: 2px solid var(--ok); }
.gorev.s-risk   { border-left: 0; border-top: 2px solid var(--risk); }
.gorev.s-kritik { border-left: 0; border-top: 2px solid var(--kritik); }
.gorev.s-bekle  { border-left: 0; border-top: 2px solid var(--bekle); }
.gorev-bas { font-family: var(--f-marka); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; }
.gorev.vurgulu { outline: 0; background: var(--yuzey); box-shadow: 0 0 0 10px var(--yuzey); }
.sla-cizgi { height: 2px; border-radius: 0; }
.sla-yazi { font-family: var(--f-veri); font-size: 10.5px; letter-spacing: .04em; }

.zincir-adim { border: 0; border-radius: 0; background: none; padding: 0; }
.zincir-adim.aktif { background: none; color: var(--pirinc); font-weight: 700; }
.zincir-ok { color: var(--cizgi); }

.gorev-ipucu { background: none; border-radius: 0; padding: 4px 0 4px 12px; }
.yer-pil { border-radius: 0; background: none; }
.gorev-foto { border-radius: 0; }

/* ---------- oda ızgarası: durum üstte ---------- */
.oda { border-radius: 0; background: var(--yuzey); padding: 12px 11px 10px; }
.oda::before { inset: 0 0 auto 0; width: auto; height: 3px; }
.oda-no { font-family: var(--f-marka); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.oda-bayrak { border-radius: 0; }
.oda-bayrak.vip { background: var(--altin); color: var(--zemin); }

/* ---------- tablolar ---------- */
.tablo-kap { border: 0; border-top: 1px solid var(--metin); border-radius: 0; background: transparent; }
.tablo th { background: transparent; font-family: var(--f-veri); font-weight: 500; font-size: 10px; letter-spacing: .1em; padding: 10px 12px 10px 0; }
.tablo td { padding: 11px 12px 11px 0; }
.satir-vip td { background: var(--altin-zem); }

/* ---------- checklist ---------- */
.madde { padding: 13px 0; }
.madde-kutu { border-radius: 0; background: transparent; border-color: var(--metin-3); }
.madde-kutu[aria-pressed="true"] { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.madde-std { font-family: var(--f-marka); font-style: italic; font-size: 14px; color: var(--metin-2); }
.foto-yuva { border-radius: 0; background: transparent; }
.bolum-cip { border-radius: 0; background: transparent; border: 0; border-top: 2px solid var(--cizgi); padding: 9px 12px 7px 0; }
.bolum-cip[aria-current="true"] { background: none; border-top-color: var(--metin); }
.bolum-cip.tam { border-top-color: var(--ok); }
.bolum-cip.gecik, .bolum-cip.kritik { border-top-color: var(--kritik); }
.bolum-cip.uygunsuz { border-top-color: var(--risk); }
.periyot-btn[aria-current="true"] { border-bottom-color: var(--metin); }
.periyot-btn[aria-current="true"] .veri { background: none; color: var(--metin); }
.periyot-btn .veri { background: none; }
.yetki-kutu { border-radius: 0; }
.yetki-kutu.acik { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.eh-btn.secili-hayir { background: var(--metin); color: var(--zemin); }

/* ---------- ısı haritası + uyum ---------- */
.isi-h { border-radius: 0; height: 30px; font-weight: 500; }
.uyum-bar { height: 8px; border-radius: 0; }
.uyum-bar > div, .ilerleme > div { background: var(--pirinc); }
.ilerleme { height: 3px; border-radius: 0; }
.ilerleme.tam > div { background: var(--ok); }
button.uyum-satir { padding: 10px 0; border-bottom: 1px solid var(--cizgi-soft); }
button.uyum-satir:hover { background: none; }
button.uyum-satir:hover .uyum-ad { text-decoration: underline; text-underline-offset: 3px; }
.uyum-rakam { font-family: var(--f-marka); font-size: 19px; }

/* ---------- akışlar ---------- */
.olay-saat, .rapor-saat { font-family: var(--f-veri); }
.olay { padding: 11px 0; }

/* ---------- uyarılar: üst çizgi + kağıt ---------- */
.uyari { border: 0; border-top: 2px solid var(--risk); border-radius: 0; background: var(--risk-zem); padding: 14px 16px; }
.uyari.bilgi, .bilgi { border-top-color: var(--metin-3); background: var(--yuzey); }

/* ---------- pencereler ---------- */
.modal-fon { background: rgba(21,20,15,.5); backdrop-filter: blur(3px); }
.modal { border-radius: 0; border-color: var(--cizgi); border-top: 3px solid var(--pirinc); }
.modal-bas h2 { font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.modal-bas, .modal-dip { border-color: var(--cizgi); }
details.katlan { border-radius: 0; }
details.katlan > summary { font-family: var(--f-marka); font-size: 17px; font-weight: 500; }

.tost { border-radius: 0; border-left: 0; border-top: 2px solid var(--pirinc); background: var(--yuzey); }
.tost.uyari-tost { border-top-color: var(--kritik); }

/* ---------- misafir kabuğu (bileşenler misafir.css'te) ---------- */
.misafir-sayfa { background: var(--zemin); border: 0; }
.misafir-bas { background: none; border-bottom: 1px solid var(--metin); padding: 44px 24px 26px; }
.misafir-bas h1 { font-family: var(--f-marka); font-weight: 500; font-size: 38px; line-height: 1.04; letter-spacing: -.02em; margin: 12px 0 10px; }
.misafir-bas p { font-size: 14.5px; line-height: 1.55; }
.misafir-govde { padding: 22px 24px; gap: 30px; }
.misafir-alt-menu { background: var(--zemin); border-top: 1px solid var(--cizgi); }
.misafir-alt-menu button[aria-current="page"] { color: var(--metin); font-weight: 700; }
.istek-btn { border-radius: 0; background: transparent; border-color: var(--metin-3); }
.istek-btn:hover { border-color: var(--metin); }
.istek-btn b { font-family: var(--f-marka); font-size: 16px; font-weight: 500; }

@media (max-width: 860px) {
  .icerik { padding: 26px 18px 64px; }
  .ust { padding: 10px 18px; }
  .ray { border-right: 0; }
  .ray-btn[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pirinc); }
  .sayac-tile .rakam { font-size: 42px; }
}

/* ---------- satır içi büyük rakamlar da serif ---------- */
.veri[style*="font-size:27px"], .veri[style*="font-size:19px"] {
  font-family: var(--f-marka) !important; font-weight: 500 !important; letter-spacing: -.02em;
}
.veri[style*="font-size:27px"] { font-size: 40px !important; line-height: 1; }
.veri[style*="font-size:19px"] { font-size: 28px !important; line-height: 1.1; }
.izgara + .uyari, .izgara + .uyari.bilgi { margin-top: 20px; }
.sayac-tile .rakam.veri { font-size: 42px !important; }

/* ---------- vardiya listesi + faz rozetleri ---------- */
button.vl-kart { border-left: 1px solid var(--cizgi); border-top: 2px solid var(--pirinc); }
button.vl-kart:hover { border-left-color: var(--metin-3); }
.faz-rozet { border-radius: 0; background: none; border-color: var(--cizgi); }
.faz-rozet.tam { background: none; border-color: var(--ok); }
.mola-pil, .akis-oda { border-radius: 0; }
.bildirim { border-radius: 0; }

/* rozetler: her iki temada okunur kontrast */
.ray-rozet:not(.sakin), .oda-bayrak { color: var(--zemin); }
/* ---------------- bulut kapısı ---------------- */
.bulut-kapi { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--zemin); }
.bulut-kart { width: min(440px, 100%); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 26px 24px; display: grid; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.06); }
.bulut-logo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: .18em; font-size: 20px; margin-bottom: 6px; }
.bulut-logo span { color: var(--pirinc); }
.bulut-kart h2 { margin: 0; font-size: 18px; }
.bulut-kart p { margin: 0; font-size: 13px; color: var(--metin-2); line-height: 1.55; }
.bulut-alt { font-size: 12px !important; color: var(--metin-3) !important; }
.bulut-liste { display: grid; gap: 6px; }
.bulut-liste .btn { justify-content: flex-start; }
.bulut-secenek { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--metin-2); line-height: 1.45; margin-top: 8px; }


/* ============================================================
   TELEFON DÜZENİ — alt sekme ve çekmece ray
   Masaüstünde sol ray; telefonda başparmağın ulaştığı yerde dört
   sekme + Menü. Ray çekmece olarak açılır, seçimde kapanır.
   ============================================================ */
.alt-sekme { display: none; }
.ray-perde { display: none; }

@media (max-width: 760px) {
  .kabuk { grid-template-columns: 1fr; }
  .ray {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100vh; z-index: 60;
    flex-direction: column; overflow-y: auto; border-right: 1px solid var(--cizgi); border-bottom: 0;
    transform: translateX(-104%); transition: transform .22s ease; background: var(--zemin);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .ray.acik { transform: none; box-shadow: 18px 0 40px rgba(0,0,0,.18); }
  .ray-perde { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(20,18,16,.35); }
  .marka { border-bottom: 1px solid var(--cizgi-soft); padding: 18px 16px 14px; }
  .marka-alt { display: block; }
  .ray-grup { display: block; padding: 12px 8px 4px; }
  .ray-baslik { display: block; }
  .ray-btn { white-space: normal; width: 100%; }
  .ray-dip { display: block; }

  .icerik { padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .ust { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .ust-kim { min-width: 0; flex: 1 1 100%; }
  .ust-sag { flex-wrap: wrap; width: 100%; justify-content: space-between; }
  .ust-sag .secim { max-width: 100%; flex: 1 1 100%; }
  .ust-sag .saat small { display: none; }
  .ust-sag .btn:not(.bildirim-btn):not(.btn-ariza) { display: none; }   /* hız/çıkış telefonda rayda */

  /* --- Telefon üst şeridi: TEK SATIR. Avatar + ad (rol tek satır, kısaltılır) · saat · iki küçük düğme.
         Kişi seçici (demo) çekmeceye taşındı. --- */
  /* sayfa genişliği: ızgara hücresi ve main içeriğe göre genişlemesin (yatay kaydırma yok) */
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .kabuk > main, .ust-sarmal, .icerik { min-width: 0; max-width: 100vw; }
  .ust { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; min-width: 0; }
  .ust-kim { min-width: 0; overflow: hidden; }
  .ust-kim { flex: 1 1 auto; gap: 8px; }
  .ust-kim > div { min-width: 0; }
  .ust-kim .avatar { width: 32px; height: 32px; font-size: 12px; flex: none; }
  .ust-ad { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ust-rol { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ust-sag { flex: none; width: auto; gap: 6px; flex-wrap: nowrap; margin-left: 0; }
  .ust-sag .saat { font-size: 13px; }
  .ust-sag .kim-sec { display: none; }
  .ust-sag .btn-kck { padding: 0 8px; min-height: 34px; font-size: 12px; }
  .ust-sag .btn .uzun { display: none; }
  .ust-sag .btn .kisa { display: inline-flex; align-items: center; }
  .btn-ikon { width: 16px; height: 16px; }
  .bildirim-btn .bildirim-say { margin-left: 4px; }

  /* çekmecedeki kişi seçici */
  .ray-kim { display: block; padding: 10px 12px 2px; }
  .ray-kim .secim { width: 100%; max-width: 100%; font-size: 13px; }

  /* sayfa girişi: başlık + en çok iki satır açıklama */
  .sayfa-bas { margin-bottom: 14px; }
  .sayfa-bas p { font-size: 13px; line-height: 1.45; color: var(--metin-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bolum { margin-top: 22px; }
  .bolum h2 { font-size: 18px; }

  /* görev kartı: düğmeler iki sütunlu ızgara, ana eylem en üstte tam genişlik */
  .gorev { padding: 12px; gap: 8px; }
  .gorev .btn-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gorev .btn-satir .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding: 6px 8px; }
  .gorev .btn-satir .btn-ana { grid-column: 1 / -1; order: -1; }
  .gorev .btn-satir .pil { grid-column: 1 / -1; }
  .gorev .beklet-serit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gorev .beklet-serit .pil, .gorev .beklet-serit > span:not(.pil) { grid-column: 1 / -1; }

  /* sayaç karoları: iki sütun */
  .izgara.i4:has(.sayac-tile), .izgara.i3:has(.sayac-tile), .izgara.i5:has(.sayac-tile) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sayac-tile .rakam, .sayac-tile .rakam.veri { font-size: 30px !important; }
  .sayac-tile .aciklama { font-size: 11px; }

  /* yüzen düğmeler çakışmasın: rehber solda, tur sorusu sağda */
  .rh.kucuk { left: 8px; right: auto; }

  .alt-sekme {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--yuzey); border-top: 1px solid var(--cizgi);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .alt-btn {
    display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none;
    font-size: 10.5px; color: var(--metin-3); cursor: pointer; border-radius: 6px; min-height: 48px;
  }
  .alt-btn span { line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alt-ikon { width: 18px; height: 18px; }
  .alt-btn[aria-current="page"], .alt-btn.aktif { color: var(--metin); font-weight: 600; }
  .alt-btn[aria-current="page"] .alt-ikon { color: var(--pirinc); }

  /* dokunma hedefleri ve tablolar */
  .btn, .btn-kck { min-height: 40px; }
  .tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .izgara.i2, .izgara.i3, .izgara.i4, .izgara.i5 { grid-template-columns: 1fr; }
  .sayfa-bas h1 { font-size: 24px; }
  .modal-kap, .modal { max-width: 100vw; }
}


/* ============================================================
   İLK KURULUM TURU
   ============================================================ */
.ik { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--zemin); }
.ik-ust { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey); flex-wrap: wrap; }
.ik-adimlar { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.ik-adim { border: 0; background: none; padding: 6px 10px; font-size: 12.5px; color: var(--metin-3); cursor: pointer; border-bottom: 2px solid transparent; }
.ik-adim.aktif { color: var(--metin); font-weight: 600; border-bottom-color: var(--pirinc); }
.ik-adim.bitti { color: var(--metin-2); }
.ik-govde { max-width: 980px; width: 100%; margin: 0 auto; padding: 28px 22px 40px; }
.ik-govde h1 { font-family: var(--f-marka, inherit); font-weight: 500; font-size: 30px; margin: 0 0 10px; }
.ik-govde h2 { font-size: 18px; margin: 26px 0 10px; }
.ik-giris { font-size: 15px; color: var(--metin-2); line-height: 1.6; max-width: 76ch; margin: 0 0 18px; }
.ik-not { font-size: 12.5px; color: var(--metin-3); }
.ik-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ik-kart { border-top: 2px solid var(--pirinc); padding-top: 10px; }
.ik-kart b { font-size: 15px; } .ik-kart p { margin: 4px 0 0; font-size: 13.5px; color: var(--metin-2); line-height: 1.55; }
.ik-liste { font-size: 14px; color: var(--metin-2); line-height: 1.7; padding-left: 20px; }
.ik-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); padding: 14px 16px; margin: 0 0 14px; }
.ik-form label { display: grid; gap: 4px; font-size: 12px; color: var(--metin-3); }
.ik-form .giris, .ik-form .secim { width: 100%; }
.ik-sayac { font-size: 13px; color: var(--metin-2); margin: 10px 0; }
.ik-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ik-ozet div { background: var(--yuzey); border: 1px solid var(--cizgi); padding: 14px; display: grid; gap: 2px; }
.ik-ozet b { font-size: 22px; font-family: var(--f-marka, inherit); font-weight: 500; } .ik-ozet span { font-size: 12px; color: var(--metin-3); }
.ik-alt { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cizgi); background: var(--yuzey); }
.uyari ul { margin: 6px 0 0; padding-left: 18px; } .uyari li { margin: 4px 0; }
@media (max-width: 760px) { .ik-govde { padding: 18px 14px 30px; } .ik-ust { padding: 10px 14px; } }


/* ============================================================
   TANITIM (ilk açış)
   ============================================================ */
.tn { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--zemin); }
.tn-ust { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey); }
.tn-noktalar { display: flex; gap: 8px; flex: 1; justify-content: center; }
.tn-nokta { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--metin-3); background: none; padding: 0; cursor: pointer; }
.tn-nokta.bitti { background: var(--metin-3); } .tn-nokta.aktif { background: var(--pirinc); border-color: var(--pirinc); transform: scale(1.25); }
.tn-govde { max-width: 960px; width: 100%; margin: 0 auto; padding: 30px 22px 44px; }
.tn-govde h1 { font-family: var(--f-marka, inherit); font-weight: 500; font-size: 34px; margin: 0 0 14px; line-height: 1.12; }
.tn-sayfa-no { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); margin-bottom: 8px; }
.tn-giris { font-size: 16px; color: var(--metin-2); line-height: 1.65; max-width: 74ch; margin: 0 0 22px; }
.tn-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; align-items: start; }
.tn-kolon { background: var(--yuzey); border: 1px solid var(--cizgi); padding: 16px 18px; }
.tn-kolon.yeni { border-top: 2px solid var(--pirinc); } .tn-kolon.eski { opacity: .85; }
.tn-kolon h3, .tn-rol h3, .tn-kural h3 { margin: 0 0 8px; font-size: 15px; }
.tn-kolon ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--metin-2); line-height: 1.6; }
.tn-maket { margin-top: 6px; } .tn-etiket { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--metin-3); margin-bottom: 6px; }
.tn-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--pirinc); padding: 12px 14px; margin-bottom: 8px; }
.tn-kart-bas { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .tn-kart-bas b { font-size: 14px; }
.tn-kart-alt { font-size: 12px; color: var(--metin-3); margin: 4px 0 8px; }
.tn-sla { height: 4px; background: var(--yuzey-3, #e6dfd2); margin: 8px 0; } .tn-sla i { display: block; height: 100%; background: var(--ok, #4a7c59); }
.tn-zincir { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.tn-zincir span { font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--cizgi); color: var(--metin-3); }
.tn-zincir span.bitti { border-color: var(--ok, #4a7c59); color: var(--ok, #4a7c59); } .tn-zincir span.aktif { border-color: var(--pirinc); color: var(--metin); font-weight: 600; }
.tn-zaman { display: grid; gap: 0; border-left: 2px solid var(--cizgi); margin-left: 6px; }
.tn-zaman > div { position: relative; padding: 0 0 18px 22px; }
.tn-zaman > div::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--pirinc); }
.tn-zaman time { font-family: var(--f-veri, monospace); font-size: 12.5px; color: var(--pirinc); margin-right: 10px; } .tn-zaman b { font-size: 15px; }
.tn-zaman p { margin: 4px 0 0; font-size: 14px; color: var(--metin-2); line-height: 1.6; max-width: 70ch; }
.tn-roller { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tn-rol { border: 1px solid var(--cizgi); background: var(--yuzey); padding: 14px 16px; } .tn-rol p { margin: 0 0 8px; font-size: 13.5px; color: var(--metin-2); line-height: 1.55; }
.tn-rol.sen { border-color: var(--pirinc); box-shadow: inset 0 3px 0 var(--pirinc); }
.tn-not { margin-top: 16px; padding: 12px 16px; background: var(--pirinc-zem, #f3ebd9); font-size: 13.5px; color: var(--metin-2); line-height: 1.6; }
.tn-telefon { border: 1px solid var(--metin-3); border-radius: 22px; padding: 14px 12px; background: var(--zemin); max-width: 320px; }
.tn-tel-bas { font-size: 12px; text-align: center; color: var(--metin-3); margin-bottom: 10px; letter-spacing: .06em; }
.tn-kurallar { display: grid; gap: 12px; } .tn-kural { border: 1px solid var(--cizgi); background: var(--yuzey); padding: 14px 16px; }
.tn-kural p { margin: 8px 0 0; font-size: 13.5px; color: var(--metin-2); }
.tn-akis { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tn-akis i { font-style: normal; color: var(--metin-3); }
.tn-akis span { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--cizgi); background: var(--zemin); } .tn-akis span.kritik { border-color: var(--kritik, #a33); color: var(--kritik, #a33); }
.tn-alt { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cizgi); background: var(--yuzey); }
@media (max-width: 760px) { .tn-iki { grid-template-columns: 1fr; } .tn-govde { padding: 20px 14px 32px; } .tn-govde h1 { font-size: 27px; } .tn-ust { padding: 10px 14px; } }


/* ============================================================
   DEMO REHBERİ
   ============================================================ */
.rh { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(380px, calc(100vw - 24px));
  background: var(--yuzey); border: 1px solid var(--pirinc); border-top-width: 3px; padding: 12px 14px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.rh.kucuk { width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.rh-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.rh-bar { height: 3px; background: var(--yuzey-3, #e6dfd2); margin: 8px 0 10px; } .rh-bar i { display: block; height: 100%; background: var(--pirinc); }
.rh b { display: block; font-size: 15.5px; margin-bottom: 4px; } .rh p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--metin-2); }
.rh-kim { font-size: 11.5px; color: var(--metin-3); margin-bottom: 10px; }
.rh-alt { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .rh { right: 8px; left: 8px; width: auto; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; overflow-y: auto; } .rh.kucuk { left: auto; } }


/* ---------------- marka: kurumsal ad (işletme) sol üstte, ürün adı küçük imza ---------------- */
.marka-ad.isletme { font-size: 17px; letter-spacing: .01em; line-height: 1.2; font-weight: 600; word-break: break-word; }
.marka-alt em { font-style: normal; color: var(--pirinc); }
.marka-alt { text-transform: none; letter-spacing: .04em; }
.marka-ad em { letter-spacing: .02em; }
.ust .marka-ad, .ik-ust .marka-ad, .tn-ust .marka-ad { letter-spacing: .02em; font-size: 22px; }
.sayfa-ust-ad { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pirinc); margin-bottom: 4px; }
.bulut-logo { letter-spacing: .02em; font-size: 24px; }


/* masaüstü: telefon kısa etiketleri ve çekmece kişi seçicisi gizli */
@media (min-width: 761px) {
  .ust-sag .btn .kisa { display: none; }
  .ray-kim { display: none; }
}


/* ============================================================
   TELEFONDA TABLO → KART  (uygulama.js: tabloEtiketle)
   Her satır bir kart; hücrenin sütun başlığı solda küçük etiket.
   Geniş tablolar (.yatay) kaydırılır, ilk sütun yerinde kalır.
   ============================================================ */
@media (max-width: 760px) {
  .tablo-kap:has(> table.kart-tablo) { overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  table.kart-tablo, table.kart-tablo tbody, table.kart-tablo tr, table.kart-tablo td { display: block; width: 100%; min-width: 0; }
  table.kart-tablo thead { display: none; }
  table.kart-tablo tr {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
    padding: 4px 13px; margin-bottom: 10px;
  }
  table.kart-tablo td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 9px 0; border: 0; border-bottom: 1px solid var(--cizgi-soft); text-align: right; overflow-wrap: anywhere;
  }
  table.kart-tablo tr td:last-child { border-bottom: 0; }
  table.kart-tablo td::before {
    content: attr(data-etiket); flex: none; max-width: 44%; text-align: left;
    font-family: var(--f-veri); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3);
  }
  table.kart-tablo td:not([data-etiket]) { display: block; text-align: left; }
  table.kart-tablo td:not([data-etiket])::before { content: none; }
  table.kart-tablo td:first-child { font-weight: 600; }
  table.kart-tablo td.bos-hucre { display: none; }
  table.kart-tablo td > .btn, table.kart-tablo td .btn-satir { flex-wrap: wrap; }
  table.kart-tablo td .btn { margin: 2px 0; }

  /* yetki matrisi: pozisyon sütunu dar (yalnız ad), kutulara kaydırarak ulaşılır */
  .yetki-tablo .poz-sutun { min-width: 132px; max-width: 140px; width: 136px; }
  .yetki-tablo td.poz-sutun > div { display: none !important; }
  .yetki-tablo td.poz-sutun > b { font-size: 12.5px; line-height: 1.25; display: block; }
  .tablo.yatay th:first-child, .tablo.yatay td:first-child { position: sticky; left: 0; z-index: 1; background: var(--yuzey); box-shadow: 1px 0 0 var(--cizgi-soft); }
}