/* ============================================================
   TEMA: KART — yuvarlak köşeli, kart tabanlı arayüz
   ------------------------------------------------------------
   konak.css'in üstüne biner (paket.json'da ondan SONRA yüklenir);
   çizgi ve sıfır köşe yerine açık zemin üstünde beyaz kartlar,
   lacivert vurgu, durum için renkli etiketler.
   Renk adları değişmedi (pirinc = marka vurgusu, ok, risk, kritik…).
   Yazı: Onest (arayüz ve başlık) · Geist Mono (sayı, saat, üst etiket).
   Bir sektör paketi bu dosyayı paket.json'a eklemezse eski "Defter" görünümü kalır.
   ============================================================ */

:root {
  --zemin:      #f5f3ee;
  --yuzey:      #fffefb;
  --yuzey-2:    #f1eee7;
  --yuzey-3:    #e8e4db;
  --cizgi:      rgba(21, 32, 51, .085);
  --cizgi-soft: rgba(21, 32, 51, .06);

  --metin:      #152033;
  --metin-2:    #5f6b7a;
  --metin-3:    #6b7686;

  --pirinc:     #1f3a5f;
  --pirinc-ac:  #4a6a92;
  --pirinc-zem: rgba(31, 58, 95, .09);
  --pirinc-ustu:#ffffff;

  --altin:      #8a5d12;
  --altin-zem:  rgba(217, 154, 43, .16);

  --ok:         #2e7d4a;  --ok-zem:     rgba(46, 125, 74, .12);
  --risk:       #a1620f;  --risk-zem:   rgba(217, 154, 43, .16);
  --kritik:     #b4322e;  --kritik-zem: rgba(180, 50, 46, .11);
  --bekle:      #5b55c9;  --bekle-zem:  rgba(91, 85, 201, .11);
  --notr:       #5f6b7a;  --notr-zem:   #ebe8e0;

  --hero-zemin: #1f3a5f;
  --hero-metin: #ffffff;
  --hero-soluk: rgba(255, 255, 255, .72);
  --hero-cizgi: rgba(255, 255, 255, .14);
  --hero-btn:   #ffffff;
  --hero-btn-metin: #1f3a5f;

  --golge: 0 1px 2px rgba(21, 32, 51, .05), 0 10px 24px -16px rgba(21, 32, 51, .22);
  --r: 14px;
  --r-kck: 10px;

  --harita-zemin: #ece9e1;
  --harita-bag:   #d3dcd0;
  --harita-yol:   #ddd9cf;
  --harita-yapi:  #8c95a3;

  --f-marka: "Onest", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui:    "Onest", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-veri:  "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #12161d; --yuzey: #1a1f28; --yuzey-2: #222834; --yuzey-3: #2a313d;
    --cizgi: rgba(232, 237, 244, .08); --cizgi-soft: rgba(232, 237, 244, .06);
    --metin: #e8edf4; --metin-2: #97a3b4; --metin-3: #8b97a8;
    --pirinc: #9dbbe6; --pirinc-ac: #bcd1ef; --pirinc-zem: rgba(157, 187, 230, .13); --pirinc-ustu: #0f141b;
    --altin: #e7b45a; --altin-zem: rgba(231, 180, 90, .14);
    --ok: #7cc596; --ok-zem: rgba(124, 197, 150, .14);
    --risk: #e7b45a; --risk-zem: rgba(231, 180, 90, .13);
    --kritik: #ee7a72; --kritik-zem: rgba(238, 122, 114, .14);
    --bekle: #aaa5f6; --bekle-zem: rgba(170, 165, 246, .16);
    --notr: #97a3b4; --notr-zem: #222834;
    --hero-zemin: #1c2a40; --hero-metin: #ffffff; --hero-soluk: rgba(255, 255, 255, .7);
    --hero-cizgi: rgba(255, 255, 255, .12); --hero-btn: #9dbbe6; --hero-btn-metin: #0f141b;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .7);
    --harita-zemin: #1a1f28; --harita-bag: #26302a; --harita-yol: #2a313d; --harita-yapi: #4d596b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #12161d; --yuzey: #1a1f28; --yuzey-2: #222834; --yuzey-3: #2a313d;
  --cizgi: rgba(232, 237, 244, .08); --cizgi-soft: rgba(232, 237, 244, .06);
  --metin: #e8edf4; --metin-2: #97a3b4; --metin-3: #8b97a8;
  --pirinc: #9dbbe6; --pirinc-ac: #bcd1ef; --pirinc-zem: rgba(157, 187, 230, .13); --pirinc-ustu: #0f141b;
  --altin: #e7b45a; --altin-zem: rgba(231, 180, 90, .14);
  --ok: #7cc596; --ok-zem: rgba(124, 197, 150, .14);
  --risk: #e7b45a; --risk-zem: rgba(231, 180, 90, .13);
  --kritik: #ee7a72; --kritik-zem: rgba(238, 122, 114, .14);
  --bekle: #aaa5f6; --bekle-zem: rgba(170, 165, 246, .16);
  --notr: #97a3b4; --notr-zem: #222834;
  --hero-zemin: #1c2a40; --hero-metin: #ffffff; --hero-soluk: rgba(255, 255, 255, .7);
  --hero-cizgi: rgba(255, 255, 255, .12); --hero-btn: #9dbbe6; --hero-btn-metin: #0f141b;
  --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .7);
  --harita-zemin: #1a1f28; --harita-bag: #26302a; --harita-yol: #2a313d; --harita-yapi: #4d596b;
  color-scheme: dark;
}

body { font-size: 14.5px; letter-spacing: -.003em; }

/* ---------- yan ray (masaüstü) ---------- */
.ray { background: var(--yuzey); border-right: 1px solid var(--cizgi); }
.marka { padding: 22px 18px 14px; }
.marka-ad, .marka-ad.isletme { font-family: var(--f-marka); font-weight: 700; letter-spacing: -.015em; }
.marka-ad.isletme { font-size: 17px; line-height: 1.2; }
.marka-ad em { font-style: normal; color: var(--pirinc); font-weight: 700; }
.marka-alt { font-family: var(--f-veri); font-size: 10px; letter-spacing: .08em; color: var(--metin-3); margin-top: 6px; }
.ray-grup { padding: 10px 10px 4px; }
.ray-baslik, .ray-altbaslik { font-family: var(--f-veri); font-size: 10px; letter-spacing: .1em; font-weight: 500; color: var(--metin-3); }
.ray-altbaslik { border-top: 0; }
.ray-btn { border-radius: var(--r-kck); padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--metin-2); }
.ray-btn:hover { background: var(--yuzey-2); color: var(--metin); }
.ray-btn[aria-current="page"] { background: var(--pirinc-zem); color: var(--pirinc); font-weight: 600; box-shadow: none; }
.ray-btn[aria-current="page"] .ray-ikon { color: var(--pirinc); }
.ray-rozet { border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.ray-rozet:not(.sakin) { color: #fff; }
.ray-rozet.sakin { background: var(--notr-zem); color: var(--metin-2); }
.ray-kisa { border-radius: 6px; background: var(--yuzey-2); border-color: transparent; }
.ray-btn.dept[aria-current="page"] .ray-kisa { background: var(--pirinc); border-color: var(--pirinc); color: var(--pirinc-ustu); }
.ray-dip { border-top: 1px solid var(--cizgi); padding: 14px; }

/* ---------- üst şerit ---------- */
.ust { background: var(--zemin); border-bottom: 1px solid var(--cizgi); padding: 12px 28px; }
.avatar { background: var(--pirinc-zem); border: 0; color: var(--pirinc); font-weight: 700; }
.saat { font-family: var(--f-veri); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.saat small { text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.secim { background: var(--yuzey); border-radius: var(--r-kck); border: 1px solid var(--cizgi); }

/* ---------- sayfa ---------- */
.icerik { padding: 28px 28px 80px; max-width: 1240px; }
.sayfa-bas { margin-bottom: 22px; }
.sayfa-bas h1 {
  font-family: var(--f-marka); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12; letter-spacing: -.025em; margin: 0 0 8px;
}
.sayfa-bas h1 em { font-style: normal; color: var(--pirinc); font-weight: 700; }
.sayfa-bas p { font-size: 14px; line-height: 1.55; max-width: 66ch; }
.sayfa-ust-ad { font-family: var(--f-veri); letter-spacing: .08em; }

.bolum { margin-top: 30px; }
.bolum > h2 {
  font-family: var(--f-marka); font-size: 17px; font-weight: 600; letter-spacing: -.012em;
  margin: 0 0 12px; padding: 0; border: 0;
}
.etiket { font-family: var(--f-veri); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; }

/* ---------- yüzeyler ---------- */
.kutu { border-radius: var(--r); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.kutu-ic { padding: 16px 18px; }
.izgara { gap: 14px; }

/* sayaç karoları */
.sayac-tile {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px 15px 13px; gap: 4px; box-shadow: var(--golge);
}
.sayac-tile .aciklama {
  order: 2; font-family: var(--f-ui); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--metin-3);
}
.sayac-tile .rakam, .sayac-tile .rakam.veri {
  font-family: var(--f-veri); font-weight: 600; font-size: 26px !important; line-height: 1.1; letter-spacing: -.03em; color: var(--metin);
}
.sayac-tile.vurgu { background: var(--kritik-zem); border-color: transparent; }
.sayac-tile.vurgu .rakam { color: var(--kritik); }
.sayac-tile.vurgu .aciklama { color: var(--kritik); }
.veri[style*="font-size:27px"] { font-family: var(--f-veri) !important; font-weight: 600 !important; font-size: 26px !important; line-height: 1.1; letter-spacing: -.03em; }
.veri[style*="font-size:19px"] { font-family: var(--f-veri) !important; font-weight: 600 !important; font-size: 20px !important; line-height: 1.15; letter-spacing: -.02em; }

/* ---------- etiketler: renkli zeminli, yuvarlak ---------- */
.pil { background: var(--notr-zem) !important; border-radius: 999px; padding: 2px 9px; font-weight: 600; font-size: 11.5px; letter-spacing: 0; }
.pil.sade { border: 0; padding: 2px 9px; font-weight: 500; }
.p-notr { color: var(--metin-2); }
.p-ok { color: var(--ok); background: var(--ok-zem) !important; }
.p-risk { color: var(--risk); background: var(--risk-zem) !important; }
.p-kritik { color: var(--kritik); background: var(--kritik-zem) !important; }
.p-bekle { color: var(--bekle); background: var(--bekle-zem) !important; }
.p-marka { color: var(--pirinc); background: var(--pirinc-zem) !important; }

/* ---------- düğmeler ---------- */
.btn {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kck);
  padding: 9px 15px; font-weight: 600; color: var(--metin); font-family: var(--f-ui);
}
.btn:hover:not(:disabled) { background: var(--yuzey-2); border-color: var(--cizgi); }
.btn.btn-ana { background: var(--pirinc); border-color: var(--pirinc); color: var(--pirinc-ustu) !important; }
.btn.btn-ana:hover:not(:disabled) { background: var(--pirinc-ac); border-color: var(--pirinc-ac); }
.btn-kck { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.btn-ariza { background: var(--kritik-zem); border-color: transparent; color: var(--kritik); }
.btn-ariza:hover:not(:disabled) { background: var(--kritik-zem); border-color: var(--kritik); }
.giris { background: var(--yuzey); border-radius: var(--r-kck); padding: 10px 13px; border: 1px solid var(--cizgi); }
.giris:focus { outline: none; border-color: var(--pirinc); box-shadow: 0 0 0 3px var(--pirinc-zem); }

/* ---------- görev kartı ---------- */
.gorev {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--notr);
  border-radius: var(--r); padding: 14px 15px 13px; gap: 10px; box-shadow: var(--golge);
}
.gorev.s-ok     { border-left: 4px solid var(--ok); border-top: 1px solid var(--cizgi); }
.gorev.s-risk   { border-left: 4px solid var(--risk); border-top: 1px solid var(--cizgi); }
.gorev.s-kritik { border-left: 4px solid var(--kritik); border-top: 1px solid var(--cizgi); }
.gorev.s-bekle  { border-left: 4px solid var(--bekle); border-top: 1px solid var(--cizgi); }
.gorev-bas { font-family: var(--f-marka); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.gorev.vurgulu { background: var(--yuzey); box-shadow: 0 0 0 3px var(--pirinc-zem), var(--golge); }
.sla-cizgi { height: 6px; border-radius: 3px; background: var(--yuzey-3); }
.sla-dolu { border-radius: 3px; }
.sla-yazi { font-family: var(--f-veri); font-size: 11px; letter-spacing: 0; }
.zincir-adim { border: 0; border-radius: 999px; background: none; padding: 1px 8px; }
.zincir-adim.bitti { color: var(--ok); }
.zincir-adim.aktif { background: var(--pirinc-zem); color: var(--pirinc); font-weight: 700; }
.zincir-ok { color: var(--metin-3); opacity: .5; }
.gorev-ipucu { background: var(--yuzey-2); border-radius: var(--r-kck); padding: 9px 12px; }
.gorev-ipucu.havuz { background: var(--risk-zem); }
.yer-pil { border-radius: 999px; background: var(--yuzey-2); padding: 2px 9px; }
.gorev-foto { border-radius: var(--r-kck); }
.kapanis-uyari { color: var(--risk); }

/* ---------- oda ızgarası ---------- */
.oda { border-radius: 12px; background: var(--yuzey); padding: 12px 11px 10px; box-shadow: var(--golge); overflow: hidden; }
.oda-no { font-family: var(--f-veri); font-weight: 600; font-size: 19px; letter-spacing: -.03em; }
.oda-bayrak { border-radius: 999px; }
.oda-bayrak.vip { background: var(--altin); color: var(--pirinc-ustu); }

/* ---------- tablolar ---------- */
.tablo-kap { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); overflow: auto; box-shadow: var(--golge); }
.tablo th { background: var(--yuzey-2); font-family: var(--f-veri); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; padding: 10px 12px; }
.tablo td { padding: 11px 12px; }
.satir-vip td { background: var(--altin-zem); }

/* ---------- checklist ---------- */
.madde { padding: 12px 0; }
.madde-kutu { border-radius: 50%; width: 22px; height: 22px; background: var(--yuzey); border-color: var(--metin-3); }
.madde-kutu[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.madde-std { font-family: var(--f-ui); font-style: normal; font-size: 13px; color: var(--metin-2); }
.foto-yuva { border-radius: var(--r-kck); background: var(--yuzey-2); }
.bolum-cip { border-radius: var(--r-kck); background: var(--yuzey); border: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); border-bottom: 3px solid var(--cizgi); padding: 9px 12px; }
.bolum-cip[aria-current="true"] { background: var(--pirinc-zem); border-color: transparent; border-bottom-color: var(--pirinc); }
.bolum-cip.tam { border-bottom-color: var(--ok); }
.bolum-cip.gecik, .bolum-cip.kritik { border-bottom-color: var(--kritik); }
.bolum-cip.uygunsuz { border-bottom-color: var(--risk); }
.periyot-btn[aria-current="true"] { border-bottom-color: var(--pirinc); color: var(--pirinc); }
.yetki-kutu { border-radius: 8px; }
.yetki-kutu.acik { background: var(--pirinc); border-color: var(--pirinc); color: var(--pirinc-ustu); }
.eh-btn.secili-hayir { background: var(--kritik); color: #fff; }

/* ---------- ısı haritası, ilerleme ---------- */
.isi-h { border-radius: 6px; }
.uyum-bar, .ilerleme { border-radius: 4px; height: 8px; background: var(--yuzey-3); overflow: hidden; }
.uyum-bar > div, .ilerleme > div { background: var(--pirinc); border-radius: 4px; }
.ilerleme.tam > div { background: var(--ok); }
.uyum-rakam { font-family: var(--f-veri); font-size: 16px; font-weight: 600; }
button.uyum-satir { border-bottom-color: var(--cizgi-soft); }

/* ---------- uyarılar ---------- */
.uyari { border: 0; border-left: 4px solid var(--risk); border-radius: var(--r); background: var(--risk-zem); padding: 13px 15px; }
.uyari.bilgi, .bilgi { border-left-color: var(--pirinc); background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--pirinc); }

/* ---------- pencereler ---------- */
.modal-fon { background: rgba(10, 14, 20, .5); backdrop-filter: blur(4px); }
.modal { border-radius: 20px; border: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
.modal-bas h2 { font-family: var(--f-marka); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
details.katlan { border-radius: var(--r); }
details.katlan > summary { font-family: var(--f-marka); font-size: 15px; font-weight: 600; }
.tost { border-radius: 12px; border: 1px solid var(--cizgi); border-left: 4px solid var(--pirinc); background: var(--yuzey); box-shadow: var(--golge); }
.tost.uyari-tost { border-left-color: var(--kritik); }
.bildirim { border-radius: 12px; }
.mola-pil, .akis-oda { border-radius: 999px; }
.faz-rozet { border-radius: 999px; background: var(--notr-zem); border-color: transparent; }
.faz-rozet.tam { background: var(--ok-zem); }
button.vl-kart { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey); box-shadow: var(--golge); }
button.vl-kart:hover { border-color: var(--pirinc-ac); }

/* ---------- özet kartı (Vardiyam) ---------- */
.hero {
  background: var(--hero-zemin); color: var(--hero-metin); border-radius: 22px;
  padding: 20px 20px 18px; margin-bottom: 20px; display: grid; gap: 14px;
  box-shadow: 0 18px 36px -22px rgba(15, 25, 45, .55);
}
.hero-ust { font-family: var(--f-veri); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hero-soluk); }
.hero h1 { margin: 0; font-family: var(--f-marka); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; color: var(--hero-metin); }
.hero-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hero-cizgi); border-bottom: 1px solid var(--hero-cizgi); }
.hero-sayilar > div { padding: 12px 0 10px; display: grid; gap: 2px; }
.hero-sayilar > div + div { padding-left: 14px; border-left: 1px solid var(--hero-cizgi); }
.hero-sayilar b { font-family: var(--f-veri); font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.hero-sayilar span { font-size: 12px; color: var(--hero-soluk); }
.hero-sayilar .uyar b { color: #ffb4ad; }
.hero-simdi { background: rgba(255, 255, 255, .09); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.hero-simdi-ust { font-family: var(--f-veri); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hero-soluk); }
.hero-simdi-bas { font-weight: 600; font-size: 15px; line-height: 1.3; }
.hero-btn {
  justify-self: start; margin-top: 4px; background: var(--hero-btn); color: var(--hero-btn-metin); border: 0;
  border-radius: 10px; padding: 8px 14px; font: 600 13px var(--f-ui); cursor: pointer;
}
@media (min-width: 761px) {
  .hero { max-width: 760px; grid-template-columns: 1fr; }
}

/* ---------- misafir paneli ---------- */
.misafir-bas { background: none; border-bottom: 0; padding: 28px 20px 14px; }
.misafir-bas h1 { font-family: var(--f-marka); font-weight: 700; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; }
.misafir-govde { padding: 14px 20px; gap: 22px; }
.misafir-alt-menu { background: var(--yuzey); border-top: 1px solid var(--cizgi); }
.misafir-alt-menu button[aria-current="page"] { color: var(--pirinc); font-weight: 700; }
.istek-btn { border-radius: var(--r); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.istek-btn:hover { border-color: var(--pirinc-ac); }
.istek-btn b { font-family: var(--f-marka); font-size: 15px; font-weight: 600; }

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 760px) {
  .icerik { padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .ust { background: var(--zemin); }

  /* alt çubuk: açık yüzey, seçili sekme hap biçiminde, ortada yuvarlak eylem düğmesi */
  .alt-sekme {
    z-index: 70; background: var(--yuzey); border-top: 1px solid var(--cizgi);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); align-items: end;
  }
  .alt-btn { color: var(--metin-3); gap: 2px; font-weight: 500; }
  .alt-ikon { width: 44px; height: 28px; padding: 5px 13px; border-radius: 14px; }
  .alt-btn[aria-current="page"], .alt-btn.aktif { color: var(--pirinc); font-weight: 700; }
  .alt-btn[aria-current="page"] .alt-ikon, .alt-btn.aktif .alt-ikon { background: var(--pirinc-zem); color: var(--pirinc); }
  .alt-fab { display: grid; justify-items: center; gap: 3px; border: 0; background: none; padding: 0 2px 4px; cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--metin-2); }
  .alt-fab-daire {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-top: -26px;
    background: var(--pirinc); color: var(--pirinc-ustu);
    box-shadow: 0 0 0 5px var(--yuzey), 0 10px 20px -8px rgba(15, 25, 45, .55);
  }
  .alt-fab .alt-ikon { width: 22px; height: 22px; padding: 0; background: none; color: inherit; border-radius: 0; }
  .kabuk:has(.alt-fab) .ust-sag .btn-ariza { display: none; }

  /* menü: tam ekran "Program" — gruplu, ikonlu kartlar */
  .ray { width: 100vw; max-width: none; background: var(--zemin); border-right: 0; padding: 0 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .ray.acik { box-shadow: none; }
  .ray-perde { display: none !important; }
  .marka { padding: 18px 2px 8px; border: 0; text-align: left; align-items: flex-start; }
  .ray-kim { padding: 4px 0 6px; }
  .ray-kim .secim { border-radius: var(--r-kck); }
  .ray-grup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 4px; }
  .ray-baslik { grid-column: 1 / -1; margin: 14px 0 0; padding: 0; font-family: var(--f-marka); font-size: 17px; font-weight: 600; letter-spacing: -.012em; text-transform: none; color: var(--metin); }
  .ray-altbaslik { grid-column: 1 / -1; margin: 10px 0 0; padding: 0; font-family: var(--f-marka); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--metin-2); }
  .ray-btn {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px;
    min-height: 88px; padding: 12px; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r); box-shadow: var(--golge); position: relative; font-size: 14px; font-weight: 600; color: var(--metin);
    white-space: normal;
  }
  .ray-btn[aria-current="page"] { background: var(--pirinc-zem); border-color: transparent; color: var(--pirinc); }
  .ray .ray-ikon { width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: var(--pirinc-zem); color: var(--pirinc); }
  .ray .ray-btn[aria-current="page"] .ray-ikon { background: var(--pirinc); color: var(--pirinc-ustu); }
  .ray-btn.dept { padding-left: 12px; font-size: 14px; }
  .ray-kisa { width: 36px; height: 36px; border-radius: 11px; font-size: 11px; background: var(--pirinc-zem); color: var(--pirinc); border: 0; }
  .ray-rozet { position: absolute; top: 10px; right: 10px; margin: 0; }
  .ray-dip { display: grid; gap: 8px; border-top: 0; padding: 18px 0 0; }
  .ray-dip .btn { width: 100%; }

  /* kartlar telefonda biraz daha sıkı */
  .gorev { padding: 13px 13px 12px; }
  .hero { border-radius: 20px; padding: 18px 16px 16px; }
  .hero h1 { font-size: 26px; }
  .bolum > h2 { font-size: 16px; }
  .sayac-tile { padding: 12px 13px; }
  .tablo-kap { border-radius: var(--r-kck); }
  .modal { border-radius: 20px 20px 0 0; }
  .btn, .btn-kck { min-height: 38px; }
  .btn-kck { padding: 6px 12px; }
}


/* ---------- rehberli demo ve ilk kullanım turu ---------- */
.rh { border-radius: 18px; border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .45); }
.rh.kucuk { border: 0; background: none; box-shadow: none; }
.rh-bar { height: 5px; border-radius: 3px; background: var(--yuzey-3); overflow: hidden; }
.rh-bar i { border-radius: 3px; background: var(--pirinc); }
.rh-kim { color: var(--metin-3); }
.tur-kart { border-radius: 18px; border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .45); }
.tur-kart h2 { font-family: var(--f-marka); font-weight: 700; letter-spacing: -.02em; }
.tur-soru { border-radius: 50%; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--pirinc); box-shadow: var(--golge); }
.tur-nokta.aktif { background: var(--pirinc); }

/* ---------- ilk kurulum, tanıtım, giriş kapısı ---------- */
.bulut-kart, .ik-kart, .tn-kart { border-radius: 20px; }
.bulut-logo, .ik-ust .marka-ad, .tn-ust .marka-ad { font-family: var(--f-marka); font-weight: 700; letter-spacing: -.02em; }
.bulut-logo span, .marka-ad em, .marka-alt em { color: var(--pirinc); }