﻿/* ============================================================
   audis-fix.css — Semantik markup eşlemeleri
   ------------------------------------------------------------
   Klon şablonun style.css'i başlık stillerini ETİKETE bağlıyor
   (her bölümde ayrı bir <h1> vardı — SEO için yanlış). Markup
   semantik kurallara göre yeniden yazıldı (sayfada tek <h1>,
   bölüm başlıkları <h2 class="sec-title">, üst başlıklar
   <p class="sec-kicker">). Bu dosya orijinal görünümü yeni
   sınıflara birebir taşır. style.css'ten SONRA yüklenmeli.
   ============================================================ */

/* Bölüm ana başlığı (orijinal: .blokone ... .dtc>h1) */
.blokone > div > div > .right > .dtc > .sec-title,
.form-section .sec-title,
.layout-form-up .sec-title,
.referance-area-sag .sec-title {
    position: relative;
    font-size: 38px;
    line-height: normal;
    font-weight: 600;
    font-style: normal;
    word-spacing: 0;
    padding: 10px 0;
    color: #000;
    margin: 0 auto;
}

.blokone > div > div > .right > .dtc > .sec-title > b {
    color: #e51d2a;
}

.blokone > div > div > .center > .dtc > .sec-title:after {
    margin: 25px auto 0;
}

/* Bölüm üst başlığı / kicker (orijinal: .blokone ... .dtc>h2 — kırmızı 14px) */
.blokone > div > div > .right > .dtc > .sec-kicker,
.layout-form-up .sec-kicker,
.referance-area-sag .sec-kicker {
    position: relative;
    font-size: 14px;
    line-height: normal;
    font-weight: 700;
    font-style: normal;
    color: #e51d2a;
    margin: 20px 0 10px; /* Bootstrap 3 h2 varsayılan marjları */
}

/* form-section kicker'ı siyah (orijinal: .form-section h2) */
.form-section .sec-kicker {
    color: #000;
}

/* Hero üst başlığı (orijinal: .home__screen__text>div>h2) */
.home__screen__text > div > .hero-kicker {
    margin: 20px auto 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
}
.background-area .home__screen__text > div > .hero-kicker {
    color: #000;
}

/* Açılır menü çözüm kartı başlığı (orijinal: .menu-right .projects-tiles li .inner .text h1) */
.menu-right .projects-tiles li .inner .text .tile-title {
    font-size: 21px;
    opacity: .8;
    margin-bottom: 10px;
    display: block;
    color: #fff;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: 1s .3s;
    transition: 1s .3s;
}
.menu-right .projects-tiles li:hover .inner .text .tile-title {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    opacity: 1;
}

/* Mobil boyutlar (orijinal @media screen and (max-width:1000px) bloğu) */
@media screen and (max-width: 1000px) {
    .blokone > div > div > .right > .dtc > .sec-title,
    .form-section .sec-title,
    .layout-form-up .sec-title {
        font-size: x-large;
    }
    .home__screen__text > div > h1 {
        text-align: center;
        font-size: x-large;
    }
}

/* PictureImage helper'ın ürettiği <picture> sarmalayıcısı akışı bozmasın */
.post-img picture,
.iconbox-icon-container picture,
.galeri-item picture {
    display: contents;
}

/* Referans logoları: PictureImage'ın height="500" özniteliği, tema max-width ile
   genişliği daraltınca boyu 500px bırakıp logoyu dikeyde geriyordu — kare kutunun
   (overflow:hidden) dışına taşan logo görünmez oluyordu. Boy orantılı kalsın. */
.galeri-item img.img-centered {
    height: auto;
}

/* Çözüm ekranları galerisi: tema CSS'i genişliği %100 yapar (galeri-item a img),
   height özniteliği sabit kalırsa görsel gerilir — boy orantılı kalsın. */
.galeri-item a img {
    height: auto;
}

/* Footer yasal linkleri: tema linke yatay boşluk vermez (.o-footer__bottomMenu a
   padding:5px 0 — sınıf+element seçicisi olduğundan tek sınıflı kuralı da ezer),
   linkler ayraç çizgisine yapışıyordu. Ayracın iki yanına eşit boşluk verilir. */
.o-footer__bottomMenu a.o-footer__bottomMenu--link,
.o-footer__bottomMenu span.o-footer__bottomMenu--link {
    padding: 5px 10px;
    margin-bottom: 4px;
}
.kvkk a.o-footer__bottomMenu--link:first-child {
    padding-left: 0;
}

/* İK formu başlığı: orijinalde h1 idi, tek-h1 kuralıyla h2 — h1 varsayılan görünümü korunur */
.ekibekatil-banner .ekibekatil-baslik {
    font-size: 2em;
    font-weight: 700;
    margin: .67em 15px;
}

/* Orijinal bölüm başlıkları h1 idi; tek-h1 kuralıyla h2'ye çevrildi — .heading2>h1
   stilinin h2 karşılığı (style.css'teki kuralın birebir kopyası). */
.heading2 > h2 {
    display: block;
    margin-top: 0;
    margin-bottom: 0 !important;
    position: relative;
    font-weight: 700;
    line-height: 1em;
    color: #000;
    letter-spacing: -.02em;
}

/* ============================================================
   Bootstrap 5 utility köprüleri — altyapı parçaları (skip-link,
   çerez banner'ı, dil seçici) BS5 sınıflarıyla yazılmış; klon
   teması Bootstrap 3 kullandığından burada scoped karşılıkları
   tanımlanır.
   ============================================================ */

/* Skip-link: odaklanmadıkça gizli (BS5 .visually-hidden-focusable) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.position-absolute { position: absolute; }
.top-0 { top: 0; }
.start-0 { left: 0; }
.m-2 { margin: .5rem; }

/* ─── Çerez banner'ı (#cookieBanner) ─── */
#cookieBanner { position: fixed; bottom: 0; left: 0; right: 0; }
#cookieBanner .rounded-4 { border-radius: 1rem; }
#cookieBanner .rounded { border-radius: .375rem; }
#cookieBanner .rounded-pill { border-radius: 50rem; }
#cookieBanner .p-4 { padding: 1.5rem; }
#cookieBanner .p-3 { padding: 1rem; }
#cookieBanner .px-3 { padding-left: 1rem; padding-right: 1rem; }
#cookieBanner .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
#cookieBanner .mb-0 { margin-bottom: 0; }
#cookieBanner .mb-2 { margin-bottom: .5rem; }
#cookieBanner .mb-3 { margin-bottom: 1rem; }
#cookieBanner .mt-3 { margin-top: 1rem; }
#cookieBanner .me-1 { margin-right: .25rem; }
#cookieBanner .me-2 { margin-right: .5rem; }
#cookieBanner .ms-1 { margin-left: .25rem; }
#cookieBanner .small, #cookieBanner small { font-size: .875em; }
#cookieBanner .h6 { font-size: 1rem; margin: 0 0 .5rem; font-weight: 600; }
#cookieBanner .fw-medium { font-weight: 500; }
#cookieBanner .text-decoration-none { text-decoration: none; }
#cookieBanner .d-flex { display: flex; }
#cookieBanner .gap-2 { gap: .5rem; }
#cookieBanner .flex-wrap { flex-wrap: wrap; }
#cookieBanner .justify-content-end { justify-content: flex-end; }
#cookieBanner .align-items-center { align-items: center; }
#cookieBanner .row { display: flex; flex-wrap: wrap; margin: -8px; }
#cookieBanner .row > * { padding: 8px; box-sizing: border-box; }
#cookieBanner .col-md-6 { flex: 0 0 100%; max-width: 100%; }
#cookieBanner .col-md-4 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    #cookieBanner .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    #cookieBanner .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    #cookieBanner .justify-content-md-end { justify-content: flex-end; }
}
#cookieBanner .btn { display: inline-block; border: none; cursor: pointer; font-size: .875rem; padding: .375rem .75rem; line-height: 1.5; text-align: center; transition: opacity .15s; }
#cookieBanner .btn:hover { opacity: .85; }
/* Switch görünümlü onay kutuları */
#cookieBanner .form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
#cookieBanner .form-check-input {
    -webkit-appearance: none; appearance: none;
    width: 2.2em; height: 1.2em; margin: 0;
    background: #6e6e73; border-radius: 2em; border: none;
    position: relative; cursor: pointer; outline: none; transition: background .2s;
    flex: 0 0 auto;
}
#cookieBanner .form-check-input:checked { background: #0071e3; }
#cookieBanner .form-check-input:disabled { opacity: .6; cursor: not-allowed; }
#cookieBanner .form-check-input::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: calc(1.2em - 4px); height: calc(1.2em - 4px);
    border-radius: 50%; background: #fff; transition: transform .2s;
}
#cookieBanner .form-check-input:checked::after { transform: translateX(1em); }
#cookieBanner .form-check-label { margin: 0; }

/* ─── Dil seçici FAB (.dil-fab) — BS5 dropdown yerine shim ─── */
.dil-fab .dropdown { position: relative; }
.dil-fab .rounded-pill { border-radius: 50rem; }
.dil-fab .px-3 { padding-left: 1rem; padding-right: 1rem; }
.dil-fab .btn { border: none; cursor: pointer; font-size: .875rem; padding: .375rem .75rem; line-height: 1.5; }
.dil-fab .ms-1 { margin-left: .25rem; }
.dil-fab .fw-medium { font-weight: 500; }
.dil-fab .dropdown-menu {
    display: none; position: absolute; bottom: 100%; right: 0; left: auto;
    margin: 0 0 .5rem; list-style: none; padding: .25rem;
    border-radius: .75rem; box-shadow: 0 .25rem 1rem rgba(0,0,0,.2);
}
.dil-fab .dropdown.open > .dropdown-menu { display: block; }
.dil-fab .dropdown-item {
    display: block; padding: .35rem .75rem; color: #111;
    text-decoration: none; border-radius: .5rem; font-size: .85rem; white-space: nowrap;
}
.dil-fab .dropdown-item:hover, .dil-fab .dropdown-item.active { background: rgba(0,0,0,.08); }

/* Blog kartı tarih satırı (panele bağlama: tarih blogdan gelir) */
.blog-layout-1 .post-date { font-size: 12px; color: #888; margin: 0 0 6px; }

/* ─── Hero carousel (Gösterim Tipi = carousel) ─── */
/* İlk slide dışındaki başlıklar h1 yerine .hero-title basılır (tek h1 kuralı);
   görünüm orijinal .home__screen__text>div>h1 kuralının birebir kopyasıdır. */
.home__screen__text > div > .hero-title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    display: block;
    text-shadow: 6px 2px 10px #04040442;
    margin: 20px auto 0;
}
.audis-hero-slick .slick-list,
.audis-hero-slick .slick-track,
.audis-hero-slick .slick-slide > div {
    height: 100%;
}
@media screen and (max-width: 1000px) {
    .home__screen__text > div > .hero-title {
        text-align: center;
        font-size: x-large;
    }
}