/* Pixandra tanıtım sitesi — belirteçler uygulama/src/tema.ts ile aynı. */
:root {
  --krem: #fbf7f0;
  --fildisi: #f3ece0;
  --beyaz: #fff;
  --lacivert: #1e2a44;
  --lacivert2: #5b6478;
  --altin: #b8914a;
  --altin-koyu: #8a6a2e;
  --cizgi: #e7ddcc;
  --basari: #3e6b48;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kenar: 80px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--krem); color: var(--lacivert); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
.atla { position: absolute; left: -9999px; top: 8px; padding: 8px 14px; background: var(--lacivert); color: var(--krem); border-radius: 8px; z-index: 10; }
.atla:focus { left: 8px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(34px, 4.2vw, 54px); }
h3 { font-size: 28px; font-weight: 600; }
.italik { font-style: italic; color: var(--altin-koyu); }
.ust-etiket { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--altin-koyu); text-transform: none; }
.soluk { color: var(--lacivert2); }
.bolum { padding: 90px var(--kenar); display: flex; flex-direction: column; gap: 32px; }
.bolum.fildisi { background: var(--fildisi); }
.icerik-dar { max-width: 760px; margin: 0 auto; }

/* üst bölüm */
.ust { display: flex; align-items: center; justify-content: space-between; padding: 26px var(--kenar); gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: 0.04em; }
.ust nav { display: flex; gap: 32px; }
.ust nav a, .menu a { text-decoration: none; font-weight: 500; font-size: 15px; }
.ust nav a:hover { color: var(--altin-koyu); }
.ust-sag { display: flex; align-items: center; gap: 16px; }
.dil { font-size: 14px; font-weight: 700; text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--cizgi); }
.buton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 23px; background: var(--lacivert); color: var(--krem); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--cizgi); background: var(--beyaz); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > div { position: absolute; right: 20px; top: 76px; z-index: 5; display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; border-radius: 18px; background: var(--beyaz); border: 1px solid var(--cizgi); box-shadow: 0 20px 40px rgba(30,42,68,0.12); }

/* kahraman */
.kahraman { display: flex; align-items: center; gap: 60px; padding: 50px var(--kenar) 90px; }
.kahraman > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.kahraman p.giris { font-size: 20px; color: var(--lacivert2); max-width: 560px; margin: 0; }
.rozet { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 12px; background: var(--altin); color: var(--lacivert); font-size: 12px; font-weight: 700; }
.guvenceler { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--lacivert2); margin: 0; padding: 0; list-style: none; }
.guvenceler li { display: flex; align-items: center; gap: 6px; }
.telefonlar { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
.telefon { width: 280px; aspect-ratio: 1 / 2.05; border-radius: 40px; border: 9px solid var(--lacivert); background: var(--krem); overflow: hidden; box-shadow: 0 30px 60px rgba(30,42,68,0.22); flex-shrink: 0; padding: 30px 14px; display: flex; flex-direction: column; gap: 12px; }
.telefon.ikinci { width: 240px; margin-bottom: 60px; padding: 0; position: relative; }
.once-kart { position: absolute; left: 12px; top: 14px; width: 86px; padding: 5px 5px 4px; border-radius: 12px; background: var(--krem); box-shadow: 0 6px 16px rgba(30,42,68,0.28); display: flex; flex-direction: column; gap: 3px; transform: rotate(-4deg); }
.once-kart > div { height: 108px; border-radius: 8px; }
.once-kart span, .sonra-etiket { font-size: 11px; font-weight: 700; color: var(--lacivert); text-align: center; }
.sonra-etiket { position: absolute; right: 12px; bottom: 14px; padding: 4px 10px; border-radius: 10px; background: rgba(251,247,240,0.92); }
.yer { border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* mağaza rozetleri */
.magazalar { display: flex; gap: 12px; flex-wrap: wrap; }
.magaza { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 14px; background: var(--lacivert); color: var(--krem); text-decoration: none; border: 1px solid var(--lacivert); }
.magaza span { display: flex; flex-direction: column; line-height: 1.1; }
.magaza small { font-size: 10px; }
.magaza b { font-size: 17px; }
.magaza[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.acik .magaza { background: var(--beyaz); color: var(--lacivert); }

/* adımlar, kartlar */
.adimlar { display: flex; gap: 20px; }
.adim { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; background: var(--beyaz); border: 1px solid var(--cizgi); }
.adim p { margin: 0; color: var(--lacivert2); font-size: 15px; }
.daire { width: 56px; height: 56px; border-radius: 28px; background: var(--beyaz); border: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: center; }
.bolum-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.bolum-bas p { margin: 0; max-width: 460px; color: var(--lacivert2); }
.stiller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.stiller li { display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.stil-gorsel { height: 260px; border-radius: 18px; position: relative; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.stil-gorsel .premium { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 10px; background: var(--altin); font-size: 11px; font-weight: 700; }

.bebek { margin: 0 var(--kenar); padding: 64px; border-radius: 32px; background: var(--lacivert); color: var(--krem); display: flex; gap: 40px; align-items: center; }
.bebek > div { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.bebek p { margin: 0; color: rgba(251,247,240,0.85); font-size: 17px; }
.bebek .italik { color: var(--altin); }
.bebek .ust-etiket { color: var(--altin); }
.etiketler { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.etiketler li { padding: 6px 12px; border-radius: 12px; background: rgba(251,247,240,0.92); color: var(--lacivert); font-size: 13px; font-weight: 700; }
.onceki-sonra { height: 380px; border-radius: 24px; overflow: hidden; display: flex; position: relative; }
.onceki-sonra > div { flex: 1; display: flex; align-items: flex-end; padding: 14px; }
.onceki-sonra span { padding: 4px 10px; border-radius: 10px; background: rgba(251,247,240,0.92); color: var(--lacivert); font-size: 12px; font-weight: 700; }

.fiyatlar { display: flex; gap: 20px; width: 100%; text-align: start; }
.fiyat { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px; background: var(--beyaz); border: 1px solid var(--cizgi); position: relative; }
.fiyat.one { border: 2px solid var(--lacivert); }
.fiyat .rozet { position: absolute; top: -12px; left: 24px; }
.fiyat .tutar { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; }
.fiyat ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.fiyat li { display: flex; gap: 8px; align-items: center; }

.sss { display: flex; gap: 40px; }
.sss > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.sss > div:last-child { flex: 1.4; }
details.soru { padding: 20px 0; border-bottom: 1px solid var(--cizgi); }
details.soru summary { font-size: 18px; font-weight: 600; cursor: pointer; }
details.soru p { margin: 12px 0 0; color: var(--lacivert2); font-size: 15px; }

footer { padding: 60px var(--kenar); background: var(--lacivert); color: var(--krem); display: flex; gap: 32px; justify-content: space-between; flex-wrap: wrap; }
footer .logo { color: var(--krem); }
footer .sutunlar { display: flex; gap: 48px; font-size: 14px; }
footer .sutunlar div { display: flex; flex-direction: column; gap: 10px; }
footer .sutunlar a { color: rgba(251,247,240,0.8); text-decoration: none; }
footer .sutunlar a:hover { color: var(--krem); }
footer small { width: 100%; color: rgba(251,247,240,0.6); }

/* belge sayfaları */
.belge { padding: 40px var(--kenar) 80px; }
.belge article { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.belge h2 { font-size: 26px; font-weight: 600; margin-top: 12px; }
.belge p { margin: 0; color: var(--lacivert2); }
.not { padding: 14px 16px; border-radius: 12px; background: var(--fildisi); font-size: 14px; }

@media (max-width: 1000px) {
  :root { --kenar: 20px; }
  .ust nav, .ust .buton { display: none; }
  .menu { display: block; }
  .kahraman, .adimlar, .bebek, .fiyatlar, .sss, .bolum-bas { flex-direction: column; align-items: stretch; }
  .kahraman { padding-top: 20px; padding-bottom: 60px; gap: 40px; }
  .kahraman p.giris { font-size: 17px; }
  .telefon { width: 230px; }
  .telefon.ikinci { display: none; }
  .bolum { padding-top: 56px; padding-bottom: 56px; }
  .stiller { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .stil-gorsel { height: 200px; }
  .bebek { padding: 36px 24px; }
  .onceki-sonra { height: 300px; }
  footer .sutunlar { gap: 32px; }
}