/* HappyİZ sipariş sayfası. Renkler statik sayfalarla aynı (kitap.html); ürün önizlemesi baskıdaki yazı tipiyle (Lexend, yerel). */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/happyiz/fonts/lexend-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/happyiz/fonts/lexend-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --navy: #0b1026; --cream: #f5efe2; --gold: #e8b968; --ink: #1a1f38; --line: rgba(232, 185, 104, .28); --soft: rgba(245, 239, 226, .74); --panel: rgba(255, 255, 255, .04); }
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--navy); color: var(--cream); font: 400 1rem/1.6 -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left)) 72px; position: relative; z-index: 1; }
.wrap:focus { outline: none; }
a { color: var(--gold); }
h1 { font-family: Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.2; color: #fff; margin: .3rem 0 .7rem; }
h2 { scroll-margin-top: 80px; font-family: Georgia, serif; font-size: 1.4rem; color: var(--gold); margin: 2.6rem 0 .3rem; }
.sub { color: var(--soft); max-width: 70ch; margin-bottom: 1.1rem; }
.meta { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.back { text-decoration: none; font-size: .9rem; }
.langs { display: flex; gap: 4px; border: 1px solid rgba(232, 185, 104, .4); border-radius: 999px; padding: 3px; }
.langs button { border: 0; background: transparent; color: var(--cream); font-family: inherit; font-weight: 600; font-size: .85rem; line-height: 1; padding: .5rem .8rem; border-radius: 999px; cursor: pointer; min-height: 36px; }
.langs button.on { background: linear-gradient(135deg, #c9973f, #e8b968); color: var(--navy); }

.hero { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.hero > div { flex: 1; min-width: 260px; }
.hero-logo { width: 120px; height: auto; flex: none; }
.lead { font-size: 1.05rem; max-width: 64ch; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.facts li { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; background: var(--panel); }
.facts li b { color: var(--gold); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 1.4rem 0; counter-reset: s; }
.steps li { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; background: var(--panel); counter-increment: s; font-size: .92rem; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; margin-right: .5rem; }
.steps b { color: #fff; }

.cartjump { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; background: linear-gradient(135deg, #c9973f, #e8b968); color: var(--navy); font-weight: 700; border-radius: 999px; padding: .5rem 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.cartjump b { background: var(--navy); color: var(--gold); border-radius: 999px; min-width: 1.6rem; padding: 0 .4rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Ürün kartları */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card { border: 1px solid rgba(232, 185, 104, .22); border-radius: 16px; padding: 1rem 1.1rem 1.1rem; background: linear-gradient(165deg, rgba(232, 185, 104, .07), rgba(255, 255, 255, .03) 45%); display: flex; flex-direction: column; gap: .6rem; }
.card .pic { height: 190px; display: grid; place-items: center; }
.card .pic img { max-height: 190px; max-width: 100%; width: auto; height: auto; border-radius: 10px; }
.card h3 { font-family: Georgia, serif; color: #fff; font-size: 1.08rem; line-height: 1.3; }
.card p { font-size: .9rem; color: var(--soft); }
.card .price { color: var(--gold); font-weight: 700; font-size: .9rem; }
.field { display: grid; gap: .25rem; font-size: .85rem; }
.sel, .field select, .search, .form input, .form textarea, .qty input { font: inherit; font-size: .95rem; color: var(--cream); background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 185, 104, .35); border-radius: 10px; padding: .5rem .7rem; min-height: 42px; width: 100%; }
.sel option, .field select option { color: #111; }
.qty { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.qty input { width: 4.5rem; text-align: center; }
.add { margin-top: auto; border: 0; cursor: pointer; background: linear-gradient(135deg, #c9973f, #e8b968); color: var(--navy); font-family: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2; padding: .75rem 1rem; border-radius: 999px; min-height: 44px; }
.added { font-size: .82rem; color: #9fe3b5; min-height: 1.2em; }

/* Stüdyo: söz + ürün */
.studio { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }
.stage-col { position: sticky; top: 112px; display: grid; gap: .8rem; }
@media (max-width: 860px) { .stage-col { position: static; } }
.seg, .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .chip { font: inherit; font-size: .88rem; cursor: pointer; border: 1px solid rgba(232, 185, 104, .4); background: transparent; color: var(--cream); border-radius: 999px; padding: .35rem .85rem; min-height: 38px; }
.seg button[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; }
.chip .n { opacity: .7; font-size: .78rem; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.stage { background: linear-gradient(160deg, #F3F1F8, #DCD7EA); border-radius: 16px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.swatches { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--soft); flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); cursor: pointer; }
.swatches button[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; }
.opts { display: grid; gap: .6rem; }
.opts .chosen { font-size: .9rem; border-left: 3px solid var(--gold); padding: .2rem 0 .2rem .7rem; }
.opts .chosen b { display: block; color: #fff; font-family: Georgia, serif; font-size: 1rem; }
.pick-col { display: grid; gap: .8rem; min-width: 0; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row .sel { width: auto; min-width: 10rem; }
.row .search { flex: 1 1 200px; width: auto; }
.lbl { font-size: .88rem; color: var(--soft); }
.kidnote { font-size: .85rem; background: rgba(232, 185, 104, .1); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; }
.sozlist { max-height: 560px; overflow-y: auto; display: grid; gap: 6px; padding: 2px; border-radius: 12px; }
.sozlist:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.soz { text-align: left; font: inherit; color: var(--cream); background: var(--panel); border: 1px solid rgba(232, 185, 104, .18); border-radius: 12px; padding: .6rem .8rem; cursor: pointer; display: grid; justify-content: stretch; justify-items: start; gap: .15rem; width: 100%; }
.soz[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; background: rgba(232, 185, 104, .1); }
.soz .t { font-weight: 600; color: #fff; }
.soz .o { font-size: .82rem; color: var(--soft); }
.soz .k { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.empty { color: var(--soft); padding: 1rem 0; }

/* Sepet ve form */
.checkout { scroll-margin-top: 80px; }
.basket { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: .4rem 1rem; }
.basket .item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.basket .item:last-of-type { border-bottom: 0; }
.basket .item b { color: #fff; font-weight: 600; }
.basket .item small { display: block; color: var(--soft); font-size: .82rem; }
.basket .x { font: inherit; font-size: .85rem; background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: var(--cream); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; min-height: 36px; }
.basket .q { display: flex; align-items: center; gap: .3rem; }
.basket .q button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(232, 185, 104, .45); background: transparent; color: var(--cream); font-size: 1.1rem; cursor: pointer; }
.basket .q span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.basket .sum { padding: .7rem 0; font-weight: 700; color: var(--gold); }
.basket .none { padding: 1rem 0; color: var(--soft); }
@media (max-width: 560px) { .basket .item { grid-template-columns: 1fr auto; } .basket .item .x { grid-column: 2; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 1.2rem; }
.form label { display: grid; gap: .3rem; font-size: .88rem; color: var(--soft); }
.form .wide, .form .cta, .form .fine, .form .done, .form .formerr { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.cta { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; background: linear-gradient(135deg, #1faa59, #25d366); color: #07220f; font-weight: 800; padding: .9rem 1.4rem; border-radius: 999px; text-decoration: none; min-height: 48px; justify-self: start; }
.formerr { color: #ffb4a8; font-size: .9rem; }
.fine { font-size: .82rem; color: var(--soft); }
.done { background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .45); border-radius: 12px; padding: .7rem 1rem; font-size: .92rem; }
footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; opacity: .8; display: grid; gap: .4rem; }

/* ---------- Ürün çizimleri (Söz Seçici ile aynı) ---------- */
.mock { width: 86%; position: relative; }
.mock-shirt { aspect-ratio: 400 / 440; }
.mock-shirt > svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(20, 16, 50, .25)); }
.mock-shirt .art { position: absolute; left: 31%; top: 22%; width: 38%; height: 50%; }
.mock-mug { aspect-ratio: 1.25; }
.mug-body { position: absolute; left: 4%; top: 10%; width: 72%; height: 80%; border-radius: 4% / 3%; background: linear-gradient(90deg, #D9D6E3 0%, #FFFFFF 18%, #FFFFFF 70%, #E4E1EC 100%); box-shadow: 0 10px 18px -8px rgba(20, 16, 50, .35); overflow: hidden; }
.mug-handle { position: absolute; right: 6%; top: 26%; width: 26%; height: 46%; border: .9em solid #ECEAF2; border-left: none; border-radius: 0 50% 50% 0; font-size: clamp(8px, 2.6vw, 14px); box-shadow: 4px 6px 10px -6px rgba(20, 16, 50, .35); }
.mug-body .art { position: absolute; inset: 9% 7%; }
.mock-sticker { aspect-ratio: 1; width: 70%; }
.mock-sticker .die { position: absolute; inset: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 8px 16px -6px rgba(20, 16, 50, .35); }
.mock-sticker .art { position: absolute; inset: 4.5%; border-radius: 50%; overflow: hidden; }
.mock-tote { aspect-ratio: .86; width: 74%; }
.tote-bag { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: #E9DFC8; border-radius: 2% 2% 4% 4%; box-shadow: 0 10px 18px -8px rgba(20, 16, 50, .35); }
.tote-strap { position: absolute; top: 0; width: 26%; height: 36%; border: .7em solid #D9CDB2; border-bottom: none; border-radius: 50% 50% 0 0; font-size: clamp(8px, 2.4vw, 13px); }
.tote-strap.l { left: 18%; } .tote-strap.r { right: 18%; }
.tote-bag .art { position: absolute; inset: 12% 12% 14%; }
.art { container-type: size; color: var(--ink-on); font-family: "Lexend", system-ui, sans-serif; }
.art > .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4cqmin; --u: 1cqmin; }
.art.on-dark { --ink-on: #FFFFFF; --ink-soft-on: rgba(255, 255, 255, .78); --gold-on: #EDB84E; }
.art.on-light { --ink-on: #201C33; --ink-soft-on: #5A5670; --gold-on: #A87A0C; }
.art .brand { display: inline-flex; align-items: center; gap: 2cqmin; font-size: max(7px, 7cqmin); font-weight: 700; color: var(--ink-soft-on); letter-spacing: .02em; }
.art .brand img { height: 1.6em; width: auto; }
.art .brand span { color: var(--gold-on); }
.art .txt { font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.art .sub2 { font-weight: 600; color: var(--ink-soft-on); line-height: 1.2; margin: 0; text-wrap: balance; }
.art.sticker { background: var(--st-bg); --ink-on: #FFFFFF; --ink-soft-on: rgba(255, 255, 255, .85); --gold-on: #FFE29A; }
.art.sticker > .in { padding: 14cqmin; gap: 3cqmin; --u: .72cqmin; }
.art.sticker .txt { line-height: 1.1; }
.tile { border: calc(1.6 * var(--u)) solid var(--gold-on); border-radius: calc(3 * var(--u)); width: calc(62 * var(--u)); aspect-ratio: 1; display: grid; grid-template-rows: auto 1fr auto; padding: calc(3 * var(--u)) calc(4 * var(--u)); text-align: left; }
.tile .num { font-size: calc(9 * var(--u)); font-weight: 600; color: var(--ink-soft-on); }
.tile .sym { font-size: calc(30 * var(--u)); font-weight: 700; color: var(--gold-on); line-height: 1; align-self: center; justify-self: center; }
.tile .nm { font-size: calc(8 * var(--u)); font-weight: 600; justify-self: center; color: var(--ink-on); }
.deha { font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .02em; position: relative; }
.deha b { color: var(--gold-on); position: relative; }
.deha b::before { content: "A"; position: absolute; left: 0; right: 0; top: -.62em; font-size: .42em; color: var(--ink-soft-on); opacity: .55; text-decoration: line-through; text-decoration-thickness: .06em; }
.warn { width: calc(46 * var(--u)); aspect-ratio: 1.15; }
.batt { width: calc(52 * var(--u)); height: calc(24 * var(--u)); border: calc(2 * var(--u)) solid var(--ink-on); border-radius: calc(4 * var(--u)); position: relative; }
.batt::after { content: ""; position: absolute; right: calc(-6 * var(--u)); top: 30%; width: calc(4 * var(--u)); height: 40%; background: var(--ink-on); border-radius: 0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0; }
.batt i { position: absolute; left: calc(2.5 * var(--u)); top: calc(2.5 * var(--u)); bottom: calc(2.5 * var(--u)); width: 6%; background: #FF6B6B; border-radius: calc(1 * var(--u)); }
.glasses { display: flex; gap: calc(6 * var(--u)); align-items: flex-end; }
.glasses svg { width: calc(14 * var(--u)); height: auto; }

h2:focus { outline: none; }