@font-face{font-family:"Gokhan";src:url("/fonts/Gokhan.otf") format("opentype")}:root{--yellow:#ffdd00;--black:#0a0a0a;--white:#ffffff;--transition:all .3s ease;--section-light:#fff;--section-dark:#f8f9fa;--youtube-red:red;--instagram-purple:#E1306C;--tiktok-black:#000;--facebook-blue:#1877F2;--shopee-orange:#ff5310;--shopee-gradient:linear-gradient(135deg,#ff5310 0%,#ff2c2c 100%);--tiktok-gradient:linear-gradient(135deg,#000 0%,#69C9D0 50%,#EE1D52 100%)}*{box-sizing:border-box;scroll-behavior:smooth}body{margin:0;font-family:"Roboto",sans-serif;color:var(--black);background-color:var(--white);opacity:0;transition:opacity 1s ease}body.loaded{opacity:1}body.dark{background-color:var(--black);color:var(--white)}header{position:fixed;top:0;left:0;width:100%;padding:15px 0;display:flex;justify-content:center;background:rgba(255,255,255,1);backdrop-filter:blur(10px);z-index:999;transition:var(--transition)}.header-container{width:100%;max-width:1100px;display:flex;justify-content:space-between;align-items:center;padding:0 20px}body.dark header{background:rgba(10,10,10,.9)}header img{height:40px}nav{display:flex;align-items:center}nav a{color:inherit;margin:0 15px;text-decoration:none;font-weight:500;transition:var(--transition)}nav a:hover{color:var(--yellow)}.header-buttons{display:flex;align-items:center;gap:15px}button,.toko-button,.dark-mode-toggle,.hamburger,.hero button{border-radius:0!important}.dark-mode-toggle{cursor:pointer;color:var(--black);border:2px solid var(--black);border-bottom:5px solid var(--black);padding:8px 16px;font-size:.9rem;font-weight:500;transition:var(--transition);min-width:50px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--white)}.dark-mode-toggle:hover{background:var(--black);color:var(--yellow);border-color:var(--black)}.dark-mode-toggle:active{border-bottom:2px solid var(--black);transform:translateY(3px)}body.dark .dark-mode-toggle{background:var(--yellow);color:var(--black);border-color:var(--white);border-bottom:5px solid var(--white)}body.dark .dark-mode-toggle:hover{background:var(--white);color:var(--black)}body.dark .dark-mode-toggle:active{border-bottom:2px solid var(--white);transform:translateY(3px)}.hamburger{display:none;cursor:pointer;background:none;border:2px solid var(--black);border-bottom:5px solid var(--black);color:var(--black);padding:8px 12px;font-size:1.2rem;transition:var(--transition);min-width:50px;height:40px;align-items:center;justify-content:center;position:relative}body.dark .hamburger{border-color:var(--white);border-bottom:5px solid var(--white);color:var(--white)}.hamburger:hover{background:var(--yellow);color:var(--black)}.hamburger:active{border-bottom:2px solid var(--black);transform:translateY(3px)}body.dark .hamburger:active{border-bottom:2px solid var(--white)}.hamburger.active{background:var(--yellow);color:var(--black)}.hero button{margin-top:25px;background:var(--youtube-red);color:#fff;border:2px solid var(--black);border-bottom:5px solid var(--black);padding:15px 35px;font-weight:700;cursor:pointer;transition:var(--transition);font-size:1.1rem;display:flex;align-items:center;gap:10px;margin:25px auto 0;position:relative}.hero button:hover{background:#cc0000;transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.hero button:active{border-bottom:2px solid var(--black);transform:translateY(0)}.toko-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:30px}.toko-button{display:flex;align-items:center;gap:10px;border:2px solid var(--black);border-bottom:5px solid var(--black);padding:15px 25px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:var(--transition);text-decoration:none;position:relative}.toko-button:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.toko-button:active{border-bottom:2px solid var(--black);transform:translateY(0)}.toko-button i{font-size:1.3rem}.website-button{background:var(--white);color:var(--black);border-color:var(--black);border-bottom:5px solid var(--black)}.website-button:hover{background:var(--black);color:var(--white)}.website-button:active{border-bottom:2px solid var(--black)}body.dark .website-button{background:var(--white);color:var(--black);border-color:var(--white);border-bottom:5px solid var(--black)}body.dark .website-button:hover{background:var(--black);color:var(--white)}body.dark .website-button:active{border-bottom:2px solid var(--black)}.toko-button:nth-child(2){background:var(--shopee-gradient);color:#fff;border-color:var(--shopee-orange);border-bottom:5px solid #d84315}.toko-button:nth-child(2):hover{background:linear-gradient(135deg,#ff2c2c 0%,#ff5310 100%);color:#fff}.toko-button:nth-child(2):active{border-bottom:2px solid #d84315;transform:translateY(0)}.toko-button:nth-child(3){background:var(--tiktok-gradient);color:#fff;border-color:#000;border-bottom:5px solid #333}.toko-button:nth-child(3):hover{background:linear-gradient(135deg,#69C9D0 0%,#EE1D52 50%,#000 100%);color:#fff}.toko-button:nth-child(3):active{border-bottom:2px solid #333;transform:translateY(0)}.cta a{display:inline-block;background:var(--white);color:var(--black);border:2px solid var(--black);border-bottom:5px solid var(--black);padding:14px 30px;text-decoration:none;font-weight:600;transition:var(--transition);position:relative}.cta a:hover{background:var(--white);color:var(--black);transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.cta a:active{border-bottom:2px solid var(--yellow);transform:translateY(0)}h1,.hero-content h1{font-family:"Gokhan",sans-serif;font-size:5rem;margin-bottom:10px;color:var(--yellow);letter-spacing:2px}h2{font-family:"Gokhan",sans-serif;font-size:2.2rem;color:var(--black);letter-spacing:2px;margin-bottom:20px}body.dark h2{color:#fff}section{padding:50px 20px;text-align:center}.section-container{max-width:1100px;margin:0 auto}.section-light{background-color:var(--section-light)}.section-dark{background-color:var(--section-dark)}body.dark .section-light{background-color:#0a0a0a}body.dark .section-dark{background-color:#111}.hero{background:url('/images/website-banner.png') center/cover no-repeat;height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.6);position:relative}.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}.hero-content{position:relative;z-index:1;text-align:center;animation:fadeUp 1s ease;max-width:1100px;padding:0 20px}.hero-content p{font-size:1.2rem}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.social-header{text-align:center;margin-bottom:40px}.social-main-title{font-size:2rem;font-weight:700;color:#ffdd00;margin-bottom:10px}.social-subtitle{font-size:1rem;color:#ccc}.social-card{background:var(--white);padding:30px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:var(--transition);display:flex;flex-direction:column;align-items:center;border-radius:0}body.dark .social-card{background:#1a1a1a}.social-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}.social-icon{font-size:3rem}.instagram-icon{color:var(--instagram-purple)}.tiktok-icon{color:var(--tiktok-black)}.facebook-icon{color:var(--facebook-blue)}.youtube-icon{color:var(--youtube-red)}.social-card h3{font-family:"Gokhan",sans-serif;font-size:1.8rem;margin-bottom:15px;letter-spacing:1px;display:flex;align-items:center;gap:10px}.social-card h3 a{color:inherit;text-decoration:none;transition:var(--transition)}.social-card h3 a:hover{color:var(--yellow)}.social-embed-container{width:100%;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.1);border-radius:8px}.instagram-embed{width:100%;height:400px}.instagram-embed iframe{width:100%;height:100%;border:none}.tiktok-embed{width:100%;height:450px}.tiktok-embed iframe{width:100%;height:100%;border:none}.facebook-embed{width:100%;height:400px}.facebook-embed iframe{width:100%;height:100%;border:none}.youtube-embed{width:100%;height:300px}.youtube-embed iframe{width:100%;height:100%;border:none}.glide{position:relative;max-width:1000px;margin:40px auto}.glide__track{overflow:hidden}.glide__slides{display:flex;list-style:none;margin:0;padding:0}.glide__slide{flex:0 0 auto;width:100%}.social-glide .glide__slide{padding:0 10px}.toko-glide,.illustrator-glide{box-shadow:0 5px 15px rgba(0,0,0,.1)}.glide__arrows{display:none}.glide__bullets{display:flex;justify-content:center;margin-top:30px;gap:10px}.glide__bullet{width:12px;height:12px;background:#ccc;border:none;border-radius:50%;cursor:pointer;transition:var(--transition)}.glide__bullet--active{background:var(--yellow);transform:scale(1.2)}.cta{background:var(--yellow);color:var(--black);padding:80px 20px}.cta h2{font-family:"Gokhan",sans-serif;font-size:2.2rem;margin-bottom:10px}footer{background:#111;color:#fff;padding:40px 20px;text-align:center;display:flex;justify-content:center}.footer-container{max-width:1100px;width:100%}footer a{color:var(--yellow);text-decoration:none;margin:0 10px;font-size:small}@media (max-width:768px){.header-container{padding:0 20px}.hamburger{display:flex}.header-buttons{gap:10px}nav{position:fixed;top:70px;left:0;width:100%;background:rgba(255,255,255,1);backdrop-filter:blur(10px);flex-direction:column;align-items:center;padding:20px 0;transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition);z-index:998}body.dark nav{background:rgba(10,10,10,.95)}nav.active{transform:translateY(0);opacity:1;visibility:visible}nav a{margin:10px 0;font-size:1.1rem}.hero-content h1{font-size:3rem}.toko-buttons{flex-direction:column;align-items:center}.toko-button{width:100%;max-width:300px;justify-content:center}.social-glide .glide__slide{padding:0 5px}.instagram-embed{height:350px}.tiktok-embed{height:400px}.facebook-embed{height:350px}.youtube-embed{height:250px}}@media (max-width:576px){.hero-content h1{font-size:3rem}.hero-content p{font-size:1rem}.social-main-title{font-size:2rem}.social-subtitle{font-size:1rem}.social-card{padding:20px 15px}.social-card h3{font-size:1.5rem}.instagram-embed{height:300px}.tiktok-embed{height:350px}.facebook-embed{height:300px}.youtube-embed{height:200px}.dark-mode-toggle,.hamburger{padding:6px 12px;font-size:.9rem;min-width:45px;height:36px}}.carousel-item,.illustrator-item{width:100%}.carousel-item img,.illustrator-item img{width:100%;height:auto;display:block;object-fit:cover}