/* GAIS STYLE v43.70 (Z-INDEX FIX) */
:root { --accent:#3b82f6; --heat:#ef4444; --prot:#f59e0b; --green:#10b981; }
[data-theme="dark"] { --bg:#121212; --card:#1e1e1e; --text:#fff; --text-muted:#a0a0a0; --dial-bg:#2a2a2a; --border:rgba(255,255,255,0.1); --btn-sec:#333; --nav-bg:rgba(30,30,30,0.95); --shadow:none; }
[data-theme="light"] { --bg:#f3f4f6; --card:#fff; --text:#111827; --text-muted:#6b7280; --dial-bg:#e5e7eb; --border:rgba(0,0,0,0.08); --btn-sec:#f3f4f6; --nav-bg:rgba(255,255,255,0.95); --shadow:0 4px 6px -1px rgba(0,0,0,0.05); }

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; padding:0; font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); display:flex; justify-content:center; min-height:100vh; transition:background 0.3s,color 0.3s; }

.app-container { width:100%; max-width:450px; padding:10px 1.5rem 90px; display:flex; flex-direction:column; }
.app-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0; padding-top: 5px; height: 40px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-time { font-size: 1.1rem; font-weight: 500; color: var(--text); }
.header-icon { width: 20px; height: 20px; color: var(--text); }
.brand { font-size:1.5rem; font-weight:bold; color:var(--text); }
.icon-btn { background:none; border:none; color:var(--text); cursor:pointer; padding:5px; border-radius:50%; transition:0.2s; }
.icon-btn:hover { background:var(--border); }

.status-dot { width:18px; height:18px; border-radius:50%; background:#333; margin-left: 5px; cursor: default; border: 2px solid var(--card); box-sizing: content-box; transition: transform 0.2s; }
.status-dot.clickable { cursor: pointer; }
.status-dot.clickable:active { transform: scale(0.9); }
.status-dot.connected { background:var(--green); box-shadow:0 0 10px rgba(16, 185, 129, 0.4); }
.status-dot.disconnected { background:var(--heat); box-shadow:0 0 10px rgba(239, 68, 68, 0.4); }

.card { background:var(--card); border-radius:16px; padding:1.2rem; border:1px solid var(--border); margin-bottom:1rem; width:100%; box-shadow:var(--shadow); transition:background 0.3s; }

/* KADRAN */
.thermostat-dial { position:relative; width:100%; aspect-ratio:1; max-width:280px; margin:0 auto 0.5rem; user-select:none; touch-action:none; }
.dial-track, .dial-fill { position:absolute; inset:0; border-radius:50%; mask:radial-gradient(transparent 70%,#000 71%); -webkit-mask:radial-gradient(transparent 70%,#000 71%); }
.dial-track { background:var(--dial-bg); transition:background 0.3s; }
.dial-fill { background:conic-gradient(from -135deg, var(--heat) 0deg, var(--dial-bg) 0deg); transition:background 0.1s; }

.dial-content { 
    position:absolute; inset:16%; background:var(--card); border-radius:50%; 
    display:flex; flex-direction:column; align-items:center; justify-content:center; 
    box-shadow:inset 0 0 20px rgba(0,0,0,0.1); pointer-events:none; transition:background 0.3s; 
    z-index: 10; gap: 8px; padding-bottom: 5px;
}

.heating-overlay { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); z-index: 50; pointer-events: none; display: none; filter: drop-shadow(0 0 8px var(--heat)); }
.heating-overlay.visible { display: block; }
.heating-overlay i { width: 32px; height: 32px; color: var(--heat); fill: var(--heat); }

.dial-status { font-size:0.75rem; font-weight:bold; color:var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0; }
.dial-temp { font-size:3.8rem; font-weight:300; line-height:1; color:var(--text); margin: 0; }
.degree { font-size: 2.5rem; vertical-align: top; margin-left: -5px; }
.dial-target { color:var(--text-muted); font-weight:500; font-size: 0.9rem; margin: 0; }

.dial-overlay { position:absolute; inset:0; border-radius:50%; cursor:grab; z-index:20; } 
.dial-overlay:active { cursor: grabbing; }
.dial-handle-wrapper { position:absolute; inset:0; transform:rotate(-135deg); pointer-events:none; transition:transform 0.1s; z-index: 30; } 
.dial-handle { width:28px; height:28px; background:var(--text); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) translateY(-120px); box-shadow:0 0 10px rgba(0,0,0,0.3); pointer-events:auto; cursor: grab; }
.dial-handle:active { cursor: grabbing; scale: 1.1; }

.control-row-compact { display:flex; justify-content:center; gap:1rem; margin-bottom:1.5rem; }
.ctrl-btn-circle, .ctrl-btn-pill { background:var(--card); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.ctrl-btn-circle { width:48px; height:48px; border-radius:50%; }
.ctrl-btn-pill { height:48px; padding:0 1.5rem; border-radius:24px; gap:8px; }
.ctrl-btn-pill.active { background:var(--heat); border-color:var(--heat); color:#fff; }

.info-strip { display:flex; justify-content:space-between; align-items:center; padding:1rem; background:var(--card); border:1px solid var(--border); border-radius:16px; margin-bottom:0.5rem; width:100%; box-shadow:var(--shadow); }
.info-item { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.9rem; flex:1; text-align:center; }
.complex-col { justify-content: center; gap: 2px; }
.sig-row { display: flex; align-items: center; gap: 3px; }
.sig-row i { width: 12px; height: 12px; color: var(--text-muted); margin-bottom: 0; }
.info-item i { color:var(--accent); margin-bottom:4px; width:18px; height:18px; }

.mode-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0.8rem; }
.mode-btn { background:transparent; border:none; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; padding:10px; border-radius:12px; cursor:pointer; transition:0.2s; }
.mode-btn.active { background:rgba(59,130,246,0.15); color:var(--accent); }

/* AYARLAR CSS */
.grid-settings { display:flex; flex-direction:column; gap:0.5rem; }
h2 { margin:0.5rem 0; color:var(--text); }
h3, h4 { font-size:1.1rem; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:0.5rem; display:flex; align-items:center; gap:8px; margin-top:0; color:var(--text); }
h4 { font-size:1rem; border-bottom:none; margin-bottom:0.5rem; }
.desc-text { font-size:0.8rem; color:var(--text-muted); margin:0.5rem 0 1rem 0; }
.form-row { display:flex; gap:10px; } .col { flex:1; } .col label { font-size:0.8rem; color:var(--text-muted); display:block; margin-bottom:4px; }
.form-group { margin-bottom:1rem; } .form-group label { display:block; font-size:0.9rem; margin-bottom:4px; color:var(--text); } .form-group small { display:block; font-size:0.75rem; color:var(--text-muted); margin-top:4px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:0.5rem; }
.toggle-label { display:flex; flex-direction:column; } .toggle-label span { font-size:0.95rem; color:var(--text); } .toggle-label small { font-size:0.75rem; color:var(--text-muted); }
.setting-input { width:100%; padding:10px; background:var(--btn-sec); border:1px solid var(--border); border-radius:8px; color:var(--text); }
.setting-input:focus { outline:none; border-color:var(--accent); }
.toggle-switch { appearance:none; width:40px; height:22px; background:var(--border); border-radius:11px; position:relative; cursor:pointer; transition:0.3s; }
.toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.toggle-switch:checked { background:var(--accent); } .toggle-switch:checked::after { left:20px; }

.sub-settings { background: rgba(0,0,0,0.1); border-radius: 8px; padding: 10px; margin-bottom: 10px; margin-top: -5px; border: 1px solid var(--border); }
.sub-settings.hidden { display: none; }
.mb-0 { margin-bottom: 0 !important; }

.sensor-list { display: flex; flex-direction: column; gap: 8px; }
.sensor-item { display: flex; justify-content: space-between; align-items: center; background: var(--btn-sec); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); }
.sensor-info { display: flex; flex-direction: column; }
.s-alias { font-weight: 600; font-size: 0.9rem; }
.s-name { font-size: 0.75rem; color: var(--text-muted); font-family: monospace; }
.btn-del-sensor { background: none; border: none; color: var(--heat); cursor: pointer; }

.accordion-header { width:100%; padding:1rem; background:var(--card); border:1px solid var(--border); color:var(--text); display:flex; justify-content:space-between; align-items:center; cursor:pointer; border-radius:12px; font-size:1.1rem; font-weight:bold; transition:background 0.2s; }
.accordion-content { display:none; margin-top:0.5rem; } .accordion-content.open { display:block; }
.chevron-icon { transition:transform 0.3s; color:var(--text-muted); } .accordion-header.active .chevron-icon { transform:rotate(180deg); }
.sub-card { border-left:3px solid var(--accent); margin-bottom:0.5rem; } .system-card { border-left:3px solid var(--heat); }
.action-row { display:flex; gap:10px; }
.btn-primary { background:var(--accent); color:#fff; border:none; padding:12px; border-radius:8px; cursor:pointer; width:100%; font-weight:500; }
.btn-danger { background:var(--heat); color:#fff; border:none; padding:12px; border-radius:8px; cursor:pointer; flex:1; font-weight:500; }
.btn-warning { background:var(--prot); color:#000; border:none; padding:12px; border-radius:8px; cursor:pointer; flex:1; font-weight:500; }
.btn-secondary { background:var(--btn-sec); color:var(--text); border:1px solid var(--border); padding:10px; border-radius:8px; cursor:pointer; font-weight:500; }

/* [FIX] Z-Index Düzenlemesi */
.app-nav { position:fixed; bottom:0; left:0; right:0; max-width:450px; margin:0 auto; background:var(--nav-bg); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:12px; border-radius:16px 16px 0 0; z-index:500; backdrop-filter:blur(10px); }
.nav-btn, .nav-link { background:none; border:none; color:var(--text-muted); cursor:pointer; transition:0.2s; display:flex; align-items:center; justify-content:center; } 
.nav-btn.active, .nav-link.active { color:var(--accent); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:2000; backdrop-filter:blur(3px); }
.modal { background:var(--card); padding:1.5rem; border-radius:16px; width:90%; max-width:350px; box-shadow:0 10px 25px rgba(0,0,0,0.5); color:var(--text); }
.modal h3 { margin-top:0; border:none; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:1.5rem; }

.toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 20px; border-radius:20px; opacity:0; transition:0.3s; z-index:3000; pointer-events:none; white-space:nowrap; box-shadow:0 5px 15px rgba(0,0,0,0.3); } .toast.show { opacity:1; }

.hidden { display:none !important; } .page { display:none; } .page.active { display:block; } .mt-1 { margin-top:0.5rem; } .mt-2 { margin-top:1rem; } .w-100 { width:100%; }

.progress-wrap { background: var(--border); border-radius: 10px; height: 10px; overflow: hidden; margin: 10px 0; }
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s; }
#update-status-text { font-size: 0.85rem; color: var(--text); text-align: center; margin-bottom: 5px; }

.quick-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.btn-preset { border: none; border-radius: 12px; padding: 12px; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.1s, opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.btn-preset:active { transform: scale(0.95); }
.p-10 { background: var(--green); }
.p-15 { background: var(--accent); }
.p-20 { background: var(--prot); color: #000; }
.p-30 { background: var(--heat); }
.custom-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.unit-label { font-weight: bold; color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }

.weather-grid { display: flex; flex-direction: column; gap: 8px; max-height: 350px; overflow-y: auto; }
.day-item { display: flex; align-items: center; justify-content: space-between; background: var(--btn-sec); padding: 10px 15px; border-radius: 12px; border: 1px solid var(--border); }
.day-name { font-weight: 600; width: 80px; }
.day-icon img { width: 32px; height: 32px; vertical-align: middle; }
.day-temp { text-align: right; font-weight: 500; font-size: 0.9rem; }
.day-temp span { color: var(--text-muted); font-size: 0.8rem; margin-left: 5px; }

.extra-sensor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: var(--btn-sec);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    width: 100%;
}

.sensor-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--btn-sec);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sensor-actions {
    display: flex;
    gap: 8px;
}

.btn-icon-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.btn-icon-sm:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
}
.text-heat { color: var(--heat) !important; }