<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description"
    content="Bavul Etiketi , qr code generator, dynamic qr code, qr kod, qr bavul, qr barkod, smartag, luggagetag, qrtag, microsite">
    <meta name="author" content="Demsoft Software">
  <meta name="keywords"
    content="qr ,qr code, qr generator, qr code generator,qr kod, qr barkod, qr menu, vcard, pet tag, survey, microsite ">
    <title>Bavul Etkieti - Bavul Etiketi - Valiz Etiketi - Qr Bavul Etiketi - Kişiselleştirilmiş Bavul Etiketi</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" type="image/png" href="images/icon.png">
     
</head>
<style>
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            z-index: 1000;
            padding: 1rem 0;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: #2563eb;
        }

        .nav-logo i {
            margin-right: 0.5rem;
            font-size: 1.8rem;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-menu a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
        }

        .nav-menu a:hover {
            color: #2563eb;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background: #333;
            margin: 3px 0;
        }

        /* Language Switcher */
        .language-switcher {
            position: relative;
            margin-left: 2rem;
        }

        .language-btn {
            background: none;
            border: none;
            color: #333;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .language-btn:hover {
            background: #f1f5f9;
            color: #2563eb;
        }

        .language-btn i {
            font-size: 0.8rem;
        }

        .language-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 0.5rem 0;
            min-width: 150px;
            display: none;
            z-index: 1001;
        }

        .language-dropdown.active {
            display: block;
        }

        .language-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .language-option:hover {
            background: #f1f5f9;
        }

        .language-option.active {
            background: #2563eb;
            color: white;
        }

        .flag-icon {
            width: 20px;
            height: 15px;
            border-radius: 2px;
            background-size: cover;
        }

        .flag-tr {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23E30A17"/><circle cx="425" cy="400" r="200" fill="%23ffffff"/><circle cx="475" cy="400" r="160" fill="%23E30A17"/><polygon points="583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221" fill="%23ffffff"/></svg>');
        }

        .flag-en {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(%23a)"><path d="M0 0v30h60V0z" fill="%23012169"/><path d="M0 0l60 30m0-30L0 30" stroke="%23fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(%23b)" stroke="%23C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="%23fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="%23C8102E" stroke-width="6"/></g></svg>');
        }

        .flag-de {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="3" fill="%23000"/><rect width="5" height="2" y="1" fill="%23DD0000"/><rect width="5" height="1" y="2" fill="%23FFCE00"/></svg>');
        }

        .flag-fr {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23002395"/><rect width="1" height="2" x="1" fill="%23ffffff"/><rect width="1" height="2" x="2" fill="%23ED2939"/></svg>');
        }

        .flag-es {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500"><rect width="750" height="500" fill="%23c60b1e"/><rect width="750" height="250" y="125" fill="%23ffc400"/></svg>');
        }

        .flag-ru {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6"><rect width="9" height="2" fill="%23ffffff"/><rect width="9" height="2" y="2" fill="%23005aa7"/><rect width="9" height="2" y="4" fill="%23d52b1e"/></svg>');
        }

        .flag-ar {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="200" fill="%23000"/><rect width="900" height="200" y="200" fill="%23fff"/><rect width="900" height="200" y="400" fill="%23090"/><polygon points="450,300 300,200 300,400" fill="%23c00"/></svg>');
        }

        /* RTL Support for Arabic */
        [dir="rtl"] {
            direction: rtl;
            text-align: right;
        }

        [dir="rtl"] .nav-menu {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .language-switcher {
            margin-left: 0;
            margin-right: 2rem;
        }

        [dir="rtl"] .hero-buttons {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .contact-content {
            direction: rtl;
        }

        [dir="rtl"] .footer-content {
            direction: rtl;
        }

        [dir="rtl"] .step {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .demo-card {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .cta-buttons {
            flex-direction: row-reverse;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="1200" height="800" fill="url(%23grid)"/></svg>');
            color: white;
            padding-top: 80px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="90" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primary, .btn-secondary {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #2563eb;
            color: white;
        }

        .btn-primary:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }

        .btn-secondary:hover {
            background: white;
            color: #667eea;
            transform: translateY(-2px);
        }

        .hero-image {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .hero-image img {
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .hero-visual {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            position: relative;
        }

        .luggage-image {
            width: 300px;
            height: 200px;
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .luggage-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
        }

        .qr-demo {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            z-index: 2;
        }

        .luggage-tag {
            background: white;
            color: #333;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            position: relative;
            transform: rotate(-5deg);
            animation: tagFloat 3s ease-in-out infinite;
        }

        .luggage-tag::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #2563eb;
            border-radius: 50%;
            border: 3px solid white;
        }

        @keyframes tagFloat {
            0%, 100% { transform: rotate(-5deg) translateY(0px); }
            50% { transform: rotate(-5deg) translateY(-10px); }
        }

        .luggage-tag i {
            font-size: 4rem;
            color: #2563eb;
            margin-bottom: 0.5rem;
        }

        .luggage-tag span {
            font-weight: 600;
            font-size: 1.2rem;
        }

        .scan-animation {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            animation: scanMove 2s ease-in-out infinite;
        }

        @keyframes scanMove {
            0%, 100% { transform: translateX(0px); }
            50% { transform: translateX(20px); }
        }

        .scan-animation i {
            font-size: 3rem;
            color: white;
            filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
        }

        .scan-line {
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #2563eb, transparent);
            border-radius: 2px;
            animation: scanGlow 1.5s ease-in-out infinite;
        }

        @keyframes scanGlow {
            0%, 100% { box-shadow: 0 0 5px #2563eb; }
            50% { box-shadow: 0 0 20px #2563eb, 0 0 30px #2563eb; }
        }

        /* Features Section */
        .features {
            padding: 5rem 0;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            position: relative;
            overflow: hidden;
        }

        .features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(37,99,235,0.1)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
            opacity: 0.5;
        }

        .features h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #1e293b;
            position: relative;
            z-index: 2;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 2;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .feature-card:hover::before {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            position: relative;
            overflow: hidden;
        }

        .feature-icon::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
            transform: rotate(45deg);
            transition: transform 0.5s ease;
        }

        .feature-card:hover .feature-icon::before {
            transform: rotate(45deg) translate(50%, 50%);
        }

        .feature-icon i {
            font-size: 2rem;
            color: white;
            position: relative;
            z-index: 2;
        }

        .feature-visual {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            border-radius: 10px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .feature-visual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            opacity: 0.8;
        }

        .feature-visual.secure::before {
            background-image: url('images/feature-secure.svg');
        }

        .feature-visual.fast::before {
            background-image: url('images/feature-fast.svg');
        }

        .feature-visual.universal::before {
            background-image: url('images/feature-universal.svg');
        }

        .feature-visual.durable::before {
            background-image: url('images/feature-durable.svg');
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #1e293b;
        }

        .feature-card p {
            color: #64748b;
            line-height: 1.6;
        }

        /* How It Works Section */
        .how-it-works {
            padding: 5rem 0;
            background: white;
        }

        .how-it-works h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #1e293b;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .step {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 2rem;
            background: #f8fafc;
            border-radius: 15px;
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .step::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .step:hover::before {
            opacity: 1;
        }

        .step:hover {
            transform: translateY(-5px);
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        .step-visual {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .step-visual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            opacity: 0.8;
        }

        .step-visual.step1::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="white"/><rect x="15" y="15" width="50" height="50" fill="%23f1f5f9" rx="5"/><rect x="20" y="20" width="40" height="40" fill="%23e2e8f0" rx="3"/><circle cx="40" cy="40" r="8" fill="%232563eb"/><rect x="30" y="50" width="20" height="4" fill="%232563eb" rx="2"/></svg>');
        }

        .step-visual.step2::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="white"/><rect x="20" y="20" width="40" height="40" fill="%23f1f5f9" rx="5"/><rect x="25" y="25" width="30" height="30" fill="%23e2e8f0" rx="3"/><path d="M30 35h20M30 40h20M30 45h15" stroke="%232563eb" stroke-width="2" fill="none"/><circle cx="35" cy="35" r="2" fill="%232563eb"/><circle cx="35" cy="40" r="2" fill="%232563eb"/><circle cx="35" cy="45" r="2" fill="%232563eb"/></svg>');
        }

        .step-visual.step3::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="white"/><circle cx="40" cy="30" r="12" fill="%232563eb"/><path d="M35 30l3 3 7-7" stroke="white" stroke-width="2" fill="none"/><rect x="25" y="50" width="30" height="20" fill="%23f1f5f9" rx="3"/><path d="M30 55h20M30 60h15" stroke="%232563eb" stroke-width="1" fill="none"/></svg>');
        }

        .step-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #1e293b;
        }

        .step-content p {
            color: #64748b;
            line-height: 1.6;
        }

        /* Demo Section */
        .demo {
            padding: 5rem 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .demo::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="qr-pattern" width="10" height="10" patternUnits="userSpaceOnUse"><rect width="10" height="10" fill="rgba(255,255,255,0.05)"/><rect width="2" height="2" fill="rgba(255,255,255,0.1)"/><rect width="2" height="2" x="8" y="0" fill="rgba(255,255,255,0.1)"/><rect width="2" height="2" x="0" y="8" fill="rgba(255,255,255,0.1)"/><rect width="2" height="2" x="8" y="8" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23qr-pattern)"/></svg>');
            opacity: 0.3;
        }

        .demo h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 2;
        }

        .demo p {
            font-size: 1.2rem;
            margin-bottom: 3rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }

        .demo-qr {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            position: relative;
            z-index: 2;
        }

        .qr-code {
            width: 200px;
            height: 200px;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            animation: qrPulse 2s ease-in-out infinite;
        }

        .qr-code::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(37, 99, 235, 0.1) 50%, transparent 70%);
            animation: qrShine 3s ease-in-out infinite;
            z-index: 1;
        }

        .qr-code img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @keyframes qrPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes qrShine {
            0% { transform: translateX(-100%) translateY(-100%); }
            100% { transform: translateX(100%) translateY(100%); }
        }

        .qr-code i {
            font-size: 8rem;
            color: #2563eb;
            position: relative;
            z-index: 2;
        }

        /* Pricing Section */
        .pricing {
            padding: 5rem 0;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            position: relative;
            overflow: hidden;
        }

        .pricing::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><pattern id="pricing-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 20h40M20 0v40" stroke="rgba(37,99,235,0.1)" stroke-width="1" fill="none"/></pattern></defs><rect width="80" height="80" fill="url(%23pricing-pattern)"/></svg>');
            opacity: 0.3;
        }

        .pricing h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #1e293b;
            position: relative;
            z-index: 2;
            
        }

        .pricing-grid {
            display: flex;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 2;
           
            gap: 15px;               /* Kartlar arası boşluk */
            
          
        }

        .pricing-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
            flex: 1 1 230px; /* Genişlik yaklaşık 220px, esnek */
            max-width: 380px; /* Maksimum genişlik sınırı */
            box-sizing: border-box;

        }

        .pricing-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .pricing-card:hover::before {
            transform: scaleX(1);
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .pricing-card.featured {
            border: 3px solid #2563eb;
            transform: scale(1.05);
            background: linear-gradient(135deg, white 0%, #f8fafc 100%);
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-5px);
        }

        .popular {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
        }

        .pricing-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #1e293b;
        }

        .price {
            font-size: 3rem;
            font-weight: 700;
            color: #2563eb;
            margin-bottom: 2rem;
        }

        .pricing-card ul {
            list-style: none;
            margin-bottom: 2rem;
        }

        .pricing-card li {
            padding: 0.5rem 0;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }

        .pricing-card li:last-child {
            border-bottom: none;
        }

        /* Contact Section */
        .contact {
            padding: 5rem 0;
            background: linear-gradient(135deg, white 0%, #f8fafc 100%);
            position: relative;
            overflow: hidden;
        }

        .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contact-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(37,99,235,0.1)"/><circle cx="0" cy="0" r="1" fill="rgba(37,99,235,0.1)"/><circle cx="50" cy="50" r="1" fill="rgba(37,99,235,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23contact-pattern)"/></svg>');
            opacity: 0.3;
        }

        .contact h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #1e293b;
            position: relative;
            z-index: 2;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            position: relative;
            z-index: 2;
        }

        .contact-info {
            position: relative;
        }

        .contact-info::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            width: 100px;
            height: 100px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%232563eb" stroke-width="2" opacity="0.2"/><path d="M30 50h40M50 30v40" stroke="%232563eb" stroke-width="2" opacity="0.3"/></svg>');
            background-size: cover;
            z-index: 0;
        }

        .contact-info h3 {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            color: #1e293b;
            position: relative;
            z-index: 1;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            color: #64748b;
            padding: 1rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .contact-item:hover {
            transform: translateX(10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .contact-item i {
            color: #2563eb;
            font-size: 1.2rem;
            width: 20px;
            text-align: center;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .contact-form::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="%23f8fafc"/><path d="M20 30h40M20 40h30M20 50h25" stroke="%232563eb" stroke-width="2" opacity="0.3"/><circle cx="60" cy="35" r="3" fill="%232563eb" opacity="0.3"/></svg>');
            background-size: cover;
            opacity: 0.5;
            z-index: 0;
        }

        .contact-form input,
        .contact-form textarea {
            padding: 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: #2563eb;
            background: white;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        /* Footer */
        .footer {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            color: white;
            padding: 3rem 0 1rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footer-pattern" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M0 15h30M15 0v30" stroke="rgba(255,255,255,0.05)" stroke-width="1" fill="none"/></pattern></defs><rect width="100" height="100" fill="url(%23footer-pattern)"/></svg>');
            opacity: 0.3;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .footer-logo i {
            margin-right: 0.5rem;
            color: #2563eb;
            filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
        }

        .footer-section h4 {
            margin-bottom: 1rem;
            color: #2563eb;
            position: relative;
        }

        .footer-section h4::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 30px;
            height: 2px;
            background: linear-gradient(90deg, #2563eb, transparent);
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 0.5rem;
        }

        .footer-section a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .footer-section a::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: #2563eb;
            transition: width 0.3s ease;
        }

        .footer-section a:hover {
            color: #2563eb;
        }

        .footer-section a:hover::before {
            width: 100%;
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #374151, #4b5563);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .social-links a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .social-links a:hover::before {
            left: 100%;
        }

        .social-links a:hover {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #374151;
            color: #9ca3af;
            position: relative;
            z-index: 2;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 2rem;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }

        .close {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 2rem;
            cursor: pointer;
            color: #64748b;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: #1e293b;
        }

        .demo-card {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.5rem;
            background: #f8fafc;
            border-radius: 10px;
            margin: 1.5rem 0;
        }

        .demo-avatar {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-avatar i {
            font-size: 2rem;
            color: white;
        }

        .demo-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #1e293b;
        }

        .demo-info p {
            color: #64748b;
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .demo-info i {
            color: #2563eb;
            width: 16px;
        }

        .demo-note {
            text-align: center;
            color: #64748b;
            font-style: italic;
            margin-top: 1rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            .nav-menu {
                position: fixed;
                left: -100%;
                top: 70px;
                flex-direction: column;
                background-color: white;
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
                padding: 2rem 0;
            }

            .nav-menu.active {
                left: 0;
            }

            .language-switcher {
                margin-left: 0;
                margin-top: 1rem;
            }

            .language-dropdown {
                position: static;
                box-shadow: none;
                background: transparent;
                padding: 0;
                margin-top: 0.5rem;
            }

            .language-option {
                justify-content: center;
                padding: 0.5rem;
            }

            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

            .hero-buttons {
                justify-content: center;
            }

            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .steps {
                grid-template-columns: 1fr;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card.featured {
                transform: none;
            }

            .pricing-card.featured:hover {
                transform: translateY(-5px);
            }
        }

        @media (max-width: 480px) {
            .hero-content h1 {
                font-size: 2rem;
            }

            .features h2,
            .how-it-works h2,
            .demo h2,
            .pricing h2,
            .contact h2 {
                font-size: 2rem;
            }

            .btn-primary,
            .btn-secondary {
                padding: 0.8rem 1.5rem;
                font-size: 0.9rem;
            }
        }

        /* Floating WhatsApp Button */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            animation: whatsapp-pulse 2s infinite;
        }

        .whatsapp-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: #25d366;
            color: white;
            border-radius: 50%;
            text-decoration: none;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
        }

        .whatsapp-link:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
            color: white;
        }

        .whatsapp-link i {
            font-size: 30px;
        }

        @keyframes whatsapp-pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        /* Mobile responsive for WhatsApp button */
        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
            }

            .whatsapp-link {
                width: 50px;
                height: 50px;
            }

            .whatsapp-link i {
                font-size: 25px;
            }
        }

</style>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <a href="index.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
                    <img src="images/logo.png" alt=" Bavul Etiketi Logo" style="height:100px; width:auto; margin-right:10px; vertical-align:middle;">
                    
                </a>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html">Anasayfa</a></li>
                <li><a href="ozellikler.html">Özellikler</a></li>
                <li><a href="nasil-calisir.html">Nasıl Çalışır</a></li>
                <li><a href="fiyatlandirma.html">Fiyatlandırma</a></li>
                <li><a href="bavul-buldum.html">Bavul Buldum</a></li>
                <li><a href="iletisim.html">İletişim</a></li>
            </ul>
            <div class="language-switcher">
                <button class="language-btn" onclick="toggleLanguageDropdown()">
                    <div class="flag-icon flag-tr"></div>
                    <span>TR</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="language-dropdown" id="languageDropdown">
                    <div class="language-option active" onclick="changeLanguage('tr')">
                        <div class="flag-icon flag-tr"></div>
                        <span>Türkçe</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('en')">
                        <div class="flag-icon flag-en"></div>
                        <span>English</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('de')">
                        <div class="flag-icon flag-de"></div>
                        <span>Deutsch</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('fr')">
                        <div class="flag-icon flag-fr"></div>
                        <span>Français</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('es')">
                        <div class="flag-icon flag-es"></div>
                        <span>Español</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('ru')">
                        <div class="flag-icon flag-ru"></div>
                        <span>Русский</span>
                    </div>
                    <div class="language-option" onclick="changeLanguage('ar')">
                        <div class="flag-icon flag-ar"></div>
                        <span>العربية</span>
                    </div>
                </div>
            </div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1>Bavulunuzu Asla Kaybetmeyin!</h1>
                <p>QR kodlu akıllı etiket sistemi ile bavulunuzu güvenle takip edin. QR kodu okutarak anında bavul sahibine ulaşın.</p>
                <div class="hero-buttons">
                    <button class="btn-primary" onclick="window.location.href='https://www.findbyqr.com/qr/index.html'">Hemen Başlayın</button>
                    <a href="https://www.findbyqr.com/qr/luggageview.html?uid=ODM0OTk0NTEzMg==" target="_blank" ><button class="btn-primary">Demo Görüntüleyin</button></a>
                </div>
            </div>
            <div class="hero-image">
                <div class="hero-visual">
                    <div class="luggage-image">
                        <img src="images/bavul-qr.png" alt="QR Kodlu Bagaj Etiketi" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="qr-demo">
                        <div class="luggage-tag">
                            <img src="images/logo.webp" alt=" Bavul Etiketi Logo" style="width: 80px; height: auto; margin-bottom: 10px;">
                            <span> Bavul Etiketi</span>
                        </div>
                        <div class="scan-animation">
                            <i class="fas fa-mobile-alt"></i>
                            <div class="scan-line"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
        <div class="container">
            <h2>Neden  Bavul Etiketi?</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-visual secure"></div>
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Güvenli</h3>
                    <p>Kişisel bilgileriniz güvenle korunur, sadece gerekli bilgiler görüntülenir.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-visual fast"></div>
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>Hızlı</h3>
                    <p>QR kodu okutur okutmaz anında bavul sahibine ulaşın.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-visual universal"></div>
                    <div class="feature-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h3>Evrensel</h3>
                    <p>Dünyanın her yerinde çalışır, internet bağlantısı gerektirmez.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-visual durable"></div>
                    <div class="feature-icon">
                        <i class="fas fa-tag"></i>
                    </div>
                    <h3>Dayanıklı</h3>
                    <p>Su geçirmez ve dayanıklı malzeme ile uzun ömürlü kullanım.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works" class="how-it-works">
        <div class="container">
            <h2>Nasıl Çalışır?</h2>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <div class="step-visual step1"></div>
                        <h3>Etiketi Bavulunuza Takın</h3>
                        <p>QR kodlu etiketi bavulunuzun görünür bir yerine takın.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-visual step2"></div>
                        <h3>QR Kodu Okutun</h3>
                        <p>Herhangi bir QR kod okuyucu ile etiketteki kodu tarayın.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <div class="step-visual step3"></div>
                        <h3>Bavul Sahibine Ulaşın</h3>
                        <p>Anında bavul sahibinin iletişim bilgilerine erişin.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Demo Section -->
    <section class="demo">
        <div class="container">
            <div class="demo-content">
                <h2>Canlı Demo</h2>
                <p>QR kodunu okutarak nasıl çalıştığını deneyin</p>
                <div class="demo-qr">
                    <div class="qr-code">
                        <img src="images/qr-code.jpg" alt="QR Code" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>

                    <a href="https://www.findbyqr.com/qr/luggageview.html?uid=ODM0OTk0NTEzMg==" target="_blank" > 
                    <button class="btn-primary">QR Kodu Okut</button></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="pricing">
        <div class="container">
            <h2>Fiyatlandırma</h2>
            <div class="pricing-grid">
                <div class="pricing-card">
                    <h3>Başlangıç</h3>
                    <div class="price">₺300</div>
                    <ul>
                        <li>1 QR Kodlu Etiket</li>
                       
                        <li>7/24 Destek</li>
                        <li>Ücretsiz Kargo</li>
                    </ul>
                    <a href="siparis-baslangic.html" class="btn-primary">Hemen Sipariş Ver</a>
                </div>
                <div class="pricing-card featured">
                    <div class="popular">En Popüler</div>
                    <h3>Aile Paketi</h3>
                    <div class="price">₺1000</div>
                    <ul>
                        <li>4 QR Kodlu Etiket</li>
                   
                        <li>7/24 Destek</li>
                        <li>Ücretsiz Kargo</li>
                  
                    </ul>
                    <a href="siparis-aile.html" class="btn-primary">Hemen Sipariş Ver</a>
                </div>
                <div class="pricing-card">
                    <h3>Kurumsal</h3>
                    <div class="price">₺2000</div>
                    <ul>
                        <li>10 QR Kodlu Etiket</li>
                        <li>7/24 Öncelikli Destek</li>
                        <li>Ücretsiz Kargo</li>
                       
                     
                    </ul>
                    <a href="siparis-kurumsal.html" class="btn-primary">Hemen Sipariş Ver</a>
                </div>

                <div class="pricing-card">
                    <h3>Özel Paket</h3>
                    <div class="price">Özel</div>
                    <ul>
                        <li>İstenilen Adette Özel Tasarım</li>
                  
                        <li>7/24 Öncelikli Destek</li>
                        <li>Ücretsiz Kargo</li>
                       
                     
                    </ul>
                    <a href="siparis-ozelpaket.html" class="btn-primary">Hemen Sipariş Ver</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>İletişim</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Bizimle İletişime Geçin</h3>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <span>info@demsoftyazilim.com</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>05325402564</span>
                    </div>
                    <div class="contact-item">
                        <i class="fab fa-whatsapp"></i>
                        <span><a href="https://wa.me/905325402564" target="_blank" style="color: inherit; text-decoration: none;">05325402564 (WhatsApp)</a></span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>İstanbul, Türkiye</span>
                    </div>
                </div>
                <form class="contact-form">
                    <input type="text" placeholder="Adınız" required>
                    <input type="email" placeholder="E-posta" required>
                    <input type="tel" placeholder="Telefon">
                    <textarea placeholder="Mesajınız" rows="5" required></textarea>
                    <button type="submit" class="btn-primary">Gönder</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Blog/SEO Section -->
    <section class="blog-section" style="background:#f8fafc; padding: 4rem 0; border-top:1px solid #e5e7eb;">
      <div class="container">
        <h2 style="font-size:2.5rem; font-weight:700; color:#1e293b; margin-bottom:3rem; text-align:center;">Seyahat Rehberi & İpuçları</h2>
        <div class="blog-grid" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:2rem; margin-bottom:3rem;">
          
          <!-- Blog Card 1 -->
          <div class="blog-card" style="background:white; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.1); transition:transform 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="blog-image" style="height:200px; background:url('images/bavul-1.jpg') center/cover no-repeat;">
            </div>
            <div class="blog-content" style="padding:1.5rem;">
              <h3 style="font-size:1.3rem; font-weight:700; color:#1e293b; margin-bottom:1rem;">Neden  Bavul Etiketi Kullanmalıyız?</h3>
              <p style="color:#64748b; line-height:1.6; margin-bottom:1.5rem;">Her yıl binlerce bavul havalimanlarında kaybolmakta veya yanlış ellere geçmektedir.  Bavul Etiketi ile bavulunuzu kaybetme riskini en aza indirin...</p>
              <a href="neden-akilli-bavul-etiketi-kullanmaliyiz.html" class="btn-primary" style="display:inline-block; padding:0.75rem 1.5rem; background:#2563eb; color:white; text-decoration:none; border-radius:8px; font-weight:600; transition:all 0.3s ease;" onmouseover="this.style.background='#1d4ed8'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#2563eb'; this.style.transform='translateY(0)'">Devamını Oku</a>
            </div>
          </div>

          <!-- Blog Card 2 -->
          <div class="blog-card" style="background:white; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.1); transition:transform 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="blog-image" style="height:200px; background:url('images/bavul-2.webp') center/cover no-repeat;">
            </div>
            <div class="blog-content" style="padding:1.5rem;">
              <h3 style="font-size:1.3rem; font-weight:700; color:#1e293b; margin-bottom:1rem;">Seyahat Güvenliği İçin 10 Altın Kural</h3>
              <p style="color:#64748b; line-height:1.6; margin-bottom:1.5rem;">Seyahatlerinizde bavulunuzu ve eşyalarınızı güvende tutmak için uygulamanız gereken önemli güvenlik kuralları ve ipuçları...</p>
              <a href="seyahat-guvenligi.html" class="btn-primary" style="display:inline-block; padding:0.75rem 1.5rem; background:#2563eb; color:white; text-decoration:none; border-radius:8px; font-weight:600; transition:all 0.3s ease;" onmouseover="this.style.background='#1d4ed8'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#2563eb'; this.style.transform='translateY(0)'">Devamını Oku</a>
            </div>
          </div>

          <!-- Blog Card 3 -->
          <div class="blog-card" style="background:white; border-radius:16px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.1); transition:transform 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="blog-image" style="height:200px; background:url('images/3.webp') center/cover no-repeat;">
            </div>
            <div class="blog-content" style="padding:1.5rem;">
              <h3 style="font-size:1.3rem; font-weight:700; color:#1e293b; margin-bottom:1rem;">QR Kod Teknolojisi ve Geleceği</h3>
              <p style="color:#64748b; line-height:1.6; margin-bottom:1.5rem;">QR kod teknolojisinin gelişimi, günlük hayatımızdaki kullanım alanları ve seyahat sektöründeki yenilikçi uygulamaları...</p>
              <a href="qr-kod-teknolojisi.html" class="btn-primary" style="display:inline-block; padding:0.75rem 1.5rem; background:#2563eb; color:white; text-decoration:none; border-radius:8px; font-weight:600; transition:all 0.3s ease;" onmouseover="this.style.background='#1d4ed8'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#2563eb'; this.style.transform='translateY(0)'">Devamını Oku</a>
            </div>
          </div>

        </div>
      </div>
    </section>
    <!-- /Blog/SEO Section -->
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="footer-logo">
                        <img src="images/logo1.png" alt=" Bavul Etiketi Logo" style="height:40px; margin-right:10px; vertical-align:middle;">
                        <span> Bavul Etiketi</span>
                    </div>
                    <p>Bavulunuzu güvenle takip edin, asla kaybetmeyin.</p>
                </div>
                <div class="footer-section">
                    <h4>Hızlı Linkler</h4>
                    <ul>
                        <li><a href="#home">Anasayfa</a></li>
                        <li><a href="#features">Özellikler</a></li>
                        <li><a href="#how-it-works">Nasıl Çalışır</a></li>
                        <li><a href="#pricing">Fiyatlandırma</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>İletişim</h4>
                    <ul>
                        <li>info@demsoftyazilim.com</li>
                        <li>0212 281 87 77</li>
                        <li><a href="https://wa.me/905325402564" target="_blank" style="color: inherit; text-decoration: none;">05325402564 (WhatsApp)</a></li>
                        <li>İstanbul, Türkiye</li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Sosyal Medya</h4>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; <a href="https://findbyqr.com" style="color: inherit; text-decoration: none;"> Bavul Etiketi</a>. Tüm hakları saklıdır.</p>
            </div>
        </div>
    </footer>

    <!-- Demo Modal -->
    <div id="demoModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Bavul Sahibi Bilgileri</h2>
            <div class="demo-card">
                <div class="demo-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="demo-info">
                    <h3>Ahmet Yılmaz</h3>
                    <p><i class="fas fa-phone"></i> +90 532 123 4567</p>
                    <p><i class="fas fa-envelope"></i> ahmet.yilmaz@email.com</p>
                    <p><i class="fas fa-map-marker-alt"></i> İstanbul, Türkiye</p>
                </div>
            </div>
            <p class="demo-note">Bu bir demo örneğidir. Gerçek kullanımda bavul sahibinin bilgileri görüntülenir.</p>
        </div>
    </div>

    <script src="script.js"></script>
    
    <!-- Floating WhatsApp Button -->
    <div class="whatsapp-float">
        <a href="https://wa.me/905325402564" target="_blank" class="whatsapp-link">
            <i class="fab fa-whatsapp"></i>
        </a>
    </div>
</body>
</html>