/*
   TUTKU EV TEKSTİLİ — GÜNCEL STYLESHEET
   Okunabilir format + yumuşatılmış iletişim/footer geçişi.
   Ana marka rengi: #22b9e4;
*/

/* =========================================================
   TUTKU — RENKLER VE TEMEL AYARLAR
   ========================================================= */
:root {
    --ink: #24323a;
    --muted: #67757c;
    --paper: #f6fbfd;
    --soft: #eaf7fb;
    --cream: #eef8fb;
    --line: rgba(36,50,58,.14);
    --accent: #22b9e4;
    --accent-deep: #148caf;
    --navy: #103c4a;
    --white: #fff;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    color: var(--ink);
    background: #fbfaf7;
    font-family: "DM Sans",Arial,sans-serif;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
}
.container {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
}

/* =========================================================
   ÃœST BÄ°LGÄ° BANDI + NAVÄ°GASYON
   ========================================================= */
.site-header {
    position: relative;
    z-index: 10;
    width: 100%;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(36,50,58,.08);
}
.nav-wrap {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand {
    display: inline-flex;
    align-items: center;
}
.brand-mark,.brand-footer {
    display: inline-flex;
    align-items: center;
}
.brand-logo {
    display: block;
    height: 58px;
    width: auto;
    background: #fff;
}
.footer-logo {
    height: 40px;
}
.nav {
    display: flex;
    gap: 42px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}
.nav a {
    color: var(--accent);
    opacity: 1;
    font-weight: 600;
    letter-spacing: .01em;
}
.nav a:hover {
  color: var(--accent-deep);
  opacity: 1;
}
.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--ink);
    font-size: 24px;
}

/* =========================================================
   ANA GÖRSEL / HERO
   ========================================================= */
.hero {
    height: 84vh;
    min-height: 650px;
    position: relative;
    overflow: hidden;
    background: #756b5f;
    color: white;
}
.hero-art {
  position: absolute;
  inset: 0;
  background-image: url("assets/tutku-hero-salon.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13, 35, 43, 0.55) 0%,
    rgba(13, 35, 43, 0.24) 42%,
    rgba(13, 35, 43, 0.04) 75%
  );
}
.curtain {
    position: absolute;
    top: -5%;
    height: 110%;
    width: 34%;
    background: repeating-linear-gradient(90deg,#d2c5b2 0 22px,#c5b6a1 22px 44px,#dfd4c5 44px 62px);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
    opacity: .92;
}
.curtain-left {
    left: -12%;
    transform: skewX(-4deg);
}
.curtain-right {
    right: -21%;
    opacity: .44;
}
.table {
    position: absolute;
    left: 31%;
    bottom: 0;
    width: 63%;
    height: 35%;
    background: linear-gradient(#ede6da,#cfc0ac);
    transform: perspective(900px) rotateX(58deg);
    transform-origin: bottom;
    box-shadow: 0 -16px 45px rgba(0,0,0,.12);
}
.runner {
    position: absolute;
    left: 46%;
    bottom: 9%;
    width: 29%;
    height: 24%;
    background: linear-gradient(90deg,#826b45,#a58a5d,#826b45);
    transform: perspective(700px) rotateX(64deg) rotateZ(-7deg);
    border-radius: 4px;
    opacity: .85;
}
.plate {
    position: absolute;
    bottom: 10%;
    width: 120px;
    height: 64px;
    border-radius: 50%;
    background: #f5f0e7;
    box-shadow: 0 8px 25px rgba(0,0,0,.2),inset 0 0 0 6px #d9cfbf;
}
.plate-a {
    left: 42%;
    transform: rotate(-8deg);
}
.plate-b {
    left: 67%;
    transform: rotate(8deg);
}
.vase {
    position: absolute;
    right: 28%;
    bottom: 28%;
    width: 50px;
    height: 130px;
    border-radius: 42% 42% 35% 35%;
    background: linear-gradient(90deg,#eee7db,#c8bba7,#eee7db);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 230px;
}
.eyebrow {
    font-size: 15px;
    letter-spacing: .18em;
    font-weight: 600;
    margin: 0 0 20px;
}
.eyebrow.dark {
    color: var(--accent);
}
h1,h2,h3 {
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    margin: 0;
}
h1 {
    font-size: clamp(56px,7vw,96px);
    line-height: .95;
    letter-spacing: -.04em;
    max-width: 780px;
}
.hero-copy {
    max-width: 580px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255,255,255,.83);
    margin: 28px 0 36px;
}
.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border: 1px solid rgba(255,255,255,.55);
    font-size: 13px;
    letter-spacing: .06em;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}
.btn-ghost {
    color: white;
    background: rgba(255,255,255,.08);
}
.btn:hover {
    transform: translateY(-1px);
}

/* =========================================================
   GENEL BÖLÜMLER
   ========================================================= */
.section {
    padding: 110px 0;
}
.section-soft {
    background: var(--paper);
    padding: 110px 0;
}
.section-heading {
    display: grid;
    grid-template-columns: 1.05fr .75fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 56px;
}
.section-heading.compact {
    grid-template-columns: 1fr auto;
    align-items: center;
}
.section-heading h2,.split-copy h2,.contact-section h2 {
    font-size: clamp(38px,4.6vw,62px);
    line-height: 1.05;
    letter-spacing: -.03em;
}
.section-heading>p,.split-copy>p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
}

/* =========================================================
   KOLEKSÄ°YON KARTLARI
   ========================================================= */
.collection-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    grid-template-rows: 310px 310px;
    gap: 18px;
}
.collection-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    color: white;
    display: flex;
    align-items: flex-end;
}
.collection-card.tall {
    grid-row: 1/3;
}
.collection-card.charcoal {
    grid-column: 2/4;
}
.warm {
    background: #a6937d;
}
.sand {
    background: #c8b89d;
    color: #302d28;
}
.olive {
    background: #7a8067;
}
.charcoal {
    background: #48443f;
}
.fabric {
    position: absolute;
    inset: 0;
    opacity: .9;
}
.fold-1 {
    background: repeating-linear-gradient(93deg,transparent 0 40px,rgba(255,255,255,.1) 42px 65px),linear-gradient(140deg,#9d8771,#d6c7b3);
}
.fold-2 {
    background: linear-gradient(160deg,rgba(255,255,255,.15),transparent 50%),repeating-linear-gradient(125deg,#b8a88e 0 35px,#c7b79f 36px 72px);
}
.fold-3 {
    background: linear-gradient(135deg,#6f765b 0 48%,#899175 49% 74%,#667053 75%);
}
.fold-4 {
    background: repeating-linear-gradient(172deg,#403c37 0 40px,#575149 41px 78px);
}
.card-copy {
    position: relative;
    z-index: 2;
}
.card-copy span {
    font-size: 11px;
    opacity: .7;
}
.card-copy h3 {
    font-size: 25px;
    margin: 5px 0 4px;
}
.card-copy p {
    font-size: 13px;
    margin: 0;
    opacity: .8;
}

/* =========================================================
   ÃœRÃœNLER + FÄ°LTRELER
   ========================================================= */
.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.filter {
    border: 1px solid var(--line);
    background: transparent;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
}
.filter.active,.filter:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 34px 18px;
}
.product-card {
    transition: .25s;
}
.product-card.hidden {
    display: none;
}
.product-photo {
    height: 410px;
    position: relative;
    overflow: hidden;
    background: #ddd;
    display: flex;
    align-items: flex-end;
    padding: 18px;
}
.product-photo:before,.product-photo:after {
    content: "";
    position: absolute;
}
.product-photo span {
    position: relative;
    z-index: 3;
    color: white;
    font-size: 10px;
    letter-spacing: .18em;
    background: rgba(20,18,15,.38);
    backdrop-filter: blur(8px);
    padding: 8px 10px;
}
.photo-curtain {
    background: linear-gradient(90deg,#bdb1a0,#e0d6c7);
}
.photo-curtain:before {
    inset: -8% 18% -10% -4%;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 28px,rgba(119,102,83,.12) 29px 58px);
    transform: skewX(-6deg);
    filter: drop-shadow(14px 0 18px rgba(0,0,0,.12));
}
.photo-table {
    background: linear-gradient(#b3a48f 0 42%,#ded3c3 43%);
}
.photo-table:before {
    left: 8%;
    right: 8%;
    bottom: 12%;
    height: 40%;
    background: #cfc0a9;
    transform: perspective(500px) rotateX(50deg);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.photo-table:after {
    width: 34%;
    height: 26%;
    left: 34%;
    bottom: 19%;
    background: #81715e;
    transform: rotate(-4deg);
}
.photo-napkin {
    background: linear-gradient(135deg,#cabd9f,#eee6d6);
}
.photo-napkin:before {
    width: 60%;
    height: 52%;
    left: 20%;
    top: 24%;
    background: linear-gradient(145deg,#efe6d3 0 52%,#d9ccb3 53%);
    transform: rotate(-7deg);
    box-shadow: 0 16px 30px rgba(0,0,0,.14);
}
.photo-runner {
    background: linear-gradient(#d9cfc0 0 45%,#948a72 46%);
}
.photo-runner:before {
    left: 32%;
    top: 20%;
    width: 36%;
    height: 70%;
    background: linear-gradient(90deg,#73785b,#969b77,#6f7555);
    transform: perspective(500px) rotateX(58deg);
    box-shadow: 0 13px 25px rgba(0,0,0,.16);
}
.photo-sheer {
    background: linear-gradient(90deg,#e7e0d6,#fff);
}
.photo-sheer:before {
    inset: -2% 10%;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 35px,rgba(205,199,190,.45) 36px 66px);
    filter: drop-shadow(8px 0 18px rgba(0,0,0,.08));
}
.photo-dark-table {
    background: linear-gradient(#685f54 0 48%,#ded4c7 49%);
}
.photo-dark-table:before {
    left: 8%;
    right: 8%;
    bottom: 9%;
    height: 40%;
    background: #4e4b47;
    transform: perspective(500px) rotateX(52deg);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.product-info {
    padding-top: 16px;
}
.product-info p {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 5px;
}
.product-info h3 {
    font-size: 23px;
    margin-bottom: 12px;
}
.product-info a {
    font-size: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
}

/* =========================================================
   HAKKIMIZDA
   ========================================================= */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
    align-items: center;
    gap: 90px;
    padding: 120px 0;
}
.split-visual {
    height: 540px;
    background: #e8e0d4;
    position: relative;
    overflow: hidden;
}
.swatch {
    position: absolute;
    width: 58%;
    height: 44%;
    box-shadow: 0 18px 40px rgba(0,0,0,.13);
}
.sw1 {
    background: #d6c5aa;
    left: -3%;
    top: 10%;
    transform: rotate(-8deg);
}
.sw2 {
    background: #786b57;
    right: -6%;
    top: 29%;
    transform: rotate(7deg);
}
.sw3 {
    background: #a7a88a;
    left: 18%;
    bottom: -6%;
    transform: rotate(-2deg);
}
.stitch-line {
    position: absolute;
    width: 72%;
    height: 1px;
    border-top: 2px dashed rgba(255,255,255,.55);
    left: 14%;
    top: 52%;
    transform: rotate(12deg);
}

.split-copy > p {
  margin: 12px 0;
  line-height: 1.65;
}

.facts {
    border-top: 1px solid var(--line);
}
.facts div {
    display: grid;
    grid-template-columns: 60px 1fr;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.facts strong {
    font-size: 12px;
    color: var(--accent);
}
.facts span {
    font-size: 14px;
}


/* =========================================================
   İLETİŞİM — ONAYLANAN DAHA KOYU TURKUAZ GEÇİŞ
   Beyaz yazılar daha net; görünüm hâlâ ferah ve modern.
   ========================================================= */
.contact-section {
    background: linear-gradient(
        180deg,
        #5b98aa 0%,
        #68a5b6 18%,
        #79b1c0 38%,
        #9bc7d2 60%,
        #c2dde4 78%,
        #e8f3f6 92%,
        #f7fbfc 100%
    );
    color: #ffffff;
    padding: 110px 0 150px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
}

.contact-section .eyebrow {
    color: #ffffff;
}

.contact-section h2 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(31, 77, 88, .10);
}

.contact-section p {
    color: rgba(255,255,255,.96);
    max-width: 520px;
    margin-top: 24px;
}

.contact-card {
    border-top: 1px solid rgba(255,255,255,.46);
}

.contact-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,.36);
    font-size: 15px;
}

.contact-row span {
    color: rgba(255,255,255,.95);
}

.contact-row strong {
    font-weight: 600;
    text-align: right;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(31, 77, 88, .06);
}

/* =========================================================
   FOOTER — AÇIK, TEMİZ VE MODERN
   ========================================================= */
.footer {
    position: relative;
    background: #f7fbfc;
    color: #6a7f87;
    padding: 26px 0 34px;
    border-top: 0;
}

.footer::before {
    display: none;
    content: none;
}

.footer-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 12px;
}

.footer .brand {
    color: var(--ink);
    font-size: 13px;
    opacity: 1;
}

.footer .brand-logo {
    height: 38px;
    background: transparent;
    box-shadow: none;
}

.footer p,
.footer a {
    color: #6a7f87;
}

.footer a {
    transition: color .2s ease;
}

.footer a:hover {
    color: var(--accent-deep);
}

/* =========================================================
   TABLET / MOBÄ°L
   ========================================================= */
@media (max-width: 900px) {
    .nav {
        display: none;
        position: absolute;
        top: 88px;
        left: 20px;
        right: 20px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 14px 35px rgba(0,0,0,.12);
        padding: 22px;
        flex-direction: column;
        gap: 18px;
    }
    .nav.open {
        display: flex;
        color: var(--ink);
    }
    .menu-toggle {
        display: block;
    }
    .hero {
        min-height: 650px;
    }
    .hero-content {
        padding-top: 210px;
    }
    .section-heading,.section-heading.compact,.split-section,.contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .collection-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 360px 300px 300px;
    }
    .collection-card.tall {
        grid-row: auto;
        grid-column: 1/3;
    }
    .collection-card.charcoal {
        grid-column: 1/3;
    }
    .product-grid {
        grid-template-columns: 1fr 1fr;
    }
    .split-section {
        padding: 90px 0;
    }
    .split-visual {
        height: 460px;
    }
    .filters {
        justify-content: flex-start;
    }
}
@media (max-width: 620px) {
    .container {
        width: min(100% - 28px,1180px);
    }
.nav-wrap {
        height: 70px;
    }
    .hero {
        height: 90vh;
        min-height: 650px;
    }
    .hero-content {
        padding-top: 190px;
    }
    h1 {
        font-size: 52px;
    }
    .hero-copy {
        font-size: 15px;
    }
    .section,.section-soft {
        padding: 80px 0;
    }
    .collection-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,330px);
    }
    .collection-card.tall,.collection-card.charcoal {
        grid-column: auto;
    }
    .product-grid {
        grid-template-columns: 1fr;
    }
    .product-photo {
        height: 440px;
    }
    .section-heading {
        margin-bottom: 36px;
    }
    .split-visual {
        height: 390px;
    }
    .contact-row {
        flex-direction: column;
        gap: 6px;
    }
    .contact-row strong {
        text-align: left;
    }
    .footer-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .plate-b {
        left: 65%;
    }
    .plate {
        width: 90px;
        height: 50px;
    }
    .vase {
        right: 13%;
    }
}
@media (max-width: 620px) {
    .brand-logo {
        height: 44px;
    }
}

@media (max-width: 900px) {
  .nav {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 30px rgba(16, 60, 74, 0.10);
  }

  .nav a {
    color: var(--accent);
  }

  .nav a:hover {
    color: var(--accent-deep);
  }

  .menu-toggle {
    color: var(--accent);
  }
}


/* =========================================================
   ANA ÜRÜN KATEGORİLERİ — TIKLANABİLİR KARTLAR
   ========================================================= */
.category-card {
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.category-card:hover,
.category-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(36,50,58,.14);
    outline-color: rgba(34,185,228,.7);
}

.category-card.active {
    outline-color: var(--accent);
    box-shadow: 0 18px 42px rgba(34,185,228,.18);
}

.category-card .card-copy b {
    display: inline-block;
    margin-top: 14px;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* =========================================================
   KATEGORİYE GÖRE AÇILAN ÜRÜN GALERİSİ
   ========================================================= */
.product-gallery-section {
    overflow: hidden;
    opacity: 1;
    max-height: 2200px;
    transition: opacity .35s ease, max-height .45s ease, padding .45s ease;
}

.product-gallery-section.is-hidden {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.gallery-heading {
    margin-bottom: 42px;
}

.gallery-close {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    padding: 11px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}

.gallery-close:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.product-card.category-hidden {
    display: none;
}

/* Ek temsili ürün görselleri — gerçek fotoğraflar geldiğinde değiştirilebilir */
.photo-curtain-dark {
    filter: brightness(.78) saturate(.8);
}

.photo-table-light {
    filter: brightness(1.08) saturate(.78);
}

.photo-napkin-blue::before {
    background: linear-gradient(145deg,#d9eef4 0 52%,#8dbbc8 53%);
}

.photo-napkin-warm::before {
    background: linear-gradient(145deg,#eadbc8 0 52%,#b99a77 53%);
}

.photo-runner-blue::before {
    background: linear-gradient(90deg,#668d99,#8bb6c1,#5f8490);
}

.photo-runner-natural::before {
    background: linear-gradient(90deg,#b9aa92,#ddcfb9,#aa9a80);
}

@media (max-width: 900px) {
    .nav {
        font-size: 17px;
    }
}

@media (max-width: 620px) {
    .nav {
        font-size: 16px;
    }

    .gallery-close {
        justify-self: start;
    }
}


/* =========================================================
   ÜRÜNLER — ESKİ TASARIM KATEGORİ NAVİGASYONU
   ========================================================= */
.products-heading {
    grid-template-columns: 1fr;
    margin-bottom: 34px;
}

.category-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 48px;
}

.category-filter {
    border: 1px solid rgba(103,117,124,.24);
    background: transparent;
    color: var(--muted);
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.category-filter:hover {
    color: var(--accent-deep);
    border-color: rgba(34,185,228,.58);
    transform: translateY(-1px);
}

.category-filter.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

@media (max-width: 620px) {
    .category-filters {
        justify-content: flex-start;
        gap: 9px;
        margin-bottom: 36px;
    }

    .category-filter {
        padding: 10px 16px;
        font-size: 14px;
    }
}


/* =========================================================
   FOOTER TUTKU® — SADE METİN
   Alt satırdaki diğer yazılarla aynı font ve koyu renk
   ========================================================= */
.footer-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    color: #24323a !important;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
}

.footer-wordmark sup {
    position: relative;
    top: -0.25em;
    font-size: 7px;
    line-height: 1;
    letter-spacing: 0;
    color: #24323a;
}

@media (max-width: 620px) {
    .footer-wordmark {
        font-size: 12px !important;
    }
}


/* =========================================================
   GERÇEK ÜRÜN FOTOĞRAFLARI — KUTUYA TAM SIĞDIR
   Görselin tamamı görünür, oranı bozulmaz.
   ========================================================= */

/* Ana sayfadaki 4 büyük kategori kartına gerçek resim eklendiğinde */
.category-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #f5f6f4;
}

/* Kategori açıldıktan sonra görünen ürün fotoğrafları */
.product-photo {
    background: #f5f6f4;
}

.product-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f5f6f4;
    cursor: zoom-in;
    transition: transform .25s ease;
}

/* Fotoğrafı kesmeden kutuya sığdırıyoruz; sadece çok hafif hover hissi */
.product-photo:hover img {
    transform: scale(1.01);
}

/* Etiket fotoğrafın üzerinde görünmeye devam etsin */
.product-photo span {
    z-index: 4;
}

/* =========================================================
   LIGHTBOX — ORİJİNAL FOTOĞRAFI BÜYÜK AÇ
   ========================================================= */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(13, 25, 30, .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.image-lightbox.is-open {
    display: flex;
}

.lightbox-stage {
    width: min(94vw, 1500px);
    height: min(90vh, 1100px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 22px 70px rgba(0,0,0,.32);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255,255,255,.22);
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 620px) {
    .image-lightbox {
        padding: 16px;
    }

    .lightbox-stage {
        width: 96vw;
        height: 86vh;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
    }
}



/* =========================================================
   RESİMLERİN ÜZERİNDEKİ YAZILAR — SİYAH / KOYU TON
   ========================================================= */

/* Ana ürün kartları: Perde / Masa Örtüsü / Peçete / Runner */
.collection-card {
    color: #1f2428;
}

.card-copy span,
.card-copy h3,
.card-copy p,
.category-card .card-copy b {
    color: #1f2428;
    text-shadow: none;
}

/* Alt ürün fotoğrafları üzerindeki küçük etiket */
.product-photo span {
    color: #1f2428;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: none;
    font-weight: 700;
}

/* Gerekirse biraz daha okunur görünüm */
.card-copy {
    background: rgba(255,255,255,.58);
    padding: 10px 12px;
    border-radius: 10px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    max-width: fit-content;
}

/* =========================================================
   DİL SEÇİCİ — TR / EN
   ========================================================= */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-left: auto;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: "DM Sans", Arial, sans-serif;
}

.language-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 7px 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    transition: color .2s ease, opacity .2s ease;
}

.language-btn:hover,
.language-btn.active {
    color: var(--accent-deep);
}

.language-btn.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.language-separator {
    color: rgba(103,117,124,.45);
    font-size: 12px;
}

@media (max-width: 900px) {
    .header-actions {
        gap: 14px;
    }

    .language-switcher {
        margin-left: auto;
    }
}

@media (max-width: 620px) {
    .header-actions {
        gap: 10px;
    }

    .language-btn {
        font-size: 11px;
        padding: 6px 2px;
    }

    .nav {
        top: 70px;
    }
}