/* =====================================================================
   DATCO AJANS KİTİ — TEMEL KATMAN  (assets/css/kit-base.css)
   ---------------------------------------------------------------------
   KURAL: Bu dosya HİÇBİR global class'ı yeniden tanımlamaz.
   - .ctb-row / .ctb-column canvas sisteminindir (ComponentTreeRenderer
     baseCss satır 561-563) — bu dosyada onlara ASLA dokunulmaz.
   - Kit iskeleti .dtk-scope sarmalayıcısı altında çalışır; kit blokları
     canvas'a html node olarak yapıştırıldığında canvas'ın kendi
     .ctb-row temel stiliyle uyumlu şekilde ÜSTÜNE katman ekler.
   - Renk/geometri token'ları ThemeService'ten gelir (--ink, --cream,
     --bronze, --surface, --border, --radius-*, --shadow-*). Bu dosya
     yalnızca spacing/tipografi token'ları EKLER, mevcutları ezmez.
   ===================================================================== */

:root {
    /* Spacing ritmi */
    --dtk-sp-1: .25rem;  --dtk-sp-2: .5rem;  --dtk-sp-3: .75rem;
    --dtk-sp-4: 1rem;    --dtk-sp-5: 1.5rem; --dtk-sp-6: 2rem;
    --dtk-sp-7: 3rem;    --dtk-sp-8: 4rem;   --dtk-sp-9: 6rem;

    /* Akışkan tipografi */
    --dtk-fs-xs: .8125rem;
    --dtk-fs-sm: .9rem;
    --dtk-fs-lg: 1.125rem;
    --dtk-fs-xl: clamp(1.25rem, 1.5vw, 1.375rem);
    --dtk-fs-h3: clamp(1.375rem, 2vw, 1.625rem);
    --dtk-fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);
    --dtk-fs-h1: clamp(2.375rem, 5vw, 4rem);

    /* Türetilmiş tonlar (tema preset'i değişince otomatik uyum sağlar) */
    --dtk-ink-soft: color-mix(in srgb, var(--cream) 72%, transparent);
    --dtk-line-dark: color-mix(in srgb, var(--cream) 12%, transparent);
    --dtk-accent-tint: color-mix(in srgb, var(--bronze) 12%, transparent);
    --dtk-ease: cubic-bezier(.16, 1, .3, 1);
}

/* =====================================================================
   1) KİT İSKELETİ — yalnızca .dtk-scope altında geçerli
   Canvas'ın .ctb-row'una (display:flex; width:100%) container ölçüsü,
   gap ve iç boşluk katmanı ekler. Kolonlar bağımsız/taşınabilir kalır.
   ===================================================================== */
.dtk-scope .ctb-row {
    gap: var(--dtk-sp-6);
    max-width: 77.5rem;
    margin-inline: auto;
    padding-inline: var(--dtk-sp-5);
}
.dtk-scope .block-section { padding-block: var(--dtk-sp-9); }
.dtk-scope .block-fullbleed { max-width: none; padding-inline: 0; }

.dtk-scope .ctb-column--narrow { flex: 0 1 20rem; }
.dtk-scope .ctb-column--wide   { flex: 2 1 0; }

/* ---- BLUF bilgi kutusu (GEO/LLM sinyali) ---------------------------- */
.dtk-scope .bluf-box {
    background: var(--dtk-accent-tint);
    border-left: .25rem solid var(--bronze);
    border-radius: var(--radius-sm, 8px);
    padding: var(--dtk-sp-4) var(--dtk-sp-5);
    margin-bottom: var(--dtk-sp-6);
    color: var(--ink);
    font-size: var(--dtk-fs-lg);
    line-height: 1.6;
}
.dtk-scope .bluf-box strong { color: var(--bronze-dark, var(--bronze)); }

/* ---- Görsel amaçlı büyük metin (başlık etiketi DEĞİL) --------------- */
.dtk-scope .display-text {
    font-size: var(--dtk-fs-h2);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

/* ---- Progressive reveal: içerik ASLA gizlenmez ---------------------- */
.js-reveal { opacity: 1; transform: none; }
html.js-enabled .js-reveal {
    opacity: 0;
    transform: translateY(var(--dtk-sp-4));
    transition: opacity .7s var(--dtk-ease), transform .7s var(--dtk-ease);
}
html.js-enabled .js-reveal.is-visible { opacity: 1; transform: none; }

/* ---- Kit butonu ------------------------------------------------------ */
.dtk-scope .kit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dtk-sp-2);
    background: var(--bronze);
    color: var(--surface);
    font-weight: 600;
    font-size: var(--dtk-fs-sm);
    padding: var(--dtk-sp-3) var(--dtk-sp-6);
    border-radius: var(--radius-sm, 8px);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s var(--dtk-ease), transform .25s var(--dtk-ease), box-shadow .25s var(--dtk-ease);
}
.dtk-scope .kit-btn:hover {
    background: var(--bronze-dark, var(--bronze));
    transform: translateY(calc(var(--dtk-sp-1) * -1));
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
}
.dtk-scope .kit-btn--outline {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 .125rem var(--border-strong, currentColor);
}
.dtk-scope .kit-btn--outline:hover {
    background: transparent;
    color: var(--bronze);
    box-shadow: inset 0 0 0 .125rem var(--bronze);
}

/* ---- Inline SVG ikon sarmalayıcı ------------------------------------ */
.dtk-icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.dtk-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* =====================================================================
   2) SITE CHROME EKLERİ — layout'un mevcut header/footer'ına eklenen
   opsiyonel parçalar (ayarlardan açılıp kapanır). Mevcut .site-header /
   .site-footer stillerine dokunulmaz; yalnızca yeni öğeler tanımlanır.
   ===================================================================== */

/* Header telefon kutusu (header_show_phone ayarı) */
.dtk-header-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--dtk-sp-3);
    background: color-mix(in srgb, var(--cream) 6%, transparent);
    border: 1px solid var(--dtk-line-dark);
    color: var(--cream);
    font-weight: 700;
    font-size: var(--dtk-fs-sm);
    padding: var(--dtk-sp-2) var(--dtk-sp-4);
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    white-space: nowrap;
}
.dtk-header-phone .dtk-icon { color: var(--bronze); }
@media (max-width: 62rem) {
    .dtk-header-phone span:last-child { display: none; }
}

/* =====================================================================
   3) DATCO AJANS KİTİ — EXACT PALETTE (landing template canvas blokları)
   ---------------------------------------------------------------------
   KARAR: Kullanıcı kaynak HTML'lerin renk/genişlik/boşluklarının BİREBİR
   aynısını istedi. Bu bölüm artık ThemeService token'larına (--bronze vb.)
   MAP EDİLMEZ — kaynak dosyalardaki gerçek hex değerleri sabit kodlanır.
   Tema preset'i değiştirilse bile bu kit sayfaları görsel olarak SABİT
   kalır (bu, "birebir" isteğinin doğal sonucu — dinamik tema uyumu ile
   piksel-birebir sadakat birbirini dışlar, kullanıcı ikincisini seçti).
   Sadece .dtk-scope altında geçerli, siteye sızmaz.
   ===================================================================== */
.dtk-scope {
    --x-primary: #f97316;
    --x-primary-dark: #ea580c;
    --x-dark-900: #111111;
    --x-dark-800: #1a1a1a;
    --x-dark-700: #2a2a2a;
    --x-gray-50:  #f9fafb;
    --x-gray-100: #f3f4f6;
    --x-gray-200: #e5e7eb;
    --x-gray-400: #9ca3af;
    --x-gray-500: #6b7280;
    --x-gray-600: #4b5563;
    --x-gray-700: #374151;
    --x-gray-800: #1f2937;
    --x-white: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--x-gray-800);
    background: var(--x-white);
}
.dtk-scope * { box-sizing: border-box; }
.dtk-scope img { max-width: 100%; height: auto; display: block; }
.dtk-scope a { text-decoration: none; color: inherit; transition: .2s; }

/* Tailwind'in gerçek `.container` breakpoint davranışı (mx-auto + px-6) */
.dtk-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.5rem; /* px-6 */
}
@media (min-width: 640px)  { .dtk-container { max-width: 640px; } }
@media (min-width: 768px)  { .dtk-container { max-width: 768px; } }
@media (min-width: 1024px) { .dtk-container { max-width: 1024px; } }
@media (min-width: 1280px) { .dtk-container { max-width: 1280px; } }
@media (min-width: 1536px) { .dtk-container { max-width: 1536px; } }

/* Homepage'in KENDİ container'ı (custom CSS, sabit 1240px — Tailwind değil) */
.dtk-container-geo { max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

.dtk-btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--x-primary);
    color: var(--x-white);
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.dtk-btn:hover { background: var(--x-primary-dark); }
.dtk-btn-outline { background: transparent; border: 2px solid var(--x-gray-200); color: var(--x-dark-900); }
.dtk-btn-outline:hover { border-color: var(--x-primary); color: var(--x-primary); }

.dtk-footer-newsletter { display: flex; margin-top: var(--dtk-sp-5); max-width: 22rem; }
.dtk-footer-newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: var(--dtk-sp-3) var(--dtk-sp-4);
    border: 1px solid var(--dtk-line-dark);
    border-inline-end: 0;
    border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--cream) 8%, transparent);
    color: var(--cream);
    font-size: var(--dtk-fs-sm);
    outline: none;
}
.dtk-footer-newsletter input[type="email"]::placeholder { color: var(--dtk-ink-soft); }
.dtk-footer-newsletter input[type="email"]:focus { border-color: var(--bronze); }
.dtk-footer-newsletter button {
    background: var(--bronze);
    color: var(--surface);
    border: 0;
    padding-inline: var(--dtk-sp-5);
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background .25s var(--dtk-ease);
}
.dtk-footer-newsletter button:hover { background: var(--bronze-dark, var(--bronze)); }