:root {
     --h-blue: #2d7df6;
     --h-text: #1a2b4b;
     --h-card-bg: rgba(255, 255, 255, 0.95);

     /* GÖRSELDEN ALINAN RENKLER (Canlı Tonlar - Border ve SVG için) */
     --color-purple: #9580ff;
     --color-blue: #64b5f6;
     --color-pink: #ff8fa3;
     --color-green: #69e2a0;

     /* ARKA PLAN RENKLERİ (Okunabilirlik için Açık Tonlar) */
     --bg-purple: #f4f0ff;
     --bg-blue: #f0f8ff;
     --bg-pink: #fff0f1;
     --bg-green: #f0fff6;
 }

 .oks-hero-module {
     position: relative;
     width: 100%;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .oks-bg-layer {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     overflow: hidden;
     border-radius: 20px;
     z-index: 0;
 }

 .oks-bg-ring {
     position: absolute;
     border-radius: 50%;
     border: 1px solid rgba(45, 125, 246, 0.08);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* SVG Container Düzenlemesi */
 .oks-animation-bg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 0.8;
     /* Biraz daha belirgin yaptık */
     width: 350px;
     /* SVG boyutu */
     height: 350px;
     z-index: 5;
     transition: all 0.5s ease;
     opacity: 0.7;
 }

 /* Inline SVG içindeki path stili */
 #mascotSvgPath {
     transition: fill 0.5s ease;
     /* Renk geçişi yumuşak olsun */
 }

 /* MASKOT ALANI */
 .oks-mascot-center {
     position: relative;
     z-index: 10;
     width: 380px;
     max-width: 90vw;
     pointer-events: none;
 }

 .oks-mascot-img {
     width: 100%;
     height: auto;
     display: block;
     filter: drop-shadow(0 25px 50px rgba(45, 125, 246, 0.2));
     transition: opacity 0.4s ease-in-out;
     opacity: 1;
 }

 .oks-mascot-img.fading {
     opacity: 0;
 }

 /* KARTLAR */
 .oks-card {
     position: absolute;
     width: 260px;
     background: var(--h-card-bg);
     padding: 12px;
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(45, 125, 246, 0.12);
     border: 2px solid transparent;
     /* Border başlangıçta şeffaf veya beyaz */
     border-color: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(5px);
     z-index: 20;
     transition: transform 0.1s linear, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
     will-change: transform;
 }

 /* Aktif Kart Stili */
 .oks-card.active-card {
     /* Border rengi JS'den gelecek, buradaki varsayılan */
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
     transform: scale(1.05) !important;
     z-index: 25;
 }

 .oks-card-head {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 5px;
 }

 .oks-icon {
     width: 30px;
     height: 30px;
     background: rgba(255, 255, 255, 0.5);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--h-text);
     flex-shrink: 0;
 }

 .oks-icon i {
     font-size: 16px;
 }

 .oks-title {
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--h-text);
     line-height: 1.1;
 }

 .oks-desc {
     font-size: 0.65rem;
     color: #64748b;
 }

 .oks-badge {
     position: absolute;
     top: -8px;
     right: -5px;
     background: var(--color-blue);
     color: #fff;
     font-size: 0.6rem;
     font-weight: 700;
     padding: 2px 8px;
     border-radius: 10px;
 }

 .pos-tl {
     top: 5%;
     left: -5%;
 }

 .pos-tr {
     top: 8%;
     right: -8%;
 }

 .pos-bl {
     bottom: 12%;
     left: -2%;
 }

 .pos-br {
     bottom: 8%;
     right: -5%;
 }

 @media (max-width: 768px) {
     .oks-hero-module {
         height: auto;
         flex-direction: column;
         padding: 50px 0;
         overflow: visible;
     }

     .oks-card {
         position: relative;
         top: auto !important;
         left: auto !important;
         right: auto !important;
         bottom: auto !important;
         width: 90%;
         max-width: 300px;
         margin-bottom: 15px;
         transform: none !important;
     }

     .oks-mascot-center {
         order: -1;
         margin-bottom: 30px;
     }
 }