/* =========================================================
   Haliç Çevre – components.css  (v5 Premium)
   ========================================================= */

/* ══════════════════════════════════════════════════════════
   BUTTONS — Net, güçlü, premium
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-family); font-weight: var(--fw-semibold); font-size: .9375rem;
  line-height: 1; padding: .9rem 1.875rem;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .26s var(--ease-enter), box-shadow .22s ease,
              background .2s ease, color .2s ease;
  white-space: nowrap; user-select: none; letter-spacing: -.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* Ana buton — solid, net gölge */
.btn--primary {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 4px 18px rgba(12,77,162,.3), 0 1px 4px rgba(12,77,162,.18);
}
.btn--primary:hover {
  background: var(--color-primary-dark); color: #fff;
  box-shadow: 0 10px 32px rgba(12,77,162,.4);
}

.btn--secondary {
  background: var(--color-secondary); color: #fff;
  box-shadow: 0 4px 18px rgba(15,174,106,.28);
}
.btn--secondary:hover {
  background: var(--color-secondary-dark); color: #fff;
  box-shadow: 0 10px 32px rgba(15,174,106,.38);
}

.btn--outline {
  background: transparent; color: var(--color-primary);
  border-color: rgba(12,77,162,.3);
}
.btn--outline:hover {
  background: rgba(12,77,162,.05);
  border-color: var(--color-primary); color: var(--color-primary);
}

.btn--outline-secondary {
  background: transparent; color: var(--color-secondary);
  border-color: rgba(15,174,106,.3);
}
.btn--outline-secondary:hover {
  background: rgba(15,174,106,.06);
  border-color: var(--color-secondary);
}

.btn--glass {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.btn--glass:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.btn--ghost {
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.38); color: #fff;
}

.btn--white {
  background: #fff; color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.btn--white:hover { background: var(--color-surface); }

.btn--lg { padding: 1.0625rem 2.375rem; font-size: 1.0625rem; }
.btn--sm { padding: .5rem 1.125rem; font-size: .875rem; }

.btn__icon { width: 17px; height: 17px; flex-shrink: 0; transition: transform .22s ease; }
.btn__icon--right { transform: rotate(90deg); }
.btn:hover .btn__icon--right { transform: rotate(90deg) translateX(3px); }

.btn .ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.22);
  transform: scale(0); animation: ripple-anim .65s ease-out; pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

.section-header__btn { margin-top: var(--space-lg); }

/* ══════════════════════════════════════════════════════════
   SECTION HEADER — Raleway başlık, rafine
   ══════════════════════════════════════════════════════════ */
.section-header { margin-bottom: var(--space-3xl); }
.section-header--center { text-align: center; max-width: 700px; margin-inline: auto; }

.section-header__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: var(--fw-semibold);
  font-family: var(--font-family);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(12,77,162,.07);
  border-radius: var(--radius-full);
  padding: .325rem .875rem; margin-bottom: var(--space-md);
  border: 1px solid rgba(12,77,162,.1);
}
.section-header__eyebrow--secondary {
  color: var(--color-secondary);
  background: rgba(15,174,106,.07);
  border-color: rgba(15,174,106,.12);
}
.section-header__eyebrow-icon { width: 12px; height: 12px; }

.section-header__title {
  margin-bottom: 1rem; position: relative;
  /* Raleway bu sınıfa otomatik uygulanır çünkü h2 içinde */
}
.section-header__desc {
  color: var(--color-text-light);
  font-size: 1.0625rem; line-height: 1.8; max-width: 54ch;
  font-weight: var(--fw-regular);
}
.section-header--center .section-header__desc { margin-inline: auto; }

/* ══════════════════════════════════════════════════════════
   SERVİS KARTLARI — Temiz, teknolojik, premium
   ══════════════════════════════════════════════════════════ */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}

.service-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 1.875rem 1.625rem 1.625rem;
  display: flex; flex-direction: column; gap: .875rem;
  border: 1px solid var(--color-border);
  position: relative; overflow: hidden;
  /* GPU katmanına al — hover'da jank olmasın */
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    transform .32s var(--ease-enter),
    box-shadow .28s ease,
    border-color .24s ease;
  cursor: default;
  contain: layout style;
}

/* Dekoratif üst köşe gradient */
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  transition: opacity .35s ease;
}
.service-card:hover::before { opacity: 1; }

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 52px rgba(6,13,28,.12), 0 6px 16px rgba(6,13,28,.07);
  border-color: rgba(12,77,162,.14);
}
.service-card--secondary:hover { border-color: rgba(15,174,106,.14); }
.service-card--secondary::before {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
}

/* Kart resmi */
.service-card__img {
  width: 100%; aspect-ratio: 16/10;
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: .125rem;
}
.service-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease-out);
}
a.service-card:hover .service-card__img img { transform: scale(1.05); }

/* İkon */
.service-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,77,162,.07);
  color: var(--color-primary);
  transition: background .28s ease, transform .32s var(--ease-spring), box-shadow .26s ease;
  position: relative; z-index: 1; flex-shrink: 0;
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card:hover .service-card__icon {
  background: var(--color-primary); color: #fff;
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 6px 20px rgba(12,77,162,.32);
}
.service-card__icon--secondary { background: rgba(15,174,106,.07); color: var(--color-secondary); }
.service-card--secondary:hover .service-card__icon {
  background: var(--color-secondary);
  box-shadow: 0 6px 20px rgba(15,174,106,.3);
}
.service-card__num { display: none !important; }

.service-card__title {
  font-size: .9375rem; font-weight: var(--fw-semibold);
  line-height: 1.38; color: var(--color-text); letter-spacing: -.01em;
}
.service-card__desc {
  font-size: .845rem; color: var(--color-text-light);
  line-height: 1.75; flex: 1; font-weight: var(--fw-regular);
}

/* Footer + link */
.service-card__footer {
  margin-top: auto; padding-top: .875rem;
  border-top: 1px solid var(--color-border);
  position: relative; z-index: 1;
  transition: border-color .25s ease;
}
a.service-card:hover .service-card__footer { border-top-color: rgba(12,77,162,.12); }

.service-card__link,
.service-card__link-text {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: var(--fw-semibold);
  color: var(--color-primary); text-decoration: none;
  transition: gap .22s var(--ease-enter), color .2s ease;
}
.service-card__link-text--secondary,
.service-card__link--secondary { color: var(--color-secondary); }
.service-card__link-icon,
.service-card__link-text svg { width: 13px; height: 13px; transform: rotate(90deg); }
a.service-card:hover .service-card__link,
a.service-card:hover .service-card__link-text { gap: .65rem; }

/* ══════════════════════════════════════════════════════════
   QUICK ACTION KARTLARI
   ══════════════════════════════════════════════════════════ */
.quick-actions__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.quick-action-card {
  display: flex; align-items: center; gap: .875rem;
  padding: 1.25rem 1.125rem;
  border-radius: var(--radius-xl); text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease-enter), box-shadow .26s ease, border-color .22s ease;
  border: 1px solid transparent;
}
.quick-action-card--primary {
  background: linear-gradient(135deg, rgba(12,77,162,.05) 0%, rgba(12,77,162,.09) 100%);
  border-color: rgba(12,77,162,.1);
}
.quick-action-card--secondary {
  background: linear-gradient(135deg, rgba(15,174,106,.05) 0%, rgba(15,174,106,.09) 100%);
  border-color: rgba(15,174,106,.1);
}
.quick-action-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.quick-action-card--primary:hover { border-color: rgba(12,77,162,.2); }
.quick-action-card--secondary:hover { border-color: rgba(15,174,106,.2); }

.quick-action-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .3s var(--ease-spring);
}
.quick-action-card--primary .quick-action-card__icon {
  background: var(--color-primary); color: #fff; box-shadow: var(--shadow-primary);
}
.quick-action-card--secondary .quick-action-card__icon {
  background: var(--color-secondary); color: #fff; box-shadow: var(--shadow-secondary);
}
.quick-action-card:hover .quick-action-card__icon { transform: scale(1.1) rotate(-4deg); }
.quick-action-card__icon svg { width: 20px; height: 20px; }

.quick-action-card__body { flex: 1; min-width: 0; }
.quick-action-card__title {
  font-size: .9rem; font-weight: var(--fw-semibold);
  color: var(--color-text); margin-bottom: .2rem; line-height: 1.3; letter-spacing: -.01em;
}
.quick-action-card__desc {
  font-size: .785rem; color: var(--color-text-light); line-height: 1.5; font-weight: var(--fw-regular);
}
.quick-action-card__arrow {
  color: var(--color-text-muted); transform: rotate(90deg);
  transition: transform .22s ease, color .2s ease;
}
.quick-action-card__arrow svg { width: 16px; height: 16px; }
.quick-action-card:hover .quick-action-card__arrow {
  transform: rotate(90deg) translateX(4px); color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════
   SHORTCUT TILES
   ══════════════════════════════════════════════════════════ */
.shortcuts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .875rem; }
.shortcut-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1.625rem 1rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none; color: var(--color-text);
  font-size: .875rem; font-weight: var(--fw-medium);
  text-align: center; min-height: 128px;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease-enter), box-shadow .26s ease,
              color .2s ease, border-color .22s ease;
  box-shadow: var(--shadow-xs); letter-spacing: -.01em;
}
.shortcut-tile::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0; transition: opacity .25s ease;
}
.shortcut-tile--green::after {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
}
.shortcut-tile:hover::after { opacity: 1; }
.shortcut-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(12,77,162,.13);
  border-color: rgba(12,77,162,.18); color: var(--color-primary);
}
.shortcut-tile--green:hover {
  box-shadow: 0 14px 36px rgba(15,174,106,.13);
  border-color: rgba(15,174,106,.18); color: var(--color-secondary);
}
.shortcut-tile__icon {
  color: var(--color-primary);
  transition: color .2s ease, transform .32s var(--ease-spring);
}
.shortcut-tile__icon svg { width: 28px; height: 28px; }
.shortcut-tile--green .shortcut-tile__icon { color: var(--color-secondary); }
.shortcut-tile:hover .shortcut-tile__icon { transform: scale(1.15) rotate(-5deg); }
.shortcut-tile__label { line-height: 1.3; }
.shortcut-tile__arrow { font-size: .7rem; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.shortcut-tile:hover .shortcut-tile__arrow { opacity: .7; transform: none; }

/* ══════════════════════════════════════════════════════════
   EXPOSURE CHIPS
   ══════════════════════════════════════════════════════════ */
.exposure-grid { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.exposure-chip {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem 1.0625rem;
  background: #fff; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: .8125rem; font-weight: var(--fw-medium); color: var(--color-text-mid);
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .26s var(--ease-spring), box-shadow .22s ease,
              border-color .2s ease, color .2s ease, background .2s ease;
  letter-spacing: -.005em;
}
.exposure-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(12,77,162,.15);
  border-color: rgba(12,77,162,.28); color: var(--color-primary);
  background: rgba(12,77,162,.04);
}
.exposure-chip__icon { color: var(--color-primary); }
.exposure-chip__icon svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════
   RESOURCE KARTLARI
   ══════════════════════════════════════════════════════════ */
.resources-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.resource-card {
  background: #fff; border-radius: var(--radius-2xl);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
  transition: transform .36s var(--ease-enter), box-shadow .3s ease, border-color .25s ease;
}
.resource-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 60px rgba(6,13,28,.13);
  border-color: rgba(12,77,162,.1);
}
.resource-card__top {
  padding: 1.75rem 1.5rem 1.25rem; position: relative; overflow: hidden;
}
.resource-card--primary  .resource-card__top { background: var(--color-primary); }
.resource-card--secondary .resource-card__top { background: var(--color-secondary); }
.resource-card__top::after {
  content: ''; position: absolute; bottom: -40px; right: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.07); transition: transform .4s ease;
}
.resource-card:hover .resource-card__top::after { transform: scale(1.6); }
.resource-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; color: #fff;
  margin-bottom: .875rem; transition: transform .3s var(--ease-spring);
}
.resource-card__icon svg { width: 21px; height: 21px; }
.resource-card:hover .resource-card__icon { transform: scale(1.1) rotate(6deg); }
.resource-card__title { font-size: .9375rem; font-weight: var(--fw-semibold); color: #fff; letter-spacing: -.01em; }
.resource-card__badge {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9); font-size: .64rem; font-weight: var(--fw-semibold);
  padding: .2rem .6rem; border-radius: var(--radius-full);
  letter-spacing: .04em; text-transform: uppercase;
}
.resource-card__body {
  padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; flex: 1;
}
.resource-card__desc {
  font-size: .845rem; color: var(--color-text-light); line-height: 1.74; flex: 1; font-weight: var(--fw-regular);
}
.resource-card__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8125rem; font-weight: var(--fw-semibold); margin-top: auto;
  transition: gap .22s ease; align-self: flex-start; text-decoration: none;
}
.resource-card--primary  .resource-card__btn { color: var(--color-primary); }
.resource-card--secondary .resource-card__btn { color: var(--color-secondary); }
.resource-card__btn:hover { gap: .6rem; }
.resource-card__btn-icon { width: 12px; height: 12px; transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════ */
.cta-band {
  position: relative; padding-block: 8rem;
  overflow: hidden; color: #fff;
  margin-bottom: -2px; /* footer beyazlığını yok et */
  background: linear-gradient(-50deg, #060d1c, #0a1929, #0d2a50, #0b3070, rgba(15,174,106,.06), #0a1929);
  background-size: 400% 400%;
  animation: cta-bg-shift 16s ease infinite;
}
@keyframes cta-bg-shift {
  0%,100%{ background-position: 0% 50%; }
  50%    { background-position: 100% 50%; }
}
.cta-band__bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.cta-band__shape { position: absolute; border-radius: 50%; }
.cta-band__shape--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(12,77,162,.22), transparent 65%);
  top: -200px; right: -80px;
  animation: cta-shape-1 14s ease-in-out infinite;
}
.cta-band__shape--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(15,174,106,.12), transparent 65%);
  bottom: -100px; left: 3%;
  animation: cta-shape-2 11s ease-in-out 2s infinite;
}
@keyframes cta-shape-1 { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.18) rotate(12deg)} }
@keyframes cta-shape-2 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25) translateY(-20px)} }

.cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3xl); position: relative; z-index: 1;
}
.cta-band__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); color: #fff;
  margin-bottom: var(--space-sm);
  font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1.12;
}
.cta-band__subtitle { color: rgba(255,255,255,.58); font-size: 1.0625rem; font-weight: var(--fw-regular); }

/* ══════════════════════════════════════════════════════════
   POST KARTLARI
   ══════════════════════════════════════════════════════════ */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-xl); }
.post-card {
  background: #fff; border-radius: var(--radius-xl);
  border: 1px solid var(--color-border); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .36s var(--ease-enter), box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; gap: var(--space-sm); }
.post-card__meta { display: flex; align-items: center; gap: var(--space-sm); font-size: .78rem; color: var(--color-text-muted); }
.post-card__cat {
  background: rgba(12,77,162,.07); color: var(--color-primary);
  border-radius: var(--radius-full); padding: .2rem .65rem;
  font-weight: var(--fw-semibold); font-size: .73rem;
}
.post-card__title { font-size: .9375rem; font-weight: var(--fw-semibold); line-height: 1.45; letter-spacing: -.01em; }
.post-card__title a { color: var(--color-text); transition: color .2s ease; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt { font-size: .855rem; color: var(--color-text-light); flex: 1; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════
   SCROLL TOP
   ══════════════════════════════════════════════════════════ */
.scroll-top {
  position: fixed; bottom: 2rem; right: 7rem; z-index: 50;
  width: 42px; height: 42px; border-radius: var(--radius-full);
  background: var(--grad-primary); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-primary);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform var(--transition-spring);
  pointer-events: none;
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.scroll-top:hover { transform: translateY(-3px); }
.scroll-top svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════
   WIDGET
   ══════════════════════════════════════════════════════════ */
.sidebar { display: flex; flex-direction: column; gap: var(--space-xl); }
.widget { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-xl); }
.widget-title {
  font-size: .9rem; font-weight: var(--fw-semibold);
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.tag-chip {
  font-size: .78rem; font-weight: var(--fw-medium); padding: .25rem .75rem;
  border-radius: var(--radius-full); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); color: var(--color-text-mid);
  transition: all .2s ease;
}
.tag-chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions__grid { grid-template-columns: repeat(2, 1fr); }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .shortcuts__grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: .875rem; }
  .resources-grid { grid-template-columns: 1fr; }
  .quick-actions__grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; text-align: center; }
  /* Mobilde hover efekti daha hafif */
  .service-card:hover { transform: translateY(-3px); }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .shortcuts__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Touch cihazlarda hover state'i devre dışı — donma yapmaz */
@media (hover: none) {
  .service-card { transition: none; }
  .service-card:hover { transform: none; box-shadow: none; }
  .service-card:hover::before { opacity: 0; }
  .service-card:hover .service-card__icon { transform: none; background: rgba(12,77,162,.07); color: var(--color-primary); box-shadow: none; }
  .service-card:active {
    transform: scale(.97);
    box-shadow: 0 4px 20px rgba(6,13,28,.1);
    transition: transform .15s ease, box-shadow .15s ease;
  }
}

/* ══════════════════════════════════════════════════════════
   SERVİS KARTI — Görsel placeholder (v5 iyileştirme)
   Görsel yoksa gradient + ikon gösterilir
   ══════════════════════════════════════════════════════════ */
.service-card__icon-visual {
  width: 100%; aspect-ratio: 16/10;
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: .125rem; position: relative;
  background: linear-gradient(135deg, rgba(12,77,162,.07) 0%, rgba(15,174,106,.07) 100%);
  display: flex; align-items: center; justify-content: center;
}
.service-card__icon-visual::before {
  content: ''; position: absolute; inset: 0;
  background: 
    radial-gradient(circle at 70% 30%, rgba(12,77,162,.12) 0, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(15,174,106,.1) 0, transparent 50%);
}
.service-card__icon-visual .service-card__icon {
  width: 60px; height: 60px; position: relative; z-index: 1;
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 20px rgba(12,77,162,.15);
  backdrop-filter: blur(8px);
}
.service-card__icon-visual .service-card__icon svg { width: 28px; height: 28px; }

/* Hygiene variant */
.service-card--secondary .service-card__icon-visual {
  background: linear-gradient(135deg, rgba(15,174,106,.07) 0%, rgba(12,77,162,.05) 100%);
}
.service-card--secondary .service-card__icon-visual .service-card__icon {
  background: rgba(255,255,255,.85);
}

/* Ana sayfa grid boşluk düzenlemesi */
.services-grid {
  gap: 1.5rem;
}
.shortcuts__grid {
  gap: 1rem;
}
.resources-grid {
  gap: 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   QA-STRIP — Hızlı Aksiyonlar v4
   Hero'dan sonra beyaz arkaplanda, geniş, temiz
══════════════════════════════════════════════════════════ */
.qa-strip {
  background: #fff;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(10,18,40,.06);
}
.qa-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  width: min(1200px, calc(100% - 3rem));
  margin: 0 auto;
}

.qa-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.25rem;
  border-radius: 14px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .2s;
  animation: qaFadeUp .5s both;
}
@keyframes qaFadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

.qa-card--primary {
  background: linear-gradient(135deg, #f0f5ff 0%, #e6edfc 100%);
  border-color: rgba(12,77,162,.10);
}
.qa-card--secondary {
  background: linear-gradient(135deg, #f0faf4 0%, #e4f5ec 100%);
  border-color: rgba(15,174,106,.10);
}
.qa-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10,18,40,.10);
}
.qa-card--primary:hover  { border-color: rgba(12,77,162,.22); }
.qa-card--secondary:hover { border-color: rgba(15,174,106,.22); }

.qa-card__icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .22s ease;
}
.qa-card--primary   .qa-card__icon { background: var(--color-primary,#0C4DA2);   color: #fff; box-shadow: 0 4px 14px rgba(12,77,162,.28); }
.qa-card--secondary .qa-card__icon { background: var(--color-secondary,#0FAE6A); color: #fff; box-shadow: 0 4px 14px rgba(15,174,106,.28); }
.qa-card:hover .qa-card__icon { transform: scale(1.08) rotate(-3deg); }
.qa-card__icon svg { width: 22px; height: 22px; }

.qa-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .22rem;
}
.qa-card__title {
  font: 700 .92rem/1.3 var(--font-family,'Segoe UI',sans-serif);
  color: var(--color-text,#0a1222);
  letter-spacing: -.015em;
}
.qa-card__desc {
  font: 400 .76rem/1.45 var(--font-family,'Segoe UI',sans-serif);
  color: var(--color-text-light,#687080);
}

.qa-card__arr {
  flex-shrink: 0;
  color: var(--color-text-muted,#a0aab4);
  transition: transform .2s ease, color .2s;
}
.qa-card:hover .qa-card__arr {
  transform: translateX(3px);
  color: var(--color-primary,#0C4DA2);
}
.qa-card--secondary:hover .qa-card__arr { color: var(--color-secondary,#0FAE6A); }

@media (max-width: 900px) {
  .qa-strip__inner { grid-template-columns: repeat(2,1fr); gap: 1rem; }
}
@media (max-width: 520px) {
  .qa-strip { padding: 1.75rem 0 1.5rem; }
  .qa-strip__inner { grid-template-columns: 1fr; gap: .85rem; }
  .qa-card { padding: 1.1rem 1rem; }
}