:root {
        --tw-color-primary: 214 0 28;
        --tw-color-primary-dark: 163 0 21;
        --tw-color-secondary: 15 23 42;
        --tw-color-glass: rgba(255, 255, 255, 0.65);
        --tw-color-glass-border: rgba(255, 255, 255, 0.4);
        --tw-color-glass-hover: rgba(255, 255, 255, 0.85);
        --theme-primary: #d6001c;
      }
    

              body {
                font-family: "Outfit", sans-serif;
                background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%);
                background-attachment: fixed;
                color: #334155;
              }
              .glass-panel {
                background: var(--tw-colors-glass);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid var(--tw-colors-glassBorder);
                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
              }
              .glass-card {
                background: rgba(255, 255, 255, 0.5);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.6);
                transition: all 0.3s ease;
              }
              .glass-card:hover {
                background: rgba(255, 255, 255, 0.9);
                transform: translateY(-3px);
                box-shadow: 0 15px 30px rgba(14, 165, 233, 0.15);
                border-color: #0ea5e9;
              }
              .sticky-btn {
                position: fixed;
                bottom: 25px;
                z-index: 50;
                padding: 12px 24px;
                border-radius: 50px;
                display: flex;
                align-items: center;
                gap: 10px;
                font-weight: 600;
                box-shadow: 0 10px 25px rgba(0,0,0,0.15);
                transition: transform 0.3s ease;
                backdrop-filter: blur(5px);
              }
              .sticky-btn:hover { transform: translateY(-3px); }
            

      /* ============== PREMIUM GLOBAL UI v2 ============== */
      html { scroll-behavior: smooth; }
      *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
      ::selection { background: var(--theme-primary, #d6001c); color: #fff; }

      /* Smooth fade-in for content sections */
      @keyframes fadeUp { from { opacity: 0; transform: translateY(24px);} to { opacity: 1; transform: none; } }
      .reveal { animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both; }

      /* Floating blob backgrounds */
      @keyframes blob {
        0%, 100% { transform: translate(0,0) scale(1); }
        33% { transform: translate(30px,-50px) scale(1.1); }
        66% { transform: translate(-20px,20px) scale(.95); }
      }
      .animate-blob { animation: blob 14s ease-in-out infinite; }
      .animation-delay-2000 { animation-delay: 2s; }
      .animation-delay-4000 { animation-delay: 4s; }

      /* Yatay kaymayi engelle: dekoratif bloblar/animasyonlar viewport disina tasmasin.
         overflow-x:clip kullaniyoruz cunku sticky header'i bozmaz (hidden bozar). */
      html, body { overflow-x: clip; max-width: 100%; }

      /* Premium car card master styles (apply to .car-card across all themes) */
      .car-card {
        will-change: transform, box-shadow;
        position: relative;
      }

      /* Featured grid - hayalet bo grid hcrelerini gizle (PHP notice/whitespace yznden olusan) */
      .featured-grid > *:empty,
      .featured-grid > br,
      .featured-grid > p:empty,
      .featured-grid > div:empty { display: none !important; }
      /* SADECE .car-card-wrapper grid item olabilir; geriye kalan her child gizlensin */
      .featured-grid > *:not(.car-card-wrapper) { display: none !important; }
      /* Wrapper sadece kart iin atlama; grid hcresi olarak kart gibi davransn */
      .car-card-wrapper { display: flex; flex-direction: column; height: 100%; }
      .car-card-wrapper > .car-card { flex: 1 1 auto; }
      .car-card-wrapper:empty { display: none !important; }
      .car-card::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: 0 0 0 0 transparent;
        transition: box-shadow .45s ease, transform .45s ease;
      }
      .car-card:hover { transform: translateY(-6px); }
      .car-card:hover::after { box-shadow: 0 30px 60px -20px rgba(15,23,42,0.25); }

      /* Image kenburns subtle pan on hover */
      .car-card img {
        transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s ease;
      }
      .car-card:hover img { transform: scale(1.08); }

      /* Glass shimmer */
      .shimmer {
        position: relative; overflow: hidden;
      }
      .shimmer::before {
        content:""; position:absolute; top:0; left:-150%; width:50%; height:100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-20deg);
        transition: left .9s ease;
      }
      .shimmer:hover::before { left: 150%; }

      /* Sticky button float */
      @keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
      .sticky-btn { animation: float 3.6s ease-in-out infinite; }
      .sticky-btn:hover { animation-play-state: paused; }

      /* Section divider */
      .section-divider {
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,.08), transparent);
      }

      /* Buttons polish */
      a, button { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }

      /* Mobile menu glass */
      #mobile-menu { box-shadow: 0 20px 50px rgba(0,0,0,.08); }

      /* Reduce-motion respect */
      @media (prefers-reduced-motion: reduce) {
        .animate-blob, .sticky-btn, .reveal { animation: none !important; }
        .car-card { transition: none !important; }
      }
    

      .hero-banner {
        background-image: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=2074&auto=format&fit=crop');
        background-position: center;
        background-size: cover;
        height: 350px;
        position: relative;
      }
      .hero-overlay {
        background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(14, 165, 233, 0.3));
      }
      .map-container {
          border-radius: 1rem;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.5);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }
    

        /* === Sabit Destek Butonları v4 — daire + altında etiket (WhatsApp sağ / Canlı Destek sol) === */
        .fab-btn{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:99990;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;border:0;background:transparent;cursor:pointer;padding:0;transition:transform .25s ease}
        .fab-btn:hover{transform:translateY(-4px)}
        .fab-btn .fab-ic{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:box-shadow .25s ease}
        .fab-btn:hover .fab-ic{box-shadow:0 14px 34px rgba(0,0,0,.3)}
        .fab-btn .fab-ic i,.fab-btn .fab-ic svg{font-size:30px;width:30px;height:30px}
        .fab-cap{font-size:12px;font-weight:700;color:#fff;background:rgba(15,23,42,.8);padding:3px 11px;border-radius:20px;line-height:1.25;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2)}
        .fab-wa{right:22px}.fab-wa .fab-ic{background:#25D366}
        .fab-wa .fab-ic svg{width:34px;height:34px}
        .fab-chat{left:22px}.fab-chat .fab-ic{background:linear-gradient(135deg,#fb7185,#dc2626)}
        .fab-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:fabPulse 1.8s ease-in-out infinite}
        @keyframes fabPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.7}}
        /* Telefon butonu (varsa) alt katman + güvenli alan */
        .sticky-btn{z-index:99990!important;bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
        @media(max-width:768px){
            .fab-btn{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
            .fab-wa{right:14px}.fab-chat{left:14px}
            .fab-btn .fab-ic{width:54px;height:54px}
            .fab-btn .fab-ic i,.fab-btn .fab-ic svg{font-size:26px;width:26px;height:26px}
            .fab-cap{font-size:11px;padding:2px 9px}
            .sticky-btn{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
        }