/* Dr.Med — Hediye kartı (design page styles, verbatim) */

/* ═══ kart önizleme ═══ */
.prev{position:sticky;top:96px}
.gc{position:relative;aspect-ratio:1.6/1;overflow:hidden;border:.5px solid var(--c-line);
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.6vw,30px);
  transition:background .5s ease,color .5s ease}
.gc .g1,.gc .g2{position:absolute;border-radius:999px;pointer-events:none;transition:background .5s}
.gc .g1{inset:-40% -20% auto auto;width:70%;aspect-ratio:1;animation:gd1 22s ease-in-out infinite alternate}
.gc .g2{inset:auto auto -46% -22%;width:62%;aspect-ratio:1;animation:gd2 27s ease-in-out infinite alternate}
@keyframes gd1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7%,7%) scale(1.2)}}
@keyframes gd2{0%{transform:translate(0,0) scale(1.16)}100%{transform:translate(8%,-7%) scale(1)}}
@media (prefers-reduced-motion:reduce){.gc .g1,.gc .g2{animation:none}}

.gc[data-th="altin"]{background:var(--c-cream);color:var(--c-ink)}
.gc[data-th="altin"] .g1{background:radial-gradient(circle,color-mix(in srgb,var(--c-gold) 34%,transparent),transparent 66%)}
.gc[data-th="altin"] .g2{background:radial-gradient(circle,color-mix(in srgb,var(--c-gold-soft) 32%,transparent),transparent 68%)}
.gc[data-th="gece"]{background:var(--c-ink);color:var(--c-paper)}
.gc[data-th="gece"] .g1{background:radial-gradient(circle,color-mix(in srgb,var(--c-gold) 40%,transparent),transparent 64%)}
.gc[data-th="gece"] .g2{background:radial-gradient(circle,color-mix(in srgb,#6b5335 55%,transparent),transparent 70%)}
.gc[data-th="krem"]{background:var(--c-paper);color:var(--c-ink)}
.gc[data-th="krem"] .g1{background:radial-gradient(circle,color-mix(in srgb,var(--c-cream-2) 90%,transparent),transparent 68%)}
.gc[data-th="krem"] .g2{background:radial-gradient(circle,color-mix(in srgb,var(--c-gold-soft) 20%,transparent),transparent 70%)}

.gc .hd{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.gc .mk{font-family:var(--display);font-size:clamp(15px,1.7vw,20px);letter-spacing:.3em}
.gc .mk .dot{color:var(--c-gold)}
.gc[data-th="gece"] .mk .dot{color:var(--c-gold-soft)}
.gc .kind{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.62;white-space:nowrap}
.gc .amt{position:relative;z-index:2;font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6vw,64px);line-height:1;letter-spacing:-.02em}
.gc .ft{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.gc .to{min-width:0}
.gc .to .l{font-size:8px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin-bottom:5px}
.gc .to .v{font-family:var(--serif);font-size:clamp(14px,1.5vw,17px);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.gc .code{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;opacity:.55;white-space:nowrap}
.gc .msg{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-size:14.5px;
  line-height:1.5;opacity:.82;margin:12px 0 0;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.prevnote{font-size:10.5px;line-height:1.6;color:var(--c-mute);text-align:center;margin-top:14px}

/* ═══ seçiciler ═══ */
.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.amts button{background:transparent;border:.5px solid var(--c-line);cursor:pointer;padding:16px 8px;
  font-family:var(--serif);font-size:19px;color:var(--c-ink);transition:.26s;min-height:58px}
.amts button:hover{border-color:var(--c-gold);background:var(--c-cream)}
.amts button.on{border-color:var(--c-ink);background:var(--c-cream);box-shadow:inset 0 0 0 1px var(--c-ink)}
.amts button small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-gold);margin-top:5px}

.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.themes button{border:.5px solid var(--c-line);cursor:pointer;padding:0;overflow:hidden;background:transparent;transition:.26s}
.themes button:hover{border-color:var(--c-gold)}
.themes button.on{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.themes .sw{aspect-ratio:1.6/1;position:relative;overflow:hidden}
.themes .sw.altin{background:linear-gradient(135deg,var(--c-cream) 30%,color-mix(in srgb,var(--c-gold) 45%,var(--c-cream)))}
.themes .sw.gece{background:linear-gradient(135deg,var(--c-ink) 40%,color-mix(in srgb,var(--c-gold) 55%,var(--c-ink)))}
.themes .sw.krem{background:linear-gradient(135deg,var(--c-paper) 40%,var(--c-cream-2))}
.themes .nm{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-2);padding:9px 6px;text-align:center}

.kinds{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kinds label{cursor:pointer}
.kinds input{position:absolute;opacity:0;width:0;height:0}
.kinds .k{display:flex;flex-direction:column;gap:7px;border:.5px solid var(--c-line);padding:16px 17px;transition:.26s;min-height:96px}
.kinds label:hover .k{border-color:var(--c-gold)}
.kinds input:checked+.k{border-color:var(--c-ink);background:var(--c-cream);box-shadow:inset 0 0 0 1px var(--c-ink)}
.kinds .k .t{font-family:var(--serif);font-size:17px;color:var(--c-ink);line-height:1.2}
.kinds .k .d{font-size:11.5px;line-height:1.5;color:var(--c-mute)}
.kinds .k .p{margin-top:auto;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold)}

.ctr{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mute);text-align:right;margin-top:7px}

.sumbox{border:.5px solid var(--c-line);background:var(--c-cream);padding:20px 22px;margin-top:16px}
.sumbox .r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;font-size:12.5px;color:var(--c-mute)}
.sumbox .r .v{font-family:var(--serif);font-size:16px;color:var(--c-ink)}
.sumbox .tot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:13px;margin-top:8px;border-top:.5px solid var(--c-line)}
.sumbox .tot span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink)}
.sumbox .tot b{font-family:var(--serif);font-weight:400;font-size:27px;color:var(--c-ink)}

/* ═══ bakiye sorgu ═══ */
.bal{background:var(--c-cream);border-top:.5px solid var(--c-line);padding:clamp(44px,5vw,76px) var(--gutter)}
.bal-in{max-width:520px;margin:0 auto;text-align:center}
.bal h2{font-family:var(--serif);font-weight:300;font-size:clamp(25px,3vw,36px);margin:0 0 12px;letter-spacing:-.01em}
.bal p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--c-ink-2);margin:0 0 24px}
.bal .row{display:flex;gap:8px}
.bal input{flex:1;min-width:0;background:var(--c-paper);border:.5px solid var(--c-line);outline:0;
  font-family:ui-monospace,monospace;font-size:15px;color:var(--c-ink);padding:0 14px;height:50px;letter-spacing:.06em}
.bal input:focus{border-color:var(--c-gold)}
.bal .out{display:none;margin-top:18px;border:.5px solid var(--c-gold);background:color-mix(in srgb,var(--c-gold) 9%,transparent);padding:18px 20px}
.bal .out.on{display:block;animation:bIn .35s ease}
.bal .out.no{border-color:#b4503f;background:color-mix(in srgb,#b4503f 8%,transparent)}
@keyframes bIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bal .out .l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-mute);margin-bottom:7px}
.bal .out .v{font-family:var(--serif);font-size:30px;color:var(--c-ink);line-height:1}
.bal .out .d{font-size:11.5px;color:var(--c-mute);margin-top:9px}

/* ═══ nasıl çalışır ═══ */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border:.5px solid var(--c-line)}
.how div{background:var(--c-paper);padding:24px 22px}
.how .n{font-family:var(--display);font-size:16px;color:var(--c-gold);letter-spacing:.16em;margin-bottom:12px}
.how .t{font-family:var(--serif);font-size:18px;color:var(--c-ink);line-height:1.25;margin-bottom:8px}
.how .d{font-size:12.5px;line-height:1.6;color:var(--c-mute)}

/* ═══ gönderildi ═══ */
.done{display:none;text-align:center;padding:clamp(40px,6vw,72px) 24px}
.done.on{display:block;animation:bIn .4s ease}
.done .crest{width:64px;height:64px;border-radius:999px;background:var(--c-gold);color:var(--c-paper);
  display:grid;place-items:center;margin:0 auto 20px}
.done .crest svg{width:27px;height:27px}
.done h2{font-family:var(--serif);font-weight:300;font-size:clamp(27px,3.4vw,40px);line-height:1.08;margin:0 0 14px;letter-spacing:-.015em}
.done h2 em{font-style:italic;color:var(--c-gold)}
.done p{font-family:var(--serif);font-size:17.5px;line-height:1.6;color:var(--c-ink-2);max-width:44ch;margin:0 auto 22px}
.done .code2{display:inline-flex;align-items:center;gap:16px;border:.5px solid var(--c-line);background:var(--c-cream);
  padding:15px 20px;margin-bottom:24px}
.done .code2 .l{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-mute)}
.done .code2 .v{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:.06em;color:var(--c-ink)}
.done .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:1100px){.prev{position:static;margin-bottom:6px}}
@media (max-width:1000px){.how{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .amts{grid-template-columns:1fr 1fr}
  .kinds{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .bal .row{flex-direction:column}
  .bal .sbtn,.bal .btn{justify-content:center;min-height:48px}
}