/* ============================================================
   ÖZEL EKLER — Olux temasının üzerine
   ------------------------------------------------------------
   Tema CSS dosyaları hiç değiştirilmedi. Siteye özgü tüm
   düzeltmeler bu dosyada tutulur; tema güncellenirse sadece
   bu dosya korunur.
   ============================================================ */

/* ---------- Metin logo (hazır logo görseli yok) ---------- */
.brand-text {
    display        : inline-block;
    line-height    : 1.15;
    text-decoration: none;
}

.brand-text .brand-name {
    display    : block;
    font-family: 'Montserrat', sans-serif;
    font-size  : 24px;
    font-weight: 700;
    color      : var(--primary-color2);
    letter-spacing: -0.4px;
}

.brand-text .brand-tag {
    display       : block;
    font-size     : 10px;
    font-weight   : 600;
    letter-spacing: 2px;
    margin-top    : 3px;
    color         : var(--primary-color);
    text-transform: uppercase;
}

.brand-text:hover .brand-name {
    color: var(--primary-color);
}

/* Koyu zeminde (footer, yan menü) */
.brand-text.is-light .brand-name {
    color: #fff;
}

#site-logo .brand-text {
    line-height: 1.15;
    vertical-align: middle;
}

/* ---------- Profil fotoğrafı ----------
   Fotoğraf 1152x1003 (oran 1.15) ve önceden kırpılmış:
   tam boy duruş, yüz üst kısımda.

   Tema bu alanlara PNG maske uyguluyor ve maskeler
   'mask-repeat: no-repeat' ile SABİT boyutta:
       mask-slider.png    755x729  (oran 1.04)
       mask-about-2nd.png 488x422  (oran 1.16)

   Bu yüzden görselleri maskenin kendi ölçüsüne sabitliyoruz.
   Aksi halde alan maskeden yüksek kalıyor ve cover üstten
   kırparak başı kesiyor. Fotoğraf oranı (1.15) maske oranına
   çok yakın olduğu için bu şekilde neredeyse hiç kırpılmıyor. */

/* Hero — maske dosyası 755x729, ama maskenin ŞEFFAF OLMAYAN
   (yani görselin göründüğü) alanı sadece:
       X 94-728, Y 70-622  =>  634x552
   Yani üstteki ~70px maske tarafından kesiliyor. Görseli
   object-fit:cover ile tam alana yayarsak baş bu kesilen
   bölgeye denk geliyor. Bu yüzden görseli maskenin opak
   alanına oturtup (contain mantığı) konumlandırıyoruz. */
.content-slider-right {
    position: relative;
    height  : 729px;
}

.content-slider-right img {
    display    : block;
    width      : 800px;
    max-width  : none;
    height     : auto;
    margin-left: 40px;
    margin-top : 15px;
    object-fit : contain;
}

/* Hakkımda (hikâyem) ve teklif sayfası — maske 488x422 ve
   opak alanı neredeyse tamamı (486x420), yani kesme yok.
   Fotoğraf oranı (1.15) maske oranına (1.16) çok yakın
   olduğu için cover neredeyse hiç kırpmıyor. */
.about-post img {
    display        : block;
    width          : 488px;
    max-width      : 100%;
    height         : 422px;
    object-fit     : cover;
    object-position: 50% 30%;
}

/* Ana sayfa "Neden benimle çalışmalısınız" — maskesiz,
   köşeleri yuvarlatılmış kutu (border-radius tema tarafından) */
.flat-about .post-big img {
    display        : block;
    width          : 420px;
    max-width      : 100%;
    height         : 480px;
    object-fit     : cover;
    object-position: 50% 25%;
}

/* Fotoğraf yüklenemezse görünen baş harf kutusu */
.foto-fallback {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    min-height     : 380px;
    background     : var(--primary-color2);
    color          : #fff;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 90px;
    font-weight    : 700;
    letter-spacing : 2px;
}

/* ---------- Sosyal medya ikonları ----------
   Tema "Fb. / Tw." gibi metin kısaltmalar kullanıyordu.
   icomoon setindeki Instagram glifi soluk/bozuk çıktığı
   için ikonlar SVG olarak gömüldü; renk currentColor ile
   temanın link renginden gelir, her boyutta net kalır. */
.sosyal-ikon {
    display       : block;
    width         : 21px;
    height        : 21px;
    vertical-align: middle;
    transition    : transform .25s ease, opacity .25s ease;
}

.widget-social-footer-item a,
.widget-social a {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
}

.widget-social-footer-item a:hover .sosyal-ikon,
.widget-social a:hover .sosyal-ikon {
    transform: scale(1.15);
}

/* Hero solundaki dikey şerit — öğeler alt alta dizili */
.widget-social-header .widget-social-footer-item li {
    margin: 16px 0;
}

.widget-social-header .sosyal-ikon {
    width : 22px;
    height: 22px;
}

/* Alt footer şeridi */
#footer .sosyal-ikon {
    width : 20px;
    height: 20px;
}

/* Yan menü (koyu zemin) */
.side-menu__top-social .sosyal-ikon {
    width : 20px;
    height: 20px;
}

/* ---------- Teknoloji etiketleri ---------- */
.tech-list {
    display  : flex;
    flex-wrap: wrap;
    gap      : 12px;
    padding  : 0;
    margin   : 0;
    list-style: none;
}

.tech-list li {
    padding      : 10px 22px;
    border       : 1px solid #e6e6e6;
    border-radius: 30px;
    font-size    : 15px;
    font-weight  : 500;
    color        : var(--primary-color2);
    background   : #fff;
    transition   : all .3s ease;
}

.tech-list li:hover {
    background  : var(--primary-color);
    border-color: var(--primary-color);
    color       : #fff;
}

/* ---------- SSS (accordion) ---------- */
.sss-item {
    border       : 1px solid #ececec;
    border-radius: 6px;
    margin-bottom: 14px;
    background   : #fff;
    overflow     : hidden;
}

.sss-item .sss-soru {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 20px;
    width          : 100%;
    padding        : 22px 26px;
    background     : none;
    border         : 0;
    text-align     : left;
    font-family    : 'Montserrat', sans-serif;
    font-size      : 17px;
    font-weight    : 600;
    color          : var(--primary-color2);
    cursor         : pointer;
    transition     : color .3s ease;
}

.sss-item .sss-soru:hover,
.sss-item .sss-soru[aria-expanded="true"] {
    color: var(--primary-color);
}

.sss-item .sss-isaret {
    flex-shrink: 0;
    font-size  : 24px;
    font-weight: 400;
    line-height: 1;
    transition : transform .3s ease;
}

.sss-item .sss-soru[aria-expanded="true"] .sss-isaret {
    transform: rotate(45deg);
}

.sss-item .sss-cevap {
    display: none;
    padding: 0 26px 24px;
}

.sss-item .sss-cevap.acik {
    display: block;
}

.sss-item .sss-cevap p {
    margin     : 0;
    font-size  : 16px;
    line-height: 1.75;
    color      : #666;
}

/* ---------- Yüzen WhatsApp butonu ---------- */
.wa-fab {
    position       : fixed;
    right          : 26px;
    bottom         : 26px;
    z-index        : 999;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 58px;
    height         : 58px;
    border-radius  : 50%;
    background     : #25D366;
    color          : #fff !important;
    box-shadow     : 0 8px 24px rgba(37, 211, 102, .38);
    transition     : transform .25s ease;
}

.wa-fab:hover {
    transform: scale(1.08);
    color    : #fff !important;
}

.wa-fab svg {
    width : 30px;
    height: 30px;
    fill  : currentColor;
}

/* Nabız halkası */
.wa-fab::after {
    content      : "";
    position     : absolute;
    inset        : 0;
    border-radius: 50%;
    border       : 2px solid #25D366;
    animation    : wa-pulse 2.2s ease-out infinite;
}

@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.7); opacity: 0;  }
}

/* Scroll-top butonu WhatsApp ile çakışmasın */
#scroll-top {
    bottom: 100px;
}

/* ---------- Küçük düzeltmeler ---------- */

/* Hero'da tek slayt olduğunda ok butonlarını gizle */
.mainslider-tek ~ .main-slide-button {
    display: none;
}

/* Proje slaytı tıklanabilir */
.swiper-slide.style-coverflow a {
    text-decoration: none;
}

/* Deneyim kutusunda tarih yerine adım adı */
.work-box .work-box-left .job {
    color: var(--primary-color);
}

/* İletişim bilgi listesi (teklif sayfası) */
.iletisim-liste {
    padding   : 0;
    margin    : 30px 0 0;
    list-style: none;
}

.iletisim-liste li {
    position     : relative;
    padding-left : 34px;
    margin-bottom: 18px;
    font-size    : 16px;
    line-height  : 1.6;
    color        : #666;
}

.iletisim-liste li a {
    color: #666;
}

.iletisim-liste li a:hover {
    color: var(--primary-color);
}

.iletisim-liste li:before {
    position   : absolute;
    left       : 0;
    top        : 1px;
    font-family: "FontAwesome";
    font-size  : 18px;
    color      : var(--primary-color);
}

.iletisim-liste li.i-tel:before   { content: "\f095"; }
.iletisim-liste li.i-mail:before  { content: "\f0e0"; }
.iletisim-liste li.i-konum:before { content: "\f041"; }
.iletisim-liste li.i-saat:before  { content: "\f017"; }

/* Form gönderim uyarısı */
.form-not {
    margin-top: 16px;
    font-size : 14px;
    color     : #888;
}

/* Dar ekranda sabit yükseklikler taşma yapmasın:
   genişliğe göre oranı koruyarak küçülsünler. */
@media only screen and (max-width: 991px) {
    /* Dar ekranda maske görsele göre ölçekleniyor; sabit
       piksel yerine oransal konumlandırma kullanıyoruz. */
    .content-slider-right {
        height: auto;
    }

    .content-slider-right img {
        width      : 85%;
        max-width  : 85%;
        height     : auto;
        margin-left: 12%;
        margin-top : 10%;
    }

    .about-post img {
        width       : 100%;
        height      : auto;
        aspect-ratio: 488 / 422;
    }

    .flat-about .post-big img {
        width       : 100%;
        height      : auto;
        aspect-ratio: 420 / 480;
        max-width   : 360px;
        margin      : 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .brand-text .brand-name { font-size: 20px; }
    .foto-fallback          { min-height: 320px; font-size: 64px; }
    .wa-fab                 { right: 16px; bottom: 16px; }
}