/* ========================================================
         BASE & TYPOGRAPHY (Roboto & Color Palette)
      ======================================================== */
      :root {
        --primary-blue: #3059a4;
        --primary-blue-hover: #004ed2;
        --navy-dark: #081a33;
        --navy-darker: #051326;
        --text-dark: #111827;
        --text-muted-custom: #64748b;
        --border-color: #e2e8f0;
        --card-border: #eceff3;
      }

      * {
        box-sizing: border-box;
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: 'Roboto', sans-serif;
        color: var(--text-dark);
        font-weight: 700;
		text-transform:none !important;
      }

      /* ========================================================
         BUTTONS & LINKS
      ======================================================== */
      .hero-section .btn-blue {
        background-color: var(--primary-blue);
        color: #ffffff;
        font-weight: 700;
        font-size: 17px;
        padding: 11px 26px;
        border-radius: 8px;
        border: none;
        display: inline-block;
        text-decoration: none;
        transition: all 0.25s ease;
        box-shadow: 0 4px 14px rgba(0, 98, 255, 0.22);
      }

      .hero-section .btn-blue:hover {
        background-color: var(--primary-blue-hover);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 98, 255, 0.35);
        text-decoration: none;
      }

      .btn-white {
        background-color: #ffffff;
        color: var(--navy-dark);
        font-weight: 700;
        font-size: 15px;
        padding: 11px 28px;
        border-radius: 8px;
        border: none;
        display: inline-block;
        text-decoration: none;
        transition: all 0.25s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
      }

      .btn-white:hover {
        background-color: #f1f5f9;
        color: var(--navy-dark);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        text-decoration: none;
      }

      .link-dark-underline {
        color: var(--text-dark);
        font-weight: 700;
        font-size: 16px;
        text-decoration: underline;
        text-underline-offset: 4px;
        transition: color 0.2s ease;
      }

      .link-dark-underline:hover {
        color: var(--primary-blue);
        text-decoration: underline;
      }

      .link-white-underline {
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
        text-decoration: underline;
        text-underline-offset: 4px;
        transition: opacity 0.2s ease;
      }

      .link-white-underline:hover {
        color: #ffffff;
        opacity: 0.85;
        text-decoration: underline;
      }

      .link-blue {
        color: var(--primary-blue);
        font-weight: 600;
        font-size: 15px;
        text-decoration: underline;
        text-underline-offset: 4px;
        transition: all 0.2s ease;
      }

      .link-blue:hover {
        color: var(--primary-blue-hover);
        text-decoration: underline;
      }

      /* ========================================================
         HERO SECTION & QR BOX
      ======================================================== */
      .hero-section {
        padding-top: 80px;
        padding-bottom: 90px;
		background-color: #f8fafc;
      }

      .hero-kicker {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.8px;
        color: #1e293b;
        text-transform: uppercase;
        margin-bottom: 18px;
      }

      .hero-title {
        font-size: 51px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -1px;
        color: #0b1523;
        margin-bottom: 18px !important;
      }

      .hero-subtitle {
        font-size: 18px;
        color: #4b5563;
        line-height: 1.5;
        margin-bottom: 34px;
      }

      .qr-card-box {
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 18px 22px;
        max-width: 300px;
        background: #ffffff;
        display: flex;
        align-items: center;
        transition: all 0.25s ease;
      }

      .qr-card-box:hover {
        border-color: #94a3b8;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
      }

      .qr-dashed-icon {
        width: 74px;
        height: 74px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #0f172a;
        margin-right: 18px;
        flex-shrink: 0;
        background-color: #f8fafc;
      }
	  .qr-dashed-icon img {width:100%;display:block;}

      .qr-text-title {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 4px;
      }

      .qr-text-desc {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 0;
        line-height: 1.4;
      }

      /* ========================================================
         PHONE MOCKUP WITH app.jpeg & GOLDEN SHAPE
      ======================================================== */
      .phone-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
      }

      /* The golden yellow / orange crescent backdrop in landingpage.png */
      .phone-yellow-backdrop {
        position: absolute;
        top: 20%;
        right: -36px;
        width: 125px;
        height: 250px;
        background-color: #f59e0b;
        border-top-right-radius: 125px;
        border-bottom-right-radius: 125px;
        z-index: 1;
      }

      .phone-device-outer {
        position: relative;
        z-index: 2;
        width: 100%;
        background-color: #0a111e;
        border-radius: 46px;
        padding: 10px;
        box-shadow: 0 30px 70px -15px rgba(10, 20, 35, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
      }

      .phone-device-outer:hover {
        transform: translateY(-8px);
        box-shadow: 0 40px 85px -15px rgba(10, 20, 35, 0.45);
      }

      .phone-device-inner {
        position: relative;
        width: 100%;
        border-radius: 36px;
        overflow: hidden;
        background-color: #04171d;
        aspect-ratio: 9 / 19.2;
      }

      .phone-notch-bar {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 84px;
        height: 16px;
        background-color: #000000;
        border-radius: 10px;
        z-index: 10;
      }

      .phone-app-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
      }

      /* ========================================================
         BOX ELEMENTS & HOVER ANIMATIONS
      ======================================================== */
      .hover-box {
        background: #ffffff;
        border: 1px solid var(--card-border);
        border-radius: 16px;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
        will-change: transform, box-shadow;
      }

      .hover-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 35px -8px rgba(0, 98, 255, 0.12), 0 0 1px 1px rgba(0, 98, 255, 0.1);
        border-color: rgba(0, 98, 255, 0.35);
      }

      .hover-box:hover .icon-box {
        transform: scale(1.08);
      }

      .icon-box {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Step Card (3 Adım) */
      .step-card {
        padding: 34px 30px;
        height: 100%;
      }

      .step-icon-bg {
        width: 48px;
        height: 48px;
        border-radius: 100%;
        background-color: #e6f0ff;
        color: var(--primary-blue);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .step-number {
        font-size: 38px;
        font-weight: 700;
        color: #dbe8fe;
        line-height: 1;
      }

      .step-title {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin-top: 24px;
        margin-bottom: 10px;
		text-transform:none;
      }

      .step-desc {
        font-size: 15px;
        color: var(--text-muted-custom);
        line-height: 1.55;
        margin-bottom: 0;
      }

      /* Feature Section (Hesabınızla neler yapabilirsiniz?) */
      .features-section {
        background-color: #f8fafc;
        padding-top: 100px;
        padding-bottom: 80px;
      }

      .features-left-title {
        font-size: 42px;
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -0.5px;
        color: #0f172a;
        margin-bottom: 24px;
      }

      .feature-card {
        padding: 30px 28px;
        height: 100%;
      }

      .feature-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        background-color: var(--primary-blue);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
      }

      .feature-title {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
		text-transform:none;
      }

      .feature-desc {
        font-size: 14.5px;
        color: var(--text-muted-custom);
        line-height: 1.5;
        margin-bottom: 0;
      }

      /* ========================================================
         FAQ SECTION ("Sık sorulan sorular" - Clean Link Only)
      ======================================================== */
      .faq-section {
        padding-top: 90px;
        padding-bottom: 100px;
        background-color: #ffffff;
      }

      .faq-section-title {
        font-size: 38px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 40px;
        letter-spacing: -0.5px;
      }

      .faq-card {
        padding: 30px 28px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .faq-title {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 24px;
        line-height: 1.4;
		text-transform:none;
      }

      /* ========================================================
         FOOTER HERO CTA BANNER
      ======================================================== */
      .footer-banner {
        background-color: var(--navy-dark);
        color: #ffffff;
        padding-top: 90px;
        padding-bottom: 90px;
        text-align: center;
      }

      .footer-title {
        font-size: 46px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 16px;
        letter-spacing: -0.5px;
      }

      .footer-subtitle {
        font-size: 18px;
        color: #94a3b8;
        margin-bottom: 34px;
      }

      /* ========================================================
         SCROLL & LOAD ANIMATION TRIGGER CLASSES
      ======================================================== */
      .anim-reveal {
        opacity: 0;
        transform: translateY(35px);
        transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
      }

      .anim-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Responsive rules */
      @media (max-width: 991px) {
        .hero-section {
          padding-top: 50px;
          padding-bottom: 60px;
          text-align: center;
        }

        .hero-title {
          font-size: 36px;
        }

        .qr-card-box {
          margin: 0 auto;
          text-align: left;
        }

        .phone-wrapper {
          margin-top: 40px;
        }

        .features-left-title {
          font-size: 32px;
          margin-bottom: 16px;
        }

        .footer-title {
          font-size: 34px;
        }
      }