@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700;800&family=Teko:wght@600;700&display=swap');

/* ==========================================================================
   FAMEVISO TIKTOK CALCULATOR - ULTIMATE RESPONSIVE & DARK MODE MASTER (V8.5)
   Özellikler: Tam Kontrast Koruması, Brutalist Çizgiler, %100 Mobil Uyum
   ========================================================================== */

#gpt-app-root {
    /* --- AYDINLIK MOD (LIGHT MODE) DEĞİŞKENLERİ --- */
    --st-font-main: 'Inter', -apple-system, sans-serif;
    --st-font-head: 'Teko', sans-serif;         
    --st-font-mono: 'JetBrains Mono', monospace; 
    
    /* TikTok & FameViso Marka Renkleri */
    --st-primary: #000000;       
    --st-primary-hover: #FE2C55; 
    --st-accent-cyan: #25F4EE;   
    --st-accent-pink: #FE2C55;   
    
    --st-success: #059669;       
    --st-danger: #dc2626;        
    --st-warning: #d97706;
    --st-blue: #2563eb;
    
    /* Zemin ve Çerçeveler */
    --st-bg-main: #f8fafc;       
    --st-bg-card: #ffffff;
    --st-bg-soft: #f1f5f9;
    --st-border: #cbd5e1;        
    
    /* Metin Kontrastları */
    --st-text-bold: #0f172a;
    --st-text-main: #334155;
    --st-text-muted: #64748b;
    
    /* Brutalism Efektleri */
    --st-shadow-md: 4px 4px 0px 0px rgba(15, 23, 42, 0.1); 
    --st-shadow-card: 6px 6px 0px 0px rgba(15, 23, 42, 1); 
    --st-shadow-neon: 4px 4px 0px 0px var(--st-accent-cyan);
    
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--st-font-main) !important;
    color: var(--st-text-main) !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

#gpt-app-root * { box-sizing: border-box !important; border-radius: 0 !important; }

/* ==========================================================================
   GECE MODU (DARK MODE) ÖZELLEŞTİRMELERİ
   ========================================================================== */
body.dark #gpt-app-root {
    --st-primary: #FE2C55;       
    --st-primary-hover: #25F4EE;
    
    --st-bg-main: #0f172a;       
    --st-bg-card: #1e293b;       
    --st-bg-soft: #020617;       
    --st-border: #334155;        
    
    --st-text-bold: #ffffff;
    --st-text-main: #cbd5e1;     
    --st-text-muted: #94a3b8;
    
    --st-shadow-card: 6px 6px 0px 0px var(--st-accent-pink); 
}

/* Tipografi Ezilmeleri */
#gpt-app-root h1, #gpt-app-root h2, #gpt-app-root h3, #gpt-app-root h4, #gpt-app-root h5,
#gpt-app-root strong, #gpt-app-root b {
    color: var(--st-text-bold) !important;
    font-family: var(--st-font-head) !important;
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;
}

#gpt-app-root p, #gpt-app-root span, #gpt-app-root li, #gpt-app-root div {
    font-family: var(--st-font-main);
}

/* ==========================================================================
   ORTAK BİLEŞENLER (COMPONENTS)
   ========================================================================== */
#gpt-app-root .st-card {
    background: var(--st-bg-card) !important; 
    border: 2px solid var(--st-border) !important;
    box-shadow: var(--st-shadow-card) !important; 
    padding: 40px !important; 
    margin-bottom: 40px !important; 
    position: relative !important;
    transition: all 0.3s ease !important;
}

body.dark #gpt-app-root .st-card { border-color: var(--st-text-bold) !important; }

/* Breadcrumbs & Status */
#gpt-app-root .stm-breadcrumbs {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important;
    font-size: 13px !important; font-weight: 600 !important; font-family: var(--st-font-mono) !important;
    background: var(--st-bg-main) !important; 
    border: 2px solid var(--st-border) !important;
    padding: 12px 20px !important; margin: 0 auto 30px auto !important; gap: 8px !important;
    text-transform: uppercase !important;
}
body.dark #gpt-app-root .stm-breadcrumbs { border-color: var(--st-border) !important; }
#gpt-app-root .stm-breadcrumbs a { display: inline-flex !important; align-items: center !important; color: var(--st-text-muted) !important; text-decoration: none !important; padding: 4px 8px !important; transition: all 0.2s ease !important; }
#gpt-app-root .stm-breadcrumbs a:hover { color: var(--st-bg-card) !important; background: var(--st-text-bold) !important; }
#gpt-app-root .stm-breadcrumbs .current { color: var(--st-bg-card) !important; padding: 4px 8px !important; background: var(--st-primary) !important; }

#gpt-app-root .st-system-status {
    display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important;
    background: var(--st-bg-soft) !important; border: 2px dashed var(--st-border) !important;
    padding: 12px 25px !important; margin-bottom: 20px !important; font-size: 13px !important; 
    color: var(--st-text-muted) !important; font-family: var(--st-font-mono) !important; text-transform: uppercase !important; gap: 10px !important;
}
#gpt-app-root .st-status-item i { color: var(--st-accent-cyan) !important; margin-right: 8px !important; font-size: 12px !important; }

/* ==========================================================================
   HERO BÖLÜMÜ (DESKTOP)
   ========================================================================== */
#gpt-app-root .st-hero {
    display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important;
    padding: 0 !important; 
}
#gpt-app-root .st-hero-content { flex: 1 !important; padding: 50px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-right: 2px solid var(--st-border) !important; }
body.dark #gpt-app-root .st-hero-content { border-color: var(--st-text-bold) !important; }

#gpt-app-root .st-hero-img { flex: 0 0 450px !important; background: var(--st-bg-soft) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 40px !important; position: relative !important; overflow: hidden !important; }
#gpt-app-root .st-hero-img img { width: 100% !important; border: 2px solid var(--st-border) !important; z-index: 2 !important; position: relative !important; box-shadow: var(--st-shadow-md) !important; } 
body.dark #gpt-app-root .st-hero-img img { border-color: var(--st-text-bold) !important; }

/* Neon Glow */
#gpt-app-root .img-glow {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 80% !important; height: 80% !important; background: radial-gradient(circle, rgba(37,244,238,0.15) 0%, rgba(254,44,85,0.05) 100%) !important;
    filter: blur(40px) !important; z-index: 1 !important;
}
body.dark #gpt-app-root .img-glow { background: radial-gradient(circle, rgba(37,244,238,0.3) 0%, rgba(254,44,85,0.2) 100%) !important; }

#gpt-app-root .st-hero h2 { font-size: clamp(40px, 5vw, 64px) !important; line-height: 0.9 !important; margin-bottom: 25px !important; }
#gpt-app-root .st-text-gradient { color: var(--st-bg-card) !important; background: var(--st-text-bold) !important; padding: 0 10px !important; display: inline-block !important; margin-top: 5px !important;} 
body.dark #gpt-app-root .st-text-gradient { color: var(--st-text-bold) !important; background: transparent !important; text-shadow: 2px 2px 0px var(--st-accent-cyan), -2px -2px 0px var(--st-accent-pink) !important; padding: 0 !important; }

#gpt-app-root .st-hero p { font-size: 17px !important; color: var(--st-text-muted) !important; margin-bottom: 35px !important; max-width: 90% !important;}

/* Hero Etiketleri */
#gpt-app-root .st-badge-row { margin-bottom: 25px !important; display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
#gpt-app-root .st-tag { font-family: var(--st-font-mono) !important; font-size: 12px !important; font-weight: 700 !important; padding: 6px 14px !important; border: 2px solid var(--st-text-bold) !important; color: var(--st-text-bold) !important; background: transparent !important; letter-spacing: 0.5px !important;}
#gpt-app-root .st-tag.live { border-color: var(--st-accent-pink) !important; color: var(--st-bg-card) !important; background: var(--st-accent-pink) !important; }

/* Hero Alt İstatistikleri */
#gpt-app-root .st-stats-row { display: flex !important; gap: 0 !important; border-top: 2px solid var(--st-border) !important; margin-top: auto !important; flex-wrap: wrap !important; }
body.dark #gpt-app-root .st-stats-row { border-color: var(--st-text-bold) !important; }
#gpt-app-root .st-mini-stat { padding: 20px !important; flex: 1 1 30% !important; border-right: 2px solid var(--st-border) !important; text-align: center !important; }
#gpt-app-root .st-mini-stat:last-child { border-right: none !important; }
body.dark #gpt-app-root .st-mini-stat { border-color: var(--st-text-bold) !important; }
#gpt-app-root .st-mini-stat strong { font-size: 26px !important; margin-bottom: 5px !important; display: block !important; line-height: 1 !important;}
#gpt-app-root .st-mini-stat span { font-size: 12px !important; font-family: var(--st-font-mono) !important; color: var(--st-text-muted) !important; text-transform: uppercase !important; }

/* ==========================================================================
   HESAPLAYICI FORMU (INPUT & BUTTON)
   ========================================================================== */
#gpt-app-root .st-panel { text-align: center !important; padding: 60px 40px !important; }
#gpt-app-root .st-panel-head { margin-bottom: 40px !important; }
#gpt-app-root .st-panel-head i { font-size: 45px !important; color: var(--st-text-bold) !important; margin-bottom: 15px !important; }
#gpt-app-root .st-panel-head h3 { font-size: clamp(28px, 5vw, 36px) !important; }

#gpt-app-root .st-input-wrap { display: flex !important; max-width: 800px !important; margin: 0 auto 15px auto !important; border: 2px solid var(--st-border) !important; transition: box-shadow 0.3s !important; background: var(--st-bg-main) !important; }
body.dark #gpt-app-root .st-input-wrap { border-color: var(--st-text-bold) !important; }
#gpt-app-root .st-input-wrap:focus-within { box-shadow: var(--st-shadow-neon) !important; border-color: var(--st-text-bold) !important; }

#gpt-app-root .st-input-inner { flex: 1 !important; position: relative !important; border-right: 2px solid var(--st-border) !important; }
body.dark #gpt-app-root .st-input-inner { border-color: var(--st-text-bold) !important; }
#gpt-app-root .st-search-icon { position: absolute !important; left: 25px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--st-text-bold) !important; font-size: 20px !important; }

/* iOS Zoom sorununu engellemek için font-size min 16px olmalı */
#gpt-app-root #giftPoints { width: 100% !important; padding: 25px 25px 25px 60px !important; border: none !important; background: transparent !important; color: var(--st-text-bold) !important; font-size: 24px !important; font-family: var(--st-font-mono) !important; font-weight: 700 !important; outline: none !important; }

#gpt-app-root .st-btn-glow { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; border: none !important; padding: 0 40px !important; font-size: 22px !important; font-family: var(--st-font-head) !important; cursor: pointer !important; transition: all 0.2s !important; letter-spacing: 1px !important; display: flex !important; align-items: center !important; justify-content: center !important;}
#gpt-app-root .st-btn-glow:hover { background: var(--st-accent-pink) !important; color: #fff !important; }
body.dark #gpt-app-root .st-btn-glow { background: var(--st-accent-cyan) !important; color: #000 !important;}
body.dark #gpt-app-root .st-btn-glow:hover { background: var(--st-accent-pink) !important; color: #fff !important; }

#gpt-app-root .st-note { font-family: var(--st-font-mono) !important; font-size: 13px !important; color: var(--st-text-muted) !important; margin-top: 20px !important;}

/* ==========================================================================
   SONUÇ KUTULARI (RESULTS DASHBOARD)
   ========================================================================== */
#gpt-app-root .st-details-split { display: flex !important; flex-wrap: wrap !important; gap: 30px !important; margin-top: 30px !important; text-align: left !important; }

#gpt-app-root .st-detail-box { flex: 1 1 300px !important; padding: 0 !important; border: 2px solid var(--st-border) !important; background: var(--st-bg-card) !important; box-shadow: var(--st-shadow-md) !important; display: flex !important; flex-direction: column !important; margin-bottom: 0 !important;}
body.dark #gpt-app-root .st-detail-box { border-color: var(--st-text-bold) !important; box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;}

#gpt-app-root .st-detail-box h4 { padding: 20px 25px !important; margin: 0 !important; background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; font-size: 22px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
body.dark #gpt-app-root .st-detail-box h4 { color: #000 !important; }

#gpt-app-root .st-list { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important;}
#gpt-app-root .st-list li { display: flex !important; justify-content: space-between !important; padding: 30px 25px !important; border-bottom: 2px dashed var(--st-border) !important; align-items: center !important; gap: 15px !important;}
#gpt-app-root .st-list li:last-child { border-bottom: none !important; }
body.dark #gpt-app-root .st-list li { border-color: var(--st-border) !important; }

#gpt-app-root .st-list span { font-family: var(--st-font-mono) !important; font-size: 14px !important; color: var(--st-text-muted) !important; text-transform: uppercase !important; font-weight: 700 !important; }
#gpt-app-root .st-list strong { font-size: 28px !important; font-family: var(--st-font-head) !important; letter-spacing: 1px !important; color: var(--st-text-bold) !important; text-align: right !important; }

#gpt-app-root .text-blue { color: var(--st-blue) !important; }
body.dark #gpt-app-root .text-blue { color: var(--st-accent-cyan) !important; }

/* --- "NET PAYOUT" (SAĞ KUTU) İÇİN KESİN GÖRÜNÜRLÜK (KONTRAST KORUMASI) --- */
#gpt-app-root .st-details-split .st-detail-box:last-child {
    background: var(--st-text-bold) !important; /* Zemin tamamen zıt renge zorlanıyor */
}
#gpt-app-root .st-details-split .st-detail-box:last-child h4 {
    background: transparent !important;
    border-bottom: 1px solid rgba(150, 150, 150, 0.2) !important;
    color: var(--st-bg-card) !important;
}
body.dark #gpt-app-root .st-details-split .st-detail-box:last-child h4 {
    color: var(--st-bg-main) !important;
}
#gpt-app-root .st-details-split .st-detail-box:last-child .payout-subtitle {
    color: #94a3b8 !important; /* Aydınlık modda (siyah zemin üzerinde) Gümüş Gri */
    opacity: 1 !important;
    font-weight: 700 !important;
    display: block !important; 
    font-family: var(--st-font-mono) !important; 
    font-size: 13px !important; 
    text-transform: uppercase !important; 
    margin-bottom: 15px !important;
}
body.dark #gpt-app-root .st-details-split .st-detail-box:last-child .payout-subtitle {
    color: #475569 !important; /* Karanlık modda (beyaz zemin üzerinde) Koyu Çelik Grisi */
}

/* BÜYÜK RAKAM NEON EFEKTİ (GÖRÜNMEZLİK ÇÖZÜMÜ) */
#gpt-app-root #influencerKeeps {
    display: block !important; 
    font-size: 55px !important; 
    font-family: var(--st-font-head) !important; 
    line-height: 1 !important;
    color: var(--st-accent-cyan) !important; /* Koyu siyah zemin üzerinde parlayan Neon TikTok Turkuazı */
    text-shadow: 0px 0px 15px rgba(37, 244, 238, 0.4) !important;
}
body.dark #gpt-app-root #influencerKeeps {
    color: var(--st-accent-pink) !important; /* Karanlık modda beyaz zemin üzerinde patlayan TikTok Pembesi */
    text-shadow: none !important;
}

/* ==========================================================================
   SEO & İÇERİK KARTLARI (GRID SİSTEMİ)
   ========================================================================== */
#gpt-app-root .st-seo-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; margin-top: 50px !important; }
#gpt-app-root .seo-card { border: 2px solid var(--st-border) !important; box-shadow: var(--st-shadow-md) !important; padding: 40px !important; background: var(--st-bg-card) !important; }
body.dark #gpt-app-root .seo-card { border-color: var(--st-text-bold) !important; box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;}
#gpt-app-root .seo-card.full { grid-column: 1 / -1 !important; }
#gpt-app-root .seo-card h3 { font-size: 28px !important; border-bottom: 2px solid var(--st-text-bold) !important; padding-bottom: 10px !important; margin-bottom: 20px !important; display: inline-block !important;}

#gpt-app-root .st-check-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#gpt-app-root .st-check-list li { display: flex !important; align-items: flex-start !important; gap: 15px !important; margin-bottom: 15px !important; font-size: 16px !important; border-bottom: 1px dashed var(--st-border) !important; padding-bottom: 15px !important;}
#gpt-app-root .st-check-list li:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important;}
#gpt-app-root .st-check-list i { color: var(--st-accent-pink) !important; margin-top: 5px !important; }

#gpt-app-root .st-glossary-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
#gpt-app-root .glossary-item { background: var(--st-bg-soft) !important; border: 2px solid var(--st-border) !important; padding: 25px !important; }
body.dark #gpt-app-root .glossary-item { border-color: var(--st-border) !important; }
#gpt-app-root .glossary-item h4 { font-size: 22px !important; margin-bottom: 10px !important; color: var(--st-blue) !important;}
body.dark #gpt-app-root .glossary-item h4 { color: var(--st-accent-cyan) !important; }

/* TIER GRID (Milestones Tablosu) */
#gpt-app-root .st-tier-grid { display: flex !important; border: 2px solid var(--st-border) !important; flex-wrap: wrap !important;}
body.dark #gpt-app-root .st-tier-grid { border-color: var(--st-text-bold) !important; }
#gpt-app-root .tier-item { flex: 1 1 25% !important; padding: 30px 20px !important; border-right: 2px solid var(--st-border) !important; text-align: center !important; background: var(--st-bg-main) !important; display: flex !important; flex-direction: column !important; justify-content: center !important;}
#gpt-app-root .tier-item:last-child { border-right: none !important; }
body.dark #gpt-app-root .tier-item { border-color: var(--st-text-bold) !important; }
#gpt-app-root .tier-item .t-title { font-size: 28px !important; font-family: var(--st-font-head) !important; display: block !important; margin-bottom: 10px !important; color: var(--st-text-bold) !important; border-bottom: 2px solid var(--st-border) !important; padding-bottom: 10px !important;}
#gpt-app-root .tier-item .t-val { font-family: var(--st-font-mono) !important; font-size: 15px !important; color: var(--st-text-muted) !important; display: block !important; margin-bottom: 5px !important;}
#gpt-app-root .tier-item .t-desc { font-family: var(--st-font-mono) !important; font-size: 17px !important; display: block !important; }

/* ==========================================================================
   MARKET BOX (CTA) & TERS KONTRAST KORUMASI
   ========================================================================== */
#gpt-app-root .st-market-box { text-align: center !important; padding: 50px !important; background: var(--st-text-bold) !important; border: 2px solid var(--st-text-bold) !important;}

#gpt-app-root .st-market-box h3 { color: var(--st-bg-card) !important; border-bottom-color: var(--st-bg-card) !important; }
body.dark #gpt-app-root .st-market-box h3 { color: var(--st-bg-main) !important; border-bottom-color: var(--st-bg-main) !important; }

#gpt-app-root .st-market-box p {
    color: var(--st-bg-main) !important; /* Aydınlık modda siyah üzerine açık beyaz/gri */
    opacity: 0.9 !important;
    font-size: 16px !important;
    margin-bottom: 25px !important;
}
body.dark #gpt-app-root .st-market-box p {
    color: var(--st-bg-soft) !important; /* Karanlık modda beyaz zemin üzerine koyu metin */
    font-weight: 500 !important;
}

#gpt-app-root .st-market-btns { display: flex !important; justify-content: center !important; gap: 20px !important; margin-top: 30px !important; flex-wrap: wrap !important; }

#gpt-app-root .st-market-btns a { 
    font-family: var(--st-font-mono) !important; font-size: 15px !important; font-weight: 700 !important; 
    border: 2px solid var(--st-bg-card) !important; padding: 15px 30px !important; 
    color: var(--st-bg-card) !important; transition: all 0.2s !important; 
    text-transform: uppercase !important; text-decoration: none !important;
}
#gpt-app-root .st-market-btns a:hover { background: var(--st-accent-cyan) !important; color: #000 !important; border-color: var(--st-accent-cyan) !important; transform: translateY(-3px) !important;}

/* Dark Mode İçin Market Butonları Ters Çevrimi */
body.dark #gpt-app-root .st-market-btns a {
    color: var(--st-bg-main) !important;
    border-color: var(--st-bg-main) !important;
}
body.dark #gpt-app-root .st-market-btns a:hover {
    background: var(--st-accent-cyan) !important;
    color: #000 !important;
    border-color: var(--st-accent-cyan) !important;
}

/* ==========================================================================
   SIKÇA SORULAN SORULAR (FAQ)
   ========================================================================== */
#gpt-app-root .stm-faq-container { width: 100% !important; margin-top: 30px !important; }
#gpt-app-root .stm-faq-title { font-size: 32px !important; border-bottom: 2px solid var(--st-text-bold) !important; padding-bottom: 10px !important; margin-bottom: 30px !important; display: inline-flex !important; align-items: center !important; gap: 15px !important; }
#gpt-app-root .stm-faq-item { border: 2px solid var(--st-border) !important; margin-bottom: 15px !important; background: var(--st-bg-card) !important; transition: border 0.2s !important; }
body.dark #gpt-app-root .stm-faq-item { border-color: var(--st-text-bold) !important; }
#gpt-app-root .stm-faq-item:hover { border-color: var(--st-accent-pink) !important; }
#gpt-app-root .stm-faq-question { padding: 25px !important; font-size: 22px !important; font-family: var(--st-font-head) !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; }
#gpt-app-root .stm-faq-question::after { content: '+' !important; font-family: var(--st-font-mono) !important; font-weight: 400 !important; font-size: 28px !important; color: var(--st-text-bold) !important; }
#gpt-app-root .stm-faq-question.stm-active::after { content: '-' !important; color: var(--st-accent-pink) !important;}
#gpt-app-root .stm-faq-answer { padding: 0 25px 25px 25px !important; font-size: 16px !important; display: none; line-height: 1.7 !important; border-top: 2px dashed var(--st-border) !important; margin-top: 5px !important; padding-top: 20px !important; color: var(--st-text-muted) !important; }

/* ==========================================================================
   KUSURSUZ MOBİL (RESPONSIVE) TASARIM
   ========================================================================== */

/* Tablet & Küçük Ekranlar */
@media screen and (max-width: 992px) {
    #gpt-app-root .st-hero { flex-direction: column !important; border-right: 2px solid var(--st-border) !important; }
    body.dark #gpt-app-root .st-hero { border-color: var(--st-text-bold) !important; }
    
    #gpt-app-root .st-hero-content { border-right: none !important; border-bottom: 2px solid var(--st-border) !important; padding: 40px 30px !important;}
    #gpt-app-root .st-hero-img { border-top: none !important; width: 100% !important; flex: auto !important; padding: 40px !important; }
    
    #gpt-app-root .tier-item { flex: 1 1 50% !important; border-bottom: 2px solid var(--st-border) !important; }
    #gpt-app-root .tier-item:nth-child(even) { border-right: none !important; }
    #gpt-app-root .tier-item:nth-last-child(-n+2) { border-bottom: none !important; } 
}

/* Gerçek Mobil (Telefonlar) */
@media screen and (max-width: 768px) {
    #gpt-app-root .st-card { padding: 30px 20px !important; margin-bottom: 30px !important;}
    
    #gpt-app-root .st-input-wrap { flex-direction: column !important; border: none !important; gap: 15px !important; background: transparent !important; box-shadow: none !important;}
    #gpt-app-root .st-input-wrap:focus-within { box-shadow: none !important; }
    #gpt-app-root .st-input-inner { border: 2px solid var(--st-border) !important; }
    body.dark #gpt-app-root .st-input-inner { border-color: var(--st-text-bold) !important; }
    
    #gpt-app-root .st-btn-glow { padding: 20px !important; border: 2px solid var(--st-text-bold) !important; width: 100% !important;}
    body.dark #gpt-app-root .st-btn-glow { border-color: var(--st-accent-cyan) !important; }
    
    #gpt-app-root .st-details-split { gap: 20px !important; margin-top: 20px !important;}
    
    #gpt-app-root .st-list li { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; padding: 25px 15px !important; word-break: break-word !important;}
    #gpt-app-root .st-list strong { text-align: center !important; font-size: 32px !important;}
    
    #gpt-app-root .st-seo-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    #gpt-app-root .st-glossary-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    
    #gpt-app-root .st-detail-box h4 { justify-content: center !important; text-align: center !important; font-size: 20px !important; padding: 15px !important;}
}

/* Küçük Telefonlar (iPhone SE vb.) */
@media screen and (max-width: 480px) {
    #gpt-app-root .st-hero h2 { font-size: clamp(36px, 10vw, 48px) !important; }
    
    #gpt-app-root .st-stats-row { flex-direction: column !important; }
    #gpt-app-root .st-mini-stat { border-right: none !important; border-bottom: 2px solid var(--st-border) !important; padding: 15px !important;}
    #gpt-app-root .st-mini-stat:last-child { border-bottom: none !important; }
    
    #gpt-app-root .tier-item { flex: 1 1 100% !important; border-right: none !important; border-bottom: 2px solid var(--st-border) !important;}
    #gpt-app-root .tier-item:last-child { border-bottom: none !important; }
    
    #gpt-app-root .st-market-btns a { width: 100% !important; text-align: center !important; }
    
    #gpt-app-root .stm-faq-question { font-size: 20px !important; padding: 20px 15px !important;}
    #gpt-app-root .stm-faq-answer { font-size: 15px !important; padding: 0 15px 20px 15px !important;}
}

/* ==========================================================================
   TOAST (UYARI BALONU)
   ========================================================================== */
#gpt-app-root .st-toast {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--st-text-bold) !important;
    color: var(--st-bg-card) !important;
    padding: 15px 30px !important;
    font-family: var(--st-font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    z-index: 99999 !important;
    box-shadow: var(--st-shadow-neon) !important;
    border: 2px solid var(--st-border) !important;
    animation: toastSlideUp 0.3s ease forwards !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
}
body.dark #gpt-app-root .st-toast { background: var(--st-bg-soft) !important; color: #fff !important; border-color: var(--st-accent-pink) !important; }

@keyframes toastSlideUp {
    from { bottom: -50px; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}