/* ============================================================================
   YEREL HİZMETLER — Premium, responsive tasarım sistemi
   Elektrik / Su kesintisi · Nöbetçi eczane · Belediye
   Tema her sayfada CSS custom property ile verilir:
     .svc { --svc-accent: <renk>; --svc-grad: <gradient>; }
   ========================================================================== */

.svc {
    --svc-accent: var(--brand-primary);
    --svc-grad: var(--brand-gradient);
    --svc-radius: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-12);
}
.svc *,
.svc *::before,
.svc *::after { box-sizing: border-box; }

/* ---- Breadcrumb ---- */
.svc-bc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: var(--text-sm); margin-bottom: var(--spacing-4);
}
.svc-bc a { color: var(--text-muted); text-decoration: none; transition: color .15s; }
.svc-bc a:hover { color: var(--svc-accent); }
.svc-bc .sep { color: var(--text-muted); opacity: .5; }
.svc-bc .cur { color: var(--text-primary); font-weight: 600; }

/* ---- HERO ---- */
.svc-hero {
    position: relative; overflow: hidden;
    background: var(--svc-grad);
    border-radius: var(--svc-radius);
    padding: clamp(20px, 4vw, 32px);
    color: #fff;
    margin-bottom: var(--spacing-5);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.svc-hero::after {
    content: ''; position: absolute; top: -60%; right: -10%;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
    pointer-events: none;
}
.svc-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.svc-hero-row { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap; }
.svc-hero-icon {
    width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
    background: rgba(255, 255, 255, .20);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.svc-hero-icon .material-symbols-rounded { font-size: 34px; }
.svc-hero-text { flex: 1; min-width: 200px; }
.svc-hero-text h1 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 900; color: #fff; margin: 0 0 4px; line-height: 1.15; }
.svc-hero-sub { color: rgba(255, 255, 255, .92); font-weight: 500; font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.svc-hero-sub .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .6); }

/* Canlı/güncel rozet */
.svc-live {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
    padding: 4px 11px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700;
    white-space: nowrap;
}
.svc-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: svc-pulse 2s infinite; }
@keyframes svc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* ---- İLÇE SEKMELERİ (yatay kaydırma — mobilde taşmaz) ---- */
.svc-tabs {
    display: flex; gap: 8px; margin-bottom: var(--spacing-5);
    overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.svc-tabs::-webkit-scrollbar { height: 5px; }
.svc-tabs::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }
.svc-tab {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 15px; border-radius: 999px;
    font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
    background: var(--bg-secondary); color: var(--text-secondary);
    border: 1px solid var(--border-color); text-decoration: none;
    transition: all .15s;
}
.svc-tab:hover { color: var(--text-primary); border-color: var(--svc-accent); }
.svc-tab.is-active { background: var(--svc-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px var(--svc-accent); }

/* ---- ANA YERLEŞİM (2 kolon → tek kolon) ---- */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--spacing-5); align-items: start; }
.svc-main { min-width: 0; display: grid; gap: var(--spacing-3); }
.svc-aside { display: grid; gap: var(--spacing-4); position: sticky; top: 84px; }

/* ---- KESİNTİ / ECZANE KARTI ---- */
.svc-card {
    --st: var(--text-muted);
    position: relative; display: flex; gap: 0; overflow: hidden;
    background: var(--bg-surface, var(--bg-secondary));
    border: 1px solid var(--border-color); border-radius: 16px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.svc-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .45); border-color: color-mix(in srgb, var(--st) 45%, var(--border-color)); }
.svc-card-bar { width: 5px; flex-shrink: 0; background: var(--st); }
.svc-card-body { flex: 1; min-width: 0; padding: var(--spacing-4) var(--spacing-5); }
.svc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-3); flex-wrap: wrap; }
.svc-card-title { font-weight: 800; font-size: var(--text-base); color: var(--text-primary); display: flex; gap: 7px; align-items: flex-start; line-height: 1.3; min-width: 0; }
.svc-card-title .material-symbols-rounded { font-size: 19px; color: var(--svc-accent); flex-shrink: 0; margin-top: 1px; }
.svc-card-reason { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 6px; line-height: 1.55; }

/* Durum rozeti */
.svc-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--st); color: #fff; font-size: var(--text-xs); font-weight: 700;
    padding: 4px 11px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.svc-badge.is-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: svc-pulse 1.8s infinite; }
.svc-badge--soft { background: var(--bg-surface-hover); color: var(--text-secondary); }

/* Meta satırı (saat, kurum) */
.svc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--spacing-3); font-size: var(--text-sm); }
.svc-meta-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); }
.svc-meta-item.muted { color: var(--text-muted); }
.svc-meta-item .material-symbols-rounded { font-size: 18px; color: var(--text-muted); }
.svc-tag { background: var(--bg-surface-hover); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: 6px; }

/* Eczane aksiyon butonları */
.svc-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--spacing-3); }

/* ---- BOŞ DURUM ---- */
.svc-empty {
    text-align: center; padding: clamp(32px, 7vw, 56px) var(--spacing-5);
    background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: 18px;
}
.svc-empty-ic { font-size: 54px; display: block; margin-bottom: var(--spacing-3); }
.svc-empty h3 { font-size: var(--text-xl); font-weight: 800; margin: 0 0 var(--spacing-2); }
.svc-empty p { color: var(--text-secondary); font-size: var(--text-sm); max-width: 460px; margin: 0 auto var(--spacing-4); line-height: 1.6; }

/* ---- YAN PANEL ---- */
.svc-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: var(--spacing-5); }
.svc-panel-title { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 800; margin: 0 0 var(--spacing-3); }
.svc-panel-title .material-symbols-rounded { font-size: 20px; }
.svc-provider-name { font-weight: 900; font-size: var(--text-lg); color: var(--text-primary); }
.svc-provider-full { color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--spacing-3); }
.svc-stack { display: grid; gap: 8px; }

/* Aksiyon butonları (panel) */
.svc-link {
    display: flex; align-items: center; gap: 9px; justify-content: flex-start;
    padding: 10px 13px; border-radius: 11px; font-size: var(--text-sm); font-weight: 600;
    text-decoration: none; border: 1px solid var(--border-color);
    background: var(--bg-surface, transparent); color: var(--text-primary);
    transition: all .15s;
}
.svc-link:hover { border-color: var(--svc-accent); background: var(--bg-surface-hover); transform: translateX(2px); }
.svc-link .material-symbols-rounded { font-size: 18px; }
.svc-link.is-active { background: var(--svc-grad); color: #fff; border-color: transparent; }
.svc-link.is-active .material-symbols-rounded { color: #fff; }
.svc-link--accent { background: var(--svc-grad); color: #fff; border-color: transparent; }
.svc-link--accent .material-symbols-rounded { color: #fff; }

/* ---- SEO / açıklama bloğu ---- */
.svc-prose { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: var(--spacing-5); margin-top: var(--spacing-2); }
.svc-prose h2 { font-size: var(--text-lg); font-weight: 800; margin: 0 0 var(--spacing-3); }
.svc-prose p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.8; margin: 0; }

/* ---- Demo/uyarı şeridi ---- */
.svc-note {
    display: flex; gap: 9px; align-items: center;
    background: var(--color-warning-light); border: 1px solid var(--color-warning);
    border-radius: 12px; padding: 11px 14px; font-size: var(--text-sm);
    color: var(--text-primary); margin-bottom: var(--spacing-1);
}
.svc-note .material-symbols-rounded { color: var(--color-warning); flex-shrink: 0; }

/* ---- LANDING (il seçimi) ---- */
.svc-landing { text-align: center; padding: clamp(28px, 6vw, 48px) 0 var(--spacing-6); }
.svc-landing-ic { font-size: 60px; display: inline-block; margin-bottom: var(--spacing-3); background: var(--svc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.svc-landing h1 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; margin: 0 0 var(--spacing-3); }
.svc-landing p { color: var(--text-secondary); font-size: var(--text-lg); max-width: 600px; margin: 0 auto var(--spacing-7); line-height: 1.5; }
.svc-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 860px; margin: 0 auto; }
.svc-city {
    display: flex; align-items: center; gap: 9px; padding: 13px 15px;
    border-radius: 13px; border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: var(--text-sm);
    transition: all .15s;
}
.svc-city:hover { border-color: var(--svc-accent); transform: translateY(-2px); box-shadow: 0 12px 26px -18px var(--svc-accent); }
.svc-city .material-symbols-rounded { font-size: 19px; color: var(--svc-accent); }

/* ---- BELEDİYE: istatistik kartları ---- */
.svc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-3); margin-bottom: var(--spacing-5); }
.svc-stat { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 15px; padding: var(--spacing-5) var(--spacing-4); text-align: center; transition: transform .15s, box-shadow .15s; }
.svc-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .4); }
.svc-stat-ic { font-size: 30px; display: block; margin-bottom: 8px; }
.svc-stat-val { font-size: var(--text-xl); font-weight: 900; color: var(--text-primary); line-height: 1.1; word-break: break-word; }
.svc-stat-lbl { font-size: var(--text-xs); color: var(--text-muted); margin-top: 5px; }

/* ---- BELEDİYE: iki kolon bilgi ---- */
.svc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); margin-bottom: var(--spacing-5); }
.svc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-chip { background: var(--bg-surface-hover); padding: 7px 13px; border-radius: 999px; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.svc-contact-row { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; font-size: var(--text-sm); }
.svc-contact-row .material-symbols-rounded { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }
.svc-contact-row a { color: var(--svc-accent); text-decoration: none; word-break: break-all; }

/* ---- BELEDİYE: ilçe tablosu (mobilde karta dönüşür) ---- */
.svc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.svc-table th { text-align: left; padding: 11px 14px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); border-bottom: 2px solid var(--border-color); }
.svc-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); }
.svc-table tr:last-child td { border-bottom: 0; }
.svc-table .nm { font-weight: 700; color: var(--text-primary); }
.svc-table .party { background: var(--bg-surface-hover); padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }

/* ---- Haber satırı (belediye) ---- */
.svc-news { display: grid; gap: 4px; }
.svc-news a { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.svc-news a:hover { background: var(--bg-surface-hover); }
.svc-news .material-symbols-rounded { font-size: 20px; color: var(--svc-accent); flex-shrink: 0; }
.svc-news .t { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-news .d { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
    .svc-layout { grid-template-columns: 1fr; }
    .svc-aside { position: static; }
}
@media (max-width: 600px) {
    .svc { padding: var(--spacing-4) var(--spacing-3) var(--spacing-10); }
    .svc-hero { padding: 18px; }
    .svc-hero-icon { width: 50px; height: 50px; border-radius: 13px; }
    .svc-hero-icon .material-symbols-rounded { font-size: 28px; }
    .svc-card-body { padding: var(--spacing-3) var(--spacing-4); }
    .svc-info-grid { grid-template-columns: 1fr; }

    /* İlçe tablosu → kart görünümü */
    .svc-table thead { display: none; }
    .svc-table, .svc-table tbody, .svc-table tr, .svc-table td { display: block; width: 100%; }
    .svc-table tr { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 10px; padding: 6px 4px; }
    .svc-table td { border: 0; padding: 7px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
    .svc-table td::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); text-align: left; }
    .svc-table .nm { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-live i, .svc-badge.is-live i { animation: none; }
    .svc-card, .svc-city, .svc-stat, .svc-link { transition: none; }
}