/* =========================================================================
   Assimox teması üzerine beyaz eşya servisi düzenlemeleri (CSS)
   -------------------------------------------------------------------------
   assets/ altındaki hiçbir dosyaya dokunulmaz. Bu dosya assimox.css ve
   assimox-responsive.css dosyalarından SONRA yüklenir (layout.php).

   Bölümler:
     00  Temanın ölçülmüş değerleri (yerel değişkenler)
     01  Erişilebilirlik ve altyapı (sr-only, atlama bağlantısı, tuzak, ikon)
     02  Temanın bu projede kırılan yerleri
     03  Uzun içerik tipografisi (.bes-icerik) ve tablolar
     04  Uyarı kutuları
     05  Künye / özet listeleri
     06  Arıza kartları ve rozetler
     07  Bağlantı ızgaraları (marka, hizmet, bölge, öneri)
     08  Kategori filtresi
     09  Bölge sayfaları
     10  Kenar çubuğu kutuları ve kenar çubuğu formu
     11  Blog ve yazı bileşenleri
     12  Form bileşenleri
     13  Ücret sayfası ekleri
     14  Bölüm sarmalayıcıları ve küçük düzeltmeler
     15  Sabit öğeler (WhatsApp, tema uyarısı)
     16  @media blokları (dosyanın sonunda toplu)
   ========================================================================= */


/* =========================================================================
   00 — Temanın ölçülmüş değerleri
   -------------------------------------------------------------------------
   Renkler assimox.css :root bloğundan; ölçüler ilgili bileşen kurallarından
   birebir alınmıştır. Tahmin yok, tema değişkenleri ezilmez; yalnızca kendi
   bileşenlerimizin kullandığı türev değerler burada tanımlanır.
   ========================================================================= */
:root {
    /* Tema kenarlığı: .services-page__single → 1px solid #cfcfcf */
    --bes-cizgi: #cfcfcf;
    /* Açık zeminler: .about-quality #f8f8fa, .process #f6f7fa */
    --bes-zemin: #f8f8fa;
    --bes-zemin-koyu: #eef0f5;
    /* Uyarı tonları */
    --bes-uyari-marka: #0b1a3a;   /* --assimox-black */
    --bes-uyari-fiyat: #b8860b;
    --bes-uyari-guvenlik: #c0392b;
    --bes-uyari-yuksek: #a01d10;
    /* Rozet tonları */
    --bes-dusuk: #1f7a4d;
    --bes-orta: #b8860b;
    --bes-yuksek: #b3261e;
}


/* =========================================================================
   01 — Erişilebilirlik ve altyapı
   ========================================================================= */

/* Temada .sr-only tanımı YOKTUR (assimox.css içinde arandı, bulunamadı);
   şablonlarda ise form etiketlerinde yaygın kullanılıyor. Standart
   görsel-gizleme kuralı burada tanımlanır. */
.sr-only {
    position: absolute !important; /* tema .form-group içinde relative verebiliyor */
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* "İçeriğe geç" bağlantısı: normalde ekran dışında, odaklanınca sol üstte. */
.bes-skip {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 10000;
    display: inline-block;
    padding: 12px 22px;
    background-color: var(--assimox-base);
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0 0 6px 0;
}

.bes-skip:focus,
.bes-skip:focus-visible {
    left: 0;
    color: var(--assimox-black);
    outline: 3px solid var(--assimox-black);
    outline-offset: -3px;
}

/* Bal küpü alanı. `display: none` KULLANILMAZ — bazı botlar gizli alanı
   atlar; ekran dışına alınıp ekran okuyucudan da çıkarılır. */
.bes-tuzak {
    position: absolute !important; /* tema form kutuları input'a display:block veriyor */
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Kendi SVG ikonlarımızın maskesi.
   Tema glifleri <span class="icon-*"> olarak basılır ve font-size ile
   boyutlanır; bu kutu da 1em olduğu için aynı bağlamda aynı boyutta çıkar
   ve currentColor'ı miras alır. */
.bes-ikon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask: var(--bes-ikon) center/contain no-repeat;
            mask: var(--bes-ikon) center/contain no-repeat;
}

/* Tema glif kutuları span'e `display:inline-block` + hizalama veriyor;
   maskeli kutumuz da aynı çizgide dursun. */
.services-one__icon .bes-ikon,
.services-page__icon .bes-ikon,
.process__icon .bes-ikon,
.why-choose-one__points .icon .bes-ikon,
.sidebar__category-list .bes-ikon {
    vertical-align: middle;
}

/* Tema .services-page__icon span'e font-size: 64px veriyor ama bu kural
   yalnızca `span` etiketine değil sınıfa bağlı; maskeli kutumuz da span
   olduğu için boyutu miras alır. Yine de kutunun optik hizası glif
   yüksekliğinden biraz farklı olduğu için küçük bir düzeltme yapılır. */
.services-page__icon .bes-ikon {
    margin-bottom: -6px;
}

.services-one__icon .bes-ikon {
    margin-bottom: -4px;
}


/* =========================================================================
   02 — Temanın bu projede kırılan yerleri
   ========================================================================= */

/* --- 2.1  <main> sarmalayıcısı -----------------------------------------
   Tema taşmayı `body { overflow-x: hidden }` ve `.page-wrapper
   { overflow: hidden }` ile engelliyor. Araya giren <main> bu zinciri
   kırabildiği için kırpma burada yeniden kuruluyor. `clip` seçildi:
   `hidden` bir kaydırma bağlamı oluşturur ve içerideki `position: sticky`
   öğeleri bozar. */
main {
    overflow-x: clip;
}

/* --- 2.2  .services-page__list ızgara çerçevesi -------------------------
   Tema çerçeveyi tam 8 kart varsayarak elle yazılmış nth-child(1..7)
   kurallarıyla kuruyor. Bizde kart sayısı değişken (12 hizmet, 8 kurumsal
   sayfa, marka sayısı panelden) → satır aralarında çift çizgi, son sütunda
   eksik çizgi oluşuyor.

   Sütun sayısından bağımsız çözüm: çerçevenin ÜST ve SOL kenarını kap
   çiziyor, her kart yalnızca kendi SAĞ ve ALT kenarını çiziyor. Böylece
   kaç satır/sütun olursa olsun çizgiler tekilleşiyor.

   Tema kuralı `.services-page__list:nth-child(n) .services-page__single`
   (0,3,0) özgüllüğünde; aşağıdaki seçici `ul` etiketiyle (0,3,1) daha
   yüksek özgüllükte olduğu için !important gerekmiyor. */
ul.services-page__list-box {
    border-top: 1px solid var(--bes-cizgi);
    border-left: 1px solid var(--bes-cizgi);
}

ul.services-page__list-box .services-page__list .services-page__single {
    border: 0;
    border-right: 1px solid var(--bes-cizgi);
    border-bottom: 1px solid var(--bes-cizgi);
}

/* Kart yükseklikleri satır içinde eşitlenmezse çizgiler yine kırılır:
   `.services-page__list` bir flex öğesi olduğu için yüksekliği satırla
   birlikte uzuyor, içindeki `.services-page__single` ise içeriği kadar
   kalıyordu. Kartı kabın tamamına yayıyoruz. */
ul.services-page__list-box .services-page__list {
    display: flex;
}

ul.services-page__list-box .services-page__list .services-page__single {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* "detay +" bağlantısı her kartın en altına otursun. */
ul.services-page__list-box .services-page__single .services-page__read-more {
    margin-top: auto;
    padding-top: 12px;
}

/* Kartta ikon yoksa (marka kartı) başlığın üst boşluğu fazla kalıyor. */
.services-page__single.bes-marka-kart .services-page__title {
    margin-top: 0;
}

/* --- 2.3  Anasayfa hizmet ızgarası -------------------------------------
   Tema burada tam 7 kart varsayıyor (8. sırada mutlak konumlu görsel var)
   ve çerçeveyi yine nth-child ile kuruyor. Kart sayısı sabit olduğu için
   çerçeve kuralları korunuyor; yalnızca kart yükseklikleri satır içinde
   eşitleniyor — aksi hâlde kartlar farklı boyda kalıp çizgiler kayıyor. */
.services-one__list-box .services-one__list {
    display: flex;
}

.services-one__list-box .services-one__list .services-one__single {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.services-one__list-box .services-one__single .services-one__read-more {
    margin-top: auto;
}

/* --- 2.4  Uzun Türkçe başlıklar ----------------------------------------
   Tema başlıklarını tek satırlık İngilizce metne göre kurgulamış
   (.services-one__title 22px/22px). Türkçede başlıklar iki satıra taşıyor;
   satır yüksekliği açılıyor ve kart içeriği hizada kalsın diye başlık
   alanına iki satırlık taban yükseklik veriliyor. */
.services-one__title,
.services-page__title,
.process__title,
.blog-one__title,
.blog-grid__title,
.project-page__title,
.team-one__name,
.amc-plans__title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.services-one__title {
    line-height: 28px;
    min-height: 56px;               /* iki satır */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.services-page__title {
    min-height: 64px;               /* 32px satır yüksekliği × 2 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.process__title {
    min-height: 64px;               /* 32px × 2 */
}

/* --- 2.4b  Ekip kartı künyesi -------------------------------------------
   `.team-one__content` mutlak konumlu (bottom: 16px; left: 40px) ve SAĞ
   sınırı yok: Türkçe unvan ("Doğal gaz ve kombi teknisyeni") karttan taşıp
   iki satıra bölünüyor, ad da fotoğrafın açık bölgesine çıkıp okunmaz
   kalıyordu. Blok kart içine hapsedilir ve altına okunabilirlik için
   koyu bir geçiş konur. */
.team-one__content {
    right: 24px;
}

.team-one__subtitle {
    line-height: 18px;
}

.team-one__img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(to top, rgba(2, 24, 57, 0.85), rgba(2, 24, 57, 0));
    z-index: 1;
    pointer-events: none;
}

/* --- 2.5  Üst menü taşması ---------------------------------------------
   7 ana başlıkla menü tek satırda kalmalı; alt satıra sarkarsa logo ve
   telefon bloğuyla çakışıyor. Sarma kapatılıyor, dar masaüstlerinde
   başlıklar arası boşluk kademeli küçültülüyor (bkz. §16). */
.main-menu .main-menu__list,
.stricky-header .main-menu__list {
    flex-wrap: nowrap;
}

.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
    white-space: nowrap;
}

/* --- 2.6  Süreç sayacı -------------------------------------------------
   Sayaç `.process` üzerinde sıfırlanıyor. Süreç bloğu birden çok sayfada
   geçtiği için her bölümün 1'den başlaması gerekiyor; tema kuralı bunu
   zaten sağlıyor (her <section class="process"> kendi sayacını kurar).
   Aşağıdaki kural, süreç bloğu tema sınıfı olmayan bir kabın içine
   alınırsa da sayacın bölüm başına sıfırlanmasını garanti eder. */
.process {
    counter-reset: count;
}

/* --- 2.7  Odak görünürlüğü ---------------------------------------------
   Tema pek çok bağlantı ve düğmede `outline: none` veriyor; klavyeyle
   gezinen kullanıcı nerede olduğunu göremiyor. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--assimox-primary);
    outline-offset: 2px;
}


/* =========================================================================
   03 — Uzun içerik tipografisi (.bes-icerik)
   -------------------------------------------------------------------------
   Panelden gelen SEO metninin biçimlendirmesi. Tema gövde yazı tipi
   (Barlow 18px/30px, #444) taban alınır; başlıklar temanın başlık yazı
   tipini (Roboto) ve --assimox-black rengini kullanır.
   ========================================================================= */
.bes-icerik {
    color: var(--assimox-gray);
    font-family: var(--assimox-font);
    font-size: 18px;
    line-height: 32px;
}

.bes-icerik > *:first-child {
    margin-top: 0;
}

.bes-icerik > *:last-child {
    margin-bottom: 0;
}

.bes-icerik p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 32px;
}

.bes-icerik h2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--assimox-black);
    margin: 44px 0 18px;
}

.bes-icerik h3 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: var(--assimox-black);
    margin: 34px 0 14px;
}

.bes-icerik h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--assimox-black);
    margin: 28px 0 12px;
}

.bes-icerik h2 + p,
.bes-icerik h3 + p,
.bes-icerik h4 + p {
    margin-top: 0;
}

/* Madde işaretleri: tema list-unstyled ile listeleri sıfırlıyor, burada
   okunur bir liste görünümü geri veriliyor. */
.bes-icerik ul,
.bes-icerik ol {
    margin: 0 0 24px;
    padding-left: 0;
    list-style: none;
}

.bes-icerik ul > li,
.bes-icerik ol > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 30px;
}

.bes-icerik ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--assimox-primary);
}

.bes-icerik ol {
    counter-reset: bes-madde;
}

.bes-icerik ol > li {
    counter-increment: bes-madde;
}

.bes-icerik ol > li::before {
    content: counter(bes-madde) ".";
    position: absolute;
    left: 0;
    top: 0;
    min-width: 22px;
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-weight: 700;
}

.bes-icerik li > ul,
.bes-icerik li > ol {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Bağlantı vurgusu: gövde metninde bağlantı gri kalırsa fark edilmiyor. */
.bes-icerik a {
    color: #0079ab;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 300ms ease;
}

.bes-icerik a:hover,
.bes-icerik a:focus {
    color: var(--assimox-black);
    text-decoration-color: var(--assimox-base);
    text-decoration-thickness: 2px;
}

/* Çip ve kart bileşenleri .bes-icerik içinde de basılıyor; gövde metni
   altı çizgili bağlantı kuralı bunların üstüne binmesin. */
.bes-icerik .bes-bolge-liste a,
.bes-icerik .bes-marka-liste a,
.bes-icerik .bes-hizmet-liste a,
.bes-icerik .bes-kategori-filtre a,
.bes-icerik .bes-ariza-kart,
.bes-icerik .bes-yazi-kart,
.bes-icerik .bes-icerik-yok .thm-btn {
    text-decoration: none;
}

.bes-icerik strong,
.bes-icerik b {
    color: var(--assimox-black);
    font-weight: 700;
}

.bes-icerik em {
    font-style: italic;
}

.bes-icerik blockquote {
    margin: 28px 0;
    padding: 20px 26px;
    border-left: 4px solid var(--assimox-base);
    background-color: var(--bes-zemin);
    font-size: 19px;
    line-height: 32px;
    color: var(--assimox-black);
}

.bes-icerik blockquote p:last-child {
    margin-bottom: 0;
}

.bes-icerik code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 15px;
    background-color: var(--bes-zemin-koyu);
    color: var(--assimox-black);
    padding: 2px 7px;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.bes-icerik img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.bes-icerik hr {
    border: 0;
    border-top: 1px solid var(--bes-cizgi);
    margin: 34px 0;
    opacity: 1;
}

/* --- Tablolar ----------------------------------------------------------
   Başlık satırı --assimox-black zemin üzerine beyaz yazı, gövdede zebra
   satır. Tablolar ozel/servis.js tarafından .bes-tablo-kaydir kabına
   sarılır; hücre boşlukları o kap içinde de aynı kalır. */
.bes-icerik table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 26px;
    background-color: var(--assimox-white);
}

.bes-icerik table th,
.bes-icerik table td {
    padding: 12px 16px;
    border: 1px solid var(--bes-cizgi);
    text-align: left;
    vertical-align: top;
}

.bes-icerik table thead th,
.bes-icerik table th {
    background-color: var(--assimox-black);
    color: var(--assimox-white);
    font-family: var(--assimox-font-two);
    font-weight: 700;
    border-color: #1c3055;
    white-space: nowrap;
}

.bes-icerik table tbody tr:nth-child(even) td {
    background-color: var(--bes-zemin);
}

.bes-icerik table caption {
    caption-side: bottom;
    padding-top: 10px;
    font-size: 15px;
    color: #6b6b6b;
    text-align: left;
}

/* Kaydırma kabı: dar ekranda tablo sayfayı taşırmasın, klavyeyle
   odaklanıldığında kabın kaydırılabilir olduğu görünsün. */
.bes-tablo-kaydir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 26px;
    border-radius: 4px;
}

.bes-tablo-kaydir > table {
    margin-bottom: 0;
    min-width: 520px;
}

.bes-tablo-kaydir:focus,
.bes-tablo-kaydir:focus-visible {
    outline: 3px solid var(--assimox-primary);
    outline-offset: 2px;
}

/* --- .bes-uzun-icerik --------------------------------------------------
   Tema `.about-quality` bölümüne `padding: 120px 0 0` veriyor (ALT PADDING
   YOK): temada bu bölümün altında hep başka bir bölüm geliyor ve boşluğu o
   sağlıyor. Bizde uzun içerik çoğu sayfada son blok; alt boşluk burada
   eklenir. */
.about-quality.bes-uzun-icerik {
    padding-bottom: 110px;
}

/* `.about-quality__left::before` temanın sol sütuna uzanan koyu dekoratif
   bloğu. 8/4 düzenimizde sol sütun metin sütunu olduğu için bu blok yanlış
   yere düşüyor ve metnin arkasında koyu bir alan bırakıyor. */
.bes-uzun-icerik .about-quality__left::before {
    display: none;
}

.bes-uzun-icerik .about-quality__left {
    margin-right: 0;
}

.bes-uzun-icerik .about-quality__img {
    margin-bottom: 34px;
}

/* Panelden dikey (portre) bir fotoğraf yüklendiğinde görsel sayfanın
   tamamını kaplıyor; yüksekliği sınırlanır, oran kırpılarak korunur. */
.bes-uzun-icerik .about-quality__img img {
    max-height: 460px;
    object-fit: cover;
    border-radius: 5px;
}

.bes-uzun-icerik .about-quality__text-1 {
    font-size: 20px;
    line-height: 34px;
    color: var(--assimox-black);
    font-weight: 500;
    padding-bottom: 26px;
}

/* İçeriği hazırlanmamış bölge/hizmet kırılımlarında basılan kutu. */
.bes-icerik-yok {
    background-color: var(--assimox-white);
    border: 1px dashed var(--bes-cizgi);
    border-radius: 6px;
    padding: 28px 30px 30px;
    margin-bottom: 26px;
}

.bes-icerik-yok p {
    margin-bottom: 18px;
}


/* =========================================================================
   04 — Uyarı kutuları
   -------------------------------------------------------------------------
   Ortak görsel dil: solda kalın renkli şerit, açık zemin, küçük ikon.
   Ton sıralaması (sakinden dikkat çekene):
     bes-ornek-notu → bes-marka-uyari → bes-fiyat-notu
     → bes-guvenlik-uyari → bes-guvenlik-uyari--yuksek
   ========================================================================= */
.bes-marka-uyari,
.bes-fiyat-notu,
.bes-guvenlik-uyari,
.bes-ornek-notu {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 26px;
    padding: 18px 24px 18px 22px;
    border-left: 5px solid var(--bes-uyari-marka);
    border-radius: 0 5px 5px 0;
    background-color: var(--bes-zemin-koyu);
    font-family: var(--assimox-font);
    font-size: 16px;
    line-height: 26px;
    color: #33415c;
}

.bes-marka-uyari p,
.bes-fiyat-notu p,
.bes-guvenlik-uyari p,
.bes-ornek-notu p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Kutunun ikonu: tema glifi (icon-comment / icon-guarantee). */
.bes-marka-uyari > [class^="icon-"],
.bes-marka-uyari > [class*=" icon-"],
.bes-fiyat-notu > [class^="icon-"],
.bes-fiyat-notu > [class*=" icon-"],
.bes-guvenlik-uyari > [class^="icon-"],
.bes-guvenlik-uyari > [class*=" icon-"] {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 26px;
    color: var(--bes-uyari-marka);
}

/* Marka uyarısı — yasal, atlanamaz ama sayfayı bağırmayan bir ton. */
.bes-marka-uyari {
    border-left-color: var(--bes-uyari-marka);
    background-color: #eaeef5;
}

/* Fiyat notu — göz ardı edilemeyecek kadar belirgin, sıcak ton. */
.bes-fiyat-notu {
    border-left-color: var(--bes-uyari-fiyat);
    background-color: #fdf6e0;
    color: #4a3a10;
}

.bes-fiyat-notu > [class^="icon-"],
.bes-fiyat-notu > [class*=" icon-"] {
    color: var(--bes-uyari-fiyat);
}

/* Güvenlik uyarısı — can ve mal güvenliği; daha dikkat çekici. */
.bes-guvenlik-uyari {
    border-left-width: 6px;
    border-left-color: var(--bes-uyari-guvenlik);
    background-color: #fdeeeb;
    color: #57231c;
    padding-top: 20px;
    padding-bottom: 20px;
}

.bes-guvenlik-uyari > [class^="icon-"],
.bes-guvenlik-uyari > [class*=" icon-"] {
    color: var(--bes-uyari-guvenlik);
    font-size: 26px;
}

/* Yüksek aciliyet — sayfadaki en dikkat çekici kutu. */
.bes-guvenlik-uyari--yuksek {
    border-left-width: 8px;
    border-left-color: var(--bes-uyari-yuksek);
    background-color: #fadfd9;
    color: #4d150d;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(160, 29, 16, 0.14);
}

.bes-guvenlik-uyari--yuksek > [class^="icon-"],
.bes-guvenlik-uyari--yuksek > [class*=" icon-"] {
    color: var(--bes-uyari-yuksek);
}

/* Örnek içerik notu — bilgilendirme; en sönük ton. */
.bes-ornek-notu {
    border-left-color: #9aa4b5;
    background-color: #f2f4f8;
    color: #55606f;
    font-style: italic;
    font-size: 15px;
    line-height: 25px;
    padding: 14px 20px 14px 18px;
}

/* Koyu zeminli bölümlerde (testimonial-one, services-one) örnek notu
   okunur kalsın. */
.testimonial-one .bes-ornek-notu {
    background-color: rgba(255, 255, 255, 0.92);
}

/* Alt bilgideki marka uyarısı: koyu zemin üzerinde okunur açık gri,
   küçük punto. site-footer__bottom içinde basılır. */
.bes-marka-uyari-alt {
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #a8b6c9;
    font-size: 14px;
    line-height: 23px;
    max-width: 1050px;
}

/* Uyarı bölümü sarmalayıcısı: <h1>'den hemen sonra gelen tam genişlikli
   bölüm. Kendinden sonraki bölümün üst boşluğunu yemesin diye ölçülü. */
.bes-uyari-bolumu {
    position: relative;
    display: block;
    padding: 46px 0 0;
}

.bes-uyari-bolumu > .container > .row > [class*="col-"] > *:last-child,
.bes-uyari-bolumu .bes-marka-uyari,
.bes-uyari-bolumu .bes-guvenlik-uyari,
.bes-uyari-bolumu .bes-ornek-notu {
    margin-bottom: 0;
}


/* =========================================================================
   05 — Künye / özet listeleri
   -------------------------------------------------------------------------
   `ul > li > span + b` iki sütunlu künye düzeni. `b` sağa yaslı ve vurgulu.
   ========================================================================= */
.bes-ucret-ozet,
.bes-ariza-ozet,
.bes-kunye {
    position: relative;
    display: block;
    margin: 0 0 28px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 6px;
    padding: 8px 26px 10px;
}

.bes-ucret-ozet ul,
.bes-ariza-ozet ul,
ul.bes-kunye {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bes-ucret-ozet li,
.bes-ariza-ozet li,
ul.bes-kunye li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px dotted #c9cfd9;
    font-size: 17px;
    line-height: 26px;
}

.bes-ucret-ozet li:last-child,
.bes-ariza-ozet li:last-child,
ul.bes-kunye li:last-child {
    border-bottom: 0;
}

.bes-ucret-ozet li > span,
.bes-ariza-ozet li > span,
ul.bes-kunye li > span {
    color: #5a6474;
    flex: 1 1 auto;
}

.bes-ucret-ozet li > b,
.bes-ariza-ozet li > b,
ul.bes-kunye li > b {
    flex: 0 0 auto;
    text-align: right;
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-weight: 700;
    font-size: 18px;
}

/* Fiyat notu künyenin içinde basıldığında kutunun kenarına yapışmasın. */
.bes-ucret-ozet .bes-fiyat-notu,
.bes-ariza-ozet .bes-fiyat-notu {
    margin: 10px 0 14px;
}

/* Arıza özetinin giriş cümlesi künyeden önce gelir. */
.bes-ariza-ozet__metin {
    margin: 14px 0 4px;
    font-size: 19px;
    line-height: 31px;
    color: var(--assimox-black);
    font-weight: 500;
}

/* Künyenin iki sütunlu değişkesi: proje ve ekip detayında alan sayısı az
   olduğu için iki sütuna bölünür. */
ul.bes-kunye {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    padding-top: 6px;
    padding-bottom: 8px;
}

/* Tek kalan satır tüm genişliği kaplasın. */
ul.bes-kunye li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Koyu zeminli hizmet detayında künye kutusu okunur kalsın. */
.services-details__right .bes-ucret-ozet {
    background-color: var(--bes-zemin);
}


/* =========================================================================
   06 — Arıza kartları ve rozetler
   ========================================================================= */
.bes-ariza-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin: 0 0 30px;
}

.bes-ariza-kart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-left: 4px solid var(--assimox-primary);
    border-radius: 6px;
    color: var(--assimox-gray);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.bes-ariza-kart:hover,
.bes-ariza-kart:focus {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(11, 26, 58, 0.12);
    border-left-color: var(--assimox-base);
    color: var(--assimox-gray);
}

.bes-ariza-kart strong {
    display: block;
    font-family: var(--assimox-font-two);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--assimox-black);
    overflow-wrap: break-word;
}

.bes-ariza-kart:hover strong {
    color: #0079ab;
}

.bes-ariza-kart span {
    display: block;
    font-size: 15px;
    line-height: 24px;
    color: #5a6474;
}

/* Aciliyet rozeti karta basıldığında sola yaslı, kartın en altında dursun;
   böylece bir satırdaki kartların rozetleri aynı hizada olur. */
.bes-ariza-kart .bes-aciliyet {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 3px;
}

/* Arıza rehberi grupları */
.bes-ariza-grup {
    margin-bottom: 46px;
}

.bes-ariza-grup__baslik {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: var(--assimox-black);
    margin: 0 0 6px;
}

.bes-ariza-grup__link {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 26px;
}

.bes-ariza-grup__link a {
    color: #0079ab;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bes-ariza-grup__link a:hover {
    color: var(--assimox-black);
}

/* --- Aciliyet rozeti --------------------------------------------------- */
.bes-aciliyet {
    display: inline-block;
    padding: 3px 12px 2px;
    border-radius: 20px;
    font-family: var(--assimox-font-two);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--bes-zemin-koyu);
    color: #33415c;
    border: 1px solid transparent;
}

.bes-aciliyet--dusuk {
    background-color: #e4f4ec;
    border-color: #bfe3d1;
    color: var(--bes-dusuk);
}

.bes-aciliyet--orta {
    background-color: #fbf1d8;
    border-color: #ecdca8;
    color: var(--bes-orta);
}

.bes-aciliyet--yuksek {
    background-color: #fbe2df;
    border-color: #f0bdb6;
    color: var(--bes-yuksek);
}

/* Künye satırında rozet <b> olarak basılıyor; künyenin kalın yazı
   biçimini değil rozet biçimini almalı. */
ul li > b.bes-aciliyet,
.bes-ariza-ozet li > b.bes-aciliyet {
    font-size: 12px;
}

/* --- Varış süresi rozeti ----------------------------------------------- */
.bes-varis {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 8px 18px 7px;
    border-radius: 24px;
    background-color: #e6f6fd;
    border: 1px solid #bfe6f7;
    color: #084a63;
    font-size: 16px;
    line-height: 24px;
}

.bes-varis [class^="icon-"],
.bes-varis [class*=" icon-"] {
    font-size: 18px;
    line-height: 1;
    color: var(--assimox-primary);
}

.bes-varis b {
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-weight: 700;
}

/* Geniş değişke: bölge sayfasında içerik genişliğini kaplar. */
.bes-varis--genis {
    display: flex;
    border-radius: 6px;
    padding: 14px 22px;
    font-size: 17px;
    margin-bottom: 28px;
}


/* =========================================================================
   07 — Bağlantı ızgaraları
   -------------------------------------------------------------------------
   Bölge sayfalarında yüzlerce bağlantı olabildiği için çip görünümü:
   sıkışık, tek satırlık, okunur.
   ========================================================================= */
.bes-marka-liste,
.bes-bolge-liste,
.bes-hizmet-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.bes-marka-liste a,
.bes-bolge-liste a {
    display: inline-block;
    padding: 7px 15px 6px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 20px;
    color: #33415c;
    font-size: 15px;
    line-height: 23px;
    white-space: nowrap;
    transition: all 250ms ease;
}

.bes-marka-liste a:hover,
.bes-marka-liste a:focus,
.bes-bolge-liste a:hover,
.bes-bolge-liste a:focus {
    background-color: var(--assimox-black);
    border-color: var(--assimox-black);
    color: var(--assimox-white);
}

/* Cihaz kırılımlı bölge bağlantıları uzun olduğu için sarmaya izin ver. */
.bes-bolge-liste--hizmet a {
    white-space: normal;
    border-radius: 6px;
}

/* Cihaz listesi: ikon + ad. Bölge çiplerinden ayrılsın diye daha belirgin. */
.bes-hizmet-liste a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 8px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 6px;
    color: var(--assimox-black);
    font-size: 15px;
    line-height: 24px;
    transition: all 250ms ease;
}

.bes-hizmet-liste a:hover,
.bes-hizmet-liste a:focus {
    border-color: var(--assimox-primary);
    box-shadow: 0 6px 16px rgba(11, 26, 58, 0.1);
    color: var(--assimox-black);
}

.bes-hizmet-liste a [class^="icon-"],
.bes-hizmet-liste a [class*=" icon-"],
.bes-hizmet-liste a .bes-ikon {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--assimox-primary);
}

.bes-hizmet-liste a span {
    display: inline-block;
}

/* Arıza sayfasındaki tek "ilgili cihaz" bağlantısı vurgulu olsun.
   Yukarıdaki `.bes-hizmet-liste a` kuralını ezmek için seçici bir sınıf
   daha taşır; !important gerekmez. */
.bes-hizmet-liste a.bes-ilgili-cihaz {
    border-color: var(--assimox-primary);
    background-color: #f2fbff;
}

/* Bağlantı ağı bloğu: sayfa sonundaki iç bağlantı kümesi. */
.bes-baglanti-agi {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--bes-cizgi);
}

.bes-baglanti-agi h2 {
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    color: var(--assimox-black);
    margin: 0 0 12px;
}

.bes-baglanti-agi > p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 29px;
}

.bes-baglanti-agi .bes-marka-uyari {
    margin-bottom: 20px;
}

/* Arama sonucu bulunamadığında gösterilen öneri kümesi. */
.bes-oneri-liste {
    margin-top: 10px;
}

.bes-oneri-liste .sidebar__title {
    margin-top: 26px;
    margin-bottom: 18px;
}

.bes-oneri-liste .sidebar__title:first-child {
    margin-top: 0;
}


/* =========================================================================
   08 — Kategori filtresi
   ========================================================================= */
.bes-kategori-filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 34px;
}

.bes-kategori-filtre a,
.bes-kategori-filtre__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px 8px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 24px;
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    transition: all 250ms ease;
}

.bes-kategori-filtre a:hover,
.bes-kategori-filtre a:focus,
.bes-kategori-filtre__link:hover,
.bes-kategori-filtre__link:focus {
    border-color: var(--assimox-black);
    color: var(--assimox-black);
}

/* Seçili olan — iki şablon iki farklı sınıf adı kullanıyor
   (services.php `aktif`, projects.php `bes-aktif`); ikisi de karşılanır. */
.bes-kategori-filtre a.aktif,
.bes-kategori-filtre a.bes-aktif,
.bes-kategori-filtre__link.aktif,
.bes-kategori-filtre__link.bes-aktif {
    background-color: var(--assimox-base);
    border-color: var(--assimox-base);
    color: var(--assimox-black);
    font-weight: 700;
}

.bes-kategori-filtre__adet,
.bes-kategori-filtre a > span {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 12px;
    background-color: var(--bes-zemin-koyu);
    color: #5a6474;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
}

.bes-kategori-filtre a.aktif .bes-kategori-filtre__adet,
.bes-kategori-filtre a.bes-aktif > span,
.bes-kategori-filtre__link.aktif .bes-kategori-filtre__adet {
    background-color: rgba(11, 26, 58, 0.14);
    color: var(--assimox-black);
}

/* Blog sayfalamasında geçerli sayfa da `bes-aktif` alır (tema `.count a`
   kuralına ek). */
.pg-pagination li a.bes-aktif {
    background-color: var(--assimox-base);
    border-color: var(--assimox-base);
    color: var(--assimox-black);
}


/* =========================================================================
   09 — Bölge sayfaları
   ========================================================================= */
/* `.services-page` alt boşluk vermiyor (padding: 120px 0 0); bölge dizini
   bölümün son bloğu olduğu için alt boşluk burada eklenir. */
.services-page.bes-bolge-sayfa,
.services-page.bes-bolge-hizmetleri {
    padding-bottom: 100px;
}

.bes-bolge-blok {
    padding: 30px 32px 26px;
    margin-bottom: 26px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 8px;
}

.bes-bolge-blok:last-child {
    margin-bottom: 0;
}

.bes-bolge-blok-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.bes-bolge-adi {
    margin: 0;
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    color: var(--assimox-black);
}

.bes-bolge-adi a {
    color: var(--assimox-black);
    transition: color 300ms ease;
}

.bes-bolge-adi a:hover,
.bes-bolge-adi a:focus {
    color: #0079ab;
}

.bes-bolge-blok-ust .bes-varis {
    margin-bottom: 0;
}

.bes-bolge-ozet {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 27px;
    color: #5a6474;
}

.bes-bolge-alt-baslik {
    margin: 22px 0 12px;
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
    color: var(--assimox-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bes-bolge-blok .bes-bolge-liste:last-child {
    margin-bottom: 0;
}

/* Bölge sayfasının "yakın işler" bölümü */
.project-page.bes-yakin-isler {
    padding-top: 100px;
}


/* =========================================================================
   10 — Kenar çubuğu kutuları ve kenar çubuğu formu
   -------------------------------------------------------------------------
   Tema `.sidebar__single` için TABAN kural vermiyor; yalnızca __search,
   __category, __post ve __tags değişkeleri biçimlendirilmiş. Kendi taban
   kutumuzu burada yazıyoruz.
   ========================================================================= */
.bes-yan .sidebar__single + .sidebar__single {
    margin-top: 34px;
}

/* Tema .sidebar__category'ye margin-top: 40px / margin-bottom: 63px
   veriyor; kutular arası boşluğu biz yönettiğimiz için bu değerler
   sıfırlanıyor, aksi hâlde kutular arasında 100px'e varan boşluk kalıyor. */
.bes-yan .sidebar__single.sidebar__category,
.bes-yan .sidebar__single.sidebar__tags {
    margin-top: 0;
    margin-bottom: 0;
}

.bes-yan-kutu,
.bes-yan-form {
    position: relative;
    display: block;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 8px;
    padding: 28px 28px 30px;
}

.bes-yan-kutu .sidebar__title,
.bes-yan-form .sidebar__title {
    margin-bottom: 18px;
}

/* Tema başlığın SAĞINA 20px'lik bir çizgi koyuyor (right: -33px). Kutu
   içinde bu çizgi ya kenarlığa çarpıyor ya da başlık iki satıra taştığında
   havada kalıyor. Kutularımızda çizgi başlığın ALTINA alınır; temanın
   görsel dili (kısa, 2px, koyu vurgu çizgisi) korunur. */
.bes-yan-kutu .sidebar__title,
.bes-yan-form .sidebar__title {
    display: block;
    line-height: 34px;
    padding-bottom: 12px;
}

.bes-yan-kutu .sidebar__title::before,
.bes-yan-form .sidebar__title::before {
    right: auto;
    left: 0;
    bottom: 0;
    width: 34px;
}

/* --- Kenar çubuğu madde listesi ---------------------------------------- */
ul.bes-yan-madde {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.bes-yan-madde li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #e8eaef;
    font-size: 16px;
    line-height: 26px;
    color: #4a5464;
}

ul.bes-yan-madde li:first-child {
    padding-top: 0;
}

ul.bes-yan-madde li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

ul.bes-yan-madde li [class^="icon-"],
ul.bes-yan-madde li [class*=" icon-"] {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 18px;
    line-height: 1;
    color: var(--assimox-primary);
}

ul.bes-yan-madde li a {
    color: #0079ab;
    word-break: break-word;
}

ul.bes-yan-madde li a:hover {
    color: var(--assimox-black);
}

/* --- Kenar çubuğundaki servis talebi formu ------------------------------
   `.faq-one__form` temada SARI kutunun (#f1d551) içinde kurgulanmış:
   alanlara #f5dc69 zemin ve #e1cc6b kenarlık veriliyor. Beyaz kenar
   çubuğunda bu alanlar hem okunmaz kalıyor hem de kutunun rengiyle
   çakışıyor; bu yüzden yalnızca .bes-yan-form bağlamında yeniden
   biçimlendiriliyor. Anasayfadaki sarı kutu ETKİLENMEZ. */
.bes-yan-form .faq-one__form {
    margin-top: 0;
}

.bes-yan-form .faq-one__form-input-box input[type="text"],
.bes-yan-form .faq-one__form-input-box input[type="email"],
.bes-yan-form .faq-one__form-input-box input[type="tel"],
.bes-yan-form .faq-one__form-input-box input[type="search"],
.bes-yan-form .faq-one__form-input-box textarea {
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    color: var(--assimox-gray);
    font-size: 16px;
    border-radius: 5px;
}

.bes-yan-form .faq-one__form-input-box input:focus,
.bes-yan-form .faq-one__form-input-box textarea:focus {
    border-color: var(--assimox-primary);
}

.bes-yan-form .faq-one__form-input-box input::placeholder,
.bes-yan-form .faq-one__form-input-box textarea::placeholder {
    color: #8a94a4;
}

.bes-yan-form .faq-one__form-input-box textarea {
    height: 104px;
    padding: 12px 18px;
}

.bes-yan-form .faq-one__form-input-box.text-message-box {
    height: 104px;
}

.bes-yan-form .faq-one__form-input-box input[type="text"],
.bes-yan-form .faq-one__form-input-box input[type="email"],
.bes-yan-form .faq-one__form-input-box input[type="tel"] {
    height: 48px;
    padding-left: 18px;
    padding-right: 18px;
}

.bes-yan-form .faq-one__form-btn {
    padding-left: 20px;
    padding-right: 20px;
}

.bes-yan-form .bes-form-not {
    color: #6b7686;
}


/* =========================================================================
   11 — Blog ve yazı bileşenleri
   ========================================================================= */
.bes-yazi-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin: 0 0 28px;
}

.bes-yazi-kart {
    display: flex;
    flex-direction: column;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.bes-yazi-kart:hover,
.bes-yazi-kart:focus {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(11, 26, 58, 0.12);
}

.bes-yazi-kart img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.bes-yazi-kart-metin {
    display: block;
    padding: 16px 18px 18px;
}

.bes-yazi-kart-metin strong {
    display: block;
    font-family: var(--assimox-font-two);
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    color: var(--assimox-black);
    overflow-wrap: break-word;
}

.bes-yazi-kart:hover .bes-yazi-kart-metin strong {
    color: #0079ab;
}

.bes-yazi-kart-metin em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #7a8494;
}

/* Yazı gezinmesi: önceki / sonraki */
.bes-yazi-gezinme {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px solid var(--bes-cizgi);
}

.bes-yazi-gezinme a {
    display: block;
    padding: 18px 22px;
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
    border-radius: 8px;
    transition: all 300ms ease;
}

.bes-yazi-gezinme a:hover,
.bes-yazi-gezinme a:focus {
    border-color: var(--assimox-primary);
    box-shadow: 0 10px 22px rgba(11, 26, 58, 0.1);
}

.bes-yazi-gezinme span {
    display: block;
    margin-bottom: 6px;
    font-family: var(--assimox-font-two);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--assimox-primary);
}

.bes-yazi-gezinme strong {
    display: block;
    font-family: var(--assimox-font-two);
    font-size: 17px;
    line-height: 26px;
    font-weight: 700;
    color: var(--assimox-black);
    overflow-wrap: break-word;
}

/* Tek bağlantı varsa (ilk ya da son yazı) ızgarada doğru tarafa otursun. */
.bes-yazi-gezinme__onceki {
    text-align: left;
}

.bes-yazi-gezinme__sonraki {
    text-align: right;
}

.bes-yazi-gezinme__sonraki:only-child {
    grid-column: 2;
}

.bes-yazi-etiketler {
    margin: 36px 0 10px;
}

.bes-yazi-etiketler .sidebar__title {
    margin-bottom: 20px;
}

.bes-benzer-yazilar {
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid var(--bes-cizgi);
}

.bes-benzer-yazilar .sidebar__title {
    margin-bottom: 24px;
}

/* Arama sonuç kartında görsel kutusu YOKTUR (`.blog-grid__img-box` hiç
   basılmaz). Tema içerik kutusunu görselin üstüne bindirmek için
   `margin-top: -55px; margin-left: 40px` veriyor; görsel olmayınca bu
   kaydırma kartı yukarı çekip üstündeki metni örtüyor. Kutu kartın ilk
   çocuğuysa (yani görsel yoksa) kaydırma sıfırlanır. */
.blog-grid__single > .blog-grid__content-box:first-child {
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    padding-top: 14px;
}

/* Arama sonucu rozeti — hangi bölümden geldiği. */
.bes-sonuc-tip {
    display: inline-block;
    padding: 3px 12px 2px;
    border-radius: 4px;
    background-color: var(--assimox-base);
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Görüş kartları ızgaraya dizildiğinde (kaydırıcı kurulmaz) ---------
   Owl kaydırıcısı kart yüksekliklerini kendisi eşitliyordu; ızgarada bu
   iş CSS'e kalıyor. Kart bir sütun flex'i olur, alıntı kutusu boşluğu
   doldurur, müşteri künyesi her kartta aynı hizada, en altta kalır. */
.bes-yorum-izgara .row {
    align-items: stretch;
}

.bes-yorum-izgara .col-xl-4 {
    display: flex;
    flex-direction: column;
}

.bes-yorum-izgara .testimonial-one__single {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.bes-yorum-izgara .testimonial-one__content {
    flex: 1 1 auto;
}

.bes-yorum-izgara .testimonial-one__client-info {
    margin-top: 40px;
    margin-left: 40px;
}

/* Müşteri fotoğrafı yoksa `gorus_avatar()` baş harfli bir daire basar
   (helpers.php). Temada karşılığı olmadığı için kuralı burada yazıyoruz;
   ölçüsü temanın `.testimonial-one__client-img` kutusuyla (84px) uyumlu. */
.gorus-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: var(--assimox-white);
    font-family: var(--assimox-font-two);
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.testimonial-one__client-img .gorus-avatar {
    width: 64px;
    height: 64px;
}

/* --- Çalışma örneği kartları ------------------------------------------
   `.project-page__content` flex + `flex-wrap: wrap`: uzun Türkçe başlıkta
   ok düğmesi alt satıra düşüp alt başlığın üstüne biniyor. Ok sabit
   kalır, alt başlığın satır yüksekliği iki satıra yeter (tema 15px/15px
   veriyor, satırlar üst üste geliyordu). */
.project-page__content {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 18px;
}

.project-page__title-box {
    min-width: 0;
}

.project-page__sub-title {
    line-height: 22px;
}

.project-page__arrow {
    flex: 0 0 auto;
}

/* Kart yükseklikleri görsel oranı ve başlık satır sayısına göre kaymasın. */
.project-page__img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.project-page__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 68px;               /* 34px satır yüksekliği × 2 */
}

/* Boş liste bildirimi */
.bes-bos-liste {
    margin: 0;
    padding: 28px 30px;
    background-color: var(--assimox-white);
    border: 1px dashed var(--bes-cizgi);
    border-radius: 6px;
    color: #5a6474;
    font-size: 17px;
    line-height: 28px;
}

/* Galeri kutusu (magnific-popup bağlantısı) */
.bes-galeri-kutu {
    position: relative;
    display: block;
    margin-bottom: 30px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bes-zemin-koyu);
}

.bes-galeri-kutu a {
    display: block;
    line-height: 0;
}

.bes-galeri-kutu img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 500ms ease;
}

.bes-galeri-kutu:hover img {
    transform: scale(1.05);
}


/* =========================================================================
   12 — Form bileşenleri
   ========================================================================= */

/* Onay kutusu satırı (KVKK) */
.bes-onay {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 18px;
}

.bes-onay input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--assimox-black);
    cursor: pointer;
}

.bes-onay label {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: inherit;
    cursor: pointer;
}

.bes-onay label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

/* Beyaz kenar çubuğunda onay metni gri gövde rengini alsın. */
.bes-yan-form .bes-onay label {
    color: #5a6474;
}

.bes-yan-form .bes-onay label a {
    color: #0079ab;
}

/* Form altı bilgilendirme notu */
.bes-form-not {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 23px;
    color: #6b7686;
}

.bes-form-not a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

.bes-form-not a:hover {
    color: var(--assimox-black);
}

/* Anasayfadaki SARI kutu içinde açık gri yazı yeterince okunmuyor. */
.faq-one__form-box .bes-form-not {
    color: #4a3a10;
}

/* Servis talebi sayfasının üstündeki bilgi bloğu */
.bes-form-bilgi {
    margin-bottom: 34px;
}

.bes-form-bilgi .alert {
    border-radius: 6px;
    font-size: 16px;
    line-height: 26px;
}

.bes-form-bilgi > *:last-child {
    margin-bottom: 0;
}

.bes-form-bilgi .bes-form-not {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 16px;
}

/* Marka uyarısının form içindeki alanı — tema `.single-box`a
   `overflow: hidden` verdiği için uyarı bilerek onun dışında tutuluyor. */
.bes-marka-alani {
    margin: 6px 0 20px;
}

.bes-marka-alani .bes-marka-uyari {
    margin-bottom: 0;
}

/* Düğme satırı: ana eylem + telefon düğmesi yan yana */
.bes-buton-satiri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.bes-buton-satiri > .thm-btn {
    margin: 0;
}

/* İkincil telefon / WhatsApp düğmesi — .thm-btn ile aynı ölçü, çerçeveli. */
.bes-tel-buton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px 11px;
    border: 2px solid var(--assimox-black);
    border-radius: 6px;
    background-color: transparent;
    color: var(--assimox-black);
    font-family: var(--assimox-font-two);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 300ms ease;
}

.bes-tel-buton [class^="icon-"],
.bes-tel-buton [class*=" icon-"] {
    font-size: 18px;
    line-height: 1;
}

.bes-tel-buton:hover,
.bes-tel-buton:focus {
    background-color: var(--assimox-black);
    color: var(--assimox-white);
}

/* Koyu zeminli bloklarda (hizmet detayı sağ sütunu koyu değil ama
   .bes-yan-kutu içinde küçük genişlik var) düğme taşmasın. */
.bes-yan-kutu .bes-tel-buton {
    width: 100%;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    letter-spacing: 0.04em;
}

.bes-yan-kutu .bes-buton-satiri {
    margin-top: 18px;
}

/* 404 sayfasındaki arama formu — tema kenar çubuğu formunu kullanıyor,
   içerik sütununda alt boşluk gerekiyor. */
/* Tema alanına `background: #f7f7f7; border: none` veriyor; kenar çubuğu
   dışında, geniş içerik sütununda bu alan "kutu" gibi durmuyordu. */
.bes-arama-formu {
    position: relative;
    margin: 0 0 34px;
    max-width: 520px;
}

.bes-arama-formu input[type="search"] {
    background-color: var(--assimox-white);
    border: 1px solid var(--bes-cizgi);
}

.bes-arama-formu input[type="search"]:focus {
    border-color: var(--assimox-primary);
}

/* Tema `.faq-one__form-input-box` içinde `select` kuralı vermiyor; ayrıca
   nice-select eklentisi select'i `.nice-select` div'ine çeviriyor ve o da
   `float: left; width: auto` geliyor. Her iki durum da düzeltilir. */
.faq-one__form-input-box select,
.faq-one__form-input-box .nice-select {
    display: block;
    float: none;
    width: 100%;
    height: 52px;
    line-height: 50px;
    padding-left: 25px;
    padding-right: 40px;
    border: 1px solid #e1cc6b;
    background-color: #f5dc69;
    color: var(--assimox-gray);
    font-family: var(--assimox-font);
    font-size: 18px;
    font-weight: 400;
    border-radius: 3px;
    outline: none;
}

.faq-one__form-input-box .nice-select .list {
    width: 100%;
    color: var(--assimox-gray);
}

.bes-yan-form .faq-one__form-input-box select,
.bes-yan-form .faq-one__form-input-box .nice-select {
    height: 48px;
    line-height: 46px;
    padding-left: 18px;
    background-color: var(--assimox-white);
    border-color: var(--bes-cizgi);
    font-size: 16px;
    border-radius: 5px;
}

/* --- Temanın biçimlendirmediği alan türleri ----------------------------
   Tema her form kutusunda yalnızca `input[type="text"]` ve
   `input[type="email"]` seçicilerini yazmış. Şablonlarımızda telefon
   (`type="tel"`), tarih (`type="date"`), sayı ve arama alanları da var;
   bunlar biçimsiz kalıp tarayıcı varsayılanına düşüyor ve alanların
   genişliği/yüksekliği tutmuyordu. Aşağıda her kutu için temanın KENDİ
   ölçüleri, eksik alan türlerine birebir uygulanır. */

/* .appointment-form → 40px, beyaz zemin, 1px #dddddd */
.appointment-form input[type="tel"],
.appointment-form input[type="date"],
.appointment-form input[type="number"],
.appointment-form input[type="url"],
.appointment-form input[type="search"] {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #dddddd;
    width: 100%;
    height: 40px;
    color: #444444;
    font-size: 18px;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0;
    font-family: var(--assimox-font);
    transition: all 500ms ease;
}

/* .contact-page__input-box → 50px, şeffaf zemin, 1px #dddddd, 5px yarıçap */
.contact-page__input-box input[type="tel"],
.contact-page__input-box input[type="url"],
.contact-page__input-box input[type="search"] {
    height: 50px;
    width: 100%;
    background-color: transparent;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    font-size: 18px;
    color: #797979;
    display: block;
    border: 1px solid #dddddd;
    border-radius: 5px;
}

/* .faq-one__form-input-box → 52px, sarı kutu içi */
.faq-one__form-input-box input[type="tel"],
.faq-one__form-input-box input[type="url"],
.faq-one__form-input-box input[type="search"] {
    height: 52px;
    width: 100%;
    border: 1px solid #e1cc6b;
    background-color: #f5dc69;
    color: var(--assimox-gray);
    padding-left: 25px;
    padding-right: 25px;
    outline: none;
    display: block;
    border-radius: 3px;
    font-weight: 400;
    font-size: 18px;
}

/* .ask-question__input-box → 65px, yalnızca alt çizgi */
.ask-question__input-box input[type="tel"],
.ask-question__input-box input[type="url"] {
    height: 65px;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #e3e3e3;
    background-color: transparent;
    padding: 0;
    outline: none;
    font-size: 18px;
    color: #444444;
    display: block;
    font-weight: 400;
}

/* .comment-form__input-box → 45px, beyaz zemin, 1px #eeeeee */
.comment-form__input-box input[type="tel"],
.comment-form__input-box input[type="url"] {
    height: 45px;
    width: 100%;
    border: 1px solid #eeeeee;
    background-color: var(--assimox-white);
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    font-size: 17px;
    color: #737373;
    display: block;
}

/* --- Alt bilgi iletişim şeridi -----------------------------------------
   `.site-footer__contact-points` bir flex satırı; üç öğe de daralabildiği
   için Türkçe "Servis hattı" başlığı ve telefon numarası dört satıra
   bölünüyordu. Adres öğesi daralsın, e-posta ve telefon daralmasın. */
.site-footer__contact-points {
    gap: 60px;
}

.site-footer__contact-points li:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.site-footer__contact-points li + li {
    flex: 0 0 auto;
}

/* Yalnızca e-posta ve telefon öğeleri bölünmez; ADRES öğesi (ilk sıradaki)
   uzun olduğu için sarmaya devam eder, aksi hâlde diğerlerinin üstüne
   taşar. */
.site-footer__contact-points li + li .content h4,
.site-footer__contact-points li + li .content a {
    white-space: nowrap;
}

/* İletişim şeridindeki telefon numarası da bölünmesin. */
.contact-bar__call-number,
.contact-bar__call-number a,
.contact-bar__call-time {
    white-space: nowrap;
}

/* İletişim sayfası ofis kartları */
.bes-ofis-satiri {
    margin-top: 12px;
}

.bes-ofis {
    height: 100%;
    margin-bottom: 30px;
}


/* =========================================================================
   13 — Ücret sayfası ekleri
   ========================================================================= */
/* Kalem açıklaması, temanın noktalı ayraç çizgisini bozmasın diye
   `span`ın İÇİNDE ikinci satır olarak veriliyor. */
.bes-ucret-aciklama {
    display: block;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: #6b7686;
}

.flixible-price__box ul li span .bes-ucret-aciklama {
    padding-right: 10px;
}

/* Kalem AÇIKLAMALI olduğunda temanın noktalı ayraç çizgisi anlamını
   yitiriyor: `span` çok satıra yayılıp kendi zeminiyle çizgiyi örtüyor ve
   `float: right` verilen tutar alt satıra düşüyor. Açıklamalı satırlarda
   düzen iki sütunlu bir satıra çevrilir, ayraç gizlenir. Açıklamasız
   satırlar temanın kendi noktalı ayracını korur.
   (`:has()` desteklemeyen eski tarayıcılarda tema davranışı geçerli olur;
   okunurluk kaybı yoktur, yalnızca tutar alt satıra düşer.) */
.flixible-price__box ul li:has(.bes-ucret-aciklama) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.flixible-price__box ul li:has(.bes-ucret-aciklama)::before {
    display: none;
}

.flixible-price__box ul li:has(.bes-ucret-aciklama) > span {
    flex: 1 1 auto;
    padding-right: 0;
}

.flixible-price__box ul li:has(.bes-ucret-aciklama) > b {
    float: none;
    flex: 0 0 auto;
    padding-left: 0;
    white-space: nowrap;
}

/* Ek hizmet kartındaki açıklama */
p.bes-ucret-aciklama {
    margin-top: 8px;
}

/* Bakım paketi kartı.
   Rozet, kartın üst kenarından sarkan `.amc-plans__price-box` fiyat
   etiketiyle çakışmasın diye onun ALTINA, kartın sağ kenarına oturtulur
   (fiyat kutusu 12+11px iç boşluk + 32px satır ≈ 55px yüksekliğinde). */
.bes-paket-rozet {
    position: absolute;
    top: 66px;
    right: 0;
    z-index: 2;
    padding: 4px 12px 3px;
    border-radius: 4px;
    background-color: var(--assimox-black);
    color: var(--assimox-white);
    font-family: var(--assimox-font-two);
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
}

.amc-plans__single {
    position: relative;
}

/* Paket kartında fiyat etiketi ortalanmış; rozet için üstte yer açılır. */
.amc-plans__single .bes-paket-rozet + .amc-plans__price-box + .amc-plans__title,
.amc-plans__single .bes-paket-rozet ~ .bes-paket-alt {
    margin-top: 32px;
}

/* Uzun Türkçe madde metinleri ortalandığında okunmuyor; liste sola yaslanır
   (temanın kendi `.amc-plans__title` kuralı da text-align: left veriyor). */
.amc-plans__list li .text {
    text-align: left;
}

.bes-populer {
    outline: 2px solid var(--assimox-base);
    outline-offset: -2px;
}

.bes-populer .bes-paket-rozet {
    background-color: var(--assimox-base);
    color: var(--assimox-black);
}

.bes-paket-alt {
    margin: -12px 0 18px;
    text-align: left;
    font-size: 16px;
    line-height: 26px;
    color: #5a6474;
}

/* Pakete dâhil OLMAYAN satırlar aynı listede sönük görünür. */
.amc-plans__list li.bes-haric .icon i {
    color: #a4adbc;
}

.amc-plans__list li.bes-haric .text p {
    color: #8a94a4;
    text-decoration: line-through;
    text-decoration-color: rgba(138, 148, 164, 0.6);
}

/* Ücret / randevu / hizmet S.S.S. bölümleri: iki bölüm arka arkaya
   geldiğinde üst boşluk ikiye katlanmasın. */
.faq-page.bes-ucret-sss,
.faq-page.bes-randevu-sss,
.faq-page.bes-hizmet-sss {
    padding-top: 100px;
    padding-bottom: 90px;
}

.bes-sss-grup {
    margin-bottom: 20px;
}

.bes-sss-grup-baslik {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 26px;
}


/* =========================================================================
   14 — Bölüm sarmalayıcıları ve küçük düzeltmeler
   ========================================================================= */
/* Şerit başlığının üst etiketi: temada `.section-title__tagline`in solunda
   30px'lik bir çizgi var; şeritte beyaz zemin üzerinde değil koyu kaplama
   üzerinde durduğu için rengi açılıyor. */
.page-header .bes-sayfa-etiket {
    color: var(--assimox-base);
    margin-bottom: 6px;
}

.page-header .bes-sayfa-etiket::before {
    background-color: var(--assimox-base);
}

/* Ekip detayı, diğer ekip, diğer işler, ilgili bölümler */
.services-details.bes-ekip-detay {
    padding-bottom: 100px;
}

.team-page.bes-diger-ekip,
.project-page.bes-diger-isler {
    padding-top: 100px;
    background-color: var(--bes-zemin);
}

/* 404 sayfası: `.about-quality` iskeletini kullanır ama üstünde şeritten
   başka bir bölüm yoktur; üst boşluk biraz daraltılır. */
.about-quality.bes-404 {
    padding-top: 90px;
}

.bes-404 .bes-icerik + .bes-arama-formu {
    margin-top: -10px;
}

.bes-404 .bes-icerik code {
    word-break: break-all;
}

/* Randevu sayfası kenar çubuğu: tema `.sidebar`a margin-left: 30px
   veriyor; 3 sütunluk dar alanda bu boşluk fazla geliyor. */
.bes-randevu-yan {
    margin-left: 0;
}

/* Marka kartı ızgarası (services-page__list-box) — ikon kutusu yok. */
.bes-marka-kart .services-page__text {
    margin-bottom: 4px;
}

/* Arıza rehberi ve marka listesi bölümlerinde `.services-page`in eksik alt
   boşluğu. */
.services-page > .container > .bes-ariza-grup:last-of-type,
.services-page > .container > .bes-baglanti-agi:last-child {
    margin-bottom: 90px;
}

/* Hizmet detayındaki içerik boşluğu — bes-icerik içinde bağlantı ağı
   kullanılmıyorsa son öğe kutuya yapışmasın. */
.bes-uzun-icerik .bes-icerik > .bes-baglanti-agi:last-child {
    margin-bottom: 0;
}


/* =========================================================================
   15 — Sabit öğeler
   ========================================================================= */
/* WhatsApp düğmesi.
   Temanın "yukarı çık" düğmesi (.scroll-to-top) 50×50, `bottom: 40px;
   right: 40px; z-index: 99`. Çakışmaması için bu düğme onun TAM ÜSTÜNE,
   12px boşluk bırakarak yerleştirilir (40 + 50 + 12 = 102). */
.bes-whatsapp {
    position: fixed;
    right: 40px;
    bottom: 102px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #25d366;
    color: var(--assimox-white);
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 300ms ease, background-color 300ms ease;
}

.bes-whatsapp:hover,
.bes-whatsapp:focus {
    background-color: #1da851;
    color: var(--assimox-white);
    transform: scale(1.08);
}

/* Tema dosyaları eksikken basılan kırmızı şerit. */
.bes-tema-uyari {
    position: relative;
    z-index: 10000;
    padding: 14px 20px;
    background-color: #b3261e;
    color: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}

.bes-tema-uyari strong {
    display: inline-block;
    margin-right: 6px;
}

.bes-tema-uyari code {
    background-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    padding: 1px 6px;
    border-radius: 3px;
    overflow-wrap: anywhere;
}


/* =========================================================================
   16 — @media blokları
   ========================================================================= */

/* --- Dar masaüstü: menü 7 başlıkla tek satırda kalmalı ------------------
   1200px altında tema zaten mobil menüye geçiyor (assimox.css:
   `.main-menu__list { display: none }`, @media (min-width: 1200px) ile
   flex'e dönüyor), bu yüzden kademeler yalnızca 1200–1599 arasında. */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .main-menu .main-menu__list > li + li,
    .stricky-header .main-menu__list > li + li {
        margin-left: 30px;
    }

    .main-menu .main-menu__list > li > a,
    .stricky-header .main-menu__list > li > a {
        font-size: 17px;
    }

    .main-menu__logo {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1359px) {
    .main-menu .main-menu__list > li + li,
    .stricky-header .main-menu__list > li + li {
        margin-left: 20px;
    }

    .main-menu .main-menu__list > li > a,
    .stricky-header .main-menu__list > li > a {
        font-size: 16px;
    }

    .main-menu__logo {
        margin-right: 24px;
    }

    .main-menu__search-nav-sidebar {
        margin-left: 14px;
    }
}

/* --- 1200px altı: kart ızgaraları ve künye ------------------------------ */
@media only screen and (max-width: 1199px) {
    .bes-icerik h2 {
        font-size: 28px;
        line-height: 38px;
    }

    .bes-yazi-gezinme {
        gap: 16px;
    }
}

/* --- Tablet ------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    /* Tema `.sidebar`a margin-left: 30px veriyor; tek sütuna düşünce
       gereksiz. */
    .bes-yan,
    .bes-randevu-yan {
        margin-left: 0;
    }

    .about-quality.bes-uzun-icerik {
        padding-bottom: 80px;
    }

    .services-page.bes-bolge-sayfa,
    .services-page.bes-bolge-hizmetleri {
        padding-bottom: 70px;
    }

    .faq-page.bes-ucret-sss,
    .faq-page.bes-randevu-sss,
    .faq-page.bes-hizmet-sss {
        padding-top: 70px;
        padding-bottom: 60px;
    }

    .team-page.bes-diger-ekip,
    .project-page.bes-diger-isler,
    .project-page.bes-yakin-isler {
        padding-top: 70px;
    }

    .services-details.bes-ekip-detay {
        padding-bottom: 70px;
    }

    /* Hizmet ızgarası tabletlerde 2 sütuna düşüyor; başlık kırpması
       gereksiz yer kaplamasın. */
    .services-page__title {
        min-height: 0;
    }

    .bes-bolge-blok {
        padding: 24px 22px 22px;
    }
}

/* --- Küçük tablet / büyük telefon ---------------------------------------- */
@media only screen and (max-width: 767px) {
    .bes-icerik,
    .bes-icerik p {
        font-size: 17px;
        line-height: 29px;
    }

    .bes-icerik h2 {
        font-size: 25px;
        line-height: 34px;
        margin-top: 34px;
    }

    .bes-icerik h3 {
        font-size: 21px;
        line-height: 30px;
    }

    .bes-ariza-liste,
    .bes-yazi-liste {
        grid-template-columns: 1fr;
    }

    .bes-yazi-gezinme {
        grid-template-columns: 1fr;
    }

    .bes-yazi-gezinme__sonraki {
        text-align: left;
    }

    .bes-yazi-gezinme__sonraki:only-child {
        grid-column: 1;
    }

    ul.bes-kunye {
        grid-template-columns: 1fr;
    }

    .bes-ucret-ozet,
    .bes-ariza-ozet,
    .bes-kunye {
        padding-left: 18px;
        padding-right: 18px;
    }

    .bes-ucret-ozet li,
    .bes-ariza-ozet li,
    ul.bes-kunye li {
        flex-wrap: wrap;
        gap: 2px;
    }

    .bes-ucret-ozet li > b,
    .bes-ariza-ozet li > b,
    ul.bes-kunye li > b {
        text-align: left;
    }

    .bes-bolge-blok-ust {
        align-items: flex-start;
    }

    .bes-buton-satiri > .thm-btn,
    .bes-buton-satiri > .bes-tel-buton {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .bes-marka-uyari,
    .bes-fiyat-notu,
    .bes-guvenlik-uyari,
    .bes-ornek-notu {
        padding: 16px 18px 16px 16px;
        font-size: 15px;
        line-height: 25px;
    }

    .bes-uyari-bolumu {
        padding-top: 34px;
    }

    .bes-yan-kutu,
    .bes-yan-form {
        padding: 22px 20px 24px;
    }

    /* Sabit düğmeler telefonda küçülür ve kenara yaklaşır. */
    .bes-whatsapp {
        right: 20px;
        bottom: 82px;
        width: 46px;
        height: 46px;
        font-size: 23px;
    }

    .bes-galeri-kutu img {
        height: 200px;
    }
}

/* --- Telefon ------------------------------------------------------------ */
@media only screen and (max-width: 575px) {
    .bes-kategori-filtre {
        gap: 8px;
    }

    .bes-kategori-filtre a,
    .bes-kategori-filtre__link {
        padding: 7px 14px 6px;
        font-size: 14px;
    }

    .bes-marka-liste,
    .bes-bolge-liste,
    .bes-hizmet-liste {
        gap: 7px;
    }

    .bes-marka-liste a,
    .bes-bolge-liste a {
        font-size: 14px;
        padding: 6px 12px 5px;
    }

    .bes-hizmet-liste a {
        font-size: 14px;
        padding: 8px 12px 7px;
    }

    .bes-ariza-grup__baslik,
    .bes-bolge-adi {
        font-size: 22px;
        line-height: 32px;
    }

    .bes-bolge-blok {
        padding: 20px 16px 18px;
    }

    .bes-varis--genis {
        display: block;
    }

    .bes-icerik table {
        font-size: 15px;
    }

    .bes-icerik table th,
    .bes-icerik table td {
        padding: 9px 12px;
    }
}

/* =========================================================================
   17. ÜÇÜNCÜ TUR DÜZELTMELERİ
   Ekran görüntüsü karşılaştırmasında görülen ve tema kurallarından
   kaynaklanan hizalama kusurları.
   ========================================================================= */

/* --- 17.1  "Neden biz" dört maddesi 2x2 kalsın ---------------------------
   Tema iki <ul>'yi `float: left` ile yan yana koyar ve ikincisine
   `margin-left: 90px` verir. Türkçe maddeler İngilizce özgün metinden uzun
   olduğu için ikinci sütun aşağı sarkıyor ve dört madde merdiven gibi
   diziliyordu. Kayan yerleşim yerine esnek kutu kullanılıyor: sütun
   genişlikleri metne göre değil kaba göre belirleniyor. */
.why-choose-one__points-box {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-right: 0;
    overflow: visible;          /* tema `overflow: hidden` ile kayan öğeleri
                                   temizliyordu; esnek kutuda gerekmiyor */
}

.why-choose-one__points {
    float: none;
    flex: 1 1 0;
    min-width: 0;
}

.why-choose-one__points-two {
    margin-left: 0;
}

/* İki satırlık maddelerde ilk satırın yüksekliği sabitlenir, böylece
   temanın 86px'teki ayırıcı çizgisi iki satır arasına düşer. */
.why-choose-one__points li {
    align-items: flex-start;
    min-height: 62px;
}

.why-choose-one__points li + li {
    margin-top: 42px;
}

.why-choose-one__points li .text p {
    line-height: 26px;
}

/* --- 17.2  Ekip kartı unvanı tek satır ----------------------------------
   Unvan iki satıra düştüğünde mutlak konumlu künye yukarı büyüyor ve ad
   mavi şeklin dışına, fotoğrafın açık bölgesine taşıyordu. Unvan tek
   satırda tutulur; sığmayan kısım üç noktayla kesilir (tam metin
   ekip sayfasında görünür). */
.team-one__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.team-one__name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 17.3  Blog kartı görselleri aynı oranda ----------------------------
   Tema kart görsellerini oranlamaz; kurulumla gelen fotoğraflar farklı
   oranlarda olduğu için kartlar farklı yüksekliklerde başlıyor ve başlıklar
   hizasız kalıyordu. Ortak oran veriliyor, taşan kısım kırpılıyor. */
.blog-one__img,
.blog-grid__img {
    overflow: hidden;
}

.blog-one__img img,
.blog-grid__img img {
    display: block;
    width: 100%;
    aspect-ratio: 370 / 260;
    object-fit: cover;
}

.blog-details__img img {
    display: block;
    width: 100%;
    aspect-ratio: 840 / 435;
    object-fit: cover;
}

/* Üç kartlı ızgarada başlıklar iki satırda hizalansın; üç satırlık başlık
   kartı uzatıp komşularıyla arasında boşluk açıyordu. */
.blog-one__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 17.4  Sayfa başlığı şeridinde okunurluk ----------------------------
   Şeridin yazısı beyazdır. Panelden yüklenecek görselin ne kadar açık
   olacağı bilinemeyeceği için, arka planın üzerine ince bir koyu katman
   konur: metin her görselde okunur kalır, görsel de tamamen kaybolmaz. */
.page-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(6, 22, 48, 0.55),
        rgba(6, 22, 48, 0.42)
    );
}

/* --- 17.5  Hizmet kartı görselleri --------------------------------------
   Hizmet ve iş örneği kartlarında da oran farkı hizasızlık yaratıyor. */
.project-page__img img,
.services-page__img img,
.bes-yazi-kart img {
    display: block;
    width: 100%;
    aspect-ratio: 370 / 285;
    object-fit: cover;
}

/* --- 17.6  Sabit bildirim kutusu ----------------------------------------
   Formu sayfanın altında olan işlemlerde (bülten aboneliği) bildirim
   sayfanın üstünde basılır ve kullanıcı görmez. Bu kutu ekranın sağ üstünde
   sabit durur; ozel/servis.js dokuz saniye sonra kendiliğinden kapatır. */
.bes-bildirim {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 1200;
    max-width: 380px;
}

.bes-bildirim .alert {
    box-shadow: 0 12px 34px rgba(11, 26, 58, 0.22);
    border: 0;
    border-left: 5px solid currentColor;
    font-size: 15px;
    line-height: 24px;
    padding: 14px 42px 14px 16px;
    border-radius: 6px;
}

@media only screen and (max-width: 575px) {
    .bes-bildirim {
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        max-width: none;
    }
}