/* =========================================================
   Duru Otomasyon — Dinamik sürüm ek bileşenleri
   style.css değişkenlerini kullanır. 100% mobil uyumlu.
   ========================================================= */

/* --- Flash bildirim (ön yüz) --- */
.site-flash{
    max-width:var(--container);margin:16px auto;padding:14px 20px;border-radius:var(--radius-md);
    font-weight:600;width:calc(100% - 40px);
}
.site-flash-success{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent)}

.field-error{display:block;color:var(--accent);font-size:.82rem;margin-top:6px;font-weight:600}

/* Honeypot (spam tuzağı) — ekranda ve okuyucularda görünmez, botlar doldurur */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Çerez onay banner'ı */
.cookie-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9999;
    width:min(960px,calc(100% - 32px));background:#0f1320;color:#e7e9f0;border:1px solid rgba(255,255,255,.1);
    border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.4);padding:20px 24px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:0;transform:translate(-50%,12px);
    transition:opacity .3s,transform .3s}
.cookie-banner.show{opacity:1;transform:translate(-50%,0)}
.cookie-banner p{margin:0;font-size:.9rem;line-height:1.6;flex:1;min-width:240px;color:#c8ccd8}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-actions .btn{padding:9px 18px;font-size:.86rem}
.btn-cookie-reject{background:transparent;border:1px solid rgba(255,255,255,.25);color:#e7e9f0;
    border-radius:30px;padding:9px 18px;cursor:pointer;font-weight:600;font-size:.86rem;font-family:inherit}
.btn-cookie-reject:hover{background:rgba(255,255,255,.08)}
@media (max-width:560px){.cookie-banner{padding:18px}.cookie-actions{width:100%}.cookie-actions .btn,.btn-cookie-reject{flex:1;text-align:center}}

/* --- Ürün filtre kenar çubuğu (link tabanlı) --- */
.filter-list{display:flex;flex-direction:column;gap:2px}
.filter-link{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-mid);
    text-decoration:none;font-size:.92rem;transition:var(--transition);
}
.filter-link:hover{background:var(--bg-grey);color:var(--text-dark)}
.filter-link.active{background:var(--accent);color:#fff;font-weight:600}
.filter-link .count{
    background:rgba(0,0,0,.07);border-radius:20px;padding:1px 9px;font-size:.78rem;font-weight:600;
}
.filter-link.active .count{background:rgba(255,255,255,.25)}
a.filter-clear{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
a.filter-clear svg{width:14px;height:14px}

/* --- Sayfalama --- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:38px}
.page-link{
    min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-dark);text-decoration:none;font-weight:600;transition:var(--transition);background:#fff;
}
.page-link:hover{border-color:var(--accent);color:var(--accent)}
.page-link.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- Boş durum --- */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-light)}
.empty-state p{margin-bottom:18px;font-size:1.05rem}

/* --- Makale düzeni (blog/hizmet/referans detay + blog liste) --- */
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.article-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-sm)}
.sidebar-card h4{margin:0 0 14px;font-family:var(--font-display);font-size:1.05rem}
.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sidebar-list a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);
    color:var(--text-mid);text-decoration:none;font-size:.92rem;transition:var(--transition)}
.sidebar-list a:hover,.sidebar-list a.active{background:var(--bg-grey);color:var(--accent)}
.sidebar-list svg{width:18px;height:18px;flex-shrink:0}
.sidebar-list .count{margin-left:auto;font-size:.78rem;color:var(--text-light)}
.recent-posts a{font-weight:500;line-height:1.35}
.sidebar-cta{background:var(--primary);color:#fff;text-align:center}
.sidebar-cta h4,.sidebar-cta p{color:#fff}
.sidebar-cta p{opacity:.8;font-size:.9rem;margin-bottom:14px}

/* --- Zengin metin (içerik gövdesi) --- */
.rich-text{line-height:1.8;color:var(--text-mid)}
.rich-text h2{font-family:var(--font-display);color:var(--text-dark);margin:28px 0 12px;font-size:1.5rem}
.rich-text h3{font-family:var(--font-display);color:var(--text-dark);margin:22px 0 10px;font-size:1.2rem}
.rich-text p{margin:0 0 16px}
.rich-text ul,.rich-text ol{margin:0 0 16px;padding-left:22px}
.rich-text img{max-width:100%;border-radius:var(--radius-md)}
.detail-icon-banner{background:var(--bg-grey);border-radius:var(--radius-lg);padding:48px;display:flex;
    align-items:center;justify-content:center;margin-bottom:24px}
.detail-icon-banner svg{width:90px;height:90px;color:var(--accent)}

/* --- Ürün detay --- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:40px}
.product-main-img{background:var(--bg-grey);border-radius:var(--radius-lg);aspect-ratio:4/3;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-main-img img{width:100%;height:100%;object-fit:cover}
.product-main-img svg{width:120px;height:120px;color:var(--accent)}
.product-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.product-thumbs div{width:74px;height:74px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border);cursor:pointer}
.product-thumbs img{width:100%;height:100%;object-fit:cover}
.product-info h1{font-family:var(--font-display);font-size:2rem;margin:8px 0}
.product-lead{font-size:1.05rem;color:var(--text-mid);margin:14px 0}
.product-brand{margin:6px 0;color:var(--text-mid)}
.product-feature-list{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:10px}
.product-feature-list li{display:flex;align-items:center;gap:10px;color:var(--text-dark)}
.product-feature-list svg{width:20px;height:20px;color:var(--success);flex-shrink:0}
.product-certs{margin:16px 0;padding:12px 16px;background:var(--bg-light);border-radius:var(--radius-sm);
    display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cert-badge{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--border);
    color:var(--text-dark);border-radius:30px;padding:5px 12px;font-size:.82rem;font-weight:600}
.cert-badge svg{width:15px;height:15px;color:var(--success)}
.product-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.product-description{margin-top:20px}
.related-products{margin-top:56px}

/* --- Teklif formu --- */
.quote-wrap{max-width:860px;margin:0 auto}
.quote-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:28px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.quote-section h3{display:flex;align-items:center;gap:12px;font-family:var(--font-display);margin:0 0 18px;font-size:1.2rem}
.quote-step-num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.check-card{display:flex;align-items:center;cursor:pointer;border:1.5px solid var(--border);
    border-radius:var(--radius-md);padding:12px 14px;transition:var(--transition);gap:8px}
.check-card:hover{border-color:var(--accent)}
.check-card input{accent-color:var(--accent);width:18px;height:18px}
.check-card span{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500}
.check-card svg{width:20px;height:20px;color:var(--accent)}
.check-card input:checked+span{color:var(--accent)}
.radio-pills{display:flex;flex-wrap:wrap;gap:10px}
.radio-pill{position:relative}
.radio-pill input{position:absolute;opacity:0}
.radio-pill label{display:inline-block;padding:9px 18px;border:1.5px solid var(--border);
    border-radius:30px;cursor:pointer;font-size:.9rem;font-weight:500;transition:var(--transition)}
.radio-pill input:checked+label{background:var(--accent);border-color:var(--accent);color:#fff}
.kvkk-row{display:flex;gap:10px;align-items:flex-start;margin:8px 0 18px;font-size:.9rem;color:var(--text-mid)}
.kvkk-row input{accent-color:var(--accent);width:18px;height:18px;margin-top:2px;flex-shrink:0}

/* --- Blog makale --- */
.blog-article-cover{width:100%;border-radius:var(--radius-lg);margin-bottom:24px}
.blog-article-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.article-share{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}

/* Görsel kartlara otururken oran korunsun */
.product-img img,.blog-img img,.project-icon img{width:100%;height:100%;object-fit:cover}

/* Core Web Vitals: görsel taşmasını engelle, CLS azalt */
img{max-width:100%}
/* Footer'ı ilk boyamada atla (LCP iyileştirme). Sadece footer — animasyonlu
   sayaç içeren istatistik bandına dokunmuyoruz ki sayaçlar garanti çalışsın. */
.footer{content-visibility:auto;contain-intrinsic-size:1px 480px}

/* =========================== Responsive =========================== */
@media (max-width:992px){
    .article-layout{grid-template-columns:1fr}
    .article-sidebar{position:static;order:2}
    .product-detail{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
    .check-grid{grid-template-columns:1fr 1fr}
    .quote-section{padding:20px}
    .product-info h1{font-size:1.6rem}
}
@media (max-width:480px){
    .check-grid{grid-template-columns:1fr}
    .page-link{min-width:38px;height:38px}
}