/* altansekeroglu.alsift.com: fildişi kâğıt + mürekkep + kiremit. Yalnız sistem yazı tipi + DM Serif Display (vurgu). */
:root {
  --fildisi: #F5F0E7; --kagit: #FFFCF7; --murekkep: #221E19; --soluk: #7D7368; --cizgi: #E6DCCD;
  --kiremit: #E2703A; --kiremit-koyu: #B9532A; --koyu: #17140F;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --serif: 'DM Serif Display', Georgia, serif; --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fildisi); color: var(--murekkep); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.atla { position: absolute; left: -999px; } .atla:focus { left: 16px; top: 16px; background: var(--murekkep); color: var(--fildisi); padding: 8px 12px; border-radius: 8px; z-index: 9; }
.kap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* üst bar */
.ust { border-bottom: 1px solid var(--cizgi); background: rgba(245,240,231,.86); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
.ust .kap { display: flex; align-items: center; gap: 16px; height: 60px; }
.marka { font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.marka span { color: var(--kiremit); }
.ust nav { margin-left: auto; display: flex; gap: 18px; font-size: 15px; }
.ust nav a { text-decoration: none; color: var(--soluk); } .ust nav a:hover { color: var(--murekkep); }

/* etiket ve başlıklar */
.etiket { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.etiket b { background: var(--murekkep); color: var(--fildisi); padding: 6px 9px; border-radius: 7px; letter-spacing: .08em; }
h1 { font-size: clamp(40px, 9vw, 68px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
h1 em, h2 em { font: italic 400 1em/1 var(--serif); color: var(--kiremit); letter-spacing: -.01em; }
h1 .ikinci { color: var(--kiremit); display: block; }
h2 { font-size: 28px; letter-spacing: -.02em; line-height: 1.2; margin: 48px 0 14px; }
h3 { font-size: 19px; margin: 22px 0 6px; }
p + p { margin-top: 12px; }
.giris { font-size: 20px; color: #4A433B; max-width: 34em; margin-top: 18px; }

/* kahraman */
.kahraman { padding: 44px 0 8px; }
.sahne { position: relative; margin: 28px auto 0; max-width: 420px; aspect-ratio: 1 / 0.92; border-radius: 28px; background: radial-gradient(70% 60% at 35% 25%, #FFF7EC 0%, #EFE4D3 70%, #E8DBC7 100%); overflow: hidden; }
.sahne img { position: absolute; left: 50%; bottom: 7%; width: 74%; transform: translateX(-50%); filter: drop-shadow(18px 22px 22px rgba(70,45,20,.28)); }

/* kutular */
.kart { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 18px; padding: 22px 24px; }
.kart + .kart { margin-top: 14px; }
.dikkat { border-left: 4px solid var(--kiremit); }
ol.adim { counter-reset: a; list-style: none; }
ol.adim li { counter-increment: a; position: relative; padding: 0 0 16px 46px; }
ol.adim li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--murekkep); color: var(--fildisi); font: 700 15px/30px var(--mono); text-align: center; }
ul.tik { list-style: none; } ul.tik li { padding-left: 30px; position: relative; margin: 6px 0; }
ul.tik li::before { content: '✓'; position: absolute; left: 0; color: var(--kiremit); font-weight: 800; }
pre { background: var(--koyu); color: #F6EADC; border-radius: 14px; padding: 18px 20px; overflow-x: auto; font: 15px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.kopyala-kap { position: relative; }
.kopyala { position: absolute; top: 10px; right: 10px; background: #35302A; color: #F6EADC; border: 0; border-radius: 8px; padding: 6px 10px; font: 600 13px var(--sans); cursor: pointer; }

/* düğmeler */
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dugme { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: var(--murekkep); color: var(--fildisi); text-decoration: none; font-weight: 700; font-size: 16px; }
.dugme.acik { background: transparent; color: var(--murekkep); border: 1.5px solid var(--murekkep); }
.dugme.vurgu { background: var(--kiremit); }

/* kelime kutusu */
.kelime { margin-top: 26px; display: flex; gap: 10px; }
.kelime input { flex: 1; min-width: 0; padding: 15px 18px; border-radius: 14px; border: 1.5px solid var(--cizgi); background: var(--kagit); font: 700 18px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep); }
.kelime input:focus { outline: none; border-color: var(--kiremit); box-shadow: 0 0 0 4px rgba(226,112,58,.15); }
.kelime button { padding: 0 22px; border-radius: 14px; border: 0; background: var(--kiremit); color: #fff; font: 700 16px var(--sans); cursor: pointer; }
.uyari { min-height: 24px; margin-top: 8px; font-size: 15px; color: var(--kiremit-koyu); }

/* kelime ızgarası */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.izgara a { display: block; text-decoration: none; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; transition: transform .2s; }
.izgara a:hover { transform: translateY(-3px); }
.izgara img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.izgara div { padding: 12px 14px; }
.izgara b { font: 700 13px var(--mono); letter-spacing: .1em; color: var(--kiremit); }
.izgara span { display: block; font-weight: 700; line-height: 1.3; margin-top: 4px; }

/* alt */
main { flex: 1; padding-bottom: 64px; }
.alt { border-top: 1px solid var(--cizgi); padding: 28px 0 40px; font-size: 15px; color: var(--soluk); }
.alt .kap { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.alt a { text-decoration: none; } .alt a:hover { color: var(--murekkep); }
.kaynak { font-size: 15px; color: var(--soluk); } .kaynak a { color: var(--soluk); }
@media (max-width: 520px) { .ust nav a.gizle { display: none; } h2 { font-size: 24px; } .kart { padding: 18px; } }

/* yazdırma / PDF: gezinme ve düğmeler gizlenir, kod blokları açık zeminde */
@media print {
  html { background: #fff; font-size: 12pt; }
  .ust, .alt, .dugmeler, .kopyala, .atla, .sahne { display: none !important; }
  pre { background: #F7F2EA; color: #221E19; border: 1px solid #E6DCCD; }
  .kart { break-inside: avoid; }
  h2 { break-after: avoid; }
}