/* ==========================================================================
   Güzeliş Porselen / Eternity
   Modernised rebuild of the original design: same layout, same identity
   (cream header band, red gradient menu bar, left "Ürünler" sidebar),
   rebuilt with semantic HTML, flex/grid and real text instead of sliced
   images and nested layout tables.
   ========================================================================== */

:root {
  /* Palette lifted from the original site */
  --red:         #cc0000;
  --red-dark:    #990000;
  --red-deep:    #7d1010;
  --red-bright:  #e53232;
  --red-hi:      #e14b4b;

  /* Sampled from the original logo strip so the masthead blends into the
     logo and pot images instead of showing seams around them. */
  --band-red:    #f32323;
  --band-top:    #e5d7b4;
  --band-mid:    #e1d2a9;
  --band-bot:    #e2dccc;
  --cream-band:  #e5d7b4;
  --cream-50:    #fdfcf9;
  --cream-100:   #f6f2e8;   /* section header bars */
  --cream-200:   #efe9da;
  --cream-300:   #e3dbc8;

  --ink:         #2f2723;
  --ink-soft:    #5d5049;
  --ink-faint:   #8b7d73;

  --page-bg:     #efeae0;
  --surface:     #ffffff;
  --photo-bg:    #ffffff;
  --border:      #d8cdb6;
  --border-red:  #c9a3a3;

  --sidebar: 215px;

  --font: "Segoe UI", Verdana, system-ui, -apple-system, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 3px rgb(60 40 30 / .12), 0 6px 20px rgb(60 40 30 / .10);
  --shadow-sm: 0 1px 2px rgb(60 40 30 / .12);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--red-dark); text-underline-offset: .18em; }
a:hover { color: var(--red); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: var(--red-dark); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 300;
  padding: .7rem 1.2rem; background: var(--red-dark); color: #fff;
  text-decoration: none; transform: translateY(-130%);
}
.skip-link:focus { transform: none; }

/* --- Shell -------------------------------------------------------------- */
/* Full width. The original was locked to 800px only because it was built for
   1024x768 CRTs; nothing about the design needs the cage. */
.shell {
  width: 100%;
  background: var(--surface);
}

/* --- Social strip (above the header, as in the original) ---------------- */
.social-strip {
  display: flex; justify-content: center; align-items: center; gap: .5rem;
  padding: .6rem 0;
}
.social-strip a {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--surface); color: var(--red-dark);
  border: 1px solid var(--border);
  transition: background-color .15s, color .15s, transform .15s;
}
.social-strip a:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.social-strip svg { width: 16px; height: 16px; }

/* --- Header band -------------------------------------------------------- */
/* The logo and pot JPEGs carry a 7px #f32323 strip along their top edge and a
   cream body. Reproducing both here, with the images flush to the top, makes
   the band read as one continuous graphic rather than images on a panel. */
.masthead {
  display: flex; align-items: flex-start; gap: 1rem;
  /* Multi-stop, sampled row by row out of logo.jpg. A simple 3-stop gradient
     left a visible seam where the JPEG's own background met the band. */
  background: linear-gradient(180deg,
    #e5d7b4 0, #e5d5b1 16px, #e2d3ac 30px, #e1d2a9 44px,
    #e3d6b6 60px, #dcd2b7 74px, #e0d9c7 84px, #e2dccc 88px);
  padding: 0 clamp(.5rem, 1.5vw, 1.25rem);
  min-height: 88px;
}
.masthead__logo { display: flex; align-items: flex-start; text-decoration: none; }
/* Natural size keeps the red strip aligned pixel-for-pixel with the band. */
.masthead__logo img { width: 421px; max-width: 100%; height: auto; }

@media (max-width: 900px) {
  /* Once the logo scales, its strip no longer lines up -- drop the band's
     own strip so there is one red line, not two of different heights. */
  .masthead {
    background: linear-gradient(180deg, var(--band-top) 0%, var(--band-mid) 52%,
      var(--band-bot) 100%);
    align-items: center;
    min-height: 0; padding-block: .5rem;
  }
  .masthead__logo img { width: 300px; }
}

.masthead__tools {
  margin-inline-start: auto; display: flex; align-items: center; gap: 1rem;
  align-self: center; padding-top: 7px;
}

/* anasayfa / ara / iletişim button cluster */
.quicknav {
  display: flex; align-items: stretch;
  background: #fffdf7; border: 1px solid #d5c9ae;
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
}
.quicknav a {
  display: grid; place-items: center; gap: 2px;
  padding: .45rem .75rem; min-width: 62px;
  text-decoration: none; color: var(--red-dark);
  font-size: 11px; line-height: 1;
  border-inline-end: 1px solid #e5dcc6;
  transition: background-color .15s;
}
.quicknav a:last-child { border-inline-end: 0; }
.quicknav a:hover { background: #f6ece4; color: var(--red); }
.quicknav svg { width: 22px; height: 22px; }

.masthead__pot { display: flex; align-self: stretch; align-items: flex-start; }
.masthead__pot img { height: 82px; width: auto; }
@media (max-width: 900px) { .masthead__pot { display: none; } }

/* --- Red menu bar ------------------------------------------------------- */
.menubar {
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #e23a3a 0%, var(--red) 48%, #a80f0f 100%);
  border-bottom: 2px solid #7d1010;
  position: relative;
}

/* Cream leading block holding ENGLISH / SITE HARITASI, mirroring the
   original's notched shape. */
.menubar__lang {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 2rem 0 1rem;
  /* Continues the masthead band downward, as the original's notch did. */
  background: linear-gradient(180deg, var(--band-bot) 0%, #d9d0bb 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.menubar__lang a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--red-dark);
  white-space: nowrap;
}
.menubar__lang a:hover { color: var(--red); }
.menubar__lang a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex: none;
}
.menubar__lang a[aria-current="true"] { color: #6a0f0f; }

/* Floating menu bar. It sticks to the top once the header has scrolled
   away, slides out of the way while the visitor scrolls down, and comes
   back when they scroll up or pause. site.js sets the classes. While it
   floats, a small logo appears in the cream notch. */
.menubar {
  position: sticky; top: 0; z-index: 150;
  transition: translate .32s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.menubar.is-floating { box-shadow: 0 6px 22px rgb(60 20 10 / .22); }
.menubar.is-hidden { translate: 0 calc(-100% - 12px); }
.menubar__lang .menubar__brand { display: none; }
.menubar__lang .menubar__brand::before { content: none; }
.menubar__brand img { display: block; height: 30px; width: auto; }
.menubar.is-floating .menubar__brand { display: inline-flex; margin-inline-end: .4rem; }
@media (prefers-reduced-motion: reduce) { .menubar { transition: none; } }
@media print { .menubar { position: static; } }
/* Facebook / Instagram at the right end, only while floating (the same
   links are in the announcement strip above the header otherwise). */
.menubar__social { display: none; align-items: center; gap: .15rem; padding: 0 .7rem; }
.menubar.is-floating .menubar__social { display: flex; }
.menubar__social a {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: #fff; transition: background-color .15s;
}
.menubar__social a:hover { background: rgb(255 255 255 / .18); }
.menubar__social svg { width: 16px; height: 16px; }
@media (max-width: 1024.98px) {
  .menubar.is-floating .menubar__social { margin-inline-start: auto; padding-inline-end: 0; }
  .menubar.is-floating .menubar__toggle { margin-inline-start: 0; }
}
@media (min-width: 1025px) and (max-width: 1360px) {
  .menubar__social { order: 1; }
  .mainnav { order: 2; }
}
@media (max-width: 560px) {
  .menubar.is-floating .menubar__brand, .menubar.is-floating .menubar__social { display: none; }
  .menubar.is-floating .menubar__toggle { margin-inline-start: auto; }
}

.mainnav { flex: 1; }
.mainnav ul {
  display: flex; align-items: stretch; height: 100%;
  list-style: none; padding: 0; margin: 0;
}
.mainnav li { display: flex; }
.mainnav a {
  display: flex; align-items: center;
  padding: .7rem 1.05rem;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  border-inline-end: 1px solid rgb(255 255 255 / .22);
  transition: background-color .15s;
}
.mainnav li:first-child a { border-inline-start: 1px solid rgb(255 255 255 / .22); }
.mainnav a:hover { background: rgb(255 255 255 / .16); color: #fff; }
.mainnav a[aria-current="page"] { background: rgb(0 0 0 / .18); font-weight: 700; }

.menubar__toggle {
  display: none;
  align-items: center; gap: .5rem;
  margin-inline-start: auto;
  padding: 0 1rem; border: 0; background: transparent; color: #fff;
  font-size: 14px; font-weight: 600;
}
.menubar__toggle svg { width: 20px; height: 20px; }

@media (max-width: 1024.98px) {
  .menubar__lang { padding-inline-end: 1.6rem; }
  .menubar__toggle { display: flex; }
  /* The full menu lives in the slide-in drawer on small screens. */
  .mainnav { display: none; }
}

/* --- Body layout: sidebar + content ------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}
@media (max-width: 1024.98px) {
  .layout { grid-template-columns: 1fr; }
}

/* --- Sidebar ------------------------------------------------------------ */
.sidebar { display: grid; gap: 1rem; }

.panel {
  border: 1px solid #b93636;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  /* NOT overflow:hidden -- that clipped the absolutely positioned flyouts.
     Corners are rounded on the head and last row instead. */
}
.panel__head {
  background: linear-gradient(180deg, #e14545 0%, var(--red) 45%, #a50f0f 100%);
  border-radius: 7px 7px 0 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  text-align: center;
  padding: .5rem .75rem;
  text-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.panel__list { list-style: none; margin: 0; padding: 0; }
.panel__list > li { position: relative; border-top: 1px solid #e8d9d9; }
.panel__list > li:first-child { border-top: 0; }
.panel__list > li:last-child > a,
.panel__list > li:last-child > .panel__parent { border-radius: 0 0 7px 7px; }

.panel__list > li > a,
.panel__list > li > .panel__parent {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  width: 100%;
  padding: .55rem .7rem;
  background: linear-gradient(180deg, #a52020 0%, #8e1717 100%);
  color: #fff; text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  border: 0; text-align: start;
  transition: background .15s, box-shadow .15s;
}
.panel__list > li > a:hover,
.panel__list > li > .panel__parent:hover,
.panel__list > li > .panel__parent[aria-expanded="true"],
.panel__list > li:hover > .panel__parent {
  background: linear-gradient(180deg, #d13a3a 0%, #b02020 100%);
  color: #fff;
  /* a bar on the left instead of sliding the text: long names do not re-wrap */
  box-shadow: inset 3px 0 0 rgb(255 255 255 / .75);
}
.panel__list > li > a[aria-current="page"] {
  background: linear-gradient(180deg, #6f0d0d 0%, #560909 100%);
}
.panel__parent .caret { flex: none; width: 12px; height: 12px; transition: rotate .18s; }

/* --- Mega flyout --------------------------------------------------------
   A wide panel grouped into product families, in the shape of a modern
   catalogue menu: large headings with a rule beneath, roomy link lists, and
   the series photograph alongside. */
.mega {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgb(40 25 20 / .18);
}
.mega__body {
  display: flex; gap: 1.75rem;
  padding: 1.6rem 1.9rem;
}
.mega__cols {
  flex: 1;
  display: grid; gap: 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-content: start;
}
.mega__col { margin-bottom: 1.5rem; }
.mega__col h4 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--ink);
  padding-bottom: .55rem; margin-bottom: .7rem;
  border-bottom: 1px solid #e2e2e2;
}
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li + li { margin-top: .1rem; }
.mega__col a {
  display: block; padding: .3rem 0;
  font-size: 14px; font-weight: 400; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
  transition: color .12s;
}
.mega__col a:hover { color: var(--red); }

.mega__shot {
  flex: none; width: 230px; align-self: flex-end;
  display: grid; place-items: center;
}
.mega__shot img { width: 100%; height: 205px; object-fit: contain; }

@media (min-width: 1025px) {
  .mega {
    position: absolute; inset-inline-start: calc(100% - 1px); top: -1px;
    z-index: 60;
    width: min(920px, calc(100vw - 250px));
    opacity: 0; visibility: hidden; translate: -8px 0;
    transition: opacity .16s, translate .16s, visibility .16s;
  }
  .panel__list > li:hover > .mega,
  .panel__list > li:focus-within > .mega {
    opacity: 1; visibility: visible; translate: 0 0;
  }
  /* Anchor the lower entries to their bottom edge so tall panels stay on screen. */
  .panel__list > li:nth-last-child(-n+5) > .mega { top: auto; bottom: -1px; }
}
@media (max-width: 1024.98px) {
  .mega {
    display: none; border: 0; box-shadow: none;
    background: #fff;
  }
  .panel__parent[aria-expanded="true"] + .mega { display: block; }
  .panel__parent[aria-expanded="true"] .caret { rotate: 90deg; }
  .mega__body { flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; }
  .mega__cols { grid-template-columns: 1fr; gap: 0; }
  .mega__shot { width: 100%; align-self: center; }
  .mega__shot img { height: 150px; }
}

/* --- Content ------------------------------------------------------------ */
.content { min-width: 0; display: grid; gap: 1rem; }

.box {
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.box__head {
  background: linear-gradient(180deg, #fbf8f0, var(--cream-100));
  border-bottom: 1px solid var(--border);
  padding: .55rem .9rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--red-dark);
}
.box__head--center { text-align: center; }
.box__head--red {
  background: linear-gradient(180deg, #b52424 0%, var(--red-dark) 100%);
  color: #fff; text-align: center;
  font-size: 20px; letter-spacing: .01em;
  border-bottom: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.box__body { padding: 1rem; }

.pagetitle {
  background: linear-gradient(180deg, #fbf8f0, var(--cream-100));
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--red-dark);
  text-align: center;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; color: var(--red-dark); }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { text-wrap: pretty; }

.prose { color: var(--ink); }
.prose p { margin-bottom: .9rem; max-width: 82ch; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 .9rem; padding-inline-start: 1.3rem; max-width: 82ch; }
.prose li { margin-bottom: .35rem; }
.prose strong { color: var(--red-dark); }

/* --- Home: slider ------------------------------------------------------- */
.slider {
  position: relative;
  background: linear-gradient(180deg, #fbf8f0, var(--cream-200));
}
/* The source banners are only 620x400, so cap the height rather than
   upscaling them across a full-width screen. */
.slider__track { position: relative; aspect-ratio: 620 / 400; max-height: 540px; }
.slider__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.slider__slide[data-active="true"] { opacity: 1; visibility: visible; }
/* contain, not cover: these banners carry text and product line-ups, so
   cropping them loses the message. */
.slider__slide img { width: 100%; height: 100%; object-fit: contain; }

.slider__btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px;
  background: rgb(255 255 255 / .55);
  color: var(--red-dark);
  transition: background-color .15s;
}
.slider__btn:hover { background: rgb(255 255 255 / .85); }
.slider__btn--prev { inset-inline-start: .5rem; }
.slider__btn--next { inset-inline-end: .5rem; }
.slider__btn svg { width: 26px; height: 26px; }

.slider__dots {
  position: absolute; inset-inline: 0; bottom: .6rem;
  display: flex; justify-content: center; gap: .4rem;
}
.slider__dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid rgb(0 0 0 / .3); background: rgb(255 255 255 / .7);
}
.slider__dots button[aria-current="true"] { background: var(--red); border-color: var(--red-dark); }

/* --- Home: awards strip ------------------------------------------------- */
.awards {
  display: grid; gap: 0;
  grid-template-columns: 204px minmax(0, 1fr);
  background: #f1ebdb;
}
@media (max-width: 620px) { .awards { grid-template-columns: 1fr; } }
.awards__img { background: #f1ebdb; }
.awards__img img { width: 100%; height: auto; }
.awards__body { padding: 1rem 1.1rem; }
.awards__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--red-dark); margin-bottom: .6rem;
}
.awards__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .6rem; }
.awards__links a { font-weight: 700; font-size: 14px; }
.awards__body p { font-size: 13.5px; color: var(--ink-soft); text-align: justify; }

.hotline {
  display: block; margin-inline: auto;
}

/* --- Home: series grid -------------------------------------------------- */
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-red); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; background: var(--surface);
  transition: box-shadow .18s, transform .18s;
}
.tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tile__media {
  aspect-ratio: 4 / 3; background: var(--photo-bg);
  display: grid; place-items: center; padding: .6rem;
  border-bottom: 1px solid var(--border);
}
.tile__media img { width: 100%; height: 100%; object-fit: contain; }
.tile__body { padding: .6rem .7rem; }
.tile__name { font-size: 13.5px; font-weight: 700; color: var(--red-dark); line-height: 1.3; }
.tile__meta { font-size: 12px; color: var(--ink-faint); margin-top: .2rem; }

/* --- Catalog toolbar ---------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.search { position: relative; flex: 1 1 15rem; }
.search input {
  width: 100%; padding: .5rem .8rem .5rem 2.2rem;
  border: 1px solid var(--border-red); border-radius: var(--radius-sm);
  background: #fffdf8;
}
.search svg {
  position: absolute; inset-inline-start: .6rem; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none;
}
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--border-red); background: #fffdf8;
  font-size: 12px; font-weight: 600; color: var(--red-dark);
  transition: background-color .15s, color .15s;
}
.chip:hover { background: #f3e3e3; }
.chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #c62c2c, var(--red-dark));
  border-color: var(--red-dark); color: #fff;
}
.result-count { font-size: 12.5px; color: var(--ink-faint); }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--ink-faint); }

/* --- Product page ------------------------------------------------------- */
.crumb {
  font-size: 13px; color: var(--ink-soft);
  padding: .55rem .9rem;
  background: linear-gradient(180deg, #fbf8f0, var(--cream-100));
  border: 1px solid var(--border-red); border-radius: var(--radius);
}
.crumb a { text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; }

.variant {
  display: grid; gap: 0;
  grid-template-columns: 260px minmax(0, 1fr);
  border-bottom: 1px solid var(--border);
}
.variant:last-child { border-bottom: 0; }
@media (max-width: 620px) { .variant { grid-template-columns: 1fr; } }

.variant__media {
  padding: .9rem; text-align: center;
  border-inline-end: 1px solid var(--border);
  background: var(--photo-bg);
}
@media (max-width: 620px) { .variant__media { border-inline-end: 0; border-bottom: 1px solid var(--border); } }
.variant__media img { margin-inline: auto; width: auto; height: auto; max-width: 100%; max-height: 190px; }
.variant__zoom {
  display: inline-block; margin-top: .5rem;
  font-size: 12.5px; font-weight: 700; color: var(--red-dark);
  background: none; border: 0; text-decoration: underline;
}
.variant__zoom:hover { color: var(--red); }

.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec th, .spec td { padding: .5rem .8rem; border-bottom: 1px solid #ece4d2; text-align: start; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th {
  width: 110px; font-weight: 600; color: var(--red-dark);
  background: #faf7ef; white-space: nowrap;
}
.spec td { background: #fffdf8; }
.spec .code { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13px; }
.spec .barcode img { max-height: 42px; width: auto; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.feature-list li { display: flex; gap: .55rem; font-size: 13.5px; line-height: 1.55; }
.feature-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .5rem;
  border-radius: 50%; background: var(--red);
}

.patterns { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr)); }
.pattern { text-align: center; }
.pattern__img {
  aspect-ratio: 1; background: var(--photo-bg);
  border: 1px solid var(--border-red); border-radius: var(--radius-sm);
  display: grid; place-items: center; padding: .25rem; overflow: hidden;
  cursor: zoom-in;
}
.pattern__img img { width: 100%; height: 100%; object-fit: contain; }
.pattern__code { font-size: 11px; color: var(--ink-soft); margin-top: .2rem; }

.note {
  border-inline-start: 3px solid var(--red);
  background: var(--cream-100);
  padding: .7rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; color: var(--ink-soft);
}

.pager { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--primary {
  background: linear-gradient(180deg, #c62c2c, var(--red-dark));
  color: #fff; border-color: #8e1717;
}
.btn--primary:hover { background: linear-gradient(180deg, #d64040, #a81414); color: #fff; }
.btn--ghost { border-color: var(--border-red); color: var(--red-dark); background: #fffdf8; }
.btn--ghost:hover { background: #f3e3e3; color: var(--red); }

/* Section nav buttons on the corporate page (">> Kuruluş" etc.) */
.seclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.seclist a {
  display: block; padding: .5rem .85rem;
  background: linear-gradient(180deg, #a52020 0%, #8e1717 100%);
  color: #fff; text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  transition: background .15s, padding-inline-start .15s;
}
.seclist a:hover {
  background: linear-gradient(180deg, #d13a3a 0%, #b02020 100%);
  color: #fff; padding-inline-start: 1.1rem;
}
.seclist a::before { content: "» "; opacity: .75; }

.intro-split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 620px) { .intro-split { grid-template-columns: 1fr; } }
.intro-split img { border: 1px solid var(--border); border-radius: var(--radius-sm); width: 100%; }
.seclist a[aria-current="page"] {
  background: linear-gradient(180deg, #6f0d0d 0%, #560909 100%);
  padding-inline-start: 1.1rem;
}

/* Section photographs (fabrikalar, testler, sicil …) */
.shots {
  display: grid; gap: .6rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.shots__item {
  display: block; background: var(--photo-bg);
  border: 1px solid var(--border-red); border-radius: var(--radius-sm);
  padding: .35rem; cursor: zoom-in;
}
.shots__item img { width: 100%; height: auto; object-fit: contain; }

/* Media page: TV series / programme lists */
.taglist {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.taglist li {
  margin: 0; padding: .25rem .6rem;
  background: var(--cream-100); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12.5px; color: var(--ink-soft);
}

/* Eternity Haberleri grid */
.newsgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.newsitem { border: 1px solid var(--border-red); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.newsitem__media { aspect-ratio: 4/3; background: var(--photo-bg); display: grid; place-items: center; padding: .5rem; }
.newsitem__media img { width: 100%; height: 100%; object-fit: contain; }
.newsitem__title {
  padding: .5rem .6rem; font-size: 12.5px; font-weight: 600;
  color: var(--red-dark); border-top: 1px solid var(--border);
  background: var(--cream-100);
}

/* Ödüller / Sertifikalar / Teşekkürler */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tab {
  padding: .45rem 1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--border-red); border-bottom: 0;
  background: #fffdf8; color: var(--red-dark);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.tab:hover { background: #f3e3e3; }
.tab--on { background: linear-gradient(180deg, #c62c2c, var(--red-dark)); color: #fff; border-color: var(--red-dark); }
.tab--on:hover { color: #fff; }

.docgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.doc { margin: 0; }
.doc__img {
  background: var(--photo-bg); border: 1px solid var(--border-red);
  border-radius: var(--radius-sm); padding: .4rem; cursor: zoom-in;
  display: grid; place-items: center; min-height: 150px;
}
.doc__img img { width: 100%; height: 240px; object-fit: contain; }
.doc figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: .4rem; text-align: center; }

.submenu__all { color: var(--red) !important; font-weight: 700; }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.contact-card { border: 1px solid var(--border-red); border-radius: var(--radius); padding: 1rem; background: #fffdf8; }
.contact-card h3 { font-size: 15px; margin-bottom: .5rem; }
.contact-card dl { display: grid; gap: .4rem; font-size: 13.5px; margin-top: .6rem; }
.contact-card dt { font-weight: 700; color: var(--red-dark); }
.contact-card dd { margin: 0; }
.map-frame { border: 1px solid var(--border-red); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, #fbf8f0, var(--cream-200));
  border-top: 2px solid var(--red-dark);
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
  font-size: 12.5px; color: var(--ink-soft);
}
.site-footer strong { color: var(--red-dark); font-size: 14px; }
.site-footer p { margin-bottom: .4rem; }
.site-footer a { font-weight: 600; }
.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem;
  margin: .75rem 0; list-style: none; padding: 0;
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { color: var(--ink-faint); margin-top: .6rem; }

/* --- Lightbox ----------------------------------------------------------- */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96dvh; }
dialog.lightbox::backdrop { background: rgb(0 0 0 / .8); }
dialog.lightbox img { max-width: 96vw; max-height: 88dvh; width: auto; background: #fff; border-radius: 6px; }
.lightbox__close {
  position: absolute; top: .4rem; inset-inline-end: .4rem;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: 20px;
}

@media print {
  .social-strip, .menubar, .sidebar, .site-footer, .toolbar, .slider__btn { display: none !important; }
  .shell { box-shadow: none; }
  body { background: #fff; }
}

.shots--wide { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.shots--wide .shots__item { cursor: zoom-in; }
.shots--wide .shots__item { display: grid; place-items: center; }
.shots--wide img { width: auto; max-width: 100%; height: auto; }

/* --- Site Haritası ------------------------------------------------------
   The original laid this out as a six-column bordered table; here it is a
   responsive grid of the same columns. */
.smap {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  background: #fffdf8;
  border: 1px solid var(--border);
}
/* Dividers are drawn by the columns themselves, so an unfilled row stays the
   same cream as the columns instead of showing the grid background. */
.smap__col { background: #fffdf8; padding: .7rem .8rem 1rem; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.smap__col h3 {
  font-size: 13.5px; font-weight: 700; color: var(--red-dark);
  text-align: center; text-decoration: underline;
  text-underline-offset: .2em;
  padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.smap__col ul { list-style: none; margin: 0; padding: 0; }
.smap__col li { margin: 0; }
.smap__col a {
  display: block; padding: .22rem 0 .22rem .8rem;
  position: relative;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  color: var(--red-dark); text-decoration: none;
}
.smap__col a::before {
  content: "»"; position: absolute; inset-inline-start: 0;
  color: var(--red); font-weight: 700;
}
.smap__col a:hover { color: var(--red); text-decoration: underline; }

/* ==========================================================================
   Modern catalogue layer
   Borrowed from contemporary DTC cookware sites: serif display type with
   tracked eyebrows, pill buttons, soft image panels, generous spacing, a
   trust strip, a values marquee and split feature blocks. The Eternity
   identity (cream band, red menu bar, left sidebar) is left in place.
   ========================================================================== */
:root {
  /* Headings in Segoe UI (trial). The previous serif, to switch back:
     "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif */
  --serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --page: #fcfaf5;
  --band: #f6f0e4;
  --card-img: #f3ede2;
  --pill-cream: #f1e4c6;
  --ink: #2a211d;
  --ink-soft: #6a5d55;
  --line: #eadfcd;
}

body { background: var(--page); letter-spacing: .01em; color: var(--ink); }
.shell { background: var(--page); }

h1, h2, h3, h4, .pagetitle, .box__head, .awards__title, .tile__name,
.mega__col h4, .smap__col h3, .panel__head {
  font-family: var(--serif);
  letter-spacing: -.005em;
}

.eyebrow {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin-bottom: .55rem;
}
.center { text-align: center; }

/* --- Buttons: pills ------------------------------------------------------ */
.btn {
  border-radius: 999px; padding: .78rem 1.45rem;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  transition: background-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn--primary:hover { background: #7a0000; color: #fff; box-shadow: 0 6px 18px rgb(153 0 0 / .22); }
.btn--ghost, .btn--cream { background: var(--pill-cream); border-color: transparent; color: var(--ink); }
.btn--ghost:hover, .btn--cream:hover { background: #ead7ad; color: var(--ink); }

/* --- Softer content boxes ------------------------------------------------ */
.layout { gap: 1.6rem; padding: 1.6rem clamp(1rem, 2vw, 1.6rem); }
.content { gap: 1.6rem; }
.box { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.box__head {
  background: var(--band); border-bottom: 1px solid var(--line);
  font-size: 19px; font-weight: 600; color: var(--red-dark);
  padding: .9rem 1.2rem;
}
.box__head--red {
  background: linear-gradient(180deg, #b01e1e, var(--red-dark));
  color: #fff; font-size: 24px; padding: 1rem 1.2rem;
}
.box__body { padding: 1.3rem 1.4rem; }
.pagetitle {
  background: transparent; border: 0; border-radius: 0; padding: .2rem 0 0;
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; color: var(--ink);
  text-align: left;
}
.pagetitle::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: .6rem;
  background: var(--red); border-radius: 2px;
}
.crumb { background: transparent; border: 0; padding: 0; font-size: 13px; }
.prose p { line-height: 1.75; }
.panel { border-radius: 14px; }
.panel__head { font-size: 19px; font-weight: 600; letter-spacing: 0; }

/* --- Announcement bar ---------------------------------------------------- */
.announce {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* the same warm charcoal as the footer */
  background: #1f1a17; color: #e6ddd2;
  padding: .45rem clamp(.75rem, 2vw, 1.5rem);
  font-size: 12.5px; letter-spacing: .03em;
}
.announce__msgs {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 2.2rem;
}
.announce__msgs li { position: relative; }
.announce__msgs li + li::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: -1.15rem;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--red);
}
.announce__social { display: flex; gap: .4rem; }
.announce__social a {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: #fbe9e9; border-radius: 50%;
}
.announce__social a:hover { background: rgb(255 255 255 / .15); color: #fff; }
.announce__social svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .announce__msgs li:not(:first-child) { display: none; }
  .announce__msgs { margin: 0; }
}

/* --- Search pill in the masthead ----------------------------------------- */
.msearch {
  position: relative; align-self: center; flex: 1;
  max-width: 440px; margin: 7px auto 0;
}
.msearch input {
  width: 100%; border-radius: 999px;
  border: 1px solid #d8c9a8; background: #fffdf8;
  padding: .68rem 1rem .68rem 2.6rem; font-size: 14px;
  box-shadow: inset 0 1px 2px rgb(60 40 20 / .06);
}
.msearch input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgb(204 0 0 / .12); }
.msearch svg {
  position: absolute; inset-inline-start: 1rem; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: #9a8b7c; pointer-events: none;
}
@media (max-width: 1100px) { .msearch { display: none; } }

/* --- Home: hero ------------------------------------------------------------ */
.hero2 {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--band); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
}
.hero2__text {
  padding: clamp(1.6rem, 3.5vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero2__text h1 {
  font-size: clamp(32px, 3.6vw, 52px); font-weight: 600; line-height: 1.08;
  color: var(--ink); margin-bottom: 1rem;
}
.hero2__text p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; max-width: 46ch; }
.hero2__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero2 .slider { background: #fff; border-inline-start: 1px solid var(--line); }
.hero2 .slider__track { max-height: none; height: 100%; min-height: 380px; aspect-ratio: auto; }
@media (max-width: 1000px) {
  .hero2 { grid-template-columns: 1fr; }
  .hero2 .slider { border-inline-start: 0; border-top: 1px solid var(--line); }
  .hero2 .slider__track { min-height: 0; aspect-ratio: 620 / 400; height: auto; }
}

/* --- Trust strip ----------------------------------------------------------- */
.trust {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  padding: 1.3rem 1.5rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
}
.trust__item { display: flex; align-items: center; gap: .85rem; }
.trust__item svg { width: 34px; height: 34px; flex: none; color: var(--red-dark); }
.trust__item strong { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.trust__item span { display: block; font-size: 13px; color: var(--ink-soft); }

/* --- Product cards --------------------------------------------------------- */
.cards {
  display: grid; gap: 2rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
}
.pcard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.pcard:hover { color: var(--ink); }
.pcard__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--card-img); border-radius: 14px;
  display: grid; place-items: center; padding: 1.4rem;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;          /* white-backed product shots sit on the tinted panel */
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__badges { position: absolute; top: .7rem; inset-inline-start: .7rem; display: flex; gap: .35rem; z-index: 1; }
.badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .36rem .55rem; border-radius: 5px;
  background: var(--pill-cream); color: var(--ink);
}
.badge--red { background: var(--red-dark); color: #fff; }
.pcard__name { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; margin-top: .85rem; }
.pcard__meta { font-size: 13px; color: var(--ink-soft); margin-top: .25rem; }
.swatches { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.sw {
  width: 22px; height: 22px; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #dccfbb;
}
.sw-more { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.pcard__cta {
  margin-top: .65rem; font-size: 13.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1.5px;
}
.pcard:hover .pcard__cta { color: var(--red); }

/* --- Featured tabs + rail -------------------------------------------------- */
.featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.tabs2 { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.tabs2 button {
  background: none; border: 0; padding: 0 0 .25rem;
  font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600;
  color: #b3a597; cursor: pointer;
}
.tabs2 button[aria-selected="true"] {
  color: var(--ink); text-decoration: underline;
  text-underline-offset: .3em; text-decoration-thickness: 2px;
}
.rail-nav { display: flex; gap: .5rem; }
.rail-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center;
}
.rail-nav button:hover { border-color: var(--ink); }
.rail-nav svg { width: 18px; height: 18px; }
.rail {
  display: grid; grid-auto-flow: column; gap: 1.25rem;
  grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: .3rem;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .pcard { scroll-snap-align: start; }
@media (max-width: 1200px) { .rail { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); } }
/* Phones: two cards at a time, like the category grids. */
@media (max-width: 760px)  { .rail { gap: .75rem; grid-auto-columns: calc((100% - .75rem) / 2); } }
.featured__all { text-align: center; margin-top: 1.6rem; }

/* --- Values marquee -------------------------------------------------------- */
.marquee { overflow: hidden; border-radius: 16px; background: var(--red-dark); color: #fff; padding: 1.05rem 0; }
.marquee__track {
  display: flex; align-items: center; gap: 3rem; width: max-content;
  padding-inline-start: 3rem;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { white-space: nowrap; }
.m-sans { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.m-serif { font-family: var(--serif); font-size: 24px; font-weight: 600; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* --- Series circles -------------------------------------------------------- */
.section2 { padding: .6rem 0; }
.section2 h2, .tl h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; color: var(--ink); margin-bottom: 1.6rem; }
.circles { display: grid; gap: 1.8rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.circle { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--ink); }
.circle__img {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--card-img); display: grid; place-items: center; padding: 16%;
  transition: transform .3s, box-shadow .3s;
}
.circle__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.circle:hover .circle__img { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(60 40 20 / .12); }
.circle__label { font-family: var(--serif); font-size: 15.5px; font-weight: 600; margin-top: .75rem; line-height: 1.25; }
.circle__cta { font-size: 12.5px; color: var(--ink-soft); margin-top: .2rem; }
.circle:hover .circle__cta { color: var(--red); }

/* --- Split feature --------------------------------------------------------- */
.split2 { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #efe4d0; }
.split2__media { background: #fff; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.split2__media img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.split2__body { padding: clamp(1.6rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.split2__body h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; color: var(--ink); line-height: 1.15; margin-bottom: .9rem; }
.split2__body > p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.1rem; }
.checks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
.checks svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; color: #fff; background: var(--red-dark); border-radius: 50%; }
.split2__body .btn { align-self: flex-start; }
@media (max-width: 900px) { .split2 { grid-template-columns: 1fr; } }

/* --- Story + awards -------------------------------------------------------- */
.story2 { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.story2__text h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; color: var(--ink); margin-bottom: .9rem; }
.story2__text p { color: var(--ink-soft); line-height: 1.75; margin-bottom: .9rem; max-width: 62ch; }
.story2__awards {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.1rem; align-items: center;
  background: var(--band); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem;
}
.story2__awards img { width: 100%; height: auto; border-radius: 10px; }
.story2__awards h3 { font-size: 20px; font-weight: 600; color: var(--red-dark); margin-bottom: .5rem; }
.story2__awards p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: .6rem; }
@media (max-width: 900px) { .story2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .story2__awards { grid-template-columns: 1fr; } }

/* --- Timeline (Kuruluş) ---------------------------------------------------- */
.tl { padding: 1rem 0 .4rem; }
.tl__list {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.tl__list::before { content: ""; position: absolute; inset-inline: 0; top: 23px; height: 2px; background: var(--line); }
.tl__list li { position: relative; padding-top: 3.2rem; }
.tl__list li::before {
  content: ""; position: absolute; top: 16px; inset-inline-start: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red-dark); box-shadow: 0 0 0 4px var(--page);
}
.tl__year { display: block; font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--red-dark); line-height: 1; }
.tl__text { display: block; font-size: 14px; color: var(--ink-soft); margin-top: .5rem; line-height: 1.55; }

/* --- Footer ---------------------------------------------------------------- */
/* Dark, warm charcoal: the page ends as clearly as the red header starts it. */
.site-footer {
  --f-bg: #1f1a17; --f-text: #cfc4b8; --f-soft: #9d9186; --f-line: rgb(255 255 255 / .1);
  background: var(--f-bg); border-top: 3px solid var(--red);
  padding: 2.8rem clamp(1rem, 3vw, 2.5rem) 1.4rem; text-align: left;
  font-size: 14px; color: var(--f-text);
}
.fcols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
.fcol h4 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: .8rem; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fcol a { color: var(--f-text); text-decoration: none; font-weight: 400; transition: color .15s; }
.fcol a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; }
.fcol a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-footer .fcol--brand .fcol__logo { width: 220px; height: auto; mix-blend-mode: normal; margin-bottom: .9rem; }
.fcol--brand p { line-height: 1.6; max-width: 34ch; }
.fsocial { display: flex; gap: .45rem; margin-top: 1rem; }
.fsocial a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .08); border: 1px solid var(--f-line); color: #fff; }
.fsocial a:hover { background: var(--red); border-color: var(--red); color: #fff; text-decoration: none; }
.fsocial svg { width: 15px; height: 15px; }
/* Güzeliş Porselen, the company behind Eternity */
.fmaker {
  display: flex; align-items: center; gap: .75rem; margin-top: 1.2rem;
  max-width: 34ch; text-decoration: none; color: var(--f-soft);
  font-size: 12.5px; line-height: 1.45;
  padding-top: 1.1rem; border-top: 1px solid var(--f-line);
}
.fcol--brand .fmaker img { width: 50px; height: auto; flex: none; mix-blend-mode: normal; margin: 0; }
.fcol .fmaker:hover { text-decoration: none; }
.fmaker:hover span { color: #fff; }
/* Company pages: the building, then the company and brand marks under it */
.intro-split > div:first-child:has(.companylogos) { flex-direction: column; gap: 1.4rem; }
.companylogos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.6rem; text-align: center;
}
.intro-split .companylogos img { border: 0; border-radius: 0; }
.companylogos img:first-child { width: 110px; height: auto; }
.companylogos img:last-of-type { width: 170px; height: auto; }
.companylogos__rule { width: 1px; height: 70px; background: var(--line); }
.companylogos p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-soft); }

/* The company, at the left end of the announcement bar */
.announce__maker {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  color: #f1dfb4; text-decoration: none; font-size: 12px; letter-spacing: .04em;
}
.announce__maker img { width: 26px; height: auto; }
.announce__maker:hover { color: #fff; }
@media (max-width: 760px) { .announce__maker span { display: none; } }
.fbottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--f-line);
  font-size: 12.5px; color: var(--f-soft);
  /* keep clear of the back-to-top and accessibility buttons */
  padding-inline-end: 4.5rem;
}
.fbottom a { color: var(--f-text); }
@media (max-width: 1000px) { .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fcol--brand { grid-column: 1 / -1; } }
/* Phones keep the two columns: one long list of links is harder to scan
   than two short ones, and it pushes the contact details far down. */
@media (max-width: 520px) {
  .fcols { gap: 1.5rem 1.2rem; }
  .fcol h4 { font-size: 15px; }
  .fcol ul { gap: .55rem; }
}

/* The rail scrolls horizontally; without an explicit minmax(0,1fr) track its
   scroll content inflated the content grid and pushed siblings off-screen. */
.content { grid-template-columns: minmax(0, 1fr); }
.content > * { min-width: 0; }

/* Portrait product shots were stretching their circle into an oval: take the
   image out of flow so aspect-ratio alone sizes the disc. */
.circle__img { position: relative; overflow: hidden; padding: 0; }
.circle__img img { position: absolute; inset: 0; margin: auto; width: 66%; height: 66%; object-fit: contain; }

/* ==========================================================================
   Pages recovered from the original Site Haritası
   ========================================================================== */
.newsitem--link { display: flex; flex-direction: column; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.newsitem--link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(125 16 16 / .12); }
.newsitem--link .newsitem__title { flex: 1; }
.newsitem__more { padding: 0 .6rem .55rem; font-size: 12px; font-weight: 700; color: var(--red); background: var(--cream-100); }

.article__sub { font-size: 17px; margin-bottom: .8rem; }
.article__shots { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.article p { text-align: justify; }
.article .note { margin-bottom: 1rem; }

.gallery__h { font-size: 15px; margin: 1.2rem 0 .6rem; }
.gallery__h:first-child { margin-top: 0; }
.docgrid--scan { grid-template-columns: repeat(auto-fill, minmax(min(125px, 100%), 1fr)); gap: .6rem; }
.docgrid--scan .doc__img img { height: auto; max-height: 190px; }
@media (max-width: 620px) { .docgrid--scan .doc__img img { max-height: 150px; } }
.docgrid--captioned { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.doc figcaption strong { display: block; color: var(--red-dark); font-size: 13px; margin-bottom: .25rem; }
.doc figcaption span { display: block; text-align: start; line-height: 1.5; }
.docgrid--captioned figcaption { text-align: start; }
.docgrid--fair .doc__img img { height: auto; max-height: 180px; }

.films { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.film { margin: 0; border: 1px solid var(--border-red); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.film__img { aspect-ratio: 4/3; background: var(--photo-bg); display: grid; place-items: center; padding: .5rem; border-bottom: 1px solid var(--border); }
.film__img img { width: 100%; height: 100%; object-fit: contain; }
.film figcaption { padding: .7rem; display: grid; gap: .55rem; background: var(--cream-100); flex: 1; align-content: start; }
.film figcaption strong { color: var(--red-dark); font-size: 14px; }
.film .note { font-size: 12px; }
.film .btn { justify-self: start; }

.seclist--inline { display: flex; flex-wrap: wrap; gap: .5rem; }

.subhead { font-size: 15px; margin: 1.1rem 0 .5rem; }
.ctable-wrap { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--border-red); border-radius: var(--radius-sm); }
.ctable thead th { background: var(--cream-100); color: var(--red-dark); font-size: 12.5px; }
.ctable td { vertical-align: middle; }
.ctable__prod { min-width: 150px; }
.ctable__prod img { width: 110px; height: auto; display: block; margin-bottom: .3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.ctable__prod span { font-weight: 700; color: var(--red-dark); font-size: 13px; }

/* Bize Ulaşın / İş Başvuru Formu */
.form { display: grid; gap: 1rem; }
.form__grid { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.form__set { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem 1rem; margin: 0; display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.form__set legend { padding: 0 .4rem; font-family: var(--font-display); font-weight: 700; color: var(--red-dark); font-size: 15px; }
.form__row { display: grid; gap: .3rem; align-content: start; }
.form__row--wide { grid-column: 1 / -1; }
.form__row label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.form input, .form select, .form textarea {
  width: 100%; padding: .55rem .7rem; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fffdf8;
}
.form textarea { resize: vertical; min-height: 5.5rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }
.form [aria-invalid="true"] { border-color: var(--red); background: #fff4f4; }
.form__error { color: var(--red-dark); font-weight: 700; font-size: 13.5px; }
.form .btn { justify-self: start; padding: .6rem 1.6rem; }

/* ==========================================================================
   Menu bar dropdowns: Ürünler (collections) and Kategoriler
   ========================================================================== */
.mainnav a .down { width: 13px; height: 13px; margin-inline-start: .3rem; opacity: .85; transition: rotate .18s; }
@media (min-width: 1025px) {
  .navdrop {
    position: absolute; top: 100%; inset-inline: 1rem; z-index: 80;
    max-width: 1180px; margin-inline: auto;
    background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--red);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 18px 50px rgb(40 25 20 / .22);
    padding: 1.4rem 1.6rem 1.6rem;
    opacity: 0; visibility: hidden; translate: 0 6px;
    transition: opacity .16s, translate .16s, visibility .16s;
  }
  .mainnav__drop:hover > .navdrop,
  .mainnav__drop:focus-within > .navdrop { opacity: 1; visibility: visible; translate: 0 0; }
  .mainnav__drop:hover > a,
  .mainnav__drop:focus-within > a { background: rgb(0 0 0 / .18); }
  .mainnav__drop:hover > a .down { rotate: 180deg; }
}
@media (max-width: 1024.98px) { .navdrop { display: none; } }

.navdrop__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.8rem; }
.navdrop__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .9rem;
}
.navtiles { display: grid; gap: 1rem 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.navtiles--cats { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Picture tile: white product shot over a thin rule; on hover a dark panel
   carries the name, as on eternitycook.com. */
.mainnav .navdrop a.navtile {
  position: relative; display: block; padding: 0 0 .6rem; border: 0;
  border-bottom: 1px solid #e3e3e3; background: transparent;
  color: var(--ink); text-decoration: none; white-space: normal; font-size: 13px;
}
.navtile__img {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: #fff; overflow: hidden;
}
.navtile__img img { width: 100%; height: 100%; object-fit: contain; transition: scale .3s; }
.navtile__img::after {
  content: ""; position: absolute; inset: 0; background: rgb(62 62 62 / 0);
  transition: background-color .2s;
}
.navtile__name {
  display: block; margin-top: .5rem; text-align: center;
  font-weight: 700; line-height: 1.25; color: var(--ink);
  transition: color .2s;
}
.navtile__count { display: block; font-size: 11.5px; color: var(--ink-faint); text-align: center; margin-top: .15rem; }
.mainnav .navdrop a.navtile:hover .navtile__img::after,
.mainnav .navdrop a.navtile:focus-visible .navtile__img::after { background: rgb(62 62 62 / .85); }
.mainnav .navdrop a.navtile:hover .navtile__img img { scale: 1.05; }
.mainnav .navdrop a.navtile:hover .navtile__name,
.mainnav .navdrop a.navtile:focus-visible .navtile__name {
  position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 3; margin: 0; z-index: 1;
  display: grid; place-items: center; padding: .6rem;
  color: #fff; font-size: 15px; font-weight: 500;
}
.mainnav .navdrop a.navtile:hover .navtile__count { visibility: hidden; }

.navdrop__side { border-inline-start: 1px solid #eee; padding-inline-start: 1.6rem; }
.mainnav .navdrop ul.navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; height: auto; }
.mainnav .navdrop .navlist li { display: block; }
.mainnav .navdrop .navlist a {
  display: flex; align-items: center; gap: .6rem; padding: .26rem .35rem; border: 0;
  font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  border-radius: 4px; white-space: normal;
}
.mainnav .navdrop .navlist a:hover { background: #f8f1ea; color: var(--red); }
.navlist img { width: 34px; height: 26px; object-fit: contain; background: #fff; flex: none; }

/* ==========================================================================
   Category rail (small screens) and category pages
   ========================================================================== */
.catrail { display: none; }
@media (max-width: 1024.98px) {
  .catrail { display: block; background: #fffdf8; border-bottom: 1px solid var(--border); }
  .catrail__track {
    display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity;
    padding: .65rem .75rem .55rem; scrollbar-width: none;
  }
  .catrail__track::-webkit-scrollbar { display: none; }
  .catrail a {
    flex: none; scroll-snap-align: start;
    display: grid; justify-items: center; align-content: start; gap: .3rem; width: 80px;
    text-decoration: none; color: var(--ink); font-size: 11.5px; font-weight: 600;
    text-align: center; line-height: 1.2;
  }
  .catrail img {
    width: 60px; height: 60px; object-fit: contain; background: #fff;
    border: 1px solid var(--border); border-radius: 50%; padding: 6px;
  }
  .catrail a:hover img, .catrail a:focus-visible img { border-color: var(--red); }
  .catrail a.catrail__all { align-self: center; width: auto; padding: 0 .6rem; color: var(--red-dark); white-space: nowrap; }
}

a.chip { text-decoration: none; }
.chip--on { background: linear-gradient(180deg, #c62c2c, var(--red-dark)); border-color: var(--red-dark); color: #fff; }
.chip--on:hover { color: #fff; }
@media (max-width: 640px) {
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .chips--scroll .chip { flex: none; }
}

/* Collection intro on the Eternity Cook series pages */
.coll { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.4rem; margin-bottom: 1.4rem; align-items: start; }
.coll__media img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.coll__body h3 { font-size: 16px; margin: 1rem 0 .5rem; }
@media (max-width: 760px) { .coll { grid-template-columns: 1fr; } }
.spec--boxed { border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.spec--boxed th { width: 38%; background: var(--cream-100); color: var(--red-dark); font-weight: 700; }

/* ==========================================================================
   Sidebar section labels and the mobile drawer
   ========================================================================== */
.panel__list > li.panel__label {
  padding: .45rem .7rem .35rem; background: var(--cream-100); border-top: 1px solid #e8d9d9;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red-dark);
}
.drawer__head, .drawer__nav, .drawer__cats, .drawer-backdrop { display: none; }

@media (max-width: 1024.98px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 210;
    width: min(88vw, 380px); height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff;
    padding: 0 .75rem 2rem; gap: .8rem; align-content: start;
    box-shadow: 8px 0 40px rgb(0 0 0 / .25);
    translate: -105% 0; visibility: hidden;
    transition: translate .26s ease, visibility .26s;
  }
  html[data-drawer="open"] .sidebar { translate: 0 0; visibility: visible; }
  html[data-drawer="open"] { overflow: hidden; }
  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: rgb(20 10 5 / .5); opacity: 0; visibility: hidden;
    transition: opacity .26s, visibility .26s;
  }
  html[data-drawer="open"] .drawer-backdrop { opacity: 1; visibility: visible; }

  .drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -.75rem; padding: .5rem .75rem;
    background: #fff;
    border-bottom: 3px solid var(--red);
  }
  .drawer__head img { width: 150px; height: auto; }
  .drawer__close {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d5c9ae;
    background: #fffdf7; color: var(--red-dark); font-size: 26px; line-height: 1;
  }
  .drawer__nav { display: block; }
  .drawer__nav ul {
    list-style: none; margin: 0; padding: 0; border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(180deg, #d63030 0%, var(--red) 40%, #a80f0f 100%);
  }
  .drawer__nav li + li { border-top: 1px solid rgb(255 255 255 / .2); }
  .drawer__nav ul a {
    display: flex; justify-content: space-between; padding: .8rem 1rem;
    color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  }
  .drawer__nav ul a::after { content: "›"; opacity: .8; }
  .drawer__lang { display: flex; gap: 1.2rem; padding: .7rem .2rem 0; }
  .drawer__lang a { font-size: 12.5px; font-weight: 700; text-transform: uppercase; color: var(--red-dark); text-decoration: none; }

  .drawer__cats { display: block; }
  .dcats { list-style: none; margin: 0; padding: .6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .dcats a {
    display: grid; justify-items: center; gap: .3rem; padding: .45rem .25rem;
    border: 1px solid #eee2d2; border-radius: var(--radius-sm); background: #fff;
    text-decoration: none; color: var(--ink); font-size: 11.5px; font-weight: 600;
    text-align: center; line-height: 1.2;
  }
  .dcats img { width: 52px; height: 44px; object-fit: contain; }

  /* Series rows: bigger touch targets */
  .panel__list > li > a,
  .panel__list > li > .panel__parent { padding: .75rem .9rem; font-size: 14px; }
}

/* --- Phones: denser catalogue, menu bar always reachable ------------------ */
@media (max-width: 1024.98px) {
}
@media (max-width: 640px) {
  .layout { padding: .75rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .75rem; }
  .pcard__media { padding: .6rem; border-radius: 10px; }
  .pcard__name { font-size: 15px; margin-top: .55rem; }
  .pcard__meta { font-size: 12px; }
  .pcard__cta { font-size: 12.5px; }
  .pcard__badges { top: .4rem; inset-inline-start: .4rem; }
  .badge { font-size: 9px; padding: .25rem .4rem; }
  .sw { width: 16px; height: 16px; }
  .box__body { padding: .9rem; }
  .pager { flex-direction: column; }
  .pager .btn { justify-content: center; text-align: center; }
}

/* --- Product page for the PRO 800 / EN-ERGIA / EN GRANIT lines and BLEND ---
   The photographs are large square shots on white, so they are held to a
   sensible size beside the details instead of filling the column. */
.pview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6rem; align-items: start; }
.pview__main {
  display: grid; place-items: center; cursor: zoom-in;
  border: 1px solid var(--border-red); border-radius: var(--radius-sm); background: #fff;
  padding: 1rem; aspect-ratio: 1 / 1; max-height: 460px;
}
.pview__main img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.pview__opts { margin-top: .8rem; }
.pview__opts-label { font-size: 13px; color: var(--ink-soft); margin-bottom: .45rem; }
.pview__opts-label strong { color: var(--red-dark); }
.pview__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; }
.pview__thumb {
  display: grid; gap: .2rem; justify-items: center; padding: .3rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  font-size: 11px; line-height: 1.2; color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pview__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.pview__thumb:hover { border-color: var(--red); }
.pview__thumb[aria-pressed="true"] { border-color: var(--red-dark); box-shadow: 0 0 0 2px var(--red-dark) inset; color: var(--red-dark); font-weight: 700; }
.pview__info .subhead:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .pview { grid-template-columns: 1fr; }
  .pview__main { max-height: 340px; }
  .pview__main img { max-height: 300px; }
}

/* ==========================================================================
   Original photographs at their real size
   Most archive pictures are 50–350px wide. Stretching them to the column
   made them blurry, so they are never scaled up — only down when a screen is
   narrower than the picture.
   ========================================================================== */
.intro-split > div:first-child { display: flex; justify-content: center; align-items: center; }
/* Pages with no picture beside the button list give it the full width. */
.intro-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.intro-split img { width: auto; max-width: 100%; height: auto; }

.shots--natural { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.shots--natural .shots__item { flex: 0 1 auto; max-width: 100%; padding: .35rem; }
.shots--natural .shots__item img { width: auto; max-width: 100%; height: auto; }
.shots--float {
  float: right; flex-direction: column; align-items: flex-end;
  max-width: 48%; margin: 0 0 1rem 1.5rem;
}
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 640px) {
  .shots--float { float: none; max-width: 100%; margin: 0 0 1rem; align-items: center; flex-direction: row; justify-content: center; }
}

.doc__img img { width: auto; height: auto; max-width: 100%; max-height: 240px; }
.docgrid--scan .doc__img img { max-height: 190px; }
.docgrid--fair .doc__img img { max-height: 180px; }
.newsitem__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.film__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.article__shots.shots--natural { display: flex; }

/* --- Lightbox: centred, sized by script to the picture ------------------- */
dialog.lightbox {
  position: fixed; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  max-width: 94vw; max-height: 94dvh; overflow: visible;
  border: 0; padding: 0; background: transparent;
}
dialog.lightbox[open] { display: grid; place-items: center; animation: lb-in .18s ease-out; }
dialog.lightbox::backdrop { background: rgb(20 12 8 / .82); backdrop-filter: blur(2px); }
dialog.lightbox img {
  display: block; width: auto; height: auto;
  max-width: 92vw; max-height: 88dvh;
  background: #fff; padding: 12px; border-radius: 8px;
  box-shadow: 0 20px 60px rgb(0 0 0 / .45);
}
dialog.lightbox .lightbox__close {
  position: absolute; top: -14px; inset-inline-end: -14px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #fff; background: var(--red-dark); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
dialog.lightbox .lightbox__close:hover { background: var(--red); }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  dialog.lightbox .lightbox__close { top: -18px; inset-inline-end: -6px; }
}

/* --- Header pot and footer logo ------------------------------------------ */
.masthead__pot { align-self: center; }
.masthead__pot img { height: 75px; width: auto; mix-blend-mode: multiply; }
.fcol__logo { width: 240px; max-width: 100%; height: auto; mix-blend-mode: multiply; }

/* Search inside the mobile drawer */
.drawer__search { display: none; }
@media (max-width: 1024.98px) {
  .drawer__search { display: block; position: relative; }
  .drawer__search svg {
    position: absolute; inset-inline-start: .8rem; top: 50%; translate: 0 -50%;
    width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none;
  }
  .drawer__search input {
    width: 100%; padding: .7rem .9rem .7rem 2.5rem; font-size: 15px;
    border: 1px solid var(--border); border-radius: 999px; background: #fff;
  }
  .drawer__search input:focus { outline: 2px solid var(--red); border-color: var(--red); }
}

.variant__media { display: grid; align-content: center; justify-items: center; gap: .4rem; min-height: 230px; }

/* The hidden attribute must win over component display rules (the catalogue
   filter hides cards whose own rule is display:flex). */
[hidden] { display: none !important; }

/* --- Original header pot, flush with the band as on the old site ---------- */
.masthead { padding-inline-end: 0; }
.masthead__tools { align-self: flex-start; padding-top: 0; }
.masthead__pot { align-self: flex-start; }
.masthead__pot img { width: 187px; height: 88px; mix-blend-mode: normal; }

/* --- Live search suggestions ---------------------------------------------- */
.msearch, .drawer__search { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 120;
  min-width: 340px; max-height: min(70vh, 520px); overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgb(40 25 20 / .2); padding: .35rem;
}
.suggest__row {
  display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem;
  border-radius: 8px; text-decoration: none; color: var(--ink);
}
.suggest__row:hover, .suggest__row[aria-selected="true"] { background: #f8f1ea; }
.suggest__img {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  background: #fff; border: 1px solid #eee4d6; border-radius: 6px; overflow: hidden;
}
.suggest__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.suggest__row--s .suggest__img, .suggest__row--c .suggest__img { border-radius: 50%; }
.suggest__text { display: grid; min-width: 0; }
.suggest__text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest__text small { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest__all {
  display: block; margin-top: .25rem; padding: .6rem .5rem; border-top: 1px solid #eee;
  font-size: 13px; font-weight: 700; color: var(--red-dark); text-decoration: none; text-align: center;
}
.suggest__all:hover { color: var(--red); }
.suggest__none { padding: .8rem; font-size: 13px; color: var(--ink-faint); text-align: center; }
@media (max-width: 1024.98px) { .suggest { min-width: 0; } }

/* --- İletişim: one Google map per site ----------------------------------- */
.maps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.map { margin: 0; display: grid; gap: .55rem; }
.map figcaption { display: grid; gap: .1rem; }
.map figcaption strong { font-family: var(--font-display); color: var(--red-dark); font-size: 15px; }
.map figcaption span { font-size: 13px; color: var(--ink-soft); }
.map .map-frame { aspect-ratio: 4 / 3; }
.map__link { justify-self: start; font-size: 13px; font-weight: 700; color: var(--red-dark); text-decoration: none; }
.map__link:hover { color: var(--red); text-decoration: underline; }

/* Menu tiles: the picture is laid inside its 4:3 box so the whole product
   shows and the name sits below it instead of over the bottom of the photo. */
.navtile__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: .35rem;
}

/* --- Header band: one continuous red line, images blended into the band ----
   The logo and pot JPEGs each carried their own slice of the red line (6px,
   with a rounded corner on the pot) and a rectangular background, which left
   steps and seams. Both are now cut below the line and feathered at the
   edges (logo-band.png, pot-band.png); the line is drawn once, full width, and
   the band colours are sampled row by row from the images. */
.masthead {
  background: linear-gradient(180deg,
    #e5d8ab 0, #e4d6b3 12px, #e4d4b0 18px, #e3d4ad 24px, #e2d3ac 30px,
    #e1d2a9 36px, #e0d1a8 42px, #e1d3ac 48px, #e2d3b2 54px, #e3d6b6 60px,
    #e1d6ba 66px, #dbd1b6 72px, #dcd4bd 78px, #e0d9c7 84px, #e2dccc 88px);
  background-color: #e2dccc;
}
.masthead__logo img { width: 421px; height: auto; margin-top: 0; }
.masthead__pot img { width: 187px; height: 82px; margin-top: 6px; }
@media (max-width: 900px) {
  .masthead { padding-block: 0 .35rem; }
  .masthead__logo img { width: 300px; }
}

/* --- Bigger product pictures in the home circles and the menu tiles -------
   The photographs carry a wide white margin, so they are shown larger inside
   their frame (the frame crops the empty edges, not the product). */
.circles { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.circle__img img { width: 92%; height: 92%; }

.navtile__img { aspect-ratio: 5 / 4; }
.navtile__img img { padding: 0; scale: 1.18; }
.navtile:hover .navtile__img img { scale: 1.24; }
.navtiles { gap: 1.1rem 1.4rem; }
.navtiles--cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mainnav .navdrop a.navtile:hover .navtile__name,
.mainnav .navdrop a.navtile:focus-visible .navtile__name { aspect-ratio: 5 / 4; }

/* A colour the range is made in but which we have no photograph of: shown as
   a dot, not clickable. */
.pview__thumb--swatch { background: #fffdf8; }
/* Only the colours we have no photograph of are inert; a colour that changes
   the picture is a button and keeps the pointer and the hover. */
span.pview__thumb--swatch { cursor: default; }
span.pview__thumb--swatch:hover { border-color: var(--border); }
.pview__dot {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 1px solid rgb(0 0 0 / .18); box-shadow: inset 0 -3px 6px rgb(0 0 0 / .12);
}
.pview__opts-note { font-weight: 400; color: var(--ink-faint); font-size: 12px; }

/* Colour options on the legacy product pages */
.swatchgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.swatchcard { margin: 0; display: grid; gap: .4rem; }
.swatchcard__img {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem; cursor: zoom-in; display: grid; place-items: center;
}
.swatchcard__img img { width: 100%; height: auto; }
.swatchcard figcaption { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pview__dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pview__dot { overflow: hidden; }

/* Menu tiles: centre an incomplete last row instead of leaving a gap. */
@media (min-width: 1025px) {
  .navtiles { display: flex; flex-wrap: wrap; justify-content: center; }
  .navtiles > .navtile { flex: 0 0 calc((100% - 3 * 1.4rem) / 4); }
  .navtiles--cats > .navtile { flex: 0 0 calc((100% - 3 * 1.4rem) / 4); }
}

/* ==========================================================================
   Cookie notice (vanilla-cookieconsent) and the gate on the Google Maps embeds
   ========================================================================== */
#cc-main {
  --cc-font-family: inherit;
  --cc-bg: #fffdf8;
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--ink-soft);
  --cc-btn-primary-bg: var(--red);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--red);
  --cc-btn-primary-hover-bg: var(--red-dark);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--red-dark);
  --cc-btn-secondary-bg: var(--cream-100);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--cream-300);
  --cc-btn-secondary-hover-bg: var(--cream-200);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--cream-300);
  --cc-separator-border-color: var(--cream-300);
  --cc-toggle-on-bg: var(--red);
  --cc-toggle-readonly-bg: var(--cream-300);
  --cc-link-color: var(--red-dark);
  --cc-link-hover-color: var(--red);
  --cc-btn-border-radius: 2px;
  --cc-modal-border-radius: 3px;
  --cc-z-index: 300;
}
#cc-main .cm__title, #cc-main .pm__title {
  font-family: var(--font-display); color: var(--red-dark);
}
#cc-main .cm { border-top: 3px solid var(--red); }
#cc-main .cm__desc, #cc-main .pm__section-desc { font-size: 13.5px; }

.embed-ask {
  display: grid; gap: .7rem; place-content: center; justify-items: center;
  height: 100%; padding: 1.2rem; text-align: center; background: var(--cream-100);
}
.embed-ask p { margin: 0; max-width: 42ch; font-size: 13.5px; color: var(--ink-soft); }
.embed-ask a { font-size: 12.5px; color: var(--red-dark); }

/* Between the drawer breakpoint and a wide desktop the six menu items plus
   the ENGLISH / SİTE HARİTASI block do not fit on one line: give the menu its
   own row and tighten it slightly. */
@media (min-width: 1025px) and (max-width: 1360px) {
  .menubar { flex-wrap: wrap; }
  .menubar__lang { flex: 1; clip-path: none; padding-inline-end: 1rem; }
  .mainnav { flex-basis: 100%; border-top: 1px solid rgb(255 255 255 / .22); }
  .mainnav a { padding: .6rem .75rem; font-size: 13.5px; }
  .menubar__toggle { display: none; }
}

/* ==========================================================================
   Blog: cards, the article itself, and the FAQ blocks
   ========================================================================== */
.sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.sechead h2 { margin-bottom: 0; }

.postgrid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
/* Home page: the four newest side by side, two on a tablet, one on a phone. */
.postgrid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.postgrid--home .postcard__body h3 { font-size: 17.5px; }
@media (max-width: 1100px) { .postgrid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .postgrid--home { grid-template-columns: 1fr; } }
.postcard { display: flex; flex-direction: column; }
.postcard__img {
  display: block; aspect-ratio: 1180 / 550; overflow: hidden;
  background: var(--cream-100); border: 1px solid var(--cream-300);
}
.postcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.postcard:hover .postcard__img img { transform: scale(1.04); }
.postcard__body { padding: .9rem 0 0; }
.postcard__body h3 { font-size: 19px; line-height: 1.3; margin: 0 0 .5rem; }
.postcard__body h3 a { color: var(--ink); text-decoration: none; }
.postcard__body h3 a:hover { color: var(--red-dark); }
.postcard__body p { margin: 0 0 .8rem; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.postcard__cta { margin: 0; }

.post { max-width: 82ch; }
.post__figure { margin: 0; }
.post__hero {
  width: 100%; height: auto; margin: 1rem 0 1.4rem;
  border: 1px solid var(--cream-300);
}
.postmeta { font-size: 13px; color: var(--ink-soft); margin: -.4rem 0 0; }
.postmeta__src { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin-top: 1.6rem; }
.post__lede { font-size: 17.5px; line-height: 1.65; color: var(--ink); margin-bottom: 1.4rem; }
.post__body h2, .post__faqh {
  font-size: 22px; font-weight: 600; color: var(--ink);
  margin: 1.8rem 0 .7rem; padding-top: .4rem; border-top: 1px solid var(--cream-300);
}
.post__body h2:first-child { margin-top: .6rem; }
.postnote {
  border-inline-start: 3px solid var(--red); background: var(--cream-100);
  padding: .7rem .9rem; font-size: 14px;
}
.tablewrap { overflow-x: auto; margin: 0 0 1rem; }
.tablewrap .spec { min-width: 480px; }

.faqs { display: grid; gap: .5rem; max-width: 82ch; }
.faq {
  border: 1px solid var(--cream-300); background: #fffdf8;
}
.faq summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 18px; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq > div { padding: 0 .9rem .8rem; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.faq > div p { margin: 0; }

.postmore { margin-top: 2rem; }
.postmore h2 { font-size: 18px; margin-bottom: .5rem; }
.postmore ul { margin: 0; padding-inline-start: 1.1rem; font-size: 14.5px; }
.postmore li { margin-bottom: .3rem; }

/* ==========================================================================
   Instagram strip — our own copies of the pictures, each linking to the post
   ========================================================================== */
.iggrid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(4, 1fr);
}
.igtile {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--cream-100);
}
.igtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.igtile:hover img { transform: scale(1.05); }
.igtile__cap {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .7rem .6rem;
  color: #fff; font-size: 12.5px; line-height: 1.35;
  background: linear-gradient(to top, rgb(20 12 8 / .78), rgb(20 12 8 / 0));
  opacity: 0; transition: opacity .25s;
}
.igtile:hover .igtile__cap, .igtile:focus-visible .igtile__cap { opacity: 1; }
@media (max-width: 860px) {
  .iggrid { grid-template-columns: repeat(2, 1fr); }
  .igtile__cap { opacity: 1; font-size: 11.5px; }
}

/* ==========================================================================
   Home hero: full-width photographs, text over the empty side of the picture
   ========================================================================== */
.heroslider {
  position: relative; overflow: hidden; border-radius: 18px;
  background: #f6f1e8; margin-bottom: 1.2rem;
}
.heroslider__track { display: grid; }
.heroslider__slide {
  grid-area: 1 / 1; position: relative;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
}
.heroslider__slide[data-active="true"] { opacity: 1; visibility: visible; }
.heroslider__media { display: block; }
.heroslider__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1920 / 806; object-fit: cover;
}
/* A soft wash over the empty right-hand side so the text reads on any wall */
.heroslider__slide::after {
  content: ""; position: absolute; inset: 0 0 0 42%; pointer-events: none;
  background: linear-gradient(90deg, rgb(250 247 241 / 0), rgb(250 247 241 / .82) 38%);
}
.heroslider__text {
  position: absolute; z-index: 1; inset-block: 0; inset-inline-end: 0;
  width: min(44%, 560px); display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 4.8rem 2rem 1.5rem;
}
.heroslider__text .eyebrow { margin-bottom: .5rem; }
.heroslider__text h2 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(26px, 2.9vw, 44px); line-height: 1.12; margin: 0 0 .8rem;
}
.heroslider__text p:not(.eyebrow) {
  color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 40ch; margin: 0;
}
.heroslider__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.heroslider__btn {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgb(0 0 0 / .08); background: rgb(255 255 255 / .82); color: var(--ink);
  cursor: pointer; transition: background .2s;
}
.heroslider__btn:hover { background: #fff; }
.heroslider__btn svg { width: 22px; height: 22px; }
.heroslider__btn--prev { inset-inline-start: .9rem; }
.heroslider__btn--next { inset-inline-end: .9rem; }
.heroslider__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: .9rem;
  display: flex; justify-content: center; gap: .45rem;
}
.heroslider__dots button {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgb(0 0 0 / .25); background: rgb(255 255 255 / .75);
}
.heroslider__dots button[aria-current="true"] { background: var(--red); border-color: var(--red-dark); }
@media (prefers-reduced-motion: reduce) { .heroslider__slide { transition: none; } }

/* The brand statement, directly under the photographs */
.intro2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 2.5rem;
  align-items: end; padding: 1.2rem .2rem 1.6rem;
}
.intro2 h1 { font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin: 0; }
.intro2__body p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0; }
.intro2 .hero2__actions { margin-top: 1rem; }

/* Narrow slider -- a tablet, or a laptop with the sidebar beside it. Sized by
   the slider's own width (a container query), not the window's. The wide
   picture would be too shallow for the text, so it becomes a taller crop,
   anchored on the product on the left; the text takes the empty right side. */
.heroslider { container-type: inline-size; }
@media (min-width: 761px) {
  @container (max-width: 980px) {
    .heroslider__media img {
      aspect-ratio: auto; height: clamp(360px, 50cqw, 440px); object-position: 26% center;
    }
    .heroslider__slide::after {
      inset-inline-start: 28%;
      background: linear-gradient(90deg, rgb(250 247 241 / 0), rgb(250 247 241 / .9) 32%);
    }
    .heroslider__text { width: 58%; padding: 1.5rem 4rem 3rem 1rem; }
    .heroslider__text h2 { font-size: clamp(24px, 3.8cqw, 34px); }
    .heroslider__text p:not(.eyebrow) { font-size: 15px; line-height: 1.55; }
    .heroslider__actions { margin-top: 1rem; }
    .heroslider__actions .btn { padding-inline: 1rem; }
  }
}

/* Phones: the product photograph on top (its own 4:3 crop), text below */
@media (max-width: 760px) {
  .heroslider { border-radius: 14px; }
  .heroslider__media img { aspect-ratio: 4 / 3; }
  .heroslider__slide::after { display: none; }
  .heroslider__text {
    position: static; width: auto; padding: 1.1rem 1.1rem 2.6rem; background: #fbf8f2;
  }
  .heroslider__text h2 { font-size: 25px; }
  .heroslider__text p:not(.eyebrow) { font-size: 15px; }
  .heroslider__actions .btn { flex: 1 1 auto; justify-content: center; }
  .heroslider__btn { display: none; }
  .heroslider__dots { bottom: .85rem; }
  .intro2 { grid-template-columns: 1fr; padding-top: .6rem; }
}

/* ==========================================================================
   Awards pages: the original banners, plain documents, the flag video
   ========================================================================== */
.doc__img--static { cursor: default; }
.awardbanner {
  display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto 1.2rem;
  border: 1px solid var(--border-red); border-radius: var(--radius-sm);
}
.videobox { margin: 0 auto 1.4rem; max-width: 760px; }
/* The films are 4:3. The flag video's poster is the stadium photograph, a
   wide strip, so before play that frame takes the photograph's own shape (it
   shows whole, as on the original page) and becomes 4:3 once it plays. */
.videobox__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--border-red); background: #111;
}
.videobox--banner .videobox__frame { aspect-ratio: 627 / 200; }
.videobox--banner .videobox__frame[data-loaded] { aspect-ratio: 4 / 3; max-width: 640px; margin-inline: auto; }
.videobox--feature { max-width: 720px; margin-bottom: .4rem; }
.videogrid {
  display: grid; gap: 1.2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.videobox--card { margin: 0; max-width: none; }
.videobox--card .videobox__icon { width: 56px; height: 40px; border-radius: 11px; }
.videobox--card .videobox__icon::after { border-width: 8px 0 8px 14px; }
.videobox--card .videobox__label { display: none; }
.videobox--card figcaption strong { font-size: 14px; }
.videobox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videobox__play {
  position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: #111;
  display: grid; place-items: center;
}
.videobox__play img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;
  transition: opacity .2s, transform .4s;
}
.videobox__play:hover img, .videobox__play:focus-visible img { opacity: 1; transform: scale(1.02); }
.videobox__icon {
  position: relative; width: 74px; height: 52px; border-radius: 14px;
  background: var(--red); box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  transition: transform .2s, background .2s;
}
.videobox__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%;
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.videobox__play:hover .videobox__icon { transform: scale(1.06); background: var(--red-dark); }
.videobox__label {
  position: absolute; bottom: .8rem; left: 50%; translate: -50% 0;
  background: rgb(0 0 0 / .62); color: #fff; font-size: 13px; font-weight: 600;
  padding: .35rem .8rem; border-radius: 999px;
}
.videobox figcaption { text-align: center; margin-top: .6rem; font-size: 13px; color: var(--ink-soft); }
.videobox figcaption strong { display: block; color: var(--red-dark); font-size: 15px; margin-bottom: .2rem; }
.videobox figcaption a { color: var(--red-dark); }
@media (max-width: 620px) {
  .videobox__icon { width: 52px; height: 36px; border-radius: 10px; }
  .videobox__icon::after { border-width: 8px 0 8px 13px; }
  .videobox__label { display: none; }
}

/* Award, certificate and thanks grids: every picture box the same height, so
   the captions start on one line whatever the shape of the document. */
.docgrid--even { align-items: start; }
.docgrid--even .doc__img { height: 260px; min-height: 0; padding: .6rem; }
.docgrid--even .doc__img img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
@media (max-width: 620px) { .docgrid--even .doc__img { height: 220px; } }

/* ==========================================================================
   Back to top -- above the accessibility button in the bottom-right corner
   ========================================================================== */
.totop {
  position: fixed; z-index: 250; right: 20px; bottom: 92px;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff; background: #1c1612;
  box-shadow: 0 6px 18px rgb(0 0 0 / .25);
  transition: transform .2s, background .2s, opacity .2s;
}
.totop[hidden] { display: none; }
.totop:hover { background: var(--red-dark); transform: translateY(-2px); }
.totop:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.totop svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }
@media print { .totop { display: none !important; } }
/* The accessibility button, small and in the site's red. The widget injects
   its own stylesheet after this one, so the selectors are doubled to win; its
   size, icon and colour are custom properties, its ring is !important. */
.asw-widget.asw-widget, .asw-menu-btn.asw-menu-btn { --asw-primary: #990000; }
.asw-menu-btn.asw-menu-btn {
  --asw-btn-size: 40px; --asw-icon-size: 24px;
  --asw-btn-size-mobile: 38px; --asw-icon-size-mobile: 22px;
  border: 2px solid #fff !important;
  outline: 2px solid var(--red-dark) !important;
  box-shadow: 0 4px 12px rgb(153 0 0 / .28);
}
.asw-menu-btn.asw-menu-btn:hover { box-shadow: 0 6px 16px rgb(153 0 0 / .38); }

/* Back to top: the same size as the accessibility button, on the same axis,
   12px above it (20px offset + 40px button + 12px). */
.totop { width: 40px; height: 40px; bottom: 72px; box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 6px 16px rgb(0 0 0 / .25); }
.totop svg { width: 20px; height: 20px; }
@media (max-width: 768px) { .totop { width: 38px; height: 38px; bottom: 70px; } }

/* ==========================================================================
   Home: the awards banner. Text sits in the clean space of the picture,
   right of the scroll and below the poppies in the top-right corner.
   ========================================================================== */
/* The company story: text on the left, the BLEND teapot on the right. */
.story2 {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
}
.story2__text h1 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin: 0 0 1rem;
}
.story2__text .story2__lede { font-size: 17px; color: var(--ink); max-width: 60ch; }
.story2__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 1.4rem 0 1.6rem; padding: 1.1rem 0;
  border-block: 1px solid var(--line);
}
.story2__stats div { margin: 0; }
.story2__stats dt {
  font-family: var(--serif); font-weight: 600; color: var(--red-dark);
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1;
}
.story2__stats dd { margin: .25rem 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.story2__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 560px) { .story2__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story2__photo {
  position: relative; display: block; overflow: hidden; border-radius: 18px;
  aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%;
  box-shadow: 0 14px 34px rgb(60 40 20 / .16); background: #d9c9b3;
}
.story2__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.story2__photo:hover img { transform: scale(1.03); }
.story2__photo:hover .split2__tag { color: var(--red-dark); }
@media (max-width: 900px) {
  .story2 { grid-template-columns: minmax(0, 1fr); }
  .story2__photo { max-width: none; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .story2__photo img { transition: none; } }
.awardsband {
  position: relative; container-type: inline-size; overflow: hidden;
  border-radius: 18px; background: #f7f1e6; margin-top: 1.6rem;
}
.awardsband__bg { display: block; width: 100%; height: auto; aspect-ratio: 1780 / 576; object-fit: cover; }
.awardsband__text {
  position: absolute; left: 52%; right: 5%; top: 31%; bottom: 6%;
  display: flex; flex-direction: column; justify-content: center;
}
.awardsband__text .eyebrow { margin-bottom: .35rem; }
.awardsband__text h2 {
  font-family: var(--serif); font-weight: 600; color: var(--red-dark);
  font-size: clamp(20px, 2.35cqw, 30px); line-height: 1.18; margin: 0 0 .55rem;
}
.awardsband__text p:not(.eyebrow) {
  color: var(--ink-soft); font-size: clamp(13.5px, 1.3cqw, 15.5px); line-height: 1.6;
  margin: 0; max-width: 52ch;
}
.awardsband__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.awardsband__links .btn { padding-block: .55rem; }

/* Too narrow for the text to fit in the picture: the picture on top, the
   text beneath it on the same cream. */
@container (max-width: 1080px) {
  .awardsband__text { position: static; padding: 1.1rem 1.3rem 1.4rem; }
  .awardsband__text h2 { font-size: clamp(20px, 3.4cqw, 26px); }
  .awardsband__text p:not(.eyebrow) { font-size: 14.5px; }
}
/* Phones: the trophy, medal and scroll, larger, from their own crop */
@media (max-width: 760px) {
  .awardsband__bg { aspect-ratio: 900 / 540; }
  .awardsband__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .awardsband__links .btn { justify-content: center; padding-inline: .6rem; font-size: 14px; }
}

/* The durability section's photograph: a full-bleed kitchen scene that
   fills its half of the card, with the product label on it. */
.split2__media--photo {
  position: relative; padding: 0; background: #e9e2d4; display: block; overflow: hidden;
}
.split2__media--photo img {
  display: block; width: 100%; height: 100%; min-height: 320px; max-height: none;
  object-fit: cover; object-position: 50% 60%; transition: transform .6s ease;
}
.split2__media--photo:hover img { transform: scale(1.03); }
.split2__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgb(255 253 248 / .92); color: var(--ink); font-weight: 600; font-size: 14px;
  padding: .45rem .85rem; border-radius: 999px; box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}
.split2__media--photo:hover .split2__tag { color: var(--red-dark); }
@media (max-width: 900px) { .split2__media--photo img { min-height: 0; aspect-ratio: 1388 / 768; height: auto; } }
@media (max-width: 620px) { .split2__tag { font-size: 13px; left: .6rem; bottom: .6rem; } }
@media (prefers-reduced-motion: reduce) { .split2__media--photo img { transition: none; } }

/* ==========================================================================
   Blog post: the article with a sidebar beside it
   ========================================================================== */
.postlayout { container-type: inline-size; }
.postlayout__grid {
  display: grid; grid-template-columns: minmax(0, 760px) 320px; justify-content: start;
  gap: clamp(1.8rem, 3vw, 3rem); align-items: start;
}
/* The article keeps a comfortable reading width (760px at most) and the
   sidebar sits right beside it, not across an empty gap. */
.postlayout .post { max-width: none; }
/* the title's red rule no longer runs through the date */
.post .pagetitle { margin-bottom: .9rem; }
.postmeta { margin-top: .2rem; }
.post__hero { border-radius: 14px; }

.postside { display: grid; gap: 1.1rem; }
.sidebox {
  background: #fffdf8; border: 1px solid var(--cream-300); border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
}
.sidebox__h {
  font-family: var(--font-display, inherit); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--red-dark);
  margin: 0 0 .75rem;
}
.sidetoc { margin: 0; padding-inline-start: 1.15rem; display: grid; gap: .45rem; font-size: 14px; }
.sidetoc a { color: var(--ink); text-decoration: none; }
.sidetoc a:hover { color: var(--red-dark); text-decoration: underline; }
.sidetoc li::marker { color: var(--red-dark); font-weight: 700; }

.sideprods, .sideposts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sideprod, .sidepost {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center;
  text-decoration: none; color: var(--ink); border-radius: 10px; padding: .25rem;
  transition: background .2s;
}
.sideprod:hover, .sidepost:hover { background: var(--cream-100); }
.sideprod img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 10px;
  background: var(--card-img, #f4efe6); padding: 4px; mix-blend-mode: multiply;
}
.sideprod strong { display: block; font-size: 14px; line-height: 1.3; }
.sideprod small { display: block; font-size: 12px; color: var(--ink-soft); }
.sidepost img { width: 84px; height: 40px; object-fit: cover; border-radius: 8px; }
.sidepost span { font-size: 13.5px; line-height: 1.35; }
.sideprod:hover strong, .sidepost:hover span { color: var(--red-dark); }

.sideshare { display: flex; flex-wrap: wrap; gap: .4rem; }
.sideshare__btn {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: 999px;
  padding: .35rem .75rem; text-decoration: none;
}
.sideshare__btn:hover { border-color: var(--red-dark); color: var(--red-dark); }

.sideig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 10px; overflow: hidden; }
.sideig img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.sideig a:hover img { opacity: .85; }
.sidebox__btn { margin-top: .8rem; width: 100%; justify-content: center; }

/* narrower than article + sidebar: the sidebar follows the article, in two
   columns while there is room */
@container (max-width: 960px) {
  .postlayout__grid { grid-template-columns: minmax(0, 1fr); }
  .postlayout .post { max-width: none; }
  .postside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

/* Masthead pot: the poppy pot photographed on cream with its reflection
   (eternity-gelincik-desenli-emaye-tencere-cam-kapakli.png), edges feathered so it melts into the band. Full
   band height, knob included. */
.masthead .masthead__pot { align-self: stretch; align-items: center; }
.masthead .masthead__pot img {
  width: auto; height: 88px; margin: 0 clamp(.25rem, 1vw, .9rem) 0 0;
  mix-blend-mode: normal;
}

/* KVKK notice: numbered headings, readable lists, the form's short note */
.kvkk h2 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 1.6rem 0 .5rem; }
.kvkk ul { margin: .3rem 0 .9rem; padding-inline-start: 1.2rem; }
.kvkk li { margin-bottom: .3rem; }
.kvkk__lede { font-size: 16px; color: var(--ink); }
.form__kvkk a { color: var(--red-dark); font-weight: 600; }

/* After "Gönder": the message ready in the mail program, Gmail, Outlook or to copy */
.sendpanel {
  margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 12px;
  background: #f4f9f1; border: 1px solid #cfe3c4; color: var(--ink);
}
.sendpanel:focus { outline: none; }
.sendpanel strong { display: block; font-size: 16px; margin-bottom: .3rem; }
.sendpanel p { margin: 0 0 .8rem; font-size: 14px; color: var(--ink-soft); }
.sendpanel__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.sendpanel .sendpanel__to { margin: 0; font-size: 12.5px; }

/* Website forms: honeypot (people never see it), the ALTCHA check, "sent" */
.form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__altcha { display: block; margin: 1rem 0 .4rem; max-width: 320px; }
.sendpanel--done { background: #eef7ea; border-color: #b9dcaa; }

/* ==========================================================================
   Product list: filters (type, coating, colour, series), search, sort
   ========================================================================== */
.catalog__lede { color: var(--ink-soft); margin: -.4rem 0 1.2rem; }
.catalog {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
}
.filters {
  /* clear of the floating menu bar when it slides back in */
  position: sticky; top: 3.6rem;
  max-height: calc(100vh - 4.6rem); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: .4rem 1.1rem 1rem; scrollbar-width: thin;
}
.filters__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 0 .6rem; border-bottom: 1px solid var(--line);
}
.filters__head h2 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; }
.filters__clear {
  border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600;
  color: var(--red-dark); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.filters__close, .filters__foot, .filters-backdrop, .catalog__filterbtn { display: none; }

.fgroup { border-bottom: 1px solid var(--line); padding: .75rem 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup summary {
  display: flex; justify-content: space-between; align-items: center;
  list-style: none; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink);
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after {
  content: ""; width: 7px; height: 7px; margin-right: 3px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  rotate: 45deg; translate: 0 -2px; transition: rotate .15s;
}
.fgroup:not([open]) summary::after { rotate: -45deg; translate: 0 0; }
.fgroup__body { display: grid; gap: .1rem; margin-top: .55rem; }

.fopt {
  display: flex; align-items: center; gap: .6rem;
  padding: .32rem .35rem; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--ink); transition: background-color .12s, opacity .12s;
}
.fopt:hover { background: var(--cream-100, #f6f1e7); }
.fopt input { width: 17px; height: 17px; margin: 0; accent-color: var(--red-dark); flex: none; cursor: pointer; }
.fopt__label { flex: 1; line-height: 1.3; }
.fopt__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fopt.is-empty, .fswatch.is-empty { opacity: .42; }
.fopt--more { display: none; }
.fgroup__body.is-open .fopt--more { display: flex; }
.fgroup__more {
  margin-top: .35rem; border: 0; background: none; padding: .2rem .35rem;
  font-size: 13px; font-weight: 600; color: var(--red-dark); cursor: pointer;
}

.fswatches { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .4rem; }
.fswatch {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .35rem;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; position: relative;
}
.fswatch:hover { background: var(--cream-100, #f6f1e7); }
.fswatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fswatch__dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
  transition: box-shadow .12s;
}
.fswatch__dot--pattern {
  background: conic-gradient(#c5142b 0 25%, #5b9048 0 50%, #e3b23c 0 75%, #1f4f9c 0);
}
.fswatch__name { flex: 1; line-height: 1.25; }
.fswatch input:checked + .fswatch__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red-dark); }
.fswatch input:focus-visible + .fswatch__dot { outline: 2px solid var(--red); outline-offset: 4px; }
.fswatch:has(input:checked) .fswatch__name { font-weight: 600; }

.catalog__bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.catalog__bar .search { flex: 1 1 16rem; }
.catalog__bar .search input { padding-block: .65rem; border-radius: 999px; padding-inline-start: 2.4rem; }
.catalog__bar .search svg { inset-inline-start: .9rem; }
.catalog__sort { display: flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--ink-soft); }
.catalog__sort select {
  padding: .55rem 2rem .55rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.catalog__filterbtn svg { width: 18px; height: 18px; }
.catalog__filterbtn { gap: .4rem; }
.catalog__badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--red-dark); color: #fff; font-size: 11.5px; font-weight: 700;
}
.catalog__badge[hidden] { display: none; }
.catalog__active { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.catalog__active[hidden] { display: none; }
.achip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .5rem .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--red-dark); background: #fff; color: var(--red-dark);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.achip:hover { background: #fbeeee; }
.achip span:last-child { font-size: 16px; line-height: 1; }
.achip--clear { border-color: transparent; background: none; text-decoration: underline; padding-inline: .4rem; }
.catalog .result-count { margin: .8rem 0 1rem; font-size: 13px; }
.cards--catalog { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.catalog .empty-state { display: grid; justify-items: center; gap: 1rem; }
.catalog .empty-state[hidden] { display: none; }

/* phones and small tablets: the filters become a sheet */
@media (max-width: 900px) {
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .catalog__filterbtn { display: inline-flex; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 230;
    width: min(88vw, 360px); max-height: none; height: 100dvh;
    border-radius: 0 16px 16px 0; padding: 0 1.1rem;
    display: flex; flex-direction: column;
    translate: -105% 0; visibility: hidden;
    transition: translate .26s ease, visibility .26s;
    box-shadow: 8px 0 40px rgb(0 0 0 / .25);
  }
  .filters__head { position: sticky; top: 0; background: #fff; z-index: 1; padding-top: 1rem; }
  .filters__body { flex: 1; }
  .filters__close {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  }
  .filters__foot {
    display: block; position: sticky; bottom: 0; background: #fff;
    padding: .8rem 0 1rem; border-top: 1px solid var(--line);
  }
  .filters__foot .btn { width: 100%; justify-content: center; }
  .filters-backdrop {
    display: block; position: fixed; inset: 0; z-index: 225;
    background: rgb(20 10 5 / .45); opacity: 0; visibility: hidden;
    transition: opacity .26s, visibility .26s;
  }
  .catalog.is-filtering .filters { translate: 0 0; visibility: visible; }
  .catalog.is-filtering .filters-backdrop { opacity: 1; visibility: visible; }
  .catalog__sort span { display: none; }
  .catalog__bar .search { flex-basis: 100%; }
}
html.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .filters, .filters-backdrop { transition: none; } }
/* while the filter sheet is open, the floating buttons stay out of its way */
html.no-scroll .asw-menu-btn, html.no-scroll .totop { visibility: hidden; }

/* Footer contact column: "Bize Ulaşın" on top, a thin line, then e-mail and phone */
.fcol__lead { padding-bottom: .65rem; margin-bottom: .2rem; border-bottom: 1px solid var(--f-line, rgb(255 255 255 / .1)); }

/* 404 */
.nf { max-width: 760px; margin: 1rem auto 2rem; text-align: center; }
.nf__code {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(72px, 12vw, 128px); color: var(--red-dark); letter-spacing: -.02em;
}
.nf__title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: .4rem 0 .6rem; }
.nf__text { color: var(--ink-soft); margin: 0 auto 1.4rem; max-width: 48ch; }
.nf__search { max-width: 460px; margin: 0 auto 1.8rem; }
.nf__search input { padding-block: .7rem; border-radius: 999px; padding-inline-start: 2.4rem; }
.nf__search svg { inset-inline-start: .9rem; }
.nf__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.nf__tile {
  display: grid; justify-items: center; gap: .4rem; padding: .9rem .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px;
  transition: border-color .15s, translate .15s;
}
.nf__tile:hover { border-color: var(--red-dark); translate: 0 -2px; }
.nf__tile img { width: 88px; height: 88px; object-fit: contain; }
.nf__links { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.nf__links a { color: var(--red-dark); font-weight: 600; }
.nf__en { border-top: 1px solid var(--line); padding-top: 1.2rem; margin-bottom: 1.2rem; }
.nf__en h2 { font-size: 19px; font-weight: 600; margin: 0 0 .3rem; }
.nf__en p { color: var(--ink-soft); margin: 0 0 .8rem; }
@media (max-width: 560px) { .nf__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The header (with the search box) sits above the sticky menu bar
   (z-index 150), so the live search suggestions open over the menu bar
   instead of sliding under it. */
.masthead { position: relative; z-index: 160; }

/* Care-guide picture beside the page list: as tall as the list, not taller */
.intro-split img.intro-photo { width: auto; max-width: 100%; max-height: 270px; height: auto; border: 0; }

/* A section photo floated beside the text stays a picture beside the text,
   however large the file (the retouched care-guide photos are 900 px). */
.shots--float .shots__item img { max-width: min(100%, 380px); }
.shots--photo .shots__item img { width: 190px; max-width: 100%; }

/* Care guide sections: text left, picture centred in the space on the right,
   without a frame. One column on phones, picture under the text. */
.guide-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 1.5rem 2.5rem; align-items: center;
}
.guide-split__media { display: flex; justify-content: center; align-items: center; }
.shots--guide { justify-content: center; align-items: center; }
.shots--guide .shots__item { border: 0; background: none; box-shadow: none; padding: 0; }
.shots--guide .shots__item img { max-height: 240px; width: auto; }
@media (max-width: 700px) { .guide-split { grid-template-columns: minmax(0, 1fr); } }
.shots--guide.shots--photo .shots__item img { width: 190px; max-width: 100%; }
/* our own photos are sized by width only -- never squashed by the height cap */
.shots--guide.shots--photo .shots__item img { max-height: none; height: auto; }
/* photo beside the page list: the list sits level with the photo's middle */
.intro-split:has(.intro-photo) { align-items: center; }

/* Studio photographs with their own backdrop fill the frame edge to edge,
   on the product page and on the card, instead of sitting inside it. */
.pview--photo .pview__main { padding: 0; overflow: hidden; }
.pview--photo .pview__main img { max-height: none; object-fit: cover; }
.pcard--photo .pcard__media { padding: 0; }
.pcard--photo .pcard__media img { object-fit: cover; mix-blend-mode: normal; }

/* Card colour dots can be clicked */
.swatches .sw[data-key] { cursor: pointer; transition: box-shadow .15s; }
.swatches .sw[data-key]:hover { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ink-soft); }
.swatches .sw.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--red-dark); }

/* News article: the text on the left, its pictures in a column on the right
   that stays in view while reading; stacked above the text on narrow screens. */
.article__layout--side {
  display: grid; gap: 1.8rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}
.article__side { position: sticky; top: 5.5rem; }
.article__shots { display: grid; gap: .8rem; }
.article__shots .shots__item {
  display: grid; place-items: center; padding: .6rem;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.article__shots .shots__item img { width: auto; max-width: 100%; height: auto; max-height: 360px; }
@media (max-width: 860px) {
  .article__layout--side { grid-template-columns: minmax(0, 1fr); }
  .article__side { position: static; order: -1; }
  .article__shots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .article__shots .shots__item img { max-height: 220px; }
}

/* News list: every card's picture area the same height, so a tall picture
   (the Effie trophy) no longer makes its card taller than the rest. */
.newsitem__media { aspect-ratio: auto; height: 150px; overflow: hidden; }
.newsitem__media img { max-height: 134px; }

/* Photographs shot square on a white backdrop fill their frame: without this
   the picture sits in the middle of the panel with a band of it showing all
   round, which reads as a box inside a box. */
.pcard--fill .pcard__media { padding: 0; }
.pview--fill .pview__main { padding: 0; overflow: hidden; }
.pview--fill .pview__main img { max-height: none; }