div {
	box-sizing: border-box;
}

body {
    background: #f1f5f9;
    font-family: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container2 {
    width: 65%;
    margin: 0 auto;
    padding: 20px 15px;
}

.space {
    width: 100%;
    height: 120px;
}

/* ==========================================================================
   2. MODERN POPUP & OVERLAY (Clean UI)
   ========================================================================== */
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.4s ease;
    visibility: visible;
    opacity: 1;
    z-index: 9999;
}

.overlay:target {
    visibility: hidden;
    opacity: 0;
}

.popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: 35%;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.popup h2 {
    margin-top: 0;
    color: #0f172a;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

.popup .close {
    position: absolute;
    top: 15px;
    right: 20px;
    transition: color 0.2s;
    font-size: 26px;
    font-weight: 700;
    text-decoration: none;
    color: #94a3b8;
    line-height: 1;
}

.popup .close:hover {
    color: #e11d48;
}

.popup .content {
    max-height: 40vh;
    overflow: auto;
    margin-top: 15px;
    color: #475569;
    font-family: sans-serif;
    font-size: 14px;
}

/* ==========================================================================
   3. LAYOUT COMPONENTS (Header, Logo, Menu, & Typography)
   ========================================================================== */
.head {
    width: 100%;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.logo {
    display: block;
    width: 1300px;
    max-width: 100%;
    height: 150px;
    background: url("./img/logo-paitohk.webp") center no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background: #cf1727;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2);
}

.menu a {
    display: inline-block;
    padding: 14px 28px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.menu a:hover {
    background: #be123c;
    color: #ffffff;
}

.content {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 5px;
    margin-top: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

h1, h2, h3 {
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
    color: #0f172a;
}

h1 {
    font-size: 28px;
    line-height: 1.3;
}

h2 {
    font-size: 22px;
    margin-top: 40px;
}

h3 {
    font-family: 'Oswald', sans-serif;
    color: #0f172a;
    font-size: 24px;
    border-bottom: 3px solid #e11d48;
    display: inline-block;
    margin: 40px auto 20px;
    padding-bottom: 8px;
    width: 100%;
}

.title-head, .title-footer {
    text-decoration: none;
    color: #0f172a;
    font-weight: bold;
}

.title-head { font-size: 22px; }
.title-footer { font-size: 24px; }

.content p {
    text-align: left;
    font-family: sans-serif;
    font-size: 15px;
    color: #475569;
    margin: 0 0 20px 0;
    line-height: 1.7;
}

a {
    color: #e11d48;
    transition: color 0.2s ease;
}

a:hover {
    color: #be123c;
}

.out-link {
    list-style-type: square;
    margin: 15px 35px;
    color: #e11d48;
}

.out-link a {
    text-decoration: none;
    color: #1e293b;
}

.out-link a:hover {
    color: #e11d48;
}

/* ==========================================================================
   4. ADS SYSTEM (Banner Grid & Responsiveness)
   ========================================================================== */
.banner-float {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(255,255,255,0.95);
    border-top: 1px solid #e2e8f0;
    padding: 8px 0;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}

.banner-float img, .banner-top img {
    max-width: 100%;
    width: 728px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.floating-top {
    background: transparent;
    top: 0;
    height: auto;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1001;
}

.floating-bottom {
    background: transparent;
    bottom: 0;
    height: auto;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1001;
}

.floating-top img, .floating-bottom img, .headerbanner img {
    width: 49%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.headerbanner {
    text-align: center;
    margin: 20px 0;
}

.banner1 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0;
}

.banner1 img {
    width: 49%;
    height: auto;
    border-radius: 6px;
}

.iklan {
    width: 100%;
    margin: 20px 0;
}

.iklan img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ==========================================================================
   5. INTERACTIVE PAITO SYSTEM & INPUT FIELDS
   ========================================================================== */
.lassres {
    width: 100%;
    margin: 25px auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px;
    background: #f8fafc;
}

.lassres table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    color: #1e293b;
}

.lassres img {
    max-width: 100%;
    height: auto;
}

.t1, .t2, .t3 {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    font-size: 15px;
    border-radius: 6px;
}
.t1 { width: 40%; }
.t2, .t3 { width: 30%; }

/* Input Filter & Match Highlights */
input.cari {
    width: 60px;
    text-align: center;
    color: #e11d48;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

input.cari:focus {
    border-color: #e11d48;
    outline: none;
}

#rb {
    background: #e11d48;
    color: #fff;
    border: none;
    padding: 8px 20px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    transition: background 0.2s;
}

#rb:hover {
    background: #be123c;
}

/* PERBAIKAN UTAMA: .asu diset BOLD & JELAS */
.asu { 
    font-weight: bold !important; 
    color: #334155 !important; 
}

.highlight { padding: 2px 4px; margin: 0 -4px; border-radius: 3px; }
.e1,.e2,.e3,.e4,.e5,.e6,.e7,.e8,.e9,.e0 { background-color: #fca5a5; color: #991b1b; }
.k1,.k2,.k3,.k4,.k5,.k6,.k7,.k8,.k9,.k0 { background-color: #86efac; color: #166534; }
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c0 { background-color: #93c5fd; color: #1e40af; }
.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a0 { background-color: #fde047; color: #854d0e; }

/* Color Matrix Menu */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.colormenu {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    width: 796px;
    height: 36px;
    max-width: 100%;
    margin: 0 auto 15px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.colormenu.fixed {
    position: fixed !important;
    height: 36px !important;
    width: 796px !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 6px 6px !important;
}

/* Table Design Details */
.head th { background: #be123c; color: #fff; padding: 10px; }
.entry-content th, .entry-content td, .comment-content th, .comment-content td { padding: 0 !important; }
textarea { width: 100%; border-radius: 6px; padding: 10px; background: #fff; color: #1e293b; border: 1px solid #cbd5e1; }
.asux { background: #fff; color: #94a3b8; font-weight: 400; }
.intro td { background: #ffffff !important; }

/* 5n+1 Row Marker Functionality */
tr:nth-last-child(5n+1) {
    background: #f8fafc !important;
}

table {
    background: #fff;
    margin: 15px auto;
    min-width: 500px;
    border-collapse: collapse;
}

#drawing-table thead td {
    background: #2563eb !important;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
}

#drawing-table td {
    border: 1px solid #e2e8f0;
    text-align: center;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 0;
}

/* Color Palettes Picker Functional */
#color-selector {
    display: flex;
    width: 90%;
    height: 100%;
}
#color-selector .color {
    height: 100%;
    position: relative;
    width: 11.11%;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    transition: opacity 0.2s;
}
#color-selector .color:hover { opacity: 0.8; }
#color-selector .color.eraser  { background: #fff; text-align: center; line-height: 34px; font-size: 12px; color: #000; font-weight: bold; }
#color-selector .color.eraser::after { content: 'X'; display: block; }
#color-selector .selected      { box-shadow: inset 0 0 0 3px #000; }

#btnSubmit {
    margin-top: 0;
    font-size: 11px;
    background: #0f172a;
    color: #FFF;
    font-weight: 600;
    border: none;
    height: 100%;
    width: 10%;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
}
#btnSubmit:hover { background: #1e293b; }

#table-wrap { font-weight: 700; position: relative; }
#table-wrap table { position: relative; z-index: 10; }
#toggle-tracing-mode { display: none; }
#html-wrap textarea { height: 60px; margin: 0 0 10px; overflow: auto; width: 100%; }

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (Mobile Optimized)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .container2 {
        width: 95%;
        padding: 5px;
    }
}

@media screen and (max-width: 768px) {
    .popup { width: 85%; }
    .floating-top img, .floating-bottom img, .headerbanner img, .banner1 img {
        width: 100%;
        margin-bottom: 12px;
    }
    .banner1 {
        flex-direction: column;
    }
    .logo {
        width: 350px;
        height: 90px;
    }
    .menu a {
        display: block;
        width: 100%;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 14px;
        text-align: center;
    }
    h1 { font-size: 22px; }
    h3 { font-size: 18px; margin: 25px 0; }
    .title-footer { font-size: 18px; }
    
    #drawing-table {
        min-width: 100%;
    }
    .lassres {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5px;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        width: 360px;
        height: 80px;
    }
    #drawing-table td {
        font-size: 11px;
        padding: 6px 0;
    }
    #btnSubmit {
        width: 15%;
        font-size: 9px;
    }
    #color-selector {
        width: 85%;
    }
}


.asu{font-weight:100}.e1,.e2,.e3,.e4,.e5,.e6,.e7,.e8,.e9,.e0{background-color:#ff4d4d;border-radius:0;color:#fff}.k1,.k2,.k3,.k4,.k5,.k6,.k7,.k8,.k9,.k0{background-color:green;border-radius:0;color:#fff}.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c0{background-color:blue;border-radius:0;color:#fff}.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a0{background-color:orange;border-radius:0;color:#fff}.highlight{padding:1px 4px;margin:0 -4px}input.cari{width:50px;text-align:center;color:red;font-weight:700;background:#f0f7f2}#rb{background:#f03a17}

fieldset {border: none;margin: 0;padding: 0;list-style: none;vertical-align: baseline;}  .head th{background:#9C1512;color:#fff}.entry-content th,.entry-content td,.comment-content th,.comment-content td{padding:0!important}textarea{width:100%}.asux{background:none repeat scroll 0 0 #fff;color:#d7d1d1;font-weight:400}tr:nth-last-child(5n+1){background:none repeat scroll 0 0 #e8e4e7!important}.colormenu{background:none 0 0 repeat scroll #d9d9d9;border:2px solid #d9d9d9;width:796px;height: 30px; center: unset;z-index:99999;padding:0;max-width:100%;margin-bottom:10px}.colormenu.fixed{position:fixed;height: 30px; center: unset;width: 796px;top:0;left:0}.intro td{background:none repeat scroll 0 0 #ffffff!important}table{background:#fff none repeat scroll 0 0;margin:1px;min-width:500px}#drawing-table thead td{background: #dd9933!important;width:100%;background: #0000f4 !important;margin:0;margin-top:10px}#drawing-table td {border: 1px solid #d9d9d9;text-align: center;padding: 0;font-family: 'Roboto', sans-serif;font-size: 13px;font-weight: bold;padding: 3px 0 3px 0;}#color-selector .color{float:left;height:25px;position:relative;width:11%;cursor:pointer}#color-selector .color.eraser{background:none repeat scroll 0 0 #fff}#color-selector .color.Blue{background:#43a2ff}#color-selector .color.Aqua{background:#00F5FF}#color-selector .color.Teal{background:#43CD80}#color-selector .color.Lime{background:#01FF70}#color-selector .color.Yellow{background:#FFDC00}#color-selector .color.Orange{background:#FF851B}#color-selector .color.Red{background:#FF4136}#color-selector .color.Pink{background:#F012BE}#color-selector .color.Purple{background:#A23BEC}#color-selector .color.Silver{background:#a9a9a9}#color-selector .selected{box-shadow:inset 0 0 0 2px #000}#btnSubmit{float:left;margin-top:0;font-size:9px;background:#333;color:#FFF;font-weight:600;border:none;height:25px;line-height:25px;width:10%;cursor:pointer;text-transform:uppercase}#table-wrap{font-weight:700;position:relative}#table-wrap table{position:relative;z-index:10}#toggle-tracing-mode{display:none}#html-wrap textarea{height:50px;margin:0 0 10px;overflow:auto;width:100%}#btnSubmit{float:left;margin-top:0}@media (max-width:767px){#drawing-table{min-width:100%;margin-right:-10px;margin-left:-10px}}@media (max-width:370px){#drawing-table td{font-size:10px}}