/* serkantan.org — ortak stiller (tüm ay sayfaları) */
    :root{color-scheme:light;--paper:#ede9e0;--ink:#292c27;--muted:#696b61;--copper:#965332;--line:#cbc7bb;font-family:Manrope,Arial,sans-serif;background:var(--paper);color:var(--ink)}
    *{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--copper);outline-offset:7px}::selection{background:#c6916d;color:#fff}
    .page{min-height:100svh;max-width:1800px;margin:auto;padding:36px 5.2vw 25px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}
    .paper-grain{position:fixed;inset:0;width:100%;height:100%;opacity:.14;pointer-events:none;z-index:5;mix-blend-mode:multiply}
    header,footer{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
    .signature{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:-.4px}.edition{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.edition:before{content:"";width:5px;height:5px;background:var(--copper);border-radius:50%}
    main{flex:1;min-height:min(610px,calc(100svh - 140px));position:relative;display:flex;align-items:center;padding:70px 0 80px}
    .copy{position:relative;z-index:2;width:55%;padding-left:5vw;pointer-events:none}.copy .listen{pointer-events:auto}
    .eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:500;text-transform:uppercase;margin:0 0 29px;color:var(--muted)}.eyebrow span{color:var(--copper);margin-right:14px}
    h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(90px,11.6vw,178px);line-height:.77;font-weight:400;letter-spacing:-.065em;margin:0 0 29px}h1 span{display:block}h1 .moon-word{font-style:italic;margin-left:9.5vw;margin-top:9px;font-weight:400}
    .artist{font-size:13px;letter-spacing:4px;margin:0 0 32px 3px}
    .listen{text-decoration:none;border:0;background:none;display:inline-flex;align-items:center;gap:15px;padding:0 4px;cursor:pointer;color:var(--ink);font-size:12px;letter-spacing:.3px}.play-icon{width:43px;height:43px;border:1px solid #9b9b8c;border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s}.play-icon svg{width:12px;margin-left:2px;fill:currentColor}.listen:hover .play-icon{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:scale(1.07)}
    .play-icon .i-pause{display:none;margin-left:0}.listen.playing .i-play{display:none}.listen.playing .i-pause{display:block}
    .player{pointer-events:auto;width:356px;max-width:100%;aspect-ratio:16/9;margin:22px 0 0 4px;border-radius:6px;overflow:hidden;background:#d8d2c5;box-shadow:0 0 0 1px var(--line)}
    .player iframe{width:100%;height:100%;border:0;display:block}
    .player:not([hidden]){animation:appear .6s both}
    .alt-links{pointer-events:auto;display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0 4px;font-size:11px}.alt-links a{color:var(--muted);text-decoration:none}.alt-links a:hover{color:var(--copper)}
    .artwork{position:absolute;width:min(50vw,720px);height:auto;aspect-ratio:1;right:-1vw;top:50%;transform:translateY(-49%);pointer-events:none}.moon-art{width:100%;height:100%;overflow:visible}.orbit{stroke:#b0a38e;stroke-width:.6;fill:none;opacity:.5}.caption{position:absolute;bottom:0;right:6%;font-size:9px;letter-spacing:2px;color:var(--muted);writing-mode:vertical-rl;transform:translateY(-25px)}
    footer{border-top:1px solid var(--line);padding-top:19px;color:var(--muted);font-size:11px;letter-spacing:.4px}footer p{margin:0}.footer-left{display:flex;align-items:center;gap:11px}.tiny-moon{height:10px;width:10px;border-radius:50%;box-shadow:inset 3px -1px 0 var(--copper);transform:rotate(-25deg)}.credit{font-size:10px;letter-spacing:.2px}.credit i{font-family:Georgia,serif}
    .footer-left{align-items:flex-start}.tiny-moon{flex:none;margin-top:3px}.posted{display:block;margin-top:5px;font-size:10px;letter-spacing:.2px;opacity:.8}

    .poem{width:min(100%,660px);margin:0 auto;padding:38px 0 76px;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(22px,2.2vw,29px);font-weight:400;line-height:1.55;color:var(--ink)}
    .poem::before{content:"";display:block;width:32px;height:1px;margin-bottom:29px;background:var(--copper)}
    .poem p{margin:0}.poem .last-line{margin-top:19px;font-style:italic;color:var(--copper)}

    /* Şarkı ve sanatçı hakkında */
    .about{width:min(100%,920px);margin:0 auto;padding:0 0 84px;display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;position:relative;z-index:2}
    .about h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;font-size:30px;line-height:1.1;margin:0 0 14px;color:var(--copper)}
    .about p{font-size:15px;line-height:1.75;margin:0 0 12px;max-width:34em}
    .about .meta{font-size:12px;color:var(--muted);letter-spacing:.2px}
    .about a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}.about a:hover{text-decoration-color:var(--copper)}

    /* Yorumlar */
    /* Comments button: a small ball tucked into the right edge, slides out on hover. */
    .comments-fab{--peek:40%;position:fixed;right:0;top:62%;z-index:6;width:54px;height:54px;padding:0 0 0 15px;border:1px solid var(--line);border-radius:50%;background:rgba(237,233,224,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--copper);display:flex;align-items:center;cursor:pointer;box-shadow:0 8px 22px -14px rgba(41,44,39,.55);transform:translateX(var(--peek));transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s}
    .comments-fab svg{width:17px;height:17px;flex:none}
    .comments-fab:hover,.comments-fab:focus-visible{transform:translateX(10%);border-color:#c79a7c;background:var(--paper)}
    .comments-fab:focus-visible{outline-offset:3px}
    .fab-count{position:absolute;top:-2px;left:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--copper);color:var(--paper);font-size:9px;font-weight:600;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
    .fab-count:empty{display:none}
    @media(prefers-reduced-motion:no-preference){.comments-fab{animation:fab-in .9s 1.4s backwards}@keyframes fab-in{from{opacity:0;transform:translateX(100%)}}}

    .comments-dialog{width:min(580px,calc(100% - 32px));max-width:none;max-height:min(86svh,860px);padding:0;border:0;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 40px 90px -30px rgba(41,44,39,.55);overflow:hidden}
    .comments-dialog[open]{display:flex;flex-direction:column}
    .comments-dialog::backdrop{background:rgba(41,44,39,.36);backdrop-filter:blur(3px)}
    .dialog-head{display:flex;align-items:center;gap:16px;padding:24px 22px 18px 32px;border-bottom:1px solid var(--line)}
    .dialog-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;font-size:31px;line-height:1.1;margin:0;color:var(--copper)}
    .comments-count{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-right:auto;padding-top:5px}
    .close-dialog{width:38px;height:38px;flex:none;border:1px solid transparent;border-radius:50%;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s}
    .close-dialog svg{width:13px;height:13px}.close-dialog:hover{border-color:var(--line);color:var(--ink)}
    .dialog-body{overflow-y:auto;overscroll-behavior:contain;padding:22px 32px 34px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
    .comments-intro{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.5;color:var(--muted);margin:0 0 24px}
    .sheet-handle{display:none}
    @media(prefers-reduced-motion:no-preference){.comments-dialog[open]{animation:dialog-in .38s cubic-bezier(.2,.8,.2,1)}.comments-dialog[open]::backdrop{animation:appear .3s both}@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}}}
    html:has(.comments-dialog[open]){overflow:hidden}
    .comment-form{display:grid;gap:22px;margin-bottom:50px}
    .field{display:grid;gap:7px}
    .field label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
    .field input,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #b9b4a6;border-radius:0;padding:6px 0 9px;outline:none;transition:border-color .25s}
    .field input{font-size:15px;max-width:320px}
    .field textarea{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.45;resize:none;min-height:92px;field-sizing:content}
    .field input::placeholder,.field textarea::placeholder{color:#a3a194;opacity:1}
    .field input:focus,.field textarea:focus{border-bottom-color:var(--copper)}
    .field-meta{display:flex;justify-content:flex-end;font-size:10px;color:var(--muted);letter-spacing:.3px;font-variant-numeric:tabular-nums}.field-meta.near{color:var(--copper)}
    .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
    .form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .form-note{margin:0;font-size:11px;line-height:1.6;color:var(--muted);max-width:30em}
    .send{display:inline-flex;align-items:center;gap:14px;border:0;background:none;padding:0 4px;cursor:pointer;color:var(--ink);font-size:12px;letter-spacing:.3px}
    .send .play-icon svg{width:13px;margin-left:0}.send:hover .play-icon{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:scale(1.07)}
    .send:disabled{cursor:default;opacity:.45}.send:disabled .play-icon{transform:none;background:none;border-color:#9b9b8c;color:var(--ink)}
    .form-status{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;color:var(--copper)}
    .form-status:empty{display:none}
    .comment-list{list-style:none;margin:0;padding:0}
    .comment{padding:24px 0 26px;border-top:1px solid var(--line)}
    .comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12px}
    .comment-meta:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--copper);flex:none}
    .comment-name{font-weight:600;letter-spacing:-.2px}
    .comment-date{color:var(--muted);font-size:11px}
    .comment-body{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
    .comments-empty{margin:0;padding:26px 0;border-top:1px solid var(--line);font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--muted)}

    @media(max-width:760px){
      .comments-fab{--peek:46%;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));width:48px;height:48px;padding-left:12px}
      .comments-fab svg{width:16px;height:16px}
      .comments-dialog{width:100%;max-height:92svh;margin:auto 0 0;border-radius:18px 18px 0 0}
      .sheet-handle{display:block;width:38px;height:4px;border-radius:4px;background:var(--line);margin:10px auto 0}
      .dialog-head{padding:14px 14px 14px 7vw}.dialog-head h2{font-size:28px}
      .dialog-body{padding:20px 7vw calc(30px + env(safe-area-inset-bottom))}
      .comments-intro{font-size:19px;margin-bottom:20px}.field textarea{font-size:20px}.comment-body{font-size:19px}
      .form-foot{flex-direction:column-reverse;align-items:flex-start;gap:18px}
    }
    @media(max-width:760px) and (prefers-reduced-motion:no-preference){.comments-dialog[open]{animation:sheet-in .42s cubic-bezier(.2,.8,.2,1)}@keyframes sheet-in{from{transform:translateY(100%)}}}
    @media(max-width:760px){.poem{padding:4px 0 54px;font-size:min(22px,4.9vw);line-height:1.6}.poem .last-line{text-wrap:balance}.poem::before{margin-bottom:25px}.poem .last-line{margin-top:20px}.about{grid-template-columns:1fr;gap:36px;padding-bottom:60px}.about h2{font-size:27px}}
    @media(min-width:1600px){.copy{padding-left:80px}}
    @media(max-width:760px){.page{padding:25px 7vw 20px}header{gap:10px}.signature{font-size:12px}.edition{font-size:9px;letter-spacing:1.4px;gap:8px}main{min-height:700px;padding:64px 0 45px;align-items:flex-start}.copy{width:100%;padding-left:0}.player{width:100%}.eyebrow{font-size:9px;margin-bottom:29px}h1{font-size:clamp(88px,20vw,150px);position:relative;z-index:2}h1 .moon-word{margin-left:14vw}.artist{margin-top:22px;margin-bottom:260px;font-size:12px}.artwork{width:83vw;right:-12vw;top:177px;transform:none;z-index:1}.caption{display:none}.listen{font-size:12px}footer{font-size:10px;align-items:flex-start;gap:18px;padding-top:18px}.credit{max-width:150px;text-align:right;line-height:1.6;font-size:9px}}
    @media(max-width:380px){main{min-height:655px}.artist{margin-bottom:220px}.edition{letter-spacing:1px}}
    @media(prefers-reduced-motion:no-preference){.copy,header,footer{animation:appear 1.2s both}.artwork{animation:moonrise 1.7s both}footer{animation-delay:.15s}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes moonrise{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}}
      @keyframes appear{from{opacity:0}to{opacity:1}}
      /* Mobilde şarkı ve şiir aynı kompozisyonda. */
    @media(max-width:760px){
      main{min-height:0;flex:0 0 auto;padding:38px 0 32px}
      .eyebrow{margin-bottom:23px}
      h1{font-size:clamp(72px,19vw,112px);margin-bottom:20px}
      h1 .moon-word{margin-left:8vw;margin-top:6px}
      .artist{margin-top:17px;margin-bottom:23px}
      .artwork{width:clamp(190px,57vw,320px);right:-10vw;top:87px;opacity:.85}
      .alt-links{margin-top:16px;gap:8px 18px}
      .poem{padding:14px 0 58px;font-size:min(27px,5.1vw);line-height:1.5}
      .poem::before{width:42px;margin-bottom:23px}
      .poem .last-line{margin-top:23px;text-wrap:pretty}
    }
  

/* Arşiv rafı (en az 2 ay olunca görünür) */
.shelf{position:relative;z-index:2;width:min(100%,1100px);margin:0 auto;padding:0 0 70px}
.shelf[hidden]{display:none}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.shelf-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;font-size:30px;line-height:1.1;margin:0;color:var(--copper)}
.shelf-nav{display:flex;gap:8px}
.shelf-nav button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,opacity .2s}
.shelf-nav button:hover:not(:disabled){border-color:var(--copper)}
.shelf-nav button:disabled{opacity:.3;cursor:default}
.shelf-nav svg{width:12px;height:12px}
.shelf-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.shelf-card{flex:0 0 clamp(150px,22vw,200px);scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.18);transition:border-color .25s,transform .25s}
.shelf-card:hover{border-color:#c79a7c;transform:translateY(-2px)}
.shelf-card[aria-current="page"]{border-color:var(--copper)}
.shelf-moon{width:72%;margin:0 auto 10px;display:block}
.shelf-orbit{fill:none;stroke:#b0a38e;stroke-width:.6;opacity:.6}
.shelf-month{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.shelf-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;line-height:1.1}
.shelf-artist{font-size:12px;letter-spacing:2px;color:var(--muted)}
@media(max-width:760px){.shelf{padding-bottom:54px}.shelf-nav{display:none}.shelf-card{flex-basis:44vw}.shelf-head h2{font-size:27px}}