/*!
 * ---------------------------------------------------------------------------
 *                   _   _             _ _ _ _ _        _
 *                  | | | |           | (_|_|_) |      | |
 *   _ __ ___  _   _| |_| |_   _    __| |_ _ _| |_ __ _| |
 *  | '_ ` _ \| | | | __| | | | |  / _` | | | | __/ _` | |
 *  | | | | | | |_| | |_| | |_| | | (_| | | | | || (_| | |
 *  |_| |_| |_|\__,_|\__|_|\__,_|  \__,_|_| |_|\__\__,_|_|
 *                                       _/ |
 *                                      |__/
 *   MUTLU DİJİTAL — Samet Mutlu — +05422419932 — mutludijital.com.tr
 * ---------------------------------------------------------------------------
 *  components.css — Özerler Lojistik arayüz bileşenleri
 *  Önekler: bar- / hdr- / nav- / btn / hero / phero / svc / feat / band
 *           faq / form / panel / foot / widget
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   ÜST ŞERİT (topbar)
   =========================================================================== */
.topbar {
  background-color: var(--ink-950);
  color: var(--text-onDark-muted);
  font-size: var(--fs-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--dur-micro) var(--ease-standard);
}

.topbar a:hover { color: #fff; }

.topbar .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-300); }

.topbar__social {
  display: flex;
  gap: var(--sp-1);
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.topbar__social a {
  width: 1.75rem;
  height: 1.75rem;
  justify-content: center;
  border-radius: var(--r-2);
}

.topbar__social a:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--signal-300); }

@media (max-width: 1023px) {
  .topbar { display: none; }
}

/* ===========================================================================
   BAŞLIK (header)
   =========================================================================== */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow var(--dur-ui) var(--ease-standard),
              background-color var(--dur-ui) var(--ease-standard);
}

.hdr.is-stuck {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-2);
}

.hdr__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.hdr__brand {
  display: flex;
  align-items: center;
  flex: none;
  padding-block: var(--sp-2);
}

.hdr__brand img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
}

.hdr__nav { margin-left: auto; }

.hdr__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: var(--sp-5);
}

.hdr__phone {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.hdr__phone span {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-semi);
}

.hdr__phone a {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-micro) var(--ease-standard);
}

.hdr__phone a:hover { color: var(--signal-600); }

@media (min-width: 1200px) { .hdr__phone { display: flex; } }

/* --- Masaüstü menü --- */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav { display: block; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: var(--ink-700);
  transition: color var(--dur-micro) var(--ease-standard);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--sp-4) - 2px);
  width: 100%;
  height: 2px;
  background-color: var(--signal-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out-quart);
}

.nav__link:hover { color: var(--ink-950); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--signal-600); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link .ico {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--signal-500);
  transition: transform var(--dur-micro) var(--ease-standard);
}

.nav__item { position: relative; }

.nav__item:hover .nav__link .ico,
.nav__item:focus-within .nav__link .ico { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: 100%;
  left: calc(var(--sp-4) * -1);
  min-width: 20rem;
  padding: var(--sp-2);
  background-color: var(--surface);
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--signal-500);
  border-radius: 0 0 var(--r-4) var(--r-4);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-ui) var(--ease-standard),
              transform var(--dur-ui) var(--ease-out-quart),
              visibility var(--dur-ui);
}

.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
  font-size: var(--fs-200);
  font-weight: var(--fw-semi);
  color: var(--ink-700);
  transition: background-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.nav__menu a:hover { background-color: var(--ink-50); color: var(--signal-600); }
.nav__menu a[aria-current="page"] { background-color: var(--ink-50); color: var(--signal-600); font-weight: var(--fw-semi); }

.nav__menu .ico { color: var(--signal-500); }

/* --- Mobil menü --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: var(--sp-2);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  color: var(--ink-900);
  transition: border-color var(--dur-micro) var(--ease-standard);
}

.nav-toggle:hover { border-color: var(--ink-400); }

.nav-toggle .ico { width: 1.375rem; height: 1.375rem; }

@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur-ui) var(--ease-out-quart),
              border-color var(--dur-ui) var(--ease-standard);
}

.mobile-nav.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--ink-200);
}

.mobile-nav__scroll { overflow: hidden; }

.mobile-nav__list {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4) var(--sp-6);
}

.mobile-nav__list > li > a,
.mobile-nav__list > li > button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--sp-3);
  border-radius: var(--r-3);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  color: var(--ink-800);
  text-align: left;
}

.mobile-nav__list > li > a:hover,
.mobile-nav__list > li > button:hover { background-color: var(--ink-50); }

.mobile-nav__list .ico { color: var(--ink-400); }

.mobile-nav__list a[aria-current="page"] {
  background-color: var(--ink-50);
  color: var(--signal-600);
}

.mobile-nav__list a[aria-current="page"] .ico { color: var(--signal-500); }

.mobile-nav__sub {
  display: grid;
  gap: var(--sp-1);
  margin: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--ink-200);
}

.mobile-nav__sub-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--sp-2);
}

.mobile-nav__sub a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-200);
  color: var(--ink-700);
  min-height: 2.25rem;
}

.mobile-nav__sub a[aria-current="page"] { color: var(--signal-600); font-weight: var(--fw-semi); }

@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* ===========================================================================
   BUTONLAR
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-3);
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}

.btn .ico {
  width: 1.125em;
  height: 1.125em;
  transition: transform var(--dur-micro) var(--ease-out-quart);
}

.btn:hover .ico--arrow { transform: translateX(0.2rem); }

.btn--signal {
  background-color: var(--signal-500);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(200, 30, 40, 0.7);
}

.btn--signal:hover {
  background-color: var(--signal-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(200, 30, 40, 0.75);
}

.btn--dark { background-color: var(--ink-950); color: #fff; }
.btn--dark:hover { background-color: var(--ink-800); transform: translateY(-2px); }

.btn--outline {
  background-color: var(--surface);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

.btn--outline:hover { border-color: var(--ink-900); background-color: var(--ink-50); }

.btn--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(8px);
}

.btn--ghost:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }

.btn--light { background-color: #fff; color: var(--ink-950); }
.btn--light:hover { background-color: var(--ink-100); transform: translateY(-2px); }

.btn--lg { min-height: 3.25rem; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-300); }
.btn--sm { min-height: 2.5rem; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-100); }
.btn--block { width: 100%; }

/* Metin bağlantılı ok */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  color: var(--signal-600);
}

.link-arrow .ico { width: 1rem; height: 1rem; transition: transform var(--dur-micro) var(--ease-out-quart); }
.link-arrow:hover .ico { transform: translateX(0.25rem); }

/* ===========================================================================
   HERO — sinematik giriş (yalnızca ana sayfa)
   =========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88vh, 46rem);
  padding-block: var(--sp-9) var(--sp-10);
  background-color: var(--ink-950);
  color: #fff;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: brightness(1.2) saturate(1.12) contrast(1.05);
  transition: opacity 1200ms var(--ease-in-out), transform 7000ms linear;
}

.hero__slide.is-active { opacity: 1; transform: scale(1); }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 15, 23, 0.58) 0%, rgba(10, 15, 23, 0.2) 46%, rgba(10, 15, 23, 0.78) 100%),
    linear-gradient(96deg, rgba(10, 15, 23, 0.82) 0%, rgba(10, 15, 23, 0.05) 64%, rgba(10, 15, 23, 0.3) 100%);
}

/* "Koridor" ızgara çizgileri — endüstriyel ölçek hissi */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}

.hero__inner { position: relative; max-width: 54rem; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
  background-color: rgba(10, 15, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  font-size: var(--fs-100);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  color: #fff;
}

.hero__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background-color: var(--ok-500);
  flex: none;
}

.hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--ok-500);
  animation: heroPulse 2.4s var(--ease-out-quart) infinite;
}

@keyframes heroPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.hero__title {
  font-size: var(--fs-900);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tighter);
  color: #fff;
  max-width: 22ch;
}

.hero__title em {
  font-style: normal;
  color: var(--signal-300);
  position: relative;
}

.hero__lead {
  margin-top: var(--sp-5);
  max-width: 42ch;
  font-size: var(--fs-400);
  line-height: var(--lh-sub);
  color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero__fact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hero__fact .ico { width: 1.5rem; height: 1.5rem; color: var(--signal-300); }

.hero__fact b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  color: #fff;
}

.hero__fact span { font-size: var(--fs-100); color: rgba(255, 255, 255, 0.68); }

.hero__nav {
  position: absolute;
  right: var(--shell-pad);
  bottom: var(--sp-6);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}

.hero__nav button {
  width: 1.75rem;
  height: 3px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.32);
  transition: background-color var(--dur-ui) var(--ease-standard), width var(--dur-ui) var(--ease-out-quart);
}

.hero__nav button[aria-current="true"] { background-color: var(--signal-400); width: 3rem; }

@media (max-width: 767px) {
  .hero { min-height: auto; padding-block: var(--sp-8) var(--sp-9); }
  .hero__grid { background-size: 50% 100%; }
  .hero__title { max-width: none; }
}

/* ===========================================================================
   ROTA ŞERİDİ — marka imzası (Ankara ⇄ İstanbul)
   =========================================================================== */
.route-strip {
  background-color: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.route-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.route-strip__node { flex: none; }

.route-strip__label {
  flex: none;
  font-size: var(--fs-100);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--signal-300);
}

.route-strip__line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 14px);
  color: rgba(255, 255, 255, 0.35);
}

.route-strip__truck {
  position: relative;
  flex: none;
  color: var(--signal-400);
}

@media (max-width: 639px) {
  .route-strip__inner { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-2); }
  .route-strip__line { flex-basis: 100%; order: 3; }
  .route-strip__label { order: 4; flex-basis: 100%; text-align: center; }
}

/* ===========================================================================
   SAYFA BAŞLIĞI (iç sayfalar)
   =========================================================================== */
.phero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-8) var(--sp-7);
  background-color: var(--ink-950);
  color: #fff;
  overflow: hidden;
}

.phero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: brightness(1.16) saturate(1.1) contrast(1.05);
}

.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(100deg, rgba(10, 15, 23, 0.86) 0%, rgba(10, 15, 23, 0.34) 56%, rgba(10, 15, 23, 0.62) 100%);
}

.phero__mark {
  position: absolute;
  right: var(--shell-pad);
  bottom: -2.5rem;
  z-index: -1;
  opacity: 0.07;
}

.phero__mark .ico { width: 16rem; height: 16rem; color: #fff; }

.phero__tag { margin-bottom: var(--sp-4); }

.phero h1 {
  max-width: 24ch;
  font-size: var(--fs-800);
}

.phero__lead {
  margin-top: var(--sp-4);
  max-width: 52ch;
  font-size: var(--fs-400);
  line-height: var(--lh-sub);
  color: rgba(255, 255, 255, 0.82);
}

.phero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Kırıntı (breadcrumb) */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 0.6);
}

.crumbs a { color: rgba(255, 255, 255, 0.82); transition: color var(--dur-micro) var(--ease-standard); }
.crumbs a:hover { color: var(--signal-300); }
.crumbs .ico { width: 0.875rem; height: 0.875rem; opacity: 0.6; }
.crumbs [aria-current="page"] { color: #fff; font-weight: var(--fw-semi); }

@media (max-width: 767px) {
  .phero__mark { display: none; }
}

/* ===========================================================================
   HİZMET MANİFESTOSU — kart yığını yerine endüstriyel liste
   =========================================================================== */
.svc-list {
  border-top: 1px solid var(--ink-200);
}

.svc__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-6) var(--sp-4) var(--sp-6) 0;
  border-bottom: 1px solid var(--ink-200);
  transition: background-color var(--dur-ui) var(--ease-standard),
              color var(--dur-ui) var(--ease-standard),
              padding-left var(--dur-ui) var(--ease-out-quart);
}

.svc__link:hover,
.svc__link:focus-visible {
  background-color: var(--ink-950);
  color: #fff;
  padding-left: var(--sp-5);
}

.svc__idx {
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--signal-600);
  transition: color var(--dur-ui) var(--ease-standard);
}

.svc__link:hover .svc__idx { color: var(--signal-300); }

.svc__body { min-width: 0; }

.svc__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--text-strong);
  transition: color var(--dur-ui) var(--ease-standard);
}

.svc__link:hover .svc__title { color: #fff; }

.svc__desc {
  display: block;
  margin-top: var(--sp-2);
  max-width: 52ch;
  font-size: var(--fs-200);
  color: var(--text-muted);
  transition: color var(--dur-ui) var(--ease-standard);
}

.svc__link:hover .svc__desc { color: var(--text-onDark-muted); }

.svc__meta {
  display: none;
  font-size: var(--fs-100);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease-standard);
}

.svc__link:hover .svc__meta { color: rgba(255, 255, 255, 0.7); }

.svc__go {
  display: none;
  align-items: center;
  gap: var(--sp-3);
}

.svc__go .ico {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--signal-500);
  transition: transform var(--dur-ui) var(--ease-out-quart), color var(--dur-ui) var(--ease-standard);
}

.svc__link:hover .svc__go .ico { transform: translateX(0.4rem); color: var(--signal-300); }

@media (min-width: 768px) {
  .svc__link { grid-template-columns: 3.5rem 1fr auto auto; }
  .svc__go { display: flex; }
}

@media (min-width: 1024px) {
  .svc__meta { display: block; }
}

/* ===========================================================================
   ÖZELLİK (feature) — ikon + başlık + açıklama
   =========================================================================== */
.feat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.feat__ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  background-color: var(--surface);
  color: var(--signal-600);
  transition: background-color var(--dur-ui) var(--ease-standard),
              color var(--dur-ui) var(--ease-standard),
              border-color var(--dur-ui) var(--ease-standard);
}

.feat__ico .ico { width: 1.5rem; height: 1.5rem; }

.feat:hover .feat__ico {
  background-color: var(--signal-500);
  border-color: var(--signal-500);
  color: #fff;
}

.feat h3 {
  font-size: var(--fs-400);
  margin-bottom: var(--sp-2);
}

.feat p { font-size: var(--fs-200); max-width: 46ch; }

.feat--onDark .feat__ico {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--signal-300);
}

/* Yatay ayırıcılı özellik listesi */
.feat-row {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ink-200);
}

@media (min-width: 900px) {
  .feat-row { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

/* ===========================================================================
   BÖLÜNMÜŞ İÇERİK (görsel + metin)
   =========================================================================== */
.split {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); }
  .split--reverse > :first-child { order: 2; }
}

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-4);
  background-color: var(--ink-100);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-page) var(--ease-out-quart);
}

.media-frame--tall img { aspect-ratio: 3 / 4; }

.media-frame:hover img { transform: scale(1.03); }

/* Görsel üzerine binen bilgi kartı */
.overlay-card {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  padding: var(--sp-5);
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
}

.overlay-card h3 { font-size: var(--fs-400); margin-bottom: var(--sp-2); }
.overlay-card p { font-size: var(--fs-200); }

/* ===========================================================================
   DİKEY SÜREÇ ÇİZGİSİ
   =========================================================================== */
.steps {
  display: grid;
  gap: var(--sp-6);
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: var(--sp-7);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--signal-500);
  border-radius: var(--r-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  color: var(--signal-600);
  font-variant-numeric: tabular-nums;
}

.step h3 { font-size: var(--fs-400); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-200); max-width: 48ch; }

/* ===========================================================================
   ÖZET / KAPSAM BANDI
   =========================================================================== */
.band {
  background-color: var(--ink-950);
  color: #fff;
  padding-block: var(--sp-8);
}

.band__grid {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 900px) { .band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sp-9); } }

.band h2 { color: #fff; font-size: var(--fs-700); }
.band p { color: var(--text-onDark-muted); }

.coverage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
}

.coverage li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: var(--fs-100);
  color: var(--text-onDark-muted);
}

.coverage .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-300); }

/* ===========================================================================
   SSS (FAQ) — yerel details/summary ile erişilebilir akordeon
   =========================================================================== */
.faq { border-top: 1px solid var(--ink-200); }

.faq__item { border-bottom: 1px solid var(--ink-200); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  transition: color var(--dur-micro) var(--ease-standard);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary:hover { color: var(--signal-600); }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.45rem;
  border-right: 2px solid var(--signal-500);
  border-bottom: 2px solid var(--signal-500);
  transform: rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out-quart);
}

.faq__item[open] summary::after { transform: rotate(-135deg); }

.faq__item p {
  padding-bottom: var(--sp-5);
  max-width: var(--prose-max);
  font-size: var(--fs-200);
}

/* ===========================================================================
   FORM
   =========================================================================== */
.form { display: grid; gap: var(--sp-4); }

.form__row { display: grid; gap: var(--sp-4); }

@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--sp-2); }

.field > label {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field > label .req { color: var(--signal-600); }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-3);
  font-size: var(--fs-200);
  color: var(--text-strong);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}

.field textarea { min-height: 7rem; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--ink-400); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--signal-500);
  box-shadow: 0 0 0 3px rgba(200, 30, 40, 0.14);
}

.field__hint { font-size: var(--fs-100); color: var(--text-muted); }

.select-wrap { position: relative; }

.select-wrap select { appearance: none; padding-right: var(--sp-8); }

.select-wrap .ico {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ink-500);
  pointer-events: none;
}

.form__note { font-size: var(--fs-100); color: var(--text-muted); text-align: center; }

/* ===========================================================================
   PANEL (kenar çubuğu blokları)
   =========================================================================== */
.panel {
  padding: var(--sp-5);
  background-color: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
}

.panel--accent { border-top: 3px solid var(--signal-500); box-shadow: var(--sh-2); }

.panel--deep {
  background-color: var(--ink-950);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-onDark);
}

.panel--deep h3,
.panel--deep h4 { color: #fff; }

.panel__title {
  font-size: var(--fs-400);
  margin-bottom: var(--sp-2);
}

.panel__sub {
  font-size: var(--fs-100);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.panel--deep .panel__sub { color: var(--text-onDark-muted); }

.quick-list { display: grid; gap: var(--sp-2); }

.quick-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-3);
  font-size: var(--fs-200);
  font-weight: var(--fw-semi);
  color: var(--text);
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.panel--deep .quick-list a {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-onDark);
}

.quick-list a:hover {
  background-color: var(--ink-50);
  border-color: var(--ink-200);
  color: var(--signal-600);
}

.panel--deep .quick-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.quick-list .ico { width: 1rem; height: 1rem; color: var(--signal-500); }
.panel--deep .quick-list .ico { color: var(--signal-300); }

/* İletişim bilgi satırları */
.info-list { display: grid; gap: var(--sp-5); }

.info-item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }

.info-item__ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  background-color: var(--ink-50);
  color: var(--signal-600);
}

.info-item__ico .ico { width: 1.25rem; height: 1.25rem; }

.info-item h3 { font-size: var(--fs-300); margin-bottom: var(--sp-1); }
.info-item p { font-size: var(--fs-200); color: var(--text-muted); }
.info-item a { font-size: var(--fs-400); font-weight: var(--fw-semi); color: var(--text-strong); }
.info-item a:hover { color: var(--signal-600); }

/* ===========================================================================
   İÇERİK BLOKLARI (makale gövdesi)
   =========================================================================== */
.article-body { display: grid; gap: var(--sp-6); }

.article-body h2 { font-size: var(--fs-600); }

.article-body h3 { font-size: var(--fs-500); }

.article-body p { max-width: var(--prose-max); }

/* Vurgulu kenar notu */
.note {
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--signal-500);
  background-color: var(--surface-sunken);
  border-radius: 0 var(--r-3) var(--r-3) 0;
}

.note h3 { font-size: var(--fs-400); margin-bottom: var(--sp-3); }
.note p { font-size: var(--fs-200); }

.note--deep {
  background-color: var(--ink-950);
  border-left-color: var(--signal-400);
  color: var(--text-onDark);
}

.note--deep h3 { color: #fff; }
.note--deep p { color: var(--text-onDark-muted); }

/* Onay listesi */
.check-list { display: grid; gap: var(--sp-3); }

@media (min-width: 640px) { .check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-200);
  color: var(--text-strong);
}

.check-list .ico { width: 1.125rem; height: 1.125rem; color: var(--ok-500); margin-top: 0.15rem; }

/* Öne çıkan alıntı bloğu */
.pull {
  padding: var(--sp-6);
  background-color: var(--surface-sunken);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
}

.pull h3 { font-size: var(--fs-400); margin-bottom: var(--sp-4); }

/* ===========================================================================
   BLOG KARTI
   =========================================================================== */
.posts {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
  overflow: hidden;
  transition: transform var(--dur-ui) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-standard),
              border-color var(--dur-ui) var(--ease-standard);
}

.post:hover {
  transform: translateY(-4px);
  border-color: var(--ink-300);
  box-shadow: var(--sh-3);
}

.post__media { position: relative; overflow: hidden; background-color: var(--ink-100); }

.post__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-page) var(--ease-out-quart);
}

.post:hover .post__media img { transform: scale(1.04); }

.post__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--ink-950);
  color: #fff;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post__body { display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); padding: var(--sp-5); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-100);
  color: var(--text-muted);
}

.post__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.post__meta .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-500); }

.post h2 { font-size: var(--fs-400); line-height: var(--lh-sub); }

.post h2 a:hover { color: var(--signal-600); }

.post p { font-size: var(--fs-200); flex: 1; }

/* ===========================================================================
   HARİTA
   =========================================================================== */
.map-card {
  background-color: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
  padding: var(--sp-3);
  box-shadow: var(--sh-2);
}

.map-card__frame {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--ink-100);
}

.map-card__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-page) var(--ease-standard);
}

.map-card:hover .map-card__frame iframe { filter: grayscale(0); }

.map-card__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.map-card__badge .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-600); }

.map-card__cta {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .map-card__frame { aspect-ratio: 3 / 4; }
}

/* ===========================================================================
   ALT BİLGİ (footer)
   =========================================================================== */
.foot {
  background-color: var(--ink-950);
  color: var(--text-onDark-muted);
  padding-top: var(--sp-9);
  border-top: 3px solid var(--signal-600);
}

.foot__grid {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}

@media (min-width: 640px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }

.foot__brand img {
  height: 2.75rem;
  width: auto;
  background-color: rgba(255, 255, 255, 0.95);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-3);
}

.foot__brand p {
  margin-top: var(--sp-5);
  max-width: 34ch;
  font-size: var(--fs-200);
  color: var(--text-onDark-muted);
}

.foot h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-300);
  color: #fff;
}

.foot h3::before {
  content: "";
  width: 3px;
  height: 1.1em;
  background-color: var(--signal-500);
  border-radius: var(--r-pill);
  flex: none;
}

.foot__links { display: grid; gap: var(--sp-2); }

.foot__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.25rem;
  font-size: var(--fs-200);
  color: var(--text-onDark-muted);
  transition: color var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}

.foot__links a:hover { color: #fff; transform: translateX(0.2rem); }

.foot__links .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-400); flex: none; }

.foot__contact { display: grid; gap: var(--sp-4); }

.foot__contact li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-200);
}

.foot__contact .ico { width: 1rem; height: 1rem; color: var(--signal-400); margin-top: 0.35rem; }

.foot__contact a { color: #fff; font-weight: var(--fw-semi); }
.foot__contact a:hover { color: var(--signal-300); }

.foot__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-onDark-faint);
}

.foot__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }

.foot__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-3);
  color: var(--text-onDark-muted);
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.foot__social a:hover { background-color: var(--signal-500); border-color: var(--signal-500); color: #fff; }

.foot__bottom {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-100);
}

@media (min-width: 768px) {
  .foot__bottom { grid-template-columns: 1fr auto; align-items: center; }
}

.foot__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot__legal a:hover { color: #fff; }

.foot__signature { display: grid; justify-items: center; gap: var(--sp-4); padding-bottom: var(--sp-6); }

/* ===========================================================================
   YÜZEN İLETİŞİM ARACI
   =========================================================================== */
.widget {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-widget);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

.widget__menu {
  display: grid;
  gap: var(--sp-2);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.96);
  transition: opacity var(--dur-ui) var(--ease-standard),
              transform var(--dur-ui) var(--ease-out-quart),
              visibility var(--dur-ui);
}

.widget__menu.is-open { opacity: 1; visibility: visible; transform: none; }

.widget__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--ink-950);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-3);
  transition: transform var(--dur-micro) var(--ease-standard);
}

.widget__item:hover { transform: translateY(-2px); }

.widget__item--wa { background-color: #128c5e; }
.widget__item--call { background-color: var(--signal-500); }

.widget__item .ico { width: 1rem; height: 1rem; }

.widget__toggle {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-pill);
  background-color: var(--signal-500);
  color: #fff;
  box-shadow: var(--sh-3);
  transition: background-color var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}

.widget__toggle:hover { background-color: var(--signal-600); transform: scale(1.06); }

.widget__toggle .ico { width: 1.5rem; height: 1.5rem; }

@media (max-width: 767px) {
  .widget__toggle { width: 3.25rem; height: 3.25rem; }
}

/* ===========================================================================
   ÇEREZ BİLDİRİMİ
   =========================================================================== */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  background-color: var(--ink-950);
  color: var(--text-onDark-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--sh-4);
  transform: translateY(110%);
  transition: transform var(--dur-page) var(--ease-out-quart);
}

.cookie.is-shown { transform: translateY(0); }

.cookie__inner {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  align-items: center;
}

@media (min-width: 900px) { .cookie__inner { grid-template-columns: 1fr auto; } }

.cookie h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  color: #fff;
  margin-bottom: var(--sp-2);
}

.cookie h2 .ico { width: 1.125rem; height: 1.125rem; color: var(--signal-300); }

.cookie p { font-size: var(--fs-100); max-width: 70ch; }

.cookie__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ===========================================================================
   ROZET / ÇİP
   =========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-2);
  background-color: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.chip .ico { width: 0.875rem; height: 0.875rem; color: var(--signal-600); }

.chip--deep {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.chip--deep .ico { color: var(--signal-300); }