*{
    margin          : 0;
    padding         : 0;
    box-sizing      : border-box;
    font-family     : Arial, sans-serif;
}

body
{
    background      : #f5f5f5;
    color           : #333;
}

/* ================= HEADER ================= */
header
{
    background      : linear-gradient(135deg,#0d6efd,#084298);
    color           : #fff;
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : space-between;
    padding         : 12px 16px;
    gap             : 10px;
}

/* ================= LOGO ================= */
.logo
{
    display         : flex;
    flex-direction  : column;
    max-width       : 100%;
    overflow        : hidden;
}

.logo tulis_logo
{
    font-size       : 24px;
    font-weight     : bold;
    line-height     : 1.2;
    word-wrap       : break-word;
}

.logo tulis_tag_line
{
    font-size       : 12px;
    line-height     : 1.3;
    opacity         : 0.9;
    word-wrap       : break-word;
}

/* ================= NAV ================= */
.nav
{
    width           : 100%;
}

.nav-horizontal
{
    display         : flex;
    gap             : 10px;
    overflow-x      : auto;
    padding         : 8px 0;
    scrollbar-width : none;
    -ms-overflow-style  : none;
}

.nav-horizontal::-webkit-scrollbar
{
    display         : none;
}

.nav-horizontal a
{
    flex            : 0 0 auto;
    padding         : 6px 16px;
    background      : rgba(255,255,255,0.15);
    border-radius   : 6px;
    font-size       : 14px;
    color           : #fff;
    text-decoration : none;
    white-space     : nowrap;
}

/* ================= DESKTOP ================= */
@media(min-width:769px)
{
    header
    {
        flex-wrap       : nowrap;
    }

    .logo
    {
        max-width       : 45%;
    }

    .nav
    {
        width           : auto;
    }

    .nav-horizontal
    {
        padding         : 0;
    }
}

/* ================= MOBILE ================= */
@media(max-width:768px)
{
    header
    {
        align-items     : flex-start;
    }

    .logo
    {
        width           : 100%;
    }

    .nav-horizontal a
    {
        font-size       : 13px;
        padding         : 6px 14px;
    }
   
}


/* Produk */
.produk 
{
    padding             : 50px;
    text-align          : center;
}

.produk h2 
{
    margin-bottom       : 30px;
    color               : RoyalBlue;
}

.produk-list 
{
    display             : grid;
    grid-template-columns   : repeat(auto-fit, minmax(220px, 1fr));
    gap                 : 20px;
}

.catatan
{
    padding             : 50px;
    text-align          : left;
    
}

.card 
{
    background          : white;
    border-radius       : 8px;
    padding             : 15px;
    box-shadow          : 0 2px 8px rgba(0,0,0,0.1);
}



.card li
{
    margin-left         : 10px;
}

.card img 
{
    width               : 100%;
    height              : 180px;
    object-fit          : contain;
    border-radius       : 5px;
}

.card h3 
{
    margin              : 10px 0;
}

.card label
{
    display             : block;
    margin-top          : 10px;
    font-weight         : bold;
    color               : RoyalBlue;
}

.card input
{
    width               : 100%;
    padding             : 8px;
    margin-top          : 5px;
    border              : 1px solid #ccc;
    border-radius       : 5px;
    border-color        : DodgerBlue;
}

.card select
{
    width               : 100%;
    padding             : 8px;
    margin-top          : 5px;
    border              : 1px solid #ccc;
    border-radius       : 5px;
    border-color        : DodgerBlue;
}

.card button
{
    margin-top          : 15px;
    width               : 100%;
    background          : #7a8be4;
    color               : white;
    border              : none;
    padding             : 10px;
    border-radius       : 5px;
    cursor              : pointer;
}

.card  button:hover
{
    background          : #353de7;
}

.card salah
{
    font                : 12px monospace;
    color               : red;
}

.card textarea
{
    width               : 100%;
    height              : 70px;
    border-color        : DodgerBlue; 
    border-radius       : 5px;
    resize              : none;
}

/* Footer */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
}
/* ================= CATATAN KEAMANAN ================= */
.catatan
{
    padding         : 15px 15px;
    margin-top      : 15px;
}

.catatan .card
{
    background      : linear-gradient(135deg, #e7f1ff, #ffffff);
    border-left     : 6px solid RoyalBlue;
    box-shadow      : 0 4px 12px rgba(13,110,253,0.15);
    padding         : 20px;
}

/* Judul catatan */
.catatan .card b
{
    display         : block;
    font-size       : 16px;
    color           : RoyalBlue;
    margin-bottom   : 10px;
}

/* List catatan */
.catatan .card li
{
    list-style      : none;
    margin-left     : 0;
    margin-bottom   : 8px;
    padding-left    : 22px;
    position        : relative;
    font-size       : 14px;
    line-height     : 1.5;
    color           : #333;
}

/* Icon bullet custom */
.catatan .card li::before
{
    content         : "✔";
    position        : absolute;
    left            : 0;
    color           : DodgerBlue;
    font-weight     : bold;
}

/* Mobile adjustment */
@media(max-width:768px)
{
    .catatan .card
    {
        padding     : 16px;
    }

    .catatan .card li
    {
        font-size   : 15px;
    }
}
/* ================= SAMAKAN LEBAR CARD DI MOBILE ================= */
@media(max-width:768px)
{
    .produk .card,
    .catatan .card
    {
        max-width: 100% !important;
        width: 100%;
        margin: 0 auto;
    }

    .produk,
    .catatan
    {
        padding-left: 15px;
        padding-right: 15px;
    }
  
}
/* ================= PASSWORD TOGGLE ================= */
.password-wrapper{
    position: relative;
    width: 100%;
}

.password-wrapper input{
    padding-right: 42px; /* ruang icon */
}

.toggle-password{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #777;
    user-select: none;
}

.toggle-password:hover{
    color: #2f6f4e;
}
/* Footer */
footer 
{
    background      : linear-gradient(135deg,#0d6efd,#084298);
    color           : white;
    text-align      : center;
    padding         : 15px;
    margin-top      : 40px;
}