/*
 * YY Enhance - mega menu, single detail, reading progress, yeni bloklar, modern polish
 */

/* ============ ANNOUNCEMENT BAR ============ */
.yy-announce {
  position: relative;
  z-index: 55;
  background: linear-gradient(135deg, var(--yy-brand) 0%, var(--yy-brand-2) 60%, #0EA5E9 100%);
  color: white;
  font-size: var(--yy-fs-sm);
}
.yy-announce__inner {
  display: flex;
  align-items: center;
  gap: var(--yy-sp-3);
  padding-block: 10px;
  justify-content: center;
  text-align: center;
}
.yy-announce__text a { color: white; text-decoration: underline; font-weight: 700; }
.yy-announce__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: yy-pulse 2s infinite;
  flex-shrink: 0;
}

/* ============ MEGA MENU ============ */
.yy-menu__mega { position: relative; }
.yy-menu__mega > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.yy-menu__chevron {
  transition: transform var(--yy-dur-fast) var(--yy-ease-out);
}
.yy-menu__mega.is-open .yy-menu__chevron {
  transform: rotate(90deg);
}
.yy-mega-wrap {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 640px;
  max-width: 96vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--yy-dur-base) var(--yy-ease-out), transform var(--yy-dur-base) var(--yy-ease-out);
}
/* Invisible bridge - mouse trigger'dan panel'e gecis kaybolmasin */
.yy-mega-wrap::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: auto;
}
.yy-menu__mega.is-open .yy-mega-wrap {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Trigger to panel area - make sure hover region is continuous */
.yy-menu__mega > a {
  padding-block: 14px;
}
.yy-menu__mega--wide .yy-mega-wrap { min-width: min(90vw, 880px); }
.yy-menu__mega--wide.yy-menu__mega--regions .yy-mega-wrap { min-width: min(94vw, 1080px); }

.yy-mega {
  background: var(--yy-glass-strong);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--yy-border-strong);
  border-radius: var(--yy-r-xl);
  padding: var(--yy-sp-5);
  box-shadow: var(--yy-shadow-lg);
}
.yy-mega__intro {
  padding-bottom: var(--yy-sp-4);
  margin-bottom: var(--yy-sp-4);
  border-bottom: 1px solid var(--yy-border);
}
.yy-mega__eyebrow {
  display: inline-block;
  padding: 3px 10px;
  background: var(--yy-brand-weak);
  border-radius: var(--yy-r-full);
  font-size: var(--yy-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yy-accent);
  margin-bottom: var(--yy-sp-2);
}
.yy-mega__lead {
  margin: 0;
  font-size: var(--yy-fs-sm);
  color: var(--yy-text-mute);
}
.yy-mega__grid {
  display: grid;
  gap: var(--yy-sp-3);
  grid-template-columns: repeat(3, 1fr);
}
.yy-mega__grid--4 { grid-template-columns: repeat(4, 1fr); }
.yy-mega__col {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yy-mega__item > a {
  display: flex;
  align-items: center;
  gap: var(--yy-sp-3);
  padding: 10px 12px;
  border-radius: var(--yy-r-sm);
  color: var(--yy-text);
  font-weight: 500;
  transition: background var(--yy-dur-fast) var(--yy-ease-out), transform var(--yy-dur-fast) var(--yy-ease-out);
}
.yy-mega__item > a:hover {
  background: var(--yy-surface-2);
  transform: translateX(2px);
  color: var(--yy-text);
}
.yy-mega__icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yy-brand-weak);
  color: var(--yy-accent);
  border-radius: var(--yy-r-sm);
  flex-shrink: 0;
}
.yy-mega__text { display: flex; flex-direction: column; line-height: 1.25; }
.yy-mega__text strong { font-size: var(--yy-fs-sm); font-weight: 700; }
.yy-mega__text small { font-size: var(--yy-fs-xs); color: var(--yy-text-soft); margin-top: 1px; }
.yy-mega__footer {
  margin-top: var(--yy-sp-4);
  padding-top: var(--yy-sp-4);
  border-top: 1px solid var(--yy-border);
  display: flex;
  gap: var(--yy-sp-3);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.yy-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--yy-brand);
  font-weight: 700;
  font-size: var(--yy-fs-sm);
}
.yy-mega__all svg { transition: transform var(--yy-dur-fast) var(--yy-ease-out); }
.yy-mega__all:hover svg { transform: translateX(3px); }
.yy-mega__meta { display: inline-flex; gap: var(--yy-sp-3); align-items: center; }
.yy-mega__badge {
  padding: 4px 10px;
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-full);
  font-size: var(--yy-fs-xs);
  color: var(--yy-text-mute);
  font-weight: 600;
}

/* ============ PROCESS TIMELINE ============ */
.yy-process {
  background: linear-gradient(180deg, var(--yy-bg) 0%, var(--yy-surface) 100%);
  position: relative;
}
.yy-process__grid {
  display: grid;
  gap: var(--yy-sp-5);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 768px) { .yy-process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .yy-process__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .yy-process__grid::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--yy-brand-weak), var(--yy-brand-weak), transparent);
    z-index: 0;
  }
}
.yy-process__step {
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-lg);
  padding: var(--yy-sp-5);
  position: relative;
  text-align: center;
  transition: transform var(--yy-dur-base) var(--yy-ease-out), border-color var(--yy-dur-base) var(--yy-ease-out);
  transition-delay: var(--d, 0);
}
.yy-process__step:hover { transform: translateY(-4px); border-color: var(--yy-border-strong); }
.yy-process__num {
  display: block;
  font-size: var(--yy-fs-4xl);
  font-weight: 700;
  line-height: 1;
  background: var(--yy-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.05em;
  margin-bottom: var(--yy-sp-3);
  opacity: 0.7;
}
.yy-process__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yy-brand-weak);
  color: var(--yy-brand);
  border-radius: var(--yy-r-md);
  margin-bottom: var(--yy-sp-3);
}
.yy-process__step h3 { font-size: var(--yy-fs-lg); margin-bottom: var(--yy-sp-2); }
.yy-process__step p { color: var(--yy-text-mute); font-size: var(--yy-fs-sm); margin: 0; line-height: var(--yy-lh-base); }

/* ============ FLEET ============ */
.yy-fleet__card { text-align: left; }

/* ============ FAQ ============ */
.yy-faq__list {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--yy-sp-3);
}
.yy-faq__item {
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-md);
  overflow: hidden;
  transition: border-color var(--yy-dur-fast) var(--yy-ease-out);
}
.yy-faq__item[open] { border-color: var(--yy-brand); background: var(--yy-surface-2); }
.yy-faq__item summary {
  list-style: none;
  padding: var(--yy-sp-4) var(--yy-sp-5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yy-sp-4);
  font-weight: 700;
  color: var(--yy-text);
}
.yy-faq__item summary::-webkit-details-marker { display: none; }
.yy-faq__q { flex: 1; }
.yy-faq__chev {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yy-brand-weak);
  color: var(--yy-accent);
  border-radius: 50%;
  transition: transform var(--yy-dur-base) var(--yy-ease-out);
  flex-shrink: 0;
}
.yy-faq__item[open] .yy-faq__chev { transform: rotate(90deg); }
.yy-faq__a {
  padding: 0 var(--yy-sp-5) var(--yy-sp-5);
  color: var(--yy-text-mute);
  line-height: var(--yy-lh-loose);
  animation: yy-faq-open var(--yy-dur-base) var(--yy-ease-out);
}
@keyframes yy-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ============ PRICING ============ */
.yy-pricing__grid {
  display: grid;
  gap: var(--yy-sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .yy-pricing__grid { grid-template-columns: repeat(3, 1fr); } }

.yy-pricing__card {
  position: relative;
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-xl);
  padding: var(--yy-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--yy-sp-4);
  transition: transform var(--yy-dur-base) var(--yy-ease-out), border-color var(--yy-dur-base) var(--yy-ease-out);
}
.yy-pricing__card:hover { transform: translateY(-4px); border-color: var(--yy-border-strong); }

.yy-pricing__card.is-featured {
  background: linear-gradient(180deg, var(--yy-surface-2), var(--yy-surface));
  border-color: var(--yy-brand);
  box-shadow: var(--yy-shadow-brand);
}
.yy-pricing__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yy-brand-gradient);
  color: white;
  padding: 4px 14px;
  border-radius: var(--yy-r-full);
  font-size: var(--yy-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--yy-shadow-brand);
}
.yy-pricing__tag {
  font-size: var(--yy-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yy-accent);
}
.yy-pricing__title { font-size: var(--yy-fs-xl); margin: 0; }
.yy-pricing__price { display: flex; align-items: baseline; gap: 4px; }
.yy-pricing__amount {
  font-size: var(--yy-fs-4xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: var(--yy-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.yy-pricing__currency { font-size: var(--yy-fs-2xl); font-weight: 700; color: var(--yy-text-mute); }
.yy-pricing__price small { color: var(--yy-text-soft); font-size: var(--yy-fs-sm); margin-left: 6px; }
.yy-pricing__list {
  list-style: none;
  padding: var(--yy-sp-4) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--yy-sp-3);
  border-top: 1px solid var(--yy-border);
}
.yy-pricing__list li {
  display: flex;
  gap: var(--yy-sp-3);
  align-items: flex-start;
  color: var(--yy-text-mute);
  font-size: var(--yy-fs-sm);
}
.yy-pricing__list li svg {
  color: var(--yy-success);
  flex-shrink: 0;
  margin-top: 2px;
}
.yy-pricing__note {
  display: inline-flex;
  align-items: center;
  gap: var(--yy-sp-2);
  justify-content: center;
  font-size: var(--yy-fs-sm);
}
.yy-pricing__note svg { color: var(--yy-success); }

/* ============ COMPARISON ============ */
.yy-compare__wrap { overflow-x: auto; border-radius: var(--yy-r-lg); }
.yy-compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-lg);
  overflow: hidden;
}
.yy-compare__table th,
.yy-compare__table td {
  padding: var(--yy-sp-4) var(--yy-sp-5);
  border-bottom: 1px solid var(--yy-border);
  text-align: center;
  font-size: var(--yy-fs-sm);
}
.yy-compare__table thead th {
  background: var(--yy-surface-2);
  color: var(--yy-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--yy-fs-xs);
}
.yy-compare__table thead th span { display: block; font-size: var(--yy-fs-base); text-transform: none; letter-spacing: normal; }
.yy-compare__table thead th small { display: block; color: var(--yy-text-soft); font-weight: 500; margin-top: 2px; }
.yy-compare__table thead .yy-compare__us { background: linear-gradient(180deg, var(--yy-brand-weak), var(--yy-surface-2)); }
.yy-compare__table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.yy-compare__feature { text-align: left !important; color: var(--yy-text); font-weight: 600; }
.yy-compare__mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yy-compare__mark--yes { background: rgba(16, 185, 129, 0.16); color: var(--yy-success); }
.yy-compare__mark--no  { background: rgba(239, 68, 68, 0.16); color: var(--yy-danger); }
.yy-compare__table td em { color: var(--yy-text-soft); font-style: italic; font-size: var(--yy-fs-sm); }

/* ============ SUB HERO (service/region detail) ============ */
.yy-hero--sub {
  min-height: clamp(420px, 60vh, 620px);
  padding-block: var(--yy-sp-8) var(--yy-sp-8);
}
.yy-hero__sub-grid {
  display: grid;
  gap: var(--yy-sp-7);
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
}
@media (min-width: 1024px) {
  .yy-hero__sub-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--yy-sp-8); }
}
.yy-hero__mark {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--yy-brand-weak), var(--yy-accent-weak));
  border: 1px solid var(--yy-brand);
  color: var(--yy-brand);
  border-radius: var(--yy-r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--yy-sp-4);
}
.yy-hero--sub h1 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  margin-block: var(--yy-sp-3) var(--yy-sp-3);
}
.yy-breadcrumbs--hero { padding: 0; font-size: var(--yy-fs-xs); margin-bottom: var(--yy-sp-3); }
.yy-breadcrumbs--hero .yy-container { padding: 0; }

.yy-quote-card {
  padding: var(--yy-sp-6);
  border: 1px solid var(--yy-border-strong);
  border-radius: var(--yy-r-xl);
  background: var(--yy-glass-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--yy-shadow-lg);
}
.yy-quote-card__title {
  font-size: var(--yy-fs-xl);
  margin-block: 0 var(--yy-sp-2);
}
.yy-quote-card > p { color: var(--yy-text-mute); margin-bottom: var(--yy-sp-5); font-size: var(--yy-fs-sm); }

/* ============ DETAIL GRID (service/region single) ============ */
.yy-detail-grid {
  display: grid;
  gap: var(--yy-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .yy-detail-grid {
    grid-template-columns: 1fr 340px;
    gap: var(--yy-sp-8);
    align-items: start;
  }
}

.yy-detail-main { max-width: none; }
.yy-detail-side { }

.yy-side-cta {
  background: linear-gradient(180deg, var(--yy-surface-2), var(--yy-surface));
  border: 1px solid var(--yy-border-strong);
  border-radius: var(--yy-r-xl);
  padding: var(--yy-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--yy-sp-3);
}
@media (min-width: 1024px) {
  .yy-side-cta[data-sticky] {
    position: sticky;
    top: calc(var(--yy-header-h) + 20px);
  }
}
.yy-side-cta__eyebrow {
  font-size: var(--yy-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--yy-accent);
}
.yy-side-cta__phone {
  display: block;
  font-size: var(--yy-fs-2xl);
  letter-spacing: -0.02em;
  background: var(--yy-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.yy-side-cta__text {
  font-size: var(--yy-fs-sm);
  color: var(--yy-text-mute);
  margin: 0;
}
.yy-side-cta__list {
  list-style: none;
  padding: var(--yy-sp-4) 0 0;
  margin: var(--yy-sp-2) 0 0;
  border-top: 1px solid var(--yy-border);
  display: flex;
  flex-direction: column;
  gap: var(--yy-sp-2);
}
.yy-side-cta__list li {
  display: flex;
  align-items: center;
  gap: var(--yy-sp-2);
  font-size: var(--yy-fs-sm);
  color: var(--yy-text-mute);
}
.yy-side-cta__list svg { color: var(--yy-success); flex-shrink: 0; }

/* ============ TOC ============ */
.yy-toc {
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-md);
  padding: var(--yy-sp-4) var(--yy-sp-5);
  margin-bottom: var(--yy-sp-5);
}
.yy-toc__title {
  display: inline-flex;
  align-items: center;
  gap: var(--yy-sp-2);
  font-size: var(--yy-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yy-accent);
  margin: 0 0 var(--yy-sp-3);
}
.yy-toc__list {
  margin: 0;
  padding: 0 0 0 var(--yy-sp-4);
  display: grid;
  gap: 4px;
  counter-reset: toc;
  list-style: none;
}
.yy-toc__list li { counter-increment: toc; position: relative; }
.yy-toc__list li::before {
  content: counter(toc, decimal-leading-zero) ".";
  position: absolute;
  left: -28px;
  top: 2px;
  font-size: var(--yy-fs-xs);
  font-weight: 700;
  color: var(--yy-accent);
}
.yy-toc__list a {
  display: block;
  padding: 4px 8px;
  color: var(--yy-text-mute);
  border-radius: 6px;
  font-size: var(--yy-fs-sm);
  transition: color var(--yy-dur-fast), background var(--yy-dur-fast);
}
.yy-toc__list a:hover,
.yy-toc__list a.is-active {
  color: var(--yy-text);
  background: var(--yy-brand-weak);
}

/* ============ READING PROGRESS ============ */
.yy-reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 80;
  pointer-events: none;
}
.yy-reading-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--yy-brand-gradient);
  transition: width 80ms linear;
}
body.admin-bar .yy-reading-progress { top: 32px; }

/* ============ COVERAGE CROSS-LINK ============ */
.yy-coverage {
  margin-top: var(--yy-sp-7);
  padding: var(--yy-sp-6);
  background: var(--yy-surface-2);
  border-radius: var(--yy-r-lg);
  border: 1px solid var(--yy-border);
}
.yy-coverage__head { margin-bottom: var(--yy-sp-4); }
.yy-coverage__head h2 { margin-bottom: var(--yy-sp-2); font-size: var(--yy-fs-xl); }
.yy-coverage__grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.yy-coverage__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-sm);
  color: var(--yy-text);
  font-size: var(--yy-fs-sm);
  font-weight: 500;
}
.yy-coverage__item:hover {
  border-color: var(--yy-brand);
  color: var(--yy-brand);
  transform: translateX(2px);
}
.yy-coverage__item svg { color: var(--yy-accent); flex-shrink: 0; }

/* ============ SHARE ============ */
.yy-share {
  margin-top: var(--yy-sp-6);
  padding-top: var(--yy-sp-5);
  border-top: 1px solid var(--yy-border);
  display: flex;
  align-items: center;
  gap: var(--yy-sp-3);
  flex-wrap: wrap;
}
.yy-share strong { color: var(--yy-text-mute); font-size: var(--yy-fs-sm); font-weight: 600; }
.yy-share a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-r-sm);
  color: var(--yy-text-mute);
  transition: all var(--yy-dur-fast) var(--yy-ease-out);
}
.yy-share a:hover {
  background: var(--yy-brand);
  color: white;
  border-color: var(--yy-brand);
  transform: translateY(-2px);
}

/* ============ PAGE HEADER ARTICLE ============ */
.yy-page-header--article {
  padding-block: var(--yy-sp-8);
  text-align: left;
}
.yy-page-header--article .yy-container { text-align: left; }
.yy-page-header--article .yy-container-sm { margin-inline: auto; }

/* ============ HERO SUB VARIANT ============ */
.yy-hero--service .yy-hero__mark { border-color: var(--yy-brand); background: var(--yy-brand-weak); color: var(--yy-brand); }
.yy-hero--region  .yy-hero__mark { border-color: var(--yy-accent); background: var(--yy-accent-weak); color: var(--yy-accent); }

/* ============ 3D TILT (pure CSS on hover) ============ */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 300ms var(--yy-ease-out);
  will-change: transform;
}
[data-tilt]:hover {
  transform: perspective(1000px) rotateY(-2deg) rotateX(2deg) translateY(-4px);
}

/* ============ RESPONSIVE FIXES ============ */
@media (max-width: 1023px) {
  .yy-mega-wrap {
    position: static;
    transform: none !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: var(--yy-sp-3);
    opacity: 1 !important;
  }
  .yy-menu__mega > a { width: 100%; justify-content: space-between; }
}

@media (max-width: 767px) {
  .yy-process__grid::before { display: none; }
  .yy-pricing__ribbon { top: -14px; }
  .yy-compare__wrap { margin-inline: calc(-1 * var(--yy-sp-4)); padding-inline: var(--yy-sp-4); }
}