/* ukiyowork.com — "Sayfa basılıyor"
   Yön ve gerekçe: ../../tasarim-yonleri.md
   tasarim-istisna: K3 kâğıt zemin ukiyo-e baskısının kendi malzemesi; başlıklar artık grotesk, Didone yalnız logoda; vurgu tek kırmızı değil, altı baskı boyası
   tasarim-istisna: K6 sayfanın zemini kâğıt; sumi siyahı yalnız mürekkep (metin, çizgi, oyulmuş harf), turuncu tek vurgu değil altı pigmentten biri */

@font-face { font-family: "Familjen Grotesk"; font-weight: 400 700; src: url(/fonts/familjen-latin.woff2) format("woff2"); font-display: swap; 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; }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400 700; src: url(/fonts/familjen-latin-ext.woff2) format("woff2"); font-display: swap; 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: "Familjen Grotesk"; font-style: italic; font-weight: 400 700; src: url(/fonts/familjen-italic-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 400 700; src: url(/fonts/familjen-italic-latin-ext.woff2) format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "Yuji Syuku"; src: url(/fonts/yuji-kanji-2.woff2) format("woff2"); font-display: swap; }

:root {
  --kagit: #f3ecdc;
  --kagit-acik: #f8f4ea;
  --sumi: #1c1a19;
  --sumi-yumusak: #4d4741;
  /* arayüz renkleri: logonun altı renginin baskı boyası karşılıkları (arastirma/ukiyoe-teknik.md 4.5).
     Logo kendi marka renklerini (marka/renkler.json) SVG'de taşır; sayfada neon olan tek şey logodur. */
  --mavi: #2f5f86;
  --yesil: #6e9a80;
  --sari: #e9b949;
  --mor: #75566b;
  --kirmizi: #c94a3d;
  --turuncu: #e2733f;
  --gri: #8a8884;
  --kalip: var(--sumi);
  --font-baslik: "Familjen Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --font-metin: "Familjen Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --font-kanji: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --kenar: clamp(16px, 4vw, 56px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--sumi);
  font-family: var(--font-metin);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.58;
  font-feature-settings: "kern" 1;
}
a { color: inherit; }
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -0.022em; }
p { margin: 0 0 0.85em; }

.atla {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--sumi); color: var(--kagit); padding: 10px 14px; text-decoration: none;
}
.atla:focus { top: 12px; }

/* --- 3B tuval ve yedek --- */
#dunya {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 0;
  opacity: 0; transition: opacity 0.9s ease;
}
.dunya-hazir #dunya { opacity: 1; }
.kagit-yedek {
  position: fixed; inset: 0; z-index: -1;
  background: var(--kagit);
  opacity: 0;
}
.dunyasiz .kagit-yedek { opacity: 1; z-index: 0; background: var(--kagit) url(/img/yedek.jpg) center / cover no-repeat; }

/* --- üst şerit --- */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(14px, 2.2vw, 28px) var(--kenar);
  pointer-events: none;
}
.ust > * { pointer-events: auto; }
.logo-ilerleme { position: relative; display: block; width: clamp(52px, min(6.2vw, 9.5vh), 88px); line-height: 0; background: #000; padding: clamp(10px, 1.1vw, 14px) clamp(9px, 1vw, 13px); }
.logo-ilerleme svg { position: relative; width: 100%; height: auto; overflow: visible; pointer-events: none; }
/* kutunun kendisi sayfa başına, her harf kendi bölümüne gider */
.logo-bas { position: absolute; inset: 0; }
.harf-bag { pointer-events: auto; cursor: pointer; }
.harf-alan { fill: transparent; }
.harf-bag:hover .harf-cizgi { stroke: #fff; }
.harf-bag:focus-visible { outline: 2px solid var(--kagit-acik); outline-offset: 1px; }
.logo-bas:focus-visible { outline-offset: 3px; }
/* basılmamış harf: siyah karede kâğıt rengi kontur; kalıbı basılınca logonun rengiyle dolar */
.harf-yol { vector-effect: non-scaling-stroke; }
.harf-cizgi { fill: rgba(248, 244, 234, 0.2); stroke: rgba(248, 244, 234, 0.75); stroke-width: 1.1; stroke-linejoin: round; }
.harf.basildi .harf-cizgi { stroke: transparent; transition: stroke 0.4s; }
/* betik yoksa logo baştan basılı görünür */
html:not(.js) .harf-renk { clip-path: none; }
html:not(.js) .harf-cizgi { stroke: transparent; }

.menu { display: flex; gap: 2px; align-items: center; font-size: 0.95rem; font-weight: 600; background: var(--kagit-acik); padding: 3px; }
.menu a { text-decoration: none; padding: 8px 12px; color: var(--sumi); }
.menu .menu-cta { border-color: var(--sumi); }
.menu a:not(.menu-cta):hover, .menu a:not(.menu-cta):focus-visible { box-shadow: inset 0 -2px 0 var(--sumi); }
.menu a[aria-current]:not(.menu-cta) { box-shadow: inset 0 -3px 0 var(--kirmizi); }
/* Dil düğmesi: menüdeki öteki bağlantılardan sessiz, harf aralığıyla kısaltma olduğu okunur. */
.menu a.dil-sec { font-weight: 500; letter-spacing: 0.06em; color: var(--sumi-yumusak); }
@media (max-width: 380px) { .menu a.dil-sec { padding-inline: 5px; } }
@media (max-width: 340px) { .menu { gap: 0; } .menu a { padding-inline: 6px; } .menu a.dil-sec { padding-inline: 4px; } }
.menu .menu-cta[aria-current] { background: var(--kirmizi); color: var(--kagit-acik); }
.menu .menu-cta, .dugme {
  display: inline-block; text-decoration: none;
  background: var(--sumi); color: var(--kagit-acik);
  padding: 10px 18px; border: 0; font-weight: 600; letter-spacing: 0.005em;
  margin-left: 6px;
  transition: background 0.2s, color 0.2s;
}
.menu .menu-cta:hover, .dugme:hover, .menu .menu-cta:focus-visible, .dugme:focus-visible {
  background: var(--kirmizi); color: var(--kagit-acik);
}
:focus-visible { outline: 2px solid var(--sumi); outline-offset: 3px; box-shadow: 0 0 0 6px var(--kagit-acik); }

/* --- kentō: baskının hizalama işaretleri, ekranın alt köşelerinde --- */
.kento { position: fixed; inset: auto var(--kenar) clamp(14px, 2.2vw, 26px); height: 28px; z-index: 5; pointer-events: none; --kento-renk: var(--sumi); }
.kento span { position: absolute; bottom: 0; display: block; }
.kento-kagi { right: 0; width: 28px; height: 28px; border-right: 2px solid var(--kento-renk); border-bottom: 2px solid var(--kento-renk); transition: border-color 0.4s; }
.kento-hikitsuke { left: 0; width: 46px; border-bottom: 2px solid var(--kento-renk); transition: border-color 0.4s; }
.baski-durumu {
  position: fixed; left: calc(var(--kenar) + 46px); bottom: clamp(8px, 1.6vw, 18px); z-index: 1;
  font-size: 0.86rem; font-weight: 600; color: var(--sumi); pointer-events: none;
  background: var(--kagit-acik); padding: 6px 12px 6px 10px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s;
}
.basiliyor .baski-durumu { opacity: 1; transform: none; }
.baski-kalip::before {
  content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; vertical-align: -0.02em;
  background: var(--sumi);
}
.baski-kalip[data-kalip="1"]::before { background: var(--mavi); }
.baski-kalip[data-kalip="7"]::before { background: var(--gri); }
.baski-kalip[data-kalip="2"]::before { background: var(--yesil); }
.baski-kalip[data-kalip="3"]::before { background: var(--sari); }
.baski-kalip[data-kalip="4"]::before { background: var(--mor); }
.baski-kalip[data-kalip="5"]::before { background: var(--kirmizi); }
.baski-kalip[data-kalip="6"]::before { background: var(--turuncu); }

/* --- bölümler --- */
main { position: relative; z-index: 2; }
.bolum { position: relative; min-height: 220vh; }
.bolum-giris { min-height: 170vh; }
/* hizmetler dört sayfa (açılış + üç alan) okunur: yapışkan sahne bölümün %80'i boyunca kalır (main.js birak) */
.bolum-isler { min-height: 500vh; }
.bolum-iletisim { min-height: 190vh; }
.bolum-eser { min-height: 260vh; }
.sahne {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding: 150px var(--kenar) 70px;
}
.bolum[data-yan="sag"] .sahne { justify-content: flex-end; }
.bolum[data-dikey="alt"] .sahne { align-items: flex-end; }
.bolum[data-kalip="mavi"] { --kalip: var(--mavi); }
.bolum[data-kalip="gri"] { --kalip: var(--gri); }
.bolum[data-kalip="yesil"] { --kalip: var(--yesil); }
.bolum[data-kalip="sari"] { --kalip: var(--sari); }
.bolum[data-kalip="mor"] { --kalip: var(--mor); }
.bolum[data-kalip="kirmizi"] { --kalip: var(--kirmizi); }
.bolum[data-kalip="turuncu"] { --kalip: var(--turuncu); }
.bolum[data-kalip="tam"] { --kalip: var(--sari); }

/* --- giriş: büyük logo (özgün kare kompozisyon) + grotesk başlık; logo kaydırınca köşeye yerleşir --- */
.bolum-giris .sahne { align-items: stretch; padding-top: clamp(110px, 15vh, 150px); padding-bottom: clamp(56px, 9vh, 96px); }
.giris { width: 100%; display: grid; grid-template-columns: auto minmax(0, 34rem); grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.4vw, 56px); align-content: start; justify-content: start; }
.giris-logo-yer { display: none; }
.js .giris-logo-yer { display: block; grid-row: 1 / span 2; width: var(--logo-yer-g, 300px); height: var(--logo-yer-y, 494px); }
.giris-bas { align-self: start; }
.giris-ust { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.9rem; }
.giris h1 {
  font-family: var(--font-metin); font-weight: 700;
  font-size: clamp(2.3rem, 1.3rem + 2.7vw, 4.1rem);
  line-height: 1.0; letter-spacing: -0.028em;
  margin-bottom: 1.3rem; max-width: 9.8em;
  text-wrap: balance;
}
.giris-bas { background: var(--kagit-acik); padding: 16px 22px 6px; justify-self: start; }
.giris-alt { background: var(--kagit-acik); padding: 10px 14px; }
.giris-son { align-self: end; grid-column: 2; }
.giris-alt { max-width: 31rem; font-size: 1.08rem; line-height: 1.6; }
.giris-eylem { display: flex; align-items: center; gap: 22px; margin-top: 1.4rem; }
.kaydir { font-size: 0.9rem; color: var(--sumi-yumusak); display: inline-flex; align-items: center; gap: 10px; }
.kaydir::after { content: ""; width: 1.5px; height: 34px; background: var(--sumi); transform-origin: top; animation: damla 2.2s ease-in-out infinite; }
@keyframes damla { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* logo: JS büyütür ve yer tutucunun üstüne taşır (--logo-olcek, --logo-x, --logo-y) */
.logo-ilerleme { transform-origin: 0 0; transform: translate(var(--logo-x, 0px), var(--logo-y, 0px)) scale(var(--logo-olcek, 1)); }
.harf-cizgi { stroke-width: calc(0.8px + 0.28px * var(--logo-olcek, 1)); }
/* açılışta harflerin konturu oyulur gibi çizilir */
.acilis .harf-cizgi { stroke-dasharray: 1 1; animation: oyma 1.5s cubic-bezier(0.5, 0, 0.3, 1) both; }
.acilis .harf-k .harf-cizgi { animation-delay: 0.12s; }
.acilis .harf-i .harf-cizgi { animation-delay: 0.24s; }
.acilis .harf-y .harf-cizgi { animation-delay: 0.36s; }
.acilis .harf-o .harf-cizgi { animation-delay: 0.48s; }
.acilis .harf-nokta .harf-cizgi { animation-delay: 0.6s; }
@keyframes oyma { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* --- pano: bölüm metni, basılmış bir kâğıt parçası --- */
.pano {
  position: relative;
  min-width: 0;
  width: min(33rem, 100%);
  margin-left: 46px;
}
/* pano: sahnenin üstüne yapıştırılmış düz bir kâğıt (kartuş); kalıp rengindeki dikey kanji kutusu yanında */
.pano { background: var(--kagit-acik); padding: 16px 22px 12px; }
.s { background: none; padding: 0; }
.pano p { line-height: 1.7; margin: 0 0 0.6em; }
.bolum[data-yan="sag"] .pano { margin-left: 0; margin-right: 46px; }
.pano h2 {
  font-family: var(--font-baslik);
  font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.8rem);
  line-height: 1.06;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.pano-etiket { font-size: 0.86rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--sumi-yumusak); line-height: 1.5; }

/* atölye: dört usta, kabuki oyuncu listesi gibi; her kart kendi bölümüne gider */
.ustalar { list-style: none; margin: 0.9rem 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.usta a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--sumi);
  background: #fffdf6; border-top: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.usta a:hover, .usta a:focus-visible { transform: translateY(-3px); background: #fff; }
.usta-kanji { display: block; font-family: var(--font-kanji); font-size: 1.35rem; line-height: 1; text-align: center; padding: 10px 0 9px; letter-spacing: 0.06em; }
.usta-ressam .usta-kanji { background: var(--yesil); }
.usta-oymaci .usta-kanji { background: var(--sari); }
.usta-ressam .usta-kanji { color: var(--sumi); }
.usta-baskici .usta-kanji { background: var(--mor); color: var(--kagit-acik); }
.usta-yayinci .usta-kanji { background: var(--kirmizi); color: var(--kagit-acik); }
.usta-ad { display: block; font-weight: 700; padding: 8px 10px 2px; line-height: 1.2; }
.usta-is { display: block; font-size: 0.9rem; line-height: 1.4; padding: 0 10px 10px; color: var(--sumi-yumusak); }

#atolye .pano { width: min(41rem, 100%); }
.pano .pano-vurgu { font-family: var(--font-baslik); font-weight: 700; font-size: 1.25rem; line-height: 1.35; margin-top: 0.7rem; }
/* başlık kutusu: dikey kanji, bölümün kalıp renginde */
.pano-baslik-kutusu {
  position: absolute; top: 0; left: -46px;
  width: 46px; padding: 12px 0 14px; margin: 0;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-kanji); font-size: 1.45rem; line-height: 46px; letter-spacing: 0.08em;
  text-align: center;
  background: var(--kalip); color: var(--sumi);
}
.bolum[data-yan="sag"] .pano-baslik-kutusu { left: auto; right: -46px; }
.bolum[data-kalip="mavi"] .pano-baslik-kutusu, .bolum[data-kalip="mor"] .pano-baslik-kutusu, .bolum[data-kalip="kirmizi"] .pano-baslik-kutusu, .bolum[data-kalip="gri"] .pano-baslik-kutusu { color: var(--kagit-acik); }

/* pano kaydırınca "basılır": mürekkep bir yandan öbürüne geçer */
.js .pano, .js .giris, .js .isler { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.6, 0.05, 0.25, 1); }
.js .bolum[data-yan="sag"] .pano { clip-path: inset(0 0 0 100%); }
.js .pano.basili, .js .giris.basili, .js .isler.basili, .js .bolum[data-yan="sag"] .pano.basili { clip-path: inset(-60px -60px -60px -60px); }
.js:not(.hazir) .pano, .js:not(.hazir) .giris { transition: none; }
.pano, .giris, .isler { transition-property: clip-path, opacity; }
.js .gidiyor { opacity: 0; transition: clip-path 0.9s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.35s ease; }

/* --- hizmetler: sayfa sayfa. Sayfalar aynı ızgara hücresinde üst üste durur; kutu en uzun sayfa kadar olur ---
   (main.js akanAyarla bu boyu ölçer). Sayfalı düzende yalnız .acik sayfa görünür; akan düzende sayfalar alt alta akar. */
.isler { display: grid; width: min(35rem, 100%); margin-right: 46px; }
.isler-sayfa { position: relative; background: var(--kagit-acik); padding: 18px 24px 16px; min-width: 0; }
.isler-sayfa[data-sayfa="1"] { --kalip: var(--mavi); }
.isler-sayfa[data-sayfa="2"] { --kalip: var(--kirmizi); }
.isler-sayfa[data-sayfa="3"] { --kalip: var(--yesil); }
.isler-sayfa[data-sayfa="1"] .pano-baslik-kutusu, .isler-sayfa[data-sayfa="2"] .pano-baslik-kutusu { color: var(--kagit-acik); }
.isler .pano-baslik-kutusu { left: auto; right: -46px; }
.isler-sayfa h2, .isler-sayfa h3 { font-family: var(--font-baslik); font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.6rem); line-height: 1.06; margin-bottom: 0.6rem; text-wrap: balance; }
.isler-sayfa > p { line-height: 1.6; margin: 0 0 0.8rem; }
.isler-not { color: var(--sumi-yumusak); font-size: 0.9rem; margin: 0.4rem 0 0; }
/* açılış sayfası: üç alanın içindekiler listesi, her biri kendi baskısının renginde */
.isler-icindekiler { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 2px; }
.isler-icindekiler li { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 0.4rem 0; border-top: 1px solid color-mix(in srgb, var(--sumi) 18%, transparent); }
.isler-icindekiler li::before { content: ""; width: 0.8em; height: 0.8em; background: var(--mavi); flex: none; }
.isler-icindekiler li:nth-child(2)::before { background: var(--kirmizi); }
.isler-icindekiler li:nth-child(3)::before { background: var(--yesil); }
/* kalemler: fiyatsız bir katalog sayfası; ad kalın, altında ne kazandırdığı */
.isler-kalem { list-style: none; margin: 0; padding: 0; }
.isler-kalem li { padding: 0.5rem 0 0.5rem 1.1rem; border-top: 1px solid color-mix(in srgb, var(--sumi) 18%, transparent); position: relative; }
.isler-kalem li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.45rem; height: 0.45rem; background: var(--kalip); }
.isler-kalem b { display: block; line-height: 1.3; }
.isler-kalem span { display: block; font-size: 0.92rem; line-height: 1.45; color: var(--sumi-yumusak); }

/* her alan sayfasının sonunda o alan için hazır mesajlı WhatsApp bağlantısı (menüdeki "Teklif isteyin" düğmesinin biçimi) */
.isler-eylem { margin: 0.7rem 0 0.2rem; }
.isler-eylem a { display: inline-flex; align-items: baseline; gap: 10px; background: var(--sumi); color: var(--kagit-acik); font-weight: 700; text-decoration: none; padding: 9px 14px; transition: background 0.2s ease; }
.isler-eylem a:hover, .isler-eylem a:focus-visible { background: color-mix(in srgb, var(--sumi) 82%, var(--kalip)); }
.isler-eylem-yol { font-size: 0.78rem; font-weight: 600; opacity: 0.75; }

/* sayfalı düzen: sayfa bir yandan öbürüne basılır, eskisi çekilir */
.isler.sayfali .isler-sayfa { grid-area: 1 / 1; align-self: start; }
.js .isler.sayfali .isler-sayfa { opacity: 0; clip-path: inset(0 0 0 100%); pointer-events: none; transition: clip-path 0.6s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.25s ease 0.2s; }
.js .isler.sayfali .isler-sayfa.acik { opacity: 1; clip-path: inset(-60px -60px -60px -60px); pointer-events: auto; transition: clip-path 0.8s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.15s ease; }
/* akan düzen ya da betik yok: sayfalar alt alta */
.isler:not(.sayfali) { row-gap: 18px; }
html:not(.js) .bolum-isler { min-height: 0; }
html:not(.js) .bolum-isler .sahne { position: relative; height: auto; }
/* kısa masaüstü (çoğu dizüstü): sayfa menünün hemen altından başlar, biraz genişler ve sıklaşır ki en uzun sayfa sığsın */
@media (min-width: 761px) and (max-height: 800px) {
  .bolum-isler .sahne { align-items: flex-start; padding-top: 92px; padding-bottom: 16px; }
  .isler { width: min(38rem, 100%); }
  .isler-sayfa { padding: 14px 22px 10px; }
  .isler-sayfa h2, .isler-sayfa h3 { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.1rem); margin-bottom: 0.45rem; }
  .isler-sayfa > p { font-size: 0.97rem; line-height: 1.5; margin-bottom: 0.55rem; }
  .isler-kalem li { padding: 0.34rem 0 0.34rem 1.1rem; }
  .isler-kalem li::before { top: 0.78rem; }
  .isler-kalem span { font-size: 0.88rem; line-height: 1.38; }
}

/* --- bölüm aygıtları: her bölüm baskının kendi metin biçimini kullanır --- */
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 1 · el ilanı (hikifuda): başlık gökyüzüne büyük basılır, metin yanda */
.pano-ilan { width: min(82rem, 100%); background: none; border: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 31rem); column-gap: clamp(24px, 3.5vw, 56px); align-items: end; justify-content: space-between; }
.ilan-bas { background: var(--kagit-acik); padding: 14px 26px 18px; align-self: end; width: fit-content; }
.ilan-bas h2 { font-size: clamp(3rem, 0.9rem + 5.2vw, 7.2rem); line-height: 0.96; letter-spacing: -0.035em; margin: 0; }
.ilan-govde { background: var(--kagit-acik); padding: 16px 22px 10px; }
.pano-ilan .pano-baslik-kutusu { top: 0; }

/* 4 · oyulmuş başlık: kâğıt bloğundan harfler kesilmiş, içinden dünya görünür */
.pano-oyma { width: min(38rem, 100%); background: none; border: 0; padding: 0; }
.pano-oyma .pano-etiket { display: inline-block; background: var(--kagit-acik); padding: 4px 10px 2px; margin: 0; }
.oyma-govde { background: var(--kagit-acik); padding: 10px 20px 6px; margin-top: -1px; }
.pano-oyma .pano-baslik-kutusu { top: 0; }
.oyma-baslik { margin: 0; line-height: 0; }
.oyma { display: block; width: 100%; height: auto; overflow: visible; }
.oyma-yazi { font-family: var(--font-metin); font-weight: 700; font-size: 132px; letter-spacing: -4.5px; }
/* uzun başlıklar (İngilizce) bloğun içine sığsın diye biraz küçük */
.oyma-yazi.oyma-kucuk { font-size: 118px; }
.oyma-blok { fill: var(--kagit-acik); }
.oyma-ic { fill: rgba(28, 26, 25, 0.9); }
.oyma-kenar { fill: none; stroke: var(--sumi); stroke-width: 2.6; stroke-linejoin: round; }

/* 5 · el tomarı (emaki): ekranı yatay kesen kâğıt şerit, iki ucunda tomar çubuğu */
.bolum[data-yan="alt"] .sahne { align-items: flex-end; }
.pano-emaki {
  width: 100%; margin: 0; padding: 16px 40px 14px 86px;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 34px;
  background: var(--kagit-acik); border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi);
}
.pano-emaki::before, .pano-emaki::after { content: ""; position: absolute; top: -12px; bottom: -12px; width: 13px; background: #3a2a22; border: 1.5px solid var(--sumi); border-radius: 5px; }
.pano-emaki::before { left: -6px; }
.pano-emaki::after { right: -6px; }
.pano-emaki .s { background: none; padding: 0; }
.pano-emaki .pano-baslik-kutusu { left: 22px; top: 14px; right: auto; }
.pano-emaki .pano-etiket { grid-column: 1; margin-bottom: 0.2rem; }
.pano-emaki h2 { grid-column: 1; grid-row: 2; align-self: start; }
.pano-emaki > p:not(.pano-etiket):not(.pano-baslik-kutusu) { grid-row: 1 / span 2; align-self: center; line-height: 1.6; margin: 0; padding-left: 22px; border-left: 1.5px solid var(--sumi); }
.js .bolum .pano-emaki { clip-path: inset(0 0 0 100%); }
.js .bolum .pano-emaki.basili { clip-path: inset(-60px -60px -60px -60px); }

/* 6 · haber yaprağı (kawaraban): çift çizgili çerçeve, iki sütun, köşede yayıncı mührü */
.pano-kawaraban { width: min(36rem, 100%); background: var(--kagit-acik); border: 4px double var(--sumi); padding: 16px 22px 14px; }
.pano-kawaraban .s { background: none; padding: 0; }
.pano-kawaraban h2 { border-bottom: 1.5px solid var(--sumi); padding-bottom: 6px; margin-bottom: 10px; }
.pano-kawaraban .pano-govde p { line-height: 1.62; margin: 0 0 0.6em; }
.pano-kawaraban .pano-govde { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 22px; }
.pano-kawaraban .pano-govde p + p { border-left: 1px solid var(--sumi); padding-left: 20px; }
.pano-kawaraban .pano-baslik-kutusu { left: auto; right: 14px; top: 12px; width: 46px; transform: rotate(-4deg); color: var(--kagit-acik); }
.pano-kawaraban h2 { padding-right: 60px; }

/* --- eski işler bölümü (kullanılmıyor): video kartları --- */
.bolum-eser .sahne { align-items: flex-end; padding-bottom: clamp(48px, 7vh, 84px); }
.eser {
  position: relative; min-width: 0;
  width: min(52rem, 100%); margin-right: 46px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; row-gap: 14px;
  align-items: end;
}
.eser-bas { grid-column: 1 / -1; position: relative; background: var(--kagit-acik); padding: 14px 20px 8px; }
.eser-bas p { line-height: 1.6; margin: 0 0 0.5em; max-width: 36rem; }
.eser-bas h2 { font-family: var(--font-baslik); font-size: clamp(1.5rem, 1.05rem + 1.25vw, 2.2rem); line-height: 1.24; margin-bottom: 0.5rem; text-wrap: balance; }
.eser .pano-baslik-kutusu { left: auto; right: -46px; top: 0; }
.eser-sayilar { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.eser-sayilar li { background: var(--sumi); color: var(--kagit-acik); padding: 6px 12px 7px; font-size: 0.92rem; line-height: 1.2; }
.eser-sayilar b { font-family: var(--font-baslik); font-weight: 700; font-size: 1.3rem; margin-right: 0.3em; color: var(--sari); }
.eser-donem { display: block; font-size: 0.74rem; line-height: 1.2; opacity: 0.78; margin-top: 2px; }
/* son 28 günün sayıları ayrı renkte: başlıktaki toplamla karışmasın */
.eser-sayilar .eser-son28 { background: var(--kagit-acik); color: var(--sumi); }
.eser-son28 b { color: var(--kirmizi); }
.eser-videolar {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 0.66fr 1.5fr 1fr; grid-template-rows: auto auto; gap: 10px 12px;
}
.video-kart { min-width: 0; margin: 0; }
.video-dikey { grid-column: 1; grid-row: 1 / span 2; }
.video-buyuk { grid-column: 2; grid-row: 1 / span 2; }
.video {
  position: relative; display: block; line-height: 0; text-decoration: none;
  background: var(--sumi);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.video img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.video-dikey .video img { aspect-ratio: 9 / 16; }
.video:hover, .video:focus-visible { transform: translateY(-3px); }
.video:hover .video-oynat, .video:focus-visible .video-oynat { background: var(--kirmizi); }
/* oynat işareti: kırmızı mühür, içinde kâğıt rengi üçgen */
.video-oynat {
  position: absolute; left: 8px; top: 8px; width: 38px; height: 38px;
  background: var(--sumi);
}
.video-oynat::after {
  content: ""; position: absolute; left: 14px; top: 10px;
  border-left: 12px solid var(--kagit-acik); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.video-dikey .video-oynat { left: auto; top: auto; right: 8px; bottom: 8px; }
.video-buyuk .video-oynat { width: 48px; height: 48px; }
.video-buyuk .video-oynat::after { left: 18px; top: 13px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
.video-ad {
  hyphens: manual;
  margin: 7px 0 0; font-weight: 600; line-height: 1.3; font-size: 0.94rem;
  background: var(--kagit-acik); padding: 6px 9px 7px; border-left: 4px solid var(--kirmizi);
}
.tek-satir { white-space: nowrap; }
.video-kunye { display: block; white-space: nowrap; font-weight: 400; font-size: 0.86rem; color: var(--sumi-yumusak); }
.video-not { display: block; font-weight: 700; font-size: 0.78rem; line-height: 1.3; color: var(--sumi); margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--sumi); }
.video-buyuk .video-ad { font-size: 1rem; }
.eser-alt { grid-column: 1 / -1; margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.eser-kanal { display: inline-block; background: var(--sumi); color: var(--kagit-acik); padding: 9px 16px; text-decoration: none; font-weight: 600; }
.eser-kanal::after { content: " ↗" / ""; }
.eser-kanal:hover, .eser-kanal:focus-visible { background: var(--kirmizi); color: var(--kagit-acik); }
.eser-tarih { font-size: 0.82rem; background: var(--kagit-acik); padding: 3px 8px; color: var(--sumi-yumusak); }
.js .eser { clip-path: inset(0 0 0 100%); transition: clip-path 0.9s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.35s ease; }
.js .eser.basili { clip-path: inset(-60px -60px -60px -60px); }

/* --- öteki işler: her iş Edo'nun bir baskı türüyle eşleşir (kanji kutusu 摺物, "basılmış şey").
   Temel düzen: üç iş alt alta, her biri yatay satır (görsel solda). Geniş ekranda (1001 px ve üstü) bir öne çıkan iş
   solda iki satır boyu, iki yan iş sağda. Görseller aynı sunuluşta: kâğıt pasparto, ince siyah çerçeve, köşede kentō. --- */
.bolum-surimono .sahne { align-items: flex-end; padding-bottom: clamp(48px, 7vh, 84px); }
.pano-surimono { width: min(72rem, 100%); background: none; padding: 0; }
.surimono-bas { background: var(--kagit-acik); padding: 14px 20px 6px; width: fit-content; max-width: 100%; }
.pano-surimono h2 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); margin-bottom: 0.4rem; }
.surimono-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.surimono { position: relative; min-width: 0; background: var(--kagit-acik); display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 14px; padding: 12px; }
.surimono-resim { position: relative; align-self: start; line-height: 0; background: var(--kagit); padding: 6px; border: 1.5px solid var(--sumi); }
/* kentō: sağ alt köşede kâğıdı kalıba oturtan L işareti */
.surimono-resim::after { content: ""; position: absolute; right: -7px; bottom: -7px; width: 12px; height: 12px; border-right: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi); }
.surimono-resim img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.surimono-one .surimono-resim img { aspect-ratio: 400 / 540; object-position: 50% 0; }
.pano-surimono .video { background: var(--sumi); }
.pano-surimono .video img { aspect-ratio: 1; }
/* eski iş kartı: sessiz döngü videosu (kullanılmıyor) */
.pano-surimono video.dongu { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; background: var(--sumi); }
.pano-surimono .video-oynat { width: 32px; height: 32px; left: 6px; top: 6px; }
.pano-surimono .video-oynat::after { left: 12px; top: 9px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.surimono-metin { min-width: 0; display: flex; flex-direction: column; }
.surimono h3 { font-family: var(--font-baslik); font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); line-height: 1.1; }
.pano-surimono .surimono-kunye { margin: 3px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--sumi-yumusak); line-height: 1.35; }
.pano-surimono .surimono-metin > p:not([class]) { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; }
.surimono-sayilar { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.surimono-sayilar li { background: var(--sumi); color: var(--kagit-acik); padding: 4px 9px 5px; font-size: 0.84rem; line-height: 1.2; }
.surimono-sayilar b { font-family: var(--font-baslik); font-weight: 700; font-size: 1.1rem; margin-right: 0.25em; color: var(--sari); }
.pano-surimono .surimono-bag { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.surimono-bag a { display: inline-block; background: var(--sumi); color: var(--kagit-acik); text-decoration: none; font-size: 0.86rem; font-weight: 600; line-height: 1.2; padding: 7px 11px; }
.surimono-bag a[target]::after { content: " ↗" / ""; }
.surimono-izle::before { content: ""; display: inline-block; margin-right: 7px; vertical-align: 0.02em; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.surimono-bag a:hover, .surimono-bag a:focus-visible { background: var(--kirmizi); }
/* Edo'daki karşılığı: dipnot, ince çizginin altında; kartların alt kenarı aynı hizada */
.pano-surimono .surimono-tur { margin: auto 0 0; padding-top: 10px; display: flex; gap: 8px; align-items: baseline; font-size: 0.78rem; line-height: 1.4; color: var(--sumi-yumusak); border-top: 1px solid rgba(28, 26, 25, 0.35); }
.surimono-metin > :nth-last-child(2) { margin-bottom: 10px; }
.surimono-tur b { font-weight: 700; color: var(--sumi); }
.surimono-tur span[lang] { flex: none; font-family: var(--font-kanji); font-size: 0.9rem; line-height: 1; letter-spacing: 0.06em; background: var(--sumi); color: var(--kagit-acik); padding: 3px 5px 4px; }
@media (min-width: 1001px) {
  .surimono-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto; gap: 10px; }
  .surimono-one { grid-row: 1 / span 2; grid-template-columns: 17rem minmax(0, 1fr); column-gap: 20px; padding: 14px; }
  .surimono-one h3 { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem); }
  .pano-surimono .surimono-one .surimono-metin > p:not([class]) { font-size: 1rem; line-height: 1.55; margin-top: 10px; }
  .surimono-one .surimono-sayilar { margin-top: 14px; }
  .surimono-one .surimono-sayilar li { font-size: 0.9rem; padding: 5px 10px 6px; }
  .surimono-one .surimono-sayilar b { font-size: 1.3rem; }
  .pano-surimono .surimono-one .surimono-bag { margin-top: 14px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .surimono-one { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .surimono { grid-template-columns: 7rem minmax(0, 1fr); padding: 10px; }
  .surimono-one h3 { font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem); }
  .pano-surimono .surimono-one .surimono-metin > p:not([class]) { font-size: 0.92rem; }
}

/* --- örnekler: görselsiz altı kısa kart (öteki işler kartlarının kâğıt zemini); geniş ekranda 3, orta ekranda 2, telefonda 1 sütun.
   Her kartın üst şeridi logonun altı baskı renginden biri. --- */
.pano-ornekler .surimono-bas p.ornekler-giris { margin: 0 0 0.5rem; max-width: 38rem; font-size: 0.95rem; line-height: 1.55; }
.pano-ornekler .surimono-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.pano-ornekler .surimono { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 12px; box-shadow: inset 0 4px 0 var(--sumi); }
.pano-ornekler .surimono:nth-child(1) { box-shadow: inset 0 4px 0 var(--mavi); }
.pano-ornekler .surimono:nth-child(2) { box-shadow: inset 0 4px 0 var(--yesil); }
.pano-ornekler .surimono:nth-child(3) { box-shadow: inset 0 4px 0 var(--sari); }
.pano-ornekler .surimono:nth-child(4) { box-shadow: inset 0 4px 0 var(--mor); }
.pano-ornekler .surimono:nth-child(5) { box-shadow: inset 0 4px 0 var(--kirmizi); }
.pano-ornekler .surimono:nth-child(6) { box-shadow: inset 0 4px 0 var(--turuncu); }
@media (max-width: 1000px) { .pano-ornekler .surimono-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pano-ornekler .surimono-liste { grid-template-columns: minmax(0, 1fr); }
  .pano-ornekler .surimono { padding: 11px 12px 9px; }
  .pano-ornekler .surimono-bas p.ornekler-giris { font-size: 0.82rem; line-height: 1.45; }
}

/* --- örnekler: kendi uygulamamız (Kanji Nanji). Altı kartın altında tek geniş blok, öteki işler kartlarının biçimi: görsel solda,
   metin sağda. Geniş ekranda sayılar ile mağaza bağlantıları aynı satırda durur. Blok alçak tutulur: pano 1440x900'de
   yapışkan sahneye sığsın (sığmayan ekranda main.js akanAyarla akan düzene geçirir). --- */
.pano-ornekler .surimono-kendi { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-top: 8px; }
.pano-ornekler .surimono-kendi .surimono { grid-row: auto; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 18px; padding: 14px 16px 12px; box-shadow: inset 0 4px 0 var(--kirmizi); }
.pano-ornekler .surimono-kendi .surimono-metin > :nth-last-child(2) { margin-bottom: 0; }
.pano-ornekler .surimono-kendi h3 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); }
.pano-ornekler .surimono-kendi .surimono-metin > p:not([class]) { font-size: 0.92rem; line-height: 1.5; margin-top: 6px; }
@media (min-width: 1001px) {
  .pano-ornekler .surimono-kendi .surimono-metin { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-content: start; }
  .pano-ornekler .surimono-kendi .surimono-metin > h3,
  .pano-ornekler .surimono-kendi .surimono-metin > p:not([class]) { grid-column: 1 / -1; }
  .pano-ornekler .surimono-kendi .surimono-sayilar { align-self: center; margin-top: 10px; }
  .pano-ornekler .surimono-kendi .surimono-sayilar li { font-size: 0.84rem; padding: 4px 9px 5px; }
  .pano-ornekler .surimono-kendi .surimono-sayilar b { font-size: 1.1rem; }
  .pano-ornekler .surimono-kendi .surimono-bag { align-self: center; margin-top: 10px; flex-wrap: nowrap; }
  /* görsel kare kırpılır (telefonun üst kısmı, kart tam görünür): blok alçak kalır */
  .pano-ornekler .surimono-kendi .surimono-resim img { aspect-ratio: 1; object-position: 50% 0; }
}
@media (max-width: 760px) {
  .pano-ornekler .surimono-kendi { margin-top: 6px; }
  .pano-ornekler .surimono-kendi .surimono { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 11px 12px 9px; }
  .pano-ornekler .surimono-kendi h3 { font-size: 1.1rem; }
  .pano-ornekler .surimono-kendi .surimono-metin > p:not([class]) { font-size: 0.8rem; line-height: 1.38; margin-top: 3px; }
}

/* --- video perdesi: kabuki perdesi (siyah, kaki, yeşil) yana çekilir, arkasında video --- */
html.perde-acik { overflow: hidden; }
.perde {
  width: min(92vw, 1180px); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible;
}
/* video, paspartulu bir baskı gibi: kâğıt kenar, altında başlık ve kapat */
.perde-pasparto { background: var(--kagit-acik); padding: 14px 14px 0; }
.perde::backdrop { background: rgba(20, 17, 15, 0.9); }
.perde-sahne { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(92vh - 90px); margin: 0 auto; background: #000; overflow: hidden; border: 1.5px solid var(--sumi); }
.perde.dikey { width: min(92vw, calc((92vh - 90px) * 9 / 16 + 30px)); }
.perde.dikey .perde-sahne { aspect-ratio: 9 / 16; }
.perde-video, .perde-video iframe, .perde-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.perde-video video { object-fit: contain; background: #000; }
.perde-bez {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, #1c1a19 0 8.333%, #c0562c 8.333% 16.666%, #2f6b4a 16.666% 25%);
  transform: translateX(0); transition: transform 1.05s cubic-bezier(0.7, 0, 0.2, 1) 0.15s;
}
.perde.acik .perde-bez { transform: translateX(101%); }
.perde-alt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0 12px; }
.perde-ad { margin: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.3; min-width: 0; }
.perde-kapat { font: inherit; font-weight: 600; background: var(--sumi); color: var(--kagit-acik); border: 0; padding: 9px 18px; cursor: pointer; flex: none; }
.perde-kapat:hover, .perde-kapat:focus-visible { background: var(--kirmizi); }
@media (prefers-reduced-motion: reduce) { .perde-bez { display: none; } }

/* iletişim: e-posta düğmesi bir yayıncı mührü; basınca mühür gibi göçer */
.muhur {
  display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
  margin-top: 0.6rem; padding: 14px 22px 15px; max-width: 100%;
  background: var(--kirmizi); color: var(--kagit-acik);
  outline: 2px solid var(--kagit-acik); outline-offset: -8px;
  transform: rotate(-1.4deg);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.muhur-ust { font-size: 0.82rem; font-weight: 600; padding-left: 4px; }
.muhur-adres { font-family: var(--font-baslik); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.2rem, 0.9rem + 1vw, 1.65rem); line-height: 1.15; padding: 0 4px 2px; overflow-wrap: anywhere; }
.muhur:hover, .muhur:focus-visible { transform: rotate(-1.4deg) scale(0.985); filter: brightness(0.94); }
.muhur:active { transform: rotate(-1.4deg) scale(0.96); }
.muhur:focus-visible { outline: 2px solid var(--kagit-acik); outline-offset: -8px; box-shadow: 0 0 0 3px var(--sumi), 0 0 0 6px var(--kagit-acik); }
.iletisim-yollar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 0.4rem; }
.pano .iletisim-yollar .iletisim-eposta { margin: 0; }
.iletisim-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.iletisim-qr img { width: 92px; height: 92px; image-rendering: pixelated; display: block; outline: 1.5px solid var(--sumi); outline-offset: 0; }
.iletisim-qr figcaption { font-size: 0.74rem; line-height: 1.2; color: var(--sumi-yumusak); }
/* QR yalnız masaüstünde: telefondaki ziyaretçi mühre dokunur */
@media (max-width: 760px), (pointer: coarse) { .iletisim-qr { display: none; } }
.pano .iletisim-diger { margin: 1.1rem 0 0.2rem; font-size: 0.95rem; line-height: 1.5; }
.iletisim-diger a { font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* --- iletişim: kısa brief (düz arayüz). Renk rolü: siyah dolgu = seçili, kırmızı mühür = yalnız gönderme eylemi --- */
.brief { margin: 1rem 0 0.2rem; max-width: 40rem; }
.brief-ac {
  display: inline-flex; flex-direction: column; gap: 1px; cursor: pointer; list-style: none; user-select: none; position: relative;
  min-height: 54px; padding: 9px 52px 9px 18px; color: var(--kagit-acik); background: var(--sumi);
}
.brief-ac::-webkit-details-marker { display: none; }
.brief-ac-ad { font-size: 1.05rem; font-weight: 700; }
.brief-ac-alt { font-size: 0.85rem; font-weight: 500; opacity: 0.8; }
.brief-ac::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-52%); font-size: 1.5rem; line-height: 1; font-weight: 600; }
.brief[open] > .brief-ac::after { content: "\2212"; }
.brief-ac:hover { background: color-mix(in srgb, var(--sumi) 82%, var(--kalip)); }
/* form açıkken gönderme düğmeleri tek eylem yolu: alttaki mühür ve e-posta satırı saklanır */
.brief[open] ~ .iletisim-yollar, .brief[open] ~ .iletisim-diger { display: none; }
.brief-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 14px; padding: 18px 0 2px; border-top: 2px solid var(--sumi); }
.brief-soru { border: 0; margin: 0; padding: 0; min-width: 0; }
.brief-soru legend, .brief-alan > span { display: block; padding: 0; font-size: 0.95rem; font-weight: 700; margin-bottom: 7px; }
.brief-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-secenekler label { position: relative; display: inline-flex; }
.brief-secenekler input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.brief-secenekler span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 15px; font-size: 1rem; font-weight: 600;
  border: 2px solid var(--sumi); background: #fffdf7; color: var(--sumi);
}
.brief-secenekler input:hover + span { background: var(--kagit); }
.brief-secenekler input:checked + span { background: var(--sumi); color: var(--kagit-acik); }
.brief-secenekler span::before { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; }
.brief-secenekler input[type="radio"] + span::before { border-radius: 50%; }
.brief-secenekler input:checked + span::before { background: var(--kagit-acik); box-shadow: inset 0 0 0 3px var(--sumi); border-color: var(--kagit-acik); }
.brief-secenekler input:focus-visible + span { outline: 2px solid var(--sumi); outline-offset: 3px; box-shadow: 0 0 0 6px var(--kagit-acik); }
.brief-alan { display: block; min-width: 0; }
.brief-alan input {
  width: 100%; min-height: 48px; padding: 9px 12px; font: inherit; font-size: 1rem; color: var(--sumi);
  background: #fffdf7; border: 2px solid var(--sumi); border-radius: 0; appearance: none; -webkit-appearance: none;
}
.brief-alan input::placeholder { color: var(--sumi-yumusak); opacity: 1; }
.brief-not { margin: 0 !important; font-size: 0.92rem; line-height: 1.5; color: var(--sumi-yumusak); max-width: 34rem; }
.brief-eylem { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 4px 0 6px; }
.brief-eylem .dugme, .brief-ikinci { min-height: 52px; margin: 0; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.brief-eylem .dugme {
  padding: 13px 24px; background: var(--kirmizi); color: var(--kagit-acik); outline: 2px solid var(--kagit-acik); outline-offset: -7px;
  transform: rotate(-1.2deg); transition: transform 0.15s ease, filter 0.15s ease, background 0.2s;
}
.brief-eylem .dugme:hover, .brief-eylem .dugme:focus-visible { background: var(--kirmizi); filter: brightness(0.94); transform: rotate(-1.2deg) scale(0.985); }
.brief-eylem .dugme:active { transform: rotate(-1.2deg) scale(0.96); }
.brief-eylem .dugme:focus-visible { box-shadow: 0 0 0 3px var(--sumi), 0 0 0 6px var(--kagit-acik); }
.brief-ikinci { padding: 12px 18px; color: var(--sumi); background: transparent; border: 2px solid var(--sumi); }
.brief-ikinci:hover, .brief-ikinci:focus-visible { background: var(--kagit); }
@media (min-width: 761px) { .brief-secenekler span { font-size: 0.97rem; } }
@media (max-width: 760px) {
  .brief-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-secenekler label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .brief-secenekler span { width: 100%; padding: 8px 12px; }
}

/* --- iletişim --- */
.bolum-iletisim .sahne { flex-direction: column; justify-content: center; align-items: flex-start; }
.pano-iletisim h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); }
.dugme-buyuk { font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); padding: 14px 22px; margin-top: 0.4rem; max-width: 100%; overflow-wrap: anywhere; }
.alt {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 0.85rem; color: var(--kagit-acik);
  background: #191615; padding: 14px var(--kenar) clamp(46px, 6vh, 60px);
  border-top: 1.5px solid rgba(248, 244, 234, 0.25);
}
.alt p { margin: 0; }
.alt-tanim { max-width: 40rem; margin-bottom: 6px !important; opacity: 0.85; }
.alt-satir { display: flex; justify-content: space-between; }

/* gece: üst şerit ve köşe işaretleri kâğıt rengine döner */
.gece .kento { --kento-renk: var(--kagit-acik); }
.gece .kaydir::after { background: var(--kagit-acik); }

/* --- dar ekran --- */
@media (max-width: 760px) {
  .menu { font-size: 0.84rem; gap: 4px; }
  .menu a { padding: 7px 9px; }
  .menu .menu-cta { margin-left: 2px; padding: 7px 10px; }
  .sahne { align-items: flex-end; padding: 96px 16px 64px; }
  .bolum[data-yan="sag"] .sahne { justify-content: flex-start; }
  /* telefonda kanji sekmesi panonun yanında değil üstünde: iki yandaki boşluk eşit kalır */
  .pano, .bolum[data-yan="sag"] .pano { margin: 30px 0 0 0; width: 100%; }
  .pano-baslik-kutusu, .bolum[data-yan="sag"] .pano-baslik-kutusu, .eser .pano-baslik-kutusu, .pano-ilan .pano-baslik-kutusu, .pano-oyma .pano-baslik-kutusu {
    top: -30px; left: 0; right: auto; width: auto; height: 30px; padding: 0 10px;
    writing-mode: horizontal-tb; line-height: 30px; font-size: 1rem; letter-spacing: 0.12em;
  }
  .pano-kawaraban .pano-baslik-kutusu { top: 10px; right: 10px; left: auto; height: auto; writing-mode: vertical-rl; padding: 8px 0; width: 32px; line-height: 32px; }
  .pano-emaki .pano-baslik-kutusu { top: -30px; left: 0; }
  .js .bolum[data-yan="sag"] .pano { clip-path: inset(0 100% 0 0); }
  .js .bolum[data-yan="sag"] .pano.basili { clip-path: inset(-60px -60px -60px -60px); }
  .isler { margin: 30px 0 0 0; width: 100%; }
  /* telefonda kısa sayfa alta oturur: üstte baskı görünsün */
  .isler.sayfali .isler-sayfa { align-self: end; }
  .bolum-isler .sahne { padding-bottom: 32px; }
  .isler .pano-baslik-kutusu { top: -30px; left: 0; right: auto; width: auto; height: 30px; padding: 0 10px; writing-mode: horizontal-tb; line-height: 30px; font-size: 1rem; letter-spacing: 0.12em; }
  .isler-sayfa { padding: 14px 16px 12px; }
  .isler-sayfa h2, .isler-sayfa h3 { font-size: 1.55rem; }
  .isler-sayfa > p { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.5rem; }
  .isler-kalem li { padding: 0.28rem 0 0.28rem 1rem; }
  .isler-kalem li::before { top: 0.7rem; }
  .isler-eylem { margin-top: 0.5rem; }
  .isler-kalem span { font-size: 0.85rem; line-height: 1.35; }
  .isler-not { display: none; }
  .baski-durumu { left: calc(16px + 44px); }
  .giris { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; row-gap: 18px; }
  .js .giris-logo-yer { grid-row: 1; }
  .giris-son { grid-column: 1; }
  .bolum-giris .sahne { padding-top: 84px; }
  .giris h1 { margin-bottom: 0.8rem; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 2.8rem); }
  .giris-alt { font-size: 1rem; line-height: 1.85; }
  .bolum-iletisim .sahne { justify-content: flex-end; }
  .pano-iletisim h2 { font-size: 2.3rem; }
  .alt { font-size: 0.78rem; padding-bottom: 46px; }
  .bolum-iletisim .sahne { padding-bottom: 150px; }
  .pano-ilan { display: block; }
  .ilan-bas { display: inline-block; padding: 10px 16px 12px; margin-bottom: 8px; }
  .ilan-bas h2 { font-size: clamp(2.3rem, 1.4rem + 4.5vw, 3rem); }
  .ilan-govde { padding: 12px 14px 6px; }
  .pano { padding: 12px 14px 8px; }
  .pano-emaki { display: block; padding: 12px 18px 12px 22px; margin-top: 30px; }
  .pano-emaki > p:not(.pano-etiket):not(.pano-baslik-kutusu) { border-left: 0; padding-left: 0; margin-top: 0.5rem; line-height: 1.55; }
  .pano-kawaraban .pano-govde { display: block; }
  .pano-kawaraban .pano-govde p + p { border-left: 0; padding-left: 0; }
  .pano-kawaraban { padding: 12px 14px 14px; }
  .ustalar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .usta-kanji { font-size: 1.1rem; padding: 7px 0 6px; }
  .usta-ad { padding: 6px 8px 1px; }
  .usta-is { font-size: 0.84rem; padding: 0 8px 8px; }
  .eser { margin: 30px 0 0 0; width: 100%; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .js .eser { clip-path: inset(0 100% 0 0); }
  .eser-bas p:not(.pano-etiket) { font-size: 0.92rem; }
  .eser-videolar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 0 16px 8px 0; margin-right: -16px; }
  .eser-videolar::after { content: ""; flex: 0 0 4px; }
  .video-kart { flex: 0 0 62%; scroll-snap-align: start; }
  .video-buyuk { flex-basis: 76%; }
  .video-dikey { flex-basis: 44%; }
  .video-dikey .video { width: 62%; }
  .video-ad { font-size: 0.82rem; }
  .eser-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .eser-donem { font-size: 0.62rem; }
  .eser-bas { padding: 11px 14px 4px; }
  .eser-bas h2 { font-size: 1.28rem; }
  .eser-bas p:not(.pano-etiket) { font-size: 0.84rem; line-height: 1.5; }
  .eser-alt { gap: 6px 10px; }
  .eser-sayilar li { padding: 5px 8px; font-size: 0.8rem; }
  .eser-sayilar b { display: block; }
  .eser-sayilar b { font-size: 1.1rem; }
  .eser-tarih { font-size: 0.72rem; }
  .pano-surimono { margin: 30px 0 0 0; width: 100%; padding: 0; }
  .surimono-bas { padding: 10px 14px 2px; }
  .pano-surimono h2 { font-size: 1.35rem; line-height: 1.15; }
  /* telefonda üç iş alt alta, küçük görselli satırlar: hepsi tek bakışta görünür */
  .surimono-liste { gap: 6px; margin-top: 6px; }
  .surimono { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 9px; }
  .surimono-resim { padding: 4px; }
  .surimono-resim::after { right: -5px; bottom: -5px; width: 9px; height: 9px; }
  .surimono h3, .surimono-one h3 { font-size: 1.1rem; }
  .pano-surimono .surimono-kunye { font-size: 0.76rem; }
  .pano-surimono .surimono-metin > p:not([class]) { font-size: 0.8rem; line-height: 1.38; margin-top: 3px; }
  /* telefonda bölüm etiketi ve künye satırları gizli: aynı bilgi kart başlığında ve metninde var; pano ekrana sığar */
  .pano-surimono .surimono-bas .pano-etiket, .pano-surimono .surimono-kunye { display: none; }
  .surimono-bas { padding-top: 12px; }
  .surimono-sayilar { margin-top: 6px; gap: 4px; }
  .surimono-sayilar li { font-size: 0.72rem; padding: 3px 6px; }
  .surimono-sayilar b { font-size: 0.9rem; }
  .pano-surimono .surimono-bag { margin-top: 6px; gap: 4px; }
  .surimono-bag a { font-size: 0.76rem; padding: 5px 8px; }
  .pano-surimono .surimono-tur { display: none; }
  .surimono-metin > :nth-last-child(2) { margin-bottom: 0; }
  .pano-surimono .video-oynat { width: 26px; height: 26px; left: 4px; top: 4px; }
  .pano-surimono .video-oynat::after { left: 10px; top: 7px; border-left-width: 8px; border-top-width: 6px; border-bottom-width: 6px; }
}

/* çok dar telefon: menüde yer yok; atölyeye logo harfleri ve usta kartları götürür */
@media (max-width: 400px) {
  .menu a[href="#atolye"] { display: none; }
  .menu .menu-cta { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pano, .js .giris, .js .isler, .js .eser { transition: none; clip-path: none; }
  .js .isler.sayfali .isler-sayfa, .js .isler.sayfali .isler-sayfa.acik { transition: none; clip-path: none; }
  .kaydir::after { animation: none; }
  #dunya { transition: none; }
  .acilis .harf-cizgi { animation: none; }
}

/* paylaşım görseli üretimi için (?og): yalnız dünya ve büyük logo */
.og .menu, .og .kento, .og .baski-durumu, .og main { display: none; }
.og .logo-ilerleme { width: 168px; margin: 40px 0 0 40px; padding: 22px 20px; }
.og .ust { padding: 0; }
.og .harf-cizgi { stroke: transparent; }

/* panosu ekrana sığmayan bölüm (main.js: akanAyarla): yapışkan sahne yerine akan düzen */
.bolum.akan { min-height: 150vh; }
.bolum.akan .sahne { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
.js .bolum.akan .gidiyor { opacity: 1; }

/* --- kısa ekran: dizüstü, küçük telefon --- */
@media (max-height: 800px) {
  .sahne { padding-top: 128px; padding-bottom: 56px; }
  /* işler: videolar tek sıraya iner */
  .bolum-eser .sahne { padding-bottom: 40px; }
  .eser { row-gap: 10px; }
  .eser-bas h2 { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
  .eser-bas p { line-height: 1.7; }
  .eser-videolar { grid-template-rows: auto; align-items: start; }
  .video-buyuk { grid-column: auto; grid-row: auto; }
  .video-dikey { grid-column: auto; grid-row: auto; }
  .video-dikey .video img { aspect-ratio: 3 / 4; object-position: center 40%; }
  .video-not { font-size: 0.66rem; }
  .video-dikey .video-ad { font-size: 0.72rem; padding: 4px 6px 5px; }
  .video-dikey .video-kunye { white-space: normal; }
  .eser-videolar { grid-template-columns: 0.52fr 1.45fr 1fr 1fr; }
  .pano h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 0.7rem; }
  .pano p { margin-bottom: 0.7em; }
  .bolum-surimono .sahne { padding-bottom: 40px; }
  .pano-surimono .surimono-tur { display: none; }
  .surimono-metin > :nth-last-child(2) { margin-bottom: 0; }
  .pano-surimono h2 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.1rem); }
  .pano-surimono .surimono-metin > p:not([class]) { font-size: 0.86rem; line-height: 1.45; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .ilan-bas h2 { font-size: 1.9rem; }
  .ilan-bas { padding: 8px 12px 10px; margin-bottom: 6px; }
  .ilan-govde p { font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.45em; }
  .ilan-govde .pano-vurgu { font-size: 0.95rem; }
  .eser-bas { padding: 10px 14px 4px; }
  .eser-bas h2 { font-size: 1.12rem; }
  .eser-bas p:not(.pano-etiket) { font-size: 0.76rem; line-height: 1.45; }
  .eser { row-gap: 7px; }
  .video-buyuk { flex-basis: 58%; }
  .video-dikey { flex-basis: 25%; }
  .eser-sayilar li { font-size: 0.74rem; padding: 4px 7px; }
  .eser-sayilar b { font-size: 0.95rem; }
  .video-buyuk { flex-basis: 64%; }
  .video-kart { flex-basis: 50%; }
  .video-dikey { flex-basis: 28%; }
  .video-ad { font-size: 0.78rem; padding: 4px 7px 5px; }
  .eser-kanal { padding: 7px 12px; font-size: 0.85rem; }
  .eser-alt { margin-top: 0; }
  body { font-size: 0.88rem; line-height: 1.5; }
  .pano p { line-height: 1.72; margin-bottom: 0.35em; }
  .pano h2 { line-height: 1.18; }
  .sahne { padding-top: 84px; padding-bottom: 54px; }
  .pano h2 { font-size: 1.6rem; }
  .pano-vurgu { font-size: 1.1rem; margin-top: 0.6rem; }
  .giris h1 { font-size: 2rem; }
  .logo-ilerleme { width: 46px; padding: 8px 7px; }
}
/* kısa telefon (iPhone SE gibi): uzun panolar sığmaz; yapışkan sahne yerine akan düzen */
@media (max-width: 760px) and (max-height: 700px) {
  .bolum { min-height: 150vh; }
  .sahne { position: relative; height: auto; min-height: 100svh; padding-top: 96px; padding-bottom: 64px; }
  .js .gidiyor { opacity: 1; }
}

/* yatay telefon: yapışkan sahne yerine akan düzen; pano sığmazsa kaydırınca görünür */
@media (max-height: 500px) {
  .bolum { min-height: 150vh; }
  .sahne { position: relative; height: auto; min-height: 100vh; padding-top: 80px; padding-bottom: 60px; }
  .logo-ilerleme { width: 40px; padding: 6px; }
  .ust { padding-top: 10px; padding-bottom: 10px; }
  .pano h2 { font-size: 1.6rem; }
  .js .gidiyor { opacity: 1; }
}

/* --- örnekler: akış kartı (25.10.2026, sahip: "son sayfalar full yazı olmuş, sonlara doğru boğuluyorum"). Paragraf yerine üç kısa
   satır: gelen → sonra → size. Etiket solda, sonuç satırı koyu. Telefonda altı kart alt alta dizilmez, yana kayar (tek kart boyu). --- */
.ornek-akis { margin: 10px 0 0; display: grid; }
.ornek-akis > div { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-top: 1px dashed rgba(28, 26, 25, 0.3); }
.ornek-akis > div:first-child { border-top: 0; padding-top: 2px; }
.ornek-akis dt { font-size: 0.78rem; font-weight: 700; line-height: 1.4; color: var(--sumi-yumusak); padding-top: 1px; }
.ornek-akis dd { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.ornek-akis > div:last-child dt { color: var(--sumi); }
.ornek-akis > div:last-child dd { font-weight: 600; }
.ornekler-kaydir { display: none; }
@media (max-width: 1000px) {
  .pano-ornekler .surimono-akis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .pano-ornekler .surimono-akis::-webkit-scrollbar { display: none; }
  .pano-ornekler .surimono-akis > li { scroll-snap-align: start; }
  .pano-ornekler .surimono-bas .ornekler-kaydir { display: block; margin: 0 0 0.45rem; font-size: 0.78rem; font-weight: 700; }
  .ornek-akis dd { font-size: 0.86rem; }
}

/* --- iletişim: ücretsiz kontrol paragraf değil, kısa liste (25.10.2026). Sol çizgi bölümün kalıp rengi. --- */
.kontrol-kutu { margin: 0.9rem 0 0; max-width: 34rem; border-left: 4px solid var(--kalip, var(--turuncu)); padding: 2px 0 2px 14px; }
.pano .kontrol-kutu p { margin: 0; }
.pano .kontrol-kutu .kontrol-baslik { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.kontrol-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.kontrol-liste li { position: relative; padding-left: 16px; font-size: 0.95rem; line-height: 1.4; }
.kontrol-liste li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; background: var(--sumi); }
.pano .kontrol-kutu .kontrol-not { margin-top: 6px; font-size: 0.86rem; color: var(--sumi-yumusak); }
@media (max-width: 760px) { .kontrol-liste li { font-size: 0.88rem; } }
/* Geniş ekranda altı örnek tek tablo: her örnek bir satır, sütun başlığı (gelen, sonra, size) bir kez yazılır; satır başındaki
   renkli şerit logonun altı baskı renginden biri. Pano 1440x900'de yapışkan sahneye sığmalı (main.js akanAyarla). */
.ornek-baslik { display: none; }
@media (min-width: 1001px) {
  .pano-ornekler .ornek-baslik, .pano-ornekler .surimono-akis > li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.1fr); column-gap: 18px; }
  .pano-ornekler .ornek-baslik { margin-top: 10px; padding: 7px 16px 5px 20px; background: var(--kagit-acik); border-bottom: 1.5px solid var(--sumi);
    font-size: 0.78rem; font-weight: 700; line-height: 1.3; color: var(--sumi-yumusak); }
  .pano-ornekler .surimono-akis { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 0; background: var(--kagit-acik); }
  .pano-ornekler .surimono-akis > li { align-items: baseline; padding: 8px 16px 8px 20px; border-top: 1px dashed rgba(28, 26, 25, 0.3); }
  .pano-ornekler .surimono-akis > li:first-child { border-top: 0; }
  .pano-ornekler .surimono-akis .surimono-metin, .pano-ornekler .surimono-akis .ornek-akis { display: contents; }
  .pano-ornekler .surimono-akis h3 { font-size: 1.05rem; line-height: 1.25; }
  .pano-ornekler .surimono-akis .ornek-akis > div { display: block; padding: 0; border: 0; }
  .pano-ornekler .surimono-akis .ornek-akis dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pano-ornekler .surimono-akis .ornek-akis dd { font-size: 0.88rem; line-height: 1.38; }
  .pano-ornekler .surimono-akis > .surimono:nth-child(1) { box-shadow: inset 4px 0 0 var(--mavi); }
  .pano-ornekler .surimono-akis > .surimono:nth-child(2) { box-shadow: inset 4px 0 0 var(--yesil); }
  .pano-ornekler .surimono-akis > .surimono:nth-child(3) { box-shadow: inset 4px 0 0 var(--sari); }
  .pano-ornekler .surimono-akis > .surimono:nth-child(4) { box-shadow: inset 4px 0 0 var(--mor); }
  .pano-ornekler .surimono-akis > .surimono:nth-child(5) { box-shadow: inset 4px 0 0 var(--kirmizi); }
  .pano-ornekler .surimono-akis > .surimono:nth-child(6) { box-shadow: inset 4px 0 0 var(--turuncu); }
}
/* iletişim: kontrol kutusu sıkı tutulur; pano 1440x900'de alt bilgiyle birlikte sahneye sığsın */
.kontrol-kutu { margin-top: 0.7rem; }
.kontrol-liste { gap: 1px; margin-top: 4px; }
.kontrol-liste li { line-height: 1.35; }
.pano .kontrol-kutu .kontrol-not { margin-top: 4px; }
.kontrol-kutu { margin-top: 0.55rem; padding-top: 0; padding-bottom: 0; }
.pano .kontrol-kutu .kontrol-baslik { font-size: 0.97rem; }
@media (max-width: 1000px) { .pano-ornekler .surimono-bas .ornekler-kaydir { display: block; margin: 0 0 0.45rem; font-size: 0.78rem; font-weight: 700; } }
/* Okuma sırası soluktan koyuya (25.10.2026, yabancı gözün eleştirisi: "asıl iş Sonra sütununda ama en soluk o"):
   gelen soluk, sonra tam mürekkep, sonuç kalın. Sütun başlıkları okunur boyda ve mürekkep renginde. */
@media (min-width: 1001px) {
  .pano-ornekler .ornek-baslik { font-size: 0.84rem; color: var(--sumi); }
  .pano-ornekler .surimono-akis .ornek-akis > div:first-child dd { color: var(--sumi-yumusak); }
}
.ornek-akis > div:nth-child(2) dd { color: var(--sumi); }

/* --- son bölüm akan düzende: sahne bölümün dibine oturur, sayfa alt bilgiyle biter (25.10.2026, sahip: "sonda çıkan footer
   sayfanın ortasına geliyor"). Akan bölümün boyu sahneden uzundu (min 150vh); sahne tepede durunca artan boşluk alt bilginin
   altında kalıyordu (1366x768'de 312 px). Bölüm boyu (kamera zamanlaması) değişmez; boşluk kartın üstüne geçer, orada 3B sahne
   oynar. Yapışkan düzende dokunulmaz. Ölçü: test/denetim.mjs "alt bilgi sayfanın sonunda". --- */
.bolum-iletisim.akan { display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 760px) and (max-height: 700px), (max-height: 500px) {
  .bolum-iletisim { display: flex; flex-direction: column; justify-content: flex-end; }
}

/* --- iletişim: tek ana eylem (25.10.2026, yabancı göz: "dört eylem yarışıyor"). Mühür (WhatsApp, sahibin birinci yolu) önce ve
   en ağır; form ikincil, çerçeveli düğme; e-posta satırı üçüncü. Form açıkken mühür saklanır: gönderme düğmeleri formun içinde. --- */
.pano-iletisim .iletisim-yollar { margin-top: 0.9rem; }
.pano-iletisim .brief { margin-top: 0.9rem; }
.pano-iletisim .brief-ac { color: var(--sumi); background: transparent; box-shadow: inset 0 0 0 1.5px var(--sumi); min-height: 48px; }
.pano-iletisim .brief-ac:hover { background: color-mix(in srgb, var(--kagit) 70%, var(--kalip)); }
.pano-iletisim .brief[open] > .brief-ac { color: var(--kagit-acik); background: var(--sumi); }
.pano-iletisim:has(.brief[open]) .iletisim-yollar { display: none; }
.pano-iletisim > p { line-height: 1.55; }
/* Kanji Nanji: sayılar düz yazı; sarı rakamlı siyah etiketler örnek tablosundan çok göz çekiyordu */
.pano-ornekler .surimono-kendi .surimono-sayilar { gap: 0 14px; }
.pano-ornekler .surimono-kendi .surimono-sayilar li { background: none; color: var(--sumi-yumusak); padding: 0; }
.pano-ornekler .surimono-kendi .surimono-sayilar b { color: var(--sumi); font-size: 1.05rem; }
@media (min-width: 1001px) {
  .pano-ornekler .surimono-kendi .surimono-sayilar li { padding: 0; }
  .pano-ornekler .surimono-kendi .surimono-sayilar b { font-size: 1.05rem; }
}
/* geniş ekranda iletişim panosu biraz geniş, başlık tek satır: pano kısalır, 1440x900'de alt bilgiyle birlikte yapışkan sahneye
   sığar (akan düzende sayfa sonunda üst etiket logonun altında kalıyordu) */
@media (min-width: 1001px) {
  .pano-iletisim { width: min(39rem, 100%); max-width: 39rem; }
  .pano-iletisim h2 { font-size: clamp(2.2rem, 1rem + 2.2vw, 3.1rem); }
}
/* alt bilgi: sabit kentō köşesi (ekranın alt köşesi, alttan clamp(14px, 2.2vw, 26px), 28 px boy) "© 2026" yazısının üstünden
   geçiyordu (1366x768). Alt pay köşenin üstünde kalacak kadar. */
.alt { padding-bottom: calc(clamp(14px, 2.2vw, 26px) + 42px); }

/* --- örnekler: tablonun altında tek eylem (25.10.2026, yabancı göz: "bölümün en güçlü düğmesi başka bir uygulamayı indirtiyor").
   Kırmızı dolu düğme iletişime götürür; Kanji Nanji'nin mağaza bağlantıları çerçeveli, ikinci planda. --- */
.pano-ornekler .ornekler-eylem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; padding: 7px 14px 7px 7px; background: var(--kagit-acik); }
.pano-ornekler .ornekler-eylem .dugme { margin: 0; background: var(--kirmizi); color: var(--kagit-acik); padding: 10px 16px; font-size: 0.95rem; }
.pano-ornekler .ornekler-eylem .dugme:hover, .pano-ornekler .ornekler-eylem .dugme:focus-visible { background: var(--sumi); }
.pano-ornekler .ornekler-eylem > span { font-size: 0.9rem; }
.pano-ornekler .surimono-kendi .surimono-bag a { background: transparent; color: var(--sumi); box-shadow: inset 0 0 0 1.5px var(--sumi); }
.pano-ornekler .surimono-kendi .surimono-bag a:hover, .pano-ornekler .surimono-kendi .surimono-bag a:focus-visible { background: var(--sumi); color: var(--kagit-acik); }
@media (max-width: 760px) { .pano-ornekler .ornekler-eylem > span { display: none; } .pano-ornekler .ornekler-eylem { padding: 6px; } }

/* --- alt bilgi: işe yarayan iki yol (WhatsApp, e-posta); "Ukiyo · İstanbul" üstteki cümleyi tekrarlıyordu --- */
.alt-yollar { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.alt-yollar a { color: var(--kagit-acik); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.alt-yollar a:hover, .alt-yollar a:focus-visible { color: var(--sari); }
.alt-satir { gap: 12px; align-items: flex-end; }

/* --- sayfa sonu: sabit logo yalnız son panoya gerçekten çarpınca çekilir (main.js logoCekil) --- */
.logo-ilerleme { transition: opacity 0.25s ease; }
.logo-cekil .logo-ilerleme { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
/* eylem başlığın yanında: tabloya yükseklik eklemez (1366x768'de pano yapışkan sahneye sığmalı) */
.pano-ornekler .ornekler-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.pano-ornekler .ornekler-ust .ornekler-eylem { margin: 0; }
@media (max-width: 1000px) { .pano-ornekler .ornekler-ust { display: block; } .pano-ornekler .ornekler-ust .ornekler-eylem { margin-top: 6px; } }