:root {
  /* renkler */
  --pembe-acik: #fedde5;   /* üst menü, pembe şerit */
  --pembe: #fdbbcb;        /* başlıklar, pembe bölüm, ikinci düğme */
  --yesil: #dcdd6f;        /* düğmeler, kahraman etiketi */
  --krem: #f2f3ca;         /* alt bilgi */
  --sari-acik: #ffeeaa;    /* "cesaret" bölümü */
  --sari: #ffcd00;         /* logo, çalışma saatleri */
  --sari-serit: #ffe680;   /* instagram şeridi */
  --gri: #7f8083;          /* gövde metni */
  --gri-acik: #949494;     /* yorum metni, çerçeve */
  --koyu: #383838;         /* menü */
  --beyaz: #ffffff;
  /* yazı tipleri */
  --baslik: 'Instrument Serif', 'Times New Roman', serif;
  --govde: 'Poppins', Arial, sans-serif;
  --logo: 'Limelight', 'Instrument Serif', serif;
  /* orijinal başlık yazısı (The New Elegance Condensed) aynı px'te çok daha iri çiziliyor:
     ölçülen mürekkep yüksekliğine göre karşılık katsayısı */
  --k: 1.5;
  --kalin: 0.022em;        /* Instrument Serif ince; orijinalin ağırlığına yaklaştıran kontur */
  /* ölçüler */
  --serit: 42px;           /* bölümler arası desen şeridi */
  --dugme-r: 60px;
  --etiket-r: 0 0 30px 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--govde);
  color: var(--gri);
  background: #fff url(../img/desen.svg) 0 0 / 1160px 580px repeat;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.b { font-family: var(--baslik); font-weight: 400; -webkit-text-stroke: var(--kalin) currentColor; letter-spacing: -0.01em; }
.b i, i.b { font-style: italic; }
.serit { height: var(--serit); }

/* ---------- düğme ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 235px; height: 65px; border-radius: var(--dugme-r);
  background: var(--yesil); color: var(--beyaz);
  font: 700 18px/1 var(--govde); letter-spacing: 0.9px; text-transform: none;
  transition: background-color .4s ease, color .4s ease;
}
.dugme:hover { background: var(--beyaz); color: var(--yesil); }
.dugme.pembe { background: var(--pembe); }
.dugme.pembe:hover { background: var(--beyaz); color: var(--pembe); }

/* ---------- üst menü ---------- */
.ust { background: var(--pembe-acik); height: 212px; position: relative; }
.ust .insta { position: absolute; left: 97px; top: 66px; width: 14px; height: 14px; color: #000; }
.logo {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
  font: 400 50px/1 var(--logo); color: var(--sari); letter-spacing: 0; white-space: nowrap;
  transform-origin: center top;
}
.logo span { display: inline-block; transform: scaleY(1.6); transform-origin: center 20%; }
.ust .dugme { position: absolute; left: 1138px; top: 55px; width: 165px; height: 45px; font: 600 16px/1 var(--govde); letter-spacing: 0.8px; }
.menu { position: absolute; left: 0; right: 0; top: 143px; display: flex; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block; height: 45px; line-height: 45px; padding: 0 2px; border-radius: 80px;
  font-family: var(--baslik); font-size: 26px; color: var(--koyu);
  -webkit-text-stroke: var(--kalin) currentColor; letter-spacing: -0.02em;
  transition: background-color .3s;
}
.menu a.aktif { background: var(--yesil); color: var(--gri); padding: 0 6px; }
.menu a:hover { background: var(--yesil); }
.menu-dugme, .menu-katman { display: none; }

/* ---------- kahraman: 4 sütun ---------- */
.kahraman { display: grid; grid-template-columns: repeat(4, 1fr); height: 1047px; }
.kahraman a { position: relative; overflow: hidden; display: block; }
.kahraman img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.kahraman a:hover img { transform: scale(1.05); }
.etiket {
  position: absolute; left: 0; top: 826px; width: 68%; min-height: 146px;
  background: var(--yesil); border-radius: var(--etiket-r); padding: 14px 16px 20px;
}
.etiket strong { display: block; font-size: calc(28px * var(--k)); line-height: 0.92; color: var(--beyaz); }
.etiket small { display: block; margin-top: 8px; font: 300 16px/26.7px var(--govde); color: var(--gri); }

/* ---------- cesaret ---------- */
.cesaret { background: var(--sari-acik); height: 455px; text-align: center; padding-top: 92px; }
.cesaret h1 { margin: 0; font-size: calc(56px * var(--k)); line-height: 0.98; color: var(--pembe); }
.cesaret .dugme { margin-top: 40px; }

/* ---------- hakkımızda ---------- */
.hakkinda { display: grid; grid-template-columns: 1fr 1fr; height: 739px; }
.hakkinda .foto {
  background:
    linear-gradient(90deg, #fff 2px, transparent 2px) 71px 95px / 573px 581px repeat,
    linear-gradient(#fff 2px, transparent 2px) 71px 95px / 573px 581px repeat,
    url(../img/hakkinda.jpg) 73px 97px / 571px 579px repeat;
  filter: grayscale(1);
}
.hakkinda .metin { background: var(--beyaz); position: relative; padding: 108px 0 0 48px; }
.hakkinda h2 { margin: 0; width: 390px; font-size: calc(28px * var(--k)); line-height: 0.8; color: var(--pembe); }
.hakkinda p { width: 346px; margin: 28px 0 32px; font: 200 18px/27px var(--govde); color: var(--gri); }
.hakkinda .cizim { position: absolute; left: 405px; bottom: 6px; width: 180px; height: 215px; color: var(--yesil); }

/* ---------- pembe: renk ---------- */
.renk { display: grid; grid-template-columns: 1fr 1fr; height: 608px; }
.renk .metin { background: var(--pembe); text-align: right; padding: 100px 51px 0 0; color: var(--beyaz); }
.renk h2 { margin: 0 0 0 auto; width: 360px; font-size: calc(25px * var(--k)); line-height: 0.86; }
.renk p { margin: 30px 0 34px auto; width: 422px; font: 400 18px/27px var(--govde); }
.renk .foto img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- yorumlar ---------- */
.yorum { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--beyaz); height: 742px; border: 1px solid var(--gri-acik); }
.yorum article { border-left: 1px solid var(--gri-acik); text-align: center; padding-top: 80px; }
.yorum article:first-child { border-left: 0; }
.yorum .cizim { width: 84px; height: 100px; margin: 0 auto; }
.yorum h3 { margin: 22px 0 22px; font-size: calc(26px * var(--k)); line-height: 1; }
.yorum p { width: 312px; margin: 0 auto; font: italic 200 20px/32px var(--govde); color: var(--gri-acik); }
.yorum .s1 { color: var(--sari); } .yorum .s2 { color: var(--yesil); } .yorum .s3 { color: var(--pembe); }
.yorum-ok { display: none; }

/* ---------- çalışma saatleri ---------- */
.saat { height: 455px; text-align: center; padding-top: 86px; }
.saat h2 { margin: 0; font-size: calc(56px * var(--k)); line-height: 0.98; color: var(--sari); }
.saat .dugme { margin-top: 48px; }

/* ---------- instagram ---------- */
.insta-serit { background: var(--sari-serit); height: 122px; display: flex; align-items: center; justify-content: center; }
.insta-serit p { margin: 0; font-size: calc(22px * var(--k)); color: var(--beyaz); }
.akis { background: var(--pembe-acik); height: 151px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.akis img { width: 131px; height: 131px; object-fit: cover; }

/* ---------- alt bilgi ---------- */
.alt { background: var(--krem); height: 467px; text-align: center; padding-top: 40px; color: var(--pembe); }
.alt .logo { position: static; transform: none; display: inline-block; font-size: 40px; color: var(--pembe); }
.alt .logo .bos { color: transparent; -webkit-text-stroke: 1.2px var(--pembe); }
.alt .insta { display: block; width: 14px; height: 14px; margin: 18px auto 0; color: #000; }
.alt .saatler { margin: 14px 0 0; font-size: calc(15px * var(--k)); line-height: 1.05; }
.alt .tel { display: block; margin-top: 18px; font-size: calc(22px * var(--k)); line-height: 41px; }
.alt .eposta { display: block; margin-top: 16px; font: italic 600 15px/28px var(--govde); text-decoration: underline; }
.alt address { margin-top: 10px; font: italic 600 15px/22.5px var(--govde); }
.alt small { display: block; margin-top: 18px; font: 300 14px/25px var(--govde); }

/* görünme hareketi (Wix "yükselerek belir") */
.belir { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.belir.gorundu { opacity: 1; transform: none; }

/* ================= TELEFON (orijinal 320 birim -> 390 px) ================= */
@media (max-width: 767px) {
  :root { --p: calc(100vw / 390); --serit: calc(49 * var(--p)); }
  body { background-size: calc(1160 * var(--p) * .55) calc(580 * var(--p) * .55); }
  .dugme { width: calc(195 * var(--p)); height: calc(50 * var(--p)); font-size: calc(22 * var(--p)); letter-spacing: calc(1.1 * var(--p)); }

  .ust { height: calc(263 * var(--p)); }
  .ust .insta, .ust .dugme, .menu { display: none; }
  .logo { top: calc(38 * var(--p)); font-size: calc(54 * var(--p)); line-height: .95; color: var(--beyaz); text-align: center; white-space: normal; }
  .logo span { display: block; transform: scaleY(1.3); }
  .menu-dugme {
    display: flex; position: absolute; left: 50%; top: calc(178 * var(--p)); transform: translateX(-50%);
    width: calc(45 * var(--p)); height: calc(45 * var(--p)); border: 0; background: var(--yesil); color: #fff; cursor: pointer;
    font: 400 calc(14 * var(--p))/1.05 var(--baslik); letter-spacing: calc(6 * var(--p)); padding: 0 0 0 calc(6 * var(--p));
    align-items: center; justify-content: center; text-align: center;
  }
  .menu-katman { position: fixed; inset: 0; z-index: 50; background: var(--pembe-acik); flex-direction: column; align-items: center; justify-content: center; gap: calc(18 * var(--p)); }
  .menu-katman.acik { display: flex; }
  .menu-katman a { font: 400 calc(34 * var(--p)) var(--baslik); color: var(--koyu); }
  .menu-katman button { position: absolute; top: calc(20 * var(--p)); right: calc(20 * var(--p)); border: 0; background: none; font-size: calc(30 * var(--p)); color: var(--koyu); }

  .kahraman { display: block; height: calc(602 * var(--p)); overflow: hidden; }
  .kahraman a { height: calc(360 * var(--p)); }
  .kahraman a:nth-child(2) { height: calc(242 * var(--p)); }
  .kahraman a:nth-child(n+3) { display: none; }
  .etiket { top: calc(236 * var(--p)); left: calc(23 * var(--p)); width: calc(341 * var(--p)); min-height: calc(101 * var(--p)); padding: calc(14 * var(--p)) calc(10 * var(--p)); border-radius: 0 0 calc(36 * var(--p)) 0; }
  .etiket strong { font-size: calc(24.4 * var(--k) * var(--p)); white-space: nowrap; }
  .etiket small { font-size: calc(19.5 * var(--p)); line-height: 1.37; margin-top: calc(6 * var(--p)); }
  .kahraman a:nth-child(2) .etiket { top: auto; bottom: calc(21 * var(--p)); min-height: 0; padding: calc(8 * var(--p)) calc(10 * var(--p)); }
  .kahraman a:nth-child(2) .etiket strong, .kahraman a:nth-child(2) .etiket small span { display: none; }
  .kahraman a:nth-child(2) .etiket small { margin: 0; }

  .cesaret { height: calc(316 * var(--p)); padding-top: calc(52 * var(--p)); }
  .cesaret h1 { font-size: calc(36.6 * var(--k) * var(--p)); }
  .cesaret .dugme { margin-top: calc(26 * var(--p)); }

  .hakkinda { display: block; height: auto; }
  .hakkinda .foto { height: calc(411 * var(--p)); background: url(../img/hakkinda.jpg) center 20% / cover; }
  .hakkinda .metin { padding: calc(83 * var(--p)) calc(30 * var(--p)) calc(100 * var(--p)); text-align: center; overflow: hidden; }
  .hakkinda h2 { width: auto; font-size: calc(31.7 * var(--k) * var(--p)); line-height: 1.03; }
  .hakkinda p { width: auto; margin: calc(38 * var(--p)) calc(24 * var(--p)) calc(50 * var(--p)); font-size: calc(19.5 * var(--p)); line-height: calc(29 * var(--p)); }
  .hakkinda .cizim { left: auto; right: calc(60 * var(--p)); top: calc(-150 * var(--p)); bottom: auto; width: calc(130 * var(--p)); height: calc(170 * var(--p)); }

  .renk { display: flex; flex-direction: column-reverse; height: auto; }
  .renk .foto { height: calc(211 * var(--p)); }
  .renk .metin { text-align: center; padding: calc(30 * var(--p)) calc(30 * var(--p)) calc(44 * var(--p)); }
  .renk h2 { display: none; }
  .renk p { width: auto; margin: 0 0 calc(32 * var(--p)); font-size: calc(20.7 * var(--p)); line-height: calc(31 * var(--p)); }


  .yorum { display: block; position: relative; height: calc(350 * var(--p)); overflow: hidden; border-width: 1px 0; }
  .yorum article { display: none; border: 0; padding: calc(16 * var(--p)) calc(36 * var(--p)) 0; }
  .yorum article.secili { display: block; }
  .yorum .cizim { width: calc(56 * var(--p)); height: calc(66 * var(--p)); }
  .yorum h3 { margin: calc(8 * var(--p)) 0 calc(14 * var(--p)); font-size: calc(23 * var(--k) * var(--p)); }
  .yorum p { width: auto; font-size: calc(19.5 * var(--p)); line-height: calc(31 * var(--p)); }
  .yorum-ok { display: block; position: absolute; top: 50%; border: 0; background: none; color: var(--gri-acik); width: calc(18 * var(--p)); height: calc(36 * var(--p)); padding: 0; }
  .yorum-ok.sol { left: calc(8 * var(--p)); } .yorum-ok.sag { right: calc(8 * var(--p)); }

  .saat { height: calc(234 * var(--p)); padding-top: calc(36 * var(--p)); }
  .saat h2 { font-size: calc(24.4 * var(--k) * var(--p)); }
  .saat .dugme { margin-top: calc(28 * var(--p)); background: var(--pembe); }

  .insta-serit { height: calc(124 * var(--p)); padding: 0 calc(40 * var(--p)); text-align: center; }
  .insta-serit p { font-size: calc(22 * var(--k) * var(--p)); line-height: .9; }
  .akis { height: auto; flex-wrap: wrap; gap: calc(6 * var(--p)); padding: calc(53 * var(--p)) calc(9 * var(--p)) calc(106 * var(--p)); background: linear-gradient(var(--pembe-acik) 0 calc(53 * var(--p)), var(--beyaz) 0); }
  .akis img { width: calc(120 * var(--p)); height: calc(160 * var(--p)); }

  .alt { height: calc(422 * var(--p)); padding-top: calc(36 * var(--p)); color: var(--gri-acik); display: flex; flex-direction: column; align-items: center; }
  .alt address { order: 1; } .alt .eposta { order: 2; } .alt small { order: 3; }
  .alt .logo { font-size: calc(40 * var(--p)); color: var(--pembe); }
  .alt .logo span { display: inline-block; transform: scaleY(1.25); }
  .alt .insta { width: calc(17 * var(--p)); height: calc(17 * var(--p)); margin-top: calc(20 * var(--p)); }
  .alt .saatler { font-size: calc(15.8 * var(--k) * var(--p)); margin-top: calc(10 * var(--p)); }
  .alt .tel { font-size: calc(24 * var(--k) * var(--p)); color: var(--pembe); margin-top: calc(8 * var(--p)); }
  .alt address { font-size: calc(15.8 * var(--p)); line-height: calc(23.8 * var(--p)); margin-top: calc(12 * var(--p)); padding: 0 calc(16 * var(--p)); }
  .alt .eposta { font-size: calc(17 * var(--p)); margin-top: calc(10 * var(--p)); }
  .alt small { font-size: calc(14.6 * var(--p)); font-weight: 400; margin-top: calc(10 * var(--p)); }
}