{"id":989309,"date":"2026-10-30T18:05:51","date_gmt":"2026-10-30T18:05:51","guid":{"rendered":"https:\/\/croncodestudio.com\/en\/?p=989309"},"modified":"2026-10-30T18:36:17","modified_gmt":"2026-10-30T18:36:17","slug":"spyliephone-detective","status":"publish","type":"post","link":"https:\/\/croncodestudio.com\/en\/spyliephone-detective\/","title":{"rendered":"SPYLIE: Phone Detective"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"989309\" class=\"elementor elementor-989309\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eaa78c0 e-flex e-con-boxed e-con e-parent\" data-id=\"eaa78c0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a50d0c elementor-widget elementor-widget-spacer\" data-id=\"8a50d0c\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a35c55f e-flex e-con-boxed e-con e-parent\" data-id=\"a35c55f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cd68ad elementor-widget elementor-widget-html\" data-id=\"7cd68ad\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Spylie \u2014 Phone Detective | Croncode Studio<\/title>\r\n\r\n  <!-- Google Fonts: Outfit & Plus Jakarta Sans -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- Tabler Icons -->\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\r\n\r\n  <!-- INLINE CSS -->\r\n  <style>\r\n    \/* ==========================================\r\n       1. SIFIRLAMA VE DE\u011e\u0130\u015eKENLER\r\n       ========================================== *\/\r\n    :root {\r\n      --primary-pink: #ff2e93;\r\n      --pink-light: #ff66b2;\r\n      --pink-gradient: linear-gradient(135deg, #ff2e93 0%, #d81b60 100%);\r\n      --bg-light: #fcf8fa;\r\n      --text-dark: #0f172a;\r\n      --text-muted: #64748b;\r\n      --card-bg: rgba(255, 255, 255, 0.75);\r\n      --border-pink: rgba(255, 46, 147, 0.15);\r\n      --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\r\n      --font-heading: 'Outfit', sans-serif;\r\n    }\r\n\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n    }\r\n\r\n    body {\r\n      font-family: var(--font-body);\r\n      background-color: var(--bg-light);\r\n      color: var(--text-dark);\r\n      line-height: 1.6;\r\n      overflow-x: hidden;\r\n      position: relative;\r\n    }\r\n\r\n    \/* ==========================================\r\n       2. GENEL D\u00dcZEN VE I\u015eIK EFEKTLER\u0130 (GLOWS)\r\n       ========================================== *\/\r\n    .container {\r\n      max-width: 1500px !important; \/* 1200px'den 1500px'e \u00e7\u0131kararak yanlara a\u00e7t\u0131k *\/\r\n      margin: 0 auto !important;\r\n      padding: 0 40px !important; \r\n    }\r\n\r\n    .glow-bg {\r\n      position: fixed;\r\n      border-radius: 50%;\r\n      filter: blur(120px);\r\n      z-index: -1;\r\n      pointer-events: none;\r\n      opacity: 0.45;\r\n      transition: transform 0.2s ease-out;\r\n    }\r\n\r\n    .glow-1 {\r\n      top: -100px;\r\n      right: -100px;\r\n      width: 600px;\r\n      height: 600px;\r\n      background: radial-gradient(circle, rgba(255, 46, 147, 0.25) 0%, rgba(255, 255, 255, 0) 70%);\r\n    }\r\n\r\n    .glow-2 {\r\n      bottom: 10%;\r\n      left: -150px;\r\n      width: 700px;\r\n      height: 700px;\r\n      background: radial-gradient(circle, rgba(216, 27, 96, 0.2) 0%, rgba(255, 255, 255, 0) 70%);\r\n    }\r\n\r\n    .gradient-text {\r\n      background: var(--pink-gradient);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n    }\r\n\r\n    .sub-heading {\r\n      font-family: var(--font-heading);\r\n      color: var(--primary-pink);\r\n      font-size: 0.85rem;\r\n      font-weight: 700;\r\n      letter-spacing: 1.5px;\r\n      text-transform: uppercase;\r\n      display: block;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .section-header {\r\n      text-align: center;\r\n      max-width: 650px;\r\n      margin: 0 auto 60px auto;\r\n    }\r\n\r\n    .section-header h2 {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.25rem;\r\n      font-weight: 800;\r\n      letter-spacing: -0.5px;\r\n    }\r\n\r\n    \/* ==========================================\r\n       3. BUTONLAR & \u0130KONLAR\r\n       ========================================== *\/\r\n    .btn-hero-primary {\r\n      background: var(--pink-gradient);\r\n      color: #ffffff;\r\n      text-decoration: none;\r\n      padding: 14px 28px;\r\n      border-radius: 16px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      font-weight: 600;\r\n      box-shadow: 0 10px 25px rgba(255, 46, 147, 0.35);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .btn-hero-primary:hover {\r\n      transform: translateY(-3px);\r\n      box-shadow: 0 15px 30px rgba(255, 46, 147, 0.45);\r\n    }\r\n\r\n    .btn-app-icon {\r\n      width: 34px;\r\n      height: 34px;\r\n      border-radius: 8px;\r\n      object-fit: cover;\r\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .btn-text {\r\n      display: flex;\r\n      flex-direction: column;\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .btn-text small {\r\n      font-size: 0.75rem;\r\n      opacity: 0.9;\r\n      font-weight: 500;\r\n    }\r\n\r\n    .btn-text strong {\r\n      font-size: 1rem;\r\n      font-weight: 700;\r\n    }\r\n\r\n    \/* ==========================================\r\n       4. HERO B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    .hero {\r\n      padding: 0 0 80px 0 !important;\r\n    }\r\n\r\n    .hero-container {\r\n      display: grid !important;\r\n      grid-template-columns: 1.1fr 0.9fr !important;\r\n      gap: 100px !important; \/* Yaz\u0131 ile telefon aras\u0131ndaki mesafeyi a\u00e7t\u0131k *\/\r\n      align-items: center !important;\r\n    }\r\n\r\n    .badge-pill {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: rgba(255, 46, 147, 0.08);\r\n      border: 1px solid var(--border-pink);\r\n      color: var(--primary-pink);\r\n      padding: 6px 16px;\r\n      border-radius: 30px;\r\n      font-size: 0.85rem;\r\n      font-weight: 600;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .badge-pill .dot {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: var(--primary-pink);\r\n      border-radius: 50%;\r\n      display: inline-block;\r\n      box-shadow: 0 0 8px var(--primary-pink);\r\n    }\r\n\r\n    .hero-content h1 {\r\n      font-family: var(--font-heading);\r\n      font-size: 3.25rem;\r\n      line-height: 1.15;\r\n      font-weight: 800;\r\n      margin-bottom: 20px;\r\n      letter-spacing: -1px;\r\n    }\r\n\r\n    .hero-desc {\r\n      font-size: 1.125rem;\r\n      color: var(--text-muted);\r\n      margin-bottom: 36px;\r\n      max-width: 520px;\r\n    }\r\n\r\n    .hero-actions {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 24px;\r\n      margin-bottom: 40px;\r\n    }\r\n\r\n    .rating-badge .stars {\r\n      color: #ffb800;\r\n      font-size: 0.95rem;\r\n    }\r\n\r\n    .rating-score {\r\n      font-size: 0.9rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n    }\r\n\r\n    .rating-score span {\r\n      font-weight: 400;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    .hero-features-list {\r\n      display: flex;\r\n      gap: 20px;\r\n      font-size: 0.85rem;\r\n      font-weight: 600;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    .hero-features-list i {\r\n      color: var(--primary-pink);\r\n    }\r\n\r\n    \/* HERO TELEFON MAKET\u0130 *\/\r\n    .hero-mockup-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n\r\n    .interactive-phone-container {\r\n      position: relative;\r\n      width: 290px;\r\n    }\r\n\r\n    .iphone-frame {\r\n      width: 100%;\r\n      height: 580px;\r\n      background: #000000;\r\n      border-radius: 48px;\r\n      padding: 12px;\r\n      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 0 4px #e2e8f0;\r\n      position: relative;\r\n      overflow: hidden;\r\n      animation: floatPhone 6s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes floatPhone {\r\n      0%, 100% { transform: translateY(0px); }\r\n      50% { transform: translateY(-12px); }\r\n    }\r\n\r\n    .iphone-notch {\r\n      position: absolute;\r\n      top: 18px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 90px;\r\n      height: 24px;\r\n      background: #000000;\r\n      border-radius: 20px;\r\n      z-index: 10;\r\n    }\r\n\r\n   .iphone-screen-img {\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      max-height: 100% !important;\r\n      object-fit: cover !important;\r\n      display: block !important;\r\n      border-radius: 38px !important;\r\n      transition: opacity 0.2s ease;\r\n      image-rendering: -webkit-optimize-contrast;\r\n    }\r\n\r\n    .phone-app-tabs {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 8px;\r\n      margin-top: 20px;\r\n      background: rgba(255, 255, 255, 0.8);\r\n      padding: 6px;\r\n      border-radius: 30px;\r\n      border: 1px solid var(--border-pink);\r\n      backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .app-tab {\r\n      background: transparent !important;\r\n      border: none !important;\r\n      padding: 8px 14px !important;\r\n      border-radius: 20px !important;\r\n      font-family: var(--font-body) !important;\r\n      font-size: 0.8rem !important;\r\n      font-weight: 600 !important;\r\n      color: var(--text-muted) !important;\r\n      cursor: pointer !important;\r\n      transition: all 0.2s ease !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      gap: 6px !important;\r\n      outline: none !important;\r\n      box-shadow: none !important;\r\n      margin: 0 !important;\r\n    }\r\n\r\n    .app-tab.active {\r\n      background: var(--pink-gradient) !important;\r\n      color: #ffffff !important;\r\n      box-shadow: 0 4px 12px rgba(255, 46, 147, 0.3) !important;\r\n      border: none !important;\r\n    }\r\n\r\n    \/* ==========================================\r\n       5. SHOWCASE (EKRAN G\u00d6R\u00dcNT\u00dcLER\u0130) B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    .showcase {\r\n      padding: 80px 0;\r\n    }\r\n\r\n    .showcase-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 32px;\r\n    }\r\n\r\n    .showcase-card {\r\n      background: var(--card-bg);\r\n      border: 1px solid var(--border-pink);\r\n      border-radius: 24px;\r\n      padding: 32px 24px;\r\n      text-align: center;\r\n      backdrop-filter: blur(12px);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .showcase-card:hover {\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n   .phone-mockup-mini {\r\n      width: 180px;\r\n      height: 360px;\r\n      margin: 0 auto 24px auto;\r\n      background: #000000;\r\n      border-radius: 32px;\r\n      padding: 8px;\r\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);\r\n      overflow: hidden !important; \/* Elementor ta\u015fmalar\u0131n\u0131 kesin olarak gizle *\/\r\n    }\r\n\r\n    .showcase-img {\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n      max-height: 100% !important;\r\n      object-fit: cover !important;\r\n      display: block !important;\r\n      border-radius: 24px !important;\r\n      image-rendering: -webkit-optimize-contrast;\r\n    }\r\n\r\n    .showcase-card h3 {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.25rem;\r\n      font-weight: 700;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .showcase-card p {\r\n      font-size: 0.9rem;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    \/* ==========================================\r\n       6. PASSCODE (\u015e\u0130FRE \u00c7\u00d6ZME) B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    .passcode-section {\r\n      padding: 60px 0 80px 0;\r\n    }\r\n\r\n    .passcode-card {\r\n      background: rgba(255, 255, 255, 0.85);\r\n      border: 1px solid var(--border-pink);\r\n      border-radius: 32px;\r\n      padding: 50px 30px;\r\n      max-width: 500px;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n      box-shadow: 0 20px 50px rgba(255, 46, 147, 0.08);\r\n      backdrop-filter: blur(16px);\r\n    }\r\n\r\n    .passcode-header h2 {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.85rem;\r\n      font-weight: 800;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .passcode-hint {\r\n      font-size: 0.95rem;\r\n      color: var(--primary-pink);\r\n      font-weight: 600;\r\n      margin-bottom: 28px;\r\n    }\r\n\r\n    .pin-display {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 16px;\r\n      margin-bottom: 30px;\r\n    }\r\n\r\n    .pin-dot {\r\n      width: 16px;\r\n      height: 16px;\r\n      border-radius: 50%;\r\n      border: 2px solid var(--primary-pink);\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .pin-dot.filled {\r\n      background-color: var(--primary-pink);\r\n      box-shadow: 0 0 10px var(--primary-pink);\r\n    }\r\n\r\n    .numpad {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 16px;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .numpad button {\r\n      width: 64px;\r\n      height: 64px;\r\n      border-radius: 50%;\r\n      border: 1px solid rgba(0, 0, 0, 0.05);\r\n      background: #ffffff;\r\n      font-family: var(--font-heading);\r\n      font-size: 1.35rem;\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      cursor: pointer;\r\n      transition: all 0.15s ease;\r\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .numpad button:active {\r\n      transform: scale(0.92);\r\n      background: rgba(255, 46, 147, 0.1);\r\n    }\r\n\r\n    .numpad .btn-action {\r\n      font-size: 1.1rem;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    .numpad .btn-enter {\r\n      background: rgba(255, 46, 147, 0.1);\r\n      color: var(--primary-pink);\r\n    }\r\n\r\n    .passcode-success {\r\n      animation: fadeIn 0.4s ease;\r\n    }\r\n\r\n    .success-icon {\r\n      width: 64px;\r\n      height: 64px;\r\n      background: var(--pink-gradient);\r\n      color: #ffffff;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.75rem;\r\n      margin: 0 auto 16px auto;\r\n      box-shadow: 0 10px 25px rgba(255, 46, 147, 0.4);\r\n    }\r\n\r\n    .passcode-success h3 {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.5rem;\r\n      font-weight: 800;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .passcode-success p {\r\n      font-size: 0.9rem;\r\n      color: var(--text-muted);\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    \/* Hata Titremesi *\/\r\n    .shake {\r\n      animation: shakeAnim 0.4s ease;\r\n    }\r\n\r\n    @keyframes shakeAnim {\r\n      0%, 100% { transform: translateX(0); }\r\n      20%, 60% { transform: translateX(-8px); }\r\n      40%, 80% { transform: translateX(8px); }\r\n    }\r\n\r\n    \/* ==========================================\r\n       7. \u00d6ZELL\u0130KLER (FEATURES) B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    .features {\r\n      padding: 80px 0;\r\n    }\r\n\r\n    .features-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 24px;\r\n    }\r\n\r\n    .glass-card {\r\n      background: var(--card-bg);\r\n      border: 1px solid var(--border-pink);\r\n      border-radius: 20px;\r\n      padding: 28px 20px;\r\n      backdrop-filter: blur(12px);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .glass-card:hover {\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .card-icon {\r\n      width: 48px;\r\n      height: 48px;\r\n      border-radius: 12px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.5rem;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .color-purple { background: rgba(147, 51, 234, 0.1); color: #9333ea; }\r\n    .color-blue { background: rgba(37, 99, 235, 0.1); color: #2563eb; }\r\n    .color-amber { background: rgba(217, 119, 6, 0.1); color: #d97706; }\r\n    .color-rose { background: rgba(225, 29, 72, 0.1); color: #e11d48; }\r\n\r\n    .glass-card h3 {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.1rem;\r\n      font-weight: 700;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .glass-card p {\r\n      font-size: 0.875rem;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    \/* ==========================================\r\n       8. YORUMLAR (REVIEWS) B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    .reviews {\r\n      padding: 80px 0;\r\n    }\r\n\r\n    .reviews-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 24px;\r\n    }\r\n\r\n    .review-card {\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    .review-stars {\r\n      color: #ffb800;\r\n      margin-bottom: 12px;\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .review-card p {\r\n      font-style: italic;\r\n      font-size: 0.95rem;\r\n      color: var(--text-dark);\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .reviewer-info strong {\r\n      display: block;\r\n      font-size: 0.9rem;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .reviewer-info small {\r\n      color: var(--text-muted);\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    \/* ==========================================\r\n       9. CTA BANNER B\u00d6L\u00dcM\u00dc\r\n       ========================================== *\/\r\n    \r\n    .cta-section {\r\n      padding: 80px 0 0 0 !important;\r\n    }\r\n\r\n    .cta-box {\r\n      background: var(--pink-gradient);\r\n      border-radius: 32px;\r\n      padding: 60px 40px;\r\n      text-align: center;\r\n      color: #ffffff;\r\n      position: relative;\r\n      overflow: hidden;\r\n      box-shadow: 0 20px 50px rgba(255, 46, 147, 0.3);\r\n    }\r\n\r\n    .cta-box h2 {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.5rem;\r\n      font-weight: 800;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .cta-box p {\r\n      font-size: 1.1rem;\r\n      opacity: 0.9;\r\n      margin-bottom: 32px;\r\n      max-width: 500px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    .btn-cta {\r\n      background: #ffffff;\r\n      color: var(--primary-pink);\r\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .btn-cta:hover {\r\n      background: #ffffff;\r\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);\r\n    }\r\n\r\n    \/* ==========================================\r\n       10. AN\u0130MASYONLAR (SCROLL REVEAL)\r\n       ========================================== *\/\r\n    .reveal {\r\n      opacity: 0;\r\n      transform: translateY(30px);\r\n      transition: opacity 0.8s ease, transform 0.8s ease;\r\n    }\r\n\r\n    .reveal.active {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    \/* ==========================================\r\n       11. MOB\u0130L UYUMLULUK (RESPONSIVE)\r\n       ========================================== *\/\r\n    @media (max-width: 992px) {\r\n      .hero-container {\r\n        grid-template-columns: 1fr;\r\n        text-align: center;\r\n      }\r\n\r\n      .hero-desc {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n      }\r\n\r\n      .hero-actions {\r\n        justify-content: center;\r\n      }\r\n\r\n      .hero-features-list {\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n      }\r\n\r\n      .showcase-grid,\r\n      .features-grid,\r\n      .reviews-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .hero-content h1 {\r\n        font-size: 2.25rem;\r\n      }\r\n\r\n      .showcase-grid,\r\n      .features-grid,\r\n      .reviews-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .cta-box {\r\n        padding: 40px 20px;\r\n      }\r\n\r\n      .cta-box h2 {\r\n        font-size: 1.85rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- BACKGROUND GLOWS -->\r\n  <div class=\"glow-bg glow-1\"><\/div>\r\n  <div class=\"glow-bg glow-2\"><\/div>\r\n\r\n  <!-- HERO SECTION -->\r\n  <section class=\"hero\">\r\n    <div class=\"container hero-container\">\r\n      <div class=\"hero-content\">\r\n        <div class=\"badge-pill\">\r\n          <span class=\"dot\"><\/span> Croncode Studio Original\r\n        <\/div>\r\n        <h1>Every Message Has a Clue. <span class=\"gradient-text\">Uncover the Truth.<\/span><\/h1>\r\n        <p class=\"hero-desc\">\r\n          Spylie is an interactive detective game where you investigate hidden chats, deleted photos, notes, and call logs on a simulated smartphone.\r\n        <\/p>\r\n\r\n        <div class=\"hero-actions\">\r\n          <a href=\"https:\/\/apps.apple.com\/tr\/app\/spylie-telefon-dedektif\/id6787791601?l=tr\" target=\"_blank\" class=\"btn-hero-primary\">\r\n            <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/app-icon.webp\" alt=\"Spylie Logo\" class=\"btn-app-icon\">\r\n            <div class=\"btn-text\">\r\n              <small>Free Download<\/small>\r\n              <strong>Get on App Store<\/strong>\r\n            <\/div>\r\n          <\/a>\r\n          <div class=\"rating-badge\">\r\n            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n            <div class=\"rating-score\">5.0 \/ 5.0 <span>(7+ Ratings)<\/span><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hero-features-list\">\r\n          <span><i class=\"ti ti-circle-check-filled\"><\/i> iOS 17+ Compatible<\/span>\r\n          <span><i class=\"ti ti-circle-check-filled\"><\/i> English & Turkish<\/span>\r\n          <span><i class=\"ti ti-circle-check-filled\"><\/i> Ad-Free Experience<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- HERO IPHONE MOCKUP (INTERACTIVE) -->\r\n      <div class=\"hero-mockup-wrapper\">\r\n        <div class=\"interactive-phone-container\">\r\n          <div class=\"iphone-frame\">\r\n            <div class=\"iphone-notch\"><\/div>\r\n            <img decoding=\"async\" id=\"interactive-screen\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen1.png\" alt=\"Spylie Game Screen\" class=\"iphone-screen-img\">\r\n          <\/div>\r\n\r\n          <div class=\"phone-app-tabs\">\r\n            <button class=\"app-tab active\" onclick=\"switchPhoneScreen('https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen1.png', this)\">\r\n              <i class=\"ti ti-message-dots\"><\/i> Messages\r\n            <\/button>\r\n            <button class=\"app-tab\" onclick=\"switchPhoneScreen('https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen2.png', this)\">\r\n              <i class=\"ti ti-photo\"><\/i> Gallery\r\n            <\/button>\r\n            <button class=\"app-tab\" onclick=\"switchPhoneScreen('https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen3.png', this)\">\r\n              <i class=\"ti ti-notes\"><\/i> Notes\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SHOWCASE SECTION -->\r\n  <section id=\"showcase\" class=\"showcase\">\r\n    <div class=\"container\">\r\n      <div class=\"section-header reveal\">\r\n        <span class=\"sub-heading\">IN-GAME INTERFACE<\/span>\r\n        <h2>Detailed Phone Investigation Experience<\/h2>\r\n        <p>Follow clues and deepen your investigation as if browsing a real smartphone.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"showcase-grid\">\r\n        <div class=\"showcase-card reveal\">\r\n          <div class=\"phone-mockup-mini\">\r\n            <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen1.png\" alt=\"Analyze Chats\" class=\"showcase-img\">\r\n          <\/div>\r\n          <h3>Analyze Chats<\/h3>\r\n          <p>Read suspects' messaging and deleted chat history.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"showcase-card reveal\">\r\n          <div class=\"phone-mockup-mini\">\r\n            <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen2.png\" alt=\"Uncover Gallery\" class=\"showcase-img\">\r\n          <\/div>\r\n          <h3>Uncover Gallery<\/h3>\r\n          <p>Spot details in locked photos recovered from the trash bin.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"showcase-card reveal\">\r\n          <div class=\"phone-mockup-mini\">\r\n            <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/screen3.png\" alt=\"Test Your Knowledge\" class=\"showcase-img\">\r\n          <\/div>\r\n          <h3>Test Your Knowledge<\/h3>\r\n          <p>Answer Question Gate questions correctly to close the case.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- MINI PASSCODE GAME SECTION -->\r\n  <section class=\"passcode-section\">\r\n    <div class=\"container\">\r\n      <div class=\"passcode-card reveal\">\r\n        <div class=\"passcode-header\">\r\n          <span class=\"sub-heading\">INTERACTIVE DETECTIVE<\/span>\r\n          <h2>Decode the Locked Case<\/h2>\r\n          <p class=\"passcode-hint\">\ud83d\udca1 First Clue: Passcode <strong>1984<\/strong><\/p>\r\n        <\/div>\r\n\r\n        <div class=\"passcode-widget\" id=\"passcodeWidget\">\r\n          <div class=\"pin-display\">\r\n            <span class=\"pin-dot\"><\/span>\r\n            <span class=\"pin-dot\"><\/span>\r\n            <span class=\"pin-dot\"><\/span>\r\n            <span class=\"pin-dot\"><\/span>\r\n          <\/div>\r\n\r\n          <div class=\"numpad\">\r\n            <button onclick=\"pressKey('1')\">1<\/button>\r\n            <button onclick=\"pressKey('2')\">2<\/button>\r\n            <button onclick=\"pressKey('3')\">3<\/button>\r\n            <button onclick=\"pressKey('4')\">4<\/button>\r\n            <button onclick=\"pressKey('5')\">5<\/button>\r\n            <button onclick=\"pressKey('6')\">6<\/button>\r\n            <button onclick=\"pressKey('7')\">7<\/button>\r\n            <button onclick=\"pressKey('8')\">8<\/button>\r\n            <button onclick=\"pressKey('9')\">9<\/button>\r\n            <button onclick=\"clearPin()\" class=\"btn-action\">C<\/button>\r\n            <button onclick=\"pressKey('0')\">0<\/button>\r\n            <button onclick=\"checkPin()\" class=\"btn-action btn-enter\"><i class=\"ti ti-lock\"><\/i><\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"passcode-success\" id=\"passcodeSuccess\" style=\"display: none;\">\r\n          <div class=\"success-icon\"><i class=\"ti ti-lock-open\"><\/i><\/div>\r\n          <h3>CASE UNLOCKED!<\/h3>\r\n          <p>\"Hidden chat archive and locked photos decoded. Download the app for real detective work.\"<\/p>\r\n          <a href=\"https:\/\/apps.apple.com\/tr\/app\/spylie-telefon-dedektif\/id6787791601?l=tr\" target=\"_blank\" class=\"btn-hero-primary\">\r\n            <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/app-icon.webp\" alt=\"Spylie Logo\" class=\"btn-app-icon\">\r\n            <div class=\"btn-text\">\r\n              <small>Continue Investigation<\/small>\r\n              <strong>Download on App Store<\/strong>\r\n            <\/div>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FEATURES SECTION -->\r\n  <section id=\"features\" class=\"features\">\r\n    <div class=\"container\">\r\n      <div class=\"section-header reveal\">\r\n        <span class=\"sub-heading\">KEY FEATURES<\/span>\r\n        <h2>What Makes Spylie Stand Out<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"features-grid\">\r\n        <div class=\"glass-card reveal\">\r\n          <div class=\"card-icon color-purple\"><i class=\"ti ti-device-mobile\"><\/i><\/div>\r\n          <h3>Simulated Phone<\/h3>\r\n          <p>Interactive fictional phone complete with messages, gallery, call logs, notes, and calendar.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"glass-card reveal\">\r\n          <div class=\"card-icon color-blue\"><i class=\"ti ti-masks-theater\"><\/i><\/div>\r\n          <h3>Cinematic Cases<\/h3>\r\n          <p>Immersive original mystery scenarios starting with engaging Case Intros.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"glass-card reveal\">\r\n          <div class=\"card-icon color-amber\"><i class=\"ti ti-bulb\"><\/i><\/div>\r\n          <h3>Smart Hint System<\/h3>\r\n          <p>Dynamic hints that steer you in the right direction without stalling your investigation.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"glass-card reveal\">\r\n          <div class=\"card-icon color-rose\"><i class=\"ti ti-shield-lock\"><\/i><\/div>\r\n          <h3>Privacy First<\/h3>\r\n          <p>All characters and events are entirely fictional. No access to real device data.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- REVIEWS SECTION -->\r\n  <section id=\"reviews\" class=\"reviews\">\r\n    <div class=\"container\">\r\n      <div class=\"section-header reveal\">\r\n        <span class=\"sub-heading\">PLAYER REVIEWS<\/span>\r\n        <h2>What Players Say<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"reviews-grid\">\r\n        <div class=\"glass-card review-card reveal\">\r\n          <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n          <p>\"It felt like I was living a real story rather than playing a game. Absolutely amazing!\"<\/p>\r\n          <div class=\"reviewer-info\">\r\n            <strong>Kutlamaz<\/strong>\r\n            <small>App Store User<\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"glass-card review-card reveal\">\r\n          <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n          <p>\"Felt like Patrick Jane while investigating hehehe. Loved it!\"<\/p>\r\n          <div class=\"reviewer-info\">\r\n            <strong>Ben sadece bir patatesim<\/strong>\r\n            <small>App Store User<\/small>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"glass-card review-card reveal\">\r\n          <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n          <p>\"Super addictive! Detective game lovers shouldn't miss this one.\"<\/p>\r\n          <div class=\"reviewer-info\">\r\n            <strong>Semih Tali<\/strong>\r\n            <small>App Store User<\/small>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CTA BANNER -->\r\n  <section class=\"cta-section\">\r\n    <div class=\"container\">\r\n      <div class=\"cta-box reveal\">\r\n        <div class=\"cta-glow\"><\/div>\r\n        <h2>Start Solving Cases Today<\/h2>\r\n        <p>Download Spylie on your iOS device now and step into the mystery.<\/p>\r\n        <a href=\"https:\/\/apps.apple.com\/tr\/app\/spylie-telefon-dedektif\/id6787791601?l=tr\" target=\"_blank\" class=\"btn-hero-primary btn-cta\">\r\n          <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/10\/app-icon.webp\" alt=\"Spylie Logo\" class=\"btn-app-icon\">\r\n          <div class=\"btn-text\">\r\n            <small>Free on App Store<\/small>\r\n            <strong>Download Now<\/strong>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- T\u00dcM \u0130NTERAKT\u0130F S\u0130STEMLER -->\r\n  <script>\r\n    let soundEnabled = false;\r\n    let audioCtx = null;\r\n\r\n    function getAudioContext() {\r\n      if (!audioCtx) {\r\n        const AudioContextClass = window.AudioContext || window.webkitAudioContext;\r\n        if (AudioContextClass) {\r\n          audioCtx = new AudioContextClass();\r\n        }\r\n      }\r\n      if (audioCtx && audioCtx.state === 'suspended') {\r\n        audioCtx.resume();\r\n      }\r\n      return audioCtx;\r\n    }\r\n\r\n    function playKeySound() {\r\n      if (!soundEnabled) return;\r\n      try {\r\n        const ctx = getAudioContext();\r\n        if (!ctx) return;\r\n        const osc = ctx.createOscillator();\r\n        const gain = ctx.createGain();\r\n\r\n        osc.type = 'sine';\r\n        osc.frequency.setValueAtTime(1100, ctx.currentTime);\r\n        gain.gain.setValueAtTime(0.12, ctx.currentTime);\r\n        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);\r\n\r\n        osc.connect(gain);\r\n        gain.connect(ctx.destination);\r\n        osc.start();\r\n        osc.stop(ctx.currentTime + 0.05);\r\n      } catch(e) {}\r\n    }\r\n\r\n    function playUnlockSound() {\r\n      if (!soundEnabled) return;\r\n      try {\r\n        const ctx = getAudioContext();\r\n        if (!ctx) return;\r\n        const notes = [523.25, 659.25, 783.99, 1046.50];\r\n\r\n        notes.forEach((freq, idx) => {\r\n          const osc = ctx.createOscillator();\r\n          const gain = ctx.createGain();\r\n\r\n          osc.type = 'triangle';\r\n          osc.frequency.setValueAtTime(freq, ctx.currentTime + idx * 0.07);\r\n          gain.gain.setValueAtTime(0.2, ctx.currentTime + idx * 0.07);\r\n          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + idx * 0.07 + 0.25);\r\n\r\n          osc.connect(gain);\r\n          gain.connect(ctx.destination);\r\n          osc.start(ctx.currentTime + idx * 0.07);\r\n          osc.stop(ctx.currentTime + idx * 0.07 + 0.25);\r\n        });\r\n      } catch(e) {}\r\n    }\r\n\r\n    function playErrorSound() {\r\n      if (!soundEnabled) return;\r\n      try {\r\n        const ctx = getAudioContext();\r\n        if (!ctx) return;\r\n        const osc = ctx.createOscillator();\r\n        const gain = ctx.createGain();\r\n\r\n        osc.type = 'sawtooth';\r\n        osc.frequency.setValueAtTime(160, ctx.currentTime);\r\n        gain.gain.setValueAtTime(0.2, ctx.currentTime);\r\n        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);\r\n\r\n        osc.connect(gain);\r\n        gain.connect(ctx.destination);\r\n        osc.start();\r\n        osc.stop(ctx.currentTime + 0.25);\r\n      } catch(e) {}\r\n    }\r\n\r\n    window.switchPhoneScreen = function(imgSrc, btnElement) {\r\n      const screenImg = document.getElementById('interactive-screen');\r\n      if (screenImg) {\r\n        screenImg.style.opacity = '0.3';\r\n        setTimeout(() => {\r\n          screenImg.src = imgSrc;\r\n          screenImg.style.opacity = '1';\r\n        }, 150);\r\n      }\r\n      document.querySelectorAll('.app-tab').forEach(tab => tab.classList.remove('active'));\r\n      if (btnElement) btnElement.classList.add('active');\r\n    };\r\n\r\n    let currentPin = '';\r\n    const correctPin = '1984';\r\n\r\n    window.pressKey = function(num) {\r\n      if (currentPin.length < 4) {\r\n        currentPin += num;\r\n        playKeySound();\r\n        updatePinDots();\r\n        if (currentPin.length === 4) {\r\n          setTimeout(window.checkPin, 200);\r\n        }\r\n      }\r\n    };\r\n\r\n    window.clearPin = function() {\r\n      currentPin = '';\r\n      playKeySound();\r\n      updatePinDots();\r\n    };\r\n\r\n    function updatePinDots() {\r\n      const dots = document.querySelectorAll('.pin-dot');\r\n      dots.forEach((dot, index) => {\r\n        if (index < currentPin.length) {\r\n          dot.classList.add('filled');\r\n        } else {\r\n          dot.classList.remove('filled');\r\n        }\r\n      });\r\n    }\r\n\r\n    window.checkPin = function() {\r\n      const widget = document.getElementById('passcodeWidget');\r\n      const successBox = document.getElementById('passcodeSuccess');\r\n\r\n      if (currentPin === correctPin) {\r\n        playUnlockSound();\r\n        if (widget) widget.style.display = 'none';\r\n        if (successBox) successBox.style.display = 'block';\r\n      } else {\r\n        playErrorSound();\r\n        if (widget) {\r\n          widget.classList.add('shake');\r\n          setTimeout(() => {\r\n            widget.classList.remove('shake');\r\n            window.clearPin();\r\n          }, 400);\r\n        }\r\n      }\r\n    };\r\n\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach((entry) => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('active');\r\n          }\r\n        });\r\n      }, { threshold: 0.12 });\r\n\r\n      document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));\r\n\r\n      const glow1 = document.querySelector('.glow-1');\r\n      const glow2 = document.querySelector('.glow-2');\r\n\r\n      window.addEventListener('mousemove', (e) => {\r\n        const moveX = (e.clientX - window.innerWidth \/ 2) * 0.04;\r\n        const moveY = (e.clientY - window.innerHeight \/ 2) * 0.04;\r\n\r\n        if (glow1) glow1.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;\r\n        if (glow2) glow2.style.transform = `translate3d(${-moveX * 0.7}px, ${-moveY * 0.7}px, 0)`;\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Spylie is an interactive detective game that turns a simulated smartphone into a crime-solving interface. Investigate hidden chats, recover deleted photos, inspect call logs, and decipher secret notes to uncover the truth behind intriguing cases. Every message holds a clue\u2014are you ready to solve the mystery?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,4],"tags":[],"class_list":["post-989309","post","type-post","status-publish","format-standard","hentry","category-commercial","category-portfolio"],"_links":{"self":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/posts\/989309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/comments?post=989309"}],"version-history":[{"count":23,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/posts\/989309\/revisions"}],"predecessor-version":[{"id":989343,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/posts\/989309\/revisions\/989343"}],"wp:attachment":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/media?parent=989309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/categories?post=989309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/tags?post=989309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}