/* web.css — şerit, diyalog, menü, bildirim. Değerler masaüstü theme_manager.py paletinden. */
:root {
  --pencere-bg: #ffffff; --pencere-fg: #333333; --panel-bg: #f0f0f0;
  --girdi-bg: #fafafa; --girdi-bg-odak: #ffffff; --girdi-kenar: #dddddd; --girdi-kenar-odak: #e67e22;
  --sekme-bg: #E8E8E8; --sekme-secili-bg: #ffffff; --sekme-secili-fg: #333333; --sekme-fg: #666666;
  --kenar: #dddddd; --hover-bg: #e0e0e0; --basili-bg: #d0d0d0; --serit-hover: #FFF9C4;
  --menu-bg: #ffffff; --menu-hover: #e0e0e0; --soluk: #666666;
  --mavi: #2196f3; --mavi-h: #1976D2; --kirmizi: #e74c3c; --kirmizi-h: #c0392b; --turuncu: #e67e22;
}
:root[data-tema="dark"] {
  --pencere-bg: #1e1e1e; --pencere-fg: #e0e0e0; --panel-bg: #2d2d2d;
  --girdi-bg: #3c3c3c; --girdi-bg-odak: #454545; --girdi-kenar: #555555;
  --sekme-bg: #383838; --sekme-secili-bg: #1e1e1e; --sekme-secili-fg: #ffffff; --sekme-fg: #aaaaaa;
  --kenar: #555555; --hover-bg: #4a4a4a; --basili-bg: #555555; --serit-hover: #4a4020;
  --menu-bg: #2d2d2d; --menu-hover: #4a4a4a; --soluk: #999999;
  --mavi-h: #42a5f5;
}

html, body { margin: 0; height: 100%; background: var(--pencere-bg); color: var(--pencere-fg);
  font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
#uygulama { display: flex; flex-direction: column; height: 100vh; }
#harita-kap { position: relative; flex: 1 1 auto; min-height: 0; }

/* ---- Şerit ---- */
#serit { background: var(--sekme-secili-bg); flex: 0 0 auto; user-select: none; }
.serit-sekmeler { display: flex; padding-top: 2px; }
.serit-sekme { font: bold 12px Arial; color: var(--sekme-fg); background: var(--sekme-bg); border: none;
  border-top-left-radius: 6px; border-top-right-radius: 20px; padding: 4px 10px; margin: 0 1px;
  min-width: 100px; cursor: pointer; }
.serit-sekme.secili { background: var(--sekme-secili-bg); color: var(--sekme-secili-fg); font-size: 13px; padding: 5px 10px; }
.serit-panel { padding: 1px; border-bottom: 1px solid var(--kenar); }
.serit-sayfa { display: none; align-items: center; gap: 8px; padding: 1px; min-height: 42px; }
.serit-sayfa.aktif { display: flex; }
.serit-grup { display: flex; gap: 2px; }
.serit-dugme { position: relative; width: 40px; height: 40px; padding: 0; border: none; border-radius: 4px;
  background: transparent; cursor: pointer; }
.serit-dugme:hover { background: var(--serit-hover); }
.serit-dugme:active { background: var(--basili-bg); }
.serit-dugme img { width: 38px; height: 38px; display: block; margin: 1px; pointer-events: none; }
.serit-dugme img.serit-ok { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; margin: 0; }
.serit-dugme:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }

/* ---- Diyalog ---- */
.web-dlg-kaplama { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 10000;
  display: flex; align-items: center; justify-content: center; }
.web-dlg { background: var(--pencere-bg); color: var(--pencere-fg); border: 1px solid var(--kenar);
  border-radius: 8px; width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.web-dlg-kucuk { width: 340px; }
.web-dlg-baslik { padding: 10px 14px; font-weight: bold; background: var(--panel-bg); border-radius: 8px 8px 0 0; }
.web-dlg-govde { padding: 12px 14px; overflow-y: auto; }
.web-dlg-satir { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; }
.web-dlg-etiket { font-size: 13px; }
.web-dlg-metin { line-height: 1.4; }
.web-dlg-bilgi { color: #e67e22; margin-bottom: 8px; line-height: 1.35; }
.web-dlg-hata { color: var(--kirmizi); min-height: 1.2em; margin-top: 4px; }
.web-dlg-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--kenar); }
.web-giris { padding: 4px 8px; border: 2px solid var(--girdi-kenar); border-radius: 6px; background: var(--girdi-bg);
  color: var(--pencere-fg); font-size: 13px; min-width: 0; width: 100%; box-sizing: border-box; }
.web-giris:focus { outline: none; border-color: var(--girdi-kenar-odak); background: var(--girdi-bg-odak); }
.web-btn { padding: 5px 14px; border: 1px solid var(--kenar); border-radius: 6px; background: var(--panel-bg);
  color: var(--pencere-fg); font: bold 12px Arial; cursor: pointer; }
.web-btn:hover { background: var(--hover-bg); }
.web-btn-mavi { background: var(--mavi); color: #fff; border-color: var(--mavi); }
.web-btn-mavi:hover { background: var(--mavi-h); }
.web-btn-kirmizi { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.web-btn-kirmizi:hover { background: var(--kirmizi-h); }
.web-btn:focus-visible { outline: 2px solid var(--mavi); outline-offset: 1px; }

/* ---- Menü (sağ tık) ---- */
.web-menu { position: fixed; z-index: 10001; background: var(--menu-bg); color: var(--pencere-fg);
  border: 1px solid var(--kenar); padding: 4px; min-width: 200px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.web-menu-oge { padding: 6px 24px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.web-menu-oge:hover { background: var(--menu-hover); }
.web-menu-oge.pasif { color: var(--soluk); opacity: 0.55; cursor: default; }
.web-menu-oge.pasif:hover { background: transparent; }
.web-menu-ayrac { height: 1px; background: var(--kenar); margin: 4px 8px; }

/* ---- Bildirim / hata ---- */
#web-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 10002;
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.web-toast-oge { background: #333; color: #fff; padding: 8px 14px; border-radius: 6px; max-width: 80vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
#web-hata { display: none; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 10003;
  background: #fff; color: #c0392b; border: 2px solid #c0392b; border-radius: 8px; padding: 18px 22px;
  max-width: 70vw; font-weight: bold; }

/* ---- Diyalog: grup başlığı, işaret kutusu, açılır liste ---- */
.web-dlg-grup { margin: 10px 0 6px; padding-bottom: 3px; font-weight: bold; border-bottom: 1px solid var(--kenar); }
.web-dlg-onay { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }
.web-dlg-onay input { width: 16px; height: 16px; }
select.web-giris { padding: 3px 6px; }
.web-giris:disabled { opacity: 0.6; }

/* ---- İlerleme çubuğu ---- */
.web-ilerleme { height: 14px; margin-top: 10px; border: 1px solid var(--kenar); border-radius: 7px;
  background: var(--girdi-bg); overflow: hidden; }
.web-ilerleme-dolgu { height: 100%; width: 0; background: var(--mavi); transition: width 0.15s linear; }
.web-dlg-metin { white-space: pre-line; }

.web-menu-baslik { padding: 4px 24px; font-size: 11px; font-weight: bold; color: var(--soluk); }