Luviport \u2013 Premium Transport<\/title>\n <link rel=\"icon\" type=\"image\/png\" href=\"..\/src\/assets\/images\/mainpage.png\" \/>\n <link rel=\"stylesheet\" href=\".\/styles.css\" \/>\n <\/head>\n <style>\n \/* === Base + Layout from src\/index.css === *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap');\n\n:root {\n --color-primary-gold: #C9A24D;\n --color-light-gold: #E8CA83;\n --color-primary-green: #0B3F2F;\n --color-dark-green: #052419;\n --color-white: #FFFFFF;\n --color-black: #080808;\n --color-dark-gray: #111111;\n --color-light-gray: #FAFAFA;\n\n --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 2rem;\n --spacing-lg: 4rem;\n --spacing-xl: 6rem;\n --spacing-xxl: 8rem;\n\n --border-radius-sm: 8px;\n --border-radius-md: 16px;\n --border-radius-lg: 24px;\n --border-radius-xl: 40px;\n\n --transition-fast: 0.2s ease;\n --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n\/* Custom Scrollbar *\/\n::-webkit-scrollbar {\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--color-light-gray);\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--color-primary-green);\n border-radius: 5px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--color-dark-green);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-family: var(--font-main);\n background-color: var(--color-light-gray);\n color: var(--color-black);\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n overflow-x: hidden;\n width: 100%;\n}\n\na {\n text-decoration: none;\n color: inherit;\n}\n\nul {\n list-style: none;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n font-family: inherit;\n}\n\n\/* Typography Utility Classes *\/\n.h1 {\n font-size: clamp(3rem, 6vw, 5.5rem);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.03em;\n}\n\n.h2 {\n font-size: clamp(2rem, 4vw, 3.5rem);\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: -0.02em;\n}\n\n.h3 {\n font-size: clamp(1.5rem, 2.5vw, 2.25rem);\n font-weight: 600;\n line-height: 1.3;\n letter-spacing: -0.01em;\n}\n\n.body-large {\n font-size: clamp(1.125rem, 1.5vw, 1.25rem);\n line-height: 1.6;\n color: rgba(0, 0, 0, 0.65);\n}\n\n.body-regular {\n font-size: 1rem;\n line-height: 1.6;\n}\n\n.label {\n font-size: 0.875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n}\n\n.text-gradient-gold {\n background: linear-gradient(135deg, var(--color-primary-gold) 0%, var(--color-light-gold) 50%, var(--color-primary-gold) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 200% 200%;\n animation: shine 4s ease infinite;\n}\n\n.text-gradient-green {\n background: linear-gradient(135deg, var(--color-primary-green), var(--color-dark-green));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n\/* Colors Utilities *\/\n.text-gold {\n color: var(--color-primary-gold);\n}\n\n.text-green {\n color: var(--color-primary-green);\n}\n\n.text-white {\n color: var(--color-white);\n}\n\n.text-black {\n color: var(--color-black);\n}\n\n.bg-gold {\n background-color: var(--color-primary-gold);\n}\n\n.bg-green {\n background-color: var(--color-primary-green);\n}\n\n.bg-dark {\n background-color: var(--color-dark-green);\n color: var(--color-white);\n}\n\n.bg-light {\n background-color: var(--color-light-gray);\n}\n\n\/* Layout Utilities *\/\n.container {\n width: 100%;\n max-width: 1440px;\n margin: 0 auto;\n padding: 0 5%;\n}\n\n.section {\n padding: var(--spacing-xxl) 0;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-sm {\n gap: var(--spacing-sm);\n}\n\n.gap-md {\n gap: var(--spacing-md);\n}\n\n.gap-lg {\n gap: var(--spacing-lg);\n}\n\n.mt-sm {\n margin-top: var(--spacing-sm);\n}\n\n.mt-md {\n margin-top: var(--spacing-md);\n}\n\n.mt-lg {\n margin-top: var(--spacing-lg);\n}\n\n.mt-xl {\n margin-top: var(--spacing-xl);\n}\n\n.mt-xxl {\n margin-top: var(--spacing-xxl);\n}\n\n.mb-xl {\n margin-bottom: var(--spacing-xl);\n}\n\n.text-center {\n text-align: center;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-80 {\n opacity: 0.8;\n}\n\n.w-full {\n width: 100%;\n}\n\n\/* Component Styles *\/\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1.125rem 2.5rem;\n border-radius: 100px;\n font-weight: 600;\n font-size: 1rem;\n transition: all var(--transition-normal);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n transition: opacity var(--transition-normal);\n opacity: 0;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n\n.btn:active {\n transform: translateY(1px);\n}\n\n.btn-primary {\n background-color: var(--color-primary-green);\n color: var(--color-white);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 15px rgba(11, 63, 47, 0.3);\n}\n\n.btn-primary::before {\n background: linear-gradient(45deg, var(--color-primary-green), var(--color-dark-green));\n}\n\n.btn-primary:hover::before {\n opacity: 1;\n}\n\n\/* Navigation (hidden for this embed) *\/\n.navbar {\n display: none !important;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 5%;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n transition: all var(--transition-normal);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n background: rgba(250, 250, 250, 0.6);\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 2.5rem;\n}\n\n.nav-link {\n color: var(--color-primary-green);\n transition: color var(--transition-fast);\n position: relative;\n}\n\n.nav-link::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background-color: var(--color-primary-gold);\n transition: width var(--transition-normal);\n}\n\n.nav-link:hover {\n color: var(--color-primary-gold);\n}\n\n.nav-link:hover::after {\n width: 100%;\n}\n\n\/* Hero Section *\/\n.hero-section {\n min-height: 100vh;\n padding-top: 120px;\n display: flex;\n align-items: center;\n background-color: var(--color-light-gray);\n position: relative;\n overflow: hidden;\n margin-bottom: 10vh;\n}\n\n.hero-section::before {\n content: '';\n position: absolute;\n top: -20%;\n right: -10%;\n width: 70%;\n height: 70%;\n background: radial-gradient(circle, rgba(201, 162, 77, 0.15) 0%, transparent 60%);\n filter: blur(60px);\n pointer-events: none;\n animation: pulseGlow 8s ease-in-out infinite alternate;\n}\n\n.hero-section::after {\n content: '';\n position: absolute;\n bottom: -20%;\n left: -10%;\n width: 80%;\n height: 80%;\n background: radial-gradient(circle, rgba(11, 63, 47, 0.08) 0%, transparent 60%);\n filter: blur(80px);\n pointer-events: none;\n}\n\n.hero-container {\n height: 100%;\n}\n\n.hero-content {\n flex: 1;\n max-width: 600px;\n padding-right: var(--spacing-lg);\n z-index: 2;\n animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n margin-bottom: 230px;\n}\n\n.hero-stats {\n padding-top: var(--spacing-sm);\n}\n\n.stat-group {\n display: flex;\n flex-direction: column;\n cursor: default;\n}\n\n.stat-number {\n position: relative;\n padding-bottom: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: baseline;\n border-bottom: 1px solid rgba(11, 63, 47, 0.2);\n min-width: 120px;\n}\n\n.stat-number::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--color-primary-gold);\n transition: width var(--transition-slow);\n}\n\n.stat-group:hover .stat-number::after {\n width: 100%;\n}\n\n.stat-label {\n letter-spacing: 0.1em;\n}\n\n.app-store-btn,\n.play-store-btn {\n height: 48px;\n display: block;\n transition: transform var(--transition-fast), filter var(--transition-fast);\n}\n\n.app-store-btn:hover,\n.play-store-btn:hover {\n transform: translateY(-2px) scale(1.02);\n filter: brightness(1.1);\n}\n\n.app-store-btn img,\n.play-store-btn img {\n height: 100%;\n}\n\n.hero-visual {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 2;\n animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;\n opacity: 0;\n perspective: 1000px;\n margin-bottom: 200px;\n}\n\n.phone-mockup {\n width: 320px;\n height: 650px;\n background: linear-gradient(145deg, #111, #000);\n border-radius: 44px;\n padding: 12px;\n box-shadow:\n 0 50px 100px -20px rgba(11, 63, 47, 0.4),\n inset 0 0 0 2px #333,\n inset 0 0 20px rgba(255, 255, 255, 0.05);\n position: relative;\n margin: 0 auto;\n transform-style: preserve-3d;\n animation: float 6s ease-in-out infinite;\n}\n\n.phone-screen {\n width: 100%;\n height: 100%;\n border-radius: 32px;\n overflow: hidden;\n position: relative;\n background: var(--color-light-gray);\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.phone-mockup::before {\n content: '';\n position: absolute;\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 30px;\n background-color: #000;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n z-index: 10;\n}\n\n.phone-mockup::after {\n content: '';\n position: absolute;\n top: 120px;\n right: -4px;\n width: 4px;\n height: 60px;\n background: #333;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n\n\/* Premium Section (UPDATED DESIGN) *\/\n.premium-section {\n position: relative;\n background-color: var(--color-dark-green);\n border-radius: var(--border-radius-xl);\n margin: 150px 3% 20vh 3%;\n padding: 80px;\n z-index: 10;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.premium-grid {\n display: grid;\n grid-template-columns: 1fr 1fr; \/* 50\/50 split *\/\n gap: var(--spacing-xl);\n align-items: center;\n}\n\n.premium-left {\n padding-right: var(--spacing-md);\n}\n\n.premium-left h2 {\n font-size: clamp(2.5rem, 4vw, 4rem);\n line-height: 1.1;\n font-weight: 700;\n}\n\n.premium-left p.opacity-80 {\n color: rgba(255, 255, 255, 0.7);\n font-weight: 300;\n}\n\n.premium-right {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n}\n\n\n\n.luvi-card:hover {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(201, 162, 77, 0.3);\n transform: translateY(-5px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n}\n\n\/* Mevcut .luvi-card s\u0131n\u0131f\u0131n\u0131 bul ve \u015funlarla de\u011fi\u015ftir\/g\u00fcncelle *\/\n.luvi-card {\n background: rgba(255, 255, 255, 0.02);\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: 20px;\n \/* Padding'i 2rem'den 1.25rem'e d\u00fc\u015f\u00fcrerek i\u00e7 bo\u015flu\u011fu daraltt\u0131k *\/\n padding: 1.25rem; \n transition: all 0.4s ease;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \/* \u0130ste\u011fe ba\u011fl\u0131: Kartlar\u0131n \u00e7ok uzamas\u0131n\u0131 engellemek i\u00e7in *\/\n height: 100%; \n}\n\n\/* \u0130kon bo\u015flu\u011funu azaltal\u0131m *\/\n.luvi-icon {\n margin-bottom: 0.75rem; \/* 1.5rem'den d\u00fc\u015ft\u00fc *\/\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n\/* Ba\u015fl\u0131k boyutunu ve bo\u015flu\u011funu k\u00fc\u00e7\u00fcltelim *\/\n.luvi-card h3 {\n font-size: 1.15rem; \/* 1.35rem'den d\u00fc\u015ft\u00fc *\/\n font-weight: 600;\n margin-bottom: 0.5rem; \/* 0.75rem'den d\u00fc\u015ft\u00fc *\/\n color: #fff;\n}\n\n\/* A\u00e7\u0131klama metnini biraz daha s\u0131k\u0131\u015ft\u0131ral\u0131m *\/\n.luvi-card p {\n font-size: 0.85rem; \/* 0.95rem'den d\u00fc\u015ft\u00fc *\/\n line-height: 1.4; \/* Sat\u0131r aral\u0131\u011f\u0131n\u0131 daraltt\u0131k *\/\n color: rgba(255, 255, 255, 0.5);\n font-weight: 300;\n}\n\n\/* Animations *\/\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n}\n\n@keyframes pulseGlow {\n 0% { opacity: 0.6; transform: scale(0.9); }\n 100% { opacity: 1; transform: scale(1.1); }\n}\n\n@keyframes shine {\n 0% { background-position: 200% center; }\n 100% { background-position: -200% center; }\n}\n\n\/* Responsive *\/\n@media (max-width: 968px) {\n .hero-container {\n flex-direction: column;\n text-align: center;\n padding-top: var(--spacing-xl);\n }\n .hero-content {\n padding-right: 0;\n margin-bottom: var(--spacing-xl);\n }\n .hero-stats {\n justify-content: center;\n }\n .hero-actions {\n justify-content: center;\n }\n .navbar {\n padding: 1rem 5%;\n }\n .nav-links {\n display: none;\n }\n .premium-grid {\n grid-template-columns: 1fr;\n gap: var(--spacing-lg);\n }\n .premium-left {\n padding-right: 0;\n text-align: center;\n }\n .premium-section {\n padding: 50px 30px;\n }\n}\n\n@media (max-width: 600px) {\n .premium-right {\n grid-template-columns: 1fr;\n }\n .h1 {\n font-size: 2.5rem;\n }\n .phone-mockup {\n width: 280px;\n height: 580px;\n }\n}\n <\/style>\n <body>\n <div class=\"luviport-app\">\n <nav class=\"navbar flex justify-between items-center\">\n <div class=\"logo h3 text-gradient-gold\" style=\"letter-spacing: 2px;\">LUVIPORT<\/div>\n <div class=\"nav-links\">\n <a href=\"#services\" class=\"nav-link label\">Services<\/a>\n <a href=\"#premium\" class=\"nav-link label\">Premium<\/a>\n <a href=\"#app\" class=\"btn btn-primary\" style=\"padding: 0.75rem 1.5rem;\">Get the App<\/a>\n <\/div>\n <\/nav>\n\n <section class=\"hero-section\">\n <div class=\"hero-container container flex justify-between items-center\">\n <div class=\"hero-content\">\n <h1 class=\"h1 text-gradient-green\">Flawless Journeys. The Premium Experience.<\/h1>\n <p class=\"body-large mt-lg\">\n Transcending the boundaries of mobility. Experience uncompromising comfort and prestige on land, in the air, and at sea with Luviport.\n <\/p>\n <div class=\"hero-actions flex gap-sm mt-sm\">\n <a href=\"https:\/\/apps.apple.com\/tr\/app\/luviport-chauffeur-transfer\/id6759492073\" class=\"app-store-btn\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/3c\/Download_on_the_App_Store_Badge.svg\" alt=\"Download on the App Store\" \/>\n <\/a>\n \n <\/div>\n\n <div class=\"hero-stats flex gap-xxl mt-md\">\n <div class=\"stat-group\">\n <div class=\"flex mb-sm\" style=\"gap: 4px;\">\n <svg width=\"0\" height=\"0\" class=\"absolute\">\n <defs>\n <linearGradient id=\"star-gradient\">\n <stop offset=\"90%\" stop-color=\"var(--color-primary-gold)\" \/>\n <stop offset=\"90%\" stop-color=\"rgba(201, 162, 77, 0.3)\" \/>\n <\/linearGradient>\n <\/defs>\n <\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"url(#star-gradient)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <\/div>\n <div class=\"stat-number h2 text-gradient-green\">\n 4.9<span style=\"font-size: 0.6em; font-weight: 500; color: var(--color-primary-green);\">\/5<\/span>\n <\/div>\n <div class=\"stat-label label text-gold\">User Rating<\/div>\n <\/div>\n <div class=\"stat-group\" style=\"margin-left: var(--spacing-lg);\">\n <div class=\"flex mb-sm items-center\" style=\"color: var(--color-primary-gold); height: 16px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"><\/path><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"><\/path><\/svg>\n <\/div>\n <div class=\"stat-number h2 text-gradient-green\">24\/7<\/div>\n <div class=\"stat-label label text-gold\">Concierge Service<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-visual\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\" style=\"background-color: #052419;\">\n <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1897-scaled.png\" alt=\"Luviport App Main Page\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <style>\n \/* ================== BODY LOCK ================== *\/\n body.ys-lock { overflow: hidden; }\n \/* ================== SECTION ================== *\/\n .ys-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 70px 40px;\n display: flex;\n gap: 60px;\n min-height: 100vh;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\n color: #111;\n }\n \/* ================== LEFT ================== *\/\n .ys-left {\n flex: 1;\n position: sticky;\n top: 120px;\n height: 600px;\n padding-top: 20px;\n }\n .ys-phone {\n width: 100%;\n height: 100%;\n border-radius: 24px;\n overflow: hidden;\n background-color: #052419;\n }\n .ys-phone img { width: 100%; height: 100%; object-fit: cover; }\n \/* ================== RIGHT ================== *\/\n .ys-right { flex: 1; padding-top: 20px; }\n .ys-feature { margin-bottom: 40px; scroll-margin-top: 120px; }\n \/* ================== FEATURES ================== *\/\n .ys-feature h2 {\n font-size: 36px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: #c8c8c8; transition: color 0.5s ease, font-weight 0.5s ease, transform 0.4s ease;\n }\n .ys-feature p {\n font-size: 17px; line-height: 1.6; letter-spacing: -0.01em; color: #555; max-width: 560px; margin-top: 12px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease;\n }\n \/* ================== ACTIVE ================== *\/\n .ys-feature.active h2 { color: #000; font-weight: 700; transform: translateX(4px); }\n .ys-feature.active p { opacity: 1; max-height: 180px; transform: translateY(0); }\n .ys-feature:last-child { margin-top: 60px; }\n \/* ================== RESPONSIVE ================== *\/\n @media (max-width: 900px) {\n .ys-section { flex-direction: column; }\n .ys-left { position: relative; height: 420px; }\n .ys-feature h2 { font-size: 30px; }\n .ys-feature p { font-size: 16px; }\n }\n <\/style>\n\n <div class=\"ys-section\" id=\"ysSection\">\n <div class=\"ys-left\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\" style=\"background-color: #052419;\">\n <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1898-scaled.jpg\" alt=\"Luviport App Preview\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ys-right\">\n <div class=\"ys-feature active\">\n <h2>VIP Vito Transfer<\/h2>\n <p>Enjoy top-tier comfort, privacy, and flawless service with our chauffeur-driven, premium-equipped vehicles.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Hourly\/Daily Vehicle Rental<\/h2>\n <p>Choose the perfect luxury vehicle from our fleet and experience prestigious driving with flexible rental options.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Helicopter Tours<\/h2>\n <p>Take to the skies with bespoke routes and panoramic views for an exclusive, unforgettable flight experience above the city.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Sea Route Cruises<\/h2>\n <p>Set sail in luxury yachts and discover peaceful seas with tailored itineraries and first-class hospitality on board.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function () {\n const section = document.getElementById('ysSection');\n const features = section.querySelectorAll('.ys-feature');\n const body = document.body;\n const phoneImage = document.querySelector('.ys-left .phone-screen img');\n\n const featureImages = [\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1898-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1902-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1901-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1900-scaled.jpg'\n ];\n\n let index = 0;\n let active = false;\n let locked = false;\n let escapeMode = false;\n let sectionStarted = false;\n let deltaAccumulator = 0;\n\n function setPhoneVisual(i) {\n if (phoneImage) phoneImage.src = featureImages[i] || '';\n }\n\n function updateActive(i) {\n features.forEach((f, idx) => f.classList.toggle('active', idx === i));\n setPhoneVisual(i);\n }\n\n function inSection() {\n const rect = section.getBoundingClientRect();\n return rect.top <= 140 && rect.bottom >= window.innerHeight - 140;\n }\n\n window.addEventListener('scroll', () => {\n const inside = inSection();\n\n if (!inside) {\n if (active) {\n active = false;\n body.classList.remove('ys-lock');\n }\n escapeMode = false;\n return;\n }\n\n if (!active) {\n active = true;\n body.classList.add('ys-lock');\n if (!sectionStarted) {\n index = 0;\n sectionStarted = true;\n }\n updateActive(index);\n }\n });\n\n window.addEventListener('wheel', (e) => {\n if (!active) return;\n e.preventDefault();\n if (locked) return;\n\n deltaAccumulator += e.deltaY;\n const threshold = 60;\n\n if (Math.abs(deltaAccumulator) < threshold) return;\n\n const direction = deltaAccumulator > 0 ? 1 : -1;\n deltaAccumulator = 0;\n\n if (direction > 0) {\n if (index < features.length - 1) {\n index += 1;\n updateActive(index);\n } else {\n escapeMode = true;\n body.classList.remove('ys-lock');\n active = false;\n return;\n }\n } else {\n if (index > 0) {\n index -= 1;\n updateActive(index);\n } else {\n escapeMode = true;\n body.classList.remove('ys-lock');\n active = false;\n return;\n }\n }\n\n locked = true;\n setTimeout(() => { locked = false; }, 750);\n }, { passive: false });\n })();\n <\/script>\n\n <section id=\"premium\" class=\"premium-section text-white section\">\n <div class=\"container\">\n <div class=\"premium-grid\">\n \n <div class=\"premium-left\">\n <p class=\"label text-gradient-gold mb-sm\" style=\"letter-spacing: 2px;\">WHY LUVIPORT?<\/p>\n <h2 class=\"mb-md text-white\" style=\"color: white;\">\n Step Into an<br>\n <span class=\"text-gradient-gold\">Exclusive World<\/span>\n <\/h2>\n <p class=\"body-large opacity-80 mb-md\">\n As Luviport, we aim to maintain the highest level of customer satisfaction with years of experience in the VIP transportation sector. Whether on land, in the air, or at sea; we deliver the same quality and trust at every step.\n <\/p>\n <p class=\"body-large opacity-80\">\n Every client is unique to us. We carefully listen to your requests and meticulously plan the most suitable luxury transportation solution for you.\n <\/p>\n <\/div>\n\n <div class=\"premium-right\">\n \n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n <\/svg>\n <\/div>\n <h3>Top-Tier Security<\/h3>\n <p>Our entire fleet is equipped with the highest safety standards, operated by experienced and certified professionals.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <polyline points=\"12 6 12 12 16 14\"><\/polyline>\n <\/svg>\n <\/div>\n <h3>On-Time Delivery<\/h3>\n <p>We know how valuable your time is. We guarantee you will be at the planned location at the exact scheduled time.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\n <\/svg>\n <\/div>\n <h3>24\/7 Uninterrupted Service<\/h3>\n <p>Whenever you need it, at any time of the day, we provide VIP transportation support with customized solutions.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"7\"><\/circle>\n <polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\"><\/polyline>\n <\/svg>\n <\/div>\n <h3>Premium Experience<\/h3>\n <p>Beyond an ordinary journey, we offer a completely personalized luxury experience where every detail is carefully considered.<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n <\/body>\n<\/html>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Luviport \u2013 Premium Transport LUVIPORT Services Premium Get the App Flawless Journeys. The Premium Experience. Transcending the boundaries of mobility. Experience uncompromising comfort and prestige on land, in the air, and at sea with Luviport. 4.9\/5 User Rating 24\/7 Concierge Service VIP Vito Transfer Enjoy top-tier comfort, privacy, and flawless service with our chauffeur-driven, premium-equipped…<\/p>\n","protected":false},"featured_media":987953,"template":"elementor_header_footer","class_list":["post-988293","cron_app","type-cron_app","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/cron_app\/988293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/cron_app"}],"about":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/types\/cron_app"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/media\/987953"}],"wp:attachment":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/media?parent=988293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n \n Luviport \u2013 Premium Transport<\/title>\n <link rel=\"icon\" type=\"image\/png\" href=\"..\/src\/assets\/images\/mainpage.png\" \/>\n <link rel=\"stylesheet\" href=\".\/styles.css\" \/>\n <\/head>\n <style>\n \/* === Base + Layout from src\/index.css === *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap');\n\n:root {\n --color-primary-gold: #C9A24D;\n --color-light-gold: #E8CA83;\n --color-primary-green: #0B3F2F;\n --color-dark-green: #052419;\n --color-white: #FFFFFF;\n --color-black: #080808;\n --color-dark-gray: #111111;\n --color-light-gray: #FAFAFA;\n\n --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 2rem;\n --spacing-lg: 4rem;\n --spacing-xl: 6rem;\n --spacing-xxl: 8rem;\n\n --border-radius-sm: 8px;\n --border-radius-md: 16px;\n --border-radius-lg: 24px;\n --border-radius-xl: 40px;\n\n --transition-fast: 0.2s ease;\n --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n\/* Custom Scrollbar *\/\n::-webkit-scrollbar {\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--color-light-gray);\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--color-primary-green);\n border-radius: 5px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--color-dark-green);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-family: var(--font-main);\n background-color: var(--color-light-gray);\n color: var(--color-black);\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n overflow-x: hidden;\n width: 100%;\n}\n\na {\n text-decoration: none;\n color: inherit;\n}\n\nul {\n list-style: none;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n font-family: inherit;\n}\n\n\/* Typography Utility Classes *\/\n.h1 {\n font-size: clamp(3rem, 6vw, 5.5rem);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.03em;\n}\n\n.h2 {\n font-size: clamp(2rem, 4vw, 3.5rem);\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: -0.02em;\n}\n\n.h3 {\n font-size: clamp(1.5rem, 2.5vw, 2.25rem);\n font-weight: 600;\n line-height: 1.3;\n letter-spacing: -0.01em;\n}\n\n.body-large {\n font-size: clamp(1.125rem, 1.5vw, 1.25rem);\n line-height: 1.6;\n color: rgba(0, 0, 0, 0.65);\n}\n\n.body-regular {\n font-size: 1rem;\n line-height: 1.6;\n}\n\n.label {\n font-size: 0.875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n}\n\n.text-gradient-gold {\n background: linear-gradient(135deg, var(--color-primary-gold) 0%, var(--color-light-gold) 50%, var(--color-primary-gold) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 200% 200%;\n animation: shine 4s ease infinite;\n}\n\n.text-gradient-green {\n background: linear-gradient(135deg, var(--color-primary-green), var(--color-dark-green));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n\/* Colors Utilities *\/\n.text-gold {\n color: var(--color-primary-gold);\n}\n\n.text-green {\n color: var(--color-primary-green);\n}\n\n.text-white {\n color: var(--color-white);\n}\n\n.text-black {\n color: var(--color-black);\n}\n\n.bg-gold {\n background-color: var(--color-primary-gold);\n}\n\n.bg-green {\n background-color: var(--color-primary-green);\n}\n\n.bg-dark {\n background-color: var(--color-dark-green);\n color: var(--color-white);\n}\n\n.bg-light {\n background-color: var(--color-light-gray);\n}\n\n\/* Layout Utilities *\/\n.container {\n width: 100%;\n max-width: 1440px;\n margin: 0 auto;\n padding: 0 5%;\n}\n\n.section {\n padding: var(--spacing-xxl) 0;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-sm {\n gap: var(--spacing-sm);\n}\n\n.gap-md {\n gap: var(--spacing-md);\n}\n\n.gap-lg {\n gap: var(--spacing-lg);\n}\n\n.mt-sm {\n margin-top: var(--spacing-sm);\n}\n\n.mt-md {\n margin-top: var(--spacing-md);\n}\n\n.mt-lg {\n margin-top: var(--spacing-lg);\n}\n\n.mt-xl {\n margin-top: var(--spacing-xl);\n}\n\n.mt-xxl {\n margin-top: var(--spacing-xxl);\n}\n\n.mb-xl {\n margin-bottom: var(--spacing-xl);\n}\n\n.text-center {\n text-align: center;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.opacity-80 {\n opacity: 0.8;\n}\n\n.w-full {\n width: 100%;\n}\n\n\/* Component Styles *\/\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1.125rem 2.5rem;\n border-radius: 100px;\n font-weight: 600;\n font-size: 1rem;\n transition: all var(--transition-normal);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n\n.btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n transition: opacity var(--transition-normal);\n opacity: 0;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n\n.btn:active {\n transform: translateY(1px);\n}\n\n.btn-primary {\n background-color: var(--color-primary-green);\n color: var(--color-white);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 15px rgba(11, 63, 47, 0.3);\n}\n\n.btn-primary::before {\n background: linear-gradient(45deg, var(--color-primary-green), var(--color-dark-green));\n}\n\n.btn-primary:hover::before {\n opacity: 1;\n}\n\n\/* Navigation (hidden for this embed) *\/\n.navbar {\n display: none !important;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 5%;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n transition: all var(--transition-normal);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n background: rgba(250, 250, 250, 0.6);\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 2.5rem;\n}\n\n.nav-link {\n color: var(--color-primary-green);\n transition: color var(--transition-fast);\n position: relative;\n}\n\n.nav-link::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background-color: var(--color-primary-gold);\n transition: width var(--transition-normal);\n}\n\n.nav-link:hover {\n color: var(--color-primary-gold);\n}\n\n.nav-link:hover::after {\n width: 100%;\n}\n\n\/* Hero Section *\/\n.hero-section {\n min-height: 100vh;\n padding-top: 120px;\n display: flex;\n align-items: center;\n background-color: var(--color-light-gray);\n position: relative;\n overflow: hidden;\n margin-bottom: 10vh;\n}\n\n.hero-section::before {\n content: '';\n position: absolute;\n top: -20%;\n right: -10%;\n width: 70%;\n height: 70%;\n background: radial-gradient(circle, rgba(201, 162, 77, 0.15) 0%, transparent 60%);\n filter: blur(60px);\n pointer-events: none;\n animation: pulseGlow 8s ease-in-out infinite alternate;\n}\n\n.hero-section::after {\n content: '';\n position: absolute;\n bottom: -20%;\n left: -10%;\n width: 80%;\n height: 80%;\n background: radial-gradient(circle, rgba(11, 63, 47, 0.08) 0%, transparent 60%);\n filter: blur(80px);\n pointer-events: none;\n}\n\n.hero-container {\n height: 100%;\n}\n\n.hero-content {\n flex: 1;\n max-width: 600px;\n padding-right: var(--spacing-lg);\n z-index: 2;\n animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n margin-bottom: 230px;\n}\n\n.hero-stats {\n padding-top: var(--spacing-sm);\n}\n\n.stat-group {\n display: flex;\n flex-direction: column;\n cursor: default;\n}\n\n.stat-number {\n position: relative;\n padding-bottom: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: baseline;\n border-bottom: 1px solid rgba(11, 63, 47, 0.2);\n min-width: 120px;\n}\n\n.stat-number::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--color-primary-gold);\n transition: width var(--transition-slow);\n}\n\n.stat-group:hover .stat-number::after {\n width: 100%;\n}\n\n.stat-label {\n letter-spacing: 0.1em;\n}\n\n.app-store-btn,\n.play-store-btn {\n height: 48px;\n display: block;\n transition: transform var(--transition-fast), filter var(--transition-fast);\n}\n\n.app-store-btn:hover,\n.play-store-btn:hover {\n transform: translateY(-2px) scale(1.02);\n filter: brightness(1.1);\n}\n\n.app-store-btn img,\n.play-store-btn img {\n height: 100%;\n}\n\n.hero-visual {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 2;\n animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;\n opacity: 0;\n perspective: 1000px;\n margin-bottom: 200px;\n}\n\n.phone-mockup {\n width: 320px;\n height: 650px;\n background: linear-gradient(145deg, #111, #000);\n border-radius: 44px;\n padding: 12px;\n box-shadow:\n 0 50px 100px -20px rgba(11, 63, 47, 0.4),\n inset 0 0 0 2px #333,\n inset 0 0 20px rgba(255, 255, 255, 0.05);\n position: relative;\n margin: 0 auto;\n transform-style: preserve-3d;\n animation: float 6s ease-in-out infinite;\n}\n\n.phone-screen {\n width: 100%;\n height: 100%;\n border-radius: 32px;\n overflow: hidden;\n position: relative;\n background: var(--color-light-gray);\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.phone-mockup::before {\n content: '';\n position: absolute;\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 30px;\n background-color: #000;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n z-index: 10;\n}\n\n.phone-mockup::after {\n content: '';\n position: absolute;\n top: 120px;\n right: -4px;\n width: 4px;\n height: 60px;\n background: #333;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n\n\/* Premium Section (UPDATED DESIGN) *\/\n.premium-section {\n position: relative;\n background-color: var(--color-dark-green);\n border-radius: var(--border-radius-xl);\n margin: 150px 3% 20vh 3%;\n padding: 80px;\n z-index: 10;\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n}\n\n.premium-grid {\n display: grid;\n grid-template-columns: 1fr 1fr; \/* 50\/50 split *\/\n gap: var(--spacing-xl);\n align-items: center;\n}\n\n.premium-left {\n padding-right: var(--spacing-md);\n}\n\n.premium-left h2 {\n font-size: clamp(2.5rem, 4vw, 4rem);\n line-height: 1.1;\n font-weight: 700;\n}\n\n.premium-left p.opacity-80 {\n color: rgba(255, 255, 255, 0.7);\n font-weight: 300;\n}\n\n.premium-right {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n}\n\n\n\n.luvi-card:hover {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(201, 162, 77, 0.3);\n transform: translateY(-5px);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n}\n\n\/* Mevcut .luvi-card s\u0131n\u0131f\u0131n\u0131 bul ve \u015funlarla de\u011fi\u015ftir\/g\u00fcncelle *\/\n.luvi-card {\n background: rgba(255, 255, 255, 0.02);\n border: 1px solid rgba(255, 255, 255, 0.04);\n border-radius: 20px;\n \/* Padding'i 2rem'den 1.25rem'e d\u00fc\u015f\u00fcrerek i\u00e7 bo\u015flu\u011fu daraltt\u0131k *\/\n padding: 1.25rem; \n transition: all 0.4s ease;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \/* \u0130ste\u011fe ba\u011fl\u0131: Kartlar\u0131n \u00e7ok uzamas\u0131n\u0131 engellemek i\u00e7in *\/\n height: 100%; \n}\n\n\/* \u0130kon bo\u015flu\u011funu azaltal\u0131m *\/\n.luvi-icon {\n margin-bottom: 0.75rem; \/* 1.5rem'den d\u00fc\u015ft\u00fc *\/\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n\/* Ba\u015fl\u0131k boyutunu ve bo\u015flu\u011funu k\u00fc\u00e7\u00fcltelim *\/\n.luvi-card h3 {\n font-size: 1.15rem; \/* 1.35rem'den d\u00fc\u015ft\u00fc *\/\n font-weight: 600;\n margin-bottom: 0.5rem; \/* 0.75rem'den d\u00fc\u015ft\u00fc *\/\n color: #fff;\n}\n\n\/* A\u00e7\u0131klama metnini biraz daha s\u0131k\u0131\u015ft\u0131ral\u0131m *\/\n.luvi-card p {\n font-size: 0.85rem; \/* 0.95rem'den d\u00fc\u015ft\u00fc *\/\n line-height: 1.4; \/* Sat\u0131r aral\u0131\u011f\u0131n\u0131 daraltt\u0131k *\/\n color: rgba(255, 255, 255, 0.5);\n font-weight: 300;\n}\n\n\/* Animations *\/\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n}\n\n@keyframes pulseGlow {\n 0% { opacity: 0.6; transform: scale(0.9); }\n 100% { opacity: 1; transform: scale(1.1); }\n}\n\n@keyframes shine {\n 0% { background-position: 200% center; }\n 100% { background-position: -200% center; }\n}\n\n\/* Responsive *\/\n@media (max-width: 968px) {\n .hero-container {\n flex-direction: column;\n text-align: center;\n padding-top: var(--spacing-xl);\n }\n .hero-content {\n padding-right: 0;\n margin-bottom: var(--spacing-xl);\n }\n .hero-stats {\n justify-content: center;\n }\n .hero-actions {\n justify-content: center;\n }\n .navbar {\n padding: 1rem 5%;\n }\n .nav-links {\n display: none;\n }\n .premium-grid {\n grid-template-columns: 1fr;\n gap: var(--spacing-lg);\n }\n .premium-left {\n padding-right: 0;\n text-align: center;\n }\n .premium-section {\n padding: 50px 30px;\n }\n}\n\n@media (max-width: 600px) {\n .premium-right {\n grid-template-columns: 1fr;\n }\n .h1 {\n font-size: 2.5rem;\n }\n .phone-mockup {\n width: 280px;\n height: 580px;\n }\n}\n <\/style>\n <body>\n <div class=\"luviport-app\">\n <nav class=\"navbar flex justify-between items-center\">\n <div class=\"logo h3 text-gradient-gold\" style=\"letter-spacing: 2px;\">LUVIPORT<\/div>\n <div class=\"nav-links\">\n <a href=\"#services\" class=\"nav-link label\">Services<\/a>\n <a href=\"#premium\" class=\"nav-link label\">Premium<\/a>\n <a href=\"#app\" class=\"btn btn-primary\" style=\"padding: 0.75rem 1.5rem;\">Get the App<\/a>\n <\/div>\n <\/nav>\n\n <section class=\"hero-section\">\n <div class=\"hero-container container flex justify-between items-center\">\n <div class=\"hero-content\">\n <h1 class=\"h1 text-gradient-green\">Flawless Journeys. The Premium Experience.<\/h1>\n <p class=\"body-large mt-lg\">\n Transcending the boundaries of mobility. Experience uncompromising comfort and prestige on land, in the air, and at sea with Luviport.\n <\/p>\n <div class=\"hero-actions flex gap-sm mt-sm\">\n <a href=\"https:\/\/apps.apple.com\/tr\/app\/luviport-chauffeur-transfer\/id6759492073\" class=\"app-store-btn\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/3c\/Download_on_the_App_Store_Badge.svg\" alt=\"Download on the App Store\" \/>\n <\/a>\n \n <\/div>\n\n <div class=\"hero-stats flex gap-xxl mt-md\">\n <div class=\"stat-group\">\n <div class=\"flex mb-sm\" style=\"gap: 4px;\">\n <svg width=\"0\" height=\"0\" class=\"absolute\">\n <defs>\n <linearGradient id=\"star-gradient\">\n <stop offset=\"90%\" stop-color=\"var(--color-primary-gold)\" \/>\n <stop offset=\"90%\" stop-color=\"rgba(201, 162, 77, 0.3)\" \/>\n <\/linearGradient>\n <\/defs>\n <\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"var(--color-primary-gold)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"url(#star-gradient)\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" \/><\/svg>\n <\/div>\n <div class=\"stat-number h2 text-gradient-green\">\n 4.9<span style=\"font-size: 0.6em; font-weight: 500; color: var(--color-primary-green);\">\/5<\/span>\n <\/div>\n <div class=\"stat-label label text-gold\">User Rating<\/div>\n <\/div>\n <div class=\"stat-group\" style=\"margin-left: var(--spacing-lg);\">\n <div class=\"flex mb-sm items-center\" style=\"color: var(--color-primary-gold); height: 16px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"><\/path><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"><\/path><\/svg>\n <\/div>\n <div class=\"stat-number h2 text-gradient-green\">24\/7<\/div>\n <div class=\"stat-label label text-gold\">Concierge Service<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-visual\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\" style=\"background-color: #052419;\">\n <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1897-scaled.png\" alt=\"Luviport App Main Page\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <style>\n \/* ================== BODY LOCK ================== *\/\n body.ys-lock { overflow: hidden; }\n \/* ================== SECTION ================== *\/\n .ys-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 70px 40px;\n display: flex;\n gap: 60px;\n min-height: 100vh;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\n color: #111;\n }\n \/* ================== LEFT ================== *\/\n .ys-left {\n flex: 1;\n position: sticky;\n top: 120px;\n height: 600px;\n padding-top: 20px;\n }\n .ys-phone {\n width: 100%;\n height: 100%;\n border-radius: 24px;\n overflow: hidden;\n background-color: #052419;\n }\n .ys-phone img { width: 100%; height: 100%; object-fit: cover; }\n \/* ================== RIGHT ================== *\/\n .ys-right { flex: 1; padding-top: 20px; }\n .ys-feature { margin-bottom: 40px; scroll-margin-top: 120px; }\n \/* ================== FEATURES ================== *\/\n .ys-feature h2 {\n font-size: 36px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: #c8c8c8; transition: color 0.5s ease, font-weight 0.5s ease, transform 0.4s ease;\n }\n .ys-feature p {\n font-size: 17px; line-height: 1.6; letter-spacing: -0.01em; color: #555; max-width: 560px; margin-top: 12px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease;\n }\n \/* ================== ACTIVE ================== *\/\n .ys-feature.active h2 { color: #000; font-weight: 700; transform: translateX(4px); }\n .ys-feature.active p { opacity: 1; max-height: 180px; transform: translateY(0); }\n .ys-feature:last-child { margin-top: 60px; }\n \/* ================== RESPONSIVE ================== *\/\n @media (max-width: 900px) {\n .ys-section { flex-direction: column; }\n .ys-left { position: relative; height: 420px; }\n .ys-feature h2 { font-size: 30px; }\n .ys-feature p { font-size: 16px; }\n }\n <\/style>\n\n <div class=\"ys-section\" id=\"ysSection\">\n <div class=\"ys-left\">\n <div class=\"phone-mockup\">\n <div class=\"phone-screen\" style=\"background-color: #052419;\">\n <img decoding=\"async\" src=\"https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1898-scaled.jpg\" alt=\"Luviport App Preview\" style=\"width: 100%; height: 100%; object-fit: cover; display: block;\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"ys-right\">\n <div class=\"ys-feature active\">\n <h2>VIP Vito Transfer<\/h2>\n <p>Enjoy top-tier comfort, privacy, and flawless service with our chauffeur-driven, premium-equipped vehicles.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Hourly\/Daily Vehicle Rental<\/h2>\n <p>Choose the perfect luxury vehicle from our fleet and experience prestigious driving with flexible rental options.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Helicopter Tours<\/h2>\n <p>Take to the skies with bespoke routes and panoramic views for an exclusive, unforgettable flight experience above the city.<\/p>\n <\/div>\n <div class=\"ys-feature\">\n <h2>Sea Route Cruises<\/h2>\n <p>Set sail in luxury yachts and discover peaceful seas with tailored itineraries and first-class hospitality on board.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function () {\n const section = document.getElementById('ysSection');\n const features = section.querySelectorAll('.ys-feature');\n const body = document.body;\n const phoneImage = document.querySelector('.ys-left .phone-screen img');\n\n const featureImages = [\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1898-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1902-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1901-scaled.jpg',\n 'https:\/\/croncodestudio.com\/en\/wp-content\/uploads\/2026\/03\/IMG_1900-scaled.jpg'\n ];\n\n let index = 0;\n let active = false;\n let locked = false;\n let escapeMode = false;\n let sectionStarted = false;\n let deltaAccumulator = 0;\n\n function setPhoneVisual(i) {\n if (phoneImage) phoneImage.src = featureImages[i] || '';\n }\n\n function updateActive(i) {\n features.forEach((f, idx) => f.classList.toggle('active', idx === i));\n setPhoneVisual(i);\n }\n\n function inSection() {\n const rect = section.getBoundingClientRect();\n return rect.top <= 140 && rect.bottom >= window.innerHeight - 140;\n }\n\n window.addEventListener('scroll', () => {\n const inside = inSection();\n\n if (!inside) {\n if (active) {\n active = false;\n body.classList.remove('ys-lock');\n }\n escapeMode = false;\n return;\n }\n\n if (!active) {\n active = true;\n body.classList.add('ys-lock');\n if (!sectionStarted) {\n index = 0;\n sectionStarted = true;\n }\n updateActive(index);\n }\n });\n\n window.addEventListener('wheel', (e) => {\n if (!active) return;\n e.preventDefault();\n if (locked) return;\n\n deltaAccumulator += e.deltaY;\n const threshold = 60;\n\n if (Math.abs(deltaAccumulator) < threshold) return;\n\n const direction = deltaAccumulator > 0 ? 1 : -1;\n deltaAccumulator = 0;\n\n if (direction > 0) {\n if (index < features.length - 1) {\n index += 1;\n updateActive(index);\n } else {\n escapeMode = true;\n body.classList.remove('ys-lock');\n active = false;\n return;\n }\n } else {\n if (index > 0) {\n index -= 1;\n updateActive(index);\n } else {\n escapeMode = true;\n body.classList.remove('ys-lock');\n active = false;\n return;\n }\n }\n\n locked = true;\n setTimeout(() => { locked = false; }, 750);\n }, { passive: false });\n })();\n <\/script>\n\n <section id=\"premium\" class=\"premium-section text-white section\">\n <div class=\"container\">\n <div class=\"premium-grid\">\n \n <div class=\"premium-left\">\n <p class=\"label text-gradient-gold mb-sm\" style=\"letter-spacing: 2px;\">WHY LUVIPORT?<\/p>\n <h2 class=\"mb-md text-white\" style=\"color: white;\">\n Step Into an<br>\n <span class=\"text-gradient-gold\">Exclusive World<\/span>\n <\/h2>\n <p class=\"body-large opacity-80 mb-md\">\n As Luviport, we aim to maintain the highest level of customer satisfaction with years of experience in the VIP transportation sector. Whether on land, in the air, or at sea; we deliver the same quality and trust at every step.\n <\/p>\n <p class=\"body-large opacity-80\">\n Every client is unique to us. We carefully listen to your requests and meticulously plan the most suitable luxury transportation solution for you.\n <\/p>\n <\/div>\n\n <div class=\"premium-right\">\n \n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\n <\/svg>\n <\/div>\n <h3>Top-Tier Security<\/h3>\n <p>Our entire fleet is equipped with the highest safety standards, operated by experienced and certified professionals.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <polyline points=\"12 6 12 12 16 14\"><\/polyline>\n <\/svg>\n <\/div>\n <h3>On-Time Delivery<\/h3>\n <p>We know how valuable your time is. We guarantee you will be at the planned location at the exact scheduled time.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\n <\/svg>\n <\/div>\n <h3>24\/7 Uninterrupted Service<\/h3>\n <p>Whenever you need it, at any time of the day, we provide VIP transportation support with customized solutions.<\/p>\n <\/div>\n\n <div class=\"luvi-card\">\n <div class=\"luvi-icon\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-primary-gold)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"7\"><\/circle>\n <polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\"><\/polyline>\n <\/svg>\n <\/div>\n <h3>Premium Experience<\/h3>\n <p>Beyond an ordinary journey, we offer a completely personalized luxury experience where every detail is carefully considered.<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n <\/body>\n<\/html>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Luviport \u2013 Premium Transport LUVIPORT Services Premium Get the App Flawless Journeys. The Premium Experience. Transcending the boundaries of mobility. Experience uncompromising comfort and prestige on land, in the air, and at sea with Luviport. 4.9\/5 User Rating 24\/7 Concierge Service VIP Vito Transfer Enjoy top-tier comfort, privacy, and flawless service with our chauffeur-driven, premium-equipped…<\/p>\n","protected":false},"featured_media":987953,"template":"elementor_header_footer","class_list":["post-988293","cron_app","type-cron_app","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/cron_app\/988293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/cron_app"}],"about":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/types\/cron_app"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/media\/987953"}],"wp:attachment":[{"href":"https:\/\/croncodestudio.com\/en\/wp-json\/wp\/v2\/media?parent=988293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}