html {
    scroll-behavior: smooth;
}

/* ============================================================
   Homepage "two pages" scroll-snap. Only index.html/index_nl/fr/de
   get the "home" class on <html>, so collection.html and the rest
   of the site scroll normally and are unaffected.
   ============================================================ */
html.home {
    scroll-snap-type: y mandatory;
}

html.home .page-section {
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

html.home .page-hero {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* The header floats over the hero instead of sharing flex space with
   it, so the "SoapRocks®" text sits dead-center of the full screen,
   not just centered in whatever space was left under the header. */
html.home .page-hero > header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

/* Header keeps its natural height at the top; the hero copy takes
   up and centers in whatever vertical space is left, so this first
   "page" reads as a complete, deliberate screen rather than a
   half-scrolled banner. */
html.home .page-hero .hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Second "page": a smaller repeat of the header up top, the ring
   centered in the middle, and the footer visible at the bottom —
   all inside a single full-height screen. */
html.home .page-ring {
    position: relative;
    display: flex;
    flex-direction: column;
}

html.home .page-ring > header {
    flex: 0 0 auto;
}

html.home .page-ring main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.home .page-ring footer {
    flex: 0 0 auto;
}

/* Smaller repeat of the header shown at the top of the ring "page". */
header.header-mini {
    padding: 8px 0;
}

header.header-mini .logo {
    max-width: 16vmin;
}

header.header-mini nav {
    padding-bottom: 6px;
    margin-bottom: 6px;
}

header.header-mini .nav-item {
    font-size: 2vmin;
    padding: 3px 12px;
}

/* ============================================================
   Homepage hero — only index.html/index_nl/fr/de include this
   section; collection.html does not, so the two pages read as
   distinct even though they share the same ring below.
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 6vh 8% 5vh;
   
}

/* Scattered soap photos behind the text — decorative, low-opacity, so
   the page doesn't feel empty but the headline stays easy to read. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Big soap photos anchored just outside each corner — only their
   edges peek into frame (the .hero's overflow:hidden clips the rest),
   so the page doesn't feel empty but nothing competes with the
   centered headline. Sized down at each breakpoint so the "peek"
   stays proportional instead of swallowing the screen on a phone. */
.hero-bg-item {
    position: absolute;
    opacity: 0.20;
    filter: saturate(0.85);
}

.corner-tl { top: -320px;    left: -320px;  width: 750px; }
.corner-tr { top: -320px;    right: -320px; width: 750px; }
.corner-bl { bottom: -320px; left: -320px;  width: 750px; }
.corner-br { bottom: -320px; right: -320px; width: 750px; }

@media screen and (max-width: 1000px) {
    .corner-tl, .corner-tr, .corner-bl, .corner-br { width: 600px; }
    .corner-tl, .corner-tr { top: -260px; }
    .corner-bl, .corner-br { bottom: -260px; }
    .corner-tl, .corner-bl { left: -260px; }
    .corner-tr, .corner-br { right: -260px; }
}

@media screen and (max-width: 800px) {
    .corner-tl, .corner-tr, .corner-bl, .corner-br { width: 480px; }
    .corner-tl, .corner-tr { top: -210px; }
    .corner-bl, .corner-br { bottom: -210px; }
    .corner-tl, .corner-bl { left: -210px; }
    .corner-tr, .corner-br { right: -210px; }
}

@media screen and (max-width: 700px) {
    .corner-tl, .corner-tr, .corner-bl, .corner-br { width: 400px; }
    .corner-tl, .corner-tr { top: -175px; }
    .corner-bl, .corner-br { bottom: -175px; }
    .corner-tl, .corner-bl { left: -175px; }
    .corner-tr, .corner-br { right: -175px; }
}

@media screen and (max-width: 600px) {
    .corner-tl, .corner-tr, .corner-bl, .corner-br { width: 320px; opacity: 0.16; }
    .corner-tl, .corner-tr { top: -145px; }
    .corner-bl, .corner-br { bottom: -145px; }
    .corner-tl, .corner-bl { left: -145px; }
    .corner-tr, .corner-br { right: -145px; }
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

/* Soft glow behind the text so it stays crisp over the scattered soaps
   without needing a hard box. */
.hero-inner::before {
    content: "";
    position: absolute;
    inset: -14% -30%;
  
    z-index: -1;
}

.hero-headline {

    font-family: 'Trajan Pro', 'Trajan', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    letter-spacing: 2px;
    color: #2b2621;
    margin: 0 0 14px;
}

.hero-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #6b6257;
    margin: 0 0 26px;
}

.hero-cta {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: #2b2621;
    text-decoration: none;
    border: 1px solid #2b2621;
    border-radius: 30px;
    padding: 10px 26px;
    transition: background 0.2s ease, color 0.2s ease;
}

.hero-cta:hover {
    background: #2b2621;
    color: #fff;
}

.hero-cta span {
    display: inline-block;
    margin-left: 6px;
    animation: hero-bounce 1.8s ease-in-out infinite;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@media screen and (max-width: 600px) {
    .hero {
        padding: 8vh 8% 6vh;
    }
    .hero-subtitle {
        font-size: 0.92rem;
    }
}
@font-face {
    font-family: 'B';
    /* BUG FIX: file is .woff2 but this said format('truetype'), so the
       custom font silently failed to load in most browsers. */
    src: url('fonts/B.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }


  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');


  body{
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #FAFAFAFA;
}

.headback{
position: fixed;
top: 0;
width: 100%;
z-index: -999;
opacity: 0.6;

}




  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}




header {
    font-family: "B";
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
}

.logo-container {
    display: flex;
    justify-content: center;
}

.logo {
    max-width: 35vmin;
        -webkit-filter: invert(1);
    filter: invert(1);
}

nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 15px;
    margin-bottom: 15px;
}


.nav-item {
    font-size: 3.5vmin;
    color: #333;
    padding: 5px 20px;
    margin: 5px;
    cursor: pointer;
    text-decoration: none;
    border-right: 2px solid #333;
}


.contact {
    border-right: none;
    }



.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3% auto;
    width: 70%;
}

.image-block {
    position: relative; /* anchor point for the "tap to view" badge below */
    text-align: center;
    width: calc(100% / 3 - 2%);
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
    will-change: opacity, transform;
    cursor: pointer; /* the whole card is clickable, not just the photo */
}

.image-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.image {

    text-align: center;
    width: 65%;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.image-block:hover .image {
    animation: shake 0.5s linear 1, scaleInOut 0.5s linear 1;
}

/* Touch devices can't hover, so tapping needs its own quick feedback. */
.image-block:active .image {
    transform: scale(0.94);
    transition: transform 0.1s ease-in-out;
}

@keyframes shake {
    0% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-2px, 2px) rotate(-1deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    60% { transform: translate(-2px, 2px) rotate(-1deg); }
    80% { transform: translate(2px, -2px) rotate(1deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

@keyframes scaleInOut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.caption {
    text-align: center;
    font-weight: 100%;
    font-size: 2.5vmin;
    margin-top: 10px;
}

.description {

    color: white;
    display: none;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* .look, .fragrance, .tit, .scent typography now lives scoped under
   .modal-text below, where they're actually displayed. */

#modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: auto;
    background-color: rgba(20, 16, 14, 0.6);
    backdrop-filter: blur(6px);
    padding: 6vh 6vw;
    box-sizing: border-box;
}

.modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    min-height: calc(100vh - 12vh);
}

.modal-media {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-image {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
}

.modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}


.image-block:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.line {
    display: none;
}

.headline:before {
    content: "";
    display: block;
    width: 100%;
    border-top: 2px solid #333;
    margin-bottom: 20px;
}

.headline .line {
    display: block;
    width: 50%;
    height: 2px;
    background-color: #333;
    margin: 0 auto 20px;
}

.modal-text {
    flex: 1 1 45%;
    max-width: 420px;
    color: #fff;
    text-align: left;
}

.modal-text .tit {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.modal-text .look,
.modal-text .fragrance,
.modal-text .scent {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 16px;
}

.modal-text .look b,
.modal-text .scent b {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.modal-text .look p,
.modal-text .scent p {
    margin: 0;
}

.modal-text .fragrance b {
    font-weight: 600;
}

@media screen and (max-width: 800px) {
    #modal {
        padding: 8vh 6vw;
    }
    .modal-content {
        flex-direction: column;
        gap: 24px;
        min-height: auto;
    }
    .modal-media {
        flex: 0 0 auto;
    }
    #modal-image {
        max-height: 42vh;
    }
    .modal-text {
        max-width: 100%;
        text-align: center;
    }
    .modal-close {
        top: -36px;
    }
}

/* BUG FIX: the soap-info popup (title/look/fragrance/scent) used the
   same font sizes as desktop, so on a phone it read oversized and
   crowded. Scaled down to something comfortable to read one-handed. */
@media screen and (max-width: 600px) {
    #modal {
        padding: 6vh 5vw;
    }
    #modal-image {
        max-height: 32vh;
    }
    .modal-text .tit {
        font-size: 1.35rem;
        margin-bottom: 12px;
    }
    .modal-text .look,
    .modal-text .fragrance,
    .modal-text .scent {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .modal-close {
        font-size: 1.8rem;
        top: -30px;
    }
}

  hr {
    display: none;
}


  .separator-line {
    display: none;
}


.separator-text {

    position: relative;
    left: 10px;
    top: -4vmin;

    padding: 0 5px;
    font-size: 3vmin;
}

.separator-text.bottom {
    top: auto;
    bottom: -30px;
}


footer {
    position: relative;

    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.footer-container {
   width: 100%;

}

footer p {
    margin-top: 0%;
    color: #333;
    font-size: 10px;
}



.language-options {

    text-decoration: none;
    color: #333;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    display: flex;
    gap: 10px;
}

.language-options a {
    color: #333 !important;
    text-decoration: none;
}

/* BUG FIX: on phones the four language names wrapped/overflowed in
   the top-right corner and rendered huge and cluttered. */
@media screen and (max-width: 600px) {
    .language-options {
        top: 6px;
        right: 6px;
        font-size: 10px;
        gap: 5px;
    }
}

/* The disclaimer now sits below the ring/grid, styled like a quiet
   quotation rather than a wall of text competing with the soaps.
   "order" places it after the ring on desktop and after the grid on
   mobile, regardless of where it sits in the HTML. flex-basis:100%
   forces it onto its own full-width row — without this, .content's
   justify-content:space-between left a lone item pinned to the left
   edge instead of centered. */
.content > .note-text {
    order: 3;
    flex: 1 0 100%;
    box-sizing: border-box;
    max-width: 640px;
    margin: 80px auto 6px;
    padding: 18px 6% 0;
    border-top: 1px solid #ddd;
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: #5c554c;
    line-height: 1.6;
}

.note-text p {
    margin-bottom: 0.6em;
}

.content > .tap-hint {
    order: 4;
    flex: 1 0 100%;
}

@media screen and (max-width: 600px) {
    .content > .note-text {
        font-size: 0.82rem;
        margin-top: 28px;
        max-width: 90vw;
    }
}

/* "Tap/click a soap" hint. Kept small and quiet, sitting under the
   soaps rather than shouting above them. */
.tap-hint {
    text-align: center;
    font-style: italic;
    font-size: 0.75rem;
    color: #948a7d;
    margin: 14px auto 0;
    max-width: 720px;
    padding: 0 8%;
}

@media screen and (max-width: 600px) {
    .tap-hint {
        font-size: 0.7rem;
    }
}


/* ============================================================
   Circular soap carousel (dairesel sabun karuseli)
   A gentle 3D-carousel feel: soaps toward the front (bottom of
   the circle) sit bigger and brighter, soaps toward the back
   (top) are smaller and dimmer. Click still opens the modal.
   ============================================================ */

.circle-stage {
    position: relative;
    width: 80vw;
    min-width: 480px;
    height: min(24vmin, 200px);
    min-height: 170px;
    margin: 100px calc(50% - 40vw) 120px;
    flex: 0 0 80vw;
}

.circle-track {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.circle-track .image-block.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    margin: 0;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
    will-change: transform;
}

.circle-track .image-block.orbit-item .image {
    width: 100%;
    filter: drop-shadow(0 10px 14px rgba(60, 45, 30, 0.18));
}

.circle-track .image-block.orbit-item .caption {
    font-family: 'B', Georgia, serif;
    font-variant: small-caps;
    letter-spacing: 0.5px;
    color: #2b2621;
    font-size: 2vmin;
    text-shadow: none;
    margin-top: 10px;
}

/* Only the short scent-name line from .description is shown, as a quiet
   subtitle under the caption (like the reference poster); the fuller
   "Look" / "Fragrance" copy stays reserved for the modal. */
.circle-track .image-block.orbit-item .description {
    display: block;
    /* BUG FIX: the base .description rule (further up this file) uses
       position:relative + a 50%/50% translate to center it for an old
       layout. Left un-overridden, that shifted this text up onto the
       caption instead of sitting normally beneath it. Resetting these
       properties puts it back in normal flow, right under the caption. */
    position: static;
    left: auto;
    top: auto;
    transform: none;
    color: #8a7d6f;
    font-size: 1.2vmin;
    text-align: center;
    margin-top: 6px;
}

.circle-track .image-block.orbit-item .description .tit,
.circle-track .image-block.orbit-item .description .look,
.circle-track .image-block.orbit-item .description .scent {
    display: none;
}

.circle-track .image-block.orbit-item .description .fragrance b {
    font-weight: 400;
}

/* --- "This is clickable" affordance -----------------------------------
   A small, quiet magnifying-glass badge sits on every soap so people
   realize they can tap/click it. Uses a plain emoji glyph (not an icon
   font) so it never depends on an external stylesheet loading — that
   was the previous bug: the Font Awesome CDN link had a broken
   integrity hash, so its icon font never loaded and the badge showed
   up as a big blank white circle instead of a magnifying glass. */
.image-block::after {
    content: "🔍";
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    animation: tap-pulse 2.6s ease-in-out infinite;
}

/* Grid layout: badge sits on the lower-right corner of the photo. */
.content > .image-block::after {
    right: 15%;
    bottom: 32%;
}

/* Orbiting-circle layout (desktop only): photos are smaller, so the
   badge is smaller too. */
.circle-track .image-block.orbit-item::after {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 8px;
    right: 6%;
    bottom: 28%;
}

@keyframes tap-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .image-block::after {
        animation: none;
    }
}

@media screen and (max-width: 600px) {
    .image-block::after {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 8px;
    }
}

/* ============================================================
   PHONE LAYOUT: the rotating circle looks great on a wide desktop
   screen, but on a phone there just isn't room for it — the soaps
   either got tiny and cramped or, if enlarged, huge and overlapping.
   Below a certain width we skip the carousel entirely (collection.js
   checks this) and fall back to a calm, static 2-column grid instead:
   no motion, no overlap, comfortably-sized photos and a normal tap
   target. This is the fix for "telefonda sabunlar inanılmaz büyük".
   ============================================================ */
@media screen and (max-width: 700px) {
    .content {
        width: 92%;
        margin: 8% auto 6%;
    }
    .image-block {
        width: 46%;
        margin-bottom: 32px;
    }
    .image {
        width: 78%;
    }
    .caption {
        font-size: 3.6vmin;
    }
}

@media screen and (max-width: 380px) {
    .image-block {
        width: 100%;
    }
    .image {
        width: 55%;
    }
}

.language-options .current-lang {
    font-weight: 700;
}

.lang-short {
    display: none;
}

@media screen and (max-width: 600px) {
    .language-options {
        top: 6px;
        right: 6px;
        font-size: 11px;
        gap: 5px;
    }
    .lang-full {
        display: none;
    }
    .lang-short {
        display: inline;
    }
}

@font-face {
  font-family: 'Trajan Pro';
  src: url('/fonts/TrajanPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}