*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:'Noto Sans JP',sans-serif;
        }


        .navbar-toggler{
            border:none;
        }

        .navbar-toggler:focus{
            box-shadow:none;
        }

        .menu{
            display:flex;
            gap:40px;
        }

        @media(max-width:991px){

            .menu{
                flex-direction:column;
                gap:15px;
                padding-top:20px;
            }

            .menu a{
                padding:10px 0;
                border-bottom:1px solid #eee;
            }

        }
        body{
            background-color:#f6f6f6;

            background-image:
            linear-gradient(rgba(0,0,0,.03) 1px, transparent 10px),
            linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 10px);

            background-size:40px 40px;
        }

        /* ================= HEADER ================= */

        .header{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            z-index:999;
            padding:18px 40px;
            background:transparent;
            transition:0.3s;
        }

        /* SAAT SCROLL JADI PUTIH */
        .header.scrolled{
            background:rgba(255,255,255,0.95);
            backdrop-filter:blur(5px);
            box-shadow:0 2px 10px rgba(0,0,0,0.05);
        }
        .logo-text h1{
            color:white;

            text-shadow:
            0 2px 4px rgba(0,0,0,0.5),
            0 6px 12px rgba(0,0,0,0.3);
        }

        .header.scrolled .logo-text h1{
            color:#000;

            text-shadow:
            0 1px 2px rgba(0,0,0,0.2),
            0 3px 6px rgba(0,0,0,0.1);
        }
        .header.scrolled .logo-text span{
            color:#000;

            text-shadow:
            0 1px 2px rgba(0,0,0,0.2),
            0 3px 6px rgba(0,0,0,0.1);
        }

        .header.scrolled .menu .jp{
            color:#000;
            text-shadow:none;
        }

        .header.scrolled .menu .en{
            color:black;
            text-shadow:none;
        }


        .nav{
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        /* LOGO */

        .logo{
            display:flex;
            align-items:center;
            gap:15px;
            color:#555;
        }

        .logo img{
            width:70px;
        }



        /* MENU */

        .menu{
            display:flex;
            gap:40px;
            align-items:center;
        }
        .menu a{
            text-decoration:none;
            text-align:center;
        }

        .menu .jp{
            font-size:16px;
            font-weight:600;
            color:#000;
        }

        .menu .en{
            font-size:13px;
            color:#777;
            margin-top:3px;
        }

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

        /* DEFAULT (atas / hero) */
        .logo-text h1{
            color:white;
            text-shadow: 0 3px 8px rgba(0,0,0,0.4);
        }

        .logo-text span{
            color:#e5e5e5;
            text-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }

        .menu .jp{
            color:white;
            text-shadow: 0 2px 5px rgba(0,0,0,0.4);
        }

        .menu .en{
            color:#e5e5e5;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }        

        /* HERO SLIDER */

        .hero{
            position:relative;
            width:100%;
            height:100vh;
            overflow:hidden;
        }

        .slide{
            position:absolute;
            width:100%;
            height:100%;
            background-size:cover;
            background-position:center;
            opacity:0;
            transition:opacity 1.5s ease-in-out;
        }

        .slide.active{
            opacity:1;
        }

        /* overlay atas biar sama seperti contoh */
        .hero::after{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 40%);
            z-index:2;
        }
        /* ================= RESPONSIVE ================= */

        @media(max-width:900px){

            .navbar-collapse .menu{
                display:flex !important;
                flex-direction:column;
                gap:15px;
                padding-top:20px;
            }

            .logo-text h1{
                font-size:20px;
            }

            .logo img{
                width:50px;
                height:50px;
            }

        }
        .section-divider{
            height:60px;
            background:url('assets/img/brush.png') center repeat-x;
            opacity:.25;
        }
        /* ================= NEWS ================= */

        .news-section{
            display:flex;
            gap:80px;
            padding:100px 80px;
            background:transparent;
            align-items:flex-start;
        }

        .news-left{
            position:relative;
            width: 400px;
        }

        .flower{
            width:100%;
            position:absolute;
            left:-50px;
            top:20px;
        }

        .news-badge{
            position:absolute;
            top:140px;
            left:80px;
            background:#e60023;
            color:white;
            padding:15px 35px;
            font-weight:bold;
            font-size:28px;
            border-radius:40px;
            box-shadow:0 5px 0 #1e3a8a;
        }

        .news-right{
            flex:1;
        }

        .news-item{
          display:flex;
          align-items:center;
          gap:25px;
          padding:25px 0;
      }

      /* THUMBNAIL */
      .news-thumb img{
          width:300px;
          height:180px;
          object-fit:cover;
          border-radius:8px;
      }

      /* TEXT */
      .news-text .date{
          color:#aaa;
          font-size:20px;
          letter-spacing:2px;
          margin-bottom:5px;
      }

      .news-text .title{
          font-size:40px;
          font-weight:600;
          color:#333;
      }

      /* HOVER EFFECT BIAR CAKEP */
      .news-item:hover .title{
          color:#e60023;
          transition:0.3s;
      }

      .divider{
          height:1px;
          background:#eee;
      }



      .intro{
        position:relative;
        padding:120px 0;
    }

    /* layout */
    .intro-content{
        display:flex;
        align-items:flex-end; /* biar turun ke bawah */
        position:relative;
    }

    /* TEXT kiri bawah */
    .intro-text{
        position:absolute;
        left:80px;
        bottom:40px;

        background:white;
        padding:40px 50px;
        width:500px;

        box-shadow:0 20px 40px rgba(0,0,0,0.15);
        z-index:5;
    }

    /* IMAGE kanan full */
    .intro-image{
        margin-left:auto;
        width:70%; /* ini bikin dia dominan kanan */
    }

    .intro-image img{
        width:100%;
        height:500px;
        object-fit:cover;
    }

    /* text */
    .intro-text h2{
        font-size:34px;
        line-height:1.6;
        margin-bottom:20px;
    }

    .intro-text p{
        font-size:18px;
        line-height:1.8;
    }

    @media(max-width:768px){

        .intro{
            padding:60px 20px;
        }

        .intro-content{
            flex-direction:column;
            align-items:center;
        }

        /* IMAGE jadi atas */
        .intro-image{
            width:100%;
            margin:0;
        }

        .intro-image img{
            height:250px;
            border-radius:10px;
        }

        /* TEXT jadi bawah (hapus absolute) */
        .intro-text{
            position:relative;
            left:auto;
            bottom:auto;

            width:100%;
            margin-top:-40px; /* biar naik dikit nempel gambar */
            padding:25px;

            border-radius:10px;
            box-shadow:0 10px 25px rgba(0,0,0,0.1);
        }

        .intro-text h2{
            font-size:22px;
            line-height:1.5;
        }

        .intro-text p{
            font-size:14px;
        }

    }

    /* bulat */
    .circle{
        background:#e60023;
        color:white;
        border-radius:50%;
        padding:3px 10px;
    }

    /* ================= INTRO SAFE CROP ================= */




    /* ================= FEATURES ================= */

    .features{
        background:transparent;
        padding:120px 60px 80px;
        position:relative;
    }

    .feature-flower{
        position:absolute;
        left:0;
        top:20px;
        width:340px;
    }

    .feature-wrap{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        margin-top:80px;
    }

    /* card */

    .feature{
        position:relative;
        width:30%;
    }

    .feature img{
        width:100%;
        height:240px;
        object-fit:cover;
    }

    .feature .text{
        text-align:center;
        margin-bottom:15px;
    }

    .feature .text h3{
        font-size:24px;
        margin-bottom:5px;
    }

    .feature .text p{
        color:#e60023;
        font-size:18px;
    }

    /* nomor */

    .number{
        position:absolute;
        right:-15px;
        top:40px;
        background:linear-gradient(45deg,#ff3c3c,#ff7a00);
        color:white;
        width:60px;
        height:60px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:26px;
        font-weight:bold;
    }

    /* zig zag posisi */

    .f1{ margin-top:120px; }
    .f2{ margin-top:0; }
    .f3{ margin-top:-80px; }

    /* about button */

    .about-btn{
        position:absolute;
        right:60px;
        bottom:20px;
        background:linear-gradient(#4da3ff,#2b6edb);
        color:white;
        padding:12px 26px;
        border-radius:30px;
        text-decoration:none;
        font-weight:600;
        box-shadow:0 3px 6px rgba(0,0,0,0.2);
    }

    /* ================= CITY ================= */

    .city{
        background:#c7d6d1;
        text-align:center;
        padding:60px 0;
        margin-top:60px;
    }

    .city h2{
        font-size:60px;
        color:#3a8f3a;
        text-shadow:0 4px 0 rgba(0,0,0,0.15);
    }

    .city p{
        font-size:28px;
        color:#555;
        margin-top:10px;
    }


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

    .footer{
        background:#e9e9e9;
        padding:10px 20px;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
    }

    .footer-left h3{
        font-size:34px;
        color:black;
    }

    .footer-left span{
        display:block;
        color:black;
        letter-spacing:2px;
    }

    .footer-info{
        color:black;
        line-height:1.8;
    }


    .footer-right{
        text-align:right;
    }

    .footer-menu{
        margin-bottom:15px;
    }

    .footer-menu a{
        margin:0 8px;
        color:#000;
        text-decoration:none;
    }

    .footer-menu span{
        color:#999;
    }

    .copyright{
        font-size:14px;
        margin-bottom:20px;
        color:#333;
    }

    .cert{
        width:260px;
    }

    /* ================= MOBILE ================= */

    @media (max-width: 1024px){

        .menu{
            gap:20px;
        }

        .logo-text h1{
            font-size:22px;
        }

        .hero{
            height:70vh;
        }

        .intro-content{
            flex-direction:column;
            padding:0 30px;
        }

        .intro-text{
            width:100%;
            margin-bottom:30px;
            text-align:center;
        }

        .intro-image{
            width:100%;
        }

        .feature-wrap{
            flex-direction:column;
            gap:60px;
        }

        .feature{
            width:100%;
            margin-top:0 !important;
        }

        .about-btn{
            position:relative;
            right:auto;
            bottom:auto;
            display:inline-block;
            margin:40px auto 0;
        }

        .footer{
            flex-direction:column;
            gap:30px;
        }

        .footer-right{
            text-align:left;
        }

    }
    .hamburger{
        display:none;
        cursor:pointer;
        z-index:10001;
    }

    .hamburger span{
        display:block;
        width:26px;
        height:3px;
        background:#000;
        margin:5px 0;
        transition:.3s;
    }

    /* animasi jadi X */
    .hamburger.active span:nth-child(1){
        transform:rotate(45deg) translate(5px,5px);
    }

    .hamburger.active span:nth-child(2){
        opacity:0;
    }

    .hamburger.active span:nth-child(3){
        transform:rotate(-45deg) translate(6px,-6px);
    }

    @media(max-width:768px){
        .hamburger{
            display:block;
        }


        /* ================= PHONE ================= */
        .mobile-overlay{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.4);
            opacity:0;
            pointer-events:none;
            transition:.3s;
            z-index:9998;
        }

        .mobile-overlay.active{
            opacity:1;
            pointer-events:auto;
        }

        .header{
            padding:12px 20px;
        }

        /* hide menu desktop */
        .menu{
            display:none;
        }

        .hero{
            height:60vh;
        }

        .intro{
            padding:60px 20px;
        }

        .intro-text h2{
            font-size:24px;
        }

        .news-section{
            flex-direction:column;
            padding:60px 20px;
        }

        .news-left{
            display:none;
        }

        .news-item{
            flex-direction:column;
            align-items:flex-start;
        }

        .news-item img{
            width:100%;
            height:auto;
        }

        .city h2{
            font-size:40px;
        }

        .footer{
            padding:40px 20px;
        }
        .intro-image{
            display:none;
        }

        .navbar-toggler{
            border:none;
        }

        .navbar-toggler:focus{
            box-shadow:none;
        }

        @media(max-width:991px){

            .menu{
                flex-direction:column;
                gap:15px;
                padding-top:20px;
            }

            .menu a{
                padding:10px 0;
                border-bottom:1px solid #eee;
            }


        }

        /* ================= MOBILE NAV BG ================= */

        @media (max-width:991px){

            #mainMenu{
                background:#fff;
                padding:20px;
                margin-top:10px;
                border-radius:8px;
                box-shadow:0 10px 30px rgba(0,0,0,.15);
            }
            .intro-image{
                display:none;
            }

            /* warna text jadi gelap */
            #mainMenu .jp{
                color:#000 !important;
            }

            #mainMenu .en{
                color:#777 !important;
            }

        }

        /* ================= HAMBURGER STYLE ================= */

        .navbar-toggler{
            background:rgba(255,255,255,.9);
            border-radius:8px;
            padding:8px 10px;
        }

        .navbar-toggler-icon{
            filter: invert(1); /* bikin icon jadi hitam */
        }

        /* saat scroll */
        .header.scrolled .navbar-toggler{
            background:#fff;
        }

        @media (max-width:991px){

            /* header padding */
            .header{
                padding:12px 15px;
            }

            /* logo resize */
            .navbar-brand img{
                width:45px !important;
            }

            /* text logo kecil */
            .logo-text h1{
                font-size:18px;
                margin:0;
            }

            .logo-text span{
                font-size:11px;
                letter-spacing:1px;
            }

            /* jarak logo */
            .navbar-brand{
                gap:10px !important;
            }

            /* menu full width */
            #mainMenu{
                width:100%;
                background:#fff;
                padding:15px;
                margin-top:10px;
                border-radius:8px;
                box-shadow:0 10px 25px rgba(0,0,0,.15);
            }

            /* menu item */
            #mainMenu .menu a{
                padding:12px 0;
            }

            /* text menu */
            #mainMenu .jp{
                font-size:16px;
            }

            #mainMenu .en{
                font-size:12px;
            }

        }

        /* super small phone */
        @media (max-width:480px){

            .logo-text h1{
                font-size:16px;
            }

            .logo-text span{
                display:none; /* sembunyikan subtitle di hp kecil */
            }

        }