/* ------------------------------------------------ ANASAYFA SLİDER ---------------------------------------------------------------- */
      .hero {
        position: relative;
        border-bottom: 1px solid var(--border);
        background: radial-gradient(
            800px 400px at 10% -20%,
            #ede8ff 0%,
            transparent 60%
          ),
          radial-gradient(800px 400px at 90% -10%, #eef9ff 0%, transparent 60%),
          #fff;
      }
      .hero .container {
        padding: 22px 20px 34px;
      }
      .hs-viewport {
        position: relative;
        overflow: hidden;
        /* border-radius: 22px; */
        border: 1px solid var(--border);
        background: #fff;
        box-shadow: 0 10px 26px rgba(20, 20, 20, 0.06);
        width: 95vw;         /* ekranın tamamını kapsar */
  margin-left: 50%;
  transform: translateX(-50%); /* container ortalanır */
  border-radius: 0;
      }
      .hs-track {
        display: flex;
        will-change: transform;
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        touch-action: pan-y;
      }
      .hs-slide {
        min-width: 100%;
        position: relative;
        isolation: isolate;
      }
      .hs-media {
        height: 600px;
        overflow: hidden;
        border-radius: 22px;
      }
      .hs-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.03);
        transition: transform 1.2s ease;
      }
      .hs-slide:hover .hs-media img {
        transform: scale(1.07);
      }
      .hs-grad {
        position: absolute;
        inset: 0;
        border-radius: 22px;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 35%,
          rgba(0, 0, 0, 0.55)
        );
      }
      .hs-caption {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 20px;
        z-index: 2;
        color: #fff;
      }
      .hs-kicker {
        display: inline-block;
        margin-bottom: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #fff;
        color: var(--accent);
        font-weight: 800;
        border: 1px solid var(--border);
        box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18);
      }
      .hs-title {
        margin: 6px 0 2px;
        font-size: clamp(20px, 3.4vw, 34px);
        font-weight: 900;
        letter-spacing: 0.3px;
      }
      .hs-sub {
        margin: 0;
        opacity: 0.9;
      }
      .hs-cta {
        margin-top: 10px;
        display: flex;
        gap: 10px;
      }
      .btn.pill {
        border-radius: 999px;
      }
      .hs-dots {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 7px;
        padding: 10px 0;
      }
      .hs-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #e8dbff;
        transition: 0.25s;
      }
      .hs-dot.active {
        width: 22px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
      }
      @media (max-width: 640px) {
        .hs-media {
          height: 300px;
        }
      } 
   
/* ------------------------------------------------ ANSAYFA SLİDER ---------------------------------------------------------------- */

  /* ------------------------------------------ ANASAYFA RENKLİ KUTUCUKLAR -------------------------------------------------------- */
      .features {
        padding: 28px 20px 42px;
      }
      .features .head {
        display: flex;
        align-items: end;   
        justify-content: space-between;
        gap: 16px;
        margin: 6px 0 18px;
      }
      .h-title {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0.2px;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .h-sub {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }
      .grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
      @media (min-width: 640px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 900px) {
        .grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (min-width: 1180px) {
        .grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .tile {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        padding: 16px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid var(--border);
        box-shadow: 0 10px 24px rgba(18, 18, 18, 0.05);
        background: #fff;
      }
      .tile .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        color: #4a3a77;
        background: #f3ecff;
        border: 1px solid #e9e2ff;
      }
      .tile .title {
        margin: 10px 0 6px;
        font-size: 18px;
        font-weight: 900;
        color: #2b2450;
      }
      .tile .desc {
        margin: 0;
        color: #6b6491;
        font-size: 13px;
      }
      .tile .emoji {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 28px;
        opacity: 0.95;
      }
      .tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(124, 58, 237, 0.12);
      }
      .tile .cta-line {
        display: flex;
        gap: 8px;
        margin-top: 12px;
      }
      .chip {
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid var(--border);
        font-size: 12px;
        color: #5c3baf;
        background: #fff;
      }
      .chip.fill {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #fff;
        border-color: transparent;
      }

      .p1 {
        background: linear-gradient(135deg, #faf5ff, #f3ecff);
      }
      .p2 {
        background: linear-gradient(135deg, #f0f9ff, #f1eeff);
      }
      .p3 {
        background: linear-gradient(135deg, #fff7ed, #f6f3ff);
      }
      .p4 {
        background: linear-gradient(135deg, #f0fdfa, #f6f3ff);
      }

      /* Kutular görünür olunca tek seferlik 360° dönüş animasyonu */
      @keyframes spinOnce {
        0% {
          transform: rotate(0deg) scale(0.98);
        }
        60% {
          transform: rotate(360deg) scale(1.02);
        }
        100% {
          transform: rotate(360deg) scale(1);
        }
      }
      .tile {
        transform-origin: 50% 50%;
        will-change: transform;
      }
      .tile.spin-once {
        animation: spinOnce 2000ms cubic-bezier(0.22, 0.7, 0.24, 1) both;
      }
      @media (prefers-reduced-motion: reduce) {
        .tile.spin-once {
          animation: none !important;
        }
      }

   /* ----------------------------------------------- ANASAYFA RENKLİ KUTUCUKLAR -------------------------------------------------- */