:root {
  --olive-950: #0e2316;
  --olive-900: #163a24;
  --olive-800: #1d4a2e;
  --olive-700: #2a5e3a;
  --olive-500: #5d7f35;
  --wine: #7b1f3f;
  --gold: #c9a24a;
  --gold-light: #e7c04f;
  --cream: #fbfaf5;
  --cream-2: #f1efe4;
  --ink: #17211a;
  --muted: #59645a;
  --line: rgba(29, 74, 46, .14);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  --radius: 18px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--olive-800); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
em { font-style: italic; color: var(--wine); }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.narrow { width: min(780px, 100% - 32px); }
.eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--olive-500); margin-bottom: .9rem; }
.slot { border-bottom: 1.5px dashed currentColor; opacity: .6; }
.section { padding: clamp(64px, 9vw, 110px) 0; }
.head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.head p { color: var(--muted); font-size: 1.05rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.6em; border-radius: 999px; font: 700 .92rem var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-primary { background: var(--wine); color: #fff; }
.btn-primary:hover { background: #962c52; }
.btn-ghost { border-color: var(--olive-800); color: var(--olive-800); background: transparent; }
.btn-gold { background: var(--gold-light); color: var(--olive-950); }
.btn-block { width: 100%; padding-block: 1.05em; font-size: 1rem; }
.link-btn { background: none; border: 0; color: var(--olive-800); font: 600 .9rem var(--sans); cursor: pointer; padding: 8px 0; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 2px; }

.mode-bar { background: #fff3cd; color: #6b4e00; text-align: center; font-size: .82rem; padding: 6px 16px; }
/* one line under the header: who sells, from where (links to the seller card) */
.trust-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 10px; padding: 7px 12px; background: var(--cream-2, #f1efe4); color: var(--olive-800); font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid var(--line); }
.trust-line a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.trust-line a + a::before { content: '·'; margin-right: 10px; color: var(--wine); }
.trust-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trust-line .tl-loc { color: var(--wine); }
.trust-line .tl-loc svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 420px) { .trust-line { font-size: .72rem; gap: 0 7px; } .trust-line a + a::before { margin-right: 7px; } .trust-line .tl-x { display: none; } }
/* desktop: the origin line under the heading says a little more */
@media (min-width: 760px) { .tin-show.is-landing .ts-head .eyebrow::after { content: ' · Kendi bahçemizden'; } }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 12px max(16px, calc((100vw - var(--wrap)) / 2)); background: rgba(14, 35, 22, .96); backdrop-filter: blur(8px); color: #fff; }
.logo svg { height: 40px; width: auto; aspect-ratio: 814 / 210; color: #fff; }
.brand-slogan { padding-inline-start: 16px; border-inline-start: 1px solid rgba(255, 255, 255, .28); font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-light); white-space: nowrap; }
.foot-slogan { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold-light); margin: .6em 0 .2em; }
@media (max-width: 900px) { .brand-slogan { display: none; } }
.nav { display: flex; gap: 26px; margin-inline-start: auto; }
.nav a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .9rem; font-weight: 600; }
.nav a:hover { color: var(--gold-light); }
.cart-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold-light); color: var(--olive-950); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.cart-count.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.35); } }

/* hero */
.hero { background: radial-gradient(120% 90% at 80% 30%, #f6ecd2 0%, var(--cream) 60%); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; min-height: min(78vh, 720px); padding: 40px 0; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 48ch; }
.hero-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.hero-buy small { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; }
.price { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--olive-900); line-height: 1; font-variant-numeric: lining-nums; }
.hero-art { position: relative; height: min(64vh, 560px); }
.hero-art .glow { position: absolute; inset: 10% 5% 0; background: radial-gradient(closest-side, rgba(231, 192, 79, .45), transparent); }
.hero-art .tin { position: absolute; bottom: 4%; }
.hero-art .tin svg { width: 100%; height: auto; overflow: visible; }
.hero-art .front { width: 58%; left: 14%; filter: drop-shadow(0 30px 40px rgba(31, 42, 23, .25)); animation: float 6s ease-in-out infinite; }
.hero-art .back { width: 44%; right: 2%; bottom: 14%; opacity: .95; filter: blur(.4px) drop-shadow(0 20px 30px rgba(31, 42, 23, .2)); }
.hero-art .sprig { position: absolute; width: 26%; left: 0; top: 8%; transform: rotate(-24deg); opacity: .9; }
@keyframes float { 50% { transform: translateY(-10px); } }

.trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: -36px auto 0; position: relative; }
.trust li { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 34px -26px rgba(31, 42, 23, .45); font-size: .85rem; color: var(--muted); }
.trust svg { width: 28px; height: 28px; flex: none; color: var(--olive-700); }
.trust b { display: block; color: var(--ink); font-size: .92rem; }

/* products */
.products { display: grid; gap: 28px; }
.product { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 40px; align-items: center; background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 24px 50px -40px rgba(31, 42, 23, .5); border-top: 4px solid var(--accent); }
.product-art { background: radial-gradient(closest-side, rgba(231, 192, 79, .3), transparent), var(--cream-2); border-radius: 18px; padding: 28px 40px 18px; }
.product-art svg { width: 100%; height: auto; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-700); background: rgba(169, 180, 143, .35); padding: .35em .8em; border-radius: 999px; }
.product h3 { font-size: 2.3rem; margin: .4em 0 .1em; }
.ts-panel h3 small, .product h3 small { font: 600 .9rem var(--sans); color: var(--muted); }
.notes { color: var(--wine); font-weight: 600; font-size: .92rem; }
.specs { list-style: none; padding: 0; margin: 14px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.specs li { font-size: .8rem; padding: .35em .8em; border-radius: 8px; background: var(--cream-2); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.buy .price { margin-inline-end: auto; }
.price .was-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--sans); font-size: .42em; line-height: 1; }
.price .was-row s { font-weight: 600; color: var(--muted); text-decoration-color: var(--wine); text-decoration-thickness: 2px; }
.price .was-row em { font-style: normal; font-weight: 800; color: #fff; background: var(--wine); padding: 4px 9px; border-radius: 999px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { width: 38px; height: 40px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--olive-800); }
.qty input { width: 40px; text-align: center; border: 0; font: 700 1rem var(--sans); -moz-appearance: textfield; appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty.sm button { width: 30px; height: 32px; font-size: 1rem; }
.qty.sm input { width: 30px; font-size: .9rem; }

.why { background: var(--cream-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-grid > div { background: #fff; border-radius: var(--radius); padding: 30px; }
.why-grid b { font-family: var(--serif); font-size: 2rem; color: var(--gold); }
.why-grid h3 { font-size: 1.6rem; margin: .2em 0 .3em; }
.why-grid p { color: var(--muted); margin: 0; }
.story-band { background: linear-gradient(120deg, var(--olive-800), var(--olive-950)); color: var(--cream); padding: 56px 0; }
.story-band .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.story-band h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 24ch; color: var(--cream); }
.story-band .sb-text { flex: 1 1 320px; }
.story-band .sb-text .eyebrow { color: var(--gold-light); margin-bottom: .4rem; }
.story-band .sb-text p { margin: .5em 0 0; opacity: .85; }
.sb-play { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-light, #e7c04f); color: var(--olive-950, #0b1d12); box-shadow: 0 0 0 0 rgba(231, 192, 79, .6); animation: sb-pulse 2.4s ease-out infinite; transition: transform .2s; }
.sb-play svg { width: 34px; height: 34px; margin-left: 4px; }
.sb-play:hover { transform: scale(1.06); }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 192, 79, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(231, 192, 79, 0); } }
@media (prefers-reduced-motion: reduce) { .sb-play { animation: none; } }
@media (max-width: 640px) { .story-band .wrap { gap: 16px; } .sb-play { width: 60px; height: 60px; } .story-band .btn { width: 100%; } }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--wine); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* footer */
.foot { background: var(--olive-950); color: rgba(255, 255, 255, .78); padding: 64px 0 28px; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; }
.foot h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav a { color: inherit; text-decoration: none; }
.foot nav a:hover { color: var(--gold-light); }
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; }
.pay svg { width: 16px; height: 16px; }
.pay span { padding: 2px 8px; border-radius: 4px; background: #fff; color: var(--olive-950); font-weight: 800; font-size: .72rem; }
.follow { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.social-ig { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 700; text-decoration: none; }
.social-ig svg { width: 20px; height: 20px; flex: none; }
a.social-ig:hover { color: var(--gold-light); }
.copy { text-align: center; opacity: .55; font-size: .8rem; margin: 48px 0 0; }

/* cart drawer */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer-bg { position: absolute; inset: 0; background: rgba(14, 35, 22, .45); animation: fade .25s; }
.drawer-panel { position: absolute; inset-block: 0; right: 0; width: min(420px, 100%); background: var(--cream); display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0, 0, 0, .2); animation: slide .3s cubic-bezier(.2, .7, .2, 1); }
.drawer-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-panel h2 { font-size: 1.8rem; margin: 0; }
.icon-btn { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-lines { flex: 1; overflow: auto; padding: 8px 22px; }
.drawer-panel > footer { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: #fff; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line .thumb { width: 64px; height: 76px; border-radius: 10px; background: var(--cream-2); padding: 6px; }
.line .thumb svg { width: 100%; height: 100%; }
.line b { display: block; font-size: .92rem; line-height: 1.3; }
.line .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.line .amt { font-weight: 800; white-space: nowrap; }
.line .rm { border: 0; background: none; color: var(--muted); font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 0; }
.totals { display: grid; gap: 6px; margin-bottom: 16px; font-size: .95rem; }
.totals div { display: flex; justify-content: space-between; }
.totals .disc { color: var(--wine); font-weight: 700; }
/* cart: the other tin at its bundle price */
.upsell { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 12px 0 4px; padding: 12px; border: 2px dashed rgba(123, 31, 63, .35); border-radius: 14px; background: rgba(123, 31, 63, .05); }
.upsell .thumb { width: 56px; height: 66px; border-radius: 10px; background: var(--cream-2); padding: 5px; }
.upsell .thumb svg { width: 100%; height: 100%; }
.upsell b { display: block; font-size: .95rem; line-height: 1.25; }
.upsell small { display: block; color: var(--muted); font-size: .78rem; }
.up-tag { display: inline-block; margin-bottom: 3px; padding: 2px 8px; border-radius: 999px; background: var(--wine); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.up-price { display: block; margin-top: 3px; font-variant-numeric: lining-nums; }
.up-price s, .up-price strong { white-space: nowrap; }
.up-price s { color: var(--muted); font-size: .82rem; }
.up-price strong { color: var(--wine); font-size: 1.05rem; }
.up-add { padding: .6em 1.1em; }
.totals .grand { font-size: 1.15rem; font-weight: 800; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.empty-note { text-align: center; color: var(--muted); padding: 40px 0; }

/* checkout */
.checkout { padding-top: 40px; }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; font-size: .82rem; font-weight: 700; color: var(--muted); counter-reset: s; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 8px; }
.steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); }
.steps li + li::after { order: -1; content: ''; width: 28px; height: 1.5px; background: var(--line); }
.steps li.on { color: var(--olive-900); }
.steps li.on::before { background: var(--olive-800); color: #fff; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.co-grid > * { min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; } /* fieldsets default to min-content width and push the form off narrow screens */
legend { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: block; margin-bottom: 12px; }
.f > span { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.f small { font-weight: 500; color: var(--muted); }
.f input, .f select, .f textarea { width: 100%; padding: .8em .95em; border: 1.5px solid var(--line); border-radius: 12px; font: 500 1rem var(--sans); background: #fff; color: var(--ink); }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--olive-700); outline: none; box-shadow: 0 0 0 3px rgba(42, 94, 58, .15); }
.f.invalid input, .f.invalid select, .f.invalid textarea { border-color: var(--wine); }
.err { display: block; color: var(--wine); font-style: normal; font-size: .8rem; font-weight: 600; min-height: 0; }
.err:empty { display: none; }
.seg { display: inline-flex; background: var(--cream-2); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.seg label { padding: .5em 1.2em; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .88rem; }
.seg label:has(input:checked) { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.hint { font-size: .82rem; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 8px 0 4px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--olive-800); flex: none; }
.form-error { background: #fbe4ea; color: var(--wine); padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .9rem; }
.summary { position: sticky; top: 96px; background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 24px 50px -40px rgba(31, 42, 23, .5); }
.summary h2 { font-size: 1.6rem; }
.pay-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.8rem; }
.pay-step h2 svg { width: 26px; height: 26px; color: var(--olive-700); }
.pay-step iframe { width: 100%; min-height: 640px; border: 0; border-radius: 14px; background: #fff; }
.demo-pay { background: #fff; border-radius: var(--radius); padding: 26px; border: 2px dashed #e0c36a; }
.demo-pay .card { background: linear-gradient(135deg, var(--olive-800), var(--olive-950)); color: #fff; border-radius: 14px; padding: 20px; max-width: 340px; margin: 14px 0 20px; font-family: ui-monospace, monospace; letter-spacing: .12em; }
.demo-pay .card small { display: block; letter-spacing: .05em; opacity: .7; margin-top: 18px; font-family: var(--sans); }
.demo-pay .btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* order + legal */
.order-card { background: #fff; border-radius: 24px; padding: 40px; text-align: center; box-shadow: 0 24px 50px -40px rgba(31, 42, 23, .5); }
.order-card .mark { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: var(--olive-700); }
.order-card.fail .mark { background: var(--wine); }
.order-card.wait .mark { background: var(--gold); }
.order-card .oid { font-weight: 800; letter-spacing: .06em; }
.order-card .totals { text-align: start; max-width: 420px; margin: 24px auto; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.legal h2 { font-size: 1.6rem; margin-top: 1.6em; }
.legal h3 { font-size: 1.25rem; margin-top: 1.2em; }
.review-note { background: #fff3cd; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.seller { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; background: #fff; padding: 18px 20px; border-radius: 14px; }
.seller dt { font-weight: 700; font-size: .85rem; color: var(--muted); }
.seller dd { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--olive-950); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: fade .25s; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .hero-art { height: 360px; order: -1; }
  .trust { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .product { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .product-art { max-width: 320px; margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr; }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .cart-btn { margin-inline-start: auto; }
  .top { gap: 12px; }
  .hero-art { height: 300px; }
  .trust { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trust li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; font-size: .76rem; }
  .trust svg { width: 22px; height: 22px; }
  .trust b { font-size: .86rem; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .order-card { padding: 28px 20px; }
  .buy .price { width: 100%; }
  .buy .btn { flex: 1; }
  /* cart line: amount moves under the quantity so a long total never runs past the card */
  .line { grid-template-columns: 64px minmax(0, 1fr); row-gap: 6px; }
  .line .thumb { grid-row: span 2; }
  .line .amt { grid-column: 2; }
  .steps { gap: 6px; }
  .steps li + li::after { width: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.ts-panel .buy { padding-top: 16px; }
.ts-panel p { color: var(--muted); margin: .4em 0; }
.ts-panel .notes { color: var(--wine); }

/* landing: usage lists in the tin details card */
@media (min-width: 760px) { .tin-show.is-landing .ts-panel { padding: 20px 24px; } }
.tin-show.is-landing .ts-panel h3 { font-size: 2rem; }
.ts-panel h4 { margin: 12px 0 5px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-500); }
.ts-panel ul.use, .ts-panel ul.feat { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: .88rem; }
.ts-panel ul.use li, .ts-panel ul.feat li { position: relative; padding-inline-start: 22px; }
.ts-panel ul.use li::before { content: ''; position: absolute; inset-inline-start: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--olive-700); box-shadow: inset 0 0 0 3px #e8eddc; }
.ts-panel ul.feat li { color: var(--muted); font-size: .85rem; }
.ts-panel ul.feat li::before { content: '✓'; position: absolute; inset-inline-start: 2px; color: var(--wine); font-weight: 800; }
.trust { margin-top: 0; padding-top: 28px; }

/* frying guide */
.guide-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .88rem; color: var(--wine); text-decoration: none; }
.guide-link:hover { text-decoration: underline; }
.fry { background: var(--cream-2); scroll-margin-top: 60px; }
.fry-steps { list-style: none; counter-reset: f; padding: 0; margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fry-steps li { counter-increment: f; background: #fff; border-radius: var(--radius); padding: 24px 22px; position: relative; }
.fry-steps li::before { content: counter(f); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wine); color: #fff; font-weight: 800; margin-bottom: 12px; }
.fry-steps b { display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; margin-bottom: 6px; }
.fry-steps span { color: var(--muted); font-size: .92rem; }
.fry-need { font-size: .95rem; background: #fff; display: inline-block; padding: .6em 1.1em; border-radius: 14px; margin-top: .4em; }
.fry-tips { max-width: 980px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fry-tips > div { border-top: 3px solid var(--olive-700); padding-top: 14px; }
.fry-tips h3 { font-size: 1.35rem; margin-bottom: .3em; }
.fry-tips p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 960px) { .fry-steps { grid-template-columns: 1fr 1fr; } .fry-tips { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .fry-steps { grid-template-columns: 1fr; } }
.ts-panel .reason { font-size: .88rem; margin: 0; }
.ship-free { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: #fff; background: var(--olive-700); padding: .35em .8em; border-radius: 999px; }
.ship-free svg { width: 16px; height: 16px; }
.ts-panel .buy .price { width: auto; }
.ts-panel .buy .ship-free { margin-inline-end: auto; }

/* tasting note in the details card */
.ts-panel dl.taste { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: .84rem; }
.ts-panel dl.taste dt { font-weight: 800; color: var(--olive-800); }
.ts-panel dl.taste dd { margin: 0; color: var(--muted); }
/* what to expect: the two oils side by side */
.expect { background: #fff; }
.expect-table { max-width: 980px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.et-row { display: grid; grid-template-columns: 160px 1fr 1fr; }
.et-row > span { padding: 16px 20px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.et-row > span:first-child { font-weight: 800; color: var(--olive-900); background: var(--cream); }
.et-head > span { border-top: 0; background: var(--cream-2); }
.et-head > span:not(:first-child) { border-top: 4px solid var(--accent); }
.et-head b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.et-head small { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); }
.glossary { max-width: 980px; margin: 36px auto 0; }
.glossary h3 { font-size: 1.5rem; }
.glossary dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; margin: 0; }
.glossary dt { font-weight: 800; color: var(--olive-800); }
.glossary dd { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 640px) {
  .et-row { grid-template-columns: 1fr 1fr; }
  .et-row > span:first-child { grid-column: 1 / -1; padding: 10px 14px; }
  .et-head > span:first-child { display: none; }
  .et-row > span { padding: 12px 14px; font-size: .88rem; }
}

/* info note: only this season's oil */
/* "Biz kimiz": real photos */
.ab-mill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -24px rgba(31, 42, 23, .45); border-inline-start: 4px solid var(--gold, #c9a24a); }
.am-name { display: flex; flex-direction: column; margin-inline-end: auto; }
.am-name b { font-family: var(--serif); font-size: 1.25rem; color: var(--olive-900); }
.am-name span { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.am-name svg { width: 13px; height: 13px; color: var(--wine); }
.am-rate, .am-press { color: var(--olive-900); text-decoration: none; font-size: .86rem; font-weight: 600; }
.am-rate:hover, .am-press:hover { text-decoration: underline; text-underline-offset: 3px; }
.am-rate b { font-size: 1.05rem; margin: 0 2px 0 6px; }
.am-stars { color: #e3a008; letter-spacing: 1px; }
.am-press small { color: var(--muted); font-weight: 500; }
@media (max-width: 760px) { .ab-mill { flex-direction: column; align-items: flex-start; gap: 6px; } }
.about { margin: 36px auto 0; }
.ab-head { max-width: 640px; margin-bottom: 16px; }
.ab-head h2 { margin: .15em 0 .3em; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.ab-head p { margin: 0; color: var(--muted); }
.ab-strip { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 200px 200px; gap: 10px;
  grid-template-areas: "bahce bahce yag zeytin" "bahce bahce yag sikim"; }
.ab-ph { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--cream-2); }
.ab-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-taze-yag img { object-position: 50% 20%; }
.ab-ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-weight: 700; font-size: .84rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.ab-bahce { grid-area: bahce; } .ab-taze-yag { grid-area: yag; } .ab-zeytin { grid-area: zeytin; } .ab-sikim { grid-area: sikim; }
@media (max-width: 760px) {
  /* phones: one swipeable row, the next photo peeks in so it is clear there is more */
  .ab-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .ab-strip::-webkit-scrollbar { display: none; }
  .ab-ph { flex: 0 0 78%; height: 240px; scroll-snap-align: start; }
  .ab-taze-yag { flex-basis: 52%; }
}
/* who sells: right under the guarantees, so trust is one scroll away from the prices */
.seller-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 32px; align-items: center; margin: 28px auto 0; padding: 26px 28px; border-radius: var(--radius); background: #fff; box-shadow: 0 16px 34px -26px rgba(31, 42, 23, .45); }
.seller-card h2 { margin: .1em 0 .3em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.seller-card p { margin: 0; color: var(--muted); }
.seller-card address { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-style: normal; font-weight: 600; font-size: .92rem; color: var(--ink); }
.seller-card address svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--wine); }
.sc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-btn { display: flex; align-items: center; gap: 8px; min-width: 0; padding: .7em .9em; border-radius: 12px; border: 1.5px solid var(--line); background: var(--cream); color: var(--olive-900); text-decoration: none; font-weight: 700; font-size: .86rem; overflow-wrap: anywhere; transition: border-color .2s, background .2s; }
.sc-btn svg { width: 20px; height: 20px; flex: none; color: var(--olive-700); }
.sc-btn:hover { border-color: var(--olive-700); }
.sc-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.sc-wa svg { color: #fff; }
.sc-wa:hover { background: #187a42; }
.sc-legal { grid-column: 1 / -1; font-size: .8rem !important; border-top: 1px solid var(--line); padding-top: 10px; }
.trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* floating WhatsApp: shown by shop.js after the first screen */
.wa-float { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #1f8f4e; color: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) {
  .seller-card { grid-template-columns: 1fr; padding: 20px 18px; }
  .sc-actions { grid-template-columns: 1fr; }
}
.season-note { display: flex; gap: 18px; align-items: flex-start; margin: 40px auto 0; padding: 22px 26px; border-radius: var(--radius); background: linear-gradient(120deg, #eef2e3, #f7f3e6); border-inline-start: 5px solid var(--olive-700); }
.season-note b { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--olive-900); margin-bottom: 4px; }
.season-note p { margin: 0; color: var(--ink); font-size: .98rem; }
@media (max-width: 640px) { .season-note { flex-direction: column; gap: 10px; padding: 18px; } }

/* details card tabs: "Ne için?" / "Tadım notu" — two equal, clearly clickable buttons */
.pt { margin-top: 12px; }
.pt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pt-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: .7em .6em; border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream); cursor: pointer; font: 800 .86rem var(--sans); color: var(--olive-800); transition: background .2s, border-color .2s, color .2s, transform .15s; }
.pt-tabs button svg { width: 18px; height: 18px; flex: none; }
.pt-tabs button:hover { border-color: var(--olive-700); transform: translateY(-1px); }
.pt-tabs button[aria-selected="true"] { background: var(--olive-800); border-color: var(--olive-800); color: #fff; }
.pt-tabs .pt-taste[aria-selected="false"] { border-color: var(--gold); background: linear-gradient(135deg, #fff8e4, #fdf1cf); color: #6b4e00; animation: pt-glow 2.4s ease-in-out infinite; }
.pt-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 0 rgba(231, 192, 79, .7); animation: pt-ping 1.6s ease-out infinite; }
@keyframes pt-ping { 0% { box-shadow: 0 0 0 0 rgba(231, 192, 79, .7); } 100% { box-shadow: 0 0 0 10px rgba(231, 192, 79, 0); } }
@keyframes pt-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); } 50% { box-shadow: 0 0 0 4px rgba(201, 162, 74, .22); } }
.taste-seen .pt-dot { display: none; }
.taste-seen .pt-tabs .pt-taste[aria-selected="false"] { animation: none; }
.pt-tabs .pt-taste[aria-selected="true"] .pt-dot { display: none; }
.pt-pane { min-height: 112px; }
.ts-panel .buy { padding-top: 12px; margin-top: 10px; }
.pt-mini { display: none; margin: 4px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.pt-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pt-mini b { color: var(--ink); }
.pt-mini a { color: var(--wine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* campaign under the details card's add-to-cart: both tins for less */
.bundle-offer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; width: 100%; margin-top: 10px; padding: 8px 12px; border: 2px dashed rgba(123, 31, 63, .35); border-radius: 14px; background: rgba(123, 31, 63, .06); color: var(--wine); text-align: start; cursor: pointer; font: inherit; transition: background .2s; }
.bundle-offer:hover { background: rgba(123, 31, 63, .11); }
.bo-text b { display: block; font-weight: 800; font-size: .95rem; }
.bo-text small { color: var(--muted); font-size: .78rem; }
.bo-text u { color: var(--wine); font-weight: 800; text-underline-offset: 3px; }
.bo-price { text-align: end; line-height: 1.1; font-variant-numeric: lining-nums; }
.bo-price s { display: block; font-size: .8rem; color: var(--muted); }
.bo-price b { font-size: 1.15rem; font-weight: 800; }

@media (max-width: 759px) {
  .pt-pane { min-height: 0; } .ts-panel dl.taste { font-size: .8rem; }
  .pt { margin-top: 6px; } .pt-tabs { margin-bottom: 8px; } .pt-tabs button { padding: .6em .4em; font-size: .82rem; }
  .ts-panel h3 { font-size: 1.5rem; margin: 0; }
  .ts-panel ul.use { font-size: .84rem; gap: 2px; }
  .ts-panel .buy { padding-top: 8px; margin-top: 6px; gap: 8px 12px; }
  .ts-panel .buy .btn { padding-block: .7em; }
  /* phones: price + "kargo bizden" on one row, quantity + add to cart on the next, so the campaign below stays in view */
  .ts-panel .buy { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "price ship" "qty btn"; align-items: center; }
  .ts-panel .buy .price { grid-area: price; white-space: nowrap; }
  .ts-panel .buy .ship-free { font-size: .78rem; }
  .ts-panel .buy .ship-free { grid-area: ship; justify-self: end; margin: 0; }
  .ts-panel .buy .qty { grid-area: qty; }
  .ts-panel .buy .btn { grid-area: btn; width: 100%; }
  /* phones: price, add to cart and the both-tins offer come first, right under the name, so they are always in view;
     "Ne için? / Tadım notu" follow and scroll inside the card if the screen is short */
  .ts-panel:not([hidden]) { display: flex; flex-direction: column; }
  .ts-panel .buy { order: 1; margin-top: 6px; padding-top: 0; border-top: 0; }
  .ts-panel .bundle-offer { order: 2; margin-top: 8px; }
  .ts-panel .pt { display: none; } /* phones: the tabs make the card taller than the screen; .pt-mini says it in one line */
  .ts-panel .pt-mini { display: flex; gap: 10px; align-items: baseline; }
}


/* olive-leaf pattern down both sides of the page (wide screens only) */
@media (min-width: 1100px) {
  body::before, body::after { content: ''; position: fixed; top: 64px; bottom: 0; z-index: 1; width: max(150px, calc((100vw - var(--wrap)) / 2 + 40px)); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22 viewBox=%220 0 180 180%22%3E%3Cg transform=%22translate(30 80) rotate(-20) scale(1)%22%3E%3Cpath d=%22M0 0 C10 -18 18 -40 22 -64%22 fill=%22none%22 stroke=%22%236b5636%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath transform=%22translate(1.8 -9.1) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(1.8 -9.1) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(4.3 -18.3) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(4.3 -18.3) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(7.3 -27.4) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%2394a375%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(7.3 -27.4) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(10.6 -36.6) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(10.6 -36.6) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(14.2 -45.7) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(14.2 -45.7) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(18.0 -54.9) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%2394a375%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(18.0 -54.9) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3C/g%3E%3Cg transform=%22translate(120 170) rotate(25) scale(0.9)%22%3E%3Cpath d=%22M0 0 C10 -18 18 -40 22 -64%22 fill=%22none%22 stroke=%22%236b5636%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath transform=%22translate(2.1 -10.7) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(2.1 -10.7) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(5.3 -21.3) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(5.3 -21.3) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(8.9 -32.0) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%2394a375%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(8.9 -32.0) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(13.0 -42.7) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(13.0 -42.7) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(17.4 -53.3) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(17.4 -53.3) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3C/g%3E%3Cg transform=%22translate(150 70) rotate(160) scale(0.8)%22%3E%3Cpath d=%22M0 0 C10 -18 18 -40 22 -64%22 fill=%22none%22 stroke=%22%236b5636%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath transform=%22translate(2.1 -10.7) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(2.1 -10.7) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(5.3 -21.3) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(5.3 -21.3) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(8.9 -32.0) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%2394a375%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(8.9 -32.0) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(13.0 -42.7) rotate(-40)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%235d7044%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(13.0 -42.7) rotate(-40)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3Cpath transform=%22translate(17.4 -53.3) rotate(-140)%22 d=%22M0 0C9.1 -4.2 18.2 -4.2 26 0C18.2 3.3 9.1 3.3 0 0Z%22 fill=%22%237d9460%22 opacity=%220.95%22/%3E%3Cpath transform=%22translate(17.4 -53.3) rotate(-140)%22 d=%22M2 0H23%22 stroke=%22%23fff%22 stroke-width=%22.7%22 opacity=%22.35%22/%3E%3C/g%3E%3Cellipse cx=%2262%22 cy=%22128%22 rx=%225%22 ry=%226.5%22 fill=%22%2333233a%22 opacity=%22.85%22/%3E%3Cellipse cx=%2274%22 cy=%22134%22 rx=%225%22 ry=%226.5%22 fill=%22%236e8a36%22 opacity=%22.9%22/%3E%3Cellipse cx=%22146%22 cy=%22112%22 rx=%224.5%22 ry=%226%22 fill=%22%235f7a2e%22 opacity=%22.9%22/%3E%3C/svg%3E") 0 0 / 180px 180px repeat; opacity: .24; }
  body::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
  body::after { right: 0; background-position: 90px 60px; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
}

/* green harvest seal */
.harvest-seal { display: inline-block; flex: none; }
.harvest-seal svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(14, 35, 22, .35)); }
.harvest-seal .hs-spin { transform-origin: 100px 100px; animation: hs-spin 24s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.harvest-seal.hs-head { position: absolute; left: calc(50% - 560px); top: 6px; width: 118px; height: 118px; transform: rotate(-8deg); }
.harvest-seal.hs-note { width: 74px; height: 74px; }

@media (max-width: 1100px) { .harvest-seal.hs-head { left: 2%; width: 100px; height: 100px; } }
/* phones: a small seal at the left of the heading, level with "Kafanız karışmasın / İki seçeneğiniz var" */
@media (max-width: 759px) {
  .harvest-seal.hs-head { left: -10px; top: 4px; width: 54px; height: 54px; }
  .tin-show.is-landing .ts-head h1 { font-size: 1.95rem; }
}
@media (max-width: 350px) {
  .harvest-seal.hs-head { display: none; } /* no room beside the heading on the narrowest phones */
  .tin-show.is-landing .ts-head h1 { font-size: 1.7rem; }
  .tin-show.is-landing .ts-head .eyebrow { font-size: .85rem; }
}

/* analysis report card beside each tin (inside the scaled tin, so sizes are large) */
/* beside the feature list: left of the first tin's list, right of the second's (below the list on narrower screens) */
.ts-extra { position: absolute; top: -230px; z-index: 3; opacity: 0; transition: opacity .6s; }
.ts-tin[data-tin="sizma"] .ts-extra { right: 800px; }
.ts-tin[data-tin="birinci"] .ts-extra { left: 800px; }
@media (max-width: 1359px) {
  .ts-extra { top: 190px; }
  .ts-tin[data-tin="sizma"] .ts-extra { right: 268px; }
  .ts-tin[data-tin="birinci"] .ts-extra { left: 268px; }
  .report-card { flex-direction: row !important; width: 400px !important; text-align: start !important; }
}
/* the report card comes in last, once every feature chip beside the tins has landed (chips end at about 3.3s) */
.tin-show.ts-landed .ts-extra { opacity: 1; transition-delay: 0s; animation: rc-in-l .9s cubic-bezier(.2, .7, .2, 1) 3.4s backwards, rc-nudge 3.2s ease-in-out 4.6s infinite; }
.tin-show.ts-landed .ts-tin[data-tin="birinci"] .ts-extra { animation-name: rc-in-r, rc-nudge; }
@keyframes rc-in-l { from { opacity: 0; transform: translateX(-140px) scale(.7); } 70% { opacity: 1; transform: translateX(10px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes rc-in-r { from { opacity: 0; transform: translateX(140px) scale(.7); } 70% { opacity: 1; transform: translateX(-10px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes rc-nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-14px); } 90% { transform: translateY(0); } 95% { transform: translateY(-6px); } }
.tin-show.is-focus .ts-extra { opacity: 0; pointer-events: none; transition-delay: 0s; }
.report-card { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 280px; padding: 30px 22px 26px; text-align: center; border: 4px solid var(--gold); border-radius: 28px; background: rgba(255, 255, 255, .95); cursor: pointer; text-align: start; box-shadow: 0 18px 34px -24px rgba(31, 42, 23, .55); transition: transform .2s, border-color .2s; }
.report-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.rc-doc { position: relative; flex: none; display: flex; flex-direction: column; gap: 9px; width: 86px; height: 112px; padding: 18px 14px; border-radius: 8px; background: #fff; border: 3px solid #d9dcd3; box-shadow: 4px 4px 0 #eef0ea; }
.rc-doc i { display: block; height: 6px; border-radius: 3px; background: #cfd5c4; }
.rc-doc i:nth-child(2) { width: 70%; } .rc-doc i:nth-child(4) { width: 50%; }
.rc-doc b { position: absolute; right: -14px; bottom: -12px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--olive-800); color: var(--gold-light); font: 800 13px var(--sans); }
.rc-text { display: flex; flex-direction: column; gap: 4px; align-items: inherit; }
.rc-text b { font-family: var(--serif); font-size: 36px; line-height: 1.05; color: var(--olive-900); }
.rc-text small { font-size: 21px; color: var(--muted); }
.rc-text em { font-style: normal; font-size: 22px; font-weight: 800; color: var(--wine); }
@media (max-width: 1099px) { .ts-extra { display: none; } }

/* links under the tabs in the details card */

/* report window */
.report-modal { width: min(860px, 94vw); max-height: 90vh; padding: 0; border: 0; border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.report-modal::backdrop { background: rgba(14, 35, 22, .55); }
.report-modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.report-modal header b { font-family: var(--serif); font-size: 1.4rem; }
.rm-body { padding: 16px; display: grid; gap: 12px; }
.rm-body iframe { width: 100%; height: 70vh; border: 0; border-radius: 10px; background: #f4f4f0; }
.rm-body img { width: 100%; height: auto; border-radius: 10px; }
.rm-empty { display: flex; align-items: center; gap: 24px; padding: 18px 10px 24px; }
.rm-empty .rc-doc { transform: scale(.9); }
.rm-empty p { margin: 0; color: var(--muted); }
.rm-empty p b { color: var(--ink); }

/* story page: the sticky scene starts under the sticky header instead of behind it */
body[data-page="story"] .stage { top: var(--top-h, 68px); height: calc(100vh - var(--top-h, 68px)); height: calc(100svh - var(--top-h, 68px)); }

/* very short phone screens (e.g. iPhone SE with the browser bars): a tighter details card */
@media (max-width: 759px) and (max-height: 620px) {
  .ts-panel h3 { font-size: 1.3rem; }
  .ts-panel .buy { gap: 6px 10px; margin-top: 4px; }
  .ts-panel .bundle-offer { margin-top: 6px; padding: 6px 10px; }
}