/* =============================================================================
   Sofiart — main.css
   Mobile-first. Tüm container'lar 360px viewport'ta düzgün çalışır;
   tablet (720px) ve desktop (1100px) için kademeli genişler.

   Renk paleti:
     --night        #111827   Ana yazı rengi (ink)
     --accent       #1E3A5F   Vurgu / brand (midnight navy)
     --accent-soft  #3A5478   Midnight açık ton
     --accent-dark  #14283E   Midnight koyu ton
     --pink/orange/gold: dekoratif / SVG ikonlarda
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------ */
:root {
    /* Brand
       --night    #111827   Ana yazı rengi (ink)
       --accent   #1E3A5F   Vurgu / brand accent (midnight navy)
       --pink/orange/gold  : SVG ikon / dekoratif amaçlı, ana paleti etkilemez */
    --night:        #111827;
    --purple:       #1E3A5F;
    --accent:       #1E3A5F;
    --accent-soft:  #3A5478;
    --accent-dark:  #14283E;
    --orange:       #F97316;
    --gold:         #D4AF37;

    /* Neutrals */
    --gray-900:     #1F2937;
    --gray-700:     #374151;
    --gray-500:     #6B7280;
    --gray-300:     #D1D5DB;
    --gray-200:     #E5E7EB;
    --gray-100:     #F3F4F6;
    --gray-50:      #F9FAFB;
    --white:        #FFFFFF;

    /* Semantic */
    --bg:           #FFFFFF;
    --bg-soft:      #F9FAFB;
    --bg-mist:      #F3F4F6;
    --ink:          var(--night);
    --ink-2:        var(--gray-700);
    --ink-3:        var(--gray-500);
    --line:         var(--gray-200);
    --line-soft:    var(--gray-100);

    /* Gradients — monochromatic midnight navy paleti */
    --grad-brand:   linear-gradient(90deg, #1E3A5F, #3A5478);
    --grad-cta:     linear-gradient(90deg, #1E3A5F, #14283E);
    --grad-header:  linear-gradient(135deg, #111827, #1E3A5F);
    --grad-full:    linear-gradient(90deg, #14283E, #1E3A5F, #3A5478, #5A7BA6);

    /* Type */
    --serif:        'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --sans:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Layout */
    --container:    1240px;
    --gutter:       20px;     /* mobil */
    --section-py:   72px;
    --radius:       6px;
    --radius-lg:    14px;

    /* Touch */
    --touch:        44px;

    /* Motion */
    --ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:       180ms;
    --t-med:        320ms;
    --t-slow:       560ms;

    /* Header offset — JS güncelleyebilir, ama CSS'te bir başlangıç değeri */
    --nav-h:        56px;

    /* Mobil-güvenli viewport: dvh varsa onu, yoksa vh */
    --vh-100:       100vh;
}
@supports (height: 100dvh) {
    :root { --vh-100: 100dvh; }
}

@media (min-width: 720px) {
    :root {
        --gutter:     32px;
        --section-py: 96px;
        --nav-h:      72px;
    }
}
@media (min-width: 1100px) {
    :root {
        --gutter:     56px;
        --section-py: 120px;
    }
}

/* ---------------------------------------------------------------------------
   Reset (modern, minimal)
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }
html, body { height: auto; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* marquee gibi öğelerin sızdırmasına karşı emniyet */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.15; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--purple); color: var(--white); }

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%);
    clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link {
    position: absolute; top: -40px; left: 8px; z-index: 1000;
    background: var(--night); color: var(--white);
    padding: 10px 16px; border-radius: var(--radius);
    transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    padding-inline: var(--gutter);
    margin-inline: auto;
}
.section { padding-block: var(--section-py); }

.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--purple);
}
@media (min-width: 720px) { .eyebrow { font-size: 12px; } }

/* Tipografi yardımcıları */
.h-display {
    font-family: var(--serif);
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1.05;
    /* Mobil tabanı küçük tut, 8vw'yle değil min(8vw, ..) ile büyüt */
    font-size: clamp(40px, 7vw, 84px);
}
.h-section {
    font-family: var(--serif);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: clamp(32px, 5.5vw, 56px);
}
.h-section em { font-style: italic; color: var(--purple); }

.lede {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 56ch;
}
@media (min-width: 720px) { .lede { font-size: 17px; } }

/* ---------------------------------------------------------------------------
   Buttons — touch hedefi 44px
   ------------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch);
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--night); color: var(--white); }
.btn--primary:hover { background: var(--purple); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--gradient,
a.btn--gradient,
button.btn--gradient {
    background-image: var(--grad-cta);
    color: var(--white) !important;
}
.btn--gradient svg { color: var(--white); fill: currentColor; }
.btn--gradient:hover { filter: brightness(1.15); color: var(--white); }

/* ---------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}
.nav.is-scrolled {
    border-bottom-color: var(--line);
    background: rgba(255, 255, 255, 0.94);
}
body.has-drawer-open .nav {
    background: var(--white);
    border-bottom-color: var(--line);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--nav-h);
    height: var(--nav-h);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
    min-height: var(--touch);
}
@media (min-width: 720px) {
    .nav__brand { font-size: 22px; gap: 10px; }
}
.nav__brand-mark {
    width: 50px; height: 50px;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
}
.nav__brand-mark--fallback {
    border-radius: 50%;
    background: var(--grad-brand);
}
@media (min-width: 720px) {
    .nav__brand-mark { width: 60px; height: 60px; }
}

/* Desktop menu */
.nav__menu {
    display: none;
}
@media (min-width: 1024px) {
    .nav__menu {
        display: flex;
        align-items: center;
        gap: 28px;
    }
}
.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--t-med) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.nav__cta { display: none; } /* Eski standalone CTA — artık kullanılmıyor, geri uyumluluk için */

/* Sağ üst icon grubu — hesabım + sepet */
.nav__actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Icon linkler (hesabım, sepet) — hem mobil hem masaüstünde görünür */
.nav__icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    color: var(--ink);
    border-radius: var(--radius);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.nav__icon-link:hover { color: var(--accent); background: var(--bg-soft); }
.nav__icon-link svg { display: block; }

/* Geriye uyum için .nav__cart hâlâ geçerli */
.nav__cart-icon { display: block; }
.nav__cart-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg);
    transition: transform var(--t-fast) var(--ease);
}
.nav__cart-count.is-empty { display: none; }

/* Mobile burger */
.nav__burger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    margin-right: -8px; /* hizalama */
    border-radius: var(--radius);
    color: var(--ink);
}
@media (min-width: 1024px) { .nav__burger { display: none; } }
.nav__burger svg { width: 22px; height: 22px; }
.nav__burger-close { display: none; }
.nav__burger[aria-expanded="true"] .nav__burger-icon { display: none; }
.nav__burger[aria-expanded="true"] .nav__burger-close { display: block; }

/* Mobile drawer — top:0'dan başlar, padding-top ile nav-h boşluğu açar.
   Nav (z:50) drawer'ın (z:40) üst kısmını örter — drawer kendisi en üstten
   açılır gibi görünür ama nav'la üst üste binmez. */
.nav__drawer {
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    max-height: 100dvh;
    background: var(--white);
    z-index: 40;
    padding: calc(var(--nav-h, 56px) + 20px) var(--gutter) 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 16px 32px -16px rgba(15, 17, 21, 0.18);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                visibility 0s linear var(--t-med);
}
@media (min-width: 720px) {
    .nav__drawer {
        padding-top: calc(var(--nav-h, 72px) + 20px);
    }
}
.nav__drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}
.nav__drawer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__drawer-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.nav__drawer-link[aria-current="page"] { color: var(--purple); }
.nav__drawer-cta { margin-top: 20px; width: 100%; }
@media (min-width: 1024px) { .nav__drawer { display: none !important; } }
/* Body scroll lock — drawer içi scroll engellenmesin diye touch-action verilmiyor. */
body.has-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */
.hero {
    position: relative;
    padding-block: 56px 72px;
    overflow: hidden;
}
@media (min-width: 720px) { .hero { padding-block: 72px 96px; } }
@media (min-width: 1100px) { .hero { padding-block: 96px 120px; } }

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 56px;
    }
}

.hero__eyebrow { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.hero__eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 0 rgba(30, 58, 95, .55);
    animation: sofi-pulse 2s ease-out infinite;
}
.hero__title {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Mobil tabanı 44px; clamp ile büyüt — tipografi mobilde okunaklı */
    font-size: clamp(44px, 9vw, 108px);
}
.hero__title em {
    font-style: italic;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__sub {
    margin-top: 20px;
    font-size: 16px;
    color: var(--ink-2);
    max-width: 52ch;
}
@media (min-width: 720px) {
    .hero__sub { font-size: 18px; margin-top: 24px; }
}

.hero__cta-row {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__meta {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
    .hero__meta { grid-template-columns: repeat(3, minmax(0, max-content)); gap: 32px; }
}
.hero__meta-item .k {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.hero__meta-item .v {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.hero__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 80% at 30% 20%, rgba(30, 58, 95, 0.18), transparent 60%),
        radial-gradient(100% 80% at 80% 80%, rgba(249, 115, 22, 0.18), transparent 60%),
        linear-gradient(180deg, var(--gray-50), var(--gray-100));
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 1024px) {
    .hero__visual {
        aspect-ratio: 4 / 5;
        max-height: 80vh;
    }
}
.hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__caption {
    position: absolute;
    left: 16px; bottom: 16px;
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
}

@keyframes sofi-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 58, 95, .5); }
    70%  { box-shadow: 0 0 0 14px rgba(30, 58, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0); }
}

/* ---------------------------------------------------------------------------
   Marquee — overflow-x kontrol altında, full-bleed güvenli
   ------------------------------------------------------------------------ */
.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding-block: 14px;
    background: var(--bg-soft);
}
.marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: sofi-marquee 40s linear infinite;
    will-change: transform;
}
.marquee__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
    white-space: nowrap;
}
.marquee__item {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-2);
    letter-spacing: 0.01em;
    flex: 0 0 auto;
}
.marquee__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--purple);
    flex: 0 0 auto;
}
@keyframes sofi-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (min-width: 720px) { .marquee__item { font-size: 20px; } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   Section heading
   ------------------------------------------------------------------------ */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
}
@media (min-width: 720px) {
    .section-head {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 56px;
    }
}
.section-head__meta {
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Product grid + cards
   ------------------------------------------------------------------------ */
.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 20px;
}
@media (min-width: 560px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
}

.product-card {
    display: block;
    color: inherit;
    transition: transform var(--t-med) var(--ease);
}
.product-card:hover { transform: translateY(-4px); }
.product-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-mist);
    isolation: isolate;
}
.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.product-card:hover .product-card__img { transform: scale(1.04); }

.product-card__tag {
    position: absolute;
    top: 12px; left: 12px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
}
.product-card__index {
    position: absolute;
    top: 12px; right: 12px;
    font-family: var(--serif);
    font-size: 14px;
    font-style: italic;
    color: var(--ink-3);
    background: rgba(255,255,255,0.92);
    padding: 4px 10px;
    border-radius: 999px;
}

.product-card__info {
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.product-card__series {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.product-card__name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
}
.product-card__price {
    margin-top: 4px;
    font-size: 14px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Studio split — 2 kolon editorial
   ------------------------------------------------------------------------ */
.studio-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-block: 1px solid var(--line);
    background: var(--bg-soft);
}
@media (min-width: 1024px) {
    .studio-split { grid-template-columns: 1fr 1fr; }
}
.studio-split__pane {
    padding: 56px var(--gutter);
}
@media (min-width: 720px)  { .studio-split__pane { padding: 72px var(--gutter); } }
@media (min-width: 1024px) {
    .studio-split__pane { padding: 96px 56px; }
    .studio-split__pane--text { border-right: 1px solid var(--line); }
}
.studio-split__pane--art {
    position: relative;
    background: var(--grad-header);
    color: var(--white);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
@media (min-width: 1024px) { .studio-split__pane--art { min-height: 480px; } }
.studio-split__art-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    padding: 24px;
    box-sizing: border-box;
}
.studio-split__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--grad-header); /* yüklenmeden poster yokken zarif zemin */
}
@media (min-width: 1024px) {
    .studio-split__art-svg { max-width: 420px; padding: 32px; }
}
.studio-split__title { margin-top: 14px; }
.studio-split__body { margin-top: 18px; max-width: 52ch; color: var(--ink-2); }
.studio-split__cta { margin-top: 28px; }

/* ---------------------------------------------------------------------------
   Series grid
   ------------------------------------------------------------------------ */
.series-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 720px) {
    .series-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.series-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-mist);
    color: var(--white);
    display: block;
    isolation: isolate;
    transition: transform var(--t-med) var(--ease);
}
.series-card:hover { transform: translateY(-4px); }
.series-card__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.series-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,0.78) 100%);
    z-index: -1;
}
.series-card__num {
    position: absolute;
    top: 16px; left: 16px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 24px;
    color: rgba(255,255,255,0.8);
}
.series-card__body {
    position: absolute;
    left: 16px; right: 16px; bottom: 16px;
}
.series-card__name {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
}
.series-card__count {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}

/* ---------------------------------------------------------------------------
   Studio note (newsletter)
   ------------------------------------------------------------------------ */
.studio-note {
    background: var(--night);
    color: var(--white);
    padding-block: var(--section-py);
}
.studio-note__inner {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}
.studio-note__eyebrow { color: var(--gold); }
.studio-note__title {
    margin-top: 12px;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(32px, 5.5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.studio-note__title em {
    font-style: italic;
    color: var(--white);
}
.studio-note__body {
    margin-top: 16px;
    color: rgba(255,255,255,0.78);
    max-width: 56ch;
    margin-inline: auto;
}
.studio-note__form {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    padding: 10px;
    border-radius: var(--radius-lg);
}
@media (min-width: 560px) {
    .studio-note__form {
        flex-direction: row;
        align-items: stretch;
        border-radius: 999px;
        padding: 6px 6px 6px 18px;
    }
}
.studio-note__input {
    flex: 1;
    min-height: var(--touch);
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: var(--white);
    font-size: 15px;
}
@media (min-width: 560px) {
    .studio-note__input { border: 0; padding: 0 12px; }
}
.studio-note__input::placeholder { color: rgba(255,255,255,0.5); }
.studio-note__input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.studio-note__button { flex: 0 0 auto; }
.studio-note__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.studio-note__notice {
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 520px;
    text-align: center;
}
.studio-note__notice--ok {
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: rgba(212, 175, 55, 0.14);
    color: #FFFFFF;
}
.studio-note__notice--err {
    border: 1px solid rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.12);
    color: #FECACA;
}
.studio-note__notice--js:empty {
    display: none;
}
.studio-note__input[aria-invalid="true"] {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.footer {
    background: var(--night);
    color: var(--white);
    padding: 64px 0 28px;
}
@media (min-width: 720px) { .footer { padding: 96px 0 36px; } }
.footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 560px) {
    .footer__top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (min-width: 1024px) {
    .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; }
}
.footer__brand {
    display: flex; flex-direction: column; gap: 14px;
    color: var(--white);
}
.footer__brand-title {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 26px; font-weight: 500;
    color: var(--white);
}
.footer__brand-mark {
    width: 65px; height: 65px;
    flex: 0 0 auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}
.footer__brand-mark--fallback {
    border-radius: 50%;
    background: var(--grad-brand);
}
.footer__tag { color: var(--white); max-width: 36ch; opacity: 0.92; }

.footer__col-title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.85;
    margin-bottom: 14px;
}
.footer__links { display: flex; flex-direction: column; gap: 6px; }
.footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    color: var(--white);
    transition: opacity var(--t-fast) var(--ease);
    opacity: 0.88;
}
.footer__links a:hover { opacity: 1; }

.footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 13px;
    color: var(--white);
    opacity: 0.85;
}
@media (min-width: 560px) {
    .footer__bottom { flex-direction: row; align-items: center; }
}

/* ---------------------------------------------------------------------------
   Reveal — JS olmadan da içerik görünür kalır (no-js fallback)
   ------------------------------------------------------------------------ */
.reveal { opacity: 1; transform: none; }
html.has-js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-slow) var(--ease),
                transform var(--t-slow) var(--ease);
}
html.has-js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ===========================================================================
   FAZ 4 — WooCommerce / WhatsApp
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------------ */
.crumb {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}
.crumb a {
    color: var(--ink-2);
    transition: color var(--t-fast) var(--ease);
}
.crumb a:hover { color: var(--purple); }
.crumb__sep { color: var(--gray-300); }

/* ---------------------------------------------------------------------------
   Shop / archive
   ------------------------------------------------------------------------ */
.shop-head {
    padding-block: 0px 32px;
}
@media (min-width: 720px) {
    .shop-head { padding-block: 10px 40px; }
}
.shop-head__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}
.shop-head__title { margin: 0; }
.shop-head__desc { color: var(--ink-2); }

.shop-grid { padding-bottom: var(--section-py); }

.shop-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
}
@media (min-width: 560px) {
    .shop-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.shop-toolbar__sort .woocommerce-ordering { margin: 0; }
.shop-toolbar__sort select,
.shop-toolbar__sort .orderby {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--touch);
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
    background-size: 16px;
    font-size: 14px;
    color: var(--ink);
}
.shop-toolbar__sort select:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Shop pagination — V1 HAIRLINE SERIF
   Galeri etiketi gibi: ince çizgi, serif rakam.
   - Numaralar birleşik hairline kutu içinde
   - Aktif sayfa: night dolgu + midnight navy altçizgi
   - Prev/Next: ayrı kare butonlar, night border
   ------------------------------------------------------------------------ */
.shop-pagination {
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: center;
}

/* WC default reset */
.shop-pagination nav.woocommerce-pagination,
.shop-pagination .woocommerce-pagination {
    width: 100%;
    text-align: center;
    border: 0 !important;
    background: transparent !important;
}
.shop-pagination nav.woocommerce-pagination ul.page-numbers,
.shop-pagination ul.page-numbers,
.shop-pagination ul {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: var(--ff-display, "Cormorant Garamond", Georgia, serif);
    flex-direction: column;
}
.shop-pagination nav.woocommerce-pagination ul.page-numbers li,
.shop-pagination ul.page-numbers li,
.shop-pagination ul li {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none !important;
    background: transparent !important;
}

/* Tüm page-numbers — ortak hücre boyutu */
.shop-pagination .page-numbers {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--night, var(--ink));
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    position: relative;
    transition: background var(--t-fast, 200ms) var(--ease, ease),
                color var(--t-fast, 200ms) var(--ease, ease);
}

/* PREV / NEXT — ayrı kare buton, night hairline border */
.shop-pagination .page-numbers.prev,
.shop-pagination .page-numbers.next {
    border: 1px solid var(--night, var(--ink));
    color: var(--night, var(--ink));
    font-size: 18px;
    font-family: var(--ff-sans, inherit);
}
.shop-pagination a.page-numbers.prev:hover,
.shop-pagination a.page-numbers.next:hover {
    background: var(--night, var(--ink));
    color: var(--white);
}
/* Aralarındaki boşluk */
.shop-pagination li:has(> .prev) { margin-right: 14px; }
.shop-pagination li:has(> .next) { margin-left: 14px; }

/* NUMBER / DOTS — birleşik hairline kutu (li üzerinde border) */
.shop-pagination li:not(:has(> .prev)):not(:has(> .next)) {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
/* İlk numerik li sol kenarını da alır */
.shop-pagination ul > li:first-child:not(:has(> .prev)):not(:has(> .next)),
.shop-pagination ul > li:has(> .prev) + li {
    border-left: 1px solid var(--line);
}

/* Numerik link hover */
.shop-pagination a.page-numbers:not(.prev):not(.next):hover {
    color: var(--purple);
}

/* AKTİF SAYFA — night dolgu, midnight navy altçizgi (V1 imzası) */
.shop-pagination .page-numbers.current {
    background: var(--night, var(--ink));
    color: var(--white);
    font-weight: 500;
}
.shop-pagination .page-numbers.current::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 4px;
    height: 2px;
    background: var(--purple);
}

/* Dots */
.shop-pagination .page-numbers.dots {
    color: var(--ink-3, #94a3b8);
    font-size: 16px;
    letter-spacing: 0.08em;
    cursor: default;
    background: transparent;
}
.shop-pagination .page-numbers.dots::after { display: none; }

/* Focus */
.shop-pagination a.page-numbers:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* :has() desteklemeyen eski tarayıcılar için fallback */
@supports not selector(:has(*)) {
    .shop-pagination ul > li {
        border: 1px solid var(--line);
        border-right-width: 0;
    }
    .shop-pagination ul > li:last-child { border-right-width: 1px; }
}

/* Mobile */
@media (max-width: 559px) {
    .shop-pagination { margin-top: 48px; padding-top: 28px; }
    .shop-pagination .page-numbers {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .shop-pagination .page-numbers.prev,
    .shop-pagination .page-numbers.next { font-size: 16px; }
    .shop-pagination li:has(> .prev) { margin-right: 8px; }
    .shop-pagination li:has(> .next) { margin-left: 8px; }
}

.shop-empty {
    padding: 80px 0;
    text-align: center;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   Single product
   ------------------------------------------------------------------------ */
.single-product { padding-top: 28px; }
.single-product__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 24px;
}
@media (min-width: 1024px) {
    .single-product__main {
        grid-template-columns: 1.3fr 1fr;
        gap: 56px;
        align-items: start;
    }
}

/* Galeri */
.sp-gallery { display: flex; flex-direction: column; gap: 12px; }
.sp-gallery__main {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-mist);
    isolation: isolate;
}
.sp-gallery__main-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    animation: sp-swap var(--t-slow) var(--ease) both;
}
@keyframes sp-swap {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.sp-gallery__zoom {
    position: absolute;
    top: 12px; right: 12px;
    width: var(--touch); height: var(--touch);
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease);
}
.sp-gallery__zoom:hover { background: var(--white); }

/* ── Varyasyon paneli — fiyatın altında, Trendyol stili ───────────────── */
.sp-variations {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-block: 20px;
    border-block: 1px solid var(--line);
}
.sp-variations__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-variations__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sp-variations__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.sp-variations__label::after {
    content: ":";
    margin-left: 2px;
    color: var(--ink-3);
}
.sp-variations__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
}
.sp-variations__value:empty::before {
    content: attr(data-empty);
    color: var(--ink-3);
}
.sp-variations__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sp-variations__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 56px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.sp-variations__chip:hover { border-color: var(--ink); }
.sp-variations__chip.is-active,
.sp-variations__chip[aria-checked="true"] {
    border-color: var(--purple);
    color: var(--purple);
    box-shadow: inset 0 0 0 1px var(--purple);
    background: rgba(30, 58, 95, 0.04);
}
.sp-variations__chip.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Galeri thumbs — resmin sağ-alt köşesinde overlay */
.sp-gallery__thumbs {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
    max-width: calc(100% - 28px);
}
.sp-gallery__thumbs > li { margin: 0; padding: 0; list-style: none; }
.sp-gallery__thumb {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px -4px rgba(15,23,42,0.25);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.sp-gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sp-gallery__thumb:hover { border-color: var(--ink); transform: translateY(-1px); }
.sp-gallery__thumb.is-active {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple), 0 4px 14px -4px rgba(30,58,95,0.4);
}
@media (min-width: 720px) {
    .sp-gallery__thumb { width: 64px; height: 64px; }
    .sp-gallery__thumbs { right: 18px; bottom: 18px; gap: 10px; }
}

.sp-gallery__placeholder {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    background: var(--bg-mist);
}

/* Panel */
.sp-panel {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media (max-width: 1023px) { .sp-panel { position: static; } }

.sp-panel__series {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--purple);
    font-weight: 600;
}
.sp-panel__title {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-size: clamp(36px, 5.5vw, 60px);
    color: var(--ink);
}
.sp-panel__sku {
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.sp-panel__price {
    font-family: var(--serif);
    font-size: 40px;
    color: var(--ink);
    padding-block: 14px;
    border-top: 1px solid var(--line);
}
.sp-panel__price ins { background: transparent; text-decoration: none; color: var(--purple); }
.sp-panel__price del { color: var(--ink-3); margin-right: 10px; font-size: 0.8em; }

.sp-panel__desc { color: var(--ink-2); }
.sp-panel__desc p { margin-bottom: 10px; }

/* ─────────────────────────────────────────────────────────────────────────
   Eser rozetleri — El işçiliği / Sertifikalı / Sınırlı stok
   Kısa açıklama altı, CTA üstü. Güven sinyali + estetik vurgu.
   ───────────────────────────────────────────────────────────────────── */
.sp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 4px;
    padding: 0;
    list-style: none;
}
.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
    cursor: default;
}
.sp-badge:hover {
    border-color: var(--gold);
    background: var(--white);
}
.sp-badge:hover .sp-badge__icon { color: var(--gold); }
.sp-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--purple);
    transition: color var(--t-fast) var(--ease);
}
.sp-badge__icon svg { width: 16px; height: 16px; display: block; }
.sp-badge__text { white-space: nowrap; }

@media (min-width: 720px) {
    .sp-badges { gap: 10px; margin: 22px 0 6px; }
    .sp-badge { padding: 10px 16px; font-size: 13px; }
    .sp-badge__icon svg { width: 18px; height: 18px; }
}

.sp-panel__cta { display: flex; flex-direction: column; gap: 8px; }

.sp-panel__specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 8px 0 0;
    border-top: 1px solid var(--line);
}
.sp-panel__specs .spec {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.spec__label {
    color: var(--ink-3);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.spec__value { color: var(--ink); }
.spec__hint {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

.sp-panel__long { color: var(--ink-2); }
.sp-panel__long p { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   Single product — Sepete Ekle formu
   ------------------------------------------------------------------------ */
.sp-cart {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-cart__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.sp-cart__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
    height: 48px;
}
.sp-cart__qty-btn {
    width: 42px;
    height: 100%;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: background var(--t-fast) var(--ease);
}
.sp-cart__qty-btn:hover { background: var(--bg-soft); }
.sp-cart__qty-input {
    width: 48px;
    text-align: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    -moz-appearance: textfield;
}
.sp-cart__qty-input::-webkit-outer-spin-button,
.sp-cart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sp-cart__qty-input:focus { outline: none; }

.sp-cart__submit {
    flex: 1 1 240px;
    min-height: 48px;
    height: 48px;
    padding-inline: 24px;
}
.sp-cart__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.sp-cart__hint {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}
.sp-cart__oos {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   WhatsApp CTA
   ------------------------------------------------------------------------ */
.wa-cta {
    width: 100%;
}
@media (min-width: 720px) {
    .wa-cta { width: auto; align-self: flex-start; }
}
.wa-cta__note {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Lightbox (vanilla)
   ------------------------------------------------------------------------ */
.sp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sp-lightbox.is-open {
    display: flex;
    animation: sp-lb-in 220ms var(--ease);
}
@keyframes sp-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sp-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.sp-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: var(--touch);
    height: var(--touch);
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease);
}
.sp-lightbox__close:hover { background: rgba(255,255,255,0.22); }
body.has-lightbox-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee__track { animation: none; }
    html.has-js .reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   Hakkımızda sayfası — page-hakkimizda.php
   ========================================================================== */

.about-hero {
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
    overflow: hidden;
}
.about-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 1024px) {
    .about-hero__grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 64px;
    }
}
.about-hero__inner { max-width: 760px; }
.about-hero__title { margin-top: 14px; }
.about-hero__lede {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 60ch;
}
@media (min-width: 720px) {
    .about-hero__lede { font-size: 19px; }
}
.about-hero__art {
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-hero__art svg {
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
}

.about-story__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 1024px) {
    .about-story__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: start;
    }
}
.about-story__media {
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-mist);
    border: 1px solid var(--line);
    aspect-ratio: 4 / 3;
}
.about-story__media img,
.about-story__media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-story__text p {
    margin-top: 18px;
    color: var(--ink-2);
    line-height: 1.75;
    max-width: 56ch;
}
.about-story__text .h-section { margin-top: 14px; }

.about-pillars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
    .about-pillars { grid-template-columns: 1fr 1fr; }
}
.about-pillars > li {
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
    .about-pillars > li { padding: 24px 24px 24px 0; }
    .about-pillars > li:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line); }
}
.about-pillars__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--purple);
    margin: 0 0 8px;
}
.about-pillars > li p {
    margin: 0;
    color: var(--ink-2);
    line-height: 1.65;
    font-size: 15px;
}

.about-process { background: var(--bg-soft); }
.about-process__head { max-width: 760px; }
.about-process__head .h-section { margin-top: 14px; }
.about-process__lede {
    margin-top: 18px;
    color: var(--ink-2);
    line-height: 1.75;
    max-width: 56ch;
}

.about-process__steps {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    counter-reset: about-step;
}
@media (min-width: 720px) {
    .about-process__steps { grid-template-columns: 1fr 1fr; gap: 32px 48px; }
}
@media (min-width: 1024px) {
    .about-process__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.about-process__steps > li {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px 24px;
    position: relative;
}
.about-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 58, 95, 0.08);
    color: var(--purple);
    margin-bottom: 14px;
}
.about-process__icon svg { display: block; }
.about-process__num {
    display: inline-block;
    font-family: var(--font-display, Georgia, serif);
    font-size: 22px;
    color: var(--gold);
    line-height: 1;
    margin-left: 14px;
    vertical-align: top;
    transform: translateY(8px);
}
.about-process__steps h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: var(--ink);
}
.about-process__steps p {
    margin: 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.65;
}

.about-promise__inner {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}
.about-promise__inner .h-section { margin-top: 14px; }
.about-promise__inner p {
    margin-top: 22px;
    color: var(--ink-2);
    line-height: 1.75;
    font-size: 16px;
}
.about-promise__cta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* =============================================================================
   İletişim sayfası — page-iletisim.php
   ========================================================================== */

.contact-hero {
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}
.contact-hero__inner { max-width: 760px; }
.contact-hero__inner .h-section { margin-top: 14px; }
.contact-hero__lede {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 60ch;
}
@media (min-width: 720px) {
    .contact-hero__lede { font-size: 18px; }
}

.contact-main__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .contact-main__grid {
        grid-template-columns: 1fr 1.4fr;
        gap: 64px;
        align-items: start;
    }
}

.contact-info {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px 24px;
}
.contact-info__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--purple);
    margin: 0 0 18px;
}
.contact-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.contact-info__list > li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.contact-info__list a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.contact-info__list a:hover {
    border-bottom-color: var(--purple);
}
.contact-info__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(30, 58, 95, 0.08);
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.contact-info__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 2px;
}
.contact-info__address {
    font-style: normal;
    line-height: 1.55;
    color: var(--ink);
}
.contact-info__map {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--purple);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.contact-info__map:hover { border-bottom-color: var(--purple); }
.contact-info__note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
}

.contact-form-wrap__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--purple);
    margin: 0 0 18px;
}
.contact-form {
    display: grid;
    gap: 18px;
}
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-form__field {
    display: block;
}
.contact-form__field > span {
    display: block;
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.contact-form__field > span em {
    color: var(--purple);
    font-style: normal;
    margin-left: 2px;
}
.contact-form__field input,
.contact-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    font: inherit;
    color: var(--ink);
    min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form__field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.contact-form__field.is-invalid input,
.contact-form__field.is-invalid textarea {
    border-color: #d63638;
    background: rgba(214, 54, 56, 0.04);
}
.contact-form__field.is-invalid input:focus,
.contact-form__field.is-invalid textarea:focus {
    border-color: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.14);
}
.contact-form__error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #b32023;
}
.contact-form__error:empty {
    display: none;
}
.contact-form__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form__actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.contact-form__hint {
    margin: 0;
    font-size: 12px;
    color: var(--ink-2);
    flex: 1 1 240px;
}

.contact-notice {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    font-size: 14px;
    line-height: 1.55;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.contact-notice[hidden] { display: none; }
.contact-notice strong { font-weight: 600; }
.contact-notice--ok {
    border-color: rgba(30, 58, 95, 0.4);
    background: rgba(30, 58, 95, 0.06);
    color: var(--ink);
}
.contact-notice--err {
    border-color: rgba(214, 54, 56, 0.5);
    background: rgba(214, 54, 56, 0.06);
    color: #b32023;
}

/* =========================
   Legal pages (kargo-iade, gizlilik, kvkk)
   ========================= */
.legal-hero {
    background: var(--bg-soft);
    border-bottom: 1px solid rgba(15, 17, 21, 0.06);
}
.legal-hero__inner {
    max-width: 760px;
    text-align: left;
}
.legal-hero .h-section {
    margin-top: 12px;
}
.legal-hero__lede {
    margin-top: 18px;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.7;
    max-width: 62ch;
}
.legal-hero__meta {
    margin-top: 14px;
    color: var(--ink-3);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legal-main__grid {
    display: block;
    max-width: 760px;
}
.legal-content {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.75;
}
.legal-content h2 {
    margin-top: 40px;
    margin-bottom: 12px;
    font-family: var(--ff-display, inherit);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.legal-content h2:first-child {
    margin-top: 0;
}
.legal-content p {
    margin: 0 0 14px;
    color: var(--ink-2);
}
.legal-content ul {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--ink-2);
}
.legal-content ul li {
    margin-bottom: 6px;
}
.legal-content strong {
    color: var(--ink);
    font-weight: 600;
}
.legal-content a {
    color: var(--purple, var(--ink));
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal-content a:hover {
    color: var(--gold);
}

.legal-note {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.65;
}

@media (min-width: 720px) {
    .legal-content { font-size: 16.5px; }
    .legal-content h2 { font-size: 24px; margin-top: 48px; }
}

/* =========================================================================
   Genel page wrapper (page.php) — WooCommerce cart / checkout / account
   ve diğer içerik sayfaları için
   ========================================================================== */
.page-wrap { background: var(--bg); }
.page-article { max-width: 980px; margin-inline: auto; }
.page-article__head { margin-bottom: 32px; }
.page-article__content { color: var(--ink); line-height: 1.7; font-size: 15.5px; }
.page-article__content p { margin: 14px 0; }
.page-article__content h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    margin: 36px 0 12px;
    color: var(--ink);
}
.page-article__content a { color: var(--accent); border-bottom: 1px solid currentColor; }
.page-article__content a:hover { color: var(--accent-dark); }
@media (min-width: 720px) {
    .page-article__content { font-size: 16.5px; }
    .page-article__content h2 { font-size: 28px; }
}

/* WC sayfaları için sade wrapper — kendi grid'lerini kursunlar */
.page-wc {
    width: 100%;
    color: var(--ink);
}
.page-wc a { color: inherit; }

/* =========================================================================
   WooCommerce — SADECE renk override'ları
   Layout/border/padding/grid hepsi WC'nin kendi CSS'inde — onlara dokunmuyoruz
   ========================================================================== */

/* Body text rengi */
.woocommerce, .woocommerce-page {
    color: var(--ink);
}

/* Link rengi */
.woocommerce a,
.woocommerce-page a {
    color: var(--accent);
}
.woocommerce a:hover,
.woocommerce-page a:hover {
    color: var(--accent-dark);
}

/* Block-based cart "Ödemeye git" + checkout "Siparişi tamamla" butonları —
   varsayılan WC rengi okunmuyordu, beyaz metin + accent zemin zorunlu */
.wc-block-components-button.contained,
a.wc-block-components-button.contained,
button.wc-block-components-button.contained {
    background: var(--accent) !important;
    color: #fff !important;
}
.wc-block-components-button.contained:hover,
.wc-block-components-button.contained:focus {
    background: var(--accent-dark) !important;
    color: #fff !important;
}
.wc-block-components-button__text {
    color: inherit !important;
}

/* Klasik checkout-button (eski WC sürümleri için fallback) */
a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    background: var(--accent) !important;
    color: #fff !important;
}
a.checkout-button:hover {
    background: var(--accent-dark) !important;
    color: #fff !important;
}

/* =========================================================================
   WooCommerce — TİPOGRAFİ, INPUT, BUTTON, NOTICE GÖRSELLERİ
   Layout / grid / column / width / margin'a HİÇ dokunulmuyor
   Sadece renk, border, border-radius, font, focus state, padding (input+buton içi)
   ========================================================================== */

/* Başlıklar — checkout, my-account, addresses */
.woocommerce h2,
.woocommerce h3,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-Address-title h2,
#order_review_heading {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.woocommerce h2,
.woocommerce-Address-title h2 { font-size: 26px; }
.woocommerce h3,
#order_review_heading { font-size: 22px; }
.woocommerce fieldset legend {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
}

/* Form labels */
.woocommerce form .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-form-row label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.woocommerce .required,
.woocommerce abbr.required {
    color: var(--accent);
    text-decoration: none;
    border: 0;
}
.woocommerce .optional {
    color: var(--ink-3);
    font-weight: 400;
}

/* Text inputs */
.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.woocommerce input.input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder {
    color: var(--ink-3);
}
.woocommerce-invalid input.input-text {
    border-color: #C62828;
}

/* Select2 — tema rengi ve border */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
}
.select2-dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--accent);
    color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* Notice'lar — uniform stil */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
ul.woocommerce-error {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--bg-soft);
    color: var(--ink);
    border-radius: var(--radius);
    font-size: 14.5px;
    line-height: 1.55;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
    display: none;
}
.woocommerce-message {
    border-left-color: #2E7D32;
    background: rgba(46, 125, 50, 0.05);
}
.woocommerce-error,
ul.woocommerce-error {
    border-left-color: #C62828;
    background: rgba(198, 40, 40, 0.04);
    color: #8B1F1F;
}
.woocommerce-info a,
.woocommerce-message a {
    color: var(--accent);
    font-weight: 600;
}

/* shop_table — sipariş özeti, sepet, hesabım siparişler */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table,
.woocommerce-orders-table,
.my_account_orders {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    font-size: 14.5px;
}
.woocommerce table.shop_table th,
.woocommerce-orders-table th {
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td,
.woocommerce-orders-table td {
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
}
.woocommerce table.shop_table tr:last-child td,
.woocommerce-orders-table tr:last-child td {
    border-bottom: 0;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    background: transparent;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14.5px;
}
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 16px;
    font-weight: 700;
    border-top: 1px solid var(--line);
}
.woocommerce-Price-amount {
    color: var(--ink);
    font-weight: 600;
}
.woocommerce-Price-currencySymbol {
    color: var(--ink-2);
    font-weight: 500;
}

/* Payment methods (radio listesi) */
#payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    background: transparent;
}
#payment ul.payment_methods label,
.woocommerce-checkout #payment ul.payment_methods label {
    color: var(--ink);
    font-weight: 600;
}
#payment .payment_box,
.woocommerce-checkout #payment .payment_box {
    background: var(--bg-mist);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.55;
}
#payment .payment_box::before,
.woocommerce-checkout #payment .payment_box::before {
    border-bottom-color: var(--bg-mist);
}
#payment .payment_box p { margin: 0; }

/* Şartlar ve koşullar checkbox kutusu */
.woocommerce-terms-and-conditions-wrapper {
    background: var(--bg-mist);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
}
.woocommerce-terms-and-conditions-wrapper a {
    color: var(--accent);
    font-weight: 600;
}

/* Place Order butonu */
#place_order,
.woocommerce-checkout #place_order {
    background: var(--accent) !important;
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    transition: background var(--t-fast) var(--ease);
}
#place_order:hover,
.woocommerce-checkout #place_order:hover {
    background: var(--accent-dark) !important;
}

/* WC butonları — .button (kupon Uygula, kaydet, görüntüle vs) */
.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button,
.woocommerce-EditAccountForm .button {
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--t-fast) var(--ease);
    text-shadow: none;
    box-shadow: none;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
    background: var(--accent);
    color: #fff;
}
.woocommerce .button.alt,
.woocommerce a.button.alt {
    background: var(--accent);
}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover {
    background: var(--accent-dark);
}

/* Orders table action butonları küçük */
.woocommerce-orders-table .button {
    font-size: 12px;
}

/* =========================================================================
   My Account — Sidebar menü kart görünümü
   Layout (column/grid) WC'nin kendi CSS'inde, biz sadece kart + linkleri süslüyoruz
   ========================================================================== */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--line-soft);
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: 0;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 18px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--bg-soft);
    color: var(--accent);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--ink);
    color: #fff;
}
.woocommerce-MyAccount-navigation ul li.is-active a:hover {
    color: #fff;
}
/* Çıkış butonunu hafifçe vurgula */
.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--ink-2);
}

/* My Account dashboard içerik tipografisi */
.woocommerce-MyAccount-content p {
    color: var(--ink-2);
    line-height: 1.7;
}
.woocommerce-MyAccount-content p strong {
    color: var(--ink);
}
.woocommerce-MyAccount-content a {
    color: var(--accent);
    font-weight: 500;
}

/* Address kartları — hesabım > adresler */
.woocommerce-Address {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.woocommerce-Address-title .edit {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}
.woocommerce-Address address {
    color: var(--ink-2);
    font-style: normal;
    line-height: 1.7;
    font-size: 14.5px;
}

/* =========================================================================
   Footer text — force whites (high specificity override for WC body class)
   ========================================================================== */
body .footer,
body.woocommerce-page .footer,
body.single-product .footer {
    color: var(--white) !important;
}
body .footer p,
body .footer span,
body .footer a,
body .footer h3,
body .footer address {
    color: var(--white) !important;
}
body .footer .footer__col-title {
    color: var(--white) !important;
    opacity: 0.9;
}
body .footer .footer__links a {
    color: var(--white) !important;
    opacity: 0.92;
}
body .footer .footer__links a:hover { opacity: 1; }
body .footer .footer__tag,
body .footer .footer__bottom {
    color: var(--white) !important;
    opacity: 0.92;
}