/* ==========================================================================
   Aksesuar — bordo, dergi düzeni, katalog numaraları
   ========================================================================== */

.mag { background: var(--bordeaux); color: #f7ebe0; --fg: #f7ebe0; --fg-2: #ead3c8; --muted: rgba(247, 235, 224, .62); --line: rgba(230, 203, 139, .3); --line-2: rgba(247, 235, 224, .14); --accent: var(--gold-hi); --accent-text: var(--gold-hi); position: relative; overflow: hidden; }
.mag::after { content: ""; position: absolute; right: -8%; top: -20%; width: 46vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(230, 203, 139, .2); pointer-events: none; }
.mag__in { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 100px); padding-block: clamp(50px, 8vw, 120px); align-items: end; }
.mag__issue { display: flex; gap: 24px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mag__title { font: 500 clamp(4rem, 13vw, 12rem)/.82 var(--font-d); letter-spacing: -.03em; margin: 30px 0 26px -.04em; }
.mag__tag { max-width: 34ch; font: italic 500 clamp(1.3rem, 2vw, 1.7rem)/1.35 var(--font-d); color: var(--fg-2); }
.mag__toc ol { margin-top: 18px; border-top: 1px solid var(--line); }
.mag__toc a { display: grid; grid-template-columns: 36px auto 1fr auto; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line-2); transition: color .3s, padding .4s var(--ease); }
.mag__toc a:hover, .mag__toc a[aria-current] { color: var(--gold-hi); padding-left: 8px; }
.mag__no { font: italic 500 1rem var(--font-d); color: var(--gold-hi); }
.mag__name { font: 500 1.35rem/1.2 var(--font-d); }
.mag__dots { border-bottom: 1px dotted rgba(247, 235, 224, .35); transform: translateY(-4px); }
.mag__pg { font-size: .72rem; color: var(--muted); }

.chapter { padding-block: clamp(60px, 8vw, 110px); border-bottom: 1px solid var(--line); }
.chapter--alt { background: var(--bg-2); }
.chapter__head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: end; margin-bottom: 40px; }
.chapter__no { font: italic 500 clamp(4rem, 8vw, 7rem)/.8 var(--font-d); color: var(--accent); }
.chapter__head .muted { margin-top: 8px; }
.chapter__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 22px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.chapter__row .card { scroll-snap-align: start; }
.chapter .card__media, .acc-list .card__media { background: linear-gradient(180deg, #efe2db, #e2cdc4); }
.card__num { letter-spacing: .05em; }
.acc-list { padding-block: 48px 40px; }

/* Kemer */
.belt { --fg: #f4ece6; --fg-2: #e8d8cf; --muted: rgba(244, 236, 230, .6); --line: rgba(230, 203, 139, .3); --accent: var(--gold-hi); --accent-text: var(--gold-hi); --on-accent: #2a171b; background: #2a171b; color: #f4ece6; }
.belt__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.belt .lead { margin: 18px 0 30px; color: var(--fg-2); }
.belt__form { display: grid; gap: 18px; max-width: 420px; }
.belt__form .input { font: 500 1.6rem var(--font-d); color: var(--fg); }
.belt__result { text-align: center; padding: clamp(28px, 4vw, 54px); border: 1px solid var(--line); }
.belt__strap { position: relative; height: 54px; margin: 10px auto 34px; max-width: 420px; border-radius: 6px; background: linear-gradient(180deg, #5a2a33, #3a1820); box-shadow: inset 0 0 0 1px rgba(230, 203, 139, .2); }
.belt__strap::before { content: ""; position: absolute; inset: 7px 10px; border-top: 1px dashed rgba(230, 203, 139, .5); border-bottom: 1px dashed rgba(230, 203, 139, .5); }
.belt__buckle { position: absolute; left: -10px; top: -10px; bottom: -10px; width: 64px; border: 6px solid var(--gold); border-radius: 8px; }
.belt__holes { position: absolute; right: 40px; top: 50%; display: flex; gap: 20px; transform: translateY(-50%); }
.belt__holes i { width: 9px; height: 9px; border-radius: 50%; background: #1b0d10; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6); }
.belt__holes .is-mid { box-shadow: 0 0 0 3px var(--gold-hi); }
.belt__size { font: 500 clamp(3rem, 6vw, 5rem)/1 var(--font-d); color: var(--gold-hi); }
.belt__size small { font-size: .4em; color: var(--muted); }

/* Hediye */
.gift__head { text-align: center; margin-bottom: 44px; }
.gift__head .kicker { justify-content: center; }
.gift__head .h2 { margin-top: 14px; }
.gift__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gift__step { border: 1px solid var(--line); padding: 26px; margin: 0; opacity: .38; transition: opacity .5s, border-color .5s; }
.gift__step.is-on, .gift__step.is-done { opacity: 1; }
.gift__step.is-on { border-color: var(--accent); }
.gift__step legend { float: left; width: 100%; font: 500 1.5rem/1.2 var(--font-d); margin-bottom: 18px; }
.gift__step legend .num { display: block; font-size: .95rem; margin-bottom: 6px; }
.gift__opts { clear: both; display: grid; gap: 8px; }
.gift__opts label { cursor: pointer; }
.gift__opts input { position: absolute; opacity: 0; }
.gift__opts span { display: block; padding: 12px 16px; border: 1px solid var(--line-2); font-size: .9rem; transition: all .3s var(--ease); }
.gift__opts label:hover span { border-color: var(--accent); }
.gift__opts input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.gift__opts input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.gift__out { margin-top: 40px; }
.gift__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gift__card { display: grid; gap: 8px; animation: rise .7s var(--ease-out) backwards; }
.gift__card:nth-child(2) { animation-delay: .08s; }
.gift__card:nth-child(3) { animation-delay: .16s; }
.gift__card:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.gift__card img { aspect-ratio: 4/5; width: 100%; object-fit: cover; background: var(--bg-2); }
.gift__card b { font: 500 1.2rem/1.2 var(--font-d); }
.gift__card small { color: var(--muted); }
.gift__foot { display: flex; justify-content: center; gap: 32px; margin-top: 34px; }
.gift__empty { grid-column: 1 / -1; text-align: center; font: italic 500 1.4rem var(--font-d); color: var(--muted); }

@media (max-width: 900px) {
  .mag__in, .belt__in { grid-template-columns: 1fr; }
  .chapter__head { grid-template-columns: auto 1fr; }
  .chapter__head .link-arrow { grid-column: 1 / -1; justify-self: start; }
  .chapter__row { grid-auto-columns: 62vw; }
  .gift__steps { grid-template-columns: 1fr; }
  .gift__step:not(.is-on):not(.is-done) { display: none; }
  .gift__list { grid-template-columns: repeat(2, 1fr); }
}