/*
 * Styling for global/cart/DomainContactModal.js — birebir atak-panel-2/ux-demo/index.html'in
 * "01: İki Panel" (Master-Detail) deseninden portlanmıştır (bkz. ux-demo/demo.css + ux-demo'nun
 * kendi gerçek bileşen kütüphanesi assets/css/pages/_domain-contact-config.scss). Sınıf adları
 * kasıtlı olarak birebir korunmuştur (uxd-*, contact-*, cd-*, de-*) — bu, prototipteki "aynı modal"
 * talebinin doğrudan karşılığıdır. Renk değerleri Styles/pages/atak-panel/css/abstracts/_variables.scss
 * ile birebir aynıdır (iki proje aynı tasarım sistemini paylaşır), burada sabit hex olarak çözülmüştür
 * çünkü bu dosya app.css'in SCSS/derleme akışının dışında, kendi başına yüklenen bir sayfadır.
 */

/* ── Kaydetme sırasında: modal kilitli, gösterge düğmenin üzerinde ─────────────────────────────
   Tam ekran overlay yerine bu yöntem kullanılır — bkz. DomainContactModal.js _setSaving.
   pointer-events yalnızca içerikte kapatılır; düğmenin kendisi zaten disabled olduğu için
   ayrıca bir örtü elemanına gerek yok. */
.dcm-busy .modal-body,
.dcm-busy .dcm-steps {
    pointer-events: none;
    opacity: 0.6;
    transition: opacity .15s ease;
}

.dcm-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dcm-spin .7s linear infinite;
    vertical-align: -2px;
}

@keyframes dcm-spin { to { transform: rotate(360deg); } }

/* Her adımın başındaki bilgi şeridi: "değiştirmezsen mevcut yapılandırma korunur" (bkz.
   DomainContactModal.js _sectionUntouchedNoticeHtml). Uyarı değil bilgi olduğu için nötr mavi. */
.dcm-section-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    background: #fafcff;
    border: 1px solid #d5dfff;
    border-radius: 8px;
    color: #2f1c6a;
    font-size: 12.5px;
}

.dcm-section-notice i { flex-shrink: 0; color: #6760d9; }

.dcm-trustee-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 13px;
}

/* ── Domain Edit Modal chrome (assets/css/pages/_cart.scss + _domain-contact-config.scss) ──── */
.de-modal-dialog-wide {
    max-width: min(1280px, 94vw);
}

.de-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.de-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(52, 48, 114, 0.08);
    color: #343072;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.de-domain-badge {
    display: inline-block;
    background: rgba(52, 48, 114, 0.08);
    color: #343072;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(52, 48, 114, 0.15);
}

.cp-modal-subtitle {
    font-size: 12px;
    color: #727586;
    margin-top: 2px;
    margin-bottom: 0;
}

/* ── Kompakt contact tablo (özet satırlar + her zaman görünen form ortak parçaları) ─────────── */
.contact-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.contact-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: #d5dfff;
    color: #343072;
}

.contact-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #20262c;
    white-space: nowrap;
}

.contact-row-body {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.contact-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.contact-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.contact-avatar--primary {
    background: #d5dfff;
    color: #343072;
}

.contact-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #20262c;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-row-sub {
    font-size: 11.5px;
    color: #727586;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.contact-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1.5px solid #e0e0e8;
    border-radius: 20px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    color: #727586;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.contact-edit-btn i { font-size: 11px; }

.contact-edit-btn:hover {
    border-color: #9aabff;
    color: #343072;
    background: #fafcff;
}

.uxd-empty { color: #b3b4c0; font-weight: 500; }

/* ── Kişi numarası (Handle ID) ile arama (.dcm-handle-*) — bkz. ContactPicker.js ─────────────── */
.dcm-handle-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Kişi arama sonuçları — kompakt tablo (ilk sütun Handle ID) ────────────────────────────────
   Kullanıcı aynı isimli iki kişiyi yalnızca handle/e-posta ile ayırt edebildiği için sonuçlar
   düz bir liste değil, sütunlu bir tablo olarak gösterilir. Yükseklik ~5 satırla sınırlı; fazlası
   kendi içinde kayar, modalın düzenini itmez. */
/* line-height: 0 — kabın içindeki olası boşluk metin düğümlerinin (şablon girintisi) tablo
   başlığının üstünde boş bir satır kutusu açmasını engeller; satır yüksekliği tabloda geri verilir. */
.dcm-contact-results {
    margin-top: 8px;
    border: 1px solid #e0e0e8;
    border-radius: 8px;
    background: #fff;
    max-height: 190px;
    overflow-y: auto;
    line-height: 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.dcm-contact-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Sütun başlıkları kayan listede sabit kalır — hangi sütunun ne olduğu her zaman görünür. */
.dcm-contact-results-table thead th {
    position: sticky;
    top: 0;
    background: #f9f9fb;
    border-bottom: 1px solid #e0e0e8;
    padding: 6px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #b3b4c0;
    white-space: nowrap;
}

.dcm-contact-results-table tr {
    cursor: pointer;
    border-bottom: 1px solid #f2f2f6;
    transition: background-color .12s ease;
}

.dcm-contact-results-table tr:last-child { border-bottom: none; }
.dcm-contact-results-table tr:hover,
.dcm-contact-results-table tr:focus-visible {
    background: rgba(52, 48, 114, 0.06);
    outline: none;
}

.dcm-contact-results-table td {
    padding: 7px 10px;
    color: #20262c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

/* Handle sütunu sabit ve vurgulu — satırdaki kimlik sinyali odur. */
.dcm-contact-results-table .dcm-cr-handle {
    font-weight: 700;
    color: #343072;
    width: 1%;
    white-space: nowrap;
}

.dcm-contact-results-table .dcm-cr-name { font-weight: 600; }
.dcm-contact-results-table .dcm-cr-company,
.dcm-contact-results-table .dcm-cr-mail { color: #6b6c7e; }

.dcm-contact-results-empty {
    padding: 12px;
    text-align: center;
    font-size: 12.5px;
    color: #b3b4c0;
}

/* İki eylem düğmesi ("Yeni İletişim Bilgisi Ekle" / "Varsayılan Kişimi Kullan") YA İKİSİ TEK SATIRDA
   ya da HER BİRİ AYRI TAM SATIRDA durur. flex-wrap ile bu garanti edilemez (wrap her öğeyi tek tek
   taşırır), bu yüzden nowrap + belirli bir genişliğin altında flex-direction:column kullanılıyor.
   Eşik viewport üzerinden: bu düğmeler modalın sağ düzenleme panelinde durur ve o panelin genişliği
   modal genişliğiyle (min(1280px, 94vw)) orantılı ilerler, dolayısıyla viewport burada panel
   genişliği için geçerli bir vekildir.
   "Bunu Kopyalayarak Yeni Oluştur" bu satırda DEĞİL: kopyalanacak kaydın ta kendisini gösteren
   formun başlığında durur (bkz. .dcm-form-header). */
.dcm-handle-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

/* display/align burada AÇIKÇA veriliyor: .cd-new-contact-btn'in taban kuralı bu dosyada değil
   (app.css'ten gelir) ve flex olmadığı durumda justify-content etkisiz kalırdı. */
.dcm-handle-actions > .cd-new-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .dcm-handle-actions { flex-direction: column; }
    .dcm-handle-actions > .cd-new-contact-btn { flex: none; }
}

.dcm-handle-input-wrap {
    position: relative;
    flex: 1;
    max-width: 260px;
}

.dcm-handle-input-wrap .form-control {
    padding-right: 38px;
    font-family: 'Courier New', monospace;
}

.dcm-handle-search-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #727586;
    cursor: pointer;
    font-size: 14px;
}

.dcm-handle-search-btn:hover { color: #343072; }

/* cursor: pointer — bu gerçek bir bağlantı (kişi yönetimi sayfasını yeni sekmede açar). Üzerindeki
   tooltip yalnızca aramanın hangi alanları kapsadığını anlatır; eskiden cursor:help idi ve bağlantı
   tıklanabilir görünmüyordu. */
.dcm-handle-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2f1c6a;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dcm-handle-manage-link:hover { text-decoration: underline; }

/* Form başlığındaki etiket ("Varsayılan Kişi" / kişi adı) — yanındaki handle rozetiyle birlikte
   okunur, bkz. ContactPicker.js renderTitle. */
.dcm-title-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #727586;
    margin-right: 8px;
}

.dcm-handle-error {
    font-size: 12px;
    color: #c4201c;
    margin-top: 6px;
}

.dcm-handle-new-btn,
.dcm-handle-default-btn {
    margin-top: 10px;
    border: 1.5px dashed #e0e0e8;
    border-radius: 8px;
}

.dcm-handle-new-btn:hover,
.dcm-handle-default-btn:hover { border-color: #9aabff; }

/* "Varsayılan Kişimi Kullan" — mevcut atamayı kaldıran bir eylem olduğu için kesiksiz kenarlıkla
   "sıfırdan yeni kayıt" eyleminden ayrışır (bkz. ContactPicker.js defaultBtn). */
.dcm-handle-default-btn {
    border-style: solid;
    border-color: #d5dfff;
    color: #2f1c6a;
}

/* ── Form başlığı: solda kimlik (etiket + handle rozeti), sağda "kopyalayarak yeni oluştur" ──────
   Düğme, KOPYALANACAK kaydın gösterildiği formun kendi başlığında durur; tıklanınca form düzenlemeye
   açılır ve düğme kaybolur (setFormState(false) hem salt-okunurluğu kaldırır hem düğmeyi gizler —
   bkz. ContactPicker.js). */
.dcm-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.dcm-form-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 11px;
    border: 1.5px solid #9aabff;
    border-radius: 20px;
    background: #fff;
    color: #343072;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.dcm-form-copy-btn i { font-size: 11px; }

.dcm-form-copy-btn:hover {
    background: #fafcff;
    border-color: #6760d9;
}

/* ── Eski kayıtlı-kişi combobox'ı (.cd-*) — ContactPicker.js artık bu markup'ı üretmiyor (yukarıdaki
   .dcm-handle-* ile değişti), ama şimdilik silinmedi; başka bir tüketicisi yok. ─────────────────── */
.cd-combobox {
    position: relative;
    max-width: 420px;
}

.cd-combobox > .form-control { background: white; }

#domain-contact-modal .cd-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    background: white;
    min-width: 292px;
    border: 1px solid #e0e0e8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.cd-dropdown-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b3b4c0;
    padding: 10px 14px 6px;
    flex-shrink: 0;
}

#domain-contact-modal .cd-dropdown-scroll {
    overflow-y: auto;
    min-height: 0;
}

#domain-contact-modal .cd-dropdown-scroll::-webkit-scrollbar { width: 5px; }
#domain-contact-modal .cd-dropdown-scroll::-webkit-scrollbar-track { background: transparent; }
#domain-contact-modal .cd-dropdown-scroll::-webkit-scrollbar-thumb { background: #e0e0e8; border-radius: 10px; }

.cd-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.cd-contact-item:hover { background: #f9f9fb; }

.cd-contact-item--active { background: #fafcff; }
.cd-contact-item--active .cd-contact-check { opacity: 1; }

.cd-contact-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    background: #d5dfff;
    color: #343072;
}

.cd-contact-info { flex: 1; min-width: 0; }

.cd-contact-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #20262c;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.3;
}

.cd-contact-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #727586;
    margin-top: 2px;
}

.cd-contact-handle {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #2f1c6a;
    flex-shrink: 0;
}

.cd-contact-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cd-contact-email::before {
    content: '•';
    margin-right: 6px;
    color: #cbccd6;
}

.cd-contact-check {
    margin-left: auto;
    color: #2f1c6a;
    font-size: 15px;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
}

.cd-dropdown-divider {
    height: 1px;
    background: #f2f2f6;
    margin: 4px 0;
    flex-shrink: 0;
}

.cd-new-contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: #2f1c6a;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
    flex-shrink: 0;
}

.cd-new-contact-btn i { font-size: 14px; }
.cd-new-contact-btn:hover { background: #fafcff; }

.cd-dropdown-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12.5px;
    color: #b3b4c0;
    font-style: italic;
}

/* ── Tekli / Çoklu kişi modu geçişi ───────────────────────────────────────────────────────────── */
.contact-mode-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 12px;
}

.contact-mode-desc {
    margin: 0;
    font-size: 12px;
    color: #727586;
    line-height: 1.4;
}

.contact-mode-group {
    display: inline-flex;
    border: 1.5px solid #e0e0e8;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    padding: 2px;
    gap: 2px;
}

.contact-mode-btn {
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #727586;
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.contact-mode-btn.active { background: #343072; color: white; }
.contact-mode-btn:not(.active):hover { background: #f2f2f6; color: #20262c; }

/* ── Her zaman görünen form kutusu (kişi durumuna göre kenarlık) ─────────────────────────────── */
.contact-row-form {
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.contact-row-form--new {
    border-style: dashed;
    border-color: #9aabff;
    background: #fafcff;
}

.contact-row-form--existing {
    border-style: solid;
    border-color: #e0e0e8;
    background: white;
}

.dei-form-title {
    font-size: 13px;
    font-weight: 700;
    color: #20262c;
    margin-bottom: 14px;
}

.dei-form-title:empty { display: none; }

.uxd-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #d5dfff;
    color: #343072;
}

.uxd-id-badge-text {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
}

/* Form field styling — scoped to this modal only. */
#domain-contact-modal .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #5a5c6b;
    margin-bottom: 6px;
}

#domain-contact-modal .form-control,
#domain-contact-modal .form-select {
    border-color: #e0e0e8;
    font-size: 13.5px;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#domain-contact-modal .form-control:focus,
#domain-contact-modal .form-select:focus {
    border-color: #2f1c6a;
    box-shadow: 0 0 0 3px rgba(52, 48, 114, 0.12);
}

#domain-contact-modal .form-control::placeholder { color: #b3b4c0; font-size: 13px; }

/* ── Ek Bilgiler (TLD'ye özgü dinamik alanlar) ───────────────────────────────────────────────── */
.de-additional-desc {
    font-size: 13px;
    color: #727586;
    margin-bottom: 16px;
}

/* İki sütunlu ızgara: alanlar VARSAYILAN olarak tam genişlik kaplar, yalnızca açılır liste ve onay
   kutusu yarım sütun alır — böylece "Sahiplik Türü" ile "Yabancı uyrukluyum" AYNI SATIRDA durur ve
   kutu, listenin bir devamı gibi okunur (bkz. DomainContactModal.js _renderAdditionalBody). */
.dai-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    /* 420px, .it gibi uzun etiketli/seçenekli TLD'lerde metni kırpıyordu ("Diğer özneler (yalnız İtal…");
       modal gövdesi zaten daha geniş, ızgara onu kullanabilir. */
    max-width: 560px;
    align-items: end;
}

.dai-form-group { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }

/* Sondaki onay kutuları (sözleşme maddeleri, yayın onayı…) tek blokta: başlık + alt alta liste.
   Sağlayıcı kataloğu bunları girdilerin arasına serpiyor; ızgaraya tek tek düşünce form okunmaz
   oluyordu (bkz. DomainContactModal.js _renderAdditionalBody, trailingStart). */
.dai-form-consents {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 12px 14px;
    border: 1px solid #eef0f6;
    border-radius: 10px;
    background: #fafbfe;
    min-width: 0;
}

.dai-form-consents-title {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #727586;
}

.dai-form-consents-grid { display: flex; flex-direction: column; gap: 8px; }

.dai-form-consents .dai-form-group--checkbox { grid-column: auto; }

.dai-form-consents .dai-form-label--inline { align-items: flex-start; line-height: 1.35; }

.dai-form-consents .dai-form-label--inline input[type="checkbox"] { margin-top: 2px; }

.dai-form-group--select,
.dai-form-group--checkbox { grid-column: span 1; }

@media (max-width: 576px) {
    /* Dar ekranda yan yana iki alan sıkışıyor — hepsi tam genişliğe döner. */
    .dai-form { grid-template-columns: minmax(0, 1fr); }
    .dai-form-group--select,
    .dai-form-group--checkbox { grid-column: 1 / -1; }
}

.dai-form-label {
    font-size: 13px;
    font-weight: 500;
    color: #5a5c6b;
}

/* Sunucudan gelen alan bazlı doğrulama hatası — etiketin hemen ALTINDA, girdinin ÜSTÜNDE durur;
   contact-address-form.css'teki .caf-field-error-message ile aynı yerleşim ve renk
   (bkz. DomainContactModal.js _applyAdditionalFieldErrors). */
.dai-form-group .dcm-field-error {
    margin-top: -3px;
    font-size: 12px;
    font-weight: 500;
    color: #e11d48;
}

.dai-form-group.dcm-field-invalid .form-control { border-color: #e11d48; }

/* Onay kutusu ("Yabancı uyrukluyum") — etiket kutunun YANINDA durur, diğer alanlardaki gibi üstünde
   değil; tıklama alanı da etiketi kapsar (bkz. DomainContactModal.js _buildExtraFieldInput). */
.dai-form-group--checkbox { flex-direction: row; align-items: center; }

.dai-form-label--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    color: #20262c;
}

.dai-form-label--inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── DNS Ayarları (nameserver listesi) ───────────────────────────────────────────────────────── */
.dns-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #727586;
    margin-bottom: 8px;
}

.dns-section-label.mt-4 { margin-top: 20px; }

.dns-default-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #f9f9fb;
    border: 1px solid #f2f2f6;
    border-radius: 10px;
}

.dns-default-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dns-default-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f0fdf4;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.dns-default-title {
    font-size: 13px;
    font-weight: 700;
    color: #20262c;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dns-default-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 10.5px;
    font-weight: 600;
}

.dns-default-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dns-ns-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: #d5dfff;
    color: #343072;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    border: 1px solid #b8c5ff;
}

.dns-server-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dns-server-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px solid #f2f2f6;
    border-radius: 8px;
    background: white;
    transition: border-color 0.15s ease;
}

.dns-server-item:hover { border-color: #e0e0e8; }

.dns-server-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fafcff;
    color: #6760d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.dns-server-addr {
    flex: 1;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #343072;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dns-server-index {
    font-size: 12px;
    font-weight: 600;
    color: #727586;
    flex-shrink: 0;
    min-width: 72px;
}

.dns-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid #e0e0e8;
    border-radius: 7px;
    background: white;
    color: #b3b4c0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.dns-delete-btn:hover {
    border-color: #f49094;
    color: #de2e24;
    background: #ffe8eb;
}

.dns-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dns-add-row .form-control {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.dns-add-row .form-control::placeholder { color: #b3b4c0; font-family: inherit; }

.dns-add-row .dns-add-btn {
    white-space: nowrap;
    gap: 5px;
}

.dns-input-error {
    font-size: 12px;
    color: #c4201c;
    margin-top: 5px;
}

.dns-input-error i { margin-right: 4px; }

.dns-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #727586;
    background: #f9f9fb;
    border: 1px solid #f2f2f6;
    border-radius: 8px;
    padding: 10px 14px;
}

.dns-info-note i { color: #8c85ff; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
    .dns-default-card { flex-direction: column; align-items: flex-start; }
}

/* ── Toplu yapılandırma: en sol domain seçim listesi (.uxd-bulk-*) — bkz. DomainContactModal.js
   showBulk/_renderDomainList. Yalnızca bulk modda görünür (template'te hidden başlar). ──────────── */
/* Genişlik SABİT DEĞİL: sütun en uzun domain adına (ve başlık satırına) göre kendini büyütür.
   Sabit genişlikte "Seçimi Temizle" düğmesi taşıyor ve yatay kaydırma çubuğu çıkıyordu — üstelik
   overflow-y:auto verilmiş bir kutuda overflow-x, spec gereği kendiliğinden auto'ya döner, bu yüzden
   açıkça hidden'a çekiliyor. min/max sınırları: çok kısa adlarda sütun ezilmesin, çok uzun bir
   domain de modalın geri kalanını yutmasın (o noktada ad ellipsis'e düşer). */
.uxd-bulk-domains {
    width: max-content;
    min-width: 200px;
    max-width: 320px;
    flex: none;
    border-right: 1px solid #e0e0e8;
    padding: 14px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fcfcfd;
}

/* Uzun sepetlerde liste kayarken başlık ve "Seçimi Temizle" görünür kalır — kaydırma kabı
   .uxd-bulk-domains olduğu için sticky burada çalışır. Arka plan kabın kendisiyle aynı olmalı,
   aksi halde altından geçen satırlar başlığın arkasında görünür. */
/* Başlık ve "Seçimi Temizle" ALT ALTA: yan yana dizildiklerinde başlık iki satıra sarıyor, düğme
   de sütun genişliğine sığmayıp kesiliyordu. Alt alta olunca sütunun genişliğini ikisinin
   ARASINDAKİ en geniş olan belirler (toplamları değil), bu da sütunu gereksiz yere genişletmez. */
.uxd-bulk-domains-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fcfcfd;
    padding-bottom: 8px;
}

.uxd-bulk-domains-title span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #b3b4c0;
}

.uxd-bulk-domains-clear {
    border: none;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6760d9;
    cursor: pointer;
    white-space: nowrap;
}

.uxd-bulk-domains-clear:hover { color: #343072; text-decoration: underline; }
.uxd-bulk-domains-clear:disabled { color: #cbccd6; cursor: not-allowed; text-decoration: none; }

/* Bulk modda hiç domain seçili değilken kişi/DNS panelinin yerini alır — bkz. _renderSection. */
.uxd-bulk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    color: #b3b4c0;
}

.uxd-bulk-empty-state i { font-size: 28px; }
.uxd-bulk-empty-state p { margin: 0; font-size: 13px; max-width: 280px; }

.uxd-bulk-domains-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Farklı uzantı gruplarını (bkz. DomainContactModal.js groupKeyOf) ayıran splitter — liste zaten
   grup anahtarına göre sıralı geldiği için (bkz. _renderDomainList) yalnızca grup değiştiğinde
   araya bir kez konur. Kendi dikey boşluğunu taşımaz: .uxd-bulk-domains-list'in 6px gap'i zaten
   üstten/alttan boşluk veriyor, üzerine eklenirse çizgi satırlardan gereksiz uzaklaşırdı. */
.uxd-bulk-domains-divider {
    height: 1px;
    background: #e5e7ee;
    flex-shrink: 0;
}

/* Satır ölçüleri adım şeridiyle (.dcm-step) hizalıdır — aynı modalda iki farklı liste
   ritmi olmasın diye: 13px metin, 8px yarıçap, benzer iç boşluk. Kenarlık HER ZAMAN 1.5px (seçiliyken
   renk alır, normalde saydam) — böylece seçim durumu değişince satır yüksekliği zıplamaz. */
.uxd-bulk-domain-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #20262c;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.uxd-bulk-domain-item:hover { border-color: #9aabff; }

/* Seçili durum, modalın diğer aktif öğeleriyle (.dcm-step--current, .uxd-cs-row-compact.active)
   aynı dili konuşur: mor tint + koyu mor metin. Sınıf JS'te veriliyor (bkz.
   _refreshDomainCheckboxStates) — :has() yerine sınıf, eski tarayıcılarda da çalışsın diye. */
.uxd-bulk-domain-item--selected {
    background: rgba(52, 48, 114, 0.06);
    border-color: #9aabff;
    color: #343072;
    font-weight: 600;
}

/* ── Checkbox — müşteri panelindeki domain listesinin (datatable) .table-checkbox deseni ────────
   Kaynak: Styles/old-panel/components/_list-shared.scss .table-checkbox. O kurallar revision.css'e
   derleniyor ve sepet sayfası onu YÜKLEMİYOR (bkz. dosya başı yorum: bu stil sayfası kendi başına
   ayakta durur), bu yüzden desen burada kendi sınıf adlarıyla yeniden tanımlandı; var(--primary)
   da bu dosyanın kuralı gereği hex karşılığıyla (#343072) çözüldü. Native input gizlenir, görünen
   kutu .uxd-bulk-checkmark'tır. */
/* Kutu, kaynak desendeki 20px yerine 16px: buradaki satır metni 13px (datatable'da daha büyük),
   20px'lik kutu adın kendisinden iri kalıp dengesiz görünüyordu. Tik işaretinin ölçüleri de aynı
   oranda (×0.75) küçültüldü ki glif kutunun içinde aynı yerde dursun. */
.uxd-bulk-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.uxd-bulk-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    cursor: inherit;
}

.uxd-bulk-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background-color: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.uxd-bulk-checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.uxd-bulk-check input:checked ~ .uxd-bulk-checkmark {
    background-color: #343072;
    border-color: #343072;
    box-shadow: 0 4px 10px rgba(52, 48, 114, 0.2);
}

.uxd-bulk-check input:checked ~ .uxd-bulk-checkmark::after { display: block; }

.uxd-bulk-domain-item:hover .uxd-bulk-checkmark {
    border-color: #343072;
    background: #f8fafc;
}

.uxd-bulk-check input:focus-visible ~ .uxd-bulk-checkmark {
    outline: 2px solid #343072;
    outline-offset: 2px;
}

/* Devre dışı satırda kutu da nötr kalır — satırın opacity'si tek başına "tıklanamaz" demiyordu. */
.uxd-bulk-domain-item--disabled .uxd-bulk-checkmark,
.uxd-bulk-domain-item--disabled:hover .uxd-bulk-checkmark {
    border-color: #cbd5e1;
    background: #eef0f4;
    box-shadow: none;
}

/* Seçili domainlerle farklı TLD grubunda (bkz. DomainContactModal.js tldGroupKey) — birlikte
   yapılandırılamaz, seçim tamamen boşalana kadar devre dışı kalır. */
.uxd-bulk-domain-item--disabled {
    cursor: not-allowed;
    opacity: 0.45;
    background: #f9f9fb;
}

.uxd-bulk-domain-item--disabled:hover { border-color: transparent; }

/* min-width:0 — flex öğesinin varsayılan min-width:auto'su içerikten küçülmeyi engeller; onsuz
   ellipsis hiç devreye girmez ve satır max-width sınırını taşırdı. */
.uxd-bulk-domain-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bölüm bazlı "Bu Bölümü Uygula" — yalnızca bulk modda, her bölümün (Kişi Bilgileri/DNS) altında. */
.uxd-bulk-apply-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f2f2f6;
}

/* ── Adım şeridi (breadcrumb) — eski sol nav'ın yerini aldı: bölümler artık modalın ÜSTÜNDE,
   numaralı adımlar olarak durur. Böylece kullanıcı kaç adım olduğunu, hangisinde bulunduğunu ve
   hangilerini gördüğünü tek bakışta anlar. Hiçbir adım kendi başına kaydetmez — bkz.
   DomainContactModal.js _renderNav. */
.dcm-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 20px 14px;
    border-bottom: 1px solid #e0e0e8;
}

/* İleri gitmenin tek yolu "Devam Et" (bkz. _saveAndContinue) — henüz görülmemiş bir adıma şeritten
   ATLANAMAZ. Görülmüş adımlara ise geri dönülebilir; onlar <button> olarak render edilir ve
   .dcm-step--clickable alır. Hatalı adım da her hâlükârda tıklanabilir (bkz. .dcm-step--error). */
.dcm-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b3b4c0;
    user-select: none;
}

.dcm-step--clickable { cursor: pointer; }
.dcm-step--clickable:hover { background: #f9f9fb; }

/* Adım numarası / görüldü işareti */
.dcm-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e8;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.dcm-step--visited { color: #20262c; }

.dcm-step--visited .dcm-step-marker {
    background: rgba(52, 48, 114, 0.08);
    border-color: #9aabff;
    color: #343072;
}

.dcm-step--current { color: #343072; font-weight: 700; }

.dcm-step--current .dcm-step-marker {
    background: #343072;
    border-color: #343072;
    color: #fff;
}

/* Sunucudan alan hatası dönen adım. Kaydetme tek seferde ve son adımda yapıldığı için hata,
   kullanıcının o an baktığından BAŞKA bir adıma ait olabilir — girdiyi işaretlemek tek başına
   yetmez, şerit de nereye dönmesi gerektiğini söylemeli (bkz. DomainContactModal _flagStepErrors).
   --current/--visited'dan SONRA tanımlı: aynı özgüllükte olduklarından hata rengi kazanmalı. */
.dcm-step--error { color: #c4201c; }

.dcm-step--error .dcm-step-marker {
    background: #ffe8eb;
    border-color: #eb5e5e;
    color: #c4201c;
    font-size: 12px;
}

.dcm-step-sep { color: #cbccd6; font-size: 11px; display: inline-flex; }

@media (max-width: 576px) {
    .dcm-steps { padding: 8px 12px 12px; }
    .dcm-step-label { display: none; }
}

/* ── Pattern 01 (İki Panel) — orta panel + sağdan açılan düzenleme paneli ────────────────────── */

.uxd-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.uxd-section-icon--contact { background: rgba(52, 48, 114, 0.08); color: #343072; }
.uxd-section-icon--additional { background: rgba(235, 123, 48, 0.1); color: #eb7b30; }
.uxd-section-icon--dns { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* transition: flex (grow+shrink dahil, sadece basis değil) — ikisi de animasyonludur; listeden
   çıkarılırsa .squeezed anında zıplar, genişlik animasyonundan kopuk kalır — düzenleme panelinin
   genişliği taşmadan önce settle olamamasının sebebi tam da buydu. */
.uxd-md-pane {
    flex: 1 1 0%;
    padding: 18px 20px;
    min-width: 0;
    transition: flex .3s cubic-bezier(.22, .61, .36, 1), padding .3s ease;
}

.uxd-md-pane.squeezed { flex: 0 0 232px; padding: 18px 14px; }

.uxd-cs-row {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.uxd-cs-row:last-child { margin-bottom: 0; }
.uxd-cs-row.active { border-color: #9aabff; background: #fafcff; }

.uxd-cs-row-compact {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 11px 12px;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.uxd-cs-row-compact:last-child { margin-bottom: 0; }
.uxd-cs-row-compact:hover { border-color: #9aabff; }
.uxd-cs-row-compact.active { border-color: #9aabff; background: #fafcff; }
.uxd-cs-row-compact .contact-row-label { pointer-events: none; gap: 7px; }
.uxd-cs-row-compact .contact-section-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.uxd-cs-row-compact .contact-section-icon { width: 22px; height: 22px; font-size: 11px; }

/* Sağdan açılan 3. panel — flex-basis her zaman "auto"; asıl animasyon max-width üzerinden
   (0'dan çok büyük bir değere) — bu, "auto"ya/flex-grow'lu genişliğe animasyonun her tarayıcıda
   düzgün çalışmamasından kaçınır. Header/body üstüne binen kayma+solma "sağdan içeri kayıyor"
   hissini tamamlar. */
.uxd-md-edit-panel {
    flex: 1 1 auto;
    width: auto;
    max-width: 0;
    overflow: hidden;
    border-left: 0 solid #e0e0e8;
    transition: max-width .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.uxd-md-edit-panel.open { max-width: 2400px; border-left-width: 1px; }

.uxd-md-edit-panel .uxd-md-edit-header,
.uxd-md-edit-panel .uxd-md-edit-body {
    transform: translateX(28px);
    opacity: 0;
    transition: transform .26s ease, opacity .2s ease;
}

.uxd-md-edit-panel.open .uxd-md-edit-header,
.uxd-md-edit-panel.open .uxd-md-edit-body {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .08s;
}

.uxd-md-edit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f2f6;
    flex: none;
}

.uxd-md-edit-header .uxd-med-title { font-size: 13.5px; font-weight: 700; color: #20262c; flex: 1; min-width: 0; }
.uxd-md-edit-header .uxd-med-sub { font-size: 11.5px; color: #727586; font-weight: 400; display: block; margin-top: 1px; }
.uxd-md-edit-body { padding: 16px 24px; overflow-y: auto; flex: 1; }

.uxd-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid #e0e0e8;
    border-radius: 8px;
    background: #fff;
    color: #878895;
    font-size: 16px;
    cursor: pointer;
    flex: none;
    margin-right: 4px;
}

.uxd-back-btn:hover { border-color: #9aabff; color: #2f1c6a; background: #fafcff; }

@media (max-width: 768px) {
    #domain-contact-modal .modal-body { flex-wrap: wrap; }
    .uxd-bulk-domains { width: 100%; border-right: none; border-bottom: 1px solid #e0e0e8; max-height: 140px; }
    .uxd-md-pane.squeezed { flex-basis: 100%; width: 100%; border-bottom: 1px solid #e0e0e8; }

    .uxd-cs-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
    .uxd-cs-row .contact-row-label { grid-column: 1 / 2; grid-row: 1; }
    .uxd-cs-row .contact-row-actions { grid-column: 2 / 3; grid-row: 1; }
    .uxd-cs-row .contact-row-body { grid-column: 1 / 3; grid-row: 2; padding-left: 4px; }

    .uxd-md-pane.squeezed #dcmSummaryList { display: flex; flex-wrap: nowrap; gap: 8px; }
    .uxd-md-pane.squeezed .uxd-cs-row-compact { flex: 0 0 auto; width: auto; margin-bottom: 0; padding: 8px 10px; }
    .uxd-md-pane.squeezed #dcmSummaryList.uxd-stack-vertical { flex-direction: column; }
    .uxd-md-pane.squeezed #dcmSummaryList.uxd-stack-vertical .uxd-cs-row-compact { width: 100%; }

    .uxd-md-edit-panel .uxd-md-edit-header,
    .uxd-md-edit-panel .uxd-md-edit-body { transform: translateY(24px); }
    .uxd-md-edit-panel.open .uxd-md-edit-header,
    .uxd-md-edit-panel.open .uxd-md-edit-body { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .uxd-md-edit-panel, .uxd-md-pane,
    .uxd-md-edit-panel .uxd-md-edit-header, .uxd-md-edit-panel .uxd-md-edit-body { transition: none; }
}