/**
 * ============================================================
 * phascal-green.css
 * Custom Green Theme untuk Phascal Studio
 * Diload SETELAH theme.css & theme-light.css
 * ============================================================
 */

/* -------------------------------------------------------
   CSS VARIABLES — Phascal Studio GREEN Brand Colors
   ------------------------------------------------------- */
:root {
    /* Brand accent - GREEN THEME */
    --color-accent:         #6b9f84 !important;
    --color-accent-hover:   #558a71 !important;
    --color-accent-light:   rgba(107, 159, 132, 0.12) !important;

    /* Main color override */
    --tt-main-color: #6b9f84 !important;

    /* Typography */
    --font-primary:   'Syne', 'Plus Jakarta Sans', sans-serif;
    --font-body:      'Inter', system-ui, sans-serif;

    /* Spacing */
    --section-padding: 100px 0;
}

/* -------------------------------------------------------
   GLOBAL OVERRIDES - FORCE GREEN
   ------------------------------------------------------- */
/* Force semua elemen yang menggunakan accent color jadi hijau */
.text-accent        { color: #6b9f84 !important; }
.section-label      { color: #6b9f84 !important; }
.hero-title-accent  { color: #6b9f84 !important; }
.label-line         { background: #6b9f84 !important; }
.hero-stat-number   { color: #6b9f84 !important; }

/* Service & Portfolio */
.service-num        { color: #6b9f84 !important; }
.service-icon       { color: #6b9f84 !important; background: rgba(107, 159, 132, 0.12) !important; }
.portfolio-category { color: #6b9f84 !important; }

/* About Badge */
.about-badge { 
    background: #6b9f84 !important;
    box-shadow: 0 8px 32px rgba(107, 159, 132, 0.3) !important;
}

/* Process Timeline */
.process-step-icon {
    background: rgba(107, 159, 132, 0.12) !important;
    border-color: #6b9f84 !important;
    color: #6b9f84 !important;
}

/* Buttons */
.btn-primary,
.tt-btn-primary {
    background: #6b9f84 !important;
    border-color: #6b9f84 !important;
}
.btn-primary:hover,
.tt-btn-primary:hover {
    background: #558a71 !important;
    border-color: #558a71 !important;
}

.btn-portfolio-action {
    background: #6b9f84 !important;
}
.btn-portfolio-action:hover {
    color: #6b9f84 !important;
}

.btn-outline:hover,
.tt-btn-outline:hover {
    border-color: #6b9f84 !important;
    color: #6b9f84 !important;
}

/* Filter & Cards */
.filter-btn:hover,
.filter-btn.active {
    background: #6b9f84 !important;
    border-color: #6b9f84 !important;
}

.service-card:hover {
    border-color: #6b9f84 !important;
    box-shadow: 0 16px 48px rgba(107, 159, 132, 0.12) !important;
}

.testimonial-card:hover {
    border-color: #6b9f84 !important;
}

/* Social Links */
.social-link:hover {
    background: #6b9f84 !important;
    border-color: #6b9f84 !important;
}

/* Footer */
.footer-links a:hover {
    color: #6b9f84 !important;
}
.footer-contact-list i {
    color: #6b9f84 !important;
}

/* Cursor */
@media (pointer: fine) {
    .cursor-dot {
        background: #6b9f84 !important;
    }
    .cursor-outline {
        border-color: rgba(107, 159, 132, 0.4) !important;
    }
}

/* Preloader */
.preloader-bar::after {
    background: #6b9f84 !important;
}

/* -------------------------------------------------------
   CROSSED SCROLLING TEXT - BLACK & GREEN BACKGROUND
   ------------------------------------------------------- */
/* TEMA TERANG (LIGHTMODE):
   - Belakang (dengan scrt-color-reverse): Hijau background, Putih text
   - Depan (tanpa reverse): Putih background, Hijau text
   
   TEMA GELAP (DARKMODE):
   - Belakang (dengan scrt-color-reverse): Putih background, Hijau text  
   - Depan (tanpa reverse): Hijau background, Putih text
   ------------------------------------------------------- */

/* Light Mode (tema terang) */
body.tt-lightmode-on .tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse {
    background-color: #6b9f84 !important;  /* Belakang = Hijau */
    color: #f3f3f3 !important;              /* Text = Putih */
}

body.tt-lightmode-on .tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) {
    background-color: #f3f3f3 !important;  /* Depan = Putih */
    color: #6b9f84 !important;             /* Text = Hijau */
}

/* Dark Mode (tema gelap) */
body:not(.tt-lightmode-on) .tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse {
    background-color: #6b9f84 !important;  /* Belakang = Hijau */
    color: #f3f3f3 !important;             /* Text = Putih */
}

body:not(.tt-lightmode-on) .tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) {
    background-color: #0E0F11 !important;  /* Depan = Hitam */
    color: #6b9f84 !important;             /* Text = Hijau */
}

/* Default fallback (jika tidak ada class lightmode) */
.tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse {
    background-color: #6b9f84 !important;
    color: #0E0F11 !important;
}

.tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) {
    background-color: #0E0F11 !important;
    color: #6b9f84 !important;
}

/* SVG Separator color matching text color */
body.tt-lightmode-on .tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse .tt-scrt-separator > svg {
    fill: #f3f3f3 !important;  /* Putih (ikuti text) */
}

body.tt-lightmode-on .tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) .tt-scrt-separator > svg {
    fill: #6b9f84 !important;  /* Hijau (ikuti text) */
}

body:not(.tt-lightmode-on) .tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse .tt-scrt-separator > svg {
    fill: #0E0F11 !important;  /* Hitam (ikuti text) */
}

body:not(.tt-lightmode-on) .tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) .tt-scrt-separator > svg {
    fill: #6b9f84 !important;  /* Hijau (ikuti text) */
}

.tt-scrolling-text-crossed .tt-scrolling-text.scrt-color-reverse .tt-scrt-separator > svg {
    fill: #0E0F11 !important;
}

.tt-scrolling-text-crossed .tt-scrolling-text:not(.scrt-color-reverse) .tt-scrt-separator > svg {
    fill: #6b9f84 !important;
}

/* -------------------------------------------------------
   SECTION HELPERS
   ------------------------------------------------------- */
.section-padding    { padding: var(--section-padding); }
.rounded-custom     { border-radius: 12px; }

.section-title {
    font-family:    var(--font-primary);
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    700;
    line-height:    1.15;
}
.section-text {
    font-size:   1rem;
    line-height: 1.8;
    opacity:     0.75;
}


/* -------------------------------------------------------
   PORTFOLIO
   ------------------------------------------------------- */
.portfolio-grid    { display: flex; flex-wrap: wrap; gap: 24px; }
.portfolio-item    { width: calc(33.333% - 16px); }
@media (max-width: 991px) { .portfolio-item { width: calc(50% - 12px); } }
@media (max-width: 575px) { .portfolio-item { width: 100%; } }

.portfolio-card       { border-radius: 12px; overflow: hidden; }
.portfolio-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.portfolio-img         { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-card:hover .portfolio-img { transform: scale(1.05); }

.portfolio-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.7);
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    transition: opacity 0.35s;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-info     { padding: 16px 0; }
.portfolio-title    { font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem; margin: 4px 0 0; }
.portfolio-year     { font-size: 0.8rem; opacity: 0.4; }


/* -------------------------------------------------------
   RESPONSIVE TWEAKS
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .hero-title  { font-size: clamp(2.2rem, 9vw, 3.5rem); }
    .hero-stats  { gap: 20px; }
    .about-badge { right: 10px; bottom: -10px; }
    .section-padding { padding: 70px 0; }
}