/*
  rando.vu ana sayfası — biz.booksy.com yerleşiminin birebir kurulumu (2026-10-23,
  Melih seçimi). Renk tonları eski (2026-10-23 silindi) `styles.css` :root değişkenlerinden ölçüldü
  (--paper, --ink, --accent, --dark …); burada Türkçe adlarla bir kez tanımlanır,
  aşağıda ham renk/ölçü tekrar yazılmaz. Yazı tipleri yerel (`fonts.css`).
*/
:root {
  /* renk — eski styles.css ile aynı ton */
  --kagit: #f4f1e9;
  --kagit-2: #ebe7de;
  --murekkep: #171715;
  --soluk: #77746d;
  --cizgi: rgba(23, 23, 21, 0.14);
  --cizgi-acik: rgba(252, 251, 247, 0.22);
  --vurgu: #d0fa43;
  --vurgu-2: #bfea44;
  --vurgu-sis: rgba(208, 250, 67, 0.35);
  --koyu: #10110f;
  --koyu-2: #1f211c;
  --zeytin: #3b4a12;
  --beyaz: #fcfbf7;
  --beyaz-soluk: rgba(252, 251, 247, 0.72);
  --karartma: rgba(16, 17, 15, 0.62);
  --golge: 0 18px 44px rgba(16, 17, 15, 0.16);

  /* Booksy'nin iki büyük degradesinin bizdeki karşılığı */
  --degrade-bant: linear-gradient(180deg, var(--zeytin) 0%, var(--koyu) 100%);
  --degrade-bant-ters: linear-gradient(0deg, var(--zeytin) 0%, var(--koyu) 100%);
  --degrade-isik: linear-gradient(160deg, var(--vurgu) 0%, var(--kagit) 100%);
  --degrade-fiyat: linear-gradient(90deg, var(--kagit-2) 0%, var(--koyu) 55%);

  /* ölçü */
  --kap: 1160px;
  --kap-dar: 760px;
  --b1: 8px;
  --b2: 16px;
  --b3: 24px;
  --b4: 40px;
  --b5: 64px;
  --b6: 120px;
  --yc-s: 12px;
  --yc: 16px;
  --yc-l: 24px;
  --hap: 999px;
  --telefon-cerceve: 6px;
  --dugme-yuk: 52px;

  /* yazı */
  --font-govde: 'DM Sans', system-ui, sans-serif;
  --font-baslik: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --y-kucuk: 13px;
  --y-govde: 16px;
  --y-orta: 18px;
  --y-h3: 20px;
  --y-h2: 36px;
  --y-h1: 60px;
  --y-dev: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--beyaz);
  color: var(--murekkep);
  font: 400 var(--y-govde)/1.55 var(--font-govde);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-baslik); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

.atla {
  position: absolute; left: var(--b2); top: calc(-1 * var(--b5));
  background: var(--vurgu); color: var(--koyu); padding: var(--b1) var(--b2); border-radius: var(--hap);
}
.atla:focus { top: var(--b2); }

.kap { width: min(var(--kap), 100% - 2 * var(--b3)); margin-inline: auto; }

/* ---------- yer tutucu: metin gelene kadar kutunun ağırlığını korur ---------- */
[data-yer-tutucu] { color: var(--soluk); }
.yt-blok { display: block; border: 1px dashed var(--cizgi); border-radius: var(--b1); padding: 0 var(--b1); }
.yt-blok[data-satir="2"] { min-height: 2lh; }
.yt-blok[data-satir="3"] { min-height: 3lh; }
.yt-blok[data-satir="4"] { min-height: 4lh; }
.koyu-zemin [data-yer-tutucu] { color: var(--beyaz-soluk); }
.koyu-zemin .yt-blok { border-color: var(--cizgi-acik); }

/* ---------- düğmeler (şimdilik hiçbir yere gitmez) ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--dugme-yuk); padding: 0 var(--b4);
  border-radius: var(--hap); border: 1px solid transparent;
  font: 600 var(--y-govde)/1 var(--font-govde); text-decoration: none; cursor: default;
}
.dugme--vurgu { background: var(--vurgu); color: var(--koyu); }
.dugme--koyu { background: var(--koyu); color: var(--beyaz); }
.dugme--cizgi { background: transparent; color: var(--murekkep); border-color: var(--cizgi); }
.dugme [data-yer-tutucu], .dugme--koyu [data-yer-tutucu] { color: inherit; }

/* ---------- üst menü ---------- */
.ust {
  /* siyah şerit kenardan kenara (Melih 2026-11-03); içerik yine --kap genişliğinde ortalı */
  display: flex; align-items: center; gap: var(--b4);
  width: 100%; min-height: 72px; background: var(--koyu); color: var(--beyaz);
  padding-inline: max(var(--b3), calc((100% - var(--kap)) / 2));
}
.marka { display: inline-flex; align-items: center; gap: var(--b1); text-decoration: none; font: 800 24px/1 var(--font-baslik); }
.marka svg { width: 22px; height: 24px; color: var(--vurgu-2); }
.marka--koyu svg { color: var(--vurgu); }
.ust-menu { display: flex; gap: var(--b3); margin-right: auto; }
.ust-menu a { text-decoration: none; font-weight: 500; color: var(--beyaz); }
.ust-giris { font-weight: 600; text-decoration: none; color: var(--beyaz); }
.ust .dugme { min-height: 44px; padding: 0 var(--b3); }

/* ---------- 1. kahraman ---------- */
.kahraman-dis { position: relative; padding: 0 var(--yc-s); }
.kahraman-dis::before {
  content: ""; position: absolute; inset: 60% 0 -2% 0; background: var(--kagit-2); z-index: -1;
}
.kahraman {
  position: relative; overflow: hidden; min-height: 840px; border-radius: var(--yc);
  background: var(--koyu); color: var(--beyaz); display: flex; align-items: center;
}
.kahraman-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 30%; opacity: 0.32; }
.kahraman-ic {
  position: relative; display: grid; grid-template-columns: 1fr 560px; gap: var(--b5); align-items: center;
  width: min(var(--kap) + 2 * var(--b4), 100% - 2 * var(--b4)); margin-inline: auto;
}
.kahraman h1 { font-size: var(--y-h1); line-height: 1.08; }
.kahraman h1 em { font-style: normal; color: var(--vurgu); }
.kahraman-ust { color: var(--vurgu); font-weight: 600; margin-bottom: var(--b2); }
.kahraman-alt { margin-top: var(--b3); font-size: var(--y-orta); color: var(--beyaz); max-width: 560px; }
.kahraman .dugme { margin-top: var(--b4); }
.kahraman-not { margin-top: var(--b2); font-size: var(--y-kucuk); }
.karolar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b2);
  padding: var(--b2); border-radius: var(--yc-s); background: var(--karartma);
}
.karo {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--yc-s);
  padding: var(--b1) var(--b1) 0; display: flex; flex-direction: column; gap: var(--b1);
}
.karo:nth-child(3n+1) { background: var(--degrade-isik); }
.karo:nth-child(3n+2) { background: var(--kagit-2); }
.karo:nth-child(3n) { background: var(--degrade-bant); }
.karo b { font: 800 11px/1.1 var(--font-baslik); letter-spacing: 0.06em; text-transform: uppercase; color: var(--koyu); }
.karo:nth-child(3n) b { color: var(--beyaz); }
.karo img {
  flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top;
  border-radius: var(--b1) var(--b1) 0 0; box-shadow: var(--golge);
}

/* ---------- 2–6. özellik bölümleri ---------- */
.ozellik { padding: var(--b6) 0; }
.ozellik .kap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b5); align-items: center; }
.ozellik--metin-solda .sahne { order: 2; }
.ozellik h2 { font-size: var(--y-h2); line-height: 1.2; max-width: 460px; }
.ozellik-metin { width: 100%; max-width: 460px; }
.ozellik-metin p { margin-top: var(--b3); }
.ozellik--metin-solda .ozellik-metin { justify-self: start; }
.ozellik:not(.ozellik--metin-solda) .ozellik-metin { justify-self: end; }
.tikler { list-style: none; padding: 0; margin: var(--b3) 0 0; display: grid; gap: var(--b2); }
.tikler li { position: relative; padding-left: 28px; }
.tikler li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px;
  border-left: 3px solid var(--zeytin); border-bottom: 3px solid var(--zeytin); transform: rotate(-45deg);
}
.ozellik .dugme { margin-top: var(--b4); }

.sahne { position: relative; height: 520px; width: 100%; max-width: 560px; }
.ozellik--metin-solda .sahne { justify-self: end; }
.sahne-blok { position: absolute; border-radius: var(--yc-s); background: var(--vurgu-sis); }
.sahne-foto { position: absolute; object-fit: cover; border-radius: var(--yc-s); box-shadow: var(--golge); }
.sahne-telefon {
  position: absolute; width: 210px; aspect-ratio: 9 / 16; object-fit: cover; object-position: top;
  border: var(--telefon-cerceve) solid var(--koyu); border-radius: var(--yc-l); background: var(--koyu);
  box-shadow: var(--golge);
}
.sahne-bos { position: absolute; border-radius: var(--yc-s); background: var(--degrade-isik); }

/* yerleşim varyantları: Booksy'deki her bölümün kompozisyonu */
.sahne--takvim .sahne-blok { left: 120px; top: 220px; width: 330px; height: 280px; }
.sahne--takvim .sahne-foto { left: 200px; top: 30px; width: 320px; height: 430px; }
.sahne--takvim .sahne-telefon { left: 0; top: 40px; }
.sahne--gelmeme .sahne-foto { right: 0; top: 0; width: 380px; height: 500px; }
.sahne--gelmeme .sahne-telefon { left: 0; top: 70px; }
.sahne--odeme .sahne-foto { left: 0; top: 0; width: 290px; height: 470px; }
.sahne--odeme .sahne-telefon { left: 300px; top: 110px; width: 230px; }
.sahne--sadakat .sahne-foto { right: 0; top: 0; width: 380px; height: 500px; }
.sahne--sadakat .sahne-telefon { left: 0; top: 90px; }
.sahne--ekip .sahne-foto { left: 290px; top: 110px; width: 200px; height: 290px; }
.sahne--ekip .sahne-telefon { left: 40px; top: 30px; }
.sahne--ekip .sahne-blok { left: 140px; top: 330px; width: 180px; height: 150px; }

/* ---------- 7. fiyat kartı ---------- */
.fiyat { position: relative; margin-top: var(--b6); background: var(--degrade-fiyat); color: var(--beyaz); }
.fiyat .kap { display: grid; grid-template-columns: 560px 1fr; gap: var(--b5); min-height: 760px; }
.fiyat-gorsel {
  position: relative; margin-top: calc(-1 * var(--b5)); height: 760px; border-radius: var(--b1);
  background: var(--degrade-isik); overflow: hidden;
  width: 100%; object-fit: cover; box-shadow: var(--golge);
}
.fiyat-icerik { align-self: center; text-align: center; display: grid; justify-items: center; gap: var(--b3); }
.fiyat h2 { font-size: var(--y-h2); }
.fiyat-tutar { font: italic 800 var(--y-dev)/1 var(--font-baslik); color: var(--vurgu); }
.fiyat-not { font-size: var(--y-kucuk); }
.fiyat-deneme { margin-top: calc(-1 * var(--b2)); font-size: var(--y-orta); font-weight: 600; color: var(--vurgu); }

/* ---------- 8. hepsi bir arada ---------- */
.hepsi { padding: var(--b6) 0; text-align: center; }
.hepsi h2 { font-size: var(--y-h2); max-width: var(--kap-dar); margin-inline: auto; }
.hepsi > .kap > p { max-width: var(--kap-dar); margin: var(--b3) auto 0; }
.serit {
  position: relative; display: grid; grid-template-columns: 1fr 480px 1fr; gap: var(--b5);
  align-items: center; margin-top: var(--b5); text-align: left; padding-inline: var(--b6);
}
.serit h3 { font-size: var(--y-h3); }
.serit p { margin-top: var(--b2); }
.serit .dugme { margin-top: var(--b3); min-height: 44px; padding: 0 var(--b3); }
.serit-gorsel {
  height: 400px; border-radius: var(--yc-s); background: var(--degrade-isik);
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden; padding-top: var(--b4);
}
.serit-gorsel img {
  width: 260px; border: var(--telefon-cerceve) solid var(--koyu); border-radius: var(--yc-l); box-shadow: var(--golge);
}
.serit-sonraki { opacity: 0.35; }
.serit-ok {
  position: absolute; right: var(--b6); bottom: 0; width: 56px; height: 56px; border-radius: var(--hap);
  border: 0; background: var(--koyu); color: var(--beyaz); font-size: var(--y-h3); cursor: default;
}
.ilerleme { height: 3px; margin: var(--b4) var(--b6) 0; background: var(--cizgi); border-radius: var(--hap); }
.ilerleme span { display: block; width: 25%; height: 100%; background: var(--zeytin); border-radius: inherit; }
.ciplar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b1) var(--b2); max-width: 980px; margin: var(--b5) auto 0; padding: 0; list-style: none; }
.ciplar li { padding: var(--b1) var(--b2); border-radius: var(--hap); background: var(--kagit); font-size: var(--y-kucuk); font-weight: 500; }
.ciplar li:nth-child(n+9) { opacity: 0.6; }
.ciplar li:nth-child(n+16) { opacity: 0.3; }
.hepsi .dugme { margin-top: var(--b4); }

/* ---------- 9. deneme bandı ---------- */
.deneme-dis { padding: var(--b1) var(--b1) var(--b4); margin: var(--b4) var(--b3) 0; border-radius: var(--yc); background: linear-gradient(180deg, var(--kagit-2), var(--beyaz)); }
.deneme {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b4);
  min-height: 250px; padding: 0 var(--b6); border-radius: var(--b1); background: var(--degrade-bant-ters); color: var(--beyaz);
}
.deneme h2 { font: italic 800 var(--y-h2)/1.1 var(--font-baslik); text-transform: uppercase; }
.deneme p { margin-top: var(--b2); font-size: var(--y-kucuk); }

/* ---------- 10. başlamak kolay ---------- */
.adimlar { padding: var(--b6) 0; text-align: center; }
.adimlar h2 { font-size: var(--y-h2); }
.adimlar ol { list-style: none; padding: 0; margin: var(--b5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b4); }
.adim-gorsel {
  width: 260px; height: 140px; margin: 0 auto var(--b4); border-radius: var(--b1); overflow: hidden; padding: var(--b2) var(--b4) 0;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.adimlar li:nth-child(1) .adim-gorsel { background: var(--kagit-2); }
.adimlar li:nth-child(2) .adim-gorsel { background: var(--degrade-bant); }
.adimlar li:nth-child(3) .adim-gorsel { background: var(--degrade-isik); }
.adim-gorsel img { width: 100%; height: 220px; object-fit: cover; object-position: top; border-radius: var(--b1) var(--b1) 0 0; }
.adimlar h3 { font-size: var(--y-orta); }
.adimlar li p { margin: var(--b2) auto 0; max-width: 330px; }

/* ---------- 11. sektörler ---------- */
.sektorler { background: var(--degrade-bant); color: var(--beyaz); border-radius: var(--b1); margin: 0 var(--b1); }
.sektorler .kap { display: grid; grid-template-columns: 1fr 880px; gap: var(--b5); align-items: center; min-height: 520px; }
.sektorler h2 { font-size: var(--y-h2); line-height: 1.2; }
.haplar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b2); }
.hap {
  display: inline-flex; align-items: center; gap: var(--b3); min-width: 250px; padding: var(--b1) var(--b4) var(--b1) var(--b1);
  border: 1px solid var(--cizgi-acik); border-radius: var(--hap); font-weight: 700; color: var(--beyaz); text-decoration: none;
}
.hap-daire { width: 96px; height: 96px; border-radius: var(--hap); flex: none; }
.hap:nth-child(1) .hap-daire { background: var(--vurgu); }
.hap:nth-child(2) .hap-daire { background: var(--kagit-2); }
.hap:nth-child(3) .hap-daire { background: var(--vurgu-2); }
.hap:nth-child(4) .hap-daire { background: var(--kagit); }
.hap:nth-child(5) .hap-daire { background: var(--zeytin); }

/* ---------- 12. neler yapabilir ---------- */
.goster { margin: var(--b6) var(--b1) 0; }
.goster-bant { background: var(--degrade-bant); color: var(--beyaz); border-radius: 0 var(--yc) var(--yc) 0; min-height: 500px; }
.goster .kap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 500px; }
.goster h2 { font: italic 800 var(--y-h2)/1.15 var(--font-baslik); text-transform: uppercase; max-width: 380px; }
.goster .dugme { margin-top: var(--b4); }
.goster-sahne { position: relative; height: 500px; }
.goster-sahne img { position: absolute; border: var(--telefon-cerceve) solid var(--koyu); border-radius: var(--yc-l); box-shadow: var(--golge); background: var(--koyu); }
.goster-on { left: 20px; top: -20px; width: 270px; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.goster-arka { left: 300px; top: 50px; width: 240px; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

/* ---------- 14. sık sorulan ---------- */
.sss { padding: var(--b6) 0; }
.sss .kap { display: grid; grid-template-columns: 420px 1fr; gap: var(--b4); }
.sss h2 { font: italic 800 var(--y-h2)/1.15 var(--font-baslik); text-transform: uppercase; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; display: flex; justify-content: space-between; padding: var(--b4) var(--b4) var(--b4) var(--b4); font-weight: 600; cursor: pointer; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "▾"; font-size: var(--y-kucuk); }
.sss details p { padding: 0 var(--b4) var(--b3); }
.sss-dugmeler { display: flex; gap: var(--b2); margin-top: var(--b3); }

/* ---------- altbilgi ---------- */
.alt { background: var(--koyu); color: var(--beyaz); padding: var(--b5) 0 var(--b6); margin-top: var(--b5); }
.alt-sutunlar { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--b3); margin-top: var(--b4); }
.alt h2 { font: 700 var(--y-kucuk)/1 var(--font-baslik); text-transform: uppercase; letter-spacing: 0.08em; color: var(--vurgu); margin-bottom: var(--b2); }
.alt-sutunlar a { display: block; text-decoration: none; font-size: var(--y-kucuk); padding: var(--b1) 0; }
.alt-sutunlar a:hover { text-decoration: underline; }
.alt-taban { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); margin-top: var(--b4); padding-top: var(--b4); border-top: 1px solid var(--cizgi-acik); font-size: var(--y-kucuk); }
.rozetler { display: flex; gap: var(--b2); }
.rozet { display: block; border-radius: var(--b1); line-height: 0; }
.rozet svg { height: 40px; width: auto; }

/* ---------- telefon (Booksy telefon paftası: tek sütun, görsel üstte) ---------- */
@media (max-width: 900px) {
  :root { --y-h1: 38px; --y-h2: 28px; --y-dev: 48px; --b6: 64px; }
  .ust-menu, .ust .dugme { display: none; }
  .ust { justify-content: space-between; }
  .kahraman { min-height: 0; padding: var(--b5) 0 var(--b4); }
  .kahraman-ic { grid-template-columns: 1fr; text-align: center; width: calc(100% - 2 * var(--b3)); }
  .kahraman-alt { margin-inline: auto; }
  .karolar { gap: var(--b1); padding: var(--b1); }
  .ozellik { padding: var(--b4) 0; }
  .ozellik .kap { grid-template-columns: 1fr; gap: var(--b3); }
  .ozellik--metin-solda .sahne { order: 0; }
  .ozellik .ozellik-metin, .ozellik:not(.ozellik--metin-solda) .ozellik-metin { justify-self: start; }
  .sahne { height: 360px; justify-self: center; max-width: 340px; }
  .ozellik--metin-solda .sahne { justify-self: center; }
  .sahne-telefon { width: 140px; }
  .sahne--takvim .sahne-blok { left: 70px; top: 150px; width: 220px; height: 190px; }
  .sahne--takvim .sahne-foto { left: 110px; top: 20px; width: 220px; height: 300px; }
  .sahne--gelmeme .sahne-foto, .sahne--sadakat .sahne-foto { width: 240px; height: 340px; }
  .sahne--gelmeme .sahne-telefon, .sahne--sadakat .sahne-telefon { top: 60px; }
  .sahne--odeme .sahne-foto { width: 180px; height: 330px; }
  .sahne--odeme .sahne-telefon { left: 190px; top: 60px; width: 150px; }
  .sahne--ekip .sahne-foto { left: 170px; top: 70px; width: 150px; height: 220px; }
  .sahne--ekip .sahne-telefon { left: 20px; top: 20px; }
  .sahne--ekip .sahne-blok { left: 90px; top: 250px; width: 140px; height: 100px; }
  .fiyat { background: var(--koyu); }
  .fiyat .kap { grid-template-columns: 1fr; min-height: 0; gap: var(--b4); padding-bottom: var(--b5); }
  .fiyat-gorsel { height: 380px; }
  .serit { grid-template-columns: 1fr; padding-inline: 0; gap: var(--b3); }
  .serit-gorsel { order: -1; height: 300px; }
  .serit-gorsel img { width: 200px; }
  .serit-sonraki, .serit-ok { display: none; }
  .ilerleme { margin-inline: 0; }
  .deneme-dis { margin-inline: var(--b2); }
  .deneme { flex-direction: column; text-align: center; padding: var(--b5) var(--b3); justify-content: center; }
  .adimlar ol { grid-template-columns: 1fr; }
  .sektorler .kap { grid-template-columns: 1fr; padding: var(--b5) 0; min-height: 0; }
  .hap { min-width: 0; gap: var(--b2); padding-right: var(--b3); }
  .hap-daire { width: 44px; height: 44px; }
  .haplar { justify-content: flex-start; }
  .goster-bant { border-radius: var(--yc); }
  .goster .kap { grid-template-columns: 1fr; text-align: center; padding-top: var(--b5); }
  .goster h2 { margin-inline: auto; }
  .goster-sahne { height: 440px; margin-top: var(--b4); }
  .goster-on { left: 8%; top: 0; width: 200px; }
  .goster-arka { left: auto; right: 6%; top: 80px; width: 150px; }
  .sss .kap { grid-template-columns: 1fr; }
  .sss summary { padding: var(--b3) 0; }
  .sss details p { padding: 0 0 var(--b3); }
  .alt-sutunlar { grid-template-columns: 1fr 1fr; }
  .alt-taban { flex-direction: column; align-items: flex-start; }
}

/* img height özniteliği aspect-ratio'yu ezer: telefon karelerinde yüksekliği orandan türet */
.sahne-telefon, .goster-sahne img, .serit-gorsel img { height: auto; }
.fiyat-icerik .yt-blok { width: 280px; }