/* =========================================================
   ULTRAAPP — Temaya eklenen özel stiller
   Tema dosyaları (style.css / responsive.css) değiştirilmedi;
   bu dosya onların üzerine yüklenir.
   ========================================================= */

/* =========================================================
   LOGO — "ULTRA" vurgu renginde, "APP" beyaz.
   Marka görselindeki lacivert/siyah "APP", sitenin koyu zemininde
   okunmadığı için beyaza çevrildi; kontrast oranı korunuyor.
   ========================================================= */
.ultraapp-logo__ultra,
.ultraapp-logo__app {
    /* Tema, h1–h6 içindeki tüm span'leri blok + gri + 12px yapıyor
       (style.css:478-488). Logo tek satırda ve başlık boyutunda durmalı. */
    display: inline;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    text-transform: none;
    font-family: 'Montserrat', 'Roboto Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.ultraapp-logo__ultra {
    color: #545DEB;
}
.ultraapp-logo__app {
    color: #ffffff;
}

/* Üst menüdeki logo */
a.ultraapp-logo {
    width: auto !important;   /* tema, img boyutuna göre genişlik veriyordu */
    height: auto !important;
}
.ultraapp-logo__text {
    display: block;
    margin: 0;
    font-size: 22px;
    line-height: 26px;
    white-space: nowrap;
}

/* Ekranda görünmeyen, ancak arama motorları ve ekran okuyucuların
   okuduğu içerik (H1 için). display:none kullanılmaz. */
.ultraapp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bölüm başlığı (h2) — tema başlık diliyle uyumlu */
h2.ultraapp-section-title {
    text-align: center;
    font-size: 34px;
    line-height: 40px;
    color: #ffffff;
    margin: 0 0 22px 0;
}
h2.ultraapp-section-title > span {
    display: block;
    color: #5C5C60;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}

/* Yan paneldeki (Hakkımızda) logo — gerçek logo görseli.
   Tema burada dairesel bir avatar bekliyordu (style.css:1377-1381,
   width:150px + border-radius:50%); logo görseli tam ve dikdörtgen
   görünmeli, o kuralları burada eziyoruz. */
.ashade-widget--about__head.is-image-logo {
    margin: 0 0 30px 0;
}
.ashade-widget--about__head.is-image-logo img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 0;
}
/* Logo görselinin kendi arka planı (~#15141A) panelin arka planından
   (style.css:1258, #17171B) birkaç birim farklıydı; yan yana durunca
   resmin kenarı belli oluyordu. Panelin rengini logonun ölçülen
   arka plan rengine çekerek dikişi kaldırıyoruz. */
aside#ashade-aside {
    background: #15141A;
}

/* --- Gövde metni: tema #808080 (style.css:87) kullanıyor, koyu
   arka planlarda soluk/düşük kontrastlı kalıyordu. Başlıklar zaten
   beyaz; gövde metnini de belirgin biçimde aydınlattık. Tam #ffffff
   yerine %90 opaklık kullanıldı — uzun paragraflarda tam beyaz göz
   yorar, bu şekilde hem "öne çıkıyor" hem okunması rahat kalıyor. */
body {
    color: rgba(255, 255, 255, 0.9);
}

/* --- Arka plan videosu ---
   Tema (style.css:1412) videoyu ortalıyor ama boyut vermiyor; video kendi
   1920x1080 boyutunda kalıyordu. Bu yüzden dar ekranlarda taşıyor, geniş
   ekranlarda kenarlarda boşluk kalıyordu. object-fit ile her ekranı düzgün
   kaplamasını sağlıyoruz. */
.ashade-home-background video {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Video yüklenene kadar (ve yüklenmediğinde) poster görseli görünür kalsın */
.ashade-home-background.is-video {
    background-image: url('../img/bgs/video-poster.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000;
}

/* --- Hizmet Kartları (#ashade-home-works) --- */
.ultraapp-service {
    padding: 34px 30px;
    margin: 0 0 30px 0;
    height: calc(100% - 30px);
    border: 1px solid rgba(84, 93, 235, 0.25);
    border-top: 2px solid rgba(84, 93, 235, 0.55);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.ultraapp-service:hover {
    border-color: rgba(84, 93, 235, 0.7);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-6px);
}
.ultraapp-service h3 {
    color: #ffffff;
    /* Başlıklar SEO için h3; tema h3'ü 30px olduğundan kart düzenine
       uyacak boyuta çekiliyor. */
    font-size: 24px;
    line-height: 29px;
    margin: 0 0 14px 0;
}
.ultraapp-service h5 span {
    display: block;
    color: #5C5C60;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
}
.ultraapp-service p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}
/* Kart başlığı, hizmet detay sayfasına bağlantı */
.ultraapp-service h3 a {
    color: inherit;
    transition: color 0.3s ease;
}
.ultraapp-service h3 a:hover {
    color: #545DEB;
}
/* Kartın tamamı tıklanabilir hissettirsin */
.ultraapp-service:hover h3 a {
    color: #545DEB;
}

/* Footer'daki KVKK bağlantısı */
.ashade-footer__copyright a {
    color: #808080;
    text-decoration: underline;
}
.ashade-footer__copyright a:hover {
    color: #ffffff;
}

/* Fiyat satırı: kartlar eşit yükseklikte olduğu için flex ile en alta
   sabitlenir, böylece farklı uzunluktaki açıklamalarda da aynı hizada durur. */
.ultraapp-service {
    display: flex;
    flex-direction: column;
}
.ultraapp-service__price {
    margin-top: auto;
    padding-top: 22px;
}
.ultraapp-service__price strong {
    display: block;
    color: #ffffff;
    font-family: 'Roboto Condensed', 'Montserrat', sans-serif;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.5px;
}
/* Fiyatın yanındaki "+ KDV" ibaresi — rakamı gölgede bırakmasın */
.ultraapp-kdv {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #808080;
    white-space: nowrap;
}
.ultraapp-price-box .ultraapp-kdv {
    font-size: 17px;
}

.ultraapp-service__price > span {
    display: block;
    color: #5C5C60;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 5px 0 0 0;
}

/* "Teklif Alın" bağlantısı — fiyat yerine geçer, aynı yüksekliği doldurur.
   Yalnızca fiyat alanlarında buton görünümü alır; menüdeki "İLETİŞİM"
   bağlantısı da bu class'ı kullandığı için seçici sınırlandırıldı. */
.ultraapp-service__price a.ultraapp-quote,
.ultraapp-price-box a.ultraapp-quote {
    display: inline-block;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.ultraapp-service__price a.ultraapp-quote:hover,
.ultraapp-price-box a.ultraapp-quote:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* KDV / kapsam notu */
p.ultraapp-price-note {
    color: #5C5C60;
    font-size: 13px;
    text-align: center;
    max-width: 735px;
    margin: 30px auto 0 auto;
}

/* Footer ekranın altına sabitlenmiş (position:fixed). İçeriğin alt payı
   40px olduğu için son satır footer'ın arkasında kalıyordu.
   Not: Bu yalnızca ana sayfada geçerli; iç sayfalarda footer akış içinde. */
body.ashade-home-template .ashade-content {
    padding-bottom: 100px;
}

/* =========================================================
   İÇ SAYFA BİLEŞENLERİ (hizmet detay, hakkımızda, kvkk)
   ========================================================= */

/* Kırıntı navigasyon */
.ultraapp-breadcrumb {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5C5C60;
    margin: 0 0 40px 0;
}
.ultraapp-breadcrumb a {
    color: #808080;
}
.ultraapp-breadcrumb a:hover {
    color: #ffffff;
}
.ultraapp-breadcrumb strong {
    color: #ffffff;
    font-weight: 700;
}
.ultraapp-breadcrumb span {
    margin: 0 6px;
}

/* "Neler dahil?" kutuları — tema satırı flex-row ve sarma yapmıyor,
   bu yüzden 8 kutu tek satıra sıkışıyordu. */
.ashade-row.ultraapp-feature-grid {
    flex-wrap: wrap;
}
.ultraapp-feature {
    padding: 26px 24px;
    margin: 0 0 30px 0;
    height: calc(100% - 30px);
    border: 1px solid rgba(84, 93, 235, 0.25);
    border-top: 2px solid rgba(84, 93, 235, 0.55);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.35s ease, background 0.35s ease;
}
.ultraapp-feature:hover {
    border-color: rgba(84, 93, 235, 0.7);
    background: rgba(255, 255, 255, 0.06);
}
.ultraapp-feature h3 {
    color: #ffffff;
    font-size: 19px;
    line-height: 24px;
    margin: 0 0 10px 0;
}
.ultraapp-feature p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Süreç adımları */
ol.ultraapp-steps {
    counter-reset: adim;
    list-style: none;
    padding: 0;
    margin: 0;
}
ol.ultraapp-steps li {
    counter-increment: adim;
    position: relative;
    padding: 0 0 26px 68px;
    margin: 0;
}
ol.ultraapp-steps li:before {
    content: counter(adim, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border: 1px solid rgba(84, 93, 235, 0.55);
    color: #545DEB;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
ol.ultraapp-steps li strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    margin: 8px 0 6px 0;
}
ol.ultraapp-steps li span {
    display: block;
    color: rgba(255, 255, 255, 0.9);
}

/* Fiyat kutusu */
.ultraapp-price-box {
    text-align: center;
    padding: 40px 30px;
    border: 1px solid rgba(84, 93, 235, 0.3);
    border-top: 2px solid rgba(84, 93, 235, 0.6);
    background: rgba(255, 255, 255, 0.04);
}
.ultraapp-price-box strong {
    display: block;
    color: #ffffff;
    font-family: 'Roboto Condensed', 'Montserrat', sans-serif;
    font-size: 46px;
    line-height: 52px;
}
.ultraapp-price-box > span {
    display: block;
    color: #5C5C60;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 6px 0 26px 0;
}

/* Sık sorulan sorular (açılır-kapanır) */
.ultraapp-faq details {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 20px 0;
}
.ultraapp-faq details:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ultraapp-faq summary {
    cursor: pointer;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 24px;
    list-style: none;
    position: relative;
    padding-right: 34px;
}
.ultraapp-faq summary::-webkit-details-marker {
    display: none;
}
.ultraapp-faq summary:after {
    content: '+';
    position: absolute;
    right: 0;
    top: -2px;
    color: #545DEB;
    font-size: 24px;
    line-height: 24px;
}
.ultraapp-faq details[open] summary:after {
    content: '–';
}
.ultraapp-faq details p {
    color: rgba(255, 255, 255, 0.9);
    margin: 14px 0 0 0;
}

/* İlgili hizmet bağlantıları */
ul.ultraapp-related {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
ul.ultraapp-related li {
    margin: 0;
}
ul.ultraapp-related a {
    display: inline-block;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.3s ease, border-color 0.3s ease;
}
ul.ultraapp-related a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Uzun metinli sayfalar (KVKK, Hakkımızda) */
.ultraapp-prose h2 {
    color: #ffffff;
    font-size: 26px;
    line-height: 32px;
    margin: 46px 0 16px 0;
}
.ultraapp-prose h3 {
    color: #ffffff;
    font-size: 19px;
    line-height: 25px;
    margin: 30px 0 12px 0;
}
.ultraapp-prose p,
.ultraapp-prose li {
    color: rgba(255, 255, 255, 0.9);
}
.ultraapp-prose ul,
.ultraapp-prose ol {
    padding-left: 20px;
    margin: 0 0 18px 0;
}
.ultraapp-prose li {
    margin: 0 0 8px 0;
}
.ultraapp-prose strong {
    color: #ffffff;
}
.ultraapp-prose a {
    color: #545DEB;
    text-decoration: underline;
}

@media only screen and (max-width: 760px) {
    .ultraapp-price-box strong {
        font-size: 34px;
        line-height: 40px;
    }
    .ultraapp-price-box {
        padding: 30px 20px;
    }
    ol.ultraapp-steps li {
        padding-left: 58px;
    }
    ol.ultraapp-steps li:before {
        width: 40px;
        height: 40px;
        line-height: 38px;
    }
    .ultraapp-prose h2 {
        font-size: 22px;
        line-height: 28px;
    }
}

/* Kartların satır içinde eşit yükseklikte durması için */
#ashade-home-works .ashade-row {
    align-items: stretch;
}

/* --- İletişim formu geri bildirimi --- */
.ashade-contact-form__response.is-error {
    color: #cc4040;
}
.ashade-contact-form__response.is-success {
    color: #ffffff;
}

/* --- Mobil --- */
@media only screen and (max-width: 1024px) {
    .ultraapp-service {
        padding: 28px 24px;
        margin: 0 0 20px 0;
        height: auto;
    }
}

@media only screen and (max-width: 760px) {
    /* Tema, içeriğe masaüstündeki dikey "Geri/Yukarı" sütunları için sağda
       75px boşluk bırakıyor (margin-right). Telefonda o sütunlar görünmediği
       için boşluk yalnızca metni daraltıyordu: 390px ekranda içerik 280px
       kalıyor ve sola kaymış görünüyordu. Burada içeriği ortalayıp
       genişletiyoruz. */
    body.ashade-home-template .ashade-content,
    .ashade-content {
        width: auto;
        max-width: none;
        margin-left: 24px;
        margin-right: 24px;
    }

    .ultraapp-service {
        padding: 24px 20px;
    }
    .ultraapp-service h3 {
        font-size: 20px;
        line-height: 25px;
    }
    h2.ultraapp-section-title {
        font-size: 25px;
        line-height: 31px;
    }

    /* Telefonda satır aralarındaki boşluk masaüstü kadar geniş olmasın */
    #ashade-home-works .ashade-row {
        margin-bottom: 0;
    }

    /* Footer ekranın altına sabitlenmiş (position:fixed, ~81px) ve telefonda
       iki satıra çıkıyor. İçeriğin alt payı 40px olduğu için son kart
       footer'ın arkasında kalıyordu; footer kadar boşluk bırakıyoruz. */
    .ashade-content {
        padding-bottom: 120px;
    }
}