/* =====================================================
   TrendTech v2 — DÜNYA + PUZZLE TEMASI
   Tüm sayfalarda uygulanan global görsel kimlik
   ===================================================== */

/* =============== GLOBAL ARKA PLAN DÜNYASI =============== */
.global-world-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    animation: world-rotate 120s linear infinite;
}

.global-world-bg svg {
    width: 100%;
    height: 100%;
}

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

/* İçeriği z-index ile yukarı al */
body > *:not(.global-world-bg):not(.floating-puzzles) {
    position: relative;
    z-index: 1;
}

/* =============== YÜZEN PUZZLE PARÇALARI =============== */
.floating-puzzles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.puzzle-piece {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.08;
    animation: float-puzzle 25s linear infinite;
}

.puzzle-piece svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(78, 168, 255, 0.5));
}

.puzzle-piece.p1 { top: 10%;  left: 5%;  animation-duration: 28s; animation-delay: 0s; }
.puzzle-piece.p2 { top: 70%;  left: 8%;  animation-duration: 32s; animation-delay: -5s; }
.puzzle-piece.p3 { top: 25%;  right: 7%; animation-duration: 30s; animation-delay: -10s; }
.puzzle-piece.p4 { top: 80%;  right: 4%; animation-duration: 35s; animation-delay: -15s; }
.puzzle-piece.p5 { top: 50%;  left: 50%; animation-duration: 40s; animation-delay: -20s; opacity: 0.05; }
.puzzle-piece.p6 { top: 5%;   right: 30%;animation-duration: 33s; animation-delay: -8s; }
.puzzle-piece.p7 { bottom: 10%; left: 35%; animation-duration: 38s; animation-delay: -12s; }

@keyframes float-puzzle {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(40px, -30px) rotate(90deg) scale(1.05);
    }
    50% {
        transform: translate(80px, 20px) rotate(180deg) scale(0.95);
    }
    75% {
        transform: translate(-30px, 60px) rotate(270deg) scale(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

/* =============== KART PUZZLE ÇENTİKLERİ =============== */
.service-card,
.value-card,
.testimonial-card,
.blog-card,
.contact-info-card {
    position: relative;
}

/* Sol üst puzzle çentiği - dışa çıkıntı */
.service-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 24px;
    width: 24px;
    height: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    transition: var(--transition);
    opacity: 0;
}

/* Sağ alt puzzle çentiği - içe girinti  */
.service-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 32px;
    width: 30px;
    height: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 14px 14px;
    transition: var(--transition);
    opacity: 0;
}

.service-card:hover::before,
.service-card:hover::after {
    opacity: 1;
}

/* Hover'da kart "yapboz parçası" gibi yerleşir */
.service-card:hover {
    transform: translateY(-8px) rotate(-0.5deg);
}

/* =============== PUZZLE BÖLÜCÜ =============== */
.puzzle-divider {
    position: relative;
    height: 60px;
    margin: -1px 0;
    overflow: hidden;
}

.puzzle-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.puzzle-divider svg path {
    fill: var(--bg-secondary);
}

/* =============== HERO PUZZLE BÜTÜNLEŞME =============== */
.hero-puzzle-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.04;
    background-image: 
        linear-gradient(rgba(78, 168, 255, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 168, 255, 0.4) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
}

/* Hero'da büyük puzzle parçaları yüzer */
.hero-floating-piece {
    position: absolute;
    pointer-events: none;
    opacity: 0.4;
    animation: hero-piece-float 8s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(78, 168, 255, 0.6));
}

.hero-floating-piece.hp1 {
    top: 15%;
    left: 8%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
}

.hero-floating-piece.hp2 {
    top: 60%;
    left: 12%;
    width: 50px;
    height: 50px;
    animation-delay: -3s;
}

.hero-floating-piece.hp3 {
    top: 30%;
    right: 18%;
    width: 70px;
    height: 70px;
    animation-delay: -5s;
}

@keyframes hero-piece-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}

/* =============== PAGE HEADER PUZZLE EFEKTİ =============== */
.page-header {
    position: relative;
    overflow: hidden;
}

.page-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='35%25'%3E%3Cstop offset='0%25' stop-color='rgba(109,213,255,0.3)'/%3E%3Cstop offset='100%25' stop-color='rgba(78,168,255,0.05)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='90' fill='url(%23g)' stroke='rgba(78,168,255,0.3)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    animation: world-rotate 60s linear infinite;
    pointer-events: none;
}

/* =============== SERVİS İKONLARINI PUZZLE PARÇASI YAP =============== */
.service-icon {
    position: relative;
    overflow: visible;
}

.service-icon::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: var(--accent-secondary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
    opacity: 0;
    transition: var(--transition);
}

.service-card:hover .service-icon::after {
    opacity: 1;
    animation: icon-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* =============== FOOTER PUZZLE BAŞLIK =============== */
.main-footer {
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0,12 L0,4 Q5,4 5,0 Q5,4 10,4 L25,4 Q30,4 30,0 Q30,4 35,4 L50,4 Q55,4 55,0 Q55,4 60,4 L75,4 Q80,4 80,0 Q80,4 85,4 L100,4 L100,12 Z' fill='rgba(78,168,255,0.15)'/%3E%3C/svg%3E");
    background-size: 100px 12px;
    background-repeat: repeat-x;
}

/* =============== PUZZLE LOADING / GİRİŞ EFEKTİ =============== */
@keyframes piece-snap-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.section .container > * {
    animation: piece-snap-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.section:nth-child(odd) .container > *:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(even) .container > *:nth-child(2) { animation-delay: 0.15s; }

/* =============== STATS PUZZLE BAĞLANTILARI =============== */
.hero-stats {
    position: relative;
}

.stat-item {
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -28px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--accent-primary);
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    box-shadow: 0 0 12px var(--accent-glow);
    animation: connector-pulse 2s ease-in-out infinite;
}

@keyframes connector-pulse {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.7; transform: translateY(-50%) scale(1.3); }
}

/* =============== BUTON PUZZLE EFEKTİ =============== */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.btn-primary:hover::before {
    transform: translateX(100%);
}

/* =============== MOBİL UYUM =============== */
@media (max-width: 992px) {
    .global-world-bg { width: 800px; height: 800px; opacity: 0.05; }
    .puzzle-piece { width: 50px; height: 50px; opacity: 0.06; }
    .stat-item:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
    .global-world-bg { width: 600px; height: 600px; opacity: 0.04; }
    .floating-puzzles .puzzle-piece { display: none; }
    .floating-puzzles .puzzle-piece.p1,
    .floating-puzzles .puzzle-piece.p3,
    .floating-puzzles .puzzle-piece.p7 { display: block; opacity: 0.04; }
    .hero-floating-piece { display: none; }
    .page-header::after { width: 200px; height: 200px; right: -80px; opacity: 0.3; }
}

/* =============== ADMIN PUZZLE TEMASI =============== */
.admin-layout::before {
    content: '';
    position: fixed;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='35%25'%3E%3Cstop offset='0%25' stop-color='rgba(109,213,255,0.15)'/%3E%3Cstop offset='100%25' stop-color='rgba(78,168,255,0.02)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='90' fill='url(%23g)' stroke='rgba(78,168,255,0.15)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    animation: world-rotate 80s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.admin-layout > * {
    position: relative;
    z-index: 1;
}