{"id":1,"date":"2026-02-06T00:26:55","date_gmt":"2026-02-06T00:26:55","guid":{"rendered":"https:\/\/benyoutube.com.tr\/?p=1"},"modified":"2026-02-06T04:06:04","modified_gmt":"2026-02-06T04:06:04","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/benyoutube.com.tr\/index.php\/2026\/02\/06\/hello-world\/","title":{"rendered":"Hello world!"},"content":{"rendered":"\r\n

WordPress’e ho\u015f geldiniz. Bu ilk g\u00f6nderiniz. D\u00fczenleyin veya silin, ard\u0131ndan yazmaya ba\u015flay\u0131n!<\/span><\/s<\/code><\/code>pan><\/p>\r\n\r\n\r\n\r\n\r\n \r\n \r\n BEN YOU TUBE – Yapay Zeka ile M\u00fczik Yarat\u0131n<\/title>\r\n <meta name=\"description\" content=\"Ben You Tube, yapay zeka destekli m\u00fczik olu\u015fturma platformudur.\">\r\n \r\n <!-- Fontlar ve \u0130konlar -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@300;500;700;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* =========================================\r\n TEMEL ST\u0130LLER\r\n ========================================= *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n background-color: #000;\r\n color: #fff;\r\n min-height: 100vh;\r\n position: relative;\r\n overflow-x: hidden; \r\n }\r\n\r\n \/* Three.js Canvas Konumu *\/\r\n #canvas-container {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ===== HEADER \/ MENU ===== *\/\r\n header{\r\n position:sticky;\r\n top:0;\r\n background: rgba(0, 0, 0, 0.85);\r\n backdrop-filter: blur(10px);\r\n border-bottom:1px solid #222;\r\n z-index:100;\r\n }\r\n\r\n \/* Ortak Nav Stili *\/\r\n nav{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n gap:10px;\r\n padding:12px 15px;\r\n }\r\n\r\n nav.nav-bottom {\r\n border-top: 1px solid #1a1a1a;\r\n background: rgba(10, 10, 10, 0.9); \r\n }\r\n\r\n nav a{\r\n text-decoration:none;\r\n color:#fff;\r\n padding:10px 20px; \r\n border-radius:0; \r\n font-size:14px;\r\n background:linear-gradient(135deg,#7b2ff7,#ff0066); \r\n transition:.3s;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n nav a:hover{\r\n transform: scale(1.05); \r\n box-shadow:0 0 15px #ff0066;\r\n }\r\n\r\n nav a.active {\r\n box-shadow: 0 0 20px #00D9FF, inset 0 0 10px rgba(0, 217, 255, 0.3);\r\n border: 1px solid #00D9FF;\r\n }\r\n\r\n \/* \u00dcST MEN\u00dc: SA\u011eA YATAY *\/\r\n .nav-top a {\r\n transform: skewX(20deg); \r\n }\r\n .nav-top a span {\r\n display: block;\r\n transform: skewX(-20deg); \r\n }\r\n .nav-top a:hover {\r\n transform: skewX(20deg) scale(1.05);\r\n }\r\n .nav-top a.active {\r\n transform: skewX(20deg);\r\n }\r\n\r\n \/* ALT MEN\u00dc: SOLA YATAY *\/\r\n .nav-bottom a {\r\n transform: skewX(-20deg); \r\n }\r\n .nav-bottom a span {\r\n display: block;\r\n transform: skewX(20deg);\r\n }\r\n .nav-bottom a:hover {\r\n transform: skewX(-20deg) scale(1.05);\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero-section {\r\n position: relative;\r\n min-height: 35vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n padding: 20px;\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n }\r\n\r\n .hero-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.4), #000);\r\n }\r\n\r\n .purple-glow {\r\n position: absolute;\r\n top: 25%;\r\n left: 25%;\r\n width: 400px;\r\n height: 400px;\r\n background: rgba(157, 78, 221, 0.3);\r\n border-radius: 50%;\r\n filter: blur(128px);\r\n }\r\n\r\n .cyan-glow {\r\n position: absolute;\r\n bottom: 25%;\r\n right: 25%;\r\n width: 400px;\r\n height: 400px;\r\n background: rgba(0, 217, 255, 0.2);\r\n border-radius: 50%;\r\n filter: blur(128px);\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 10;\r\n width: 100%;\r\n max-width: 77rem;\r\n margin: 0 auto;\r\n animation: fadeIn 0.8s ease-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: scale(0.9); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .hero-card {\r\n background: linear-gradient(to right, rgba(255, 0, 110, 0.2), rgba(157, 78, 221, 0.2), rgba(255, 214, 10, 0.2));\r\n padding: 2px;\r\n border-radius: 24px;\r\n }\r\n\r\n .hero-inner {\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(12px);\r\n border-radius: 22px;\r\n padding: 32px;\r\n text-align: center;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 0 50px rgba(157, 78, 221, 0.2);\r\n }\r\n\r\n @media (min-width: 768px) { .hero-inner { padding: 48px; } }\r\n\r\n .badge {\r\n background: linear-gradient(to right, #FF006E, #9D4EDD, #00D9FF);\r\n padding: 2px;\r\n border-radius: 9999px;\r\n display: inline-block;\r\n margin: 10px 0 24px 500px;\r\n box-shadow: 0 0 20px rgba(157, 78, 221, 0.5);\r\n animation: pulse 2s infinite;\r\n text-align: center;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { box-shadow: 0 0 20px rgba(157, 78, 221, 0.5); }\r\n 50% { box-shadow: 0 0 30px rgba(157, 78, 221, 0.8); }\r\n }\r\n\r\n .badge-inner {\r\n background: #000;\r\n padding: 8px 32px;\r\n border-radius: 9999px;\r\n }\r\n\r\n .badge-text {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n background: linear-gradient(to right, #FF006E, #9D4EDD, #00D9FF);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 0.05em;\r\n }\r\n @media (min-width: 700px) { .badge-text { font-size: 1.5rem; } }\r\n\r\n \/* Container *\/\r\n .container {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n padding: 40px 16px;\r\n }\r\n\r\n \/* Grid layouts *\/\r\n .grid-2 { display: grid; gap: 32px; }\r\n @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }\r\n\r\n .grid-4 { display: grid; gap: 24px; }\r\n @media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }\r\n @media (min-width: 1050px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }\r\n\r\n \/* Cards *\/\r\n .card {\r\n background: #1A1A1A;\r\n border: 1px solid #374151;\r\n padding: 32px;\r\n border-radius: 16px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n .card:hover { transform: scale(1.02); border-color: #9D4EDD; }\r\n .card-purple:hover { border-color: #9D4EDD; }\r\n .card-pink:hover { border-color: #FF006E; }\r\n\r\n .card-purple .card-glow { background: rgba(157, 78, 221, 0.1); }\r\n .card-pink .card-glow { background: rgba(255, 0, 110, 0.1); }\r\n\r\n .card-glow {\r\n position: absolute; top: 0; right: 0;\r\n width: 135px; height: 128px;\r\n border-radius: 50%; filter: blur(48px);\r\n transition: all 0.3s ease;\r\n }\r\n .card:hover .card-glow { background: rgba(157, 78, 221, 0.2); }\r\n\r\n .card-content { display: flex; align-items: flex-start; gap: 16px; }\r\n .card-icon { background: #9D4EDD; padding: 12px; border-radius: 8px; }\r\n .card-pink .card-icon { background: #FF006E; }\r\n .card-icon svg { width: 32px; height: 32px; color: #fff; }\r\n .card-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 8px; }\r\n .card-description { color: #9ca3af; line-height: 1.5; }\r\n\r\n \/* Feature Card *\/\r\n .feature-card {\r\n background: #111; border: 2px solid; padding: 24px;\r\n border-radius: 12px; transition: all 0.3s ease;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n display: flex; flex-direction: column; height: 100%;\r\n }\r\n .feature-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }\r\n\r\n .feature-border-purple { border-color: #9D4EDD; }\r\n .feature-border-pink { border-color: #FF006E; }\r\n .feature-border-cyan { border-color: #00D9FF; }\r\n .feature-border-yellow { border-color: #FFD60A; }\r\n\r\n .feature-icon {\r\n width: 48px; height: 48px; border-radius: 8px;\r\n background: rgba(255, 255, 255, 0.1);\r\n display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\r\n }\r\n .feature-icon svg { width: 24px; height: 24px; color: #fff; }\r\n .feature-title { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 12px; }\r\n .feature-description { color: #9ca3af; font-size: 0.875rem; line-height: 1.625; }\r\n\r\n \/* Pricing Section *\/\r\n .pricing-section { margin-bottom: 40px; }\r\n .pricing-title {\r\n font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 48px;\r\n background: linear-gradient(to right, #9D4EDD, #00D9FF);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n }\r\n @media (min-width: 768px) { .pricing-title { font-size: 3rem; } }\r\n\r\n .pricing-grid { display: grid; gap: 24px; }\r\n @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }\r\n\r\n .pricing-card {\r\n background: #0A0A0A; border: 2px solid; border-radius: 16px;\r\n padding: 24px; display: flex; flex-direction: column;\r\n position: relative; transition: all 0.3s ease;\r\n }\r\n .pricing-card:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }\r\n\r\n .pricing-border-cyan { border-color: #00D9FF; }\r\n .pricing-border-purple { border-color: #9D4EDD; }\r\n .pricing-border-pink { border-color: #FF006E; }\r\n .pricing-border-yellow { border-color: #FFD60A; }\r\n\r\n .vip-badge, .popular-badge {\r\n position: absolute; top: 0; right: 0;\r\n color: #fff; font-size: 0.75rem; font-weight: 700;\r\n padding: 4px 12px; border-bottom-left-radius: 8px; border-top-right-radius: 8px;\r\n transform: translate(2px, -2px);\r\n }\r\n .vip-badge { background: #FFD60A; color: #000; }\r\n .popular-badge { background: #9D4EDD; }\r\n\r\n .pricing-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }\r\n .pricing-name-cyan { color: #00D9FF; }\r\n .pricing-name-purple { color: #9D4EDD; }\r\n .pricing-name-pink { color: #FF006E; }\r\n .pricing-name-yellow { color: #FFD60A; }\r\n\r\n .pricing-price { margin-bottom: 24px; }\r\n .pricing-price-value { font-size: 2.25rem; font-weight: 700; color: #fff; }\r\n .pricing-price-period { color: #9ca3af; font-size: 0.875rem; }\r\n\r\n .pricing-features { list-style: none; margin-bottom: 32px; flex-grow: 1; }\r\n .pricing-features li {\r\n display: flex; align-items: flex-start; gap: 8px;\r\n font-size: 0.875rem; color: #d1d5db; margin-bottom: 12px;\r\n }\r\n .pricing-features .bullet {\r\n width: 6px; height: 6px; border-radius: 50%; background: #fff;\r\n margin-top: 8px; flex-shrink: 0;\r\n }\r\n\r\n .pricing-btn {\r\n width: 100%; padding: 24px; font-weight: 700; border-radius: 12px;\r\n border: none; cursor: pointer; transition: all 0.3s ease; font-size: 1rem;\r\n }\r\n .pricing-btn:hover { transform: scale(1.02); }\r\n\r\n .btn-cyan { background: #00D9FF; color: #000; }\r\n .btn-purple { background: #9D4EDD; color: #fff; }\r\n .btn-pink { background: #FF006E; color: #fff; }\r\n .btn-yellow { background: #FFD60A; color: #000; }\r\n\r\n \/* Hero Buttons *\/\r\n .hero-buttons {\r\n display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 30px;\r\n }\r\n .btn {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n padding: 15px 25px; font-size: 1rem; font-weight: 700;\r\n border-radius: 12px; text-decoration: none; transition: all 0.3s ease;\r\n cursor: pointer; border: none; color: #fff;\r\n }\r\n\r\n .btn-explore { background: #FF006E; box-shadow: 0 0 20px rgba(255, 0, 110, 0.4); }\r\n .btn-lists { background: #9D4EDD; box-shadow: 0 0 20px rgba(157, 78, 221, 0.4); }\r\n .btn-community { background: #00D9FF; color: #000; box-shadow: 0 0 20px rgba(0, 217, 255, 0.4); }\r\n .btn-feel { background: #FFD60A; color: #000; box-shadow: 0 0 20px rgba(255, 214, 10, 0.4); }\r\n .btn-story { background: #00CC66; box-shadow: 0 0 20px rgba(0, 204, 102, 0.4); }\r\n\r\n \/* ===== RADIO \/ CD PLAYER ===== *\/\r\n .radio-section {\r\n position: relative; display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 50px; padding: 40px 0;\r\n }\r\n .radio-container {\r\n display: flex; align-items: center; justify-content: center;\r\n position: relative; width: 100%; max-width: 1200px;\r\n }\r\n .radio-player { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 10; }\r\n .cd-wrapper { position:relative; width:260px; height:260px; margin: 0 auto; }\r\n .cd {\r\n width:100%; height:100%; border-radius:50%;\r\n background: radial-gradient(circle at center, #111 0%, #222 35%, #000 70%);\r\n border:6px solid #222; animation:spin 20s linear infinite;\r\n box-shadow:0 0 40px rgba(157,78,221,.6);\r\n }\r\n .cd::after {\r\n content:\"\"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\r\n width:50px; height:50px; background:linear-gradient(135deg,#ff0066,#9d4edd);\r\n border-radius:50%; box-shadow:inset 0 0 10px #000;\r\n }\r\n @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\r\n\r\n \/* G\u00d6RSELDEK\u0130 G\u0130B\u0130 ESK\u0130 TARZ SES KONTROL\u00dc *\/\r\n .volume-slider-container {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 250px;\r\n height: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 15;\r\n background: rgba(0,0,0,0.5);\r\n border-radius: 30px;\r\n padding: 0 15px;\r\n border: 2px solid #333;\r\n }\r\n\r\n .volume-minus, .volume-plus {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: #ccc;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n .volume-slider-track {\r\n flex-grow: 1;\r\n height: 8px;\r\n background: #444;\r\n border-radius: 4px;\r\n margin: 0 15px;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n\r\n .volume-slider-fill {\r\n height: 100%;\r\n background: linear-gradient(to right, #9D4EDD, #FF006E);\r\n border-radius: 4px;\r\n width: 20%; \/* BA\u015eLANGI\u00c7 %20 *\/\r\n transition: width 0.1s ease;\r\n }\r\n\r\n .volume-slider-thumb {\r\n position: absolute;\r\n top: 50%;\r\n left: 20%; \/* BA\u015eLANGI\u00c7 %20 *\/\r\n transform: translate(-50%, -50%);\r\n width: 30px;\r\n height: 30px;\r\n background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);\r\n border: 3px solid #654321;\r\n border-radius: 50%;\r\n cursor: grab;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);\r\n transition: left 0.1s ease;\r\n }\r\n .volume-slider-thumb:active {\r\n cursor: grabbing;\r\n }\r\n\r\n\r\n .radio-waves {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: 320px; height: 320px; z-index: 5;\r\n }\r\n .wave {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: 100%; height: 100%; border-radius: 50%;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n animation: wave-animation 3.5s infinite ease-out;\r\n }\r\n .wave:nth-child(2) { animation-delay: 0.5s; }\r\n .wave:nth-child(3) { animation-delay: 1s; }\r\n .wave:nth-child(4) { animation-delay: 1.5s; }\r\n .wave:nth-child(5) { animation-delay: 2s; }\r\n .wave:nth-child(6) { animation-delay: 2.5s; }\r\n\r\n @keyframes wave-animation {\r\n 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }\r\n 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }\r\n }\r\n\r\n \/* Colored Cards around Radio *\/\r\n .colored-card {\r\n width: 150px; height: 150px; border-radius: 16px;\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n cursor: pointer; position: absolute;\r\n }\r\n .colored-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }\r\n .colored-card-icon { width: 50px; height: 50px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }\r\n .colored-card-icon svg { width: 100%; height: 100%; fill: white; }\r\n .colored-card-title { font-size: 1.1rem; font-weight: 700; color: white; text-align: center; }\r\n\r\n .blue-card { background-color: #0066FF; top: -40px; left: 50px; }\r\n .green-card { background-color: #00BFFF; top: -40px; right: 50px; }\r\n .purple-card { background-color: #9D4EDD; bottom: -20px; left: 50px; }\r\n .red-card { background-color: #FF0044; bottom: -20px; right: 50px; }\r\n\r\n \/* Footer *\/\r\n footer { border-top:1px solid #222; padding:20px; text-align:center; font-size:13px; color:#777; margin-top: 40px; position: relative; z-index: 10;}\r\n \r\n \/* Audio Player *\/\r\n .audio-player { display: none; }\r\n\r\n \/* =========================================\r\n PAGE CONTAINER & CONTENT STYLES\r\n ========================================= *\/\r\n .page-container {\r\n max-width: 1200px;\r\n margin: 40px auto;\r\n padding: 20px;\r\n min-height: 60vh;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n .page-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 2.5rem;\r\n margin-bottom: 30px;\r\n background: linear-gradient(to right, #9D4EDD, #00D9FF);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n border-bottom: 2px solid #333;\r\n padding-bottom: 10px;\r\n }\r\n \r\n \/* Page Content Visibility *\/\r\n .page-content {\r\n display: none;\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n .page-content.active {\r\n display: block;\r\n }\r\n\r\n \/* Specific elements *\/\r\n .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }\r\n .genre-card {\r\n background: rgba(17, 17, 17, 0.8);\r\n border: 1px solid #333; border-radius: 12px; padding: 20px;\r\n text-align: center; transition: 0.3s; cursor: pointer; position: relative; overflow: hidden;\r\n backdrop-filter: blur(5px);\r\n }\r\n .genre-card:hover { transform: translateY(-5px); border-color: #ff0066; }\r\n .genre-card h3 { z-index: 2; position: relative; }\r\n .genre-bg { position: absolute; top:0; left:0; width:100%; height:100%; opacity: 0.2; background-size: cover; z-index:1; }\r\n \r\n .contact-form { background: rgba(17, 17, 17, 0.9); padding: 30px; border-radius: 16px; border: 1px solid #333; max-width: 600px; margin: 0 auto; backdrop-filter: blur(10px); }\r\n \r\n .dj-deck { \r\n background: rgba(26, 26, 26, 0.9); border-radius: 20px; padding: 40px; border: 4px solid #333;\r\n box-shadow: 0 0 50px rgba(0,0,0,0.8); position: relative; backdrop-filter: blur(10px);\r\n }\r\n .turntable-wrapper { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; }\r\n .turntable { \r\n width: 300px; height: 300px; background: #222; border-radius: 50%; border: 10px solid #111;\r\n position: relative; display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 0 20px rgba(0,0,0,0.5);\r\n }\r\n .vinyl {\r\n width: 260px; height: 260px; background: repeating-radial-gradient(#111, #111 2px, #222 3px, #222 4px);\r\n border-radius: 50%; animation: spin 2s linear infinite; animation-play-state: paused;\r\n }\r\n .vinyl.playing { animation-play-state: running; }\r\n .tonearm { \r\n position: absolute; top: 20px; right: 20px; width: 100px; height: 10px; background: #888;\r\n transform-origin: top right; transform: rotate(-30deg); transition: 0.5s;\r\n }\r\n .tonearm.active { transform: rotate(20deg); }\r\n \r\n .event-row {\r\n display: flex; align-items: center; background: rgba(17, 17, 17, 0.8); margin-bottom: 15px;\r\n padding: 20px; border-radius: 12px; border: 1px solid #333; transition: 0.3s;\r\n backdrop-filter: blur(5px);\r\n }\r\n .event-row:hover { border-color: #00D9FF; transform: translateX(10px); }\r\n .date-box { \r\n background: #222; padding: 10px 20px; border-radius: 8px; text-align: center; margin-right: 20px;\r\n border: 1px solid #444; min-width: 80px;\r\n }\r\n .date-day { font-size: 1.5rem; font-weight: bold; color: #fff; }\r\n .date-month { color: #00D9FF; font-size: 0.9rem; text-transform: uppercase; }\r\n \r\n .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px; margin-top: 30px;}\r\n .team-member { text-align: center; }\r\n .avatar { width: 120px; height: 120px; background: #333; border-radius: 50%; margin: 0 auto 15px; overflow: hidden; border: 2px solid #9D4EDD; }\r\n .avatar img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n \/* Events List *\/\r\n .events-list {\r\n display: flex;\r\n flex-direction: column,\r\n gap: 15px;\r\n }\r\n\r\n \/* =========================================\r\n ENTEGRE ED\u0130LEN G\u0130R\u0130\u015e S\u0130STEM\u0130 (LOGIN) ST\u0130LLER\u0130\r\n ========================================= *\/\r\n \r\n .auth-modal {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n display: flex; align-items: center; justify-content: center;\r\n z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n .auth-modal.active { opacity: 1; visibility: visible; }\r\n\r\n .auth-container {\r\n background: #1A1A1A; border-radius: 16px; width: 450px; max-width: 90%;\r\n padding: 40px; border: 3px solid #10b981;\r\n position: relative; box-shadow: 0 0 30px rgba(16, 185, 129, 0.4), inset 0 0 30px rgba(16, 185, 129, 0.1);\r\n transition: all 0.5s ease;\r\n }\r\n .auth-container::before {\r\n content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;\r\n background: linear-gradient(45deg, #10b981, #10b981, #10b981, #10b981);\r\n border-radius: 16px; z-index: -1; animation: authNeonBorder 2s linear infinite;\r\n }\r\n @keyframes authNeonBorder {\r\n 0%, 100% { filter: brightness(1); }\r\n 50% { filter: brightness(1.3); }\r\n }\r\n\r\n .auth-container.vip-mode { border-color: #FFD60A; box-shadow: 0 0 30px rgba(255, 214, 10, 0.4), inset 0 0 30px rgba(255, 214, 10, 0.1); }\r\n .auth-container.vip-mode::before { background: linear-gradient(45deg, #FFD60A, #FFD60A, #FFD60A, #FFD60A); }\r\n .auth-container.premium-mode { border-color: #FF006E; box-shadow: 0 0 30px rgba(255, 0, 110, 0.4), inset 0 0 30px rgba(255, 0, 110, 0.1); }\r\n .auth-container.premium-mode::before { background: linear-gradient(45deg, #FF006E, #FF006E, #FF006E, #FF006E); }\r\n .auth-container.pro-mode { border-color: #00D9FF; box-shadow: 0 0 30px rgba(0, 217, 255, 0.4), inset 0 0 30px rgba(0, 217, 255, 0.1); }\r\n .auth-container.pro-mode::before { background: linear-gradient(45deg, #00D9FF, #00D9FF, #00D9FF, #00D9FF); }\r\n\r\n .auth-toggle-wrapper { display: flex; gap: 0; background: #000; border-radius: 8px; padding: 4px; margin-bottom: 25px; }\r\n .auth-toggle-btn {\r\n flex: 1; padding: 12px; background: transparent; color: #888;\r\n border: none; border-radius: 6px; font-weight: 600; cursor: pointer;\r\n transition: all 0.3s; font-family: 'Inter', sans-serif; font-size: 14px;\r\n }\r\n .auth-toggle-btn.active { background: linear-gradient(135deg, #7b2ff7, #ff0066); color: white; }\r\n\r\n .auth-form { display: flex; flex-direction: column; gap: 20px; }\r\n .form-group { display: flex; flex-direction: column; gap: 8px; }\r\n .form-label { font-weight: 500; font-size: 14px; color: #fff; }\r\n .form-input {\r\n width: 100%; background: #000; border: 1px solid #333;\r\n border-radius: 8px; padding: 14px; color: white; font-size: 16px;\r\n transition: border-color 0.3s; font-family: 'Inter', sans-serif;\r\n }\r\n .form-input:focus { outline: none; border-color: #fff; }\r\n\r\n .auth-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }\r\n .remember-me { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #aaa; font-size: 14px; }\r\n .checkbox {\r\n width: 18px; height: 18px; border-radius: 4px; border: 1px solid #333;\r\n display: flex; align-items: center; justify-content: center; transition: all 0.3s;\r\n }\r\n .checkbox.active { background: linear-gradient(135deg, #7b2ff7, #ff0066); border-color: transparent; }\r\n .checkbox i { font-size: 12px; color: white; opacity: 0; transition: opacity 0.3s; }\r\n .checkbox.active i { opacity: 1; }\r\n .forgot-password { color: #9D4EDD; font-size: 14px; text-decoration: none; transition: color 0.3s; }\r\n .forgot-password:hover { text-decoration: underline; color: #fff; }\r\n\r\n .btn-primary {\r\n width: 100%; padding: 14px; border-radius: 8px; font-weight: 600;\r\n font-size: 16px; cursor: pointer; transition: all 0.3s; border: none;\r\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n text-decoration: none; font-family: 'Inter', sans-serif;\r\n background: linear-gradient(135deg, #7b2ff7, #ff0066); color: white;\r\n }\r\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3); }\r\n\r\n .auth-divider { text-align: center; margin: 25px 0; position: relative; color: #888; font-size: 14px; }\r\n .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #333; z-index: -1; }\r\n .auth-divider span { background: #1A1A1A; padding: 0 15px; }\r\n\r\n .social-btn {\r\n display: flex; align-items: center; justify-content: center; gap: 10px;\r\n padding: 12px; background: #000; border: 1px solid #333; border-radius: 8px;\r\n color: white; font-weight: 500; cursor: pointer; transition: all 0.3s; width: 100%;\r\n }\r\n .social-btn:hover { background: #222; border-color: #fff; }\r\n\r\n .auth-switch { text-align: center; margin-top: 25px; color: #888; font-size: 14px; }\r\n .auth-switch a { color: #9D4EDD; font-weight: 500; text-decoration: none; transition: color 0.3s; }\r\n .auth-switch a:hover { color: #fff; text-decoration: underline; }\r\n\r\n \/* Notifications *\/\r\n .notification {\r\n position: fixed; bottom: 20px; right: 20px;\r\n background: #1A1A1A; border: 1px solid #333; border-radius: 8px;\r\n padding: 16px 20px; display: flex; align-items: center; gap: 15px;\r\n max-width: 350px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\r\n transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 2000;\r\n }\r\n .notification.show { transform: translateY(0); opacity: 1; }\r\n .notification-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\r\n .notification-icon.success { background: rgba(16, 185, 129, 0.2); color: var(--success); }\r\n .notification-icon.error { background: rgba(239, 68, 68, 0.2); color: var(--danger); }\r\n .notification-content { flex: 1; }\r\n .notification-title { font-weight: 600; margin-bottom: 4px; color: #fff; }\r\n .notification-message { font-size: 14px; color: #aaa; }\r\n .notification-close { background: none; border: none; color: #888; cursor: pointer; font-size: 18px; transition: color 0.3s; }\r\n .notification-close:hover { color: #fff; }\r\n\r\n #user-dashboard-info { display: none; text-align: center; padding: 20px; margin-top: 20px; border-top: 1px solid #333; border-radius: 12px; }\r\n \r\n \/* MiniMax Floating Ball *\/\r\n #minimax-floating-ball {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n padding: 10px 12px;\r\n background: #222222;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n color: #F8F8F8;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n z-index: 9999;\r\n transition: all 0.3s ease;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n #minimax-floating-ball:hover {\r\n transform: translateY(-2px);\r\n background: #383838;\r\n }\r\n .minimax-ball-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .minimax-logo-wave {\r\n width: 20px;\r\n height: 17px;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='17' viewBox='0 0 20 17' fill='none'%3E%3Cpath d='M20 12.3718L16.283 16.2413H12.2518V13.1614H9.17175V16.2413H7.00999V13.1613H3.92998V16.2413H0V4.00101L3.84145 0H20V12.3718Z' fill='white'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n }\r\n .minimax-ball-text {\r\n font-size: 12px;\r\n font-weight: 500;\r\n white-space: nowrap;\r\n }\r\n .minimax-close-icon {\r\n margin-left: 8px;\r\n font-size: 16px;\r\n width: 18px;\r\n height: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n opacity: 0.7;\r\n transition: opacity 0.2s ease;\r\n }\r\n .minimax-close-icon:hover {\r\n opacity: 1;\r\n }\r\n <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body>\r\n <div id=\"canvas-container\"><\/div>\r\n \r\n <!-- HEADER \/ MENU -->\r\n <header>\r\n <!-- \u00dcST MEN\u00dc -->\r\n <nav class=\"nav-top\">\r\n <a href=\"#\" class=\"nav-link\" data-page=\"anasayfa\"><span>ANA SAYFA<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"kesfet\"><span>KE\u015eFET<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"sanatci\"><span>SANATCI OL<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"dj\"><span>DJ KAB\u0130N\u0130N\u0130 A\u00c7<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"etkinlikler\"><span>ETK\u0130NL\u0130KLER<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"hakkimizda\"><span>HAKKIMIZDA<\/span><\/a>\r\n <a href=\"#\" class=\"nav-link\" data-page=\"destek\"><span>DESTEK<\/span><\/a>\r\n <\/nav>\r\n\r\n <!-- ALT MEN\u00dc -->\r\n <nav class=\"nav-bottom\">\r\n <a href=\"#\" class=\"role-login-btn\" id=\"vip-btn\" data-role=\"vip\"><span>V\u0130P PROF\u0130L<\/span><\/a>\r\n <a href=\"#\" class=\"role-login-btn\" id=\"premium-btn\" data-role=\"premium\"><span>PREMIUM PROF\u0130L<\/span><\/a>\r\n <a href=\"#\" class=\"role-login-btn\" id=\"pro-btn\" data-role=\"pro\"><span>PROFOSYONELLER<\/span><\/a>\r\n <a href=\"#\" class=\"role-login-btn\" id=\"standard-btn\" data-role=\"standard\"><span>STANDARTLAR<\/span><\/a>\r\n <a href=\"#\" id=\"live-btn\"><span>CANLI AKI\u015eLAR<\/span><\/a>\r\n <a href=\"#\"><span>\u00c7IKI\u015e YAP<\/span><\/a>\r\n <a href=\"#\" id=\"logoutBtn\" style=\"display:none; background:#ef4444;\"><span>\u00c7IKI\u015e<\/span><\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <!-- ==================== ANA SAYFA ==================== -->\r\n <main id=\"page-anasayfa\" class=\"page-content active\">\r\n <div class=\"badge\">\r\n <div class=\"badge-inner\">\r\n <span class=\"badge-text\">BEN YOU TUBE COM TR ERK AI YAPAY ZEKASI \u0130LE M\u00dcZ\u0130K YARATIMI<\/span>\r\n <\/div>\r\n <\/div> \r\n\r\n <div class=\"hero-section\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"purple-glow\"><\/div>\r\n <div class=\"cyan-glow\"><\/div> \r\n <div class=\"hero-content\">\r\n <div class=\"hero-card\">\r\n <div class=\"hero-inner\">\r\n <div class=\"radio-section\">\r\n <div class=\"radio-container\">\r\n <div class=\"colored-card blue-card\">\r\n <div class=\"colored-card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg><\/div>\r\n <h3 class=\"colored-card-title\">Topluluklar<\/h3>\r\n <\/div>\r\n <div class=\"colored-card green-card\">\r\n <div class=\"colored-card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z\"\/><\/svg><\/div>\r\n <h3 class=\"colored-card-title\">Etkinlikler<\/h3>\r\n <\/div>\r\n <div class=\"colored-card purple-card\">\r\n <div class=\"colored-card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"\/><\/svg><\/div>\r\n <h3 class=\"colored-card-title\">Yeni Yildizlar<\/h3>\r\n <\/div>\r\n <div class=\"colored-card red-card\">\r\n <div class=\"colored-card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z\"\/><\/svg><\/div>\r\n <h3 class=\"colored-card-title\">Podcastler<\/h3>\r\n <\/div>\r\n \r\n <div class=\"radio-player\">\r\n <div class=\"cd-wrapper\">\r\n <div class=\"radio-waves\">\r\n <div class=\"wave\"><\/div>\r\n <div class=\"wave\"><\/div>\r\n <div class=\"wave\"><\/div>\r\n <div class=\"wave\"><\/div>\r\n <div class=\"wave\"><\/div>\r\n <div class=\"wave\"><\/div>\r\n <\/div>\r\n <div class=\"cd\"><\/div>\r\n <!-- YEN\u0130, G\u00d6RSEL G\u0130B\u0130 SES KONTROL\u00dc -->\r\n <div class=\"volume-slider-container\">\r\n <span class=\"volume-minus\">–<\/span>\r\n <div class=\"volume-slider-track\" id=\"volumeTrack\">\r\n <div class=\"volume-slider-fill\" id=\"volumeFill\"><\/div>\r\n <div class=\"volume-slider-thumb\" id=\"volumeThumb\"><\/div>\r\n <\/div>\r\n <span class=\"volume-plus\">+<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"user-dashboard-info\">\r\n <h2 id=\"welcome-msg\" style=\"font-size:2rem; margin-bottom:10px;\">Ho\u015fgeldin!<\/h2>\r\n <p id=\"role-msg\" style=\"color:#aaa;\">Mevcut listenize eri\u015febilirsiniz.<\/p>\r\n <\/div>\r\n \r\n <div class=\"hero-buttons\">\r\n <a href=\"\/explore\" class=\"btn btn-explore\">\u015eARKILARI KE\u015eFET<\/a>\r\n <a href=\"\/explore\" class=\"btn btn-lists\">L\u0130STELERE G\u00d6ZAT<\/a>\r\n <a href=\"\/explore\" class=\"btn btn-community\">TOPLULU\u011eA KATIL<\/a>\r\n <a href=\"\/explore\" class=\"btn btn-feel\">M\u00dcZ\u0130KLER\u0130 H\u0130SSET<\/a>\r\n <a href=\"\/explore\" class=\"btn btn-story\">H\u0130KAYEN\u0130 BA\u015eLAT<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Music from Video & Editor Section -->\r\n <div class=\"container\">\r\n <div class=\"grid-2 section-margin\">\r\n <div class=\"card card-purple\">\r\n <div class=\"card-glow\"><\/div>\r\n <div class=\"card-content\">\r\n <div class=\"card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z\" \/><\/svg><\/div>\r\n <div><h3 class=\"card-title\">M\u00fczikten Video<\/h3><p class=\"card-description\">M\u00fcziklerinize otomatik olarak g\u00f6rsel e\u015flik edecek video klipler olu\u015fturun ve sosyal medyada payla\u015f\u0131n.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card card-pink\">\r\n <div class=\"card-glow\"><\/div>\r\n <div class=\"card-content\">\r\n <div class=\"card-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" \/><\/svg><\/div>\r\n <div><h3 class=\"card-title\">M\u00fczik Edit\u00f6r\u00fc<\/h3><p class=\"card-description\">Taray\u0131c\u0131 tabanl\u0131 DAW aray\u00fcz\u00fc ile m\u00fcziklerinizi d\u00fczenleyin, efektler ekleyin ve mastering yap\u0131n.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-4 section-margin\">\r\n <div class=\"feature-card feature-border-purple\">\r\n <div class=\"feature-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/><\/svg><\/div>\r\n <h3 class=\"feature-title\">Ses Klonlama<\/h3><p class=\"feature-description\">Kendi sesinizle farkl\u0131 tarzlarda \u015fark\u0131 s\u00f6yleyin veya telif i\u00e7ermeyen seslerle AI vokal \u00fcretin.<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-pink\">\r\n <div class=\"feature-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\" \/><\/svg><\/div>\r\n <h3 class=\"feature-title\">NFT’ni Yarat Ve B\u00fcy\u00fct<\/h3><p class=\"feature-description\">Olu\u015fturdu\u011fun Her \u015eark\u0131y\u0131 NFT Olarak Yaratm\u0131\u015f ol… \u015eark\u0131n Dinlendik\u00e7e NFT’in De\u011ferlensin.<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-cyan\">\r\n <div class=\"feature-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/><\/svg><\/div>\r\n <h3 class=\"feature-title\">Stil D\u00f6n\u00fc\u015ft\u00fcrme<\/h3><p class=\"feature-description\">Mevcut bir par\u00e7ay\u0131 farkl\u0131 bir m\u00fczik tarz\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcn. Blues’tan Hip-Hop’a, Pop’tan Elektronik’e.<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-yellow\">\r\n <div class=\"feature-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\" \/><\/svg><\/div>\r\n <h3 class=\"feature-title\">Topluluk<\/h3><p class=\"feature-description\">Di\u011fer m\u00fczisyenlerle i\u015f birli\u011fi yap\u0131n, yar\u0131\u015fmalara kat\u0131l\u0131n ve topluluk forumlar\u0131nda tart\u0131\u015fmalara kat\u0131l\u0131n.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pricing-section\">\r\n <h2 class=\"pricing-title\"><\/h2>\r\n <div class=\"pricing-grid\">\r\n <div class=\"pricing-card pricing-border-cyan\"><h3 class=\"pricing-name pricing-name-cyan\">\u00dccretsiz<\/h3><div class=\"pricing-price\"><span class=\"pricing-price-value\">0\u20ba<\/span><span class=\"pricing-price-period\">\/ay<\/span><\/div><ul class=\"pricing-features\"><li><span class=\"bullet\"><\/span>Ayda 60 m\u00fczik olu\u015fturma<\/li><li><span class=\"bullet\"><\/span>Temel ses efektleri<\/li><li><span class=\"bullet\"><\/span>Topluluk eri\u015fimi<\/li><li><span class=\"bullet\"><\/span>YouTube’a akt\u0131rma<\/li><\/ul><button class=\"pricing-btn btn-cyan\">Ba\u015flay\u0131n<\/button><\/div>\r\n <div class=\"pricing-card pricing-border-purple\"><div class=\"vip-badge\">POP\u00dcLER<\/div><h3 class=\"pricing-name pricing-name-purple\">Pro<\/h3><div class=\"pricing-price\"><span class=\"pricing-price-value\">99<\/span><span class=\"pricing-price-period\">\/ay<\/span><\/div><ul class=\"pricing-features\"><li><span class=\"bullet\"><\/span>Ayda 90 m\u00fczik olu\u015fturma<\/li><li><span class=\"bullet\"><\/span>Geli\u015fmi\u015f ses efektleri<\/li><li><span class=\"bullet\"><\/span>Ses klonlama \u00f6zelli\u011fi<\/li><li><span class=\"bullet\"><\/span>\u00d6zel mastering ara\u00e7lar\u0131<\/li><li><span class=\"bullet\"><\/span>\u00d6ncelikli destek<\/li><\/ul><button class=\"pricing-btn btn-purple\">Y\u00fckselt<\/button><\/div>\r\n <div class=\"pricing-card pricing-border-pink\"><div class=\"vip-badge\">PROFOSYONEL<\/div><h3 class=\"pricing-name pricing-name-pink\">Premium<\/h3><div class=\"pricing-price\"><span class=\"pricing-price-value\">199\u20ba<\/span><span class=\"pricing-price-period\">\/ay<\/span><\/div><ul class=\"pricing-features\"><li><span class=\"bullet\"><\/span>S\u0131n\u0131rs\u0131z m\u00fczik olu\u015fturma<\/li><li><span class=\"bullet\"><\/span>T\u00fcm efektler ve ara\u00e7lar<\/li><li><span class=\"bullet\"><\/span>\u0130\u015f birli\u011fi ara\u00e7lar\u0131<\/li><li><span class=\"bullet\"><\/span>Ticari kullan\u0131m hakk\u0131<\/li><li><span class=\"bullet\"><\/span>\u00d6zel Promtlar<\/li><\/ul><button class=\"pricing-btn btn-pink\">Y\u00fckselt<\/button><\/div>\r\n <div class=\"pricing-card pricing-border-yellow\"><div class=\"vip-badge\">VIP \u00d6ZEL<\/div><h3 class=\"pricing-name pricing-name-yellow\">VIP<\/h3><div class=\"pricing-price\"><span class=\"pricing-price-value\">\u00d6zel Fiyatla<\/span><\/div><ul class=\"pricing-features\"><li><span class=\"bullet\"><\/span>S\u0131n\u0131rs\u0131z m\u00fczik olu\u015fturma<\/li><li><span class=\"bullet\"><\/span>T\u00fcm efektler ve ara\u00e7lar<\/li><li><span class=\"bullet\"><\/span>\u0130\u015f birli\u011fi ara\u00e7lar\u0131<\/li><li><span class=\"bullet\"><\/span>Ticari kullan\u0131m hakk\u0131<\/li><li><span class=\"bullet\"><\/span>\u00d6zel Promtlar<\/li><\/ul><button class=\"pricing-btn btn-yellow\">VIP \u0130LET\u0130\u015e\u0130M KUR<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== KE\u015eFET ==================== -->\r\n <main id=\"page-kesfet\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">M\u00dcZ\u0130K KE\u015eFET<\/h1>\r\n \r\n <div class=\"grid-cards\">\r\n <div class=\"genre-card\" onclick=\"playGenre('pop')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #ff0066, #9d4edd);\"><\/div>\r\n <h3>\ud83c\udfb5 Pop<\/h3>\r\n <p style=\"color: #aaa;\">2.4K par\u00e7a<\/p>\r\n <\/div>\r\n <div class=\"genre-card\" onclick=\"playGenre('electronic')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #00d9ff, #0066ff);\"><\/div>\r\n <h3>\ud83c\udfb9 Electronic<\/h3>\r\n <p style=\"color: #aaa;\">1.8K par\u00e7a<\/p>\r\n <\/div>\r\n <div class=\"genre-card\" onclick=\"playGenre('hiphop')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #ffd60a, #ff8c00);\"><\/div>\r\n <h3>\ud83c\udfa4 Hip-Hop<\/h3>\r\n <p style=\"color: #aaa;\">3.2K par\u00e7a<\/p>\r\n <\/div>\r\n <div class=\"genre-card\" onclick=\"playGenre('rock')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #ff0044, #8b0000);\"><\/div>\r\n <h3>\ud83c\udfb8 Rock<\/h3>\r\n <p style=\"color: #aaa;\">1.5K par\u00e7a<\/p>\r\n <\/div>\r\n <div class=\"genre-card\" onclick=\"playGenre('jazz')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #9d4edd, #4a0080);\"><\/div>\r\n <h3>\ud83c\udfb7 Jazz<\/h3>\r\n <p style=\"color: #aaa;\">890 par\u00e7a<\/p>\r\n <\/div>\r\n <div class=\"genre-card\" onclick=\"playGenre('classical')\">\r\n <div class=\"genre-bg\" style=\"background: linear-gradient(135deg, #00cc66, #004d26);\"><\/div>\r\n <h3>\ud83c\udfbb Klasik<\/h3>\r\n <p style=\"color: #aaa;\">650 par\u00e7a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== SANATCI OL ==================== -->\r\n <main id=\"page-sanatci\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">SANATCI OL<\/h1>\r\n \r\n <div class=\"grid-2\" style=\"align-items: center; margin-bottom: 50px;\">\r\n <div>\r\n <h2 style=\"color: #FF006E; margin-bottom: 20px;\">M\u00fczi\u011fini Yarat<\/h2>\r\n <p style=\"line-height: 1.8; color: #ccc; margin-bottom: 20px;\">\r\n Yapay zeka destekli ara\u00e7lar\u0131m\u0131zla kendi m\u00fczi\u011fini \u00fcret. Metinden \u015fark\u0131ya, \r\n sesten enstr\u00fcmana, hayal g\u00fcc\u00fcn\u00fcn s\u0131n\u0131r\u0131 yok.\r\n <\/p>\r\n <ul style=\"list-style: none; color: #aaa;\">\r\n <li style=\"margin-bottom: 10px;\">\u2705 S\u0131n\u0131rs\u0131z AI m\u00fczik \u00fcretimi<\/li>\r\n <li style=\"margin-bottom: 10px;\">\u2705 Profesyonel ses kalitesi<\/li>\r\n <li style=\"margin-bottom: 10px;\">\u2705 NFT’ye d\u00f6n\u00fc\u015ft\u00fcrme<\/li>\r\n <li style=\"margin-bottom: 10px;\">\u2705 Telif haklar\u0131 senin<\/li>\r\n <\/ul>\r\n <button class=\"btn btn-pink\" style=\"margin-top: 20px;\">Hemen Ba\u015fvur<\/button>\r\n <\/div>\r\n <div style=\"background: linear-gradient(135deg, #ff0066, #9d4edd); padding: 5px; border-radius: 20px;\">\r\n <div style=\"background: #000; padding: 40px; border-radius: 18px; text-align: center;\">\r\n <i class=\"fas fa-music\" style=\"font-size: 4rem; color: #FF006E; margin-bottom: 20px;\"><\/i>\r\n <h3>500K+<\/h3>\r\n <p>\u00dcretilen Par\u00e7a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h2 style=\"text-align: center; margin-bottom: 30px;\">Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\r\n <div class=\"grid-4\">\r\n <div class=\"feature-card feature-border-purple\" style=\"text-align: center;\">\r\n <div class=\"feature-icon\" style=\"margin: 0 auto 16px;\"><i class=\"fas fa-pen\" style=\"font-size: 24px;\"><\/i><\/div>\r\n <h3 class=\"feature-title\">1. Yaz<\/h3>\r\n <p class=\"feature-description\">\u015eark\u0131 s\u00f6zlerini yaz veya melodini tarif et<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-pink\" style=\"text-align: center;\">\r\n <div class=\"feature-icon\" style=\"margin: 0 auto 16px;\"><i class=\"fas fa-magic\" style=\"font-size: 24px;\"><\/i><\/div>\r\n <h3 class=\"feature-title\">2. \u00dcret<\/h3>\r\n <p class=\"feature-description\">AI saniyeler i\u00e7inde m\u00fczi\u011fini olu\u015ftursun<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-cyan\" style=\"text-align: center;\">\r\n <div class=\"feature-icon\" style=\"margin: 0 auto 16px;\"><i class=\"fas fa-edit\" style=\"font-size: 24px;\"><\/i><\/div>\r\n <h3 class=\"feature-title\">3. D\u00fczenle<\/h3>\r\n <p class=\"feature-description\">St\u00fcdyo ara\u00e7lar\u0131yla m\u00fckemmelle\u015ftir<\/p>\r\n <\/div>\r\n <div class=\"feature-card feature-border-yellow\" style=\"text-align: center;\">\r\n <div class=\"feature-icon\" style=\"margin: 0 auto 16px;\"><i class=\"fas fa-rocket\" style=\"font-size: 24px;\"><\/i><\/div>\r\n <h3 class=\"feature-title\">4. Yay\u0131nla<\/h3>\r\n <p class=\"feature-description\">NFT olarak yay\u0131nla ve sat<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== DJ KAB\u0130N\u0130 ==================== -->\r\n <main id=\"page-dj\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">DJ KAB\u0130N\u0130N\u0130 A\u00c7<\/h1>\r\n \r\n <div class=\"dj-deck\">\r\n <div class=\"turntable-wrapper\">\r\n <div class=\"turntable\">\r\n <div class=\"vinyl\" id=\"vinyl1\"><\/div>\r\n <div class=\"tonearm\" id=\"tonearm1\"><\/div>\r\n <button class=\"btn btn-purple\" style=\"position: absolute; bottom: -50px;\" onclick=\"toggleVinyl('vinyl1', 'tonearm1')\">\u25b6 \u00c7al \/ Durdur<\/button>\r\n <\/div>\r\n <div class=\"turntable\">\r\n <div class=\"vinyl\" id=\"vinyl2\"><\/div>\r\n <div class=\"tonearm\" id=\"tonearm2\"><\/div>\r\n <button class=\"btn btn-purple\" style=\"position: absolute; bottom: -50px;\" onclick=\"toggleVinyl('vinyl2', 'tonearm2')\">\u25b6 \u00c7al \/ Durdur<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 80px; text-align: center;\">\r\n <h3 style=\"margin-bottom: 20px;\">Miks Kontrolleri<\/h3>\r\n <div style=\"display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;\">\r\n <button class=\"btn btn-cyan\"><i class=\"fas fa-random\"><\/i> Kar\u0131\u015ft\u0131r<\/button>\r\n <button class=\"btn btn-pink\"><i class=\"fas fa-record-vinyl\"><\/i> Kaydet<\/button>\r\n <button class=\"btn btn-purple\"><i class=\"fas fa-share\"><\/i> Payla\u015f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== ETK\u0130NL\u0130KLER ==================== -->\r\n <main id=\"page-etkinlikler\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">ETK\u0130NL\u0130KLER<\/h1>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <button class=\"btn btn-purple\">Yakla\u015fan Etkinlikler<\/button>\r\n <button class=\"btn\" style=\"background: transparent; border: 1px solid #333; margin-left: 10px;\">Ge\u00e7mi\u015f Etkinlikler<\/button>\r\n <\/div>\r\n\r\n <div class=\"events-list\">\r\n <div class=\"event-row\">\r\n <div class=\"date-box\">\r\n <div class=\"date-day\">15<\/div>\r\n <div class=\"date-month\">TEM<\/div>\r\n <\/div>\r\n <div style=\"flex: 1;\">\r\n <h3 style=\"font-size: 1.5rem; margin-bottom: 5px;\">Yaz Festivali 2026<\/h3>\r\n <p style=\"color: #aaa;\">Kilyos Beach, \u0130stanbul \u2022 Elektronik \/ Pop<\/p>\r\n <\/div>\r\n <button class=\"btn btn-pink\">Bilet Al<\/button>\r\n <\/div>\r\n\r\n <div class=\"event-row\">\r\n <div class=\"date-box\">\r\n <div class=\"date-day\">22<\/div>\r\n <div class=\"date-month\">TEM<\/div>\r\n <\/div>\r\n <div style=\"flex: 1;\">\r\n <h3 style=\"font-size: 1.5rem; margin-bottom: 5px;\">Neon Geceler Konseri<\/h3>\r\n <p style=\"color: #aaa;\">Zorlu PSM, \u0130stanbul \u2022 Synthwave<\/p>\r\n <\/div>\r\n <button class=\"btn btn-pink\">Bilet Al<\/button>\r\n <\/div>\r\n\r\n <div class=\"event-row\">\r\n <div class=\"date-box\">\r\n <div class=\"date-day\">05<\/div>\r\n <div class=\"date-month\">A\u011eU<\/div>\r\n <\/div>\r\n <div style=\"flex: 1;\">\r\n <h3 style=\"font-size: 1.5rem; margin-bottom: 5px;\">DJ Battle Royale<\/h3>\r\n <p style=\"color: #aaa;\">K\u00fc\u00e7\u00fck\u00c7iftlik Park \u2022 Hip-Hop vs House<\/p>\r\n <\/div>\r\n <button class=\"btn btn-pink\">Bilet Al<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== HAKKIMIZDA ==================== -->\r\n <main id=\"page-hakkimizda\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">HAKKIMIZDA<\/h1>\r\n \r\n <div class=\"grid-2\" style=\"align-items: center; margin-bottom: 50px;\">\r\n <div>\r\n <h2 style=\"color: #00D9FF; margin-bottom: 20px;\">Hikayemiz<\/h2>\r\n <p style=\"line-height: 1.8; color: #ccc; margin-bottom: 20px;\">\r\n 2024 y\u0131l\u0131nda kurulan Ben You Tube, m\u00fczik \u00fcretimi ve payla\u015f\u0131m\u0131n\u0131 demokratikle\u015ftirmek amac\u0131yla yola \u00e7\u0131kt\u0131. \r\n Yapay zeka teknolojilerini sanatsal yarat\u0131c\u0131l\u0131kla birle\u015ftirerek, herkesin kendi m\u00fczi\u011fini \u00fcretmesini, \r\n yay\u0131nlamas\u0131n\u0131 ve bundan gelir elde etmesini sa\u011fl\u0131yoruz.\r\n <\/p>\r\n <p style=\"line-height: 1.8; color: #ccc;\">\r\n Vizyonumuz, m\u00fczi\u011fin s\u0131n\u0131rlar\u0131n\u0131 teknoloji ile geni\u015fletmek ve sanat\u00e7\u0131lar\u0131n hak ettikleri de\u011feri \r\n NFT ve Blockchain teknolojileriyle garanti alt\u0131na almakt\u0131r.\r\n <\/p>\r\n <\/div>\r\n <div style=\"background: linear-gradient(135deg, #7b2ff7, #ff0066); padding: 5px; border-radius: 20px;\">\r\n <div style=\"background: #000; padding: 40px; border-radius: 18px; text-align: center;\">\r\n <h3 style=\"font-size: 3rem; font-weight: bold;\">1M+<\/h3>\r\n <p>Kullan\u0131c\u0131<\/p>\r\n <div style=\"margin: 20px 0; height: 1px; background: #333;\"><\/div>\r\n <h3 style=\"font-size: 3rem; font-weight: bold;\">500K+<\/h3>\r\n <p>\u00dcretilen Par\u00e7a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 style=\"text-align: center; margin-bottom: 30px;\">Ekibimiz<\/h2>\r\n <div class=\"team-grid\">\r\n <div class=\"team-member\">\r\n <div class=\"avatar\"><img decoding=\"async\" src=\"https:\/\/api.dicebear.com\/7.x\/avataaars\/svg?seed=Felix\" alt=\"CEO\"><\/div>\r\n <h3>Erk A.<\/h3>\r\n <p style=\"color: #00D9FF;\">Kurucu & CEO<\/p>\r\n <\/div>\r\n <div class=\"team-member\">\r\n <div class=\"avatar\"><img decoding=\"async\" src=\"https:\/\/api.dicebear.com\/7.x\/avataaars\/svg?seed=Aneka\" alt=\"CTO\"><\/div>\r\n <h3>Ay\u015fe Y.<\/h3>\r\n <p style=\"color: #9D4EDD;\">Ba\u015f Teknoloji Sorumlusu<\/p>\r\n <\/div>\r\n <div class=\"team-member\">\r\n <div class=\"avatar\"><img decoding=\"async\" src=\"https:\/\/api.dicebear.com\/7.x\/avataaars\/svg?seed=Bob\" alt=\"Design\"><\/div>\r\n <h3>Mehmet K.<\/h3>\r\n <p style=\"color: #FF006E;\">Kreatif Direkt\u00f6r<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== DESTEK ==================== -->\r\n <main id=\"page-destek\" class=\"page-content\">\r\n <div class=\"page-container\">\r\n <h1 class=\"page-title\">DESTEK MERKEZ\u0130<\/h1>\r\n \r\n <div class=\"grid-2\">\r\n <div>\r\n <h2 style=\"margin-bottom: 30px;\">S\u0131k\u00e7a Sorulan Sorular<\/h2>\r\n \r\n <div style=\"margin-bottom: 20px;\">\r\n <h4 style=\"color: #fff; margin-bottom: 10px; cursor: pointer;\">\ud83c\udfb5 M\u00fczik olu\u015fturmak \u00fccretli mi?<\/h4>\r\n <p style=\"color: #aaa; padding-left: 20px; border-left: 2px solid #00D9FF;\">\r\n Temel \u00f6zellikler \u00fccretsizdir. Geli\u015fmi\u015f AI modelleri ve st\u00fcdyo ara\u00e7lar\u0131 i\u00e7in Pro veya Premium paketlerimizi inceleyebilirsiniz.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 20px;\">\r\n <h4 style=\"color: #fff; margin-bottom: 10px; cursor: pointer;\">\ud83d\udd12 Telif haklar\u0131 kime ait?<\/h4>\r\n <p style=\"color: #aaa; padding-left: 20px; border-left: 2px solid #9D4EDD;\">\r\n Olu\u015fturdu\u011funuz m\u00fczi\u011fin t\u00fcm telif haklar\u0131 size aittir. Premium kullan\u0131c\u0131lar ticari kullan\u0131m hakk\u0131na da sahiptir.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 20px;\">\r\n <h4 style=\"color: #fff; margin-bottom: 10px; cursor: pointer;\">\ud83d\udc8e NFT sistemi nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h4>\r\n <p style=\"color: #aaa; padding-left: 20px; border-left: 2px solid #FF006E;\">\r\n Par\u00e7an\u0131z\u0131 yay\u0131nlad\u0131\u011f\u0131n\u0131zda otomatik olarak NFT’ye d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr ve pazar yerimizde listelenir.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"contact-form\">\r\n <h3 style=\"margin-bottom: 20px;\">Bize Ula\u015f\u0131n<\/h3>\r\n <form onsubmit=\"event.preventDefault(); showNotification('success', 'Mesaj G\u00f6nderildi', 'En k\u0131sa s\u00fcrede size d\u00f6n\u00fc\u015f yapaca\u011f\u0131z.');\">\r\n <div class=\"form-group\" style=\"margin-bottom: 15px;\">\r\n <label class=\"form-label\">Konu<\/label>\r\n <select class=\"form-input\" style=\"background:#000; color:#fff;\">\r\n <option>Teknik Destek<\/option>\r\n <option>\u00d6deme Sorunu<\/option>\r\n <option>Telif Hakk\u0131<\/option>\r\n <option>Di\u011fer<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-bottom: 15px;\">\r\n <label class=\"form-label\">E-posta<\/label>\r\n <input type=\"email\" class=\"form-input\" placeholder=\"ornek@email.com\">\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-bottom: 20px;\">\r\n <label class=\"form-label\">Mesaj\u0131n\u0131z<\/label>\r\n <textarea class=\"form-input\" rows=\"5\" placeholder=\"Nas\u0131l yard\u0131mc\u0131 olabiliriz?\"><\/textarea>\r\n <\/div>\r\n <button class=\"btn btn-primary\" style=\"width: 100%;\">G\u00f6nder<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- FOOTER -->\r\n <footer>\r\n <p>\u00a9 2026 https:\/\/g.dev\/erkankilicaslan – T\u00fcm haklar\u0131 sakl\u0131d\u0131r.<\/p>\r\n <\/footer>\r\n\r\n <!-- AUTH MODAL -->\r\n <div class=\"auth-modal\" id=\"authModal\">\r\n <div class=\"auth-container\" id=\"authContainer\">\r\n <div style=\"text-align:right; margin-bottom:10px;\">\r\n <button id=\"modalClose\" style=\"background:none; border:none; color:#fff; font-size:20px; cursor:pointer;\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <\/div>\r\n\r\n <div class=\"auth-toggle-wrapper\">\r\n <button type=\"button\" class=\"auth-toggle-btn active\" id=\"loginTabBtn\">Giri\u015f Yap<\/button>\r\n <button type=\"button\" class=\"auth-toggle-btn\" id=\"signupTabBtn\">Kaydol<\/button>\r\n <\/div>\r\n\r\n <form class=\"auth-form\" id=\"authForm\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">E-posta<\/label>\r\n <input type=\"email\" class=\"form-input\" id=\"authEmail\" placeholder=\"E-posta adresiniz\" required>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label class=\"form-label\">\u015eifre<\/label>\r\n <input type=\"password\" class=\"form-input\" id=\"authPassword\" placeholder=\"\u015eifreniz\" required>\r\n <\/div>\r\n \r\n <div class=\"form-group\" id=\"confirmPasswordGroup\" style=\"display: none;\">\r\n <label class=\"form-label\">\u015eifre Tekrar\u0131<\/label>\r\n <input type=\"password\" class=\"form-input\" id=\"authPasswordConfirm\" placeholder=\"\u015eifrenizi tekrar girin\">\r\n <\/div>\r\n\r\n <div class=\"auth-options\">\r\n <div class=\"remember-me\" id=\"rememberMeWrapper\">\r\n <div class=\"checkbox\" id=\"rememberCheckbox\">\r\n <i class=\"fas fa-check\"><\/i>\r\n <\/div>\r\n <span>Beni hat\u0131rla<\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"forgot-password\">\u015eifremi unuttum<\/a>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn-primary\" id=\"authSubmitBtn\">Giri\u015f Yap<\/button>\r\n <\/form>\r\n\r\n <div class=\"auth-divider\">\r\n <span>veya<\/span>\r\n <\/div>\r\n\r\n <div class=\"social-login\">\r\n <button class=\"social-btn\" id=\"googleLoginBtn\" type=\"button\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" style=\"margin-right: 8px;\">\r\n <path fill=\"#4285F4\" d=\"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z\"\/>\r\n <path fill=\"#34A853\" d=\"M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z\"\/>\r\n <path fill=\"#FBBC05\" d=\"M3.964 10.707c-.18-.54-.282-1.117-.282-1.707s.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.039l3.007-2.332z\"\/>\r\n <path fill=\"#EA4335\" d=\"M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.961L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z\"\/>\r\n <\/svg>\r\n Google ile devam et\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"auth-switch\" id=\"authSwitch\">\r\n Hesab\u0131n\u0131z yok mu? <a href=\"#\" id=\"authSwitchLink\">Kay\u0131t olun<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NOTIFICATION -->\r\n <div class=\"notification\" id=\"notification\">\r\n <div class=\"notification-icon success\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <div class=\"notification-content\">\r\n <div class=\"notification-title\">Bildirim<\/div>\r\n <div class=\"notification-message\">Mesaj i\u00e7eri\u011fi<\/div>\r\n <\/div>\r\n <button class=\"notification-close\" id=\"notificationClose\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <\/div>\r\n\r\n <!-- AUDIO PLAYER -->\r\n <audio id=\"audioPlayer\" class=\"audio-player\" preload=\"auto\"><\/audio>\r\n\r\n <!-- MINIMAX FLOATING BALL -->\r\n <div id=\"minimax-floating-ball\">\r\n <div class=\"minimax-ball-content\">\r\n <div class=\"minimax-logo-wave\"><\/div>\r\n <span class=\"minimax-ball-text\">Created by MiniMax Agent<\/span>\r\n <\/div>\r\n <div class=\"minimax-close-icon\">\u00d7<\/div>\r\n <\/div>\r\n\r\n <!-- THREE.JS IMPORT MAP -->\r\n <script type=\"importmap\">\r\n { \"imports\": { \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.162.0\/build\/three.module.js\", \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.162.0\/examples\/jsm\/\" } }\r\n <\/script>\r\n\r\n <!-- THREE.JS ANIMATION -->\r\n <script type=\"module\">\r\n import * as THREE from 'three';\r\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\n import { EffectComposer } from 'three\/addons\/postprocessing\/EffectComposer.js';\r\n import { RenderPass } from 'three\/addons\/postprocessing\/RenderPass.js';\r\n import { UnrealBloomPass } from 'three\/addons\/postprocessing\/UnrealBloomPass.js';\r\n\r\n const container = document.getElementById('canvas-container');\r\n \r\n const scene = new THREE.Scene();\r\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(window.devicePixelRatio);\r\n renderer.setClearColor(0x000000, 0); \r\n container.appendChild(renderer.domElement);\r\n\r\n const controls = new OrbitControls(camera, renderer.domElement);\r\n controls.enableDamping = true;\r\n controls.dampingFactor = 0.05;\r\n controls.enableZoom = false;\r\n controls.autoRotate = true;\r\n controls.autoRotateSpeed = 0.5;\r\n \r\n camera.position.set(0, 2, 6);\r\n controls.target.set(0, 1, 0);\r\n controls.update();\r\n\r\n const composer = new EffectComposer(renderer);\r\n const renderPass = new RenderPass(scene, camera);\r\n composer.addPass(renderPass);\r\n const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);\r\n bloomPass.threshold = 0.1; bloomPass.strength = 2.5; bloomPass.radius = 0.8;\r\n composer.addPass(bloomPass);\r\n\r\n let effectState = 0;\r\n const clock = new THREE.Clock();\r\n let time = 0;\r\n\r\n const effectThemes = [\r\n { name: \"Lightning Storm\", effect: \"lightning\", outer: [new THREE.Color(0x00ffff), new THREE.Color(0x4169e1), new THREE.Color(0x9400d3)], outerEdge: new THREE.Color(0x87cefa), inner: [new THREE.Color(0xff1493), new THREE.Color(0xff4500), new THREE.Color(0xffd700)], innerEdge: new THREE.Color(0xffd700) },\r\n { name: \"Volcanic Shards\", effect: \"shards\", outer: [new THREE.Color(0xffd700), new THREE.Color(0xff4500), new THREE.Color(0x8b0000)], outerEdge: new THREE.Color(0xff8c00), inner: [new THREE.Color(0xffff00), new THREE.Color(0xff6347), new THREE.Color(0xdc143c)], innerEdge: new THREE.Color(0xffa500), shardColors: [new THREE.Color(0xff8c00), new THREE.Color(0xffa500), new THREE.Color(0xffff00)] },\r\n { name: \"Arctic Rings\", effect: \"rings\", outer: [new THREE.Color(0x00ffff), new THREE.Color(0x87ceeb), new THREE.Color(0xb0e0e6)], outerEdge: new THREE.Color(0x00ffff), inner: [new THREE.Color(0xffffff), new THREE.Color(0xe0ffff), new THREE.Color(0xf0f8ff)], innerEdge: new THREE.Color(0xffffff), ringColors: [new THREE.Color(0x00ffff), new THREE.Color(0x87ceeb), new THREE.Color(0xffffff)] },\r\n { name: \"Emerald Spiral\", effect: \"spiral\", outer: [new THREE.Color(0x00ff00), new THREE.Color(0x32cd32), new THREE.Color(0x228b22)], outerEdge: new THREE.Color(0x98fb98), inner: [new THREE.Color(0xadff2f), new THREE.Color(0x9acd32), new THREE.Color(0x6b8e23)], innerEdge: new THREE.Color(0xadff2f), spiralColors: [new THREE.Color(0x00ff00), new THREE.Color(0x32cd32), new THREE.Color(0xadff2f)] },\r\n { name: \"Solar Flare\", effect: \"flare\", outer: [new THREE.Color(0xffa500), new THREE.Color(0xff8c00), new THREE.Color(0xff7f50)], outerEdge: new THREE.Color(0xffd700), inner: [new THREE.Color(0xffff00), new THREE.Color(0xffd700), new THREE.Color(0xffa500)], innerEdge: new THREE.Color(0xffff00), flareColors: [new THREE.Color(0xff4500), new THREE.Color(0xff6600), new THREE.Color(0xffa500), new THREE.Color(0xffff00), new THREE.Color(0xffd700)] }\r\n ];\r\n\r\n const effectGroups = { lightning: null, shards: new THREE.Group(), rings: new THREE.Group(), spiral: new THREE.Group(), flare: new THREE.Group() };\r\n scene.add(effectGroups.shards, effectGroups.rings, effectGroups.spiral, effectGroups.flare);\r\n const effectData = { lightning: { isActive: false, startTime: 0, duration: 1.0 }, shards: { isActive: false }, rings: { isActive: false }, spiral: { isActive: false }, flare: { isActive: false } };\r\n\r\n function createParticlePyramid(height, baseSize, particleCount, innerPyramid = false) {\r\n const geometry = new THREE.BufferGeometry(); const positions = []; const particleColors = []; const originalColors = []; const twinkleFactors = []; const initialSizes = []; const baseParticleSize = innerPyramid ? 0.02 : 0.03;\r\n for (let i = 0; i < particleCount; i++) {\r\n const t = Math.random(); const u = Math.random(); const apex = { x: 0, y: height, z: 0 }; const base = [{ x: -baseSize, y: 0, z: -baseSize }, { x: baseSize, y: 0, z: -baseSize }, { x: baseSize, y: 0, z: baseSize }, { x: -baseSize, y: 0, z: baseSize }];\r\n const face = Math.floor(Math.random() * 4); const basePoint1 = base[face]; const basePoint2 = base[(face + 1) % 4];\r\n const x = (1 - t) * ((1 - u) * basePoint1.x + u * basePoint2.x) + t * apex.x; const y = (1 - t) * 0 + t * height; const z = (1 - t) * ((1 - u) * basePoint1.z + u * basePoint2.z) + t * apex.z;\r\n positions.push(x, y, z); particleColors.push(0, 0, 0); originalColors.push(new THREE.Color()); initialSizes.push(baseParticleSize);\r\n twinkleFactors.push(Math.random() < 0.2 ? Math.random() * 2 + 1.0 : 0);\r\n }\r\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.Float32BufferAttribute(particleColors, 3)); geometry.setAttribute('size', new THREE.Float32BufferAttribute(initialSizes, 1));\r\n const material = new THREE.PointsMaterial({ vertexColors: true, size: baseParticleSize, sizeAttenuation: true, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false });\r\n const particles = new THREE.Points(geometry, material); return { particles, originalColors, twinkleFactors, baseParticleSize };\r\n }\r\n function updatePyramidColors(pyramidData, newColors) {\r\n const { particles, originalColors } = pyramidData; const positions = particles.geometry.attributes.position; const colors = particles.geometry.attributes.color; const height = particles.parent.userData.height;\r\n for (let i = 0; i < positions.count; i++) { const y = positions.getY(i); const colorPos = y \/ height; const idx = Math.min(newColors.length - 2, Math.floor(colorPos * (newColors.length - 1))); const c1 = newColors[idx]; const c2 = newColors[idx + 1]; const mix = (colorPos * (newColors.length - 1)) % 1; const finalColor = new THREE.Color().lerpColors(c1, c2, mix); colors.setXYZ(i, finalColor.r, finalColor.g, finalColor.b); originalColors[i].copy(finalColor); } colors.needsUpdate = true;\r\n }\r\n function setPalette(theme) { updatePyramidColors(outerPyramidData, theme.outer); outerEdges.material.color.set(theme.outerEdge); updatePyramidColors(innerPyramidData, theme.inner); innerEdges.material.color.set(theme.innerEdge); }\r\n function createPyramidEdges(height, baseSize, color) {\r\n const points = []; const apex = new THREE.Vector3(0, height, 0); const verts = [new THREE.Vector3(-baseSize, 0, -baseSize), new THREE.Vector3(baseSize, 0, -baseSize), new THREE.Vector3(baseSize, 0, baseSize), new THREE.Vector3(-baseSize, 0, baseSize)];\r\n for (let i = 0; i < 4; i++) { points.push(apex.x, apex.y, apex.z, verts[i].x, verts[i].y, verts[i].z); points.push(verts[i].x, verts[i].y, verts[i].z, verts[(i + 1) % 4].x, verts[(i + 1) % 4].y, verts[(i + 1) % 4].z); }\r\n const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute(points, 3));\r\n const mat = new THREE.LineBasicMaterial({ color: color, linewidth: 2, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false });\r\n return new THREE.LineSegments(geo, mat);\r\n }\r\n const pyramidGroup = new THREE.Group(); scene.add(pyramidGroup);\r\n const outerPyramidData = createParticlePyramid(2.5, 1.8, 5000); const outerEdges = createPyramidEdges(2.5, 1.8, new THREE.Color()); const outerGroup = new THREE.Group(); outerGroup.userData.height = 2.5; outerGroup.add(outerPyramidData.particles);\r\n const innerPyramidData = createParticlePyramid(1.5, 1.0, 3000, true); const innerEdges = createPyramidEdges(1.5, 1.0, new THREE.Color()); const innerGroup = new THREE.Group(); innerGroup.userData.height = 1.5; innerGroup.add(innerPyramidData.particles);\r\n pyramidGroup.add(outerGroup, outerEdges, innerGroup, innerEdges);\r\n\r\n const lightningMaterial = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, uLife: { value: 0 }, uFlicker: { value: 1.0 } }, vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: `uniform float uTime, uLife, uFlicker; varying vec2 vUv; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453); } float noise(vec2 st) { vec2 i = floor(st), f = fract(st); float a = random(i), b = random(i + vec2(1,0)), c = random(i + vec2(0,1)), d = random(i + vec2(1,1)); vec2 u = f*f*(3.0-2.0*f); return mix(a,b,u.x) + (c-a)*u.y*(1.0-u.x) + (d-b)*u.x*u.y; } void main() { float core = smoothstep(0.4, 0.0, abs(vUv.x - 0.5)); core += noise(vec2(vUv.y*40.0, uTime*2.0)) * noise(vec2(vUv.y*25.0, uTime*1.5)) * 0.8; vec3 color = mix(vec3(0.1,0.5,1.0), vec3(0.6,0.2,1.0), core*0.7); color = mix(color, vec3(1.0), pow(core, 2.0)*0.9); float lifeAlpha = smoothstep(0.0, 0.2, uLife) * (1.0 - smoothstep(0.6, 1.0, uLife)); float intense = sin(uLife * 3.14159 * 3.0) * 0.5 + 0.5; float alpha = pow(1.0 - abs(vUv.x - 0.5)*2.0, 2.0) * lifeAlpha * uFlicker * intense; gl_FragColor = vec4(color, alpha); }`, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false });\r\n\r\n function triggerSpecificEffect(index) {\r\n if (Object.values(effectData).some(d => d.isActive)) return;\r\n effectState = index;\r\n const theme = effectThemes[effectState];\r\n setPalette(theme);\r\n switch (theme.effect) {\r\n case 'lightning': if (effectGroups.lightning) { effectGroups.lightning.traverse(c => { if (c.isMesh) c.geometry.dispose(); }); pyramidGroup.remove(effectGroups.lightning); } effectGroups.lightning = createEnhancedLightningBolt(); pyramidGroup.add(effectGroups.lightning); effectData.lightning.isActive = true; effectData.lightning.startTime = clock.getElapsedTime(); bloomPass.strength = 4.5; setTimeout(() => bloomPass.strength = 2.5, 400); break;\r\n case 'shards': triggerShardBurst(theme.shardColors); bloomPass.strength = 5.5; setTimeout(() => bloomPass.strength = 2.5, 600); break;\r\n case 'rings': triggerRings(theme.ringColors); bloomPass.strength = 4.0; setTimeout(() => bloomPass.strength = 2.5, 500); break;\r\n case 'spiral': triggerSpiral(theme.spiralColors); bloomPass.strength = 3.5; setTimeout(() => bloomPass.strength = 2.5, 700); break;\r\n case 'flare': triggerFlare(theme.flareColors); bloomPass.strength = 5.5; setTimeout(() => bloomPass.strength = 2.5, 600); break;\r\n }\r\n }\r\n \r\n const vipBtn = document.getElementById('vip-btn');\r\n const premiumBtn = document.getElementById('premium-btn');\r\n const proBtn = document.getElementById('pro-btn');\r\n const standardBtn = document.getElementById('standard-btn');\r\n const liveBtn = document.getElementById('live-btn');\r\n\r\n if(vipBtn) vipBtn.addEventListener('click', (e) => { e.preventDefault(); triggerSpecificEffect(1); });\r\n if(premiumBtn) premiumBtn.addEventListener('click', (e) => { e.preventDefault(); triggerSpecificEffect(2); });\r\n if(proBtn) proBtn.addEventListener('click', (e) => { e.preventDefault(); triggerSpecificEffect(3); });\r\n if(standardBtn) standardBtn.addEventListener('click', (e) => { e.preventDefault(); triggerSpecificEffect(4); });\r\n if(liveBtn) liveBtn.addEventListener('click', (e) => { e.preventDefault(); triggerSpecificEffect(0); });\r\n\r\n function triggerShardBurst(colors) { if (effectGroups.shards.children.length) return; effectData.shards.isActive = true; for (let i = 0; i < 300; i++) { const geo = new THREE.ConeGeometry(0.015, 0.5, 4); const col = colors[Math.floor(Math.random() * colors.length)]; const mat = new THREE.MeshBasicMaterial({ color: col, blending: THREE.AdditiveBlending, transparent: true, opacity: 1.0 }); const shard = new THREE.Mesh(geo, mat); const origin = new THREE.Vector3(0, 1.5, 0); shard.position.copy(origin); const dir = new THREE.Vector3((Math.random()-0.5),(Math.random()-0.5),(Math.random()-0.5)).normalize(); shard.lookAt(dir.clone().add(origin)); shard.rotateX(Math.PI\/2); shard.userData.velocity = dir.multiplyScalar(0.08 + Math.random() * 0.12); shard.userData.life = 1.0; effectGroups.shards.add(shard); } }\r\n function triggerRings(colors) { if (effectGroups.rings.children.length) return; effectData.rings.isActive = true; for (let r = 0; r < 5; r++) { const ringGeo = new THREE.RingGeometry(0.5 + r*0.3, 0.6 + r*0.3, 32); const col = colors[r % colors.length]; const mat = new THREE.MeshBasicMaterial({ color: col, transparent: true, opacity: 1.0, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); const ring = new THREE.Mesh(ringGeo, mat); ring.position.set(0,1.5,0); ring.rotation.x = Math.PI\/2; ring.userData.speed = 0.03 + r*0.02; ring.userData.life = 1.0; effectGroups.rings.add(ring); } }\r\n function triggerSpiral(colors) { if (effectGroups.spiral.children.length) return; effectData.spiral.isActive = true; for (let i = 0; i < 200; i++) { const geo = new THREE.SphereGeometry(0.02, 8, 6); const col = colors[i % colors.length]; const mat = new THREE.MeshBasicMaterial({ color: col, blending: THREE.AdditiveBlending, transparent: true, opacity: 1.0 }); const p = new THREE.Mesh(geo, mat); const angle = (i\/200)*Math.PI*8; const radius = 0.1 + (i\/200)*2; p.position.set(Math.cos(angle)*radius, 1.5 + (i\/200)*2, Math.sin(angle)*radius); p.userData.angle = angle; p.userData.radius = radius; p.userData.life = 1.0; p.userData.speed = 0.05; effectGroups.spiral.add(p); } }\r\n function triggerFlare(colors) { if (effectGroups.flare.children.length) return; effectData.flare.isActive = true; for (let i = 0; i < 200; i++) { const geo = new THREE.PlaneGeometry(0.08 + Math.random()*0.04, 0.4 + Math.random()*0.3); const col = colors[Math.floor(Math.random()*colors.length)]; const mat = new THREE.MeshBasicMaterial({ color: col, transparent: true, opacity: 1.0, blending: THREE.AdditiveBlending }); const f = new THREE.Mesh(geo, mat); f.position.set(0,2.5,0); const dir = new THREE.Vector3((Math.random()-0.5)*2, -Math.random()*0.8, (Math.random()-0.5)*2).normalize(); f.lookAt(dir.clone().add(f.position)); f.userData.velocity = dir.multiplyScalar(0.05 + Math.random()*0.10); f.userData.life = 1.0; f.userData.initialVelocity = f.userData.velocity.clone(); effectGroups.flare.add(f); } }\r\n\r\n function applySparkle(pData, t) { const { particles, originalColors, twinkleFactors, baseParticleSize } = pData; const colors = particles.geometry.attributes.color; const sizes = particles.geometry.attributes.size; for (let i = 0; i < colors.count; i++) { if (twinkleFactors[i] > 0) { const pulse = Math.pow(Math.abs(Math.sin(twinkleFactors[i]*t + i*0.1)), 10); const brightness = 1.0 + 2.0*pulse; const sizePulse = 1.0 + 3.0*pulse; const oc = originalColors[i]; colors.setXYZ(i, oc.r*brightness, oc.g*brightness, oc.b*brightness); sizes.setX(i, baseParticleSize*sizePulse); } } colors.needsUpdate = true; sizes.needsUpdate = true; }\r\n function animateLightning(totalTime) { const lt = totalTime - effectData.lightning.startTime; const life = lt \/ effectData.lightning.duration; effectGroups.lightning.traverse(c => { if (c.isMesh && c.material.uniforms) { c.material.uniforms.uTime.value = totalTime; c.material.uniforms.uLife.value = life; c.material.uniforms.uFlicker.value = Math.random()>0.05?1.0:0.0; } }); if (life >= 1.0) { effectData.lightning.isActive = false; effectGroups.lightning.visible = false; } }\r\n function animateShards() { if (!effectGroups.shards.children.length) { effectData.shards.isActive = false; return; } for (let i = effectGroups.shards.children.length - 1; i >= 0; i--) { const s = effectGroups.shards.children[i]; s.position.add(s.userData.velocity); s.userData.life -= 0.015; s.material.opacity = s.userData.life; if (s.userData.life <= 0) { s.geometry.dispose(); s.material.dispose(); effectGroups.shards.remove(s); } } }\r\n function animateRings() { if (!effectGroups.rings.children.length) { effectData.rings.isActive = false; return; } for (let i = effectGroups.rings.children.length - 1; i >= 0; i--) { const r = effectGroups.rings.children[i]; r.scale.x += r.userData.speed; r.scale.y += r.userData.speed; r.userData.life -= 0.01; r.material.opacity = r.userData.life; if (r.userData.life <= 0) { r.geometry.dispose(); r.material.dispose(); effectGroups.rings.remove(r); } } }\r\n function animateSpiral() { if (!effectGroups.spiral.children.length) { effectData.spiral.isActive = false; return; } for (let i = effectGroups.spiral.children.length - 1; i >= 0; i--) { const p = effectGroups.spiral.children[i]; p.userData.angle += p.userData.speed; p.userData.radius += 0.02; p.position.x = Math.cos(p.userData.angle)*p.userData.radius; p.position.z = Math.sin(p.userData.angle)*p.userData.radius; p.position.y += 0.03; p.userData.life -= 0.008; p.material.opacity = p.userData.life; if (p.userData.life <= 0) { p.geometry.dispose(); p.material.dispose(); effectGroups.spiral.remove(p); } } }\r\n function animateFlare() { if (!effectGroups.flare.children.length) { effectData.flare.isActive = false; return; } for (let i = effectGroups.flare.children.length - 1; i >= 0; i--) { const f = effectGroups.flare.children[i]; f.position.add(f.userData.velocity); f.userData.velocity.y -= 0.0008; f.userData.velocity.x += (Math.random()-0.5)*0.001; f.userData.life -= 0.010; const flick = 0.85 + Math.sin(time*15 + i*0.5)*0.15; f.material.opacity = f.userData.life * flick; if (f.userData.life <= 0) { f.geometry.dispose(); f.material.dispose(); effectGroups.flare.remove(f); } } }\r\n\r\n window.addEventListener('resize', () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w \/ h; camera.updateProjectionMatrix(); renderer.setSize(w, h); composer.setSize(w, h); });\r\n setPalette(effectThemes[0]);\r\n function createCylinder(start, end, radius) { const dir = new THREE.Vector3().subVectors(end, start); const orient = new THREE.Matrix4(); const rot = new THREE.Matrix4(); orient.lookAt(start, end, new THREE.Object3D().up); rot.makeRotationX(Math.PI*0.5); orient.multiply(rot); const geo = new THREE.CylinderGeometry(radius, radius, dir.length(), 8, 1, true); geo.applyMatrix4(orient); geo.translate((start.x+end.x)\/2, (start.y+end.y)\/2, (start.z+end.z)\/2); return geo; }\r\n function createEnhancedLightningBolt() { const group = new THREE.Group(); const origin = new THREE.Vector3(0, 2.8, 0); function branch(start, dir, energy, depth) { if (energy < 0.3 || depth > 15) return; const len = (Math.random()*0.7+0.3)*energy*0.6; const end = start.clone().add(dir.clone().multiplyScalar(len)); const rad = 0.005 + (energy\/120) + Math.random()*0.005; const seg = createCylinder(start, end, rad); const mesh = new THREE.Mesh(seg, lightningMaterial.clone()); group.add(mesh); const nextE = energy*(0.85+Math.random()*0.1); const nextDir = dir.clone().add(new THREE.Vector3((Math.random()-0.5)*4.5,(Math.random()-0.5)*2.5,(Math.random()-0.5)*4.5)).normalize(); branch(end, nextDir, nextE, depth+1); if (Math.random()<0.6 && depth>0) { const bDir = new THREE.Vector3((Math.random()-0.5)*6.0,(Math.random()-0.5)*4.0,(Math.random()-0.5)*6.0).normalize(); branch(end, bDir, nextE*0.7, depth+1); } } const n = Math.floor(Math.random()*4)+7; for (let i = 0; i < n; i++) { const d = new THREE.Vector3((Math.random()-0.5)*3.5, Math.random()*0.7+0.3, (Math.random()-0.5)*3.5).normalize(); branch(origin, d, 7, 0); } return group; }\r\n function animate() { requestAnimationFrame(animate); const et = clock.getElapsedTime(); const dt = clock.getDelta(); time += dt; pyramidGroup.rotation.y += 0.005; innerGroup.rotation.y -= 0.015; applySparkle(outerPyramidData, time); applySparkle(innerPyramidData, time); if (effectData.lightning.isActive) animateLightning(et); if (effectGroups.shards.isActive) animateShards(); if (effectGroups.rings.isActive) animateRings(); if (effectGroups.spiral.isActive) animateSpiral(); if (effectGroups.flare.isActive) animateFlare(); controls.update(); composer.render(); } animate();\r\n <\/script>\r\n\r\n <!-- MAIN JAVASCRIPT -->\r\n <script>\r\n \/\/ ===== NAVIGATION SYSTEM =====\r\n function navigateTo(pageId) {\r\n \/\/ Hide all pages\r\n document.querySelectorAll('.page-content').forEach(page => {\r\n page.classList.remove('active');\r\n });\r\n \r\n \/\/ Show target page\r\n const targetPage = document.getElementById('page-' + pageId);\r\n if (targetPage) {\r\n targetPage.classList.add('active');\r\n }\r\n \r\n \/\/ Update menu active state\r\n document.querySelectorAll('.nav-link').forEach(link => {\r\n link.classList.remove('active');\r\n if (link.getAttribute('data-page') === pageId) {\r\n link.classList.add('active');\r\n }\r\n });\r\n \r\n \/\/ Scroll to top\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n \/\/ Menu click handlers\r\n document.querySelectorAll('.nav-link').forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const pageId = this.getAttribute('data-page');\r\n navigateTo(pageId);\r\n });\r\n });\r\n\r\n \/\/ ===== AUDIO PLAYER =====\r\n \/\/ === GOOGLE DRIVE PLAYLIST - AKT\u0130F ID'LER ===\r\n const driveFileIds = [\r\n \"1G3aye1L3xoDNWntoHO8J4ycKnxBp7hP3\",\r\n \"17q565t1NcnpP5pdrKSnkuAf8ngn3Ynmt\",\r\n \"1toST_gEEPRv085IemY-u8StcJPq2OBfK\",\r\n \"1OojvrOf1vqcJ8wDg3uuzjMmeYycQ8WwN\",\r\n \"14awyLkH90189-wtayQ63351uW3yCy2hN\",\r\n \"1xexeax12JC-8AACEV58ltv8vng9Rut0C\",\r\n \"17iP8zKJGF6evNS_4CcZY9_jDMtUpCHG_\",\r\n \"1E04gVoE1sgnkoMxPsI5WazYYEZLlqdvi\",\r\n \"1HsKKXHvozJ6R3Cn4O54Y-pRkas5-dGSo\",\r\n \"1Ns1-f20nDCn8mLeMD_cQqLnSbmQ7AbTA\",\r\n \"1f_vJMD-qvgTS4sPo4Cz_ixAbFIwChz1b\",\r\n \"1vy1yBouoY1lQMxos3o6RtwnamyC3p-yT\",\r\n \"1rRrm6relAqqdqzWjzqp3CwVpDMi8HTpI\",\r\n \"1KbPlBf-DLtNkneU0a9Dh2agogX0Ia-oH\",\r\n \"1FxCQ-EKoKnCM8_B88CZX63KfkteyfXv2\",\r\n \"1n5-TqaLAlU0FyTvBWTKbOeMmmSQ8zKgz\",\r\n \"1a8pulFMWNWRRc3ei_-uenYJ6MgCvyqK9\",\r\n \"1d_XNkYXdO9OM2NEsgR1XcVAOQg_1Mxjq\",\r\n \"1ynR1ZlF5X-swYuAlPdGt_N19cBqzCvzL\",\r\n \"1SKTESh0gARDvF7QMAr3sUbYvShYla5CR\",\r\n \"1WUnwhF2rV5ufo9zBeT2CK-aaydqLnVIu\",\r\n \"1KOkQALAlyKdxY1T9HE4DLKC3wcHydV45\",\r\n \"1CJ_IU79LIfLj3f4geNOIXRE-QoxvQIOP\",\r\n \"1W1DdrOGEz5Ou4bR6DVHLpirI-L4J56ou\",\r\n \"18fuwT0qbjM2XCwd3L8CUSuBOZRMBA--q\",\r\n \"1zfzLyjpGFYbps-DG0nvNYV234g_RmhFq\",\r\n \"1Pq2ip9A4aV672C1YjUP1F5Tf9VvOkxQV\",\r\n \"1WQoSYbDi3mK1eWmVbTyoztBGP4YgFUU-\",\r\n \"1rhiMSW92B3CmPGczLmW7pntLxzikXg_R\",\r\n \"1udg6uMfKN8pY4boIi7d_kItGA4EyGmKu\",\r\n \"1O8lWSOi5I2mRlFhjsq3OnN5f2R1fnM1j\",\r\n \"1L9e4vK16kKX5yphxLMMRCzyX4vEr2pI3\",\r\n \"1cDAvMaZ4wVMFblYYbaF4Zzdl867x9ywA\",\r\n \"1AxZPz0dDFAi6uatdtw2vzpU0ccgupr1H\"\r\n ];\r\n\r\n \/\/ YEN\u0130: Daha g\u00fcvenilir Google Drive proxy URL'si\r\n \/\/ Bu URL format\u0131 CORS sorunlar\u0131n\u0131 a\u015far ve direkt stream sa\u011flar\r\n const playlist = driveFileIds.map(id => ({ \r\n url: `https:\/\/drive.google.com\/uc?export=download&id=${id}`,\r\n id: id \r\n }));\r\n\r\n const audioPlayer = document.getElementById('audioPlayer');\r\n const volumeTrack = document.getElementById('volumeTrack');\r\n const volumeFill = document.getElementById('volumeFill');\r\n const volumeThumb = document.getElementById('volumeThumb');\r\n const cd = document.querySelector('.cd');\r\n const waves = document.querySelectorAll('.wave');\r\n \r\n let isPlaying = false;\r\n let currentSongIndex = -1;\r\n let isDragging = false;\r\n let playedIndices = [];\r\n let autoplayAttempted = false;\r\n\r\n \/\/ BA\u015eLANGI\u00c7 AYARLARI: Ses %20\r\n audioPlayer.volume = 0.2;\r\n \r\n function updateVolumeUI(percentage) {\r\n volumeFill.style.width = percentage + '%';\r\n volumeThumb.style.left = percentage + '%';\r\n }\r\n\r\n function loadRandomSong() {\r\n if (playlist.length === 0) return;\r\n \r\n if (playedIndices.length >= playlist.length) {\r\n playedIndices = [];\r\n }\r\n \r\n let availableIndices = playlist.map((_, i) => i).filter(i => !playedIndices.includes(i));\r\n let newIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];\r\n \r\n currentSongIndex = newIndex;\r\n playedIndices.push(newIndex);\r\n \r\n const song = playlist[currentSongIndex];\r\n audioPlayer.src = song.url;\r\n \r\n console.log(\"Y\u00fckleniyor:\", song.id);\r\n \r\n if (isPlaying) {\r\n const playPromise = audioPlayer.play();\r\n if (playPromise !== undefined) {\r\n playPromise.catch(e => {\r\n console.error(\"\u00c7alma hatas\u0131:\", e);\r\n setTimeout(loadRandomSong, 2000);\r\n });\r\n }\r\n }\r\n }\r\n\r\n function playRadio() {\r\n if (playlist.length === 0) return;\r\n \r\n isPlaying = true;\r\n \r\n if (currentSongIndex === -1) {\r\n loadRandomSong();\r\n } else {\r\n const playPromise = audioPlayer.play();\r\n if (playPromise !== undefined) {\r\n playPromise.catch(e => {\r\n console.log(\"Autoplay engellendi, kullan\u0131c\u0131 etkile\u015fimi bekleniyor\");\r\n isPlaying = false;\r\n });\r\n }\r\n }\r\n \r\n cd.style.animationPlayState = 'running';\r\n waves.forEach(wave => { wave.style.animationPlayState = 'running'; });\r\n }\r\n\r\n function pauseRadio() {\r\n isPlaying = false;\r\n audioPlayer.pause();\r\n cd.style.animationPlayState = 'paused';\r\n waves.forEach(wave => { wave.style.animationPlayState = 'paused'; });\r\n }\r\n \r\n \/\/ SES KONTROL\u00dc - G\u00fcncellenmi\u015f\r\n function updateVolumeFromSlider(percentage) {\r\n const clampedPercentage = Math.max(0, Math.min(100, percentage));\r\n audioPlayer.volume = clampedPercentage \/ 100;\r\n updateVolumeUI(clampedPercentage);\r\n\r\n if (clampedPercentage == 0) {\r\n pauseRadio();\r\n } else {\r\n if (!isPlaying) {\r\n playRadio();\r\n }\r\n }\r\n }\r\n\r\n volumeTrack.addEventListener('click', (e) => {\r\n const rect = volumeTrack.getBoundingClientRect();\r\n const percentage = ((e.clientX - rect.left) \/ rect.width) * 100;\r\n updateVolumeFromSlider(percentage);\r\n });\r\n\r\n volumeThumb.addEventListener('mousedown', (e) => {\r\n isDragging = true;\r\n e.preventDefault();\r\n });\r\n\r\n document.addEventListener('mousemove', (e) => {\r\n if (!isDragging) return;\r\n const rect = volumeTrack.getBoundingClientRect();\r\n const percentage = ((e.clientX - rect.left) \/ rect.width) * 100;\r\n updateVolumeFromSlider(percentage);\r\n });\r\n\r\n document.addEventListener('mouseup', () => {\r\n isDragging = false;\r\n });\r\n\r\n \/\/ \u015eark\u0131 bitince sonraki\r\n audioPlayer.addEventListener('ended', () => {\r\n if (isPlaying) {\r\n loadRandomSong();\r\n }\r\n });\r\n\r\n \/\/ Hata durumunda sonraki \u015fark\u0131ya ge\u00e7\r\n audioPlayer.addEventListener('error', (e) => {\r\n console.error(\"\u015eark\u0131 y\u00fcklenemedi:\", e);\r\n if (playlist.length > 1) {\r\n setTimeout(loadRandomSong, 1500);\r\n }\r\n });\r\n\r\n \/\/ Sayfa Y\u00dcKLEND\u0130\u011e\u0130NDE OTOMAT\u0130K BA\u015eLAT (Sesli)\r\n \/\/ Not: Taray\u0131c\u0131lar muted olmayan autoplay'i engelleyebilir, \r\n \/\/ bu y\u00fczden hem load hem de ilk t\u0131klamada deneyelim\r\n \r\n window.addEventListener('load', () => {\r\n \/\/ Ses %20 olarak ayarlanm\u0131\u015ft\u0131, UI'\u0131 g\u00fcncelle\r\n updateVolumeUI(20);\r\n \r\n \/\/ Otomatik ba\u015flatma dene\r\n setTimeout(() => {\r\n if (!autoplayAttempted) {\r\n autoplayAttempted = true;\r\n loadRandomSong();\r\n playRadio();\r\n }\r\n }, 1000);\r\n });\r\n\r\n \/\/ Yedek: Kullan\u0131c\u0131 etkile\u015fimi ile ba\u015flatma (taray\u0131c\u0131 engellerse)\r\n document.addEventListener('click', () => {\r\n if (!isPlaying && currentSongIndex === -1) {\r\n playRadio();\r\n }\r\n }, { once: true });\r\n\r\n \/\/ ===== DJ VINYL TOGGLE =====\r\n function toggleVinyl(vinylId, tonearmId) {\r\n const vinyl = document.getElementById(vinylId);\r\n const tonearm = document.getElementById(tonearmId);\r\n \r\n if (vinyl && tonearm) {\r\n if (vinyl.classList.contains('playing')) {\r\n vinyl.classList.remove('playing');\r\n tonearm.classList.remove('active');\r\n } else {\r\n vinyl.classList.add('playing');\r\n tonearm.classList.add('active');\r\n }\r\n }\r\n }\r\n\r\n \/\/ ===== GENRE PLAY =====\r\n function playGenre(genre) {\r\n showNotification('success', '\u00c7al\u0131n\u0131yor', genre.toUpperCase() + ' m\u00fczik \u00e7al\u0131n\u0131yor...');\r\n }\r\n\r\n \/\/ ===== AUTH MODAL =====\r\n const authModal = document.getElementById('authModal');\r\n const authContainer = document.getElementById('authContainer');\r\n const authForm = document.getElementById('authForm');\r\n const confirmPasswordGroup = document.getElementById('confirmPasswordGroup');\r\n const authEmail = document.getElementById('authEmail');\r\n const authPassword = document.getElementById('authPassword');\r\n const authSubmitBtn = document.getElementById('authSubmitBtn');\r\n const loginTabBtn = document.getElementById('loginTabBtn');\r\n const signupTabBtn = document.getElementById('signupTabBtn');\r\n const rememberCheckbox = document.getElementById('rememberCheckbox');\r\n const rememberMeWrapper = document.getElementById('rememberMeWrapper');\r\n const modalClose = document.getElementById('modalClose');\r\n const logoutBtn = document.getElementById('logoutBtn');\r\n const loginTriggers = document.querySelectorAll('.role-login-btn');\r\n\r\n let isLogin = true;\r\n let currentRole = 'standard';\r\n\r\n \/\/ Login triggers\r\n loginTriggers.forEach(trigger => {\r\n trigger.addEventListener('click', (e) => {\r\n const role = trigger.getAttribute('data-role');\r\n setLoginMode(role);\r\n authModal.classList.add('active');\r\n });\r\n });\r\n\r\n if (modalClose) {\r\n modalClose.addEventListener('click', () => {\r\n authModal.classList.remove('active');\r\n });\r\n }\r\n\r\n if (authModal) {\r\n authModal.addEventListener('click', (e) => {\r\n if (e.target === authModal) {\r\n authModal.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n function setLoginMode(role) {\r\n currentRole = role;\r\n authContainer.classList.remove('vip-mode', 'premium-mode', 'pro-mode', 'standard-mode');\r\n \r\n if (role === 'vip') {\r\n authContainer.classList.add('vip-mode');\r\n } else if (role === 'premium') {\r\n authContainer.classList.add('premium-mode');\r\n } else if (role === 'pro') {\r\n authContainer.classList.add('pro-mode');\r\n }\r\n }\r\n\r\n function updateAuthModal() {\r\n if (isLogin) {\r\n confirmPasswordGroup.style.display = 'none';\r\n if (rememberMeWrapper) rememberMeWrapper.style.visibility = 'visible';\r\n authSubmitBtn.textContent = 'Giri\u015f Yap';\r\n if (loginTabBtn) loginTabBtn.classList.add('active');\r\n if (signupTabBtn) signupTabBtn.classList.remove('active');\r\n } else {\r\n confirmPasswordGroup.style.display = 'block';\r\n if (rememberMeWrapper) rememberMeWrapper.style.visibility = 'hidden';\r\n authSubmitBtn.textContent = 'Kay\u0131t Ol';\r\n if (signupTabBtn) signupTabBtn.classList.add('active');\r\n if (loginTabBtn) loginTabBtn.classList.remove('active');\r\n }\r\n }\r\n\r\n if (loginTabBtn) {\r\n loginTabBtn.addEventListener('click', () => { if (!isLogin) { isLogin = true; updateAuthModal(); } });\r\n }\r\n if (signupTabBtn) {\r\n signupTabBtn.addEventListener('click', () => { if (isLogin) { isLogin = false; updateAuthModal(); } });\r\n }\r\n\r\n if (rememberMeWrapper) {\r\n rememberMeWrapper.addEventListener('click', () => { \r\n if (rememberCheckbox) rememberCheckbox.classList.toggle('active'); \r\n });\r\n }\r\n\r\n if (authForm) {\r\n authForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n const email = authEmail ? authEmail.value.trim() : '';\r\n \r\n let roleTitle = \"\";\r\n switch(currentRole) {\r\n case 'vip': roleTitle = \"VIP \u00dcYEL\u0130\u011e\u0130\"; break;\r\n case 'premium': roleTitle = \"PREMIUM \u00dcYEL\u0130\u011e\u0130\"; break;\r\n case 'pro': roleTitle = \"PROFESYONEL KULLANICI\"; break;\r\n default: roleTitle = \"STANDART KULLANICI\";\r\n }\r\n\r\n showNotification('success', 'Giri\u015f Ba\u015far\u0131l\u0131', `${roleTitle} ile giri\u015f yap\u0131ld\u0131.`);\r\n \r\n loginTriggers.forEach(btn => btn.style.display = 'none');\r\n if (logoutBtn) logoutBtn.style.display = 'inline-flex';\r\n \r\n authModal.classList.remove('active');\r\n authForm.reset();\r\n });\r\n }\r\n\r\n if (logoutBtn) {\r\n logoutBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n loginTriggers.forEach(btn => btn.style.display = 'inline-flex');\r\n logoutBtn.style.display = 'none';\r\n authContainer.classList.remove('vip-mode', 'premium-mode', 'pro-mode');\r\n showNotification('success', '\u00c7\u0131k\u0131\u015f Yap\u0131ld\u0131', 'G\u00fcvenli bir \u015fekilde \u00e7\u0131k\u0131\u015f yapt\u0131n\u0131z.');\r\n });\r\n }\r\n\r\n \/\/ ===== NOTIFICATION =====\r\n const notification = document.getElementById('notification');\r\n const notificationClose = document.getElementById('notificationClose');\r\n\r\n function showNotification(type, title, message) {\r\n const notifTitle = notification.querySelector('.notification-title');\r\n const notifMessage = notification.querySelector('.notification-message');\r\n const notifIcon = notification.querySelector('.notification-icon');\r\n\r\n if (notifTitle) notifTitle.textContent = title;\r\n if (notifMessage) notifMessage.textContent = message;\r\n\r\n if (notifIcon) {\r\n notifIcon.className = `notification-icon ${type}`;\r\n notifIcon.innerHTML = type === 'success'\r\n ? '<i class=\"fas fa-check-circle\"><\/i>'\r\n : '<i class=\"fas fa-exclamation-circle\"><\/i>';\r\n }\r\n\r\n if (notification) notification.classList.add('show');\r\n\r\n setTimeout(() => {\r\n if (notification) notification.classList.remove('show');\r\n }, 5000);\r\n }\r\n\r\n if (notificationClose) {\r\n notificationClose.addEventListener('click', () => {\r\n if (notification) notification.classList.remove('show');\r\n });\r\n }\r\n\r\n \/\/ ===== MINIMAX FLOATING BALL =====\r\n function initFloatingBall() {\r\n const ball = document.getElementById('minimax-floating-ball');\r\n if (!ball) return;\r\n\r\n ball.style.opacity = '0';\r\n ball.style.transform = 'translateY(20px)';\r\n\r\n setTimeout(() => {\r\n ball.style.opacity = '1';\r\n ball.style.transform = 'translateY(0)';\r\n }, 500);\r\n\r\n const ballContent = ball.querySelector('.minimax-ball-content');\r\n if (ballContent) {\r\n ballContent.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n window.open('https:\/\/agent.minimax.io\/', '_blank');\r\n ball.style.transform = 'scale(0.95)';\r\n setTimeout(() => {\r\n ball.style.transform = 'scale(1)';\r\n }, 100);\r\n });\r\n }\r\n\r\n const closeIcon = ball.querySelector('.minimax-close-icon');\r\n if (closeIcon) {\r\n closeIcon.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n ball.style.opacity = '0';\r\n ball.style.transform = 'translateY(20px)';\r\n setTimeout(() => {\r\n ball.style.display = 'none';\r\n }, 300);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Initialize on DOM ready\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initFloatingBall();\r\n \r\n \/\/ Scroll animations\r\n const cards = document.querySelectorAll('.card, .feature-card, .pricing-card, .colored-card');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n cards.forEach(card => {\r\n card.style.opacity = '0';\r\n card.style.transform = 'translateY(30px)';\r\n card.style.transition = 'all 0.6s ease-out';\r\n observer.observe(card);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>","protected":false},"excerpt":{"rendered":"<p>WordPress’e ho\u015f geldiniz. Bu ilk g\u00f6nderiniz. D\u00fczenleyin veya silin, ard\u0131ndan yazmaya ba\u015flay\u0131n! BEN YOU TUBE – Yapay Zeka ile M\u00fczik Yarat\u0131n ANA SAYFA KE\u015eFET SANATCI OL DJ KAB\u0130N\u0130N\u0130 A\u00c7 ETK\u0130NL\u0130KLER HAKKIMIZDA DESTEK V\u0130P PROF\u0130L PREMIUM PROF\u0130L PROFOSYONELLER STANDARTLAR CANLI AKI\u015eLAR \u00c7IKI\u015e YAP \u00c7IKI\u015e BEN YOU TUBE COM TR ERK AI YAPAY ZEKASI \u0130LE M\u00dcZ\u0130K YARATIMI […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","jnews_video_option_group":[[]],"override":[{"template":"8","parallax":"1","layout":"no-sidebar-narrow","sidebar":"single-post","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"bottom","share_float_style":"share-normal","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_reading_time":"0","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","number_popup_post":"1","show_author_box":"0","show_inline_post_related":"0"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_override_bookmark_settings":{"override_bookmark_button":"0","override_show_bookmark_button":"0"},"jnews_paywall_metabox":{"paragraph_limit":"2","enable_premium_post":"0","enable_free_post":"0","override_paragraph_limit":"0","enable_preview_post":"0","enable_preview_video":"0"},"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"jnews_post_split":{"post_split":[{"template":"1","tag":"h2","numbering":"asc","mode":"normal","first":"0","enable_toc":"0","toc_type":"normal"}]},"jnews_podcast_option":[],"jnews_podcast_series":[],"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"jnews-series":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":2,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/476"}],"wp:attachment":[{"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/tags?post=1"},{"taxonomy":"jnews-series","embeddable":true,"href":"https:\/\/benyoutube.com.tr\/index.php\/wp-json\/wp\/v2\/jnews-series?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}