:root{
  --bg:#0b1220;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --ok:#27d17c;
  --warn:#ffb020;
  --danger:#ff4d4f;
  --expired:#ff3b66;
  --accent:#7aa7ff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(122,167,255,.22), transparent 55%),
              radial-gradient(1000px 500px at 85% 0%, rgba(39,209,124,.16), transparent 60%),
              var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
hr.sep{ border:0; border-top:1px solid var(--border); margin:16px 0; }

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(to bottom, rgba(11,18,32,.92), rgba(11,18,32,.78));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brandIcon{
  width:34px; height:34px; border-radius:10px;
  object-fit:cover;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.titles .title{ font-weight:800; letter-spacing:.3px; }
.titles .subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }

.actionsTop{ display:flex; gap:8px; flex-wrap:wrap; }

.wrap{ padding:18px; max-width:none; margin:0; }

.grid{
  display:grid; gap:14px;
  grid-template-columns: 360px 1fr;
  align-items:start;
  width:100%;
}

.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card > h2, .cardhead{ padding:14px 14px 0 14px; }
.card h2{ margin:0; font-size:16px; }

.cardhead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding-bottom:8px;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  white-space:nowrap;
}
.chip.danger{ border-color: rgba(255,77,79,.35); background: rgba(255,77,79,.12); }
.chip.warn{ border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.12); }
.chip.expired{ border-color: rgba(255,59,102,.35); background: rgba(255,59,102,.12); }

.form{ padding:14px; display:flex; flex-direction:column; gap:12px; }
label span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }

input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  outline:none;
}
select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.65) 50%),
    linear-gradient(135deg, rgba(234,240,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(122,167,255,.55);
  box-shadow: 0 0 0 3px rgba(122,167,255,.12);
}
textarea{ resize:vertical; min-height:88px; }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
  color:var(--text);
  font-weight:650;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.14); }
.btn:active{ transform: translateY(1px); }

.btn.primary{ background: rgba(122,167,255,.22); border-color: rgba(122,167,255,.35); }
.btn.ghost{ background: transparent; }
.btn.danger{ background: rgba(255,77,79,.14); border-color: rgba(255,77,79,.35); }

.btn.mini{
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.hint{ margin:0; font-size:12px; color:var(--muted); }

.legend{
  padding:0 14px 14px 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
  color:var(--muted);
  font-size:12px;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block; margin-right:8px;
  vertical-align:middle;
}
.dot.ok{ background: var(--ok); }
.dot.warn{ background: var(--warn); }
.dot.danger{ background: var(--danger); }
.dot.expired{ background: var(--expired); }

.tablewrap{ padding: 8px 14px 14px 14px; overflow:auto; }

/* ✅ başlıklar alt alta düşmesin */
th, .thlink{ white-space:nowrap; }

/* Kolon sayısı arttı */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; min-width:1020px; }

th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  padding:0 10px;
}
.thlink{ color:var(--muted); }
.thlink:hover{ color:var(--text); }

/* ✅ Hizmet Türü ve Firma kolonlarına min genişlik */
th.thType, td.thType{ min-width:110px; }
th.thProvider, td.thProvider{ min-width:150px; }

td{
  padding:12px 10px;
  background: rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
tr td:first-child{
  border-left:1px solid rgba(255,255,255,.10);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}
tr td:last-child{
  border-right:1px solid rgba(255,255,255,.10);
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}
td.min{ white-space:nowrap; width:1%; }

td.name .main{ font-weight:750; }
td.name .note{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.mobilemeta{ display:none; margin-top:10px; color:var(--muted); font-size:12px; gap:10px; }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.badge.ok{ background: rgba(39,209,124,.12); border-color: rgba(39,209,124,.30); }
.badge.warn{ background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.30); }
.badge.danger{ background: rgba(255,77,79,.14); border-color: rgba(255,77,79,.30); }
.badge.expired{ background: rgba(255,59,102,.14); border-color: rgba(255,59,102,.30); }

.rowActions{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap:8px;
  justify-content:end;
  align-items:center;
}
@media (max-width: 980px){
  .rowActions{ grid-auto-flow: row; justify-content:start; }
}

.empty{
  text-align:center;
  color: var(--muted);
  padding:18px 10px !important;
  background: transparent !important;
  border: none !important;
}

.footerhint{
  margin:0;
  padding:0 14px 14px 14px;
  color: var(--muted);
  font-size:12px;
}

/* Responsive */
@media (max-width: 1040px){
  .grid{ grid-template-columns: 1fr; }
  .table{ min-width: 0; }
}

@media (max-width: 720px){
  .actionsTop{ gap:6px; }
  .btn{ padding:8px 10px; border-radius:12px; }
  .row2{ grid-template-columns:1fr; }

  .tablewrap{ padding: 8px 10px 12px 10px; }
  .table thead{ display:none; }
  .table{ border-spacing:0 12px; }
  .table tr{ display:block; }
  .table td{
    display:block;
    width:100%;
    border-left:1px solid rgba(255,255,255,.10) !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 !important;
  }
  .table tr td:first-child{
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
  }
  .table tr td:last-child{
    border-bottom-left-radius:14px !important;
    border-bottom-right-radius:14px !important;
  }

  td.min{ white-space:normal; }
  td.name .mobilemeta{ display:flex; flex-direction:column; }

  /* Mobilde masaüstü kolonlarını gizle */
  .table td:nth-child(2),
  .table td:nth-child(3),
  .table td:nth-child(4),
  .table td:nth-child(5){ display:none; }

  .rowActions{
    grid-auto-flow: row;
    justify-content:start;
    width:100%;
  }
}

/* --- Modal (dialog) - Uzat seçenekleri --- */
.modalDialog{
  border: none;
  padding: 0;
  background: transparent;
}
.modalDialog::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.modalCard{
  width: min(520px, calc(100vw - 24px));
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.modalTitle{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 8px;
  color: white;
}
.modalText{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.modalText.subtle{ margin-top: 8px; }
.modalLabel span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.modalActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 12px;
}

/* Kapalı select */
.service-text-color {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Dropdown dark tema */
.service-text-color option {
    background-color: #1f2937 !important; /* dark gray */
    color: #ffffff !important;
}

.service-text-color option:hover,
.service-text-color option:checked {
    background-color: #374151 !important;
    color: #ffffff !important;
}




/* ============================= */
/* DOMAIN PANEL TARZI - DAHA BELIRGIN RENKLER (OVERRIDE) */
/* ============================= */
.chip{
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  border: none !important;
  background: #6b7280 !important; /* Toplam */
}
.chip.expired{ background:#dc2626 !important; color:#fff !important; }
.chip.warn{ background:#facc15 !important; color:#111827 !important; }
.chip.info{ background:#38bdf8 !important; color:#022c22 !important; }
.chip.danger{ background:#dc2626 !important; color:#fff !important; } /* eğer kullanılırsa kırmızı */

.badge{
  font-weight:800 !important;
  border:none !important;
  color:#fff !important;
}
.badge.expired{ background:#b91c1c !important; }
.badge.danger{ background:#dc2626 !important; }
.badge.warn{ background:#f59e0b !important; color:#111827 !important; }
.badge.ok{ background:#15803d !important; }

.login-footer-text {
  color: white;
}

.login-footer {
  text-align: center;
}

@media (max-width: 720px){
  .rowActions{
    grid-auto-flow: column;   /* 🔥 yan yana */
    justify-content: flex-start;
    gap: 8px;
    width: auto;
  }
}

/* ---------- Mobile Hamburger Topbar ---------- */
.menuBtn{
  display:none; /* desktopta gizli */
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.menuBtn:hover{ background: rgba(255,255,255,.12); }
.menuBtn:active{ transform: translateY(1px); }

/* hamburger çizgileri */
.menuIcon{
  width:18px; height:2px;
  background: currentColor;
  position: relative;
  border-radius:2px;
  display:block;
}
.menuIcon::before,
.menuIcon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background: currentColor;
  border-radius:2px;
}
.menuIcon::before{ top:-6px; }
.menuIcon::after{ top:6px; }

/* Mobil dropdown panel */
.mobileMenu{
  position:absolute;
  right:14px;
  top:62px; /* topbar yüksekliğine göre */
  width: min(260px, calc(100vw - 28px));
  padding:10px;
  border-radius:16px;
  background: rgba(11,18,32,.95);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Mobilde hamburger göster, desktop aksiyonları gizle */
@media (max-width: 720px){
  .menuBtn{ display:inline-flex; }
  #desktopActions{ display:none; }
}

/* Topbar içinde absolute menü düzgün dursun */
.topbar{ position: sticky; }
.topbar{ position: sticky; }
.topbar{ position: sticky; }
.topbar{ position: sticky; }

/* ✅ Asıl önemli satır: mobileMenu default KAPALI */
.mobileMenu{ display:none; }

/* Açılınca görünsün */
.mobileMenu.isOpen{ display:flex; }

/* Desktop'ta hamburger ve mobile menu tamamen kapalı kalsın */
.menuBtn{ display:none !important; }
.mobileMenu{ display:none !important; }

@media (max-width: 720px){
  .menuBtn{ display:inline-flex !important; }
  #desktopActions{ display:none !important; }

  /* Mobilde mobileMenu'ya izin ver */
  .mobileMenu{ display:none !important; }        /* default kapalı */
  .mobileMenu.isOpen{ display:flex !important; } /* açıkken görün */
}

.topbar{
  position:sticky; top:0; z-index:10;
}
.topbar{ position:relative; } /* ✅ absolute menü topbar'a göre */


/* =========================
   Mobilde glow/gölgeyi kapat
   ========================= */
@media (max-width: 1040px){

  /* 1) Body'deki radial glow'ları kapat */
  body{
    background: var(--bg) !important;
  }

  /* 2) Kartların ağır gölgesini kaldır / yumuşat */
  .card{
    box-shadow: none !important;
  }

  /* İstersen çok hafif bir gölge bırakmak için şunu kullan:
  .card{ box-shadow: 0 10px 22px rgba(0,0,0,.35) !important; }
  */

  /* 3) Mobil menü açılınca ekstra glow gibi durmasın */
  .mobileMenu{
    box-shadow: none !important;
  }
}


.note{
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.note:hover{ text-decoration: underline; }

.note.isOpen{
  text-decoration: none;
}