/* MaxArtHub kimlik sayfası ekleri (2026-10-16): kimlik ve marka kitabı tek sayfa. Kitabın kural sayfası (aralık, köşe, okunurluk),
   kısa künye ve yeni hareket anları. Hareket sınıfları yalnız html.kh varken (kimlik-hareket.js; azaltılmış harekette eklenmez).
   Bütün hareket bir kez oynar, döngü yok; yalnız transform, opacity ve clip-path. Eğri: küpün kayma eğrisi. */

/* ---------- 12 kurallar: tek ekranda üç sütun ---------- */
.kural-izgara{display:grid;grid-template-columns:1.1fr .8fr 1.3fr;gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);align-items:start}
@media (max-width:980px){.kural-izgara{grid-template-columns:1fr 1fr}.kural--okunur{grid-column:1/-1}}
@media (max-width:620px){.kural-izgara{grid-template-columns:1fr}}
.kural h3{margin:0 0 14px;font:600 .78rem/1.3 var(--g);letter-spacing:.12em;text-transform:uppercase;color:var(--m2)}
.aralik-l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.aralik-l li{display:grid;grid-template-columns:128px auto;align-items:center;gap:12px;font:500 .8rem/1 var(--g);font-feature-settings:"tnum" 1;color:var(--m2)}
.aralik-l i{display:block;height:12px;width:calc(var(--a) * 1px);border-radius:3px;background:#1A0F2E;transform-origin:left}
.aralik-l li:nth-child(n+7) i{background:#B2F1D1;box-shadow:inset 0 0 0 1px #0A0614}
.kose-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kose-l li{display:grid;gap:8px;font:500 .8rem/1 var(--g);color:var(--m2)}
.kose-l i{display:block;aspect-ratio:1;max-width:96px;border-radius:var(--k);background:var(--mah-gradyan-kup-sol,#322F48)}
.kose-l li:last-child i{aspect-ratio:2.2}
.okunur-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:620px){.okunur-l{grid-template-columns:1fr}}
.okunur-l li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--c);font-size:.8rem;line-height:1.3}
.okunur-l .orn{display:grid;place-items:center;width:40px;height:30px;border-radius:7px;font-weight:600;flex-shrink:0}
.okunur-l b{margin-left:auto;font-feature-settings:"tnum" 1;white-space:nowrap}
.kural .not{margin-top:12px}

/* ---------- 13 künye: kısa, kaynak tıklayınca ---------- */
.bolum--kunye{padding-top:clamp(56px,7vw,88px)!important;padding-bottom:clamp(56px,7vw,88px)!important}
.kunye{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px clamp(20px,4vw,48px);align-items:start;padding-top:22px;border-top:1px solid var(--c)}
.kunye__b{margin:0;font-size:1rem}
.kunye__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;margin:0}
.kunye__l div{display:grid;gap:2px}
.kunye__l dt{font:600 .7rem/1.3 var(--g);letter-spacing:.1em;text-transform:uppercase;color:var(--m2)}
.kunye__l dd{margin:0;font-size:.9rem;line-height:1.4}
.kunye__k summary{cursor:pointer;font-size:.85rem;color:var(--m2);list-style:none}
.kunye__k summary::-webkit-details-marker{display:none}
.kunye__k summary::after{content:" +";color:var(--nane)}
.kunye__k[open] summary::after{content:" –"}
.kunye__k p{max-width:28em;margin:8px 0 0;font-size:.82rem;color:var(--m2)}
@media (max-width:900px){.kunye{grid-template-columns:1fr}.kunye__l{grid-template-columns:repeat(2,minmax(0,1fr))}}
#video-paketi:empty{display:none}

/* ================= hareket anları ================= */
/* 1. başlıktaki ad harf harf yükselir (küpün kayma eğrisiyle) */
.kh .kh-harf{display:inline-block;transform:translate3d(0,.9em,0) rotate(6deg);opacity:0;transition:transform .9s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) calc(var(--h-i)*45ms + 150ms),opacity .5s ease calc(var(--h-i)*45ms + 150ms)}
.kh .kh-harfler{display:inline-block;white-space:nowrap;clip-path:inset(-.2em -.1em -.25em -.1em)}
.kh.kh-acildi .kh-harf{transform:none;opacity:1}

/* 2. renk şeritleri boya gibi dolar, kodlar karışıp yerine oturur */
.renk-sutun{position:relative;overflow:hidden}
.kh .renk-sutun::after{content:"";position:absolute;inset:0;background:#0A0614;transform-origin:50% 0;transform:scaleY(1);transition:transform 1s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) calc(var(--r-i,0)*90ms);pointer-events:none}
.kh .renk-serit.kh-in .renk-sutun::after{transform:scaleY(0)}
.kh .acik-tema button i{transform:scale(0);transition:transform .7s var(--mah-motion-yay,cubic-bezier(.34,1.4,.64,1)) calc(var(--r-i,0)*70ms)}
.kh .acik-tema.kh-in button i{transform:none}

/* 3. logonun üç sesi kendi yolunda yazılır: MAX harf harf yükselir, ART elle soldan sağa çekilir, HUB fırçayla silinir gibi açılır */
.kh .ses-satir .ses-max .kh-harf{transform:translate3d(0,100%,0);opacity:1;transition-duration:.8s}
.kh .ses-satir .ses-max{clip-path:inset(0 -.1em 0 -.1em)}
.kh .ses-satir .ses-max.kh-in .kh-harf{transform:none}
.kh .ses-satir .ses-art{clip-path:inset(-.3em 100% -.3em 0);transition:clip-path 1.6s cubic-bezier(.45,.05,.25,1) .1s}
.kh .ses-satir .ses-art.kh-in{clip-path:inset(-.3em -.3em -.3em 0)}
.kh .ses-satir .ses-hub{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%);transition:clip-path 1s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) .15s}
.kh .ses-satir .ses-hub.kh-in{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}

/* 4. fotoğraflar: nane perde kayar, kare yerine oturur */
.kh .galeri li button{position:relative;overflow:hidden}
.kh .galeri li button::after{content:"";position:absolute;inset:0;background:#B2F1D1;transform-origin:100% 50%;transform:scaleX(1);transition:transform .9s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) calc(var(--r-i,0)*80ms + 100ms);pointer-events:none;z-index:2}
.kh .galeri li button img{transform:scale(1.12);transition:transform 1.4s var(--mah-motion-kolay,cubic-bezier(.2,.7,.2,1)) calc(var(--r-i,0)*80ms + 200ms)}
.kh .galeri.kh-in li button::after{transform:scaleX(0)}
.kh .galeri.kh-in li button img{transform:none}

/* 5. kurallar: aralık çubukları uzar, köşeler yumuşar, okunurluk örnekleri döner */
.kh .aralik-l i{transform:scaleX(0);transition:transform .8s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) calc(var(--r-i,0)*60ms)}
.kh .aralik-l.kh-in i{transform:none}
.kh .kose-l i{border-radius:0;transition:border-radius 1.1s var(--mah-motion-yay,cubic-bezier(.34,1.4,.64,1)) calc(var(--r-i,0)*120ms + 200ms)}
.kh .kose-l.kh-in i{border-radius:var(--k)}
.kh .okunur-l .orn{transform:perspective(200px) rotateX(90deg);transition:transform .7s var(--mah-motion-yay,cubic-bezier(.34,1.4,.64,1)) calc(var(--r-i,0)*60ms)}
.kh .okunur-l.kh-in .orn{transform:none}

/* 6. dosyalar sırayla gelir; indirme oku üzerine gelince iner */
.kh .dosyalar > li{opacity:0;transform:translate3d(-24px,0,0);transition:opacity .6s ease calc(var(--r-i,0)*60ms),transform .8s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1)) calc(var(--r-i,0)*60ms)}
.kh .dosyalar.kh-in > li{opacity:1;transform:none}
.dosyalar a svg{transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.dosyalar a:hover svg{transform:translate3d(0,3px,0)}

/* 7. künye çizgisi soldan çekilir */
.kh .kunye{border-top-color:transparent;position:relative}
.kh .kunye::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--mah-motion-kayma,cubic-bezier(.77,0,.175,1))}
.kh .kunye.kh-in::before{transform:none}

/* 8. koyu bölümlerde imleci izleyen hafif nane ışık (yalnız fare; dokunmatikte yok) */
.kh-isik{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,rgba(178,241,209,.09),rgba(178,241,209,.03) 55%,transparent);opacity:0;transition:opacity .5s ease;will-change:transform}
.kh-isik.acik{opacity:1}
@media (prefers-reduced-motion:reduce){.kh-isik{display:none}}
@media print{.kh-isik{display:none}}
.kunye__b .ust-baslik{font-family:var(--g);margin:0}


.bolum{padding:clamp(36px,4.4vw,60px) 0}
.bolum__bas{max-width:none;margin:0 0 clamp(18px,2.4vw,30px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:end}
.bolum__bas > .ust-baslik{grid-column:1;margin-bottom:8px}
.bolum__bas > h2{grid-column:1;margin:0}
.bolum__bas > .giris-yazi{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:56ch;font-size:clamp(.98rem,.2vw + .94rem,1.06rem);line-height:1.55}
@media (max-width:900px){.bolum__bas{display:block}.bolum__bas > h2{margin-bottom:10px}}
h2{font-size:clamp(2.1rem,3.2vw + .7rem,3.7rem);line-height:.98}
h3{font-size:clamp(1.3rem,.9vw + 1rem,1.8rem);margin-bottom:6px}
.alt-blok{margin-top:clamp(26px,3.4vw,44px)}
.alt-blok > .not{margin-bottom:14px}
.siradaki{margin-top:clamp(22px,2.6vw,34px);padding:2px 0 2px 14px}
.siradaki b{font-size:clamp(1.2rem,1vw + 1rem,1.6rem)}
.siradaki span.alt{display:none}
.iki{gap:clamp(18px,3vw,40px)}
.kural .not,.kural-izgara{margin-top:8px}
.kural-izgara{margin-top:0}
/* hareket anları (sahneli anlatı) kısa kalır: adım başına ekranın üçte biri */
.scrolly > .sahne{height:calc(100svh - var(--ust-boy) - 10svh);top:calc(var(--ust-boy) + 4svh)}
.scrolly > .adimlar{padding:3svh 0 8svh}
.adim{min-height:33svh}
.adim h3{font-size:clamp(1.6rem,1.6vw + 1rem,2.5rem);margin-bottom:8px}
.adim p{font-size:1rem}
@media (max-width:900px){
  .scrolly > .adimlar{padding:2svh 0 12svh}
  .adim{min-height:30svh;padding-top:3svh}
}
.cevir{margin-top:clamp(22px,3vw,36px)}

/* ---- düz yazım ---- */
.duz-sahne{padding:clamp(20px,2.6vw,34px) 0}
.duz-buyuk{--mah-duz-boy:clamp(2.4rem,6.5vw,5.4rem)}
.duz-kontrol{margin-top:12px}
#duz-yazim .sar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3.4vw,48px)}
#duz-yazim .sar > *{grid-column:1 / -1}
#duz-yazim .sar > .alt-blok:nth-child(4){grid-column:1;order:4}
#duz-yazim .sar > .alt-blok:nth-child(6){grid-column:2;order:5}
#duz-yazim .sar > .alt-blok:nth-child(5){order:6}
#duz-yazim .sar > .alt-blok:nth-child(7){order:7}
#duz-yazim .sar > .siradaki{order:8;justify-self:start}
@media (max-width:900px){#duz-yazim .sar{display:block}}
.kullanim{grid-template-columns:minmax(0,1fr);gap:10px}
.mock-ust,.mock-alt{height:auto;min-height:52px}
.surum .zemin{aspect-ratio:16/10}
.surum .zemin .mah-kup{--kup:clamp(56px,6.4vw,82px)}
.surum h4{margin-top:8px}
.olcu{grid-template-columns:minmax(0,1fr);gap:12px}
.bosluk{padding:clamp(14px,2vw,22px)}
.bosluk-kutu{--k:clamp(70px,8vw,96px)}
.en-kucuk{gap:10px}
.en-kucuk > div{padding:8px 12px;gap:14px}
.en-kucuk .kutucuk{width:88px;height:88px}
.yapma .zemin{aspect-ratio:16/9}
.yapma .zemin .mah-kup{--kup:clamp(54px,6vw,76px)}
.yapma-liste{margin-top:10px}

/* ---- hareket ---- */
.hareket-izgara{gap:clamp(18px,3vw,40px)}
.sesler__bas{margin-bottom:10px}
.ses-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,3vw,40px)}
.ses-liste li:last-child:nth-child(odd){grid-column:1 / -1}
.ses-liste button{padding:6px 10px}
.tablo th,.tablo td{padding-top:8px;padding-bottom:8px}

/* ---- renk ---- */
.renk-serit{height:clamp(150px,15vw,200px)}
.renk-sutun{padding:12px 10px}
.iki h3[style]{margin-top:16px!important}
.gradyan-serit{height:56px}
.yuz-uclu div{height:60px}
.kontrast{margin-top:10px}
.acik-tema{margin-top:10px}
.acik-tema button i{height:40px}

/* ---- yazı ---- */
.ses-uclu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.ses-uclu .ses-satir{display:block;padding:14px 0 0;border-top:2px solid #111827;border-bottom:0!important}
.ses-uclu .dev{font-size:clamp(3.6rem,8vw,6.6rem);margin-bottom:4px}
@media (max-width:800px){.ses-uclu{grid-template-columns:minmax(0,1fr)}.ses-uclu .ses-satir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.yazi-ornek{font-size:clamp(1.9rem,2.6vw + 1rem,3rem)}
.olcek{margin-top:18px}
.olcek li{padding:7px 0}
.dene-alan{margin-top:8px}

/* ---- öğeler, fotoğraf, ses ---- */
.mor-sahne{aspect-ratio:16/9}
.firca-ornek{margin-top:12px}
.fo{aspect-ratio:16/9}
.galeri{gap:8px}
.galeri img{aspect-ratio:4/3}
.foto-kural{margin-top:16px;gap:14px}
.foto-kural li{padding-top:10px}
.slogansiz{min-height:clamp(130px,16vw,190px);margin-bottom:clamp(18px,2.4vw,28px)}
.slogansiz .mah-duz{--mah-duz-boy:clamp(2.4rem,6vw,4.6rem)}
.ilkeler li{padding-top:10px}
.ilkeler b{font-size:1.5rem;margin-bottom:2px}
.ciftler{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;gap:8px}
.olcek .o-dev{font-size:clamp(2.2rem,3.4vw,3.2rem)!important}
.olcek .o-h1{font-size:clamp(1.7rem,2.4vw,2.3rem)!important}
.olcek .o-h2{font-size:clamp(1.3rem,1.7vw,1.7rem)!important}
/* başlık ve not solda, içerik sağda */
@media (min-width:1000px){
  #ogeler .alt-blok,#renk .alt-blok:last-of-type,#ses .alt-blok:last-of-type{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2.38fr);column-gap:clamp(20px,3vw,40px);align-items:start}
  #ogeler .alt-blok > h3,#renk .alt-blok:last-of-type > h3,#ses .alt-blok:last-of-type > h3{grid-column:1;grid-row:1;margin:0}
  #ogeler .alt-blok > .not,#renk .alt-blok:last-of-type > .not,#ses .alt-blok:last-of-type > .not{grid-column:1;grid-row:2;margin:8px 0 0}
  #ogeler .alt-blok > .kutu-kart,#renk .alt-blok:last-of-type > .acik-tema,#ses .alt-blok:last-of-type > .denetci{grid-column:2;grid-row:1 / span 3;margin-top:0}
}
.fircalar{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.fircalar button{border-radius:12px}
.firca-blok{align-items:center}
.kutu-kart{gap:clamp(12px,2vw,22px)}
.mor-sahne{aspect-ratio:5/4}
.kutu-kart figcaption{margin-top:8px}
.denetci textarea{min-height:96px}

/* ---- uygulamalar: dört kart tek sırada, gönderi ve hikâye altında ---- */
@media (min-width:1000px){
  .u-kart,.u-ilan,.u-etiket,.u-cikartma{grid-column:span 3}
  .u-insta{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px)}
  .u-insta .telefon{width:min(100%,196px)}
  .u-insta figcaption{margin:0;max-width:30ch}
  .u-kart .urun-kart{padding:9px}
  .u-kart .urun-kart img{aspect-ratio:1}
}
.uyg{gap:clamp(14px,2vw,24px)}
.uyg figcaption{margin-top:8px}

/* ---- indir ---- */
@media (min-width:1000px){
  .dosyalar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px)}
  .dosya--hepsi{grid-column:1 / -1}
}
.dosya{padding:9px 4px;gap:14px}
.dosya .onizle{width:56px;height:56px}
.denetci .onizleme{min-height:96px}

/* ---- ikinci tur ---- */
.bolum{padding:clamp(28px,3.4vw,46px) 0}
.adim{min-height:27svh}
.scrolly > .adimlar{padding:2svh 0 5svh}
@media (min-width:1000px){
  .u-cikartma{order:5}
  .u-insta{order:6}
  .u-insta .telefonlar{flex:none;flex-wrap:nowrap}
  .u-insta .telefon{width:196px;flex:none}
}
.surum .zemin{aspect-ratio:2/1}
.surum .zemin .mah-kup{--kup:clamp(44px,4.8vw,64px)}
.yapma .zemin{aspect-ratio:2.2/1}
.yapma .zemin .mah-kup{--kup:clamp(44px,4.6vw,62px)}
.adim{min-height:21svh}
.scrolly > .adimlar{padding:1svh 0 3svh}
.adim h3{font-size:clamp(1.45rem,1.3vw + 1rem,2.2rem)}
.adim .tarih{margin-bottom:6px}
@media (min-width:1000px){
  .dosya{grid-template-columns:56px minmax(0,1fr);row-gap:6px;align-items:start}
  .dosya .bicim{grid-column:2;justify-self:start;display:flex;flex-wrap:wrap;gap:8px}
  .dosya--hepsi{grid-template-columns:56px minmax(0,1fr) auto;align-items:center}
  .dosya--hepsi .bicim{grid-column:3}
}
@media (min-width:1000px){
  #duz-yazim .olcu{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  #duz-yazim .en-kucuk{grid-template-columns:minmax(0,1fr);align-content:space-between}
  #duz-yazim .en-kucuk .kutucuk{width:64px;height:64px;overflow:hidden}
  #duz-yazim .en-kucuk .mah-kup{--kup:36px}
}
.siradaki{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:0;margin-top:clamp(14px,2vw,22px)}
.siradaki .etiket{grid-column:auto;margin:0}
.siradaki svg{align-self:center}
.cevir__sahne{min-height:clamp(220px,22vw,290px)}
.cevir__sahne .mah-kup{--kup:clamp(100px,11vw,132px)}
.cevir__metin .not{margin-bottom:12px}
.duraklar{margin-top:10px}
h2{font-size:clamp(1.9rem,2.7vw + .7rem,3.2rem)}
.bolum__bas{margin-bottom:clamp(14px,1.8vw,22px)}
@media (min-width:1200px){.ciftler{grid-template-columns:repeat(3,minmax(0,1fr))}}
.op-sahne{aspect-ratio:16/9}
.giris{min-height:0}
.giris__ic{padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(24px,3vw,40px)}
.giris__kup{min-height:280px}
.giris{min-height:min(calc(100svh - var(--ust-boy)),680px)}

/* ---- telefon: aynı sadeleştirme ---- */
@media (max-width:999px){
  .dosya{grid-template-columns:56px minmax(0,1fr);row-gap:6px;align-items:start;padding:9px 0}
  .dosya .bicim{grid-column:2;justify-self:start;display:flex;flex-wrap:wrap;gap:8px}
  .dosya .onizle{width:56px;height:56px}
  .u-insta .telefonlar{flex-wrap:nowrap;gap:10px}
  .u-insta .telefon{width:calc(50% - 5px);min-width:0;flex:none}
  .uyg{gap:18px}
  .alt-blok{margin-top:24px}
  .hareket-izgara{gap:18px}
}
@media (max-width:900px){
  .scrolly > .sahne{height:44svh;top:var(--ust-boy)}
  .scrolly > .adimlar{padding:2svh 0 14svh}
  .adim{min-height:34svh}
}
/* masaüstünde "sıradaki" bağlantıları kalkar: üstteki bölüm şeridi aynı işi görür (telefonda kalır) */
@media (min-width:1000px){
  .bolum .siradaki{display:none}
  .giris{min-height:min(calc(100svh - var(--ust-boy)),620px)}
  .cevir__sahne{min-height:clamp(200px,19vw,250px)}
}
.ses-uclu .dev{margin-bottom:12px}
.ses-uclu .dev.ses-max{padding-bottom:.06em}