/* Krowten Control v3 — sade, tutarlı ölçek
   Tip ölçeği: 12 / 13 / 14 / 16 / 20 / 24 px. Boşluk: 8px ızgara.
   Tek vurgu rengi (#22bafb). Tür renkleri yalnızca hizmet ikonlarında. */
:root{
  --tone:#22bafb;
  --bg:#050f18;--surface:#0a1826;--surface-2:#0d1e2e;--surface-3:#12283b;
  --line:#173247;--line-2:#1f3f57;
  --text:#e6f0f7;--text-2:#a9bccb;--text-3:#7a93a6;
  --accent:#22bafb;--accent-2:#0e5f85;--ok:#34d399;--warn:#f5a524;--bad:#f06a5b;
  --r:10px;--r-lg:14px;
  --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:24px;
}
html{font-size:14px}
body{background:var(--bg);color:var(--text);font-size:var(--fs-md);line-height:1.5}
h1,h2,h3{color:var(--text);letter-spacing:-.2px}
h1{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.6px;line-height:1.25}
h2{font-size:var(--fs-lg);font-weight:600}
h3{font-size:var(--fs-md);font-weight:600}
p{color:var(--text-2)}
small,.muted{font-size:var(--fs-sm);color:var(--text-3)}
button:hover{filter:none}

/* ---------- Sidebar (kaydırma yok) ---------- */
.sidebar{width:232px;background:var(--surface);border-right:1px solid var(--line);padding:20px 12px 16px;overflow:hidden;display:flex;flex-direction:column}
.logo img{width:132px;margin:2px 8px 22px;filter:none}
.control-word,.workspace,.back-site,.ai-small{display:none}
.nav-label{font-size:var(--fs-xs);letter-spacing:0;text-transform:none;color:var(--text-3);margin:8px 12px 6px;font-weight:500}
.sidebar nav{display:grid;gap:2px}
.sidebar nav button{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--text-2);font-size:var(--fs-md);font-weight:500;box-shadow:none}
.sidebar nav button>span{display:grid;place-items:center;width:20px;height:20px;background:none;color:var(--text-3);border-radius:0;box-shadow:none}
.sidebar nav button:hover{background:var(--surface-2);color:var(--text)}
.sidebar nav button.active{background:var(--surface-3);color:var(--text);border:0}
.sidebar nav button.active>span{color:var(--accent);background:none;box-shadow:none}
.sidebar nav button b{margin-left:auto;font-size:var(--fs-xs);font-weight:500;color:var(--text-3);background:var(--surface-2);padding:1px 7px;border-radius:999px}
.sidebar nav .nav-label{margin-top:16px}
.sidebar-bottom{margin-top:auto;padding:0}
.status-link{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:8px;font-size:var(--fs-sm);color:var(--text-2);font-weight:500}
.status-link:hover{background:var(--surface-2)}
.status-link i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #34d39926}
.status-link span{margin-left:auto;font-size:var(--fs-xs);color:var(--ok)}
.profile{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:10px;padding:14px 4px 0}
.profile .workspace-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text);font-size:var(--fs-xs);font-weight:600}
.profile strong{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.profile small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.profile-exit{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--text-3);border:1px solid transparent}
.profile-exit:hover{color:var(--text);border-color:var(--line-2)}
.app-shell{margin-left:232px}

/* ---------- Üst bar ---------- */
.topbar{height:60px;background:var(--bg);border-bottom:1px solid var(--line);padding:0 24px;gap:16px;position:sticky;top:0;z-index:30;backdrop-filter:none}
.breadcrumb{font-size:var(--fs-md);color:var(--text)}
.breadcrumb strong{font-weight:600;color:var(--text)}
.command-bar{flex:1;max-width:460px;margin-inline:auto;display:flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text-3);font-size:var(--fs-sm);text-align:left}
.command-bar:hover{border-color:var(--line-2);color:var(--text-2)}
.command-bar .modern-icon{width:16px;height:16px}
.command-bar span{flex:1}
.command-bar kbd{font:inherit;font-size:11px;color:var(--text-3);border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:var(--bg)}
.top-actions{gap:10px;position:relative}
.system-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.system-pill:hover{border-color:var(--line-2);color:var(--text)}
.system-pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #34d39926}
.icon-button.notification{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;background:var(--surface);color:var(--text-2)}
.icon-button.notification .modern-icon{width:17px;height:17px}
.icon-button.notification[aria-expanded="true"]{border-color:var(--line-2);color:var(--text);background:var(--surface-2)}
.notification i{top:8px;right:9px;width:6px;height:6px;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.top-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text);font-size:var(--fs-xs);font-weight:600}
.demo-pill{display:none}
/* Bildirim açılır paneli */
.notif-pop{position:absolute;top:calc(100% + 8px);right:44px;width:340px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 20px 50px -20px #000c;z-index:40;overflow:hidden}
.notif-pop[hidden]{display:none}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);font-weight:600}
.notif-head button{background:none;padding:0;font-size:var(--fs-xs);font-weight:500;color:var(--accent)}
.notif-pop .activity-list li{padding:12px 16px}
.notif-pop .activity-list li:last-child{border-bottom:0}
.notif-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-3);text-align:center}

/* ---------- İçerik ---------- */
main{padding:28px 24px 0;max-width:1440px;margin:0 auto}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 24px;padding:0;border:0;background:none;overflow:visible}
.page-heading .eyebrow{display:none}
.page-heading h1{font-size:var(--fs-2xl)}
.page-heading p{margin-top:4px;font-size:var(--fs-md);color:var(--text-3)}
.heading-actions{display:flex;gap:8px}
.eyebrow{font-size:var(--fs-xs);letter-spacing:0;text-transform:none;color:var(--text-3);font-weight:500;margin-bottom:8px}

/* Butonlar */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;box-shadow:none;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-3);border-color:#2a5270}
.btn .modern-icon{width:16px;height:16px;color:var(--text-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#03202f;font-weight:600;box-shadow:none}
.btn.primary:hover{background:#4ccbff;border-color:#4ccbff}
.btn.primary .modern-icon{color:#03202f}
.btn.ghost{background:none;border-color:var(--line)}
.btn.small{height:32px;padding:0 12px;font-size:var(--fs-xs)}
.manage-button{height:32px;padding:0 12px;border-radius:7px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.manage-button:hover{background:var(--surface-3);border-color:#2a5270}
.notification-link{background:none;padding:0;font-size:var(--fs-sm);color:var(--accent)}

/* Karşılama */
.welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.welcome-date{font-size:var(--fs-sm);color:var(--text-3);text-transform:capitalize;margin-bottom:6px}
.welcome h1{font-size:var(--fs-2xl)}
.welcome-copy>p:last-child{margin-top:4px;font-size:var(--fs-md);color:var(--text-3)}
.welcome-actions{display:flex;gap:8px}

/* İstatistikler */
.stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat{padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden}
.stat:before{content:none}
.stat-head{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-2)}
.stat-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);border:0}
.stat-icon .modern-icon{width:16px;height:16px}
.stat-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 6px}
.stat-value{margin:0;font-size:28px;font-weight:600;color:var(--text);letter-spacing:-.8px;line-height:1}
.stat:nth-child(n) .stat-value{color:var(--text)}
.stat-value small{font-size:var(--fs-sm);color:var(--text-3);margin-left:4px;letter-spacing:0}
.spark{width:96px;height:32px;flex-shrink:0;opacity:.9}
.stat-note{font-size:var(--fs-xs);color:var(--text-3)}
.stat-note strong{color:var(--ok)}

/* Kartlar, tablolar */
.card{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:none}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-header h2{font-size:var(--fs-lg)}
.card-header p{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.card-header>a,.card-header>button{font-size:var(--fs-sm);color:var(--accent)}
.tag{font-size:var(--fs-xs);letter-spacing:0;text-transform:none;font-weight:500;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.toolbar{padding:12px 20px;border-bottom:1px solid var(--line);gap:10px}
.search,select,input,textarea{height:36px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);color:var(--text);font-size:var(--fs-sm);padding:0 12px}
textarea{height:auto;padding:10px 12px}
.search{width:280px}
.search::placeholder,input::placeholder,textarea::placeholder{color:var(--text-3)}
th{font-size:var(--fs-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3);background:none;padding:10px 20px;border-bottom:1px solid var(--line)}
td{padding:12px 20px;font-size:var(--fs-sm);color:var(--text-2);border-color:var(--line)}
tbody tr:hover{background:var(--surface-2)}
.service-name{gap:12px}
.service-name strong{font-size:var(--fs-md);font-weight:600;color:var(--text)}
.service-name small{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.service-icon,.service-icon.purple,.service-icon.green,.service-icon.amber{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--tone) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--tone) 30%,var(--line));color:var(--tone);box-shadow:none}
.service-icon .modern-icon{width:18px;height:18px}
.service-icon.large{width:56px;height:56px;border-radius:14px;box-shadow:none}
.service-icon.large .modern-icon{width:26px;height:26px}
.status{font-size:var(--fs-xs);font-weight:500;border-radius:999px;padding:3px 9px 3px 8px;background:#0b2f2a;border:1px solid #14503f;color:#6fd3a3}
.status.stopped{background:var(--surface-2);border-color:var(--line-2);color:var(--text-2)}
.status.cf{background:#2a1a08;border-color:#6a4418;color:#f3c58b}
.usage-mini{width:72px;height:4px;border-radius:4px;background:var(--surface-3);margin-top:6px}
.usage-mini>i{background:var(--accent);border-radius:4px}
.table-footer{padding:12px 20px;font-size:var(--fs-xs);color:var(--text-3);border-top:1px solid var(--line)}
.table-footer button{font-size:var(--fs-sm);color:var(--accent)}
.dashboard-grid{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
.right-column{gap:20px}
.chart-card{margin-top:20px}
.chart-body{padding:16px 20px}
.chart{height:160px}
.chart-legend{font-size:var(--fs-xs);color:var(--text-3)}
.chart-times{font-size:var(--fs-xs);color:var(--text-3)}
.empty{font-size:var(--fs-sm);color:var(--text-3)}

/* Grup çipleri */
.group-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.group-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:var(--fs-sm);font-weight:500}
.group-chip:hover,.group-chip.active{border-color:var(--line-2);background:var(--surface-2);color:var(--text)}
.group-chip.active{border-color:var(--accent-2)}
.group-chip b{font-weight:500;font-size:var(--fs-xs);color:var(--text-3)}
.group-dots{display:flex}
.group-dots i{width:8px;height:8px;border-radius:50%;background:var(--tone);border:2px solid var(--surface);margin-right:-4px}

/* Tepegöz kartı */
.ai-card{padding:0;background:var(--surface);border-color:var(--line);box-shadow:none;overflow:hidden}
.ai-body{padding:16px 20px 18px}
.ai-body>p{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:12px}
.ai-compose{display:flex;gap:6px;padding:4px 4px 4px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg)}
.ai-compose input{flex:1;height:30px;border:0;background:none;padding:0;color:var(--text);font-size:var(--fs-sm);min-width:0}
.ai-compose input:focus{outline:none}
.ai-compose button{width:30px;height:30px;border-radius:6px;background:var(--accent);color:#03202f;font-weight:700;flex-shrink:0}
.ai-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ai-suggest button{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text-2);font-size:var(--fs-xs)}
.ai-suggest button:hover{border-color:var(--line-2);color:var(--text)}

/* Zaman çizelgesi */
.activity-list li{padding:12px 20px;border-color:var(--line)}
.timeline .event-icon,.notif-pop .event-icon{width:28px;height:28px;border-radius:7px;background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);border:0}
.timeline .event-icon .modern-icon,.notif-pop .event-icon .modern-icon{width:14px;height:14px}
.activity-list strong{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.activity-list small{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}

/* Cloudflare kartı */
.cf-card{padding:16px 20px}
.cf-head{display:flex;align-items:center;gap:12px}
.cf-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#f6821f;color:#fff;flex-shrink:0}
.cf-mark svg{width:19px;height:19px}
.cf-head strong{display:block;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.cf-head small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.cf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 12px}
.cf-stats span{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:8px;background:var(--surface-2);font-size:var(--fs-xs);color:var(--text-3)}
.cf-stats b{font-size:var(--fs-lg);color:var(--text);font-weight:600}
.cf-card .manage-button{width:100%}
.cf-banner{display:flex;align-items:center;gap:14px;padding:14px 20px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.cf-banner strong{display:block;font-size:var(--fs-md);font-weight:600;color:var(--text)}
.cf-banner small{display:block;font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.cf-banner .manage-button{margin-left:auto}

/* Hizmet yönetimi */
.detail-back{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:12px}
.detail-back:hover{color:var(--text)}
.service-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--tone);border-radius:var(--r-lg);background:var(--surface);margin-bottom:16px;overflow:visible}
.service-hero-main{display:flex;align-items:center;gap:18px}
.service-hero-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-3);margin-bottom:6px;flex-wrap:wrap}
.type-chip{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);font-size:var(--fs-xs);font-weight:600;border:0}
.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--text-3)}
.service-hero h1{font-size:var(--fs-2xl)}
.service-hero p{margin-top:4px;font-size:var(--fs-sm);color:var(--text-3)}
.domain-link{color:var(--accent)}
.service-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.service-tabs{display:flex;gap:2px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin-bottom:20px;overflow:auto}
.service-tabs button{height:40px;padding:0 14px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--text-3);font-size:var(--fs-sm);font-weight:500;margin-bottom:-1px}
.service-tabs button:hover{color:var(--text);background:none}
.service-tabs button.active{color:var(--text);border-bottom-color:var(--accent);background:none;font-weight:600}
.detail-grid{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
.detail-grid>div>.card+.card{margin-top:20px}
.gauge-row{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:24px;align-items:center;padding:20px 24px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-3)}
.gauge svg{width:84px;height:84px}
.gauge-value{fill:var(--text);font-family:'Manrope',sans-serif;font-size:15px;font-weight:600}
.gauge-notes{display:grid;gap:10px;padding-left:24px;border-left:1px solid var(--line)}
.gauge-notes div{display:flex;flex-direction:column;gap:2px}
.gauge-notes span{font-size:var(--fs-xs);color:var(--text-3);text-transform:none;letter-spacing:0}
.gauge-notes strong{font-size:var(--fs-sm);color:var(--text);font-weight:500}
.tool-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 20px 20px}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);text-align:left;transition:border-color .12s,background .12s}
.tool-card:hover{border-color:var(--line-2);background:var(--surface-3);transform:none}
.tool-card-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);border:0;margin-bottom:6px}
.tool-card-icon .modern-icon{width:16px;height:16px}
.tool-card strong{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.tool-card small{font-size:var(--fs-xs);color:var(--text-3);line-height:1.4}
.stack-list{padding:4px 20px 6px}
.stack-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.stack-item:last-child{border:0}
.stack-dot{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:none;flex-shrink:0}
.stack-item strong{flex:1;font-size:var(--fs-sm);color:var(--text);font-weight:500}
.detail-side{padding:0}
.detail-side .card-header{padding:14px 20px}
.info-list{padding:16px 20px;gap:14px}
.info-list.single{grid-template-columns:1fr;gap:12px;padding:16px 20px}
.info-list dt{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:3px;text-transform:none;letter-spacing:0}
.info-list dd{font-size:var(--fs-sm);color:var(--text)}
.side-support{padding:18px 20px}
.side-support p{margin-top:6px;font-size:var(--fs-sm)}
.side-support .btn{width:100%;margin-top:14px;justify-content:center}
.detail-description{font-size:var(--fs-sm);color:var(--text-3);padding:16px 20px;line-height:1.6}
.terminal{font-size:var(--fs-sm);line-height:1.8;background:#030b12;color:#8fd1b5;border-radius:0 0 var(--r-lg) var(--r-lg)}
.simple-row{padding:14px 0;border-color:var(--line)}
.simple-row strong{font-size:var(--fs-sm);color:var(--text)}
.simple-row small{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px}
.simple-row>span:not(.status){font-size:var(--fs-sm);color:var(--text-2)}
.label{font-size:var(--fs-sm);color:var(--text-2);gap:6px;margin-bottom:14px}
.form-body{padding:20px}
.form-body p{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:16px}
.notice-card{padding:20px}
.notice-card h2,.notice-card h3{font-size:var(--fs-lg)}
.notice-card p{font-size:var(--fs-sm)!important;color:var(--text-2);margin-top:8px!important}
.grid-two{gap:20px}
.plan-grid a{font-size:var(--fs-sm);background:var(--surface-2);border-color:var(--line);color:var(--text)}
.panel-subtitle{font-size:var(--fs-xs);color:var(--text-3);margin-top:12px}

/* Yedek planı */
.schedule-body{display:flex;align-items:center;gap:18px;padding:16px 20px 12px}
.schedule-ring{width:96px;height:96px;flex-shrink:0}
.ring-big{fill:var(--text);font-family:'Manrope',sans-serif;font-size:26px;font-weight:600}
.ring-small{fill:var(--text-3);font-size:7px;letter-spacing:.5px}
.schedule-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.schedule-list li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.schedule-list li span{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.schedule-list strong{font-size:var(--fs-sm);color:var(--text);font-weight:500}
.schedule-list small{font-size:var(--fs-xs);color:var(--text-3)}
.schedule-card>.manage-button{margin:4px 20px 18px;width:calc(100% - 40px)}

/* Alt bilgi, dialog, toast */
.panel-footer{display:flex;align-items:center;gap:20px;margin-top:40px;padding:18px 0 24px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-3)}
.panel-footer a{color:var(--text-2)}
.panel-footer button{background:none;padding:0;font-size:var(--fs-xs);color:var(--text-3);margin-left:auto}
dialog{border-radius:var(--r-lg);background:var(--surface);border-color:var(--line-2);color:var(--text);padding:28px}
dialog h2{font-size:var(--fs-xl);margin-bottom:12px}
dialog .eyebrow{margin-bottom:10px}
.modal-note{font-size:var(--fs-sm);background:var(--surface-2);border-color:var(--line);color:var(--text-2)}
.ai-options button{font-size:var(--fs-sm);background:var(--surface-2);border-color:var(--line);color:var(--text)}
#ai-answer{font-size:var(--fs-sm);background:var(--bg);border-color:var(--line);color:var(--text-2)}
.close-dialog{color:var(--text-3);font-size:26px}
#toast{font-size:var(--fs-sm);background:var(--surface-3);border-color:var(--line-2);color:var(--text)}
.modern-icon{width:18px;height:18px}

/* ---------- Duyarlı ---------- */
@media(max-width:1250px){
  .sidebar{width:220px}.app-shell{margin-left:220px}
  .command-bar{max-width:none}
  .dashboard-grid,.detail-grid{grid-template-columns:minmax(0,1fr)}
  .right-column{grid-template-columns:1fr 1fr}
  .gauge-row{grid-template-columns:repeat(3,auto)}
  .gauge-notes{grid-column:1/-1;border:0;padding:0;grid-template-columns:repeat(3,1fr)}
  .tool-cards{grid-template-columns:repeat(2,1fr)}
  .detail-side{display:block}
}
@media(max-width:950px){
  .system-pill{display:none}
  .right-column{grid-template-columns:1fr}
  .service-hero{flex-direction:column;align-items:flex-start}
  .service-actions{justify-content:flex-start}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .welcome,.page-heading{flex-direction:column;align-items:flex-start}
  .notif-pop{right:0;width:min(340px,calc(100vw - 32px))}
}
@media(max-width:720px){
  .sidebar{display:none;top:60px;width:250px}
  .sidebar.open{display:flex}
  .app-shell{margin-left:0}
  .topbar{height:60px;padding:0 16px;background:var(--bg)}
  .command-bar{display:none}
  main{padding:20px 16px 0}
  .gauge-row{grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 14px}
  .gauge svg{width:72px;height:72px}
  .gauge-notes{grid-template-columns:1fr}
  .tool-cards{grid-template-columns:1fr 1fr;padding:14px}
  .service-icon.large{width:48px;height:48px}
  .cf-banner{flex-wrap:wrap}.cf-banner .manage-button{margin-left:0;width:100%}
  .schedule-body{flex-direction:column;align-items:flex-start}
  .panel-footer{flex-wrap:wrap;gap:12px}
}
@media(max-width:520px){
  .stats-grid{grid-template-columns:1fr}
  .welcome-actions .btn{flex:1;justify-content:center}
  .search{width:100%}
}

/* Eski katman geçersiz kılmaları */
.stat-head{justify-content:flex-start}
.stat-head>span:last-child{font-size:var(--fs-sm);color:var(--text-2);margin-left:0}

/* ---------- Açık tema (panel) ---------- */
html[data-theme=light]{--bg:#f4f7fa;--surface:#ffffff;--surface-2:#f1f5f8;--surface-3:#e6edf3;--line:#dde5ec;--line-2:#c9d6e0;--text:#0f1f2c;--text-2:#3f5566;--text-3:#6b8194;--accent:#0d8fd1;--accent-2:#9fd0ee;color-scheme:light}
html[data-theme=light] body{background:var(--bg)}
html[data-theme=light] .btn.primary,html[data-theme=light] .ai-compose button{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme=light] .btn.primary:hover{background:#1aa0e6;border-color:#1aa0e6}
html[data-theme=light] .btn.primary .modern-icon{color:#fff}
html[data-theme=light] .status{background:#e6f7ef;border-color:#b9e6cf;color:#118a5b}
html[data-theme=light] .status.stopped{background:var(--surface-2);border-color:var(--line-2);color:var(--text-2)}
html[data-theme=light] .status.cf{background:#fff3e6;border-color:#f6c79a;color:#9a4d0c}
html[data-theme=light] .system-pill,html[data-theme=light] .status-link span{color:#118a5b}
html[data-theme=light] .gauge svg circle:first-child{stroke:#e6edf3}
html[data-theme=light] .terminal{background:#0f1f2c;color:#8fd1b5}
html[data-theme=light] .cf-mark{background:#f6821f}
html[data-theme=light] .cf-banner{background:#fff}
html[data-theme=light] .cf-stats b{color:#0f1f2c}
html[data-theme=light] .chart path[stroke="#10364c"]{stroke:#dde5ec}
html[data-theme=light] .ring-big{fill:#0f1f2c}
html[data-theme=light] .notif-pop{box-shadow:0 20px 50px -20px #0f1f2c40}
html[data-theme=light] dialog::backdrop{background:#0f1f2c66}
html[data-theme=light] #toast{background:#0f1f2c;border-color:#0f1f2c;color:#fff}
html[data-theme=light] .card-header h2,html[data-theme=light] .welcome h1,html[data-theme=light] .page-heading h1,html[data-theme=light] .service-hero h1,html[data-theme=light] .stat-value,html[data-theme=light] .service-name strong,html[data-theme=light] .activity-list strong,html[data-theme=light] .tool-card strong,html[data-theme=light] .stack-item strong,html[data-theme=light] .info-list dd,html[data-theme=light] .simple-row strong,html[data-theme=light] .cf-head strong,html[data-theme=light] .notice-card h3,html[data-theme=light] .schedule-list strong,html[data-theme=light] .gauge-notes strong,html[data-theme=light] .profile strong,html[data-theme=light] .breadcrumb strong{color:var(--text)}
html[data-theme=light] .card-header p,html[data-theme=light] .service-name small,html[data-theme=light] .activity-list small,html[data-theme=light] .stat-note,html[data-theme=light] .chart-legend,html[data-theme=light] .chart-times,html[data-theme=light] th{color:var(--text-3)}
html[data-theme=light] .sidebar nav button{color:var(--text-2)}
html[data-theme=light] .sidebar nav button.active{color:var(--text)}
html[data-theme=light] .logo img{filter:none}

/* Açık tema çizgileri (panel): 2px kesikli pastel mavi */
html[data-theme=light]{--line:#a9d6f0;--line-2:#8cc8ea;--line-dash:2px dashed #a9d6f0}
html[data-theme=light] :is(.card,.stat,.tool-card,.service-hero,.cf-banner,.group-chip,.system-pill,.icon-button.notification,.command-bar,.notif-pop,.ai-compose,.search,select,input,textarea,.btn,.manage-button,.tag,.ai-suggest button,.profile .workspace-avatar,.top-avatar,.cf-stats span,dialog,.modal-note,.ai-options button,#ai-answer,.plan-grid a){border:var(--line-dash)}
html[data-theme=light] .btn.primary,html[data-theme=light] .ai-compose button{border:2px solid var(--accent)}
html[data-theme=light] .status{border:2px dashed #9fdcc0}
html[data-theme=light] .status.stopped{border:2px dashed #b9dcf2}
html[data-theme=light] .status.cf{border:2px dashed #f2c79c}
html[data-theme=light] .service-hero{border-left:3px solid var(--tone)}
html[data-theme=light] .sidebar{border-right:var(--line-dash)}
html[data-theme=light] .topbar{border-bottom:var(--line-dash)}
html[data-theme=light] :is(.card-header,.toolbar,.service-tabs,.notif-head,.activity-list li:not(:last-child),.stack-item:not(:last-child),.simple-row:not(:last-child),.component){border-bottom:var(--line-dash)}
html[data-theme=light] :is(.table-footer,.profile,.panel-footer,.notif-foot){border-top:var(--line-dash)}
html[data-theme=light] th{border-bottom:var(--line-dash)}
html[data-theme=light] td{border-bottom:var(--line-dash)}
html[data-theme=light] tr:last-child td{border-bottom:0}
html[data-theme=light] .service-tabs button.active{border-bottom:2px solid var(--accent)}
html[data-theme=light] .service-tabs button:not(.active){border-bottom:2px solid transparent}
html[data-theme=light] .gauge-notes{border-left:var(--line-dash)}
html[data-theme=light] .stat-icon,html[data-theme=light] .tool-card-icon,html[data-theme=light] .service-icon{border:2px dashed color-mix(in srgb,var(--tone) 45%,#fff)}
html[data-theme=light] .usage-mini,html[data-theme=light] .resource-track{background:#e6edf3}

/* Açık tema panel: kesikli yalnızca dikey ayırıcılarda */
html[data-theme=light]{--line:#dbe6ef;--line-2:#c5d7e4;--line-dash:1px solid #dbe6ef}
html[data-theme=light] .sidebar{border-right:2px dashed #a9d6f0}
html[data-theme=light] .gauge-notes{border-left:2px dashed #a9d6f0}
html[data-theme=light] .btn,html[data-theme=light] .manage-button,html[data-theme=light] .search,html[data-theme=light] select,html[data-theme=light] input,html[data-theme=light] textarea,html[data-theme=light] .command-bar,html[data-theme=light] .system-pill,html[data-theme=light] .icon-button.notification,html[data-theme=light] .group-chip,html[data-theme=light] .ai-compose{border:1px solid #c5d7e4}
html[data-theme=light] .status{border:1px solid #9fdcc0}
html[data-theme=light] .status.stopped{border:1px solid #c5d7e4}
html[data-theme=light] .status.cf{border:1px solid #f2c79c}
html[data-theme=light] .stat-icon,html[data-theme=light] .tool-card-icon,html[data-theme=light] .service-icon{border:1px solid color-mix(in srgb,var(--tone) 40%,#fff)}
html[data-theme=light] .card,html[data-theme=light] .stat,html[data-theme=light] .service-hero,html[data-theme=light] .cf-banner{box-shadow:0 2px 12px -8px #0f1f2c33}
html[data-theme=light] .service-hero{border-left:3px solid var(--tone)}