/* Public calendar layout; admin styles remain independent. */
.calendar-shell{width:min(1064px,calc(100% - 80px));padding:32px 0 0}
.hero{display:flex;align-items:center;gap:32px;margin-bottom:25px}
.hero>div{min-width:0}
.hero h1{font-size:clamp(2.75rem,4.3vw,3.65rem);line-height:1.08;letter-spacing:.005em;margin:0 0 8px;white-space:normal;text-wrap:balance}
.hero-note{font-size:.875rem;line-height:1.6;color:#c0b7a6}
.today-preview{flex:0 0 264px;min-height:78px;padding:12px 15px;gap:13px;background:rgba(16,17,16,.94);box-shadow:none}
.today-preview>span:nth-child(2){flex:1;min-width:0}
.today-preview strong{font-size:.875rem;line-height:1.4;overflow-wrap:anywhere}
.today-preview small{font-size:.75rem;letter-spacing:.12em}
.today-preview #today-time{font-size:.75rem}
.today-number{font-size:1.75rem;min-width:42px;height:48px}
.calendar-panel{padding:20px 22px 0;background:rgba(7,9,10,.86);border:1px solid rgba(232,180,83,.22);border-radius:16px;box-shadow:0 18px 65px #0004}
.calendar-toolbar{padding-bottom:16px;min-height:58px}
.month-title{gap:10px}
.month-title h2,.month-title>span{font-family:Manrope,system-ui,sans-serif;font-size:1.4rem;line-height:1.3;font-weight:700}
.month-controls{gap:14px}
.month-controls .text-button{font-size:.875rem;color:#c0b7a6}
.icon-button{width:38px;min-height:38px}
.weekdays{gap:9px;padding:15px 0 12px;font-size:.75rem;letter-spacing:.08em;color:#b5ad9f}
.calendar-grid{gap:9px;grid-auto-rows:clamp(104px,12vh,122px)}
.day-cell{aspect-ratio:auto;height:100%;border-radius:8px;padding:10px}
.day-cell>img.day-art{object-fit:contain;padding:2px;opacity:.98}
.day-cell.has-day-art .day-number{display:none}
.day-cell.has-day-art.has-event .cell-details{
 left:0;right:0;bottom:0;padding:26px 8px 7px;gap:0;
 background:linear-gradient(transparent,rgba(3,5,8,.94));
}
.day-cell.has-day-art.has-event .cell-title{
 display:block;color:#fff;font-size:.75rem;line-height:1.25;
 white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 4px #000;
}
.day-cell.has-day-art.has-event .cell-time{display:none}
body:not(.admin-body) .day-cell{background:linear-gradient(145deg,#191a16,#111313);border-color:#e8b45329}
body:not(.admin-body) .day-cell:hover{border-color:#eab44d99;transform:translateY(-1px)}
body:not(.admin-body) .day-cell.outside{background:#ffffff02;border:1px dashed #e8b45316;opacity:.45}
.day-number{top:8px;left:10px;font-size:.875rem;line-height:1.35}
.has-event .day-number{top:7px;left:7px;font-size:.8rem}
.cell-details{left:9px;right:9px;bottom:8px;gap:2px}
.cell-title{font-size:.875rem;line-height:1.35;-webkit-line-clamp:2;overflow-wrap:normal;word-break:normal}
.cell-time{font-size:.75rem;line-height:1.3}
.more-events{font-size:.75rem;line-height:1.3}
.is-today:not(.has-event):after{font-size:.65rem;left:10px;bottom:9px;letter-spacing:.07em}
.calendar-bottom{padding:15px 0 17px;font-size:.75rem;gap:12px}
.site-footer{justify-content:center;border:0;padding:17px 0 22px}
.site-footer .brand{font-size:1rem;opacity:.8}

/* Takvim yüklenirken ve etkinlik detayı açılırken sinematik girişler. */
.calendar-grid{perspective:900px}
.calendar-grid .day-cell{
 transform-origin:50% 100%;
 animation:calendar-card-in .7s cubic-bezier(.16,1,.3,1) both;
 animation-delay:calc(var(--cell-index,0) * 14ms);
}
.calendar-grid .day-cell>img{animation:calendar-image-in 1s cubic-bezier(.16,1,.3,1) both}
.calendar-grid .day-cell .cell-details{animation:calendar-copy-in .55s .2s cubic-bezier(.16,1,.3,1) both}
.event-dialog[open]{
 position:relative;
 overflow-x:hidden;
 overflow-y:auto;
 scrollbar-width:thin;
 scrollbar-color:rgba(234,180,77,.58) rgba(234,180,77,.07);
 transform-origin:50% 42%;
 animation:dialog-in .52s cubic-bezier(.16,1,.3,1) both;
}
.event-dialog[open]::-webkit-scrollbar{width:8px}
.event-dialog[open]::-webkit-scrollbar-track{background:rgba(234,180,77,.06);border-radius:999px}
.event-dialog[open]::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f2c66d,#b97825);border:2px solid #101110;border-radius:999px}
.event-dialog[open]::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffe09a,#d79535)}
.event-dialog[open]::after{
 content:'';
 position:absolute;
 inset:0 auto 0 -45%;
 z-index:8;
 width:28%;
 pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,232,172,.18),transparent);
 transform:skewX(-16deg);
 animation:dialog-shine .9s .12s cubic-bezier(.22,.7,.2,1) both;
}
.event-dialog{max-height:min(82dvh,760px)}
.event-dialog .event-detail>img{max-height:min(42dvh,380px)}
.event-dialog[open]::backdrop{animation:dialog-backdrop-in .45s ease-out both}
.event-dialog[open] .dialog-heading{animation:dialog-content-in .5s .12s cubic-bezier(.16,1,.3,1) both}
.event-dialog[open] .event-detail,.event-dialog[open] .day-empty{
 animation:dialog-content-in .6s cubic-bezier(.16,1,.3,1) both;
 animation-delay:calc(170ms + var(--event-index,0) * 90ms);
}
@keyframes calendar-card-in{
 0%{opacity:0;transform:translateY(28px) rotateX(-14deg) scale(.9);filter:blur(7px);border-color:rgba(234,180,77,0)}
 65%{opacity:1;border-color:rgba(234,180,77,.5)}
 100%{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0)}
}
@keyframes calendar-image-in{
 from{opacity:0;transform:scale(1.14)}
 to{opacity:1;transform:scale(1)}
}
@keyframes calendar-copy-in{
 from{opacity:0;transform:translateY(8px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes dialog-in{
 from{opacity:0;transform:translateY(38px) scale(.9);filter:blur(10px)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dialog-content-in{
 from{opacity:0;transform:translateY(20px) scale(.98)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes dialog-shine{from{left:-45%;opacity:0}35%{opacity:1}to{left:125%;opacity:0}}
@keyframes dialog-backdrop-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){
 .calendar-grid .day-cell,.event-dialog[open],.event-dialog[open]::backdrop,
 .calendar-grid .day-cell>img,.calendar-grid .day-cell .cell-details,
 .event-dialog[open]::after,.event-dialog[open] .dialog-heading,
 .event-dialog[open] .event-detail,.event-dialog[open] .day-empty{animation:none!important}
}
@media(min-width:761px) and (max-width:1000px){
 .calendar-shell{width:calc(100% - 48px)}
 .hero h1{font-size:2.8rem}.today-preview{flex-basis:240px}
 .calendar-panel{padding:18px 17px 0}.calendar-grid{grid-auto-rows:90px;gap:7px}
 .cell-title{font-size:.8rem}
}
@media(max-width:760px){
 .calendar-shell{width:calc(100% - 28px);padding-top:22px}
 .hero{display:block;margin-bottom:18px}
 .hero h1{font-size:clamp(2rem,9vw,3.2rem);line-height:1.1;margin-bottom:7px;white-space:nowrap}
 .hero-note{font-size:.8rem}
 .today-preview{width:100%;margin-top:16px;padding:10px 12px;min-height:66px;gap:11px}
 .today-preview>span:nth-child(2){display:flex;flex-direction:column;gap:1px}
 .today-preview strong{font-size:.8rem;line-height:1.4}
 .today-preview small{font-size:.625rem}
 .today-preview #today-time{font-size:.7rem}
 .today-number{min-width:36px;height:42px;font-size:1.5rem}
 .calendar-panel{padding:13px 8px 0;border-radius:11px;background:rgba(7,9,10,.79)}
 .calendar-toolbar{min-height:45px;padding:0 3px 12px;gap:8px}
 .month-title{gap:6px}.month-title h2,.month-title>span{font-size:1.05rem}
 .month-controls{gap:8px}.month-controls .text-button{font-size:.75rem}
 .arrow-group{gap:5px}.icon-button{width:32px;min-height:36px}
 .weekdays{gap:4px;padding:13px 0 10px;font-size:.625rem;letter-spacing:.025em}
 .calendar-grid{gap:4px;grid-auto-rows:clamp(56px,15.5vw,78px)}
 .day-cell{padding:5px;border-radius:5px}
 .day-cell.has-day-art .day-number,
 .day-cell.has-day-art .cell-details,
 .day-cell.has-day-art .more-events{display:none}
 .day-cell.has-day-art.has-event:after{background:none}
 .day-cell>img.day-art{padding:1px}
 .day-number{font-size:.75rem;top:5px;left:5px}
 .has-event .day-number{top:4px;left:4px;font-size:.7rem;padding:0 3px}
 .cell-details{left:3px;right:3px;bottom:5px}
 .cell-title{font-size:.625rem;display:block;white-space:nowrap;text-overflow:ellipsis;line-height:1.4}
 .cell-time{display:none}
 .more-events{top:5px;right:3px;font-size:.55rem;padding:0 2px}
 .has-event:has(.more-events) .day-number{left:3px;padding:0 2px}
 .is-today:not(.has-event):after{left:4px;bottom:6px;font-size:.45rem;letter-spacing:0}
 .outside{font-size:.65rem}
 .calendar-bottom{font-size:.625rem;padding:13px 3px;gap:6px;flex-wrap:wrap}
 .calendar-bottom p{gap:4px}.legend-divider{margin:0 2px}
 .site-footer{padding:13px 0 18px}
 .event-dialog{max-height:88dvh}
 .event-dialog .event-detail>img{max-height:38dvh}
}