/* HealFloW Custom Styles */

/* Apple Emoji Font Support - Orijinal Apple Emojileri */
@font-face {
    font-family: 'Apple Color Emoji';
    src: local('Apple Color Emoji');
    unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+1F600-1F64F, U+1F680-1F6FF, U+1F900-1F9FF, U+1FA00-1FA6F, U+1FA70-1FAFF, U+2190-21FF, U+2300-23FF, U+2B00-2BFF, U+FE00-FE0F;
}

/* Emoji için font stack - Apple emojilerini önceliklendir */
body,
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

/* Emoji karakterleri için özel font stack */
.emoji,
span[class*="text-"]:has-text-emoji,
span:contains("🏠"),
span:contains("🌿"),
span:contains("⚙️"),
span:contains("ℹ️"),
span:contains("📧"),
span:contains("☰"),
span:contains("⌄"),
span:contains("📞"),
span:contains("✉️"),
span:contains("📅"),
span:contains("📍"),
span:contains("📊"),
span:contains("📚"),
span:contains("🌬️"),
span:contains("🚭"),
span:contains("⚖️"),
span:contains("✕"),
span:contains("💬") {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Emoji Font Stack - Apple First */
body,
.emoji,
span[class*="text-"]:has(emoji),
* {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

/* Ensure emojis use Apple Color Emoji font */
span:has(> emoji),
.emoji-icon,
[class*="emoji"] {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', sans-serif;
    font-feature-settings: "liga", "kern";
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga", "kern";
    -moz-font-feature-settings: "liga", "kern";
}

/* Ruh-Beden-Zihin Triangle Icon */
.triangle-icon {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #6b9f3d;
    position: relative;
    margin: 0 auto;
}

.triangle-icon::before,
.triangle-icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

.triangle-icon::before {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #a8d5a3;
    left: -20px;
    top: 10px;
}

.triangle-icon::after {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #2d5016;
    right: -20px;
    top: 10px;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* Button Hover Effects */
.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(107, 159, 61, 0.3);
}

.btn-secondary {
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #6b9f3d;
    color: white;
    transform: translateY(-2px);
}

/* Section Spacing */
.section-padding {
    padding: 5rem 0;
}

/* Quote/Spot Styling */
.quote-spot {
    font-style: italic;
    font-size: 1.5rem;
    color: #2d5016;
    text-align: center;
    padding: 3rem 0;
    border-top: 2px solid #a8d5a3;
    border-bottom: 2px solid #a8d5a3;
    margin: 4rem 0;
}

/* Form Styling */
.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #6b9f3d;
    box-shadow: 0 0 0 3px rgba(107, 159, 61, 0.1);
}

/* Service Card Hover */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: all 0.3s ease;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Bottom Bar */
body {
    padding-bottom: 70px;
    /* Space for bottom bar on mobile */
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Safe area for devices with notch */
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Bottom Bar Responsive Styling */
#mobile-bottom-bar {
    min-height: 60px;
}

@media (max-width: 375px) {

    /* Küçük ekranlar için */
    #mobile-bottom-bar .text-2xl {
        font-size: 1.25rem;
    }

    #mobile-bottom-bar .text-xs {
        font-size: 0.625rem;
    }
}

/* Bottom bar item equal width */
#mobile-bottom-bar>div>* {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

/* Hero Section Animations */
@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroScaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes heroPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes heroShimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes heroRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes heroSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroSlideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero Section Base Styles */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-content {
    animation: heroFadeInUp 1s ease-out;
}

.hero-icon {
    animation: heroScaleIn 1s ease-out 0.2s both;
}

.hero-title {
    animation: heroFadeInUp 1s ease-out 0.3s both;
}

.hero-subtitle {
    animation: heroFadeInUp 1s ease-out 0.5s both;
}

.hero-buttons {
    animation: heroFadeInUp 1s ease-out 0.7s both;
}

/* Floating Animation */
.hero-float {
    animation: heroFloat 6s ease-in-out infinite;
}

/* Pulse Animation */
.hero-pulse {
    animation: heroPulse 3s ease-in-out infinite;
}

/* Staggered Animation Delays */
.hero-stagger-1 {
    animation-delay: 0.1s;
}

.hero-stagger-2 {
    animation-delay: 0.2s;
}

.hero-stagger-3 {
    animation-delay: 0.3s;
}

.hero-stagger-4 {
    animation-delay: 0.4s;
}

.hero-stagger-5 {
    animation-delay: 0.5s;
}

.hero-stagger-6 {
    animation-delay: 0.6s;
}

/* Glassmorphism Effect */
.hero-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient Overlay Animation */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.1) 0%, rgba(107, 159, 61, 0.1) 50%, rgba(168, 213, 163, 0.1) 100%);
    animation: heroShimmer 3s linear infinite;
    background-size: 200% 200%;
}

/* Parallax Background */
.hero-parallax-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* Tech Pattern Animation */
@keyframes techPatternMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px;
    }
}

.hero-tech-pattern {
    animation: techPatternMove 20s linear infinite;
}

/* Circular Blob Animation */
@keyframes blobMove {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.hero-blob {
    animation: blobMove 20s ease-in-out infinite;
    filter: blur(40px);
    opacity: 0.3;
}

/* Card Lift Animation */
@keyframes cardLift {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-card {
    animation: cardLift 1s ease-out 0.3s both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Text Reveal Animation */
@keyframes textReveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.hero-text-reveal {
    animation: textReveal 1.2s ease-out 0.5s both;
}

/* Glow Effect */
.hero-glow {
    position: relative;
}

.hero-glow::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(107, 159, 61, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: heroPulse 3s ease-in-out infinite;
    z-index: -1;
}

/* Mobile CTA Bar */
#mobile-cta-bar {
    bottom: 70px;
    /* Above bottom bar */
}

@media (min-width: 768px) {
    #mobile-cta-bar {
        display: none;
    }
}

#mobile-cta-bar.hidden {
    transform: translateY(100%);
}

/* Bottom Bar Active State */
#mobile-menu-button-bottom.active svg {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Triangle Slider Animations */
.triangle-element {
    transition: all 1s ease-in-out;
}

.triangle-element.active {
    animation: pulseTriangle 2s ease-in-out;
}

.triangle-element.active polygon {
    opacity: 1 !important;
    filter: drop-shadow(0 0 20px rgba(107, 159, 61, 0.6));
    transform-origin: center;
    animation: scaleTriangle 1.5s ease-in-out;
}

.triangle-element.active text {
    opacity: 1 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    animation: textPulse 1.5s ease-in-out;
}

.triangle-element:not(.active) polygon {
    opacity: 0.25;
    transition: opacity 0.8s ease-in-out;
}

.triangle-element:not(.active) text {
    opacity: 0.25;
    transition: opacity 0.8s ease-in-out, font-size 0.8s ease-in-out;
}

@keyframes scaleTriangle {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes textPulse {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseTriangle {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slider-item.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: slideInUp 0.8s ease-out;
}

.slider-dot.active {
    background-color: #2d5016 !important;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(45, 80, 22, 0.5);
}

/* Ruh-Beden-Zihin Enhanced Styles */
.triangle-3d-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
}

.triangle-svg-main {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Triangle Initial Hidden State */
.triangle-svg-hidden {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
    transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.triangle-svg-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Triangle Parts Animation */
.triangle-part-hidden {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.triangle-part-visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered Animation for Triangle Parts */
.triangle-part-visible:nth-child(1) {
    transition-delay: 0.1s;
}

.triangle-part-visible:nth-child(2) {
    transition-delay: 0.3s;
}

.triangle-part-visible:nth-child(3) {
    transition-delay: 0.5s;
}

/* Text Reveal Animation */
.triangle-text-hidden {
    opacity: 0 !important;
    transition: opacity 0.8s ease-out, fill-opacity 0.8s ease-out;
}

.triangle-text-visible {
    opacity: 1 !important;
    fill-opacity: 1;
}

/* Rotating Circle Around Triangle */
.triangle-rotating-circle {
    position: absolute;
    width: 420px;
    height: 420px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-out 1.5s;
    z-index: 1;
}

.triangle-rotating-circle-visible {
    opacity: 1;
}

.rotating-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #6b9f3d, #2d5016);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(107, 159, 61, 0.6);
    top: 0;
    left: 50%;
    animation: rotateAround 8s linear infinite;
}

/* Default transform origin - will be overridden by JS for dynamic sizing */
.rotating-dot {
    transform-origin: 0 210px;
}

.rotating-dot.dot-1 {
    animation-delay: 0s;
}

.rotating-dot.dot-2 {
    animation-delay: 1.33s;
}

.rotating-dot.dot-3 {
    animation-delay: 2.66s;
}

.rotating-dot.dot-4 {
    animation-delay: 4s;
}

.rotating-dot.dot-5 {
    animation-delay: 5.33s;
}

.rotating-dot.dot-6 {
    animation-delay: 6.66s;
}

@keyframes rotateAround {
    from {
        transform: rotate(0deg) translateX(var(--circle-radius, 210px)) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(var(--circle-radius, 210px)) rotate(-360deg);
    }
}

/* Responsive Rotating Circle */
@media (max-width: 768px) {
    .triangle-rotating-circle {
        width: 320px;
        height: 320px;
    }

    .rotating-dot {
        width: 10px;
        height: 10px;
        transform-origin: 0 160px;
    }

    @keyframes rotateAround {
        from {
            transform: rotate(0deg) translateX(160px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(160px) rotate(-360deg);
        }
    }
}

@media (max-width: 640px) {
    .triangle-rotating-circle {
        width: 280px;
        height: 280px;
    }

    .rotating-dot {
        width: 8px;
        height: 8px;
        transform-origin: 0 140px;
    }

    @keyframes rotateAround {
        from {
            transform: rotate(0deg) translateX(140px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translateX(140px) rotate(-360deg);
        }
    }
}

.triangle-element {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.triangle-element.active .triangle-polygon {
    filter: url(#glow) drop-shadow(0 0 20px rgba(107, 159, 61, 0.6));
    transform: scale(1.05);
    animation: trianglePulse 2s ease-in-out infinite;
}

.triangle-element.active .triangle-text {
    font-size: 36px;
    animation: textGlow 2s ease-in-out infinite;
}

.triangle-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.triangle-clickable:hover .triangle-polygon,
.triangle-clickable:active .triangle-polygon {
    filter: url(#glow) drop-shadow(0 0 15px rgba(107, 159, 61, 0.4));
    transform: scale(1.02);
}

.triangle-clickable:active .triangle-polygon {
    transform: scale(0.98);
}

/* Mobile Touch Optimizations */
@media (max-width: 768px) {
    .triangle-svg-main {
        max-width: 100% !important;
        height: auto;
    }

    .triangle-clickable {
        touch-action: manipulation;
    }

    .slider-item {
        min-height: 180px;
    }

    #ruh-beden-zihin-section {
        padding: 3rem 1rem;
    }
}

/* Triangle Animations */
@keyframes trianglePulse {

    0%,
    100% {
        opacity: 1;
        filter: url(#glow) drop-shadow(0 0 20px rgba(107, 159, 61, 0.6));
    }

    50% {
        opacity: 0.9;
        filter: url(#glow) drop-shadow(0 0 30px rgba(107, 159, 61, 0.8));
    }
}

@keyframes textGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Enhanced Content Card Animations */
.slider-item.active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: cardSlideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Touch-friendly slider dots */
.slider-dot {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
}

.slider-dot::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}

.slider-dot:active::before {
    background: rgba(107, 159, 61, 0.2);
}

/* Responsive SVG */
@media (max-width: 640px) {
    .triangle-svg-main {
        max-width: 280px;
    }

    .triangle-text {
        font-size: 24px !important;
    }

    .triangle-element.active .triangle-text {
        font-size: 28px !important;
    }
}

/* Smooth transitions for all triangle elements */
.triangle-polygon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.triangle-text {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Minimalist Rotating Triangle Design */
.rbz-minimal-wrapper {
    position: relative;
    padding: 3rem 0;
}

/* Small Centered Triangle */
.rbz-triangle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease-out 0.3s;
}

.rbz-triangle-center.visible {
    opacity: 1;
}

.rbz-minimal-triangle {
    width: 180px;
    height: auto;
    animation: triangleFloat 4s ease-in-out infinite;
}

@keyframes triangleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* Rotating Ring Around Triangle */
.rbz-rotating-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    animation: rotateRing 20s linear infinite;
    z-index: 2;
}

.rbz-rotating-ring.paused {
    animation-play-state: paused;
}

@keyframes rotateRing {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Rotating Items */
.rbz-rotating-item {
    position: absolute;
    width: 100px;
    height: 100px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease;
}

.rbz-rotating-item.visible {
    opacity: 1;
    transform: scale(1);
}

.rbz-rotating-item:hover {
    transform: scale(1.15);
    z-index: 10;
}

.rbz-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: counterRotate 20s linear infinite;
    transform-origin: center center;
}

.rbz-rotating-ring.paused .rbz-item-inner {
    animation-play-state: paused;
}

/* Counter-rotate to keep items upright */
@keyframes counterRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* Position items around circle - Equilateral triangle positions */
.rbz-rotating-ruh {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.rbz-rotating-ruh.visible {
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.rbz-rotating-beden {
    bottom: 0;
    left: 0;
    transform: translateX(-50%) translateY(50%) scale(0.8);
}

.rbz-rotating-beden.visible {
    transform: translateX(-50%) translateY(50%) scale(1);
}

.rbz-rotating-zihin {
    bottom: 0;
    right: 0;
    transform: translateX(50%) translateY(50%) scale(0.8);
}

.rbz-rotating-zihin.visible {
    transform: translateX(50%) translateY(50%) scale(1);
}

/* Minimal Icon and Label */
.rbz-minimal-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
    display: block;
}

.rbz-rotating-item:hover .rbz-minimal-icon {
    transform: scale(1.2) rotate(10deg);
}

.rbz-minimal-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #2d5016;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.1em;
}

/* Content Description */
.rbz-content-description {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    margin-top: 2rem;
    padding-top: 2rem;
    z-index: 3;
}

.rbz-desc-item {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
    text-align: center;
}

.rbz-desc-item.active {
    opacity: 1;
    transform: translateY(0);
}

.rbz-desc-text {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.8;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .rbz-minimal-triangle {
        width: 140px;
    }

    .rbz-rotating-ring {
        width: 220px;
        height: 220px;
    }

    .rbz-rotating-item {
        width: 80px;
        height: 80px;
    }

    .rbz-minimal-icon {
        font-size: 2.5rem;
    }

    .rbz-minimal-label {
        font-size: 0.8rem;
    }

    .rbz-content-description {
        padding: 1rem;
    }

    .rbz-desc-text {
        font-size: 1rem;
    }
}

/* Modern Pillar Design */
.rbz-pillar {
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.rbz-pillar.rbz-pillar-visible {
    opacity: 1;
    transform: translateY(0);
}

.rbz-pillar:hover {
    transform: translateY(-10px);
}

.rbz-pillar-content {
    background: white;
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    border: 2px solid transparent;
}

.rbz-pillar:hover .rbz-pillar-content {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    transform: scale(1.02);
}

.rbz-pillar-ruh .rbz-pillar-content {
    border-color: #a8d5a3;
}

.rbz-pillar-beden .rbz-pillar-content {
    border-color: #6b9f3d;
}

.rbz-pillar-zihin .rbz-pillar-content {
    border-color: #2d5016;
}

.rbz-pillar-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rbz-pillar-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(168, 213, 163, 0.2), rgba(107, 159, 61, 0.2));
    animation: iconBgPulse 3s ease-in-out infinite;
}

.rbz-pillar-beden .rbz-pillar-icon-bg {
    background: linear-gradient(135deg, rgba(107, 159, 61, 0.2), rgba(45, 80, 22, 0.2));
}

.rbz-pillar-zihin .rbz-pillar-icon-bg {
    background: linear-gradient(135deg, rgba(45, 80, 22, 0.2), rgba(26, 32, 44, 0.2));
}

@keyframes iconBgPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.rbz-pillar-icon {
    font-size: 4.5rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    display: block;
}

.rbz-pillar:hover .rbz-pillar-icon {
    transform: scale(1.15) rotate(5deg);
}

.rbz-pillar-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2d5016;
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

.rbz-pillar-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, transparent, #6b9f3d, transparent);
    margin: 0 auto 1.5rem;
    border-radius: 2px;
}

.rbz-pillar-text {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.8;
    text-align: center;
}

.rbz-pillar-glow {
    position: absolute;
    inset: -20px;
    border-radius: 20px;
    background: radial-gradient(circle, rgba(107, 159, 61, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.rbz-pillar:hover .rbz-pillar-glow {
    opacity: 1;
}

/* Flow Animation Between Pillars */
.rbz-flow-container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease-out 1.5s;
}

.rbz-flow-container.visible {
    opacity: 0.3;
}

.rbz-flow-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b9f3d, transparent);
    animation: flowMove 3s ease-in-out infinite;
}

.rbz-flow-1 {
    top: 0;
    left: 16.66%;
    right: 16.66%;
    animation-delay: 0s;
}

.rbz-flow-2 {
    top: 0;
    left: 50%;
    right: 16.66%;
    animation-delay: 1.5s;
}

@keyframes flowMove {

    0%,
    100% {
        transform: scaleX(0.8);
        opacity: 0.3;
    }

    50% {
        transform: scaleX(1);
        opacity: 0.6;
    }
}

.rbz-card-alt.rbz-card-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.rbz-card-alt:hover {
    transform: scale(1.05) translateY(-5px);
    z-index: 10;
}

.rbz-card-alt.rbz-card-active {
    transform: scale(1.1) translateY(-10px);
    z-index: 20;
}

.rbz-card-alt.rbz-card-active .rbz-card-inner {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
    border-width: 4px;
}

.rbz-card-inner {
    background: white;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rbz-card-alt:hover .rbz-card-inner {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-color: currentColor;
}

.rbz-card-ruh .rbz-card-inner {
    border-color: #a8d5a3;
}

.rbz-card-beden .rbz-card-inner {
    border-color: #6b9f3d;
}

.rbz-card-zihin .rbz-card-inner {
    border-color: #2d5016;
}

.rbz-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rbz-icon {
    font-size: 4rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.rbz-card-alt:hover .rbz-icon {
    transform: scale(1.1) rotate(5deg);
}

.rbz-icon-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 159, 61, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: iconPulse 2s ease-in-out infinite;
}

.rbz-card-alt:hover .rbz-icon-glow {
    opacity: 1;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.rbz-title {
    font-size: 2rem;
    font-weight: bold;
    color: #2d5016;
    margin-bottom: 1rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.rbz-description {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
    text-align: center;
}

/* Connection Circle */
.connection-circle-alt {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a8d5a3, #6b9f3d, #2d5016);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 1s ease-out 0.5s;
    z-index: 0;
}

.connection-circle-alt.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


.connection-pulse {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2px solid #6b9f3d;
    animation: connectionPulse 2s ease-in-out infinite;
}

@keyframes connectionPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }
}

/* Connection Lines to Center - Positioned in triangle container */
.rbz-triangle-container::before,
.rbz-triangle-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 250px;
    background: linear-gradient(to bottom, transparent, #6b9f3d 50%, transparent);
    opacity: 0;
    transition: opacity 0.5s ease-out 1s;
    z-index: 0;
    transform-origin: top center;
}

.rbz-triangle-container::before {
    transform: translate(-50%, -50%) rotate(120deg);
}

.rbz-triangle-container::after {
    transform: translate(-50%, -50%) rotate(240deg);
}

.rbz-triangle-container.lines-visible::before,
.rbz-triangle-container.lines-visible::after {
    opacity: 0.4;
}

/* Additional line from top (using a pseudo-element on container or separate element) */
.rbz-connection-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 250px;
    background: linear-gradient(to bottom, transparent, #6b9f3d 50%, transparent);
    opacity: 0;
    transition: opacity 0.5s ease-out 1s;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: top center;
}

.rbz-connection-line.visible {
    opacity: 0.4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .rbz-triangle-container {
        height: auto;
        min-height: 600px;
    }

    .rbz-card-alt {
        width: 240px;
        position: relative !important;
        transform: scale(0.8) translateY(30px) !important;
        margin: 2rem auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .rbz-card-top,
    .rbz-card-bottom-left,
    .rbz-card-bottom-right {
        position: relative !important;
        transform: scale(0.8) translateY(30px) !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .rbz-card-alt.rbz-card-visible,
    .rbz-card-top.rbz-card-visible,
    .rbz-card-bottom-left.rbz-card-visible,
    .rbz-card-bottom-right.rbz-card-visible {
        transform: scale(1) translateY(0) !important;
    }

    .rbz-card-alt:hover {
        transform: scale(1.05) translateY(-5px) !important;
    }

    .connection-circle-alt {
        width: 80px;
        height: 80px;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 2rem auto;
    }

    .rbz-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .rbz-icon {
        font-size: 3rem;
    }

    .rbz-title {
        font-size: 1.5rem;
    }

    .rbz-description {
        font-size: 0.9rem;
    }

    .rbz-connection-line {
        display: none;
    }
}

/* Popup Modal Styles */
#popup-modal {
    backdrop-filter: blur(4px);
}

#popup-modal .bg-white {
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Emoji Styling - Apple Style */
.emoji-icon {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', sans-serif;
}

/* Ensure emojis render properly on all devices */
span[class*="text-"] {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', 'Twemoji Mozilla', inherit;
}

/* Tüm emoji karakterleri için Apple Color Emoji fontunu önceliklendir */
body,
body * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

/* Twemoji görselleri için stil */
img.twemoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* Minimal Footer Styling */
footer {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

footer a {
    transition: color 0.2s ease;
}

footer h4 {
    letter-spacing: 0.05em;
}

/* Force Apple Color Emoji for emoji characters */
* {
    font-variant-emoji: emoji;
}

/* Better emoji rendering */
@supports (font-variant-emoji: emoji) {
    * {
        font-variant-emoji: emoji;
    }
}

/* Hero Text Animation */
.hero-text-animated {
    background: linear-gradient(to right, #2d5016 20%, #6b9f3d 50%, #2d5016 80%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroTextShimmer 3s linear infinite;
    display: inline-block;
}

@keyframes heroTextShimmer {
    to {
        background-position: 200% center;
    }
}

/* Typewriter Effect */
.typewriter {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid rgba(255, 255, 255, 0.8);
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    animation:
        typing 6s steps(50, end),
        blink-caret .75s step-end infinite;
    display: inline-block;
    max-width: fit-content;
    padding-right: 4px;
    /* Fix for italic characters being cut off */
    line-height: 1.4;
    /* Give vertical space */
    padding-bottom: 4px;
    /* Give vertical space */
}

/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgba(255, 255, 255, 0.8);
    }
}

/* Responsive adjustment for typewriter */
@media (max-width: 768px) {
    .typewriter {
        white-space: normal !important;
        border-right: none !important;
        overflow: visible !important;
        animation: none !important;
        display: block !important;
        text-align: center;
        width: auto !important;
    }
}

/* Safe Area Inset for Mobile Bottom Bar */
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}

/* Fix for mobile bottom bar stability */
.mobile-bottom-bar-fix {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Orbit Animation System */
.orbit-module {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto;
}

.orbit-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    background: white;
    /* optional */
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(107, 159, 61, 0.15);
}

.orbit-rings {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbit-spin 40s linear infinite;
}

.orbit-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}

/* 3 Items spaced at 120 degrees */
.orbit-item:nth-child(1) {
    transform: rotate(0deg) translate(0, -140px) rotate(0deg);
}

.orbit-item:nth-child(2) {
    transform: rotate(120deg) translate(0, -140px) rotate(-120deg);
}

.orbit-item:nth-child(3) {
    transform: rotate(240deg) translate(0, -140px) rotate(-240deg);
}

/* Make text stay upright while container spins provided we counter-spin the items inside dynamic animation?
   Actually, the nth-child transform is static relative to the parent ring.
   If parent spins, the child spins with it (upside down at bottom).
   To fix this, the CHILD TEXT needs to counter-spin dynamically.
*/
.orbit-text-c {
    /* Center the element on its anchor point using translate */
    animation: orbit-counter-spin 40s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #2d5016;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(168, 213, 163, 0.3);
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(45, 80, 22, 0.05);
    white-space: nowrap;

    /* Ensure width doesn't mess up centering */
    width: max-content;
}

@keyframes orbit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-counter-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}