/* ============================================================================
   SunucuKontrol — Tasarım Sistemi
   ----------------------------------------------------------------------------
   Yön: GÖSTERGE PANELİ, pazarlama sayfası değil. Panel okunmaz, KULLANILIR:
   günde onlarca kez aynı tabloya bakılır. Bu yüzden süs değil, okunabilirlik
   ve hizalama üzerine kurulu.

   Üç kural — yeni bileşen eklerken bunlara uyulmalı (gerekçeler docs/TASARIM.md):

   1) ZEMİN BEYAZ. Gradient zemin, bulanık renk lekesi, koyu panel yok.
      Hiyerarşi 1px çizgi ve boşlukla kurulur; --sunken yalnız GERÇEKTEN
      girintili yüzeyler içindir (tablo başlığı, form eki, alt bilgi).
   2) GÖLGE YALNIZ HAVADA DURAN ŞEYE. Modal, açılır menü, bildirim. Kartın
      gölgesi yok — kart sayfanın üstünde değil, içinde.
   3) RENK BİLGİ TAŞIR. Marka rengi (--primary) yalnız etkin gezinme, birincil
      düğme, odak halkası ve bağlantıda. Durum renkleri (--ok/--warn/--crit)
      yalnız durum bildirir. Dekoratif renk yok: bir şey renkliyse bir anlamı
      vardır.

   --primary ÇALIŞMA ZAMANINDA bayi markasıyla ezilir (index.php). Bu yüzden
   tasarım nötr ağırlıklıdır: rastgele bir marka rengiyle de dağılmaz.
   ============================================================================ */

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Zeminler ------------------------------------------------------- */
    --paper: #ffffff;
    /* Girintili yüzey. Bilinçli olarak SICAK nötr: #f8fafc gibi mavi-gri
       tonlar her arayüzün varsayılanı, seçilmiş değil miras alınmış görünür.
       Sıcak nötr, mavi marka renginin yanında da onu bastırmadan durur. */
    --sunken: #f7f7f5;
    --sunken-2: #f1f1ee;
    /* Kabuk (sol menü + üst çubuk) zemini. Ana alan saf beyaz; kabuk bir
       tık aşağıda duran çok soluk sıcak nötr. Amaç renk katmak değil,
       ortadaki çalışma alanının sınırını çizgiye ek olarak zeminden de
       belli etmek. Gözle zor seçilir; bilinçaltında ayırır. */
    --chrome: #fafaf8;
    /* Kabuk zemininde vurgu. Kabuk zaten bir tık koyu olduğu için ana
       alandaki --sunken vurgusu burada görünmüyordu; bir basamak aşağısı
       kullanılıyor ki fare altındaki satır yine seçilebilsin. */
    --chrome-hover: #eeeeea;

    /* ---- Çizgiler ------------------------------------------------------- */
    --line: #e6e5e0;
    --line-strong: #d5d3cc;

    /* ---- Mürekkep ------------------------------------------------------- */
    --ink: #1b1b19;
    --ink-2: #56534d;
    --ink-3: #8b8781;

    /* ---- Marka ---------------------------------------------------------- */
    --primary: #2563eb;
    --primary-soft: color-mix(in srgb, var(--primary) 8%, #fff);
    --primary-line: color-mix(in srgb, var(--primary) 32%, #fff);
    /* Beyaz üstünde METİN olarak kullanılacak koyulaştırılmış marka rengi.
       Açık bir marka rengi seçen bayide düz --primary okunmuyordu. */
    --primary-ink: color-mix(in srgb, var(--primary) 82%, #000);

    /* ---- Durum ---------------------------------------------------------- */
    /* Tailwind varsayılanlarından (#10b981/#ef4444) daha koyu ve daha az
       doygun: beyaz üstünde metin olarak da okunurlar ve arayüz "uyarı ışığı"
       gibi değil, gösterge gibi görünür. */
    --ok: #136c3f;
    --warn: #8a5a00;
    --crit: #a52620;
    --info: #1e5f8f;
    --ok-soft: color-mix(in srgb, var(--ok) 9%, #fff);
    --warn-soft: color-mix(in srgb, var(--warn) 10%, #fff);
    --crit-soft: color-mix(in srgb, var(--crit) 9%, #fff);
    --info-soft: color-mix(in srgb, var(--info) 9%, #fff);

    /* ---- Tipografi ------------------------------------------------------ */
    /* Outfit yalnız BAŞLIKTA. Geometrik bir yazı karakteri; 9 punto tablo
       hücresinde okuma hızını düşürüyor. Gövde ve tablo metni sistem yazı
       karakterinde — kullanıcının işletim sisteminde en hızlı okuduğu şey. */
    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* ---- Ölçüler -------------------------------------------------------- */
    /* Üç basamaklı köşe ölçeği. Eskiden 8/10/12/16/20/24/28px karışık
       kullanılıyordu; yan yana duran iki kutunun köşesi farklı olunca
       arayüz derlenmemiş görünüyor. */
    --r-sm: 6px;
    --r-md: 10px;
    --r-pill: 999px;

    /* Gölge YALNIZ havada duran öğede. Kart gölgesi yok. */
    --shadow-pop: 0 1px 2px rgba(27, 27, 25, 0.05), 0 8px 24px -10px rgba(27, 27, 25, 0.18);
    --shadow-modal: 0 24px 60px -14px rgba(27, 27, 25, 0.24);

    /* ---- Eski değişken adları (uyumluluk) -------------------------------
       Kısmi dosyalarda ve eklenti temalarında satır içi stillerde 700'den
       fazla var(--...) çağrısı var; adları değiştirmek hepsini kırardı.
       --bg-main / --border / --text-color / --bg-body TANIMSIZDI: 60'tan
       fazla çağrı sessizce boşa düşüyordu (arkası şeffaf kalıyordu).
       Burada tanımlanıyorlar. */
    --bg-color: var(--sunken);
    --bg-main: var(--sunken);
    --bg-body: var(--sunken);
    --surface-muted: var(--sunken-2);
    --sidebar-bg: var(--chrome);
    --card-bg: var(--paper);
    --bg-card: var(--paper);
    --card-hover: var(--sunken);
    --border-color: var(--line);
    --border: var(--line);
    --border-focus: var(--primary);
    --danger: var(--crit);
    --success: var(--ok);
    --warning: var(--warn);
    --text-main: var(--ink);
    --text-color: var(--ink);
    --text-muted: var(--ink-2);
    --text-dark: var(--ink-3);
    --radius: var(--r-md);
    --shadow-main: none;
}

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

html {
    font-family: var(--font-sans);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-layout-container {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

/* Rakamlar HER YERDE eşit genişlikte. Bir tabloda 12.480 ile 9.310 alt alta
   gelirken basamakların hizalanmaması, panelde en çok göze batan şeydi. */
td, th, input, select, textarea,
.sys-info p, .progress-ring-text, .service-stat-value,
.stat-value, .metric-value, code, pre, kbd {
    font-variant-numeric: tabular-nums;
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

a {
    color: var(--primary-ink);
    text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
    text-underline-offset: 2px;
}

/* Klavyeyle gezinen kullanıcı nerede olduğunu GÖRMELİ. Tek bir kural, her
   odaklanabilir öğe için — bileşen bileşen unutulmasın diye. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Kaydırma çubuğu */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
    border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
}

/* ============================================================================
   Sol menü
   ============================================================================ */
.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--chrome);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100vh;
    z-index: 10;
    position: relative;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border-bottom: 1px solid var(--line);
    min-height: 65px;
}

.brand-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
}

.brand-text {
    min-width: 0;
}

.brand-text h2 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Çalışıyor" — hizmetin ayakta olduğunu bildiren DURUM satırı, süs değil.
   Bu yüzden yeşil nokta parlamıyor: gösterge lambası gibi düz duruyor. */
.brand-text span {
    font-size: 0.72rem;
    color: var(--ink-2);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.brand-text span::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--ok);
    border-radius: 50%;
}

.sidebar-menu {
    list-style: none;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 8px;
}

.menu-category {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink-3);
    padding: 12px 11px 4px;
    opacity: 0.75;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 11px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--r-sm);
    /* Etkin öğedeki sol şeridin yeri HER ZAMAN ayrılı: şerit görünüp
       kaybolduğunda menü metinleri 3px sağa-sola kayıyordu. */
    border-left: 3px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.menu-item i {
    font-size: 0.95rem;
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    color: var(--ink-3);
    transition: color 0.12s ease;
}

.menu-item:hover {
    color: var(--ink);
    background: var(--chrome-hover);
}

.menu-item:hover i {
    color: var(--ink-2);
}

.menu-item.active {
    color: var(--primary-ink);
    background: var(--primary-soft);
    border-left-color: var(--primary);
    font-weight: 600;
}

.menu-item.active i {
    color: var(--primary);
}

/* Yapay zekâ bağlantısı menünün TEK vurgulu girişi: ikonu marka renginde.
   Arka plan verilmedi — o, "şu an buradasın" demek (`.active`) ve iki farklı
   şeyin aynı görünmesi menüyü okunmaz yapardı. Renk yalnız ikonda kalıyor:
   göz onu tarama sırasında yakalıyor, seçili öğeyle karışmıyor. */
.menu-item.is-ai-link i {
    color: var(--primary);
}

/* Alan adı listesindeki robot düğmesi. Düğmenin kendisi diğerleriyle aynı
   (btn-secondary) — yalnız ikonu marka renginde. Kendi düğme rengini vermek
   onu "birincil eylem" yapardı; satırın birincil eylemi alan adına girmek. */
.btn-domain-ai i {
    color: var(--primary);
}

/* ----------------------------------------------------------------------------
   Alan adı bağlam menüsü

   Ana menüyle AYNI görünümü paylaşıyor (.menu-item), yalnız öğeler <a> değil
   <button> olduğu için tarayıcının düğme varsayılanları geri alınıyor. Ayrı
   bir görsel dil verilmedi: menü değişince panelin de değiştiğini alan adı
   başlığı zaten söylüyor, renk de değişseydi kullanıcı başka bir ürüne
   geçtiğini sanırdı.
   -------------------------------------------------------------------------- */
.sidebar-domain .menu-item {
    width: 100%;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Alan adı ikonu ana markanınkinden ayrılıyor ki iki menü yan yana
   hatırlandığında hangisinde olunduğu tek bakışta anlaşılsın. */
.domain-brand-icon {
    background: var(--ink);
}

/* Ana menüdeki "Çalışıyor" satırının yeşil noktası burada anlamsız:
   gösterilen şey bir servis durumu değil, bağlamın adı. */
.brand-text span.domain-brand-sub::before {
    display: none;
}

.domain-menu-exit {
    width: 100%;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink-2);
}

.domain-menu-exit:hover {
    color: var(--ink);
    background: var(--chrome-hover);
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--chrome);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 12px;
    min-width: 0;
}

.user-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--sunken);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--ink-2);
}

.user-details {
    min-width: 0;
}

.user-details h4 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-details span {
    font-size: 0.75rem;
    color: var(--ink-2);
}

.btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-logout:hover {
    background: var(--crit-soft);
    border-color: color-mix(in srgb, var(--crit) 30%, #fff);
    color: var(--crit);
}

/* ============================================================================
   Ana alan
   ============================================================================ */
.main-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--paper);
}

.top-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 28px;
    min-height: 65px;
    background: var(--chrome);
    border-bottom: 1px solid var(--line);
    z-index: 99;
}

.page-title h1 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.page-title p {
    font-size: 0.8rem;
    color: var(--ink-2);
    margin-top: 1px;
}

.server-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}

.server-badge span {
    color: var(--ink);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* ÜST ÇUBUK DÜZENİ (2026-11-04). Önceden: alt başlık iki satıra kırılıyor,
   "Güncelleme kanalı bağlı değil" rozeti iki satır oluyor, dil/tema/rozet/IP/
   kullanıcı her biri ayrı yükseklik ve kenarlıkta, araları 20px'ti. Şimdi:
   başlık tek satır (sığmazsa üç nokta), sağdaki her öğe aynı 34px yükseklik
   ve kenarlıkta, araları 8px; tema düğmesi yalnız simge (adı title/aria-label'da),
   dil adı dar masaüstünde simgeye iner. Mobil kurallar (≤768/≤600) aşağıda. */
.top-nav > div:first-child { min-width: 0; flex: 1 1 auto; }
.page-title { min-width: 0; }
.page-title h1,
.page-title p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-nav > div:last-child { gap: 8px; flex-shrink: 0; }
#lang-trigger,
#tema-sec,
#header-update-badge,
#header-intrusion-badge,
.top-nav .server-badge {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    white-space: nowrap;
    box-sizing: border-box;
}
#tema-sec { padding: 0 10px; gap: 6px; }
#tema-sec-ad { display: none; }
#header-update-badge.u-color-v-text-muted { background: transparent; }
#header-intrusion-badge { border-color: transparent; }
.top-nav > div:last-child > .header-user-dropdown-container:last-child {
    margin-left: 6px;
    padding-left: 14px;
}
@media (max-width: 1280px) {
    .page-title p { display: none; }
    #lang-trigger > span { display: none; }
    #lang-trigger { padding: 0 10px; gap: 6px; }
}
/* 1200 altında IP kutusu başlığı sıfıra eziyordu (1024'te ölçüldü); IP
   Sunucu Yönetimi ekranında da var. */
@media (max-width: 1200px) {
    .top-nav .server-badge { display: none; }
    .page-title { min-width: 140px; }
}
/* Telefonda dil, tema, rozetler ve kullanıcı TEK satır: rozet metni görsel
   olarak gizli ama ekran okuyucuya açık (title da duruyor), simge ve rengi
   görünür kalıyor. Önceden dört satıra yayılıyordu. */
@media (max-width: 600px) {
    .top-nav > div:last-child { flex-wrap: nowrap; }
    #header-update-badge,
    #header-intrusion-badge { padding: 0 10px; position: relative; }
    #header-update-badge > span,
    #header-intrusion-badge > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* Sayfa açıklaması şeridi: üst çubuğun hemen altında, tam genişlik, tek
   satır (uzunsa sarar). `.main-wrapper` dikey flex — şerit küçülmüyor,
   içerik kabı kalan yüksekliği alıyor, kaydırma bozulmuyor. */
.page-desc {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 28px;
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 0.84rem;
    line-height: 1.45;
}

.page-desc[hidden] {
    display: none;
}

.page-desc i {
    margin-top: 3px;
    color: var(--ink-3, var(--ink-2));
}

.page-desc-text {
    margin: 0;
}

.content-container {
    padding: 26px 28px 40px;
    flex-grow: 1;
    min-height: 0;
    display: none;
    overflow-y: auto;
}

.content-container.active {
    display: block;
}

/* Açılışta pano: adres panoya bakıyorsa index.php'deki blok kök öğeye
   `boot-dashboard` koyuyor ve pano yönlendirme çalışmadan ÖNCE görünüyor.
   Başka bir adresle gelindiğinde sınıf konmaz, pano gizli kalır ve o adresin
   sayfası tek başına çizilir — yanlış ekran bir an bile görünmez.
   app.js yönlendirmesi ilk işi olarak sınıfı kaldırıyor. */
html.boot-dashboard #dashboard {
    display: block;
}

.main-footer {
    flex-shrink: 0;
    padding: 12px 28px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    font-size: 0.78rem;
    color: var(--ink-3);
    z-index: 99;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================================================
   Kart
   ----------------------------------------------------------------------------
   Gölge YOK, hover'da yükselme YOK. Kart tıklanabilir bir şey değil; her
   kartın fareyle zıplaması, gerçekten tıklanabilir olan kutuların (döşemeler)
   verdiği işareti değersizleştiriyordu.
   ============================================================================ */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px;
}

.card + .card,
.card + .dp-tabgroup,
.card + .table-responsive {
    margin-top: 18px;
}
/* Izgara içinde aralığı `gap` veriyor; kardeş kart kuralı yan yana duran
   ikinci kartı 18px aşağı itiyordu (pano: Servis Özetleri, 2026-11-04). */
:is(.u-display-grid, .pano-ozet-grid, .stats-grid, .bloat-grid,
    .domain-hub-grid, .app-layout-container) > .card + .card {
    margin-top: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.card-title i {
    color: var(--ink-3);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* ============================================================================
   Kaynak göstergeleri
   ----------------------------------------------------------------------------
   Halka rengi artık KAYNAĞA göre değil DOLULUĞA göre: eskiden CPU mor, RAM
   menekşe, disk turkuazdı — renk hiçbir şey söylemiyordu, yalnız süstü.
   Şimdi %70 altı sakin, %70–90 uyarı, %90 üstü kritik. Panele bakan kişi
   sayıyı okumadan hangi kaynağın dolduğunu görüyor.
   Sınıfı app.js'teki setProgress() basıyor.
   ============================================================================ */
.sys-stat {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Ölçü SVG'ye bağlı: çemberin yarıçapı markup'ta r="34", merkezi 37.5.
   Kutu 76px — 34*2 + 5px kalınlık tam sığar. Bunu küçültmek için önce
   partial'daki r/cx/cy değerleri değişmeli, yoksa halka kırpılır. */
.progress-ring {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}

.progress-ring svg {
    width: 76px;
    height: 76px;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
}

.progress-ring-bg {
    stroke: var(--sunken-2);
}

.progress-ring-val {
    stroke: var(--ink-2);
    stroke-dasharray: 213.6;
    stroke-dashoffset: 213.6;
    transition: stroke-dashoffset 0.5s ease, stroke 0.25s ease;
}

.progress-ring-val.is-ok { stroke: var(--ok); }
.progress-ring-val.is-warn { stroke: var(--warn); }
.progress-ring-val.is-crit { stroke: var(--crit); }

.progress-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.sys-info {
    min-width: 0;
}

.sys-info h3 {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--ink-2);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.sys-info p {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: var(--font-display);
    margin: 2px 0 1px;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.sys-info span {
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* ============================================================================
   Düğmeler
   ============================================================================ */
.btn {
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-sans);
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tablo hücresi içinde bağlantı gibi duran düğme (DB-310).
   Veritabanı satırındaki her kullanıcı, yetki ekranına giden bir düğme;
   `btn btn-secondary btn-sm` ile basmak, tek hücrede beş kutucuk demekti ve
   asıl bilgiyi (kim, hangi yetkiyle) okunmaz kılıyordu. */
.btn-inline-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.btn-inline-link:hover span:first-child {
    text-decoration: underline;
}
.btn-inline-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 88%, #000);
}

.btn-secondary {
    background: var(--paper);
    border-color: var(--line-strong);
    color: var(--ink);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--sunken);
    border-color: var(--ink-3);
}

.btn-danger {
    background: var(--paper);
    border-color: color-mix(in srgb, var(--crit) 32%, #fff);
    color: var(--crit);
}
.btn-danger:hover:not(:disabled) {
    background: var(--crit);
    border-color: var(--crit);
    color: #fff;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.78rem;
}

/* ============================================================================
   Tablolar
   ----------------------------------------------------------------------------
   Panelin asıl içeriği burası. Satır yüksekliği eskiye göre düşürüldü: bir
   ekranda 8 yerine 13 alan adı görünüyor, bu da kaydırma sayısını azaltıyor.
   ============================================================================ */
.table-responsive {
    overflow-x: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--paper);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th {
    padding: 9px 14px;
    font-size: 0.72rem;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    background: var(--sunken);
}

td {
    padding: 11px 14px;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: var(--sunken);
}

/* Sütun ayıracı: başlıklar arasına ince bir çubuk.
   Yalnız BAŞLIK satırında — gövdede de çizgi olsa tablo kafese dönüyor ve
   satırdaki asıl bilgiden (alan adı, durum) dikkat çalıyor. Başlıktaki çubuk
   hangi hücrenin hangi başlığa ait olduğunu göz taramasında netleştirmeye
   yetiyor. Son başlıkta ayıraç yok: dış kenarlıkla üst üste binerdi. */
.table-columned thead th + th {
    border-left: 1px solid var(--line);
}

/* ============================================================================
   Rozetler — durum, renk-tek-başına değil metinle birlikte
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid;
}

.badge-success {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 22%, #fff);
}

.badge-warning {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 24%, #fff);
}

.badge-danger {
    background: var(--crit-soft);
    color: var(--crit);
    border-color: color-mix(in srgb, var(--crit) 22%, #fff);
}

.badge-primary {
    background: var(--primary-soft);
    color: var(--primary-ink);
    border-color: var(--primary-line);
}

.badge-secondary {
    background: var(--sunken);
    color: var(--ink-2);
    border-color: var(--line-strong);
}

/* ============================================================================
   Formlar
   ============================================================================ */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 8px 11px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.88rem;
    font-family: var(--font-sans);
    line-height: 1.4;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-control[readonly],
.form-control:disabled {
    background-color: var(--sunken) !important;
    color: var(--ink-2) !important;
    border-color: var(--line);
    cursor: not-allowed;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-control::placeholder {
    color: var(--ink-3);
}

textarea.form-control {
    line-height: 1.55;
}

/* YAPAY ZEKÂ AYAR SATIRI (2026-11-05, kullanıcı: "butonlar daha belirgin olsun").
   Otomatik onay / yayın, Telegram-e-posta onayı, günlük ve saatlik sınırlar aynı
   kalıpta: solda başlık + açıklama, sağda belirgin düğme; açık (riskli) durum sarı
   çerçeveli. Çizenler: islem-onaylari.js, ai-approvals.js, ailink.js, ai-capabilities.js. */
/* 2026-11-06: alt alan adı bağlamı (pages/domain-detail/altalan.js). */
body.altalan-baglam .altalan-gizli { display: none !important; }
.altalan-serit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--border-color); border-left: 4px solid var(--primary);
    border-radius: var(--r-md); background: var(--bg-card); font-size: 0.85rem; line-height: 1.5; }
.altalan-serit-metin { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 260px; color: var(--text-main); }
.altalan-serit-metin > i { color: var(--primary); margin-top: 3px; }
.altalan-serit-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }

/* 2026-11-06: Yapay Zekâ Domain Listesi — alt alan adı üst alan adının altında. */
.yz-alan-alt { display: flex; align-items: center; gap: 6px; padding-left: 15px; flex-wrap: wrap; }
.yz-alan-alt-cizgi { color: var(--text-muted); font-family: monospace; font-weight: 700; }
.yz-alan-alt-satir { background: rgba(0, 0, 0, 0.015); }
.yz-alan-alt-satir a { font-size: 0.9em; }

.yz-ayar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sunken);
    font-size: 0.85rem;
}
.yz-ayar.yz-ayar-acik {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}
.yz-ayar-metin { flex: 1; min-width: 240px; color: var(--ink-2); line-height: 1.5; }
.yz-ayar-metin > strong { display: block; color: var(--ink); margin-bottom: 2px; }
.yz-ayar-metin > strong i { margin-right: 6px; }
.yz-ayar .btn { white-space: nowrap; }

/* 2026-11-09: Alan adı → Yapay Zekâ → Bağlantılar sadeleştirmesi (detail-ailink.php).
   Üst kart: ne olduğu + üç adım + tek ana düğme; kurallar katlanır kutuda. */
.yzb-giris-ust { display: flex; gap: 14px; align-items: flex-start; }
.yzb-giris-ikon {
    flex: 0 0 44px; height: 44px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary); font-size: 1.25rem;
}
.yzb-giris-metin { flex: 1; min-width: 0; }
.yzb-giris-baslik { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.yzb-giris-metin p { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }
.yzb-adimlar {
    list-style: none; margin: 18px 0 16px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
}
.yzb-adimlar li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken);
}
.yzb-adimlar li > div { display: flex; flex-direction: column; gap: 2px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.45; }
.yzb-adimlar li strong { color: var(--ink); font-size: 0.9rem; }
.yzb-adim-no {
    flex: 0 0 24px; height: 24px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.yzb-giris-eylem { display: flex; justify-content: flex-start; }
.yzb-giris-eylem .btn { padding: 10px 20px; font-size: 0.95rem; }
.yzb-kurallar { margin-top: 14px; font-size: 0.84rem; color: var(--ink-2); }
.yzb-kurallar > summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; }
.yzb-kurallar > summary i { margin-right: 6px; color: var(--ink-3); }
.yzb-kurallar ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.yzb-kurallar li + li { margin-top: 6px; }
@media (max-width: 600px) {
    .yzb-giris-ikon { display: none; }
    .yzb-adimlar { grid-template-columns: 1fr; }
    .yzb-giris-eylem .btn { width: 100%; justify-content: center; }
}

/* SEÇİM KUTULARI — select2 görünümü, projenin tamamı (2026-11-05, kullanıcı isteği).
   select2/jQuery kütüphanesi EKLENMEDİ: yerel <select> korunuyor (klavye, ekran
   okuyucu, mobil seçici, change olayları ve form gönderimi aynı); yalnız görünüm
   .dp-tabselect diliyle birleşti (kenarlık, yuvarlak köşe, ok simgesi, odak halkası).
   Kutu kuralları :where() ile SIFIR özgüllükte: sayfanın kendi sınıfları (genişlik,
   boyut, .form-control) her zaman kazanır. Ok simgesi ve sağ boşluk ayrı ve daha
   özgül, çünkü .form-control'ün `background` kısayolu simgeyi silerdi. Çoklu seçim
   ve liste kutuları (multiple / size) dokunulmadan kalıyor. */
:where(select:not([multiple]):not([size])) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 36px;
    padding: 7px 11px;
    background-color: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8781' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px 12px;
    padding-right: 32px;
}
:where(select:not([multiple]):not([size])):hover { border-color: var(--ink-3); }
:where(select:not([multiple]):not([size])):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
:where(select:not([multiple]):not([size])):disabled {
    background-color: var(--sunken);
    color: var(--ink-2);
    cursor: not-allowed;
}

/* Yol, komut, anahtar gibi alanlar eşit genişlikli yazıyla — kullanıcı
   karakter karakter karşılaştırma yapıyor. */
.form-control.mono,
input[type="text"].mono,
textarea.mono {
    font-family: var(--font-mono);
    font-size: 0.83rem;
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group > * {
    border-radius: 0 !important;
}

.input-group > :first-child {
    border-top-left-radius: var(--r-sm) !important;
    border-bottom-left-radius: var(--r-sm) !important;
}

.input-group > :last-child {
    border-top-right-radius: var(--r-sm) !important;
    border-bottom-right-radius: var(--r-sm) !important;
}

.input-group .form-control {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* Girdi modalı (#modal-input) yardımcı düğmeleri GİZLİYKEN alan tek başına
   kalıyor. `.input-group > :last-child` yapısal bir seçici — gizli düğmeyi de
   son çocuk sayar ve alanın sağ köşeleri köşeli kalırdı. `has-addons` sınıfı
   yalnız düğmeler görünürken ekleniyor (bkz. core.js:showInputModal).

   SEÇİCİ `#modal-input`E ÇİVİLİ: `.input-group:not(.has-addons)` yazmak
   panelin DİĞER TÜM giriş gruplarını kapsardı — hiçbirinde bu sınıf yok ve
   hepsinin alanı düğmesinden yuvarlak bir köşeyle ayrılırdı. */
#modal-input .input-group:not(.has-addons) > .form-control {
    border-top-right-radius: var(--r-sm) !important;
    border-bottom-right-radius: var(--r-sm) !important;
}

/* Odaklanan alan komşusunun altında kalmasın. */
.input-group .form-control:focus {
    position: relative;
    z-index: 1;
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--sunken);
    border: 1px solid var(--line-strong);
    border-left: none;
    white-space: nowrap;
}

/* ============================================================================
   Modal — havada duran öğe, gölge BURADA yerinde
   ============================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 27, 25, 0.35);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: dpFade 0.15s ease;
}

@keyframes dpFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.modal-overlay.active {
    display: flex;
}

/* Onay ve giriş pencereleri HER ZAMAN başka bir pencerenin ÜSTÜNDEN açılan
   iletişim kutuları (ör. Yönlendirme / Satılık'ta teklif silme onayı teklifler
   penceresinin içinden). Aynı z-index'te, sayfa içine yerleşmiş bir pencere
   onların önüne geçiyor ve onay düğmesi tıklanamıyordu (2026-10-27 ölçüldü). */
#modal-confirm,
#modal-input {
    z-index: 110;
}

.modal-overlay.active .modal {
    animation: dpRise 0.16s ease-out;
}

@keyframes dpRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-size: 1.1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.modal-close:hover {
    color: var(--ink);
    background: var(--sunken);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--sunken);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
}

/* ============================================================================
   Bildirimler
   ============================================================================ */
/* OI-50: arka plan işleri çekmecesi (sağ alt, toast'ların karşı köşesi). */
.gorev-cekmecesi {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 32px));
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: var(--r-md);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    padding: 8px 12px;
    font-size: .82rem;
}
.gorev-cekmecesi-baslik { background: none; border: 0; padding: 0 0 4px; cursor: pointer; color: inherit; font: inherit; width: 100%; text-align: left; }
.gorev-cekmecesi-satir { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 32px);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-3);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
    min-width: 280px;
    max-width: 420px;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.toast.show {
    transform: translateX(0);
}

.toast-icon {
    font-size: 0.95rem;
    line-height: 1.45;
    flex-shrink: 0;
}

.toast-message {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    flex-grow: 1;
}

.toast-success { border-left-color: var(--ok); }
.toast-success .toast-icon { color: var(--ok); }
.toast-danger { border-left-color: var(--crit); }
.toast-danger .toast-icon { color: var(--crit); }
.toast-warning { border-left-color: var(--warn); }
.toast-warning .toast-icon { color: var(--warn); }
/* Uyarı detay sayfasına bağlantı (core.js showToast, /uyari). */
.toast-detay {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.toast-detay:hover { text-decoration: underline; }
/* Ö-02 başarı sözleşmesi: yeşil bildirimde uygulandı/doğrulandı satırı (core.js showToast). */
.toast-durum { margin-top: 4px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.toast-durum-dogrulandi { color: var(--ok); }
.uyari-blok { margin: 0 0 18px; }
.uyari-blok h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; }
.uyari-blok ol, .uyari-blok ul { margin: 0; padding-left: 20px; line-height: 1.6; font-size: 0.9rem; }
.uyari-ileti {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--crit);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    word-break: break-word;
}
.uyari-otomatik {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: var(--r-sm);
    font-size: 0.88rem;
}
.uyari-baglantilar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================================
   Giriş ekranı
   ----------------------------------------------------------------------------
   Müşterinin paneli gördüğü İLK ekran. Ortada yüzen renkli bir kutu yerine
   düz beyaz bir sayfa: kurumsal bir hizmete giriyormuş hissi veriyor.
   ============================================================================ */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: 24px;
    background: var(--paper);
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 0;
    background: var(--paper);
    border: none;
    box-shadow: none;
}

.login-header {
    text-align: left;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.login-header .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    font-style: normal;
}

.login-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.login-header p {
    font-size: 0.85rem;
    color: var(--ink-2);
}

.login-card .btn-primary {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
}

/* ============================================================================
   Alt menü (açılır)
   ============================================================================ */
button.menu-item {
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
}

.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-toggle span {
    flex-grow: 1;
    text-align: left;
}

.dropdown-caret {
    font-size: 0.7rem !important;
    transition: transform 0.15s ease;
    margin-left: auto;
    width: auto !important;
}

.dropdown-toggle.open .dropdown-caret {
    transform: rotate(180deg);
}

/* Alt öğeler dikey bir çizgiyle ana öğeye bağlanıyor: girinti tek başına
   hangi başlığa ait olduklarını yeterince anlatmıyordu. */
.dropdown-menu-list {
    list-style: none;
    margin: 2px 0 2px 22px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
    display: none;
    flex-direction: column;
    gap: 1px;
}

.dropdown-menu-list.open {
    display: flex;
}

.menu-item.sub-menu-item {
    padding: 6px 10px;
    font-size: 0.83rem;
    border-left-width: 0;
}

.menu-item.sub-menu-item.active {
    border-left-width: 0;
}

/* ============================================================================
   Tablo içi işlem düğmeleri
   ============================================================================ */
/* Eskiden bu seçiciler satır içi stilin METNİNİ arıyordu
   (`td[style*="text-align: right"]`) ve iki ayrı yazım için iki ayrı kural
   yazılmıştı — yani biri bir kez unutulmuş. Stiller yardımcı sınıflara
   taşınınca tek kural yetiyor ve boşluk farkı diye bir sorun kalmıyor. */
td.u-text-align-right,
td.actions-column {
    white-space: nowrap !important;
}

td.u-text-align-right button,
td.u-text-align-right a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ============================================================================
   Üst bar kullanıcı menüsü
   ============================================================================ */
.header-btn-logout:hover {
    background: var(--crit-soft) !important;
    color: var(--crit) !important;
}

.header-user-trigger:hover {
    background: var(--chrome-hover) !important;
}

.header-dropdown {
    box-shadow: var(--shadow-pop) !important;
    border-radius: var(--r-md) !important;
}

.header-dropdown a:hover,
.header-dropdown button:hover {
    background: var(--sunken) !important;
}

/* ============================================================================
   Alan adı yerleşimi — ortada içerik, sağda durum
   ----------------------------------------------------------------------------
   cPanel düzeni: sol menü (bağlam menüsü), orta içerik, sağda sitenin ve
   sunucunun durumu. Bilgi önce başlığın altında yatay bir şeritti ve bir
   özelliğe girildiğinde yukarı kayıp kayboluyordu — oysa "DNS yönlendi mi",
   "SSL var mı" soruları asıl İŞ YAPILIRKEN sorulanlar.

   Renk, alanın TÜRÜNE değil DEĞERİNE bağlı: "SSL" her zaman mavi olsaydı
   renk hiçbir şey söylemez, yalnız süslerdi. Sorunsuz alan nötr duruyor.
   ============================================================================ */
.domain-layout {
    display: grid;
    /* UI-530: sağ sütun 288px'ten 248px'e indirildi (operatör isteği).
       Sütun sabit genişlikte ve içeriği kısa etiket/değer çiftleri; 288px
       hem gereğinden geniş duruyordu hem de asıl içeriğin (sol sütun, tablo
       ve formlar) alanını yiyordu. 248px, en uzun satırın ("Turkticaret.net
       Yazilim Hizmetleri Sanayi ve Ticaret A.S." gibi tescil kuruluşu adı)
       zaten sarılarak gösterildiği bir sütun için yeterli. */
    grid-template-columns: minmax(0, 1fr) 248px;
    gap: 22px;
    align-items: start;
}

.domain-main {
    min-width: 0;   /* grid hücresinde uzun tablolar taşmasın */
}

/* 1.100.7: Trafik & Analiz açıkken sağ bilgi sütunu yok, içerik tam genişlik
   (app.js openDomainFeature 'bandwidth' → .genis-ekran; panoya dönüşte kalkar). */
.domain-layout.genis-ekran { grid-template-columns: minmax(0, 1fr); }
.domain-layout.genis-ekran > .domain-aside { display: none; }

/* Yapışkan: uzun bir ekranda aşağı inildiğinde de görünür kalıyor. Kaydırma
   kabı .content-container, bu yüzden top ona göre ölçülüyor. */
.domain-aside {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Sağ sütunun tepesindeki geri dönüş. Kart DEĞİL: kartlar okunacak bilgi
   taşıyor, bu bir eylem — aynı kutu diliyle çizilseydi ikisi karışırdı. */
.domain-aside-back {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.domain-aside-back:hover {
    background: var(--sunken);
    color: var(--ink);
}

.domain-aside-back i {
    color: var(--ink-3);
}

.domain-info-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.domain-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--ink-2);
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
}

.domain-info-title i {
    color: var(--ink-3);
    font-size: 0.82rem;
}

.domain-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    min-width: 0;
}

.domain-fact + .domain-fact {
    border-top: 1px solid var(--line);
}

.domain-fact-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-3);
}

.domain-fact-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* İkinci satır: IP adresi, sertifika türü, kayıt şirketi… Değerin kendisi
   değil AÇIKLAMASI olduğu için sönük ve küçük. */
.domain-fact-sub {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

/* Gösterge noktası. Parlamıyor, yanıp sönmüyor: bir uyarı ışığı değil,
   okunacak bir durum. */
.domain-fact-value::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink-3);
}

.domain-fact.is-ok    .domain-fact-value { color: var(--ok); }
.domain-fact.is-warn  .domain-fact-value { color: var(--warn); }
.domain-fact.is-crit  .domain-fact-value { color: var(--crit); }
.domain-fact.is-ok    .domain-fact-value::before { background: var(--ok); }
.domain-fact.is-warn  .domain-fact-value::before { background: var(--warn); }
.domain-fact.is-crit  .domain-fact-value::before { background: var(--crit); }

/* UI-660: ilgili ekranı açan kutu. Yalnız açılabilen ekranlarda (app.js
   factBaglantilari); imleç ve hafif zemin tıklanabilirliği söylüyor. */
.domain-fact.is-link { cursor: pointer; border-radius: var(--r-sm); }
.domain-fact.is-link:hover { background: var(--bg-main); }
.domain-fact.is-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.domain-fact.is-link .domain-fact-label::after {
    content: ' ›';
    color: var(--ink-3);
}

/* Nötr alanlar (PHP sürümü, belge kökü) noktasız: nokta bir DURUM işareti,
   her satıra konsaydı anlamını yitirirdi. */
.domain-fact.is-plain .domain-fact-value::before { display: none; }

.domain-fact.is-loading .domain-fact-value {
    color: var(--ink-3);
    font-weight: 500;
}
.domain-fact.is-loading .domain-fact-value::before {
    background: var(--line-strong);
}

/* Disk doluluk çubuğu. Yalnız KOTA VARSA gösteriliyor — kotasız hesapta bir
   doluluk çubuğu, olmayan bir sınırı varmış gibi okuturdu. */
.domain-fact-bar {
    display: block;
    height: 5px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--sunken-2);
    overflow: hidden;
}

.domain-fact-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--ok);
    transition: width 0.25s ease;
}

.domain-fact.is-warn .domain-fact-bar i { background: var(--warn); }
.domain-fact.is-crit .domain-fact-bar i { background: var(--crit); }

/* Alt alan adı formu: oluşturma sırasında yapılan işler ve ilerleme kutusu
   (#subdomain-ilerleme; kutu form bölümünün içinde, yan boşluk istemiyor). */
.subdomain-adimlar {
    list-style: none;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sunken);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.subdomain-adimlar li { display: flex; gap: 8px; align-items: baseline; }
.subdomain-adimlar li + li { margin-top: 6px; }
.subdomain-adimlar i { color: var(--primary); width: 14px; text-align: center; }
#subdomain-ilerleme .dom-kurulum { margin: 0; }

/* Alan adı ekleme ilerlemesi (#domain-add-progress). Görünürlük yalnız
   `u-display-none` sınıfıyla; JS satır içi `display` yazmıyor. */
.dom-kurulum {
    margin: 0 20px 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    background: var(--sunken);
}
.dom-kurulum-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}
.dom-kurulum-baslik i { color: var(--primary); }
.dom-kurulum-sure {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.dom-kurulum-cubuk {
    position: relative;
    height: 8px;
    margin: 10px 0 8px;
    border-radius: 999px;
    background: var(--sunken-2);
    overflow: hidden;
}
.dom-kurulum-cubuk i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.6s ease;
}
/* Çubuk %90'da beklerken de işin sürdüğü görülsün: üzerinde kayan parıltı. */
.dom-kurulum-cubuk i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: domKurulumParilti 1.4s linear infinite;
}
@keyframes domKurulumParilti {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
.dom-kurulum-not {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* SSL ekranında kutu kartın içinde; formdaki yan boşluk gerekmiyor. */
.ssl-ilerleme .dom-kurulum { margin: 0 0 14px; }

/* D1031 FM-A1: dosya yöneticisi bırakma alanı. Örtü yalnız dosya
   sürüklenirken (JS `fm-birakma-aktif` sınıfı) görünür; tıklamayı yutmasın
   diye `pointer-events: none` — bırakma olayı kartın kendisine düşüyor. */
.fm-birakma-alani { position: relative; }
.fm-birakma-ortu {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed var(--primary);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--primary-soft) 88%, transparent);
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 600;
    pointer-events: none;
}
.fm-birakma-ortu i { font-size: 1.6rem; }
.fm-birakma-alani.fm-birakma-aktif .fm-birakma-ortu { display: flex; }
.dom-kurulum.is-ok { border-left-color: var(--ok); }
.dom-kurulum.is-ok .dom-kurulum-baslik i { color: var(--ok); }
.dom-kurulum.is-ok .dom-kurulum-cubuk i { background: var(--ok); }
.dom-kurulum.is-bad { border-left-color: var(--crit); }
.dom-kurulum.is-bad .dom-kurulum-baslik i { color: var(--crit); }
.dom-kurulum.is-bad .dom-kurulum-cubuk i { background: var(--crit); }
.dom-kurulum.is-ok .dom-kurulum-cubuk i::after,
.dom-kurulum.is-bad .dom-kurulum-cubuk i::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
    .dom-kurulum-cubuk i { transition: none; }
    .dom-kurulum-cubuk i::after { animation: none; display: none; }
}

/* Alan adı listesinde SEÇİLİ satır. Sağ sütundaki kartın hangi siteyi
   gösterdiği satırdan da okunabilmeli; yoksa kullanıcı listeyi kaydırınca
   kartın neye ait olduğunu kaybeder. Vurgu sol şeritle: arka plan rengi
   zaten alt alan adı satırlarında kullanılıyor ve ikisi karışırdı. */
#domains-table-body tr[data-domain] {
    cursor: pointer;
}

#domains-table-body tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

#domains-table-body tr.is-selected > td {
    background: var(--primary-soft);
}

/* Dar ekranda sağ sütun içeriğin ALTINA iniyor. Yan yana sıkıştırmak iki
   sütunu da okunmaz yapardı. */
@media (max-width: 1180px) {
    .domain-layout {
        grid-template-columns: 1fr;
    }
    .domain-aside {
        position: static;
    }
}

/* ============================================================================
   Posta ekranı — sağ menü (tab-mail.php .mail-nav, mail.js showMailSection)
   ----------------------------------------------------------------------------
   Alan adı yerleşiminin iskeleti; sağ sütun burada durum değil GEZİNME
   taşıyor. Seçilen bölüm tek başına görünür, diğerleri `hidden`.
   ============================================================================ */
.mail-layout [data-mail-section][hidden] {
    display: none !important;   /* kartların u-display-flex'ini de ezmeli */
}

.mail-nav-items {
    display: flex;
    flex-direction: column;
}

.mail-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px 9px 11px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mail-nav-item + .mail-nav-item {
    border-top: 1px solid var(--line);
}

.mail-nav-item i {
    flex: 0 0 16px;
    text-align: center;
    color: var(--ink-3);
}

.mail-nav-item:hover {
    background: var(--sunken);
    color: var(--ink);
}

.mail-nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Seçili bölüm: renge ek olarak ŞEKİL (sol çizgi) — renk körlüğünde de
   ayırt edilir (UI-201 ile aynı ilke). */
.mail-nav-item[aria-current="true"] {
    background: var(--primary-soft);
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.mail-nav-item[aria-current="true"] i {
    color: var(--primary);
}

.mail-nav-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bölüm gizliyken de görünmesi gereken sorun (ör. posta yığını kurulu
   değil). Yanıp sönmüyor: okunacak bir durum, alarm değil. */
.mail-nav-flag {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--crit);
}

.mail-nav-flag.is-warn {
    background: var(--warn);
}

/* Dar ekranda menü içeriğin ÜSTÜNE çıkıyor (altta kalsaydı bölüm seçmek
   için her seferinde sayfanın sonuna inmek gerekirdi) ve öğeler yan yana
   akan düğmelere dönüşüyor. */
@media (max-width: 1180px) {
    .mail-layout .mail-nav {
        order: -1;
    }
    .mail-nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px;
    }
    .mail-nav-item {
        width: auto;
        padding: 6px 11px;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
    }
    .mail-nav-item + .mail-nav-item {
        border-top: 1px solid var(--line);
    }
    .mail-nav-item[aria-current="true"] {
        border-color: var(--primary);
    }
}

/* ============================================================================
   Alan adı merkezi — özellik döşemeleri
   ----------------------------------------------------------------------------
   Bunlar GERÇEKTEN tıklanabilir. Kartlardan farklı davranmaları bilinçli:
   panelde "üstüne gelince tepki veren şey" = "tıklanabilir şey".
   ============================================================================ */
.domain-hub-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    margin: 24px 2px 10px;
}
.domain-hub-group-title:first-child { margin-top: 2px; }
.domain-hub-group-title i { color: var(--ink-3); }

.domain-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 10px;
}

.domain-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    font: inherit;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.domain-tile:hover {
    background: var(--sunken);
    border-color: var(--line-strong);
}

.domain-tile-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 0.95rem;
    color: var(--ink-2);
    background: var(--sunken-2);
    transition: background-color 0.12s ease, color 0.12s ease;
}
.domain-tile:hover .domain-tile-icon {
    background: var(--primary-soft);
    color: var(--primary);
}

.domain-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-grow: 1;
}
.domain-tile-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
}
.domain-tile-desc {
    font-size: 0.78rem;
    color: var(--ink-2);
    line-height: 1.4;
}

.domain-tile-arrow {
    flex-shrink: 0;
    color: var(--ink-3);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.domain-tile:hover .domain-tile-arrow {
    opacity: 1;
}

/* ============================================================================
   Alan adı merkezi — yapay zekâ bağlantısı şeridi
   ----------------------------------------------------------------------------
   Panodaki TEK vurgulu öğe. Vurgu bir süs değil, bir sıralama: bu özelliğin
   rakip panellerde karşılığı yok ve kullanıcı onu aradığını bilmiyor — kendi
   başına aramayacağı bir şeyi ancak ekran gösterebilir.

   Vurgu yalnız BİR yerde kullanılıyor. İkinci bir şerit eklendiği anda ikisi
   de sıradanlaşır; o yüzden sınıf adı genel değil (`.domain-ai-hero`).

   Renk markadan (--primary) geliyor, sabit bir degradeden değil: --primary
   çalışma zamanında bayi markasıyla eziliyor ve sabit renk o markanın
   yanında yabancı durur.
   ============================================================================ */
.domain-ai-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 18px;
    margin-bottom: 4px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* Genel bakıştaki kopya bir <a> (hedef sabit bir adres, alan adı henüz belli
   değil). Bağlantı süslemesi ve bağlantı rengi kapatılıyor: şerit bir metin
   bağlantısı gibi değil, panodakiyle AYNI şey gibi görünmeli. */
a.domain-ai-hero,
a.domain-ai-hero:hover {
    text-decoration: none;
    color: inherit;
}

.domain-ai-hero:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}

.domain-ai-hero-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 1.25rem;
    color: #fff;
    background: var(--primary);
}

.domain-ai-hero-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex-grow: 1;
}

.domain-ai-hero-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.domain-ai-hero-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}
/* Rozet: "bu neden burada" sorusunun tek satırlık cevabı. */
.domain-ai-hero-badge {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-ink);
    background: var(--paper);
    border: 1px solid var(--primary-line);
    border-radius: 999px;
    padding: 2px 8px;
}

.domain-ai-hero-desc {
    font-size: 0.82rem;
    color: var(--ink-2);
    line-height: 1.45;
}

.domain-ai-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 2px;
}
.domain-ai-hero-point {
    font-size: 0.76rem;
    color: var(--ink-2);
}
.domain-ai-hero-point i {
    color: var(--ok);
    font-size: 0.72rem;
    margin-right: 4px;
}

/* Durum hâli: tanıtım maddelerinin yerini alan tek satır (app.js açıyor).
   Nokta CSS'ten geliyor, metinden değil — ekran okuyucu "yeşil nokta" diye
   bir şey okumamalı, satırın kendisi zaten "N etkin bağlantı" diyor. */
.domain-ai-hero-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ok);
}
.domain-ai-hero-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
}

/* Gerçek bir düğme DEĞİL (şeridin tamamı düğme); düğme GÖRÜNÜMLÜ bir etiket. */
.domain-ai-hero-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
}
.domain-ai-hero:hover .domain-ai-hero-cta {
    background: color-mix(in srgb, var(--primary) 88%, #000);
}

/* Dar ekranda şerit alt alta diziliyor: yan yana kalsaydı çağrı metni
   sıkışıp okunmaz genişliğe inerdi. */
@media (max-width: 720px) {
    .domain-ai-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .domain-ai-hero-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   Uygulama kurucu — katalog kartları
   ----------------------------------------------------------------------------
   Alan adı merkezindeki `.domain-tile` diliyle AYNI: kullanıcı iki ekran
   arasında geçerken kart görünümünün değişmesi, ikisinin farklı şeyler
   olduğunu düşündürürdü.
   ============================================================================ */
.app-catalog-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    font: inherit;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.app-catalog-tile:hover {
    background: var(--sunken);
    border-color: var(--line-strong);
}
/* Seçili kart: hangi formun açık olduğu ızgaraya bakınca da anlaşılsın.
   Form sayfanın altında açıldığı için, işaret olmadan kullanıcı hangi
   uygulamayı seçtiğini kaydırınca unutabiliyordu. */
.app-catalog-tile.is-selected {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.app-catalog-tile-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 1.15rem;
    background: color-mix(in srgb, currentColor 11%, transparent);
}

.app-catalog-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.app-catalog-tile-title {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--ink);
}
.app-catalog-tile-desc {
    font-size: 0.76rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.app-catalog-tile-tag {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
}

.domain-feature-subheader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.domain-feature-crumb {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

/* ============================================================================
   Sistem bilgisi listesi
   ============================================================================ */
.system-info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.sys-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-width: 0;
}
.sys-info-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sys-info-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sys-info-label {
    font-size: 0.75rem;
    color: var(--ink-2);
}
.sys-info-value {
    font-size: 0.86rem;
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* İkon zeminleri — dekoratif değil, satırı tararken ayırt edici. */
.bg-soft-primary { background: var(--primary-soft); color: var(--primary); }
.bg-soft-success { background: var(--ok-soft); color: var(--ok); }
.bg-soft-warning { background: var(--warn-soft); color: var(--warn); }
.bg-soft-info { background: var(--info-soft); color: var(--info); }

/* ============================================================================
   Hizmet özeti döşemeleri
   ============================================================================ */
.service-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.service-stat-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.service-stat-tile:hover {
    background: var(--sunken);
    border-color: var(--line-strong);
}

.service-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.tile-primary .service-stat-icon { background: var(--primary-soft); color: var(--primary); }
.tile-warning .service-stat-icon { background: var(--warn-soft); color: var(--warn); }
.tile-success .service-stat-icon { background: var(--ok-soft); color: var(--ok); }

.service-stat-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.service-stat-label {
    font-size: 0.82rem;
    color: var(--ink-2);
    order: 2;
}
/* Sayı önce geliyor: kullanıcı bu listede etiketi değil DEĞERİ tarıyor. */
.service-stat-value {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 700;
    order: 1;
}
.service-stat-arrow {
    font-size: 0.75rem;
    color: var(--ink-3);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.service-stat-tile:hover .service-stat-arrow {
    opacity: 1;
}

/* ============================================================================
   Genel Sekme Sistemi (.dp-tabgroup) — PROJE GENELİ
   ----------------------------------------------------------------------------
   Amaç: alt alta dizilen kartların bulunduğu her sayfayı, ayrı JS yazmadan
   yalnız markup ile sekmelere ayırabilmek. Tek olay dinleyici core.js'te.

   Kullanım:
     <div class="dp-tabgroup">
       <div class="dp-tabnav">
         <button class="dp-tab active" data-tab-target="pane-a">Sekme A</button>
         <button class="dp-tab"        data-tab-target="pane-b">Sekme B</button>
       </div>
       <div class="dp-tabpanes">
         <div class="dp-tabpane active" id="pane-a"> ... </div>
         <div class="dp-tabpane"        id="pane-b"> ... </div>
       </div>
     </div>

   Kurallar:
   - Başlangıçta görünecek sekme ve panel "active" ile işaretlenir (JS'siz).
   - Butonlar .dp-tabnav'ın, paneller .dp-tabpanes'in DOĞRUDAN çocuğu olmalı;
     `:scope >` seçicisi iç içe sekme gruplarını birbirine karıştırmaz.
   - Bir sekme gösterildiğinde `data-tab-onshow="fnAdi"` varsa fnAdi() çağrılır
     (tembel veri yükleyen sayfalar için) — yalnız UI-105 izin listesindeyse
     (core.js `runTabOnShow` → `resolveHandler`, D1017 QA-1055).
   ============================================================================ */
.dp-tabgroup { margin-bottom: 20px; }

.dp-tabnav {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.dp-tabnav::-webkit-scrollbar { height: 3px; }
.dp-tabnav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.dp-tab {
    background: none;
    border: none;
    padding: 9px 13px;
    font-size: 0.86rem;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.dp-tab:hover { color: var(--ink); }
.dp-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.dp-tab .dp-tab-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--sunken-2);
    color: var(--ink-2);
}
.dp-tab.active .dp-tab-badge { background: var(--primary-soft); color: var(--primary-ink); }

.dp-tabpane { display: none; }
.dp-tabpane.active { display: block; }

/* --------------------------------------------------------------------------
   Açılır liste (dropdown) varyantı — üstte ikinci bir menü çubuğu KOYMADAN
   bölüm seçmek için. Sol menü zaten gezinmeyi sağlıyor; bu yalnız SAYFA İÇİ
   bölüm seçicisi. Çok bölüm olsa da tek satır kalır, taşmaz.

   Kullanım (dp-tabnav yerine):
     <div class="dp-tabselect-wrap">
       <label for="x-sel">Bölüm</label>
       <select id="x-sel" class="dp-tabselect">
         <option value="pane-a">A</option>
         <option value="pane-b">B</option>
       </select>
     </div>
   Paneller yine .dp-tabpanes > .dp-tabpane (biri .active).
   -------------------------------------------------------------------------- */
.dp-tabselect-wrap { margin-bottom: 18px; max-width: 380px; }
.dp-tabselect-wrap label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dp-tabselect {
    width: 100%;
    padding: 9px 36px 9px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8781' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dp-tabselect:hover { border-color: var(--ink-3); }
.dp-tabselect:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ============================================================================
   Duyarlı yerleşim
   ============================================================================ */
@media (max-width: 1024px) {
    .system-info-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    #mobile-toggle {
        display: block !important;
    }

    .sidebar {
        position: fixed;
        left: -232px;
        top: 0;
        bottom: 0;
        transition: left 0.2s ease;
        z-index: 1000;
        box-shadow: var(--shadow-pop);
    }

    .sidebar.mobile-active {
        left: 0;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(27, 27, 25, 0.3);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    body {
        overflow-x: hidden;
    }

    .main-wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    .top-nav {
        padding: 0 18px;
    }

    .page-desc {
        padding: 8px 18px;
    }

    .content-container {
        padding: 20px 18px 32px;
    }

    .main-footer {
        padding: 12px 18px;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* OI-53: TABLOLAR KART OLUR. 768px altında yatay kaydırma yerine her
       satır bir kart, her hücre "Başlık: değer" satırı. Başlık metni hücreye
       pages/_shared/mobil-tablo.js tarafından `data-label` olarak yazılıyor
       (thead'deki th ile aynı sıra). colspan'lı satır (boş durum, yükleniyor)
       düz blok kalıyor. Tabloya yalnız betik `.mobil-kart` koyuyor: başlıksız
       tablo (thead yok) eskisi gibi kaydırılır. */
    .table-responsive table.mobil-kart thead {
        display: none;
    }
    .table-responsive table.mobil-kart,
    .table-responsive table.mobil-kart tbody,
    .table-responsive table.mobil-kart tr,
    .table-responsive table.mobil-kart td {
        display: block;
        width: 100%;
    }
    .table-responsive table.mobil-kart tr {
        border-bottom: 1px solid var(--line);
        padding: 6px 0;
    }
    .table-responsive table.mobil-kart td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 14px;
        border: 0;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    .table-responsive table.mobil-kart td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--ink-2);
        text-transform: uppercase;
    }
    .table-responsive table.mobil-kart td[colspan] {
        display: block;
        text-align: left;
    }

    .top-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px !important;
    }

    .page-desc {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    /* Sağ grup (dil, güncelleme rozeti, IP, kullanıcı) dar ekranda SARSIN.
       Tek satırlık flex içinde `width:100%` alan IP rozeti satıra sığmıyor
       ve sağdan kesiliyordu ("31.186." — 390px'te tarayıcıda ölçüldü). */
    .top-nav > div:last-child {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    /* Doğal genişliğinde: büyüyüp diğer öğeleri gereksiz yere alt satıra
       itmesin (768'de dört öğe sığıyordu), küçülüp yine kesilmesin — sığmazsa
       BÜTÜN olarak alt satıra geçer. */
    .server-badge {
        flex: 0 0 auto;
        justify-content: center;
    }

    /* Alt satıra düşen kullanıcı bölümünde masaüstü ayracı (sol çizgi +
       20px girinti) boşlukta asılı kalıyordu. */
    .top-nav > div:last-child > .header-user-dropdown-container {
        border-left: 0;
        padding-left: 0;
    }

    /* Kullanıcı bölümü (grubun SON öğesi) hangi satıra düşerse düşsün SAĞA
       yaslı: menüsü sağ kenara hizalı ve 180px; sola yaslıyken EN 360'ta
       soldan 15px taşıyordu. `:last-child` ŞART — dil seçicinin kabı da aynı
       sınıfı taşıyor ve sağa itilince kendi menüsü sağdan taşıyordu. */
    .top-nav > div:last-child > .header-user-dropdown-container:last-child {
        margin-left: auto;
    }

    /* Dil menüsü düğmenin SAĞ kenarına hizalı ve 180px; düğme ekranın sol
       kenarındayken menü soldan dışarı taşıyordu (-40px, ölçüldü). */
    #lang-dropdown-menu {
        right: auto;
        left: 0;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-header .btn {
        width: 100%;
    }

    table th, table td {
        padding: 9px 10px;
        font-size: 0.82rem;
    }

    .content-container {
        padding: 16px 12px 28px !important;
    }

    .card {
        padding: 14px !important;
    }

    /* Kontrol paneli ızgarasını tek kolona indir */
    #dashboard > div.u-grid-template-columns-2fr-1fr {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .content-container {
        padding: 12px 10px 24px !important;
    }
    .card {
        padding: 12px !important;
    }
    .modal-body, .modal-header {
        padding: 14px !important;
    }
    .modal-footer {
        padding: 12px 14px !important;
    }
    .sys-stat {
        gap: 12px !important;
    }
    #mobile-toggle {
        padding: 6px 10px !important;
        font-size: 1.4rem !important;
    }
    .dp-tab { padding: 8px 11px; font-size: 0.82rem; }
    .dp-tabselect-wrap { max-width: none; }

    /* İzleme/uyarı kartlarını tek kolona indir */
    #subtab-monitor-charts > div.u-grid-template-columns-repeat-auto-fit-cc8b5c {
        grid-template-columns: 1fr !important;
    }
    #subtab-monitor-alerts div.u-grid-template-columns-repeat-auto-fit-a9db2f {
        grid-template-columns: 1fr !important;
    }
    .modal-body div.u-grid-template-columns-1fr-1fr {
        grid-template-columns: 1fr !important;
    }

    /* Küçük formlar/düğme çubukları sarsın */
    form.u-display-flex,
    .form-group > div.u-display-flex,
    .card-header > div.u-display-flex,
    .card-header form {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .card-header > div.u-display-flex button,
    .card-header > div.u-display-flex a,
    .card-header > div.u-display-flex label {
        flex-grow: 1 !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================================
   Yazdırma — destek ekibi tablo çıktısı alıyor
   ============================================================================ */
@media print {
    .sidebar, .top-nav, .main-footer, .toast-container, .btn { display: none !important; }
    body, .main-wrapper { display: block; overflow: visible; height: auto; }
    .content-container { display: block !important; overflow: visible; padding: 0; }
    .card { break-inside: avoid; border-color: #ccc; }
}

/* ============================================================================
   İpucu (tooltip) — anında, stilli, kırpılmaz
   ----------------------------------------------------------------------------
   Neden var: ikon-yalnız düğmeler (özellikle tablolardaki işlem sütunu) ne
   yaptığını yalnız ikonla anlatıyor. Tarayıcının kendi `title` ipucu ~1 sn
   gecikmeli ve stilsiz. Bu sistem, panel içindeki HER `title`'ı ilk hover'da
   otomatik olarak bu balona çevirir (core.js) — sayfa sayfa iş yok.

   Balon `position:fixed` ve <body> altına eklenir; `.table-responsive`'in
   overflow'u onu KIRPMAZ. Konum core.js'te hesaplanır.
   ============================================================================ */
.dp-tooltip {
    position: fixed;
    z-index: 4000;
    max-width: 260px;
    padding: 6px 10px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
    pointer-events: none;
    opacity: 0;
    /* Anında görünsün ("direkt") ama kaba olmasın: çok kısa yumuşama. */
    transition: opacity 0.08s ease;
    white-space: normal;
    overflow-wrap: break-word;
}
.dp-tooltip.is-visible { opacity: 1; }

/* Ok — balonun altında (üstte konumlandığında) ya da üstünde (altta). */
.dp-tooltip::after {
    content: '';
    position: absolute;
    left: var(--tip-arrow, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.dp-tooltip.tip-top::after    { top: 100%;  border-top-color: var(--ink); }
.dp-tooltip.tip-bottom::after { bottom: 100%; border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .dp-tooltip { transition: none; }
}

/* ============================================================================
   Durum sınıfları — satır içi stilden gelenler
   ============================================================================
   Bu sınıflar, JavaScript'in şablon dizesi içinde ürettiği KOŞULLU stillerin
   yerine geçiyor:

       style="color:${ok ? 'var(--success)' : 'var(--danger)'}"
       → class="${ok ? 'is-ok' : 'is-bad'}"

   Neden sınıf: CSP'de stil ÖZNİTELİKLERİ için nonce ya da hash yok, tek
   anahtar `'unsafe-inline'`. Tek bir dinamik `style=""` bile o direktifi
   yerinde tutuyor ve panelin TAMAMI için satır içi stili açık bırakıyordu.

   Değerler kapalı bir kümeden geliyordu (iyi/kötü/uyarı, önem düzeyi), yani
   sınıfa çevrilmeleri bilgi kaybı değil — aksine, rengin ne ANLAMA geldiği
   artık kodda yazılı.
   ============================================================================ */
.is-ok    { color: var(--success, #16a34a); }
.is-bad   { color: var(--danger, #dc2626); }
.is-warn  { color: var(--warning, #d97706); }
.is-muted { color: var(--text-muted); }
.is-plain { color: inherit; }

.badge-ok    { background: rgba(16, 185, 129, 0.15);  color: #10b981; }
.badge-bad   { background: rgba(239, 68, 68, 0.12);   color: #ef4444; }
.badge-warn  { background: rgba(245, 158, 11, 0.15);  color: #b7791f; }
.badge-muted { background: rgba(107, 114, 128, 0.12); color: var(--text-muted); }

/* Önem düzeyi — denetim kaydı, bildirimler, WordPress zafiyet listesi.
   Kenarlık rengi de aynı değişkenden gelsin diye `currentColor` yerine
   doğrudan yazılıyor: `border-left-color` metin rengini miras almaz. */
.sev-info     { color: var(--primary, #2563eb); }
.sev-success  { color: var(--success, #16a34a); }
.sev-warning  { color: var(--warning, #d97706); }
.sev-danger   { color: var(--danger,  #dc2626); }
.sev-muted    { color: var(--text-muted); }
.bl-info    { border-left-color: var(--primary, #2563eb); }
.bl-success { border-left-color: var(--success, #16a34a); }
.bl-warning { border-left-color: var(--warning, #d97706); }
.bl-danger  { border-left-color: var(--danger,  #dc2626); }
.bl-muted   { border-left-color: var(--text-muted); }

/* Durum noktası — Docker konteyner listesi. Eskiden satır içi stildi ve
   rengi bir ternary belirliyordu. */
.dot     { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.dot-on  { background: var(--success, #16a34a); }
.dot-off { background: var(--text-muted); }

/* utilities.css ÜRETİLEN bir dosya ve yalnız satır içi stillerden besleniyor.
   Aşağıdaki üç sınıf ise elle yazılan koşullu ifadelerde kullanılıyor
   (`${hasSsl ? 'u-cursor-pointer' : 'u-cursor-not-allowed'}`), yani üretecin
   tarayacağı bir `style=""` içinde hiç geçmiyorlar. Üretilen dosyaya elle
   eklenselerdi bir sonraki üretimde sessizce silinirlerdi. Çiftlenmiş seçici,
   utilities.css'teki kardeşleriyle aynı özgüllükte kalsınlar diye. */
.u-cursor-not-allowed.u-cursor-not-allowed { cursor: not-allowed; }
.u-min-width-70px.u-min-width-70px         { min-width: 70px; }
.u-height-18px.u-height-18px               { height: 18px; }

/* Önem düzeyi şeridi — WordPress güvenlik bulguları. Renk ARKA PLAN olarak
   kullanılıyor (ince bir dikey çubuk), metin rengi olarak değil. */
.bg-danger  { background: var(--danger,  #dc2626); }
.bg-warning { background: var(--warning, #d97706); }
.bg-muted   { background: var(--text-muted); }

/* Denetim bulgusu ve bildirim satırı — sol kenarlık rengi `bl-*` sınıfından
   gelir, kutunun kendisi buradan. Eskiden ikisi de satır içi stildi. */
.audit-row {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.notif-row {
    border-left: 3px solid var(--text-muted);
    background: transparent;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    margin-bottom: 8px;
}
.notif-row.is-unread { background: var(--surface-muted); }

/* Kurulu olmayan PHP sürümü — `<option disabled>` */
.is-uninstalled { color: var(--text-dark); }

/* `.badge-info` üç yerde KULLANILIYORDU ama hiç TANIMLI DEĞİLDİ; rozet
   varsayılan görünümüyle çiziliyordu. Satır içi stilleri sınıflara taşırken
   ortaya çıktı. */
.badge-info { background: rgba(59, 130, 246, 0.12); color: var(--primary, #2563eb); }

/* Uygulama kataloğu — marka renkleri (eskiden APP_ICONS içinde satır içiydi) */
.app-wordpress  { color: #21759b; }
.app-joomla     { color: #5091cd; }
.app-drupal     { color: #0678be; }
.app-prestashop { color: #df0067; }
.app-concrete   { color: #ef4444; }
.app-grav       { color: #1a1a1a; }
.app-bludit     { color: #2f6f9f; }
.app-matomo     { color: #3450a3; }
.app-nextcloud  { color: #0082c9; }
.app-piwigo     { color: #ff7700; }
.app-roundcube  { color: #37beff; }
.app-osticket   { color: #0f7ac7; }
.app-dolibarr   { color: #235183; }
.app-akaunting  { color: #6da252; }
.app-freshrss   { color: #ff7f00; }
.app-opencart   { color: #1f8ecd; }
.app-phpmyadmin { color: #6c78af; }
.app-adminer    { color: #0ea5e9; }
.app-laravel    { color: #ff2d20; }

/* utilities.css ÜRETİLEN dosya; aşağıdakiler elle yazılan koşullu
   ifadelerden geliyor ve orada bir `style=""` içinde geçmiyorlar. */
.u-opacity-85.u-opacity-85       { opacity: .85; }
.u-margin-left-0.u-margin-left-0 { margin-left: 0; }

/* Önem şeridi ve çubuk grafik — köşe ölçeğe bağlandı (--r-sm). Eskiden 3px
   satır içi yazılıydı; ölçek dışı bir değer, yan yana duran kutuların
   köşelerini tutarsız yapıyor (docs/TASARIM.md, "Üç kural"). */
.sev-strip { flex: 0 0 6px; border-radius: var(--r-sm); }
.chart-bar { border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* Servis kartı etiketleri — kategori ve lisans çipleri (eskiden satır içi). */
.chip-cat, .chip-lic {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.chip-cat { color: #fff; }
.cat-web     { background: #10b981; }
.cat-db      { background: #3b82f6; }
.cat-cache   { background: #ef4444; }
.cat-lang    { background: #8b5cf6; }
.cat-tool    { background: #6b7280; }
.cat-default { background: var(--primary, #2563eb); }

/* --- Erişilebilirlik ------------------------------------------------------
   "İçeriğe atla" bağlantısı: normalde görünmez, odaklanınca ortaya çıkar.
   `display:none` KULLANILMAZ — gizlenen öğe odak sırasından da düşer ve
   bağlantı hiç kullanılamaz hâle gelirdi. Ekran dışına taşımak, öğeyi
   erişilebilirlik ağacında tutarken görsel olarak gizler. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* =============================================================================
   RTL (sağdan sola) desteği
   -----------------------------------------------------------------------------
   `<html dir="rtl">` tek başına YETMEZ ve bu, RTL desteğinin en sık yapılan
   yanlışıdır: tarayıcı metin akışını çevirir ama düzeni çevirmez. Sonuçta
   Arapça metin sağdan sola akarken kenar çubuğu solda, ikonlar yanlış tarafta
   ve girintiler ters kalır — panel okunur görünür ama kullanılamaz.
   Bu blok, YÖNE BAĞLI kenarlıkları ve boşlukları çeviriyor.

   Yalnız yön bilgisi taşıyan kurallar burada. Simetrik olan her şey (renk,
   yazı tipi, yükseklik) dokunulmadan kalıyor: hepsini kopyalamak, iki ayrı
   biçem dosyası tutmak ve birinin geride kalması demekti.
   ============================================================================= */
[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--line);
}

/* Kenar çubuğu mobilde ekran dışına SOLDAN kayıyordu; RTL'de sağdan kaymalı,
   aksi halde açılış animasyonu ekranın dışına doğru gider. */
@media (max-width: 900px) {
    [dir="rtl"] .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    [dir="rtl"] .sidebar.is-open {
        transform: translateX(0);
    }
}

/* Tablo başlıkları ve hücreler: `text-align: left` yönü takip etmiyor. */
[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

/* Yazı yönünden BAĞIMSIZ kalması gerekenler.
   Alan adı, IP, komut ve kod her zaman soldan sağa okunur; RTL bağlamda
   ters çevrilirse "example.com" → "moc.elpmaxe" gibi görünür (karakterler
   değil, parçalar yer değiştirir) ve kullanıcı yanlış değer kopyalar. */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .u-font-family-monospace {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

/* ============================================================================
   JS'in ürettiği bileşenler — eskiden `el.style = '...'` ile kuruluyordu
   ============================================================================

   Dokuz yerde stil, öğe oluşturulduktan sonra `el.style = 'a:b; c:d'` ile
   TEK SEFERDE atanıyordu. Bu atama CSSOM üzerinden gittiği için CSP'yi
   KIRMIYOR (style-src stil özniteliklerini denetler, `cssText` atamasını
   değil) — ama "panelde satır içi stil yok" kuralının gerekçesini deliyordu:
   stil yine tek bir dizede, bileşenden uzakta ve tema belirteçlerinden
   bağımsız yaşıyordu. `tests/test_inline_styles.php` de bu biçimi görmüyordu,
   yani sayaç sıfır derken dokuz tanesi kapsam dışıydı.

   TASARIM.md'nin kuralı burada net: bileşen görünümü ve tekrar eden desen
   `styles.css`'e anlamlı bir sınıf olarak yazılır, atomik yardımcılara değil.
   Dokuz çağrı yerinin karşılığı yedi sınıf: ikisi zaten birebir aynı stili
   iki yerde tekrarlıyordu (FTP eylem düğmesi ve dosya yolu bağlantısı).
   ========================================================================= */

/* services.js — servis durum kartı */
.service-card {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    background: var(--bg-card);
    transition: background 0.2s;
}

/* ftp.js — açılır menüdeki eylem düğmesi (iki çağrı yeri) */
.dropdown-action-btn {
    text-align: left;
    padding: 6px 10px;
    font-size: 0.82rem;
    background: transparent;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: var(--r-sm);
    transition: background 0.2s;
}

/* filemanager.js — gömülü düzenleyicinin kabı */
.editor-shell {
    height: 450px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
}

/* logs.js — günlük çıktısı */
.log-pre {
    margin: 0;
    font-family: monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-all;
    /* Sabit #a9b7c6 yerine belirteç: tema değiştiğinde bu da değişsin. */
    color: var(--text-muted);
}

/* advanced_features.js — etiket/rozet satırı */
.chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-muted);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-color);
}

/* advanced_features.js — onay kutulu satır */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
}

/* --- `cssText` ile kurulan beş bileşen daha (UI-012) ---------------------
   Bunlar rapordaki dokuzun DIŞINDAydı: rapor yalnız `el.style = '...'`
   biçimini aramıştı, bunlar `el.style.cssText = '...'` kullanıyordu. Kapı
   iki biçimi birden ölçmeye başlayınca ortaya çıktılar — dar bir desenin
   nasıl "temiz" raporu ürettiğinin bir örneği daha. */

/* tickets.js — yazışmadaki tek mesaj balonu */
.ticket-msg {
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    line-height: 1.6;
    background: var(--bg-main);
    border-left: 3px solid var(--border-color);
}
/* Personel mesajı: kimin yazdığı bir bakışta ayırt edilebilmeli. */
.ticket-msg.is-staff {
    background: rgba(99, 102, 241, 0.07);
    border-left-color: var(--primary);
}

/* mail.js — ham başlık/kaynak dökümü */
.mail-raw-pre {
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
    font-size: 0.75rem;
    margin: 0;
    padding: 10px;
}

/* customers.js — yetki onay kutusunun etiketi (iki çağrı yeri) */
.perm-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

/* migration.js — alan eşleme satırı */
.migration-map-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr) auto;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}

/* Adresle gelinen bölümün kısa vurgusu (app.js:focusPageSection).
   Uzun bir sayfanın ortasına inen kullanıcı hangi kart için geldiğini
   görmeli; kaydırma tek başına bunu söylemiyor. */
.section-focus {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    transition: outline-color 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
    .section-focus { transition: none; }
}

/* ==========================================================================
   DNS bölge tablosu — İŞLEM sütunu ÜÇ SABİT YUVA
   ==========================================================================
   Satırlara göre değişen düğme kümesi (gerekli kayıtta "Sil" yok, isim
   sunucusu kaydında "Pasife Al" da yok) düğmeleri satır satır kaydırıyordu:
   göz aynı işlevi her satırda başka bir yerde arıyor ve bir üst satırın
   "Sil"ine basma riski doğuyordu.

   Yuvalar kayıt olmasa da yerini KORUYOR; boş yuvada "—" duruyor. Boşluk
   bırakmak yerine işaret koymak, eksikliği kasıtlı gösteriyor: kullanıcı
   düğmenin yüklenmediğini değil, o kayıt için olmadığını görüyor. */
.dns-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.dns-actions > .dns-action-slot {
    /* SABİT genişlik: içerik kadar büyüyen bir yuva hizalamayı bozar.
       Düğmeler yalnız simge (2026-11-04): 118px → 32px. */
    flex: 0 0 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dns-actions .dns-action-empty {
    color: var(--text-muted);
    /* Ekran okuyucu "—" okumasın: bilgi taşımıyor, yalnız yer tutuyor. */
    user-select: none;
}

@media (max-width: 720px) {
    /* Dar ekranda sabit yuva tabloyu taşırıyor; hizalama okunabilirlikten
       önce gelmez. */
    .dns-actions > .dns-action-slot { flex: 0 0 auto; }
    .dns-actions .dns-action-empty { display: none; }
}

/* UI-201: seçili sekme. Terminal / sağlık / izleme çubuklarının `active-subtab`
   sınıfının HİÇ CSS kuralı yoktu — etkin sekme gözle ayırt edilemiyordu. Durum
   artık aria-selected özniteliğinden okunuyor ve renge ek olarak ŞEKİL taşıyor
   (alt çizgi): renk körlüğünde ve düşük görmede de ayırt edilir. `.tab-btn`
   çubukları alt çizgiyi zaten satır içi yazıyor; bu kural yalnız `.btn` sekmeleri için. */
.btn[role="tab"][aria-selected="true"] {
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}

/* Alan adları sayfası: "Aktif" / "Çöp Kutusu" sekmelerindeki adet rozeti. */
.domains-tab-count {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
.domains-tab-count:empty { display: none; }
.tab-btn[aria-selected="true"] .domains-tab-count { background: var(--primary); color: #fff; }

/* UI-531: ekranın bölümleri sol menüde alt menü ------------------------------
   Girintili ve daha küçük: üst menüyle aynı ağırlıkta çizilseydi hangisinin
   sayfa hangisinin bölüm olduğu anlaşılmazdı. Sol kenardaki çizgi, listenin
   üstündeki menü öğesine ait olduğunu gösteriyor. */
.domain-submenu {
    list-style: none;
    margin: 2px 0 6px 0;
    padding: 0 0 0 26px;
    border-left: 2px solid var(--border-color);
    margin-left: 14px;
}
.domain-submenu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 5px 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
    line-height: 1.3;
}
.domain-submenu-item:hover { color: var(--text-main); background: rgba(99,102,241,0.06); }
.domain-submenu-item.active { color: var(--primary); font-weight: 600; }
/* UI-545: madde artık bir bağlantı (<a>); düğme görünümü korunuyor. */
a.domain-submenu-item { text-decoration: none; box-sizing: border-box; }

/* UI-545: bölüm seçilmeden açılan ekranın seçim listesi.
   UI-547: pano kutucuklarıyla (`.domain-hub-grid` + `.domain-tile`) AYNI
   görünüm; burada yalnız liste ve bağlantı farkları sıfırlanıyor. */
.domain-bolum-secici ul { list-style: none; margin: 0; padding: 0; }
.domain-bolum-secici li { min-width: 0; }
/* Yalnız İLK grup başlığı yukarı yaslı; sonrakiler (e-posta: iki grup) pano
   gibi bir önceki ızgaradan ayrık dursun. */
.domain-bolum-secici-baslik.domain-hub-group-title:first-child { margin-top: 2px; }
a.domain-bolum-secenek { text-decoration: none; color: inherit; height: 100%; box-sizing: border-box; }
a.domain-bolum-secenek:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* UI-548: sayfa bölüm seçicisi (app.js sayfaBolumSecicisi). Gizleme sınıf ve
   öznitelikle: sayfaların kendi sekme işlevlerinin satır içi stiline dokunmaz. */
.bolum-secici-acik > :not(.sayfa-bolum-secici):not(.modal-overlay):not(style):not(script) { display: none !important; }
[data-bs-gizli] { display: none !important; }
.sayfa-bolum-secici { display: block; margin-bottom: 6px; }
/* Seçim ekranında sağ menüdeki bir sekme seçili görünmesin: henüz seçilmedi. */
.bolum-secici-modu .srv-subnav .srv-tab.active,
.bolum-secici-modu .srv-subnav .srv-tab.active-subtab { background: none; color: var(--ink-2); font-weight: inherit; }
.bolum-secici-modu .srv-subnav .srv-tab.active i,
.bolum-secici-modu .srv-subnav .srv-tab.active-subtab i { color: var(--ink-3); }
.sayfa-bolum-geri {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
    font-size: 0.85rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.sayfa-bolum-geri:hover, .sayfa-bolum-geri:focus-visible { color: var(--primary); }
.domain-bolum-secenek .domain-tile-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* UI-534: alt bölümü olan menü öğesindeki ok ---------------------------------
   Sağa yaslı ve küçük: menünün kendi metniyle yarışmamalı. Açıkken 90 derece
   dönüyor — durum bilgisini ayrı bir ikonla değil aynı ikonun YÖNÜYLE
   vermek, iki ikonun birbiriyle çelişmesini imkânsız kılıyor. */
.domain-menu-caret {
    margin-left: auto;
    font-size: 0.68rem;
    opacity: 0.55;
    transition: transform 0.18s ease;
}
.domain-menu-caret.is-open {
    transform: rotate(90deg);
    opacity: 0.9;
}

/* =========================================================================
   UI-005 (2026-09-25): AÇ/KAPA ANAHTARININ CSS'İ HİÇ YOKTU.

   `tab-monitoring.php:75-78,96-99` onay kutusunu `u-opacity-0 u-width-0
   u-height-0` ile GÖRÜNMEZ yapıp görsel karşılık olarak
   `<span class="slider-round">` koyuyordu — ama `.switch-toggle` ve
   `.slider-round` için depoda TEK BİR KURAL YOKTU (styles.css, utilities.css,
   all.min.css, ace.css: sıfır eşleşme). Ekranda yalnız sabit renkli boş bir
   dikdörtgen vardı: ne topuz, ne `:checked` durumu, ne odak halkası.

   Bu iki anahtar Telegram ve e-posta uyarı kanallarını açıp kapatan TEK
   kontrol. Yönetici kanalın açık mı kapalı mı olduğunu göremiyor ve
   tıkladığında değişip değişmediğini anlayamıyordu — "uyarılar geliyor
   sanıyordum" arızasının en sessiz biçimi.
   ========================================================================= */
.switch-toggle .slider-round {
    inset: 0;
    background-color: var(--border-color);
    border-radius: var(--r-pill);   /* anahtar bir "pill"dir; ham 22px ölçek dışıydı */
    transition: background-color .2s ease;
    cursor: pointer;
}

/* Topuz */
.switch-toggle .slider-round::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
}

/* AÇIK durum: hem renk hem KONUM değişiyor — renk tek başına renk körlüğünde
   ayırt edilemez (erişilebilirlik). */
.switch-toggle input:checked + .slider-round {
    background-color: var(--success, #28a745);
}
.switch-toggle input:checked + .slider-round::before {
    transform: translateX(22px);
}

/* Klavye odağı GÖRÜNÜR olmalı: input gizli olduğu için odak halkasını
   slider taşıyor. */
.switch-toggle input:focus-visible + .slider-round {
    outline: 2px solid var(--primary, #0d6efd);
    outline-offset: 2px;
}

.switch-toggle input:disabled + .slider-round {
    opacity: .5;
    cursor: not-allowed;
}

/* --- Panel lisansı ekranı (LIC-101) -----------------------------------------
   Müşterinin ilk bakışta "lisansım çalışıyor mu" sorusunun cevabını görmesi
   için durum bir BANT olarak veriliyor; renk tek başına taşımıyor (ikon ve
   başlık da durumu söylüyor — renk körlüğü). */
.lic-intro {
    font-size: 0.88rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 16px;
}
.lic-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sunken);
}
.lic-banner-icon { font-size: 1.3rem; margin-top: 2px; color: var(--ink-3); }
.lic-banner-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.lic-banner-text { font-size: 0.85rem; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.lic-banner.is-ok   { background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 30%, #fff); }
.lic-banner.is-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, #fff); }
.lic-banner.is-crit { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 30%, #fff); }
.lic-banner.is-ok   .lic-banner-icon { color: var(--ok); }
.lic-banner.is-warn .lic-banner-icon { color: var(--warn); }
.lic-banner.is-crit .lic-banner-icon { color: var(--crit); }

.lic-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 20px;
    margin: 16px 0 0;
}
.lic-facts dt { font-size: 0.75rem; color: var(--ink-3); font-weight: 600; margin-bottom: 3px; }
.lic-facts dd { margin: 0; font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }

.lic-steps {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 0.87rem;
    color: var(--ink-2);
    line-height: 1.8;
}
.lic-input {
    max-width: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}
.lic-help { font-size: 0.8rem; color: var(--ink-3); margin: 8px 0 0; }

.lic-feedback {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    line-height: 1.5;
    border: 1px solid var(--line);
    background: var(--sunken);
    color: var(--ink-2);
}
.lic-feedback.is-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, #fff); }
.lic-feedback.is-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, #fff); }
.lic-feedback.is-crit { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, #fff); }

.lic-faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.lic-faq details:last-child { border-bottom: 0; }
.lic-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}
.lic-faq details p {
    margin: 8px 0 2px;
    font-size: 0.86rem;
    color: var(--ink-2);
    line-height: 1.6;
}

/* DEAD-401: panel güncelleme ilerleme çubuğu (`tab-panel-update.php`)
   `u-transition-width` sınıfını kullanıyor; üretilen `utilities.css`te
   yalnız `.u-transition-width-0-4s-ease` vardı ve çubuk geçişsiz zıplıyordu.
   Tanım işaretlemeye dokunmadan burada veriliyor (aynı değer). */
.u-transition-width { transition: width 0.4s ease; }

/* ---- CRON-SRV: sunucu geneli cron görevleri (pages/cron-jobs) ---------- */
.cj-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cj-stat { border: 1px solid var(--border-color); border-radius: var(--r-md); padding: 10px 12px; }
.cj-stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.cj-stat-value { font-size: 1.15rem; font-weight: 700; margin-top: 2px; }
.cj-stat-value small { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.cj-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cj-table th { text-align: left; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; padding: 8px 6px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.cj-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.cj-table tr.cj-off td { opacity: .6; }
.cj-cmd { display: block; max-width: 520px; white-space: pre-wrap; word-break: break-all; font-size: 0.76rem; }
.cj-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.cj-actions { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
.cj-actions .btn { padding: 4px 8px; }
.cj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cj-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cj-chip { border: 1px solid var(--border-color); background: transparent; color: var(--text-main); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; cursor: pointer; }
.cj-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cj-group + .cj-group { margin-top: 18px; }
.cj-group-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }

/* ============================================================================
   AID-1100: Sohbet asistanı (pages/_shared/asistan.js). Sağ altta düğme ve
   panel; modalların (z-index 1000) ALTINDA. 2026-10-31: yerel modelin önerdiği
   panel işlemleri onay kartı (.ai-asistan-kart; geri alınamaz = .tam).
   ============================================================================ */
.ai-asistan-dugme {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--shadow-pop);
    cursor: pointer;
}
.ai-asistan-panel {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 900;
    width: min(440px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
}
.ai-asistan-panel[hidden] { display: none; }
.ai-asistan-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.ai-asistan-baslik .ai-asistan-bosluk { flex: 1; }
.ai-asistan-akis {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.87rem;
}
.ai-asistan-balon {
    max-width: 88%;
    padding: 8px 10px;
    border-radius: var(--r-md);
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-asistan-balon.kullanici { align-self: flex-end; background: var(--primary); color: #fff; }
.ai-asistan-balon.asistan { align-self: flex-start; background: var(--surface-muted); color: var(--ink); }
.ai-asistan-kart {
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    padding: 8px 10px;
    background: var(--paper);
}
.ai-asistan-kart.tam { border-left-color: var(--danger, #dc2626); }
.ai-asistan-kart pre {
    max-height: 160px;
    overflow: auto;
    margin: 6px 0;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
}
.ai-asistan-alt {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
}
.ai-asistan-alt textarea { flex: 1; resize: none; }

/* ---- Ücretli Uygulamalar (pages/ucretli-uygulamalar) ------------------------------- */
/* Düzen (2026-11-07): iç içe — kategori <details> > ürün <details>; tür kutuları
   aynı zamanda süzgeç; geniş ekranda solda yapışkan kategori gezintisi. */
.ucr-giris { background: var(--info-soft); border-left: 4px solid var(--info); border-radius: var(--r-md); padding: 12px 16px; margin: 16px 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink); }
.ucr-giris > p { margin: 0; }
.ucr-bilgi { margin-top: 6px; }
.ucr-bilgi > summary { cursor: pointer; color: var(--info); font-weight: 600; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 6px; }
.ucr-bilgi p { margin: 8px 0 6px; color: var(--ink-2); }
.ucr-bilgi ul { margin: 0; padding-left: 20px; color: var(--ink-2); }

/* GN-020: tür süzgeci (JS'siz, :has()) — açıklamalı kutular. */
.ucr-suzgec { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.ucr-suzgec-kutu { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; }
.ucr-suzgec-kutu:hover { border-color: var(--line-strong); background: var(--sunken); }
.ucr-suzgec-kutu input { position: absolute; opacity: 0; pointer-events: none; }
.ucr-suzgec-kutu:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ucr-suzgec-kutu:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.ucr-suzgec-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ucr-suzgec-ust .ucr-rozet { white-space: normal; min-width: 0; }
.ucr-suzgec-sayi { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.ucr-suzgec-aciklama { font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }
.ucr:has(.ucr-suzgec input[value="panel"]:checked) .ucr-urun:not([data-tur="panel"]),
.ucr:has(.ucr-suzgec input[value="elle"]:checked) .ucr-urun:not([data-tur="elle"]),
.ucr:has(.ucr-suzgec input[value="dis"]:checked) .ucr-urun:not([data-tur="dis"]),
.ucr:has(.ucr-suzgec input[value="onerilmez"]:checked) .ucr-urun:not([data-tur="onerilmez"]),
.ucr:has(.ucr-suzgec input[value="panel"]:checked) .ucr-kategori:not([data-turler~="panel"]),
.ucr:has(.ucr-suzgec input[value="elle"]:checked) .ucr-kategori:not([data-turler~="elle"]),
.ucr:has(.ucr-suzgec input[value="dis"]:checked) .ucr-kategori:not([data-turler~="dis"]),
.ucr:has(.ucr-suzgec input[value="onerilmez"]:checked) .ucr-kategori:not([data-turler~="onerilmez"]),
.ucr:has(.ucr-suzgec input[value="panel"]:checked) .ucr-gezinti a:not([data-turler~="panel"]),
.ucr:has(.ucr-suzgec input[value="elle"]:checked) .ucr-gezinti a:not([data-turler~="elle"]),
.ucr:has(.ucr-suzgec input[value="dis"]:checked) .ucr-gezinti a:not([data-turler~="dis"]),
.ucr:has(.ucr-suzgec input[value="onerilmez"]:checked) .ucr-gezinti a:not([data-turler~="onerilmez"]) { display: none; }

.ucr-rozet { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.ucr-tur-hepsi     { background: var(--primary-soft); color: var(--primary-ink); }
.ucr-tur-panel     { background: var(--ok-soft);   color: var(--ok); }
.ucr-tur-elle      { background: var(--info-soft); color: var(--info); }
.ucr-tur-dis       { background: var(--sunken-2);  color: var(--ink-2); }
.ucr-tur-onerilmez { background: var(--crit-soft); color: var(--crit); }

.ucr-arama { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ucr-arama > i { position: absolute; left: 12px; color: var(--ink-3); font-size: 0.85rem; pointer-events: none; }
.ucr-arama input { max-width: 460px; padding-left: 34px; }
.ucr-ara-sonuc { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }

/* İki sütun: gezinti + içerik. */
.ucr-duzen { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.ucr-gezinti { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 4px; }
.ucr-gezinti a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 0.84rem; text-decoration: none; line-height: 1.3; }
.ucr-gezinti a:hover { background: var(--sunken); color: var(--ink); }
.ucr-gezinti a.is-active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.ucr-gezinti a > i { width: 16px; text-align: center; color: var(--ink-3); flex: none; }
.ucr-gezinti a.is-active > i { color: var(--primary-ink); }
.ucr-gezinti a > span:first-of-type { flex: 1; min-width: 0; }
.ucr-gezinti-sayi { font-size: 0.74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ucr-icerik { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* Kategori (dış katman). */
.ucr-kategori { scroll-margin-top: 16px; }
.ucr-kat-ac { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.ucr-kat-baslik { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ucr-kat-baslik::-webkit-details-marker { display: none; }
.ucr-kat-ac[open] > .ucr-kat-baslik { border-bottom: 1px solid var(--line); }
.ucr-kat-ikon { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--sunken-2); color: var(--ink-2); }
.ucr-kat-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ucr-kat-metin h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; color: var(--ink); }
.ucr-kategori-sayi { font-weight: 600; font-size: 0.72rem; color: var(--ink-2); background: var(--sunken-2); border-radius: var(--r-pill); padding: 1px 8px; }
.ucr-kategori-aciklama { font-size: 0.82rem; color: var(--ink-2); }
.ucr-ok { flex: none; color: var(--ink-3); font-size: 0.8rem; transition: transform .15s; }
details[open] > summary > .ucr-ok { transform: rotate(180deg); }
.ucr-urunler { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--sunken); border-radius: 0 0 var(--r-md) var(--r-md); }

/* Ürün (iç katman). */
.ucr-urun { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.ucr-urun[open] { border-color: var(--line-strong); }
.ucr-urun > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; }
.ucr-urun > summary::-webkit-details-marker { display: none; }
.ucr-urun > summary:hover { background: var(--sunken); border-radius: var(--r-md); }
.ucr-urun > summary > .ucr-ok { grid-column: 2; grid-row: 1 / span 2; }
.ucr-urun-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ucr-urun-ad { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.ucr-urun-ozet { grid-column: 1; font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
.ucr-urun-govde { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-top: 1px solid var(--line); font-size: 0.85rem; line-height: 1.6; color: var(--ink-2); }
.ucr-urun-govde p { margin: 0; }
.ucr-olgular { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ucr-olgu { background: var(--sunken); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ucr-olgu-baslik, .ucr-blok-baslik { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.8rem; color: var(--ink); }
.ucr-olgu-baslik i, .ucr-blok-baslik i { color: var(--ink-3); width: 14px; text-align: center; }
.ucr-kucuk-baslik { display: block; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.ucr-kaynak { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ucr-kaynak .ucr-kucuk-baslik { flex-basis: 100%; }
.ucr-etiket { font-size: 0.74rem; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); }
.ucr-panelde { border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.ucr-panelde .ucr-blok-baslik i { color: var(--ok); }
.ucr-karsilik { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--ok); }
.ucr-iliski { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ucr-blok { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ucr-cakisma { margin-top: 4px !important; }
.ucr-adimlar { display: flex; flex-direction: column; gap: 6px; }
.ucr-adimlar ol { list-style: none; counter-reset: ucr-adim; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ucr-adimlar li { counter-increment: ucr-adim; position: relative; padding-left: 30px; min-height: 22px; }
.ucr-adimlar li::before { content: counter(ucr-adim); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); font-size: 0.72rem; font-weight: 700; }
.ucr-uyari { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-soft); color: var(--ink); border-radius: var(--r-md); padding: 8px 12px; }
.ucr-uyari > i { color: var(--warn); margin-top: 3px; }
.ucr-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 14px; border-top: 1px dashed var(--line); }
.ucr-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; }
.ucr-dogrulama { font-size: 0.76rem; color: var(--ink-3); }
.ucr .ucr-arama-gizli { display: none; }

@media (max-width: 900px) {
    .ucr-duzen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ucr-gezinti { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding: 0 0 4px; gap: 6px; }
    .ucr-gezinti a { flex: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; }
    .ucr-gezinti a > span:first-of-type { flex: none; }
}
@media (max-width: 560px) {
    .ucr-suzgec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ucr-suzgec-aciklama { display: none; }
    .ucr-urunler { padding: 8px; }
    .ucr-kat-ikon { display: none; }
}

/* ---- Yön asistanı (pages/_shared/yon-asistan.js, pages/yon-asistan) ---------------- */
.yon-asistan-dugme {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: var(--primary); color: #fff; font-size: 1.3rem;
    box-shadow: var(--shadow-pop); cursor: pointer;
}
/* Sohbet asistanı da açıksa iki düğme yan yana (çakışmasın). */
body:has(#ai-asistan-dugme) .yon-asistan-dugme { right: 84px; }
/* Altbilgideki sürüm yazısı yüzen düğmelerin altında kalmasın (2026-11-04):
   düğme 52px + sağ 20px + boşluk; iki düğme varsa 84px daha. */
.main-footer { padding-right: 96px; }
body:has(#ai-asistan-dugme) .main-footer { padding-right: 160px; }
.yon-asistan-panel {
    position: fixed; right: 20px; bottom: 84px; z-index: 901;
    width: min(400px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.yon-asistan-panel[hidden] { display: none; }
.yon-asistan-baslik { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.yon-asistan-baslik .yon-asistan-ad { flex: 1; }
.yon-asistan-akis { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 0.87rem; }
.yon-asistan-balon { max-width: 88%; padding: 8px 10px; border-radius: var(--r-md); white-space: pre-wrap; word-break: break-word; }
.yon-asistan-balon.kullanici { align-self: flex-end; background: var(--primary); color: #fff; }
.yon-asistan-balon.asistan { align-self: flex-start; background: var(--surface-muted); color: var(--ink); }
.yon-asistan-secenekler { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.yon-asistan-secenek { text-align: left; white-space: normal; }
.yon-asistan-secenek.secili { border-color: var(--primary); color: var(--primary); }
.yon-asistan-hicbiri { padding-left: 0; font-size: 0.8rem; color: var(--ink-2); }
.yon-asistan-alt { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); margin: 0; }
.yon-asistan-alt input { flex: 1; }
@media (max-width: 600px) {
    .yon-asistan-panel { right: 16px; left: 16px; width: auto; }
}
.yon-kart-govde { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.yon-aciklama { margin: 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.55; }
.yon-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.87rem; margin: 0; }
.yon-satir .form-control { flex: 1; min-width: 200px; }
.yon-etiket { font-size: 0.82rem; color: var(--ink-2); font-weight: 600; }
.yon-rol { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.yon-dugmeler { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.yon-iki-sutun { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.yon-alt-hiza { padding-bottom: 8px; }
.yon-deneme-sonuc { font-size: 0.86rem; }
.yon-deneme-sonuc p { margin: 0 0 4px; }
.yon-deneme-sonuc ul { margin: 0; padding-left: 20px; }
.yon-kod { font-family: var(--font-mono, monospace); font-size: 0.8rem; white-space: nowrap; }
.yon-kelimeler { max-width: 420px; }
.yon-kelime { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border-radius: 999px; background: var(--sunken-2); color: var(--ink-2); font-size: 0.76rem; }
.yon-soluk { color: var(--ink-2); font-size: 0.8rem; }
.yon-islemler { white-space: nowrap; }
.yon-islemler .btn { margin: 2px; }

/* E1101: pano kartlarını gizleme (pages/dashboard/dashboard-layout.js). */
[data-kart][data-kart-gizli] { display: none !important; }
#dashboard .pano-ozet-grid:has(> [data-kart-gizli]) { grid-template-columns: 1fr; }
.pano-ozellestir { position: relative; }
.pano-ozellestir > summary { list-style: none; cursor: pointer; }
.pano-ozellestir > summary::-webkit-details-marker { display: none; }
.pano-ozellestir-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 240px; max-width: calc(100vw - 32px); padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--r-md); box-shadow: var(--shadow-pop); color: var(--ink); font-size: 0.85rem; }
.pano-ozellestir-satir { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.pano-ozellestir-satir input { width: 16px; height: 16px; cursor: pointer; }

/* E1101: destek yanıtına Ctrl+V ile yapıştırılan görsellerin önizlemesi. */
.ticket-paste-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ticket-paste-thumb { position: relative; margin: 0; width: 96px; }
.ticket-paste-thumb img { display: block; width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border-color); border-radius: var(--r-sm); background: var(--sunken-2, transparent); }
.ticket-paste-thumb figcaption { font-size: 0.68rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ticket-paste-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--ink); line-height: 1; cursor: pointer; font-size: 0.9rem; padding: 0; }

/* Eylem Zaman Tüneli (Incident Timeline) & Depolama Röntgeni (Storage Bloat) */
.incident-verdict-box { background: var(--sunken-2, transparent); }
.incident-timeline-stream { position: relative; padding-left: 25px; border-left: 2px solid var(--border-color); margin-left: 15px; }
.incident-item { position: relative; margin-bottom: 20px; }
.incident-dot { position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg); }
.incident-dot.is-danger { background: var(--danger); }
.incident-dot.is-warning { background: var(--warning); }
.incident-card { background: var(--sunken-2, transparent); border: 1px solid var(--border-color); border-radius: var(--r-md); padding: 12px 16px; }
.incident-title { font-weight: 600; font-size: 0.9rem; color: var(--primary); }
.incident-title.is-danger { color: var(--danger); }
.incident-title.is-warning { color: var(--warning); }
.incident-desc { font-size: 0.85rem; line-height: 1.5; margin-bottom: 6px; word-break: break-all; }
.bloat-disk-bar { display: flex; height: 24px; border-radius: var(--r-sm); overflow: hidden; background: var(--sunken-2, transparent); }
.bloat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.bloat-scroll-box { max-height: 260px; overflow-y: auto; border: 1px solid var(--border-color); padding: 10px; }
.bloat-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 5px; background: var(--ink-2); }
.bloat-list-row { border-bottom: 1px solid var(--border-color); }
.bloat-file-name { max-width: 220px; }

/* ==========================================================================
   RK-103: TEMA — sistem teması (prefers-color-scheme), koyu ve yüksek kontrast
   --------------------------------------------------------------------------
   Panelin bütün renkleri :root token'larından geliyor; temalar yalnız token
   değerlerini değiştiriyor. `<html data-tema>` PHP'den (panel_tema): oto |
   acik | koyu | kontrast. "oto" sistem tercihine uyar. Koyu blok iki kez
   yazılı (biri medya sorgusu içinde) — CSS'te koşullu seçici yok.
   ========================================================================== */
html[data-tema="dark"] {
    color-scheme: dark;
    --paper: #1c1e22; --sunken: #141619; --sunken-2: #22252b; --chrome: #181a1e; --chrome-hover: #262a30;
    --line: #30343b; --line-strong: #3e434c;
    --ink: #ebe9e4; --ink-2: #b8b4ac; --ink-3: #8f8b84;
    --primary: #6b9bf2;
    --primary-soft: color-mix(in srgb, var(--primary) 16%, var(--paper));
    --primary-line: color-mix(in srgb, var(--primary) 42%, var(--paper));
    --primary-ink: color-mix(in srgb, var(--primary) 72%, #fff);
    --ok: #57c991; --warn: #e3ab45; --crit: #f2776f; --info: #67afe6;
    --ok-soft: color-mix(in srgb, var(--ok) 15%, var(--paper));
    --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--paper));
    --crit-soft: color-mix(in srgb, var(--crit) 15%, var(--paper));
    --info-soft: color-mix(in srgb, var(--info) 15%, var(--paper));
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 24px 60px -14px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
    html[data-tema="auto"] {
        color-scheme: dark;
        --paper: #1c1e22; --sunken: #141619; --sunken-2: #22252b; --chrome: #181a1e; --chrome-hover: #262a30;
        --line: #30343b; --line-strong: #3e434c;
        --ink: #ebe9e4; --ink-2: #b8b4ac; --ink-3: #8f8b84;
        --primary: #6b9bf2;
        --primary-soft: color-mix(in srgb, var(--primary) 16%, var(--paper));
        --primary-line: color-mix(in srgb, var(--primary) 42%, var(--paper));
        --primary-ink: color-mix(in srgb, var(--primary) 72%, #fff);
        --ok: #57c991; --warn: #e3ab45; --crit: #f2776f; --info: #67afe6;
        --ok-soft: color-mix(in srgb, var(--ok) 15%, var(--paper));
        --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--paper));
        --crit-soft: color-mix(in srgb, var(--crit) 15%, var(--paper));
        --info-soft: color-mix(in srgb, var(--info) 15%, var(--paper));
        --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
        --shadow-modal: 0 24px 60px -14px rgba(0, 0, 0, 0.7);
    }
}
/* Sabit beyaz arka planlı birkaç yardımcı sınıf koyu temada kâğıt rengine. */
html[data-tema="dark"] .u-background-fff, html[data-tema="dark"] .u-background-ffffff { background: var(--paper); }
@media (prefers-color-scheme: dark) {
    html[data-tema="auto"] .u-background-fff, html[data-tema="auto"] .u-background-ffffff { background: var(--paper); }
}
/* Yüksek kontrast: siyah/beyaz, kalın çizgiler, belirgin odak halkası
   (WCAG 2.2 AAA kontrast). "oto" sistemde "daha fazla kontrast" istenmişse uyar. */
html[data-tema="contrast"] {
    --paper: #ffffff; --sunken: #ffffff; --sunken-2: #f2f2f2; --chrome: #ffffff; --chrome-hover: #e6e6e6;
    --line: #000000; --line-strong: #000000;
    --ink: #000000; --ink-2: #000000; --ink-3: #1f1f1f;
    --primary: #0033a0; --primary-ink: #001f66;
    --primary-soft: #e6ecf9; --primary-line: #0033a0;
    --ok: #0a5c2b; --warn: #6b4500; --crit: #8c0f0a; --info: #0b4a75;
}
html[data-tema="contrast"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
html[data-tema="contrast"] a { text-decoration: underline; }
@media (prefers-contrast: more) {
    html[data-tema="auto"] { --line: #000000; --line-strong: #000000; --ink-2: #1f1f1f; --ink-3: #333333; }
    html[data-tema="auto"] :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }
}

/* OI-49: komut paleti (Ctrl+K) — pages/_shared/komut-paleti.js */
.komut-paleti { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.komut-paleti[hidden] { display: none; }
.komut-paleti-panel { width: min(640px, 92vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-modal); overflow: hidden; }
.komut-paleti-panel > input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; font-size: 1rem; }
.komut-paleti-liste { list-style: none; margin: 0; padding: 6px 0; max-height: 50vh; overflow-y: auto; }
.komut-paleti-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; color: var(--ink); font-size: 0.88rem; }
.komut-paleti-liste li[aria-selected="true"], .komut-paleti-liste li[data-i]:hover { background: var(--primary-soft); }
.komut-paleti-liste li i { width: 16px; text-align: center; color: var(--ink-2); }
.komut-paleti-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komut-paleti-alt { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.komut-paleti-bos { color: var(--ink-2); cursor: default !important; }
.komut-paleti-ipucu { border-top: 1px solid var(--line); padding: 6px 16px; font-size: 0.72rem; color: var(--ink-2); }

/* Mobil üst çubuk ve süzgeç satırları (2026-11-04 tasarım denetimi).
   390px'te üst çubuk dil/tema/güncelleme/IP/kullanıcıyla ekranın dörtte
   birini kaplıyordu: IP kutusu gizleniyor (Sunucu Yönetimi'nde var), dil ve
   tema yalnız simge (erişilebilir ad title/aria-label'da). Süzgeç
   satırlarındaki "kendi genişliği" alanlar alt alta düşünce yarım kalıyordu. */
@media (max-width: 600px) {
    .server-badge { display: none; }
    #lang-trigger > span, #tema-sec-ad { display: none; }
    main .u-display-flex > .form-control.u-width-auto { flex: 1 1 100%; width: 100%; }
}

/* Alan adı listesi (2026-11-04): PHP sürümü adın yanında küçük rozet;
   Durum'da sağlık sorunu yalnız simge, ayrıntı üzerine gelince. */
/* Adın altında kendi satırında; zemin/çerçeve/yatay boşluk yok, yazı alan
   adıyla aynı hizadan başlıyor (2026-11-04). */
.domain-php-badge {
    display: flex;
    width: fit-content;
    margin: 2px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}
.domain-health-ico {
    display: inline-flex;
    margin-left: 6px;
    font-size: 0.9rem;
    vertical-align: middle;
    cursor: help;
}

/* Alan adı Durum hücresi (2026-11-04): tek parçalı rozet
   [● Aktif | DNS küresi | sağlık uyarısı]. Bölmeler ince çizgiyle ayrılıyor;
   sağlık bölmesi yalnız sorun varken dolu, boşken görünmüyor. */
.dom-durum {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card-bg);
    overflow: hidden;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
}
.dom-durum .dd-seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
}
.dom-durum .dd-seg + .dd-seg { border-left: 1px solid var(--line); }
.dom-durum .dd-seg:empty { display: none; }
.dom-durum .dd-site.dd-ok { background: var(--ok-soft); color: var(--ok); }
.dom-durum .dd-site.dd-crit { background: var(--crit-soft); color: var(--crit); }
.dom-durum .dd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.dom-durum .dd-dns, .dom-durum .dd-health { padding: 2px 7px; }
.dom-durum .dd-ico { display: inline-flex; font-size: 0.8rem; cursor: help; }
.dom-durum .dd-ico.dd-ok { color: var(--ok); }
.dom-durum .dd-ico.dd-warn { color: var(--warn); }
.dom-durum .dd-ico.dd-muted { color: var(--ink-3); }
.dom-durum .domain-health-ico { margin-left: 0; font-size: 0.8rem; }
.dom-durum .dd-health:has(.u-color-v-warning) { background: var(--warn-soft); }
.dom-durum .dd-health:has(.u-color-v-danger) { background: var(--crit-soft); }
.dom-durum .dd-dns:has(.dd-warn) { background: var(--warn-soft); }

/* Konteyner yayınlama kartı (#podman-ek-card, 2026-11-04). Üç iş üç
   .dp-tabgroup sekmesinde; her sekmede açıklama → mevcut kayıtlar → form.
   Podman kartı gizliyse (Podman yok / kurulu değil) bu kart da gizli. */
#podman-card.u-display-none ~ #podman-ek-card { display: none; }
.pek-header { display: block; }
.pek-alt { margin: 4px 0 0 26px; font-size: 0.82rem; color: var(--ink-2); }
#podman-ek-card .dp-tab i { margin-right: 6px; color: var(--ink-3); font-size: 0.8rem; }
#podman-ek-card .dp-tab.active i { color: var(--primary); }
#podman-ek-card .dp-tabpane { padding-top: 16px; }
.pek-aciklama { margin: 0 0 16px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }
.pek-bolum-baslik {
    margin: 0 0 8px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3);
}
.pek-liste {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.pek-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    font-size: 0.84rem;
}
.pek-satir + .pek-satir { border-top: 1px solid var(--line); }
.pek-satir-ad { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.pek-ok { color: var(--ink-3); padding: 0 4px; }
.pek-bos { padding: 10px 12px; font-size: 0.82rem; color: var(--ink-3); }
.pek-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}
.pek-form .form-group { margin: 0; }
.pek-form label { font-size: 0.8rem; }
.pek-form .pek-genis { grid-column: span 2; }
.pek-form > .btn { justify-self: start; height: 38px; }
.pek-onay {
    display: flex; align-items: center; gap: 8px;
    height: 38px; font-size: 0.84rem; color: var(--ink-2); cursor: pointer;
}
.pek-ipucu { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.pek-ipucu:empty { display: none; }
.pek-onizleme {
    margin: 12px 0 0; max-height: 280px; overflow: auto;
    padding: 12px; white-space: pre-wrap;
    font-family: var(--font-mono); font-size: 0.78rem;
    background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.pek-eylem { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
@media (max-width: 600px) { .pek-form .pek-genis { grid-column: auto; } .pek-alt { margin-left: 0; } }

/* DNS satır işlemleri: kare, yalnız simgeli düğme (ad title/aria-label'da). */
.dns-ikon {
    width: 32px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Kayıt kartı başlığındaki eylem grubu: dar ekranda SARAR (eskiden altı düğme
   tek satırda ekrandan taşıyordu). */
.dns-zone-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* EYLEM MENÜSÜ (.eylem-menu) — <details> tabanlı, yeniden kullanılabilir.
   Bir başlıkta asıl eylemin yanında duran ikincil araçlar için: görünür tek
   düğme + "Araçlar" menüsü. Açma/kapama tarayıcının; dışarı tıklama, öğe
   seçimi ve Esc ile kapanış core.js'te. Yıkıcı öğe en altta, ayraçla ve
   .eylem-menu-tehlike ile. Gölge: menü havada duruyor (TASARIM.md kural 2). */
.eylem-menu { position: relative; }
.eylem-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.eylem-menu > summary::-webkit-details-marker { display: none; }
.eylem-menu-ok { font-size: 0.7rem; color: var(--ink-3); transition: transform 0.15s; }
.eylem-menu[open] .eylem-menu-ok { transform: rotate(180deg); }
.eylem-menu-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 290px; max-width: calc(100vw - 32px);
    padding: 6px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.eylem-menu-liste > button {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--ink); text-align: left;
    font: inherit; font-size: 0.86rem; cursor: pointer;
}
.eylem-menu-liste > button:hover { background: var(--sunken); }
.eylem-menu-liste > button > i { width: 16px; margin-top: 3px; color: var(--ink-3); text-align: center; }
.eylem-menu-liste > button > span { display: flex; flex-direction: column; gap: 1px; font-weight: 500; }
.eylem-menu-liste > button small { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
.eylem-menu-ayrac { height: 1px; margin: 6px 4px; background: var(--line); }
.eylem-menu-liste > button.eylem-menu-tehlike,
.eylem-menu-liste > button.eylem-menu-tehlike > i { color: var(--crit); }
.eylem-menu-liste > button.eylem-menu-tehlike:hover { background: var(--crit-soft); }
/* Telefonda menü düğmeye değil, KAPSAYAN araç çubuğuna yaslanır ve onun
   genişliğinde açılır: düğme satırın ortasındayken 290px'lik menü ekranın
   sağından taşıyordu (390px'te ölçüldü). Kapsayıcıya .eylem-menu-kap verilir. */
.eylem-menu-kap { position: relative; }
@media (max-width: 600px) {
    .eylem-menu-kap .eylem-menu { position: static; }
    .eylem-menu-kap .eylem-menu-liste,
    .eylem-menu-kap .eylem-menu-liste.eylem-menu-sol { left: 0; right: 0; min-width: 0; max-width: none; }
}

/* DNS Doktoru: son 5 denetim (2026-11-04). İlk satır "son denetim". */
.dns-doktor-gecmis { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dns-doktor-gecmis-baslik {
    margin-bottom: 8px; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
}
.dns-doktor-gecmis-bos { font-size: 0.82rem; color: var(--ink-3); }
.dns-doktor-gecmis-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.dns-doktor-gecmis-liste > li {
    display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto;
    align-items: center; gap: 12px; padding: 7px 12px; font-size: 0.83rem;
}
.dns-doktor-gecmis-liste > li + li { border-top: 1px solid var(--line); }
.dns-doktor-gecmis-zaman { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dns-doktor-gecmis-liste > li.is-son .dns-doktor-gecmis-zaman { font-weight: 600; }
.dns-doktor-gecmis-zaman small { margin-left: 4px; font-weight: 400; color: var(--ink-3); }
.dns-doktor-gecmis-durum { display: flex; flex-wrap: wrap; gap: 6px; }
.dns-doktor-gecmis-kim { color: var(--ink-3); font-size: 0.78rem; }
@media (max-width: 600px) {
    .dns-doktor-gecmis-liste > li { grid-template-columns: 1fr auto; }
    .dns-doktor-gecmis-kim { display: none; }
}

/* DNS tablolarında uzun değer (DKIM, SPF, TXT): tek satır + üç nokta, tam hâli
   title'da. Değer hücresi KALAN alanı alır (`width:100%` + `max-width:0`):
   içerik sütunu genişletemez, tablo kabına sığar; sabit px sınırı ekran
   genişliğine göre ya fazla ya az kalıyordu (1440'ta tablo 171px taşıyordu). */
.dns-deger-hucre { width: 100%; max-width: 0; }
.dns-kisa {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
/* Dar ekranda tablo kart görünümüne geçer (mobil-tablo.js); hücre normal akışta. */
@media (max-width: 768px) { .dns-deger-hucre { width: auto; max-width: none; } .dns-kisa { max-width: 60vw; } }

/* DNS kartlarında satır içi form: etiket üstte, kutular ve düğme AYNI
   yükseklikte ve aynı tabanda (2026-11-04, Yayılım ve Bölge Geçmişi). */
.dns-form-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dns-form-alan { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; max-width: 320px; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.dns-form-alan.dns-form-dar { flex: 0 1 130px; }
.dns-form-alan .form-control { height: 38px; }
.dns-form-satir > .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
/* Kart içi bölüm başlığı + sağında küçük düğme, dikey ortalı. */
.dns-bolum-bas {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
.dns-bolum-baslik { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
#dns-gecmis-liste td { vertical-align: middle; }
#dns-gecmis-liste .btn-dns-surum { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Dosya yöneticisi araç çubuğu (2026-11-04): kendi satırında, iki grup
   (sol: yenile/yükle/yeni/seçilenler, sağ: ara/çöp/araçlar); dar ekranda sarar.
   Menüler .eylem-menu bileşeni. */
.fm-arac-cubugu {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 14px;
}
.fm-arac-grup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fm-arac-cubugu .btn, .fm-arac-cubugu summary.btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.fm-ikon-dugme { width: 32px; padding: 0; justify-content: center; }
/* Dosya yöneticisi gezinti çubuğu (2026-11-05): yalnız yol — üst klasör,
   yol parçaları (kök = alan adı), yolu kopyala. Sağ taraf bilerek boş;
   arama/gizli/filtreler alttaki .fm-liste-cubugu'nda. Uzun yol yatay kayar. */
.fm-gezinti {
    display: flex; align-items: center; gap: 4px;
    padding: 4px; margin-bottom: 10px;
    border: 1px solid var(--border-color); border-radius: var(--r-sm);
    background: var(--bg-body);
}
.fm-gezinti-dugme {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--text-muted); cursor: pointer;
}
.fm-gezinti-dugme:hover:not(:disabled) { background: var(--bg-card); color: var(--primary); }
.fm-gezinti-dugme:disabled { opacity: 0.35; cursor: default; }
.fm-gezinti-dugme:focus-visible, .fm-yol-parca:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fm-gezinti-dugme:first-child { border-right: 1px solid var(--border-color); border-radius: var(--r-sm) 0 0 var(--r-sm); margin-right: 2px; }
.fm-yol {
    display: flex; align-items: center; flex-wrap: nowrap;
    min-width: 0; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; scrollbar-width: none;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.84rem;
}
.fm-yol::-webkit-scrollbar { display: none; }
.fm-yol li { display: flex; align-items: center; flex: 0 0 auto; }
.fm-yol li + li::before {
    content: "\203A"; padding: 0 2px; color: var(--text-muted); opacity: 0.7;
}
.fm-yol-parca {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: var(--r-sm);
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
a.fm-yol-parca:hover { background: var(--bg-card); color: var(--primary); }
.fm-yol-parca[aria-current] { color: var(--text-main, inherit); font-weight: 600; background: var(--bg-card); box-shadow: 0 0 0 1px var(--border-color); }
.fm-yol-kok i { font-size: 0.8rem; }

/* Liste çubuğu: arama kutusu (simgeli), gizli dosyalar, filtreler. */
.fm-liste-cubugu { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 4px; }
.fm-arama { position: relative; flex: 0 1 300px; min-width: 180px; }
.fm-arama i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: var(--text-muted); pointer-events: none; }
.fm-arama .form-control { width: 100%; height: 32px; padding-left: 32px; font-size: 0.85rem; }
.fm-gizli-secim { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; white-space: nowrap; cursor: pointer; }
.fm-liste-cubugu .btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; }

/* Sol gruptaki menüler düğmenin SOL kenarına hizalı açılır (sağa hizalı açılınca
   ekranın solundan taşıyordu). */
.eylem-menu-liste.eylem-menu-sol { right: auto; left: 0; }

/* PHP modülleri: kurulu / kurulabilir / bulunmayan grup başlıkları (2026-11-04).
   Izgaranın tüm satırını kaplar. */
.php-modul-grup-baslik {
    grid-column: 1 / -1;
    margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3);
}
.php-modul-grup-baslik:first-child { margin-top: 0; }

/* WordPress kurulum formu (pages/apps/wp-install-form.php): başlık ikonun
   yanında dursun (card-header'ın space-between'i metni sağa itiyordu);
   WordPress ekranında "Vazgeç" anlamsız — form o ekranın kendisi. */
#wp-install-card .card-header { justify-content: flex-start; }
#detail-tab-content-wordpress #wp-install-card [data-fn="closeWpInstall"] { display: none; }

/* Yapay zekâ bağlantıları listesi (2026-11-05, kullanıcı isteği: "çok fazla
   değer var, kafa karıştırıyor"). Satırda yalnız özet + iki ana düğme; geri
   kalan işlemler "Diğer" menüsünde, izin ve zaman ayrıntıları açılır panelde.
   İkisi de yerel <details>: klavye ve ekran okuyucu ek JS'siz çalışıyor. */
.ai-satir-baslik {
    font-weight: 600;
}
.ai-satir-alt {
    display: block;
    color: var(--ink-3);
    font-size: 0.78rem;
    margin-top: 2px;
}
.ai-satir-rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.ai-satir-rozetler .badge {
    font-weight: 500;
    white-space: normal;
    text-align: left;
    border-radius: var(--r-sm);
}
/* Bağlantı sütunu: rozetler kaydırsın, tablo yatayda taşmasın (td'de
   max-width işlemediği için iç sarmalayıcıda). */
.ai-satir-hucre {
    min-width: 220px;
    max-width: 340px;
}
.ai-satir-ayrinti {
    margin-top: 6px;
    font-size: 0.8rem;
}
.ai-satir-ayrinti > summary {
    cursor: pointer;
    color: var(--primary-ink);
    width: max-content;
}
.ai-satir-ayrinti-govde {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--sunken);
    max-width: 520px;
}
.ai-satir-ayrinti-govde dt {
    color: var(--ink-3);
}
.ai-satir-ayrinti-govde dd {
    margin: 0;
}
#ai-link-table-body > tr > td {
    vertical-align: top;
}
.ai-satir-islem {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: flex-start;
}
.ai-satir-menu > summary {
    list-style: none;
}
.ai-satir-menu > summary::-webkit-details-marker {
    display: none;
}
.ai-satir-menu[open] {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
/* Menü SATIR İÇİNDE açılıyor: tablo kaydırılabilir kapta (.table-responsive,
   overflow auto) ve mutlak konumlu bir açılır liste orada kesilirdi. */
.ai-satir-menu-liste {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
}
.ai-satir-menu-liste .btn {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    background: transparent;
    border-color: transparent;
    color: var(--ink);
}
.ai-satir-menu-liste .btn:hover,
.ai-satir-menu-liste .btn:focus-visible {
    background: var(--sunken);
}
.ai-satir-menu-liste .btn-danger {
    color: var(--crit);
}
.ai-satir-menu-liste hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 4px 0;
}
.ai-izin-politika-not {
    display: block;
    margin-top: 2px;
    color: var(--warn);
    font-size: 0.74rem;
}

/* ==========================================================================
   1.102.0: ORTAK YÜKLENİYOR GÖSTERGESİ (pages/_shared/yukleme.js)
   --------------------------------------------------------------------------
   Ekleme / değiştirme / silme / güncelleme yapan HER istek aynı iki parçayı
   gösterir; ekranlar kendi spinner'ını yazmaz.
   1) .sk-yukleme — sayfanın en üstünde 3px şerit. Renk --primary: bayi
      markası ve koyu/kontrast tema token'larla kendiliğinden geliyor.
      Süre bilinmiyorsa akan şerit, dosya yüklemede gerçek yüzde (.is-yuzde).
   2) .is-busy — işlemi başlatan düğme. Metin/ikon GİZLENİR ama yer tutar
      (genişlik değişmez, tablo satırı kaymaz); ortada düğmenin kendi yazı
      renginde dönen halka. `-webkit-text-fill-color` metni saydam yapar ama
      `color`'ı korur: halka currentColor ile doğru renkte çizilir (birincil
      düğmede beyaz, ikincilde mürekkep).
   ========================================================================== */
.sk-yukleme {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10001;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.sk-yukleme.is-acik {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease;
}
.sk-yukleme-dolgu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 55%, transparent);
    animation: skYuklemeAkis 1.1s ease-in-out infinite;
}
.sk-yukleme.is-yuzde .sk-yukleme-dolgu {
    animation: none;
    width: var(--sk-yuzde, 0%);
    transition: width 0.2s ease;
}
@keyframes skYuklemeAkis {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.is-busy {
    pointer-events: none;
    cursor: progress;
    -webkit-text-fill-color: transparent;
}
.is-busy-konum {
    position: relative;
}
.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: skDugmeDonus 0.7s linear infinite;
}
/* Kilitli düğme (withSubmitLock, onay penceresi) normalde %50 soluk; meşgulken
   halka okunabilsin diye daha az soluk. */
.btn.is-busy:disabled,
.btn.is-busy.disabled {
    opacity: 0.8;
    cursor: progress;
}
@keyframes skDugmeDonus {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Hareket yok: şerit tam genişlikte sabit durur, halka dönmez (çeyreği
       açık durağan halka yine "meşgul" okunur). */
    .sk-yukleme-dolgu { animation: none; width: 100%; opacity: 0.7; }
    .is-busy::after { animation: none; }
}
@media print {
    .sk-yukleme { display: none; }
}

/* ==========================================================================
   AD-* (2026-11-07): alan adı detay sayfasının yeni ekranları
   (pages/domain-detail/detail-alanadi.php, ad-*.js). Renkler tema
   değişkenlerinden; koyu tema ayrıca tanımlanmıyor.
   ========================================================================== */
.ad-pano-ozet { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 16px; border:1px solid var(--line);
                border-radius:var(--r-md); background:var(--paper); min-height:76px; }
.ad-pano-puan { flex:0 0 auto; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
                font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; background:var(--sunken); color:var(--ink-3); }
.ad-pano-puan.is-ok, .ad-karne-puan.is-ok { background:var(--ok-soft); color:var(--ok); }
.ad-pano-puan.is-warn, .ad-karne-puan.is-warn { background:var(--warn-soft); color:var(--warn); }
.ad-pano-puan.is-crit, .ad-karne-puan.is-crit { background:var(--crit-soft); color:var(--crit); }
.ad-pano-govde { flex:1; min-width:0; }
.ad-pano-baslik { font-weight:700; color:var(--ink); }
.ad-pano-alt { font-weight:500; color:var(--ink-3); font-size:.82rem; margin-left:6px; }
.ad-pano-maddeler { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:.82rem; }
.ad-pano-maddeler li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ad-pano-ac { flex:0 0 auto; }
.ad-pano-arac { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
.ad-pano-ara { position:relative; flex:1 1 280px; max-width:460px; }
.ad-pano-ara i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:.85rem; }
.ad-pano-ara .form-control { padding-left:34px; }
.ad-pano-son { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ad-cip { border:1px solid var(--line); background:var(--sunken); color:var(--ink-2); border-radius:var(--r-pill); padding:3px 10px;
          font-size:.78rem; cursor:pointer; }
.ad-cip:hover, .ad-cip:focus-visible { border-color:var(--primary); color:var(--primary); }
.ad-pano-bos { padding:12px 0; color:var(--ink-3); }
.ad-ilk-kurulum { padding:12px 16px; margin:0 0 16px; border:1px dashed var(--line); border-radius:var(--r-md); background:var(--sunken); }
.ad-ilk-baslik { display:flex; align-items:center; gap:8px; }
.ad-ilk-adimlar { margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:.85rem; }
.ad-ilk-adimlar li.is-ok { color:var(--ink-3); text-decoration:line-through; }
.ad-ilk-adimlar li.is-ok i, .ad-karne-liste li.is-ok > i, .ad-pano-maddeler li.is-ok i { color:var(--ok); }
.is-warn > i, .ad-pano-maddeler li.is-warn i { color:var(--warn); }
.is-crit > i, .ad-pano-maddeler li.is-crit i { color:var(--crit); }
.ad-karne-ust, .ad-psi-ust { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.ad-karne-puan { width:84px; height:84px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
                 background:var(--sunken); color:var(--ink-3); }
.ad-karne-puan b { font-size:1.7rem; line-height:1; font-variant-numeric:tabular-nums; }
.ad-karne-puan span { font-size:.75rem; font-weight:600; }
.ad-karne-liste, .ad-olay-liste, .ad-kart-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ad-karne-liste li { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); }
.ad-karne-liste li > i { margin-top:3px; }
.ad-karne-liste li.is-muted > i, .ad-karne-liste li.is-info > i { color:var(--ink-3); }
.ad-karne-metin { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.85rem; }
.ad-karne-metin span { color:var(--ink-2); }
.ad-doktor-blok + .ad-doktor-blok { margin-top:16px; }
.ad-doktor-blok h4, #detail-tab-content-uptime h4, #detail-tab-content-performance h4, #detail-tab-content-security_center h4,
#detail-tab-content-domain_tools h4 { margin:14px 0 8px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.ad-tunel-ozet { padding:10px 14px; border-left:3px solid var(--primary); background:var(--sunken); border-radius:var(--r-sm); margin-bottom:14px; }
.ad-tunel-ozet.is-warn { border-left-color:var(--warn); }
.ad-tunel-ozet p { margin:0 0 4px; }
.ad-tunel-liste { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.ad-tunel-liste > li { position:relative; display:flex; gap:10px; }
.ad-tunel-nokta { position:absolute; left:-27px; top:6px; width:24px; height:24px; border-radius:50%; background:var(--paper); border:2px solid var(--line);
                  display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--ink-3); }
.ad-tunel-liste > li.is-crit .ad-tunel-nokta { border-color:var(--crit); color:var(--crit); }
.ad-tunel-liste > li.is-warn .ad-tunel-nokta { border-color:var(--warn); color:var(--warn); }
.ad-tunel-kart { flex:1; min-width:0; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); margin-left:8px; }
.ad-tunel-ust { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.85rem; }
.ad-tunel-ust time { color:var(--ink-3); font-size:.78rem; }
.ad-tunel-aciklama { font-size:.82rem; color:var(--ink-2); margin:4px 0; overflow-wrap:anywhere; }
[data-ad-tunel-suz].is-active { border-color:var(--primary); color:var(--primary); }
.ad-uptime-ust { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ad-uptime-durum { display:flex; align-items:center; gap:8px; font-weight:600; flex-wrap:wrap; }
.ad-uptime-durum.is-ok i { color:var(--ok); }
.ad-uptime-durum.is-crit i { color:var(--crit); }
.ad-uptime-yuzde { text-align:right; }
.ad-uptime-yuzde b { display:block; font-size:1.4rem; font-variant-numeric:tabular-nums; }
.ad-uptime-yuzde span { font-size:.75rem; color:var(--ink-3); }
.ad-grafik { display:block; width:100%; height:80px; background:var(--sunken); border-radius:var(--r-sm); }
.ad-uptime-cubuk { height:30px; background:transparent; }
.ad-uptime-cubuk rect.is-ok { fill:var(--ok); }
.ad-uptime-cubuk rect.is-warn { fill:var(--warn); }
.ad-uptime-cubuk rect.is-crit { fill:var(--crit); }
.ad-uptime-cubuk rect.is-muted { fill:var(--line); }
.ad-cizgi { fill:none; stroke:var(--primary); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.ad-cizgi-2 { stroke:var(--info); }
.ad-sinir { stroke:var(--crit); stroke-dasharray:4 4; stroke-width:1; vector-effect:non-scaling-stroke; }
.ad-kaynak-baslik { display:flex; gap:8px; align-items:baseline; font-size:.85rem; margin-bottom:6px; flex-wrap:wrap; }
.ad-olay-liste li { display:flex; align-items:center; gap:8px; font-size:.85rem; flex-wrap:wrap; }
.ad-olay-liste li.is-crit i { color:var(--crit); }
.ad-olay-liste li.is-ok i { color:var(--ok); }
/* TMA-10: arama motoru denetimi bulguları */
.ad-olay-liste li.is-warn i { color:var(--warn); }
.ad-olay-liste li.is-muted i { color:var(--ink-3, currentColor); }
/* AGV-01: şema karşılaştırma sonucu */
#ad-sema-sonuc tr.is-warn td:first-child { color:var(--warn); }
.ad-sema-sql { max-height:320px; overflow:auto; white-space:pre; font-size:.78rem; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); }
.ad-psi-metrik { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; flex:1; min-width:240px; }
.ad-psi-metrik > div { border:1px solid var(--line); border-radius:var(--r-md); padding:8px 10px; background:var(--paper); }
.ad-psi-metrik > div span { display:block; font-size:.72rem; font-weight:600; color:var(--ink-3); }
.ad-psi-metrik > div b { font-variant-numeric:tabular-nums; }
.ad-psi-metrik > div.is-ok b { color:var(--ok); }
.ad-psi-metrik > div.is-warn b { color:var(--warn); }
.ad-psi-metrik > div.is-crit b { color:var(--crit); }
.ad-psi-firsat { margin:0; padding-left:18px; font-size:.85rem; display:flex; flex-direction:column; gap:4px; }
.ad-sayilar { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-bottom:14px; }
.ad-sayi { border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; background:var(--paper); }
.ad-sayi b { display:block; font-size:1.3rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.ad-sayi span { font-size:.75rem; color:var(--ink-3); }
.ad-sayi.is-warn b { color:var(--warn); }
.ad-sayi.is-crit b { color:var(--crit); }
.ad-tablo { width:100%; border-collapse:collapse; font-size:.82rem; }
.ad-tablo th { text-align:left; font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:6px 8px; border-bottom:1px solid var(--line); }
.ad-tablo td { padding:6px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.ad-prova { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--sunken); }
.ad-prova.is-warn { border-color:var(--warn); background:var(--warn-soft); }
.ad-prova.is-ok { border-color:var(--ok); background:var(--ok-soft); }
.ad-prova p { margin:0 0 6px; }
.ad-satir { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); }
.ad-satir:last-child { border-bottom:0; }
.ad-satir.ad-tehlike strong { color:var(--crit); }
.ad-teslim-adim { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.ad-teslim-adim li > div { display:inline-block; min-width:220px; margin-right:8px; vertical-align:middle; }
.ad-iz-liste { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:10px; font-size:.85rem; }
.ad-iz-teslim { list-style:none; margin:4px 0 0; padding:0 0 0 10px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ad-iz-teslim li.is-ok strong { color:var(--ok); }
.ad-iz-teslim li.is-warn strong { color:var(--warn); }
.ad-iz-teslim li.is-crit strong { color:var(--crit); }
.ad-iz-oneri { margin-top:2px; font-size:.78rem; color:var(--info); }
.ad-bilet { margin-bottom:12px; }
.ad-bilet-moduller { display:flex; flex-wrap:wrap; gap:6px 14px; }
.ad-kilitli-tile { opacity:.55; cursor:default; }
.ad-kilitli-tile .domain-tile-arrow { display:none; }
.ad-mobil-ozet { display:none; }
@media (max-width: 900px) {
    .ad-mobil-ozet:not(:empty) { display:flex; flex-wrap:wrap; gap:6px 12px; padding:8px 12px; margin:0 0 12px; border:1px solid var(--line);
                                  border-radius:var(--r-md); background:var(--paper); font-size:.78rem; }
    .ad-mobil-ozet b { color:var(--ink-3); font-weight:600; }
    .ad-mobil-ozet .is-crit { color:var(--crit); }
    .ad-mobil-ozet .is-warn { color:var(--warn); }
    .ad-pano-ozet { flex-wrap:wrap; }
}
.ad-alt-kart { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); }
.ad-alt-kart-baslik { padding:14px 20px; cursor:pointer; font-weight:600; color:var(--ink); }
.ad-alt-kart[open] .ad-alt-kart-baslik { border-bottom:1px solid var(--line); }