/* Otomatik olusturuldu — sections/*.css birlesimi. Elle duzenlemeyin. */

/* ==== 01-hero.css ==== */
/* ==========================================================================
   HERO
   ========================================================================== */
.op-hero {
  position: relative;
  background: var(--ink-900);
  color: var(--tx-light);
  padding: clamp(60px, 8vw, 108px) 0 clamp(90px, 10vw, 150px);
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- Arka plan katmanları --- */
.op-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.op-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 62% 42%, #000 6%, transparent 72%);
          mask-image: radial-gradient(ellipse 78% 68% at 62% 42%, #000 6%, transparent 72%);
}

.op-hero__glow { position: absolute; border-radius: 50%; filter: blur(6px); }
.op-hero__glow--1 {
  width: 720px; height: 720px; top: -280px; right: -200px;
  background: radial-gradient(circle, rgba(228, 0, 43, .30), transparent 64%);
}
.op-hero__glow--2 {
  width: 520px; height: 520px; bottom: -240px; left: -180px;
  background: radial-gradient(circle, rgba(80, 130, 255, .14), transparent 66%);
}

.op-hero__streak {
  position: absolute; left: -10%; right: -10%; top: 52%;
  height: 230px;
  background: linear-gradient(96deg, transparent, rgba(228, 0, 43, .10) 34%, rgba(228, 0, 43, .02) 62%, transparent);
  transform: rotate(-7deg);
}

/* --- Başlık --- */
.op-hero__title {
  font-size: clamp(2.6rem, 6.6vw, 5.3rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.012em;
  margin-bottom: 1.35rem;
  color: #fff;
}
.op-hero__u {
  position: relative; display: inline-block;
}
.op-hero__u::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: .06em; height: .14em;
  background: var(--op-red);
  transform: skewX(-14deg);
  opacity: .9;
  z-index: -1;
}

.op-hero__lead {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.78;
  color: var(--tx-light-soft);
  max-width: 54ch;
  margin-bottom: 2.1rem;
}
.op-hero__lead strong { color: #fff; font-weight: 600; }

/* --- Güven çipleri --- */
.op-hero__chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .55rem .7rem;
}
.op-hero__chips li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .72rem;
  border-radius: 100px;
  font-size: .78rem; font-weight: 600;
  color: var(--tx-light-soft);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-dark);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.op-hero__chips li:hover { border-color: rgba(228, 0, 43, .45); color: #fff; }
.op-hero__chips i { color: var(--op-red); font-size: .95rem; }

/* --- Görsel kompozisyon --- */
.op-hero__visual { position: relative; padding: 18px; }

.op-hero__ring {
  position: absolute; inset: -6% -4%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .12);
  -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 72%);
          mask-image: linear-gradient(200deg, #000 20%, transparent 72%);
}

.op-hero__card {
  position: relative; margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(155deg, var(--ink-600), var(--ink-800));
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .7s var(--ease);
}
.op-hero__card:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0); }
.op-hero__card img { width: 100%; height: auto; display: block; }

.op-hero__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.5rem 1.15rem;
  background: linear-gradient(to top, rgba(6, 8, 11, .94), transparent);
  display: flex; flex-direction: column; gap: 2px;
}
.op-hero__cap-k {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-txt);
}
.op-hero__cap-v {
  font-family: var(--f-head); font-size: 1.35rem; font-weight: 700;
  text-transform: uppercase; color: #fff; line-height: 1.1;
}

/* --- Yüzen bilgi baloncukları --- */
.op-hero__pill {
  position: absolute;
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.05rem;
  border-radius: 14px;
  background: rgba(16, 20, 27, .88);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
  font-size: .82rem; color: var(--tx-light-soft);
  white-space: nowrap;
}
.op-hero__pill strong { color: #fff; font-weight: 700; }
.op-hero__pill > i { color: var(--op-red); font-size: 1.2rem; }
.op-hero__pill--tl { top: 2%; left: -6%; }
.op-hero__pill--br { bottom: 14%; right: -5%; }
.op-hero__pill--bl { bottom: -4%; left: 4%; }

.op-hero__stars { color: #ffc107; font-size: .78rem; letter-spacing: 1px; }

/* --- Kaydırma göstergesi --- */
.op-hero__scroll {
  position: absolute; left: 12px; bottom: -62px;
  display: none; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-light-dim);
}
.op-hero__scroll:hover { color: #fff; }
.op-hero__scroll-line {
  width: 2px; height: 46px; border-radius: 2px;
  background: linear-gradient(180deg, var(--op-red), transparent);
  animation: op-bob 2.2s ease-in-out infinite;
}

@media (min-width: 992px) {
  .op-hero__scroll { display: inline-flex; }
  /* Masaüstünde üst bar (~38px) da görünür; hero ilk ekrana tam sığsın */
  .op-hero { min-height: calc(100svh - var(--nav-h) - 38px); }
}

/* --- Duyarlılık --- */
@media (max-width: 991.98px) {
  .op-hero { min-height: auto; text-align: center; }
  .op-hero__lead { margin-left: auto; margin-right: auto; }
  .op-hero__chips { justify-content: center; }
  .op-hero .d-flex.flex-wrap.gap-3 { justify-content: center; }
  .op-hero__card { transform: none; }
  .op-hero__visual { max-width: 560px; margin: 2rem auto 0; }
  .op-hero__pill--tl { left: -2%; }
  .op-hero__pill--br { right: -1%; }
  .op-hero__pill--bl { left: 0; }
}

@media (max-width: 575.98px) {
  .op-hero__pill { font-size: .74rem; padding: .6rem .8rem; }
  .op-hero__pill--tl { top: -3%; left: -1%; }
  .op-hero__pill--br { bottom: 18%; right: -1%; }
  .op-hero__pill--bl { display: none; }
  .op-hero__visual { padding: 10px; }
  .op-hero__chips li { font-size: .74rem; }
}

/* ==== 02-brands.css ==== */
/* ==========================================================================
   02 — UYUMLU MARKALAR ŞERİDİ (güven bandı)  ·  önek: .opb
   ========================================================================== */

/* Bölüm kısa tutulur: hero'nun hemen altında ince bir bant gibi durur */
.opb {
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line-dark);
}

/* --- Yerleşim: solda etiket, sağda kayan şerit --- */
.opb-bar {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

/* --- Sol etiket --- */
.opb-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
  white-space: nowrap;
}
.opb-label__ico {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--op-red);
}
.opb-label__txt { color: var(--tx-light-soft); }

/* Etiketi ikiye ayıran ince dikey çizgi */
.opb-label__sep {
  width: 1px;
  height: 14px;
  background: var(--line-dark-2);
}
.opb-label__count strong {
  color: var(--tx-light);
  font-weight: 800;
  letter-spacing: .06em;
}

/* --- Kayan şerit --- */
.opb-strip {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Şeridin hızı (app.css'teki op-marquee animasyonu kullanılır) */
.opb .marquee__track { animation-duration: 42s; }

.opb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Marka adı --- */
.opb-item {
  position: relative;
  flex: 0 0 auto;
  padding: 0 clamp(16px, 2.4vw, 34px);
  font-family: var(--f-head);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-light);
  opacity: .32;
  transition: opacity .3s var(--ease), color .3s var(--ease);
  cursor: default;
}
.opb-item:hover {
  opacity: 1;
  color: var(--tx-light);
}

/* Markalar arasındaki kırmızı nokta ayracı */
.opb-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--op-red);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .opb-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .opb-strip { width: 100%; }
  .opb .marquee__track { animation-duration: 34s; }
}

@media (max-width: 575.98px) {
  .opb { padding: 22px 0; }
  .opb-bar { align-items: center; }

  /* Dar ekranda etiket tek satırda kalmaz; taşma yerine alt satıra sarar */
  .opb-label {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .5rem;
    font-size: .66rem;
    letter-spacing: .16em;
    white-space: normal;
    text-align: center;
  }
  /* Dikey ayraç sarma sonrası anlamını yitirdiği için gizlenir */
  .opb-label__sep { display: none; }

  .opb-item {
    padding: 0 14px;
    font-size: 1.05rem;
  }
  .opb .marquee__track { animation-duration: 26s; }
}

/* --------------------------------------------------------------------------
   HAREKET TERCİHİ — sonsuz kayma durdurulur
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Kayma durur; şerit statik bir marka listesine dönüşür.
     .marquee__track app.css'te width:max-content olduğu için sarma çalışmaz —
     bu yüzden genişlik burada %100'e çekilir. */
  .opb .marquee__track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
  }
  /* Kayma olmadığında yedek (kopya) liste gereksizdir */
  .opb .marquee__track > .opb-list[aria-hidden="true"] { display: none; }

  /* Kenarları soldurmaya gerek yok; aksi halde ilk/son markalar silik kalır */
  .opb-strip {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .opb-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .opb-item { opacity: .62; }
  /* Satır sonunda boşta kalan kırmızı nokta kaldırılır */
  .opb-item:last-child::after { display: none; }
}

/* ==== 03-about.css ==== */
/* ==========================================================================
   HAKKIMIZDA + RAKAMLAR  (önek: .opa-)
   Kök eleman: <section class="sec sec--paper tx-grid-light opa" id="hakkimizda">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) GÖRSEL KOMPOZİSYON
   -------------------------------------------------------------------------- */
.opa .opa-visual {
  position: relative;
  padding: 0 0 62px 0;          /* alt görsel ve rozet için pay */
  max-width: 620px;
}

/* Arkadaki kesik çizgili halka */
.opa .opa-visual__ring {
  position: absolute;
  inset: -6% 12% 12% -8%;
  border-radius: 50%;
  border: 1px dashed var(--line-light);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(160deg, #000 15%, transparent 76%);
          mask-image: linear-gradient(160deg, #000 15%, transparent 76%);
}

/* Ortak fotoğraf kabı */
.opa .opa-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line-light);
}

/* Ana görsel */
.opa .opa-photo--main {
  z-index: 1;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

/* Ana görselin üzerindeki hafif kırmızı ton */
.opa .opa-photo--main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(215deg, var(--op-red-soft), transparent 52%);
}

/* İkinci, kaydırılmış küçük görsel */
.opa .opa-photo--sub {
  position: absolute;
  right: -14px;
  bottom: 0;
  width: 43%;
  max-width: 240px;
  z-index: 2;
  border-radius: var(--r-lg);
  border: 5px solid var(--paper);
  box-shadow: var(--sh);
  transform: rotate(-3deg);
  transition: transform .55s var(--ease);
}
.opa .opa-visual:hover .opa-photo--sub { transform: rotate(0deg) translateY(-4px); }

/* Bindirilmiş yetkili bayi kartı */
.opa .opa-badge-card {
  position: absolute;
  left: -18px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 300px;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-lg);
}
.opa .opa-badge-card__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(140deg, var(--op-red), var(--op-red-600));
  box-shadow: var(--sh-red);
}
.opa .opa-badge-card__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opa .opa-badge-card__title {
  font-family: var(--f-head);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--tx-dark);
}
.opa .opa-badge-card__sub {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--tx-dark-soft);
}

/* --------------------------------------------------------------------------
   2) METİN SÜTUNU
   -------------------------------------------------------------------------- */
.opa .opa-copy { max-width: 620px; }

.opa .opa-lead {
  position: relative;
  margin-top: 1.1rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--op-red);
  font-weight: 500;
  color: var(--tx-dark);   /* .sec--paper p kuralını özgüllükle dengeler */
}

.opa .opa-text {
  font-size: .97rem;
  line-height: 1.8;
  margin-bottom: 1.05rem;
}

/* İkonlu madde listesi — 2 sütun (Bootstrap row/col ile) */
.opa .opa-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 2rem;
}
.opa .opa-list > li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tx-dark);
}
.opa .opa-list > li > i {
  flex: 0 0 auto;
  margin-top: .12rem;
  font-size: 1.15rem;
  color: var(--op-red);
}

/* Butonlar */
.opa .opa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

/* --------------------------------------------------------------------------
   3) RAKAMLAR ŞERİDİ
   -------------------------------------------------------------------------- */
.opa .opa-stats {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh);
  overflow: hidden;
}
/* Üstteki ince kırmızı vurgu çizgisi */
.opa .opa-stats::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--op-red), var(--op-red-300) 45%, transparent 92%);
}

.opa .opa-stat {
  position: relative;
  height: 100%;
  padding: clamp(26px, 3vw, 40px) 1.1rem;
  text-align: center;
}

/* Sütunlar arası ince ayırıcı çizgiler */
.opa .opa-stats .opa-stat::after {
  content: "";
  position: absolute;
  top: 18%; bottom: 18%;
  right: 0;
  width: 1px;
  background: var(--line-light);
}
/* Satırın son sütununda dikey çizgi olmasın */
.opa .opa-stats .row > *:last-child .opa-stat::after { display: none; }

.opa .opa-stat__icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: .7rem;
  border-radius: 13px;
  font-size: 1.25rem;
  color: var(--op-red);
  background: var(--op-red-soft);
  transition: transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.opa .opa-stat:hover .opa-stat__icon {
  background: var(--op-red);
  color: #fff;
  transform: translateY(-3px) rotate(-6deg);
}

.opa .opa-stat__num {
  font-family: var(--f-head);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--tx-dark);   /* .sec--paper p kuralını özgüllükle dengeler */
  margin: 0 0 .35rem;
  font-variant-numeric: tabular-nums;
}

.opa .opa-stat__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--tx-dark-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4) DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .opa .opa-badge-card { left: 0; max-width: 280px; }
}

@media (max-width: 991.98px) {
  .opa .opa-visual {
    margin: 0 auto;
    padding-bottom: 54px;
  }
  .opa .opa-copy { max-width: none; }
  .opa .opa-photo--sub { right: 0; width: 40%; }
  .opa .opa-badge-card { left: 8px; bottom: 14px; }

  /* 2 sütunlu ızgarada: her satırın sağ ucunda dikey çizgi olmasın,
     son satır hariç satır aralarına yatay çizgi gelsin */
  .opa .opa-stats .row > *:nth-child(2n) .opa-stat::after { display: none; }
  .opa .opa-stats .row > *:not(:nth-last-child(-n+2)) .opa-stat { border-bottom: 1px solid var(--line-light); }
}

@media (max-width: 575.98px) {
  .opa .opa-visual { padding-bottom: 0; }
  .opa .opa-photo--sub { display: none; }
  .opa .opa-badge-card {
    position: static;
    max-width: none;
    margin-top: 1rem;
    box-shadow: var(--sh-sm);
  }
  .opa .opa-visual__ring { display: none; }

  .opa .opa-lead { padding-left: .9rem; }
  .opa .opa-list { margin: 1.3rem 0 1.6rem; }
  .opa .opa-actions .btn-op { width: 100%; }

  .opa .opa-stat { padding: 24px .75rem; }
  .opa .opa-stat__label { font-size: .72rem; letter-spacing: .08em; }
}

/* --------------------------------------------------------------------------
   5) HAREKET TERCİHİ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opa .opa-photo--sub,
  .opa .opa-visual:hover .opa-photo--sub,
  .opa .opa-stat:hover .opa-stat__icon {
    transform: none;
    transition: none;
  }
}

/* ==== 04-services.css ==== */
/* ==========================================================================
   NE YAPIYORUZ — HİZMETLER  (.ops)
   Sadece bu bölüme ait sınıflar; tümü "ops-" önekiyle başlar.
   ========================================================================== */

/* --- Bölüm zemini: üst ortada soluk kırmızı hale --- */
.ops .ops-aura {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 780px;
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(228, 0, 43, .13), transparent 68%);
  filter: blur(8px);
}

/* --- Kart ızgarası --- */
.ops .ops-grid { position: relative; z-index: 1; }

/* --- Hizmet kartı --- */
.ops .ops-card {
  display: flex;
  flex-direction: column;
  padding-top: clamp(26px, 2.8vw, 36px);
}

/* Kartın sağ alt köşesinde hover ile beliren yumuşak ışık */
.ops .ops-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 43, .22), transparent 66%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.ops .ops-card:hover::after { opacity: 1; }

/* İçerik, dekoratif ışığın ve sıra numarasının üstünde kalsın.
   Sıra numarası hariç tutulur; o mutlak konumlu ve arkada durmalı. */
.ops .ops-card > :not(.ops-card__no) { position: relative; z-index: 1; }

/* --- Dekoratif sıra numarası (01, 02 ...) --- */
.ops .ops-card__no {
  position: absolute;
  top: clamp(10px, 1.4vw, 16px);
  right: clamp(14px, 1.8vw, 22px);
  z-index: 0;
  font-family: var(--f-head);
  font-size: clamp(2.8rem, 4.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16);
  transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
  user-select: none;
}
.ops .ops-card:hover .ops-card__no {
  -webkit-text-stroke-color: rgba(228, 0, 43, .5);
}

/* Numaranın başlıkla çakışmaması için sağ boşluk */
.ops .ops-card__title { padding-right: 2.6rem; }

/* --- Alt CTA şeridi --- */
.ops .ops-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, rgba(228, 0, 43, .10), transparent 46%),
    linear-gradient(160deg, var(--ink-700), var(--ink-800));
  overflow: hidden;
}

/* Şeridin sol kenarındaki kırmızı vurgu çizgisi */
.ops .ops-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--op-red), var(--op-red-300));
}

.ops .ops-cta__icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 1.45rem;
  color: var(--op-red);
  background: var(--op-red-soft);
  border: 1px solid rgba(228, 0, 43, .26);
}

.ops .ops-cta__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: .98rem;
  line-height: 1.65;
}
.ops .ops-cta__text strong {
  display: block;
  font-family: var(--f-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tx-light);
  margin-bottom: .15rem;
}

.ops .ops-cta__btn { flex: 0 0 auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ops .ops-aura { width: 560px; height: 380px; top: -120px; }

  .ops .ops-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .ops .ops-cta__btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .ops .ops-card__no { font-size: 2.6rem; }
  .ops .ops-card__title { padding-right: 2rem; }

  .ops .ops-cta {
    align-items: center;
    text-align: center;
    padding-left: clamp(18px, 5vw, 24px);
    padding-right: clamp(18px, 5vw, 24px);
  }
  .ops .ops-cta__text { font-size: .92rem; }
  .ops .ops-cta__text strong { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   HAREKET TERCİHİ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ops .ops-card::after,
  .ops .ops-card__no { transition: none; }
}

/* ==== 05-products.css ==== */
/* ==========================================================================
   ÜRÜN KATEGORİLERİ  (önek: .opp-)
   ========================================================================== */

/* Bölüme özel yerel değişkenler */
.opp {
  --opp-red-line: color-mix(in srgb, var(--op-red) 34%, transparent);
  --opp-wa: #1faf54;                /* WhatsApp yeşili — marka rengi değildir */
}

/* --- Filtre çubuğu --------------------------------------------------------- */
.opp .opp-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* Hap (chip) — hem filtre butonu hem model linki için ortak görünüm */
.opp .opp-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px; /* dokunma hedefi */
  padding: .6rem 1.15rem;
  border-radius: 100px;
  border: 1px solid var(--line-light);
  background: var(--paper-2);
  color: var(--tx-dark);
  font-family: var(--f-body);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease),
              box-shadow .28s var(--ease);
}
.opp .opp-chip i { color: var(--op-red); font-size: 1em; transition: color .28s var(--ease); }

.opp .opp-chip:hover {
  color: var(--tx-dark);
  border-color: var(--opp-red-line);
  transform: translateY(-2px);
  box-shadow: var(--sh);
}

/* Filtredeki ürün adedi */
.opp .opp-chip__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--op-red-soft);
  color: var(--op-red);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .28s var(--ease), color .28s var(--ease);
}

/* Aktif filtre — kırmızı dolgulu */
.opp .opp-chip.is-on {
  background: var(--op-red);
  border-color: var(--op-red);
  color: var(--tx-light);
  box-shadow: var(--sh-red);
}
.opp .opp-chip.is-on i { color: var(--tx-light); }
.opp .opp-chip.is-on .opp-chip__n {
  background: rgba(255, 255, 255, .22);
  color: var(--tx-light);
}

/* --- Kategori kartı -------------------------------------------------------- */
.opp .opp-card {
  display: flex;
  flex-direction: column;
  padding: 0;                 /* görsel kenara dayansın */
  color: var(--tx-dark);
}
.opp .opp-card:hover { color: var(--tx-dark); }

/* app.css'teki sol kırmızı şerit görselin altında kalmasın */
.opp .opp-card::before { z-index: 3; }

/* Görsel alanı */
.opp .opp-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-3);
}
.opp .opp-media picture { display: block; }
.opp .opp-img {
  transition: transform .6s var(--ease);
}

/* Gerçek ürün fotoğrafları kare çekildi: 4:3 kırpma ürünü keseceği için kare gösterilir */
.opp .opp-media--photo { background: #fff; }
.opp .opp-media--photo .opp-img { aspect-ratio: 1 / 1; object-fit: cover; }
.opp .opp-media--photo::after { display: none; } /* beyaz zeminli fotoğrafı grileştirmesin */
.opp .opp-card:hover .opp-img { transform: scale(1.06); }

/* Görselin altındaki yumuşak karartma (rozet/kenar okunurluğu) */
.opp .opp-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6, 8, 11, .28), transparent);
  pointer-events: none;
}

/* Köşedeki ikon rozeti */
.opp .opp-ico {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin-bottom: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--op-red);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-sm);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.opp .opp-card:hover .opp-ico {
  background: var(--op-red);
  border-color: var(--op-red);
  color: var(--tx-light);
  transform: rotate(-6deg) scale(1.06);
}

/* Metin alanı */
.opp .opp-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.35rem 1.5rem;
}
.opp .opp-title { font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.opp .opp-text { color: var(--tx-dark-soft); font-size: .9rem; margin-bottom: 1.1rem; }

.opp .opp-cta { margin-top: auto; font-size: .82rem; }
.opp .opp-card:hover .opp-cta i { transform: translateX(5px); }

/* --- Popüler modeller şeridi ---------------------------------------------- */
.opp .opp-models {
  margin-top: clamp(36px, 4vw, 58px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-sm);
}

.opp .opp-models__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.opp .opp-models__ico { flex: 0 0 auto; }

.opp .opp-models__title {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .2rem;
}
.opp .opp-models__sub {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--tx-dark-soft);
  margin: 0;
  max-width: 70ch;
}

.opp .opp-models__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.opp .opp-chip--link { background: var(--paper); box-shadow: none; }
.opp .opp-chip--link i { color: var(--opp-wa); }
.opp .opp-chip--link:hover {
  background: var(--op-red);
  border-color: var(--op-red);
  color: var(--tx-light);
}
.opp .opp-chip--link:hover i { color: var(--tx-light); }

/* --- Alt not --------------------------------------------------------------- */
.opp .opp-note {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 1.15rem 1.4rem;
  border-radius: var(--r);
  border: 1px dashed var(--opp-red-line);
  background: var(--op-red-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.opp .opp-note__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tx-dark);
  max-width: 78ch;
}
.opp .opp-note__text i { color: var(--op-red); margin-right: .4rem; }
.opp .opp-note__btn { flex: 0 0 auto; }

/* --- Duyarlılık ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .opp .opp-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .opp .opp-filters::-webkit-scrollbar { display: none; }
  .opp .opp-note { justify-content: flex-start; }

  /* Sağ kenarda silikleşme: kaydırılabilir olduğunu belli eder */
  .opp .opp-filters-wrap { position: relative; }
  .opp .opp-filters-wrap::after {
    content: "";
    position: absolute; top: 0; bottom: .5rem; right: 0; width: 46px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--paper));
  }
}

@media (max-width: 575.98px) {
  .opp .opp-chip { font-size: .78rem; padding: .52rem .95rem; }
  .opp .opp-body { padding: 1.15rem 1.15rem 1.3rem; }
  .opp .opp-models__head { flex-direction: column; gap: .75rem; }
  .opp .opp-note { flex-direction: column; align-items: stretch; text-align: left; }
  .opp .opp-note__btn { width: 100%; justify-content: center; }
}

/* --- Hareket tercihi ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opp .opp-img,
  .opp .opp-chip,
  .opp .opp-ico { transition: none; }
  .opp .opp-card:hover .opp-img { transform: none; }
  .opp .opp-card:hover .opp-ico { transform: none; }
  .opp .opp-card:hover .opp-cta i { transform: none; }
}

/* ==== 06-why.css ==== */
/* ==========================================================================
   NEDEN BİZ  (#neden-biz)
   Sol: yapışkan başlık bloğu — Sağ: iki sütunlu, çizgili özellik listesi
   Tüm sınıflar "opw-" önekiyle, .opw kapsamı içinde.
   ========================================================================== */

/* --- Bölüm zemini: sağ üstte çok hafif kırmızı aydınlanma --- */
.opw .opw-deco {
  position: absolute;
  top: -180px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  /* Marka kırmızısı token üzerinden; yoğunluk opacity ile kısılır */
  background: radial-gradient(circle, var(--op-red-soft), transparent 66%);
  opacity: .6;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SOL — yapışkan başlık bloğu
   -------------------------------------------------------------------------- */
.opw .opw-aside {
  position: relative;
}

.opw .opw-lead {
  margin-top: 1.15rem;
  max-width: 46ch;
}

.opw .opw-cta {
  margin-top: 2rem;
}

/* Yapışkanlık yalnızca masaüstünde */
@media (min-width: 992px) {
  .opw .opw-aside {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
  }
}

/* --------------------------------------------------------------------------
   SAĞ — özellik listesi
   -------------------------------------------------------------------------- */
.opw .opw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opw .opw-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.6rem 1.5rem 1.6rem 0;
  border-top: 1px solid var(--line-light);
  transition: transform .4s var(--ease);
}

/* Sağ sütun: sütunlar arası ince dikey ayırıcı */
.opw .opw-item:nth-child(even) {
  padding-left: 1.7rem;
  border-left: 1px solid var(--line-light);
}

/* Üst çizginin üzerinde açılan kırmızı vurgu */
.opw .opw-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--op-red), var(--op-red-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.opw .opw-item:hover { transform: translateX(8px); }
.opw .opw-item:hover::before { transform: scaleX(1); }

/* İkon — hover'da kırmızıya döner.
   flex-basis vermiyoruz: .icon-badge--sm'in kendi 46x46 ölçüsü korunsun (kare kalsın). */
.opw .opw-ico {
  flex: 0 0 auto;
  margin-top: 2px;
}

.opw .opw-item:hover .opw-ico,
.opw .opw-item:focus-within .opw-ico {
  background: var(--op-red);
  color: var(--tx-light);
  transform: rotate(-6deg) scale(1.06);
}

/* Metin bloğu */
.opw .opw-body { min-width: 0; }

.opw .opw-title {
  font-family: var(--f-head);
  font-size: 1.22rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.15;
  color: var(--tx-dark);
  margin: 0 0 .4rem;
}

.opw .opw-text {
  font-size: .93rem;
  line-height: 1.68;
  margin: 0;
}

/* --------------------------------------------------------------------------
   DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Sticky kapalı, liste tek sütun */
  .opw .opw-aside { position: static; top: auto; }

  .opw .opw-list { grid-template-columns: minmax(0, 1fr); }

  .opw .opw-item {
    padding: 1.35rem 0;
  }
  .opw .opw-item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .opw .opw-deco { display: none; }
}

@media (max-width: 575.98px) {
  .opw .opw-item {
    gap: .85rem;
    padding: 1.15rem 0;
  }
  .opw .opw-item:hover { transform: none; }

  /* Küçük ekranda rozet kare kalacak şekilde küçültülür */
  .opw .opw-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.05rem;
  }

  .opw .opw-title { font-size: 1.1rem; }
  .opw .opw-text { font-size: .89rem; }

  .opw .opw-cta .btn-op { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   HAREKET TERCİHİ — kaydırma/dönme efektlerini kapat
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opw .opw-item,
  .opw .opw-item::before,
  .opw .opw-ico {
    transition: none;
  }
  .opw .opw-item:hover { transform: none; }
  .opw .opw-item:hover::before { transform: scaleX(1); }
  .opw .opw-item:hover .opw-ico { transform: none; }
}

/* ==== 07-video.css ==== */
/* ==========================================================================
   07 — TANITIM VİDEOSU  (.opv)
   Kapsam: sadece #video bölümü. Genel bileşenler app.css'te tanımlıdır.
   ========================================================================== */

/* Bölüm zemininde hafif kırmızı aydınlatma */
.opv::after {
  content: "";
  position: absolute;
  inset: auto -12% -35% auto;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 43, .16), transparent 66%);
  filter: blur(12px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Metin sütunu — "videoda ne var" listesi
   -------------------------------------------------------------------------- */
.opv .opv-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 2.2rem;
  display: grid;
  gap: 1.1rem;
}

.opv .opv-list li {
  display: flex;
  align-items: flex-start;
  gap: .95rem;
}

.opv .opv-list__ic {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.2rem;
  color: var(--op-red);
  background: var(--op-red-soft);
  border: 1px solid rgba(228, 0, 43, .22);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

.opv .opv-list li:hover .opv-list__ic {
  background: var(--op-red);
  color: #fff;
  transform: rotate(-6deg);
}

.opv .opv-list strong {
  display: block;
  font-family: var(--f-head);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.2;
  margin-bottom: .15rem;
}

.opv .opv-list li > span:last-child {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--tx-light-soft);
}

/* Buton + bağlantı satırı */
.opv .opv-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* --------------------------------------------------------------------------
   Oynatıcı çerçevesi
   -------------------------------------------------------------------------- */
.opv .opv-frame {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Çerçevenin arkasındaki kırmızı parıltı */
.opv .opv-frame::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 60% 40%, rgba(228, 0, 43, .38), transparent 70%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 0;
}

/* 16:9 sahne */
.opv .opv-stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--ink-600), var(--ink-900));
  border: 1px solid var(--line-dark-2);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(228, 0, 43, .18),
    0 0 0 10px rgba(228, 0, 43, .05);
  transition: box-shadow .5s var(--ease);
}

.opv .opv-stage:hover {
  box-shadow:
    0 46px 100px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(228, 0, 43, .40),
    0 0 0 12px rgba(228, 0, 43, .09);
}

/* Kapak görseli */
.opv .opv-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}

.opv .opv-stage:hover .opv-poster {
  transform: scale(1.045);
  filter: saturate(1.05);
}

/* Kapak üzerindeki karartma (oynatma başlayınca JS kabı boşaltır) */
.opv .opv-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(6, 8, 11, .18), rgba(6, 8, 11, .62) 100%),
    linear-gradient(to top, rgba(6, 8, 11, .85), transparent 55%);
}

.opv .opv-shade--full {
  background: linear-gradient(160deg, rgba(6, 8, 11, .88), rgba(6, 8, 11, .94));
}

/* iframe / yerel video sahneyi tamamen doldurur */
.opv .opv-stage iframe,
.opv .opv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.opv .opv-stage--local .opv-video { object-fit: cover; }

/* --------------------------------------------------------------------------
   Oynat butonu
   -------------------------------------------------------------------------- */
.opv .opv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 2.9rem;
  line-height: 1;
  background: linear-gradient(140deg, var(--op-red-300), var(--op-red) 55%, var(--op-red-600));
  box-shadow: var(--sh-red), 0 0 0 10px rgba(255, 255, 255, .06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.opv .opv-play i {
  position: relative;
  z-index: 2;
  margin-left: 5px; /* üçgen ikonu optik olarak ortalar */
}

.opv .opv-play:hover,
.opv .opv-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.09);
  box-shadow: 0 20px 50px rgba(228, 0, 43, .55), 0 0 0 14px rgba(255, 255, 255, .08);
}

.opv .opv-play:active { transform: translate(-50%, -50%) scale(1.02); }

/* Dışa doğru açılan nabız halkaları */
.opv .opv-play__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--op-red-300);
  opacity: 0;
  animation: opv-ring 2.8s var(--ease) infinite;
  pointer-events: none;
}

.opv .opv-play__ring--2 { animation-delay: 1.4s; }

@keyframes opv-ring {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Sahne üzerindeki etiket
   -------------------------------------------------------------------------- */
.opv .opv-tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: calc(100% - 36px);
  padding: .5rem .9rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: rgba(6, 8, 11, .72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opv .opv-tag i { color: var(--op-red); font-size: .95rem; }

/* Çerçeve altı künye — arkadaki kırmızı parıltının üstünde kalmalı */
.opv .opv-cap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
}

.opv .opv-cap i { color: var(--op-red); }

/* --------------------------------------------------------------------------
   "Video yakında" durumu
   -------------------------------------------------------------------------- */
.opv .opv-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .55rem;
  padding: clamp(20px, 4vw, 44px);
}

.opv .opv-soon__ic {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  font-size: 1.9rem;
  color: var(--op-red);
  background: var(--op-red-soft);
  border: 1px solid rgba(228, 0, 43, .28);
  margin-bottom: .35rem;
}

.opv .opv-soon__title {
  font-family: var(--f-head);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.12;
  color: #fff;
  margin: 0;
  max-width: 22ch;
}

.opv .opv-soon__text {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--tx-light-soft);
  max-width: 48ch;
  margin: 0 0 .5rem;
}

/* --------------------------------------------------------------------------
   Güven maddeleri
   -------------------------------------------------------------------------- */
.opv .opv-trust {
  list-style: none;
  padding: clamp(22px, 3vw, 30px) 0 0;
  margin: clamp(38px, 5vw, 62px) 0 0;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.opv .opv-trust li {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.opv .opv-trust li + li {
  padding-left: 1.25rem;
  border-left: 1px solid var(--line-dark);
}

.opv .opv-trust i {
  font-size: 1.5rem;
  color: var(--op-red);
  flex: 0 0 auto;
}

.opv .opv-trust span {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tx-light-dim);
}

.opv .opv-trust strong {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .opv .opv-frame { max-width: 720px; margin-inline: auto; }
  .opv .opv-play { width: 88px; height: 88px; font-size: 2.4rem; }

  .opv .opv-trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.5rem;
  }
  .opv .opv-trust li + li { padding-left: 0; border-left: 0; }
}

/* "Yakında" kutusu: dar ekranda metin 16:9 alana sığmıyor → sahne içeriğe göre uzar */
@media (max-width: 767.98px) {
  .opv .opv-stage--soon { aspect-ratio: auto; min-height: 240px; }
  .opv .opv-stage--soon .opv-poster { position: absolute; inset: 0; }
  .opv .opv-stage--soon .opv-soon { position: relative; inset: auto; min-height: 240px; }
}

@media (max-width: 575.98px) {
  .opv::after { display: none; }

  .opv .opv-list { gap: .95rem; margin: 1.6rem 0 1.8rem; }
  .opv .opv-list__ic { flex-basis: 38px; width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
  .opv .opv-list strong { font-size: 1.02rem; }
  .opv .opv-list li > span:last-child { font-size: .88rem; }

  .opv .opv-cta { gap: .85rem 1.1rem; }
  .opv .opv-cta .btn-op { width: 100%; }

  .opv .opv-stage { border-radius: var(--r-lg); }
  .opv .opv-play { width: 70px; height: 70px; font-size: 1.95rem; }
  .opv .opv-play i { margin-left: 4px; }
  .opv .opv-tag { left: 12px; bottom: 12px; font-size: .72rem; padding: .4rem .7rem; }
  .opv .opv-soon__ic { width: 54px; height: 54px; font-size: 1.5rem; border-radius: 16px; }
  .opv .opv-soon__text { font-size: .85rem; }

  .opv .opv-trust { grid-template-columns: 1fr; gap: .9rem; }
  .opv .opv-trust i { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   Hareket tercihi
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opv .opv-play__ring { animation: none; opacity: 0; }
  .opv .opv-stage:hover .opv-poster { transform: none; }
}

/* ==== 08-process.css ==== */
/* ==========================================================================
   SÜREÇ — Nasıl çalışıyoruz (4 adım)
   Kök: <section class="sec sec--paper opr" id="surec">
   ========================================================================== */
.opr {
  /* Bölüme özel ölçü ve renkler */
  --opr-head-h: 104px;      /* numara + ikon alanının yüksekliği */
  --opr-ico: 76px;          /* daire ikon çapı */
  --opr-gap: 64px;          /* bağlantı çizgisinin merkeze bırakacağı boşluk */
  --opr-line: rgba(10, 13, 18, .17);
  --opr-num: rgba(10, 13, 18, .07);
}

/* Arka planda yumuşak kırmızı ışıma */
.opr-deco {
  position: absolute;
  top: -160px;
  left: 50%;
  width: 760px;
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(228, 0, 43, .09), transparent 66%);
  filter: blur(6px);
}

/* --------------------------------------------------------------------------
   Zaman çizelgesi — masaüstünde 4 sütun
   -------------------------------------------------------------------------- */
.opr-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.opr-step {
  position: relative;
  padding: 0 clamp(8px, 1.2vw, 18px);
  text-align: center;
}

/* Kesikli bağlantı çizgisi: sol yarım (::before) ve sağ yarım (::after).
   Merkezde numara/ikon için boşluk bırakılır. */
.opr-step::before,
.opr-step::after {
  content: "";
  position: absolute;
  top: calc(var(--opr-head-h) / 2);
  height: 0;
  border-top: 2px dashed var(--opr-line);
}
.opr-step::before {
  left: 0;
  right: calc(50% + var(--opr-gap));
}
.opr-step::after {
  left: calc(50% + var(--opr-gap));
  right: 0;
}

/* İlk ve son adımda çizginin dış uçlarını kırp */
.opr-step:first-child::before { display: none; }
.opr-step:last-child::after   { display: none; }

/* --- Numara + ikon alanı --- */
.opr-head {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--opr-head-h);
  margin-bottom: 1.1rem;
}

.opr-no {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  z-index: 1;
  font-family: var(--f-head);
  font-size: clamp(3.6rem, 5.4vw, 5.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--opr-num);
  transition: color .45s var(--ease);
  pointer-events: none;
}

.opr-ico {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--opr-ico);
  height: var(--opr-ico);
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--line-light);
  box-shadow: var(--sh-sm);
  color: var(--op-red);
  font-size: 1.75rem;
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
.opr-ico i { line-height: 1; }

/* Üzerine gelince ikon kırmızıya döner, numara hafif belirginleşir */
.opr-step:hover .opr-ico {
  background: var(--op-red);
  border-color: var(--op-red);
  color: #fff;
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--sh-red);
}
.opr-step:hover .opr-no {
  color: var(--op-red-soft);
}

/* --- Metin --- */
.opr-title {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .45rem;
  color: var(--tx-dark);
}

.opr-text {
  font-size: .93rem;
  line-height: 1.68;
  margin: 0;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Alt CTA şeridi
   -------------------------------------------------------------------------- */
.opr-cta {
  position: relative;
  margin-top: clamp(44px, 5.5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3.2vw, 40px);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--ink-800), var(--ink-700));
  border: 1px solid var(--line-dark);
  box-shadow: var(--sh-lg);
  color: var(--tx-light);
  overflow: hidden;
}

/* Şeridin sol kenarındaki kırmızı vurgu */
.opr-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--op-red), var(--op-red-300));
}

.opr-cta__txt { min-width: 0; }

.opr-cta__title {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .3rem;
}

/* Koyu şerit üzerindeki metin açık renk olmalı (.sec--paper p kuralını aşar) */
.opr .opr-cta__sub {
  font-size: .93rem;
  line-height: 1.65;
  margin: 0;
  max-width: 56ch;
  color: var(--tx-light-soft);
}

.opr-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Duyarlılık — 991.98px altında dikey zaman çizelgesi
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .opr {
    --opr-ico: 64px;
    --opr-head-h: 64px;
  }

  .opr-track {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }

  .opr-step {
    padding: 0 0 34px calc(var(--opr-ico) + 20px);
    text-align: left;
  }
  .opr-step:last-child { padding-bottom: 0; }

  /* Yatay çizgi kapanır, yerine dikey çizgi gelir */
  .opr-step::after { display: none; }
  .opr-step::before {
    display: block;
    top: calc(var(--opr-ico) + 10px);
    bottom: -2px;
    left: calc(var(--opr-ico) / 2 - 1px);
    right: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 2px dashed var(--opr-line);
  }
  .opr-step:first-child::before { display: block; }
  .opr-step:last-child::before  { display: none; }

  .opr-head {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--opr-ico);
    height: var(--opr-ico);
    margin: 0;
  }

  /* Dikey düzende hayalet numara, opak dairenin tamamen altında kalıyordu;
     bu yüzden dairenin köşesine oturan küçük bir rozete dönüşüyor. */
  .opr-no {
    top: auto;
    right: -8px;
    bottom: -6px;
    left: auto;
    z-index: 3;
    transform: none;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--paper-2);
    border: 1px solid var(--line-light);
    box-shadow: var(--sh-sm);
    font-size: .84rem;
    letter-spacing: 0;
    color: var(--op-red);
  }
  .opr-step:hover .opr-no { color: var(--op-red); }

  .opr-body { padding-top: .35rem; }

  .opr-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .opr-cta {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .opr {
    --opr-ico: 56px;
    --opr-head-h: 56px;
  }

  .opr-step { padding-left: calc(var(--opr-ico) + 16px); padding-bottom: 30px; }
  .opr-ico { font-size: 1.4rem; }
  .opr-no { min-width: 24px; height: 24px; font-size: .8rem; right: -6px; }
  .opr-text { font-size: .9rem; }

  .opr-cta {
    padding: 22px 18px;
    text-align: left;
  }
  .opr-cta__btns { width: 100%; }
  .opr-cta__btns .btn-op { flex: 1 1 100%; }
}

/* Hareket tercihi: geçişleri sadeleştir */
@media (prefers-reduced-motion: reduce) {
  .opr-ico,
  .opr-no { transition: none; }
  .opr-step:hover .opr-ico { transform: none; }
}

/* ==== 09-gallery.css ==== */
/* ==========================================================================
   GALERİ  (#galeri)
   Koyu zeminde yatay fotoğraf slider'ı; hover'da zoom + degrade + büyüteç.
   Tüm sınıflar "opg-" önekiyle, .opg kapsamı içinde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BAŞLIK SATIRI
   -------------------------------------------------------------------------- */
.opg .opg-head {
  margin-bottom: clamp(30px, 4vw, 52px);
}

/* Sağ blok: fotoğraf sayacı rozeti + slider okları */
.opg .opg-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Fotoğraf sayacı rozeti — ikon marka kırmızısında */
.opg .opg-count {
  flex: 0 0 auto;
  padding: .5rem 1.05rem;
}

.opg .opg-count i {
  color: var(--op-red);
  font-size: .95rem;
}

.opg .opg-nav {
  gap: .6rem;
  margin-left: auto;
}

/* Masaüstünde rozet ve oklar sağa yaslansın */
@media (min-width: 992px) {
  .opg .opg-tools {
    justify-content: flex-end;
    padding-bottom: .35rem;
  }
}

/* --------------------------------------------------------------------------
   SLIDER SAHNESİ
   app.css'te .swiper { overflow: visible } olduğu için taşmayı burada kırpıyoruz.
   Kart gölgesinin kesilmemesi adına yalnızca pozitif iç boşluk veriyoruz.
   -------------------------------------------------------------------------- */
.opg .opg-stage {
  position: relative;
  overflow: hidden;
  /* Alt boşluk, kartın hover gölgesinin kırpılmaması için bilerek geniş */
  padding: 8px 6px 34px;
}

/* --------------------------------------------------------------------------
   FOTOĞRAF KARTI
   -------------------------------------------------------------------------- */
.opg .opg-card {
  margin: 0;
  height: 100%;
}

.opg .opg-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink-700);
  border: 1px solid var(--line-dark);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.opg .opg-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}

/* Okunabilirlik için sabit, hover'da koyulaşan degrade */
.opg .opg-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 8, 11, .86) 0%, rgba(6, 8, 11, .28) 42%, rgba(6, 8, 11, 0) 70%);
  opacity: .9;
  /* Degrade (background-image) geçişlenemez; yalnızca opaklığı animasyonluyoruz */
  transition: opacity .45s var(--ease);
}

.opg .opg-link:hover,
.opg .opg-link:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(228, 0, 43, .45);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .55);
}

.opg .opg-link:hover img,
.opg .opg-link:focus-visible img {
  transform: scale(1.07);
}

.opg .opg-link:hover::after,
.opg .opg-link:focus-visible::after {
  opacity: 1;
  background:
    linear-gradient(to top, rgba(6, 8, 11, .92) 0%, rgba(6, 8, 11, .5) 52%, rgba(228, 0, 43, .16) 100%);
}

/* --------------------------------------------------------------------------
   ALT ŞERİT: başlık + büyüteç
   -------------------------------------------------------------------------- */
.opg .opg-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.15rem 1.15rem 1.05rem;
}

.opg .opg-cap__txt {
  font-family: var(--f-head);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: #fff;
}

/* Büyüteç: normalde silik ve küçük, hover'da belirir */
.opg .opg-zoom {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--line-dark-2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px) scale(.86);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              background-color .35s var(--ease), border-color .35s var(--ease);
}

.opg .opg-link:hover .opg-zoom,
.opg .opg-link:focus-visible .opg-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: var(--op-red);
  border-color: var(--op-red);
}

/* Üst köşede ince kırmızı vurgu çizgisi */
.opg .opg-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--op-red), var(--op-red-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}

.opg .opg-link:hover::before,
.opg .opg-link:focus-visible::before {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   SAYFALAMA ÇUBUĞU
   -------------------------------------------------------------------------- */
.opg .opg-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* Bullet'lar currentColor kullanır; koyu zeminde beyaza sabitliyoruz */
.opg .opg-pag {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #fff;
  width: auto;
}

/* Swiper, .swiper dışındaki sayfalamaya da yatay bullet boşluğu basar; sıfırlıyoruz */
.opg .opg-pag .swiper-pagination-bullet {
  margin: 0;
}

/* Mobil kaydırma ipucu */
.opg .opg-hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
}

.opg .opg-hint i {
  color: var(--op-red);
  font-size: .95rem;
  animation: opg-nudge 2.2s ease-in-out infinite;
}

@keyframes opg-nudge {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   ALT NOT
   -------------------------------------------------------------------------- */
.opg .opg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.5vw, 46px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid var(--line-dark);
}

.opg .opg-foot__txt {
  margin: 0;
  max-width: 62ch;
  font-size: .94rem;
  line-height: 1.7;
}

.opg .opg-foot__txt i {
  color: var(--op-red);
  margin-right: .5rem;
}

.opg .opg-foot__btns {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .opg .opg-tools {
    justify-content: flex-start;
  }

  .opg .opg-cap__txt {
    font-size: 1.08rem;
  }

  /* Dokunmatikte büyüteç hover beklemeden görünsün */
  .opg .opg-zoom {
    opacity: .85;
    transform: none;
  }

  .opg .opg-foot {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .opg .opg-stage {
    padding: 6px 4px 26px;
  }

  .opg .opg-cap {
    padding: .95rem .9rem .85rem;
  }

  .opg .opg-cap__txt {
    font-size: 1rem;
  }

  .opg .opg-zoom {
    width: 34px;
    height: 34px;
    font-size: .92rem;
  }

  .opg .opg-foot__btns {
    width: 100%;
  }

  .opg .opg-foot__btns > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   HAREKET TERCİHİ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opg .opg-hint i {
    animation: none;
  }

  .opg .opg-link:hover img,
  .opg .opg-link:focus-visible img {
    transform: none;
  }

  .opg .opg-zoom {
    opacity: 1;
    transform: none;
  }
}

/* ==== 10-testimonials.css ==== */
/* ==========================================================================
   MÜŞTERİ YORUMLARI  (#yorumlar)
   Önek: .opt-   — kök eleman: .opt
   ========================================================================== */

/* --- Bölüme özel yerel değişkenler ---
   Marka kırmızısı doğrudan yazılmaz; hep var(--op-red) üzerinden türetilir. */
.opt {
  --opt-star: #ffc107;                                                /* yıldız sarısı — marka rengi değildir */
  --opt-red-line: color-mix(in srgb, var(--op-red) 25%, transparent); /* hover kenarlığı */
  --opt-red-glow: color-mix(in srgb, var(--op-red) 30%, transparent); /* avatar gölgesi */
}

/* --- Başlık altındaki puan özeti --- */
.opt .opt-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .85rem;
  margin-top: 1.1rem;
  padding: .6rem 1.25rem;
  border-radius: 100px;
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-sm);
}

.opt .opt-rating__stars {
  display: inline-flex;
  gap: .18rem;
  color: var(--opt-star);
  font-size: 1rem;
  line-height: 1;
}

.opt .opt-rating__txt {
  font-size: .9rem;
  font-weight: 600;
  color: var(--tx-dark-soft);
  line-height: 1.2;
}

.opt .opt-rating__txt strong {
  font-family: var(--f-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--op-red);
  letter-spacing: .01em;
  margin-right: .08em;
}

/* --- Slider kabı ---
   app.css'te .swiper { overflow: visible } olduğu için burada kendi
   kabımızı kapatıyoruz; iç dolgu kart gölgelerinin kesilmesini önler. */
.opt .opt-slider {
  overflow: hidden;
  padding: 10px 6px 18px;
}

/* Kart yükseklikleri eşitlensin (yüksekliği Swiper'ın stretch'i belirler) */
.opt .opt-slide {
  height: auto;
  display: flex;
}

/* --- Yorum kartı --- */
.opt .opt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

/* Üstte hover ile açılan kırmızı şerit */
.opt .opt-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--op-red), var(--op-red-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.opt .opt-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--opt-red-line);
}

.opt .opt-card:hover::before { transform: scaleX(1); }

/* --- Tırnak ikonu (filigran) --- */
.opt .opt-quote {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--op-red);
  opacity: .12;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.opt .opt-card:hover .opt-quote {
  opacity: .26;
  transform: translateY(-2px) scale(1.04);
}

/* --- Yıldızlar --- */
.opt .opt-stars {
  display: inline-flex;
  gap: .16rem;
  color: var(--opt-star);
  font-size: .95rem;
  line-height: 1;
  margin-bottom: 1rem;
}

/* --- Yorum metni --- */
.opt .opt-text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 7.6em;
  font-size: .97rem;
  line-height: 1.78;
  color: var(--tx-dark-soft);
}

.opt .opt-text p {
  margin: 0;
  overflow-wrap: break-word;
}

/* --- Ayırıcı --- */
.opt .opt-sep {
  height: 1px;
  border: 0;
  opacity: 1;
  margin: 1.4rem 0 1.15rem;
  background: linear-gradient(90deg, var(--line-light), transparent 88%);
}

/* --- Kişi bilgisi --- */
.opt .opt-who {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.opt .opt-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--op-red), var(--op-red-600));
  box-shadow: 0 8px 20px var(--opt-red-glow);
  color: var(--tx-light);
  font-family: var(--f-head);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
}

.opt .opt-who__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opt .opt-name {
  font-family: var(--f-head);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--tx-dark);
}

.opt .opt-bike {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--tx-dark-soft);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.opt .opt-bike i {
  color: var(--op-red);
  font-size: .95rem;
  flex: 0 0 auto;
}

/* --- Kontroller: ok + sayfalama --- */
.opt .opt-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: clamp(28px, 3.4vw, 46px);
}

/* Swiper sayfalamasını kendi satırımıza sabitliyoruz */
.opt .opt-ctrl .swiper-pagination {
  position: static;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--tx-dark);
}

.opt .opt-ctrl .swiper-pagination-bullet { margin: 0; }

/* --- 991.98px ve altı --- */
@media (max-width: 991.98px) {
  .opt .opt-text { min-height: 6.4em; }
  .opt .opt-card { padding: 26px 24px; }
}

/* --- 575.98px ve altı --- */
@media (max-width: 575.98px) {
  .opt .opt-rating { padding: .55rem 1rem; gap: .4rem .6rem; }
  .opt .opt-rating__txt { font-size: .84rem; }
  .opt .opt-rating__txt strong { font-size: 1.2rem; }

  .opt .opt-card { padding: 22px 20px; }
  .opt .opt-text { min-height: 0; font-size: .94rem; }
  .opt .opt-quote { font-size: 2.9rem; top: 6px; right: 12px; }

  .opt .opt-avatar { flex-basis: 44px; width: 44px; height: 44px; font-size: 1.25rem; }
  .opt .opt-name { font-size: 1.02rem; }

  .opt .opt-ctrl { gap: .8rem; margin-top: 26px; }
  .opt .opt-ctrl .op-swiper-nav { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* --- Hareket tercihi: yer değiştiren hover efektleri kapatılır --- */
@media (prefers-reduced-motion: reduce) {
  .opt .opt-card,
  .opt .opt-quote,
  .opt .opt-card::before { transition: none; }

  .opt .opt-card:hover { transform: none; }
  .opt .opt-card:hover .opt-quote { transform: none; }
}

/* ==== 11-faq.css ==== */
/* ==========================================================================
   S.S.S. — SIKÇA SORULAN SORULAR
   Sol: başlık + yardım kartı  |  Sağ: akordeon
   Tüm kurallar .opf kapsamındadır; app.css bileşenleri değiştirilmez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) SOL SÜTUN
   -------------------------------------------------------------------------- */
.opf-aside { position: relative; }

.opf-lead { margin-bottom: 1.85rem; }

/* Geniş ekranda başlık bloğu akordeonla birlikte kayar */
@media (min-width: 992px) {
  .opf-aside {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
}

/* --- "Sorunuz mu var?" mini kartı --- */
.opf-ask {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
}

.opf-ask__ico {
  margin-bottom: 1rem;
  background: rgba(228, 0, 43, .16);
}

.opf-ask__title {
  font-size: 1.22rem;
  margin-bottom: .45rem;
  color: var(--tx-light);
}

/* Bölüm .sec--white olduğu için ".sec--white p" kuralı koyu kartın
   metnini koyu renge çeviriyordu; .opf ile kapsayıp önceliği geri alıyoruz. */
.opf .opf-ask__text {
  color: var(--tx-light-soft);
  margin-bottom: 1.2rem;
}

/* Butonlar alt alta düştüğünde satır aralığı */
.opf-ask__btns { row-gap: .6rem; }

/* --------------------------------------------------------------------------
   2) AKORDEON KABUĞU
   -------------------------------------------------------------------------- */
.opf-acc {
  /* Bootstrap akordeon değişkenleri bölüm içinde nötrleniyor */
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--tx-dark);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--op-red);
  --bs-accordion-btn-icon-transform: none;

  display: grid;
  gap: .8rem;
}

/* --- Tekil soru kutusu --- */
.opf .accordion-item.opf-item {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-light);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  /* AOS bu elemanın üstünde çalışıyor: opacity ve transform listede kalmalı,
     yoksa giriş animasyonunun solma kısmı iptal olur. */
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.opf .accordion-item.opf-item:hover {
  border-color: rgba(228, 0, 43, .22);
  box-shadow: var(--sh);
}

/* Açık kutu daha belirgin bir kenarlık ve gölge alır */
.opf .accordion-item.opf-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(228, 0, 43, .38);
  box-shadow: 0 14px 34px rgba(228, 0, 43, .10);
}

/* --------------------------------------------------------------------------
   3) SORU BAŞLIĞI (buton)
   -------------------------------------------------------------------------- */
.opf .opf-head { margin: 0; }

.opf .accordion-button.opf-btn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  width: 100%;
  padding: 1.1rem 1.2rem 1.1rem 1.45rem;
  background: transparent;
  color: var(--tx-dark);
  font-family: var(--f-head);
  font-size: clamp(1.06rem, 1.45vw, 1.26rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: .005em;
  text-align: left;
  border-radius: var(--r);
  box-shadow: none;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}

/* Bootstrap'in varsayılan ok görseli gizlendi; kendi ikonumuzu kullanıyoruz */
.opf .accordion-button.opf-btn::after { display: none; }

/* Sol kırmızı şerit — sadece açık başlıkta görünür */
.opf .accordion-button.opf-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--op-red), var(--op-red-300));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .42s var(--ease);
}

.opf .accordion-button.opf-btn:hover { color: var(--op-red); }

.opf .accordion-button.opf-btn:not(.collapsed) {
  color: var(--op-red);
  background: rgba(228, 0, 43, .04);
  box-shadow: none;
}

.opf .accordion-button.opf-btn:not(.collapsed)::before { transform: scaleY(1); }

/* --- Sıra numarası --- */
.opf-no {
  flex: 0 0 auto;
  min-width: 1.9em;
  padding-top: .16em;
  font-family: var(--f-head);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--tx-dark-soft);
  opacity: .75;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}

.opf .accordion-button.opf-btn:not(.collapsed) .opf-no {
  color: var(--op-red);
  opacity: 1;
}

/* --- Soru metni --- */
.opf-q { flex: 1 1 auto; }

/* --- Açılır ok ikonu --- */
.opf-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: .85rem;
  color: var(--tx-dark-soft);
  background: rgba(10, 13, 18, .04);
  border: 1px solid var(--line-light);
  transition: transform .42s var(--ease), color .3s var(--ease),
              background-color .3s var(--ease), border-color .3s var(--ease);
}

.opf .accordion-button.opf-btn:hover .opf-ico {
  color: var(--op-red);
  border-color: rgba(228, 0, 43, .3);
}

.opf .accordion-button.opf-btn:not(.collapsed) .opf-ico {
  transform: rotate(180deg);
  background: var(--op-red);
  border-color: var(--op-red);
  color: var(--tx-light);
}

/* --------------------------------------------------------------------------
   4) CEVAP GÖVDESİ
   -------------------------------------------------------------------------- */
.opf .accordion-body.opf-body {
  padding: .1rem 1.5rem 1.3rem 3.6rem;
}

.opf .opf-a {
  position: relative;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line-light);
  font-size: .95rem;
  line-height: 1.78;
  color: var(--tx-dark-soft);
}

/* --------------------------------------------------------------------------
   5) ALT NOT
   -------------------------------------------------------------------------- */
.opf .opf-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1.6rem 0 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--tx-dark-soft);
}

.opf-note i {
  color: var(--op-red);
  font-size: 1rem;
  margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   6) DUYARLILIK
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .opf-aside { text-align: left; }
  .opf-lead { margin-bottom: 1.5rem; }
  .opf-ask { max-width: 560px; }
}

@media (max-width: 575.98px) {
  .opf-acc { gap: .65rem; }

  .opf .accordion-button.opf-btn {
    gap: .6rem;
    padding: .95rem .9rem .95rem 1.15rem;
    font-size: 1.04rem;
  }

  .opf-no { display: none; }

  .opf-ico { width: 28px; height: 28px; font-size: .78rem; }

  .opf .accordion-body.opf-body { padding: .1rem 1.1rem 1.1rem 1.15rem; }

  .opf .opf-a { font-size: .91rem; }

  .opf-ask__btns > a { width: 100%; }
}

/* --------------------------------------------------------------------------
   7) HAREKET TERCİHİ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .opf .accordion-item.opf-item,
  .opf .accordion-button.opf-btn,
  .opf .accordion-button.opf-btn::before,
  .opf-no,
  .opf-ico {
    transition: none;
  }
}

/* ==== 12-cta.css ==== */
/* ==========================================================================
   ÇAĞRI BANDI (CTA) — .opc
   Koyu zemin üzerinde kırmızı degrade kart, grid dokusu ve taşan parıltı.
   ========================================================================== */

/* --- Kart sarmalayıcı: parıltının taşabilmesi için kesme yok --- */
.opc .opc-wrap {
  position: relative;
  isolation: isolate;
}

/* Kartın arkasından taşan kırmızı parıltı */
.opc .opc-glow {
  position: absolute;
  inset: 6% -4% -22% -4%;
  z-index: -1;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 50% 50%, rgba(228, 0, 43, .45), transparent 68%);
  filter: blur(46px);
  pointer-events: none;
}

/* --- Ana kart --- */
.opc .opc-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(30px, 4.6vw, 62px);
  color: #fff;
  background:
    linear-gradient(128deg, var(--op-red-600) 0%, var(--op-red) 48%, var(--op-red-300) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 32px 70px rgba(228, 0, 43, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Üstte ince grid dokusu (karta özel, maskeli) */
.opc .opc-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 85% 120% at 18% 0%, #000 10%, transparent 74%);
          mask-image: radial-gradient(ellipse 85% 120% at 18% 0%, #000 10%, transparent 74%);
  opacity: .75;
}

/* Büyük soluk desen ikonu */
.opc .opc-mark {
  position: absolute;
  right: -2.2%;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  font-size: clamp(190px, 26vw, 330px);
  line-height: 1;
  color: rgba(255, 255, 255, .1);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* --- Sol blok: etiket, başlık, açıklama --- */
.opc .opc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.15rem;
  padding: .42rem .95rem;
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.opc .opc-eyebrow i { font-size: .95rem; }

.opc .opc-title {
  font-family: var(--f-head);
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0 0 1rem;
  text-shadow: 0 6px 24px rgba(94, 0, 18, .32);
}
/* Başlığın vurgu satırı */
.opc .opc-title span {
  display: block;
  color: rgba(255, 255, 255, .82);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}

.opc .opc-text {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.75;
  max-width: 54ch;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}

/* --- Sağ blok: butonlar --- */
.opc .opc-actions {
  display: grid;
  gap: .85rem;
}

/* Beyaz dolgulu buton (kırmızı zemin üzerinde birincil eylem) */
.opc .opc-btn-light {
  --btn-bg: #fff;
  --btn-fg: var(--op-red-600);
  width: 100%;
  box-shadow: 0 16px 34px rgba(78, 0, 15, .28);
}
.opc .opc-btn-light::after {
  background: linear-gradient(120deg, #fff, #ffe9ed);
}
.opc .opc-btn-light:hover {
  color: var(--op-red-600);
  box-shadow: 0 22px 44px rgba(78, 0, 15, .38);
}

/* Şeffaf kenarlıklı buton (ikincil eylem) */
.opc .opc-btn-line {
  --btn-bg: transparent;
  --btn-fg: #fff;
  width: 100%;
  border: 1.5px solid rgba(255, 255, 255, .6);
  box-shadow: none;
}
.opc .opc-btn-line::after {
  background: rgba(255, 255, 255, .16);
}
.opc .opc-btn-line:hover {
  color: #fff;
  border-color: #fff;
  box-shadow: 0 16px 34px rgba(78, 0, 15, .24);
}

/* Klavye odağı: global kırmızı halka bu kartta görünmez, beyaza çeviriyoruz */
.opc .opc-btn-light:focus-visible,
.opc .opc-btn-line:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Çalışma saati notu */
.opc .opc-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: .35rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  /* Kırmızı zemin üzerinde okunabilirlik için yüksek opaklık */
  color: rgba(255, 255, 255, .94);
}
.opc .opc-note i { font-size: 1rem; }
.opc .opc-note strong { color: #fff; font-weight: 700; margin-left: .25rem; }

/* --- Duyarlılık: tablet ve altı --- */
@media (max-width: 991.98px) {
  .opc .opc-card { text-align: center; }
  .opc .opc-text { margin-left: auto; margin-right: auto; }
  .opc .opc-mark {
    right: 50%;
    top: 0;
    transform: translate(50%, -18%) rotate(0deg);
    font-size: clamp(220px, 46vw, 340px);
    color: rgba(255, 255, 255, .08);
  }
  .opc .opc-actions { max-width: 420px; margin: .5rem auto 0; }
  .opc .opc-glow { inset: 10% 0 -16% 0; filter: blur(34px); }
}

/* --- Duyarlılık: telefon --- */
@media (max-width: 575.98px) {
  .opc .opc-card { border-radius: var(--r-lg); padding: 28px 20px 30px; }
  .opc .opc-title { font-size: clamp(1.7rem, 8.4vw, 2.2rem); }
  .opc .opc-title span { -webkit-text-stroke-width: 1px; }
  .opc .opc-eyebrow { letter-spacing: .1em; font-size: .68rem; }
  .opc .opc-actions { max-width: none; }
  .opc .opc-btn-light,
  .opc .opc-btn-line { padding: 1rem 1.2rem; font-size: .88rem; }
  .opc .opc-grid { background-size: 38px 38px; }
}

/* --- Hareket tercihi: hover'daki yukarı kayma hareketini kapat --- */
@media (prefers-reduced-motion: reduce) {
  .opc .opc-glow { filter: blur(30px); }
  .opc .opc-btn-light,
  .opc .opc-btn-line { transition: none; }
  .opc .opc-btn-light:hover,
  .opc .opc-btn-line:hover,
  .opc .opc-btn-light:active,
  .opc .opc-btn-line:active { transform: none; }
}

/* ==== 13-contact.css ==== */
/* ==========================================================================
   13 — İLETİŞİM  (.opi)
   Kapsam: sadece #iletisim bölümü. Genel bileşenler app.css'te tanımlıdır.
   ========================================================================== */

/* Bölüm zemininde yavaşça nefes alan kırmızı aydınlatma.
   z-index: 0 — dekoratif ışık içeriğin ARKASINDA kalmalı (::after son çocuk
   olduğu için katman verilmezse kartların üzerine biner). */
.opi::after {
  content: "";
  position: absolute;
  inset: -18% -14% auto auto;
  z-index: 0;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--op-red-soft), transparent 66%);
  filter: blur(12px);
  pointer-events: none;
  animation: opi-breathe 11s ease-in-out infinite;
}

/* İçerik her zaman dekoratif katmanların üstünde */
.opi > .container {
  z-index: 1;
}

@keyframes opi-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   SOL SÜTUN — iletişim bilgi kartları
   -------------------------------------------------------------------------- */
.opi .opi-aside {
  display: grid;
  gap: 1rem;
}

/* Kart: app.css'teki .card-op card-op--dark üzerine daha derli toplu yerleşim */
.opi .opi-card {
  display: flex;
  align-items: flex-start;
  gap: 1.05rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r);
}

/* Yığılmış kartlarda daha ölçülü bir kalkma hareketi */
.opi .opi-card:hover {
  transform: translateY(-4px);
}

.opi .opi-card__ic {
  flex: 0 0 46px;
}

.opi .opi-card__body {
  min-width: 0;
  flex: 1 1 auto;
}

.opi .opi-card__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .5rem;
}

.opi .opi-card__text {
  display: block;
  margin: 0;
  font-size: .93rem;
  line-height: 1.65;
  font-style: normal;                 /* <address> varsayılanını sıfırla */
  color: var(--tx-light-soft);
}

/* Telefon / e-posta gibi öne çıkan tıklanabilir değerler */
.opi .opi-card__big {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  color: #fff;
  word-break: break-word;
}
.opi .opi-card__big:hover { color: var(--op-red-300); }

.opi .opi-card__mini {
  display: block;
  margin-top: .15rem;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
}
.opi .opi-card__mini--note {
  margin-top: .85rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
}

.opi .opi-card__link {
  margin-top: .85rem;
}

/* WhatsApp satırı */
.opi .opi-card__wa {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: .9rem;
  padding: .6rem .95rem;
  border-radius: var(--r-sm);
  background: rgba(31, 175, 84, .12);
  border: 1px solid rgba(31, 175, 84, .32);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.opi .opi-card__wa:hover {
  color: #fff;
  background: rgba(31, 175, 84, .2);
  border-color: rgba(31, 175, 84, .55);
  transform: translateX(3px);
}
.opi .opi-card__wa i { font-size: 1.3rem; color: #2ecc6a; }
.opi .opi-card__wa small {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
}

/* --- Çalışma saatleri listesi --- */
.opi .opi-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .1rem;
}

.opi .opi-hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--line-dark);
  font-size: .92rem;
}
.opi .opi-hours li:last-child { border-bottom: 0; }

.opi .opi-hours__d { color: var(--tx-light-soft); }
.opi .opi-hours__t { font-weight: 700; color: #fff; white-space: nowrap; }

/* Kapalı günler: soluk gün adı, kırmızı saat bilgisi */
.opi .opi-hours li.is-closed .opi-hours__d { color: var(--tx-light-dim); }
.opi .opi-hours li.is-closed .opi-hours__t { color: var(--op-red-300); }

/* --- Sosyal medya --- */
.opi .opi-soc {
  padding: .5rem .25rem 0;
}

.opi .opi-soc__title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
  margin: 0 0 .85rem;
}

.opi .opi-soc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* --------------------------------------------------------------------------
   SAĞ SÜTUN — form paneli
   -------------------------------------------------------------------------- */
.opi .opi-form {
  position: relative;
  height: 100%;
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--line-dark);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  overflow: hidden;
}

/* Panelin üstündeki ince marka şeridi */
.opi .opi-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--op-red), var(--op-red-300) 45%, transparent 90%);
}

.opi .opi-form__head {
  margin-bottom: 1.6rem;
}

.opi .opi-form__title {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .45rem;
}

.opi .opi-form__sub {
  font-size: .93rem;
  line-height: 1.7;
  margin: 0;
  max-width: 52ch;
}

/* Zorunlu alan yıldızı */
.opi .opi-req { color: var(--op-red); }

.opi .opi-form__note {
  margin-top: 1.1rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   HARİTA
   -------------------------------------------------------------------------- */
.opi .opi-map {
  position: relative;
  margin-top: clamp(38px, 4.5vw, 64px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.opi .opi-map__frame {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  filter: grayscale(.3) contrast(1.05);
}

/* Harita üzerindeki konum etiketi — tıklamayı engellemesin */
.opi .opi-map__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(6, 8, 11, .88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.opi .opi-map__tag i { font-size: 1.15rem; color: var(--op-red); }
.opi .opi-map__tag strong {
  display: block;
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.opi .opi-map__tag small {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-light-dim);
}

/* --------------------------------------------------------------------------
   DUYARLILIK
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .opi .opi-map__frame { height: 420px; }
}

@media (max-width: 991.98px) {
  .opi::after { width: 420px; height: 420px; }
  .opi .opi-aside { gap: .85rem; }
  .opi .opi-soc { text-align: center; }
  .opi .opi-soc__list { justify-content: center; }
}

@media (max-width: 575.98px) {
  .opi .opi-card {
    padding: 1.15rem 1.15rem;
    gap: .85rem;
  }
  .opi .opi-card__big { font-size: 1.3rem; }
  .opi .opi-card__wa { width: 100%; }
  .opi .opi-hours li { font-size: .86rem; }
  .opi .opi-map__tag { display: none; }
  .opi .opi-map__frame { height: 300px; }
}

/* Hareketi azalt tercihi — sonsuz animasyonu durdur */
@media (prefers-reduced-motion: reduce) {
  .opi::after { animation: none; }
  .opi .opi-card:hover,
  .opi .opi-card__wa:hover { transform: none; }
}