/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --bg-color: #0D1117;
    --bg-secondary: #161B22;
    --bg-tertiary: #010409;
    --bg-navbar: rgba(13, 17, 23, 0.85);
    --bg-hero: #010409;
    --text-color-primary: #E6EDF3;
    --text-color-secondary: #B0BAC6;
    --text-color-muted: #768390;
    --border-color-primary: #30363D;
    --border-color-secondary: #21262D;
    --primary-accent: #238636;
    --primary-accent-hover: #2EA043;
    --primary-accent-text: #FFFFFF;
    --card-shadow-hover: 0 6px 12px rgba(0,0,0,0.15);
    --border-radius: 0.5rem;
    --container-max-width: 1280px;
    --navbar-height: 70px;
    --transition-ease: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-color-primary);
    line-height: 1.65;
    padding-top: var(--navbar-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Navbar */
.navbar {
    background-color: var(--bg-navbar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color-secondary);
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--navbar-height); z-index: 1000;
}
.navbar-content { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.navbar-brand { color: var(--text-color-primary); font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.navbar-links { display: flex; gap: 1.2rem; } /* Disesuaikan agar muat */
.nav-link {
    font-size: 0.95rem; font-weight: 500; color: var(--text-color-secondary); text-decoration: none;
    padding: 0.5rem 0; position: relative; transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--primary-accent); }
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background-color: var(--primary-accent); transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem;
    font-family: var(--font-primary); font-size: 0.95rem; font-weight: 600; text-decoration: none;
    border-radius: var(--border-radius); cursor: pointer; transition: var(--transition-ease);
    border: 1px solid transparent;
}
.btn-cta-navbar {
    background-color: var(--primary-accent); color: var(--primary-accent-text); border-color: var(--primary-accent);
    font-size: 0.9rem; padding: 0.55rem 1rem; /* Disesuaikan agar muat */
}
.btn-cta-navbar:hover { background-color: var(--primary-accent-hover); border-color: var(--primary-accent-hover); transform: translateY(-1px); }
.btn-cta-navbar i { margin-right: 0.5rem; }

/* Hero Section (SayFor) */
.hero-section.sayfor-hero {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    padding: 5rem 0 6rem 0; text-align: center; position: relative; overflow: hidden;
    border-bottom: 1px solid var(--border-color-secondary);
}
.hero-section.sayfor-hero::before { /* Efek latar radial (opsional) */
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(35, 134, 54, 0.05) 0%, rgba(35, 134, 54, 0) 60%);
    animation: rotateBackground 60s linear infinite; z-index: 0;
}
@keyframes rotateBackground { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sayfor-hero-logo { max-width: 150px; margin-bottom: 1.5rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-section.sayfor-hero h1 {
    font-size: 3rem; font-weight: 800; color: var(--text-color-primary);
    margin-bottom: 1rem; line-height: 1.2; position: relative; z-index: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hero-section.sayfor-hero p.subtitle {
    font-size: 1.2rem; color: var(--text-color-secondary); max-width: 700px;
    margin: 0 auto 2.5rem auto; position: relative; z-index: 1;
}
.hero-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-hero {
    background-color: var(--primary-accent); color: var(--primary-accent-text);
    padding: 0.8rem 2rem; font-size: 1.05rem; border-color: var(--primary-accent); box-shadow: none;
}
.btn-hero:hover { background-color: var(--primary-accent-hover); border-color: var(--primary-accent-hover); transform: translateY(-2px); }
.hero-buttons .btn-hero i { margin-right: 0.5rem; margin-left: 0;}

.btn-hero.btn-secondary-hero {
    background-color: transparent; color: var(--primary-accent); border: 2px solid var(--primary-accent);
}
.btn-hero.btn-secondary-hero:hover { background-color: var(--primary-accent); color: var(--primary-accent-text); }

/* Main Content & Section Titles */
.main-content { padding: 3rem 0; }
.section-title {
    font-size: 2rem; font-weight: 700; color: var(--text-color-primary); margin-bottom: 2.5rem;
    text-align: center; position: relative; padding-bottom: 0.75rem;
}
.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 3px; background-color: var(--primary-accent); border-radius: 2px;
}
.section-subtitle {
    font-size: 1.125rem; color: var(--text-color-secondary); max-width: 700px;
    margin: 0 auto 3rem auto; text-align: center; line-height: 1.7;
}

/* Section Tentang SayFor, Roadmap, Whitepaper (Styling dari respons sebelumnya sudah baik) */
.about-sayfor-section, .roadmap-sayfor-section, .whitepaper-sayfor-section { padding: 4rem 0; }
.about-sayfor-section { background-color: var(--bg-color); }
.roadmap-sayfor-section { background-color: var(--bg-secondary); }
.whitepaper-sayfor-section { background-color: var(--bg-color); }
/* ... (Salin styling lengkap untuk .about-content-grid, .roadmap-timeline, .btn-outline-hero dari respons sebelumnya jika belum ada) ... */
.about-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; align-items: center; }
.about-text p { font-size: 1.05rem; color: var(--text-color-secondary); margin-bottom: 1.5rem; line-height: 1.8; }
.features-list { list-style: none; padding-left: 0; margin-top: 1.5rem; }
.features-list li { font-size: 1rem; color: var(--text-color-primary); margin-bottom: 0.75rem; display: flex; align-items: center; }
.features-list li i { color: var(--primary-accent); font-size: 1.2rem; margin-right: 0.75rem; width: 24px; text-align: center; }
.about-image img { max-width: 100%; height: auto; border-radius: var(--border-radius); box-shadow: var(--card-shadow-hover); }

.roadmap-timeline { position: relative; max-width: 800px; margin: 0 auto; }
.roadmap-timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--primary-accent); opacity: 0.3; top: 0; bottom: 0; left: 50%; margin-left: -2px; z-index: 0; }
.timeline-item { padding: 10px 40px; position: relative; background-color: transparent; width: 50%; box-sizing: border-box; margin-bottom: 3rem; }
.timeline-item:nth-child(odd) { left: 0; padding-right: 60px; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; padding-left: 60px; text-align: left; }
.timeline-icon { position: absolute; width: 50px; height: 50px; right: -25px; background-color: var(--primary-accent); color: var(--primary-accent-text); top: 50%; transform: translateY(-50%); border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 4px solid var(--bg-secondary); }
.timeline-item:nth-child(even) .timeline-icon { left: -25px; }
.timeline-content { padding: 1.5rem; background-color: var(--bg-primary); position: relative; border-radius: var(--border-radius); border: 1px solid var(--border-color-primary); box-shadow: var(--card-shadow-hover); /* Dulu var(--card-shadow) */ }
.timeline-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--primary-accent); margin-top: 0; margin-bottom: 0.5rem; }
.timeline-content p { font-size: 0.95rem; color: var(--text-color-secondary); line-height: 1.6; margin-bottom: 0.75rem; }
.timeline-date { font-size: 0.85rem; font-weight: 500; color: var(--text-color-muted); font-style: italic; }

.whitepaper-sayfor-section .section-title { margin-bottom: 1rem; }
.whitepaper-sayfor-section .section-subtitle { margin-bottom: 2.5rem; }
.btn-outline-hero { background-color: transparent; color: var(--primary-accent); border: 2px solid var(--primary-accent); }
.btn-outline-hero:hover { background-color: var(--primary-accent); color: var(--primary-accent-text); }


/* Styling untuk Section Partnership - Horizontal Layout */
.partners-section {
    padding: 3rem 0;
    background-color: var(--bg-tertiary); /* Latar gelap agar kontras */
    border-top: 1px solid var(--border-color-secondary);
    border-bottom: 1px solid var(--border-color-secondary);
}
.partners-section .section-title {
    margin-bottom: 0.75rem; /* Kurangi margin bawah judul */
    font-size: 1.5rem; /* Judul section partner lebih kecil */
    color: var(--text-color-secondary); /* Judul lebih subtle */
}
.partners-section .section-title::after{
    background-color: var(--text-color-muted); /* Garis bawah lebih subtle */
    height: 2px;
    width: 40px;
}
.partners-section .section-subtitle {
    margin-bottom: 2.5rem;
    font-size: 1rem;
    color: var(--text-color-muted);
}

.partners-logo-scroll-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 1rem; /* Ruang untuk scrollbar jika ada */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-accent) var(--bg-secondary);
    /* Menghilangkan scrollbar visual jika diinginkan, tapi fungsionalitas scroll tetap ada */
    /* &::-webkit-scrollbar { display: none; } */
}
.partners-logo-scroll-container::-webkit-scrollbar { height: 6px; }
.partners-logo-scroll-container::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 3px; }
.partners-logo-scroll-container::-webkit-scrollbar-thumb { background-color: var(--primary-accent); border-radius: 3px; }

.partners-logo-strip {
    display: flex;
    flex-wrap: nowrap; /* Penting agar tidak wrap */
    gap: 3rem; /* Jarak antar logo, bisa disesuaikan */
    align-items: center;
    padding: 0 0.5rem; /* Padding kecil di strip */
    margin: 0 auto; /* Pusatkan jika tidak melebihi container */
}
.partner-logo-item {
    flex-shrink: 0; /* Agar logo tidak mengecil */
}
.partner-logo-item img {
    max-width: 130px; /* Lebar maksimal logo partner */
    max-height: 35px; /* Tinggi maksimal logo partner, sesuaikan agar proporsional */
    object-fit: contain;
    filter: grayscale(80%) opacity(0.65); /* Grayscale lebih ringan, opacity sedikit lebih tinggi */
    transition: var(--transition-ease);
}
.partner-logo-item a:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.08); /* Zoom sedikit saat hover */
}


/* css/style.css */
/* ... (CSS lain tetap sama) ... */

/* KARTU MEME (DIREKTORI) - DIKEMBALIKAN KE UKURAN LEBIH KECIL & RAPIH */
#directory-listing {
    padding-top: 4rem;
}
#directory-listing .section-title,
#directory-listing .section-subtitle {
    margin-top: 0;
}

.meme-card-grid {
    display: grid;
    /* Menggunakan minmax untuk fleksibilitas, targetkan kartu lebih kecil */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* MIN LEBAR KARTU KECIL */
    gap: 1.25rem; /* Gap antar kartu */
    margin-bottom: 3rem;
}

/* Breakpoints untuk jumlah kolom yang lebih banyak jika layar besar */
/* Anda bisa sesuaikan ini. Jika minmax di atas sudah cukup, ini bisa opsional */
@media (min-width: 520px) { .meme-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } /* Tetap fleksibel */
@media (min-width: 780px) { .meme-card-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (min-width: 1024px) { .meme-card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (min-width: 1280px) { .meme-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } } /* Bisa sampai 5 kartu jika lebar container 1280px */


.meme-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: calc(var(--border-radius) - 2px); /* Radius sedikit lebih kecil */
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease;
    overflow: hidden;
    box-shadow: none;
}
.meme-card:hover {
    transform: translateY(-4px); /* Efek hover lebih subtle */
    box-shadow: var(--card-shadow-hover);
    border-color: var(--primary-accent);
}

.meme-card .meme-card-image-wrapper {
    width: 100%;
    padding-top: 70%; /* Aspect ratio gambar (Tinggi = 70% dari Lebar). Sesuaikan jika perlu. */
    position: relative;
    background-color: var(--bg-tertiary);
    /* Hapus border-bottom jika ingin gambar menyatu */
}
.meme-card .meme-card-logo {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* Atau 'contain' jika logo sering terpotong */
    transition: transform 0.3s ease;
}
.meme-card:hover .meme-card-logo { transform: scale(1.03); } /* Zoom lebih kecil */
.placeholder-logo { object-fit: scale-down; padding: 10%; opacity: 0.4; }

.meme-card .meme-card-content {
    padding: 0.8rem; /* Padding konten lebih kecil */
    display: flex; flex-direction: column; flex-grow: 1;
    border-top: 1px solid var(--border-color-primary); /* Pemisah konten dari gambar */
}
.meme-card .meme-card-title {
    font-size: 0.9rem; /* Judul lebih kecil */
    font-weight: 600;
    margin-bottom: 0.1rem;
    line-height: 1.25;
    white-space: nowrap; /* Agar judul tidak wrap, tampilkan ellipsis jika terlalu panjang */
    overflow: hidden;
    text-overflow: ellipsis;
}
.meme-card .meme-card-title a {
    color: var(--text-color-primary); text-decoration: none; transition: color 0.2s ease;
}
.meme-card .meme-card-title a:hover { color: var(--primary-accent); }

.meme-card .meme-card-symbol {
    font-size: 0.7rem; /* Simbol sangat kecil */
    color: var(--text-color-muted);
    font-weight: 500;
    font-family: var(--font-mono); margin-bottom: 0.4rem; text-transform: uppercase;
}
.meme-card .meme-card-description {
    font-size: 0.8rem; /* Deskripsi lebih kecil */
    color: var(--text-color-secondary); line-height: 1.4; margin-bottom: 0.6rem;
    flex-grow: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi deskripsi menjadi 2 baris */
    -webkit-box-orient: vertical;
    min-height: calc(1.4em * 2); /* Ruang untuk 2 baris */
}
.meme-card .btn-card-details {
    background-color: transparent; /* Tombol outline */
    color: var(--primary-accent);
    border: 1px solid var(--primary-accent);
    width: 100%; text-align: center; font-weight: 500;
    margin-top: auto;
    font-size: 0.75rem; /* Tombol sangat kecil */
    padding: 0.5rem 0.7rem; /* Padding tombol lebih kecil */
}
.meme-card .btn-card-details:hover {
    background-color: var(--primary-accent);
    color: var(--primary-accent-text); /* Teks putih saat tombol dihover */
    transform: translateY(-1px);
}
.meme-card .btn-card-details i {
    margin-left: 0.25rem;
    font-size: 0.85em; /* Ikon sedikit lebih kecil dari teks tombol */
    transition: transform 0.2s ease-in-out;
}
.meme-card .btn-card-details:hover i { transform: translateX(2px); }

/* ... (CSS lain tetap sama) ... */

/* css/style.css */
/* ... (CSS lain tetap sama) ... */

/* Section Cara Kerja (How It Works) */
.how-it-works-section {
    padding: 4rem 0;
    background-color: var(--bg-secondary); /* Latar beda agar menonjol dari section lain */
    margin-top: 0; /* Hapus margin atas jika ada section lain di atasnya */
    border-top: 1px solid var(--border-color-primary);
}
.how-it-works-section .section-title {
    margin-bottom: 1rem;
}
/* Subtitle sudah di-style global, bisa digunakan di sini */
/* .how-it-works-section .section-subtitle { ... } */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsif */
    gap: 2.5rem; /* Jarak antar step-card, bisa disesuaikan */
    /* Hapus margin-bottom jika tidak ada CTA lagi di bawahnya */
}

.step-card {
    background-color: var(--bg-primary); /* Latar step-card lebih gelap dari section-nya */
    padding: 2.5rem 1.5rem 2rem 1.5rem; /* Atas, Kanan-Kiri, Bawah */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-primary);
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Untuk alignment konten vertikal */
    flex-direction: column; /* Susun konten secara vertikal */
    align-items: center; /* Pusatkan konten secara horizontal */
}
.step-card:hover {
    transform: translateY(-6px); /* Efek hover lebih jelas */
    box-shadow: var(--card-shadow-hover);
}

.step-number {
    position: absolute;
    top: -1.5rem; /* Posisi nomor sedikit di atas kartu */
    /* left: 50%; (tidak perlu jika step-card sudah align-items: center) */
    /* transform: translateX(-50%); (tidak perlu) */
    background-color: var(--primary-accent);
    color: var(--primary-accent-text);
    width: 3rem; /* 48px */
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    border: 4px solid var(--bg-secondary); /* Border agar "muncul" dari section */
    box-shadow: 0 3px 7px rgba(0,0,0,0.15);
    z-index: 1; /* Pastikan nomor di atas konten kartu */
}

.step-icon {
    font-size: 2.8rem; /* 44.8px - Ikon lebih besar */
    color: var(--primary-accent);
    margin-bottom: 1.25rem; /* Jarak dari ikon ke judul langkah */
    margin-top: 2rem; /* Beri ruang karena ada nomor di atas */
    line-height: 1;
}

.step-title {
    font-size: 1.375rem; /* 22px - Judul langkah lebih besar */
    font-weight: 600;
    color: var(--text-color-primary);
    margin-bottom: 0.75rem;
}

.step-description {
    font-size: 0.95rem;
    color: var(--text-color-secondary);
    line-height: 1.6;
    flex-grow: 1; /* Agar deskripsi mengisi ruang jika tingginya beda-beda */
    max-width: 300px; /* Batasi lebar teks deskripsi agar tidak terlalu melebar */
    margin-left: auto;
    margin-right: auto;
}

/* Responsif untuk How It Works Section */
@media (max-width: 768px) {
    .steps-grid {
        gap: 2rem; /* Kurangi gap di mobile */
    }
    .step-card {
        padding: 2rem 1.25rem 1.5rem 1.25rem;
    }
    .step-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        top: -1.25rem;
    }
    .step-icon {
        font-size: 2.25rem;
        margin-top: 1.5rem;
    }
    .step-title {
        font-size: 1.2rem;
    }
}

/* ... (CSS lain seperti Footer, Form, Detail Page tetap sama) ... */

/* Styling Halaman Detail Meme (meme.php) */
.page-detail-wrapper { padding-bottom: 3rem; }
.btn-back { background-color: var(--bg-secondary); color: var(--text-color-secondary); border: 1px solid var(--border-color-primary); margin-bottom: 2rem; font-weight: 500; }
.btn-back:hover { border-color: var(--primary-accent); color: var(--primary-accent); background-color: var(--bg-tertiary); }
.btn-back i { margin-right: 0.5rem; }
.meme-detail-header-main { background-color: var(--bg-secondary); border: 1px solid var(--border-color-primary); border-radius: var(--border-radius); padding: 2rem; margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.meme-logo-wrapper-large { margin-bottom: 1.5rem; }
.token-logo-large { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-secondary); box-shadow: 0 0 0 3px var(--primary-accent); background-color: var(--bg-tertiary); }
.meme-title-group h1 { font-size: 2.25rem; font-weight: 800; color: var(--text-color-primary); margin-bottom: 0.25rem; }
.token-symbol-display { font-size: 1.25rem; color: var(--text-color-secondary); font-weight: 500; margin-bottom: 1.5rem; font-family: var(--font-mono); }
.meme-actions-header { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn-action { background-color: var(--primary-accent); color: var(--primary-accent-text); min-width: 150px; border-color: var(--primary-accent); }
.btn-action:hover { background-color: var(--primary-accent-hover); border-color: var(--primary-accent-hover); }
.btn-action i { margin-right: 0.5rem; }
.meme-detail-content-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.content-panel { background-color: var(--bg-secondary); border: 1px solid var(--border-color-primary); border-radius: var(--border-radius); padding: 1.5rem; }
.content-panel h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-color-primary); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color-primary); display: flex; align-items: center; }
.content-panel h2 i { margin-right: 0.75rem; color: var(--primary-accent); font-size: 1.1em; }
.content-panel p { font-size: 1rem; color: var(--text-color-secondary); line-height: 1.7; }
.contract-address-box { background-color: var(--bg-tertiary); border: 1px solid var(--border-color-primary); border-radius: calc(var(--border-radius) - 2px); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); margin-top: 0.5rem; }
.contract-address-box code { color: var(--text-color-primary); font-size: 0.95em; word-break: break-all; }
.btn-copy-contract { background: none; border: none; color: var(--primary-accent); cursor: pointer; font-weight: 500; font-size: 0.9em; padding: 0.25rem 0.5rem; margin-left: 1rem; display: inline-flex; align-items: center; }
.btn-copy-contract i { margin-right: 0.3rem; }
.btn-copy-contract.copied { color: var(--primary-accent-hover); }
.community-links { display: flex; flex-direction: column; gap: 0.75rem; }
.social-link { display: inline-flex; align-items: center; padding: 0.75rem 1rem; border-radius: var(--border-radius); text-decoration: none; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; border: 1px solid var(--border-color-primary); }
.social-link i { margin-right: 0.75rem; font-size: 1.2em; }
.social-link.telegram { background-color: rgba(0, 136, 204, 0.1); color: #00A0D9; border-color:#00A0D9;}
.social-link.telegram:hover { background-color: rgba(0, 136, 204, 0.2); }
.social-link.twitter { background-color: rgba(29, 161, 242, 0.1); color: #1DA1F2; border-color:#1DA1F2;}
.social-link.twitter:hover { background-color: rgba(29, 161, 242, 0.2); }

/* Footer */
.site-footer { background-color: var(--bg-tertiary); color: var(--text-color-secondary); padding: 3rem 0 2rem 0; border-top: 1px solid var(--border-color-primary); margin-top: 4rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-about h4, .footer-links h4, .footer-social h4 { font-size: 1.1rem; font-weight: 600; color: var(--text-color-primary); margin-bottom: 1rem; }
.footer-about p { font-size: 0.95rem; line-height: 1.7; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links ul li { margin-bottom: 0.5rem; }
.footer-links ul li a { color: var(--text-color-secondary); text-decoration: none; transition: color 0.2s ease; }
.footer-links ul li a:hover { color: var(--primary-accent); }
.footer-social a { color: var(--text-color-secondary); font-size: 1.5rem; margin-right: 1rem; text-decoration: none; transition: color 0.2s ease; }
.footer-social a:hover { color: var(--primary-accent); }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-color-primary); font-size: 0.9rem; }
.footer-bottom i.fa-heart { color: var(--primary-accent); }

/* Responsif (Pastikan media queries ini konsisten dengan perubahan di atas) */
@media (max-width: 992px) {
    .navbar-links { display: none; }
    .btn-cta-navbar { font-size: 0.85rem; padding: 0.5rem 0.8rem;}
    .partners-logo-strip { gap: 2rem; }
}
@media (max-width: 768px) {
    html { font-size: 15px; }
    body { padding-top: 60px; --navbar-height: 60px;}
    .hero-section h1 { font-size: 2rem; }
    .hero-section.sayfor-hero h1 { font-size: 2.25rem; }
    .hero-section p.subtitle { font-size: 1rem; }
    .section-title { font-size: 1.5rem; margin-bottom: 2rem; }
    .section-subtitle { font-size: 1rem; margin-bottom: 2rem; }
    .about-content-grid { gap: 2rem; }
    .about-text p { font-size: 1rem; }
    .roadmap-timeline::after { left: 25px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 15px; text-align: left !important; left: 0 !important; margin-bottom: 2rem; }
    .timeline-item:nth-child(even) { left: 0 !important; }
    .timeline-icon { left: 0 !important; margin-left: 0; transform: translateY(-50%) translateX(-50%) translateX(25px); }
    .timeline-content h3 { font-size: 1.1rem; }
    .timeline-content p { font-size: 0.9rem; }
    .partners-logo-strip { gap: 1.5rem; }
    .partner-logo-item img { max-width: 100px; max-height: 35px; }
    .meme-card-grid { grid-template-columns: 1fr; gap: 1.5rem; } /* Pastikan ini sesuai */
    .meme-card .meme-card-content { padding: 0.8rem; }
    .meme-detail-header-main { flex-direction: column; padding: 1.5rem; }
    .token-logo-large { width: 80px; height: 80px; }
    .meme-title-group h1 { font-size: 1.75rem; }
    .token-symbol-display { font-size: 1.1rem; }
    .meme-actions-header { flex-direction: column; width: 100%;}
    .btn-action { width: 100%; }
    .content-panel { padding: 1rem; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-social { margin-top: 1rem; }
    .steps-grid { gap: 1.5rem; } 
    .step-card { padding: 1.5rem 1rem; }
    .step-number { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; top: -1.125rem; }
    .step-icon { font-size: 2rem; margin-top: 1rem; }
}
/* css/style.css */
/* ... (CSS Anda yang sudah ada untuk :root, body, container, navbar, dll.) ... */

/* Styling Form (Pastikan ini ada dan sesuai, atau timpa/gabungkan) */
/* Anda sudah memiliki sebagian besar styling ini dari CSS yang Anda berikan, */
/* ini adalah peninjauan dan penambahan untuk kerapian. */

.form-page-header h1 { /* Untuk judul di halaman create */
    font-size: 2.25rem; /* Ukuran bisa disesuaikan */
    color: var(--text-color-primary);
    margin-bottom: 0.5rem;
}
.form-page-header p {
    color: var(--text-color-secondary);
    font-size: 1.1rem;
}

#createMemeForm {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-primary);
    padding: 2rem; /* Padding di dalam form */
    border-radius: var(--border-radius);
    margin-top: 1.5rem; /* Jarak dari header halaman form */
    margin-bottom: 3rem;
}

/* BARU: Layout Grid untuk Form (Opsional) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk mobile */
    gap: 1.5rem; /* Jarak antar field di grid */
}

@media (min-width: 768px) { /* 2 kolom di tablet dan desktop */
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-group {
    margin-bottom: 1.5rem; /* Jarak standar antar form group */
}

.form-group.form-group-full { /* BARU: Untuk field yang ingin full width di dalam grid */
    grid-column: 1 / -1; /* Span semua kolom grid */
}


.form-group label {
    display: block;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-color-secondary);
    margin-bottom: 0.5rem; /* 8px */
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="file"],
.form-group textarea {
    width: 100%; /* Input mengisi lebar parentnya (.form-group) */
    padding: 0.75rem 1rem; /* 12px 16px */
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--text-color-primary);
    background-color: var(--bg-primary); /* Latar input sedikit lebih gelap */
    border: 1px solid var(--border-color-primary);
    border-radius: var(--border-radius);
    transition: all 0.2s ease-in-out;
}

.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="file"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.3); /* Sesuai aksen hijau Anda */
    background-color: var(--bg-secondary); /* Latar input saat fokus */
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-muted);
}

#slug-feedback { /* Untuk pesan ketersediaan slug */
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 1.2em; /* Beri ruang agar layout tidak loncat saat pesan muncul */
}
/* Warna feedback bisa diatur oleh JS, tapi defaultnya: */
#slug-feedback.available { color: var(--primary-accent); }
#slug-feedback.unavailable { color: #EF4444; } /* Warna merah untuk tidak tersedia */
#slug-feedback.error { color: #FACC15; } /* Warna kuning untuk error format */


/* BARU: Styling untuk Image Preview (Opsional) */
.image-preview-container {
    margin-top: 10px;
    width: 150px; 
    height: 150px;
    border: 2px dashed var(--border-color-primary);
    border-radius: var(--border-radius);
    display: flex; /* Awalnya flex, akan diubah oleh JS jika ada gambar */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-primary);
    cursor: pointer;
    position: relative;
}
.image-preview { /* Ini untuk tag <img> pratinjau */
    max-width: 100%;
    max-height: 100%;
    display: none; /* Awalnya disembunyikan */
    object-fit: cover; 
}
.image-preview-placeholder { /* Teks placeholder */
    color: var(--text-color-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 10px;
}

/* BARU: Styling untuk judul section di dalam form */
.form-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color-primary);
    margin-top: 2.5rem; /* Jarak atas sebelum section baru */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-primary);
}

/* BARU: Styling untuk pembungkus tombol form */
.form-actions {
    margin-top: 2rem;
    text-align: left; /* Atau 'right' jika Anda lebih suka tombol di kanan */
}
#createMemeForm .btn.btn-primary { /* Tombol submit utama */
    background-color: var(--primary-accent);
    color: var(--primary-accent-text);
    border-color: var(--primary-accent);
    min-width: 200px; /* Lebar minimum tombol */
    padding: 0.75rem 1.5rem; /* Padding tombol */
    font-size: 1rem; /* Ukuran font tombol */
}
#createMemeForm .btn.btn-primary:hover {
    background-color: var(--primary-accent-hover);
    border-color: var(--primary-accent-hover);
}
#createMemeForm .btn.btn-primary i {
    margin-right: 0.5rem;
}

/* Styling Error Messages (Pastikan ini ada dan benar) */
.form-errors {
    background-color: rgba(239, 68, 68, 0.1); /* Warna merah transparan */
    border: 1px solid #EF4444; /* Warna border merah */
    color: #F87171; /* Warna teks merah muda */
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}
.form-errors strong { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: 1.25rem; }
.form-errors ul li { margin-bottom: 0.25rem; }

/* ... (CSS Responsif Anda yang sudah ada) ... */
/* Pastikan media queries Anda juga mencakup penyesuaian untuk .form-grid jika perlu */
@media (max-width: 768px) {
    /* ... (CSS responsif lain) ... */
    .form-grid {
        grid-template-columns: 1fr; /* Paksa 1 kolom di mobile */
    }
    #createM छहForm { padding: 1.5rem; } /* Padding form lebih kecil di mobile */
    .form-page-header h1 { font-size: 1.75rem; }
    .form-page-header p { font-size: 1rem; }
}
/* css/style.css */
/* ... (CSS lain yang sudah ada) ... */

/* Tombol CTA di bawah section How It Works */
.cta-bottom-section {
    text-align: center; /* Ini akan memusatkan tombol */
    margin-top: 3rem;   /* Jarak dari steps-grid di atasnya */
    padding-bottom: 1rem; /* Sedikit padding bawah jika ini adalah akhir dari section */
}

/* .btn-hero sudah di-style di bagian Hero Section.
   Jika Anda ingin tombol ini memiliki style yang sedikit berbeda,
   Anda bisa membuat class baru atau override di sini.
   Contoh jika ingin sedikit lebih kecil dari tombol hero utama:
*/
.cta-bottom-section .btn-hero {
    padding: 0.8rem 1.8rem; /* Sedikit lebih kecil dari tombol hero utama */
    font-size: 1rem;     /* Font sedikit lebih kecil */
}
.cta-bottom-section .btn-hero i {
    margin-right: 0.6rem; /* Jarak ikon dari teks */
}

/* ... (CSS lain seperti Footer, dll.) ... */
/* css/style.css */
/* ... (CSS Anda yang sudah ada untuk :root, body, navbar, hero umum, section titles, dll.) ... */

/* STYLING BARU DAN SPESIFIK UNTUK HALAMAN DETAIL TOKEN (list.php / meme.php) */

/* Hero Section Halaman Detail Token */
.token-detail-hero {
    background: var(--bg-secondary); /* Atau bisa gradien seperti di index.php .sayfor-hero */
    /* background: linear-gradient(145deg, var(--bg-tertiary) 0%, #1a2c47 100%); */
    padding: 3rem 0;
    border-bottom: 1px solid var(--border-color-primary);
    text-align: center; /* Pusatkan konten hero secara default */
}
@media (min-width: 992px) { /* Lebih lebar untuk desktop */
    .token-detail-hero {
        padding: 4rem 0;
        text-align: left; /* Rata kiri di desktop */
    }
}

.token-hero-content {
    display: flex;
    flex-direction: column; /* Mobile first: logo di atas, info di bawah */
    align-items: center;
    gap: 1.5rem;
}
@media (min-width: 992px) {
    .token-hero-content {
        flex-direction: row; /* Berdampingan di desktop */
        align-items: center; /* Sejajarkan vertikal */
        gap: 3rem; /* Jarak lebih besar */
    }
}

.token-hero-logo-container {
    flex-shrink: 0; /* Agar logo tidak mengecil */
    margin-bottom: 1rem; /* Jarak bawah di mobile */
}
@media (min-width: 992px) {
    .token-hero-logo-container {
        margin-bottom: 0;
    }
}

.token-hero-logo {
    width: 120px; /* Ukuran logo yang bagus */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-color); /* Border agar "muncul" dari latar */
    box-shadow: 0 0 0 4px var(--primary-accent), 0 8px 20px rgba(0,0,0,0.25); /* Efek double border/glow dan shadow */
    background-color: var(--bg-tertiary); /* Latar jika logo transparan */
}
.token-hero-logo-placeholder { /* Placeholder jika tidak ada logo */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--primary-accent);
    color: var(--primary-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem; /* Huruf besar */
    font-weight: 700;
    border: 4px solid var(--bg-color);
    box-shadow: 0 0 0 4px var(--primary-accent);
}

@media (min-width: 992px) {
    .token-hero-logo, .token-hero-logo-placeholder {
        width: 140px; /* Sedikit lebih besar di desktop */
        height: 140px;
        font-size: 3.5rem;
    }
}


.token-hero-info {
    flex-grow: 1;
}
.token-hero-info h1 {
    font-size: 2.5rem; /* Ukuran judul token */
    font-weight: 800;
    color: var(--text-color-primary);
    margin-bottom: 0.25rem;
    line-height: 1.1;
}
.token-hero-symbol {
    font-size: 1.35rem; /* Ukuran simbol */
    font-family: var(--font-mono);
    color: var(--text-color-secondary);
    margin-bottom: 1.5rem; /* Jarak ke tombol aksi */
    display: block;
}
.token-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center; /* Pusatkan tombol di mobile */
}
@media (min-width: 992px) {
    .token-hero-info h1 { font-size: 3rem; }
    .token-hero-symbol { font-size: 1.6rem; }
    .token-hero-actions {
        justify-content: flex-start; /* Rata kiri tombol di desktop */
        gap: 1rem;
    }
}

.btn-hero-action { /* Tombol di hero detail, misal Website, Telegram */
    background-color: rgba(var(--primary-accent-rgb, 35, 134, 54), 0.1); /* Latar transparan dengan hint warna aksen */
    color: var(--primary-accent);
    border: 1px solid var(--primary-accent);
    padding: 0.7rem 1.3rem; /* Padding tombol */
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--border-radius);
}
.btn-hero-action:hover {
    background-color: var(--primary-accent);
    color: var(--primary-accent-text); /* Teks jadi putih saat hover */
    border-color: var(--primary-accent);
}
.btn-hero-action i {
    margin-right: 0.6rem;
}
/* Warna spesifik untuk tombol sosial (opsional, jika ingin membedakan) */
.btn-hero-action.telegram:hover { background-color: #0088CC; border-color: #0088CC; color:white; }
.btn-hero-action.twitter:hover { background-color: #1DA1F2; border-color: #1DA1F2; color:white; }


/* Layout Grid Utama Halaman Detail */
.token-detail-page {
    padding-top: 2.5rem; /* Padding atas untuk konten di bawah hero */
}

.token-detail-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk mobile */
    gap: 2rem; /* Jarak antar main content dan sidebar */
}
@media (min-width: 992px) { /* Layout 2 kolom di desktop */
    .token-detail-grid {
        /* Kolom utama lebih lebar, sidebar lebih sempit */
        grid-template-columns: minmax(0, 2.8fr) minmax(0, 1.2fr); 
    }
}

.token-detail-main {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Jarak antar panel di kolom utama */
}
.token-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Jarak antar panel di sidebar */
}

/* Styling Panel Konten (Card Panel) */
.card-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: none; /* Lebih flat di dark mode, atau var(--card-shadow-hover) jika suka */
}
@media (min-width: 768px) {
    .card-panel {
        padding: 2rem; /* Padding lebih besar di desktop */
    }
}

.panel-title {
    font-size: 1.375rem; /* Judul panel lebih besar */
    font-weight: 600;
    color: var(--text-color-primary);
    margin-top: 0;
    margin-bottom: 1.5rem; /* Jarak ke konten panel */
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color-primary);
    display: flex;
    align-items: center;
}
.panel-title i {
    margin-right: 0.85rem;
    color: var(--primary-accent);
    font-size: 1.1em; /* Ikon sedikit lebih besar dari teks judul */
    width: 22px;
    text-align: center;
}
.panel-content {
    font-size: 1rem;
    color: var(--text-color-secondary);
    line-height: 1.75; /* Line height lebih lega */
}
.panel-content .description-content p:last-child {
    margin-bottom: 0;
}

/* Kontrak Address Box di Detail */
.contract-address-box-detail {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color-primary);
    border-radius: calc(var(--border-radius) - 2px);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    margin-top: 0.5rem;
    flex-wrap: wrap; /* Agar tombol copy bisa turun di mobile */
    gap: 0.5rem;
}
.contract-address-box-detail code {
    color: var(--text-color-primary);
    font-size: 0.95em;
    word-break: break-all;
    margin-right: 1rem; 
    flex-grow: 1; /* Agar code mengambil sisa ruang */
}
.btn-copy { /* Tombol copy */
    background: var(--primary-accent);
    color: var(--primary-accent-text);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Agar tombol tidak mengecil */
}
.btn-copy:hover {
    background-color: var(--primary-accent-hover);
}
.btn-copy i {
    margin-right: 0.5rem;
}
.btn-copy.copied {
    background-color: var(--text-color-muted);
    color: var(--bg-secondary);
}
.explorer-link { /* Link ke block explorer */
    display: block;
    font-size: 0.85rem;
    color: var(--primary-accent);
    text-decoration: none;
    margin-top: 0.75rem;
    font-weight: 500;
}
.explorer-link:hover { text-decoration: underline; }
.explorer-link i { margin-left: 0.3rem; }


/* Quick Links & Token Info List di Sidebar */
.quick-links-list, .token-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem; /* Jarak antar item */
}
.quick-link-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem; /* Padding item link */
    background-color: var(--bg-tertiary);
    color: var(--text-color-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color-primary);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
}
.quick-link-item:hover {
    background-color: var(--primary-accent);
    color: var(--primary-accent-text);
    border-color: var(--primary-accent);
}
.quick-link-item i {
    margin-right: 0.85rem;
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}

.token-info-list .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Agar sejajar jika value panjang */
    font-size: 0.95rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border-color-secondary);
    flex-wrap: wrap; /* Agar bisa wrap di mobile */
    gap: 0.5rem;
}
.token-info-list .info-item:last-child {
    border-bottom: none;
}
.token-info-list .info-item span {
    color: var(--text-color-muted);
    margin-right: 0.5rem; /* Jarak label dari value */
}
.token-info-list .info-item strong {
    color: var(--text-color-primary);
    font-weight: 500;
    text-align: right; /* Value rata kanan */
    word-break: break-all; /* Jika value panjang (misal supply) */
}

.btn-back-full-width { /* Tombol kembali di bawah sidebar */
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 1.5rem; /* Jarak dari panel terakhir */
    background-color: var(--bg-tertiary);
    color: var(--text-color-secondary);
    border-color: var(--border-color-primary);
    padding: 0.75rem 1rem;
}
.btn-back-full-width:hover {
    background-color: var(--primary-accent);
    color: var(--primary-accent-text);
    border-color: var(--primary-accent);
}

/* Penyesuaian Umum Responsif untuk Detail Page */
@media (max-width: 991px) { /* Saat sidebar turun ke bawah */
    .token-detail-sidebar {
        margin-top: 2rem; /* Beri jarak jika sidebar di bawah */
    }
}
@media (max-width: 480px) { /* Mobile sangat kecil */
    .contract-address-box-detail {
        flex-direction: column; /* Tombol copy di bawah alamat di mobile kecil */
        align-items: flex-start;
    }
    .btn-copy {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%; /* Tombol copy full width */
        justify-content: center;
    }
}

/* ... (CSS Responsif Anda yang sudah ada di paling bawah dari file utama, pastikan tidak ada konflik) ... */
.panel-content .description-content { /* Atau class apa pun yang membungkus <p> deskripsi */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.75; /* Atau sesuai preferensi Anda */
    color: var(--text-color-secondary);
}
/* css/style.css */
/* ... (CSS Anda yang sudah ada untuk :root, body, navbar umum, hero umum, section titles, dll. TETAP ADA) ... */

/* ============================================= */
/* == STYLING BARU UNTUK HALAMAN DETAIL TOKEN == */
/* ============================================= */

/* Class khusus untuk body halaman detail jika perlu styling global berbeda */
.meme-detail-page-body {
    /* Contoh: bisa ada background pattern khusus untuk halaman detail */
    /* background-image: url('path/to/your/cool-pattern.svg'), var(--bg-color); */
    /* background-blend-mode: overlay; */
}

/* Dynamic Hero Section untuk Halaman Detail Token */
.token-detail-hero {
    /* Background bisa berupa gambar, gradien, atau pattern */
    /* background: linear-gradient(160deg, rgba(var(--primary-accent-rgb, 35, 134, 54), 0.2) 0%, var(--bg-secondary) 70%, var(--bg-tertiary) 100%); */
    /* Atau menggunakan gambar dengan overlay: */
    /* background-image: linear-gradient(rgba(13, 17, 23, 0.8), rgba(13, 17, 23, 0.95)), url('path/to/default-token-hero-bg.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    background-color: var(--bg-tertiary); /* Fallback jika tidak ada gambar/gradien */
    padding: 3.5rem 0;
    border-bottom: 3px solid var(--primary-accent); /* Border aksen yang lebih tebal */
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 2.5rem; /* Jarak ke konten utama */
}
/* Efek animasi halus pada background hero (opsional) */
.token-detail-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(var(--primary-accent-rgb, 35, 134, 54), 0.1) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(var(--primary-accent-rgb, 35, 134, 54), 0.08) 0%, transparent 50%);
    opacity: 0.8;
    animation: pulseBG 10s infinite ease-in-out;
    pointer-events: none;
}
@keyframes pulseBG {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}


.token-hero-content {
    position: relative; /* Agar konten di atas pseudo-elements */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Jarak antara logo dan info di mobile */
}

@media (min-width: 992px) {
    .token-detail-hero {
        padding: 5rem 0;
        text-align: left;
    }
    .token-hero-content {
        flex-direction: row;
        align-items: flex-start; /* Logo dan teks mulai dari atas */
        gap: 3rem;
    }
}

.token-hero-logo-container {
    flex-shrink: 0;
    margin-bottom: 1rem;
    perspective: 1000px; /* Untuk efek 3D pada logo (opsional) */
}
@media (min-width: 992px) {
    .token-hero-logo-container {
        margin-bottom: 0;
    }
}

.dynamic-token-logo, .token-hero-logo { /* Gabungkan class jika visualnya sama */
    width: 140px;
    height: 140px;
    border-radius: 25%; /* Sedikit rounded, atau '50%' untuk bulat */
    object-fit: cover;
    border: 5px solid var(--bg-secondary); /* Border tebal agar "pop" */
    background-color: var(--bg-tertiary);
    box-shadow: 0 0 15px 5px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.4), /* Glow effect lebih kuat */
                0 6px 20px rgba(0,0,0,0.3);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; /* Transisi lebih bouncy */
}
.dynamic-token-logo:hover, .token-hero-logo:hover {
    transform: scale(1.1) rotateY(10deg) rotateX(5deg); /* Efek 3D hover */
    box-shadow: 0 0 25px 8px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.6),
                0 8px 25px rgba(0,0,0,0.4);
}

.token-hero-logo-placeholder { /* Placeholder jika tidak ada logo */
    width: 140px; height: 140px; border-radius: 25%;
    background-color: var(--primary-accent); color: var(--primary-accent-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; font-weight: 800;
    font-family: 'Bangers', cursive; /* Font beda untuk placeholder */
    border: 5px solid var(--bg-secondary);
    box-shadow: 0 0 15px 5px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.4);
}

@media (min-width: 992px) {
    .dynamic-token-logo, .token-hero-logo, .token-hero-logo-placeholder {
        width: 180px; height: 180px; font-size: 5rem;
    }
}


.token-hero-info { flex-grow: 1; }
.token-main-title { /* Menggunakan class ini dari HTML Anda */
    font-family: 'Bangers', cursive; /* Atau 'Luckiest Guy', 'Press Start 2P' */
    font-size: 3.5rem; /* Judul sangat besar dan gaul */
    color: var(--text-color-primary);
    letter-spacing: 1.5px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    text-shadow: 3px 3px 0px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.7), /* Efek shadow teks 3D */
                 5px 5px 0px rgba(0,0,0,0.2);
    word-break: break-word;
}
.token-main-symbol { /* Menggunakan class ini dari HTML Anda */
    font-family: var(--font-mono);
    font-size: 1.75rem;
    color: var(--primary-accent);
    font-weight: 600;
    margin-bottom: 2rem; /* Jarak lebih besar ke tombol aksi */
    display: block;
    text-transform: uppercase;
}
.token-hero-actions { /* Dulu .token-main-actions */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Jarak antar tombol */
    justify-content: center;
}
@media (min-width: 992px) {
    .token-main-title { font-size: 4.5rem; }
    .token-main-symbol { font-size: 2rem; }
    .token-hero-actions { justify-content: flex-start; }
}

.btn-dynamic-action, .btn-hero-action { /* Gabungkan styling jika mirip, atau buat terpisah */
    background: var(--primary-accent);
    color: var(--primary-accent-text);
    border: 2px solid var(--primary-accent-hover);
    padding: 0.8rem 1.8rem; /* Tombol lebih besar */
    font-size: 1rem;
    font-weight: 700; /* Font lebih tebal */
    border-radius: 50px; /* Tombol rounded/pill shape */
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.3), 0 2px 5px rgba(0,0,0,0.2);
    transition: var(--transition-ease), transform 0.15s ease-out;
}
.btn-dynamic-action:hover, .btn-hero-action:hover {
    background-color: var(--primary-accent-hover);
    border-color: var(--primary-accent);
    transform: scale(1.05) translateY(-2px); /* Efek hover lebih interaktif */
    box-shadow: 0 6px 15px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.4), 0 3px 7px rgba(0,0,0,0.25);
}
.btn-dynamic-action i, .btn-hero-action i { margin-right: 0.75rem; }


/* Konten Detail Token (Setelah Hero) */
.token-detail-page-content { /* Dulu .token-detail-page */
    padding-top: 3rem;
}

.btn-back-alt { /* Dulu .btn-back */
    display: inline-flex; align-items: center;
    background-color: var(--bg-secondary); color: var(--text-color-secondary);
    border: 1px solid var(--border-color-primary); padding: 0.7rem 1.4rem;
    border-radius: 50px; /* Pill shape */
    text-decoration: none; font-weight: 500; margin-bottom: 2.5rem;
    transition: var(--transition-ease);
}
.btn-back-alt:hover {
    background-color: var(--primary-accent); color: var(--primary-accent-text);
    border-color: var(--primary-accent); transform: translateX(-3px);
}
.btn-back-alt i { margin-right: 0.6rem; }


/* Layout Grid Konten Utama */
.token-detail-layout { /* Dulu .token-detail-grid */
    display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 992px) {
    .token-detail-layout { grid-template-columns: minmax(0, 2.8fr) minmax(0, 1.2fr); }
}
.token-main-column, .token-sidebar-column {
    display: flex; flex-direction: column; gap: 2rem;
}

/* Panel Informasi yang Dimodifikasi */
.token-info-panel { /* Dulu .card-panel atau .token-section .card-panel */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* Efek 'inset' atau border dalam (opsional) */
    /* border-top: 3px solid var(--primary-accent); */
}
@media (min-width: 768px) { .token-info-panel { padding: 2.25rem; } }

.panel-header { /* Dulu .panel-title */
    font-family: 'Bangers', cursive; /* Font beda untuk judul panel */
    font-size: 1.85rem;
    letter-spacing: 1px;
    color: var(--primary-accent);
    margin-top: 0; margin-bottom: 1.5rem; padding-bottom: 0.75rem;
    border-bottom: 2px dashed var(--border-color-primary);
    display: flex; align-items: center;
}
.panel-header i { margin-right: 0.85rem; color: var(--primary-accent); font-size: 1.2em; opacity: 0.9; width: 24px; text-align: center; }
.panel-body { /* Dulu .panel-content */ font-size: 1rem; color: var(--text-color-secondary); line-height: 1.8; }
.panel-body.description-area { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }

/* Contract Box yang Dimodifikasi */
.contract-box { /* Dulu .contract-address-box-detail */
    background: linear-gradient(45deg, var(--bg-tertiary), var(--bg-primary)); /* Gradien untuk box */
    border: 1px solid var(--border-color-primary);
    border-left: 5px solid var(--primary-accent); /* Aksen di kiri */
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem; display: flex; align-items: center;
    justify-content: space-between; font-family: var(--font-mono);
    margin-top: 0.5rem; flex-wrap: wrap; gap: 0.75rem;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.contract-box code {
    color: var(--text-color-primary); font-size: 1rem; word-break: break-all;
    margin-right: 1rem; flex-grow: 1;
    text-shadow: 0 0 8px rgba(var(--primary-accent-rgb, 35, 134, 54), 0.4);
}
.btn-copy-alt { /* Dulu .btn-copy */
    background: var(--primary-accent); color: var(--primary-accent-text); border: none;
    border-radius: var(--border-radius-sm); padding: 0.6rem 1rem; font-size: 0.9rem;
    font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
    transition: background-color 0.2s ease, transform 0.1s ease; flex-shrink: 0;
}
.btn-copy-alt:hover { background-color: var(--primary-accent-hover); transform: scale(1.05); }
.btn-copy-alt i { margin-right: 0.5rem; }
.btn-copy-alt.copied { background-color: var(--text-color-muted); color: var(--bg-secondary); }

/* Quick Links & Token Stats di Sidebar (Dimodifikasi) */
.quick-links-list-alt, .token-stats-list { /* Class baru */
    display: flex; flex-direction: column; gap: 1rem; /* Jarak lebih besar */
}
.sidebar-link-item { /* Dulu .quick-link-item */
    display: flex; align-items: center; padding: 0.9rem 1.2rem;
    background-color: rgba(var(--primary-accent-rgb, 35, 134, 54), 0.08); /* Latar lebih subtle */
    color: var(--text-color-secondary); text-decoration: none;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color-primary);
    border-left: 4px solid var(--primary-accent);
    transition: var(--transition-ease); font-size: 1rem; font-weight: 500;
}
.sidebar-link-item:hover {
    background-color: rgba(var(--primary-accent-rgb, 35, 134, 54), 0.15);
    color: var(--primary-accent); transform: translateX(5px) scale(1.02);
    border-color: var(--primary-accent);
}
.sidebar-link-item i { margin-right: 0.85rem; width: 20px; text-align: center; font-size: 1.1em; color: var(--primary-accent); }

.token-stats-list .stat-item { /* Dulu .info-item */
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1rem; padding: 0.75rem 0.25rem; /* Sedikit padding horizontal */
    border-bottom: 1px dashed var(--border-color-secondary);
    flex-wrap: wrap; gap: 0.5rem;
}
.token-stats-list .stat-item:last-child { border-bottom: none; }
.token-stats-list .stat-item span { color: var(--text-color-muted); font-weight: 500; }
.token-stats-list .stat-item strong { color: var(--text-color-primary); font-weight: 600; text-align: right; word-break: break-all; }

.btn-back-full-width { /* Tombol kembali di bawah sidebar */
    display: flex; width: 100%; text-align: center; justify-content: center;
    margin-top: 1.5rem; background-color: var(--bg-tertiary);
    color: var(--text-color-secondary); border-color: var(--border-color-primary);
    padding: 0.75rem 1rem; border-radius: var(--border-radius); /* Radius biasa */
}
.btn-back-full-width:hover {
    background-color: var(--primary-accent); color: var(--primary-accent-text);
    border-color: var(--primary-accent);
}

/* Variabel RGB untuk Primary Accent (digunakan di rgba) */
:root {
    /* ... variabel lain ... */
    --primary-accent-rgb: 35, 134, 54; /* RGB dari #238636 */
}

/* ... (CSS Responsif Anda yang sudah ada di paling bawah) ... */
/* Pastikan media queries mencakup penyesuaian untuk kelas baru jika perlu */
@media (max-width: 991px) {
    .token-sidebar-column { margin-top: 2rem; }
}
@media (max-width: 480px) {
    .contract-box { flex-direction: column; align-items: flex-start; }
    .btn-copy-alt { margin-left: 0; margin-top: 0.75rem; width: 100%; justify-content: center; }
    .token-main-title { font-size: 2.5rem; }
    .token-main-symbol { font-size: 1.3rem; }
}