:root {
  --visne:      #752c23;
  --kiremit:    #9e502e;
  --kahve-kir:  #ad6a3d;
  --tarcin:     #d39d68;
  --altin-bej:  #d9c19e;
  --petrol:     #164142;
  --petrol-rgb: 22, 65, 66;   
  --krem:       #f1ead7;
  --kahve:      #2a2121;

  
  --dolgu:      rgba(217, 193, 158, .30);
  --ayirici:    rgba(173, 106, 61, .30);

  
  --font-baslik: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;
  --font-govde:  "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;

  --kap: 1160px;
  --bosluk-bolum: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--krem);          
  color: var(--kahve);
  font-family: var(--font-govde);
  font-size: 1.0625rem;             
  line-height: 1.65;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--kiremit); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--visne); }

:focus-visible { outline: 2px solid var(--kiremit); outline-offset: 2px; }

.koyu :focus-visible, .bant-foto :focus-visible, .lb :focus-visible,
.iletisim :focus-visible { outline-color: var(--krem); }

.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: 24px; }

.bolum { padding-block: var(--bosluk-bolum); }
.bolum-dar { padding-block: 64px; }
.bolum + .bolum { border-top: 1px solid var(--ayirici); }

.satir-metin { max-width: 68ch; }

.bosluk-s { margin-top: 28px; }
.bosluk-m { margin-top: 40px; }
.bosluk-l { margin-top: 56px; }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--visne); color: var(--krem); padding: 10px 18px;
  text-decoration: none; border-radius: 0;
}
.atla:focus { left: 0; color: var(--krem); }

h1, h2, h3 { font-family: var(--font-baslik); margin: 0 0 .5em; line-height: 1.2; }

h1 { font-size: 2.6rem;  font-weight: 700; color: var(--visne); }
h2 { font-size: 1.85rem; font-weight: 700; color: var(--visne); }
h3 { font-size: 1.25rem; font-weight: 700; color: var(--kahve); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.ust-etiket {
  display: block;
  font-size: .78rem; font-weight: 600; color: var(--kiremit);
  text-transform: uppercase; letter-spacing: .14em;
  margin: 0 0 .9em;
}
.kucuk, figcaption { font-size: .8125rem; line-height: 1.5; color: rgba(42, 33, 33, .70); }

.giris { font-size: 1.15rem; }

.dugme {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--visne); color: var(--krem);
  padding: 14px 26px; border: 1px solid var(--visne); border-radius: 2px;
  font-family: var(--font-govde); font-size: 1rem; font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms linear, border-color 120ms linear;
}
.dugme:hover { background: var(--kiremit); border-color: var(--kiremit); color: var(--krem); }
.dugme svg { width: 18px; height: 18px; fill: var(--krem); flex: none; }

.dugme-ince { padding: 10px 18px; font-size: .95rem; }

.dugme-ikincil {
  background: transparent; color: var(--krem); border: 1px solid var(--krem);
}
.dugme-ikincil:hover { background: var(--kiremit); border-color: var(--kiremit); }
.dugme-ikincil svg { fill: var(--krem); }

.dugme-grup { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.ic-baglanti {
  display: inline-block; font-weight: 600; color: var(--kiremit);
  text-decoration: none; transition: color 120ms linear;
}
.ic-baglanti:hover { color: var(--visne); }

.yan-eylem { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.yan-eylem a { color: var(--kiremit); font-weight: 600; text-decoration: none; }
.yan-eylem a:hover { color: var(--visne); text-decoration: underline; }
.koyu .yan-eylem a { color: var(--krem); }

.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--krem); border-bottom: 1px solid var(--altin-bej);
}
.ust-ic { display: flex; align-items: center; gap: 20px; height: 68px; }
.ust-logo { display: flex; align-items: center; margin-right: auto; }
.ust-logo img { height: 26px; width: auto; }

.ust-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.ust-nav a {
  display: inline-block; padding: 4px 0;
  color: var(--kahve); font-size: .98rem; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}
.ust-nav a:hover { color: var(--kiremit); }
.ust-nav a[aria-current="page"] { color: var(--visne); border-bottom-color: var(--visne); }

.menu-kutu { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-dugme {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  color: var(--kiremit); font-size: .9rem; font-weight: 600;
  padding: 8px 10px; border: 1px solid var(--altin-bej); border-radius: 2px;
}
.menu-dugme svg { width: 20px; height: 20px; stroke: var(--kiremit); }
.menu-kutu:focus-visible + .menu-dugme { outline: 2px solid var(--kiremit); outline-offset: 2px; }

@media (max-width: 899px) {

  .menu-dugme { display: inline-flex; order: 2; }
  .ust .dugme { order: 3; padding: 9px 14px; font-size: .9rem; }
  .ust-nav {
    order: 4; display: none; width: 100%;
    border-top: 1px solid var(--altin-bej);
  }
  .menu-kutu:checked ~ .ust-nav { display: block; }
  .ust-nav ul { flex-direction: column; gap: 0; padding: 6px 0 14px; }
  .ust-nav li + li { border-top: 1px solid var(--ayirici); }
  .ust-nav a { display: block; padding: 12px 0; border-bottom: 0; }
  .ust-nav a[aria-current="page"] { border-bottom: 0; }
  .ust-ic { flex-wrap: wrap; height: auto; min-height: 60px; gap: 12px; padding-block: 8px; }
}

.bant-foto {
  position: relative; overflow: hidden;
  background-color: var(--petrol);
  color: var(--krem);
}

.bant-gorsel {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}

.op-30 { object-position: center 30%; }
.bant-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(var(--petrol-rgb), .86) 0%, rgba(var(--petrol-rgb), .66) 55%, rgba(var(--petrol-rgb), .88) 100%);
}

.bant-foto > *:not(.bant-gorsel) { position: relative; z-index: 2; }

.perde-72::before { background: linear-gradient(180deg, rgba(var(--petrol-rgb), .84) 0%, rgba(var(--petrol-rgb), .72) 55%, rgba(var(--petrol-rgb), .86) 100%); }
.perde-75::before { background: linear-gradient(180deg, rgba(var(--petrol-rgb), .86) 0%, rgba(var(--petrol-rgb), .75) 55%, rgba(var(--petrol-rgb), .88) 100%); }
.perde-78::before { background: linear-gradient(180deg, rgba(var(--petrol-rgb), .88) 0%, rgba(var(--petrol-rgb), .78) 55%, rgba(var(--petrol-rgb), .90) 100%); }
.perde-70::before { background: linear-gradient(180deg, rgba(var(--petrol-rgb), .84) 0%, rgba(var(--petrol-rgb), .70) 55%, rgba(var(--petrol-rgb), .86) 100%); }

.bant-foto h1, .bant-foto h2 { color: var(--krem); }
.bant-foto .ust-etiket { color: var(--tarcin); }
.bant-foto a:not(.dugme) { color: var(--krem); }

.koyu { background: var(--petrol); color: var(--krem); }
.koyu h1, .koyu h2, .koyu h3 { color: var(--krem); }
.koyu .kucuk, .koyu figcaption { color: rgba(241, 234, 215, .72); }
.koyu .ust-etiket { color: var(--tarcin); }
.koyu a:not(.dugme) { color: var(--krem); }

.hero-ic {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  min-height: min(78vh, 660px); padding-block: 56px; align-content: center;
}
.hero h1 { font-size: 2.6rem; margin-bottom: .45em; }
.hero .dugme-grup { margin-top: 28px; }

.hero-foto { border: 1px solid rgba(241, 234, 215, .5); }
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-kart figcaption { color: rgba(241, 234, 215, .75); margin-top: 10px; }

@media (min-width: 900px) {
  .hero-ic { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
}

.sayfa-bant-ic { display: flex; flex-direction: column; justify-content: center; min-height: 320px; padding-block: 48px; }
.sayfa-bant-ic .satir-metin { color: rgba(241, 234, 215, .92); }
.bant-kisa .sayfa-bant-ic { min-height: 280px; }
@media (max-width: 639px) {
  .sayfa-bant-ic { min-height: 260px; padding-block: 40px; }
}

figure { margin: 0; }
.cerceve { position: relative; display: block; border: 1px solid var(--kahve-kir); background: var(--dolgu); }
a.cerceve { text-decoration: none; }
.cerceve img { width: 100%; }

a.buyut::after {
  content: "Büyüt";
  position: absolute; right: 0; bottom: 0; z-index: 2;
  background: var(--krem); color: var(--kiremit);
  border-top: 1px solid var(--kiremit); border-left: 1px solid var(--kiremit);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.3;
  padding: 4px 9px;
  transition: background-color 120ms linear, color 120ms linear;
}
a.buyut:hover, a.buyut:focus-visible { border-color: var(--kiremit); }
a.buyut:hover::after, a.buyut:focus-visible::after { background: var(--kiremit); color: var(--krem); }

.gorsel figcaption { margin-top: 10px; }

.kutu-baslik {
  font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700;
  color: var(--visne); line-height: 1.3; margin-bottom: .7em;
}
.kutu-vurgu { border: 2px solid var(--visne); padding: 26px 28px; }
.kutu-dolgu { background: var(--dolgu); border: 1px solid var(--altin-bej); padding: 26px 28px; }

.izgara { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .izgara-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .izgara-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .izgara-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .izgara-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .izgara-4 { grid-template-columns: repeat(4, 1fr); } }

.ikili { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .ikili { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .ikili-55 { grid-template-columns: 55fr 45fr; }

}

.kart { border: 1px solid var(--altin-bej); padding: 26px; background: transparent; }
.kart h3 { margin-bottom: .45em; }

.kart-gorsel { border: 1px solid var(--altin-bej); display: flex; flex-direction: column; }
.kart-gorsel > .cerceve { border: 0; border-bottom: 1px solid var(--altin-bej); }
.kart-gorsel .kart-ic { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.kart-gorsel .kart-ic > :last-child { margin-bottom: 0; margin-top: auto; }

.kart { display: flex; flex-direction: column; }
.kart > :last-child { margin-bottom: 0; }
.oran-43 img { aspect-ratio: 4 / 3; object-fit: cover; }
.oran-11 img { aspect-ratio: 1 / 1; object-fit: cover; }

.urun + .urun { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--ayirici); }
.urun:first-of-type { margin-top: 40px; }

.urun .ikili { align-items: start; }
.urun h3 { margin-bottom: .7em; }

.urun-gorseller > .gorsel-buyuk { max-width: 100%; }
.urun-gorseller > .gorsel-buyuk .cerceve img { width: 100%; }
.urun-gorseller > .gorsel-kucuk { margin-top: 16px; max-width: 46%; }

h3 > .ic-baglanti { font-family: inherit; font-size: inherit; font-weight: inherit; }

.rakam-serit { display: grid; grid-template-columns: repeat(2, 1fr); }
.rakam-kutu { padding: 26px 20px; }
.rakam-kutu b { display: block; font-family: var(--font-baslik); font-size: 1.6rem; font-weight: 700; color: var(--visne); line-height: 1.15; }
.rakam-kutu span { display: block; font-size: .875rem; margin-top: 6px; }
.rakam-serit .rakam-kutu:nth-child(odd) { border-right: 1px solid var(--altin-bej); }
.rakam-serit .rakam-kutu:nth-child(-n+2) { border-bottom: 1px solid var(--altin-bej); }
@media (min-width: 900px) {
  .rakam-serit { grid-template-columns: repeat(4, 1fr); }
  .rakam-serit .rakam-kutu { border-bottom: 0 !important; border-right: 1px solid var(--altin-bej); }
  .rakam-serit .rakam-kutu:last-child { border-right: 0; }
}

.adimlar { display: grid; gap: 32px; grid-template-columns: 1fr; counter-reset: adim; }
@media (min-width: 900px) { .adimlar { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.adim { border-top: 2px solid var(--visne); padding-top: 18px; }
.adim .no { display: block; font-family: var(--font-baslik); font-size: 1.6rem; font-weight: 700; color: var(--visne); line-height: 1; margin-bottom: 8px; }
.adim h3 { margin-bottom: .4em; }

.serit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 899px) {
  .serit {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 12px; margin-inline: -20px; padding-inline: 20px;
  }
  .serit > * { flex: 0 0 74%; scroll-snap-align: start; }
}

.tablo { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tablo caption { text-align: left; font-size: .8125rem; color: rgba(42, 33, 33, .70); padding-bottom: 10px; }
.tablo th, .tablo td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(217, 193, 158, .5); vertical-align: top; }
.tablo thead th { background: var(--altin-bej); color: var(--kahve); font-weight: 700; border-bottom: 1px solid var(--kahve-kir); }
.tablo tbody th { font-weight: 600; width: 34%; }
.evet { color: var(--kiremit); font-weight: 600; white-space: nowrap; }
.hayir { color: var(--visne); font-weight: 600; white-space: nowrap; }

.tablo-sarmal { overflow-x: auto; }
.tablo-sarmal > .tablo { min-width: 620px; }
.tablo-malzeme tbody th { width: 66%; }
.tablo-kosul tbody th { width: 26%; }

.kunye { margin: 0; border-top: 1px solid var(--altin-bej); }
.kunye > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 0; border-bottom: 1px solid rgba(217, 193, 158, .5); }
.kunye dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kiremit); }
.kunye dd { margin: 0; }
@media (min-width: 640px) {
  .kunye > div { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; }
}

.liste-tire { margin: 0; padding-left: 1.1em; }
.liste-tire li { margin-bottom: .5em; }

.sss { max-width: 76ch; border-top: 1px solid var(--altin-bej); }
.sss details { border-bottom: 1px solid var(--altin-bej); }
.sss summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--font-baslik); font-size: 1.15rem; font-weight: 700; color: var(--visne);
  transition: color 120ms linear;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary:hover { color: var(--kiremit); }
.sss summary::after {
  content: "+"; position: absolute; right: 4px; top: 16px;
  font-size: 1.4rem; font-weight: 400; color: var(--kiremit); line-height: 1;
}
.sss details[open] summary::after { content: "–"; }
.sss .cevap { padding: 0 0 20px; max-width: 68ch; }

.iletisim .kolonlar { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 34px; }
@media (min-width: 640px) { .iletisim .kolonlar { grid-template-columns: repeat(3, 1fr); } }
.iletisim .kolon { border-top: 1px solid rgba(217, 193, 158, .45); padding-top: 18px; }
.iletisim .kolon .ust-etiket { color: var(--tarcin); margin-bottom: .6em; }
.iletisim .kolon p { font-size: 1.15rem; font-weight: 600; margin-bottom: .7em; }
.iletisim .kolon a { color: var(--krem); text-decoration: none; }
.iletisim .kolon a:hover { text-decoration: underline; }
.iletisim .alt-satir { margin-top: 34px; font-size: .8125rem; color: rgba(241, 234, 215, .70); }

.cta-bant { border-top: 1px solid var(--altin-bej); }
.cta-bant .ic { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }

.alt { border-top: 1px solid var(--altin-bej); padding-block: 46px 34px; }
.alt-kolonlar { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .alt-kolonlar { grid-template-columns: 1.4fr 1fr 1fr; } }
.alt-kolonlar img { height: 22px; width: auto; }
.alt-marka p { margin-top: 12px; max-width: 34ch; }
.alt-kolonlar .ust-etiket { margin-bottom: .8em; }
.alt-nav { list-style: none; margin: 0; padding: 0; }
.alt-nav li { margin-bottom: 8px; }

.alt-nav a, .alt-iletisim a { display: inline-block; padding: 8px 0; }
.alt-nav a, .alt-iletisim a { color: var(--kahve); text-decoration: none; font-weight: 600; }
.alt-nav a:hover, .alt-iletisim a:hover { color: var(--kiremit); text-decoration: underline; }
.alt-serit {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--ayirici);
  font-size: .8125rem; line-height: 1.6; color: rgba(42, 33, 33, .65);
}
.alt-serit p { margin: 0; }

.lb { position: fixed; inset: 0; z-index: 90; background: rgba(var(--petrol-rgb), .96); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.lb img { max-width: 100%; max-height: 86vh; width: auto; border: 1px solid rgba(241, 234, 215, .4); }

.lb img.yakin { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
.lb img:not(.yakin) { cursor: zoom-in; }

.lb-arac { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }
.lb-dugme {
  background: var(--visne); color: var(--krem); border: 1px solid var(--visne); border-radius: 2px;
  font-family: var(--font-govde); font-size: .95rem; font-weight: 600; padding: 9px 16px; cursor: pointer;
  transition: background-color 120ms linear;
}
.lb-dugme:hover { background: var(--kiremit); border-color: var(--kiremit); }
@media (max-width: 639px) {
  .lb { padding: 12px; }
  .lb-arac { top: 10px; right: 10px; left: 10px; justify-content: flex-end; }
  .lb-dugme { padding: 11px 14px; }   
}
body.lb-acik { overflow: hidden; }

.lb-durum {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0;
  text-align: center; color: var(--krem); font-size: .95rem; letter-spacing: .04em;
}

.dortyuz { padding-block: 110px; }

@media (max-width: 899px) {
  :root { --bosluk-bolum: 64px; }
  .kap { padding-inline: 20px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.45rem; }
  .hero h1 { font-size: 1.9rem; }
  .rakam-kutu b { font-size: 1.45rem; }
  .kutu-vurgu, .kutu-dolgu { padding: 22px 20px; }
  
  .ust-logo img { height: 20px; }
}

@media (max-width: 360px) {
  .evet, .hayir { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}