/* =====================================================================
   REFERANS ENERJİ — YENİ MODÜLLER
   index-demo2.html'e eklenen 6 modülün stilleri.
   Modül 01 Adil Fatura · 02 Dijital Panel · 03 Yorumlar
   Modül 04 Türkiye Haritası (AYDINLIK) · 07 Sertifika Şeridi · 08 Keşif Formu
   Mevcut tasarım tokenları: --primary #0ea5e9, Inter, yumuşak gölge.
   ===================================================================== */

.nm-eyebrow { color:#0ea5e9; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:0.8rem; display:block; }

/* =====================================================================
   MODÜL 01 — ADİL FATURA İNTERAKTİF KARŞILAŞTIRMA
   ===================================================================== */
.af-section { padding:70px 0; background:var(--bg-main); }
.af-head { text-align:center; margin-bottom:36px; }
.af-head h3 { font-size:2.2rem; font-weight:800; color:var(--text-dark); margin:10px 0 0; letter-spacing:-0.02em; }
.af-head p { color:var(--text-muted); max-width:660px; margin:12px auto 0; }
.af-toggle { display:inline-flex; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:50px; padding:6px; gap:4px; flex-wrap:wrap; justify-content:center; }
.af-toggle button { border:none; background:transparent; padding:12px 24px; border-radius:40px; font-weight:700; font-size:0.95rem; color:#64748b; cursor:pointer; transition:all .3s ease; display:flex; align-items:center; gap:9px; white-space:nowrap; }
.af-toggle button.active { color:#fff; box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.af-toggle button.active[data-mode="eski"] { background:#ef4444; }
.af-toggle button.active[data-mode="adil"] { background:#16a34a; }
.af-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:36px; align-items:stretch; margin-top:40px; }
.af-building { background:linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%); border-radius:20px; padding:22px; border:1px solid #e2e8f0; }
.af-roof { height:26px; background:#334155; border-radius:10px 10px 0 0; margin:0 14px; position:relative; }
.af-roof::after { content:""; position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:8px; height:18px; background:#64748b; border-radius:3px; }
.af-flat { display:grid; grid-template-columns:150px 1fr 116px; align-items:center; gap:16px; background:#fff; border:1px solid #e2e8f0; padding:14px 18px; margin:0 14px; transition:all .35s cubic-bezier(.34,1.3,.64,1); }
.af-flat + .af-flat { border-top:none; }
.af-flat:last-of-type { border-radius:0 0 14px 14px; }
.af-flat.win { border-color:#86efac; background:#f0fdf4; box-shadow:inset 4px 0 0 #16a34a; }
.af-flat.lose { border-color:#fecaca; background:#fef2f2; box-shadow:inset 4px 0 0 #ef4444; }
.af-occ { display:flex; align-items:center; gap:11px; }
.af-occ .av { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:#fff; flex-shrink:0; }
.af-occ .nm { font-weight:800; font-size:0.92rem; color:#0f172a; line-height:1.1; }
.af-occ .ds { font-size:0.72rem; color:#94a3b8; }
.af-bar-track { height:12px; background:#e2e8f0; border-radius:8px; overflow:hidden; }
.af-bar-fill { height:100%; border-radius:8px; width:0; transition:width .6s cubic-bezier(.4,0,.2,1); background:linear-gradient(90deg,#fbbf24,#f97316); }
.af-usage-lbl { font-size:0.7rem; color:#94a3b8; margin-top:4px; font-weight:600; }
.af-bill { text-align:right; }
.af-bill .amt { font-weight:800; font-size:1.25rem; color:#0f172a; letter-spacing:-0.5px; }
.af-bill .delta { font-size:0.72rem; font-weight:700; }
.af-bill .delta.down { color:#16a34a; }
.af-bill .delta.up { color:#ef4444; }
.af-side { display:flex; flex-direction:column; gap:18px; }
.af-total-card { border-radius:18px; padding:26px; color:#fff; background:linear-gradient(135deg,#0f172a,#1e293b); }
.af-total-card .lbl { font-size:0.72rem; letter-spacing:1.5px; color:#94a3b8; font-weight:700; text-transform:uppercase; }
.af-total-card .big { font-size:2.6rem; font-weight:800; letter-spacing:-1px; }
.af-total-card .sub { font-size:0.82rem; color:#cbd5e1; }
.af-explain { border-radius:16px; padding:22px; border:1px solid #e2e8f0; background:#fff; transition:all .4s ease; }
.af-explain h5 { font-weight:800; font-size:1.05rem; margin:0 0 8px; display:flex; align-items:center; gap:9px; }
.af-explain p { color:#64748b; font-size:0.9rem; margin:0; line-height:1.6; }
.af-explain.mode-eski { background:#fef2f2; border-color:#fecaca; }
.af-explain.mode-eski h5 { color:#dc2626; }
.af-explain.mode-adil { background:#f0fdf4; border-color:#bbf7d0; }
.af-explain.mode-adil h5 { color:#16a34a; }
.af-legal { font-size:0.78rem; color:#94a3b8; display:flex; gap:10px; align-items:flex-start; }
.af-legal i { color:#0ea5e9; margin-top:2px; }

/* =====================================================================
   MODÜL 02 — DİJİTAL SAKİN & YÖNETİCİ PANELİ
   ===================================================================== */
.dp-section { padding:70px 0; background:var(--bg-white); }
.dp-card { border-radius:24px; overflow:hidden; box-shadow:0 30px 70px rgba(15,23,42,0.10); border:1px solid #e2e8f0; }
.dp-wrap { display:grid; grid-template-columns:0.95fr 1.05fr; }
.dp-left { padding:60px 48px; display:flex; flex-direction:column; justify-content:center; background:#fff; }
.dp-left h3 { font-size:2.2rem; font-weight:800; color:#0f172a; margin:12px 0 16px; letter-spacing:-0.02em; line-height:1.15; }
.dp-left > p { color:#64748b; font-size:1.02rem; line-height:1.65; margin-bottom:26px; }
.dp-feat { display:flex; gap:15px; margin-bottom:20px; }
.dp-feat .ic { width:46px; height:46px; border-radius:12px; background:rgba(14,165,233,0.1); color:#0ea5e9; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.dp-feat h6 { font-weight:800; margin:0 0 3px; font-size:0.98rem; color:#0f172a; }
.dp-feat p { margin:0; font-size:0.88rem; color:#64748b; line-height:1.5; }
.dp-store { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.dp-store a { display:inline-flex; align-items:center; gap:9px; background:#0f172a; color:#fff; padding:11px 18px; border-radius:12px; text-decoration:none; font-weight:700; font-size:0.82rem; transition:transform .25s ease; }
.dp-store a:hover { transform:translateY(-3px); color:#fff; }
.dp-store a i { font-size:1.5rem; }
.dp-store a small { display:block; font-size:0.62rem; color:#94a3b8; font-weight:500; }
.dp-right { background:radial-gradient(circle at 50% 30%, #1e3a5f 0%, #0b1220 70%); position:relative; display:flex; align-items:center; justify-content:center; padding:56px 20px; overflow:hidden; }
.dp-right::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size:22px 22px; }
.dp-phone { position:relative; width:290px; height:auto; min-height:590px; background:#0f172a; border-radius:42px; padding:13px; box-shadow:0 40px 80px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.06); z-index:2; }
.dp-screen { background:#f1f5f9; width:100%; height:auto; min-height:564px; border-radius:30px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.dp-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0f172a; border-radius:0 0 16px 16px; z-index:5; }
.dp-appbar { background:linear-gradient(135deg,#0ea5e9,#0284c7); padding:36px 20px 22px; color:#fff; }
.dp-appbar .hi { font-size:0.78rem; opacity:0.85; }
.dp-appbar .nm { font-size:1.15rem; font-weight:800; }
.dp-appbar .site { font-size:0.72rem; opacity:0.8; margin-top:2px; }
.dp-body { padding:16px; overflow:hidden; flex:1; }
.dp-bill-card { background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 20px rgba(0,0,0,0.06); margin-top:-34px; position:relative; }
.dp-bill-card .t { font-size:0.68rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.dp-bill-card .v { font-size:1.85rem; font-weight:800; color:#0f172a; letter-spacing:-0.5px; }
.dp-bill-card .st { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:700; color:#16a34a; background:#f0fdf4; padding:3px 9px; border-radius:20px; margin-top:4px; }
.dp-pay { background:#0ea5e9; color:#fff; text-align:center; border-radius:11px; padding:11px; font-weight:800; font-size:0.85rem; margin-top:12px; }
.dp-sec-t { font-size:0.72rem; font-weight:800; color:#475569; margin:18px 4px 10px; text-transform:uppercase; letter-spacing:0.5px; }
.dp-chart { background:#fff; border-radius:14px; padding:16px 14px 12px; box-shadow:0 6px 16px rgba(0,0,0,0.04); }
.dp-bars { display:flex; align-items:flex-end; justify-content:space-between; gap:7px; height:92px; }
.dp-bars .b { flex:1; background:linear-gradient(180deg,#7dd3fc,#0ea5e9); border-radius:5px 5px 0 0; }
.dp-bars .b.cur { background:linear-gradient(180deg,#0284c7,#0369a1); }
.dp-xlabels { display:flex; justify-content:space-between; gap:7px; margin-top:7px; }
.dp-xlabels span { flex:1; text-align:center; font-size:0.55rem; color:#94a3b8; font-weight:600; }
.dp-compare { background:#ecfdf5; border:1px solid #bbf7d0; border-radius:12px; padding:11px 13px; margin-top:12px; display:flex; align-items:center; gap:10px; }
.dp-compare i { color:#16a34a; font-size:1.2rem; }
.dp-compare p { margin:0; font-size:0.72rem; color:#166534; font-weight:600; line-height:1.4; }
.dp-tabbar { background:#fff; border-top:1px solid #e2e8f0; display:flex; justify-content:space-around; padding:11px 0 13px; }
.dp-tabbar i { font-size:1.1rem; color:#cbd5e1; }
.dp-tabbar i.on { color:#0ea5e9; }

/* =====================================================================
   MODÜL 03 — MÜŞTERİ YORUMLARI
   ===================================================================== */
.tg-section { padding:70px 0; background:var(--bg-main); }
.tg-head { text-align:center; margin-bottom:14px; }
.tg-head h3 { font-size:2.1rem; font-weight:800; color:#0f172a; margin:10px 0 0; letter-spacing:-0.02em; }
.tg-head p { color:#64748b; max-width:620px; margin:12px auto 0; }
.tg-rate-strip { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin:28px 0 40px; }
.tg-rate-strip .it { text-align:center; }
.tg-rate-strip .n { font-size:2rem; font-weight:800; color:#0ea5e9; letter-spacing:-1px; }
.tg-rate-strip .l { font-size:0.8rem; color:#64748b; font-weight:600; }
.tg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tg-card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:28px; transition:all .3s ease; position:relative; }
.tg-card:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(15,23,42,0.08); border-color:rgba(14,165,233,0.3); }
.tg-quote-ico { position:absolute; top:22px; right:26px; font-size:2.4rem; color:#e2e8f0; }
.tg-stars { color:#f59e0b; font-size:0.92rem; margin-bottom:14px; letter-spacing:2px; }
.tg-text { color:#334155; font-size:0.96rem; line-height:1.65; margin-bottom:22px; }
.tg-who { display:flex; align-items:center; gap:13px; border-top:1px solid #f1f5f9; padding-top:18px; }
.tg-who .av { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.1rem; flex-shrink:0; }
.tg-who .nm { font-weight:800; font-size:0.95rem; color:#0f172a; }
.tg-who .rl { font-size:0.78rem; color:#94a3b8; }

/* =====================================================================
   MODÜL 04 — TÜRKİYE GENELİ AĞ HARİTASI (AYDINLIK)
   ===================================================================== */
.map-section { padding:70px 0; background:var(--bg-white); }
.map-card { display:grid; grid-template-columns:1.35fr 0.65fr; border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; box-shadow:0 20px 50px rgba(15,23,42,0.07); background:#fff; }
.map-stage { position:relative; padding:30px; background:#f8fafc; }
.map-canvas { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid #cbd5e1; }
.map-canvas img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.map-live { position:absolute; top:16px; left:16px; z-index:6; display:flex; align-items:center; gap:8px; background:rgba(2,8,20,0.55); backdrop-filter:blur(6px); border:1px solid rgba(56,189,248,0.4); color:#7dd3fc; font-weight:800; font-size:0.72rem; letter-spacing:1.5px; padding:7px 13px; border-radius:30px; }
.map-live .ld { width:8px; height:8px; border-radius:50%; background:#22d3ee; animation:map-blink 1.6s infinite; }
@keyframes map-blink { 0%{box-shadow:0 0 0 0 rgba(34,211,238,.7);} 70%{box-shadow:0 0 0 8px rgba(34,211,238,0);} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0);} }
.map-pin { position:absolute; transform:translate(-50%,-50%); z-index:5; }
.map-pin .ring { width:14px; height:14px; border-radius:50%; background:#22d3ee; box-shadow:0 0 12px 2px rgba(34,211,238,0.9); position:relative; display:block; }
.map-pin .ring::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(34,211,238,0.6); animation:map-pulse 2.4s infinite; }
@keyframes map-pulse { 0%{box-shadow:0 0 0 0 rgba(34,211,238,.6);} 70%{box-shadow:0 0 0 22px rgba(34,211,238,0);} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0);} }
.map-pin .lbl { position:absolute; left:50%; transform:translateX(-50%); bottom:22px; white-space:nowrap; background:rgba(2,8,20,0.82); border:1px solid rgba(56,189,248,0.35); color:#e0f2fe; font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:7px; opacity:0; transition:opacity .3s, bottom .3s; pointer-events:none; }
.map-pin:hover .lbl, .map-pin.show .lbl { opacity:1; bottom:26px; }
.map-pin.big .ring { width:18px; height:18px; }
.map-side { background:#fff; padding:42px 36px; display:flex; flex-direction:column; justify-content:center; gap:22px; }
.map-side h3 { color:#0f172a; font-size:1.85rem; font-weight:800; letter-spacing:-0.02em; line-height:1.2; margin:8px 0 4px; }
.map-side p { color:#64748b; font-size:0.95rem; line-height:1.6; margin:0; }
.map-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.map-stat { border:1px solid #e2e8f0; background:#f8fafc; border-radius:14px; padding:16px 18px; }
.map-stat .v { font-size:1.9rem; font-weight:800; color:#0ea5e9; letter-spacing:-0.5px; line-height:1; }
.map-stat .l { font-size:0.78rem; color:#64748b; font-weight:600; margin-top:5px; }

/* =====================================================================
   MODÜL 07 — SERTİFİKA & GÜVEN ŞERİDİ
   ===================================================================== */
.tm-section { padding:56px 0; background:var(--bg-main); }
.tm-head { text-align:center; margin-bottom:30px; }
.tm-head h3 { font-size:1.7rem; font-weight:800; color:#0f172a; margin:8px 0 0; }
.tm-marquee { position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tm-track { display:flex; gap:18px; width:max-content; animation:tm-scroll 32s linear infinite; }
.tm-section:hover .tm-track { animation-play-state:paused; }
@keyframes tm-scroll { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.tm-badge { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px 22px; min-width:230px; transition:all .3s ease; }
.tm-badge:hover { border-color:rgba(14,165,233,0.4); box-shadow:0 12px 24px rgba(15,23,42,0.06); transform:translateY(-3px); }
.tm-badge .ic { width:46px; height:46px; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#0ea5e9; flex-shrink:0; }
.tm-badge .tt { font-weight:800; font-size:0.9rem; color:#0f172a; line-height:1.1; }
.tm-badge .ss { font-size:0.72rem; color:#94a3b8; font-weight:600; }

/* =====================================================================
   MODÜL 08 — ÜCRETSİZ KEŞİF TALEP FORMU
   ===================================================================== */
.kf-section { padding:70px 0; background:var(--bg-white); }
.kf-card { border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; box-shadow:0 20px 50px rgba(15,23,42,0.07); }
.kf-grid { display:grid; grid-template-columns:0.92fr 1.08fr; }
.kf-left { padding:54px 46px; background:#f8fafc; border-right:1px solid #eef2f7; display:flex; flex-direction:column; }
.kf-left h3 { font-size:2rem; font-weight:800; color:#0f172a; letter-spacing:-0.02em; line-height:1.18; margin:14px 0 14px; }
.kf-left > p { color:#64748b; font-size:1.02rem; line-height:1.7; margin-bottom:26px; }
.kf-photo { width:100%; height:200px; margin-bottom:26px; display:block; }
.kf-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px; }
.kf-list li { display:flex; gap:14px; align-items:flex-start; }
.kf-list .ic { width:42px; height:42px; flex-shrink:0; border-radius:11px; background:#fff; border:1px solid #e2e8f0; color:#0ea5e9; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.kf-list h6 { font-weight:800; font-size:0.96rem; margin:0 0 2px; color:#0f172a; }
.kf-list p { margin:0; font-size:0.88rem; color:#64748b; line-height:1.5; }
.kf-right { padding:54px 46px; background:#fff; }
.kf-right .formtitle { font-weight:800; font-size:1.3rem; color:#0f172a; }
.kf-right .formsub { color:#64748b; font-size:0.92rem; margin-bottom:24px; }
.kf-field { margin-bottom:18px; }
.kf-field label { display:block; font-size:0.82rem; font-weight:700; color:#334155; margin-bottom:7px; }
.kf-field label .req { color:#0ea5e9; }
.kf-input { width:100%; padding:13px 15px; border-radius:11px; border:1px solid #dbe2ea; background:#fff; font-size:0.95rem; color:#0f172a; transition:border-color .25s, box-shadow .25s; font-family:inherit; }
.kf-input::placeholder { color:#9aa7b5; }
.kf-input:focus { outline:none; border-color:#0ea5e9; box-shadow:0 0 0 4px rgba(14,165,233,0.12); }
textarea.kf-input { resize:vertical; min-height:90px; }
.kf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kf-submit { width:100%; background:#0ea5e9; color:#fff; border:none; border-radius:12px; padding:15px; font-weight:800; font-size:1rem; cursor:pointer; transition:all .25s ease; box-shadow:0 10px 22px rgba(14,165,233,0.22); }
.kf-submit:hover { background:#0284c7; transform:translateY(-2px); box-shadow:0 14px 26px rgba(14,165,233,0.3); }
.kf-note { display:flex; align-items:center; gap:9px; justify-content:center; margin-top:16px; color:#64748b; font-size:0.82rem; }
.kf-note i { color:#16a34a; }
.kf-success { display:none; text-align:center; padding:30px 10px; }
.kf-success .ico { width:74px; height:74px; border-radius:50%; background:#ecfdf5; color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 18px; }
.kf-success h4 { font-weight:800; color:#0f172a; }
.kf-success p { color:#64748b; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
  .af-grid { grid-template-columns:1fr; }
  .dp-wrap { grid-template-columns:1fr; }
  .tg-grid { grid-template-columns:1fr; }
  .map-card { grid-template-columns:1fr; }
  .kf-grid { grid-template-columns:1fr; }
  .kf-left { border-right:none; border-bottom:1px solid #eef2f7; }
  .af-head h3, .map-side h3, .dp-left h3 { font-size:1.7rem; }
}
@media (max-width: 575px) {
  .af-flat { grid-template-columns:1fr 90px; }
  .af-flat .af-bar-track, .af-flat .af-usage-lbl { display:none; }
}

/* =====================================================================
   DAİRE SİMÜLASYONU — YATAY HESAPLAMA HEADER (parametreler üstte)
   ===================================================================== */
.sim-header-bar { background:#fff; border:1px solid rgba(0,0,0,0.03); border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.05); padding:16px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sim-header-bar .shb-title { display:flex; align-items:center; gap:11px; font-size:0.8rem; font-weight:800; color:#333; letter-spacing:0.5px; padding-right:20px; border-right:1px solid #eee; line-height:1.15; }
.sim-header-bar .shb-title i { color:#0ea5e9; font-size:1.4rem; }
.sim-header-bar .shb-field { display:flex; flex-direction:column; gap:6px; min-width:170px; flex:1 1 170px; }
.sim-header-bar .shb-field .control-label { margin-bottom:0; }
.sim-header-bar .shb-havlupan { flex:1 1 240px; min-width:220px; }
.sim-header-bar .shb-havlupan .havlupan-box { margin-top:0; padding:9px 15px; height:100%; }
.sim-header-bar .shb-total { margin-left:auto; display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#0f172a,#1e293b); border-radius:12px; padding:11px 22px; box-shadow:0 10px 20px rgba(15,23,42,0.2); }
.sim-header-bar .shb-total-lbl { font-size:0.62rem; color:#94a3b8; font-weight:700; letter-spacing:1px; text-transform:uppercase; line-height:1.25; }
.sim-header-bar .shb-total-num { display:flex; align-items:baseline; gap:5px; }
.sim-header-bar .shb-total-num span { font-size:2.1rem; font-weight:800; color:#00bfff; line-height:1; text-shadow:0 0 15px rgba(0,191,255,0.3); }
.sim-header-bar .shb-total-num small { font-size:1rem; color:#fff; font-weight:600; }
@media (max-width: 991px){
  .sim-header-bar .shb-title { border-right:none; padding-right:0; width:100%; }
  .sim-header-bar .shb-total { margin-left:0; width:100%; justify-content:space-between; }
}


/* =====================================================================
   EK (Haziran) — Sol panel uyarı · Adil Fatura 20 daire · Aydınlık harita
   ===================================================================== */

/* Sol panel UYARI kutusu */
.sim-warn-box { margin-top:14px; background:linear-gradient(135deg,#fff7ed,#fffbeb); border:1px solid #fed7aa; border-left:4px solid #f59e0b; border-radius:14px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.sim-warn-box i { color:#f59e0b; font-size:1.2rem; margin-top:2px; flex-shrink:0; }
.sim-warn-box p { margin:0; font-size:0.8rem; line-height:1.55; color:#7c5b18; }
.sim-warn-box strong { color:#9a3412; }

/* Adil Fatura — iki blok / kompakt 20 daire */
.af-section .af-grid { grid-template-columns:1.55fr 0.85fr; }
.af-buildings-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.af-buildings-2 .af-building { padding:14px 10px; }
.af-buildings-2 .af-roof { margin:0 8px; }
.af-block-tag { text-align:center; font-size:0.62rem; font-weight:800; letter-spacing:1px; color:#64748b; background:#eef2f7; margin:0 8px; padding:6px; border-left:1px solid #e2e8f0; border-right:1px solid #e2e8f0; }
.af-buildings-2 .af-flat { grid-template-columns:1fr 86px; gap:8px; padding:7px 9px; margin:0 8px; }
.af-buildings-2 .af-flat:last-of-type { border-radius:0 0 12px 12px; }
.af-buildings-2 .af-occ { gap:8px; }
.af-buildings-2 .af-occ .av { width:28px; height:28px; border-radius:7px; font-size:0.72rem; }
.af-buildings-2 .af-occ .nm { font-size:0.74rem; }
.af-buildings-2 .af-occ .ds { font-size:0.56rem; }
.af-buildings-2 .af-bill .amt { font-size:0.85rem; }
.af-buildings-2 .af-bill .delta { font-size:0.56rem; }
@media (max-width: 991px){ .af-section .af-grid { grid-template-columns:1fr; } }
@media (max-width: 575px){ .af-buildings-2 .af-occ .ds { display:none; } }

/* Aydınlık harita teması */
.map-section { background:linear-gradient(180deg,#ffffff 0%, #f0f9ff 100%); }
.map-stage { background:linear-gradient(160deg,#eff8ff 0%, #e0f2fe 100%); }
.map-canvas { border:1px solid #bae6fd; box-shadow:inset 0 0 40px rgba(186,230,253,0.45); }
.map-live { background:rgba(255,255,255,0.92); border:1px solid #bae6fd; color:#0369a1; box-shadow:0 4px 12px rgba(2,132,199,0.16); }
.map-live .ld { background:#0ea5e9; }
.map-pin .ring { background:#0284c7; box-shadow:0 0 10px 2px rgba(2,132,199,0.5); }
.map-pin .ring::after { box-shadow:0 0 0 0 rgba(2,132,199,0.5); animation:map-pulse-l 2.4s infinite; }
@keyframes map-pulse-l { 0%{box-shadow:0 0 0 0 rgba(2,132,199,.5);} 70%{box-shadow:0 0 0 18px rgba(2,132,199,0);} 100%{box-shadow:0 0 0 0 rgba(2,132,199,0);} }
.map-pin .lbl { background:#fff; border:1px solid #bae6fd; color:#0c4a6e; box-shadow:0 6px 16px rgba(2,132,199,0.18); }
.map-pin.city .ring { width:9px; height:9px; background:#38bdf8; box-shadow:0 0 7px 1px rgba(56,189,248,0.6); }

/* Hizmet verilen iller şeridi */
.city-served { margin-top:26px; }
.city-served-head { text-align:center; font-size:0.95rem; color:#475569; margin-bottom:16px; }
.city-served-head strong { color:#0ea5e9; }
.city-served-head i { color:#0ea5e9; margin-right:4px; }
.city-marquee { position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.city-track { display:flex; gap:10px; width:max-content; animation:city-scroll 55s linear infinite; }
.city-marquee:hover .city-track { animation-play-state:paused; }
@keyframes city-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.city-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #e2e8f0; border-radius:30px; padding:8px 15px; font-size:0.82rem; font-weight:600; color:#334155; white-space:nowrap; box-shadow:0 2px 6px rgba(15,23,42,0.03); }
.city-chip i { color:#0ea5e9; font-size:0.66rem; }


/* Sol panel: düğmeler+uyarı kart içinde; liste boşluğu emsin, uyarı en altta */
.left-panel-card .sim-modes-grid { margin-bottom:18px; }
.left-panel-card .info-alert { margin-bottom:20px; }
.left-panel-card .room-list { flex-grow:1; }
.left-panel-card .sim-warn-box { margin-top:16px; }


/* =====================================================================
   EK2 — Adil Fatura: geniş yerleşim + satır barı
   ===================================================================== */
.af-section .af-grid { grid-template-columns: minmax(0,1fr) 360px; gap:30px; }
.af-buildings-2 { gap:22px; }
.af-buildings-2 .af-building { padding:16px 14px; }
.af-buildings-2 .af-roof { margin:0 12px; }
.af-block-tag { margin:0 12px; }

/* satır: blok düzen + alt bar */
.af-buildings-2 .af-flat { display:block; padding:5px 12px 6px; margin:0 12px; }
.af-row-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.af-buildings-2 .af-occ { gap:10px; }
.af-buildings-2 .af-occ .av { width:27px; height:27px; border-radius:7px; font-size:0.72rem; }
.af-buildings-2 .af-occ .nm { font-size:0.84rem; }
.af-buildings-2 .af-occ .ds { font-size:0.62rem; }
.af-buildings-2 .af-bill { white-space:nowrap; }
.af-buildings-2 .af-bill .amt { font-size:0.98rem; }
.af-buildings-2 .af-bill .delta { font-size:0.64rem; }
.af-bar2 { height:4px; background:#e9eef4; border-radius:6px; margin-top:5px; overflow:hidden; }
.af-bar2-fill { height:100%; width:0; border-radius:6px; transition:width .7s cubic-bezier(.4,0,.2,1); background:linear-gradient(90deg,#7dd3fc,#0ea5e9); }
.af-bar2-fill.g { background:linear-gradient(90deg,#86efac,#16a34a); }
.af-bar2-fill.r { background:linear-gradient(90deg,#fca5a5,#ef4444); }
@media (max-width: 991px){ .af-section .af-grid { grid-template-columns:1fr; } .af-buildings-2 { grid-template-columns:1fr 1fr; } }
@media (max-width: 575px){ .af-buildings-2 { grid-template-columns:1fr; } }

/* =====================================================================
   VANA KADEMESİ SİMÜLATÖRÜ (index.html'den taşındı — ortak kullanım)
   ===================================================================== */

/* =============================================
   VANA KADEMESİ SİMÜLATÖRÜ (HVS)
   ============================================= */
.hvs-section { padding:70px 0; background:#eef2f6; }
/* Tam genişlik: container yok, yalnızca kenar boşluğu */
.hvs-wrap { width:100%; padding:0 clamp(14px, 1.8vw, 40px); }
/* Çok geniş ekranlarda kat planının aşırı büyümesini engelleyen yumuşak sınır */
.hvs-plan { max-width:1400px; }
.hvs-aside { max-width:620px; }
.hvs-head { text-align:center; margin-bottom:32px; }
.hvs-head h3 { font-size:2.2rem; font-weight:800; color:var(--text-dark); margin:10px 0 0; letter-spacing:-0.02em; }
.hvs-head p { color:var(--text-muted); max-width:720px; margin:12px auto 0; }

.hvs-root { font-family:'Inter', sans-serif; color:#17222C; }
.hvs-root *, .hvs-root *::before, .hvs-root *::after { box-sizing:border-box; }
.hvs-root button { font-family:inherit; cursor:pointer; }
.hvs-root select { font-family:inherit; cursor:pointer; }
.hvs-root .hvs-num { font-variant-numeric:tabular-nums; }
.hvs-root a { color:#0369a1; text-decoration:none; }
.hvs-root a:hover { color:#0284c7; text-decoration:underline; }

@keyframes hvspulse { 0%,100% { box-shadow:0 0 0 0 rgba(14,165,233,0.45); } 50% { box-shadow:0 0 0 7px rgba(14,165,233,0); } }

/* Kat planı üzerindeki oda kartları — dar ekranlarda küçültülür */
/* Geniş ekranlarda plan büyüdüğü için kartlar da orantılı büyür */
@media (min-width: 1600px) { .hvs-pin { transform:translate(-50%,-50%) scale(1.12) !important; } }
@media (min-width: 2000px) { .hvs-pin { transform:translate(-50%,-50%) scale(1.25) !important; } }
@media (max-width: 1199.98px) { .hvs-pin { transform:translate(-50%,-50%) scale(0.82) !important; } }
@media (max-width: 991.98px)  { .hvs-pin { transform:translate(-50%,-50%) scale(0.68) !important; } }
@media (max-width: 767.98px)  { .hvs-pin { transform:translate(-50%,-50%) scale(0.52) !important; } }
@media (max-width: 575.98px)  { .hvs-pin { transform:translate(-50%,-50%) scale(0.42) !important; } }
@media (max-width: 575.98px)  { .hvs-head h3 { font-size:1.6rem; } }