/*
 * Berpel düzeltmeleri — 13 Eylül 2026
 *
 * SORUN: Site, Swiper'ın JavaScript'ini CDN'den v14 olarak, CSS'ini ise
 * yerelden v4.4.1 (2018) olarak yüklüyor. v14 kendi SVG ok ikonunu DOM'a
 * enjekte ediyor, ama onu biçimlendirecek v14 CSS'i sayfada yok. Sonuç:
 *   1) Eski CSS'in ::after font ikonu ile yeni SVG üst üste biniyor
 *      -> her okta İKİ chevron görünüyordu
 *   2) "Önceki" okunu 180° döndürecek kural olmadığı için prev oku da
 *      sağa bakıyordu
 *
 * Bu dosya vendor.css ve swiper.css'ten SONRA yüklenmeli.
 */

/* 1) Eski font ikonunu sustur — SVG zaten var */
.swiper-button-next::after,
.swiper-button-prev::after,
.custom-swiper-button-next::after,
.custom-swiper-button-prev::after {
    content: none !important;
    display: none !important;
}

/* 2) "Önceki" okunu ters çevir */
.swiper-button-prev .swiper-navigation-icon,
.custom-swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------------
 * Slider okları — hover efekti (13 Eylül 2026)
 * Hafif büyüme + zemin koyulaşması + okun gitmek istediği yöne
 * doğru küçük bir kayma. Süre kısa tutuldu (180ms), abartısız.
 * --------------------------------------------------------------- */
.swiper-button-next,
.swiper-button-prev,
.custom-swiper-button-next,
.custom-swiper-button-prev {
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    will-change: transform;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.custom-swiper-button-next:hover,
.custom-swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, .34);
    transform: scale(1.12);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

.swiper-button-next:active,
.swiper-button-prev:active {
    transform: scale(1.04);
    transition-duration: .08s;
}

/* İkon, okun yönüne doğru kayar */
.swiper-button-next .swiper-navigation-icon,
.swiper-button-prev .swiper-navigation-icon,
.custom-swiper-button-next .swiper-navigation-icon,
.custom-swiper-button-prev .swiper-navigation-icon {
    transition: transform .18s ease;
}
.swiper-button-next:hover .swiper-navigation-icon,
.custom-swiper-button-next:hover .swiper-navigation-icon {
    transform: translateX(2px);
}
/* prev ikonu zaten 180° dönük; kaymayı da ters uygula */
.swiper-button-prev:hover .swiper-navigation-icon,
.custom-swiper-button-prev:hover .swiper-navigation-icon {
    transform: rotate(180deg) translateX(2px);
}

/* Klavye erişimi: odaklanınca da görünür olsun */
.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 3px;
}

/* Hareketi azalt tercihi olan kullanıcıya saygı */
@media (prefers-reduced-motion: reduce) {
    .swiper-button-next, .swiper-button-prev,
    .custom-swiper-button-next, .custom-swiper-button-prev,
    .swiper-navigation-icon { transition: none !important; transform: none !important; }
    .swiper-button-prev .swiper-navigation-icon,
    .custom-swiper-button-prev .swiper-navigation-icon { transform: rotate(180deg) !important; }
}


/* ===============================================================
 * KENAR MENÜ — 13 Eylül 2026 (Berpel)
 *
 * Sitedeki 19 kenar menü dosyası da aynı yapıyı kullanıyor:
 *   section.widget.widget_categories > ul > li.cat-item > a > i.fa
 * HTML'e dokunulmadı; bu blok hepsini birden biçimlendirir.
 *
 * Not: linklerde satır içi style="font-weight: normal" var, o yüzden
 * yalnız font-weight için !important gerekiyor.
 * =============================================================== */
.widget_categories ul { list-style: none; margin: 0; padding: 0; }

.widget_categories .cat-item { border-bottom: 1px solid rgba(0, 0, 0, .09); }
.widget_categories .cat-item:last-child { border-bottom: 0; }

.widget_categories .cat-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px 13px 0;
    position: relative;
    text-decoration: none;
    color: #17140f;
    font-weight: 600 !important;          /* satır içi stili yener */
    line-height: 1.4;
    transition: color .16s ease, padding-left .18s cubic-bezier(.3,.7,.4,1);
}

/* eski nokta ikonu gizlenir — HTML'den silmeye gerek yok */
.widget_categories .cat-item > a > i.fa { display: none; }

/* soldan dolan kırmızı çizgi */
.widget_categories .cat-item > a::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 2px;
    background: #de4736;
    transition: width .18s cubic-bezier(.3,.7,.4,1);
}

/* sağdaki ok — sınır tekniğiyle çizildi, rengi metinden alır */
.widget_categories .cat-item > a::after {
    content: "";
    position: absolute;
    right: 4px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: .28;
    transition: transform .18s ease, opacity .16s ease;
}

.widget_categories .cat-item > a:hover,
.widget_categories .cat-item > a:focus-visible {
    color: #de4736;
    padding-left: 22px;
}
.widget_categories .cat-item > a:hover::before,
.widget_categories .cat-item > a:focus-visible::before { width: 14px; }
.widget_categories .cat-item > a:hover::after,
.widget_categories .cat-item > a:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(3px) rotate(45deg);
}
.widget_categories .cat-item > a:focus-visible {
    outline: 2px solid #de4736;
    outline-offset: 3px;
}

/* bulunulan sayfa — sınıf JS ile eklenir (berpel-aktif-menu) */
.widget_categories .cat-item.berpel-acik > a {
    color: #de4736;
    padding-left: 22px;
}
.widget_categories .cat-item.berpel-acik > a::before { width: 14px; }
.widget_categories .cat-item.berpel-acik > a::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .widget_categories .cat-item > a,
    .widget_categories .cat-item > a::before,
    .widget_categories .cat-item > a::after { transition: none !important; }
}


/* ===============================================================
 * İLETİŞİM BÖLÜMÜ — 13 Eylül 2026 (Berpel)
 *
 * Önceki hali: adres (col-md-3) | harita (col-md-5) | form (col-md-4)
 * yan yana üç dar sütun. Harita iframe'inin satır içi stili
 * "height: 95vh; padding: 55px" olduğu için harita 527x855'lik
 * dar-uzun bir şeride dönüşüyordu.
 *
 * Yeni düzen: harita üstte geniş bir bant, altında adres + form.
 * HTML'e DOKUNULMADI — sütunlar CSS grid ile yeniden yerleştirildi.
 * Kapsam .iletisimSec ile sınırlı; tr/en/de üçünde de aynı yapı var.
 * =============================================================== */
@media (min-width: 768px) {
    .iletisimSec .container-fluid:has(> .col-md-5) {
        /* Bootstrap'in .d-flex sinifi "display:flex !important" tasiyor,
           bu yuzden grid'in de !important olmasi gerekiyor. */
        display: grid !important;
        height: auto !important;      /* h-100vh sinifini yener */
        min-height: 0;
        padding-top: 40px;
        padding-bottom: 56px;
        grid-template-columns: 1fr 1.1fr;
        gap: 34px 40px;
        align-items: start;
    }
    /* harita: tam genişlik, en üstte */
    .iletisimSec .container-fluid:has(> .col-md-5) > .col-md-5 {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: none;
        flex: none;
        padding: 0;
    }
    /* sutunlarin kendi d-flex'i grid hucresinde sorun cikarmasin */
    .iletisimSec .container-fluid:has(> .col-md-5) > [class*="col-md-"] {
        display: block !important;
        width: auto;
    }

    /* adres: sol alt */
    .iletisimSec .container-fluid:has(> .col-md-5) > .col-md-3 {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
        flex: none;
    }
    /* form: sağ alt */
    .iletisimSec .container-fluid:has(> .col-md-5) > .col-md-4 {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        flex: none;
    }
}

/* haritanın oranını düzelt — satır içi stili yener */
.iletisimSec iframe[src*="maps"] {
    height: 380px !important;
    min-height: 380px;
    padding: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    display: block;
    border-radius: 3px;
    filter: saturate(.9);
}
.iletisimSec .col-md-5 .card,
.iletisimSec .col-md-5 .js-transition-img__transformed-el {
    width: 100%;
    max-width: none;
}

/* adres sütunu: sağa dayalıydı, sola alındı.
   Bootstrap'in .text-right sinifi !important tasiyor, o yuzden
   burada da !important gerekiyor. */
.iletisimSec .col-md-3,
.iletisimSec .col-md-3 .card,
.iletisimSec .col-md-3 .text-right,
.iletisimSec .col-md-3 .text-right * { text-align: left !important; }
.iletisimSec .col-md-3 .figure-info__option {
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .62;
    margin-bottom: 2px;
}
.iletisimSec .col-md-3 .figure-info__value {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 18px;
}
.iletisimSec .col-md-3 .figure-info__value a {
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    transition: color .16s ease, border-color .16s ease;
}
.iletisimSec .col-md-3 .figure-info__value a:hover {
    color: #de4736;
    border-bottom-color: #de4736;
}
.iletisimSec .social { justify-content: flex-start; }

/* form kartı: beyaz zemin sayfada yüzer gibi duruyordu, çerçevelendi */
.iletisimSec .col-md-4 .card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 3px;
    padding: 26px 28px 30px;
}
.iletisimSec .col-md-4 .section-form { padding: 0; }
.iletisimSec .form.bg-white { background: transparent !important; }

/* form: ortalıydı, sola alındı ve nefes payı verildi */
.iletisimSec .col-md-4 .card,
.iletisimSec .section-form { text-align: left !important; }
.iletisimSec .form { padding: 0 !important; }
.iletisimSec .form__row + .form__row { margin-top: 4px; }

/* dar ekran: tek sütun, harita kısalır */
@media (max-width: 767px) {
    .iletisimSec iframe[src*="maps"] {
        height: 260px !important;
        min-height: 260px;
    }
    .iletisimSec .col-md-3,
    .iletisimSec .col-md-3 .card,
    .iletisimSec .col-md-4 .card { text-align: left !important; }
}


/* ===============================================================
 * ANASAYFA — İLETİŞİM BÖLÜMÜ  (footer üstü)
 * 13 Eylül 2026 (Berpel)
 *
 * Düzen: harita tam genişlikte zemin; adres + form kartı haritanın
 * ÜZERİNE biniyor, sola yaslı. Kart negatif üst boşlukla yukarı
 * çekiliyor — konumlandırma bağlamı gerektirmediği için akışı
 * bozmuyor ve mobilde tek sütuna doğal düşüyor.
 *
 * Renkler logodan: kırmızı #DE4736.
 * =============================================================== */

/* --- harita: zemin --- */
.map-containercst {
    box-sizing: border-box !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    /* iframe genisletilip kaydirilacagi icin tasan kismi kirp */
    overflow: hidden;
    border-radius: 16px;
    /* dört yana yayılan yumuşak gölge — kırpma yüzünden kap taşıyor */
    box-shadow:
        0 0 0 1px rgba(26,23,20,.04),
        0 2px 8px rgba(26,23,20,.06),
        0 12px 28px -8px rgba(26,23,20,.10),
        0 34px 70px -24px rgba(26,23,20,.22);
}
.map-containercst iframe {
    /* Google embed'i isaretciyi HER ZAMAN haritanin ortasina koyuyor ve
       yer kimligi yuzunden !2d/!3d ile merkez kaydirilamiyor. Cozum:
       iframe’i kaptan ~800px genis yapmak. Isaretci iframe'in ortasinda
       kaldigi icin ekranda saga kayiyor ve kartlarin sagindaki bosluga
       dusuyor; tasan kisim kap tarafindan kirpiliyor. */
    width: calc(100% + 560px) !important;
    /* main.css'te "img, iframe { max-width: 100% }" var; genisligi
       kirpiyordu. max-width kaldirilmadan calc ise yaramiyor. */
    max-width: none !important;
    /* Isaretci iframe'in TAM ORTASINDA duruyor. iframe 900px, gorunen
       alan 500px oldugu icin isaretci dikeyde %90'a, yani alt kenara
       yapisiyordu. Yukseklik kapla esitlenince isaretci %50'ye,
       genislik payi 800 -> 560 inince yatayda %84'ten %74'e geliyor —
       kartlarin (sag kenar %69) hemen saginda, kadrajin icinde. */
    height: 500px !important;
    display: block;
    border: 0 !important;
    border-radius: 0;
    filter: saturate(.92) contrast(1.02);
    box-shadow: none;
}

/* --- kart: haritanın üzerine biniyor, sola yaslı --- */
.content-containercst {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: -268px auto 0 !important;     /* olculerek ayarlandi: kart, 720px
        haritanin icinde ustte ~46px altta ~47px payla oturuyor */
    padding: 0 0 0 52px !important;
    display: grid !important;
    grid-template-columns: 374px 374px;
    gap: 18px;                             /* iki kart arasi bosluk */
    justify-content: start;
    pointer-events: none;                  /* harita gezinebilir kalsın */
}

/* iki kolon tek kartın içinde */
.address-sectioncst,
.form-sectioncst {
    pointer-events: auto;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;   /* dikey ortalama kapatildi:
        sol kolon ortalandigi icin basligi sagdakinden 76px asagidaydi */
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    color: #4a4340 !important;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
}
.address-sectioncst,
.form-sectioncst {
    grid-row: 1;
    padding: 26px 26px 24px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(26,23,20,.06), 0 26px 60px -32px rgba(26,23,20,.55) !important;
    width: 100% !important;
}
.address-sectioncst { grid-column: 1; }
.form-sectioncst    { grid-column: 2; }

/* --- başlıklar: iki kolonda birebir aynı --- */
.address-titlecst,
.form-titlecst {
    order: 1;
    display: flex !important;
    align-items: center;
    gap: 9px;
    justify-content: flex-start !important;
    width: 100%;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left !important;
    color: #8a817c !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    border: 0 !important;
}
.address-iconcst {
    width: 14px !important; height: 14px !important;
    color: #de4736 !important; flex: 0 0 auto;
}

/* --- sol kolon --- */
.address-detailscst {
    order: 2; width: 100%;
    text-align: left !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #17140f !important;
    font-weight: 600;
    letter-spacing: -.005em;
    margin: 0 0 14px !important;
    max-width: 30ch;
}
.contact-detailscst {
    order: 3; display: flex; flex-direction: column;
    width: 100%; align-items: stretch; margin: 0 !important;
}
.contact-itemcst {
    display: flex !important; align-items: center; gap: 11px;
    width: auto !important; padding: 7px 0; margin: 0 !important;
    border-top: 1px solid #f0eae6;
}
.contact-iconcst {
    width: 15px !important; height: 15px !important;
    color: #de4736 !important; flex: 0 0 auto;
}
.contact-itemcst a {
    color: #2c2724 !important; font-size: 13.5px; font-weight: 500;
    text-decoration: none; transition: color .16s ease;
}
.contact-itemcst a:hover { color: #de4736 !important; }

.address-sectioncst > p:first-of-type {
    order: 9; width: 100%;
    text-align: left !important;
    font-size: 12px !important; line-height: 1.55 !important;
    color: #9a918b !important;
    max-width: 42ch;
    margin: 13px 0 0 !important; padding: 0 !important;
}

/* --- form --- */
.form-sectioncst form { order: 2; width: 100%; }
.form-sectioncst .form__row { margin: 0 !important; }
.form-sectioncst .form__col { padding: 0 !important; }
.form-sectioncst label {
    display: block; font-size: 10.5px !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .1em;
    color: #9a918b !important; margin: 0 0 4px !important;
    line-height: 1.3 !important;
}
.form-sectioncst input[type="text"],
.form-sectioncst input[type="email"],
.form-sectioncst input[type="tel"],
.form-sectioncst textarea {
    width: 100%; font-size: 14.5px !important; color: #17140f !important;
    background: #fbf9f8 !important; border: 1px solid #e6ded8 !important;
    border-radius: 7px !important; padding: 7px 11px !important;
    margin-bottom: 8px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-sectioncst input::placeholder,
.form-sectioncst textarea::placeholder { color: #bcb2ac; }
.form-sectioncst input:focus,
.form-sectioncst textarea:focus {
    outline: none; background: #fff !important;
    border-color: #de4736 !important;
    box-shadow: 0 0 0 3px rgba(222,71,54,.13);
}
.form-sectioncst textarea {
    /* baska bir kural height:150px veriyor; min-height onu yenmiyor */
    height: 58px !important;
    min-height: 58px !important;
    resize: vertical;
}
.form-sectioncst button,
.form-sectioncst input[type="submit"],
.form-sectioncst .btn {
    align-self: stretch; width: 100% !important;
    background: #de4736 !important; border: 0 !important;
    border-radius: 8px !important; color: #fff !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    letter-spacing: .02em; padding: 10px 24px !important; margin: 2px 0 0 !important;
    cursor: pointer;
    transition: background-color .16s ease, transform .12s ease, box-shadow .16s ease;
    box-shadow: 0 2px 10px -3px rgba(222,71,54,.5);
}
.form-sectioncst button:hover,
.form-sectioncst input[type="submit"]:hover {
    background: #c23a28 !important;
    box-shadow: 0 6px 18px -4px rgba(222,71,54,.55);
}
.form-sectioncst button:active { transform: translateY(1px); }
.form-sectioncst button:focus-visible,
.form-sectioncst input[type="submit"]:focus-visible {
    outline: 2px solid #17140f; outline-offset: 3px;
}

/* --- dar ekran: kart bindirmeyi bırakır, alta iner --- */
@media (max-width: 1080px) {
    .map-containercst iframe { height: 380px !important; border-radius: 12px; }
    .content-containercst {
        margin: 22px auto 0 !important;
        padding: 0 20px !important;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    .address-sectioncst,
    .form-sectioncst {
        width: 100% !important;
        grid-column: 1; justify-self: stretch;
        padding: 28px 24px !important;
        border-radius: 14px !important;
        border-left: 0 !important;
    }
    .form-sectioncst { margin-top: 16px !important; }
    .address-sectioncst { grid-row: 1; }
    .form-sectioncst { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .form-sectioncst button, .form-sectioncst input,
    .form-sectioncst textarea, .contact-itemcst a { transition: none !important; }
}

/* ===============================================================
 * İLETİŞİM SAYFASI — ek düzeltmeler (13 Eylül 2026)
 * Harita yükseltildi ve çerçeveye alındı; metinler belirginleştirildi.
 * =============================================================== */
.iletisimSec iframe[src*="maps"] {
    height: 520px !important;
    min-height: 520px;
    border: 1px solid #e8e1dc !important;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26,23,20,.04), 0 18px 44px -26px rgba(26,23,20,.30);
}
.iletisimSec .col-md-3 .figure-info__option {
    color: #8a817c !important;
    opacity: 1;
    font-weight: 600;
}
.iletisimSec .col-md-3 .figure-info__value,
.iletisimSec .col-md-3 .figure-info__value a {
    color: #2c2724 !important;
    font-size: 15.5px !important;
    font-weight: 500;
}
.iletisimSec .col-md-3 .figure-info__value a:hover { color: #de4736 !important; }
.iletisimSec .col-md-4 .card {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26,23,20,.04), 0 14px 36px -24px rgba(26,23,20,.26);
}
@media (max-width: 860px) {
    .iletisimSec iframe[src*="maps"] { height: 320px !important; min-height: 320px; }
}