@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bebas+Neue&family=Space+Grotesk:wght@500;600;700&display=swap');
    :root {
      --bg: #ffffff;
      --bg-soft: #f7f7f7;
      --card: #ffffff;
      --card-2: #111111;
      --text: #111111;
      --muted: #525252;
      --line: rgba(0,0,0,.08);
      --red: #b91c1c;
      --red-dark: #991b1b;
      --red-soft: rgba(185,28,28,.08);
      --black: #111111;
      --white: #ffffff;
      --container: 1180px;
      --shadow: 0 14px 34px rgba(0,0,0,.08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { width: min(var(--container), calc(100% - 28px)); margin: 0 auto; }
    .section { padding: 78px 0; }
    .service-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
      margin-top: 4px;
    }
    .service-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 17px;
      border-radius: 999px;
      background: #ffffff;
      color: #111111;
      border: 1px solid rgba(185,28,28,.18);
      box-shadow: 0 8px 18px rgba(185,28,28,.06);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .01em;
      position: relative;
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .service-badge::before {
      content: none;
    }
    .service-badge::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(185,28,28,.12) 48%, transparent 74%);
      transform: translateX(-130%);
      animation: softShine 3.8s ease-in-out infinite;
    }
    .service-badge:hover {
      transform: translateY(-2px);
      border-color: rgba(185,28,28,.35);
      box-shadow: 0 14px 28px rgba(185,28,28,.13);
    }
    .service-badge strong,
    .service-badge span {
      position: relative;
      z-index: 1;
    }
    .service-badge strong { color: var(--red); }
    .badge-prefix {
      color: #111111;
      font-family: "Space Grotesk", Arial, sans-serif;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .02em;
      position: relative;
      z-index: 1;
    }
    .badge-icon {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 20px;
    }
    .badge-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .text-shine {
      background: linear-gradient(90deg, #111111 0%, #b91c1c 38%, #111111 76%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: textShine 4.2s ease-in-out infinite;
    }
    .color-swap {
      animation: colorSwap 4.8s ease-in-out infinite;
    }
    .typing-line {
      min-height: 30px;
      font-family: "Space Grotesk", Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #1f1f1f;
      margin: 0 0 14px;
      letter-spacing: .02em;
    }
    .typing-line span {
      display: inline-flex;
      align-items: center;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(17,17,17,.05);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 8px 18px rgba(0,0,0,.04);
      border-right: 0;
      position: relative;
    }
    .typing-line span::after {
      content: "";
      width: 2px;
      height: 16px;
      margin-left: 5px;
      border-radius: 999px;
      background: #7f1d1d;
      animation: cursorBlink .85s step-end infinite;
    }
    .word-pop {
      display: inline-block;
      animation: wordPop 2.8s ease-in-out infinite;
    }
    .label {
      color: var(--red);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .18em;
      margin-bottom: 10px;
    }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.05; margin-bottom: 18px; }
    h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; margin-bottom: 14px; }
    h3 { font-size: 22px; margin-bottom: 10px; }
    .muted { color: var(--muted); }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .55s ease, transform .55s ease;
      will-change: opacity, transform;
    }
    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

    .top-bar {
      background:
        radial-gradient(circle at 8% 50%, rgba(185,28,28,.42), transparent 18%),
        linear-gradient(135deg, #111111 0%, #1f1f1f 48%, #7f1d1d 100%);
      color: var(--white);
      font-size: 13px;
      font-weight: 900;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .top-bar::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(135deg, rgba(250,204,21,.95) 0 14px, rgba(17,17,17,.95) 14px 28px);
      width: 210px;
      opacity: .92;
      transform: skewX(-18deg) translateX(-28px);
    }
    .top-bar::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 24%, rgba(255,255,255,.12) 46%, transparent 70%);
      transform: translateX(-120%);
      animation: topBarShine 4.6s ease-in-out infinite;
    }
    .top-bar .container {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
      position: relative;
      z-index: 1;
      letter-spacing: .03em;
    }
    .top-bar .container::before {
      content: "⚠";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #facc15;
      color: #111111;
      box-shadow: 0 0 0 5px rgba(250,204,21,.1);
      flex: 0 0 auto;
    }
    .top-bar strong {
      color: #facc15;
    }


    .story-strip {
      background: #ffffff;
      border-bottom: 1px solid rgba(0,0,0,.04);
      padding: 12px 0 4px;
      margin-top: 6px;
    }
    .stories {
      display: flex;
      gap: 18px;
      overflow-x: auto;
      padding: 0 4px 0;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      align-items: flex-start;
    }
    .stories::-webkit-scrollbar { height: 0; }
    .story {
      flex: 0 0 auto;
      width: 82px;
      text-align: center;
      scroll-snap-align: start;
      color: #111111;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.15;
    }
    .story-ring {
      width: 70px;
      height: 70px;
      min-width: 70px;
      min-height: 70px;
      aspect-ratio: 1 / 1;
      padding: 3px;
      border-radius: 9999px;
      background: conic-gradient(from 220deg, #ff4b1f, #ff7a00, #3730a3, #2563eb, #16a34a, #ff4b1f);
      margin: 0 auto 7px;
      box-shadow: 0 8px 18px rgba(0,0,0,.07);
      transition: transform .22s ease, box-shadow .22s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .story:hover .story-ring {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(0,0,0,.12);
    }
    .story-ring img {
      width: 64px;
      height: 64px;
      min-width: 64px;
      min-height: 64px;
      aspect-ratio: 1 / 1;
      border-radius: 9999px;
      border: 3px solid #ffffff;
      background: #ffffff;
      box-sizing: border-box;
      object-fit: cover;
      display: block;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,.06);
      margin-top: 8px;
    }
    .header-inner {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand-text {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      position: relative;
    }
    .brand-mark {
      width: 62px;
      height: 62px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(185,28,28,.12);
    }
    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      padding: 0;
      transform: scale(1.12);
    }
    .brand-title {
      font-family: "Black Ops One", "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(25px, 3vw, 42px);
      letter-spacing: .055em;
      line-height: .95;
      text-transform: uppercase;
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      transform: skewX(-4deg);
      filter: drop-shadow(0 8px 14px rgba(0,0,0,.12));
    }
    .brand-title .brand-akay {
      color: #ffffff;
      background:
        linear-gradient(135deg, #111111 0%, #7f1d1d 46%, #dc2626 100%);
      padding: 9px 14px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow:
        0 14px 28px rgba(127,29,29,.22),
        inset 0 0 0 1px rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
      text-shadow: 0 2px 0 rgba(0,0,0,.28);
    }
    .brand-title .brand-akay::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.35) 46%, transparent 72%);
      transform: translateX(-130%);
      animation: brandShine 3.2s ease-in-out infinite;
    }
    .brand-title .brand-akay::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
      background: repeating-linear-gradient(135deg, #111111 0 10px, #facc15 10px 20px);
    }
    .brand-title .brand-akay span {
      position: relative;
      z-index: 1;
    }
    .brand-title .brand-oto {
      color: #111111;
      text-shadow:
        2px 2px 0 rgba(185,28,28,.18),
        0 0 20px rgba(185,28,28,.1);
    }
    .brand-title .brand-kurtarma {
      color: var(--red);
      -webkit-text-stroke: .5px rgba(17,17,17,.2);
      text-shadow:
        2px 2px 0 rgba(17,17,17,.08),
        0 0 18px rgba(185,28,28,.22);
      animation: brandGlowText 2.8s ease-in-out infinite;
    }
    .brand-sub {
      font-size: 6.5px;
      color: #555555;
      margin-top: 2px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-family: "Bebas Neue", Arial, sans-serif;
      line-height: 1;
      align-self: flex-end;
      text-align: right;
      max-width: 72%;
      white-space: nowrap;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .nav a { color: #1f2937; font-weight: 700; font-size: 15px; }
    .nav a:hover { color: var(--red); }
    .header-actions { display: flex; align-items: center; gap: 12px; }
    .header-actions .desktop-call {
      min-height: 38px;
      padding: 9px 18px;
      border-radius: 12px;
      font-size: 14px;
      letter-spacing: .03em;
      white-space: nowrap;
      box-shadow: 0 10px 20px rgba(127,29,29,.14);
    }
    .header-actions .desktop-call::after {
      height: 3px;
    }
    .menu-toggle {
      display: none;
      border: 1px solid rgba(0,0,0,.14);
      background: transparent;
      color: #111;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
    }
    .mobile-menu {
      display: none;
      border-top: 1px solid rgba(0,0,0,.06);
      padding: 12px 0 16px;
      animation: mobileMenuDrop .22s ease both;
    }
    .mobile-menu.open { display: block; }
    .mobile-menu a {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 13px 16px;
      margin: 7px 0;
      color: #111;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,.07);
      border-radius: 16px;
      box-shadow: 0 8px 18px rgba(0,0,0,.04);
      font-weight: 800;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .menu-emoji {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(185,28,28,.08);
      font-size: 16px;
    }
    .mobile-menu a::after {
      content: "›";
      color: var(--red);
      font-size: 22px;
      line-height: 1;
      font-weight: 900;
      grid-column: 3;
    }
    .mobile-menu a:hover {
      transform: translateX(3px);
      border-color: rgba(185,28,28,.25);
      box-shadow: 0 10px 22px rgba(185,28,28,.08);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 800;
      border: 1px solid transparent;
      transition: .22s ease;
      cursor: pointer;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-red {
      background: linear-gradient(135deg, #111111 0%, #7f1d1d 52%, #b91c1c 100%);
      color: #ffffff;
      box-shadow: 0 14px 28px rgba(127,29,29,.22);
      border: 1px solid rgba(255,255,255,.12);
      position: relative;
      overflow: hidden;
    }
    .btn-red::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 4px;
      background: repeating-linear-gradient(135deg, #111111 0 10px, #facc15 10px 20px);
      opacity: .9;
    }
    .btn-red:hover {
      background: linear-gradient(135deg, #111111 0%, #991b1b 52%, #dc2626 100%);
      box-shadow: 0 18px 34px rgba(127,29,29,.28);
    }
    .btn-outline {
      border-color: rgba(0,0,0,.16);
      color: #111;
      background: rgba(0,0,0,.02);
    }
    .btn-outline:hover { border-color: rgba(185,28,28,.38); color: var(--red); }
    .btn-black {
      background: var(--black);
      color: #fff;
    }
    .btn-lg {
      padding: 18px 28px;
      font-size: 17px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 10% 10%, rgba(185,28,28,.08), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 34px;
      align-items: center;
      padding: 18px 0 54px;
    }
    .hero-grid > * {
      min-width: 0;
    }

    .hero-desc {
      font-family: 'Space Grotesk', 'Inter', sans-serif;
      font-size: 17px;
      line-height: 1.55;
      color: #333;
      font-weight: 500;
    }
    .hero-desc strong {
      color: #b91c1c;
      font-weight: 700;
    }

    .hero p {
      font-size: 18px;
      max-width: 700px;
      color: #3f3f46;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .hero-points {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 820px;
      width: 100%;
      min-width: 0;
    }
    .point {
      flex: 1 1 185px;
      min-height: 0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
        radial-gradient(circle at 10% 40%, rgba(185,28,28,.12), transparent 32%);
      border: 1px solid rgba(0,0,0,.08);
      padding: 12px 14px;
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #525252;
      font-size: 13px;
      font-weight: 700;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .point::before {
      content: "";
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(185,28,28,.09);
      border: 1px solid rgba(185,28,28,.15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 36px;
      font-size: 18px;
    }
    .point:nth-child(1)::before { content: "🕒"; }
    .point:nth-child(2)::before { content: "⚡"; }
    .point:nth-child(3)::before { content: "🛡️"; }
    .point::after {
      content: "";
      position: absolute;
      inset: auto 12px 0 58px;
      height: 3px;
      border-radius: 999px;
      background: repeating-linear-gradient(135deg, #111111 0 9px, #facc15 9px 18px);
      opacity: .9;
    }
    .point:hover {
      transform: translateY(-2px);
      border-color: rgba(185,28,28,.24);
      box-shadow: 0 14px 30px rgba(185,28,28,.1);
    }
    .point strong {
      display: inline;
      color: #111111;
      font-family: "Space Grotesk", Arial, sans-serif;
      font-size: 15px;
      line-height: 1;
      margin: 0 4px 0 0;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }
    .point strong::before { content: none; }
    .point strong,
    .point {
      position: relative;
      z-index: 1;
    }
    .hero-visual {
      border-radius: 28px;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 22px 52px rgba(0,0,0,.12);
    }
    .hero-image {
      position: relative;
      min-height: 560px;
      background:
        linear-gradient(rgba(17,17,17,.18), rgba(17,17,17,.4)),
        url('../../media/hero.jpg') center/cover no-repeat;
      display: flex;
      align-items: flex-end;
      padding: 28px;
    }
    .hero-overlay-box {
      width: 100%;
      background: rgba(17,17,17,.82);
      color: #ffffff;
      border-radius: 20px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 38px rgba(0,0,0,.24);
      backdrop-filter: blur(10px);
    }
    .hero-overlay-box .label {
      color: #fca5a5;
    }
    .hero-overlay-box .muted {
      color: rgba(255,255,255,.78);
    }
    .hero-overlay-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 16px;
    }
    .hero-overlay-item {
      background: rgba(255,255,255,.1);
      border-radius: 14px;
      padding: 14px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.12);
      color: #ffffff;
    }
    .hero-overlay-item span {
      display: block;
      font-size: 12px;
      color: rgba(255,255,255,.62);
      margin-bottom: 6px;
      font-weight: 700;
    }

    .quick-call-wrap {
      margin-top: 24px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    .quick-call-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      background: #111111;
      color: #ffffff;
      font-weight: 900;
      letter-spacing: .04em;
      border: 1px solid rgba(185,28,28,.32);
      box-shadow: 0 12px 28px rgba(0,0,0,.14);
      position: relative;
      overflow: hidden;
    }
    .quick-call-badge::before {
      content: "☎";
      color: #fca5a5;
      animation: wordPop 2s ease-in-out infinite;
    }
    .quick-call-badge::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 74%);
      transform: translateX(-130%);
      animation: softShine 3.6s ease-in-out infinite;
    }
    .quick-call-badge span {
      position: relative;
      z-index: 1;
    }
    .service-strip {
      display: inline;
      font-weight: 900;
      color: var(--red);
      background: linear-gradient(180deg, transparent 58%, rgba(185,28,28,.12) 0);
      padding: 0 2px;
      animation: softColor 4.8s ease-in-out infinite;
    }

    .section-alt { background: var(--bg-soft); }

    .about-feature-card {
      background:
        linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 48%, rgba(255,241,241,.92) 100%),
        url('https://www.otoambulans.com/wp-content/uploads/2025/11/uludag-cekici-hizmeti-1536x1152.jpg') center/cover no-repeat !important;
      border: 1px solid rgba(185,28,28,.18);
      box-shadow: 0 24px 56px rgba(127,29,29,.14);
    }
    .about-feature-card::before {
      background:
        radial-gradient(circle, rgba(185,28,28,.18), rgba(185,28,28,.06) 58%, transparent 62%);
    }
    .about-feature-card h2 {
      max-width: 760px;
    }
    .about-feature-card .info-item {
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(8px);
      border-color: rgba(185,28,28,.12);
    }

    .dark-feature-card {
      background:
        radial-gradient(circle at 12% 12%, rgba(250,204,21,.18), transparent 24%),
        radial-gradient(circle at 92% 18%, rgba(185,28,28,.34), transparent 26%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 10px, transparent 10px 22px),
        linear-gradient(135deg, #111111 0%, #1f1f1f 52%, #7f1d1d 100%) !important;
      color: #ffffff;
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 22px 50px rgba(17,17,17,.18);
    }
    .dark-feature-card::before {
      background: rgba(255,255,255,.07);
    }
    .dark-feature-card .label {
      color: #fca5a5 !important;
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.12);
    }
    .dark-feature-card p {
      color: rgba(255,255,255,.78) !important;
    }
    .dark-feature-card h3 {
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.08;
    }

    .caution-stripe {
      height: 18px;
      border-radius: 999px;
      background: repeating-linear-gradient(135deg, #111111 0 16px, #facc15 16px 32px);
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
      margin: 18px 0;
      border: 1px solid rgba(0,0,0,.08);
    }
    .caution-stripe.slim {
      height: 10px;
      margin: 14px 0;
      opacity: .95;
    }

    .grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; }
    .card {
      background:
        linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 46%, rgba(255,247,247,.98) 100%),
        radial-gradient(circle at 10% 8%, rgba(185,28,28,.16), transparent 25%),
        radial-gradient(circle at 92% 18%, rgba(250,204,21,.22), transparent 20%),
        repeating-linear-gradient(135deg, rgba(17,17,17,.035) 0 10px, transparent 10px 22px);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 30px;
      padding: 30px;
      box-shadow: 0 18px 42px rgba(0,0,0,.08);
      position: relative;
      overflow: hidden;
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
      isolation: isolate;
    }
    .card::before {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      right: -82px;
      top: -88px;
      background:
        radial-gradient(circle, rgba(185,28,28,.16), rgba(185,28,28,.04) 58%, transparent 62%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    .card::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 14px;
      height: 10px;
      border-radius: 999px;
      background: repeating-linear-gradient(135deg, #111111 0 14px, #facc15 14px 28px);
      opacity: .92;
      box-shadow: 0 8px 18px rgba(0,0,0,.08);
      z-index: 0;
    }
    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(185,28,28,.22);
      box-shadow: 0 24px 54px rgba(185,28,28,.12);
    }
    .card > * {
      position: relative;
      z-index: 1;
    }
    .card > .label:first-child {
      margin-top: 14px;
    }
    .card .label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(185,28,28,.08);
      border: 1px solid rgba(185,28,28,.14);
      letter-spacing: .12em;
    }
    .card .label::before {
      content: "◆";
      font-size: 10px;
      color: var(--red);
    }

    .services {
      display: flex;
      gap: 14px;
      margin-top: 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 4px 2px 16px;
      -webkit-overflow-scrolling: touch;
    }
    .services::-webkit-scrollbar { height: 8px; }
    .services::-webkit-scrollbar-track { background: #eeeeee; border-radius: 999px; }
    .services::-webkit-scrollbar-thumb { background: rgba(185,28,28,.45); border-radius: 999px; }
    .service {
      min-width: 230px;
      max-width: 250px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 20px;
      padding: 20px 18px;
      transition: .22s ease;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      scroll-snap-align: start;
    }
    .service:hover { transform: translateY(-3px); border-color: rgba(185,28,28,.25); }
    .service-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: var(--red-soft);
      border: 1px solid rgba(185,28,28,.18);
      color: var(--red);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 12px;
    }
    .service h3 { font-size: 19px; margin-bottom: 6px; }
    .service p { font-size: 14px; margin-bottom: 0; }

    .info-list {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }
    .info-item {
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 16px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: 0 10px 22px rgba(0,0,0,.05);
    }
    .info-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(185,28,28,.08);
      color: var(--red);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex: 0 0 44px;
      border: 1px solid rgba(185,28,28,.14);
    }
    .info-item strong {
      color: var(--red);
      display: block;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .price-intro-card {
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,247,.92)),
        radial-gradient(circle at 8% 20%, rgba(185,28,28,.12), transparent 28%);
      border: 1px solid rgba(185,28,28,.14);
      border-radius: 28px;
      padding: 24px 26px;
      box-shadow: 0 16px 36px rgba(0,0,0,.07);
      position: relative;
      overflow: hidden;
      margin-bottom: 18px;
    }
    .price-intro-card::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 12px;
      height: 8px;
      border-radius: 999px;
      background: repeating-linear-gradient(135deg, #111111 0 14px, #facc15 14px 28px);
      opacity: .9;
    }
    .price-intro-card::after {
      content: "₺";
      position: absolute;
      right: 24px;
      bottom: -22px;
      font-size: 110px;
      font-weight: 900;
      color: rgba(185,28,28,.06);
      line-height: 1;
    }
    .price-intro-card > * {
      position: relative;
      z-index: 1;
    }
    .price-intro-card .label {
      margin-top: 12px;
    }
    .price-intro-card h2 {
      margin-bottom: 10px;
    }
    .price-intro-card p {
      max-width: 860px;
      margin-bottom: 0;
      font-family: "Space Grotesk", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.55;
      color: #444;
      font-weight: 500;
    }

    .price-box {
      background:
        radial-gradient(circle at 10% 10%, rgba(185,28,28,.22), transparent 28%),
        linear-gradient(135deg, #111111 0%, #1f1f1f 56%, #7f1d1d 100%);
      color: #ffffff;
      border-radius: 30px;
      padding: 30px;
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.1);
      position: relative;
      overflow: hidden;
    }
    .price-box::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 14px;
      height: 9px;
      border-radius: 999px;
      background: repeating-linear-gradient(135deg, #111111 0 14px, #facc15 14px 28px);
      opacity: .95;
    }
    .price-box > * {
      position: relative;
      z-index: 1;
    }
    .price-form-shell {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      padding: 20px;
      backdrop-filter: blur(10px);
      margin-top: 18px;
    }
    .price-note {
      color: rgba(255,255,255,.75);
      font-size: 14px;
      margin: 18px 0 18px;
    }
    .route-map {
      height: 360px;
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 16px 34px rgba(0,0,0,.25);
      margin-top: 16px;
      background: #e5e5e5;
    }
    .route-status {
      margin-top: 12px;
      color: rgba(255,255,255,.78);
      font-size: 14px;
    }
    .route-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .field, .select {
      width: 100%;
      padding: 15px 16px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.1);
      background: #ffffff;
      color: #111111;
      outline: none;
      font-size: 15px;
    }
    .field::placeholder { color: #7a7a7a; }
    .field:focus, .select:focus {
      border-color: rgba(185,28,28,.45);
      box-shadow: 0 0 0 3px rgba(185,28,28,.08);
    }
    .calc-grid .full { grid-column: 1 / -1; }
    .calc-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
    }
    .result-box {
      margin-top: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      padding: 18px;
    }
    .result-box strong {
      display: block;
      font-size: 32px;
      color: #ffffff;
      line-height: 1;
      margin-bottom: 8px;
    }

    .faq-list { display: grid; gap: 14px; margin-top: 24px; }
    .faq-item {
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .faq-question {
      width: 100%;
      border: 0;
      background: transparent;
      color: #111;
      padding: 20px 22px;
      text-align: left;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
      color: #525252;
      padding: 0 22px;
    }
    .faq-item.active .faq-answer {
      max-height: 220px;
      padding: 0 22px 20px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
    }
    .gallery-item {
      min-height: 280px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.08);
      position: relative;
      background-size: cover;
      background-position: center;
      transition: transform .3s ease;
      box-shadow: var(--shadow);
    }
    .gallery-item:hover { transform: scale(1.02); }
    .gallery-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
    }

    .cta {
      background: linear-gradient(135deg, rgba(185,28,28,.08), rgba(0,0,0,.02));
      border: 1px solid rgba(185,28,28,.14);
      border-radius: 30px;
      padding: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      flex-wrap: wrap;
      box-shadow: var(--shadow);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 22px;
      align-items: start;
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 20px;
    }
    .full { grid-column: 1 / -1; }

    .side-box {
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .side-box + .side-box { margin-top: 16px; }
    .phone-big { font-size: 34px; font-weight: 900; color: var(--red); }
    .map {
      background: linear-gradient(135deg, #111111 0%, #7f1d1d 100%);
      color: #ffffff;
      border-color: rgba(185,28,28,.18);
      position: relative;
      overflow: hidden;
    }
    .map::before {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -70px;
      top: -70px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .map .label {
      color: #fca5a5;
      position: relative;
    }
    .map div:not(.label) {
      position: relative;
      font-weight: 800;
      font-size: 18px;
    }
    .map iframe {
      width: 100%;
      height: 260px;
      border: 0;
      border-radius: 18px;
      margin-top: 14px;
      position: relative;
      box-shadow: 0 16px 30px rgba(0,0,0,.2);
    }

    .footer {
      background: #111111;
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 44px 0 34px;
      color: #d4d4d4;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .footer h4 {
      color: #fff;
      margin-bottom: 14px;
      font-size: 18px;
    }
    .footer ul { list-style: none; padding: 0; margin: 0; }
    .footer li + li { margin-top: 8px; }
    .footer-bottom {
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 14px;
    }

    .hilem-glow {
      position: relative;
      display: inline-block;
      color: #ffffff;
      font-weight: 900;
      letter-spacing: .45px;
      text-shadow:
        0 0 8px rgba(252, 165, 165, .55),
        0 0 18px rgba(239, 68, 68, .45),
        0 0 34px rgba(185, 28, 28, .38);
      background: linear-gradient(90deg, #ffffff 0%, #fecaca 35%, #ef4444 70%, #ffffff 100%);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: hilemGlowSweep 3.2s ease-in-out infinite;
    }
    .hilem-glow::after {
      content: '';
      position: absolute;
      left: -6%;
      right: -6%;
      bottom: -4px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(248,113,113,.95), transparent);
      box-shadow: 0 0 16px rgba(248,113,113,.65);
      opacity: .9;
    }
    @keyframes hilemGlowSweep {
      0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 4px rgba(239,68,68,.35)); }
      50% { background-position: 100% 50%; filter: drop-shadow(0 0 12px rgba(248,113,113,.7)); }
    }

    .floating-actions {
      position: fixed;
      right: 16px;
      bottom: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 1300;
    }
    .floating-btn {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 16px 28px rgba(0,0,0,.18);
      position: relative;
      transition: transform .2s ease, box-shadow .2s ease;
      border: 1px solid rgba(255,255,255,.14);
    }
    .floating-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 34px rgba(0,0,0,.22);
    }
    .floating-phone {
      background: #b91c1c;
      animation: phoneShake 1.8s ease-in-out infinite;
    }
    .floating-phone::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(185,28,28,.22);
      animation: callRing 1.8s ease-out infinite;
    }
    .floating-phone::after {
      content: "";
      position: absolute;
      inset: -13px;
      border-radius: 50%;
      border: 2px solid rgba(185,28,28,.12);
      animation: callRingOuter 1.8s ease-out infinite;
    }
    .whatsapp-logo-link {
      display: block;
      line-height: 0;
      text-decoration: none;
    }
    .whatsapp-logo-img {
      width: 62px;
      height: 62px;
      display: block;
    }
    .floating-icon {
      width: 28px;
      height: 28px;
      display: block;
      position: relative;
      z-index: 2;
    }
    .floating-label {
      position: absolute;
      right: 74px;
      top: 50%;
      transform: translateY(-50%);
      background: #111;
      color: #fff;
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      box-shadow: 0 10px 24px rgba(0,0,0,.15);
    }
    .floating-btn:hover .floating-label {
      opacity: 1;
      transform: translateY(-50%) translateX(-2px);
    }

    
    @keyframes topBarShine {
      0%, 55% { transform: translateX(-120%); }
      80%, 100% { transform: translateX(120%); }
    }

    @keyframes softPulse {
      0% { box-shadow: 0 0 0 0 rgba(185,28,28,.28); }
      70% { box-shadow: 0 0 0 10px rgba(185,28,28,0); }
      100% { box-shadow: 0 0 0 0 rgba(185,28,28,0); }
    }
    @keyframes softShine {
      0%, 45% { transform: translateX(-130%); }
      70%, 100% { transform: translateX(130%); }
    }
    @keyframes textShine {
      0% { background-position: 0% center; }
      50% { background-position: 100% center; }
      100% { background-position: 0% center; }
    }
    @keyframes colorSwap {
      0%, 100% { color: #111111; }
      45% { color: #b91c1c; }
      70% { color: #111111; }
    }
    @keyframes cursorBlink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
    @keyframes wordPop {
      0%, 100% { transform: translateY(0); color: #111111; }
      50% { transform: translateY(-2px); color: #b91c1c; }
    }
    @keyframes softColor {
      0%, 100% { color: #b91c1c; }
      50% { color: #111111; }
    }

    @keyframes brandShine {
      0%, 45% { transform: translateX(-130%); }
      70%, 100% { transform: translateX(130%); }
    }
    @keyframes brandGlowText {
      0%, 100% { filter: drop-shadow(0 0 0 rgba(185,28,28,0)); }
      50% { filter: drop-shadow(0 0 8px rgba(185,28,28,.28)); }
    }

    @keyframes mobileMenuDrop {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes phoneShake {
      0%, 100% { transform: rotate(0deg); }
      8% { transform: rotate(-12deg); }
      16% { transform: rotate(10deg); }
      24% { transform: rotate(-8deg); }
      32% { transform: rotate(6deg); }
      40% { transform: rotate(0deg); }
    }
    @keyframes callRing {
      0% {
        transform: scale(.9);
        opacity: .7;
      }
      70% {
        transform: scale(1.35);
        opacity: 0;
      }
      100% {
        transform: scale(1.35);
        opacity: 0;
      }
    }
    @keyframes callRingOuter {
      0% {
        transform: scale(.95);
        opacity: .45;
      }
      75% {
        transform: scale(1.55);
        opacity: 0;
      }
      100% {
        transform: scale(1.55);
        opacity: 0;
      }
    }

@media (max-width: 1080px) {
      .hero-grid, .grid-2, .contact-grid { grid-template-columns: 1fr; }
      .gallery { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 820px) {
      .nav, .header-actions .desktop-call { display: none; }
      .menu-toggle { display: inline-flex; }
      .hero-grid, .gallery, .form-grid, .footer-grid, .calc-grid, .hero-overlay-grid {
        grid-template-columns: 1fr;
      }
      .hero-points {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        width: 100%;
        padding: 0 0 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .hero-points::-webkit-scrollbar {
        height: 0;
      }
      .point {
        flex: 0 0 min(245px, calc(100vw - 42px));
        max-width: calc(100vw - 42px);
        scroll-snap-align: start;
      }
      .quick-call-badge {
        max-width: 100%;
        overflow-wrap: anywhere;
        justify-content: center;
      }
      .service-badges {
        max-width: 100%;
        overflow: hidden;
      }
      .hero-image { min-height: 420px; }
      .full { grid-column: auto; }
      .floating-actions { right: 14px; bottom: 14px; }
      .floating-btn {
        width: 58px;
        height: 58px;
      }
      .floating-label { display: none; }
    }

    .story-modal {
      position: fixed;
      inset: 0;
      z-index: 3000;
      background: rgba(0,0,0,.92);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }
    .story-modal.open {
      display: flex;
    }
    .story-view {
      width: min(420px, 100%);
      height: min(760px, calc(100vh - 36px));
      background: #111;
      border-radius: 26px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 24px 70px rgba(0,0,0,.45);
    }
    .story-view img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .story-progress {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      gap: 5px;
      z-index: 4;
    }
    .story-progress span {
      flex: 1;
      height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,.35);
      overflow: hidden;
    }
    .story-progress span::before {
      content: "";
      display: block;
      width: 0;
      height: 100%;
      background: #ffffff;
    }
    .story-progress span.done::before {
      width: 100%;
    }
    .story-progress span.active::before {
      animation: storyFill 3s linear forwards;
    }
    .story-close {
      position: absolute;
      top: 24px;
      right: 18px;
      z-index: 5;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.42);
      color: #ffffff;
      font-size: 25px;
      line-height: 1;
      cursor: pointer;
    }
    .story-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 70px 20px 22px;
      color: #ffffff;
      font-size: 24px;
      font-weight: 900;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
      z-index: 3;
      pointer-events: none;
    }
    .story-tap {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .story-tap-left {
      left: 0;
      width: 42%;
    }
    .story-tap-right {
      right: 0;
      width: 58%;
    }
    @keyframes storyFill {
      from { width: 0; }
      to { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 560px) {
      .top-bar {
        font-size: 11px;
      }
      .top-bar::before {
        width: 88px;
        opacity: .42;
      }
      .top-bar .container {
        min-height: 34px;
        justify-content: flex-start;
        text-align: left;
        padding-left: 38px;
      }
      .header {
        margin-top: 5px;
      }
      .top-bar .container::before {
        position: absolute;
        left: 4px;
      }
      .section { padding: 60px 0; }
      .story-strip { padding-top: 8px; margin-top: 4px; }
      .stories { padding-bottom: 4px; }
      .hero-grid { padding-top: 12px; }
      .hero-actions, .quick-call-wrap { flex-direction: column; align-items: stretch; }
      .btn { width: 100%; }
      .brand-mark { width: 54px; height: 54px; }
      .brand-title {
        font-size: 17px;
        gap: 5px;
        letter-spacing: .025em;
        transform: skewX(-3deg);
      }
      .brand-title .brand-akay {
        padding: 7px 9px 8px;
        border-radius: 10px;
      }
      .brand-sub {
        font-size: 5.8px;
        max-width: 74%;
        letter-spacing: .1em;
      }
      .service-badge {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 16px;
      }
      .badge-icon svg {
        width: 21px;
        height: 21px;
      }
      .route-map { height: 280px; }
      .phone-big { font-size: 28px; }
      img, iframe, video {
        max-width: 100%;
      }
    }


/* Hero left content visual background */
.hero-content-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 30px;
  border: 1px solid rgba(185,28,28,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.07);
  background:
    linear-gradient(105deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 48%, rgba(255,255,255,.7) 100%),
    url('../../media/hero.jpg') center/cover no-repeat;
}
.hero-content-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(185,28,28,.13), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 56%, rgba(255,255,255,.55) 100%);
  z-index: 0;
}
.hero-content-panel::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  height: 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg, #111111 0 14px, #facc15 14px 28px);
  opacity: .85;
  z-index: 0;
}
.hero-content-panel > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 560px) {
  .hero-content-panel {
    padding: 22px 18px 26px;
    border-radius: 24px;
  }
}


/* Tighter hero -> price section spacing */
.hero-grid {
  padding-bottom: 28px;
}
#fiyat.section {
  padding-top: 42px;
}
@media (max-width: 560px) {
  .hero-grid {
    padding-bottom: 22px;
  }
  #fiyat.section {
    padding-top: 34px;
  }
}


/* Stronger hero background visibility */
.hero-content-panel {
  background:
    linear-gradient(105deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.28) 100%),
    url('media/giris.jpg') right center/cover no-repeat !important;
}
.hero-content-panel::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.22) 100%),
    radial-gradient(circle at 12% 10%, rgba(185,28,28,.14), transparent 26%) !important;
}
.hero-content-panel::after {
  opacity: .95;
}
.hero-content-panel h1,
.hero-content-panel .hero-desc,
.hero-content-panel .typing-line,
.hero-content-panel .quick-call-wrap,
.hero-content-panel .hero-points,
.hero-content-panel .service-badges {
  max-width: 78%;
}
@media (max-width: 820px) {
  .hero-content-panel {
    background:
      linear-gradient(105deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 58%, rgba(255,255,255,.34) 100%),
      url('https://www.otoambulans.com/wp-content/uploads/2025/11/uludag-cekici-hizmeti-1536x1152.jpg') center/cover no-repeat !important;
  }
  .hero-content-panel h1,
  .hero-content-panel .hero-desc,
  .hero-content-panel .typing-line,
  .hero-content-panel .quick-call-wrap,
  .hero-content-panel .hero-points,
  .hero-content-panel .service-badges {
    max-width: 100%;
  }
}


/* Hero desktop alignment fix */
@media (min-width: 821px) {
  .hero-grid {
    align-items: stretch;
    grid-template-columns: .96fr 1.04fr;
  }

  .hero-content-panel,
  .hero-visual {
    height: 100%;
    min-height: 560px;
  }

  .hero-content-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-visual {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
  }

  .hero-image {
    min-height: 560px;
    height: 100%;
    width: 100%;
    border-radius: 30px;
  }
}

/* Mobile/tablet keeps stacked layout clean */
@media (max-width: 820px) {
  .hero-content-panel {
    min-height: auto;
  }

  .hero-visual,
  .hero-image {
    min-height: 420px;
  }
}


/* Compact desktop hero sizing */
@media (min-width: 821px) {
  .hero-grid {
    grid-template-columns: 1fr .95fr;
    gap: 24px;
    padding-top: 12px;
    padding-bottom: 30px;
  }

  .hero-content-panel,
  .hero-visual {
    min-height: 440px !important;
  }

  .hero-content-panel {
    padding: 24px 26px;
    border-radius: 26px;
  }

  .hero-image {
    min-height: 440px !important;
    border-radius: 26px;
  }

  .hero-overlay-box {
    padding: 16px;
    border-radius: 18px;
  }

  .hero-overlay-grid {
    gap: 10px;
    margin-top: 12px;
  }

  .hero-overlay-item {
    padding: 12px;
  }

  h1 {
    font-size: clamp(32px, 4.7vw, 52px);
    margin-bottom: 14px;
  }

  .hero-desc {
    font-size: 16px;
    line-height: 1.45;
  }

  .quick-call-wrap {
    margin-top: 18px;
  }

  .btn-lg {
    padding: 15px 22px;
    font-size: 16px;
  }

  .hero-points {
    margin-top: 18px;
  }
}

/* Slightly smaller on wide laptop screens */
@media (min-width: 821px) and (max-width: 1280px) {
  .hero-content-panel,
  .hero-visual,
  .hero-image {
    min-height: 405px !important;
  }

  .hero-content-panel {
    padding: 22px;
  }

  h1 {
    font-size: clamp(30px, 4.2vw, 46px);
  }
}


/* Ultra compact desktop hero */
@media (min-width: 821px) {
  .hero-grid {
    gap: 18px;
    padding-top: 6px;
    padding-bottom: 18px;
  }

  .hero-content-panel,
  .hero-visual,
  .hero-image {
    min-height: 300px !important;
  }

  .hero-content-panel {
    padding: 18px 18px;
    border-radius: 20px;
  }

  .hero-image {
    border-radius: 20px;
  }

  h1 {
    font-size: clamp(26px, 3.2vw, 38px);
    margin-bottom: 10px;
  }

  .hero-desc {
    font-size: 14px;
    line-height: 1.35;
  }

  .quick-call-wrap {
    margin-top: 12px;
  }

  .btn-lg {
    padding: 12px 16px;
    font-size: 14px;
  }

  .hero-points {
    margin-top: 12px;
  }

  .hero-overlay-box {
    padding: 12px;
  }

  .hero-overlay-item {
    padding: 8px;
  }
}


/* Dynamic stories folder support */
.stories {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  flex-wrap: nowrap;
}
.story {
  flex: 0 0 82px;
}


/* Story visibility safety */
.story-strip {
  min-height: 104px;
}
#storiesContainer {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  flex-wrap: nowrap;
}
#storiesContainer .story {
  display: block;
  flex: 0 0 82px;
}


/* HARD FIX: Stories must always be visible */
.story-strip {
  display: block !important;
  min-height: 104px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#storiesContainer,
.story-strip .stories {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  padding: 0 4px 8px !important;
}
#storiesContainer .story,
.story-strip .story {
  display: block !important;
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.story-ring {
  display: flex !important;
}
.story-ring img {
  display: block !important;
}


/* 2026 Akay updates */
.typing-line { min-height: 36px; }
.typing-line span { min-width: min(420px, 86vw); display: inline-flex; align-items: center; }
.gallery.gallery-slider { position: relative; display: block; padding: 8px 56px 48px; margin-top: 30px; overflow: hidden; }
.gallery-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 16px 4px 24px; -webkit-overflow-scrolling: touch; }
.gallery-track::-webkit-scrollbar { height: 0; }
.gallery.gallery-slider .gallery-item { flex: 0 0 clamp(220px, 27vw, 330px); min-height: clamp(360px, 52vw, 500px); border-radius: 38px; overflow: hidden; border: 8px solid #fff; position: relative; background-size: cover; background-position: center; scroll-snap-align: center; box-shadow: 0 24px 60px rgba(17,17,17,.18); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; isolation: isolate; }
.gallery.gallery-slider .gallery-item:nth-child(even) { transform: translateY(18px); }
.gallery.gallery-slider .gallery-item:hover { transform: translateY(-8px) scale(1.025); box-shadow: 0 34px 80px rgba(17,17,17,.26); filter: saturate(1.08); }
.gallery.gallery-slider .gallery-item:nth-child(even):hover { transform: translateY(8px) scale(1.025); }
.gallery.gallery-slider .gallery-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72)); z-index: 1; }
.gallery.gallery-slider .gallery-item::after { content: ""; position: absolute; inset: 14px; border-radius: 30px; border: 1px solid rgba(255,255,255,.32); z-index: 2; pointer-events: none; }
.gallery.gallery-slider .gallery-item span { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 3; color: #fff; font-weight: 950; font-size: 20px; text-shadow: 0 4px 16px rgba(0,0,0,.45); }
.gallery-nav { position: absolute; top: 46%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #111, #b91c1c); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; z-index: 4; box-shadow: 0 16px 34px rgba(0,0,0,.22); }
.gallery-prev { left: 6px; } .gallery-next { right: 6px; }
.gallery-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 8px; }
.gallery-dots button { width: 10px; height: 10px; border: 0; border-radius: 999px; background: rgba(17,17,17,.24); cursor: pointer; transition: .2s ease; }
.gallery-dots button.active { width: 30px; background: #b91c1c; }
.floating-actions { right: 22px; bottom: 22px; gap: 12px; }
.floating-btn { width: auto; min-width: 172px; height: 58px; border-radius: 999px; gap: 12px; box-shadow: 0 18px 46px rgba(185,28,28,.34); transition: transform .24s ease, box-shadow .24s ease; border: 1px solid rgba(255,255,255,.18); }
.floating-btn:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(185,28,28,.44); }
.floating-phone { background: linear-gradient(135deg, #111 0%, #7f1d1d 46%, #dc2626 100%); padding: 0 18px 0 22px; }
.floating-phone::before { inset: 5px; border-radius: inherit; border: 1px solid rgba(255,255,255,.18); }
.floating-phone::after { animation: none; }
.floating-icon { width: 20px; height: 20px; }
.floating-label { position: static; opacity: 1; transform: none; background: transparent; padding: 0; box-shadow: none; color: #fff; font-weight: 950; font-size: 15px; }
@media (max-width: 640px) {
  .gallery.gallery-slider { padding: 0 0 42px; }
  .gallery.gallery-slider .gallery-item { flex-basis: min(78vw, 300px); min-height: 430px; border-radius: 32px; }
  .gallery-nav { display: none; }
  .floating-btn { min-width: 58px; width: 58px; padding: 0; }
  .floating-label { display: none; }
}
.floating-phone { animation: none !important; }

/* Floating call button desktop fix: keep it perfectly circular on all screens */
.floating-actions {
  right: 22px;
  bottom: 22px;
}
.floating-btn,
.floating-phone {
  width: 62px !important;
  min-width: 62px !important;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  gap: 0 !important;
  aspect-ratio: 1 / 1;
}
.floating-phone {
  background: linear-gradient(135deg, #111 0%, #7f1d1d 46%, #dc2626 100%);
  animation: none !important;
  transform-origin: center center !important;
}
.floating-phone::before,
.floating-phone::after {
  border-radius: 50% !important;
  animation: none !important;
}
.floating-phone::before {
  inset: 5px;
  border: 1px solid rgba(255,255,255,.18);
}
.floating-phone::after {
  display: none;
}
.floating-label {
  position: absolute !important;
  right: 74px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  background: #111 !important;
  color: #fff !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.floating-btn:hover .floating-label {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(-2px) !important;
}

/* Floating phone ringing update */
.floating-btn.floating-phone {
  animation: phoneShake 1.65s ease-in-out infinite !important;
  transform-origin: initial !important;
}
.floating-btn.floating-phone::before {
  inset: -7px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(220,38,38,.34) !important;
  animation: callRing 1.65s ease-out infinite !important;
}
.floating-btn.floating-phone::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -15px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(220,38,38,.18) !important;
  animation: callRingOuter 1.65s ease-out infinite !important;
  pointer-events: none !important;
}
.floating-btn.floating-phone .floating-icon {
  width: 26px !important;
  height: 26px !important;
}
.floating-btn.floating-phone:hover {
  animation-play-state: paused !important;
}

/* v5 floating phone size refinement */
.floating-btn.floating-phone,
.floating-btn,
.floating-phone{
  width:58px !important;
  min-width:58px !important;
  height:58px !important;
}
.floating-btn.floating-phone .floating-icon{
  width:23px !important;
  height:23px !important;
}
.floating-btn.floating-phone::before{inset:-6px !important;}
.floating-btn.floating-phone::after{inset:-13px !important;}
.floating-label{right:70px !important;}

/* v6 floating phone smaller refinement */
.floating-btn.floating-phone,
.floating-btn,
.floating-phone{
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
}
.floating-btn.floating-phone .floating-icon{
  width:21px !important;
  height:21px !important;
}
.floating-btn.floating-phone::before{inset:-5px !important;}
.floating-btn.floating-phone::after{inset:-11px !important;}
.floating-label{right:64px !important;}