/* Haftalık İzleme tasarım sistemi: kullanıcının örnek "GIS" tasarımı (koyu) ve aynı dilde açık tema. */
/* Örnek kod Tailwind + Google Fonts kullanıyordu; CSP gereği aynı görünüm yerel CSS ve yerel yazı tipleriyle kuruldu. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(yazi/inter-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Türkçe genişletilmiş karakterler. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(yazi/inter-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } /* Temel Latin. */
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(yazi/inter-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Orta kalınlık. */
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(yazi/inter-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Orta kalınlık. */
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(yazi/inter-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Yarı kalın. */
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(yazi/inter-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Yarı kalın. */
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(yazi/inter-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Kalın. */
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(yazi/inter-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Kalın. */
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url(yazi/inter-latin-ext-800.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Çok kalın. */
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url(yazi/inter-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Çok kalın. */
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url(yazi/outfit-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Başlık yazı tipi. */
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url(yazi/outfit-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Başlık yazı tipi. */
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url(yazi/outfit-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Başlık kalın. */
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url(yazi/outfit-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Başlık kalın. */
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url(yazi/outfit-latin-ext-800.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF; } /* Büyük rakamlar. */
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url(yazi/outfit-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } /* Büyük rakamlar. */

:root, :root[data-tema="koyu"] { /* Koyu GIS teması (örnek kodun renkleri); varsayılan. */
  --zemin: #050b14; /* Sayfa zemini. */
  --zemin-ust: #0d1d36; /* Radyal zemin merkezi. */
  --zemin-alt: #02050c; /* Radyal zemin kenarı. */
  --cam: linear-gradient(135deg, rgba(14, 28, 54, .52) 0%, rgba(7, 16, 34, .62) 100%); /* Yarı saydam cam: arkadaki ağ animasyonu görünür. */
  --cam-duz: rgba(10, 22, 42, .82); /* Düz cam yüzey (tablo başlığı). */
  --cizgi: rgba(56, 189, 248, .16); /* Kenarlık. */
  --cizgi-guclu: rgba(56, 189, 248, .35); /* Vurgulu kenarlık. */
  --metin: #e2e8f0; /* Ana metin (slate-200). */
  --metin-2: #94a3b8; /* İkincil metin (slate-400). */
  --metin-3: #64748b; /* Soluk metin (slate-500). */
  --baslik: #ffffff; /* Başlık metni. */
  --vurgu: #00f2fe; /* Neon camgöbeği. */
  --vurgu-2: #4facfe; /* Mavi. */
  --vurgu-metin: #04121f; /* Vurgu düğmesi üstündeki metin. */
  --vurgu-acik: rgba(0, 242, 254, .10); /* Vurgu arka planı. */
  --vurgu-yazi: #67e8f9; /* Vurgu renkli yazı (cyan-300). */
  --basari: #34d399; /* Zümrüt. */
  --basari-acik: rgba(16, 185, 129, .14); /* Zümrüt arka plan. */
  --uyari: #fbbf24; /* Amber. */
  --uyari-acik: rgba(245, 158, 11, .14); /* Amber arka plan. */
  --tehlike: #fb7185; /* Gül. */
  --tehlike-acik: rgba(244, 63, 94, .14); /* Gül arka plan. */
  --notr-acik: rgba(148, 163, 184, .14); /* Nötr arka plan. */
  --golge: 0 16px 36px -10px rgba(0, 0, 0, .6), inset 0 1px 1px 0 rgba(255, 255, 255, .08); /* Cam kart gölgesi. */
  --parlama: 0 0 16px rgba(0, 242, 254, .55); /* Neon metin parlaması. */
  --girdi: rgba(10, 19, 36, .72); /* Girdi kutusu zemini (eski iş sayfasındaki renk, yarı saydam). */
  --girdi-cizgi: #26365e; /* Girdi kenarlığı. */
  --zemin-resmi: url(zemin-koyu.svg); /* Ağ haritası arka planı. */
  color-scheme: dark; /* Tarayıcı denetimleri koyu. */
} /* Koyu tema sonu. */
:root[data-tema="acik"] { /* Açık tema: aynı yerleşim, buz mavisi zemin, beyaz cam, derin camgöbeği vurgu. */
  --zemin: #eef4fb; /* Buz mavisi zemin. */
  --zemin-ust: #ffffff; /* Radyal merkez. */
  --zemin-alt: #dbe7f5; /* Radyal kenar. */
  --cam: linear-gradient(135deg, rgba(255, 255, 255, .58) 0%, rgba(244, 249, 255, .68) 100%); /* Yarı saydam beyaz cam. */
  --cam-duz: rgba(248, 251, 255, .96); /* Düz yüzey. */
  --cizgi: rgba(14, 116, 144, .16); /* Kenarlık. */
  --cizgi-guclu: rgba(8, 145, 178, .38); /* Vurgulu kenarlık. */
  --metin: #1e293b; /* Ana metin. */
  --metin-2: #475569; /* İkincil metin. */
  --metin-3: #94a3b8; /* Soluk metin. */
  --baslik: #0b1b33; /* Başlık (lacivert). */
  --vurgu: #0891b2; /* Camgöbeği-600. */
  --vurgu-2: #2563eb; /* Mavi-600. */
  --vurgu-metin: #ffffff; /* Düğme metni. */
  --vurgu-acik: rgba(8, 145, 178, .10); /* Vurgu arka planı. */
  --vurgu-yazi: #0e7490; /* Vurgu yazısı. */
  --basari: #059669; /* Zümrüt-600. */
  --basari-acik: rgba(5, 150, 105, .12); /* Zümrüt arka plan. */
  --uyari: #d97706; /* Amber-600. */
  --uyari-acik: rgba(217, 119, 6, .12); /* Amber arka plan. */
  --tehlike: #e11d48; /* Gül-600. */
  --tehlike-acik: rgba(225, 29, 72, .10); /* Gül arka plan. */
  --notr-acik: rgba(100, 116, 139, .12); /* Nötr arka plan. */
  --golge: 0 14px 34px -14px rgba(15, 52, 96, .28), inset 0 1px 0 0 rgba(255, 255, 255, .9); /* Yumuşak gölge. */
  --parlama: 0 0 14px rgba(8, 145, 178, .25); /* Hafif parlama. */
  --girdi: rgba(255, 255, 255, .78); /* Girdi zemini (yarı saydam). */
  --girdi-cizgi: #c9d8ea; /* Girdi kenarlığı. */
  --zemin-resmi: url(zemin-acik.svg); /* Açık ağ haritası. */
  color-scheme: light; /* Tarayıcı denetimleri açık. */
} /* Açık tema sonu. */

* { box-sizing: border-box; } /* Ölçüler kenarlığı içerir. */
html, body { margin: 0; min-height: 100%; } /* Tam yükseklik. */
body { background: radial-gradient(ellipse at 55% 45%, var(--zemin-ust) 0%, var(--zemin) 55%, var(--zemin-alt) 100%) fixed; color: var(--metin); font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Örnekteki radyal zemin. */
body::before { content: ""; position: fixed; inset: 0; background: var(--zemin-resmi) center / cover no-repeat; opacity: .8; pointer-events: none; z-index: 0; } /* Ağ haritası katmanı (kartların arkasından görünür). */
body > * { position: relative; z-index: 1; } /* İçerik zeminin üstünde. */
a { color: var(--vurgu-yazi); text-decoration: none; } /* Bağlantılar. */
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-family: "Outfit", "Inter", sans-serif; color: var(--baslik); letter-spacing: .01em; } /* Başlıklar Outfit. */
h2 { font-size: 17px; font-weight: 700; } /* Bölüm başlığı. */
h3 { font-size: 15px; font-weight: 700; } /* Alt başlık. */
.gizli { display: none !important; } /* JS ile gizlenen öğe. */
.soluk { color: var(--metin-2); } /* İkincil metin. */
.kucuk { font-size: 12px; } /* Küçük metin. */
.sayi { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Sayı sütunu. */
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; } /* Örnekteki font-mono rakamlar. */
.neon { text-shadow: var(--parlama); } /* Neon parlama. */
.cizgi-alt { height: 2px; width: 64px; border-radius: 2px; margin-top: 6px; background: linear-gradient(90deg, var(--vurgu), transparent); } /* Başlık altı vurgu çizgisi. */

/* Sayfa düzeni */
.sayfa { max-width: 1480px; margin: 0 auto; padding: 22px 22px 56px; } /* İçerik alanı. */
.sayfa-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } /* Başlık satırı. */
.sayfa-baslik h1 { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } /* Örnekteki büyük harf başlık. */
.sayfa-baslik p { margin: 6px 0 0; color: var(--metin-2); } /* Açıklama. */
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Yatay grup. */
.bosluk { flex: 1; } /* Esnek boşluk. */
.izgara { display: grid; gap: 16px; } /* Izgara. */
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Dört sütun. */
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Üç sütun. */
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* İki sütun. */
.yayil-2 { grid-column: span 2; } /* İki sütun. */
.yayil-tam { grid-column: 1 / -1; } /* Tam satır. */
@media (max-width: 980px) { .izgara-4, .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet. */
@media (max-width: 620px) { .izgara-4, .izgara-3, .izgara-2 { grid-template-columns: 1fr; } .yayil-2 { grid-column: auto; } .sayfa { padding: 14px 12px 40px; } } /* Telefon. */

/* Cam kart (örnekteki glass-card) */
.kart { background: var(--cam); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: var(--golge); transition: border-color .25s, box-shadow .25s; } /* Kart. */
.kart:hover { border-color: var(--cizgi-guclu); } /* Üzerine gelince. */
.kart-baslik { padding: 14px 18px; border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Kart başlığı. */
.kart-govde { padding: 18px; } /* Kart içeriği. */
.kart + .kart { margin-top: 16px; } /* Ardışık kartlar. */
.izgara > .kart + .kart { margin-top: 0; } /* Izgarada boşluk ızgaradan gelir. */
.etiket { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu-yazi); padding: 2px 8px; border-radius: 999px; background: var(--vurgu-acik); border: 1px solid var(--cizgi-guclu); font-family: ui-monospace, Consolas, monospace; } /* "GÜNCEL VERİ" rozeti. */

/* Gösterge kartı (örnekteki metric card) */
.gosterge { padding: 16px; position: relative; overflow: hidden; } /* Kutu. */
.gosterge-ad { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-2); } /* Ad. */
.gosterge-ad::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g-renk, var(--vurgu)); box-shadow: 0 0 8px var(--g-renk, var(--vurgu)); } /* Renkli nokta. */
.gosterge-deger { font: 800 30px/1.15 "Outfit", "Inter", sans-serif; margin-top: 6px; color: var(--baslik); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px color-mix(in srgb, var(--g-renk, var(--vurgu)) 55%, transparent); } /* Değer. */
.gosterge-alt { color: var(--metin-2); font-size: 11px; margin-top: 4px; } /* Açıklama. */
.gosterge-cubuk { margin-top: 10px; height: 6px; border-radius: 3px; background: var(--notr-acik); overflow: hidden; } /* İlerleme zemini. */
.gosterge-cubuk > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--g-renk, var(--vurgu)), var(--vurgu-2)); } /* Dolu kısım; genişlik JS ile. */
.g-amber { --g-renk: var(--uyari); } .g-amber .gosterge-ad { color: var(--uyari); } /* Devam eden. */
.g-zumrut { --g-renk: var(--basari); } .g-zumrut .gosterge-ad { color: var(--basari); } /* Tamamlanan. */
.g-cyan .gosterge-ad { color: var(--vurgu-yazi); } /* Ödenek. */

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--cizgi-guclu); background: var(--vurgu-acik); color: var(--metin); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s, border-color .2s; } /* Varsayılan düğme. */
.dugme:hover { border-color: var(--vurgu); box-shadow: 0 0 14px color-mix(in srgb, var(--vurgu) 25%, transparent); } /* Üzerine gelince. */
.dugme:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* Pasif. */
.dugme-ana { background: linear-gradient(90deg, var(--vurgu), var(--vurgu-2)); border-color: transparent; color: var(--vurgu-metin); font-weight: 700; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--vurgu) 60%, transparent); } /* Birincil. */
.dugme-tehlike { background: var(--tehlike-acik); border-color: color-mix(in srgb, var(--tehlike) 40%, transparent); color: var(--tehlike); } /* Tehlikeli işlem. */
.dugme-kucuk { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; } /* Küçük. */
.dugme-hayalet { border-color: transparent; background: transparent; } /* Kenarlıksız. */
kbd { font: 700 10px/1 ui-monospace, Consolas, monospace; padding: 3px 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .75; } /* Kısayol rozeti (eski "Kaydet Ctrl+S"). */

/* Form */
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* Etiket + giriş. */
.alan > span { font-size: 12px; font-weight: 700; color: var(--metin-2); letter-spacing: .02em; } /* Etiket. */
.alan.zorunlu > span::after { content: " *"; color: var(--tehlike); } /* Zorunlu işareti. */
.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--tehlike); background: var(--tehlike-acik); } /* Hatalı alan. */
input, select, textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--girdi-cizgi); border-radius: 12px; background: var(--girdi); color: var(--metin); font: inherit; } /* Girdi (eski sayfadaki yuvarlak kutular). */
textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; } /* Çok satır. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); } /* Odak. */
input:disabled, select:disabled, textarea:disabled { opacity: .7; } /* Salt okunur. */
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--vurgu); } /* Onay kutusu. */
.onay { display: inline-flex; align-items: center; gap: 8px; } /* Onay satırı. */

/* Tablo */
.tablo-kap { overflow-x: auto; } /* Yatay kaydırma. */
table { width: 100%; border-collapse: collapse; font-size: 13px; } /* Tablo. */
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu-yazi); background: var(--vurgu-acik); padding: 10px 12px; border-bottom: 1px solid var(--cizgi-guclu); white-space: nowrap; } /* Başlık (örnekteki cyan başlık). */
td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; } /* Hücre. */
tbody tr { transition: background .15s; } /* Satır geçişi. */
tbody tr:hover { background: var(--vurgu-acik); } /* Satır vurgusu. */
tr.tiklanir { cursor: pointer; } /* Tıklanabilir. */
tr.secili { background: var(--vurgu-acik) !important; box-shadow: inset 3px 0 0 var(--vurgu); } /* Seçili satır. */
tr.pasif td { color: var(--metin-3); text-decoration: line-through; } /* Pasif satır. */
tfoot td { font-weight: 800; color: var(--baslik); background: linear-gradient(90deg, var(--vurgu-acik), transparent); border-top: 2px solid var(--cizgi-guclu); } /* TOPLAM satırı. */
td input, td select { height: 34px; border-radius: 9px; } /* Tablo içi giriş. */
.bos { padding: 40px; text-align: center; color: var(--metin-2); } /* Boş liste. */

/* Rozet ve ilerleme */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--notr-acik); color: var(--metin-2); } /* Durum rozeti. */
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } /* Nokta. */
.rozet.biten { background: var(--basari-acik); color: var(--basari); } /* Tamamlanan. */
.rozet.devam { background: var(--uyari-acik); color: var(--uyari); } /* Sahada. */
.rozet.ihale { background: var(--vurgu-acik); color: var(--vurgu-yazi); } /* İhale sonrası. */
.rozet.iptal { background: var(--tehlike-acik); color: var(--tehlike); } /* İptal. */
.ilerleme { display: flex; align-items: center; gap: 8px; min-width: 110px; } /* Fiziki oran. */
.ilerleme-cubuk { flex: 1; height: 6px; border-radius: 3px; background: var(--notr-acik); overflow: hidden; } /* Zemin. */
.ilerleme-dolu { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--vurgu), var(--vurgu-2)); } /* Dolu kısım. */

/* Sekmeler (eski sayfadaki sekme çubuğu) */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 16px; overflow-x: auto; } /* Çubuk. */
.sekmeler button { border: 1px solid transparent; border-bottom: none; background: none; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--metin-2); border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; } /* Sekme. */
.sekmeler button:hover { color: var(--metin); } /* Üzerine gelince. */
.sekmeler button.etkin { color: var(--baslik); background: var(--vurgu-acik); border-color: var(--cizgi-guclu); box-shadow: inset 0 -2px 0 var(--vurgu); } /* Etkin sekme. */

/* Yan panel ve pencere */
.ortu { position: fixed; inset: 0; background: rgba(2, 6, 16, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 2000; display: flex; justify-content: flex-end; } /* Örtü. */
.ortu.orta { justify-content: center; align-items: center; padding: 16px; } /* Ortalanmış pencere. */
.panel { width: min(940px, 100%); height: 100%; background: var(--zemin); display: flex; flex-direction: column; border-left: 1px solid var(--cizgi-guclu); box-shadow: -10px 0 40px rgba(0, 0, 0, .35); } /* Sağ panel. */
.panel-baslik { background: var(--cam); border-bottom: 1px solid var(--cizgi); padding: 16px 20px; display: flex; align-items: center; gap: 12px; } /* Başlık. */
.panel-govde { flex: 1; overflow-y: auto; padding: 20px; } /* İçerik. */
.panel-alt { border-top: 1px solid var(--cizgi); padding: 12px 20px; display: flex; gap: 10px; justify-content: flex-end; } /* Eylemler. */
.pencere { width: min(540px, 100%); max-height: 90vh; overflow-y: auto; background: var(--cam); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--cizgi-guclu); border-radius: 18px; box-shadow: var(--golge); } /* Pencere. */
.pencere .kart-govde { display: grid; gap: 14px; } /* İçerik. */

/* Bildirim ve kutular */
.bildirimler { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: grid; gap: 8px; max-width: 420px; } /* Yığın. */
.bildirim { padding: 12px 16px; border-radius: 12px; background: var(--cam); border: 1px solid var(--cizgi-guclu); color: var(--metin); box-shadow: var(--golge); font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Bildirim. */
.bildirim.hata { border-color: var(--tehlike); color: var(--tehlike); } /* Hata. */
.bildirim.basari { border-color: var(--basari); color: var(--basari); } /* Başarı. */
.uyari-kutu { padding: 12px 14px; border-radius: 12px; background: var(--uyari-acik); color: var(--uyari); font-weight: 600; border: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent); } /* Uyarı. */
.bilgi-kutu { padding: 12px 14px; border-radius: 12px; background: var(--vurgu-acik); color: var(--vurgu-yazi); font-weight: 600; border: 1px solid var(--cizgi-guclu); } /* Bilgi. */
.sir-kutu { font: 700 20px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 14px; text-align: center; background: var(--girdi); border: 1px dashed var(--cizgi-guclu); border-radius: 12px; user-select: all; color: var(--vurgu-yazi); } /* Geçici şifre. */
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--cizgi-guclu); background: var(--vurgu-acik); color: var(--metin-2); font-size: 13px; white-space: nowrap; } /* Eski sayfadaki "Ödenek: 0" kutucukları. */
.cip b { color: var(--baslik); font-variant-numeric: tabular-nums; } /* Değer. */

/* Giriş sayfası */
.giris-zemin { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; } /* İki bölme. */
.giris-sol { padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } /* Tanıtım. */
.giris-sol h1 { font-size: 36px; font-weight: 800; max-width: 480px; text-shadow: var(--parlama); } /* Başlık. */
.giris-sol p { color: var(--metin-2); max-width: 440px; font-size: 15px; } /* Metin. */
.giris-sag { display: grid; place-items: center; padding: 32px 20px; } /* Form bölmesi. */
.giris-kart { width: min(420px, 100%); display: grid; gap: 16px; padding: 28px; background: var(--cam); border: 1px solid var(--cizgi-guclu); border-radius: 20px; box-shadow: var(--golge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* Form kartı. */
.marka { display: flex; align-items: center; gap: 12px; font: 800 16px/1.2 "Outfit", sans-serif; color: var(--baslik); letter-spacing: .04em; } /* Marka satırı. */
.marka img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(239, 68, 68, .35)); } /* Kurum logosu. */
@media (max-width: 860px) { .giris-zemin { grid-template-columns: 1fr; } .giris-sol { padding: 28px 20px 0; } .giris-sol h1 { font-size: 26px; } } /* Telefon. */

/* Yazdırma */
@media print { body::before, .izl-ust, .yazdirma-yok, .bildirimler { display: none !important; } body { background: #fff; color: #000; } .kart { background: #fff; box-shadow: none; border-color: #999; } th { color: #000; background: #eee; } } /* Kâğıt. */

/* Kontrol paneli (örnek tasarımın yerleşimi: sol göstergeler, orta ağ haritası iğneleri, sağ izleme tablosu) */
.pano { display: grid; grid-template-columns: 340px minmax(0, 1fr) minmax(480px, 600px); gap: 0; min-height: calc(100vh - 64px); } /* Üç bölme. */
.pano-sol, .pano-sag { padding: 24px; display: flex; flex-direction: column; gap: 14px; } /* Yan bölmeler. */
.pano-sol h2, .pano-sag h2 { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } /* Bölüm başlıkları. */
.pano-suzgec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Yıl/müdürlük/ilçe seçimleri. */
.pano-suzgec select { height: 34px; font-size: 12px; border-radius: 10px; } /* Küçük seçim kutuları. */
.pano-suzgec .yayil-tam { grid-column: 1 / -1; } /* Tam satır. */
.pano-orta { position: relative; min-height: 520px; } /* İğne alanı. */
.igne { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; cursor: pointer; border: 0; background: none; padding: 0; font: inherit; transition: transform .2s; } /* İlçe iğnesi. */
.igne:hover { transform: translate(-50%, -50%) scale(1.08); } /* Büyüme (örnekteki hover). */
.igne-nokta { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 23, 42, .9); border: 2px solid #22d3ee; color: #67e8f9; box-shadow: 0 0 15px rgba(0, 242, 254, .8); } /* Daire. */
.igne-nokta::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: rgba(34, 211, 238, .3); animation: igne-nabiz 3s cubic-bezier(0, 0, .2, 1) infinite; z-index: -1; } /* ping-slow. */
@keyframes igne-nabiz { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.6); opacity: 0; } } /* Nabız. */
.igne-nokta svg { width: 14px; height: 14px; } /* Konum simgesi. */
.igne-ad { padding: 4px 10px; border-radius: 7px; background: rgba(9, 24, 47, .9); border: 1px solid rgba(6, 182, 212, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; color: #a5f3fc; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); } /* Etiket. */
.igne-ad small { color: #67e8f9; opacity: .75; font-weight: 600; margin-left: 4px; } /* İş sayısı. */
.igne.secili .igne-nokta { border-color: #fbbf24; color: #fcd34d; background: #020617; box-shadow: 0 0 20px rgba(245, 158, 11, .9); width: 36px; height: 36px; } /* Seçili ilçe (amber). */
.igne.secili .igne-nokta::before { background: rgba(251, 191, 36, .3); } /* Amber nabız. */
.igne.secili .igne-ad { background: rgba(29, 27, 12, .95); border-color: rgba(245, 158, 11, .7); color: #fcd34d; box-shadow: 0 0 15px rgba(245, 158, 11, .3); } /* Amber etiket. */
:root[data-tema="acik"] .igne-nokta { background: #fff; border-color: #0891b2; color: #0891b2; box-shadow: 0 0 12px rgba(8, 145, 178, .45); } /* Açık tema iğne. */
:root[data-tema="acik"] .igne-ad { background: rgba(255, 255, 255, .92); border-color: rgba(8, 145, 178, .35); color: #0e7490; box-shadow: 0 6px 16px -8px rgba(15, 52, 96, .35); } /* Açık tema etiket. */
:root[data-tema="acik"] .igne.secili .igne-nokta { background: #fff7ed; border-color: #f59e0b; color: #d97706; } :root[data-tema="acik"] .igne.secili .igne-ad { background: #fffbeb; border-color: #f59e0b; color: #b45309; } /* Açık tema seçili. */
.pano-tablo { max-height: calc(100vh - 300px); overflow: auto; border-radius: 12px; border: 1px solid var(--cizgi); } /* Kaydırılan tablo. */
.pano-tablo th { position: sticky; top: 0; z-index: 1; background: var(--cam-duz); } /* Sabit başlık. */
.pano-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--cizgi); font-size: 11px; color: var(--metin-2); } /* Tablo altı. */
.pano-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* Durum dağılımı. */
@media (max-width: 1280px) { .pano { grid-template-columns: 320px minmax(0, 1fr); } .pano-sag { grid-column: 1 / -1; } .pano-tablo { max-height: none; } } /* Dar masaüstü. */
@media (max-width: 820px) { .pano { grid-template-columns: 1fr; } .pano-orta { min-height: 420px; } } /* Tablet/telefon. */
.pano-tablo table { font-size: 12px; } /* Örnekteki text-xs tablo. */
.pano-tablo th { padding: 9px 8px; font-size: 10px; letter-spacing: .06em; } /* Sıkı başlık. */
.pano-tablo td { padding: 8px; } /* Sıkı hücre. */
.pano-tablo td:nth-child(2) { min-width: 120px; color: var(--baslik); font-weight: 600; } /* Mahiyet sütunu kırılır. */
.pano-tablo td.harcama { color: var(--basari); } /* Örnekte harcama yeşil. */
.para-gosterge .gosterge-deger { font-size: 24px; white-space: nowrap; } /* Uzun tutar tek satırda. */
.iskelet .gosterge-deger { opacity: .35; animation: izl-iskelet 1.2s ease-in-out infinite; } /* Yükleniyor. */
@keyframes izl-iskelet { 50% { opacity: .1; } } /* Yanıp söner. */
:root[data-tema="acik"] .igne-ad small { color: #0891b2; opacity: .8; } /* Açık temada okunur iş sayısı. */

/* Haftalık İzleme (iş girişi) sayfası: eski sayfanın düzeni */
.is-baslik { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 14px; } /* Üst satır. */
.is-baslik h1 { font-size: 18px; font-weight: 800; } /* İş adı. */
.is-baslik p { margin: 4px 0 0; } /* Alt bilgi. */
.is-ust { display: grid; grid-template-columns: minmax(260px, 420px) 1fr minmax(220px, 300px); gap: 16px; align-items: end; } /* İKN ile Bul + fiziki çubuk. */
.is-ust .fiziki { grid-column: 3; } /* Sağda fiziki gerçekleşme. */
.is-ust .ilerleme-cubuk { flex: none; height: 8px; } /* Çubuk. */
.ic-kart { background: rgba(0, 242, 254, .04); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* İç içe kart (köyler); saydamlık katlanmaz. */
.uyari-yazi { color: var(--tehlike); font-weight: 800; } /* "en az bir köy/yer girişi yapılmalı". */
.dosya-alani { border: 2px dashed var(--cizgi-guclu); border-radius: 16px; padding: 48px; text-align: center; color: var(--metin-3); } /* Pasif yükleme alanı. */
.hizala-alt { align-self: end; } /* Düğmeler alt hizada. */
.liste-kap { max-height: 60vh; overflow: auto; border: 1px solid var(--cizgi); border-radius: 12px; } /* Kaydırılan liste. */
.liste-kap th { position: sticky; top: 0; z-index: 1; background: var(--cam-duz); } /* Sabit başlık. */
h4 { margin: 0; font: 700 14px/1.3 "Outfit", sans-serif; color: var(--baslik); } /* Alt bölüm başlığı. */
@media (max-width: 820px) { .is-ust { grid-template-columns: 1fr; } .is-ust .fiziki { grid-column: auto; } } /* Dar ekran. */
.is-ust .satir { flex-wrap: nowrap; } .is-ust .satir input { flex: 1; } /* "Bul" düğmesi İKN kutusunun yanında. */

/* Kontrol Paneli: kullanıcının "Köy Bilgi Sistemi" yerleşimi, GIS temasının renkleriyle */
.kp { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - 64px); } /* Sol liste + ana alan. */
.kp-sol { display: flex; flex-direction: column; min-height: 0; background: var(--cam); border-right: 1px solid var(--cizgi); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Sol bölme. */
.kp-ara { padding: 8px; border-bottom: 1px solid var(--cizgi); } /* Arama kutusu alanı. */
.kp-ara input { height: 32px; font-size: 12px; border-radius: 8px; } /* Küçük arama. */
.kp-liste { flex: 1; overflow-y: auto; } /* Kaydırılan köy listesi. */
.kp-koy { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--cizgi); background: none; color: var(--metin-2); font: 12px/1.3 "Inter", sans-serif; text-align: left; cursor: pointer; } /* Köy satırı. */
.kp-koy svg { width: 13px; height: 13px; color: var(--uyari); flex: none; } /* Sarı üçgen simge. */
.kp-koy span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ad. */
.kp-koy small { color: var(--metin-3); font-size: 10px; } /* İş sayısı. */
.kp-koy:hover { background: var(--vurgu-acik); color: var(--metin); } /* Üzerine gelince. */
.kp-koy.secili { background: var(--vurgu-acik); border-left-color: var(--vurgu); color: var(--baslik); font-weight: 600; } /* Seçili köy. */
.kp-toplamlar { padding: 12px; display: grid; gap: 10px; border-top: 1px solid var(--cizgi); } /* Sol alt toplamlar. */
.kp-toplam { padding: 10px; text-align: center; border-radius: 12px; background: var(--vurgu-acik); border: 1px solid var(--cizgi); } /* Toplam kartı. */
.kp-toplam-ad { color: var(--vurgu-yazi); font: 700 16px/1.2 "Outfit", sans-serif; } /* Ad (örnekte camgöbeği). */
.kp-toplam-deger { color: var(--tehlike); font: 800 28px/1.15 "Outfit", sans-serif; margin-top: 2px; text-shadow: 0 0 14px color-mix(in srgb, var(--tehlike) 35%, transparent); } /* Değer (örnekte kırmızı). */
.kp-toplam-deger span { font-size: 16px; margin-left: 3px; } /* Birim. */
.kp-ana { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; } /* Ana alan. */
.kp-baslik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Köy başlığı. */
.kp-baslik h1 { font-size: 18px; font-weight: 800; letter-spacing: .05em; } /* Köy adı. */
.kp-ust { padding: 14px; text-align: center; } /* Üst gösterge. */
.kp-ust h2 { color: var(--vurgu-yazi); font-size: 16px; letter-spacing: .03em; } /* Ad. */
.kp-ust-deger { color: var(--tehlike); font: 800 46px/1.05 "Outfit", sans-serif; margin: 6px 0 2px; text-shadow: 0 0 18px color-mix(in srgb, var(--tehlike) 35%, transparent); } /* Büyük kırmızı değer. */
.kp-ust-alt { color: var(--metin); font-size: 13px; font-weight: 500; } /* Birim. */
.kp-orta { display: grid; gap: 12px; } /* İçme suyu, foseptik, yatırımlar. */
.kp-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); } /* İki sütun. */
.kp-iki > div + div { border-left: 1px solid var(--cizgi); padding-left: 16px; } /* Ayraç. */
.kp-sari { color: var(--uyari); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; } /* Sarı başlık. */
.kp-durum { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 12px/1.45 ui-monospace, Consolas, monospace; color: var(--metin); max-height: 120px; overflow-y: auto; } /* Tarih-tanım listesi. */
.kp-durum b { color: var(--uyari); font-weight: 600; } /* Tarih. */
.kp-veri-yok { padding: 18px; text-align: center; color: var(--metin-3); font-style: italic; font-size: 12px; } /* Veri yok. */
.kp-yatirimlar { max-height: 160px; overflow-y: auto; display: grid; font: 12px/1.6 ui-monospace, Consolas, monospace; } /* Yatırım listesi. */
.kp-orta .kp-ara { padding: 0 0 8px; border: 0; } /* Yatırım arama. */
.kp-yatirim { color: var(--metin-2); border-bottom: 1px solid var(--cizgi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0; } /* Satır. */
.kp-yatirim:hover { background: var(--vurgu-acik); } /* Üzerine gelince. */
.y-yil { color: var(--uyari); } .y-prog { color: var(--metin-2); } .y-tanim { color: var(--baslik); } .y-miktar { color: var(--vurgu-yazi); } .y-ikn { color: var(--tehlike); } /* Örnekteki renkler. */
.y-durum.biten { color: var(--basari); font-weight: 700; } .y-durum.devam { color: var(--uyari); font-weight: 700; } .y-durum.iptal { color: var(--tehlike); font-weight: 700; } /* Durum renkleri. */
.kp-alt { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } /* Grafikler. */
.kp-sutun { display: grid; gap: 8px; } /* Sütun grafik kartı. */
.kp-grafik-baslik { font-weight: 700; color: var(--baslik); font-size: 14px; } /* Grafik başlığı. */
.kp-kaydir { height: 6px; padding: 0; border: 0; accent-color: var(--vurgu); background: transparent; } /* Yıl kaydırıcısı. */
.kp-grafik-kap { min-height: 240px; } /* Grafik alanı. */
.kp-grafik { width: 100%; height: auto; } /* Ölçeklenen SVG. */
.kp-izgara { stroke: var(--cizgi); stroke-width: 1; } /* Yatay ızgara. */
.kp-eksen { fill: var(--metin-3); font: 10px "Inter", sans-serif; } /* Eksen yazısı. */
.kp-deger { fill: var(--metin); font: 600 10px "Inter", sans-serif; } /* Sütun üstü değer. */
.kp-eksen-ad { text-align: center; color: var(--metin-2); font-size: 11px; font-weight: 600; letter-spacing: .05em; } /* X ekseni adı. */
.kp-sekmeler { display: flex; gap: 4px; flex-wrap: wrap; } /* NÜFUS/PARKE/ASFALT/… */
.kp-sekmeler button { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--cizgi-guclu); background: transparent; color: var(--metin-2); font: 600 11px "Inter", sans-serif; cursor: pointer; } /* Sekme. */
.kp-sekmeler button.etkin { background: var(--vurgu-acik); color: var(--baslik); border-color: var(--vurgu); } /* Etkin sekme. */
.kp-halka-kap { display: grid; gap: 12px; justify-items: center; } /* Halka ve açıklama. */
.kp-halka { width: min(240px, 100%); height: auto; } /* Halka. */
.kp-halka-zemin { stroke: var(--notr-acik); } /* Zemin halkası. */
.kp-lejant { display: grid; gap: 4px; width: 100%; font: 11px/1.3 ui-monospace, Consolas, monospace; color: var(--metin); } /* Açıklama listesi. */
.kp-lejant > div { display: flex; align-items: center; gap: 6px; } .kp-lejant b { margin-left: auto; color: var(--baslik); } /* Satır. */
.kp-renk { width: 10px; height: 10px; border-radius: 2px; flex: none; } /* Renk kutusu. */
@media (max-width: 1100px) { .kp-alt { grid-template-columns: 1fr; } } /* Grafikler alt alta. */
@media (max-width: 820px) { .kp { grid-template-columns: 1fr; height: auto; } .kp-sol { max-height: 360px; } .kp-iki { grid-template-columns: 1fr; } .kp-iki > div + div { border-left: 0; padding-left: 0; } } /* Telefon. */

/* Kontrol Paneli: çapraz filtre ve tam ekran grafik */
.kp-filtre-satir { min-height: 26px; display: flex; align-items: center; } /* Filtre etiketleri satırı. */
.kp-filtreler { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* Etiketler. */
.kp-filtre { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--uyari); background: var(--uyari-acik); color: var(--uyari); font: 700 12px "Inter", sans-serif; cursor: pointer; } /* Etkin filtre (amber, örnekteki seçim rengi). */
.kp-filtre b { font-size: 14px; line-height: 1; } /* × */
.tiklanir { cursor: pointer; } /* Tıklanabilir öğe. */
.kp-sutun-g.tiklanir:hover rect { filter: brightness(1.25); } /* Sütun üzerine gelince. */
.soluk-dilim { opacity: .28; transition: opacity .2s; } /* Seçili olmayan dilim/sütun. */
.kp-halka circle.tiklanir:hover { filter: brightness(1.2); } /* Dilim üzerine gelince. */
.kp-lejant-satir { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* Tıklanabilir açıklama satırı. */
.kp-lejant-satir:hover { background: var(--vurgu-acik); } /* Üzerine gelince. */
.kp-lejant-satir.secili { border-color: var(--uyari); background: var(--uyari-acik); } /* Seçili program. */
.kp-lejant-satir b { margin-left: auto; color: var(--baslik); } /* Yüzde. */
.kp-grafik-kart { position: relative; } /* Büyütme düğmesi konumu. */
.kp-buyut { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--cizgi-guclu); background: var(--vurgu-acik); color: var(--vurgu-yazi); cursor: pointer; } /* Büyütme düğmesi. */
.kp-buyut:hover { border-color: var(--vurgu); box-shadow: 0 0 10px color-mix(in srgb, var(--vurgu) 30%, transparent); } /* Üzerine gelince. */
.kp-buyut svg { width: 15px; height: 15px; } /* Simge. */
.kp-tam { position: fixed; inset: 0; z-index: 2500; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; background: color-mix(in srgb, var(--zemin) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Tam ekran katmanı. */
.kp-tam > .kart { flex: 1; min-height: 0; overflow: auto; } /* Grafik kartı bütün alanı kaplar. */
.kp-tam .kp-grafik-kap { min-height: 0; } /* Sınır yok. */
.kp-tam .kp-grafik { max-height: calc(100vh - 260px); } /* Ekrana sığan sütun grafik. */
.kp-tam .kp-halka { width: min(60vh, 520px); } /* Büyük halka. */
.kp-tam .kp-halka-kap { grid-template-columns: auto minmax(220px, 360px); align-items: center; justify-content: center; } /* Halka ve açıklama yan yana. */
.kp-tam-ust { display: flex; align-items: center; gap: 16px; padding-right: 56px; flex-wrap: wrap; } /* Başlık ve filtreler. */
.kp-tam-kapat { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--cizgi-guclu); background: var(--cam); color: var(--baslik); font: 400 26px/1 "Inter", sans-serif; cursor: pointer; } /* Sağ üst × düğmesi. */
.kp-tam-kapat:hover { border-color: var(--tehlike); color: var(--tehlike); } /* Üzerine gelince. */
body.kp-tam-acik { overflow: hidden; } /* Arka sayfa kaymaz. */
@media (max-width: 820px) { .kp-tam .kp-halka-kap { grid-template-columns: 1fr; } } /* Telefon. */