/*
 * Tema üstü küçük eklemeler. Smart temasının kendi dosyaları DEĞİŞTİRİLMEZ;
 * projeye özgü her kural burada yaşar ki tema güncellemesi çakışmasın.
 */

/* Dil değiştirici — header extra-nav içinde durur */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;
}

.language-switcher a {
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

.language-switcher li.active a,
.language-switcher a:hover {
    opacity: 1;
}

.header-black .language-switcher a {
    color: #fff;
}

/* Form geri bildirimleri */
.alert {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-left: 4px solid;
    font-size: 15px;
}

.alert-success {
    background: #f1f9f3;
    border-color: #1f9d55;
    color: #17603a;
}

.alert-danger {
    background: #fdf3f3;
    border-color: #d64545;
    color: #8a2020;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

/* Sayfalamada pasif durum */
.pagination-bx .pagination li.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Boş liste bildirimi */
.empty-state {
    padding: 60px 0;
    text-align: center;
    font-size: 18px;
    color: #6f6f6f;
}

/* Blog kenar çubuğu */
.side-bar .widget {
    margin-bottom: 40px;
}

.side-bar .widget-title {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.side-bar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-bar .widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #ececec;
}

.side-bar .widget ul li a {
    color: #1f1f1f;
}

.side-bar .widget ul li a:hover {
    color: var(--primary, #ffbe00);
}

/* Proje meta listesi */
.project-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-meta-list li {
    padding: 12px 0;
    border-bottom: 1px solid #ececec;
}

.project-meta-list li strong {
    display: block;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    color: #8a8a8a;
}

/* Form alanı hata durumu */
.is-invalid {
    border-color: #d64545 !important;
}

.invalid-feedback {
    display: block;
    color: #d64545;
    font-size: 13px;
    margin-top: 6px;
}

/* Ön yükleyici: tema varsayılanı yerine kurumsal logo animasyonu */
#loading-area {
    background-image: url(/assets/logos/preloader.svg);
    background-size: 120px;
}

/* Header logosu — amber zeminde koyu logo okunur kalsın */
.logo-header img {
    max-height: 42px;
    width: auto;
}

.footer-bottom-logo img {
    max-height: 46px;
    width: auto;
}


/* ──────────────────────────────────────────────────────────────────────────
 * BAŞLIK TİPOGRAFİSİ
 *
 * Temanın kendi başlık fontu (DIN Condensed Bold) Türkçe glifleri taşımıyor:
 * ı, İ, ğ, ş, Ş, Ç gibi karakterler yedek fonta düşüp başlıkları bozuyordu.
 * Barlow Condensed tam Latin-Extended kapsamına sahip ve aynı dar/kondens
 * karakteri veriyor. Tema CSS dosyaları DEĞİŞTİRİLMEDİ; DIN kullanan tüm
 * seçiciler burada tek blokta ezilir.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-banner .intro-title,
.pt-title,
.side-btn,
.split-content .title,
.btn-link,
.social-section .title a,
.site-footer .widget.widget_about .footer-title,
.site-footer .widget.widget_about .footer-title a,
.site-footer .social-link li a,
.site-footer .social-link li a span,
.filter-work-box .filter-list li a span,
.filter-work-box .filter-list li a .title,
.testimonial-box .testimonial-text p,
.testimonial-box .testimonial-name,
.testimonial-box .testimonial-position,
.logo-text span,
.mo-left .header-nav .nav > li > a,
.services-box .title,
.info-box .title,
.section-head .title,
.comments-title,
.comment-reply-title,
.post-title,
ol.comment-list li.comment .comment-author .fn,
.widget-title,
.title-back {
    font-family: var(--font-display);
    font-weight: 600;
}

/* Barlow Condensed, DIN'e göre biraz daha ince görünür; kondens başlıklarda
   harf aralığını hafif toparlayıp aynı ağırlığı yakalıyoruz. */
.page-banner .intro-title,
.split-content .title,
.title-back {
    letter-spacing: 0.01em;
}


/* ──────────────────────────────────────────────────────────────────────────
 * ANASAYFA SLIDER ÇERÇEVESİ
 *
 * Tema slaytları 800x458 (yaklaşık 16:9). Panelden yüklenen kapaklar her
 * oranda olabildiği için görsel, tema oranındaki çerçeveye kırpılarak
 * oturtulur — aksi hâlde kare bir kapak slider'ı dikeyde şişiriyordu.
 * ────────────────────────────────────────────────────────────────────────── */
.page-banner .video-box .slide-carousel .slide-media {
    overflow: hidden;
}

.page-banner .video-box .slide-carousel .slide-media img {
    width: 100%;
    aspect-ratio: 800 / 458;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Ana menü büyük harf. text-transform CSS tarafında yapılır: <html lang="tr">
   olduğu için tarayıcı Türkçe kurallarını uygular (i → İ), PHP'nin mb_strtoupper
   çağrısına gerek kalmaz ve İngilizce sürümde de doğru davranır. */
.header-nav .nav > li > a {
    text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────────
 * YORUM FORMU
 *
 * Tema yalnızca input[type="text"] ve textarea'yı biçimlendiriyor; semantik
 * tipler (email/url) stilsiz kalıyordu. Tip bilgisini korumak (mobil klavye +
 * tarayıcı doğrulaması) uğruna seçici burada genişletiliyor.
 * ────────────────────────────────────────────────────────────────────────── */
.comments-area .comment-form p input[type="email"],
.comments-area .comment-form p input[type="url"],
.comments-area .comment-form p input[type="tel"] {
    width: 100%;
    height: 55px;
    padding: 10px 25px;
    border: 2px solid #e1e6eb;
    border-radius: 4px;
}

/* Tema etiketleri display:none ile gizliyor ve placeholder'a dayanıyor.
   Görsel olarak aynı kalır ama etiket ekran okuyucularda okunur olsun diye
   display:none yerine görsel-gizleme kullanılır. */
.comments-area .comment-form p label {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Placeholder tonu — tema girdi metniyle uyumlu, ama ondan ayrışır. */
.comments-area .comment-form p ::placeholder {
    color: #a7adb5;
    opacity: 1;
    text-transform: none;
}

/* Tema input'lara capitalize uyguluyor; e-posta ve URL'de bu yanıltıcı olur. */
.comments-area .comment-form p input[type="email"],
.comments-area .comment-form p input[type="url"] {
    text-transform: none;
}

.comments-area .comment-form p .invalid-feedback {
    position: absolute;
    bottom: -22px;
    left: 15px;
}

/* Yorum yazarının avatarı satır içi SVG (data: URI) olarak üretilir. */
ol.comment-list li.comment .comment-author .avatar {
    background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
 * BANNER BAŞLIĞI — SÜTUNA SIĞMA
 *
 * Tema .intro-title'ı sabit 250px + overflow:hidden ile kuruyor; bu yalnızca
 * "BUILD/YOUR/DREAM" gibi ≤5 harfli kelimelerde çalışıyor, "TASARLA" gibi uzun
 * kelimeler kırpılıyordu. Burada punto, kelimenin harf sayısına göre sütun
 * genişliğinden (container query birimi cqw) hesaplanır: her satır sütuna tam
 * sığar, kısa kelimeler yine tema puntosuna (250px) kadar büyür.
 * --intro-fit değerini Blade her satır için basar (bkz. resources/views/index.blade.php).
 * Tavan (180px) tema varsayılanı 250px'ten bilinçli olarak düşürüldü.
 * ────────────────────────────────────────────────────────────────────────── */
.page-banner .intro-title-col {
    container-type: inline-size;
}

.page-banner .intro-title {
    font-size: min(180px, calc(var(--intro-fit, 30) * 1cqw));
    line-height: 0.92;
    overflow: visible;
}

@media only screen and (max-width: 1200px) {
    .page-banner .intro-title {
        font-size: min(120px, calc(var(--intro-fit, 30) * 1cqw));
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * GÖVDE TİPOGRAFİSİ
 *
 * Tema gövde metnini Poppins ile kuruyor; banner açıklaması ve sosyal liste
 * Lato'ya, ana menü Roboto'ya sapıyordu. Hepsi tek gövde fontuna — Google Sans —
 * bağlanır. Başlıklar Barlow Condensed'da kalır (bkz. --font-display).
 * ────────────────────────────────────────────────────────────────────────── */
:root {
    --font-body: 'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--font-body);
}

/* Temanın gövde fontundan sapan seçiciler */
.header-nav .nav > li,
.page-banner .video-box .content-box p,
.page-banner .video-box .content-box .social-list ul li,
.dlab-post-text,
.dlab-post-meta,
.contact-info p,
.info-box p,
.split-content .description,
.services-box .description,
.testimonial-text p,
input,
textarea,
select,
button {
    font-family: var(--font-body);
}

/* ──────────────────────────────────────────────────────────────────────────
 * MÜŞTERİ LOGO IZGARASI
 *
 * Tablo gibi görünen tema çizgilerini kaldırıp markaları daha sakin, boşluklu
 * ve sabit ritimli bir logo duvarına çevirir. Görseller kendi oranlarını korur;
 * yüksek veya dairesel logolar satırı şişirmez.
 * ────────────────────────────────────────────────────────────────────────── */
.client-logo-list,
.client-logo-list.column-3,
.client-logo-list.column-4 {
    display: grid;
    gap: 18px;
}

.client-logo-list.column-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client-logo-list.column-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-logo-list li,
.client-logo-list.column-3 li,
.client-logo-list.column-4 li {
    max-width: none;
    min-height: 118px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.client-logo-list.light-border li,
.client-logo-list.dark-border li {
    border-color: rgba(0, 0, 0, 0.06);
}

.client-logo-list li:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.client-logo-list li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.client-logo-list li img {
    width: auto;
    height: auto;
    max-width: 88%;
    max-height: 74px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.client-logo-list li:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.03);
}

@media only screen and (max-width: 991px) {
    .client-logo-list.column-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .client-logo-list.column-3,
    .client-logo-list.column-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .client-logo-list.column-3 li,
    .client-logo-list.column-4 li {
        max-width: none;
        min-height: 104px;
        padding: 20px;
    }

    .client-logo-list li img {
        max-height: 62px;
    }
}