/* =========================================================================
   Dubai Resales — Tasarım Dili
   Karakter: Premium · Güvenilir · Hızlı
   Tek doğru kaynak. Tema CSS'lerinden SONRA yüklenir, :root burada kesinleşir.
   ========================================================================= */

:root {
    /* ---- 2.1 Marka: lacivert → mavi → camgöbeği ---- */
    --brand-navy: #1e2a78;   /* gradyan başı, koyu vurgu */
    --brand-blue: #2563eb;   /* TEK aksiyon rengi: link, seçili chip, odak */
    --brand-cyan: #22d3ee;   /* gradyan kuyruğu — metin olarak ASLA kullanılmaz */
    --brand-gradient: linear-gradient(95deg, #1e2a78 0%, #2563eb 55%, #22d3ee 100%);
    --brand-blue-hover: #1d4ed8;
    --brand-blue-a25: rgba(37, 99, 235, 0.25);

    /* Header kademesi: iki bar aynı tonda olursa düz ve ağır durur.
       Üst şerit daha koyu (yardımcı bilgi), ana nav marka lacivert. */
    --nav-top: #141b4d;
    --nav-main: #1e2a78;
    --nav-hairline: rgba(200, 163, 90, 0.55);  /* altın saç teli — premium imza */

    /* ---- 2.2 Nötrler ---- */
    --ink: #0e1230;          /* ana metin — saf siyah değil, lacivert-siyah */
    --muted: #5f6470;        /* ikincil bilgi */
    --line: #c9cfd8;         /* kenarlık, ayırıcı */
    --surface: #ffffff;      /* sayfa zemini, kartlar */
    --surface-low: #f3f4f6;  /* bölüm arkaplanı, footer */
    --surface-container: #eceef0; /* chip zemini, pasif alan */
    --surface-high: #e2e5e8; /* yer tutucu, hover zemini */

    /* ---- 2.3 Altın: premium detay. Büyük yüzeyde ASLA kullanılmaz ---- */
    --gold: #c8a35a;         /* ince çizgi, ikon, rozet kenarı */
    --gold-dark: #a98038;    /* altın üzeri metin, hover */
    --gold-soft: #f4ead4;    /* rozet dolgusu */
    --gold-on-soft: #7a5a1c; /* gold-soft üzerindeki metin */

    /* ---- 2.4 Anlam renkleri ---- */
    --ready: #2a9d8f;
    --ready-bg: #d4f1ec;
    --ready-text: #1a6b60;

    --construction: #f59e0b;
    --construction-bg: #fef3c7;
    --construction-text: #92400e;

    --success: #10b981;
    --danger: #c0392b;
    --danger-bg: #fde8e5;

    --whatsapp: #1f9d55;     /* YALNIZCA WhatsApp butonları */
    --whatsapp-hover: #178449;

    /* ---- 3. Tipografi ---- */
    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* ---- 4. Biçim: köşe ---- */
    --radius-pill: 999px;    /* buton, chip, etiket */
    --radius-card: 16px;     /* kart, form alanı */
    --radius-block: 24px;    /* hero, büyük blok */

    /* ---- 4. Biçim: gölge (iki seviye, asla renkli/sert değil) ---- */
    --shadow-rest: 0 1px 2px rgba(14, 18, 48, 0.04), 0 4px 12px rgba(14, 18, 48, 0.06);
    --shadow-raised: 0 2px 4px rgba(14, 18, 48, 0.05), 0 12px 28px rgba(14, 18, 48, 0.10);

    /* ---- Konteyner genişlikleri ---- */
    --w-read: 820px;
    --w-property: 1100px;
    --w-listing: 1320px;

    /* ---- Geriye dönük eşlemeler ----
       Tema ve eklenti dosyaları hâlâ bu isimleri kullanıyor; yeni palete bağlanıyor.
       Yeni kod doğrudan yukarıdaki isimleri kullanmalı. */
    --text: var(--ink);
    --text-muted: var(--muted);
    --text-dim: var(--muted);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --border: var(--line);
    --surface-2: var(--surface-low);
    --bg-page: var(--surface);
    --background-light: var(--surface);
    --bg-0: var(--brand-navy);
    --bg-1: #16205c;
    --background-dark: var(--brand-navy);
    --background-secondary: #16205c;
    --status-ready: var(--ready);
    --status-construction: var(--construction);
    --focus: var(--brand-blue-a25);
    --primary-font: var(--font-body);
    --inactive-bg: var(--surface-container);
}

/* ---- Koyu chrome: header ve hero ----
   Header düz marka lacivert, hero gradyan. Böylece "bir ekranda en fazla
   bir gradyan alanı" kuralı korunur. */
.main-nav-header,
.hero-section,
#mobile-menu {
    --surface: rgba(255, 255, 255, 0.08);
    --surface-2: rgba(255, 255, 255, 0.05);
    --surface-low: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.16);
    --line: rgba(255, 255, 255, 0.16);
    --text: #ffffff;
    --ink: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.72);
    --muted: rgba(255, 255, 255, 0.72);
    --text-dim: rgba(255, 255, 255, 0.60);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
}

/* ---- Temel tipografi ---- */
body {
    background-color: var(--surface);
    font-family: var(--font-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

/* Rakamlar tablo hizalı: fiyat/alan/oda alt alta kaymaz */
.price, .price-main, .pricehouse, .property-card-price,
table td, .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Üst etiket (eyebrow): mono, büyük harf, geniş aralık */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Referans / permit / koordinat gibi teknik değerler */
.mono, .permit-no, .reference-no {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Odak halkası: klavye erişilebilirliği, kaldırılmaz ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Durum etiketleri (Ready / Under construction) ----
   Üçüncü bir durum yok. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-badge--ready {
    background: var(--ready-bg);
    color: var(--ready-text);
}
.status-badge--construction {
    background: var(--construction-bg);
    color: var(--construction-text);
}

/* ---- Butonlar ---- */
.btn-brand,
.btn-whatsapp-brand,
.btn-secondary-brand,
.btn-quiet-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
@media (min-width: 768px) {
    .btn-brand, .btn-whatsapp-brand, .btn-secondary-brand, .btn-quiet-brand {
        min-height: 42px;
    }
}

/* Birincil: marka gradyanı — sayfada bir tane */
.btn-brand {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: var(--shadow-rest);
}
.btn-brand:hover {
    color: #ffffff;
    box-shadow: var(--shadow-raised);
    text-decoration: none;
}

/* WhatsApp: bu yeşil başka hiçbir yerde kullanılmaz */
.btn-whatsapp-brand {
    background: var(--whatsapp);
    color: #ffffff;
}
.btn-whatsapp-brand:hover {
    background: var(--whatsapp-hover);
    color: #ffffff;
    text-decoration: none;
}

/* İkincil */
.btn-secondary-brand {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
.btn-secondary-brand:hover {
    border-color: var(--brand-blue-a25);
    color: var(--ink);
    text-decoration: none;
}

/* Sessiz: satır içi link */
.btn-quiet-brand {
    background: transparent;
    color: var(--brand-blue);
    padding: 0 4px;
    min-height: 0;
}
.btn-quiet-brand:hover {
    color: var(--brand-blue-hover);
    text-decoration: underline;
}

/* ---- Chip (filtre / öneri) ---- */
.chip-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.chip-brand:hover {
    border-color: var(--brand-blue-a25);
    text-decoration: none;
}
.chip-brand.is-selected {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff;
}

/* ---- Altın köşe çizgileri: premium imza ----
   Yalnızca ilan görselinde ve rapor bloklarında. */
.gold-corners {
    position: relative;
}
.gold-corners::before,
.gold-corners::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 2;
}
.gold-corners::before {
    top: 10px;
    left: 10px;
    border-top: 1.5px solid var(--gold);
    border-left: 1.5px solid var(--gold);
}
.gold-corners::after {
    bottom: 10px;
    right: 10px;
    border-bottom: 1.5px solid var(--gold);
    border-right: 1.5px solid var(--gold);
}

/* ---- Form alanları ---- */
.field-brand {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    box-sizing: border-box;
}
.field-brand:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--brand-blue-a25);
}
.field-brand--error {
    border-color: var(--danger);
}
.field-label-brand {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
}
.field-error-brand {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--danger);
}

/* ---- Dokunma hedefi: en az 44x44 ---- */
@media (max-width: 767px) {
    a.btn-brand, a.btn-whatsapp-brand, a.btn-secondary-brand,
    button.btn-brand, button.btn-whatsapp-brand, button.btn-secondary-brand {
        min-height: 48px;
    }
}

/* ---- RTL: Arapça ayna yerleşim ---- */
[dir="rtl"] .gold-corners::before {
    left: auto;
    right: 10px;
    border-left: none;
    border-right: 1.5px solid var(--gold);
}
[dir="rtl"] .gold-corners::after {
    right: auto;
    left: 10px;
    border-right: none;
    border-left: 1.5px solid var(--gold);
}

/* =========================================================================
   Zengin metin güvenlik ağı
   İlan açıklamaları başka sitelerden / yapay zekâ sohbetlerinden kopyalanınca
   yabancı yerleşim sınıfları da yapışıyor. Temanın style.css'i .absolute ve
   .relative gibi yardımcı sınıfları tanımladığı için, yapışan bir
   <div class="absolute"> başlığı akıştan çıkarıp metnin üstüne bindiriyordu.
   Editör içeriğinde yerleşim sınıflarını etkisizleştiriyoruz.
   ========================================================================= */
.ck-content .absolute,
.ck-content .fixed,
.ck-content .sticky,
.ck-content .relative,
.ck-content [class*="absolute"],
.ck-content [class*="-top-"],
.ck-content [class*="-left-"],
.ck-content [class*="-right-"],
.ck-content [class*="-bottom-"] {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Yapışan flex/grid sarmalayıcıları normal blok akışına döndür */
.ck-content .flex,
.ck-content .inline-flex,
.ck-content .grid,
.ck-content [class*="flex-1"] {
    display: block !important;
    flex: none !important;
    gap: 0 !important;
}

/* Yapıştırılan içerik taşmasın */
.ck-content {
    overflow-wrap: break-word;
    word-break: break-word;
}
.ck-content img,
.ck-content table,
.ck-content iframe {
    max-width: 100%;
}
.ck-content table {
    display: block;
    overflow-x: auto;
}