/* Persona LIFE tanıtım sitesi — "İki mürekkep" tasarım dili (v0.8, 2026-10-30).
   Kaynak: claude.ai tasarım tuvali "Persona LIFE — Ana sayfa", pano "Ana sayfa · Masaüstü" (IkiMurekkep.dc.html).
   Kâğıt zemin, lacivert çizgi ve yazı, iki mürekkep: turuncu (siz) ve mavi (birlikte okuduğunuz kişi); üst üste binince koyulaşır (multiply).
   Yazı tipi Archivo (değişken genişlik ve kalınlık). Metinler: docs/icerik/SITE_METINLERI.md. Yalnız açık görünüm: baskı kâğıdı fikri. */

/* Archivo sitenin içinden (yazi/; OFL, LISANS_Archivo_OFL.txt; Google Fonts v25, 2026-10-31 sahip izniyle indirildi). Ziyaretçinin tarayıcısı
   Google'a bağlanmaz; sunucunun CSP'si (style-src/font-src 'self') dış kaynağı zaten engeller. Türkçe ğ, ş, İ latin-ext dosyasında. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('yazi/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url('yazi/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --kagit: #F2EFE7; --kart: #FBFAF6; --metin: #1D2B4F; --soluk: #3F4D72; --cizgi: #1D2B4F; --golge: #1D2B4F;
  --murekkep-a: #FF6C2F; --murekkep-b: #0078BF;
  --yazi: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kenar: clamp(20px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--kagit); }
body { margin: 0; background: var(--kagit); color: var(--metin); font-family: var(--yazi); font-stretch: 100%; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } main > section, .alt { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--murekkep-a); }
[hidden] { display: none !important; }   /* gizli öğe, kendi display kuralı olsa da gizli kalır (ör. gönderilen iletişim formu) */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--murekkep-b); outline-offset: 3px; }
p { margin: 14px 0 0; }

/* Kâğıt dokusu (tasarımdaki gren); tıklamayı engellemez */
.gren { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .18; mix-blend-mode: multiply; z-index: 50; }

.atla { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 10px 16px; background: var(--kart); color: var(--metin); border: 2px solid var(--cizgi); border-radius: 999px; font-weight: 700; }
.atla:focus { top: 12px; }

.kap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--kenar); }

/* Zine şeridi */

/* Üst menü */
.ust { position: relative; z-index: 3; }
.ust .kap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.ust .logo img { height: 104px; width: auto; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.menu .menu-bag { text-decoration: none; }
.menu .menu-bag:hover { text-decoration: underline; }
.menu .menu-bag[aria-current="page"], .menu .menu-bag.bolum-aktif { text-decoration: underline; text-decoration-color: var(--murekkep-a); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu .menu-cagri { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: 3px 3px 0 var(--murekkep-a); }
.menu-cagri-mobil { margin-top: 6px; padding: 12px 14px; border-radius: 999px; background: var(--metin); color: var(--kagit); font-weight: 700; text-align: center; text-decoration: none; }
.menu-mobil { display: none; }
@media (max-width: 860px) {
  .ust .kap { padding-top: 16px; padding-bottom: 16px; flex-wrap: nowrap; }
  .ust .logo img { height: 64px; }
  .menu { gap: 10px; }
  .menu .menu-bag { display: none; }
  .menu-mobil { display: block; position: relative; }
  .menu-mobil summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--cizgi);
    border-radius: 999px; background: var(--metin); color: var(--kagit); font-weight: 700; font-size: 14px; }
  .menu-mobil summary::-webkit-details-marker { display: none; }
  .menu-mobil[open] .menu-acilir { display: flex; }
  .menu-acilir { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; flex-direction: column; min-width: 220px;
    background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 6px 6px 0 var(--golge); padding: 8px; }
  .menu-acilir a { padding: 12px 14px; text-decoration: none; font-weight: 600; }
  .menu-acilir a[aria-current="page"], .menu-acilir a.bolum-aktif { text-decoration: underline; text-decoration-color: var(--murekkep-a); text-decoration-thickness: 3px; }
}
@media (max-width: 400px) { .ust .logo img { height: 52px; } }

/* Başlıklar ve metin */
.etiket { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--metin); font-stretch: 100%; }
h1 { font-weight: 900; font-size: clamp(36px, 6.2vw, 98px); line-height: .95; letter-spacing: -.035em; }
h2 { font-weight: 900; font-size: clamp(34px, 4.4vw, 64px); line-height: .98; letter-spacing: -.03em; }
h3 { font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.015em; }
.etiket + h1, .etiket + h2 { margin-top: 18px; }
h2.ara-baslik { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.02; }
.giris { margin: 28px 0 0; font-size: 20px; max-width: 34em; }
@media (max-width: 640px) { .giris { font-size: 18px; } }
.kucuk-not { margin-top: 20px; font-size: 15px; color: var(--soluk); }
.vurgulu { font-weight: 800; }

/* Düğmeler: ana = dolu lacivert hap; ikincil = altı çizili okla bağlantı (tasarımdaki "… inceleyin →") */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 2px solid var(--cizgi); border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.dugme-ana { background: var(--metin); color: var(--kagit); box-shadow: 4px 4px 0 var(--murekkep-a); }
.dugme-ana:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--murekkep-a); }
.dugme-ikincil { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--metin); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dugme-ikincil:hover { text-decoration-color: var(--murekkep-a); }
.dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.bolum-dugme { margin-top: 24px; }

/* Bölümler (alt sayfalar) */
.bolum { position: relative; padding: 104px 0; }
.bolum + .bolum, .sayfa-basi + .bolum { border-top: 2px solid var(--cizgi); }
.ikili { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px 72px; align-items: center; }
@media (max-width: 900px) { .ikili { grid-template-columns: minmax(0, 1fr); gap: 40px; } .bolum { padding: 72px 0; } }
.metin-genis:not(.kap) { max-width: 44em; }
.kap.metin-genis > * { max-width: 44em; }

/* Alt sayfa başı: büyük başlık + sağda mürekkep motifi */
.sayfa-basi { position: relative; padding: 72px 0 96px; }
.sayfa-basi .kap { position: relative; }
.sayfa-basi h1 { font-size: clamp(36px, 5.4vw, 84px); max-width: 13em; }
.sayfa-basi .giris { max-width: 36em; }
.sayfa-basi .dugmeler { margin-top: 32px; }
@media (max-width: 900px) { .sayfa-basi { padding: 48px 0 64px; } }
.motif { position: absolute; right: var(--kenar); top: 0; width: 300px; aspect-ratio: 1; pointer-events: none; }
.motif span { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.motif-siz .halka { left: -4%; top: -4%; width: 100%; } .motif-siz .dolu-a { left: 4%; top: 4%; width: 84%; }
.motif-fiyat .raster-b { left: 0; top: 14%; width: 78%; } .motif-fiyat .dolu-a { right: 0; top: 0; width: 46%; }
.motif-soru .kesik { left: 0; top: 0; width: 64%; } .motif-soru .dolu-a { right: 6%; top: 30%; width: 44%; } .motif-soru .dolu-b { left: 26%; top: 52%; width: 40%; }
.motif-gizli .dolu-a { left: 0; top: 18%; width: 46%; } .motif-gizli .raster-b { right: 0; top: 18%; width: 46%; }
.motif-hakkinda .dolu-a { left: 0; top: 0; width: 66%; } .motif-hakkinda .raster-b { right: 0; bottom: 0; width: 52%; }
@media (min-width: 1181px) { .sayfa-basi .kap > :not(.motif) { max-width: 760px; } }
@media (max-width: 1180px) { .motif { display: none; } }

/* Mürekkep şekilleri */
.dolu-a { background: var(--murekkep-a); mix-blend-mode: multiply; }
.dolu-b { background: var(--murekkep-b); mix-blend-mode: multiply; }
.raster-b { background-image: radial-gradient(var(--murekkep-b) 40%, transparent 42%); background-size: 8px 8px; mix-blend-mode: multiply; }
.kesik { border: 3px dashed var(--cizgi); }
.halka { border: 2px dashed var(--cizgi); opacity: .35; }

/* Kartlar: krem kâğıt, lacivert çerçeve, düz gölge; örnek kartları hafif eğik */
.kart { position: relative; margin: 0; background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 8px 8px 0 var(--golge); padding: 32px; transition: rotate .25s ease, translate .25s ease; }
.kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.kart-ust .etiket, .kart-ust .alan-baslik { margin: 0; }
.alan-baslik { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kart .alan-baslik:not(:first-child) { margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--cizgi); }
.kart .kart-ust .alan-baslik { margin-top: 0; padding-top: 0; border-top: 0; }
.kart .alan-baslik + * { margin-top: 8px; }
.alinti { margin: 0; font-stretch: 112%; font-style: normal; font-weight: 700; font-size: 22px; line-height: 1.32; letter-spacing: -.01em; color: var(--metin); }
.kunye { display: block; margin-top: 20px; padding-top: 14px; border-top: 2px dashed var(--cizgi); font-size: 14px; font-weight: 600; color: var(--soluk); }
.kart-not { background: var(--murekkep-a); }
.izgara-3 > .kart:nth-child(3n+1), .iliski-kartlar > .kart:nth-child(4n+1) { rotate: -1deg; }
.izgara-3 > .kart:nth-child(3n+2), .iliski-kartlar > .kart:nth-child(4n+2) { rotate: .8deg; }
.izgara-3 > .kart:nth-child(3n), .iliski-kartlar > .kart:nth-child(4n+3) { rotate: -.6deg; }
.iliski-kartlar > .kart:nth-child(4n) { rotate: .6deg; }
.oynar:hover, .izgara-3 > .kart:hover, .iliski-kartlar > .kart:hover { rotate: 0deg; translate: -2px -2px; }

/* Izgaralar */
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
@media (max-width: 960px) { .izgara-3 { grid-template-columns: minmax(0, 1fr); } }

/* Konuşma balonları (Ayşe ve Can) */
.balon { max-width: 300px; margin: 0; background: var(--kart); border: 2px solid var(--cizgi); padding: 12px 16px; font-weight: 600; line-height: 1.45; }
.balon b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.balon-sol { align-self: flex-start; border-radius: 20px 20px 20px 4px; }
.balon-sag { align-self: flex-end; border-radius: 20px 20px 4px 20px; }

/* Venn sahnesi: iki mürekkep dairesi, balonlar ve ortak sayfadan alıntı (ana sayfa ve İkili okuma) */
.venn-sahne { position: relative; width: 100%; max-width: 520px; }
.venn-sahne > .daire { position: absolute; top: 0; width: 61.5%; aspect-ratio: 1; border-radius: 50%; }
.venn-sahne > .daire-a { left: 0; }
.venn-sahne > .daire-b { left: 36.5%; top: 40px; }
.venn-akis { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 70px; }
.venn-alinti { margin: 56px 0 0; background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 8px 8px 0 var(--golge); padding: 26px 28px; rotate: 1deg; }
.venn-alinti figcaption { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.venn-alinti blockquote { margin: 12px 0 0; font-stretch: 108%; font-size: 19px; line-height: 1.4; font-weight: 600; }
@media (max-width: 640px) { .venn-akis { padding-top: 40px; } .venn-sahne > .daire-b { top: 24px; } .venn-alinti { margin-top: 40px; padding: 22px; } .venn-alinti blockquote { font-size: 17px; } }

/* Hap bağlantılar (okuma türleri, soru grupları) */
.iliski-baglar { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.iliski-baglar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--cizgi); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color .2s ease; }
.iliski-baglar a:hover { background: var(--kart); }

/* Akış özeti (Sorular) ve cevap ölçeği */
.akis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.akis li { display: flex; align-items: center; font-weight: 700; font-size: 15px; }
.akis li span { padding: 8px 14px; border: 2px solid var(--cizgi); border-radius: 999px; background: var(--kart); }
.akis li:nth-child(2) span { background: var(--murekkep-a); }
.akis li + li::before { content: '→'; content: '→' / ''; margin-right: 8px; font-weight: 800; }
.olcek { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.olcek li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 2px solid var(--cizgi); border-radius: 999px; background: var(--kart); font-size: 15px; }
.olcek li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cizgi); }

/* Sık sorulanlar ve açılır listeler: kalın çizgili satırlar, sağda mürekkep dairesi */
.sorular { margin-top: 40px; border-top: 2px solid var(--cizgi); }
.sorular details, .acilir { border-bottom: 2px solid var(--cizgi); }
.sorular summary, .acilir > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 80px; padding: 14px 0; cursor: pointer; list-style: none;
  font-stretch: 108%; font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; line-height: 1.3; }
.sorular summary::-webkit-details-marker, .acilir > summary::-webkit-details-marker { display: none; }
.sorular summary::after, .acilir > summary::after { content: '+'; content: '+' / ''; flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--murekkep-a); color: var(--metin); font-size: 24px; font-weight: 500; line-height: 1; }
.sorular details:nth-of-type(3n+2) summary::after { background: var(--murekkep-b); color: #FFFFFF; }
.sorular details:nth-of-type(3n) summary::after { background: transparent; border: 3px dashed var(--cizgi); }
.sorular details[open] summary::after, .acilir[open] > summary::after { content: '–'; content: '–' / ''; }
.sorular summary:hover, .acilir > summary:hover { text-decoration: underline; text-decoration-color: var(--murekkep-a); text-underline-offset: 6px; }
.sorular details > p, .acilir-icerik { margin: 0 0 24px; max-width: 46em; }
.sorular details > p + p { margin-top: -12px; }
.sorular details ul { margin: -8px 0 24px; padding-left: 20px; max-width: 46em; }
.sorular details li { margin-top: 8px; }
.sorular details ul.olcek { margin: 0 0 8px; padding: 0; }
.sss-grup { scroll-margin-top: 16px; }
.sss-grup + .sss-grup { margin-top: 72px; }
.sss-grup .sorular { margin-top: 24px; }
.acilir-liste { margin-top: 24px; border-top: 2px solid var(--cizgi); }
.acilir-icerik p:first-child { margin-top: 0; }
.bolum-listesi { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bolum-listesi .no { display: inline-block; min-width: 2em; font-weight: 800; }

/* İlkeler: mürekkep noktalı maddeler */
.ilkeler { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.ilkeler li { position: relative; padding-left: 40px; }
.ilkeler li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--murekkep-a); mix-blend-mode: multiply; }
.ilkeler li:nth-child(3n+2)::before { background: none; background-image: radial-gradient(var(--murekkep-b) 40%, transparent 42%); background-size: 6px 6px; }
.ilkeler li:nth-child(3n)::before { background: none; border: 3px dashed var(--cizgi); }
.ilkeler b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }

/* Tablo: geniş ekranda tablo; telefonda her satır kart, hücre adı data-etiket'ten (role değerleri tablo anlamını korur) */
.tablo { width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 8px 8px 0 var(--golge); font-size: 16px; }
.tablo th, .tablo td { text-align: left; vertical-align: top; padding: 16px 20px; border-top: 2px solid var(--cizgi); }
.tablo thead th, .tablo thead td { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tablo tbody th { font-weight: 800; }
@media (max-width: 700px) {
  .tablo thead { position: absolute; left: -9999px; }
  .tablo, .tablo tbody, .tablo tr, .tablo th, .tablo td { display: block; width: auto; }
  .tablo tr { padding: 16px 18px; border-top: 2px solid var(--cizgi); }
  .tablo tbody tr:first-child { border-top: 0; }
  .tablo th, .tablo td { padding: 0; border: 0; }
  .tablo td { margin-top: 8px; }
  .tablo td[data-etiket]::before { content: attr(data-etiket); display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--soluk); margin-bottom: 2px; }
}

/* Fiyat kutuları: öne çıkan kutunun gölgesi turuncu */
.fiyat-kutular { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fiyat-kutular-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .fiyat-kutular, .fiyat-kutular-2 { grid-template-columns: minmax(0, 1fr); } }
.fiyat-kutu { display: flex; flex-direction: column; background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 8px 8px 0 var(--golge); padding: 30px; }
.fiyat-kutu-one { box-shadow: 8px 8px 0 var(--murekkep-a); }
.fiyat-kutu h3, .fiyat-kutu .fiyat-ad { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.fiyat-kutu .tutar { margin: 14px 0 0; font-weight: 900; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; }
.fiyat-kutu .tutar small { margin-left: 6px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--soluk); }
.fiyat-kutu .tutar-ek { margin: 8px 0 0; font-weight: 700; }
.fiyat-kutu .kucuk-not { margin-top: auto; padding-top: 18px; }
.tikli { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 2px dashed var(--cizgi); display: grid; gap: 10px; font-size: 16px; }
.tikli li { position: relative; padding-left: 26px; }
.tikli li::before { content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border-radius: 50%; background: var(--murekkep-a); }

/* İkili okuma türleri */
.iliski-kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
@media (max-width: 900px) { .iliski-kartlar { grid-template-columns: minmax(0, 1fr); } }
.iliski-kart { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.iliski-kart h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.025em; }
.iliski-alinti { margin: 20px 0 0; }
.iliski-alinti .alinti { font-size: 20px; }
.iliski-alinti .kunye { margin-top: 14px; }
.iliski-kart .vurgulu { margin-top: auto; padding-top: 18px; }
.mini-venn { display: flex; flex-shrink: 0; }
.mini-venn i { width: 30px; height: 30px; border-radius: 50%; background: var(--murekkep-a); mix-blend-mode: multiply; }
.mini-venn i + i { margin-left: -11px; background: var(--murekkep-b); }

/* Profil haritası çizgisi (yalnız gösterim, sayısız) */
.profil-cizgiler { list-style: none; margin: 8px 0 0; padding: 0; }
.profil-cizgi { margin-top: 22px; }
.profil-cizgi .ad { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profil-cizgi .cizgi { position: relative; height: 3px; background: var(--cizgi); margin: 18px 0 12px; }
.profil-cizgi .yer { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--murekkep-a); border: 2px solid var(--cizgi); }
.profil-cizgi .uclar { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--soluk); }
.profil-cizgi .uclar b { display: block; color: var(--metin); font-size: 15px; }
.profil-cizgi .uclar span:last-child { text-align: right; }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.profil-cizgi .yer-22 { left: 22%; } .profil-cizgi .yer-42 { left: 42%; } .profil-cizgi .yer-74 { left: 74%; }

/* İletişim formu (iletisim.html; sunucu uygulama/iletisim.js) */
.iletisim-formu { display: grid; gap: 22px; max-width: 640px; }
.iletisim-formu .alan label, .robot label { display: block; font-size: 16px; font-weight: 800; }
.iletisim-formu :is(input:not([type="checkbox"]), select, textarea) { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; font: inherit; font-size: 17px; line-height: 1.4;
  color: var(--metin); background-color: var(--kagit); border: 2px solid var(--cizgi); border-radius: 0; }
.iletisim-formu textarea { min-height: 10em; resize: vertical; }
.iletisim-formu select { appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D2B4F' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.iletisim-formu :is(input, select, textarea):focus-visible { outline: 3px solid var(--murekkep-b); outline-offset: 2px; }
.alan-not { margin: 6px 0 0; font-size: 14px; color: var(--soluk); }
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.robot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; background: var(--kagit); border: 2px dashed var(--cizgi); }
.robot input { width: 26px; height: 26px; margin: 0; accent-color: var(--murekkep-a); cursor: pointer; }
.robot label { display: flex; align-items: center; min-height: 44px; padding-right: 8px; cursor: pointer; }   /* etiket de kutuyu işaretler: dokunma alanı 44 px */
.robot-durum { font-size: 15px; color: var(--soluk); }
.robot-durum.tamam { color: var(--metin); font-weight: 700; }
.robot-durum.tamam::before { content: "✓ "; color: var(--murekkep-a); }
.form-uyari { margin: 0; font-weight: 700; color: #A3300B; }
.form-uyari:empty { display: none; }
.iletisim-formu .dugme { justify-self: start; }
.dugme:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.form-tamam { max-width: 640px; }
.form-tamam .etiket + p { margin: 12px 0 0; font-size: 19px; }

/* ---------- Ana sayfa ---------- */
/* Açılış */
.acilis { position: relative; z-index: 1; padding: 48px 0 112px; }
.acilis .kap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px 40px; align-items: center; }
.acilis h1 { margin-top: 28px; mix-blend-mode: multiply; }
.acilis .giris { margin-top: 36px; max-width: 540px; }
.iki-daire { position: relative; justify-self: end; width: 100%; max-width: 500px; aspect-ratio: 500 / 470; }
.iki-daire > span { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.iki-daire .halka { left: -4%; top: -4%; width: 80%; }
.iki-daire .dolu-a { left: 0; top: 0; width: 72%; }
.iki-daire .raster-b { right: 0; bottom: 0; width: 46%; }
.iki-daire .yazi-siz { position: absolute; left: 12%; top: 24%; max-width: 52%; }
.yazi-siz span, .yazi-birlikte span { display: block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.yazi-siz span { font-size: 13px; }
.yazi-siz b { display: block; margin-top: 10px; font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 3.4vw, 49px); line-height: .97; letter-spacing: -.015em; }
.iki-daire .yazi-birlikte { position: absolute; right: 2%; bottom: 7%; max-width: 40%; text-align: right; background: var(--kagit); padding: 6px 10px; border: 2px solid var(--cizgi); }
.yazi-birlikte span { font-size: 11px; }
.yazi-birlikte b { display: block; margin-top: 2px; font-stretch: 112%; font-weight: 800; font-size: 18px; line-height: 1.1; }
@media (max-width: 900px) { .acilis { padding: 24px 0 72px; } .acilis .kap { grid-template-columns: minmax(0, 1fr); } .iki-daire { justify-self: center; max-width: 420px; } }
@media (max-width: 480px) { .iki-daire .yazi-birlikte { max-width: 50%; } .yazi-birlikte b { font-size: 14px; } }

/* Sizi anlatan cümle (çerçeveli şerit) */
.serit-bolum { position: relative; z-index: 1; border-top: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi); }
.cumle-bolum .kap { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px 80px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.cumle-bolum .kap > div > p:not(.etiket) { margin-top: 24px; }
.cumle-secici { display: flex; gap: 10px; margin-top: 28px; }
.cumle-secici[hidden] { display: none; }
.cumle-secici button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease; }
.cumle-secici button:hover { transform: translateY(-2px); }
.cumle-secici button span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cizgi); background: transparent; transition: background-color .2s ease; }
.cumle-secici button[aria-pressed="true"] span { background: var(--metin); }
.cumle-secici .cumle-dur { margin-left: 6px; }
.cumle-secici .cumle-dur span { position: relative; width: 14px; height: 16px; border: 0; border-radius: 0; background: none; }
.cumle-secici .cumle-dur span::before, .cumle-secici .cumle-dur span::after { content: ''; position: absolute; top: 0; width: 4px; height: 16px; background: var(--metin); }
.cumle-secici .cumle-dur span::before { left: 2px; } .cumle-secici .cumle-dur span::after { right: 2px; }
.cumle-secici .cumle-dur.durdu span::before { left: 2px; width: 0; height: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--metin); }
.cumle-secici .cumle-dur.durdu span::after { display: none; }
.cumle-sahne { position: relative; }
.cumle-sahne > .dolu-a { position: absolute; right: -30px; top: -50px; width: 220px; aspect-ratio: 1; border-radius: 50%; }
.cumle-kart { position: relative; margin: 0; background: var(--kart); border: 2px solid var(--cizgi); box-shadow: 10px 10px 0 var(--golge); padding: 44px 44px 36px; rotate: -1deg; transition: rotate .25s ease, translate .25s ease; }
.cumle-kart:hover { rotate: 0deg; translate: -2px -2px; }
.cumle-yigin { display: grid; }
.cumle-metni { margin: 0; font-stretch: 112%; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.28; font-weight: 700; letter-spacing: -.01em; }
.cumle-kart:not(.donguyor) .cumle-metni + .cumle-metni { margin-top: 24px; padding-top: 24px; border-top: 2px dashed var(--cizgi); }
[data-cumleler].donguyor .cumle-metni { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
[data-cumleler].donguyor .cumle-metni.once { transform: translateY(-14px); }
[data-cumleler].donguyor .cumle-metni.aktif { opacity: 1; transform: none; }
.cumle-kart figcaption { margin-top: 28px; padding-top: 14px; border-top: 2px dashed var(--cizgi); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .cumle-bolum .kap { grid-template-columns: minmax(0, 1fr); padding-top: 72px; padding-bottom: 80px; } }
@media (max-width: 640px) { .cumle-kart { padding: 28px 24px 24px; } .cumle-sahne > .dolu-a { width: 140px; right: -12px; top: -36px; } }

/* İlk mürekkep / ikinci mürekkep */
.murekkep-bolum { position: relative; z-index: 1; padding: 152px 0 0; }
.murekkep-bolum .kap { display: grid; gap: 64px 96px; align-items: center; }
.siz .kap { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.ikiniz .kap { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.murekkep-bolum .metin > p:not(.etiket) { margin-top: 14px; }
.murekkep-bolum .metin > h2 + p { margin-top: 28px; }
.siz-sahne { position: relative; min-height: 520px; }
.siz-sahne > .dolu-a { position: absolute; left: -40px; top: -20px; width: 380px; aspect-ratio: 1; border-radius: 50%; }
.siz-kart { margin: 80px 0 0 60px; max-width: 460px; padding: 32px 32px 28px; rotate: -2deg; }
.siz-kart .kart-alinti { margin: 0; font-stretch: 112%; font-size: 22px; line-height: 1.32; font-weight: 700; }
.siz-kart .alanlar { font-size: 16px; font-weight: 600; }
.siz-kart .emek { font-size: 15px; }
.ikiniz-sahne { justify-self: end; }
@media (max-width: 900px) {
  .murekkep-bolum { padding-top: 96px; }
  .siz .kap, .ikiniz .kap { grid-template-columns: minmax(0, 1fr); }
  .ikiniz-sahne { order: -1; justify-self: start; }
  .siz-sahne { min-height: 0; }
  .siz-sahne > .dolu-a { width: 260px; left: -20px; }
  .siz-kart { margin: 56px 0 0 16px; }
}
@media (max-width: 640px) { .siz-kart { padding: 24px 22px 22px; } .siz-kart .kart-alinti { font-size: 19px; } }

/* Üç adım: şekil dizisi */
.adim-bolum { position: relative; z-index: 1; padding: 160px 0 0; }
.adim-sekiller { margin: 56px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; }
.sekil { position: relative; height: 150px; }
.sekil span { position: absolute; left: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; }
.sekil span + span { left: 90px; }
.adim-sekiller h3 { margin-top: 28px; }
.adim-sekiller p { margin-top: 8px; font-size: 16px; }
@media (max-width: 900px) { .adim-bolum { padding-top: 112px; } }

/* İlkeler: damga kartları */
.damga-bolum { position: relative; z-index: 1; padding: 160px 0 0; }
.damga-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.damga-bas h2 { max-width: 640px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; }
.damgalar { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.damga { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 10px; overflow: hidden; box-shadow: 8px 8px 0 var(--golge); transition: rotate .25s ease, translate .25s ease; }
.damga:nth-child(1) { rotate: -1deg; } .damga:nth-child(2) { rotate: .8deg; } .damga:nth-child(3) { rotate: -.6deg; }
.damga:hover { rotate: 0deg; translate: -2px -2px; }
.damga-resim { position: relative; height: 170px; border-bottom: 2px solid var(--cizgi); display: flex; align-items: center; justify-content: center; gap: 28px; overflow: hidden; }
.damga-resim.dolu-a { mix-blend-mode: normal; }
.damga-resim.noktali { background-image: radial-gradient(var(--murekkep-b) 32%, transparent 34%); background-size: 9px 9px; }
.yuzde { position: relative; display: inline-block; font-weight: 900; font-size: 140px; line-height: 1; }
.yuzde span:first-child { color: transparent; background-image: radial-gradient(var(--metin) 38%, transparent 41%); background-size: 7px 7px; -webkit-background-clip: text; background-clip: text; }
.yuzde span + span { position: absolute; left: 0; top: 0; color: var(--metin); }
.damga-resim .ayri { width: 104px; height: 104px; border-radius: 50%; }
.damga-balon { position: absolute; padding: 10px 18px; background: var(--kart); border: 2px solid var(--cizgi); font-weight: 800; font-size: 15px; }
.damga-balon.ilk { left: 14%; top: 26px; border-radius: 18px 18px 18px 4px; }
.damga-balon.ikinci { right: 12%; bottom: 26px; border-radius: 18px 18px 4px 18px; background: var(--murekkep-a); }
.damga-metin { padding: 28px; }
.damga-metin h3 { font-size: 26px; line-height: 1.1; }
.damga-metin p { margin-top: 12px; font-size: 15px; }
@media (max-width: 900px) { .damga-bolum { padding-top: 112px; } }

/* Ana sayfa soruları */
.sss-bolum { position: relative; z-index: 1; padding: 160px 0 140px; }
.sss-bolum .dugme-ikincil { margin-top: 16px; }
@media (max-width: 900px) { .sss-bolum { padding: 112px 0 96px; } }

/* Alt bilgi */
.alt { position: relative; z-index: 1; border-top: 2px solid var(--cizgi); font-size: 15px; }
.alt-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; align-items: start; padding-top: 64px; }
.alt .logo img { height: 88px; width: auto; }
.alt-ozet { margin: 20px 0 0; max-width: 240px; }
.alt-baslik { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.alt ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.alt ul a, .alt ul .bagsiz { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-weight: 600; }
.alt ul a:hover { text-decoration: underline; }
.alt ul .bagsiz { color: var(--soluk); }
.alt-dip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding: 24px 0 40px; border-top: 2px solid var(--cizgi); font-size: 13px; font-weight: 600; }

/* Canlandırmalar (tasarımdaki gibi); hareket azaltma açıksa kapalı */
@keyframes mBaski { 0% { transform: scale(.82); opacity: 0; filter: blur(8px); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes mSag { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mYukari { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mDon { from { transform: rotate(-70deg); } to { transform: none; } }
@keyframes mBirA { from { transform: translateX(-140px); } to { transform: none; } }
@keyframes mBirB { from { transform: translateX(140px); } to { transform: none; } }
@keyframes mBelir { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mCozul { from { opacity: 1; } to { opacity: 0; } }
@keyframes mAyrilA { from { transform: translateX(66px); } to { transform: none; } }
@keyframes mAyrilB { from { transform: translateX(-66px); } to { transform: none; } }
@keyframes mBalon { from { transform: translateY(16px) scale(.85); } to { transform: none; } }
.m-baski { animation: mBaski 1.2s cubic-bezier(.2, .7, .2, 1) .1s both; }
.m-sonra { animation: mSag 1.5s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
.m-sonra-yazi { animation: mYukari .8s ease 2.1s both; }
.m-don { animation: mDon 4s cubic-bezier(.2, .7, .2, 1) both; }
@supports (animation-timeline: view()) {
  .m-birA { animation: mBirA linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .m-birB { animation: mBirB linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .m-belir { animation: mBelir linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .m-cozul { animation: mCozul linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  .m-ayrilA { animation: mAyrilA linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  .m-ayrilB { animation: mAyrilB linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  .m-balonA { animation: mBalon linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .m-balonB { animation: mBalon linear both; animation-timeline: view(); animation-range: entry 25% cover 42%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-baski, .m-sonra, .m-sonra-yazi, .m-don, .m-birA, .m-birB, .m-belir, .m-cozul, .m-ayrilA, .m-ayrilB, .m-balonA, .m-balonB { animation: none; }
  .m-cozul { opacity: 0; }
  .kart, .damga, .cumle-kart, .dugme, .cumle-secici button, [data-cumleler].donguyor .cumle-metni { transition: none; }
  .oynar:hover, .izgara-3 > .kart:hover, .iliski-kartlar > .kart:hover, .damga:hover, .cumle-kart:hover { translate: none; }
  .dugme:hover, .cumle-secici button:hover { transform: none; }
}

/* Satır içi stil yerine yardımcılar (dosyanın sonunda ve !important: eski style="…" gibi her kuralın önüne geçer).
   Sunucunun güvenlik başlığı (CSP style-src 'self') sayfadaki style="…" yazımını uygulamaz. */
.bosluk-yok { margin: 0 !important; } .ust-0 { margin-top: 0 !important; } .ust-6 { margin-top: 6px !important; } .ust-16 { margin-top: 16px !important; }
.ust-22 { margin-top: 22px !important; } .ust-24 { margin-top: 24px !important; } .hiza-ust { align-items: start !important; }