/* Bakım hediye kartı rehberi (/bakim-hediye-karti, /en/gift-card) — 2026-10-13 yeniden tasarım.
   Yalnız bu sayfa yükler. Ortak tasarım dili: Futura/Jost, beyaz–şampanya, hairline, ince çizgi ikonlar.
   Bütün bölümler tam genişlik zemin (kenarda kesik bant yok); içerik .hr-ic içinde ortalanır.
   Zarflar ana sayfa vitrinindeki imza zarfın aynısı (.iz → assets/hediye/imza-v1.css). */

.hr { --hr-max: 1240px; --hr-cizgi: rgba(179, 152, 106, 0.42); --hr-gul: #a3404f; overflow-x: clip; }
.hr-ic { max-width: var(--hr-max); margin: 0 auto; padding: 0 var(--gutter); }
.hr svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- bölüm başlıkları ---------- */
.hr-bolum { padding: clamp(76px, 9vw, 132px) 0; }
.hr-bas { max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.hr-bas .eyebrow { margin-bottom: 16px; }
.hr-bas h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: 0.005em; color: var(--ink); }
.hr-bas p:not(.eyebrow) { margin-top: 16px; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.hr-bas--sol { margin: 0; text-align: left; }

.hr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- giriş ---------- */
.hr-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) 0 clamp(64px, 7vw, 104px);
  background: radial-gradient(70% 90% at 78% 46%, #f4ead7 0%, rgba(244, 234, 215, 0) 62%), linear-gradient(180deg, var(--wash) 0%, #fff 100%);
  border-bottom: 1px solid var(--hairline-soft);
}
.hr-hero__ic { max-width: var(--hr-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hr-hero .crumbs { margin-bottom: 30px; }
.hr-hero__baslik { font-family: var(--display); font-weight: 400; font-size: clamp(2.7rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.005em; color: var(--ink); }
.hr-hero__giris { margin-top: 24px; max-width: 34em; font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); }
.hr-guven { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 34px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.hr-guven li { display: flex; align-items: center; gap: 11px; font-size: 0.86rem; color: var(--ink-soft); }
.hr-guven svg { flex: none; width: 22px; height: 22px; color: var(--champagne-deep); }

/* zarf yelpazesi: Zümrüt + Navy arkada, Rosa önde; görünür olunca üst üste duran zarflar açılır */
.hr-yelpaze { position: relative; display: block; width: 100%; max-width: 600px; justify-self: end; aspect-ratio: 6 / 5; -webkit-tap-highlight-color: transparent; }
.hr-yelpaze__isik { position: absolute; inset: 6% 4% 0; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 186, 132, 0.34), rgba(214, 186, 132, 0)); pointer-events: none; }
.hr-yelpaze__z { position: absolute; left: 18%; top: 26%; width: 64%; z-index: 2; transform-origin: 50% 90%; transition: transform 1.15s cubic-bezier(0.2, 0.8, 0.22, 1), opacity 0.8s var(--ease); }
.hr-yelpaze__z--sol { z-index: 1; transform: translate3d(-27%, -15%, 0) rotate(-12deg) scale(0.84); }
.hr-yelpaze__z--sag { z-index: 1; transform: translate3d(27%, -15%, 0) rotate(11deg) scale(0.84); }
.hr-yelpaze__z--orta { z-index: 3; transform: translate3d(0, 4%, 0) rotate(-2deg); }
.hr-yelpaze__z--sag { transition-delay: 0.08s; }
.hr-yelpaze .iz { box-shadow: 0 34px 56px -30px rgba(22, 19, 14, 0.55), 0 2px 6px rgba(22, 19, 14, 0.06); }
html.reveal-ready .hr-yelpaze:not(.in) .hr-yelpaze__z { transform: translate3d(0, 10%, 0) rotate(-2deg) scale(0.92); }
html.reveal-ready .hr-yelpaze:not(.in) .hr-yelpaze__z--sol,
html.reveal-ready .hr-yelpaze:not(.in) .hr-yelpaze__z--sag { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .hr-yelpaze.in:hover .hr-yelpaze__z--orta { transform: translate3d(0, 1%, 0) rotate(-1deg); transition-duration: 0.7s; transition-delay: 0s; }
  .hr-yelpaze.in:hover .hr-yelpaze__z--sol { transform: translate3d(-31%, -17%, 0) rotate(-14deg) scale(0.84); transition-duration: 0.7s; transition-delay: 0s; }
  .hr-yelpaze.in:hover .hr-yelpaze__z--sag { transform: translate3d(31%, -17%, 0) rotate(13deg) scale(0.84); transition-duration: 0.7s; transition-delay: 0s; }
}
.hr-yelpaze:focus-visible { outline: 1px solid var(--champagne); outline-offset: 8px; }

/* ---------- özel günler (ikonlu kutular) ---------- */
.hr-gunler { background: #fff; }
.hr-gunler__liste { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hr-gunler__liste > li { display: flex; }
.hr-gun {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 34px 24px 26px; text-align: center; background: #fff;
  border: 1px solid var(--hairline); border-radius: 2px;
  transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.hr-gun__ikon {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  border: 1px solid var(--hr-cizgi); color: var(--champagne-deep); background: var(--wash);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.hr-gun__ikon svg { width: 34px; height: 34px; }
.hr-gun b { margin-top: 20px; font-family: var(--display); font-weight: 500; font-size: 1.04rem; letter-spacing: 0.02em; color: var(--ink); }
.hr-gun small { margin-top: 8px; font-size: 0.87rem; line-height: 1.55; color: var(--ink-soft); }
.hr-gun__git { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne-deep); }
.hr-gun__git svg { width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.hr-gun:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.hr-gun:active { transform: scale(0.985); transition-duration: 0.12s; }
@media (hover: hover) and (pointer: fine) {
  .hr-gun:hover { border-color: var(--hr-cizgi); background: var(--wash); transform: translateY(-3px); box-shadow: 0 22px 40px -32px rgba(22, 19, 14, 0.35); }
  .hr-gun:hover .hr-gun__ikon { background: var(--champagne-deep); border-color: var(--champagne-deep); color: #fff; }
  .hr-gun:hover .hr-gun__git svg { transform: translateX(4px); }
}

/* ---------- nasıl çalışır (ikonlu üç adım, çizgiyle bağlı) ---------- */
.hr-adim { background: var(--wash); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
.hr-adim__liste { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.hr-adim__liste::before {
  content: ""; position: absolute; top: 40px; left: 16.7%; right: 16.7%; height: 1px; background: var(--hr-cizgi);
  transform-origin: 0 50%; transition: transform 1.4s var(--ease) 0.2s;
}
html.reveal-ready .hr-adim__liste:not(:has(.in))::before { transform: scaleX(0); }
.hr-adim__liste li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hr-adim__ikon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #fff; border: 1px solid var(--hr-cizgi); color: var(--champagne-deep); box-shadow: 0 0 0 10px var(--wash); }
.hr-adim__ikon svg { width: 38px; height: 38px; }
.hr-adim__no { margin-top: 24px; font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne-deep); }
.hr-adim__liste b { margin-top: 10px; font-family: var(--display); font-weight: 500; font-size: 1.18rem; letter-spacing: 0.01em; color: var(--ink); }
.hr-adim__liste p { margin-top: 10px; max-width: 30ch; font-size: 0.93rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- zarf koleksiyonu (gerçek imza zarflar) ---------- */
.hr-zarflar { background: #fff; }
.hr-zarflar__liste { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 22px; }
.hr-zarf { display: flex; flex-direction: column; align-items: center; text-align: center; -webkit-tap-highlight-color: transparent; }
.hr-zarf__sahne {
  display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; padding: 13% 12%;
  background: radial-gradient(80% 70% at 50% 45%, #fff 0%, var(--wash) 72%, #f4eee3 100%);
  border: 1px solid var(--hairline-soft); border-radius: 2px;
  transition: border-color 0.5s var(--ease);
}
.hr-zarf__sahne .iz { width: 100%; box-shadow: 0 24px 34px -22px rgba(22, 19, 14, 0.5), 0 1px 4px rgba(22, 19, 14, 0.06); transform: rotate(-1.5deg); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.hr-zarf em { display: block; margin-top: 18px; font-style: normal; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hr-gul); }
.hr-zarf b { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: 1.06rem; letter-spacing: 0.06em; color: var(--ink); }
.hr-zarf em + b { margin-top: 6px; }
.hr-zarf small { margin-top: 6px; max-width: 26ch; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.hr-zarf:focus-visible { outline: 1px solid var(--champagne); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .hr-zarf:hover .hr-zarf__sahne { border-color: var(--hr-cizgi); }
  .hr-zarf:hover .iz { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 34px 44px -24px rgba(22, 19, 14, 0.55), 0 1px 4px rgba(22, 19, 14, 0.06); }
}

/* ---------- hediye edilebilecek bakımlar (fotoğraflı kartlar) ---------- */
.hr-bakimlar { background: var(--wash); border-top: 1px solid var(--hairline-soft); }
.hr-bakimlar__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hr-bakim { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.hr-bakim__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hairline-soft); }
.hr-bakim__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hr-bakim__metin { display: flex; flex-direction: column; gap: 6px; padding: 22px 64px 24px 24px; }
.hr-bakim__metin b { font-family: var(--display); font-weight: 500; font-size: 1.08rem; letter-spacing: 0.01em; color: var(--ink); }
.hr-bakim__metin small { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.hr-bakim__ok { position: absolute; right: 24px; bottom: 28px; width: 20px; height: 20px; color: var(--champagne-deep); transition: transform 0.45s var(--ease); }
.hr-bakim:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .hr-bakim:hover { border-color: var(--hr-cizgi); box-shadow: 0 26px 44px -34px rgba(22, 19, 14, 0.4); }
  .hr-bakim:hover .hr-bakim__foto img { transform: scale(1.045); }
  .hr-bakim:hover .hr-bakim__ok { transform: translateX(5px); }
}

/* ---------- sık sorulan sorular ---------- */
.hr-sss { background: #fff; }
.hr-sss__ic { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.hr-sss .hr-bas { position: sticky; top: calc(var(--nav-h) + 32px); }
.hr-sss__wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; min-height: 44px; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne-deep); }
.hr-sss__wa span { padding-bottom: 3px; border-bottom: 1px solid rgba(179, 152, 106, 0.4); transition: border-color 0.3s; }
.hr-sss__wa svg { width: 19px; height: 19px; }
.hr-sss__wa:hover span { border-color: currentColor; }
.hr-sss__liste { border-top: 1px solid var(--hairline); }
.hr-sss__s { border-bottom: 1px solid var(--hairline); }
.hr-sss__s summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 24px 0; list-style: none; cursor: pointer; font-size: 1.02rem; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.hr-sss__s summary::-webkit-details-marker { display: none; }
.hr-sss__s summary i { position: relative; flex: none; width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.hr-sss__s summary i::before, .hr-sss__s summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 1px; background: var(--champagne-deep); }
.hr-sss__s summary i::after { transform: rotate(90deg); }
.hr-sss__s[open] summary i { transform: rotate(45deg); }
.hr-sss__s summary:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.hr-sss__s p { max-width: 62ch; padding: 0 40px 26px 0; font-size: 0.95rem; line-height: 1.75; color: var(--ink-soft); }
.hr-sss__s p a { color: var(--champagne-deep); border-bottom: 1px solid rgba(125, 101, 56, 0.35); }

/* ---------- kapanış ---------- */
.hr-son { padding: clamp(84px, 10vw, 144px) 0; text-align: center; background: radial-gradient(60% 120% at 50% 0%, #f2e7d1 0%, rgba(242, 231, 209, 0) 70%), var(--wash); border-top: 1px solid var(--hairline-soft); }
.hr-son h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; color: var(--ink); }
.hr-son p:not(.eyebrow) { margin: 18px auto 0; max-width: 34em; font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }
.hr-son .hr-cta { justify-content: center; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .hr-gunler__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-zarflar__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-bakimlar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hr-hero__ic { display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: center; }
  .hr-hero__metin { display: contents; }
  .hr-hero .crumbs { order: 1; justify-content: center; }
  .hr-hero .eyebrow { order: 2; }
  .hr-hero__baslik { order: 3; }
  .hr-hero__giris { order: 4; margin-left: auto; margin-right: auto; }
  .hr-yelpaze { order: 5; justify-self: auto; max-width: 440px; margin: 18px auto 0; }
  .hr-hero__metin > .reveal:has(.hr-cta) { order: 6; }
  .hr-guven { order: 7; }
  .hr-hero .hr-cta { justify-content: center; margin-top: 8px; }
  .hr-guven { justify-content: center; margin-left: auto; margin-right: auto; }
  .hr-sss__ic { grid-template-columns: 1fr; }
  .hr-sss .hr-bas { position: static; text-align: center; margin: 0 auto; }
}

/* ---------- telefon ---------- */
@media (max-width: 640px) {
  .hr-bolum { padding: 64px 0; }
  .hr-bas { margin-bottom: 32px; }
  .hr-bas h2 { font-size: 1.85rem; }
  .hr-bas p:not(.eyebrow) { font-size: 0.96rem; }
  .hr-hero { padding-bottom: 56px; }
  .hr-hero .crumbs { margin-bottom: 22px; }
  .hr-hero__baslik { font-size: 2.55rem; }
  .hr-hero__giris { margin-top: 18px; font-size: 1rem; }
  .hr-yelpaze { max-width: 360px; margin-top: 6px; }
  .hr-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hr-cta .btn { width: 100%; justify-content: center; }
  .hr-guven { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 30px; padding-top: 22px; width: 100%; text-align: left; }
  .hr-guven li { font-size: 0.8rem; gap: 9px; }
  .hr-guven svg { width: 18px; height: 18px; }

  .hr-gunler__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hr-gun { justify-content: flex-start; padding: 20px 6px 16px; }
  .hr-gun__ikon { width: 56px; height: 56px; }
  .hr-gun__ikon svg { width: 29px; height: 29px; }
  .hr-gun b { margin-top: 12px; font-size: 0.84rem; line-height: 1.3; letter-spacing: 0.01em; }
  .hr-gun small, .hr-gun__git { display: none; }

  .hr-adim__liste { grid-template-columns: 1fr; gap: 30px; }
  .hr-adim__liste::before { content: none; }
  .hr-adim__liste li:not(:last-child)::after { content: ""; position: absolute; left: calc(32px - 0.5px); top: 72px; bottom: -22px; width: 1px; background: var(--hr-cizgi); }
  .hr-adim__liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: start; text-align: left; }
  .hr-adim__ikon { grid-row: 1 / span 3; width: 64px; height: 64px; box-shadow: 0 0 0 8px var(--wash); }
  .hr-adim__ikon svg { width: 27px; height: 27px; }
  .hr-adim__no { margin-top: 4px; }
  .hr-adim__liste b { margin-top: 6px; font-size: 1.1rem; }
  .hr-adim__liste p { margin-top: 6px; max-width: none; font-size: 0.92rem; }

  .hr-zarflar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .hr-zarf__sahne { padding: 14% 11%; }
  .hr-zarf b { margin-top: 14px; font-size: 0.98rem; }
  .hr-zarf em { margin-top: 14px; }
  .hr-zarf small { font-size: 0.74rem; }

  .hr-bakimlar__liste { grid-template-columns: 1fr; gap: 10px; }
  .hr-bakim { flex-direction: row; align-items: center; min-height: 104px; }
  .hr-bakim__foto { flex: none; width: 104px; height: 104px; aspect-ratio: auto; align-self: stretch; }
  .hr-bakim__metin { padding: 14px 52px 14px 18px; gap: 4px; }
  .hr-bakim__metin b { font-size: 1rem; }
  .hr-bakim__metin small { font-size: 0.8rem; }
  .hr-bakim__ok { right: 18px; bottom: auto; top: 50%; margin-top: -9px; width: 18px; height: 18px; }

  .hr-sss__s summary { padding: 20px 0; font-size: 0.97rem; }
  .hr-sss__s p { padding-right: 0; font-size: 0.92rem; }
  .hr-son { padding: 72px 0 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-yelpaze__z, .hr-gun, .hr-gun__ikon, .hr-zarf__sahne .iz, .hr-bakim__foto img, .hr-adim__liste::before { transition: none !important; }
}