/* ============================================================
   E-4 Dijital — Sayfa Bileşenleri
   ------------------------------------------------------------
   site.css tasarım SİSTEMİDİR (token'lar, atomik bileşenler).
   Bu dosya ise sayfaya özgü KOMPOZİSYONLARI içerir:
   detay sayfası düzeni, blog kenar çubuğu, iletişim/teklif
   formu yerleşimi, arama sonuçları vb.

   Tüm değerler site.css içindeki token'lardan gelir; token adı
   bulunamazsa güvenli bir yedek (fallback) devreye girer.
   ============================================================ */

/* ===== Ortak: iki sütunlu detay düzeni ===== */
.detail-layout,
.blog-layout,
.contact-layout,
.quote-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 992px) {
    .detail-layout,
    .blog-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .contact-layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .quote-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

.detail-main,
.blog-main,
.quote-main { min-width: 0; }

@media (min-width: 992px) {
    .detail-aside,
    .blog-aside,
    .contact-info,
    .quote-aside {
        position: sticky;
        top: calc(var(--header-h, 76px) + 20px);
        display: grid;
        gap: 1rem;
    }
}

.detail-aside,
.blog-aside,
.contact-info,
.quote-aside { display: grid; gap: 1rem; }

/* ===== Detay sayfası parçaları ===== */
.detail-cover,
.project-hero-media,
.article-cover {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--r-xl, 18px);
    overflow: hidden;
    border: 1px solid var(--line, rgba(255, 255, 255, .07));
    background: var(--ink-800, #0B0F1A);
}

.detail-cover img,
.project-hero-media img,
.article-cover img {
    display: block;
    width: 100%;
    height: auto;
}

.project-hero-media { aspect-ratio: 16 / 8; }
.project-hero-media img { height: 100%; object-fit: cover; }

/* WebP türevi için <picture> sarmalayıcısı; oran kutusunu doldurur.
   picture varsayılanda satır içidir, height:100% ona uygulanmazsa
   içindeki img'nin object-fit kutusu çöker. */
.detail-cover picture,
.project-hero-media picture,
.article-cover picture,
.post-card-media picture,
.project-card-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.detail-block { margin-top: clamp(2rem, 4vw, 3rem); }
.detail-block .section-title { margin-bottom: 1.25rem; }

.detail-cta-card,
.detail-links-card,
.detail-facts-card,
.sidebar-card,
.contact-info-card { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

.detail-cta-card .btn + .btn { margin-top: .6rem; }

.detail-price {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: .75rem 0 1rem;
    padding: .85rem 1rem;
    border-radius: var(--r-md, 12px);
    background: var(--ink-700, #111726);
    border: 1px solid var(--line, rgba(255, 255, 255, .07));
}

.detail-price span { font-size: .8rem; color: var(--text-mute, #66738D); }
.detail-price strong { font-size: 1.35rem; color: var(--text, #E9EEF8); font-weight: 700; }

/* ===== Bağlantı listesi (yan sütun / arama) ===== */
.detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.detail-list a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .8rem;
    border-radius: var(--r-md, 12px);
    color: var(--text-dim, #9AA6BE);
    text-decoration: none;
    transition: background var(--t-fast, .18s) ease, color var(--t-fast, .18s) ease;
}

.detail-list a > span:nth-child(2) { flex: 1; min-width: 0; }
.detail-list a svg { flex: none; }

.detail-list a:hover,
.detail-list a:focus-visible,
.detail-list a.is-active {
    background: var(--ink-700, #111726);
    color: var(--text, #E9EEF8);
}

.detail-list a.is-active { box-shadow: inset 2px 0 0 var(--brand-500, #2F6BD8); }

.search-results a { align-items: flex-start; padding: .9rem; }
.search-results strong { display: block; color: var(--text, #E9EEF8); font-weight: 600; }
.search-results span span { display: block; font-size: .875rem; color: var(--text-mute, #66738D); margin-top: .15rem; }

/* ===== İşaretli liste ===== */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--text-dim, #9AA6BE);
    line-height: 1.6;
}

.check-list li > span:first-child { color: var(--brand-400, #5B8BE8); flex: none; margin-top: .1rem; }
.check-list--lg li { font-size: 1.05rem; padding: .9rem 0; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .07)); }
.check-list--lg li:last-child { border-bottom: 0; }
.check-list strong { color: var(--text, #E9EEF8); }

/* ===== Künye listesi ===== */
.fact-list { margin: 0 0 1.25rem; display: grid; gap: .1rem; }

.fact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .07));
}

.fact:last-child { border-bottom: 0; }

.fact dt {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--text-mute, #66738D);
}

.fact dd { margin: 0; font-weight: 600; color: var(--text, #E9EEF8); text-align: right; font-size: .9rem; }

.fact-tech { margin-bottom: 1.25rem; }
.fact-tech-title {
    display: flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--text-mute, #66738D); margin: 0 0 .6rem;
}

/* ===== Kart içi küçük öğeler ===== */
.service-card-price {
    display: flex; align-items: baseline; gap: .5rem;
    margin: .85rem 0 0; padding-top: .85rem;
    border-top: 1px solid var(--line, rgba(255, 255, 255, .07));
}
.service-card-price span { font-size: .8rem; color: var(--text-mute, #66738D); }
.service-card-price strong { font-size: 1.05rem; color: var(--text, #E9EEF8); }

.project-card-client { font-size: .82rem; color: var(--text-mute, #66738D); }

.project-card-img--placeholder,
.post-card-img--placeholder {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    color: rgba(255, 255, 255, .55);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800; letter-spacing: -.03em;
}

.post-card-img--placeholder { background: var(--ink-700, #111726); }

/* ===== Temsili kapak çizimi (görsel yüklenmemiş kayıtlar) ===== */
.cover-art {
    --a: hsl(var(--art-h) 88% 68%);
    --b: hsl(calc(var(--art-h) + 44) 82% 64%);
    position: relative; display: block;
    width: 100%; height: 100%; overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--art-h) 55% 21%), hsl(calc(var(--art-h) + 42) 58% 10%));
}
.cover-art > svg { display: block; width: 100%; height: 100%; }
.cover-art .art-glow { fill: var(--a); opacity: .16; }
.cover-art .art-glow--b { fill: var(--b); opacity: .14; }
.cover-art .art-win { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; }
.cover-art .art-card { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.cover-art .art-stroke { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.cover-art .art-dot { fill: rgba(255, 255, 255, .38); }
.cover-art .art-soft { fill: rgba(255, 255, 255, .22); }
.cover-art .art-tint { fill: rgba(255, 255, 255, .09); }
.cover-art .art-a { fill: var(--a); }
.cover-art .art-b { fill: var(--b); }
.cover-art .art-dim { opacity: .55; }
.cover-art .art-ring { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.cover-art .art-cursor { fill: #fff; stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.cover-art-icon {
    position: absolute; inset: 0; margin: auto;
    width: 92px; height: 92px;
    display: grid; place-items: center;
    border-radius: 26px; color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
}
.cover-art-icon svg { width: 44px; height: 44px; }

.project-card-art {
    display: block; width: 100%; height: 100%;
    transition: transform var(--t-slow, .5s) var(--ease, ease);
}
.project-card:hover .project-card-art,
.post-card:hover .project-card-art { transform: scale(1.05); }

.project-hero-media .cover-art { height: 100%; }
.detail-cover .cover-art,
.article-cover .cover-art { height: auto; aspect-ratio: 16 / 8; }

/* ===== Başlık / üst menü ek parçaları ===== */
.nav-link-caret { display: inline-flex; margin-left: .2rem; opacity: .7; }
.dropdown-link-icon { display: inline-flex; color: var(--brand-400, #5B8BE8); flex: none; }

@media (max-width: 1100px) { .header-phone { display: none; } }

/* ===== Ekmek kırıntısı ayracı ===== */
.breadcrumb-sep { display: inline-flex; opacity: .45; margin: 0 .15rem; }

/* ===== Kod penceresi dosya adı ===== */
.code-file {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-mute, #66738D);
}

/* ===== Süreç listesi ===== */
.process-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }

/* ===== CTA şeridi ===== */
.cta-band-text { min-width: 0; }
.cta-band-text .section-title { margin-bottom: .5rem; }
.cta-band-text .section-lead { margin-bottom: 0; }

/* ===== Fiyatlandırma ek parçaları ===== */
.pricing-amount { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; }
.pricing-note { color: var(--text-mute, #66738D); font-size: .875rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }

/* ===== Hesaplayıcı ek parçaları ===== */
.calc-steps { display: grid; gap: 1.5rem; }

.calc-step-number {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; flex: none;
    border-radius: 50%;
    background: var(--brand-600, #1E4FA8);
    color: #fff; font-size: .8rem; font-weight: 700;
}

/* ---------------------------------------------------------------
   Seçenek kartı yerleşimi.

   Fiyat etiketi kart kenarlığının DIŞINA taşıyordu: fiyat öğesi
   daraltılabilir olduğu için uzun başlıklar onu dışarı itiyordu.
   Çözüm: gövde küçülebilir (min-width:0), fiyat hiç küçülmez
   (flex:0 0 auto) ve satır sarmaz.
   --------------------------------------------------------------- */
.calc-option {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.05rem 1.15rem;
    overflow: hidden;
}

.calc-option > input[type="checkbox"],
.calc-option > input[type="radio"] {
    flex: 0 0 auto;
    margin-top: .2rem;
}

.calc-option-body {
    display: flex; flex-direction: column; gap: .2rem;
    flex: 1 1 auto;
    min-width: 0;            /* taşmayı engelleyen kritik satır */
    overflow-wrap: anywhere;
}

.calc-option-name {
    font-weight: 600;
    color: var(--text, #E9EEF8);
    overflow-wrap: anywhere;
}

.calc-option-meta {
    font-size: .82rem;
    color: var(--text-mute, #66738D);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   ÖNEMLİ — özgüllük notu:
   site.css içindeki `.calc-option > span` kuralı (özgüllük 0,1,1)
   TÜM doğrudan span çocuklarına `flex:1 1 auto; min-width:0` veriyor.
   Fiyat etiketi de bir span olduğu için daralıp KIRPILIYORDU
   (71px içerik → 35px görünür alan).

   `.calc-option-price` tek başına 0,1,0 olduğundan o kuralı yenemez;
   bu yüzden aşağıda çocuk birleştiricili (0,2,0) seçici kullanıldı.
   --------------------------------------------------------------- */
.calc-option > .calc-option-price,
.calc-option-price {
    flex: 0 0 auto;
    min-width: max-content;      /* asla daralmasın */
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Dar ekranda fiyatı alt satıra al — sıkışıp kesilmesin */
@media (max-width: 560px) {
    .calc-option { flex-wrap: wrap; }
    .calc-option-body { flex-basis: 100%; }
    .calc-option-price {
        width: 100%;
        margin-left: 0;
        text-align: left;
        padding-left: 1.9rem;
    }
}

/* Ek modül ızgarası: dar alanda tek sütun */
@media (max-width: 900px) {
    .calc-options { grid-template-columns: 1fr !important; }
}

/* ===== Blog kenar çubuğu ===== */
.sidebar-card .card-title { font-size: 1.05rem; margin-bottom: .9rem; }

.sidebar-search { display: flex; gap: .5rem; }
.sidebar-search .input { flex: 1; min-width: 0; }

.sidebar-cta { text-align: left; }
.sidebar-cta .card-text { margin-bottom: 1rem; }

.chip-count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 20px; padding: 0 .35rem;
    margin-left: .35rem;
    border-radius: var(--r-pill, 999px);
    background: rgba(255, 255, 255, .07);
    font-size: .72rem; font-weight: 600;
    color: var(--text-dim, #9AA6BE);
}

.chip.is-active .chip-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* ===== Proje filtre çubuğu ===== */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.filter-search { display: flex; align-items: center; gap: .5rem; position: relative; }
.filter-search > svg { position: absolute; left: .8rem; color: var(--text-mute, #66738D); pointer-events: none; }
.filter-search .input { padding-left: 2.4rem; min-width: 240px; }

@media (max-width: 640px) {
    .filter-search { width: 100%; }
    .filter-search .input { min-width: 0; flex: 1; }
}

/* ===== Blog yazısı ===== */
.article-head { max-width: 780px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.article-head .badge { margin-bottom: 1rem; }

.article-title {
    font-family: var(--font-display, system-ui);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.15; letter-spacing: -.03em;
    margin: 0 0 1rem; color: var(--text, #E9EEF8);
}

.article-lead { font-size: 1.1rem; color: var(--text-dim, #9AA6BE); line-height: 1.65; margin: 0 0 1.25rem; }

.article-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: center;
    font-size: .85rem; color: var(--text-mute, #66738D);
}

.article-meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.article-author { gap: .55rem !important; }

.article-body { margin-bottom: 2rem; }

.article-tags,
.article-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding-top: 1.5rem; margin-top: 1.5rem;
    border-top: 1px solid var(--line, rgba(255, 255, 255, .07));
    font-size: .875rem; color: var(--text-mute, #66738D);
}

.author-card { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; }
.author-card strong { display: block; color: var(--text, #E9EEF8); }
.author-card .card-text { margin: .5rem 0 0; }

/* ===== İletişim ===== */
.contact-form-card { padding: clamp(1.5rem, 3vw, 2.25rem); }

.contact-info-card {
    display: flex; align-items: flex-start; gap: .9rem;
    text-decoration: none; color: inherit;
}

.contact-info-card strong { display: block; color: var(--text, #E9EEF8); font-size: .95rem; margin-bottom: .15rem; }
.contact-info-card > span:last-child > span { display: block; color: var(--text-dim, #9AA6BE); font-size: .9rem; word-break: break-word; }
.contact-info-card .card-link { margin-top: .4rem; }

a.contact-info-card:hover { border-color: var(--line-strong, rgba(255, 255, 255, .13)); }

/* ===== Teklif formu ===== */
.quote-section { padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.quote-section + .quote-section { margin-top: 1.25rem; }

.quote-section-title {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-display, system-ui);
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 1.25rem; color: var(--text, #E9EEF8);
}

.quote-form .calc-options { display: grid; gap: .6rem; }

/* ===== SSS grup başlığı ===== */
.faq-group-title { font-size: 1.35rem; margin: 2.5rem 0 1rem; text-transform: capitalize; }
.faq-group-title:first-child { margin-top: 0; }

/* ===== Yasal sayfalar ===== */
.legal-content { max-width: 100%; }
.legal-updated {
    display: flex; align-items: center; gap: .4rem;
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line, rgba(255, 255, 255, .07));
    font-size: .85rem; color: var(--text-mute, #66738D);
}
.legal-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ===== Teşekkür sayfası ===== */
.success-mark {
    display: inline-grid; place-items: center;
    width: 74px; height: 74px; margin-bottom: 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success, #22C55E) 16%, transparent);
    color: var(--success, #22C55E);
    border: 1px solid color-mix(in srgb, var(--success, #22C55E) 35%, transparent);
}

.reference-card {
    display: inline-flex; flex-wrap: wrap;
    align-items: center; justify-content: center; gap: .75rem;
    margin: 2rem auto 0; padding: 1rem 1.4rem;
}

.reference-card > span { font-size: .85rem; color: var(--text-mute, #66738D); }
.reference-card strong {
    font-family: var(--font-mono, monospace);
    font-size: 1.15rem; letter-spacing: .05em;
    color: var(--brand-300, #8FB2F5);
}

.thanks-contact { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line, rgba(255, 255, 255, .07)); }
.thanks-contact p { color: var(--text-mute, #66738D); font-size: .9rem; margin-bottom: .75rem; }

/* ===== Teklif sayfası: durum sorgulama şeridi ===== */
.quote-track-banner {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem;
    margin: -.5rem 0 2rem;
    border-radius: var(--r-lg, 1rem);
    background: var(--brand-a08, rgba(47, 107, 216, .08));
    border: 1px solid var(--brand-a28, rgba(47, 107, 216, .28));
    text-decoration: none; color: inherit;
    transition: background-color var(--t-fast, .18s), border-color var(--t-fast, .18s), transform var(--t-fast, .18s);
}
.quote-track-banner:hover {
    background: var(--brand-a12, rgba(47, 107, 216, .12));
    border-color: var(--brand-a45, rgba(47, 107, 216, .45));
    transform: translateY(-1px);
}
.quote-track-banner-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-a18, rgba(47, 107, 216, .18));
    color: var(--brand-300, #8FB2F5);
}
.quote-track-banner-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.quote-track-banner-text strong { font-size: .98rem; color: var(--text, #E9EEF8); }
.quote-track-banner-text span:last-child { font-size: .85rem; color: var(--text-mute, #66738D); }
.quote-track-banner-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .9rem; color: var(--brand-300, #8FB2F5);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .quote-track-banner { flex-wrap: wrap; }
    .quote-track-banner-cta {
        width: 100%; justify-content: center;
        padding-top: .65rem; margin-top: .15rem;
        border-top: 1px solid var(--brand-a28, rgba(47, 107, 216, .28));
    }
}

/* ===== Teklif durumu sorgulama ===== */
.quote-status-card { padding: 1.75rem; }
.quote-status-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .07));
}
.quote-status-reference {
    display: block; margin-top: .2rem;
    font-family: var(--font-mono, monospace);
    font-size: 1.1rem; letter-spacing: .04em;
    color: var(--brand-300, #8FB2F5);
}
.quote-status-message { font-size: .95rem; color: var(--text-dim, #A8B2C4); margin: 0 0 1.25rem; }

/* ===== Arama sayfası ===== */
.search-page-form { max-width: 520px; margin: 0 auto 2rem; }
.search-group + .search-group { margin-top: 2.5rem; }

.search-group-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.2rem; margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .07));
}

/* ===== Etiket aktif durumu ===== */
.tag.is-active {
    background: var(--brand-600, #1E4FA8);
    border-color: var(--brand-500, #2F6BD8);
    color: #fff;
}

/* ===== Yazdırma ===== */
@media print {
    .site-header, .site-footer, .whatsapp-float, .back-to-top,
    .detail-aside, .blog-aside, .cta-band, .article-share { display: none !important; }
}