/* Extracted from templates/fragments/simulators.html */
/* Card is fully clickable */
    #simulatorler .sim-card {
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;
      transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.32s ease;
    }

    #simulatorler .sim-card:hover {
      transform: translateY(-5px);
    }

    /* ── Image hover swap ── */
    #simulatorler .sim-img {
      position: relative;
    }

    #simulatorler .sim-img img.sim-img-default,
    #simulatorler .sim-img img.sim-img-hover {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #simulatorler .sim-img img.sim-img-default {
      opacity: 1;
      z-index: 1;
    }

    #simulatorler .sim-img img.sim-img-hover {
      opacity: 0;
      z-index: 2;
    }

    /* On hover: show cockpit, hide exterior */
    #simulatorler .sim-card:hover .sim-img img.sim-img-default {
      opacity: 0;
    }
    #simulatorler .sim-card:hover .sim-img img.sim-img-hover {
      opacity: 1;
    }

    /* When expanded: hide both default images, show gallery */
    #simulatorler .sim-card.expanded .sim-img img.sim-img-default,
    #simulatorler .sim-card.expanded .sim-img img.sim-img-hover {
      opacity: 0;
      pointer-events: none;
    }

    /* Image always visible — zoom subtly on expand */
    #simulatorler .sim-img img {
      transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #simulatorler .sim-card.expanded .sim-img img {
      transform: scale(1.045);
    }

    /* ── Gallery slider ── */
    .sim-gallery {
      position: absolute;
      inset: 0;
      z-index: 3;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      overflow: hidden;
    }

    #simulatorler .sim-card.expanded .sim-gallery {
      opacity: 1;
      pointer-events: auto;
    }

    .sim-gallery-track {
      display: flex;
      height: 100%;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sim-gallery-slide {
      min-width: 100%;
      height: 100%;
      flex-shrink: 0;
    }

    .sim-gallery-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sim-gallery-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.2s ease;
      opacity: 0;
    }

    #simulatorler .sim-card.expanded .sim-gallery-btn {
      opacity: 1;
    }

    .sim-gallery-btn:hover {
      background: rgba(0, 0, 0, 0.75);
      transform: translateY(-50%) scale(1.1);
    }

    .sim-gallery-prev { left: 10px; }
    .sim-gallery-next { right: 10px; }

    .sim-gallery-dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    #simulatorler .sim-card.expanded .sim-gallery-dots {
      opacity: 1;
    }

    .sim-gallery-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.35);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .sim-gallery-dot.active {
      background: rgba(255, 255, 255, 0.95);
      transform: scale(1.25);
    }

    .sim-gallery-dot:hover {
      background: rgba(255, 255, 255, 0.7);
    }

    /* Colored rim that flashes once on open */
    #simulatorler .sim-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1.5px solid transparent;
      transition: border-color 0.35s ease, box-shadow 0.35s ease;
      pointer-events: none;
      z-index: 2;
    }

    #simulatorler .sim-card.expanded::before {
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 20px 60px rgba(0, 0, 0, 0.4);
    }

    /* ── Expand CTA (sits at bottom of image, always visible) ── */
    .sim-expand-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 18px 11px 16px;
      background: rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      transition: background 0.25s ease;
    }

    #simulatorler .sim-card:hover .sim-expand-bar {
      background: rgba(0, 0, 0, 0.52);
    }

    #simulatorler .sim-card.expanded .sim-expand-bar {
      background: rgba(0, 0, 0, 0.55);
    }

    .sim-expand-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
      transition: color 0.2s ease;
    }

    #simulatorler .sim-card:hover .sim-expand-label,
    #simulatorler .sim-card.expanded .sim-expand-label {
      color: rgba(255, 255, 255, 1);
    }

    .sim-expand-icon-wrap {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.13);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.22s ease;
    }

    .sim-expand-icon-wrap i {
      font-size: 0.66rem;
      color: rgba(255, 255, 255, 0.9);
      transition: color 0.2s ease;
    }

    #simulatorler .sim-card.expanded .sim-expand-icon-wrap {
      transform: rotate(180deg);
      background: rgba(255, 255, 255, 0.24);
    }

    /* Location badge always shown in the bar */
    .sim-location-chip {
      font-size: 0.72rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #simulatorler .sim-card.expanded .sim-location-chip {
      opacity: 0;
      transform: scale(0.82);
      pointer-events: none;
    }

    /* ── Collapsible body — spring slide-in ── */
    .sim-body-wrap {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.58s cubic-bezier(0.34, 1.28, 0.64, 1),
      opacity 0.4s ease 0.06s;
    }

    #simulatorler .sim-card.expanded .sim-body-wrap {
      max-height: 700px;
      opacity: 1;
    }

    /* ── Ripple ── */
    .sim-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transform: scale(0);
      animation: sim-ripple 0.6s ease-out forwards;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes sim-ripple {
      to {
        transform: scale(6);
        opacity: 0;
      }
    }