/* ===========================================================================
   MINIK — ÇOCUK VE BEBEK GİYİM TEMASI · TAM STİL DOSYASI
   ===========================================================================
   Bu dosya TEK yapı taşıdır: temanın kendi düzeni `css/shop.css` dosyasını
   YÜKLEMEZ (bkz. themes/minik/shop/layouts/app.blade.php). Yani burada yalnız
   `mnk-*` blokları değil, çekirdeğin paylaşılan sınıfları da (btn, field,
   alert, pagination, cartitem, checkout, datatable, prose, pcard…) bu temanın
   dilinde yeniden çizilir. Eksik bırakılan bir çekirdek sınıfı, temanın
   ezmediği sayfayı (sepet, ödeme, hesap, blog) SESSİZCE stilsiz bırakır.

   DOSYA NİÇİN SONRADAN YAZILDI: tema 17 Ağustos 2026'da eklendi ama stil
   dosyası hiç oluşturulmamıştı; `?tema=minik` önizlemesi tarayıcının
   varsayılan HTML görünümünü veriyordu (mavi bağlantılar, madde imli listeler).

   TASARIM DİLİ — "renk önce":
     • Yuvarlak uçlu başlık yazısı (Rubik) + geniş x-yüksekliğinde gövde (Nunito)
     • Yumuşak köşe: kart 22px, düğme tam yuvarlak (hap)
     • Mor birincil + fuşya aksan; zemin kırık beyaz (sıcak)
     • Gölge yok denecek kadar az; ayrım rengin kendisinden gelir

   ERİŞİLEBİLİRLİK ÖLÇÜLDÜ (WCAG 2.1 bağıl parlaklık):
     --primary  #5b3fbd üzerine beyaz  → 8.1:1
     --accent   #c33768 üzerine beyaz  → 5.4:1
     --text     #4d4460 / #fffaf6      → 8.4:1
     --muted    #6c6480 / #fffaf6      → 5.5:1   (ikincil metin AA)
     --control-border form kenarlığı 3:1 eşiğini geçer; dekoratif --border ile
     karıştırılmaz.
   =========================================================================== */

:root {
    /* --- panelden ayarlanabilen değişkenler (themes/minik.php tokens ile birebir) --- */
    --primary: #5b3fbd;
    --accent: #c33768;
    --title: #2b2340;
    --text: #4d4460;
    --page-bg: #fffaf6;
    --card-bg: #ffffff;
    --border: #efe7f3;
    --radius: 16px;
    --card-radius: 22px;
    --btn-radius: 999px;
    --font-scale: 1.02;
    --container: 1280px;

    /* --- panelde AYARLANMAYAN, temanın kendi değişkenleri --- */
    --muted: #6c6480;
    /* Form denetimi kenarlığı SABİT: --border dekoratiftir ve panelden
       istenildiği kadar açık yapılabilir, bu ise 3:1'in altına inemez. */
    --control-border: #8a80a3;
    --yuzey: #f7f1fa;
    --yuzey-koyu: #efe7f3;
    --basari: #1f6b46;
    --uyari: #8a5a12;
    --hata: #a32b4c;
    --gecis: .18s ease;
    --baslik-yazi: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --govde-yazi: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Çocuk giyimi kimliği: kategori balonlarının beş rengi. Rastgele değil,
       hepsi kırık beyaz zeminde 4.5:1 geçen tonlardan seçildi. */
    --balon-1: #5b3fbd;
    --balon-2: #c33768;
    --balon-3: #1d7a72;
    --balon-4: #b4560f;
    --balon-5: #3f6fbd;

    --golge-kart: 0 1px 2px rgba(43, 35, 64, .04), 0 8px 22px rgba(43, 35, 64, .07);
    --golge-panel: 0 14px 44px rgba(43, 35, 64, .16);
    --dokunma: 44px;
}

/* ===========================================================================
   0) ÇEKİRDEK TABAN — sıfırlama, tipografi ve paylaşılan bileşenler
   ===========================================================================
   Bu bölüm `css/shop.css` yüklenmediği için burada olmak ZORUNDA: sepet,
   ödeme, hesap, blog ve karşılaştırma sayfaları çekirdek görünümleri
   kullanıyor ve onların sınıfları (alert, cartitem, checkout, pagination,
   datatable, prose, pcard…) yalnız buradan biçim alıyor. Kurallar tamamen
   değişken sürümlüdür; renk ve köşe değerleri yukarıdaki :root'tan gelir,
   yani temanın kimliğini bozmaz.
   =========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
        scroll-behavior: auto;
    }
*,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}
body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--govde-yazi);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
    display: block;
    max-width: 100%;
}
img {
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--baslik-yazi);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--title);
}
h1 { font-size: calc(2.25rem * var(--font-scale)); }
h2 { font-size: calc(1.75rem * var(--font-scale)); }
h3 { font-size: calc(1.25rem * var(--font-scale)); }
h4 { font-size: calc(1.0625rem * var(--font-scale)); }
p {
    margin: 0 0 1em;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
ul, ol {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
textarea {
    resize: vertical;
}
.field-error,
.hint {
    font-size: .8125rem;
}
.field-error {
    color: var(--hata);
}
.hint {
    color: var(--muted);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--gecis), border-color var(--gecis);
}
.btn:hover {
    background: #46413a;
    border-color: #46413a;
    text-decoration: none;
}
.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.btn--primary,
.btn--navy {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn--gold {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn--gold:hover {
    background: #7d5031;
    border-color: #7d5031;
}
.btn--outline,
.btn--ghost {
    background: transparent;
    color: var(--title);
    border-color: var(--control-border);
}
.btn--outline:hover,
.btn--ghost:hover {
    background: var(--yuzey);
    border-color: var(--title);
}
.btn--sm {
    padding: 8px 14px;
    font-size: .8125rem;
}
.btn--lg {
    padding: 14px 26px;
    font-size: 1rem;
}
.btn--block {
    width: 100%;
}
.panel,
.statcard,
.success-box,
.summary,
.radio-card,
.coupon,
.optgroup {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 20px;
}
.panel__desc {
    color: var(--muted);
    font-size: .875rem;
}
.panel--sss summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--title);
}
.section--surface {
    background: var(--yuzey);
}
.section-head {
    margin-bottom: 28px;
}
.section-head h2 {
    margin-bottom: 6px;
}
.section-head p {
    margin: 0;
    color: var(--muted);
}
.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
}
.badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--yuzey-koyu);
    color: var(--title);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.badge--gold {
    background: var(--accent);
    color: #fff;
}
.badge--info {
    background: var(--primary);
    color: #fff;
}
.badge--success {
    background: #e4efe8;
    color: var(--basari);
}
.badge--warning {
    background: #f6ecd8;
    color: var(--uyari);
}
.badge--danger {
    background: #f6e2e2;
    color: var(--hata);
}
.badge--muted {
    background: var(--yuzey-koyu);
    color: var(--muted);
}
.text-danger { color: var(--hata); }
.text-success { color: var(--basari); }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.alert {
    padding: 13px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: .9375rem;
}
.alert--success {
    border-left-color: var(--basari);
    background: #f1f7f3;
}
.alert--error {
    border-left-color: var(--hata);
    background: #fbf1f1;
}
.alert--info {
    border-left-color: var(--accent);
    background: var(--yuzey);
}
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack {
    display: grid;
    gap: 16px;
}
.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.statcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.statcards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.steps {
    display: grid;
    gap: 16px;
}
.steps__item {
    display: flex;
    gap: 14px;
}
.steps__no {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .875rem;
}
.optlist {
    display: grid;
    gap: 10px;
}
.optgroup__title {
    font-weight: 600;
    color: var(--title);
    margin-bottom: 8px;
}
.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}
.pcard__media {
    position: relative;
    display: block;
    background: var(--yuzey);
}
.pcard__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.pcard__flags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    gap: 6px;
    justify-items: start;
}
.pcard__fav {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
}
.pcard__body {
    display: grid;
    gap: 6px;
    padding: 16px 18px 10px;
    flex: 1 1 auto;
}
.pcard__brand {
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--muted);
}
.pcard__name {
    font-family: var(--baslik-yazi);
    font-size: 1rem;
    font-weight: 500;
    color: var(--title);
}
.pcard__rating {
    font-size: .8125rem;
    color: var(--muted);
}
.pcard__stars {
    color: #c8963f;
}
.pcard__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.pcard__price strong {
    font-family: var(--baslik-yazi);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pcard__price del {
    font-size: .875rem;
    color: var(--muted);
}
.pcard__foot {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}
.pcard__stock {
    margin: 0;
    font-size: .8125rem;
}
.listlayout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.filters {
    position: sticky;
    top: 138px;
    display: grid;
    gap: 20px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}
.filters__title {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--title);
    margin-bottom: 8px;
}
.filters__list {
    display: grid;
    gap: 7px;
    font-size: .9375rem;
}
.listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.breadcrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 20px 8px;
    font-size: .8125rem;
    color: var(--muted);
}
.empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--muted);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-block: 40px;
}
.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius);
    font-size: .875rem;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}
.pagination a:hover {
    border-color: var(--title);
    text-decoration: none;
}
.pagination .is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}
.pagination .is-disabled {
    color: var(--muted);
    opacity: .6;
}
.cartlayout,
.acclayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}
.acclayout {
    grid-template-columns: 240px minmax(0, 1fr);
}
.accnav {
    display: grid;
    gap: 4px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}
.accnav a {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--text);
}
.accnav a:hover,
.accnav a[aria-current='page'] {
    background: var(--yuzey);
    color: var(--title);
    text-decoration: none;
}
.cartlist {
    display: grid;
    gap: 14px;
}
.cartitem {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
}
.cartitem__img img {
    width: 92px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
}
.cartitem__name {
    font-family: var(--baslik-yazi);
    font-weight: 500;
    color: var(--title);
}
.cartitem__meta {
    font-size: .8125rem;
    color: var(--muted);
}
.cartitem__right {
    text-align: right;
}
.cartitem__total {
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}
.summary__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--baslik-yazi);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--title);
}
.summary__note {
    font-size: .8125rem;
    color: var(--muted);
}
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
    padding-block: 24px 56px;
}
.addr-grid,
.contact-grid,
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}
.qty,
.qtyrow {
    display: flex;
    align-items: center;
    gap: 6px;
}
.qty input {
    width: 62px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .15);
}
.stars {
    color: #c8963f;
}
.check {
    color: var(--basari);
}
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.datatable,
.kargo-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.datatable th,
.kargo-tablo th {
    font-family: var(--baslik-yazi);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--title);
    background: var(--yuzey);
}
.responsive {
    max-width: 100%;
}
.tabs__nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.tabs__btn {
    padding: 11px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    color: var(--muted);
}
.tabs__btn[aria-selected='true'] {
    color: var(--title);
    border-bottom-color: var(--accent);
}
.tabs__panel[hidden] {
    display: none;
}
.prose {
    max-width: 72ch;
}
.prose h2,
.prose h3 {
    margin-top: 1.6em;
}
.prose p,
.prose li {
    color: var(--text);
}
.prose ul,
.prose ol {
    margin: 0 0 1em 1.2em;
}
.prose ul li {
    list-style: disc;
}
.prose ol li {
    list-style: decimal;
}
.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prose img {
    border-radius: var(--card-radius);
}
.prose blockquote {
    margin: 1.2em 0;
    padding-left: 18px;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}
.krs-ekle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--btn-radius);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--title);
}
.krs-ekle__btn[aria-pressed='true'] {
    background: var(--yuzey);
    border-color: var(--title);
}
.krs-tablo-kap {
    overflow-x: auto;
}
.bayi-panel {
    padding: 18px;
    background: var(--yuzey);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    margin-block: 16px;
}
.tema-onizleme {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 16px;
    background: var(--accent);
    color: #fff;
    font-size: .875rem;
}
.tema-onizleme__ayrinti {
    opacity: .9;
}
.tema-onizleme__eylemler {
    display: flex;
    gap: 8px;
}
.tema-onizleme__btn {
    padding: 5px 12px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--btn-radius);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}
.tema-onizleme__btn--birincil {
    background: #fff;
    color: var(--accent);
}
@media (max-width: 1024px) {
.listlayout,
    .cartlayout,
    .checkout,
    .acclayout {
        grid-template-columns: 1fr;
    }
.filters {
        position: static;
    }
}
@media (max-width: 760px) {
.cartitem {
        grid-template-columns: 72px minmax(0, 1fr);
    }
.cartitem__right {
        grid-column: 1 / -1;
        text-align: left;
    }
}
@media print {
body {
        background: #fff;
    }
}

/* ===========================================================================
   1) DÜZEN — genişlik kabı ve bölüm ritmi
   =========================================================================== */

/* Tek kap sınıfı: çekirdeğin `.container` sınıfı da aynı ölçüyü almalı,
   yoksa tema ezmeyen sayfalar (sepet, hesap, blog) daha dar açılır. */
.mnk-en,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(20px, env(safe-area-inset-left, 0px));
}

.mnk-en--dar {
    max-width: 880px;
}

.mnk-bolum {
    padding-block: clamp(40px, 6vw, 76px);
}

.mnk-bolum--yuzey {
    background: var(--yuzey);
}

.mnk-bolum--ic {
    padding-block: clamp(28px, 4vw, 48px);
}

.mnk-bolum__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.mnk-bolum__baslik {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
    letter-spacing: -.02em;
}

.mnk-bolum__not {
    margin: 0;
    color: var(--muted);
    font-size: .9375rem;
}

.mnk-bolum__bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--dokunma);
    font-weight: 700;
    color: var(--primary);
}

.mnk-bolum__bag:hover {
    text-decoration: underline;
}

/* ===========================================================================
   2) DÜĞMELER — hap biçimli
   ===========================================================================
   `.mnk-btn` temanın kendi düğmesi, `.btn` çekirdek görünümlerinki. İkisi de
   AYNI biçimi alır; ziyaretçi sepette başka, ürün sayfasında başka bir düğme
   görmemeli.
   =========================================================================== */

.mnk-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--dokunma);
    padding: 11px 22px;
    border: 2px solid var(--primary);
    border-radius: var(--btn-radius);
    background: var(--primary);
    color: #fff;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}

.mnk-btn:hover,
.btn:hover {
    background: #4c33a2;
    border-color: #4c33a2;
    color: #fff;
    text-decoration: none;
}

.mnk-btn--bos,
.btn--outline,
.btn--ghost {
    background: transparent;
    color: var(--primary);
}

.mnk-btn--bos:hover,
.btn--outline:hover,
.btn--ghost:hover {
    background: var(--yuzey);
    color: var(--primary);
    border-color: var(--primary);
}

/* Aksan düğmesi: yalnız "sepete ekle" gibi TEK bir birincil eylemde. */
.btn--gold,
.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn--gold:hover,
.btn--primary:hover {
    background: #a82b57;
    border-color: #a82b57;
}

.mnk-btn--sm,
.btn--sm {
    min-height: 38px;
    padding: 7px 16px;
    font-size: .875rem;
}

.mnk-btn--lg,
.btn--lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 1.0625rem;
}

.mnk-btn--genis,
.mnk-btn--tam,
.btn--block {
    width: 100%;
}

/* Metin düğmesi: çerçevesiz, altı çizili bağlantı gibi ama dokunma hedefi tam. */
.mnk-btn--metin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--dokunma);
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.mnk-btn--metin:hover {
    color: var(--accent);
}

.mnk-btn[disabled],
.btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* ===========================================================================
   3) BAŞLIK — mor duyuru şeridi + hap menü
   =========================================================================== */

.mnk-duyuru {
    background: var(--primary);
    color: #fff;
    font-size: .8125rem;
}

.mnk-duyuru__sira {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    min-height: 38px;
    padding-block: 6px;
}

.mnk-duyuru__mesaj {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mnk-duyuru__baglar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.mnk-duyuru__baglar a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: rgba(255, 255, 255, .92);
}

.mnk-duyuru__baglar a:hover {
    color: #fff;
}

.mnk-tepe {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.mnk-tepe__sira {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 74px;
}

.mnk-marka {
    display: grid;
    gap: 2px;
    flex: 0 0 auto;
}

.mnk-marka__ad {
    font-family: var(--baslik-yazi);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--primary);
}

.mnk-marka__alt {
    font-size: .75rem;
    color: var(--muted);
}

.mnk-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.mnk-menu__sira {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Hap: menünün ve kategori bağlantılarının ortak biçimi. */
.mnk-hap {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    border-radius: 999px;
    background: transparent;
    color: var(--title);
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 500;
    transition: background var(--gecis), color var(--gecis);
}

.mnk-hap:hover,
.mnk-hap:focus-visible {
    background: var(--yuzey);
    color: var(--primary);
    text-decoration: none;
}

.mnk-hap[aria-current='page'] {
    background: var(--yuzey-koyu);
    color: var(--primary);
    font-weight: 700;
}

.mnk-hap--vurgu {
    background: var(--accent);
    color: #fff;
}

.mnk-hap--vurgu:hover,
.mnk-hap--vurgu:focus-visible {
    background: #a82b57;
    color: #fff;
}

.mnk-hap--sm {
    min-height: 34px;
    padding: 4px 13px;
    font-size: .875rem;
    background: var(--yuzey);
}

.mnk-araclar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
}

.mnk-ikon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dokunma);
    height: var(--dokunma);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--title);
    cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}

.mnk-ikon-btn:hover {
    background: var(--yuzey);
    color: var(--primary);
}

.mnk-sepet {
    position: relative;
}

.mnk-sayac {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

/* Hamburger yalnız dar ekranda; masaüstünde menü zaten görünür. */
.mnk-cizgi {
    display: none;
}

/* ---- Mobil çekmece (shop.js `.is-open` sınıfını takar) ---- */
.mnk-cekmece {
    display: none;
    padding-bottom: 18px;
}

.mnk-cekmece.is-open {
    display: grid;
    gap: 2px;
}

.mnk-cekmece a,
.mnk-cekmece summary {
    display: flex;
    align-items: center;
    min-height: var(--dokunma);
    padding: 4px 2px;
    border-bottom: 1px solid var(--border);
    color: var(--title);
    font-weight: 600;
}

.mnk-cekmece details a {
    padding-left: 16px;
    font-weight: 400;
    color: var(--text);
}

.mnk-cekmece summary {
    cursor: pointer;
}

.mnk-cekmece__arama {
    display: flex;
    gap: 8px;
    padding-block: 12px;
}

.mnk-cekmece__arama input {
    flex: 1 1 auto;
    min-height: var(--dokunma);
    padding: 9px 14px;
    border: 2px solid var(--control-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--title);
    font: inherit;
}

/* ===========================================================================
   4) ANA SAYFA
   =========================================================================== */

/* ---- Kahraman: solda metin, sağda üç fotoğraflı yelpaze ---- */
.mnk-kahraman {
    padding-block: clamp(32px, 5vw, 68px);
    background: linear-gradient(180deg, var(--yuzey) 0%, var(--page-bg) 100%);
}

.mnk-kahraman__ic {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.mnk-kahraman__baslik {
    margin: 12px 0 14px;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}

/* Başlık içindeki vurgulu sözcük: aksan rengi + altı dalgalı değil düz şerit
   (dalgalı alt çizgi 32px'in üzerinde puntoda bulanık görünüyor). */
.mnk-kahraman__baslik span {
    color: var(--accent);
}

.mnk-kahraman__giris {
    max-width: 52ch;
    margin: 0 0 22px;
    font-size: 1.0625rem;
}

.mnk-kahraman__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.mnk-rozet {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: .8125rem;
    font-weight: 700;
}

.mnk-guven {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mnk-guven li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
}

.mnk-guven svg {
    flex: 0 0 auto;
    color: var(--primary);
}

/* ---- Yelpaze: üç kare üst üste, hafif dönük ---- */
.mnk-yelpaze {
    position: relative;
    aspect-ratio: 1 / 1;
}

.mnk-yelpaze__kare {
    position: absolute;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: var(--card-radius);
    border: 6px solid var(--card-bg);
    box-shadow: var(--golge-kart);
    object-fit: cover;
}

.mnk-yelpaze__kare--arka {
    top: 2%;
    left: 0;
    transform: rotate(-7deg);
}

.mnk-yelpaze__kare--yan {
    right: 0;
    top: 12%;
    transform: rotate(6deg);
}

.mnk-yelpaze__kare--on {
    bottom: 0;
    left: 18%;
    width: 66%;
    z-index: 2;
    transform: rotate(-2deg);
}

/* ---- "Oyun" bloğu: fotoğraf + metin ---- */
.mnk-oyun {
    padding-block: clamp(36px, 5vw, 64px);
}

.mnk-oyun__ic {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
}

.mnk-oyun__gorsel {
    margin: 0;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.mnk-oyun__gorsel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mnk-oyun__metin h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}

/* ---- Kategori dizini: beş renkli sütun ---- */
.mnk-dizin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 18px;
}

.mnk-dizin__sutun {
    padding: 20px;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: 1px solid var(--border);
}

/* Beş sütun beş ayrı renkli üst çizgi alır: çocuk giyimi vitrininde kategori
   ayrımı renkten okunur, başlıktan değil. */
.mnk-dizin__sutun--1 { border-top: 4px solid var(--balon-1); }
.mnk-dizin__sutun--2 { border-top: 4px solid var(--balon-2); }
.mnk-dizin__sutun--3 { border-top: 4px solid var(--balon-3); }
.mnk-dizin__sutun--4 { border-top: 4px solid var(--balon-4); }
.mnk-dizin__sutun--5 { border-top: 4px solid var(--balon-5); }

.mnk-dizin__bas {
    margin: 0 0 12px;
    font-size: 1.0625rem;
}

.mnk-dizin__bas a:hover {
    color: var(--primary);
}

.mnk-dizin__haplar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Ürün ızgarası ---- */
.mnk-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mnk-izgara--liste {
    grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
}

/* ---- SSS ---- */
.mnk-sss {
    display: grid;
    gap: 10px;
}

.mnk-sss__oge {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    overflow: hidden;
}

.mnk-sss__bas {
    display: flex;
    align-items: center;
    min-height: var(--dokunma);
    padding: 12px 18px;
    font-family: var(--baslik-yazi);
    font-weight: 600;
    color: var(--title);
    cursor: pointer;
}

.mnk-sss__govde {
    padding: 0 18px 16px;
    color: var(--text);
}

.mnk-reklam-alan {
    padding-block: 8px;
}

/* ===========================================================================
   5) ÜRÜN KARTI
   =========================================================================== */

.mnk-urun {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.mnk-urun:hover {
    border-color: var(--primary);
    box-shadow: var(--golge-kart);
}

.mnk-urun__gorsel {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--yuzey);
}

.mnk-urun__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Görseli olmayan üründe adın ilk harfi: boş gri kutu yerine okunur bir işaret. */
.mnk-urun__harf {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--baslik-yazi);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    opacity: .35;
}

.mnk-urun__fav {
    position: absolute;
    top: 10px;
    right: 10px;
}

.mnk-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--muted);
    cursor: pointer;
}

.mnk-fav-btn.is-secili {
    color: var(--accent);
}

.mnk-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 10px;
}

.mnk-urun__isaret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 22px;
}

.mnk-etiket {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}

.mnk-etiket--indirim {
    background: var(--accent);
    color: #fff;
}

.mnk-etiket--yeni {
    background: var(--primary);
    color: #fff;
}

.mnk-etiket--bitti {
    background: var(--yuzey-koyu);
    color: var(--muted);
}

.mnk-etiket--onay {
    background: #e6f3ec;
    color: var(--basari);
}

.mnk-urun__marka {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mnk-urun__ad {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.mnk-urun__ad a:hover {
    color: var(--primary);
}

.mnk-urun__puan {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-yildiz {
    color: #e0a428;
    letter-spacing: .06em;
}

.mnk-urun__fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-family: var(--baslik-yazi);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--title);
}

.mnk-urun__fiyat s,
.mnk-fiyat s {
    font-size: .875rem;
    font-weight: 400;
    color: var(--muted);
}

.mnk-urun__birim,
.birim-fiyat {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.birim-fiyat--lg {
    font-size: .9375rem;
}

/* ---- Varyant renkleri: temanın imzası ---- */
.mnk-renk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-renk__noktalar {
    display: inline-flex;
    gap: 4px;
}

.mnk-nokta {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /* Beyaz/açık renk varyantı beyaz zeminde kaybolmasın diye çerçeve SABİT. */
    border: 1px solid rgba(43, 35, 64, .22);
}

.mnk-nokta--fazla {
    display: inline-grid;
    place-items: center;
    width: auto;
    min-width: 15px;
    padding: 0 5px;
    border: 0;
    background: var(--yuzey-koyu);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--text);
}

.mnk-renk__adlar {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnk-urun__stok {
    margin: 0;
    font-size: .8125rem;
}

.mnk-urun__dip {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding: 0 16px 16px;
}

/* ===========================================================================
   6) LİSTE / KATEGORİ SAYFASI
   =========================================================================== */

.mnk-liste {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 28px;
    padding-block: 28px;
}

.mnk-iz {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-iz a:hover {
    color: var(--primary);
}

.mnk-iz__ayrac {
    opacity: .6;
}

.mnk-liste__bas {
    grid-column: 1 / -1;
}

.mnk-liste__bas h1 {
    margin-bottom: 6px;
}

/* ---- Süzgeç: kutular HİÇ kapanmaz (temanın kararı) ---- */
.mnk-suzgec {
    position: sticky;
    top: 92px;
    align-self: start;
}

.mnk-kutular {
    display: grid;
    gap: 14px;
}

.mnk-kutu {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

/* Her süzgeç kutusu ayrı renkte bir başlık çizgisi taşır — kutular kapanmadığı
   için ayrım rengin kendisinden gelmeli. */
.mnk-kutu--ara { border-left: 4px solid var(--balon-1); }
.mnk-kutu--kategori { border-left: 4px solid var(--balon-2); }
.mnk-kutu--marka { border-left: 4px solid var(--balon-3); }
.mnk-kutu--fiyat { border-left: 4px solid var(--balon-4); }
.mnk-kutu--durum { border-left: 4px solid var(--balon-5); }
.mnk-kutu--sirala { border-left: 4px solid var(--muted); }

.mnk-kutu__bas {
    margin: 0 0 10px;
    font-family: var(--baslik-yazi);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--title);
}

.mnk-kutu__liste {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mnk-kutu__liste a {
    display: flex;
    align-items: center;
    min-height: 34px;
    font-size: .9375rem;
}

.mnk-kutu__liste a:hover {
    color: var(--primary);
}

.mnk-kutu__kok {
    font-weight: 700;
}

.mnk-kutu__onaylar {
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.mnk-onay {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    font-size: .9375rem;
    cursor: pointer;
}

.mnk-onay input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.mnk-alan,
.field {
    display: grid;
    gap: 5px;
}

.mnk-alan label,
.field label {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--title);
}

.mnk-alan input,
.mnk-alan select,
.mnk-alan textarea,
.field input,
.field select,
.field textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='number'],
select,
textarea {
    width: 100%;
    min-height: var(--dokunma);
    padding: 9px 13px;
    border: 2px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--title);
    font: inherit;
    font-size: 1rem;
}

.mnk-alan input:focus-visible,
.field input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
}

.mnk-ikili,
.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mnk-suzgec__dip {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.mnk-suzgec__sayi {
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-suzgec__etkin {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mnk-suzgec__eylem {
    display: flex;
    gap: 8px;
}

.mnk-bos {
    padding: 40px 20px;
    border: 2px dashed var(--border);
    border-radius: var(--card-radius);
    text-align: center;
    color: var(--muted);
}

/* ===========================================================================
   7) ÜRÜN SAYFASI
   =========================================================================== */

.mnk-detay {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(20px, 3vw, 40px);
    padding-block: 24px;
}

/* Galeri: bütün fotoğraflar AYNI ANDA, iki kolonda (temanın kararı; kaydırıcı
   yok, JavaScript gerekmez). */
.mnk-galeri {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mnk-galeri__kare {
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--yuzey);
}

.mnk-galeri__kare img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* İlk fotoğraf iki kolonu birden kaplar: ürünün ana görseli büyük görünür. */
.mnk-galeri__kare--ilk {
    grid-column: 1 / -1;
}

.mnk-galeri__kare--ilk img {
    aspect-ratio: 4 / 3;
}

.mnk-galeri__kare--bos {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--muted);
}

.mnk-satin {
    align-self: start;
    position: sticky;
    top: 96px;
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.mnk-satin__marka {
    margin: 0;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mnk-satin__ad {
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.mnk-satin__kod {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-satin__ozet {
    margin: 0;
    color: var(--text);
}

.mnk-satin__yan-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mnk-fiyat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.mnk-fiyat__tutar {
    font-family: var(--baslik-yazi);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--title);
}

.mnk-fiyat__kdv {
    width: 100%;
    font-size: .8125rem;
    color: var(--muted);
}

/* ---- Varyant seçimi ---- */
.mnk-secim {
    display: grid;
    gap: 8px;
}

.mnk-secim__ad {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--title);
}

.mnk-secim__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mnk-secim__oge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dokunma);
    min-height: var(--dokunma);
    padding: 6px 14px;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    font-weight: 600;
    cursor: pointer;
}

.mnk-secim__oge:hover {
    border-color: var(--primary);
}

.mnk-secim__oge.is-secili,
.mnk-secim__oge[aria-pressed='true'] {
    border-color: var(--primary);
    background: var(--yuzey);
    color: var(--primary);
}

.mnk-secim__boya {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(43, 35, 64, .22);
}

.mnk-stok {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.mnk-adet-sira {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mnk-adet,
.qty {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--control-border);
    border-radius: 999px;
    overflow: hidden;
}

.mnk-adet button,
.qty button {
    width: var(--dokunma);
    height: var(--dokunma);
    border: 0;
    background: none;
    color: var(--title);
    font-size: 1.125rem;
    cursor: pointer;
}

.mnk-adet input,
.qty input {
    width: 54px;
    min-height: var(--dokunma);
    border: 0;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
}

.mnk-not,
.qty-not,
.hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-teslimat {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--yuzey);
    font-size: .875rem;
}

.mnk-yazi-blok {
    padding-block: 20px;
}

.mnk-ikili-blok {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
    padding-block: 20px;
}

.mnk-kunye {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.mnk-kunye__liste {
    display: grid;
    gap: 6px;
    margin: 0;
}

.mnk-kunye__liste div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    border-bottom: 1px dashed var(--border);
    font-size: .9375rem;
}

.mnk-madde {
    display: grid;
    gap: 6px;
}

/* ---- Yorumlar ---- */
.mnk-yorumlar {
    display: grid;
    gap: 14px;
}

.mnk-yorum {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.mnk-yorum__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.mnk-yorum__kisi {
    font-weight: 700;
    color: var(--title);
}

.mnk-yorum__tarih {
    font-size: .8125rem;
    color: var(--muted);
}

.mnk-yorum-form {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--yuzey);
}

/* ===========================================================================
   8) ALT BİLGİ — çekirdek parçadır (bu temanın kendi footer'ı yok)
   =========================================================================== */

.ftr {
    padding-top: 48px;
    border-top: 1px solid var(--border);
    background: var(--yuzey);
}

.ftr__main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 28px;
    padding-bottom: 32px;
}

.ftr h4 {
    margin-bottom: 12px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--title);
}

.ftr__links {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ftr__links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    font-size: .9375rem;
    color: var(--text);
}

.ftr__links a:hover {
    color: var(--primary);
}

.ftr__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ftr__badges li {
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    font-size: .75rem;
    color: var(--muted);
}

.ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 18px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--muted);
}

/* ===========================================================================
   9) DAR EKRAN
   ===========================================================================
   Tek kırılım noktası 960px, ikincisi 640px: temanın yerleşimi iki sütundan
   tek sütuna iniyor, arada üçüncü bir düzen yok.
   =========================================================================== */

@media (max-width: 1024px) {
    .mnk-menu {
        display: none;
    }

    .mnk-cizgi {
        display: inline-flex;
    }

    .mnk-liste {
        grid-template-columns: minmax(0, 1fr);
    }

    .mnk-suzgec {
        position: static;
    }

    .mnk-kutular {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    }
}

@media (max-width: 960px) {
    .mnk-kahraman__ic,
    .mnk-oyun__ic,
    .mnk-detay {
        grid-template-columns: minmax(0, 1fr);
    }

    .mnk-satin {
        position: static;
    }

    /* Yelpaze mobilde tek fotoğrafa iner: üç dönük kare 390px'te üst üste
       biniyor ve hiçbiri okunmuyordu. */
    .mnk-yelpaze {
        aspect-ratio: 4 / 3;
    }

    .mnk-yelpaze__kare--arka,
    .mnk-yelpaze__kare--yan {
        display: none;
    }

    .mnk-yelpaze__kare--on {
        position: static;
        width: 100%;
        transform: none;
    }
}

@media (max-width: 640px) {
    .mnk-tepe__sira {
        min-height: 62px;
        gap: 10px;
    }

    .mnk-galeri {
        grid-template-columns: minmax(0, 1fr);
    }

    .mnk-izgara,
    .mnk-izgara--liste {
        grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
        gap: 12px;
    }

    .mnk-duyuru__baglar {
        display: none;
    }
}