/* CSS Original Database */
:root {
    --black: #000000;
    --dark-gray: #232323;
    --white: #ffffff;
    --orange: #fe712a;
    --nav-bg: rgba(255, 255, 255, 0.7);
}
* {margin: 0;padding: 0;box-sizing: border-box;scroll-behavior: smooth; }
body {font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;background-color: var(--dark-gray);color: var(--white);line-height: 1.6;}
nav {position: fixed;top: 0;width: 100%;background: var(--nav-bg);backdrop-filter: blur(10px);z-index: 1000;height: 70px;display: flex;align-items: center;justify-content: space-between;padding: 0 5%;}
.logo img {height: 45px;display: block; }
.nav-links {display: flex;list-style: none; }
.nav-links li {margin-left: 25px;margin-top: 25px; }
.nav-links a {text-decoration: none;color: var(--black);font-weight: 600;transition: 0.3s; }
.nav-links a:hover {color: var(--orange); }
#menu-toggle {display: none; }
.hamburger {display: none;cursor: pointer;font-size: 24px;color: var(--black); }
header {padding: 140px 10% 40px;text-align: center;background: var(--black); }
h1 {font-size: 2.5rem;color: var(--orange);margin-bottom: 15px; }
.meta-desc {font-size: 1.1rem;color: #ccc;max-width: 800px;margin: 0 auto;text-align: center; }
.breadcrumb {margin-top: 20px;font-size: 0.9rem;color: #888; }
.breadcrumb a {color: var(--orange);text-decoration: none; }
.breadcrumb span {margin: 0 10px; }
.container {max-width: 900px;margin: 40px auto;padding: 0 20px; }
.tldr {background: #333;border-left: 5px solid var(--orange);padding: 25px;margin-bottom: 30px;border-radius: 5px; }
.tldr h2 {color: var(--orange);margin-bottom: 10px;font-size: 1.2rem; }
.toc {background: #1a1a1a;padding: 20px;border-radius: 5px;margin-bottom: 30px; }
.toc h2 {font-size: 1.1rem;margin-bottom: 10px; }
.toc ul {list-style: none; }
.toc li {margin-bottom: 8px; }
.toc a {color: var(--white);text-decoration: none;font-size: 0.95rem; }
.toc a:hover {color: var(--orange); }
.main-img {width: 100%;height: auto;border-radius: 8px;margin-bottom: 15px; }
.img-caption {text-align: center;font-size: 0.85rem;color: #aaa;margin-bottom: 30px; }
h2 {color: var(--orange);margin: 40px 0 20px;font-size: 1.8rem; }
h3 {color: #eee;margin: 30px 0 15px; }
p {margin-bottom: 20px;color: #e0e0e0;text-align: justify; }
ul, ol {margin-bottom: 20px;padding-left: 20px; }
li {margin-bottom: 10px; }
blockquote {border-left: 4px solid var(--orange);padding-left: 20px;font-style: italic;color: #ddd;margin: 30px 0; }
a {color: var(--orange);text-decoration: none;font-weight: bold; }
a:hover {text-decoration: underline; }
.faq-item {background: #1a1a1a;padding: 15px;margin-bottom: 10px;border-radius: 5px; }
.faq-item h4 {color: var(--orange);margin-bottom: 5px; }
.references {font-size: 0.9rem;border-top: 1px solid #444;padding-top: 20px;margin-top: 40px; }
.author-box {display: flex;align-items: center;background: #000;padding: 20px;border-radius: 8px;margin-top: 30px; }
.author-box img {width: 60px;height: 60px;border-radius: 50%;margin-right: 15px; }
.author-info h5 {margin: 0;color: var(--orange); }
/* Footer Update: Rata Tengah */
footer {background: var(--black);padding: 50px 5% 30px;border-top: 3px solid var(--orange);text-align: center; }
.footer-grid {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-bottom: 20px; }
.footer-links {display: flex;justify-content: center;flex-wrap: wrap;gap: 15px 25px;margin-bottom: 25px; }
.footer-links a {color: var(--orange);text-decoration: none;font-size: 0.9rem;font-weight: 500;transition: 0.3s; }
.footer-links a:hover {color: var(--white);text-decoration: underline; }
/* Penambahan CSS Pada Pelatihan Hipnotis */
.curriculum-grid, .pricing-grid, .why-us-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;margin: 40px 0; }
.box-card {background: #1a1a1a;padding: 30px;border-radius: 8px;border: 1px solid #333;text-align: center; }
.box-card h4 { color: var(--orange); margin-bottom: 15px; }
.video-container {max-width: 560px;margin: 0 auto 40px;aspect-ratio: 16/9;background: #000;border-radius: 8px;overflow: hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.video-container iframe { width: 100%; height: 100%; border: none; }
.trainer-section {display: flex;align-items: center;gap: 30px;background: #000;padding: 30px;border-radius: 8px; }
.trainer-img {width: 200px; /* Ukuran kecil 4:5 */height: 250px;object-fit: cover;border-radius: 5px; }
.reg-form {background: #1a1a1a;padding: 40px;border-radius: 8px;max-width: 600px;margin: 0 auto; }
.reg-form input {width: 100%;padding: 12px;margin-bottom: 15px;border-radius: 5px;border: 1px solid #444;background: #222;color: #fff; }
.btn-wa {width: 100%;padding: 15px;background: var(--orange);color: var(--black);border: none;border-radius: 5px;font-weight: bold;cursor: pointer;text-transform: uppercase; }
@media (max-width: 768px) {.trainer-section { flex-direction: column; text-align: center; }.trainer-img { width: 150px; height: 187px; } }
/* Penambahan CSS khusus agar selaras dengan database */
.client-logos {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 30px;margin: 40px 0; }
.client-logos img {max-width: 150px;height: auto;filter: grayscale(100%);opacity: 0.7;transition: 0.3s; }
.client-logos img:hover {filter: grayscale(0%);opacity: 1; }
.trainer-grid-3 {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;justify-content: center;margin: 40px 0; }
.cta-box {text-align: center;padding: 60px 20px;background: #1a1a1a;border-radius: 8px;margin-top: 40px; }
.btn-cta {padding: 15px 40px;background: var(--orange);color: var(--black);font-size: 1.2rem;border-radius: 5px;display: inline-block;transition: 0.3s; }
.btn-cta:hover {transform: scale(1.05);text-decoration: none; }