:root {
    --primary: #6244C5;
    --secondary: #FFC448;
    /* --secondary: #646464; */
    --light: #FAFAFB;
    --dark: #12141D;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/*** Spinner ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Button ***/

.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary, .btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/

/* .navbar.fixed-top {
    display: block;
    transition: .1s;
} */

.navbar .navbar-nav .nav-link {
    padding: 10px;
    color: var(--dark);
    font-size: 18px;
    font-weight: 600;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar-animate {
    animation: navbarFadeSlide 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(-30px);
}

@keyframes navbarFadeSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navbar üst kısmı sabit */

.navbar-top {
    height: 100px;
    z-index: 1030;
}

.topbar .form-control {
    border-radius: 30px;
    padding-left: 15px;
}

/* Alt navbar’ı sabit üstten aşağıya başlatmak için boşluk bırak */

.mt-navbar-top {
    margin-top: 100px;
}

/* Logo ortalama */

.navbar-logo img {
    display: block;
    margin: 0 auto;
    max-height: 80px;
}

/* Arama kutusu */

.navbar-search input {
    width: 200px;
}

/* navbar shadow */

.custom-shadow {
    box-shadow: 0 7px 13px -10px rgba(88, 88, 88, 0.3);
    /* sadece alt gölge */
}

/*** Header ***/

#home {
    margin-bottom: 6rem;
    background: url(../img/ofis4.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

/* 
#login {
    margin-bottom: 6rem;
    background: url(../img/bg-header.png) no-repeat;
    background-position: -75px top;
    background-size: 24%; /* veya contain ya da bir oran (örneğin: 100% auto)
} 
     */

.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 26px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: var(--primary);
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -1px;
    border-left: 16px solid var(--primary);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

.modal-video .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

.modal-video .modal-body {
    position: relative;
    padding: 0px;
}

.modal-video .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}

/*** About ***/

#about .years .display-1 {
    font-size: 10rem;
    line-height: 9rem;
}

#about .years h5 {
    letter-spacing: 30px;
    margin-right: -30px;
}

/*** Skills ***/

#skill .progress {
    height: 5px;
    border-radius: 5px;
}

#skill .progress .progress-bar {
    width: 0px;
    border-radius: 5px;
    transition: 3s;
}

#skill .nav-pills .nav-link {
    color: var(--dark);
}

#skill .nav-pills .nav-link.active {
    color: #FFFFFF;
}

#skill .tab-content hr {
    width: 30px;
}

/*** Service ***/

.service-item .bg-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/bg-icon.png) center center no-repeat;
    background-size: cover;
}

.service-item .bg-icon2 {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/bg-icon2.png) center center no-repeat;
    background-size: cover;
}

/*** Project Portfolio ***/

#portfolio-flters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover, #portfolio-flters li.active {
    color: var(--primary);
    border-color: var(--primary);
}

.portfolio-img {
    position: relative;
}

.portfolio-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(98, 68, 197, .9);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
    padding-bottom: 100px !important;
    opacity: 0;
    transition: .5s;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
    padding-bottom: 30px !important;
}

/*** Team ***/

.team-item img {
    transition: .5s;
}

.team-item:hover img {
    opacity: .7;
}

.team-item .team-text {
    position: absolute;
    left: 0;
    right: 60px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text {
    right: 30px;
    opacity: 1;
}

.team-item .team-text div {
    transition: .5s;
}

.team-item:hover .team-text div {
    margin-left: 30px;
}

/*** Testimonial ***/

.testimonial-left, .testimonial-right {
    position: relative;
}

.testimonial-left img, .testimonial-right img {
    position: absolute;
    padding: 5px;
    border: 1px solid var(--secondary);
    border-radius: 70px;
}

.testimonial-left img:nth-child(1), .testimonial-right img:nth-child(3) {
    width: 70px;
    height: 70px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial-left img:nth-child(2), .testimonial-right img:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.testimonial-left img:nth-child(3), .testimonial-right img:nth-child(1) {
    width: 50px;
    height: 50px;
    bottom: 10%;
    right: 10%;
}

.testimonial-carousel .owl-item img {
    width: 120px;
    height: 120px;
}

.testimonial-carousel .testimonial-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--secondary);
    border-radius: 60px;
}

.testimonial-carousel .owl-dots {
    height: 40px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    border: 2px solid var(--secondary);
    border-radius: 30px;
    transition: .5s;
}

.testimonial-carousel .owl-dot::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    top: 5px;
    left: 5px;
    border-radius: 16px;
    background: var(--secondary);
    transition: .5s;
}

.testimonial-carousel .owl-dot.active::after {
    background: var(--primary);
}

/* banner css start */

img.img-banner {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 40%;
}

/* banner */

/* footer css start */

/* .footer a {
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .btn-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    transition: 0.3s;
}

.footer .btn-social:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
} */

/* footer css end */

/* new footer css */

@media (max-width: 991.98px){.footer .item {
        text-align: center !important;
    }

.footer .footer-links {
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0 !important;
    }

.footer .item h3 {
        justify-content: center !important;
        text-align: center !important;
    }}

.footer {
    position: relative;
    background-color: #fff;
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

/* Footer Top */

.footer .top {
    padding: 50px 0 20px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.footer .top .logo-section {
    margin-bottom: 30px;
}

.footer .top .logo {
    width: 240px;
    height: auto;
}

.footer .top .social-icons ul {
    margin: 0;
    padding: 0;
}

.footer .top .social-icons li {
    display: inline-block;
    margin: 0 8px;
}

.footer .top .social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: 50%;
    color: #181818;
    /* Siyah ikon */
    font-size: 17px;
    background: #fff;
    transition: all 0.3s;
}

.footer .top .social-icons li a:hover {
    background: #BD945A;
    border-color: #BD945A;
    color: #fff;
}

.footer .top .item h3 {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer .top .item .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .top .item .footer-links li {
    margin-bottom: 10px;
}

.footer .top .item .footer-links li a {
    color: #222;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s;
}

.footer .top .item .footer-links li a:hover {
    color: #BD945A;
}

.footer .top .newsletter .input-group {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 300px;
}

.footer .top .newsletter input {
    width: 100%;
    height: 45px;
    padding: 0 50px 0 20px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.02);
    color: #222;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.footer .top .newsletter input::placeholder {
    color: rgba(50, 50, 50, 0.48);
    font-style: italic;
}

.footer .top .newsletter input:focus {
    border-color: #BD945A;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
}

.footer .top .newsletter button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-70%);
    background: none;
    border: none;
    color: #181818;
    font-size: 16px;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.footer .top .newsletter button:hover {
    background: #BD945A;
    color: #fff;
}

/* Footer Bottom */

.footer .bottom {
    padding: 5px 0;
    background: rgb(0, 0, 0);
}

.footer .bottom p {
    color: #fff;
    font-size: 14px;
    margin: 0;
}

.footer .bottom img {
    filter: none !important;
}

/* Responsive için varsa ek stil burada tutulabilir */

.happencode-logo {
    height: 21px;
}

.footer .item h3 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #fff;
    /* Başlık rengi */
    margin-bottom: 20px;
}

.footer .item h3::after {
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    background-color: black;
    margin-top: 5px;
    margin-right: auto;
}

/* Responsive */

@media screen and (max-width: 991px){.footer .top .item h3 {
        font-size: 15px;
    }

.footer .top .item .footer-links li a {
        font-size: 13px;
    }

.footer .bottom {
        text-align: center;
    }

.footer .bottom img {
        margin: 5px 10px !important;
    }}

@media screen and (max-width: 767px){.footer .top .logo {
        width: 300px;
    }

.footer .top .social-icons li a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

.footer .top {
        padding: 40px 0 20px;
    }

.footer .top .newsletter .input-group {
        max-width: 250px;
    }}

/* Login Sayfası */

.login-box {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo boyutunu mobilde küçült */

@media (max-width: 991.98px){.logo img {
        height: 58px !important;
        transition: height 0.3s;
    }

.topbar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }}

/* Hamburger menü butonu hizalaması */

@media (max-width: 991.98px){.logo {
        margin: 0 auto;
        text-align: center;
    }

.topbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }}

/* Offcanvas menü bağlantıları: Daha büyük ve dokunmatik için uygun */

.offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 12px 0;
    color: #222;
    border-bottom: 1px solid #f4f4f4;
}

.offcanvas .nav-link:last-child {
    border-bottom: none;
}

/* Masaüstünde üst nav boşluğunu ayarla */

@media (min-width: 992px){.custom-shadow {
        display: none;
    }}

@media (max-width: 992px){.custom-shadow {
        box-shadow: 0 4px 18px -10px rgba(50, 50, 93, .07), 0 1.5px 6px 0 rgba(0, 0, 0, .09);
    }

.logo img {
        height: 50px !important; 
    }}

/* Arama kutusunun giriş butonlarını ve input'unu hizala */

.search-box .input-group-text {
    background: #fff;
    border-right: none;
}

.search-box .form-control {
    border-left: none;
}

.offcanvas-header {
    position: relative;
}

.offcanvas-header a {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.offcanvas .input-group {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.offcanvas-body nav .nav-link {
    color: #1a1a1a;
    border-radius: 8px;
    margin: 2px 0;
    transition: background .15s;
}

.offcanvas-body nav .nav-link:active, .offcanvas-body nav .nav-link:focus, .offcanvas-body nav .nav-link:hover {
    color: var(--primary);
    font-weight: 500;
}

.offcanvas-social .btn-social {
    font-size: 22px;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    border: none;
}

.offcanvas-social .btn-social:hover {
    background: var(--primary);
    color: var(--secondary);
}

/* .makale-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.makale-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.makale-card img {
    height: 220px;
    object-fit: cover;
} */

/* --- Minimal Koçluk sayfası ekleri --- */

.section { padding: 48px 0; }

.hr-soft { border: 0; border-top: 1px solid rgba(0,0,0,.06); margin: 0; }

.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

.card-plain {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: #fff;
}

.card-plain.highlight { border-color: var(--primary); }

.list-plain { margin: 0; padding-left: 1.1rem; }

.list-plain li { margin-bottom: .4rem; }

.steps { margin: 0; padding-left: 1.2rem; }

.steps li { margin-bottom: .5rem; }

.faq-plain details {
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 12px 0;
}

.faq-plain details:last-child { border-bottom: 1px solid rgba(0,0,0,.06); }

.faq-plain summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.faq-plain summary::-webkit-details-marker { display: none; }

@media (max-width: 576px){.section { padding: 36px 0; }

.narrow { padding-left: 12px; padding-right: 12px; }}

/* Sadece Koçluk sayfasını etkilemesi için kapsayıcıda değişkenler */

.kocluk {
  --brand:#6244C5;
  --ink:#1f2937;
  --muted:#64748b;
}

/* Yardımcı renk ve butonlar */

.kocluk .text-brand {color:var(--brand)!important}

.kocluk .btn-brand {background:var(--brand);border-color:var(--brand);color:#fff}

.kocluk .btn-brand:hover {filter:brightness(0.95);color:#fff}

.kocluk .btn-outline-brand {border-color:var(--brand);color:var(--brand)}

.kocluk .btn-outline-brand:hover {background:var(--brand);color:#fff}

/* Bölüm ve tipografi */

.kocluk .section-soft {background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)}

.kocluk .section-title {color:var(--ink);font-weight:800}

.kocluk .lead-muted {color:var(--muted)}

/* Kart ve gölge dili */

.kocluk .card-modern {border:1px solid rgba(2,6,23,.06);border-radius:16px}

.kocluk .shadow-soft {box-shadow:0 10px 30px rgba(2,6,23,.06)}

/* İkon rozetleri */

.kocluk .icon-circle {
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(98,68,197,.10);color:var(--brand);flex:none
}

/* İstatistik kartları */

.kocluk .stat-card {min-width:160px;border-radius:14px;border:1px solid rgba(2,6,23,.06)}

.kocluk .stat-value {font-weight:800;font-size:1.25rem;color:var(--ink)}

.kocluk .stat-label {color:var(--muted)}

/* Chip */

.kocluk .chip {
  display:inline-flex;gap:.5rem;align-items:center;
  padding:.5rem .75rem;border-radius:999px;background:#fff;
  border:1px solid rgba(2,6,23,.06)
}

/* Temiz liste */

.kocluk .list-clean li {margin:.5rem 0;color:var(--ink)}

.kocluk .list-clean i {margin-right:.5rem;color:#22c55e}

/* Paket kartları */

.kocluk .package.card {border-radius:18px}

.kocluk .package .badge-reco {background:var(--brand)}

.kocluk .package .card-title {font-weight:700}

/* Ufak uyumlar */

.kocluk .breadcrumb a {color:var(--muted)}

.kocluk .accordion-button {font-weight:600}

/* Bu dosya mevcut site CSS'ine EK'tir. Sadece .bx-* sınıfları tanımlanır. */

/* === Tema === */

:root {
  --bx-brand: var(--primary, #6244C5);
  --bx-brand-2: #8f94fb;
  --bx-ink:#1f2937;
  --bx-muted:#6b7280;
  --bx-surface:#ffffff;
  --bx-soft:#f6f7fb;
  --bx-border:rgba(2,6,23,.08);
  --bx-ring:rgba(98,68,197,.18);
}

/* === HERO === */

.bx-hero {
  background: radial-gradient(1200px 500px at 20% -10%, rgba(98,68,197,.12), transparent),
              linear-gradient(180deg,#fff 0%,#f9fafc 100%);
  border-bottom: 1px solid var(--bx-border);
}

.bx-eyebrow {font-weight:700;color:var(--bx-brand);letter-spacing:.3px}

.bx-title {font-weight:800;font-size:2.25rem;margin:.4rem 0 1rem;color:var(--bx-ink)}

.bx-title span {background:linear-gradient(90deg,var(--bx-brand),var(--bx-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.bx-sub {color:var(--bx-muted);max-width:50ch}

.bx-chips {display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.25rem}

.bx-chip {display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--bx-border);color:var(--bx-ink)}

.btn.bx-btn-primary {
  padding:.85rem 1.2rem;border-radius:12px;background:linear-gradient(90deg,var(--bx-brand),var(--bx-brand-2));
  border:none;color:#fff;font-weight:700;box-shadow:0 10px 20px var(--bx-ring)
}

.btn.bx-btn-primary:hover {filter:brightness(.97);color:#fff}

.btn.bx-btn-ghost {padding:.85rem 1.2rem;border-radius:12px;background:#fff;border:1px solid var(--bx-border);color:var(--bx-ink);font-weight:600}

.btn.bx-btn-ghost:hover {background:#f3f4f6;color:var(--bx-ink)}

.bx-hero-media {position:relative}

.bx-hero-media img {width:100%;border-radius:18px;box-shadow:0 20px 40px rgba(2,6,23,.12);object-fit:cover;max-height:420px}

/* İSTEK: bx-stats kapalı */

.bx-stats {display:none!important}

/* === FİLTRE / ARAÇ ÇUBUĞU (küçültülmüş) === */

.bx-toolbar {position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--bx-border)}

.bx-toolbar-inner {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0}

.bx-scrollchips {display:flex;gap:.4rem;overflow:auto;scrollbar-width:none}

.bx-scrollchips::-webkit-scrollbar {display:none}

.bx-chip {font-size:.9rem;padding:.4rem .7rem}

.bx-chip.active {background:linear-gradient(90deg,rgba(98,68,197,.12),rgba(143,148,251,.12));border-color:rgba(98,68,197,.35);color:var(--bx-brand)}

.bx-actions {display:flex;align-items:center;gap:.5rem}

.bx-search {position:relative;display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--bx-border);border-radius:12px;padding:.4rem .65rem}

.bx-search i {color:var(--bx-muted)}

.bx-search input {border:none;outline:none;width:160px;font-size:.95rem}

.bx-sort {border:1px solid var(--bx-border);background:#fff;border-radius:12px;padding:.4rem .65rem;font-weight:600}

/* === KATALOG === */

.bx-catalog {background:var(--bx-soft);padding:32px 0}

/* Kart: masaüstünde CTA'yı sağ altta sabitlemek için esnek yapı */

.bx-card {
  position:relative;overflow:hidden;border-radius:18px;background:var(--bx-surface);
  border:1px solid var(--bx-border);box-shadow:0 10px 24px rgba(2,6,23,.06);
  transition:transform .25s ease,box-shadow .25s ease;height:100%;
}

.bx-card:hover {transform:translateY(-3px);box-shadow:0 18px 36px rgba(2,6,23,.09)}

.bx-stripe {
  position:absolute;inset:0 auto 0 0;width:56px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--bx-brand),var(--bx-brand-2));color:#fff;font-size:1.35rem
}

.bx-card-body {padding:1.1rem 1.2rem 1.2rem 1.4rem;margin-left:56px}

.bx-card-title {font-size:1.15rem;font-weight:700;color:var(--bx-ink);margin-bottom:.35rem}

.bx-card-text {color:var(--bx-ink);opacity:.9;margin-bottom:.6rem}

.bx-meta {display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:0 0 .9rem 0;padding:0;list-style:none;color:var(--bx-muted);font-size:.95rem}

.bx-meta i {margin-right:.35rem}

/* CTA alanı */

.bx-card-foot {display:flex;align-items:center;justify-content:space-between;gap:.75rem}

.bx-price {font-weight:800;font-size:1.15rem;color:var(--bx-ink)}

.bx-price span {opacity:.7;margin-right:.1rem}

.bx-cta-wrap {display:flex;align-items:center;gap:.5rem}

.bx-link {font-weight:700;color:var(--bx-brand);text-decoration:none}

.bx-link:hover {text-decoration:underline}

.btn.bx-btn-primary-sm {padding:.55rem .8rem;border-radius:10px;background:linear-gradient(90deg,var(--bx-brand),var(--bx-brand-2));border:none;color:#fff;font-weight:700}

/* Masaüstünde butonları sağ altta aynı hizada tut */

@media (min-width: 992px){.bx-card {display:flex}

.bx-card-body {display:flex;flex-direction:column;flex:1 1 auto}

.bx-card-foot {margin-top:auto;justify-content:flex-end}}

/* === SON CTA === */

.bx-cta-final {background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%);border-top:1px solid var(--bx-border)}

.bx-cta-box {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--bx-border);background:#fff;border-radius:16px;padding:1.1rem 1.3rem;
  box-shadow:0 10px 24px rgba(2,6,23,.06)
}

.bx-cta-box h4 {margin:0 0 .2rem 0;font-weight:800;color:var(--bx-ink)}

.bx-cta-box p {margin:0;color:var(--bx-muted)}

/* === Responsive dokunuşlar === */

@media (max-width: 991.98px){.bx-title {font-size:1.9rem}

.bx-search input {width:140px}}

@media (max-width: 575.98px){.bx-cta-box {flex-direction:column;align-items:stretch;text-align:center}

.bx-card-body {margin-left:0;padding:1.1rem}

.bx-stripe {position:relative;width:100%;height:48px;border-bottom-left-radius:0;border-top-right-radius:18px}}

/* Sadece bu sayfa için: .mx-* isimli sınıflar */

/* Tema değişkenleri (mevcut --primary varsa onu kullanır) */

:root {
  --mx-brand: var(--primary, #6244C5);
  --mx-brand-2:#8f94fb;
  --mx-ink:#111827;
  --mx-muted:#6b7280;
  --mx-surface:#ffffff;
  --mx-soft:#f6f7fb;
  --mx-border:rgba(2,6,23,.08);
  --mx-ring:rgba(98,68,197,.16);
}

/* ---------- HERO ---------- */

.mx-hero {
  background: radial-gradient(900px 420px at 20% -10%, rgba(98,68,197,.12), transparent),
              linear-gradient(180deg,#fff 0%,#fafbfe 100%);
  border-bottom:1px solid var(--mx-border);
  padding:48px 0 24px;
}

.mx-eyebrow {font-weight:700;color:var(--mx-brand);letter-spacing:.3px}

.mx-title {font-weight:800;font-size:2.25rem;margin:.35rem 0 .6rem;color:var(--mx-ink)}

.mx-title span {background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- TOOLBAR ---------- */

.mx-toolbar {position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--mx-border)}

.mx-toolbar-inner {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem 0}

.mx-scrollchips {display:flex;gap:.4rem;overflow:auto;scrollbar-width:none}

.mx-scrollchips::-webkit-scrollbar {display:none}

.mx-chip {
  border:1px solid var(--mx-border);background:#fff;border-radius:999px;padding:.4rem .7rem;
  font-weight:600;color:#1f2937;white-space:nowrap
}

.mx-chip i {margin-right:.35rem}

.mx-chip.active {background:linear-gradient(90deg,rgba(98,68,197,.12),rgba(143,148,251,.12));border-color:rgba(98,68,197,.35);color:var(--mx-brand)}

.mx-actions {display:flex;align-items:center;gap:.5rem}

.mx-search {display:flex;align-items:center;gap:.45rem;border:1px solid var(--mx-border);border-radius:12px;padding:.4rem .65rem;background:#fff}

.mx-search i {color:var(--mx-muted)}

.mx-search input {border:none;outline:none;width:180px;font-size:.95rem}

.mx-sort {border:1px solid var(--mx-border);background:#fff;border-radius:12px;padding:.4rem .65rem;font-weight:600}

/* ---------- FEATURED ---------- */

.mx-featured {background:var(--mx-soft);padding:28px 0 10px;border-bottom:1px solid var(--mx-border)}

.mx-feature {
  display:grid;grid-template-columns:1fr 1.2fr;gap:1.1rem;align-items:stretch
}

.mx-cover {position:relative;display:block;border-radius:16px;overflow:hidden}

.mx-cover img {width:100%;height:100%;object-fit:cover;max-height:360px;display:block;transition:transform .35s ease}

.mx-cover:hover img {transform:scale(1.03)}

.mx-badge {
  position:absolute;left:12px;top:12px;background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));
  color:#fff;border-radius:999px;padding:.35rem .6rem;font-weight:700;font-size:.85rem
}

.mx-feature-body {
  background:#fff;border:1px solid var(--mx-border);border-radius:16px;padding:1.1rem 1.2rem;
  box-shadow:0 10px 24px rgba(2,6,23,.06);display:flex;flex-direction:column
}

.mx-feature-title {font-size:1.35rem;font-weight:800;color:#111;text-decoration:none;margin-bottom:.35rem}

.mx-feature-title:hover {text-decoration:underline}

.mx-feature-excerpt {color:#1f2937;opacity:.9;margin-bottom:.6rem}

.mx-meta {list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:0 0 1rem;padding:0;color:var(--mx-muted)}

.mx-meta i {margin-right:.35rem}

.btn.mx-btn-primary {
  align-self:flex-start;border:none;border-radius:12px;padding:.75rem 1rem;font-weight:800;color:#fff;
  background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));box-shadow:0 10px 20px var(--mx-ring)
}

.btn.mx-btn-primary:hover {filter:brightness(.97);color:#fff}

/* ---------- GRID ---------- */

.mx-grid {background:#fff;padding:28px 0}

.mx-card {
  height:100%;display:flex;flex-direction:column;border:1px solid var(--mx-border);
  border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.05);
  transition:transform .2s ease, box-shadow .2s ease
}

.mx-card:hover {transform:translateY(-3px);box-shadow:0 14px 28px rgba(2,6,23,.08)}

.mx-thumb img {width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.mx-card-body {display:flex;flex-direction:column;padding:1rem 1rem 1.1rem}

.mx-card-title {font-weight:800;color:#111;text-decoration:none;margin-bottom:.3rem}

.mx-card-title:hover {text-decoration:underline}

.mx-card-excerpt {color:#1f2937;opacity:.9;margin-bottom:.6rem}

.mx-card .mx-meta {margin-bottom:.75rem}

.mx-link {margin-top:auto;font-weight:800;color:var(--mx-brand);text-decoration:none}

.mx-link:hover {text-decoration:underline}

/* ---------- PAGINATION ---------- */

.mx-pagination {display:flex;justify-content:center;gap:.35rem;margin-top:20px}

.mx-page {
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  border:1px solid var(--mx-border);border-radius:10px;padding:0 .6rem;background:#fff;color:#111;text-decoration:none
}

.mx-page.active {background:linear-gradient(90deg,var(--mx-brand),var(--mx-brand-2));color:#fff;border-color:transparent}

.mx-page.disabled {opacity:.45;pointer-events:none}

/* ---------- NEWSLETTER ---------- */

.mx-newsletter {background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%);border-top:1px solid var(--mx-border);padding:30px 0}

.mx-news-box {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--mx-border);
  border-radius:16px;padding:1.1rem 1.3rem;box-shadow:0 8px 18px rgba(2,6,23,.06)
}

.mx-news-box h4 {margin:0 0 .2rem 0;font-weight:800}

.mx-news-box p {margin:0;color:var(--mx-muted)}

.mx-news-form {display:flex;gap:.5rem}

.mx-news-form input {
  border:1px solid var(--mx-border);border-radius:12px;padding:.65rem .8rem;min-width:240px
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px){.mx-title {font-size:1.9rem}

.mx-feature {grid-template-columns:1fr}

.mx-search input {width:150px}}

@media (max-width: 575.98px){.mx-news-box {flex-direction:column;align-items:stretch;text-align:center}

.mx-news-form {flex-direction:column}}

/* Yalnızca İletişim sayfası: .cx-* */

:root {
  --cx-brand: var(--primary, #6244C5);
  --cx-ink:#111827;
  --cx-muted:#6b7280;
  --cx-soft:#f6f7fb;
  --cx-border: rgba(2,6,23,.08);
  --cx-ring: rgba(98,68,197,.15);
}

/* ---------- Hero ---------- */

.cx-hero {
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(98,68,197,.12), transparent),
    linear-gradient(180deg,#fff 0%,#fafbfe 100%);
  border-bottom:1px solid var(--cx-border);
  padding:40px 0 28px;
}

.cx-eyebrow {font-weight:800;color:var(--cx-brand);letter-spacing:.2px;margin:0}

.cx-title {font-weight:800;font-size:2.2rem;margin:.25rem 0 .6rem;color:var(--cx-ink)}

.cx-title span {background:linear-gradient(90deg,var(--cx-brand),#8f94fb);-webkit-background-clip:text;background-clip:text;color:transparent}

.cx-quick.grid-sm-2 {grid-template-columns:repeat(2,1fr)}

/* ---------- Body ---------- */

.cx-body {background:#fff;padding:28px 0}

.cx-card {
  background:#fff;border:1px solid var(--cx-border);border-radius:16px;padding:1.15rem 1.2rem;
  box-shadow:0 10px 24px rgba(2,6,23,.06)
}

.cx-divider {height:1px;background:var(--cx-border);margin:1rem 0}

.cx-form .form-control, .cx-form .form-select {
  border-radius:12px;border:1px solid var(--cx-border);
  padding:.65rem .8rem; box-shadow:none
}

.cx-form .form-control:focus, .cx-form .form-select:focus {
  border-color:var(--cx-brand);
  box-shadow:0 0 0 .25rem var(--cx-ring);
}

.cx-btn-primary {
  background:linear-gradient(90deg,var(--cx-brand),#8f94fb);
  border:none;border-radius:12px;color:#fff;font-weight:800;padding:.9rem 1rem;
  box-shadow:0 12px 20px var(--cx-ring)
}

.cx-btn-primary:hover {filter:brightness(.97);color:#fff}

.cx-btn-ghost {
  border:1px solid var(--cx-border);border-radius:12px;font-weight:700;background:#fff
}

/* Bilgi kutusu */

.cx-list {list-style:none;margin:0;padding:0;display:grid;gap:.55rem}

.cx-list a {color:inherit;text-decoration:none}

.cx-list i {color:var(--cx-brand);margin-right:.5rem}

/* SS Sorular */

.cx-faq {border-top:1px solid var(--cx-border);padding:.7rem 0}

.cx-faq:last-child {border-bottom:1px solid var(--cx-border)}

.cx-faq > summary {cursor:pointer;font-weight:700;list-style:none}

.cx-faq > summary::-webkit-details-marker {display:none}

.cx-faq > p {margin:.5rem 0 0 0;color:var(--cx-ink)}

/* ---------- Harita ---------- */

.cx-map {background:var(--cx-soft);border-top:1px solid var(--cx-border);padding:28px 0}

.cx-tabs {--br:14px}

.cx-tabs input {display:none}

.cx-tabs-bar {
  display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem
}

.cx-tabs-bar label {
  cursor:pointer;padding:.5rem .8rem;border:1px solid var(--cx-border);border-radius:999px;
  font-weight:700;background:#fff
}

#tab1:checked ~ .cx-tabs-bar label[for="tab1"], #tab2:checked ~ .cx-tabs-bar label[for="tab2"] {
  background:linear-gradient(90deg,var(--cx-brand),#8f94fb);color:#fff;border-color:transparent
}

.cx-tabs-content {position:relative}

.cx-pane {display:none}

#tab1:checked ~ .cx-tabs-content .cx-pane:nth-child(1) {display:block}

#tab2:checked ~ .cx-tabs-content .cx-pane:nth-child(2) {display:block}

.cx-pane-foot {
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.6rem
}

/* ---------- CTA ---------- */

.cx-cta {background:#fff;border-top:1px solid var(--cx-border);padding:28px 0 36px}

.cx-cta-box {
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;border:1px solid var(--cx-border);border-radius:16px;padding:1.1rem 1.2rem;
  box-shadow:0 8px 18px rgba(2,6,23,.06)
}

.cx-cta-box h4 {margin:0;font-weight:800}

.cx-cta-box p {margin:0;color:var(--cx-muted)}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px){.cx-title {font-size:1.9rem}

.cx-quick.grid-sm-2 {grid-template-columns:1fr}

.cx-cta-box {flex-direction:column;align-items:stretch;text-align:center}}

@media (max-width: 575.98px){.cx-title {font-size:1.7rem}}

/* Kurumsal kart CTA düzeni */

.bx-price-wrap {display:flex;flex-direction:column;gap:.2rem}

.bx-note {display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-size:.85rem}

.bx-note i {font-size:1rem;color:var(--primary);opacity:.95}

/* Küçük ghost buton kullanırsan hazır kalsın */

/* --- HERO minimal --- */

.bx-hero .bx-eyebrow {display:inline-flex;gap:.5rem;align-items:center;font-weight:600;color:#64748b}

.bx-hero .bx-title {font-weight:800;line-height:1.2;margin:.25rem 0 .5rem}

.bx-hero .bx-title span {color:var(--primary)}

.bx-hero .bx-sub {color:#475569;margin-bottom:1rem}

.bx-hero .bx-chips {display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}

.bx-chip {display:inline-flex;gap:.4rem;align-items:center;padding:.45rem .7rem;border:1px solid rgba(2,6,23,.08);border-radius:999px;background:#fff;color:#111}

.bx-hero-media img {width:100%;height:auto;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.06)}

/* --- Buttons --- */

.bx-btn-primary {background:linear-gradient(90deg,#4e54c8,#8f94fb);color:#fff;border:none;border-radius:.625rem;padding:.7rem 1.1rem}

.bx-btn-primary:hover {filter:brightness(.95);color:#fff}

.bx-btn-ghost {border:1px solid rgba(2,6,23,.12);background:#fff;color:#111;border-radius:.625rem;padding:.7rem 1.1rem}

.bx-btn-ghost:hover {border-color:var(--primary);color:var(--primary)}

.bx-btn-primary-sm {background:linear-gradient(90deg,#4e54c8,#8f94fb);color:#fff;border:none;border-radius:.55rem;padding:.48rem .85rem}

.bx-btn-primary-sm:hover {filter:brightness(.95);color:#fff}

/* --- Packages --- */

.bx-packages .bx-plan {
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  background:#fff;
  padding:22px;
  display:flex;flex-direction:column;min-height:100%;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
}

.bx-plan-head {margin-bottom:.5rem}

.bx-plan-icon {width:46px;height:46px;border-radius:999px;background:rgba(98,68,197,.1);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.6rem;font-size:20px}

.bx-plan-head h3 {font-weight:800;margin:0 0 .2rem}

.bx-plan-sub {color:#64748b}

.bx-bullets {list-style:none;margin:1rem 0 1.2rem;padding:0}

.bx-bullets li {display:flex;align-items:center;gap:.55rem;margin:.42rem 0;color:#1f2937}

.bx-bullets i {color:#22c55e}

.bx-plan-foot {margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}

.bx-price-wrap {display:flex;flex-direction:column;gap:.2rem}

.bx-price {font-weight:800;font-size:1.1rem;color:#111}

.bx-note {display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-size:.88rem}

.bx-note i {font-size:1rem;color:var(--primary);opacity:.95}

.bx-cta-wrap {display:flex;gap:.5rem;align-items:center}

/* Önerilen rozeti (Orta) */

.bx-plan.badged {position:relative;overflow:visible}

.bx-plan.badged::after {
  content:"Önerilen";
  position:absolute;top:-10px;right:16px;
  background:var(--primary);color:#fff;
  font-size:.75rem;font-weight:700;letter-spacing:.3px;
  padding:.28rem .5rem;border-radius:999px;box-shadow:0 6px 16px rgba(98,68,197,.25)
}

/* Final CTA kutusu */

.bx-cta-box {
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#f8fafc;border:1px solid rgba(2,6,23,.06);
  border-radius:16px;padding:24px
}

.bx-cta-box h4 {margin:0 0 .25rem;font-weight:800}

.bx-cta-box p {margin:0;color:#475569}

@media (max-width: 991.98px){.bx-cta-box {flex-direction:column;align-items:flex-start}}

/* ====== Redesign Additions ====== */

:root {
  --hg-primary:#6366f1;       /* indigo */
  --hg-primary-2:#8b5cf6;     /* violet */
  --hg-dark:#0f172a;
}

.fw-800 {font-weight:800}

.min-vh-75 {min-height:75vh}

/* Hero */

.hero-bg {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,.35), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(139,92,246,.35), transparent 60%),
              linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  color: #fff;
}

.hero-bg .badge.bg-translucent {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
}

.hero-shape {
  position:absolute; inset:0;
  background:
    radial-gradient(400px 200px at 80% 80%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(300px 150px at 20% 70%, rgba(255,255,255,.04), transparent 60%);
  pointer-events:none;
}

/* Glass cards stack */

.stack {display:grid; gap:16px}

.glass-card {
  display:block; padding:18px 18px; border-radius:18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; text-decoration:none;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.glass-card:hover {transform: translateY(-4px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4)}

.icon-wrap {
  width:42px;height:42px;display:inline-grid;place-items:center;
  border-radius:12px;background:rgba(255,255,255,.15); margin-bottom:10px;
  font-size:20px;
}

/* Feature strip */

.feature-item i {font-size:26px; display:block; margin-bottom:6px; color:var(--hg-primary)}

.feature-item p {margin:0; font-weight:600}

/* Pill switch */

.pill-switch .nav-link {
  border-radius:999px; padding:.5rem 1.25rem; margin:0 .25rem;
  border:1px solid #e5e7eb; background:#fff; color:#111827; font-weight:600;
}

.pill-switch .nav-link.active {
  background: linear-gradient(90deg, var(--hg-primary), var(--hg-primary-2));
  color:#fff; border-color:transparent;
  box-shadow:0 6px 18px rgba(99,102,241,.25);
}

/* Cards */

.soft-card {
  border:1px solid #eef2ff; border-radius:16px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.soft-card:hover {transform: translateY(-4px); box-shadow:0 12px 30px rgba(17,24,39,.08)}

.card-hover {border:1px solid #eef2ff; transition: transform .25s ease, box-shadow .25s ease}

.card-hover:hover {transform: translateY(-6px); box-shadow:0 16px 32px rgba(17,24,39,.1)}

/* Utilities */

.custom-shadow {box-shadow:0 8px 24px rgba(17,24,39,.06)}

.py-6 {padding-top:4rem!important; padding-bottom:4rem!important}

.bg-translucent {background:rgba(255,255,255,.15)}

.opacity-90 {opacity:.9}

/* Footer small fixes */

.footer .top .social-icons .list-inline li {display:inline-block;padding:0 .4rem}

.footer .footer-links {list-style:none;padding-left:0;margin:0}

.footer .footer-links li+li {margin-top:.4rem}

/* Back to top */

.back-to-top {position:fixed; right:24px; bottom:24px; z-index:1030}

/* Responsive tweaks */

@media (max-width: 991.98px){.hero-bg {padding-top:1rem}}