/* =====================================================================
   GÜÇLÜ TEMİZLİK — Özel Stiller
   PHP dönüşümüyle eklenen yeni bileşenler
   ===================================================================== */

/* --- Erişilebilirlik yardımcıları ------------------------------------ */
.gorsel-gizle {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gorsel-gizle-odaklan {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: #0d6efd;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.gorsel-gizle-odaklan:focus { left: 0; color: #fff; }

/* Klavye odak görünürlüğü */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* --- İçerik alanı ---------------------------------------------------- */
.icerik-alani { line-height: 1.85; color: #4a4a4a; }
.icerik-alani p { margin-bottom: 1.1rem; }
.icerik-alani h2,
.icerik-alani h3,
.icerik-alani h4 { margin: 1.8rem 0 .9rem; color: #1c2331; font-weight: 700; }
.icerik-alani h2 { font-size: 1.55rem; }
.icerik-alani h3 { font-size: 1.3rem; }
.icerik-alani h4 { font-size: 1.12rem; }
.icerik-alani ul,
.icerik-alani ol { margin: 0 0 1.2rem 1.3rem; padding: 0; }
.icerik-alani ul { list-style: none; margin-left: 0; }
.icerik-alani ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: .6rem;
}
.icerik-alani ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    left: 0; top: 2px;
    color: #0d6efd;
    font-size: 14px;
}
.icerik-alani ol li { margin-bottom: .6rem; }
.icerik-alani img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
.icerik-alani table {
    width: 100%;
    margin: 1.2rem 0;
    border-collapse: collapse;
}
.icerik-alani table th,
.icerik-alani table td {
    border: 1px solid #e3e8ee;
    padding: 10px 14px;
}
.icerik-alani table th { background: #f6f8fa; font-weight: 600; }
.icerik-alani blockquote {
    border-left: 4px solid #0d6efd;
    background: #f6f9ff;
    padding: 16px 22px;
    margin: 1.4rem 0;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}

/* --- Bölge kartı ----------------------------------------------------- */
.bolge-kart {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 16px 18px;
    height: 100%;
    transition: all .25s ease;
    color: #1c2331;
    text-decoration: none;
}
.bolge-kart:hover {
    border-color: #0d6efd;
    box-shadow: 0 8px 22px rgba(13, 110, 253, .13);
    transform: translateY(-3px);
    color: #0d6efd;
}
.bolge-kart__ikon {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13, 110, 253, .1);
    color: #0d6efd;
    border-radius: 50%;
}
.bolge-kart__ad { font-weight: 600; font-size: 14px; line-height: 1.35; }

/* --- Bölge içi hizmet kartı ------------------------------------------ */
.bolge-hizmet-kart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f6f9ff;
    border-radius: 6px;
    color: #1c2331;
    text-decoration: none;
    transition: all .2s ease;
}
.bolge-hizmet-kart:hover { background: #0d6efd; color: #fff; }
.bolge-hizmet-kart i { color: #0d6efd; }
.bolge-hizmet-kart:hover i { color: #fff; }

/* --- Teklif kutusu --------------------------------------------------- */
.teklif-kutu {
    background: linear-gradient(135deg, #f6f9ff 0%, #eef4ff 100%);
    border: 1px solid #dbe6fb;
    border-radius: 10px;
    padding: 28px;
}
.teklif-kutu h2 { margin-bottom: .6rem; color: #1c2331; }
.teklif-kutu p { margin-bottom: 1.1rem; color: #5a6472; }

/* --- Teklif sayfası yan sütun ---------------------------------------- */
.teklif-yan {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 28px;
}
.avantaj-liste { list-style: none; padding: 0; margin: 20px 0 0; }
.avantaj-liste li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed #e8edf3;
    font-size: 14px;
    line-height: 1.6;
}
.avantaj-liste li:last-child { border-bottom: 0; }
.avantaj-liste i {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13, 110, 253, .1);
    color: #0d6efd;
    border-radius: 50%;
}

/* --- Paylaşım butonları ---------------------------------------------- */
.paylas-alani { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paylas-baslik { font-weight: 600; margin-right: 4px; color: #1c2331; }
.paylas-alani a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f4f8;
    color: #5a6472;
    border-radius: 50%;
    transition: all .22s ease;
    text-decoration: none;
}
.paylas-alani a:hover { background: #0d6efd; color: #fff; transform: translateY(-2px); }
.paylas-alani a.fa-facebook-f:hover { background: #1877f2; }
.paylas-alani a.fa-twitter:hover    { background: #000; }
.paylas-alani a.fa-whatsapp:hover   { background: #25d366; }
.paylas-alani a.fa-linkedin-in:hover { background: #0a66c2; }

/* --- Blog kategori barı ---------------------------------------------- */
.blog-kategori-bar {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
}
.blog-kategori-bar a {
    padding: 9px 20px;
    border: 1px solid #e3e8ee;
    border-radius: 30px;
    font-size: 14px;
    color: #5a6472;
    text-decoration: none;
    transition: all .22s ease;
}
.blog-kategori-bar a:hover,
.blog-kategori-bar a.aktif { background: #0d6efd; border-color: #0d6efd; color: #fff; }

/* --- Benzer yazı kartı ----------------------------------------------- */
.benzer-kart { display: block; text-decoration: none; color: #1c2331; }
.benzer-kart__gorsel {
    display: block;
    height: 130px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 10px;
}
.benzer-kart__baslik {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    transition: color .2s ease;
}
.benzer-kart:hover .benzer-kart__baslik { color: #0d6efd; }

/* --- Yıldız puanı ---------------------------------------------------- */
.yildiz { color: #ffb400; font-size: 14px; letter-spacing: 2px; }
.yildiz-buyuk { font-size: 26px; letter-spacing: 4px; }
.puan-ozet {
    background: #f6f9ff;
    border: 1px solid #dbe6fb;
    border-radius: 10px;
    padding: 30px;
}
.puan-buyuk { font-size: 52px; font-weight: 800; color: #0d6efd; line-height: 1; }
.puan-buyuk span { font-size: 22px; color: #9aa5b4; font-weight: 500; }

/* --- Referans ızgarası ----------------------------------------------- */
.referans-kutu {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 22px 16px 16px;
    text-align: center;
    height: 100%;
    transition: all .25s ease;
}
.referans-kutu:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-3px); }
.referans-kutu img { max-height: 78px; width: auto; max-width: 100%; object-fit: contain; }
.referans-ad {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #5a6472;
}

/* --- Galeri adet etiketi --------------------------------------------- */
.galeri-adet {
    display: block;
    font-size: 12px;
    opacity: .8;
    margin-top: 4px;
}

/* --- Kenar çubuğu iletişim listesi ----------------------------------- */
.widget-iletisim {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 30px;
}
.iletisim-liste { list-style: none; padding: 0; margin: 0; }
.iletisim-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed #e8edf3;
    font-size: 14px;
    color: #5a6472;
}
.iletisim-liste li:last-child { border-bottom: 0; }
.iletisim-liste i { color: #0d6efd; margin-top: 3px; flex: 0 0 18px; }
.iletisim-liste a { color: #5a6472; text-decoration: none; }
.iletisim-liste a:hover { color: #0d6efd; }

/* --- Arama ----------------------------------------------------------- */
.arama-form { display: flex; gap: 10px; }
.arama-form input[type="search"] {
    flex: 1;
    padding: 13px 18px;
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    font-size: 15px;
}
.arama-sonuc {
    padding: 22px 0;
    border-bottom: 1px solid #eef1f5;
}
.arama-sonuc:last-child { border-bottom: 0; }
.arama-tur {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    background: rgba(13, 110, 253, .1);
    color: #0d6efd;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 8px;
}
.arama-sonuc h2 { margin: 0 0 8px; }
.arama-sonuc h2 a { color: #1c2331; text-decoration: none; }
.arama-sonuc h2 a:hover { color: #0d6efd; }
.arama-link { font-size: 12px; color: #2ea44f; word-break: break-all; }

/* --- 404 ------------------------------------------------------------- */
.hata-404 { padding: 40px 0 60px; }
.hata-kod {
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #0d6efd, #6ea8fe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}
.hata-link-liste {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.hata-link-liste a {
    display: inline-block;
    padding: 8px 18px;
    background: #f1f4f8;
    border-radius: 30px;
    font-size: 13px;
    color: #5a6472;
    text-decoration: none;
    transition: all .2s ease;
}
.hata-link-liste a:hover { background: #0d6efd; color: #fff; }

/* --- Hizmet özeti ---------------------------------------------------- */
.hizmet-ozet {
    font-size: 17px;
    color: #4a5464;
    padding: 16px 20px;
    background: #f6f9ff;
    border-left: 4px solid #0d6efd;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.6rem;
}

/* --- Form etiketleri ------------------------------------------------- */
.form-group label { font-weight: 600; font-size: 13px; color: #4a5464; margin-bottom: 6px; display: block; }

/* --- Uyarı kutuları --------------------------------------------------- */
.alert { border-radius: 6px; }

/* --- Kapak görsel yardımcıları --------------------------------------- */
.hizmet-cover,
.kapak {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Duyarlı düzeltmeler --------------------------------------------- */
@media (max-width: 767px) {
    .hata-kod { font-size: 82px; }
    .puan-buyuk { font-size: 42px; }
    .paylas-alani { justify-content: center; }
    .teklif-kutu, .teklif-yan { padding: 20px; }
    .arama-form { flex-direction: column; }
}

/* --- Yazdırma -------------------------------------------------------- */
@media print {
    .header, .footer-wrap-layout1, .whatsapp, .telefon, .scrollup,
    .sidebar-widget-area, .paylas-alani, .teklif-kutu, #preloader { display: none !important; }
    body { background: #fff; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* --- Hareket azaltma tercihi ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}