/* BEYLER STUDIO — marka kitabı sunum oynatıcısı */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/noto-kufi-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/oswald-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF}

:root{--ui:'Manrope','Noto Kufi Arabic',system-ui,Arial,sans-serif;--bg:#e7e4dd;--ink:#151513;--muted:#77746b;--accent:#f65c35;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}
button,select{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.deck-app{height:100%;display:grid;grid-template-rows:auto 1fr auto;position:relative}

/* top bar */
.d-top{display:flex;align-items:center;gap:16px;padding:14px clamp(14px,2.4vw,28px)}
.d-brand{display:flex;flex-direction:column;line-height:1.15}
.d-brand b{font-size:17px;letter-spacing:-.01em}
.d-brand small{color:var(--muted);font-size:12.5px;font-weight:600}
.d-sp{flex:1}
.d-made{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:-.02em}
.d-made i{width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
.d-btn{height:38px;min-width:38px;border-radius:99px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.55);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-weight:700;font-size:13px;transition:background .2s,border-color .2s,transform .2s}
.d-btn:hover{background:#fff;border-color:rgba(0,0,0,.3)}
.d-btn:active{transform:scale(.96)}
.d-btn svg{width:16px;height:16px}
.d-btn.ic{padding:0;width:38px}
.d-btn.acc{background:var(--ink);color:#fff;border-color:var(--ink)}
.d-sel{height:38px;border-radius:99px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.55);padding:0 12px;font-weight:700;font-size:13px}

/* stage */
.d-stage{position:relative;display:grid;place-items:center;padding:6px clamp(12px,3vw,40px);min-height:0}
.d-chip{position:absolute;top:-2px;left:50%;transform:translateX(-50%);background:#fff;color:#111;border-radius:8px;padding:5px 12px;font-weight:700;font-size:clamp(15px,1.6vw,22px);letter-spacing:-.01em;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:3;display:none;border:1.5px solid #111}
.d-viewport{position:relative;width:min(100%,calc((100vh - 170px) * 16 / 9));aspect-ratio:16/9;container-type:inline-size}
.slide{position:absolute;inset:0;border-radius:clamp(4px,.6cqw,10px);overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.06);display:grid;grid-template-columns:30% 70%;opacity:0;visibility:hidden;transform:translateX(4%) scale(.985);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
.slide.prev{transform:translateX(-4%) scale(.985)}
[dir=rtl] .slide{transform:translateX(-4%) scale(.985)}
[dir=rtl] .slide.prev{transform:translateX(4%) scale(.985)}
.slide .l{padding:4.2cqw 3cqw 3cqw;display:flex;flex-direction:column;justify-content:space-between;background:#fff;position:relative;z-index:1}
.slide .lab{font-size:2.05cqw;line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#141414;max-width:12ch}
.slide .desc{font-size:.98cqw;line-height:1.5;color:#8a877f;max-width:30ch}
.slide .pg{font-size:.9cqw;color:#a5a29a;font-weight:700;letter-spacing:.08em;margin-top:1.2cqw}
.slide .r{background:var(--panel,#e4e8e4);position:relative;overflow:hidden;display:grid}
.slide.full{grid-template-columns:1fr}
[data-a]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.slide.on [data-a]{opacity:1;transform:none}
.slide.on [data-a="1"]{transition-delay:.12s}.slide.on [data-a="2"]{transition-delay:.22s}.slide.on [data-a="3"]{transition-delay:.32s}.slide.on [data-a="4"]{transition-delay:.42s}.slide.on [data-a="5"]{transition-delay:.52s}

/* slide types */
.logo{display:inline-flex;align-items:center;gap:.55em;color:inherit;line-height:1}
.logo svg{height:1.25em;width:1.25em;flex:none}
.logo .wm{white-space:nowrap}
.s-logo .r{grid-template-rows:1fr 1fr;padding:3cqw 3.2cqw;gap:1.6cqw;background:var(--panel)}
.s-logo .half{display:grid;place-items:center;border-radius:.4cqw;font-size:3.4cqw}
.s-mark .r{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:3cqw 6cqw;gap:1.4cqw;background:#fff}
.s-mark .tile{display:grid;place-items:center;border-radius:.5cqw}
.s-mark .tile svg{width:42%;height:42%}
.s-type .r{place-items:center;align-content:center;padding:4cqw;gap:1.6cqw;justify-items:start}
.s-type .big{font-size:7.2cqw;line-height:.95;letter-spacing:-.02em}
.s-type .w{display:flex;gap:2.4cqw;font-size:1.1cqw;color:#55534d}
.s-type .abc{font-size:1.15cqw;letter-spacing:.12em;color:#55534d;max-width:44cqw;line-height:1.7;word-break:break-all}
.s-hier .r{align-content:center;padding:4cqw 5cqw;gap:1.1cqw}
.s-hier .row{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:.9cqw}
.s-hier .row small{font:600 .85cqw var(--ui);color:#8a877f;white-space:nowrap}
.s-pal .r{grid-auto-flow:column;grid-auto-columns:1fr;padding:3cqw 3.2cqw;gap:0;background:var(--panel)}
.s-pal .sw{display:flex;flex-direction:column;justify-content:flex-end;padding:1.2cqw;font-size:.92cqw;font-weight:700;line-height:1.35;transform-origin:bottom}
.slide.on .s-pal-anim .sw{animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleY(.2);opacity:0}}
.s-pal .sw span{opacity:.75;font-weight:600}
.s-pat .r{padding:3cqw 3.2cqw;background:var(--panel)}
.s-pat .pat{border-radius:.4cqw;overflow:hidden}
.s-pat svg{width:100%;height:100%;display:block}
.s-imgs .r{padding:3cqw 3.2cqw;gap:1.2cqw;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.s-imgs .im{border-radius:.5cqw;overflow:hidden;box-shadow:0 1.2cqw 2.4cqw -1.2cqw rgba(0,0,0,.35);background:#ddd}
.s-imgs .im img{width:100%;height:100%;object-fit:cover;display:block}
.s-social .im{aspect-ratio:4/5}
.s-mock .r{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;grid-auto-flow:row}
.s-mock .im{height:100%}
.s-mock .im:first-child{grid-row:span 2}
.s-card .r{place-items:center;perspective:120cqw}
.bcw{position:absolute;inset:0;display:grid;place-items:center}
.bc{position:absolute;width:30cqw;aspect-ratio:1.75;border-radius:.7cqw;box-shadow:0 2.4cqw 3.6cqw -1.6cqw rgba(0,0,0,.45);padding:2cqw;display:flex;flex-direction:column;justify-content:space-between}
.bc.front{transform:translate(-26%,-20%) rotate(-7deg);display:grid;place-items:center;font-size:2.3cqw}
.bc.back{transform:translate(22%,24%) rotate(5deg);font-size:1cqw}
.bc.back .nm{font-size:1.45cqw;font-weight:700;letter-spacing:-.01em}
.bc.back .ro{opacity:.65;margin-top:.2cqw}
.bc.back .ct{line-height:1.6}
.bc.back .logo{font-size:1.3cqw}
.s-merch .r{grid-template-columns:1.1fr 1fr .7fr;align-items:end;justify-items:center;padding:4cqw 4cqw 5cqw}
.mi{display:flex;align-items:flex-end;justify-content:center}
.tote,.bag{position:relative;background:var(--b);display:grid;place-items:center;box-shadow:0 2cqw 3cqw -1.6cqw rgba(0,0,0,.4)}
.tote{width:17cqw;height:20cqw;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);font-size:1.5cqw;margin-top:6cqw}
.tote::before{content:"";position:absolute}
.mi:first-child{position:relative}
.mi:first-child::before{content:"";position:absolute;left:50%;bottom:19cqw;width:8cqw;height:7cqw;border:.7cqw solid var(--hc,rgba(0,0,0,.55));border-bottom:0;border-radius:4cqw 4cqw 0 0;transform:translateX(-50%)}
.bag{width:13cqw;height:15cqw;font-size:1.1cqw;border-radius:.2cqw}
.bag::before{content:"";position:absolute;top:-3.6cqw;left:50%;width:5cqw;height:4cqw;border:.45cqw solid var(--h);border-bottom:0;border-radius:3cqw 3cqw 0 0;transform:translateX(-50%)}
.bag::after{content:"";position:absolute;inset:0 0 auto 0;height:1.6cqw;background:rgba(0,0,0,.06)}
.stk{width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;box-shadow:0 1.4cqw 2cqw -1cqw rgba(0,0,0,.4);transform:rotate(-12deg)}
.stk svg{width:55%;height:55%}
.s-cover{background:var(--c0)}
.s-cover .r{background:none}
.s-cover .l{background:var(--c0);color:var(--on0)}
.s-cover .l .desc{color:inherit;opacity:.7}
.s-cover .cv-logo{font-size:3.6cqw}
.s-cover .cv-sub{font-size:1.2cqw;opacity:.8;margin-top:1.4cqw;max-width:22ch;line-height:1.35}
.s-cover .cv-meta{font-size:.95cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.s-cover img{width:100%;height:100%;object-fit:cover}
.s-cover.on img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.12)}}
.s-end .r{place-items:center;text-align:center;align-content:center;gap:1.6cqw;background:var(--c0);color:var(--on0)}
.s-end .r .logo{font-size:4cqw}
.s-end .r p{margin:0;font-size:1.3cqw;opacity:.8}
.s-end .cta{display:inline-flex;margin-top:1cqw;background:var(--accent);color:#fff;border-radius:99px;padding:1cqw 2cqw;font-weight:800;font-size:1.15cqw}
.s-image .r{padding:3cqw 3.2cqw}
.s-image .r img{width:100%;height:100%;object-fit:contain}

/* bottom controls */
.d-bot{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px 18px;flex-wrap:wrap}
.d-count{font-weight:800;font-size:13px;min-width:62px;text-align:center;font-variant-numeric:tabular-nums}
.d-bar{width:min(320px,40vw);height:3px;background:rgba(0,0,0,.12);border-radius:3px;overflow:hidden}
.d-bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .5s var(--ease)}
.d-thumbs{position:absolute;left:0;right:0;bottom:70px;display:flex;gap:10px;overflow-x:auto;padding:12px 20px;background:rgba(231,228,221,.92);backdrop-filter:blur(10px);transform:translateY(20px);opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:5}
.d-thumbs.on{transform:none;opacity:1;pointer-events:auto}
.d-thumbs button{flex:none;width:150px;border:2px solid transparent;border-radius:8px;background:#fff;padding:8px 10px;text-align:start;font-size:12px;font-weight:700;line-height:1.25}
.d-thumbs button small{display:block;color:var(--muted);font-weight:700;margin-bottom:4px}
.d-thumbs button.on{border-color:var(--ink)}
.d-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:9px 16px;border-radius:99px;font-weight:700;font-size:13px;transition:.3s;pointer-events:none;z-index:9}
.d-toast.on{opacity:1;transform:translate(-50%,0)}

/* embed (iframe on home page) */
.embed .d-top,.embed .d-bot{display:none}
.embed .d-stage{padding:0}
.embed .d-viewport{width:100%}
.embed .slide{border-radius:0;box-shadow:none}
.embed{background:transparent}
html.embed-h,html.embed-h body{background:#ecebe6}

/* reels mode (9:16, autoplay, ad recording) */
.reels{background:#111}
.reels .d-top,.reels .d-bot{display:none}
.reels .d-stage{padding:0;place-items:center;height:100vh;overflow:hidden}
.reel-frame{position:relative;height:100vh;aspect-ratio:9/16;max-width:100vw;overflow:hidden;background:#222;display:flex;flex-direction:column;align-items:center;justify-content:center;container-type:inline-size}
.reel-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(18px) brightness(.55) saturate(1.1);transform:scale(1.05);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(-2%,1%)}}
.reels .d-chip{display:block;position:relative;left:auto;top:auto;transform:none;margin-bottom:3.4cqw;font-size:6.4cqw;border-radius:2cqw;padding:1.2cqw 3.4cqw;border-width:.5cqw;animation:pop .35s var(--ease)}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.reels .d-viewport{width:92cqw;z-index:1}
.reel-cap{position:absolute;bottom:7cqw;left:0;right:0;text-align:center;color:#fff;z-index:1;font-weight:800;font-size:5cqw;letter-spacing:-.02em}
.reel-cap small{display:block;font-size:3.4cqw;font-weight:600;opacity:.75;letter-spacing:0;margin-top:1cqw}
.reel-top{position:absolute;top:6cqw;left:0;right:0;text-align:center;color:#fff;z-index:1;font-weight:800;font-size:4.2cqw;letter-spacing:.02em;opacity:.9}
.reel-exit{position:fixed;top:14px;right:14px;z-index:10;opacity:.25;transition:opacity .3s}
.reel-exit:hover{opacity:1}

@media (max-width:760px){
  .d-made{display:none}
  .d-top{flex-wrap:wrap;gap:8px}
  .d-brand{flex-basis:100%}
  .d-sp{display:none}
  .d-viewport{width:100%}
  .d-stage{padding:6px 10px}
  .d-bar{display:none}
  .lbl-m{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* eksik görsel yer tutucusu */
.im.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 1cqw,rgba(0,0,0,.08) 1cqw 2cqw);color:rgba(0,0,0,.55);font:600 1.1cqw/1.4 Manrope,Arial,sans-serif;padding:1cqw;min-height:12cqw}
.im.ph::before{content:"Görsel bekleniyor\A" attr(data-f);white-space:pre}