/* ===========================================================================
   Techa temasının üstüne YALNIZCA gerekli eklemeler.
   Temanın kendi kurallarını ezmiyoruz — burada sadece temanın karşılığı
   olmayan şeyler var. Görsel değişiklik gerekiyorsa önce temanın
   public/tema/style.css dosyasında karşılığı olup olmadığına bakın.

   Yeni bileşenlerde temanın kendi değişkenleri kullanılıyor
   (--color-primary, --color-heading, --bg-gray ...) ki yamalık durmasın.
   =========================================================================== */

/* --- 0. WOW animasyonları -----------------------------------------------
   animate.css (68 KB, ~90 animasyon) kaldırıldı; sitede yalnızca üçü
   kullanılıyor. WOW.js elemana "animated" sınıfını ekliyor, karşılığı
   burada. Yeni bir animasyon sınıfı kullanacaksanız (fadeInRight gibi)
   çalışmaz — ya buraya ekleyin ya da animate.css'i geri yükleyin.

   Hareket azaltma tercihi olan kullanıcıda animasyon kapatılıyor; animate.css
   bunu yapmıyordu, erişilebilirlik açısından doğrusu bu.
   ------------------------------------------------------------------------ */

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -40px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

.fadeInUp   { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInLeft { animation-name: fadeInLeft; }

@media (prefers-reduced-motion: reduce) {
    .animated { animation: none !important; }
}

/* --- 1. Erişilebilirlik ------------------------------------------------- */

.skip-link {
    position: fixed; left: -9999px; top: 0; z-index: 9999;
    padding: 12px 22px; background: var(--dark); color: #fff;
}
.skip-link:focus { left: 0; }

/* Bootstrap 5'te .sr-only kaldırıldı; tema hâlâ görsel gizleme için kullanıyor */
.sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* --- 2. Laravel sayfalayıcı --------------------------------------------- */

.pagi-area .pagination { justify-content: center; margin: 0; }

/* --- 3. Form uyarıları --------------------------------------------------- */

.contact-form-box .alert, .appoinment-box .alert { text-align: left; border-radius: 4px; margin-bottom: 20px; }
.appoinment-box .alert { font-size: 14px; }

.contact-tabs .tab-pane iframe { width: 100%; min-height: 400px; border: 0; display: block; }

/*
   Harita: iframe'in kendi yakınlaştırması yerine tıklama doğrudan Google
   Haritalar kaydımıza gitsin. Saydam bir katman iframe'i örtüyor.
*/
.harita-sarmal { position: relative; }
.harita-ortu {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 22px; text-decoration: none;
    background: linear-gradient(to bottom, transparent 65%, rgba(0, 0, 0, .35));
    opacity: 0; transition: opacity .25s ease;
}
.harita-ortu:hover, .harita-ortu:focus-visible { opacity: 1; }
.harita-ortu span {
    background: var(--color-primary); color: #fff;
    padding: 11px 22px; border-radius: 30px;
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.harita-ortu i { font-size: 11px; margin-left: 6px; }

/* Dokunmatikte hover yok — katman her zaman görünür olmalı */
@media (hover: none) {
    .harita-ortu { opacity: 1; }
}

/* Banner içindeki teklif formu kenarlara yapışmasın */
.banner-area .appoinment { padding-top: 30px; padding-bottom: 30px; }
.banner-area .appoinment-box { padding: 38px 32px; }

@media (max-width: 991px) {
    .banner-area .appoinment { padding-top: 0; padding-bottom: 45px; }
}

.blog-area .item .thumb img, .case-items .item .thumb img { width: 100%; object-fit: cover; }

.service-items .item .info h4, .blog-area .info h4, .case-items .left-info h4 { overflow-wrap: break-word; }

.services-details-area .content table, .blog-content table { width: 100%; display: block; overflow-x: auto; }

/* --- 3b. Palete bağlanan sabit renkler ----------------------------------- */

/*
   Temanın açık zeminleri değişken değil sabit renk kullanıyor (#f3f7fd, #fafafa).
   Marka paleti değişince bunlar eski maviye takılı kalıyordu; --bg-gray'e
   bağlıyoruz ki logo rengiyle uyumlu kalsınlar.
*/
.bg-gray,
.services-area .services-tabs ul li button,
.services-area .services-tabs .tab-pane,
.sidebar-item.tags ul li a,
.contact-area form input,
.contact-area form textarea { background-color: var(--bg-gray); }

/* --- 4. Ürün kartları ---------------------------------------------------- */

.product-card { text-align: left; height: 100%; display: flex; flex-direction: column; }
.product-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.product-card-head > i { font-size: 42px; color: var(--color-primary); line-height: 1; }

.product-logo { max-height: 46px; width: auto; }

.product-tag {
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 30px;
    background: var(--bg-gray); color: var(--color-primary); white-space: nowrap;
}

.product-tagline { font-weight: 600; color: var(--color-heading); margin-bottom: 10px; }
.product-audience { font-size: 14px; color: var(--color-paragraph); }
.product-audience i { color: var(--color-primary); margin-right: 6px; }

.product-actions { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.product-link { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.product-link i { font-size: 11px; margin-left: 4px; }

.product-visit { text-align: center; }
.product-visit .product-logo { margin: 0 auto 18px; max-height: 54px; }

.spec-list li { padding: 9px 0; border-bottom: 1px solid rgba(128, 128, 128, .18); font-size: 15px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list strong { color: var(--color-heading); }

/* --- 4b. Sektör sayfaları ------------------------------------------------ */

.sektor-urun { font-size: 13.5px; font-weight: 600; color: var(--color-primary); margin: 12px 0 0; }
.sektor-urun i { margin-right: 5px; }

/* İlgili ürün kutusu — sayfadaki en güçlü satış noktası */
.sektor-urun-kutusu {
    margin: 36px 0; padding: 28px; border-radius: 10px;
    background: var(--bg-gray); border-left: 4px solid var(--color-primary);
}
.sektor-urun-ic { display: flex; gap: 24px; align-items: flex-start; }
.sektor-urun-ic > img { max-width: 110px; max-height: 60px; width: auto; flex: none; }
.sektor-urun-ic span {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px;
}
.sektor-urun-ic h4 { margin-bottom: 8px; }
.sektor-urun-ic p { margin-bottom: 16px; }

.sektor-referans {
    display: flex; gap: 22px; align-items: flex-start;
    padding: 24px; border: 1px solid rgba(128, 128, 128, .2); border-radius: 10px; margin-bottom: 30px;
}
.sektor-referans > img { max-width: 90px; max-height: 50px; width: auto; flex: none; }
.sektor-referans h4 { font-size: 18px; margin-bottom: 6px; }
.sektor-referans p { margin-bottom: 10px; }

.sektor-fiyat strong {
    display: block; font-size: 22px; font-weight: 700;
    color: var(--color-primary); margin-bottom: 8px;
}

[data-theme="dark"] .sektor-urun-kutusu { background: var(--bg-gray); }
[data-theme="dark"] .sektor-referans { border-color: var(--cizgi); }

@media (max-width: 575px) {
    .sektor-urun-ic, .sektor-referans { flex-direction: column; }
}

/* --- 5. Referans logo duvarı --------------------------------------------- */

.referans-sekme { margin-bottom: 45px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.referans-sekme button {
    border: 1px solid rgba(128, 128, 128, .28); background: transparent;
    color: var(--color-heading); font-size: 15px; font-weight: 600;
    padding: 11px 24px; border-radius: 30px; cursor: pointer; transition: all .3s ease;
}
.referans-sekme button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.referans-sekme button.aktif { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/*
   Logo duvarı: eşit boyutlu karolar. Logolar farklı renk ve oranlarda geldiği
   için karo içinde ortalanıyor ve gri tonda duruyor; üzerine gelince kendi
   rengine dönüyor. Bu, karışık logo setlerini derli toplu göstermenin
   standart yolu.
*/
.logo-duvari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

/* Anasayfada satırda beş karo — iki satırda on referans */
.logo-duvari.besli { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1199px) { .logo-duvari.besli { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .logo-duvari.besli { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .logo-duvari.besli { grid-template-columns: repeat(2, 1fr); } }

.logo-karo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; min-height: 165px; padding: 26px 22px;
    border: 1px solid rgba(128, 128, 128, .2); border-radius: 10px;
    background: var(--white); text-align: center;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.logo-karo:hover {
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-regular);
    transform: translateY(-4px);
}

.logo-karo img {
    max-width: 100%; max-height: 62px; width: auto; height: auto;
    filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease;
}
.logo-karo:hover img { filter: none; opacity: 1; }

/* Logo yüklenmemiş firmalar için tipografik yedek */
.logo-yazi {
    font-size: 17px; font-weight: 700; letter-spacing: -.02em;
    color: var(--color-heading); line-height: 1.3;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center;
}
.logo-yazi i { font-size: 10px; opacity: .45; font-weight: 400; }
.logo-karo:hover .logo-yazi { color: var(--color-primary); }

/*
 * Logosuz karo yalnızca yazı taşıyor; logolu karonun 165px'ine ihtiyacı yok.
 * 240'tan fazla referansta bu fark sayfa boyunu üçte bir kısaltıyor.
 */
.logo-karo.yazili { min-height: 108px; padding: 20px 18px; }

.logo-ad {
    font-size: 13px; font-weight: 600; color: var(--color-paragraph);
    display: flex; align-items: center; gap: 6px;
}
.logo-ad i { font-size: 10px; opacity: .6; }
.logo-karo:hover .logo-ad { color: var(--color-primary); }

.logo-karo[hidden] { display: none; }

/*
 * Başlangıçta gizli karolar. Yalnızca JavaScript çalışırken gizleniyor:
 * kapalıysa ziyaretçi tüm referansları görür, sekmeler çalışmasa da liste
 * eksiksiz kalır. Arama motoru da bağlantıların tamamını HTML'de bulur.
 */
html.js .logo-karo.on-gizli { display: none; }
.referans-bos { text-align: center; padding: 50px 0; color: var(--color-paragraph); }

/* Kenar çubuğunda kısaltılmış listeyi tamamlayan "tümünü gör" bağlantısı */
.sidebar-item.link .yan-tumu { font-weight: 600; color: var(--color-primary); }

/* "Daha fazla göster" — JavaScript kapalıysa hiç görünmez, tüm karolar açıktır */
.referans-devam { text-align: center; margin-top: 34px; }
.referans-devam[hidden] { display: none; }
.referans-devam button {
    padding: 13px 34px; border: 1px solid var(--color-primary); border-radius: 6px;
    background: transparent; color: var(--color-primary);
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    transition: background .25s ease, color .25s ease;
}
.referans-devam button:hover { background: var(--color-primary); color: var(--white); }
.referans-devam .kalan { opacity: .7; font-weight: 500; }

/* Karanlık modda logolar zeminde kaybolmasın */
[data-theme="dark"] .logo-karo { border-color: var(--cizgi); }
[data-theme="dark"] .logo-karo img { filter: grayscale(1) brightness(1.6); opacity: .8; }
[data-theme="dark"] .logo-karo:hover img { filter: brightness(1.15); opacity: 1; }

/* Referans detay sayfasındaki müşteri logosu */
.client-logo { max-height: 60px; width: auto; margin-bottom: 20px; }

/* --- 6. Teklif formu ----------------------------------------------------- */

.quote-form label { display: block; font-size: 14px; font-weight: 600; color: var(--color-heading); margin-bottom: 8px; }
.quote-form .form-kvkk { color: var(--color-paragraph); margin: 18px 0 0; }

/* İsteğe bağlı alanları açan düğme — form kısa kalsın diye katlı duruyor */
.detay-ac {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: 0; padding: 4px 0; margin-bottom: 22px;
    color: var(--color-primary); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.detay-ac i { font-size: 11px; transition: transform .25s ease; }
.detay-ac[aria-expanded="true"] i { transform: rotate(45deg); }
.detay-ac:hover { text-decoration: underline; }

.teklif-detay { padding-top: 4px; }
.teklif-detay[hidden] { display: none; }

/* Süreç maddeleri — ayrı bölüm yerine formun yanında */
.teklif-surec ol { counter-reset: adim; list-style: none; padding: 0; margin: 0; }
.teklif-surec li {
    counter-increment: adim; position: relative;
    padding: 0 0 18px 40px; font-size: 14.5px; line-height: 1.6;
}
.teklif-surec li:last-child { padding-bottom: 0; }
.teklif-surec li::before {
    content: counter(adim); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.teklif-surec li strong { display: block; color: var(--color-heading); margin-bottom: 2px; }

.quote-aside a { display: block; padding: 9px 0; font-weight: 600; }
.quote-aside i { width: 22px; color: var(--color-primary); }

/* --- 7. Karanlık / aydınlık tema ---------------------------------------- */

/*
   Tema renklerinin çoğunu değişkenlerden alıyor (var(--white) 51 yerde,
   var(--color-heading) 22 yerde). Bu yüzden karanlık modun büyük kısmı
   değişkenleri yeniden tanımlamakla hallediliyor; altındaki kurallar
   yalnızca temada sabit yazılmış renkleri yakalıyor.
*/
:root { color-scheme: light; }

/*
   Karanlık yüzeyler nötr lacivert değil, marka mavisinin (#248EC8) çok koyu
   tonları. Nötr gri/lacivert kullanınca site "başka bir sitenin karanlık modu"
   gibi duruyordu; hue tutarlılığı markayı karanlıkta da taşıyor.
*/
html[data-theme="dark"] {
    color-scheme: dark;

    --white: #102630;              /* kart / panel yüzeyi */
    --bg-gray: #0B1C25;            /* ikinci bölüm zemini */
    --color-heading: #EAF3F8;
    --color-paragraph: #9DB0BC;
    --box-shadow-regular: 0 2px 14px rgba(0, 0, 0, .55);
    --dark: #050F15;

    --sayfa-zemin: #071720;
    --cizgi: rgba(255, 255, 255, .12);
}

[data-theme="dark"] body { background: var(--sayfa-zemin); color: var(--color-paragraph); }

/* Temada sabit yazılmış açık zeminler */
[data-theme="dark"] .bg-gray,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .top-bar-area,
[data-theme="dark"] .navbar.bg-theme,
[data-theme="dark"] .navbar-default,
[data-theme="dark"] .attr-nav .side,
[data-theme="dark"] .collapse-header,
[data-theme="dark"] .navbar-collapse,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .top-search { background-color: var(--white) !important; }

[data-theme="dark"] .navbar.validnavs { background: var(--sayfa-zemin) !important; }
[data-theme="dark"] .navbar-nav > li > a { color: var(--color-heading) !important; }
[data-theme="dark"] .dropdown-menu li a { color: var(--color-paragraph) !important; }
[data-theme="dark"] .dropdown-menu li a:hover { color: #fff !important; }

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-heading); }

[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] td { color: var(--color-paragraph); }

/* Kart ve kutular */
[data-theme="dark"] .top-features-area .item,
[data-theme="dark"] .service-items .item,
[data-theme="dark"] .blog-area .item,
[data-theme="dark"] .case-items .item,
[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .contact-form-box .content,
[data-theme="dark"] .appoinment-box,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .product-card { background-color: var(--white); border-color: var(--cizgi); }

[data-theme="dark"] .accordion-button { background-color: var(--white); color: var(--color-heading); }
[data-theme="dark"] .accordion-body { background-color: var(--white); color: var(--color-paragraph); }

/* Form alanları */
[data-theme="dark"] .form-control,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--sayfa-zemin) !important;
    border-color: var(--cizgi) !important;
    color: var(--color-heading) !important;
}
[data-theme="dark"] .form-control::placeholder { color: #6c7789 !important; }
[data-theme="dark"] .nice-select,
[data-theme="dark"] .nice-select .list { background-color: var(--sayfa-zemin); color: var(--color-heading); border-color: var(--cizgi); }
[data-theme="dark"] .nice-select .option:hover,
[data-theme="dark"] .nice-select .option.selected { background-color: var(--white); }

[data-theme="dark"] .topic-option { border-color: var(--cizgi); }
[data-theme="dark"] .topic-option:has(input:checked) { background: rgba(var(--marka-rgb), .14); }
[data-theme="dark"] .mix-item-menu button { border-color: var(--cizgi); }
[data-theme="dark"] .spec-list li { border-bottom-color: var(--cizgi); }

/*
   Temada SABİT yazılmış açık renkler.
   Bu liste tahminle değil, style.css taranarak çıkarıldı:
   #e7e7e7 (41 kenarlık), #f3f7fd ve #fafafa (15 zemin).
   Tema güncellenirse taramayı tekrarlayın.
*/
[data-theme="dark"] hr,
[data-theme="dark"] input,
[data-theme="dark"] .top-border,
[data-theme="dark"] .top-bar-area.inc-logo,
[data-theme="dark"] .top-bar-area.inc-border,
[data-theme="dark"] .top-bar-area li::after,
[data-theme="dark"] .content-tabs .nav-tabs,
[data-theme="dark"] .top-features-area .item,
[data-theme="dark"] .work-process-area .work-pro-items .item,
[data-theme="dark"] .services-area .services-content .item,
[data-theme="dark"] .services-details-area .sidebar-item,
[data-theme="dark"] .services-details-area .sidebar-item.link,
[data-theme="dark"] .services-details-area .sidebar-item.link li a,
[data-theme="dark"] .case-details-area .content ul.project-info,
[data-theme="dark"] .faq-area .faq-content .card .card-body,
[data-theme="dark"] .blog-area .info .cats a,
[data-theme="dark"] .blog-area .sidebar input[type="text"],
[data-theme="dark"] .sidebar-item.recent-post li,
[data-theme="dark"] .sidebar-item.tags ul li a,
[data-theme="dark"] .comments-list .commen-item .content .title span,
[data-theme="dark"] .comments-info a,
[data-theme="dark"] .comments-form input,
[data-theme="dark"] .comments-form textarea,
[data-theme="dark"] .contact-area .contact-tabs > ul,
[data-theme="dark"] .error-box .search form input,
[data-theme="dark"] footer .item .f-item form input,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .language-switcher .dropdown-menu,
[data-theme="dark"] .language-switcher .dropdown-menu li,
[data-theme="dark"] .border { border-color: var(--cizgi) !important; }

/* Sabit yazılmış açık zeminler */
[data-theme="dark"] pre,
[data-theme="dark"] .services-area .services-tabs ul li button,
[data-theme="dark"] .services-area .services-tabs .tab-pane,
[data-theme="dark"] .sidebar-item.tags ul li a,
[data-theme="dark"] .team-single-area .social ul li a,
[data-theme="dark"] .contact-area form input,
[data-theme="dark"] .contact-area form textarea { background-color: var(--white) !important; }

/* Haritayı karanlıkta yumuşat */
[data-theme="dark"] .contact-tabs iframe { filter: invert(.9) hue-rotate(180deg) contrast(.88); }

/*
   OKUNABİLİRLİK DÜZELTMELERİ

   Temanın renkli/gradyan zeminli kutularında yazı rengi zemine göre değil
   sabit tanımlanmış. Karanlık modda değişkenler değişince bu kutularda
   metin zeminle çakışıyor. Renkli zemin zaten koyu olduğu için oralarda
   yazı HER İKİ MODDA da beyaz kalmalı.
*/

/* "Teslimden sonra da destek" kutusu — gradyan zemin, telefon numarası dahil */
.choose-us-area .item.bg-gradient,
.choose-us-area .item.bg-gradient h4,
.choose-us-area .item.bg-gradient p,
.choose-us-area .item.bg-gradient span,
.choose-us-area .item.bg-gradient a,
.choose-us-area .item.bg-gradient .call .info a,
.choose-us-area .item.bg-gradient .call .info span,
[data-theme="dark"] .choose-us-area .item.bg-gradient,
[data-theme="dark"] .choose-us-area .item.bg-gradient h4,
[data-theme="dark"] .choose-us-area .item.bg-gradient p,
[data-theme="dark"] .choose-us-area .item.bg-gradient span,
[data-theme="dark"] .choose-us-area .item.bg-gradient a { color: #fff !important; }

.choose-us-area .item.bg-gradient .call .info a { font-weight: 700; text-decoration: none; }
.choose-us-area .item.bg-gradient .call .info a:hover { text-decoration: underline; }
.choose-us-area .item.bg-gradient .icons i { color: #fff !important; }

/* Koyu zeminli bantlarda metin her iki modda beyaz */
.banner-area, .banner-area h1, .banner-area h2, .banner-area h4, .banner-area p,
.video-area, .video-area h2, .video-area h5, .video-area p,
.breadcrumb-area, .breadcrumb-area h1, .breadcrumb-area p,
footer, footer p, footer li, footer a { color: inherit; }

[data-theme="dark"] .banner-area h1,
[data-theme="dark"] .banner-area h4,
[data-theme="dark"] .breadcrumb-area h1,
[data-theme="dark"] .video-area h2 { color: #fff !important; }

[data-theme="dark"] .banner-area p,
[data-theme="dark"] .breadcrumb-area p,
[data-theme="dark"] .video-area p { color: rgba(255, 255, 255, .85) !important; }

/* Karanlıkta kontrastı yeterli olmayan ikincil metinler */
[data-theme="dark"] .blog-area .meta li,
[data-theme="dark"] .blog-area .meta li a,
[data-theme="dark"] .sidebar-item .meta-title span,
[data-theme="dark"] small,
[data-theme="dark"] .text-muted { color: #93A6B2 !important; }

/* Bölüm üst etiketleri marka renginde kalsın */
[data-theme="dark"] .site-heading h4 { color: var(--color-primary) !important; }

/* Karanlıkta vurgu rengi head.blade.php'deki palet bloğundan geliyor
   (Ayarlar → "Marka rengi — karanlık tema"), burada sabitlenmiyor. */
[data-theme="dark"] a { color: inherit; }
[data-theme="dark"] .blog-area .info h4 a:hover,
[data-theme="dark"] .service-items .item .info h4 a:hover,
[data-theme="dark"] .sidebar-item.link li a:hover { color: var(--color-primary) !important; }

/* Düğmelerde yazı her zaman okunur olsun.

   Koyu temada --color-primary açık maviye (#5CB2E4) dönüyor; beyaz yazıyla
   kontrastı 2,35 kalıyordu. Yazıyı koyulaştırmak yerine ZEMİNİ açık temanın
   mavisine sabitliyoruz: beyaz yazı korunuyor, kontrast 4,54 oluyor.
   --color-primary değişmediği için bağlantı ve vurgu renkleri etkilenmiyor. */
[data-theme="dark"] .btn.btn-theme,
[data-theme="dark"] .btn.btn-theme:hover,
[data-theme="dark"] button[type="submit"] { color: #fff !important; }

[data-theme="dark"] .btn.btn-theme,
[data-theme="dark"] .btn.btn-theme:hover,
[data-theme="dark"] .banner-area .appoinment-box button,
[data-theme="dark"] button[type="submit"] { background-color: #207DB0 !important; border-color: #207DB0 !important; }

/* Tema düğmesi */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .3); background: transparent;
    color: inherit; cursor: pointer; transition: all .25s ease; padding: 0;
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Aydınlıkken ay (karanlığa geç), karanlıkken güneş (aydınlığa geç) görünür */
.theme-toggle .gunes { display: none; }
[data-theme="dark"] .theme-toggle .ay { display: none; }
[data-theme="dark"] .theme-toggle .gunes { display: inline; }
[data-theme="dark"] .theme-toggle .ay { display: inline; }

.attr-nav .theme-toggle { margin-right: 6px; }

/* --- 8. WhatsApp / telefon kısayolları ---------------------------------- */

/* Masaüstü: sağ altta dikey yığın */
.hizli-iletisim {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: flex; flex-direction: column; gap: 12px;
}
.hizli-iletisim a {
    position: relative; display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%; color: #fff;
    font-size: 22px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    transition: transform .25s ease;
}
.hizli-iletisim a:hover { transform: scale(1.08); color: #fff; }
.hizli-wa { background: #25d366; }
.hizli-tel { background: var(--color-primary); }

/* Dikkat çeksin ama rahatsız etmesin: tek seferlik yavaş nabız */
.hizli-wa::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55); animation: hizliNabiz 2.8s ease-out infinite;
}
@keyframes hizliNabiz {
    0%   { transform: scale(.92); opacity: .85; }
    70%  { transform: scale(1.32); opacity: 0; }
    100% { opacity: 0; }
}

/* Mobil: alt kenarda tam genişlik çubuk — başparmakla erişilebilir */
.mobil-cubuk { display: none; }

@media (max-width: 767px) {
    .hizli-iletisim { display: none; }

    .mobil-cubuk {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        display: grid; grid-template-columns: repeat(3, 1fr);
        background: var(--white); border-top: 1px solid rgba(128, 128, 128, .22);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobil-cubuk a {
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        padding: 11px 6px; font-size: 11.5px; font-weight: 600;
        color: var(--color-heading); border-right: 1px solid rgba(128, 128, 128, .18);
    }
    .mobil-cubuk a:last-child { border-right: 0; }
    .mobil-cubuk i { font-size: 18px; }
    .mobil-cubuk .mc-wa i { color: #25d366; }
    .mobil-cubuk .mc-tel i { color: var(--color-primary); }
    .mobil-cubuk .mc-teklif i { color: #f7941d; }

    /* Alt çubuk içeriği kapatmasın */
    body { padding-bottom: 62px; }
    footer .footer-bottom { padding-bottom: 10px; }
}

/* --- 9. Duyarlı düzeltmeler --------------------------------------------- */

@media (max-width: 575px) {
    .topic-grid { grid-template-columns: 1fr; }
    .mix-item-menu button { padding: 9px 16px; font-size: 14px; }
    .product-card-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .hizli-wa::after { animation: none; }
    .hizli-iletisim a:hover { transform: none; }
}

/* --- Görsel ölçüleri ve taşma koruması -----------------------------------
   Görsellere CLS için width/height özniteliği veriliyor. Bunlar olmadan
   tarayıcı yer ayıramıyor ve sayfa yüklenirken kayıyor. Ancak öznitelik
   verildiğinde, CSS bir genişlik dayatmıyorsa görsel dosyanın kendi
   ölçüsünde çiziliyor ve kabından taşıyor (logolar bu yüzden devleşmişti).

   Aşağıdaki kural özniteliği en-boy oranı bilgisine indirgiyor: yer ayrılıyor
   ama görünen boyutu yine CSS belirliyor. Logolarda öznitelik hiç
   kullanılmıyor; ölçüleri tamamen temanın kuralına bırakıldı.
   ------------------------------------------------------------------------ */
img { max-width: 100%; height: auto; }

/* --- Koyu temada ters dönen iki metin rengi -------------------------------
   Tema, bu iki yerde metni --dark / --white değişkenleriyle boyuyor. Koyu
   temada o iki değişken YÜZEY rengine dönüştüğü için yazı zeminle aynı
   tona geliyor ve okunamıyordu (kontrast 1,24).

   Sebebi tek tek düzeltmek yerine değişkeni değiştirmek doğru olmaz:
   --dark ve --white başka yerlerde zemin olarak doğru çalışıyor.
   ------------------------------------------------------------------------ */
[data-theme="dark"] .side .widget.address ul li p { color: var(--color-paragraph); }
[data-theme="dark"] footer.bg-dark .f-item .address li strong { color: var(--color-heading); }
html[data-theme="dark"] .btn.btn-light { color: var(--color-heading); }

/* --- Küçük metinlerde kontrast eşiği ---------------------------------------
   Üç yer WCAG AA'nın altında kalıyordu. Renkler mümkün olan en az miktarda
   koyulaştırıldı; gözle fark edilmiyor ama eşiği geçiyor.

   Bölüm etiketi   #207DB0 -> #1F78A9  (4,23 -> 4,52 üzerinde --bg-gray)
   Yazı tarihi     #837F7E -> #6F6B6A  (3,96 -> 5,27 beyaz üzerinde)
   Kategori sayacı #B5B5B5 -> #767676  (2,05 -> 4,54 beyaz üzerinde)
   ------------------------------------------------------------------------ */
.site-heading h4 { color: #1F78A9; }
.blog-area .meta-title .post-date,
.sidebar-item.recent-post .meta-title .post-date { color: #6F6B6A; }
.sidebar-item.category ul li a span { color: #767676; }

html[data-theme="dark"] .site-heading h4 { color: var(--color-primary); }
html[data-theme="dark"] .blog-area .meta-title .post-date,
html[data-theme="dark"] .sidebar-item.recent-post .meta-title .post-date,
html[data-theme="dark"] .sidebar-item.category ul li a span { color: var(--color-paragraph); }

/* ------------------------------------------------------------------
   Açılır menü oku — glif yaması (2026-09-02)

   Tema, menüdeki açılır ok için Font Awesome glifini (U+f107,
   angle-down) doğrudan font ile basıyor. İkon fontu SVG maskesine
   çevrildiğinden o font artık yüklenmiyor ve ok yerine boş kutu (tofu)
   görünüyordu — "HİZMETLERİMİZ □", "ÜRÜNLERİMİZ □".

   tema-glif-yama.php diğer 12 kuralı maskeye bağlamış ama bu kural
   atlanmış. Aynı yöntemle bağlıyoruz: --glif-f107 zaten fa-svg.css
   içinde tanımlı.
------------------------------------------------------------------ */
a.dropdown-toggle::after {
    content: "" !important;
    font-family: inherit !important;
    display: inline-block;
    width: .62em;
    height: .62em;
    margin-left: .35em;
    vertical-align: -.04em;
    border: 0 !important;
    background-color: currentColor;
    -webkit-mask-image: var(--glif-f107);
            mask-image: var(--glif-f107);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* ---- Ürün tanıtım sayfası (2026-09-06) --------------------------------- */
.urun-ozet { font-size: 18px; line-height: 1.7; color: var(--color-heading); margin-bottom: 20px; }
.urun-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.urun-gorsel img { border: 1px solid var(--border-color, #e7e7e7); border-radius: 8px; }
.urun-sayfa .content h2 { font-size: 26px; margin-top: 36px; }
.urun-sayfa .content h3 { font-size: 22px; margin-top: 34px; }
.urun-adimlar { counter-reset: adim; list-style: none; padding: 0; margin: 20px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.urun-adimlar li { counter-increment: adim; background: var(--bg-gray); border-radius: 8px; padding: 22px 20px 20px; position: relative; }
.urun-adimlar li::before { content: counter(adim); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 12px; }
.urun-adimlar li strong { display: block; font-size: 16px; color: var(--color-heading); margin-bottom: 6px; }
.urun-adimlar li p { margin: 0; font-size: 15px; }
.urun-ozellikler { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }
.urun-ozellikler li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--bg-gray); border-radius: 6px; font-size: 15px; }
.urun-ozellikler li i { color: var(--color-primary); margin-top: 4px; flex: none; }
.urun-kapanis { margin-top: 40px; padding: 30px; background: var(--bg-gray); border-left: 4px solid var(--color-primary); border-radius: 8px; }
.urun-kapanis h4 { margin-bottom: 8px; }
.urun-kapanis p { margin-bottom: 18px; }
.urun-kapanis .btn { margin: 0 8px 8px 0; }
.urun-bilgi dl { margin: 0 0 18px; }
.urun-bilgi dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-primary); margin-top: 12px; }
.urun-bilgi dd { margin: 2px 0 0; font-size: 15px; }
.urun-karsilastirma { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
.urun-karsilastirma th, .urun-karsilastirma td { padding: 10px 12px; border-bottom: 1px solid var(--border-color, #e7e7e7); text-align: left; vertical-align: top; }
.urun-karsilastirma th { background: var(--bg-gray); }
@media (max-width: 767px) { .urun-ozet { font-size: 16px; } .urun-dugmeler .btn { width: 100%; text-align: center; } }
/* Tema, içerik listelerindeki onay ikonunu li'nin tamamına yayıyor (width/height 100%); ürün sayfasında küçültülüyor */
.urun-sayfa .content ul li { font-weight: 400; color: var(--color-paragraph, inherit); }
.urun-sayfa .content ul li::after { width: 1em; height: 1em; top: .35em; }
.urun-sayfa .content ul.urun-ozellikler li { padding-left: 12px; }
.urun-sayfa .content ul.urun-ozellikler li::after { display: none; }
.urun-sayfa .content ol.urun-adimlar li { padding-left: 20px; }

/* ---- Yazı ve hizmet içeriğinde numaralı liste (2026-09-16) ---------------
   Tema li'lere list-style:none ve sıfır boşluk veriyor; blog yazısındaki
   adım adım listeler numarasız, birbirine yapışık paragraflar gibi
   görünüyordu. Yalnızca içerik gövdesindeki ol'lar etkileniyor. */
.blog-item-box .info > ol,
.services-details-area .content > ol { list-style: decimal; padding-left: 1.6em; margin: 0 0 24px; }
.blog-item-box .info > ol > li,
.services-details-area .content > ol > li { list-style: decimal; margin-bottom: 10px; padding-left: .3em; }
.blog-item-box .info > ol > li::marker,
.services-details-area .content > ol > li::marker { font-weight: 700; color: var(--color-primary); }