/*
 * Anasayfa modüllerinin panel ayarları (views/web/home/modules/*, sınıf .hm): başlık hizası, kolon sayısı,
 * renk değişkenleri, Yazı & Resim mobil görseli. Temanın modül stilleri main.css'tedir (marka dalına göre değişir);
 * buradaki kurallar yalnız .hm ile işaretli bölümlere uygulanır ve main.css'teki aynı özgüllükteki kuralları
 * sonra yüklendiği için ezer.
 */

/* ---------- Başlık hizası (hm-align-left | center | right) ---------- */
.hm.hm-align-left .section-header {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

.hm.hm-align-right .section-header {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

.hm.hm-align-left .section-header h2::after {
    margin-left: 0;
    margin-right: auto;
}

.hm.hm-align-right .section-header h2::after {
    margin-left: auto;
    margin-right: 0;
}

.hm.hm-no-divider .section-header h2::after {
    display: none;
}

.home-portfolio.hm-align-left .portfolio-content .view-all-link,
.home-blog.hm-align-left .blog-content .blog-footer {
    text-align: left;
}

.home-portfolio.hm-align-right .portfolio-content .view-all-link,
.home-blog.hm-align-right .blog-content .blog-footer {
    text-align: right;
}

/* ---------- Kart / logo şeridi ---------- */
.home-portfolio.hm div.portfolio-item {
    cursor: default;
}

/* Görselin kendi ölçüsü (ImageFit = natural): kart görselin oranını alır, en fazla görselin kendi genişliğinde
   olur (--hm-w, mobilde --hm-w-m); temanın 350 px sabit yüksekliği, cover kırpması, yuvarlak köşesi ve gölgesi
   kalkar — görsel yüklendiği gibi görünür (köşe yuvarlatması görselin kendi çerçevesini kesiyordu). */
.home-portfolio.hm-fit-natural .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
}

.home-portfolio.hm-fit-natural .portfolio-content .portfolio-slider .portfolio-item {
    width: 100%;
    max-width: var(--hm-w, 100%);
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-portfolio.hm-fit-natural .portfolio-content .portfolio-slider .portfolio-item img {
    display: block;
    height: auto;
    object-fit: fill;
}

/* Yakınlaştırma görselin kenarlarını keserdi; bağlantılı kart hafifçe yükselir */
.home-portfolio.hm-fit-natural .portfolio-content .portfolio-slider .portfolio-item:hover img {
    transform: none;
}

.home-portfolio.hm-fit-natural .portfolio-content .portfolio-slider a.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

@media only screen and (max-width: 768px) {
    .home-portfolio.hm-fit-natural .portfolio-content .portfolio-slider .portfolio-item {
        max-width: var(--hm-w-m, var(--hm-w, 100%));
    }
}

/* Logo şeridi (hm-marquee): CSS ile sürekli kayar; iz iki özdeş diziden oluşur, yarısı kadar kayınca başa sarar.
   Her logo bir yuva kaplar: ekranda aynı anda PerView kadar (varsayılan 4; tablette --hm-per-t, telefonda --hm-per-m).
   Yuva genişliği = (şerit genişliği - aralıklar) / adet; şerit genişliği (--hm-box) home-modules.js'te ölçülür, betik
   yoksa ekran genişliği. Görselin kendi ölçüsünde logo yuvadan darsa büyütülmez, ortalanır; is-theme: temanın 35 px
   yüksekliğinde gri logoları. Süre sunucuda tahmin edilir, betik gerçek genişlikten düzeltir. Üzerine gelince durur. */
.hm-marquee {
    --hm-gap: 40px;
    --hm-per: var(--hm-per-d, 4);
    --hm-box: 100vw;
    position: relative;
    overflow: hidden;
}

.hm-boxed .hm-marquee {
    --hm-box: min(1170px, calc(100vw - 30px));
}

@media (max-width: 991px) {
    .hm-marquee {
        --hm-per: var(--hm-per-t, 3);
    }
}

@media (max-width: 767px) {
    .hm-marquee {
        --hm-per: var(--hm-per-m, 2);
        --hm-gap: 20px;
    }
}

.hm-marquee::before,
.hm-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 80px;
    pointer-events: none;
}

.hm-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--hm-bg, #fff), transparent);
}

.hm-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--hm-bg, #fff), transparent);
}

.hm-marquee-track {
    display: flex;
    width: max-content;
    animation: hm-marquee var(--hm-marquee-duration, 60s) linear infinite;
}

.hm-marquee:hover .hm-marquee-track,
.hm-marquee:focus-within .hm-marquee-track {
    animation-play-state: paused;
}

.hm-marquee-set {
    display: flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc((var(--hm-box) - (var(--hm-per) - 1) * var(--hm-gap)) / var(--hm-per));
    margin-right: var(--hm-gap);
}

.hm-logo a {
    display: block;
    max-width: 100%;
    transition: opacity 0.3s ease;
}

.hm-logo a:hover {
    opacity: 0.85;
}

.hm-logo img {
    display: block;
    width: var(--hm-w, auto);
    max-width: 100%;
    height: auto;
}

/* Temanın ölçüsü: 35 px yükseklikte, gri ve soluk; üzerine gelince renkli (oran korunur, ezilmez) */
.hm-marquee.is-theme .hm-logo img {
    width: auto;
    height: 35px;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.hm-marquee.is-theme .hm-logo:hover img {
    opacity: 1;
    filter: none;
}

@keyframes hm-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media only screen and (max-width: 767px) {
    .hm-marquee::before,
    .hm-marquee::after {
        width: 24px;
    }

    .hm-logo img {
        width: var(--hm-w-m, var(--hm-w, auto));
    }
}

/* Hareket azaltılmışsa kaymaz; elle kaydırılır */
@media (prefers-reduced-motion: reduce) {
    .hm-marquee {
        overflow-x: auto;
    }

    .hm-marquee-track {
        animation: none;
    }

    .hm-marquee-set[aria-hidden="true"] {
        display: none;
    }
}

/* Logo şeridi bölüm başlığı ya da butonla (home-portfolio içinde): şerit tam genişlik, çerçevesiz */
.home-portfolio.hm-logos .logo-slider-area {
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.home-portfolio.hm-logos .portfolio-content .view-all-link {
    margin-top: 40px;
}

/* ---------- Yazı & Resim ---------- */
.home-about.hm-image-right .about-content {
    flex-direction: row-reverse;
}

.home-about.hm .about-text {
    flex: 1;
    min-width: 0;
}

.home-about.hm-align-left .about-text { text-align: left; }
.home-about.hm-align-center .about-text { text-align: center; }
.home-about.hm-align-right .about-text { text-align: right; }

.home-about.hm .about-text .hm-tag {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Metin rengi paragraflara da geçsin (main.css paragrafı #555 yapıyordu, panel rengi etkisizdi) */
.home-about.hm .about-text .hm-rich p,
.home-about.hm .about-text .hm-rich li {
    color: inherit;
}

.home-about.hm .about-text .hm-rich {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    /* Mobilde görsel metnin üstünde (eskiden mobilde hiç gösterilmiyordu) */
    .home-about.hm .about-content {
        flex-direction: column;
        gap: 28px;
    }

    .home-about.hm .about-img {
        display: block;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .home-about.hm .about-img img {
        box-shadow: 10px 10px 0 var(--color-secondary);
    }
}

/* ---------- Yazı & Resim — yarım ekran (Layout = split) ----------
   Görsel ekranın yarısını (52%) boydan boya kaplar; metin sütunu container'ın diğer yarısında, görselin başladığı
   yerden 56 px önce biter: genişlik = min(585px - 2vw, 48vw - 15px) - 56px (container 1200 px + 15 px iç boşluk).
   Başlık (hm-overlap) görsel tarafına doğru taşar; arkada soluk dev yazı (hm-split-mark). */
.home-about.hm-split {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 46vw, 860px);
    padding: 0;
    overflow: hidden;
}

.hm-split .container {
    position: relative;
    z-index: 2;
}

.hm-split-media {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 52%;
}

.hm-split.hm-image-left .hm-split-media {
    right: auto;
    left: 0;
}

.hm-split-media picture,
.hm-split-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.hm-split-media img {
    object-fit: cover;
}

.hm-split-text {
    width: calc(min(585px - 2vw, 48vw - 15px) - 56px);
    padding: 96px 0;
}

.hm-split.hm-image-left .hm-split-text {
    margin-left: auto;
}

.hm-split.hm-no-image .hm-split-text {
    width: auto;
    max-width: 760px;
}

.hm-split.hm-align-left .hm-split-text { text-align: left; }
.hm-split.hm-align-center .hm-split-text { text-align: center; }
.hm-split.hm-align-right .hm-split-text { text-align: right; }

.hm-split .hm-tag {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent);
}

.hm-split .hm-split-title {
    position: relative;
    z-index: 3;
    margin: 0 0 40px;
    font-size: clamp(36px, 3.6vw, 68px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--hm-title, #232834);
}

/* Uzun başlık (Home_modules::SPLIT_TITLE_MAX'tan uzun): cümle iri puntoda satırlarca sürerdi */
.hm-split.hm-title-long .hm-split-title {
    margin-bottom: 32px;
    font-size: clamp(28px, 2.4vw, 40px);
    line-height: 1.25;
}

/* Başlık görselin üstüne taşar (yalnız yan yana düzende): metin sütunu ile görsel arasındaki boşluk + görselin içine ~11vw */
@media (min-width: 992px) {
    .hm-split.hm-overlap.hm-image-right .hm-split-title {
        margin-right: calc(-1 * clamp(120px, 15vw, 300px));
    }

    .hm-split.hm-overlap.hm-image-left .hm-split-title {
        margin-left: calc(-1 * clamp(120px, 15vw, 300px));
    }
}

.hm-split .hm-rich {
    max-width: 480px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--hm-text, #6f6f6f);
}

.hm-split .hm-rich p,
.hm-split .hm-rich li {
    color: inherit;
}

.hm-split .hm-rich > :last-child {
    margin-bottom: 0;
}

.hm-split.hm-align-right .hm-rich { margin-left: auto; }
.hm-split.hm-align-center .hm-rich { margin-left: auto; margin-right: auto; }

.hm-split-btn {
    display: inline-block;
    margin-top: 44px;
    padding: 15px 36px;
    background: var(--hm-btn-bg, var(--color-accent, #000));
    color: var(--hm-btn-fg, #fff);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hm-split-btn:hover,
.hm-split-btn:focus {
    color: var(--hm-btn-fg, #fff);
    opacity: 0.85;
    transform: translateY(-2px);
}

/* Metnin arkasındaki soluk dev yazı: metin tarafının altında, kenardan taşarak kesilir */
.hm-split-mark {
    position: absolute;
    bottom: -0.2em;
    left: -0.08em;
    z-index: 0;
    font-size: clamp(120px, 15vw, 280px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.025);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    user-select: none;
}

.hm-split.hm-image-left .hm-split-mark {
    left: auto;
    right: -0.08em;
}

@media (max-width: 991px) {
    /* Tablet/mobil: görsel üstte, kendi oranında (kırpılmaz); metin altında tam genişlik, taşma yok */
    .home-about.hm-split {
        display: block;
        min-height: 0;
    }

    .hm-split-media {
        position: static;
        width: 100%;
    }

    .hm-split-media img {
        height: auto;
    }

    .hm-split-text,
    .hm-split.hm-no-image .hm-split-text {
        width: auto;
        max-width: none;
        padding: 48px 0 56px;
    }

    .hm-split .hm-split-title {
        margin-bottom: 24px;
        font-size: clamp(28px, 6vw, 40px);
    }

    /* Sağa hiza masaüstünde metni görsele yaslamak içindir; alt alta düzende sola döner */
    .hm-split.hm-align-right .hm-split-text {
        text-align: left;
    }

    .hm-split.hm-align-right .hm-rich {
        margin-left: 0;
    }

    .hm-split-btn {
        margin-top: 32px;
    }

    .hm-split-mark {
        font-size: 30vw;
    }
}

/* ---------- Ürün listesi (temada bölüm stili yoktu) ---------- */
.home-products.hm {
    padding: 80px 0;
}

.home-products.hm .section-header {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

.home-products.hm-align-left .section-header { text-align: left; margin-left: 0; }
.home-products.hm-align-right .section-header { text-align: right; margin-right: 0; }

.home-products.hm .section-header h2 {
    margin-bottom: 12px;
    font-size: 36px;
    color: var(--color-primary);
}

.home-products.hm .section-header p {
    color: #555;
}

@media (max-width: 768px) {
    .home-products.hm {
        padding: 40px 0;
    }

    .home-products.hm .section-header h2 {
        font-size: 26px;
    }
}

/* ---------- Sayılar ---------- */
.home-stats.hm a.stat-item {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease;
}

.home-stats.hm a.stat-item:hover {
    transform: translateY(-4px);
}

/* ---------- İkon grid: kolon sayısı (masaüstü) ---------- */
@media (min-width: 992px) {
    .home-services.hm-cols-3 .services-content .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-services.hm-cols-4 .services-content .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .home-services.hm-cols-4 .services-content .bento-grid .service-card {
        padding: 28px;
    }

    .home-why-us.hm .why-us-content .features-grid {
        justify-content: center;
    }

    .home-why-us.hm-cols-2 .why-us-content .features-grid .feature-item { flex: 0 1 calc((100% - 32px) / 2); }
    .home-why-us.hm-cols-3 .why-us-content .features-grid .feature-item { flex: 0 1 calc((100% - 64px) / 3); }
    .home-why-us.hm-cols-4 .why-us-content .features-grid .feature-item { flex: 0 1 calc((100% - 96px) / 4); min-width: 0; }
}

/* İkon grid renkleri: değişkenle (satır içi renk, kart koyulaşınca yazıyı okunmaz bırakıyordu) */
.home-services.hm a.service-card,
.home-why-us.hm a.feature-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

.home-services.hm .services-content .bento-grid .service-card .service-icon {
    color: var(--hm-icon, var(--color-accent));
}

.home-services.hm .services-content .bento-grid .service-card h3 {
    color: var(--hm-title, var(--color-primary));
}

.home-services.hm .services-content .bento-grid .service-card p {
    color: var(--hm-text, var(--color-text));
}

.home-services.hm div.service-card {
    cursor: default;
}

@media only screen and (min-width: 991px) {
    .home-services.hm .services-content .bento-grid .service-card:hover .service-icon {
        color: var(--color-accent-on-dark, #fff);
    }

    .home-services.hm .services-content .bento-grid .service-card:hover h3 {
        color: #fff;
    }

    .home-services.hm .services-content .bento-grid .service-card:hover p {
        color: rgba(255, 255, 255, .8);
    }
}

.home-why-us.hm .why-us-content .features-grid .feature-item .feature-icon-box {
    color: var(--hm-icon, var(--color-accent-on-dark, #fff));
}

.home-why-us.hm .why-us-content .features-grid .feature-item h3 {
    color: var(--hm-title, inherit);
}

.home-why-us.hm .why-us-content .features-grid .feature-item p {
    color: var(--hm-text, rgba(255, 255, 255, .9));
    opacity: .85;
}

/* ---------- Ürünler: görselli kartlar (Layout = panels) ----------
   Kenardan kenara yan yana kart kaydırıcısı (--hm-pp-h yüksekliğinde); her kart ürünün kendi görseliyle dolar, aralarında
   ince beyaz çizgi, altta kategori + ad + fiyat (--hm-pp-fg), üzerine gelince buzlu cam şerit. Oklar sol üstte
   (home-modules.js'teki Swiper'a bağlı; hepsi sığıyorsa gizli). */
.home-products.hm-pp {
    padding: 0;
    background-color: var(--color-bg, #fff);
}

.hm-pp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    padding-top: 48px;
    padding-bottom: 32px;
}

.hm-pp-head .section-header {
    flex: 1 1 100%;
    margin-bottom: 8px;
}

/* Başlığın üstündeki ikon; başlık hizasına uyar */
.hm-pp-icon {
    display: block;
    margin-bottom: 12px;
    color: var(--color-primary, #0a192f);
    font-size: 28px;
    line-height: 1;
}

.home-products.hm-pp .hm-pp-head .section-header,
.home-products.hm-pp-grid .section-header {
    margin-bottom: 0;
}

/* Ortalı başlıkta sekmeler ve buton da ortada */
.hm-pp.hm-align-center .hm-pp-head {
    justify-content: center;
}

.hm-pp.hm-align-center .hm-pp-more {
    margin-left: 0;
}

.hm-pp.hm-align-right .hm-pp-head {
    justify-content: flex-end;
}

.hm-pp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.hm-pp-tab {
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.hm-pp-tab:hover,
.hm-pp-tab.is-active {
    opacity: 1;
}

.hm-pp-tab.is-active {
    border-bottom-color: currentColor;
}

.hm-pp-more {
    margin-left: auto;
}

.hm-pp-stage {
    position: relative;
    height: var(--hm-pp-h, 700px);
    overflow: hidden;
    background: #1d1d1f;
}

.hm-pp-stage[hidden] {
    display: none;
}

.hm-boxed .hm-pp-stage {
    width: calc(100% - 30px);
    max-width: 1170px;
    margin: 0 auto;
}

.hm-pp.hm-boxed {
    padding-bottom: 72px;
}

.hm-pp-swiper,
.hm-pp-swiper .swiper-wrapper,
.hm-pp-swiper .swiper-slide {
    height: 100%;
}

.hm-pp-swiper {
    position: relative;
    z-index: 1;
}

/* Kart: ürünün kendi görseliyle dolar; kartlar arasında ince beyaz çizgi */
.hm-panel {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    background: #2b2b2b;
    color: var(--hm-pp-fg, #fff);
    text-decoration: none;
}

.hm-panel:hover,
.hm-panel:focus {
    color: var(--hm-pp-fg, #fff);
}

.hm-panel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.hm-panel:hover .hm-panel-img {
    transform: scale(1.04);
}

.hm-pp-pane[hidden] {
    display: none !important;
}

/* Görsel kartı doldururken (cover): yazının okunması için alttan hafif koyulaşma; üzerine gelince buzlu cam şerit */
.hm-pp-cover .hm-panel::before,
.hm-pp-cover .hm-panel::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    pointer-events: none;
}

.hm-pp-cover .hm-panel::before {
    height: 42%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
}

.hm-pp-cover .hm-panel::after {
    height: 19%;
    min-height: 110px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hm-pp-cover .hm-panel:hover::after,
.hm-pp-cover .hm-panel:focus-visible::after {
    opacity: 1;
}

/* Ürün bütün görünür (contain, varsayılan): beyaz kart, fotoğraf üst kısımda kırpılmadan, yazı altında koyu;
   ayraçlar açık gri, üzerine gelince ürün hafifçe büyür (zemin rengi değişmez: ürün fotoğrafının kendi beyaz zemini
   gri kartta kare olarak görünüyordu) */
.hm-pp-contain .hm-pp-stage {
    background: #fff;
}

.hm-pp-contain .hm-panel {
    border-left-color: rgba(0, 0, 0, 0.08);
    background: #fff;
}

.hm-pp-contain .hm-panel:hover .hm-panel-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* object-fit !important: main.css tüm görsellere img[src]:not(…)×3 ile cover veriyor (özgüllüğü bu kuraldan yüksek) */
.hm-pp-contain .hm-panel-img {
    box-sizing: border-box;
    bottom: auto;
    height: 66%;
    padding: 4% 4% 0;
    object-fit: contain !important;
}

.hm-pp-contain .hm-panel-body {
    top: 68%;
    bottom: auto;
    left: 24px;
    right: 24px;
}

.hm-panel-body {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 36px;
    z-index: 2;
    display: block;
}

.hm-panel-cat {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    opacity: 0.75;
}

.hm-pp-cover .hm-panel-cat {
    margin-bottom: 14px;
    font-size: 16px;
    opacity: 0.95;
}

.hm-panel-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hm-pp-cover .hm-panel-title {
    font-size: 24px;
}

.hm-panel-price {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
}

.hm-pp-nav {
    position: absolute;
    top: 48px;
    left: 48px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.hm-pp-nav button {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-btn, 0);
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.hm-pp-nav button:hover {
    background: var(--color-accent, #000);
    color: #fff;
}

.hm-pp-nav button.swiper-button-disabled {
    opacity: 0.45;
    cursor: default;
}

/* Ürünlerin hepsi sığıyorsa oklar gizlenir (Swiper kilidi) */
.hm-pp-nav .swiper-button-lock {
    display: none;
}

.hm-pp-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kart ızgarasında kategori etiketi */
.hm-card-cat {
    display: block;
    margin-bottom: 4px;
    color: #777;
    font-size: 14px;
}

.hm-pp-grid .hm-pp-tabs {
    justify-content: center;
    margin-bottom: 28px;
}

@media (max-width: 991px) {
    .hm-pp-stage {
        height: min(var(--hm-pp-h, 700px), 600px);
    }

    .hm-pp-head {
        padding-top: 48px;
        padding-bottom: 24px;
    }
}

@media (max-width: 767px) {
    .hm-pp-stage {
        height: 480px;
    }

    .hm-pp-nav {
        top: 20px;
        left: 20px;
    }

    .hm-pp-nav button {
        width: 44px;
        height: 44px;
    }

    .hm-panel-body {
        left: 20px;
        right: 20px;
        bottom: 26px;
    }

    .hm-panel-cat {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .hm-panel-title,
    .hm-pp-cover .hm-panel-title {
        font-size: 19px;
    }

    .hm-pp-more {
        margin-left: 0;
    }
}

/* ---------- Genişlik (Width ayarı) ----------
   hm-wide: içerik modülü tam genişlikte — kapsayıcı ekranın kenarlarına kadar, yanlarda nefes payı.
   hm-boxed: kenardan kenara modül (slider, banner, yarım ekran Yazı & Resim, logo şeridi) sitenin 1200 px alanında;
   çevresindeki bant modülün zemin renginde (banner'da hm-band sarmalayıcısı), köşeler düz. */
.hm-wide .container {
    max-width: none;
    padding-left: clamp(15px, 3vw, 48px);
    padding-right: clamp(15px, 3vw, 48px);
}

/* Slider kutu içinde: çevresi alttaki bölümün renginde (çentikle aynı); sabit başlık üstüne binmez
   (site-header.css .hs:not(.hm-boxed)), bu yüzden üstteki menü karartması ve başlık payı gerekmez */
.hs.hm-boxed {
    padding: 24px max(15px, calc((100% - 1170px) / 2)) 0;
    background: var(--hs-notch, #fff);
}

.hs.hm-boxed .hs-frame {
    height: min(78vh, 760px);
    height: min(78svh, 760px);
    min-height: 420px;
}

.hs.hm-boxed.hs-ratio .hs-frame {
    height: auto;
    min-height: 0;
}

.hs.hm-boxed .hs-slide::before {
    display: none;
}

.hs.hm-boxed .hs-caption {
    --hs-edge: clamp(24px, 4vw, 56px);
}

.hs.hm-boxed .is-v-top .hs-caption {
    top: clamp(24px, 6vh, 72px);
}

.hs.hm-boxed .is-v-center .hs-caption {
    top: 50%;
}

/* Banner kutu içinde: bant (hm-band) zemin renginde, banner içinde 1200 px */
.hm-band {
    padding: 48px 0;
}

.full-width-banner.hm-boxed {
    width: calc(100% - 30px);
    max-width: 1170px;
    margin: 0 auto;
    overflow: hidden;
}

/* Yarım ekran kutu içinde: bölüm tam genişlikte bant (zemin rengi), görsel ve metin sitenin 1170 px alanında */
.hm-split.hm-boxed {
    padding: 48px 0;
}

@media (min-width: 992px) {
    .hm-split.hm-boxed {
        min-height: clamp(460px, 38vw, 700px);
    }

    .hm-split.hm-boxed .hm-split-media {
        top: 48px;
        bottom: 48px;
        right: max(15px, calc((100% - 1170px) / 2));
        width: calc(min(100% - 30px, 1170px) * 0.52);
    }

    .hm-split.hm-boxed.hm-image-left .hm-split-media {
        right: auto;
        left: max(15px, calc((100% - 1170px) / 2));
    }

    /* Metin sütunu içerik alanının %48'inde biter, görsel %48'den başlar */
    .hm-split.hm-boxed .hm-split-text {
        width: calc(48% - 56px);
    }
}

@media (max-width: 991px) {
    .hm-band,
    .hm-split.hm-boxed {
        padding: 32px 0;
    }

    .hm-split.hm-boxed .hm-split-media {
        width: auto;
        margin: 0 15px;
    }
}

/* Yarım ekran açıkça tam genişlikte: kapsayıcı ekran kenarına kadar (hm-wide), metin sütunu görselin yanındaki
   yarının tamamı (görselle arada 56 px), paragraf 480 px'e sıkışmaz */
@media (min-width: 992px) {
    .hm-split.hm-wide .hm-split-text {
        width: calc(48% - 56px);
    }

    .hm-split.hm-wide .hm-rich {
        max-width: none;
    }
}

/* Logo şeridi kutu içinde */
.hm-boxed .hm-marquee {
    width: calc(100% - 30px);
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ çerçeveli buton
 * "Blog'a Git", "Tüm Ürünler" gibi btn-outline butonlar: temanın vurgusu (siyah) ya da panelde seçilen renk (--hm-btn,
 * butonun kendi style'ında). main.css'teki .btn-outline --color-primary'nin lacivertini kullanıyordu. */
.hm .btn-outline {
    color: var(--hm-btn, var(--color-accent, #000000));
    border-color: var(--hm-btn, var(--color-accent, #000000));
}

.hm .btn-outline:hover,
.hm .btn-outline:focus-visible {
    background: var(--hm-btn, var(--color-accent, #000000));
    border-color: var(--hm-btn, var(--color-accent, #000000));
    color: #ffffff;
    box-shadow: none;
}

/* ------------------------------------------------------------------ boşluk (modül 16)
 * Yükseklik görünümün style'ından gelir: --hm-gap masaüstü, --hm-gap-m 991 px ve altı (panelde ayrı girilir). */
.hm-spacer {
    display: block;
    height: var(--hm-gap, 80px);
}

@media (max-width: 991px) {
    .hm-spacer {
        height: var(--hm-gap-m, var(--hm-gap, 80px));
    }
}