:root {
    --sorai-primary: #c93424;
    --sorai-primary-dark: #a92318;
    --sorai-primary-light: #e65f50;

    --sorai-pink: #ffd9d4;
    --sorai-pink-soft: #fff3f1;
    --sorai-background: #fffaf9;

    --sorai-heading: #332725;
    --sorai-text: #514541;
    --sorai-muted: #837570;

    --sorai-border: #eedfdb;
    --sorai-white: #ffffff;

    --sorai-shadow-sm:
        0 8px 24px rgba(70, 43, 36, 0.07);

    --sorai-shadow-md:
        0 15px 38px rgba(70, 43, 36, 0.12);

    --sorai-shadow-lg:
        0 25px 60px rgba(70, 43, 36, 0.16);
}


/* =========================================================
   DASAR
========================================================= */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--sorai-text);
    background-color: var(--sorai-white);
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

button,
input {
    outline: none;
}

.sorai-container {
    width: calc(100% - 40px);
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.header_area {
    z-index: 999;
}

.header_area .main_box {
    min-height: 90px;

    border-bottom:
        1px solid
        rgba(201, 52, 36, 0.08);

    background-color:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 5px 24px
        rgba(57, 39, 34, 0.07);
}

.header_area .navbar {
    min-height: 90px;

    padding-top: 0;
    padding-bottom: 0;
}

.header_area .navbar .container {
    width: calc(100% - 40px);
    max-width: 1500px;
}


/* =========================================================
   LOGO
========================================================= */

.sorai-logo {
    display: flex;
    width: 178px;
    height: 68px;
    flex: 0 0 178px;
    align-items: center;
    justify-content: center;
    margin-right: 28px;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
}

.sorai-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   MENU NAVBAR
========================================================= */

.menu_nav {
    align-items: center;
}

.menu_nav .nav-item {
    display: flex;
    align-items: center;
}

.menu_nav .nav-item .nav-link {
    position: relative;

    padding:
        35px 12px !important;

    color:
        var(--sorai-heading);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.25px;

    text-transform: uppercase;

    transition:
        color 0.2s ease;
}

.menu_nav .nav-item .nav-link::after {
    position: absolute;

    right: 12px;
    bottom: 24px;
    left: 12px;

    height: 2px;

    border: 0;

    background-color:
        var(--sorai-primary);

    content: "";

    opacity: 0;

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.menu_nav .nav-item.active > .nav-link,
.menu_nav .nav-item:hover > .nav-link {
    color:
        var(--sorai-primary);
}

.menu_nav .nav-item.active > .nav-link::after,
.menu_nav .nav-item:hover > .nav-link::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* =========================================================
   DROPDOWN KATEGORI
========================================================= */

.menu_nav
.submenu
.dropdown-toggle::after {

    position: static;

    display: inline-block;

    width: 0;
    height: 0;

    margin-left: 5px;

    border-top:
        4px solid;

    border-right:
        4px solid transparent;

    border-bottom:
        0;

    border-left:
        4px solid transparent;

    background:
        transparent;

    opacity: 1;

    transform:
        none;

    vertical-align: middle;
}

.menu_nav
.submenu
.dropdown-menu {

    min-width: 220px;

    padding: 9px;

    border:
        1px solid
        var(--sorai-border);

    border-radius: 12px;

    background-color:
        var(--sorai-white);

    box-shadow:
        var(--sorai-shadow-md);
}

.menu_nav
.submenu
.dropdown-menu
.nav-item {

    display: block;
    width: 100%;
}

.menu_nav
.submenu
.dropdown-menu
.nav-link {

    display: block;

    width: 100%;

    padding:
        11px 13px !important;

    border-radius: 7px;

    color:
        var(--sorai-heading);

    font-size: 12px;
    font-weight: 600;

    text-transform: none;
}

.menu_nav
.submenu
.dropdown-menu
.nav-link::after {

    display: none;
}

.menu_nav
.submenu
.dropdown-menu
.nav-link:hover {

    color:
        var(--sorai-primary);

    background-color:
        var(--sorai-pink-soft);
}


/* =========================================================
   MENU MASUK & DAFTAR
========================================================= */

.navbar-login {
    color:
        var(--sorai-primary) !important;
}

.navbar-register {
    margin-left: 4px;

    padding:
        11px 18px !important;

    border-radius: 9px;

    color:
        var(--sorai-white) !important;

    background-color:
        var(--sorai-primary);

    box-shadow:
        0 8px 20px
        rgba(201, 52, 36, 0.22);

    line-height:
        normal !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.navbar-register::after {
    display:
        none !important;
}

.navbar-register:hover {
    color:
        var(--sorai-white) !important;

    background-color:
        var(--sorai-primary-dark);

    box-shadow:
        0 11px 24px
        rgba(201, 52, 36, 0.3);

    transform:
        translateY(-1px);
}


/* =========================================================
   IKON KANAN
========================================================= */

.navbar-right {
    display: flex;

    align-items: center;

    margin-left: 15px;

    white-space: nowrap;
}

.navbar-right .nav-item {
    display: flex;

    align-items: center;
    justify-content: center;
}

.navbar-right .cart,
.navbar-right .search {

    display: flex;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    margin-left: 3px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    color:
        var(--sorai-heading);

    background-color:
        transparent;

    font-size: 17px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.navbar-right .cart:hover,
.navbar-right .search:hover {

    color:
        var(--sorai-primary);

    background-color:
        var(--sorai-pink-soft);

    transform:
        translateY(-1px);
}


/* =========================================================
   AKUN PELANGGAN
========================================================= */

.navbar-account {
    margin-left: 8px;
}

.customer-menu {
    display:
        flex !important;

    min-height: 48px;

    align-items: center;

    gap: 10px;

    padding:
        4px 0 4px 8px !important;
}

.customer-menu::after {
    position:
        static !important;

    display:
        inline-block !important;

    width:
        0 !important;

    height:
        0 !important;

    margin-left:
        2px !important;

    border-top:
        4px solid !important;

    border-right:
        4px solid transparent !important;

    border-bottom:
        0 !important;

    border-left:
        4px solid transparent !important;

    background:
        transparent !important;

    content:
        "" !important;

    opacity:
        1 !important;

    transform:
        none !important;
}

.customer-avatar {
    display:
        inline-flex;

    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    align-items:
        center;

    justify-content:
        center;

    border:
        3px solid
        #ffe5e1;

    border-radius: 50%;

    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    box-shadow:
        0 5px 14px
        rgba(201, 52, 36, 0.2);

    font-size: 14px;
    font-weight: 700;
}

.customer-name {
    display:
        inline-block;

    max-width: 135px;

    overflow: hidden;

    color:
        var(--sorai-heading);

    font-size: 13px;
    font-weight: 700;

    text-overflow: ellipsis;

    text-transform: none;

    white-space: nowrap;
}

.customer-dropdown {
    right: 0;

    left:
        auto !important;

    min-width:
        245px;

    padding:
        10px;

    border:
        1px solid
        var(--sorai-border);

    border-radius:
        13px;

    background-color:
        var(--sorai-white);

    box-shadow:
        var(--sorai-shadow-md);
}

.customer-info {
    display: flex;

    flex-direction:
        column;

    padding:
        10px 13px;
}

.customer-info strong {
    color:
        var(--sorai-heading);

    font-size:
        14px;
}

.customer-info small {
    margin-top:
        3px;

    color:
        var(--sorai-muted);

    font-size:
        11px;
}

.customer-dropdown
.dropdown-divider {

    margin:
        5px 0;

    border-color:
        var(--sorai-border);
}

.customer-dropdown
.dropdown-item {

    display:
        block;

    width:
        100%;

    padding:
        10px 13px;

    border: 0;

    border-radius:
        7px;

    color:
        var(--sorai-heading);

    background-color:
        transparent;

    font-size:
        12px;

    text-align:
        left;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.customer-dropdown
.dropdown-item:hover {

    color:
        var(--sorai-primary);

    background-color:
        var(--sorai-pink-soft);
}

.customer-dropdown
.logout-button {

    color:
        #dc3545;

    cursor:
        pointer;
}


/* =========================================================
   SEARCH BAWAAN TEMPLATE KARMA
========================================================= */

.search_input {
    background-color:
        var(--sorai-primary);

    box-shadow:
        0 8px 22px
        rgba(78, 37, 29, 0.15);
}

.search_input .container {
    width:
        calc(100% - 40px);

    max-width:
        1320px;
}

.search_input .form-control {
    height:
        58px;

    padding-right:
        15px;

    padding-left:
        15px;

    border: 0;

    color:
        var(--sorai-white);

    background-color:
        transparent;

    font-size:
        15px;
}

.search_input .form-control:focus {
    border: 0;

    outline: 0;

    box-shadow:
        none;
}

.search_input
.form-control::placeholder {

    color:
        rgba(255, 255, 255, 0.82);
}

.search_input button {
    width:
        40px;

    border: 0;

    background-color:
        transparent;
}

.search_input
#close_search {

    display:
        flex;

    min-width:
        42px;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--sorai-white);

    font-size:
        20px;

    cursor:
        pointer;
}


/* =========================================================
   HERO
========================================================= */

.sorai-hero {
    position:
        relative;

    min-height:
        680px;

    padding:
        150px 0 70px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(255, 201, 193, 0.7),
            transparent 31%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(255, 226, 220, 0.82),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #fffdfc 0%,
            #fff2ef 100%
        );
}

.sorai-hero::before {
    position:
        absolute;

    top:
        130px;

    right:
        -140px;

    width:
        420px;

    height:
        420px;

    border:
        1px solid
        rgba(201, 52, 36, 0.09);

    border-radius:
        50%;

    content:
        "";
}

.sorai-hero::after {
    position:
        absolute;

    bottom:
        -180px;

    left:
        -130px;

    width:
        400px;

    height:
        400px;

    border-radius:
        50%;

    background-color:
        rgba(255, 255, 255, 0.45);

    content:
        "";
}

.hero-layout {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items:
        center;

    gap:
        65px;
}

.hero-subtitle {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        9px 17px;

    border:
        1px solid
        rgba(201, 52, 36, 0.1);

    border-radius:
        30px;

    color:
        var(--sorai-primary);

    background-color:
        rgba(255, 255, 255, 0.9);

    box-shadow:
        var(--sorai-shadow-sm);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.4px;
}

.hero-subtitle::before {
    width:
        7px;

    height:
        7px;

    margin-right:
        8px;

    border-radius:
        50%;

    background-color:
        var(--sorai-primary);

    content:
        "";
}

.hero-content h1 {
    max-width:
        620px;

    margin:
        22px 0 20px;

    color:
        var(--sorai-heading);

    font-size:
        clamp(
            46px,
            5vw,
            72px
        );

    font-weight:
        700;

    letter-spacing:
        -1.8px;

    line-height:
        1.07;
}

.hero-content h1 span {
    color:
        var(--sorai-primary);
}

.hero-content p {
    max-width:
        560px;

    margin-bottom:
        30px;

    color:
        var(--sorai-muted);

    font-size:
        16px;

    line-height:
        1.85;
}

.hero-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.sorai-primary-button,
.sorai-outline-button {

    display:
        inline-flex;

    min-height:
        50px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px 25px;

    border-radius:
        10px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sorai-primary-button {
    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    box-shadow:
        0 12px 27px
        rgba(201, 52, 36, 0.24);
}

.sorai-primary-button:hover {
    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary-dark);

    box-shadow:
        0 15px 30px
        rgba(201, 52, 36, 0.3);

    transform:
        translateY(-2px);
}

.sorai-outline-button {
    border:
        1px solid
        rgba(201, 52, 36, 0.45);

    color:
        var(--sorai-primary);

    background-color:
        rgba(255, 255, 255, 0.8);
}

.sorai-outline-button:hover {
    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    transform:
        translateY(-2px);
}

.hero-image {
    position:
        relative;

    display:
        flex;

    min-height:
        500px;

    align-items:
        center;

    justify-content:
        center;
}

.hero-image::before {
    position:
        absolute;

    width:
        480px;

    height:
        480px;

    border:
        1px solid
        rgba(201, 52, 36, 0.07);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 231, 226, 0.76)
        );

    box-shadow:
        0 30px 70px
        rgba(91, 55, 46, 0.12),
        inset 0 0 0 18px
        rgba(255, 255, 255, 0.35);

    content:
        "";
}

.hero-image img {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        650px;

    height:
        510px;

    filter:
        drop-shadow(
            0 25px 28px
            rgba(65, 39, 33, 0.17)
        );

    object-fit:
        contain;
}


/* =========================================================
   BAGIAN UMUM
========================================================= */

.sorai-section {
    padding:
        88px 0;
}

.sorai-section-soft {
    background:
        linear-gradient(
            180deg,
            #fff8f6 0%,
            #fffdfc 100%
        );
}

.section-heading {
    max-width:
        720px;

    margin:
        0 auto 42px;

    text-align:
        center;
}

.section-heading small {
    color:
        var(--sorai-primary);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;
}

.section-heading h2 {
    margin:
        10px 0 13px;

    color:
        var(--sorai-heading);

    font-size:
        36px;

    font-weight:
        700;

    letter-spacing:
        -0.5px;

    line-height:
        1.2;
}

.section-heading p {
    margin:
        0;

    color:
        var(--sorai-muted);

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   FITUR
========================================================= */

.feature-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    overflow:
        hidden;

    border:
        1px solid
        var(--sorai-border);

    border-radius:
        20px;

    background-color:
        var(--sorai-white);

    box-shadow:
        var(--sorai-shadow-sm);
}

.feature-item {
    position:
        relative;

    min-width:
        0;

    padding:
        32px 20px;

    border-right:
        1px solid
        var(--sorai-border);

    text-align:
        center;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.feature-item:last-child {
    border-right:
        0;
}

.feature-item:hover {
    z-index:
        2;

    background-color:
        var(--sorai-pink-soft);

    transform:
        translateY(-3px);
}

.feature-item img {
    width:
        44px;

    height:
        44px;

    margin:
        0 auto 16px;

    object-fit:
        contain;
}

.feature-item h3 {
    margin-bottom:
        8px;

    color:
        var(--sorai-heading);

    font-size:
        15px;

    font-weight:
        700;
}

.feature-item p {
    margin:
        0;

    color:
        var(--sorai-muted);

    font-size:
        12px;

    line-height:
        1.55;
}


/* =========================================================
   KATEGORI
========================================================= */

.category-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        24px;
}

.category-card {
    position:
        relative;

    display:
        block;

    min-width:
        0;

    height:
        345px;

    overflow:
        hidden;

    border-radius:
        18px;

    background-color:
        #ece5e3;

    box-shadow:
        var(--sorai-shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.category-card img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}

.category-card::after {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(35, 20, 17, 0.78) 0%,
            rgba(35, 20, 17, 0.15) 58%,
            transparent 100%
        );

    content:
        "";
}

.category-card:hover {
    box-shadow:
        var(--sorai-shadow-lg);

    transform:
        translateY(-7px);
}

.category-card:hover img {
    transform:
        scale(1.07);
}

.category-content {
    position:
        absolute;

    z-index:
        2;

    right:
        20px;

    bottom:
        20px;

    left:
        20px;

    color:
        var(--sorai-white);
}

.category-content h3 {
    margin:
        0 0 5px;

    color:
        var(--sorai-white);

    font-size:
        22px;

    font-weight:
        700;
}

.category-content span {
    color:
        rgba(255, 255, 255, 0.86);

    font-size:
        12px;
}


/* =========================================================
   PRODUK
========================================================= */

.product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        24px;
}

.product-card {
    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--sorai-border);

    border-radius:
        17px;

    background-color:
        var(--sorai-white);

    box-shadow:
        var(--sorai-shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow:
        var(--sorai-shadow-md);

    transform:
        translateY(-7px);
}

.product-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #f9f3f1,
            #fffdfc
        );
}

.product-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}

.product-card:hover
.product-image img {

    transform:
        scale(1.06);
}

.product-info {
    padding:
        19px;
}

.product-name {
    display:
        -webkit-box;

    min-height:
        44px;

    margin-bottom:
        10px;

    overflow:
        hidden;

    color:
        var(--sorai-heading);

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.45;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}

.product-name:hover {
    color:
        var(--sorai-primary);
}

.product-price {
    margin-bottom:
        15px;

    color:
        var(--sorai-primary);

    font-size:
        17px;

    font-weight:
        700;
}

.product-detail-button {
    display:
        flex;

    width:
        100%;

    min-height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.product-detail-button:hover {
    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary-dark);

    transform:
        translateY(-1px);
}

.empty-product {
    grid-column:
        1 / -1;

    padding:
        38px;

    border:
        1px dashed
        var(--sorai-border);

    border-radius:
        14px;

    color:
        var(--sorai-muted);

    background-color:
        var(--sorai-white);

    text-align:
        center;
}


/* =========================================================
   PROMO
========================================================= */

.promo-box {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            var(--sorai-primary-dark),
            var(--sorai-primary-light)
        );

    box-shadow:
        var(--sorai-shadow-lg);
}

.promo-content {
    display:
        flex;

    min-height:
        440px;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        58px;

    color:
        var(--sorai-white);
}

.promo-content h2 {
    margin-bottom:
        17px;

    color:
        var(--sorai-white);

    font-size:
        40px;

    font-weight:
        700;

    letter-spacing:
        -0.6px;
}

.promo-content p {
    max-width:
        510px;

    margin-bottom:
        28px;

    color:
        rgba(255, 255, 255, 0.87);

    font-size:
        14px;

    line-height:
        1.8;
}

.promo-button {
    display:
        inline-flex;

    min-height:
        48px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 23px;

    border-radius:
        9px;

    color:
        var(--sorai-primary);

    background-color:
        var(--sorai-white);

    box-shadow:
        0 10px 24px
        rgba(74, 29, 22, 0.17);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.promo-button:hover {
    color:
        var(--sorai-primary-dark);

    box-shadow:
        0 13px 28px
        rgba(74, 29, 22, 0.23);

    transform:
        translateY(-2px);
}

.promo-image {
    min-height:
        440px;

    overflow:
        hidden;
}

.promo-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;
}

.promo-box:hover
.promo-image img {

    transform:
        scale(1.04);
}


/* =========================================================
   TESTIMONI
========================================================= */

.testimonial-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        24px;
}

.testimonial-card {
    position:
        relative;

    min-width:
        0;

    padding:
        29px;

    overflow:
        hidden;

    border:
        1px solid
        var(--sorai-border);

    border-radius:
        17px;

    background-color:
        var(--sorai-white);

    box-shadow:
        var(--sorai-shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.testimonial-card::before {
    position:
        absolute;

    top:
        -38px;

    right:
        -38px;

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background-color:
        var(--sorai-pink-soft);

    content:
        "";
}

.testimonial-card:hover {
    box-shadow:
        var(--sorai-shadow-md);

    transform:
        translateY(-7px);
}

.testimonial-stars {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        15px;

    color:
        #f4a62a;

    font-size:
        14px;

    letter-spacing:
        2px;
}

.testimonial-card p {
    position:
        relative;

    z-index:
        2;

    min-height:
        78px;

    margin-bottom:
        21px;

    color:
        var(--sorai-muted);

    font-size:
        13px;

    line-height:
        1.75;
}

.testimonial-user {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.testimonial-avatar {
    display:
        flex;

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    align-items:
        center;

    justify-content:
        center;

    border:
        3px solid
        #ffe4df;

    border-radius:
        50%;

    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    font-weight:
        700;
}

.testimonial-user strong {
    display:
        block;

    color:
        var(--sorai-heading);

    font-size:
        13px;
}

.testimonial-user small {
    color:
        var(--sorai-muted);

    font-size:
        11px;
}


/* =========================================================
   FOOTER
========================================================= */

.sorai-footer {
    padding:
        65px 0 25px;

    color:
        #c7bebb;

    background:
        linear-gradient(
            145deg,
            #2b211f,
            #1f1816
        );
}

.footer-grid {
    display:
        grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap:
        48px;
}

.footer-logo {
    width:
        175px;

    height:
        70px;

    margin-bottom:
        19px;

    overflow:
        hidden;

    border-radius:
        10px;

    background-color:
        var(--sorai-pink);
}

.footer-logo img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.footer-column h4 {
    margin-bottom:
        19px;

    color:
        var(--sorai-white);

    font-size:
        16px;

    font-weight:
        700;
}

.footer-column p {
    color:
        #c7bebb;

    font-size:
        13px;

    line-height:
        1.75;
}

.footer-links {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.footer-links li {
    margin-bottom:
        11px;
}

.footer-links a {
    color:
        #c7bebb;

    font-size:
        13px;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.footer-links a:hover {
    padding-left:
        4px;

    color:
        var(--sorai-white);
}

.footer-social {
    display:
        flex;

    gap:
        10px;
}

.footer-social a {
    display:
        flex;

    width:
        39px;

    height:
        39px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--sorai-white);

    background-color:
        rgba(255, 255, 255, 0.1);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.footer-social a:hover {
    color:
        var(--sorai-white);

    background-color:
        var(--sorai-primary);

    transform:
        translateY(-2px);
}

.footer-bottom {
    margin-top:
        42px;

    padding-top:
        23px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    color:
        #978c88;

    font-size:
        12px;

    text-align:
        center;
}


/* =========================================================
   LAPTOP KECIL
========================================================= */

@media (max-width: 1250px) {

    .header_area .navbar .container {
        width:
            calc(100% - 24px);
    }

    .sorai-logo {
        width:
            150px;

        height:
            60px;

        flex-basis:
            150px;

        margin-right:
            14px;
    }

    .menu_nav
    .nav-item
    .nav-link {

        padding-right:
            8px !important;

        padding-left:
            8px !important;

        font-size:
            11px;
    }

    .menu_nav
    .nav-item
    .nav-link::after {

        right:
            8px;

        left:
            8px;
    }

    .customer-name {
        max-width:
            100px;
    }

    .navbar-right {
        margin-left:
            8px;
    }

    .hero-layout {
        gap:
            35px;
    }

    .hero-content h1 {
        font-size:
            54px;
    }
}


/* =========================================================
   TABLET DAN NAVBAR MOBILE
========================================================= */

@media (max-width: 991px) {

    .header_area .main_box,
    .header_area .navbar {
        min-height:
            76px;
    }

    .header_area .navbar {
        padding:
            9px 0;
    }

    .sorai-logo {
        width:
            140px;

        height:
            56px;

        flex-basis:
            140px;

        margin-right:
            0;
    }

    .navbar-toggler {
        padding:
            8px;

        border:
            0;

        border-radius:
            7px;

        background-color:
            var(--sorai-pink-soft);
    }

    .navbar-collapse {
        max-height:
            calc(100vh - 82px);

        margin-top:
            10px;

        padding:
            12px;

        overflow-y:
            auto;

        border:
            1px solid
            var(--sorai-border);

        border-radius:
            12px;

        background-color:
            var(--sorai-white);

        box-shadow:
            var(--sorai-shadow-md);
    }

    .menu_nav {
        display:
            block;

        width:
            100%;
    }

    .menu_nav .nav-item {
        display:
            block;

        width:
            100%;
    }

    .menu_nav
    .nav-item
    .nav-link {

        display:
            block;

        padding:
            11px 12px !important;

        border-radius:
            7px;

        font-size:
            12px;
    }

    .menu_nav
    .nav-item
    .nav-link::after {

        display:
            none;
    }

    .menu_nav
    .nav-item.active
    > .nav-link,

    .menu_nav
    .nav-item:hover
    > .nav-link {

        background-color:
            var(--sorai-pink-soft);
    }

    .menu_nav
    .submenu
    .dropdown-menu {

        position:
            static;

        width:
            100%;

        margin-top:
            4px;

        border:
            0;

        box-shadow:
            none;
    }

    .navbar-register {
        display:
            inline-flex !important;

        width:
            auto !important;

        margin:
            5px 0 7px;

        padding:
            10px 16px !important;
    }

    .navbar-right {
        width:
            100%;

        justify-content:
            flex-start;

        margin:
            8px 0 0;

        padding-top:
            8px;

        border-top:
            1px solid
            var(--sorai-border);
    }

    .navbar-account {
        margin-left:
            7px;
    }

    .customer-dropdown {
        position:
            static;

        width:
            100%;

        margin-top:
            7px;

        box-shadow:
            none;
    }

    .sorai-hero {
        min-height:
            560px;

        padding:
            118px 0 48px;
    }

    .hero-layout {
        grid-template-columns:
            0.95fr 1.05fr;

        gap:
            22px;
    }

    .hero-content h1 {
        font-size:
            41px;
    }

    .hero-content p {
        font-size:
            14px;
    }

    .hero-image {
        min-height:
            360px;
    }

    .hero-image::before {
        width:
            330px;

        height:
            330px;
    }

    .hero-image img {
        height:
            370px;
    }

    .product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .promo-content {
        padding:
            40px;
    }

    .promo-content h2 {
        font-size:
            32px;
    }
}


/* =========================================================
   HANDPHONE
========================================================= */

@media (max-width: 767px) {

    .sorai-container {
        width:
            calc(100% - 16px);
    }

    .sorai-section {
        padding:
            47px 0;
    }

    .section-heading {
        margin-bottom:
            22px;
    }

    .section-heading small {
        font-size:
            8px;

        letter-spacing:
            1px;
    }

    .section-heading h2 {
        margin:
            6px 0 7px;

        font-size:
            21px;
    }

    .section-heading p {
        font-size:
            9px;

        line-height:
            1.55;
    }


    /* HERO */

    .sorai-hero {
        min-height:
            365px;

        padding:
            98px 0 27px;
    }

    .sorai-hero::before {
        top:
            90px;

        right:
            -90px;

        width:
            190px;

        height:
            190px;
    }

    .sorai-hero::after {
        bottom:
            -90px;

        left:
            -70px;

        width:
            180px;

        height:
            180px;
    }

    .hero-layout {
        grid-template-columns:
            0.95fr 1.05fr;

        gap:
            8px;
    }

    .hero-subtitle {
        padding:
            5px 8px;

        font-size:
            7px;
    }

    .hero-subtitle::before {
        width:
            4px;

        height:
            4px;

        margin-right:
            4px;
    }

    .hero-content h1 {
        margin:
            8px 0;

        font-size:
            clamp(
                18px,
                6.4vw,
                27px
            );

        letter-spacing:
            -0.4px;

        line-height:
            1.12;
    }

    .hero-content p {
        display:
            -webkit-box;

        margin-bottom:
            11px;

        overflow:
            hidden;

        font-size:
            8px;

        line-height:
            1.45;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            4;
    }

    .hero-actions {
        gap:
            5px;
    }

    .sorai-primary-button,
    .sorai-outline-button {

        min-height:
            28px;

        padding:
            6px 8px;

        border-radius:
            5px;

        font-size:
            7px;
    }

    .hero-image {
        min-height:
            215px;
    }

    .hero-image::before {
        width:
            190px;

        height:
            190px;

        box-shadow:
            0 12px 30px
            rgba(91, 55, 46, 0.11),
            inset 0 0 0 8px
            rgba(255, 255, 255, 0.35);
    }

    .hero-image img {
        height:
            215px;
    }


    /* FITUR */

    .feature-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        border-radius:
            10px;
    }

    .feature-item {
        padding:
            13px 4px;
    }

    .feature-item img {
        width:
            24px;

        height:
            24px;

        margin-bottom:
            6px;
    }

    .feature-item h3 {
        margin-bottom:
            3px;

        font-size:
            8px;
    }

    .feature-item p {
        font-size:
            6px;

        line-height:
            1.3;
    }


    /* KATEGORI */

    .category-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            6px;
    }

    .category-card {
        height:
            145px;

        border-radius:
            8px;
    }

    .category-content {
        right:
            7px;

        bottom:
            7px;

        left:
            7px;
    }

    .category-content h3 {
        margin-bottom:
            1px;

        font-size:
            10px;
    }

    .category-content span {
        font-size:
            6px;
    }


    /* PRODUK */

    .product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            6px;
    }

    .product-card {
        border-radius:
            8px;
    }

    .product-info {
        padding:
            7px;
    }

    .product-name {
        min-height:
            25px;

        margin-bottom:
            4px;

        font-size:
            8px;

        line-height:
            1.4;
    }

    .product-price {
        margin-bottom:
            6px;

        font-size:
            8px;
    }

    .product-detail-button {
        min-height:
            24px;

        border-radius:
            4px;

        font-size:
            7px;
    }

    .empty-product {
        padding:
            20px;

        font-size:
            9px;
    }


    /* PROMO */

    .promo-box {
        grid-template-columns:
            1fr 1fr;

        border-radius:
            11px;
    }

    .promo-content {
        min-height:
            220px;

        padding:
            15px;
    }

    .promo-content h2 {
        margin-bottom:
            7px;

        font-size:
            18px;
    }

    .promo-content p {
        display:
            -webkit-box;

        margin-bottom:
            11px;

        overflow:
            hidden;

        font-size:
            8px;

        line-height:
            1.45;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            5;
    }

    .promo-button {
        min-height:
            28px;

        padding:
            6px 10px;

        border-radius:
            5px;

        font-size:
            7px;
    }

    .promo-image {
        min-height:
            220px;
    }


    /* TESTIMONI */

    .testimonial-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            6px;
    }

    .testimonial-card {
        padding:
            9px;

        border-radius:
            8px;
    }

    .testimonial-card::before {
        top:
            -22px;

        right:
            -22px;

        width:
            55px;

        height:
            55px;
    }

    .testimonial-stars {
        margin-bottom:
            5px;

        font-size:
            7px;

        letter-spacing:
            0;
    }

    .testimonial-card p {
        display:
            -webkit-box;

        min-height:
            42px;

        margin-bottom:
            7px;

        overflow:
            hidden;

        font-size:
            7px;

        line-height:
            1.4;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            4;
    }

    .testimonial-user {
        gap:
            4px;
    }

    .testimonial-avatar {
        width:
            24px;

        height:
            24px;

        flex:
            0 0 24px;

        border-width:
            1px;

        font-size:
            8px;
    }

    .testimonial-user strong {
        font-size:
            7px;
    }

    .testimonial-user small {
        display:
            block;

        font-size:
            6px;
    }


    /* FOOTER */

    .sorai-footer {
        padding:
            35px 0 18px;
    }

    .footer-grid {
        grid-template-columns:
            1.3fr 1fr 1fr;

        gap:
            10px;
    }

    .footer-logo {
        width:
            85px;

        height:
            34px;

        margin-bottom:
            8px;

        border-radius:
            5px;
    }

    .footer-column h4 {
        margin-bottom:
            7px;

        font-size:
            8px;
    }

    .footer-column p,
    .footer-links a {

        font-size:
            6px;

        line-height:
            1.45;
    }

    .footer-links li {
        margin-bottom:
            3px;
    }

    .footer-social {
        gap:
            3px;
    }

    .footer-social a {
        width:
            21px;

        height:
            21px;

        font-size:
            7px;
    }

    .footer-bottom {
        margin-top:
            15px;

        padding-top:
            10px;

        font-size:
            6px;
    }
}


/* =========================================================
   HANDPHONE KECIL
========================================================= */

@media (max-width: 370px) {

    .sorai-container {
        width:
            calc(100% - 12px);
    }

    .category-grid,
    .product-grid,
    .testimonial-grid {

        gap:
            4px;
    }

    .category-card {
        height:
            125px;
    }

    .product-info {
        padding:
            6px;
    }

    .product-name {
        font-size:
            7px;
    }

    .product-price {
        font-size:
            7px;
    }

    .promo-content {
        padding:
            11px;
    }

    .footer-grid {
        gap:
            7px;
    }
}


/* =========================================================
   PERBAIKAN PROPORSI DESKTOP
========================================================= */

@media (min-width: 992px) {

    .menu_nav {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;

        /* INI YANG MEMBUAT BERANDA DEKAT LOGO */
        justify-content: flex-start;

        gap: 10px;

        margin-left: 2 !important;
        margin-right: 2 !important;
    }

    .sorai-logo {
        width: 165px;
        height: 64px;
        flex: 0 0 165px;

        /* JARAK LOGO KE BERANDA */
        margin-right: 2px;
    }

    .menu_nav .nav-item .navbar-register {
        display: inline-flex !important;

        /* DAFTAR DIPERBESAR SEDIKIT */
        min-width: 86px;
        min-height: 48px;

        align-items: center;
        justify-content: center;

        margin: 0 0 0 6px !important;

        padding: 11px 20px !important;

        border-radius: 10px;

        font-size: 12px;

        line-height: 1 !important;

        white-space: nowrap;
    }
}


/* =========================================================
   LAPTOP 992–1299 PX
========================================================= */

@media
(min-width: 992px)
and
(max-width: 1299px) {

    .header_area
    .navbar
    .container {

        width:
            calc(100% - 30px);
    }

    .sorai-logo {
        width:
            135px;

        height:
            54px;

        flex-basis:
            135px;

        margin-right:
            10px;
    }

    .menu_nav
    .nav-item
    .nav-link {

        padding-right:
            7px !important;

        padding-left:
            7px !important;

        font-size:
            10px;
    }

    .menu_nav
    .nav-item
    .menu_nav .nav-item .navbar-register {
    display: inline-flex !important;

    min-width: 82px;
    min-height: 46px;

    align-items: center;
    justify-content: center;

    margin: 0 0 0 6px !important;

    padding: 11px 21px !important;

    border-radius: 9px;

    color: var(--sorai-white) !important;
    background-color: var(--sorai-primary);

    line-height: 1 !important;
    white-space: nowrap;
}

    .navbar-right {
        margin-left:
            6px;
    }

    .navbar-right
    .cart,

    .navbar-right
    .search {

        width:
            35px;

        height:
            35px;
    }

    .customer-name {
        max-width:
            85px;
    }

    .sorai-container {
        width:
            calc(100% - 60px);

        max-width:
            1140px;
    }

    .hero-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.9fr);

        gap:
            30px;
    }

    .hero-content h1 {
        font-size:
            50px;
    }

    .hero-image img {
        max-width:
            470px;

        height:
            420px;
    }
}


/* =========================================================
   FIX KHUSUS BERANDA
   HANYA MEMBERI JARAK DARI LOGO
========================================================= */

@media (min-width: 1300px) {

    .menu_nav > .nav-item:first-child {
        margin-left:
            0px !important;
    }

}

@media (min-width: 992px) and (max-width: 1299px) {

    .menu_nav .nav-item .nav-link {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }
}