/* --- TEMEL AYARLAR --- */
@property --vgnw-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
@keyframes vgnw-spin {
  to { --vgnw-angle: 1turn; }
}

/* ANA WRAPPER */
.vgnw-sum-wrapper {
    margin-bottom: 2em;
    position: relative;
    max-width: 100%;
    border-radius: 12px;
    padding: 2px; 
    background: #e2e8f0; 
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    transform: translateZ(0); 
}

/* NEON ARKA PLAN */
.vgnw-sum-wrapper::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from var(--vgnw-angle), transparent 60%, #8257e5 80%, #ff0080 100%);
    animation: vgnw-spin 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.vgnw-sum-wrapper:hover::before { opacity: 1; }
.vgnw-sum-wrapper.is-loading::before { opacity: 1; animation-duration: 1s; }
.vgnw-sum-wrapper.is-finished { background: linear-gradient(135deg, #8257e5, #ff0080); }
.vgnw-sum-wrapper.is-finished::before { display: none; }

/* İÇ KUTU */
.vgnw-sum-inner-box {
    background: #fff;
    border-radius: 9px; 
    background-clip: padding-box; 
    border: 1px solid transparent; 
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* BUTON */
button#vgnw-sum-trigger-btn {
    width: 100%;
    background: #fff !important;
    background-color: #fff !important;
    color: #1a202c !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    text-shadow: none !important;
    border-radius: inherit; 
}
button#vgnw-sum-trigger-btn:hover, button#vgnw-sum-trigger-btn:focus {
    background: #fff !important;
}

.vgnw-sum-label-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

/* --- IKON YÖNETİMİ (FIXED) --- */
.vgnw-icon-container {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 1. STATIC ICON (Yıldız/Sparkle) */
.vgnw-icon-static {
    position: absolute;
    color: #718096;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    /* Varsayılan Görünür */
    opacity: 1;
    transform: scale(1);
}
.vgnw-sum-wrapper:hover .vgnw-icon-static {
    transform: scale(1.15) rotate(10deg);
    color: #8257e5;
}

/* 2. LOADER ICON (Worm) */
.vgnw-icon-loader {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    animation-name: vgnw-bump9;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.vgnw-pl-worm {
    animation-name: vgnw-worm9;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
}

/* 3. CHECK ICON (Tik) */
.vgnw-icon-check {
    position: absolute;
    color: #00c853;
    opacity: 0;
    visibility: hidden;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 0.5s ease, opacity 0.3s ease;
}


/* --- DURUM GEÇİŞLERİ (FIX) --- */

/* A) LOADING: Static Gizle, Loader Göster */
.vgnw-sum-wrapper.is-loading .vgnw-icon-static {
    opacity: 0;
    transform: scale(0);
}
.vgnw-sum-wrapper.is-loading .vgnw-icon-loader {
    opacity: 1;
    visibility: visible;
}

/* B) CHECKING (DONE!): Static ve Loader Gizle, Check Göster */
/* ÇAKIŞMA ÇÖZÜMÜ: Hem checking hem loading class'ı varken static kesin gizli kalsın */
.vgnw-sum-wrapper.is-checking .vgnw-icon-static,
.vgnw-sum-wrapper.is-checking .vgnw-icon-loader {
    opacity: 0 !important;
    transform: scale(0);
    visibility: hidden;
}

.vgnw-sum-wrapper.is-checking .vgnw-icon-check {
    opacity: 1;
    visibility: visible;
    stroke-dashoffset: 0; /* Çizilme animasyonu */
}

/* C) FINISHED (SUMMARY): Check Gizle, Static Geri Dönsün */
.vgnw-sum-wrapper.is-finished .vgnw-icon-check {
    opacity: 0;
    visibility: hidden;
}
.vgnw-sum-wrapper.is-finished .vgnw-icon-static {
    opacity: 1;
    transform: scale(1);
    color: #8257e5; /* Mor renk */
}


/* --- KEYFRAMES --- */
@keyframes vgnw-bump9 {
  from, 42%, 46%, 51%, 55%, 59%, 63%, 67%, 71%, 74%, 78%, 81%, 85%, 88%, 92%, to { transform: translate(0,0); }
  44% { transform: translate(1.33%,6.75%); }
  53% { transform: translate(-16.67%,-0.54%); }
  61% { transform: translate(3.66%,-2.46%); }
  69% { transform: translate(-0.59%,15.27%); }
  76% { transform: translate(-1.92%,-4.68%); }
  83% { transform: translate(9.38%,0.96%); }
  90% { transform: translate(-4.55%,1.98%); }
}
@keyframes vgnw-worm9 {
  from { stroke-dashoffset: 10; }
  25% { stroke-dashoffset: 295; }
  to { stroke-dashoffset: 1165; }
}

/* --- METİN VE LİSTE --- */
.vgnw-sum-wrapper.is-loading .vgnw-sum-text {
    background: linear-gradient(90deg, #8257e5, #ff0080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vgnw-sum-wrapper.is-finished .vgnw-sum-text {
    color: #8257e5;
    -webkit-text-fill-color: initial;
    background: none;
}

.vgnw-text-slider {
    display: grid; 
    grid-template-columns: 1fr;
    align-items: center;
    height: 1.5em;
    overflow: hidden;
    width: 100%;
    justify-items: start; 
    text-align: left;
}
.vgnw-sum-text {
    grid-row: 1; grid-column: 1;
    font-weight: 700; white-space: nowrap;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    display: block; text-align: left; width: 100%;
}
.vgnw-sum-text.current { transform: translateY(0); opacity: 1; }
.vgnw-sum-text.slide-up-out { transform: translateY(-150%); opacity: 0; }
.vgnw-sum-text.slide-up-in { transform: translateY(150%); opacity: 0; }

.vgnw-sum-chevron { color: #a0aec0; transition: transform 0.3s ease; flex-shrink: 0; }
.vgnw-sum-wrapper.is-open .vgnw-sum-chevron { transform: rotate(180deg); color: #8257e5; }
.vgnw-sum-content { padding: 0 24px 24px 24px; }
#vgnw-sum-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #edf2f7; padding-top: 15px; }
#vgnw-sum-list li { position: relative; padding-left: 20px; margin-bottom: 12px; line-height: 1.6; font-size: 0.95em; color: #4a5568; }
#vgnw-sum-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: #8257e5; border-radius: 50%; }
.vgnw-sum-cursor::after { content: '|'; animation: blink 0.8s infinite; color: #8257e5; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }