/* Dafium Store satış sayfası: studio.css üstüne küçük eklemeler. */
.ds-kicker { margin: 0 0 1rem; font: 600 .82rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.ds-hero .hero-lead strong { color: var(--ink); }

/* Girişteki örnek mağaza penceresi (tamamen CSS) */
.ds-window { position: relative; align-self: center; border-radius: 18px; background: #14171f; color: #e8ecf2; box-shadow: 0 30px 80px rgba(23, 19, 61, .28); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.ds-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0e1016; font-size: .78rem; color: #8b93a7; }
.ds-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3040; }
.ds-window-bar span { margin-left: 8px; }
.ds-window-hero { display: grid; justify-items: center; gap: .45rem; padding: 26px 16px 22px; background:
    linear-gradient(180deg, transparent 70%, #4caf2e 70%, #4caf2e 78%, transparent 78%),
    repeating-conic-gradient(#3a2a1a 0 25%, #33251a 0 50%) 0 100% / 14px 14px no-repeat,
    linear-gradient(180deg, #5aa9e6, #9fd2f7); }
.ds-window-hero b { font: 700 1.6rem/1 var(--display); color: #fff; text-shadow: 2px 2px 0 #2e6b1d; }
.ds-ip { display: inline-flex; gap: .5rem; align-items: center; padding: 6px 6px 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #17133d; font: 600 .8rem/1 var(--text); }
.ds-ip em { font-style: normal; padding: 5px 9px; border-radius: 7px; background: #4caf2e; color: #fff; }
.ds-online { font: 600 .78rem/1 var(--text); color: #0f3d14; }
.ds-window-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.ds-card { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: #1d212b; border: 1px solid #2a2f3b; font-size: .74rem; }
.ds-card i { display: block; aspect-ratio: 1; border-radius: 6px; background: repeating-conic-gradient(var(--x) 0 25%, var(--y) 0 50%) 0 0 / 12px 12px; }
.ds-card b { font-weight: 600; }
.ds-card em { font-style: normal; color: #7fe3a1; font-weight: 700; }
.ds-card.c1 { --x: #f6c445; --y: #e0a92c; }
.ds-card.c2 { --x: #38e1d1; --y: #24b7aa; }
.ds-card.c3 { --x: #c38cff; --y: #a46ff0; }
.ds-toast { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 10px; background: #10b27a; color: #fff; font: 600 .78rem/1.2 var(--text); box-shadow: 0 8px 20px rgba(16, 178, 122, .35); animation: ds-toast 6s ease-in-out infinite; }
@keyframes ds-toast { 0%, 12% { opacity: 0; transform: translateY(8px); } 20%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }

/* Neden */
.ds-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ds-why li { padding: 1.4rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.ds-why h3 { margin: 0 0 .5rem; font: 600 1.15rem/1.25 var(--display); }
.ds-why p { margin: 0; color: var(--muted); }
.ds-why code { font-size: .9em; padding: 0 4px; border-radius: 4px; background: var(--bg-2); }

/* Temalar */
.ds-themes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ts { display: grid; gap: .45rem; }
.ts-mock { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 10px 44px 36px; gap: 6px; padding: 8px; border-radius: 12px; background: var(--a); border: 1px solid var(--line); }
.ts-mock::before { content: ""; grid-column: 1 / -1; border-radius: 3px; background: var(--b); box-shadow: inset -22px 0 0 var(--c); }
.ts-mock::after { content: ""; grid-column: 1 / -1; grid-row: 2; border-radius: 5px; background: linear-gradient(135deg, var(--c), var(--b)); }
.ts-mock i { grid-row: 3; border-radius: 4px; background: var(--b); box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--c) 60%, transparent); }
.ts-name { font-weight: 600; }
.ts-tier { justify-self: start; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(16, 178, 122, .14); color: #0b7a54; }
.ts-tier.is-prem { background: rgba(91, 75, 255, .13); color: var(--violet-deep); }

/* Fiyat */
.ds-price { margin: .2rem 0 .8rem; display: flex; align-items: baseline; gap: .4rem; }
.ds-price b { font: 700 2.2rem/1 var(--display); }
.ds-price span { color: var(--muted); }
.plan-featured .ds-price span { color: var(--on-ink-muted); }
.ds-note { margin: 1.6rem auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: .95rem; }

/* Gereksinimler */
.ds-req { margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.ds-req h3 { margin: 0 0 .6rem; font: 600 1.15rem/1.25 var(--display); }
.ds-req ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }

@media (max-width: 1080px) {
    .ds-window { max-width: 520px; margin: 2rem auto 0; }
}
@media (max-width: 520px) {
    .ds-window-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-card.c3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ds-toast { animation: none; } }

/* Tema renkleri (src/app/themes-catalog.php'den üretildi) */
.ts-cayir{--a:#eef6e8;--b:#ffffff;--c:#4caf2e}
.ts-gece-madeni{--a:#15171c;--b:#20242c;--c:#38e1d1}
.ts-kar-koyu{--a:#f2f7fc;--b:#ffffff;--c:#2f7fd6}
.ts-okyanus-aniti{--a:#0b2234;--b:#123651;--c:#3dd8c4}
.ts-sade{--a:#f6f7f9;--b:#ffffff;--c:#22c55e}
.ts-nether-kalesi{--a:#1a0b0b;--b:#2b1312;--c:#ff6a2b}
.ts-end-sehri{--a:#0e0a17;--b:#1b1330;--c:#c38cff}
.ts-kiraz-bahcesi{--a:#fff4f8;--b:#ffffff;--c:#ec5f9b}
.ts-derin-karanlik{--a:#05070a;--b:#0d1319;--c:#2fe0e8}
.ts-kiziltas-atolyesi{--a:#16181b;--b:#22262b;--c:#ff3b3b}
.ts-col-tapinagi{--a:#f7ecd2;--b:#fffaf0;--c:#d99a1e}
.ts-orman-tapinagi{--a:#18241a;--b:#223325;--c:#7cc242}
.ts-mantar-adasi{--a:#f6eef9;--b:#ffffff;--c:#d9405b}
.ts-kale{--a:#1e1f22;--b:#2c2f34;--c:#c8a13a}
.ts-gokyuzu-adalari{--a:#eaf5ff;--b:#ffffff;--c:#3b9ff2}
.ts-yesil-magaralar{--a:#0f1c18;--b:#172c26;--c:#f0a03c}
.ts-buz-dikenleri{--a:#0d1824;--b:#14283b;--c:#7fd3ff}
.ts-batik-gemi{--a:#0f2230;--b:#3a2516;--c:#f2c14e}
.ts-arena{--a:#0a0a0c;--b:#16161a;--c:#ff2d46}
.ts-koy-pazari{--a:#f6eddc;--b:#fffaf0;--c:#1fa65a}

.ds-hero .hero-title { font-size: clamp(2.3rem, 4.1vw, 4.1rem); }
.ts-link { display: grid; gap: .45rem; color: inherit; text-decoration: none; border-radius: 12px; }
.ts-link .ts-mock { transition: transform .2s ease, box-shadow .2s ease; }
.ts-link:hover .ts-mock, .ts-link:focus-visible .ts-mock { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 18, 43, .14); }
.ts-link:hover .ts-name, .ts-link:focus-visible .ts-name { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.ts-link:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 4px; }
.ts-go { margin-left: .3rem; font-size: .8em; opacity: .55; }
.ds-demo-hint { margin-top: .75rem; font-weight: 600; color: var(--violet-deep); }
@media (max-width: 1080px) { .ds-hero .hero-title { font-size: clamp(2.2rem, 9vw, 4.1rem); } }
@media (prefers-reduced-motion: reduce) { .ts-link .ts-mock { transition: none; } }
@media (max-width: 640px) {
    .block { padding-block: 64px; }
    .services li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
    .services h3 { font-size: 1.2rem; }
    .ds-hero .ds-window { width: 100%; max-width: none; margin-top: 1.5rem; }
    .ds-themes { gap: 1.25rem .9rem; }
}
.ds-year { margin: -.5rem 0 .9rem; font-size: .9rem; color: var(--muted); }
.ds-year b { color: var(--text, inherit); }
.plan-featured .ds-year { color: var(--on-ink-muted); }
.plan-featured .ds-year b { color: #fff; }