/* Pass Dijital — Sektör sayfası
   Marka rengi #2f2483, ikincil #d4cffa, vurgu #f2b804.
   NOT: Sitede .bgImage adlı dekoratif katman sayfanın arkasında duruyor.
   Bu yüzden her bölüme OPAK zemin verilir, yoksa altından geçer. */

/* ---------- Sektör şeridi (görselli) ---------- */
/* ---------- Başlık alanı ----------
   .breadcrumb sabit 170px yükseklikte; içine h1 girince üstteki boşluk
   sıkışıyordu. Yalnızca sektör sayfasına kapsandı (.sectorCrumb) —
   kategori sayfası da breadcrumb içinde h1 kullanıyor, ona dokunulmaz. */
.breadcrumb.sectorCrumb{
    height:auto;
    padding-top:58px;
    padding-bottom:24px;
}
.breadcrumb.sectorCrumb h1{
    margin-bottom:12px;
}
/* Aktif sektörün kısa açıklaması — başlığın altında, ortalanmış tek blok */
.breadcrumb.sectorCrumb .crumbDesc{
    max-width:720px;
    margin:0 auto 32px;
    text-align:center;
    font-size:16px; line-height:1.7; color:#6E6E6E;
}
/* Uygulama örneklerine çapa. Buton varsa açıklamanın alt boşluğu kısalır. */
.breadcrumb.sectorCrumb .crumbDesc:has(+ .crumbJumpWrap){ margin-bottom:18px; }
.breadcrumb.sectorCrumb .crumbJumpWrap{ text-align:center; margin:0 0 30px; }
.breadcrumb.sectorCrumb .crumbJump{
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 22px;
    background:#FFFFFF;
    /* #D9D5EC breadcrumb'ın #F8F8F8 zemininde 1.35:1 kalıyordu; UI
       bileşen sınırı için eşik 3:1. Buton beyaz zeminli olduğu için
       kenarlık tek ayırt edici, o yüzden koyulaştırıldı. */
    border:1px solid #7E74B4;
    border-radius:10px;
    color:#2f2483;
    font-size:14.5px; font-weight:600;
    transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.breadcrumb.sectorCrumb .crumbJump:hover{
    background:#2f2483; border-color:#2f2483; color:#FFFFFF;
    box-shadow:0 10px 22px rgba(47,36,131,.22);
}
.breadcrumb.sectorCrumb .crumbJump i{
    display:flex; font-size:14px;
    animation:appJumpOk 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
    .breadcrumb.sectorCrumb .crumbJump i{ animation:none; }
}
@media (max-width:1120px){
    .breadcrumb.sectorCrumb{ padding-top:42px; padding-bottom:18px; }
    .breadcrumb.sectorCrumb h1{ margin-bottom:10px; }
    .breadcrumb.sectorCrumb .crumbDesc{ margin-bottom:24px; font-size:15px; }
    .breadcrumb.sectorCrumb .crumbJumpWrap{ margin-bottom:24px; }
}
@media (max-width:575px){
    .breadcrumb.sectorCrumb{ padding-top:30px; padding-bottom:14px; }
    .breadcrumb.sectorCrumb h1{ margin-bottom:8px; }
    .breadcrumb.sectorCrumb .crumbDesc{ margin-bottom:18px; font-size:14.5px; line-height:1.6; }
    .breadcrumb.sectorCrumb .crumbJumpWrap{ margin-bottom:18px; }
    .breadcrumb.sectorCrumb .crumbJump{ padding:10px 18px; font-size:13.5px; }
}

/* ---------- Sektör şeridi ----------
   Dikey kart: üstte tam genişlikte dikdörtgen görsel, altında ad ve kısa
   kart metni, sağ altta yuvarlak ok. Pasifler zeminsiz durur, aralarını
   ince dikey çizgiler ayırır; aktif sektör dolu mor kart olur. */
.sectorNav{
    background:
        radial-gradient(820px 380px at 94% 10%, rgba(242,184,4,.10) 0%, rgba(242,184,4,0) 58%),
        linear-gradient(180deg,#FCFBF9 0%,#FDFDFC 55%,#FFFFFF 100%);
    border-top:1px solid #E8E6E2;
    border-bottom:1px solid #EFEFEF;
}
.sectorNav ul{
    display:flex; list-style:none; align-items:stretch;
    margin:0 -16px; padding:26px 16px 30px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sectorNav ul::-webkit-scrollbar{ display:none; }

.sectorNav li{
    flex:1 1 0; min-width:206px;
    border-right:1px solid #E9E7E3;
    display:flex;
    padding:0 8px;
}
.sectorNav li:last-child{ border-right:none; }
.sectorNav li.active{ border-right-color:transparent; }
.sectorNav li:has(+ li.active){ border-right-color:transparent; }

.sectorNav a{
    position:relative;
    display:flex; flex-direction:column; align-items:stretch;
    flex:1 1 auto; min-width:0;
    padding:0 0 44px;
    border-radius:14px; background:transparent;
    overflow:hidden;
    transition:background .3s ease, box-shadow .3s ease;
}

/* Görsel — kartın üstünde, boya sıçraması maskesiyle.

   Maske satır içi SVG (data URI). Form yarıçap tabanlı DEĞİL, çevre
   tabanlı kurulur: şekil dikdörtgenin kenarını izler ve içeri yalnızca
   ekranda ~10px karşılığı kadar girer (viewBox'ta yatay ~14, dikey ~18
   birim). Kaplama %90 civarı — fotoğrafın neredeyse tamamı görünür,
   yalnızca kenarlar düzensizleşir.

   Yarıçap tabanlı ilk sürüm merkezden ölçtüğü için köşeleri boşaltıyor
   ve görselin büyük kısmını yiyordu.

   ÜÇ AYRI FORM dönüşümlü kullanılır (nth-child 3n+1/2/3): altı kartta aynı
   silueti tekrarlamak mekanik duruyordu, gerçek sıçramalar hiç aynı olmaz.

   viewBox 340x200, kartın görsel oranıyla aynı; böylece form esnemez.
   Geri almak için maske bildirimlerini kaldırmak yeterli. */
.sectorNav .ph{
    flex:0 0 auto; width:100%; height:112px;
    overflow:hidden; background:#F1EFEB;
    display:flex; align-items:center; justify-content:center;
    -webkit-mask-size:100% 100%;
            mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-position:center;
            mask-position:center;
    transition:-webkit-mask-size .5s ease, mask-size .5s ease;
}
.sectorNav li:nth-child(3n+1) .ph{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,16.1 C5.7,10.4 36.9,3.3 48.6,2.7 C60.2,2.1 85.5,11.3 97.1,11.1 C108.8,10.9 134.1,1.2 145.7,0.9 C157.4,0.6 182.6,8.2 194.3,8.6 C205.9,8.9 231.2,3.4 242.9,3.9 C254.5,4.5 279.8,13.7 291.4,13.4 C303.1,13.1 334.4,-2.6 340.0,1.8 C345.6,6.2 339.2,38.2 338.3,50.0 C337.4,61.8 332.3,88.0 332.2,100.0 C332.1,112.0 337.7,138.0 337.2,150.0 C336.7,162.0 333.4,195.5 328.0,200.0 C322.5,204.5 301.6,187.7 291.4,187.5 C281.2,187.3 254.5,198.2 242.9,198.6 C231.2,199.0 205.9,191.1 194.3,190.7 C182.6,190.3 157.4,195.3 145.7,195.0 C134.1,194.7 108.8,187.9 97.1,188.2 C85.5,188.6 60.2,198.2 48.6,197.9 C36.9,197.6 5.5,191.5 0.0,185.7 C-5.5,180.0 1.3,160.3 2.5,150.0 C3.8,139.7 10.3,112.0 10.2,100.0 C10.1,88.0 2.6,60.1 1.4,50.0 C0.2,39.9 -5.7,21.8 0.0,16.1 Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,16.1 C5.7,10.4 36.9,3.3 48.6,2.7 C60.2,2.1 85.5,11.3 97.1,11.1 C108.8,10.9 134.1,1.2 145.7,0.9 C157.4,0.6 182.6,8.2 194.3,8.6 C205.9,8.9 231.2,3.4 242.9,3.9 C254.5,4.5 279.8,13.7 291.4,13.4 C303.1,13.1 334.4,-2.6 340.0,1.8 C345.6,6.2 339.2,38.2 338.3,50.0 C337.4,61.8 332.3,88.0 332.2,100.0 C332.1,112.0 337.7,138.0 337.2,150.0 C336.7,162.0 333.4,195.5 328.0,200.0 C322.5,204.5 301.6,187.7 291.4,187.5 C281.2,187.3 254.5,198.2 242.9,198.6 C231.2,199.0 205.9,191.1 194.3,190.7 C182.6,190.3 157.4,195.3 145.7,195.0 C134.1,194.7 108.8,187.9 97.1,188.2 C85.5,188.6 60.2,198.2 48.6,197.9 C36.9,197.6 5.5,191.5 0.0,185.7 C-5.5,180.0 1.3,160.3 2.5,150.0 C3.8,139.7 10.3,112.0 10.2,100.0 C10.1,88.0 2.6,60.1 1.4,50.0 C0.2,39.9 -5.7,21.8 0.0,16.1 Z'/%3E%3C/svg%3E");
}
.sectorNav li:nth-child(3n+2) .ph{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,4.5 C4.6,0.0 36.9,13.2 48.6,12.9 C60.2,12.5 85.5,2.1 97.1,1.8 C108.8,1.5 134.1,10.2 145.7,10.4 C157.4,10.5 182.6,2.7 194.3,3.2 C205.9,3.7 231.2,14.0 242.9,14.3 C254.5,14.6 279.8,6.0 291.4,5.7 C303.1,5.4 335.2,6.3 340.0,11.6 C344.8,16.9 331.6,39.4 331.2,50.0 C330.8,60.6 336.9,88.0 336.6,100.0 C336.3,112.0 328.7,138.0 328.9,150.0 C329.2,162.0 343.1,194.3 338.6,200.0 C334.1,205.7 302.9,199.0 291.4,197.9 C279.9,196.7 254.5,190.4 242.9,190.2 C231.2,190.0 205.9,196.5 194.3,196.1 C182.6,195.7 157.4,186.5 145.7,186.8 C134.1,187.1 108.8,198.3 97.1,198.6 C85.5,198.9 60.2,189.8 48.6,189.3 C36.9,188.8 4.7,199.4 0.0,194.6 C-4.7,189.9 9.1,161.4 9.3,150.0 C9.6,138.6 1.8,112.0 2.0,100.0 C2.1,88.0 10.9,61.5 10.6,50.0 C10.4,38.5 -4.6,8.9 0.0,4.5 Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,4.5 C4.6,0.0 36.9,13.2 48.6,12.9 C60.2,12.5 85.5,2.1 97.1,1.8 C108.8,1.5 134.1,10.2 145.7,10.4 C157.4,10.5 182.6,2.7 194.3,3.2 C205.9,3.7 231.2,14.0 242.9,14.3 C254.5,14.6 279.8,6.0 291.4,5.7 C303.1,5.4 335.2,6.3 340.0,11.6 C344.8,16.9 331.6,39.4 331.2,50.0 C330.8,60.6 336.9,88.0 336.6,100.0 C336.3,112.0 328.7,138.0 328.9,150.0 C329.2,162.0 343.1,194.3 338.6,200.0 C334.1,205.7 302.9,199.0 291.4,197.9 C279.9,196.7 254.5,190.4 242.9,190.2 C231.2,190.0 205.9,196.5 194.3,196.1 C182.6,195.7 157.4,186.5 145.7,186.8 C134.1,187.1 108.8,198.3 97.1,198.6 C85.5,198.9 60.2,189.8 48.6,189.3 C36.9,188.8 4.7,199.4 0.0,194.6 C-4.7,189.9 9.1,161.4 9.3,150.0 C9.6,138.6 1.8,112.0 2.0,100.0 C2.1,88.0 10.9,61.5 10.6,50.0 C10.4,38.5 -4.6,8.9 0.0,4.5 Z'/%3E%3C/svg%3E");
}
.sectorNav li:nth-child(3n) .ph{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,10.7 C5.5,4.9 36.9,1.0 48.6,1.4 C60.2,1.8 85.5,13.6 97.1,13.9 C108.8,14.3 134.1,4.5 145.7,4.3 C157.4,4.0 182.6,12.0 194.3,11.8 C205.9,11.5 231.2,2.4 242.9,2.1 C254.5,1.8 279.8,8.0 291.4,9.3 C303.1,10.5 335.5,7.6 340.0,12.5 C344.5,17.4 328.9,39.5 328.7,50.0 C328.4,60.5 337.6,88.0 338.0,100.0 C338.4,112.0 331.9,138.0 331.8,150.0 C331.6,162.0 341.7,195.2 336.9,200.0 C332.0,204.8 302.7,190.2 291.4,189.6 C280.1,189.1 254.5,195.7 242.9,195.4 C231.2,195.1 205.9,186.9 194.3,187.1 C182.6,187.4 157.4,197.3 145.7,197.5 C134.1,197.7 108.8,188.9 97.1,188.6 C85.5,188.2 60.2,194.4 48.6,194.6 C36.9,194.8 5.6,195.5 0.0,190.2 C-5.6,184.8 0.6,160.8 1.7,150.0 C2.8,139.2 8.6,112.0 8.8,100.0 C8.9,88.0 3.9,60.7 2.8,50.0 C1.8,39.3 -5.5,16.5 0.0,10.7 Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0.0,10.7 C5.5,4.9 36.9,1.0 48.6,1.4 C60.2,1.8 85.5,13.6 97.1,13.9 C108.8,14.3 134.1,4.5 145.7,4.3 C157.4,4.0 182.6,12.0 194.3,11.8 C205.9,11.5 231.2,2.4 242.9,2.1 C254.5,1.8 279.8,8.0 291.4,9.3 C303.1,10.5 335.5,7.6 340.0,12.5 C344.5,17.4 328.9,39.5 328.7,50.0 C328.4,60.5 337.6,88.0 338.0,100.0 C338.4,112.0 331.9,138.0 331.8,150.0 C331.6,162.0 341.7,195.2 336.9,200.0 C332.0,204.8 302.7,190.2 291.4,189.6 C280.1,189.1 254.5,195.7 242.9,195.4 C231.2,195.1 205.9,186.9 194.3,187.1 C182.6,187.4 157.4,197.3 145.7,197.5 C134.1,197.7 108.8,188.9 97.1,188.6 C85.5,188.2 60.2,194.4 48.6,194.6 C36.9,194.8 5.6,195.5 0.0,190.2 C-5.6,184.8 0.6,160.8 1.7,150.0 C2.8,139.2 8.6,112.0 8.8,100.0 C8.9,88.0 3.9,60.7 2.8,50.0 C1.8,39.3 -5.5,16.5 0.0,10.7 Z'/%3E%3C/svg%3E");
}
/* Hover'da sıçrama hafifçe genişler — ıslak boya hissi.
   %103 bilinçli: şekil zaten kenara değdiği için daha fazla büyütmek
   ısırıkları tamamen kapatıp maskeyi düz dikdörtgene çeviriyor. */
.sectorNav a:hover .ph{
    -webkit-mask-size:103% 103%;
            mask-size:103% 103%;
}
.sectorNav .ph img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .45s ease;
}
.sectorNav .ph em{
    font-style:normal; font-weight:700; color:#2f2483; font-size:38px;
}

.sectorNav .tx{ min-width:0; padding:14px 16px 0; }
.sectorNav .nm{
    display:block;
    font-size:17px; font-weight:700; color:#1F1B3D; line-height:1.25;
    transition:color .3s ease;
}
.sectorNav .ds{
    display:block; margin-top:6px;
    font-size:13.5px; line-height:1.5; color:#6E6A75;
    transition:color .3s ease;
}

/* sağ alttaki yuvarlak ok */
.sectorNav .go{
    position:absolute; right:14px; bottom:12px;
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    border:1px solid #DEDCD7; color:#8C8A96; font-size:13px;
    transition:all .3s ease;
}
.sectorNav .go i{ display:block; }

/* hover */
.sectorNav li:not(.active) a:hover{
    background:#FFFFFF;
    box-shadow:0 10px 24px rgba(23,17,68,.10);
}
.sectorNav a:hover .ph img{ transform:scale(1.06); }
.sectorNav li:not(.active) a:hover .nm{ color:#2f2483; }
.sectorNav li:not(.active) a:hover .go{ border-color:#2f2483; color:#2f2483; }

/* aktif */
.sectorNav li.active a{
    background:#2f2483;
    box-shadow:0 14px 30px rgba(47,36,131,.24);
}
.sectorNav li.active .ph{ background:#241b66; }
.sectorNav li.active .nm{ color:#fff; padding-bottom:5px; }
.sectorNav li.active .ds{ color:rgba(255,255,255,.80); }
.sectorNav li.active .go{
    background:#FFFFFF; border-color:#FFFFFF; color:#2f2483;
}

.sectorNav a:focus-visible{ outline:2px solid #2f2483; outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
    .sectorNav .ph{ transition:none; }
    .sectorNav a:hover .ph{ -webkit-mask-size:100% 100%; mask-size:100% 100%; }
    .sectorNav a:hover .ph img{ transform:none; }
}

@media (max-width:1199px){
    .sectorNav li{ min-width:196px; }
    .sectorNav a{ padding:0 0 40px; }
    .sectorNav .ph{ height:100px; }
    .sectorNav .tx{ padding:12px 14px 0; }
    .sectorNav .nm{ font-size:16px; }
    .sectorNav .ds{ font-size:13px; }
}
@media (max-width:991px){
    .sectorNav ul{ margin:0 -12px; padding:20px 12px 24px; }
    .sectorNav li{ min-width:196px; }
}
/* --- Mobil: yalnızca düz görsel + başlık ---
   Dar ekranda kart içine sığdırılan açıklama ve ok, 150-180px genişlikte
   sıkışık duruyordu. Maske de bu ölçekte okunmuyor: 10px'lik ısırıklar
   88px yüksekliğinde kirli bir kenar gibi görünüyor. Üçü de kaldırıldı. */
@media (max-width:767px){
    .sectorNav ul{ margin:0 -10px; padding:16px 10px 20px; }
    .sectorNav li{ min-width:150px; border-right:none; padding:0 4px; }
    .sectorNav a{ padding:0 0 12px; border-radius:12px; }
    .sectorNav .ph{ height:112px; }
    /* Maskeyi kapatan kural, temel kuralla AYNI özgüllükte olmalı:
       .sectorNav li:nth-child(3n+1) .ph = (0,3,1); sade .sectorNav .ph
       (0,2,0) kaybediyordu ve maske mobilde açık kalıyordu. */
    .sectorNav li:nth-child(3n+1) .ph,
    .sectorNav li:nth-child(3n+2) .ph,
    .sectorNav li:nth-child(3n) .ph{
        -webkit-mask-image:none;
                mask-image:none;
    }
    .sectorNav a:hover .ph{
        -webkit-mask-size:100% 100%;
                mask-size:100% 100%;
    }
    /* Görsel üstte kenardan kenara yayılır, başlık ortalanır. */
    .sectorNav .tx{ padding:12px 10px 0; text-align:center; }
    .sectorNav .nm{ font-size:15px; line-height:1.35; }
    .sectorNav .ds{ display:none; }
    .sectorNav .go{ display:none; }
    /* Efekt yok: dar ekranda hover zaten dokunmatikte tetiklenmiyor,
       tetiklendiğinde de görsel oynaması dikkat dağıtıyor. */
    .sectorNav a:hover .ph img{ transform:none; }
}
@media (max-width:575px){
    .sectorNav ul{ padding:14px 10px 18px; }
    .sectorNav li{ min-width:136px; padding:0 3px; }
    .sectorNav a{ padding:0 0 11px; }
    .sectorNav .ph{ height:102px; }
    .sectorNav .tx{ padding:10px 8px 0; }
    .sectorNav .nm{ font-size:14px; }
}

/* ---------- Hero ---------- */
.sectorHero{
    position:relative; background-size:cover; background-position:center;
    background-repeat:no-repeat; overflow:hidden;
}
.sectorHero.noImg{ background:#2f2483; }
/* Metin okunurluğu için soldan sağa açılan perde.
   Renk, şeritteki aktif sektör butonuyla aynı: #2f2483 = rgb(47,36,131) */
.sectorHero .ov{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg,
        rgba(47,36,131,.97) 0%,
        rgba(47,36,131,.92) 34%,
        rgba(47,36,131,.62) 64%,
        rgba(47,36,131,.28) 100%);
}
/* İnce tutuldu: şerit zaten sektörü tanıtıyor, hero yalnızca başlığı
   taşıyor. Eskiden 330px + 52px dolguyla ekranın yarısını kaplıyordu. */
.sectorHero > .container{
    position:relative; z-index:2;
    min-height:150px; display:flex; align-items:center; justify-content:space-between; gap:32px;
    padding-top:26px; padding-bottom:26px;
}
.sectorHero .in{ max-width:620px; }
.sectorHero .tag{
    display:inline-block; margin-bottom:11px; padding:5px 11px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
}
.sectorHero h1{
    font-size:31px; font-weight:700; color:#fff; margin:0; line-height:1.2;
}
.sectorHero .appJump{
    display:inline-flex; align-items:center; gap:9px; margin-top:16px;
    padding:10px 20px; background:#f2b804; border:1px solid #f2b804;
    color:#171144; font-size:15px; font-weight:700;
    transition:background .25s ease, color .25s ease;
}
.sectorHero .appJump:hover{ background:#fff; border-color:#fff; color:#2f2483; }
.sectorHero .appJump i{ display:flex; animation:appJumpOk 1.6s ease-in-out infinite; }
@keyframes appJumpOk{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(5px); }
}
@media (prefers-reduced-motion:reduce){ .sectorHero .appJump i{ animation:none; } }

/* Köşedeki ürün sayacı */
.sectorHero .cnt{
    flex:0 0 auto; text-align:center; padding:14px 22px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(3px);
}
.sectorHero .cnt strong{
    display:block; font-size:30px; font-weight:700; color:#fff; line-height:1;
}
.sectorHero .cnt span{
    display:block; margin-top:5px; font-size:12px; font-weight:500;
    color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.6px;
}

/* ---------- Uygulama örnekleri ---------- */
.sectorApps{ background:#f6f6f6; padding:66px 0; scroll-margin-top:20px; }
.sectorApps .secTitle{ text-align:center; margin-bottom:38px; }
.sectorApps .secTitle h2{
    font-size:27px; font-weight:700; color:#2f2483; margin:0;
    position:relative; display:inline-block; padding-bottom:14px;
}
.sectorApps .secTitle h2::after{
    content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:48px; height:3px; background:#f2b804;
}
.appCard{
    background:#fff; border:1px solid #efefef; overflow:hidden; height:100%;
    transition:box-shadow .3s ease, transform .3s ease;
}
.appCard:hover{ transform:translateY(-6px); box-shadow:0 16px 12px rgba(0,0,0,.1); }
.appCard .img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#efefef; }
.appCard .img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.appCard:hover .img img{ transform:scale(1.06); }
.appCard .txt{ padding:18px 20px; }
.appCard .txt h3{ font-size:16.5px; font-weight:600; color:#000; margin:0; line-height:1.45; }

/* ---------- Uzun SEO metni ----------
   .textEditor varsayılanı blog gövdesi için ölçeklenmiş (h2 32px, h3 28px).
   Sektör ve kategori metinleri destekleyici içerik olduğu için daha küçük
   ve daha sık satırlı bir ölçek kullanılır. */
.sectorText{ background:#fff; padding:56px 0 74px; }
.sectorEmpty{ padding:60px 0; text-align:center; color:#8f8f8f; font-size:16px; }

@media (max-width:991px){
    .sectorHero > .container{ min-height:auto; flex-direction:column; align-items:flex-start; gap:26px; padding-top:38px; padding-bottom:38px; }
    .sectorHero h1{ font-size:31px; }
    .sectorHero p{ font-size:15.5px; }
    .sectorHero .cnt{ padding:18px 24px; }
    .sectorHero .cnt strong{ font-size:34px; }
    .insidePage.sectorProducts{ padding:40px 0 46px; }
    .sectorApps{ padding:46px 0; }
    .sectorText{ padding:40px 0 52px; }
}
@media (max-width:575px){
    .sectorHero h1{ font-size:26px; }
    .sectorHero .tag{ font-size:11.5px; }
}

/* ---------- Anasayfa sektörel çözümler ----------
   Her ekranda Swiper carousel (sonsuz döngü). Kartlar KÖŞELİ:
   site genelindeki .mediaCard dili (1px #EFEFEF, radius yok) */
.homeSectors{ padding:58px 0 62px; background:#f6f6f6; }
.homeSectors .secHead{ text-align:center; margin-bottom:34px; }
.homeSectors .secHead h2{
    font-size:26px; font-weight:700; color:#2f2483; margin:0 0 12px;
    position:relative; display:inline-block; padding-bottom:14px;
}
.homeSectors .secHead h2::after{
    content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:48px; height:3px; background:#f2b804;
}
.homeSectors .secHead p{
    font-size:15.5px; color:#6e6e6e; margin:0 auto; max-width:720px; line-height:1.65;
}

/* Gölge aşağı 70px uzanıyor (45px kayma + 25px bulanıklık) ve scale(1.05)
   kartı ~10px büyütüyor. Swiper .swiper'a overflow:hidden verdiği için
   ALT tarafta iç boşluk açılır, negatif marjla yerleşim geri çekilir.
   YATAY boşluk verilmez — verilirse görünür alan konteyner dışına taşar
   ve komşu slayt sağdan sızar. */
.sectorSwiper{ padding:10px 0 48px; margin:-10px 0 -32px; }
.sectorSwiper .swiper-wrapper{ align-items:stretch; }
/* Kart slaytın içinde 14px içeride durur -> kartlar arası 28px boşluk.
   Hover'da scale YERİNE translateY kullanılır: dikey hareket yatay yer
   tüketmediği için kenarda 14px'in tamamı gölgeye kalır. Gölge bulanıklığı
   12px seçildi (12 < 14), böylece kırpma sınırına değmez. */
.sectorSwiper .swiper-slide{ height:auto; display:flex; padding:0 14px; }

/* Gezinme okları — carousel'in ALTINDA, ortalanmış.
   Swiper .swiper üzerinde overflow:hidden uyguladığı için oklar
   kart alanının dışına konumlandırılamıyordu; bu yüzden aşağı alındı. */
.sectorNavRow{
    display:flex; justify-content:center; gap:10px; margin-top:26px;
    /* Swiper konumlanmış eleman olduğu ve negatif marjla buraya taştığı
       için ok satırı üste alınmazsa tıklamalar yutuluyor. */
    position:relative; z-index:6;
}
.sectorNavRow .sec-nav{
    width:56px; height:56px; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid #efefef; color:#2f2483;
    cursor:pointer; transition:all .25s ease; padding:0;
    font-size:24px; line-height:1;
}
.sectorNavRow .sec-nav i{ display:block; }
.sectorNavRow .sec-nav:hover{ background:#2f2483; border-color:#2f2483; color:#fff; }
.sectorNavRow .sec-nav:focus-visible{ outline:2px solid #2f2483; outline-offset:2px; }

.sectorCard{
    display:flex; flex-direction:column; width:100%;
    background:#fff; border:1px solid #efefef;
    box-shadow:0 0 0 rgba(0,0,0,.1); transform:translateY(0);
    transition:all .3s;
}
/* Hover: mevcut homeProduct slaytlarıyla BİREBİR aynı davranış */
.sectorCard:hover{
    box-shadow:0 16px 12px rgba(0,0,0,.1);
    transform:translateY(-8px);
    position:relative;
    z-index:1;
}

.sectorCard .ph{ display:block; aspect-ratio:16/9; overflow:hidden; background:#2f2483; }
.sectorCard .ph img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.sectorCard .ph em{
    display:flex; align-items:center; justify-content:center; height:100%;
    font-style:normal; font-size:52px; font-weight:700; color:#d4cffa;
}

.sectorCard .cap{
    display:flex; flex-direction:column; flex:1 1 auto; padding:24px 24px 22px; gap:10px;
}
.sectorCard .cap strong{
    font-size:20px; font-weight:700; color:#000; line-height:1.3; transition:color .25s ease;
}
.sectorCard:hover .cap strong{ color:#2f2483; }
/* Kart büyüdüğü için metin KIRPILMAZ, tamamı görünür */
.sectorCard .cap small{
    font-size:15px; line-height:1.65; color:#6e6e6e; flex:1 1 auto;
}
.sectorCard .cap .go{
    display:inline-flex; align-items:center; gap:6px; margin-top:6px;
    font-style:normal; font-size:14.5px; font-weight:600; color:#2f2483;
}
.sectorCard .cap .go svg{ transition:transform .25s ease; }
.sectorCard:hover .cap .go svg{ transform:translateX(4px); }

@media (max-width:767px){
    .homeSectors{ padding:40px 0 46px; }
    .homeSectors .secHead{ margin-bottom:26px; }
    .homeSectors .secHead h2{ font-size:21px; }
    .homeSectors .secHead p{ font-size:14.5px; }
    .sectorNavRow{ margin-top:20px; }
    .sectorCard .cap{ padding:20px 20px 19px; }
    .sectorCard .cap strong{ font-size:18px; }
}