/* style.css — ÜRETİLMİŞ DOSYA: araclar/arayuz/stil_uret.py istemci/g1.css'ten üretir (sha256 b7be1f2a5fe2c12a61ac9f7cd0f20bf4331073891701b3e080e369dacb7f3cb2); elle değiştirme. */
/* istemci/g1.css — G1 KT-1 HUD ve önizleme (G-ARAYÜZ; plan §8.2 arayüz paleti, §10). Renkler YALNIZ
   varlik/palet.json "arayuz" grubundan (statik test: tests_g1/arayuz/test_statik.py); saydamlık aynı renklerin rgba
   biçimiyle. Metin yok: görünen her yazı i18n'den gelir. Dünya kahramandır: HUD dört köşede, hafif. */
:root {
  --kagit: #f7f3e9;
  --kart: #fffdf8;
  --murekkep: #283b32;
  --yesil: #345d49;
  --turuncu: #d37c58;
  --kart-saydam: rgba(255, 253, 248, 0.92);
  --kagit-saydam: rgba(247, 243, 233, 0.94);
  --murekkep-hafif: rgba(40, 59, 50, 0.62);
  --murekkep-cizgi: rgba(40, 59, 50, 0.16);
  --golge: 0 1px 2px rgba(40, 59, 50, 0.14), 0 6px 18px rgba(40, 59, 50, 0.12);
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --kenar: 16px;
  --yuvarlak: 14px;
  --dokunma: 44px;
  /* taban belirteçleri (gateway-v3 style.css adları; değerler yalnız arayüz paletinden) */
  --paper: var(--kagit);
  --card: var(--kart);
  --ink: var(--murekkep);
  --green: var(--yesil);
  --orange: var(--turuncu);
  --tel-alt: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--kagit); color: var(--murekkep);
  font-family: var(--yazi); font-size: 15px; line-height: 1.35; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- dünya */
.koy { position: fixed; inset: 0; }
.tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }
.tuval:active { cursor: grabbing; }
.tuval:focus-visible { box-shadow: inset 0 0 0 3px var(--turuncu); }
/* minyatür hissi: yalnız CSS vinyeti (§8.6; EffectComposer yok) */
.koy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(40, 59, 50, 0) 58%, rgba(40, 59, 50, 0.16) 100%); }

/* ---------------------------------------------------------------- dünyaya bağlı etiketler (§10.3) */
.etiketler { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.etiket { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: auto; white-space: nowrap; }
/* sap (§10.3 ilişkisel bağ; KT-1 bulgu 8: grup çipi dahil): etiket kaldırıldıysa çapaya ince çizgi. Boy --sap, açı --sap-aci
   (arayuz.js sapVektoru; çip geniş aramayla yana indiyse sap eğik); alt kenarın ortasından çıkar, etiket çapanın altındaysa üst kenardan. */
.igne::after, .olay-rozet::after, .balon::after, .etiket-ad::after, .grup-cip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; margin-left: -1px;
  height: var(--sap, 0px); background: var(--murekkep-hafif); border-radius: 1px; pointer-events: none;
  transform-origin: 50% 0; transform: rotate(var(--sap-aci, 0deg)); }
.etiket-ad[data-secili="true"]::after { background: var(--yesil); }
.etiket[data-alt="true"]::after { top: auto; bottom: 100%; transform-origin: 50% 100%; }
html[data-gece="true"] .igne::after, html[data-gece="true"] .olay-rozet::after, html[data-gece="true"] .balon::after,
html[data-gece="true"] .etiket-ad::after, html[data-gece="true"] .grup-cip::after { background: var(--kart-saydam); }
/* dokunmatik vuruş alanı (§6.2 E3, KT-1 K-4): düğme etiketlerin görünmez ≥ 44 px alanı, görsel kutunun ortasında; yerleşim
   aynı alanı ayırır (arayuz.js vurus, DOKUNMA_PX) — komşu etiket bu alanı çalamaz. Köşe yuvarlatılmaz (vuruş karesi tam kalır). */
@media (pointer: coarse) {
  .igne::before, .grup-cip::before, .olay-rozet::before { content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .akis li[tabindex] { min-height: 44px; }   /* akış satırı dokununca kişiyi seçer: o da dokunma hedefi */
}
.igne { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--kart-saydam);
  box-shadow: var(--golge); border: 1px solid var(--murekkep-cizgi); cursor: pointer; }
.igne svg { width: 22px; height: 22px; display: block; }
.igne-sayi { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--yesil); color: var(--kart);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.igne-ad { font-size: 13px; font-weight: 600; padding-right: 6px; }
.igne-durum { font-size: 12px; color: var(--murekkep-hafif); padding-right: 6px; }
.etiket-ad { padding: 3px 8px; border-radius: 999px; background: var(--kart-saydam); box-shadow: var(--golge); font-size: 13px; font-weight: 600;
  border: 1px solid var(--murekkep-cizgi); pointer-events: none; }
.etiket-ad small { font-weight: 400; color: var(--murekkep-hafif); margin-left: 4px; }
.etiket-ad[data-secili="true"] { background: var(--yesil); color: var(--kart); border-color: var(--yesil); }
.etiket-ad[data-secili="true"] small { color: var(--kagit); }
.balon { max-width: 240px; white-space: normal; padding: 6px 10px; border-radius: 12px; background: var(--kart); box-shadow: var(--golge);
  border: 1px solid var(--murekkep-cizgi); font-size: 13px; pointer-events: none; }
.balon b { display: block; font-size: 11px; letter-spacing: 0.02em; color: var(--yesil); }
.grup-cip { padding: 3px 9px; border-radius: 999px; background: var(--murekkep); color: var(--kart); font-size: 12px; font-weight: 700;
  box-shadow: var(--golge); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.grup-cip .dusunce { color: var(--kagit); letter-spacing: 0.08em; }
.olay-rozet { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 999px; background: var(--kart);
  box-shadow: var(--golge); border: 1px solid var(--murekkep-cizgi); font-size: 12px; font-weight: 700; cursor: pointer; }
.olay-rozet svg { width: 20px; height: 20px; display: block; }
.uyku-ipucu { padding: 3px 8px; border-radius: 999px; background: var(--kart-saydam); font-size: 12px; box-shadow: var(--golge); pointer-events: none; }

/* ---------------------------------------------------------------- HUD köşeleri */
.hud { position: fixed; z-index: 5; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-sol-ust { left: var(--kenar); top: var(--kenar); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: min(640px, calc(100vw - 2 * var(--kenar) - 300px)); }
.vitrin { max-width: 420px; }
.hud-sag-ust { right: var(--kenar); top: var(--kenar); display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hud-alt { left: var(--kenar); right: var(--kenar); bottom: var(--kenar); display: flex; align-items: flex-end; gap: 10px; }
.marka-cip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--kart-saydam); box-shadow: var(--golge); white-space: nowrap; max-width: 100%; }
.marka { font-weight: 800; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.marka-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--turuncu); display: inline-block; }
.saat-cip { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; color: var(--murekkep); white-space: nowrap; }
.saat-cip .parca { display: inline-flex; gap: 6px; align-items: center; }
.saat-cip svg { width: 18px; height: 18px; display: block; }
.saat-cip .ayrac { color: var(--murekkep-hafif); }
.vitrin { border-radius: var(--yuvarlak); background: var(--kart-saydam); box-shadow: var(--golge); overflow: hidden; }
.vitrin-dugme { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 12px; cursor: pointer; text-align: left; min-height: 36px; }
.vitrin[data-acik="true"] .vitrin-dugme { display: none; }
.vitrin[data-acik="false"] .vitrin-ayrinti { display: none; }
.vitrin-ozet { font-size: 13px; font-weight: 600; }
.vitrin-ayrinti { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.vitrin-satir { margin: 0; font-size: 14px; }
.vitrin-satir:first-child { font-weight: 700; font-size: 15px; }
.vitrin-dusunen::before { content: "···"; color: var(--turuncu); font-weight: 800; margin-right: 6px; letter-spacing: 0.06em; }
.vitrin-znext { color: var(--yesil); font-weight: 600; }
.vitrin-baglanti { margin: 4px 0 0; font-size: 13px; color: var(--turuncu); font-weight: 600; }
.vitrin-hafiza:empty { display: none; }
.vitrin-hafiza .memory-card { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--kagit); border: 1px solid var(--murekkep-cizgi); }
.vitrin-hafiza .memory-card h3 { margin: 2px 0; font-size: 14px; }
.vitrin-hafiza .memory-card p { margin: 2px 0; font-size: 12px; }
.vitrin-hafiza .eyebrow { font-size: 10px; letter-spacing: 0.08em; color: var(--yesil); font-weight: 700; }
.vitrin-hafiza .memory-card-days { display: flex; gap: 6px; align-items: baseline; }
.vitrin-hafiza .memory-card-days strong { font-size: 20px; color: var(--yesil); }
.vitrin-hafiza .fine-print { color: var(--murekkep-hafif); }

.dugme { border: 1px solid var(--murekkep-cizgi); background: var(--kart-saydam); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  box-shadow: var(--golge); min-height: 36px; font-size: 14px; }
.dugme:hover { background: var(--kart); }
.dugme:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.dugme:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.dugme-ana { background: var(--yesil); color: var(--kart); border-color: var(--yesil); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.dugme-ana:hover { background: var(--murekkep); }
.dugme-yuvarlak { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.dugme[aria-pressed="true"], .dugme[aria-expanded="true"] { background: var(--yesil); color: var(--kart); border-color: var(--yesil); }
.dugme-sakinler { flex: none; }
.denetim { display: flex; gap: 6px; flex: none; margin-left: auto; }

/* canlı akış: son 3 gerçek olay (kişi · tür · yer · zaman) */
.akis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; max-width: 560px; }
.akis li { display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--kart-saydam); box-shadow: var(--golge);
  font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akis li svg { width: 18px; height: 18px; flex: none; }
.akis .kisi { font-weight: 700; }
.akis .ayrac { color: var(--murekkep-hafif); }
.akis .zaman { color: var(--murekkep-hafif); margin-left: auto; padding-left: 6px; }
.akis .adet { font-weight: 700; color: var(--murekkep-hafif); }

/* ---------------------------------------------------------------- ayarlar */
.ayarlar { position: fixed; z-index: 6; right: var(--kenar); bottom: calc(var(--kenar) + 56px); width: min(320px, calc(100vw - 2 * var(--kenar)));
  background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ayar-baslik { margin: 0; font-size: 15px; }
.ayar-grup { border: 0; margin: 0; padding: 0; }
.ayar-grup legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; padding: 0; }
.ayar-secenekler { display: flex; flex-wrap: wrap; gap: 6px; }
.ayar-secenekler .dugme { box-shadow: none; padding: 5px 10px; min-height: 32px; font-size: 13px; }
.ayar-satir { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 32px; cursor: pointer; }
.ayar-pasif { color: var(--murekkep-hafif); cursor: default; }
.ayar-not { margin: 0; font-size: 12px; color: var(--murekkep-hafif); }

/* ---------------------------------------------------------------- çekmece (sakin kartı, liste, günlük, istatistik) */
/* çekmece sağ üst gezinmenin ve alt denetim kümesinin ARASINDA: Diary · Statistics · TR/EN ve − + ⚙ açıkken de tıklanır */
.cekmece { position: fixed; z-index: 7; top: calc(var(--kenar) + 52px); right: var(--kenar); bottom: calc(var(--kenar) + 56px); width: 360px; max-width: calc(100vw - 2 * var(--kenar));
  background: var(--kart); border-radius: 18px; box-shadow: var(--golge); display: flex; flex-direction: column; overflow: hidden; }
.cekmece-tutamak { display: none; }
.cekmece-ust { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: 1px solid var(--murekkep-cizgi); }
.cekmece-baslik { margin: 0; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cekmece-govde { overflow-y: auto; padding: 12px 16px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.kart-alt { margin: 0 0 10px; color: var(--murekkep-hafif); font-size: 13px; }
.kart-bolum { margin: 12px 0 0; }
.kart-bolum > h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yesil); }
.kart-simdi { font-size: 15px; font-weight: 600; margin: 0; }
.kart-karar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--kagit); font-size: 14px; margin: 0; }
.kart-karar::before { content: "···"; color: var(--turuncu); font-weight: 800; letter-spacing: 0.06em; }
.kart-not { margin: 6px 0 0; font-size: 12px; color: var(--murekkep-hafif); }
.ihtiyac { margin: 0 0 8px; }
.ihtiyac-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ihtiyac-ust span:last-child { color: var(--murekkep-hafif); }
.ihtiyac-iz { display: block; height: 6px; border-radius: 3px; background: var(--murekkep-cizgi); margin-top: 3px; overflow: hidden; }
.ihtiyac-dolgu { display: block; height: 100%; background: var(--yesil); border-radius: 3px; }
.kart-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--murekkep-cizgi); }
.liste button { display: flex; width: 100%; gap: 8px; align-items: baseline; justify-content: space-between; background: none; border: 0;
  padding: 9px 2px; text-align: left; cursor: pointer; min-height: var(--dokunma); }
.liste button:hover { background: var(--kagit); }
.liste .ad { font-weight: 600; }
.liste .ne { color: var(--murekkep-hafif); font-size: 13px; text-align: right; }
.liste-baslik { margin: 14px 0 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yesil); }
.kayit { padding: 8px 0; font-size: 14px; }
.kayit .zaman { color: var(--murekkep-hafif); font-size: 12px; }
.durum-yazi { color: var(--murekkep-hafif); font-size: 14px; }
/* istatistik (stats_view.js işaretlemesi; yalnız arayüz paleti) */
.cekmece-govde .stats-title { font-size: 20px; margin: 0 0 6px; }
.cekmece-govde .stats-section { margin: 14px 0; }
.cekmece-govde .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cekmece-govde .stat-tile { background: var(--kagit); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; }
.cekmece-govde .stat-label { font-size: 12px; color: var(--murekkep-hafif); }
.cekmece-govde .fine-print, .cekmece-govde .muted { font-size: 12px; color: var(--murekkep-hafif); }
.cekmece-govde .stats-bar-track, .cekmece-govde .stats-meter-track { display: block; height: 6px; background: var(--murekkep-cizgi); border-radius: 3px; }
.cekmece-govde .stats-bar, .cekmece-govde .stats-meter-fill { display: block; height: 6px; background: var(--yesil); border-radius: 3px; }
.cekmece-govde svg { max-width: 100%; }
.cekmece-govde .stats-line-path { fill: none; stroke: var(--yesil); stroke-width: 2; }
.cekmece-govde .stats-column { fill: var(--yesil); }
.cekmece-govde .stats-axis { stroke: var(--murekkep-cizgi); }
.cekmece-govde text { fill: var(--murekkep-hafif); font-size: 10px; }

/* ---------------------------------------------------------------- açılış (kâğıt zemin, gerçek bayt ilerlemesi) */
.acilis { position: fixed; inset: 0; z-index: 10; background: var(--kagit); display: grid; place-items: center; padding: var(--kenar); transition: opacity 0.4s ease; }
.acilis[data-kapaniyor="true"] { opacity: 0; pointer-events: none; }
.acilis-kart { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.acilis-marka { font-weight: 800; font-size: 28px; display: inline-flex; align-items: center; gap: 10px; }
.acilis-marka .marka-nokta { width: 16px; height: 16px; }
.acilis-yazi { margin: 0; font-size: 17px; }
.acilis-ilerleme { width: 100%; height: 6px; border-radius: 3px; background: var(--murekkep-cizgi); overflow: hidden; }
.acilis-cubuk { display: block; height: 100%; width: 0; background: var(--yesil); transition: width 0.2s linear; }
.acilis-ayrinti { margin: 0; font-size: 13px; color: var(--murekkep-hafif); min-height: 1.35em; }
.acilis-hata { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.acilis-hata-yazi { margin: 0; font-size: 14px; }
/* Bekçi (betiksiz): modül hiç çalışmazsa 12 sn sonra görünür; arayuz.js data-modul'u değiştirince hiç görünmez. */
.bekci { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; visibility: hidden; animation: bekci-goster 0s linear 12s forwards; }
.bekci-yazi { margin: 0; font-size: 14px; }
html:not([data-modul="bekleniyor"]):not([data-modul="hata"]) .bekci { display: none; }
html[data-modul="hata"] .bekci { visibility: visible; animation: none; }
@keyframes bekci-goster { to { visibility: visible; } }

/* ---------------------------------------------------------------- ölçüm katmanı (#olcum; sunucuya gitmez) */
.olcum-katmani { position: fixed; z-index: 9; left: var(--kenar); bottom: calc(var(--kenar) + 120px); background: rgba(40, 59, 50, 0.86); color: var(--kart);
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px 10px; border-radius: 10px; white-space: pre; pointer-events: none; }
.ipucu { position: fixed; z-index: 6; left: 50%; bottom: calc(var(--kenar) + 150px); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px;
  background: var(--murekkep); color: var(--kart); font-size: 14px; box-shadow: var(--golge); max-width: calc(100vw - 2 * var(--kenar)); text-align: center; }

/* ---------------------------------------------------------------- KT-2: üretim sayfası ekleri */
.atla { position: fixed; left: var(--kenar); top: -60px; z-index: 11; background: var(--kart); padding: 8px 12px; border-radius: 10px; box-shadow: var(--golge); }
.atla:focus { top: var(--kenar); }
.telefon { display: none !important; }
.tel-alt { display: none !important; }
.tuval2b { cursor: grab; background: var(--kagit); }
.tuval-uyuyor { visibility: hidden; pointer-events: none; }   /* 2B'deyken 3B tuvali: yerleşim kalır (HUD ölçüleri), görünmez */
.dugme-hesap { font-weight: 600; }
.metin-dugme { background: none; border: 0; padding: 6px 0; color: var(--yesil); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.metin-dugme:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.vitrin .metin-dugme { align-self: flex-start; font-size: 13px; margin-top: 4px; }
.dugme-gorunum { box-shadow: var(--golge); font-weight: 700; min-width: 44px; }
.menu { position: fixed; z-index: 8; right: var(--kenar); top: calc(var(--kenar) + 52px); background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge);
  display: flex; flex-direction: column; padding: 6px; min-width: 200px; }
.menu-oge { background: none; border: 0; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; min-height: var(--dokunma); font-size: 15px; }
.menu-oge:hover, .menu-oge:focus-visible { background: var(--kagit); outline: none; }
.bildirim { position: fixed; z-index: 9; left: 50%; top: calc(var(--kenar) + 60px); transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 999px;
  background: var(--murekkep); color: var(--kart); font-size: 14px; box-shadow: var(--golge); max-width: calc(100vw - 2 * var(--kenar)); text-align: center; }
/* formlar ve hesap */
.form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; }
.form-alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form-etiket { font-weight: 600; }
.form input, .form textarea, .form select { font: inherit; color: var(--murekkep); background: var(--kart); border: 1px solid var(--murekkep-cizgi); border-radius: 10px; padding: 8px 10px; min-height: var(--dokunma); width: 100%; }
.form textarea { resize: vertical; min-height: 72px; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 1px; }
.form .ayar-satir { align-items: flex-start; }
.form-geri { margin: 6px 0 0; font-size: 13px; min-height: 1.35em; }
.form-geri[data-tur="hata"] { color: var(--turuncu); font-weight: 600; }
.form-geri[data-tur="tamam"] { color: var(--yesil); font-weight: 600; }
.hesap-merhaba { font-size: 18px; font-weight: 700; margin: 4px 0; }
.salt-okunur { padding: 8px 10px; border-radius: 10px; background: var(--kagit); }
.liste-dugme { display: flex; width: 100%; background: none; border: 0; padding: 9px 2px; text-align: left; cursor: pointer; min-height: var(--dokunma); font-weight: 600; }
/* özel sohbet (hesap.js) */
.kart-hesap { margin-top: 6px; }
.chat-messages { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; max-height: 300px; overflow-y: auto; }
.chat-messages:empty { display: none; }
.chat-message { align-self: flex-start; max-width: 88%; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: var(--kagit); font-size: 14px; overflow-wrap: anywhere; }
.chat-message.user { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--yesil); color: var(--kart); }
.chat-message small { display: block; margin-top: 4px; font-size: 11px; opacity: 0.8; }
.chat-message.failed { background: var(--kart); color: var(--murekkep); border: 1px dashed var(--turuncu); }
.chat-failure { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; }
.chat-failure strong { color: var(--turuncu); }
.chat-resend { align-self: flex-start; background: none; border: 1px solid var(--turuncu); color: var(--murekkep); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 36px; }
.ownership-box { padding: 10px 12px; border-radius: 12px; background: var(--kagit); }
.ownership-box p { margin: 0 0 8px; font-size: 14px; }
.wiki-text { white-space: pre-wrap; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--kagit); padding: 8px 10px; border-radius: 10px; max-height: 280px; overflow: auto; }
.transfer-code { display: block; font: 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px 10px; background: var(--kagit); border-radius: 10px; margin: 6px 0; overflow-wrap: anywhere; }
.not-in-village strong { display: block; font-size: 14px; color: var(--murekkep); }
.hakkinda p { font-size: 14px; margin: 0 0 10px; }

/* ---------------------------------------------------------------- marka satırı (G1 marka): Tetracta simgesi + "Powered by Tetracta ·
   Z-Next architecture" (şablon g1.marka.satir; arayuz.js markaSatirlari). Simge index.html'de satır içi SVG (ağ isteği yok; markanın
   gradyanı açık zemin için koyu uca kaydırılmış, parlamasız). Metin mürekkebin %78'i: en kötü zeminde ≥ 5,3:1 (AA); bağlantılar tam
   mürekkep + ince alt çizgi (renk dışı ipucu), odak halkası öteki düğmelerle aynı. Hareket yok. */
.guc-satiri { margin: 0; font-size: 12px; line-height: 16px; color: rgba(40, 59, 50, 0.78); white-space: nowrap; }
.guc-simge { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.guc-bag { color: var(--murekkep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(40, 59, 50, 0.3);
  text-decoration-thickness: 1px; text-underline-offset: 2px; border-radius: 3px; }
.guc-bag:hover { text-decoration-color: currentColor; }
.guc-bag:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; text-decoration-color: currentColor; }
.guc-ayrac { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 6px; }
.guc-satiri[data-sablon="tamam"] .guc-ayrac { display: none; }
.acilis .guc-satiri { font-size: 13px; line-height: 18px; margin-top: -6px; white-space: normal; }
.acilis .guc-simge { width: 17px; height: 17px; vertical-align: -4px; }
.hud .guc-satiri { margin-top: -3px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--kart-saydam); box-shadow: 0 1px 2px rgba(40, 59, 50, 0.14); }
/* dar ekran ve telefon: HUD'da kısa biçim (simge + Tetracta · Z-Next); açılış kartı tam satırı korur */
@media (max-width: 760px) {
  .hud .guc-on, .hud .guc-ara, .hud .guc-son { display: none; }
  .hud .guc-satiri[data-sablon="tamam"] .guc-ayrac { display: inline-block; }
}
/* telefon ve dokunmatik: HUD'daki her bağlantı ≥ 44 × 44 px dokunma hedefi (KT-1 K-4; E3). Hedef hapın üstüne/altına 11 px taşar
   (negatif dikey kenar boşluğu satır yüksekliğini değiştirmez); hap komşularından 12 px uzak durur: taşan hedef hiçbir HUD öğesine
   binmez; dünyaya bağlı etiketler de bu kutulardan kaçar (arayuz.js hudKutulari). */
@media (max-width: 600px), (pointer: coarse) {
  .hud .guc-satiri { margin: 6px 0; }
  .hud .guc-bag { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -14px 0; }
}

/* ---------------------------------------------------------------- telefon (§10.2: üstte kompakt çubuk, kart alt sayfa %55) */
@media (max-width: 600px) {
  :root { --kenar: 10px; }
  html, body { font-size: 14px; }
  .hud-sol-ust { gap: 6px; max-width: calc(100vw - 2 * var(--kenar) - 112px); }
  .marka-cip { padding: 5px 10px 5px 8px; gap: 8px; }
  .marka { font-size: 14px; }
  .saat-cip { font-size: 12px; gap: 4px; }
  .saat-cip .parca { gap: 4px; }
  /* telefon: kompakt çip — rüzgâr sözcüğü gizli; simgesi olan hava sözcüğü yerine yalnız simge (tam metin title/aria-label'da) */
  .saat-cip [data-parca="ruzgar"] { display: none; }
  .saat-cip .ikonlu .parca-yazi { display: none; }
  .vitrin-dugme { min-height: var(--dokunma); }
  .hud-sag-ust { gap: 4px; max-width: 108px; }
  .hud-sag-ust .dugme { min-height: var(--dokunma); min-width: var(--dokunma); padding: 6px 10px; font-size: 13px; }
  .hud-alt { flex-wrap: wrap; gap: 6px; }
  .akis { order: -1; flex: 1 1 100%; max-width: none; }
  .akis li:nth-child(n+2) { display: none; }
  .dugme-yuvarlak { width: var(--dokunma); height: var(--dokunma); }
  .dugme-sakinler { min-height: var(--dokunma); }
  .cekmece { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 55vh; border-radius: 18px 18px 0 0; }
  .cekmece-tutamak { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--murekkep-cizgi); margin: 8px auto 0; }
  .ayarlar { left: var(--kenar); right: var(--kenar); width: auto; bottom: calc(var(--kenar) + 108px); }
  /* KT-2 telefon düzeni: üstte kompakt çubuk (marka + saat çipi + ☰), altta gezinme çubuğu, kart alt sayfa (%55, sürüklenir) */
  :root { --tel-alt: 60px; }
  .masaustu { display: none !important; }
  .telefon { display: inline-flex !important; }
  .tel-alt { display: flex !important; position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; height: calc(var(--tel-alt) + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--kart); box-shadow: 0 -1px 0 var(--murekkep-cizgi), var(--golge); justify-content: space-around; align-items: stretch; }
  .tel-oge { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; font-size: 11px;
    min-height: var(--dokunma); min-width: var(--dokunma); color: var(--murekkep-hafif); cursor: pointer; padding: 4px 2px; }
  .tel-oge[aria-current="page"] { color: var(--yesil); font-weight: 700; }
  .tel-simge svg { width: 22px; height: 22px; display: block; }
  .hud-alt { bottom: calc(var(--tel-alt) + 8px + env(safe-area-inset-bottom, 0px)); }
  .hud-alt .dugme-sakinler, .hud-alt #dugme-ayar { display: none; }
  .ayarlar { bottom: calc(var(--tel-alt) + 64px); }
  .cekmece { bottom: calc(var(--tel-alt) + env(safe-area-inset-bottom, 0px)); height: var(--sayfa-yukseklik, 55vh); max-height: calc(100vh - var(--tel-alt) - 56px); z-index: 9; }
  .cekmece-tutamak { touch-action: none; cursor: ns-resize; padding: 10px 0; margin: 0 auto; width: 64px; height: 24px; background: none; position: relative; }
  .cekmece-tutamak::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 5px; border-radius: 3px; background: var(--murekkep-cizgi); }
  .menu { top: calc(var(--kenar) + 50px); }
  .bildirim { top: auto; bottom: calc(var(--tel-alt) + 70px); }
  .ipucu { bottom: calc(var(--tel-alt) + 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .acilis, .acilis-cubuk { transition: none; }
}
html[data-az="true"] .acilis, html[data-az="true"] .acilis-cubuk { transition: none; }

/* ---------------------------------------------------------------- A0 etkileşim paketi (istemci/etkilesim.js; yalnız arayüz)
   Benim sakinim köşe kartı (sol üst sütunda) · Sen yokken kartı · Gözlem kartı düğmesi + çekmece · Günün anı (PNG önizleme).
   Renkler yalnız palet belirteçlerinden; dokunma hedefi ≥ 44 px (telefon); telefonda yan boşluk 16 px; az hareket = animasyon yok. */
.a0-simge { display: inline-flex; flex: none; }
.a0-simge svg { width: 18px; height: 18px; display: block; }
.benim-kart { width: 300px; max-width: 100%; border-radius: var(--yuvarlak); background: var(--kart-saydam); box-shadow: var(--golge); overflow: hidden; }
.benim-ozet { display: flex; width: 100%; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 12px; cursor: pointer; text-align: left;
  min-height: 40px; font-size: 14px; color: var(--murekkep); }
.benim-ozet:focus-visible { outline: 3px solid var(--turuncu); outline-offset: -3px; }
.benim-yildiz { color: var(--turuncu); font-size: 16px; flex: none; }
.benim-ad { font-weight: 700; flex: none; }
.benim-ne { color: rgba(40, 59, 50, 0.8); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benim-govde { padding: 0 14px 12px; max-height: calc(100vh - 220px); overflow-y: auto; }
.benim-govde .kart-alt { margin-bottom: 6px; }
.benim-simdi, .benim-cuzdan { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.benim-etiket { color: rgba(40, 59, 50, 0.8); white-space: nowrap; flex: none; }
.a0-adet { font-weight: 700; font-size: 12px; color: rgba(40, 59, 50, 0.8); }
.benim-simdi span:last-child { font-weight: 600; text-align: right; }
.benim-cuzdan strong { color: var(--yesil); }
.benim-ihtiyaclar { margin: 4px 0 6px; }
.benim-h3 { margin: 10px 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yesil); }
.benim-anlar, .sen-yokken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a0-an { padding: 6px 8px; border-radius: 10px; background: var(--kagit); font-size: 13px; }
.a0-an.tiklanir { cursor: pointer; }
.a0-an.tiklanir:hover { box-shadow: 0 0 0 1px var(--murekkep-cizgi); }
.a0-an:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 1px; }
.a0-an-ust { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.a0-kisi { font-weight: 700; }
/* A0 ikincil metin: tabanın --murekkep-hafif (0,62 ≈ 3,7:1) yerine 0,8 saydamlık (≈ 5,5:1, WCAG AA) */
.a0-yer, .a0-zaman { color: rgba(40, 59, 50, 0.8); }
.a0-zaman { margin-left: auto; font-size: 12px; }
.a0-neden { display: inline-block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--yesil); text-transform: uppercase; }
.a0-soz, .a0-metin { margin: 4px 0 0; overflow-wrap: anywhere; }
.a0-bos { color: rgba(40, 59, 50, 0.8); font-size: 13px; }
.benim-konusma { padding: 6px 10px; border-left: 3px solid var(--turuncu); background: var(--kagit); border-radius: 0 10px 10px 0; font-size: 13px; overflow-wrap: anywhere; }
.benim-konusma p { margin: 2px 0; }
.benim-dugmeler { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; align-items: center; }
.benim-dugmeler .dugme { box-shadow: none; }
.benim-not { margin-top: 8px; }
.dugme-gozlem { display: inline-flex; align-items: center; gap: 6px; }
.dugme-gozlem .gozlem-sayi { font-weight: 700; }
.dugme-gozlem[aria-expanded="true"] .a0-simge svg { color: inherit; }
.gozlem-ozet { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.gozlem-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gozlem-hucre { position: relative; min-height: 92px; padding: 8px 6px; border-radius: 12px; background: var(--kagit); border: 1px solid var(--murekkep-cizgi);
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.gozlem-hucre[data-isaretli="true"] { background: var(--yesil); color: var(--kart); border-color: var(--yesil); }
.gozlem-etiket { font-weight: 600; }
.gozlem-kanit { font-size: 11px; opacity: 0.9; }
.gozlem-tik { position: absolute; top: 4px; right: 7px; font-weight: 800; color: var(--turuncu); }
.sen-yokken { position: fixed; z-index: 8; left: 50%; top: calc(var(--kenar) + 60px); transform: translateX(-50%); width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - var(--kenar) - 150px); overflow-y: auto; background: var(--kart); border-radius: 18px; box-shadow: var(--golge); padding: 12px 16px 14px; }
.sen-yokken-ust { display: flex; align-items: center; gap: 8px; }
.sen-yokken-baslik { margin: 0; font-size: 17px; flex: 1; }
.an-tuval { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--golge); margin-bottom: 10px; background: var(--kagit); }
.an-indir { margin: 8px 0 12px; }
.an-indir:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.a0-an-dugme { margin-top: 4px; }
@keyframes a0-kutla { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--turuncu); } 40% { transform: scale(1.06); box-shadow: 0 0 0 6px var(--kart-saydam); } 100% { transform: scale(1); box-shadow: var(--golge); } }
.dugme-gozlem.kutlama, .gozlem-hucre.kutlama { animation: a0-kutla 0.9s ease-out 2; }
@media (max-width: 600px) {
  .benim-kart { width: auto; }
  .benim-ozet { min-height: var(--dokunma); }
  .benim-kart[data-acik="true"] { position: fixed; z-index: 8; left: 16px; right: 16px; width: auto; bottom: calc(var(--tel-alt) + 128px + env(safe-area-inset-bottom, 0px)); }
  .benim-kart[data-acik="true"] .benim-govde { max-height: 42vh; }
  .sen-yokken { left: 16px; right: 16px; width: auto; transform: none; top: calc(var(--kenar) + 52px); max-height: calc(100vh - var(--tel-alt) - 130px); }
  .dugme-gozlem .gozlem-ad { display: none; }
  .dugme-gozlem .gozlem-kisa { display: inline; }
  .hud-sag-ust .dugme-gozlem { padding: 6px 8px; gap: 4px; }
  .gozlem-hucre { min-height: 64px; padding: 6px 4px; gap: 2px; }
  .gozlem-ipucu, .gozlem-kanit { font-size: 10px; }
  .gozlem-giris { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
  .cekmece[data-tur="gozlem"] { height: max(var(--sayfa-yukseklik, 55vh), min(70vh, calc(100vh - var(--tel-alt) - 72px))); }
  .cekmece[data-tur="gozlem"] .cekmece-govde { padding-bottom: 24px; }
  .benim-dugmeler .dugme, .benim-dugmeler .metin-dugme, .a0-an-dugme { min-height: var(--dokunma); }
}
@media (prefers-reduced-motion: reduce) {
  .dugme-gozlem.kutlama, .gozlem-hucre.kutlama { animation: none; }
}
html[data-az="true"] .dugme-gozlem.kutlama, html[data-az="true"] .gozlem-hucre.kutlama { animation: none; }

/* ---------------------------------------------------------------- AÇILIŞ (29.10): gözlem kartı etkileşimi, YZ işareti, Sen yokken çipi, 18+ yaş kapısı */
.dugme-gozlem .gozlem-kisa { display: none; }
.gozlem-simge svg { color: var(--yesil); }
.gozlem-li { display: contents; }
.gozlem-hucre { font: inherit; color: inherit; cursor: pointer; width: 100%; }
.gozlem-hucre:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.gozlem-hucre:disabled { cursor: default; }
.gozlem-hucre[data-isaretli="false"][data-eylem="yer"]:hover, .gozlem-hucre[data-isaretli="true"]:not(:disabled):hover { box-shadow: 0 0 0 2px var(--turuncu); }
.gozlem-ipucu { font-size: 11px; color: rgba(40, 59, 50, 0.8); }
.gozlem-hucre[data-isaretli="true"] .gozlem-ipucu { display: none; }
.yz-rozet { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--yesil); color: var(--kart);
  font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: 0.04em; vertical-align: 1px; white-space: nowrap; }
.balon .yz-rozet { margin-left: 5px; }
.yokken-cip { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; border-radius: 999px; min-height: 36px; }
.yokken-cip-ad { font-weight: 700; }
.yokken-cip-sayi { color: var(--yesil); font-weight: 700; }
.yokken-sayi-liste { margin: 2px 0 0; padding-left: 18px; }
.yokken-sayi { margin: 2px 0; }
.benim-yokken { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.hakkinda-yz { font-weight: 600; }
.yas-kapisi { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--kagit); overflow-y: auto; }
.yas-kart { width: min(480px, 100%); background: var(--kart); border-radius: 20px; box-shadow: var(--golge); padding: 24px 22px 18px; }
.yas-marka { display: inline-flex; margin-bottom: 14px; }
.yas-baslik { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.yas-baslik:focus { outline: none; }
.yas-soru { margin: 0 0 16px; font-size: 16px; }
.yas-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yas-dugme { min-height: var(--dokunma); justify-content: center; text-align: center; white-space: normal; }
.yas-not { margin: 14px 0 6px; font-size: 13px; color: rgba(40, 59, 50, 0.8); }
.yas-alt { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.yas-bag { color: var(--yesil); }
.yas-dil { min-height: 32px; }
@media (max-width: 600px) {
  .yas-dugmeler { grid-template-columns: 1fr; }
  .yas-kart { padding: 20px 16px 16px; }
  .yokken-cip { margin-top: 6px; }
  .dugme-gozlem .gozlem-kisa { display: inline; }
}

/* ---------------------------------------------------------------- yer1 (29.10, Kurucu: "çakışma olmasın; webde, cepte, tablette"):
   TEK YERLEŞİM DÜZENİ. Dört bant: üst-sol sütun (marka, güç satırı, vitrin, Sen yokken çipi, Benim kartı) · üst-sağ gezinme ·
   alt şerit (Residents, akış, − + 2B ⚙) · sağ panel alanı (çekmece, Konuşmalar, Sen yokken, ayarlar). Bant ölçülerini arayuz.js
   yerlesim() :root --yer-* değişkenlerine yazar; paneller yalnız bu güvenli alanlara oturur. İki panel kesişirse son açılan kalır
   (öncelik kuralı, arayuz.js). Telefonda her panel alt sayfadır; açıkken alt şerit gizlenir. Dokunmatikte her hedef ≥ 44 px. */
:root { --yer-bosluk: 8px; --yer-sol-sag: 0px; --yer-sag-alt: 68px; --yer-ust-alt: 68px; --yer-alt-h: 72px; --yer-alt-sag: 64px; --yer-panel-w: 440px; }
.benim-govde { max-height: var(--yer-benim-govde, calc(100vh - 220px)); }

html[data-yer-ipucu="gizli"] .ipucu { display: none !important; }   /* öncelik: ipucu açık panelin altında kalmaz */
/* masaüstü ve tablet: sağ gezinme sol sütuna binmez (sarar); paneller gezinmenin altında, alt şeridin üstünde, sol sütunun sağında */
@media (min-width: 601px) {
  .hud-sag-ust { max-width: calc(100vw - var(--kenar) - var(--yer-sol-sag) - 12px); align-content: flex-start; }
  .cekmece, html .konus { top: calc(var(--yer-sag-alt) + var(--yer-bosluk)); bottom: calc(var(--yer-alt-sag) + var(--yer-bosluk)); }
  .cekmece { width: min(360px, var(--yer-panel-w)); }
  html .konus { width: min(420px, var(--yer-panel-w)); }
  .sen-yokken { left: auto; right: var(--kenar); transform: none; top: calc(var(--yer-sag-alt) + var(--yer-bosluk)); width: min(440px, var(--yer-panel-w));
    max-height: calc(100vh - var(--yer-sag-alt) - var(--yer-alt-sag) - 2 * var(--yer-bosluk)); }
  .ayarlar { bottom: calc(var(--yer-alt-sag) + var(--yer-bosluk)); width: min(320px, var(--yer-panel-w));
    max-height: calc(100vh - var(--yer-sag-alt) - var(--yer-alt-sag) - 2 * var(--yer-bosluk)); overflow-y: auto; }
  .ipucu { bottom: calc(var(--yer-alt-h) + 2 * var(--yer-bosluk)); }
  .bildirim { top: calc(var(--yer-sag-alt) + var(--yer-bosluk)); }
  html .gez-panel { bottom: calc(var(--kenar) + 12px); max-height: calc(100vh - var(--yer-sag-alt) - var(--kenar) - 12px - 2 * var(--yer-bosluk)); }
}
/* masaüstü (fare): alt şerit sayfa altı yasal bağlantılarının üstünde; küçük bağlantılar ≥ 24 px hedef (WCAG 2.5.8) */
@media (min-width: 601px) and (pointer: fine), (min-width: 601px) and (pointer: none) {
  .hud-alt { bottom: calc(var(--kenar) + 14px); }
  .yasal-alt { padding: 0 10px; bottom: 2px; }
  .yasal-alt .yasal-bag { display: inline-flex; align-items: center; min-height: 24px; }
  .hud .guc-bag { display: inline-flex; align-items: center; min-height: 24px; margin: -4px 0; vertical-align: middle; }
}
/* tablet (dokunmatik, 601 px ve üstü): ara kırılma — sol sütun daraltılır, marka çipi sarar */
@media (min-width: 601px) and (pointer: coarse) {
  .hud-sol-ust { max-width: min(340px, 44vw); }
  .vitrin { max-width: 100%; }
  .benim-kart { max-width: 100%; }
  .marka-cip { flex-wrap: wrap; white-space: normal; row-gap: 2px; border-radius: 18px; }
  .saat-cip { flex-wrap: wrap; white-space: normal; }
}
/* dokunmatik ve telefon: her etkileşimli HUD hedefi ≥ 44 × 44 px */
@media (pointer: coarse), (max-width: 600px) {
  .dugme { min-height: var(--dokunma); min-width: var(--dokunma); }
  .dugme-yuvarlak { width: var(--dokunma); height: var(--dokunma); }
  .metin-dugme, .vitrin-dugme, .benim-ozet, .ayar-satir, .yokken-cip, .chat-resend, .liste button, .liste-dugme { min-height: var(--dokunma); }
  .ayar-secenekler .dugme { min-height: var(--dokunma); }
  html .konus-alanlar select, html .konus-ara, html .konus-harita, html .konus-kart-tumu, html .konus-yeni { min-height: var(--dokunma); }
  html .konus-kart-kapat { width: var(--dokunma); height: var(--dokunma); }
}
/* telefon: paneller alt sayfa (alt gezinme çubuğunun üstünde, üst bandın altında biter); açıkken alt şerit ve ipucu gizli */
@media (max-width: 600px) {
  .cekmece { max-height: calc(100vh - var(--tel-alt) - var(--yer-ust-alt) - var(--yer-bosluk)); }
  html .konus { height: min(calc(78vh - var(--tel-alt)), calc(100vh - var(--tel-alt) - var(--yer-ust-alt) - var(--yer-bosluk))); }
  .sen-yokken, .ayarlar { position: fixed; z-index: 9; top: auto; left: 0; right: 0; width: auto; transform: none; bottom: calc(var(--tel-alt) + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; max-height: calc(100vh - var(--tel-alt) - var(--yer-ust-alt) - var(--yer-bosluk)); overflow-y: auto; }
  .benim-kart[data-acik="true"] { position: fixed; z-index: 8; left: 0; right: 0; top: auto; width: auto; bottom: calc(var(--tel-alt) + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; background: var(--kart); display: flex; flex-direction: column;
    max-height: min(52vh, calc(100vh - var(--tel-alt) - var(--yer-ust-alt) - var(--yer-bosluk))); }
  .benim-kart[data-acik="true"] .benim-govde { max-height: none; flex: 1 1 auto; min-height: 0; }
  html .konus-kart { max-height: min(60vh, calc(100vh - var(--tel-alt) - var(--yer-ust-alt) - 2 * var(--yer-bosluk))); }
  .menu { top: calc(var(--yer-ust-alt) + var(--yer-bosluk)); max-height: calc(100vh - var(--yer-ust-alt) - var(--yer-alt-h) - 2 * var(--yer-bosluk)); overflow-y: auto; }
  .ipucu { bottom: calc(var(--yer-alt-h) + var(--yer-bosluk)); }
  .bildirim { bottom: calc(var(--yer-alt-h) + var(--yer-bosluk)); }
  html .gez-panel, html .gez-panel.gez-panel-sol { top: calc(var(--yer-ust-alt) + var(--yer-bosluk)); }
  html[data-yer-sayfa] .hud-alt, html[data-yer-sayfa] .ipucu { display: none !important; }
  html[data-yer-sayfa="panel"] .benim-kart[data-acik="true"] { display: none; }
  /* acilis7 (K1 B3): TR "Konuşmalar" / "İstatistik" alt çubukta kısaltılmasın: öğe genişliği içeriğe göre (eşit pay yerine), kalan yer
     eşit dağılır; altı öğenin toplamı 360 px'e sığar. Benim kartı özet satırı telefonda kısaltılmaz, alt satıra sarar. */
  html .tel-alt .tel-oge { flex: 1 1 auto; padding-left: 1px; padding-right: 1px; }
  html .tel-oge.konus-tel .konus-tel-yazi { max-width: none; overflow: visible; text-overflow: clip; }
  html .benim-ne { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- acilis8 (YER-2, 30.10; Kurucu: "çakışma olmasın; hem webde, hem
   cepte, hem tablette" ve "hep ileri"): GEZİNTİ GÜVENLİ BÖLGESİ. Gezinti kipinde Çık (gezinti paneli), yön çubuğu (dokunmatik) ve
   avatar HER panel birleşiminde (sakin kartı, Konuşmalar, Sen yokken, gözlem, İstatistik, Günlük, Ayarlar, söz kartı, Benim) erişilebilir
   ve hiçbir şeyle çakışmaz. Gezinti denetimleri yerinde kalır, öteki paneller onlara göre yerleşir (karşılıklı kapatma yok):
   (1) başka panel açıkken gezinti paneli KÜÇÜK KİP: yalnız başlık + Çık (html[data-gez-kip="kucuk"], arayuz.js yerlesim);
   (2) masaüstü/tablette alttaki gezinti paneli alt engeldir: sağ paneller ve Benim gövdesi onun üstünde biter (--yer-alt-sag);
   (3) telefonda alt sayfalar yön çubuğunun üstünde ve gezinti panelinin altında kalır (--yer-gez-alt / --yer-gez-ust / --yer-gez-h);
   (4) avatar görünür HUD'dan kaçar (gezinti.js: görüntü kaydırması; sığmazsa kamera biraz uzaklaşır). Panel kapanınca hepsi geri döner. */
:root { --yer-gez-alt: 220px; --yer-gez-ust: 68px; --yer-gez-h: 50vh; }
html.gezinti-acik .ipucu { display: none !important; }   /* "birine dokun" ipucu harita kipinindir; gezintide dokunuş binayı seçer */
/* ses1 (acilis8 K1 B-1; GEZ-1 sözleşmesi, rapor 124 madde 4: "Dürüstlük satırı her an panelde, birebir Kurucu metni"; acilis9 calisma9
   çözümünün acilis8 işaretlemesine eşi, yalnız CSS): küçük kipte de dürüstlük satırı TAM metniyle görünür (kısaltma yok, yalnız yazı
   12 px) ve bina içindeyken "Konumlar temsilidir…" notu da görünür (bina adıyla). Küçük kipte yalnız kullanım ipucu ve içerdekiler
   listesi / "kimse yok" satırı gizlenir. acilis8'de #gezinti-bina = p.gez-bina-ad + p.gez-temsili (not) + (ul.gez-liste | ikinci
   p.gez-temsili = "kimse yok"); .gez-bos sınıfı yok, eşi "ilk notu izleyen .gez-temsili". Panel kapanınca hepsi geri gelir. */
html[data-gez-kip="kucuk"] .gez-ipucu, html[data-gez-kip="kucuk"] .gez-liste, html[data-gez-kip="kucuk"] .gez-bina > .gez-temsili ~ .gez-temsili { display: none !important; }
html[data-gez-kip="kucuk"] .gez-durust { margin-top: 2px; font-size: 12px; line-height: 1.3; }
html[data-gez-kip="kucuk"] .gez-bina { margin-top: 4px; padding-top: 4px; }
html[data-gez-kip="kucuk"] .gez-bina-ad, html[data-gez-kip="kucuk"] .gez-bina > .gez-temsili { margin: 0; font-size: 12px; line-height: 1.3; }
html[data-gez-kip="kucuk"] .gez-panel { padding-top: 6px; padding-bottom: 6px; }
.ipucu[data-yer="cakisma"] { visibility: hidden; }   /* acilis8 (K1 B-2): yerleşimden sonra gerçek kutu hâlâ bir HUD öğesine biniyorsa */
@media (max-width: 600px) {
  html.gezinti-acik .cekmece, html.gezinti-acik .sen-yokken, html.gezinti-acik .ayarlar, html.gezinti-acik .konus, html.gezinti-acik .konus-kart,
  html.gezinti-acik .benim-kart[data-acik="true"] { top: auto !important; bottom: var(--yer-gez-alt) !important; max-height: var(--yer-gez-h) !important; }
  html.gezinti-acik .konus { height: var(--yer-gez-h) !important; }
  html.gezinti-acik .menu { top: calc(var(--yer-gez-ust) + var(--yer-bosluk)); max-height: calc(100vh - var(--yer-gez-ust) - var(--yer-gez-alt) - 2 * var(--yer-bosluk)); }
}

/* SES-3 köy sesi (kanarya ?ses=1): düğme göstergesi ve küçük panel (alt denetimlerin üstünde; telefonda 16 px kenar) */
.dugme-ses svg { width: 20px; height: 20px; }
.dugme-ses[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--vurgu, #2f6f4f) inset; }
.dugme-ses[data-durum="caliyor"]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu, #2f6f4f); }
.dugme-ses { position: relative; }
.dugme-ses[aria-disabled="true"] { opacity: .55; }
.ses-panel { position: fixed; right: var(--kenar, 16px); bottom: calc(var(--kenar, 16px) + 56px); z-index: 8; width: min(300px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 12px; border-radius: 12px; background: var(--kagit, #fffdf7); color: var(--murekkep, #1f2a24); box-shadow: 0 4px 18px rgba(0,0,0,.18); font-size: 14px; display: grid; gap: 8px; }
.ses-panel[hidden] { display: none; }
.ses-panel-ust { display: flex; align-items: center; justify-content: space-between; }
.ses-gizle { min-width: 32px; min-height: 32px; }
.ses-kip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ses-kip .dugme { min-height: 36px; white-space: normal; font-size: 13px; }
.ses-kip .dugme[aria-checked="true"] { box-shadow: 0 0 0 2px var(--vurgu, #2f6f4f) inset; }
.ses-duzey { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 8px; }
.ses-duzey input { width: 100%; min-height: 28px; }
.ses-yz-not { margin: 0; font-size: 12px; opacity: .8; }
/* kart çekmecesi açıkken panel onun soluna geçer (masaüstü); telefonda alt sayfa açıkken panel gizlenir (kartta "Dinle" var) */
body:has(#cekmece:not([hidden])) .ses-panel { right: calc(var(--kenar, 16px) + 372px); }
@media (max-width: 599px) {
  .ses-panel { right: 16px; left: 16px; width: auto; bottom: calc(var(--tel-alt, 64px) + 72px + env(safe-area-inset-bottom, 0px)); }
  body:has(#cekmece:not([hidden])) .ses-panel { display: none; }
}

/* ses_gez (30.10, Kurucu: "köyde gezerken sesleri duyacak mıyım?"): gezintide harita denetimleri gizli, köy sesi düğmesi gezinti
   paneline ödünç gelir (gezinti.js). Ses paneli gezinti denetimlerine binmez: masaüstü/tablette sağ üst bandın altında (gezinti paneli
   altta); telefonda gezinti panelinin altında (yön çubuğu ve alt sayfalar altta). Avatar ve etiketler de ondan kaçar (arayuz.js). */
@media (min-width: 601px) {
  html.gezinti-acik .ses-panel { top: calc(var(--yer-sag-alt, 68px) + var(--yer-bosluk, 8px)); bottom: auto; }
}
@media (max-width: 600px) {
  html.gezinti-acik .ses-panel { top: calc(var(--yer-gez-ust, 68px) + var(--yer-bosluk, 8px)); bottom: auto; max-height: 40vh; overflow-y: auto; }
}