/* ILG — italianliftgroup.com
   Teslim paketindeki tasarim yonunun uygulamasi.
   Metin, gezinme, dugme, form ve bayrak seritleri GORSELE GOMULMEZ; hepsi
   canli HTML ve CSS. Teslim paketi README'sinin acik kurali bu. */

/* Marka renkleri. Bu blok icerik.py'daki RENK ile birebir ayni olmak
   zorunda — uretec her calismada karsilastiriyor, ayrisirsa duruyor. */
:root {
  --navy: #0a2140;
  --navy-deep: #001a35;
  --bronz: #b59c6d;
  --zemin: #ffffff;
  --zemin2: #f1f1f1;
  --metin: #0a2140;
  --soluk: #66717f;
  --cizgi: #d9dde2;
  --yesil: #009246;
  --kirmizi: #ce2b37;

  --govde: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
  --baslik: Archivo, "Source Sans 3", -apple-system, "Segoe UI", sans-serif;

  --sar: 1240px;          /* icerik genisligi */
  --yan: 32px;            /* sayfa yan boslugu — .sar ve kaydirilan seritler ayni degeri okur */
  --ray: max(var(--yan), calc((100vw - var(--sar)) / 2 + var(--yan)));  /* icerik sol kenari */
  --bosluk: 112px;        /* bolum arasi — masaustu */
  --tepe: 84px;           /* baslik yuksekligi */
  --egik: 16%;            /* kahraman gorselinin diyagonal kesimi */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--baslik);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.sar { max-width: var(--sar); margin: 0 auto; padding: 0 var(--yan); }

/* Klavye odagi her zaman gorunur. Renk TEK BASINA yeterli degil: kalin
   cizgi + kaydirma birlikte. */
:focus-visible {
  outline: 3px solid var(--bronz);
  outline-offset: 3px;
  border-radius: 2px;
}

.gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Klavyeyle gelince gorunur olan "icerige atla" bagi */
.atla {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px;
  text-decoration: none; font-weight: 600; transition: top .18s ease-out;
}
.atla:focus { top: 12px; }

/* ---------- Logo -------------------------------------------------------- */
.logo { display: inline-flex; flex: 0 0 auto; text-decoration: none; }
.logo__gorsel {
  width: 220px; height: auto; aspect-ratio: 2105 / 747; object-fit: contain;
  transition: width .2s ease-out;
}
.logo--ters {
  background: transparent;
}
.logo--ters .logo__gorsel {
  width: 225px;
  filter: grayscale(1) brightness(0) invert(1);
}

/* ---------- Baslik seridi ------------------------------------------------ */
.tepe {
  position: sticky; top: 0; z-index: 50;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow .2s ease-out;
}
.tepe__ic {
  height: var(--tepe);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: height .2s ease-out;
}
.tepe.kucul { box-shadow: 0 2px 14px rgba(10, 33, 64, .09); }
.tepe.kucul .tepe__ic { height: 64px; }
.tepe.kucul .logo__gorsel { width: 178px; }

.gez { display: flex; align-items: center; gap: 32px; }
.gez__b {
  position: relative;
  font-family: var(--baslik);
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--navy);
  padding: 8px 0;
  transition: color .16s ease-out;
}
/* Alt cizgi soldan sagda acilir; etkin sayfada tam durur */
.gez__b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--bronz);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease-out;
}
.gez__b:hover { color: var(--bronz); }
.gez__b:hover::after, .gez__b[aria-current="page"]::after { transform: scaleX(1); }
.gez__b[aria-current="page"] { color: var(--bronz); }

/* Dil anahtari YALNIZ HARF. Bayrak dil secici degildir: bir dil birden
   cok ulkede konusulur, bayrak da bir ulkeyi gosterir. */
.dil { display: flex; align-items: center; gap: 8px; font-family: var(--baslik);
       font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.dil__ayrac { color: var(--cizgi); }
.dil a { text-decoration: none; color: var(--soluk); padding-bottom: 3px;
         border-bottom: 2px solid transparent; transition: color .16s; }
.dil a:hover { color: var(--navy); }
.dil .etkin { color: var(--bronz); border-bottom-color: var(--bronz); }

.hamburger {
  display: none; width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.hamburger span {
  display: block; height: 2px; background: var(--navy); border-radius: 2px;
  margin: 5px 0; transition: transform .22s ease-out, opacity .18s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Dugmeler ----------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); color: #fff; text-decoration: none;
  font-family: var(--baslik); font-size: 15px; font-weight: 600;
  padding: 16px 28px; border: 0; cursor: pointer;
  transition: background .18s ease-out, transform .12s ease-out;
}
.dugme:hover { background: var(--navy-deep); }
.dugme:active { transform: translateY(1px); }
.dugme svg { transition: transform .18s ease-out; }
.dugme:hover svg { transform: translateX(5px); }

/* ---------- Bolum basligi ------------------------------------------------
   Katalogun kalibi: ilk kelime lacivert, ikinci kelime bronz, altinda kisa
   bronz cizgi. */
.bb { margin-bottom: 44px; }
.bb h2, .bb h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 800;
  letter-spacing: -.015em; text-transform: uppercase;
}
.bb .alt { color: var(--bronz); }
.bb::after {
  content: ""; display: block; width: 62px; height: 3px;
  background: var(--bronz); margin-top: 18px;
}

/* ---------- Ana sayfa: kahraman ------------------------------------------ */
.kah { position: relative; background: var(--zemin); overflow: hidden; }
.kah__ic {
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center; min-height: 660px;
  max-width: 1560px; margin: 0 auto;
}
.kah__yazi { padding: 72px 40px 72px var(--ray); }
.kah__yazi h1 {
  font-size: clamp(38px, 5.6vw, 76px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.02;
  max-width: 8.5ch;              /* mockuptaki uc satirlik kirilim */
}
/* Acilista yazi kademeli belirir. CSS animasyonu: betik yuklenmese de
   son kare gorunur durumdur, icerik asla gizli kalmaz. */
@keyframes kah-gir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.kah__yazi > * { animation: kah-gir .7s cubic-bezier(.2, .7, .2, 1) both; }
.kah__yazi > :nth-child(2) { animation-delay: .1s; }
.kah__yazi > :nth-child(3) { animation-delay: .18s; }
.kah__yazi > :nth-child(4) { animation-delay: .26s; }
.kah__gorsel { animation: kah-gir .9s ease-out both; }
@keyframes kah-yakin { from { transform: scale(1.07); } to { transform: none; } }
.kah__gorsel img { animation: kah-yakin 14s cubic-bezier(.2, .6, .2, 1) both; }
.kah__gorsel { overflow: hidden; }
.kah__cizgi { display: block; width: 62px; height: 3px; background: var(--bronz); margin: 30px 0 24px; }
.kah__alt { font-size: 22px; color: var(--navy); margin: 0 0 36px;
  max-width: 22ch; text-wrap: balance; line-height: 1.4; }
.kah__gorsel {
  position: relative; align-self: stretch; min-height: 460px;
  /* Sol kenarda dik diyagonal — katalogdaki kompozisyonun karsiligi */
  clip-path: polygon(var(--egik) 0, 100% 0, 100% 100%, 0 100%);
}
/* Gorselin OZNESI SAGDA, solu bilerek bos (teslim paketi: "subject right /
   copy left"). Ortadan kirpinca bos alan geliyordu. */
.kah__gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* Sol kenara lacivert bir golge: gorsel yaziya dogru koyulasarak iner,
   mockuptaki koyu-lacivert atmosfer */
.kah__gorsel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 33, 64, .55) 0%, rgba(10, 33, 64, .18) 28%, transparent 55%);
  pointer-events: none;
}

/* ---------- Guven seridi ------------------------------------------------- */
.iddia { background: var(--navy); color: #fff; }
.iddia__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 26px; }
.iddia__k {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 28px;
  border-left: 1px solid rgba(181, 156, 103, .42);
}
.iddia__k:first-child { border-left: 0; padding-left: 0; }
.iddia__i {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid var(--bronz);
  display: grid; place-items: center;
}
.iddia__i svg { width: 23px; height: 23px; stroke: var(--bronz); fill: none; stroke-width: 1.6; }
.iddia__m { font-size: 15.5px; line-height: 1.32; }
.iddia__m b { display: block; font-weight: 600; }
.iddia__m span { display: block; font-weight: 400; color: #d7dee8; }

/* ---------- Urun izgarasi ------------------------------------------------
   Mockupta dis cerceve YOK: hucreler arasinda hairline ayrac, zemin acik.
   1 px'lik gap + arkadaki cizgi rengi ayraci ciziyor; dis kenar bos. */
.urunler {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--cizgi);
}
.urun {
  padding: 28px 18px 24px; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--zemin);
  transition: background .2s ease-out;
}
.urun:hover { background: #fafbfc; }
.urun__g { height: 232px; }
.urun__g img { width: 100%; height: 100%; object-fit: contain; transition: transform .32s ease-out; }
.urun:hover .urun__g img { transform: translateY(-10px); }
.urun__ad {
  font-family: var(--baslik); font-size: 16px; font-weight: 600;
  color: var(--navy); margin-top: auto; line-height: 1.3;
  transition: color .16s;
}
.urun:hover .urun__ad { color: var(--bronz); }

/* Gorseli teslim paketinde BOS gelen grup icin yer tutucu. Kirik <img>
   yerine grubun adini tasiyan kutu ciziyoruz; dosya gelince koda dokunmadan
   yerine oturuyor. */
.urun__yok {
  height: 100%; width: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 10px, #e5e9ee 10px, #e5e9ee 20px);
  border: 1px dashed var(--cizgi); color: var(--soluk);
  font-size: 12.5px; text-align: center; padding: 12px; line-height: 1.35;
}

/* ---------- Koyu ayirici ------------------------------------------------- */
.ayirici {
  position: relative; min-height: 330px; display: grid; place-items: center;
  background: var(--navy-deep); overflow: hidden; text-align: center;
  /* ust solda ve alt sagda buyuk ucgen kesimler — mockuptaki gibi */
  clip-path: polygon(0 26%, 15% 0, 100% 0, 100% 74%, 85% 100%, 0 100%);
}
.ayirici img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ayirici::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 53, .35), rgba(0, 26, 53, .55));
}
.ayirici__ic { position: relative; padding: 72px 32px; }
.ayirici__ic p {
  font-family: var(--baslik); color: #fff; margin: 0;
  font-size: clamp(26px, 3.8vw, 44px); font-weight: 700; line-height: 1.18;
  letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.tricolor { display: flex; justify-content: center; margin-top: 20px; }
.tricolor i { display: block; height: 3px; width: 60px; }
.tricolor i:nth-child(1) { background: var(--yesil); }
.tricolor i:nth-child(2) { background: #fff; }
.tricolor i:nth-child(3) { background: var(--kirmizi); }

/* ---------- Hakkimizda tanitimi ------------------------------------------ */
.hak { padding: var(--bosluk) 0 72px; }
.hak__ic { display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; }
.hak__g { overflow: hidden; }
.hak__g img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  transition: transform .5s ease-out; }
.hak__ic:hover .hak__g img { transform: scale(1.03); }
.hak__y h2 {
  font-size: clamp(24px, 2.9vw, 34px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em;
}
.hak__cizgi { display: block; width: 62px; height: 3px; background: var(--bronz); margin: 18px 0 20px; }
.hak__y p { color: var(--navy); margin: 0 0 18px; max-width: 42ch; font-size: 18px; }

/* Ulke isaretleri: pin + silüet + ad. Siluetler basitlestirilmis SVG,
   harita degil — konum belirtmez, ulkeyi gosterir. */
.yerler { display: flex; align-items: stretch; margin-top: 30px; }
.yer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 40px; text-align: center; text-decoration: none;
  font-size: 14px; line-height: 1.3;
}
.yer:first-child { padding-left: 0; }
.yer + .yer { border-left: 1px solid var(--cizgi); }
.yer__pin { width: 22px; height: 26px; stroke: var(--navy); fill: none; stroke-width: 1.6; }
.yer .bayrak { display: block; margin: 2px 0 4px; }
.yer b { display: block; font-weight: 600; color: var(--navy); }
.yer span { color: var(--soluk); }

/* ---------- Katalog seridi -----------------------------------------------
   Mockupta dugme YOK — ana sayfada tek cagri kurali. Serit bastan basa bag;
   sagda egik duran 3B katalog, arkada blueprint dokusu. */
.katserit {
  display: block; background: var(--navy); color: #fff; text-decoration: none;
  overflow: hidden; position: relative;
}
.katserit::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
}
.katserit__ic {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  min-height: 360px;
}
.katserit__y { padding: 44px 0; }
.katserit h2 {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em;
}
.katserit h2 .alt { color: var(--bronz); display: block; }
.katserit .tricolor { justify-content: flex-start; margin: 14px 0 18px; }
.katserit p { color: #d7dee8; margin: 0; max-width: 34ch; font-size: 18px; }
.katserit__ok {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--baslik); font-size: 14px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bronz);
}
.katserit__ok svg { transition: transform .18s ease-out; }
.katserit:hover .katserit__ok svg { transform: translateX(5px); }
.katserit__g {
  align-self: stretch; display: grid; place-items: center;
  perspective: 1400px; padding: 36px 0; min-height: 300px;
}
.katserit__g img {
  width: min(300px, 78%); height: auto;
  transform: rotateY(-22deg) rotateX(4deg) rotate(-3deg);
  box-shadow: -24px 30px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .5s ease-out;
}
.katserit:hover .katserit__g img { transform: rotateY(-16deg) rotateX(3deg) rotate(-2deg) translateY(-6px); }

/* ---------- Katalogdan sayfalar: yatay serit (ana sayfa) -----------------
   Gercek katalog sayfalari; kaydirma yakalamali, kenarlar sar hizasinda. */
.kserit { padding-block: 0 var(--bosluk); }
.kserit__ust p { margin: -26px 0 0; color: var(--soluk); max-width: 52ch; }
.kserit__kaydir {
  /* Serit kenardan tasar ama ILK kart sayfa hizasinda baslar. Snap noktasi bu
     boslugu bilmezse tarayici ilk karti kaydirma alaninin sol kenarina yaslar,
     yuklenir yuklenmez 112px kayar ve serit sayfanin geri kalanindan kopar. */
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 0 44px;
  scroll-padding-left: var(--ray);
  scrollbar-width: thin; scrollbar-color: var(--cizgi) transparent; }
.kserit__l { display: flex; gap: 28px; width: max-content;
  padding: 0 var(--ray); }
.ksayfa { flex: 0 0 236px; scroll-snap-align: start; text-decoration: none; display: block; }
.ksayfa img {
  width: 100%; height: auto; border: 1px solid var(--cizgi);
  box-shadow: 0 18px 36px rgba(10, 33, 64, .14);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.ksayfa:hover img { transform: translateY(-8px); box-shadow: 0 28px 44px rgba(10, 33, 64, .2); }
.ksayfa span { display: block; margin-top: 14px; }
.ksayfa b { display: block; font-family: var(--baslik); font-size: 14px; font-weight: 600; color: var(--navy); }
.ksayfa small { display: block; color: var(--soluk); font-size: 12.5px; letter-spacing: .04em; margin-top: 2px; }
.ksayfalar { background: var(--zemin2); padding-block: var(--bosluk); }
.ksayfalar__g { margin: -26px 0 34px; color: var(--soluk); }
.ksayfalar__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 18px; }
.ksayfa--kucuk b, .ksayfa--kucuk small { text-align: center; }
.ksayfa--kucuk b { font-size: 12.5px; margin-top: 10px; }
.ksayfa--kucuk small { margin-top: 2px; }
.ksayfalar__l { align-items: start; }

/* ---------- Urun grubu sayfasi ------------------------------------------ */
.kirinti { border-bottom: 1px solid var(--cizgi); font-size: 13.5px; color: var(--soluk); }
.kirinti .sar { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding-block: 15px; }
.kirinti a { color: var(--soluk); text-decoration: none; }
.kirinti a:hover { color: var(--bronz); }
.kirinti [aria-current] { color: var(--navy); font-weight: 600; }

.urundetay__ic {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center; padding-block: var(--bosluk); width: 100%;
}
.urundetay__y p { max-width: 54ch; }
.urundetay__y p + p { margin-top: 16px; }
.urundetay__y .maddeler { margin-top: 26px; }
.urundetay__y .yuzeyler { margin-top: 34px; }
.urundetay__g {
  background: var(--zemin2); min-height: 400px;
  display: grid; align-items: center; overflow: hidden;
}
.urundetay__g img { width: 100%; height: 100%; object-fit: contain; padding: 30px; }
.diger { background: var(--zemin2); padding-block: var(--bosluk); }
.urun--simdi { background: var(--zemin2); cursor: default; }
.urun--simdi .urun__ad { color: var(--bronz); }
.bag--ok { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-family: var(--baslik); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }
.urunsec__bag { color: inherit; text-decoration: none; }
.urunsec__bag:hover .alt { color: var(--navy); }

/* ---------- Gizlilik ----------------------------------------------------- */
.gizlilik__b { font-size: 19px; font-weight: 700; margin-top: 34px; margin-bottom: 8px; }
.gizlilik__tarih { color: var(--soluk); font-size: 14px; margin-top: 36px; }

/* ---------- Alt bilgi ---------------------------------------------------- */
.alt-bilgi { background: var(--navy); color: #fff; }
.alt-bilgi a { color: #fff; }
.alt__ust {
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
  padding: 34px 0 26px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.alt__gez { display: flex; gap: 34px; flex-wrap: wrap; }
.alt__gez a {
  font-family: var(--baslik); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: color .16s;
}
.alt__gez a:hover { color: var(--bronz); }
.alt__orta {
  display: grid; grid-template-columns: 1.25fr 1.05fr .9fr .9fr .8fr; gap: 26px;
  padding: 28px 0 34px; font-size: 14.5px; line-height: 1.5;
}
.alt__k { display: flex; gap: 12px; align-items: flex-start; }
.alt__k svg { flex: 0 0 auto; width: 18px; height: 20px; stroke: var(--bronz); fill: none; stroke-width: 1.6; margin-top: 2px; }
.alt__k div { color: #cfd7e2; }
.alt__k b { color: #fff; font-weight: 600; display: block; }
.alt__k a { color: inherit; text-decoration-color: var(--bronz); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.alt__k a:hover { color: #fff; }
.alt__alt {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 0 0 22px; font-size: 13px; color: #9fb0c4;
}
.alt__alt a { color: #cfd7e2; text-decoration: none; transition: color .16s; }
.alt__alt a:hover { color: var(--bronz); }
.alt__bar { display: flex; }
.alt__bar i { display: block; height: 5px; flex: 1; }
.alt__bar i:nth-child(1) { background: var(--yesil); }
.alt__bar i:nth-child(2) { background: #fff; }
.alt__bar i:nth-child(3) { background: var(--kirmizi); }

/* ---------- Ic sayfa kahramani ------------------------------------------- */
.ickah {
  position: relative; background: var(--navy-deep); color: #fff;
  min-height: 320px; display: grid; align-items: center; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 87% 100%, 0 100%);
}
.ickah img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.ickah::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 22, 46, .95) 0%, rgba(0, 22, 46, .87) 44%,
                              rgba(0, 22, 46, .38) 74%, rgba(0, 22, 46, .06) 100%);
}
.ickah__ic { position: relative; width: 100%; padding-block: 70px 80px; }
.ickah h1 {
  font-size: clamp(36px, 4.8vw, 58px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.015em;
  text-shadow: 0 2px 18px rgba(0, 16, 34, .55);
}
/* Fotograf uzerinde bronz sonuyor: acik bronz ton, olculen kontrast 4,5+ */
.ickah__ust { color: #d8c08a; font-size: 20px; margin: 12px 0 0;
  text-shadow: 0 1px 12px rgba(0, 16, 34, .8); }
.ickah__cizgi { display: block; width: 62px; height: 3px; background: var(--bronz); margin-top: 22px; }

/* ---------- Urun sayfasi -------------------------------------------------
   Ilk dort grup tam genislikte donusumlu satir; kaplama ornegi olan
   gruplarda ucuncu sutun. Son dort grup ikili izgara — mockuptaki duzen. */
.urunsec { border-bottom: 1px solid var(--cizgi); position: relative; overflow: hidden; }
/* Katalog sirasi: buyuk, soluk numara — sira gercek bir sira */
.urunsec__no {
  position: absolute; top: 18px; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--baslik); font-size: clamp(90px, 12vw, 170px); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: rgba(10, 33, 64, .045);
}
.urunsec__ic { position: relative; }
.urunkart { position: relative; overflow: hidden; }
.urunkart .urunsec__no { font-size: clamp(80px, 9vw, 130px); top: 10px; right: 8px; }
.urunkart > .bel, .urunkart__g { position: relative; z-index: 1; }
.urunsec--gri { background: var(--zemin2); }
.urunsec__ic {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px; align-items: center; padding-block: 64px;
}
.urunsec--uc .urunsec__ic { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.35fr); }
.urunsec--uc .urunsec__g img { height: 440px; }
.urunsec--uc .yuzey__l { gap: 12px; }
.urunsec--uc .yuzey { width: 80px; }
.urunsec--uc .yuzey i { height: 64px; }
.urunsec--ters .urunsec__ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.urunsec--ters .urunsec__y { order: 2; }
.urunsec h2 {
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.015em;
}
.urunsec h2 .alt { color: var(--bronz); display: block; }
.urunsec__cizgi { display: block; width: 62px; height: 3px; background: var(--bronz); margin: 20px 0 20px; }
.maddeler { margin: 0; padding: 0; list-style: none; }
.maddeler li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  color: var(--navy); font-size: 16px; line-height: 1.5;
}
.maddeler li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 9px; height: 2px; background: var(--bronz);
}
.urunsec__g { display: grid; place-items: center; }
.urunsec__g img { width: 100%; height: 380px; object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(10, 33, 64, .16)); }

/* Yuzey ornekleri — kutular CSS, etiketler CANLI METIN */
.yuzeyler h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 14px;
}
.yuzey__l { display: flex; gap: 12px; flex-wrap: wrap; }
.yuzey { width: 88px; }
.yuzey i { display: block; height: 76px; border: 1px solid var(--cizgi); margin-bottom: 8px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.yuzey span {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--soluk); line-height: 1.3;
}
.urunsec__y .yuzeyler { margin-top: 26px; }

/* Ikili izgara: son dort grup */
.urunikili { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi);
  max-width: 1560px; margin: 0 auto; }
.urunkart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px;
  align-items: center; padding: 52px 40px; background: var(--zemin);
}
.urunkart:nth-child(n+3) { background: var(--zemin2); }
.urunkart h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.06; }
.urunkart h2 .alt { color: var(--bronz); display: block; }
.urunkart .urunsec__cizgi { margin: 16px 0 16px; }
.urunkart li { font-size: 15px; margin-bottom: 6px; }
.urunkart__g { height: 260px; }
.urunkart__g img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(10, 33, 64, .14)); }

.kapanis {
  display: flex; align-items: center; justify-content: center; gap: 36px;
  flex-wrap: wrap; padding-block: 60px;
}
.kapanis p {
  font-family: var(--baslik); font-size: clamp(24px, 3vw, 34px);
  font-weight: 700; margin: 0; letter-spacing: -.01em;
}

/* ---------- Yazi bolumu (Hakkimizda, Gizlilik, Katalog) ------------------ */
.yazi { padding: var(--bosluk) 0; }
.yazi__ic { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.yazi--tek .yazi__ic { grid-template-columns: minmax(0, 68ch); }
.yazi h2 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; text-transform: uppercase; }
.yazi__cizgi { display: block; width: 62px; height: 3px; background: var(--bronz); margin: 18px 0 20px; }
.yazi p { max-width: 66ch; }
.yazi img { width: 100%; height: auto; }
.uyari {
  border-left: 3px solid var(--bronz); background: var(--zemin2);
  padding: 16px 20px; color: var(--soluk); font-size: 15px; margin-top: 28px;
}

/* ---------- Hakkimizda: ILG ne uretiyor ---------------------------------- */
.uretim { background: var(--navy); color: #fff; padding-block: 88px; }
.uretim__ic { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.uretim h2 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; text-transform: uppercase; }
.uretim p { color: #d7dee8; max-width: 42ch; font-size: 18px; }
.maddeler--buyuk { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.maddeler--buyuk li { color: #fff; font-size: 17px; line-height: 1.45; padding-left: 26px; margin: 0;
  border-left: 0; }
.maddeler--buyuk li::before { width: 12px; top: .62em; }
.ulke__yapim {
  display: inline-block; font-family: var(--baslik); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  border: 1px solid var(--cizgi); padding: 5px 10px; margin-bottom: 14px;
}

/* ---------- Hakkimizda: iki ulke -----------------------------------------
   Metin solda, sagda siluetli ulke kartlari (unvan + adres). */
.ulkeler { background: var(--zemin2); padding-block: var(--bosluk); }
.ulkeler__ic { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.ulkeler h2 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; text-transform: uppercase; }
.ulkeler p { max-width: 52ch; }
.ulkeler .uyari { background: var(--zemin); }
.ulke__l { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ulke {
  background: var(--zemin); padding: 32px 28px 30px; border-top: 3px solid var(--bronz);
  box-shadow: 0 18px 40px rgba(10, 33, 64, .08);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.ulke:hover { transform: translateY(-4px); box-shadow: 0 26px 48px rgba(10, 33, 64, .12); }
.ulke .bayrak { margin-bottom: 20px; display: block; }
.ulke h3 { font-size: 24px; font-weight: 800; }
.ulke__u {
  display: block; color: var(--bronz); font-family: var(--baslik);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin: 4px 0 14px;
}
.ulke b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ulke p { margin: 0; color: var(--soluk); font-size: 15px; line-height: 1.55; }
.yazi__g img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.bag { color: var(--bronz); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Adres kartlari ----------------------------------------------- */
.adresler { display: grid; gap: 30px; }
.adres { display: flex; gap: 20px; padding-bottom: 30px; border-bottom: 1px solid var(--bronz); }
.adres:last-child { border-bottom: 0; }
.adres__i {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  background: var(--navy); display: grid; place-items: center;
}
.adres__i svg { width: 27px; height: 27px; stroke: #fff; fill: none; stroke-width: 1.5; }
.adres h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.adres b { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.adres p { margin: 0; color: var(--soluk); font-size: 15.5px; line-height: 1.55; }
.iletisim-yt { display: grid; gap: 18px; margin-top: 4px; }
.iletisim-yt div { display: flex; gap: 20px; align-items: center; }
.iletisim-yt .adres__i { width: 54px; height: 54px; }
.iletisim-yt a { color: var(--navy); font-weight: 650; text-decoration-color: var(--bronz); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.iletisim-yt a:hover { color: var(--bronz); }

/* ---------- Form --------------------------------------------------------- */
.form-l { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding-block: 96px var(--bosluk); }
.form-l > div:first-child { border-right: 1px solid var(--cizgi); padding-right: 56px; }
.form-l .bb { margin-bottom: 24px; }
.alan { margin-bottom: 18px; }
.alan label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.alan .ek { font-weight: 400; color: var(--soluk); }
.alan input, .alan select, .alan textarea {
  width: 100%; border: 1px solid var(--cizgi); background: #fff;
  padding: 12px 14px; color: var(--metin);
  /* Kisayol YAZILMAZ: `font: 16px/1.5 inherit` gecersiz, tarayici tum
     bildirimi atar ve kutu varsayilan yaziyla kalir. */
  font-family: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .16s;
}
.alan textarea { min-height: 108px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--navy); outline: none;
  box-shadow: 0 0 0 3px rgba(181, 156, 103, .28); }
.alan[data-hata] input, .alan[data-hata] select, .alan[data-hata] textarea { border-color: var(--kirmizi); }
.alan__hata { display: none; color: var(--kirmizi); font-size: 14px; margin-top: 6px; }
.alan[data-hata] .alan__hata { display: block; }

/* Dosya alani: tarayici varsayilani yerine atac + metin. Gercek <input>
   gorunmez ama odaklanabilir; etiket tiklaninca acilir. */
.dosya { position: relative; }
.dosya input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dosya__k {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--cizgi); padding: 12px 14px; color: var(--soluk); font-size: 16px;
}
.dosya__k svg { width: 18px; height: 18px; stroke: var(--soluk); fill: none; stroke-width: 1.6; flex: 0 0 auto; }
.dosya input:focus-visible + .dosya__k { outline: 3px solid var(--bronz); outline-offset: 2px; }

.onay { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0; font-size: 15px; }
.onay input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--navy); }
.onay[data-hata] { color: var(--kirmizi); }
.form-durum {
  display: none; border-left: 3px solid var(--bronz); background: var(--zemin2);
  padding: 14px 18px; margin-bottom: 22px; font-size: 15px;
}
.form-durum[data-goster], .form-durum--hedef:target { display: block; }
/* Bal kupu alani: ekran disi, odak sirasinda yok */
.web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Katalog sayfasi ---------------------------------------------- */
.kat__ic { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.kat__kapak { border: 1px solid var(--cizgi); box-shadow: 0 22px 44px rgba(10, 33, 64, .14); }
/* Icindekiler: katalogun sirasi gercek bir sira, numara anlam tasiyor */
.kat__ic_b {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soluk); margin: 30px 0 10px;
}
.kat__liste { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: k; }
.kat__liste li { counter-increment: k; border-top: 1px solid var(--cizgi); }
.kat__liste li:last-child { border-bottom: 1px solid var(--cizgi); }
.kat__liste a {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 0;
  text-decoration: none; transition: color .16s;
}
.kat__liste a::before {
  content: counter(k, decimal-leading-zero); flex: 0 0 26px;
  font-family: var(--baslik); font-size: 12px; font-weight: 700; color: var(--bronz);
}
.kat__liste span { flex: 1; font-weight: 600; }
.kat__liste small { color: var(--soluk); font-size: 14px; font-variant-numeric: tabular-nums; }
.kat__liste a:hover span { color: var(--bronz); }

/* ---------- 404 ve kok dil secimi ---------------------------------------- */
.hata { padding-block: var(--bosluk); }
.hata__ic { max-width: 640px; }
.hata__kod {
  font-family: var(--baslik); font-size: 14px; font-weight: 700; letter-spacing: .12em;
  color: var(--bronz); margin: 0 0 14px;
}
.hata h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -.02em; }
.hata h1 span { color: var(--bronz); font-weight: 600; }
.hata h2 { font-size: 26px; font-weight: 800; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--cizgi); }
.hata p { color: var(--soluk); margin: 14px 0 22px; }
.dil-sec { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Belirme ------------------------------------------------------
   Gizleme YALNIZ `js` sinifi varken uygulanir; o sinifi <head> icindeki
   kucuk betik ekliyor. Boylece betik yuklenmezse veya hata verirse icerik
   gizli KALMAZ — "JS ile gizle, JS ile goster" kalibi, betik dusunce
   sayfayi bombos birakiyor. */
/* Urun izgarasi: kap belirince hucreler sirayla gelir (60 ms kademe) */
.js .urunler.bel .urun { opacity: 0; transform: translateY(14px); }
.js .urunler.bel.gor .urun { opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out; }
.js .urunler.bel.gor .urun:nth-child(2) { transition-delay: .06s; }
.js .urunler.bel.gor .urun:nth-child(3) { transition-delay: .12s; }
.js .urunler.bel.gor .urun:nth-child(4) { transition-delay: .18s; }
.js .urunler.bel.gor .urun:nth-child(5) { transition-delay: .24s; }
.js .urunler.bel.gor .urun:nth-child(6) { transition-delay: .30s; }
.js .urunler.bel.gor .urun:nth-child(7) { transition-delay: .36s; }
.js .urunler.bel.gor .urun:nth-child(8) { transition-delay: .42s; }
.js .bel { opacity: 0; transform: translateY(18px); }
.js .bel.gor { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js .bel, .js .bel.gor, .js .urunler.bel .urun { opacity: 1; transform: none; transition: none; }
  .kah__gorsel img, .kah__yazi > *, .kah__gorsel { animation: none; }
  .urun:hover .urun__g img, .dugme:hover svg, .katserit:hover .katserit__g img,
  .hak__ic:hover .hak__g img { transform: none; }
}

/* ---------- Duyarli ------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --bosluk: 80px; }
  .kah__ic { min-height: 540px; }
  .kah__yazi { padding: 56px var(--yan); }
  .urunler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-l { grid-template-columns: 1fr; gap: 48px; }
  .form-l > div:first-child { border-right: 0; padding-right: 0; }
  .kat__ic { grid-template-columns: 300px 1fr; gap: 40px; }
  .urunsec--uc .urunsec__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .urunsec--uc .urunsec__yuzey { grid-column: 1 / -1; }
  .urunikili { grid-template-columns: 1fr; }
  .urunkart:nth-child(n) { background: var(--zemin); }
  .urunkart:nth-child(even) { background: var(--zemin2); }
  .alt__orta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .gez { display: none; }
  .hamburger { display: block; }
  .tepe__ic { gap: 12px; }
  .logo__gorsel { width: 195px; }
  /* Acilan menu: baslik seridinin altina tam genislikte iner */
  .gez.acik {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--zemin); border-bottom: 1px solid var(--cizgi);
    padding: 8px 32px 20px; box-shadow: 0 14px 30px rgba(10, 33, 64, .1);
  }
  .gez.acik .gez__b { padding: 14px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; letter-spacing: .05em; }
  .gez.acik .gez__b::after { display: none; }
  /* Kahraman mobilde de YAN YANA — mockup 02 boyle: yazi solda, gorsel sagda */
  .kah__ic { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 0; }
  .kah__yazi { padding: 40px 16px 40px var(--yan); }
  .kah__yazi h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .kah__alt { font-size: 17px; margin-bottom: 26px; }
  .kah__cizgi { margin: 18px 0 16px; }
  .kah__gorsel { min-height: 420px; }
  :root { --egik: 22%; }
  .dugme { padding: 14px 20px; font-size: 14px; }
  /* Iddia seridi 2x2 — ikon SOLDA kaliyor, mockup 02 gibi */
  .iddia__l { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 10px; }
  .iddia__k { padding: 16px 16px; border-left: 0; }
  .iddia__k:first-child { padding-left: 16px; }
  .iddia__k:nth-child(even) { border-left: 1px solid rgba(181, 156, 103, .42); }
  .iddia__k:nth-child(n+3) { border-top: 1px solid rgba(181, 156, 103, .42); }
  .hak__ic, .yazi__ic, .ulkeler__ic, .uretim__ic, .urundetay__ic {
    grid-template-columns: 1fr; gap: 34px; }
  .urundetay__g { min-height: 300px; }
  .maddeler--buyuk { grid-template-columns: 1fr; }
  .urunsec__no { display: none; }
  .ksayfa { flex-basis: 180px; }
  .katserit__ic { grid-template-columns: 1fr 1fr; gap: 16px; min-height: 240px; }
  .katserit__g { padding: 20px 0; min-height: 0; }
  .katserit__g img { width: min(170px, 88%); }
  .urunsec__ic, .urunsec--ters .urunsec__ic, .urunsec--uc .urunsec__ic {
    grid-template-columns: 1fr; gap: 30px; padding-block: 48px;
  }
  .urunsec__g { order: 1; }
  .urunsec__g img { height: 280px; }
  .urunsec__y { order: 2; }
  .urunsec__yuzey { order: 3; }
  .urunkart { grid-template-columns: 1fr; padding: 40px 24px; }
  .urunkart__g { order: -1; height: 220px; }
  .alt__orta { grid-template-columns: 1fr; gap: 20px; }
  .alt__ust { gap: 24px; }
  .kat__ic { grid-template-columns: 1fr; }
  .kat__kapak { max-width: 320px; }
  .ayirici { min-height: 250px; clip-path: polygon(0 14%, 9% 0, 100% 0, 100% 86%, 91% 100%, 0 100%); }
  .ickah { clip-path: polygon(0 0, 100% 0, 100% 86%, 92% 100%, 0 100%); }
}

@media (max-width: 560px) {
  :root { --bosluk: 58px; --yan: 20px; }
  body { font-size: 16px; }
  .gez.acik { padding: 8px 20px 18px; }
  .logo__gorsel { width: 165px; }
  .tepe.kucul .logo__gorsel { width: 150px; }
  .logo--ters .logo__gorsel { width: min(205px, calc(100vw - 72px)); }
  /* Dar ekranda yazi sutunu biraz daha genis: dugme tek satirda kalsin */
  .kah__ic { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  .kah__yazi { padding: 30px 12px 30px var(--yan); }
  .kah__gorsel { min-height: 400px; }
  .urun { padding: 22px 12px 20px; }
  .urun__g { height: 160px; }
  .urun__ad { font-size: 14.5px; }
  .yerler { flex-wrap: wrap; gap: 18px 0; }
  .yer { padding: 0 20px; flex: 1 1 45%; }
  .yer:first-child { padding-left: 0; }
  .kapanis { flex-direction: column; gap: 20px; text-align: center; }
  .ulke__l { grid-template-columns: 1fr; }
  .ksayfa { flex-basis: 150px; }
  /* Telefonda uc sutun kucuk resmi 100px'e dusuruyor, sayfa okunmuyor */
  .ksayfalar__l { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .yuzey { width: calc(50% - 7px); }
  /* Telefonda 10.5px etiket okunmuyor; kaplama adlari veri, susleme degil */
  .yuzey span { font-size: 12px; letter-spacing: .03em; }
  .ulke__yapim { font-size: 12px; }
  /* Onay kutusu parmakla tutulacak kadar buyusun (18px hedef kucuk) */
  .onay { padding: 6px 0; font-size: 16px; }
  .onay input { width: 22px; height: 22px; margin-top: 2px; }
  .yuzey i { height: 56px; }
  .katserit__ic { grid-template-columns: 1fr; }
  .katserit__y { padding: 36px 0 8px; }
  .katserit__g { padding: 8px 0 36px; }
  .katserit__g img { width: 190px; }
}

/* Dar telefonda uzun Turkce etiket ("Guvenebileceginiz") iki sutuna
   sigmiyor; ikon metnin ustune alinir, YAZI BOYUTU KUCULTULMEZ. */
@media (max-width: 420px) {
  .iddia__k { flex-direction: column; align-items: flex-start; gap: 10px; }
  .iddia__i { width: 40px; height: 40px; }
  .kah__yazi h1 { font-size: 28px; }
}

@media (max-width: 340px) {
  .logo__gorsel { width: 148px; }
  .tepe.kucul .logo__gorsel { width: 138px; }
}

@media print {
  .tepe, .hamburger, .dil, .ayirici, .katserit, .atla { display: none; }
  body { font-size: 11pt; }
  .bel { opacity: 1; transform: none; }
}