/* ==========================================================================
   TENSE KURUMSAL TEMA — TEK KAYNAK
   --------------------------------------------------------------------------
   Renkler tense.com.tr'den olculdu (getComputedStyle ile):
     #00ABC7  birincil turkuaz  - site butonlari, linkler, .nav-link-button
     #0D0034  koyu murekkep     - urun menusu basliklari, baslik metni
     #EC6726  turuncu aksan     - logodaki gosterge ignesi, vurgular
     #898B96  govde metni grisi
   Fontlar: Poppins (baslik) + Source Sans Pro (govde) — sitenin kullandiklari.

   ACIK TEMA. SahaDestekSistemi'nin koyu "siber" temasinin karsiligi:
     #0B0F19 zemin  -> --t-page (#F4F7FA)
     #00FFFF aksan  -> --t-primary (#00ABC7)
     Orbitron       -> Poppins
     Exo 2          -> Source Sans Pro

   Yeni bir ekran yazarken renk kodunu ELLE YAZMA, buradaki degiskeni kullan.
   ========================================================================== */

:root {
    /* --- Marka --- */
    --t-primary: #00ABC7;
    --t-primary-dark: #0089A0;
    --t-primary-darker: #006E80;
    --t-primary-soft: #E7F7FA; /* acik dolgu: secili satir, bilgi kutusu */
    --t-primary-border: #B0E3EC;
    --t-ink: #0D0034; /* baslik metni */
    --t-ink-soft: #3B3663;
    --t-accent: #EC6726; /* turuncu: uyari/vurgu, logo ignesi */
    --t-accent-soft: #FDF1EA;

    /* --- Yuzeyler --- */
    --t-page: #F4F7FA; /* sayfa zemini */
    --t-surface: #FFFFFF; /* kart / tablo / form zemini */
    --t-surface-alt: #FAFBFD; /* zebra satir, tablo basligi */
    --t-border: #E3E8EF;
    --t-border-strong: #CBD5E1;

    /* --- Metin --- */
    --t-text: #3F4451;
    --t-muted: #898B96;
    --t-faint: #AEB2BC;

    /* --- Durum --- */
    --t-success: #12A150;
    --t-success-soft: #E8F7EE;
    --t-warning: #D97706;
    --t-warning-soft: #FEF5E7;
    --t-danger: #DC2626;
    --t-danger-soft: #FDECEC;
    --t-info: #0284C7;
    --t-info-soft: #E8F4FD;

    /* --- Abonelik durumu (bu projeye ozel) --- */
    --t-abone-aktif: #12A150;
    --t-abone-yakin: #D97706; /* bitise 30 gun ve alti */
    --t-abone-eksure: #EC6726; /* bitti ama ek sure devam ediyor */
    --t-abone-doldu: #94A3B8; /* pasif: veri gosterilmez */

    /* --- Golge --- */
    --t-shadow-sm: 0 1px 2px rgba(13, 0, 52, .05);
    --t-shadow: 0 1px 3px rgba(13, 0, 52, .07), 0 1px 2px rgba(13, 0, 52, .04);
    --t-shadow-md: 0 4px 12px rgba(13, 0, 52, .08);
    --t-shadow-lg: 0 12px 32px rgba(13, 0, 52, .10);
    --t-shadow-primary: 0 6px 18px rgba(0, 171, 199, .22);

    /* --- Olcu --- */
    --t-radius-sm: 6px;
    --t-radius: 10px;
    --t-radius-lg: 16px;
    --t-sidebar-w: 300px;

    /* --- Font --- */
    --t-font-head: 'Poppins', 'Segoe UI', sans-serif;
    --t-font-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   TABAN
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--t-page);
    color: var(--t-text);
    font-family: var(--t-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .t-head {
    font-family: var(--t-font-head);
    color: var(--t-ink);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .4em;
}

a { color: var(--t-primary-dark); text-decoration: none; }
a:hover { color: var(--t-primary-darker); text-decoration: underline; }

/* ==========================================================================
   SAYFA BASLIGI
   ========================================================================== */

.t-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--t-border);
}

.t-page-head h1 {
    font-size: 1.6rem;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.t-page-head h1 i { color: var(--t-primary); font-size: 1.35rem; }
.t-page-head p { margin: 0; color: var(--t-muted); font-size: .95rem; }

/* ==========================================================================
   KART / FORM
   ========================================================================== */

.t-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm);
    padding: 26px 28px;
}

.t-card-title {
    font-family: var(--t-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--t-ink);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.t-card-title i { color: var(--t-primary); }

.t-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 22px;
}

.t-field { display: flex; flex-direction: column; min-width: 0; }

.t-field label {
    margin-bottom: 7px;
    font-family: var(--t-font-head);
    font-size: .74rem;
    font-weight: 600;
    color: var(--t-ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Bootstrap ve tarayici varsayilanlarini yenmek icin !important — SahaDestek'te
   de ayni yaklasim var (.deos-input). Girdi kutusu her ekranda ayni gorunsun. */
.t-input {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-family: var(--t-font-body) !important;
    font-size: .98rem !important;
    color: var(--t-text) !important;
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border-strong) !important;
    border-radius: var(--t-radius) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s, box-shadow .18s !important;
    margin: 0 !important;
}

.t-input:hover { border-color: #AFB8C6 !important; }

.t-input:focus {
    border-color: var(--t-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 171, 199, .16) !important;
}

.t-input::placeholder { color: var(--t-faint) !important; }
.t-input:disabled { background: var(--t-surface-alt) !important; color: var(--t-muted) !important; cursor: not-allowed; }
textarea.t-input { min-height: 80px !important; resize: vertical; }

.t-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--t-border);
}

/* ==========================================================================
   BUTONLAR
   ========================================================================== */

.t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-family: var(--t-font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
    text-decoration: none;
}

.t-btn:hover { text-decoration: none; transform: translateY(-1px); }
.t-btn:active { transform: translateY(0); }
.t-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.t-btn-primary { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
.t-btn-primary:hover { background: var(--t-primary-dark); border-color: var(--t-primary-dark); color: #fff; box-shadow: var(--t-shadow-primary); }

.t-btn-outline { background: var(--t-surface); border-color: var(--t-primary); color: var(--t-primary-dark); }
.t-btn-outline:hover { background: var(--t-primary-soft); color: var(--t-primary-darker); }

.t-btn-ghost { background: transparent; border-color: var(--t-border-strong); color: var(--t-muted); }
.t-btn-ghost:hover { background: var(--t-surface-alt); color: var(--t-text); border-color: var(--t-border-strong); }

.t-btn-success { background: var(--t-success); border-color: var(--t-success); color: #fff; }
.t-btn-success:hover { background: #0E8A44; border-color: #0E8A44; color: #fff; box-shadow: 0 6px 18px rgba(18, 161, 80, .22); }

.t-btn-accent { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.t-btn-accent:hover { background: #D65A1C; border-color: #D65A1C; color: #fff; box-shadow: 0 6px 18px rgba(236, 103, 38, .24); }

.t-btn-danger { background: var(--t-surface); border-color: #F0BDBD; color: var(--t-danger); }
.t-btn-danger:hover { background: var(--t-danger); border-color: var(--t-danger); color: #fff; }

.t-btn-sm { padding: 7px 14px; font-size: .85rem; }

/* Satir ici ikon butonu (tablo "islemler" kolonu) */
.t-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    width: 32px;
    height: 32px;
    border-radius: var(--t-radius-sm);
    color: var(--t-muted);
    cursor: pointer;
    font-size: .95rem;
    transition: all .18s;
}

.t-icon-btn:hover { background: var(--t-primary-soft); border-color: var(--t-primary-border); color: var(--t-primary-dark); }
.t-icon-btn.danger:hover { background: var(--t-danger-soft); border-color: #F0BDBD; color: var(--t-danger); }

/* ==========================================================================
   TABLO
   ========================================================================== */

.t-table-wrap {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm);
    overflow: hidden;
}

.t-table-scroll { overflow-x: auto; }

.t-table { width: 100%; border-collapse: collapse; font-size: .95rem; }

.t-table th {
    background: var(--t-surface-alt);
    padding: 13px 18px;
    text-align: left;
    font-family: var(--t-font-head);
    font-size: .74rem;
    font-weight: 600;
    color: var(--t-ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--t-border);
    white-space: nowrap;
}

.t-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text);
    vertical-align: middle;
}

.t-table tbody tr:last-child td { border-bottom: none; }
.t-table tbody tr:hover td { background: var(--t-primary-soft); }
.t-table .t-cell-strong { font-weight: 600; color: var(--t-ink); }
.t-table .t-cell-actions { text-align: right; white-space: nowrap; }

/* Aboneligi dolmus cihaz satiri: gorunur ama pasif */
.t-table tbody tr.t-row-pasif td { color: var(--t-faint); background: var(--t-surface-alt); }
.t-table tbody tr.t-row-pasif:hover td { background: var(--t-surface-alt); }
.t-table tbody tr.t-row-pasif .t-cell-strong { color: var(--t-muted); }

.t-empty { text-align: center; padding: 56px 20px; color: var(--t-faint); }
.t-empty i { display: block; font-size: 2rem; margin-bottom: 14px; opacity: .55; }
.t-loading { text-align: center; padding: 40px 20px; color: var(--t-primary-dark); }

/* ==========================================================================
   ETIKET (BADGE)
   ========================================================================== */

.t-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.t-badge-success { background: var(--t-success-soft); color: var(--t-success); }
.t-badge-warning { background: var(--t-warning-soft); color: var(--t-warning); }
.t-badge-danger { background: var(--t-danger-soft); color: var(--t-danger); }
.t-badge-info { background: var(--t-info-soft); color: var(--t-info); }
.t-badge-accent { background: var(--t-accent-soft); color: var(--t-accent); }
.t-badge-muted { background: #EEF1F5; color: var(--t-muted); }
.t-badge-primary { background: var(--t-primary-soft); color: var(--t-primary-darker); }

/* ==========================================================================
   BILDIRIM KUTUSU
   ========================================================================== */

.t-alert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 18px;
    margin-bottom: 22px;
    border: 1px solid;
    border-radius: var(--t-radius);
    font-size: .95rem;
    font-weight: 500;
}

.t-alert i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.t-alert-success { background: var(--t-success-soft); border-color: #B7E4C7; color: #0B7A3B; }
.t-alert-error { background: var(--t-danger-soft); border-color: #F5C2C2; color: #A81C1C; }
.t-alert-warning { background: var(--t-warning-soft); border-color: #F5D9A8; color: #9A5300; }
.t-alert-info { background: var(--t-primary-soft); border-color: var(--t-primary-border); color: var(--t-primary-darker); }

/* ==========================================================================
   YARDIMCILAR
   ========================================================================== */

.t-mt-0 { margin-top: 0; }
.t-mb-0 { margin-bottom: 0; }
.t-mb-3 { margin-bottom: 18px; }
.t-mb-4 { margin-bottom: 26px; }
.t-span-2 { grid-column: span 2; }
.t-span-full { grid-column: 1 / -1; }
.t-text-center { text-align: center; }
.t-text-right { text-align: right; }
.t-muted { color: var(--t-muted); }
.t-nowrap { white-space: nowrap; }
.t-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
    .t-form-grid { grid-template-columns: 1fr; }
    .t-span-2 { grid-column: span 1; }
    .t-page-head { flex-direction: column; }
    .t-form-actions { flex-direction: column-reverse; }
    .t-form-actions .t-btn { width: 100%; }
}

/* ==========================================================================
   OLCUM DEGERLERI — Yardimci/OlcumBicim.cs uretiyor.
   Sinif adlari orada gomulu oldugu icin BURADA tanimli olmali;
   sayfa ici <style> blogunda degil.
   ========================================================================== */

.olc-asim { color: var(--t-danger); font-weight: 600; }
.olc-gecersiz { color: var(--t-faint); font-style: italic; font-size: .8rem; cursor: help; }
.olc-bos { color: var(--t-faint); }

/* ==========================================================================
   HARITA — Leaflet isaretcileri ve balon icerigi.
   Sinif adlari wwwroot/js/harita.js icinde gomulu oldugu icin BURADA
   tanimli olmali; sayfa ici <style> blogunda degil.
   ========================================================================== */

.hr-pin {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(13, 0, 52, .35);
}

.hr-pin-secim {
    width: 18px;
    height: 18px;
    background: var(--t-accent);
    box-shadow: 0 0 0 4px rgba(236, 103, 38, .28), 0 1px 4px rgba(13, 0, 52, .35);
}

.hr-balon { display: flex; flex-direction: column; gap: 2px; font-family: var(--t-font-body); }
.hr-balon strong { font-family: var(--t-font-head); font-size: .95rem; color: var(--t-ink); }
.hr-balon-tip { font-size: .76rem; color: var(--t-primary-dark); font-weight: 600; }
.hr-balon-alt { font-size: .76rem; color: var(--t-muted); }
.hr-balon-link { margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--t-primary-dark); }

/* Leaflet varsayilan yazi tipini temaya cekiyoruz. */
.leaflet-container { font-family: var(--t-font-body); }

/* ==========================================================================
   YONETIM EKRANLARI — ortak duzen.
   Sekiz yonetim ekrani ayni iskeleti kullaniyor (liste + yan panel form).
   Stil her sayfada tekrarlanmasin diye burada tek yerde duruyor.
   ========================================================================== */

.yn-duzen { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 18px; align-items: start; }
.yn-duzen.yn-genis { grid-template-columns: 1fr; }

.yn-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 18px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    margin-bottom: 18px;
}

.yn-arac .t-field { min-width: 190px; margin: 0; }
.yn-arac-sag { margin-left: auto; display: flex; gap: 8px; }

/* --- Liste --- */
.yn-liste-kart { padding: 0; overflow: hidden; }
.yn-liste-kart > .t-card-title { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--t-border); }
.yn-kart-alt { margin-left: auto; font-size: .78rem; font-weight: 400; color: var(--t-faint); }

.yn-alt-bilgi { padding: 14px 18px; border-top: 1px solid var(--t-border); font-size: .8rem; color: var(--t-faint); }
.yn-alt-bilgi code { background: var(--t-surface-alt); padding: 1px 5px; border-radius: 4px; }

.yn-sag { text-align: right; }
.yn-sayi { font-variant-numeric: tabular-nums; }
.yn-alt { display: block; font-size: .78rem; color: var(--t-faint); margin-top: 2px; }
.yn-mini { margin-left: 6px; font-size: .64rem; padding: 1px 6px; }

/* --- Yan panel form --- */
.yn-form-kart { position: sticky; top: 18px; padding: 0; overflow: hidden; }
.yn-form-kart > .t-card-title { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--t-border); }
.yn-form-govde { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.yn-form-govde .t-field { margin: 0; }
.yn-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.yn-onay { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .9rem; color: var(--t-text); }
.yn-onay input { width: 17px; height: 17px; accent-color: var(--t-primary); cursor: pointer; flex-shrink: 0; }
.yn-onay-grup { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--t-surface-alt); border-radius: var(--t-radius-sm); }

.yn-eylem { display: flex; gap: 10px; padding: 0 20px 18px; }
.yn-eylem .t-btn { flex: 1; }

.yn-bos-form { padding: 40px 24px; text-align: center; color: var(--t-faint); }
.yn-bos-form i { display: block; font-size: 1.8rem; margin-bottom: 12px; opacity: .5; }

.yn-not { padding: 14px 20px; border-top: 1px solid var(--t-border); background: var(--t-surface-alt); font-size: .78rem; color: var(--t-muted); }
.yn-not code { background: var(--t-surface); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 1100px) {
    .yn-duzen { grid-template-columns: 1fr; }
    .yn-form-kart { position: static; }
}

/* ---------------------------------------------------------------------------
   SEKMELER  (.t-sekme*)

   Dort ekran ayni sekme seridini kullaniyor: SayacDetay, RoleDetay,
   AnalizorDetay ve CihazTanimlari. Onceden her biri kendi <style> blogunda
   ayni kurallari .rd-/.ad-/.ct- onekleriyle tekrarliyordu; tek kaynaga
   tasindi. Yeni sekmeli ekran bu siniflari kullanmali, kopya cikarmamali.
--------------------------------------------------------------------------- */
.t-sekmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--t-border);
}

.t-sekme {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--t-font-head);
    font-size: .92rem;
    font-weight: 500;
    color: var(--t-muted);
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.t-sekme:hover { color: var(--t-ink); }
.t-sekme.etkin { color: var(--t-primary-darker); border-bottom-color: var(--t-primary); }
.t-sekme i { font-size: .88rem; }

.t-rozet {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--t-surface-alt);
    font-size: .72rem;
    font-weight: 600;
    color: var(--t-muted);
}

.t-sekme.etkin .t-rozet { background: var(--t-primary-soft); color: var(--t-primary-darker); }

/* Disa aktarma dugmeleri serit sonuna yaslanir. */
.t-sekme-aktar { margin-left: auto; align-self: center; padding-bottom: 6px; }