/* ========================================================================== RSVP — tasarim sistemi Mobil oncelikli. Taban 375 px; genisleyen ekranlarda ayni bilesenler. Iki yuz vardir: .rsvp--davet misafirin gordugu davet (sicak, secilebilir stil) .rsvp--panel sahibin urun paneli (notr, sakin, gunluk kullanim) Erisilebilirlik hedefleri: 44 px dokunma, gorunur odak halkasi, metin/zemin karsitligi en az 4.5:1. ========================================================================== */ /* == YAZI TIPLERI — tools/fetch-fonts.py uretir, elle degistirme == */ /* Kendi sunucumuzdan; ucuncu taraf istegi yok. Lisanslar yanindaki OFL-*.txt dosyalarinda. Alt kume: yalnizca latin + latin-ext — Turkce ikisini birden gerektirir. */ @font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/cormorant-garamond-600-latin.woff2?v=53205cf81200") format("woff2"); 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:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/cormorant-garamond-600-latin-ext.woff2?v=d79559afd66f") format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400-latin.woff2?v=48a0c2503a9c") format("woff2"); 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:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400-latin-ext.woff2?v=3c05d9f2f8b5") format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600-latin.woff2?v=9a3d22c43636") format("woff2"); 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:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600-latin-ext.woff2?v=e35ba50effff") format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700-latin.woff2?v=ea90630996b1") format("woff2"); 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:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700-latin-ext.woff2?v=b0f3643451c1") format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Nunito"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/nunito-600-latin.woff2?v=42e1ff5021da") format("woff2"); 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:"Nunito"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/nunito-600-latin-ext.woff2?v=3c2f6e475229") format("woff2"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* == YAZI TIPLERI SONU == */ /* Olcu esli yedek — duzen kaymasini (CLS) onler. Cormorant Garamond, Georgia'dan belirgin dar: ayni baslik Georgia ile bes, Cormorant ile dort satira siginiyordu. Swap aninda baslik bir satir kisaliyor ve altindaki her sey ~41 px zipliyordu. Deger olcerek secildi: onemli olan harf genisligi degil **satir sayisi**. Gercek basliklarla (11 metin x 5 boyut x 4 genislik = 220 durum) %80-100 araligi tarandi. Duzeltmesiz 15 durumda kayma / toplam 524 px; %88'de 1 durum / 23 px ile en dusuk. Komsu degerler (%87: 4, %89: 2) de daha kotu oldugu icin bu bir olcum gurultusu degil, gercek en iyi nokta. Nunito ve Inter'de olculen fark 0 px oldugu icin onlara yedek yuz gerekmez. Not: Georgia/Times bulunmayan sistemlerde (cogu Android) bu yuz yuklenmez ve yigindaki genel serif devreye girer; orada kucuk bir kayma kalabilir. */ @font-face{ font-family:"Cormorant Yedek"; src:local("Georgia"),local("Times New Roman"),local("Times"); size-adjust:88%; font-weight:600; font-style:normal; } /* --- 1. Jetonlar --------------------------------------------------------- */ :root { /* Notr olcek — Figma: Cekirdek / renk/murekkep */ --ink-900:#1C1917; --ink-800:#292524; --ink-700:#44403C; --ink-500:#78716C; --ink-400:#A8A29E; --ink-300:#D6D3D1; --ink-200:#E7E5E4; --ink-100:#F5F5F4; --ink-50:#FAFAF9; --ink-0:#FFFFFF; /* Figma'da yok: ikincil metnin renkli zeminlerde de 4.5:1 kalmasi icin eklendi. --ink-500 beyaz uzerinde 4.80:1, krem zeminde 4.50:1 ile tam sinirda kaliyor; yardim metinleri bu yuzden --ink-600 kullanir. */ --ink-600:#57534E; /* Durum renkleri — Figma: Cekirdek / renk/{olumlu,uyari,hata,bilgi} */ --olumlu:#15803D; --olumlu-yumusak:#DCFCE7; --olumlu-metin:#14532D; --uyari:#B45309; --uyari-yumusak:#FEF3C7; --uyari-metin:#713F12; --hata:#B91C1C; --hata-yumusak:#FEE2E2; --hata-metin:#7F1D1D; --bilgi:#1D4ED8; --bilgi-yumusak:#DBEAFE; --bilgi-metin:#1E3A8A; /* Davet stili / Zarif — Figma: Davet stili koleksiyonu, "Zarif" modu */ --zemin:#FBF7F2; --yuzey:#FFFFFF; --yuzey-2:#F7F2EC; --vurgu:#8C6A4A; --vurgu-yumusak:#EFE3D6; --vurgu-ustu:#FFFFFF; --cizgi:#E6DDD2; --cizgi-koyu:#D6C8B8; /* Figma'da yok: marka rengi metin ve dugme zemini olarak kullanildiginda 4.5:1'i tutturan koyu turev. Zarif icin marka rengi 4.91:1 ile zaten gecer; Neseli 3.89:1'de kalir, bu yuzden her stilde ayri tanimlanir. */ --vurgu-koyu:#6F5238; /* Yazi tipleri kendi sunucumuzdan gelir. Yuklenemezse yigindaki sistem yazi tipi devreye girer ve sayfa aynen calismaya devam eder. */ --sistem-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --baslik-font:"Cormorant Garamond","Cormorant Yedek",Georgia,"Times New Roman",serif; --govde-font:var(--sistem-font); /* Olcu — Figma: Cekirdek / aralik, yaricap, hedef */ --aralik-2xs:4px; --aralik-xs:8px; --aralik-sm:12px; --aralik-md:16px; --aralik-lg:24px; --aralik-xl:32px; --aralik-2xl:40px; --aralik-3xl:56px; --aralik-4xl:80px; --yaricap-sm:8px; --yaricap-md:14px; --yaricap-lg:20px; --yaricap-xl:28px; --yaricap-tam:999px; --hedef-dokunma:44px; /* Kapak perdesi. Beyaz metnin en kotu durumda (bembeyaz fotograf) bile 4.5:1 tutturmasi icin alfa asgari 0.54 olmali; 0.62 secildi. Ton stile gore degisir, taban degismez. Bkz. tools/check-contrast.py */ --kapak-perde:34 24 16; --kapak-perde-alfa:.62; --golge-1:0 1px 2px rgba(28,25,23,.06); --golge-2:0 6px 24px rgba(28,25,23,.08); --golge-3:0 -2px 16px rgba(28,25,23,.08); --kolon:600px; } /* Davet stilleri: yalnizca renk ve baslik yazi tipi degisir. */ [data-stil="joyful"]{ --zemin:#FFF8F3; --yuzey:#FFFFFF; --yuzey-2:#FFF1E9; --vurgu:#C24A2E; --vurgu-yumusak:#FFE3DB; --cizgi:#FBD9CE; --cizgi-koyu:#F0BCA8; /* Marka rengi beyaz uzerinde 3.89:1; metin ve dugme icin koyu turev. */ --vurgu-koyu:#9A3B22; --kapak-perde:46 18 12; --baslik-font:"Nunito",var(--sistem-font); } [data-stil="plain"]{ --zemin:#FFFFFF; --yuzey:#FFFFFF; --yuzey-2:#F8FAFC; --vurgu:#1F2937; --vurgu-koyu:#111827; --vurgu-yumusak:#EEF1F4; --cizgi:#E2E8F0; --cizgi-koyu:#CBD5E1; --kapak-perde:15 23 35; --govde-font:"Inter",var(--sistem-font); --baslik-font:var(--govde-font); } /* Gece: DJ, konser, gece partisi, kulup ve VIP etkinlik. Koyu zeminde her bileseni yeniden yazmak yerine notr olcek ters cevrilir. Butun bilesenler zaten --ink-* jetonlarini kullaniyor; olcegi cevirmek dugmeyi, karti, formu ve rozeti tek satir degistirmeden koyu zemine tasir. Neon kontrollu: vurgu rengi dugme zemini olarak kullanilir ve uzerine koyu metin gelir. Surekli animasyon ya da okunabilirligi bozan efekt yok. */ [data-stil="night"]{ --ink-900:#F5F7FA; --ink-800:#E8ECF2; --ink-700:#D2D8E2; --ink-600:#A8B0C0; --ink-500:#98A1B2; --ink-400:#6B7382; --ink-300:#3A4152; --ink-200:#242A36; --ink-100:#1A1F29; --ink-50:#141821; --ink-0:#0B0D12; --zemin:#0B0D12; --yuzey:#14171F; --yuzey-2:#171B24; --vurgu:#C77DFF; --vurgu-yumusak:#241B33; /* Koyu zeminde okunabilir turev daha ACIK olandir; jetonun adi duruyor, gorevi degismedi: 4.5:1 tutturan vurgu. */ --vurgu-koyu:#D9A6FF; --vurgu-ustu:#0B0D12; --cizgi:#2A2F3C; --cizgi-koyu:#3A4152; --kapak-perde:8 10 18; --govde-font:"Inter",var(--sistem-font); --baslik-font:var(--govde-font); } [data-stil="night"] h1,[data-stil="night"] h2,[data-stil="night"] h3{ font-weight:700;letter-spacing:-.02em} /* Panel her zaman notr kalir: urun paneli davet gibi gorunmemeli. */ body.rsvp--panel{ --zemin:#F6F5F4; --yuzey:#FFFFFF; --yuzey-2:#FAFAF9; --vurgu:#1F2937; --vurgu-koyu:#111827; --vurgu-yumusak:#EEF1F4; --cizgi:#E4E4E7; --cizgi-koyu:#D4D4D8; --govde-font:"Inter",var(--sistem-font); --baslik-font:var(--govde-font); } /* --- 2. Taban ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} body.rsvp{ margin:0; background:var(--zemin); color:var(--ink-900); font:400 17px/1.6 var(--govde-font); -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } h1,h2,h3,h4{font-family:var(--baslik-font);font-weight:600;line-height:1.2;margin:0; letter-spacing:-.01em} h1{font-size:clamp(28px,7vw,34px)} h2{font-size:clamp(21px,5vw,25px)} h3{font-size:19px} h4{font-size:16px;font-family:var(--govde-font);font-weight:600} p{margin:0 0 var(--aralik-sm)} p:last-child{margin-bottom:0} a{color:var(--vurgu-koyu)} a:hover{color:var(--vurgu)} small{font-size:13px} img{max-width:100%} :focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:2px;border-radius:4px} body.rsvp--panel :focus-visible{outline-color:#1D4ED8} /* Klavye kullanicisi icerige atlayabilsin. */ .rsvp-atla{position:absolute;left:-9999px;top:0;z-index:50; background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:0 0 var(--yaricap-md) 0; text-decoration:none;font-weight:600} .rsvp-atla:focus{left:0;color:#fff} .rsvp-baglanti-satiri{text-align:center;font-size:15px;margin:0} .rsvp-baglanti-satiri a{display:inline-block;min-height:var(--hedef-dokunma); line-height:var(--hedef-dokunma);padding:0 var(--aralik-xs)} .rsvp-dipnot a{display:inline-block;min-height:var(--hedef-dokunma); line-height:var(--hedef-dokunma);padding:0 var(--aralik-xs)} .rsvp-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* --- 3. Duzen ------------------------------------------------------------ */ .rsvp-wrap{width:100%;max-width:var(--kolon);margin:0 auto;padding:0 var(--aralik-md) var(--aralik-3xl)} .rsvp-wrap--dar{max-width:440px} .rsvp-wrap--genis{max-width:960px} @media (min-width:600px){.rsvp-wrap{padding-left:var(--aralik-lg);padding-right:var(--aralik-lg)}} .rsvp-bosluk{height:var(--aralik-lg)} .rsvp-bosluk--kucuk{height:var(--aralik-sm)} .rsvp-bosluk--buyuk{height:var(--aralik-xl)} .rsvp-satir{display:flex;gap:var(--aralik-sm)} .rsvp-satir>*{flex:1;min-width:0} .rsvp-arasi{display:flex;align-items:center;justify-content:space-between;gap:var(--aralik-sm)} /* Yapisci basligi: bolumleri birbirinden ayirir. */ .rsvp-bolum-basi{display:flex;align-items:baseline;justify-content:space-between; gap:var(--aralik-sm);margin:var(--aralik-lg) 0 var(--aralik-sm)} .rsvp-bolum-basi h2,.rsvp-bolum-basi h3{margin:0} .rsvp-bolum-basi a{font-size:14px;white-space:nowrap} /* --- 4. Ust serit ve sekmeler -------------------------------------------- */ .rsvp-bar{position:sticky;top:0;z-index:20;background:var(--yuzey); border-bottom:1px solid var(--cizgi)} .rsvp-bar__inner{max-width:var(--kolon);margin:0 auto;padding:var(--aralik-xs) var(--aralik-md); display:flex;align-items:center;gap:var(--aralik-xs);min-height:56px} @media (min-width:600px){.rsvp-bar__inner{padding-left:var(--aralik-lg);padding-right:var(--aralik-lg)}} .rsvp-bar__title{flex:1;font-size:17px;font-weight:600;font-family:var(--govde-font); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rsvp-bar__back,.rsvp-bar__exit{display:inline-flex;align-items:center; min-height:var(--hedef-dokunma);padding:0 var(--aralik-xs);font-size:14px;color:var(--ink-600); text-decoration:none;border-radius:var(--yaricap-sm);white-space:nowrap} .rsvp-bar__back:hover,.rsvp-bar__exit:hover{color:var(--ink-900);background:var(--ink-100)} .rsvp-bar__back{margin-left:calc(var(--aralik-xs) * -1)} /* Kaydirilabilir sekme seridi: dar ekranda tasmaz, kirpilmaz, tek satir. Betiksiz ya da oksuz seritte sondaki solma daha fazla sekme oldugunu gosterir; dogal yatay kaydirma (parmak, trackpad, Shift+tekerlek) her zaman acik, cubuk yalnizca gorsel olarak gizli. */ .rsvp-sekme-sarmal{position:relative;margin:0 0 var(--aralik-lg);min-width:0} .rsvp-sekme-sarmal:not([data-hazir])::after{content:"";position:absolute;top:0;inset-inline-end:0;bottom:0;width:32px; pointer-events:none;background:linear-gradient(90deg,transparent,var(--zemin))} .rsvp-sekme-sarmal:not([data-hazir]):dir(rtl)::after{background:linear-gradient(270deg,transparent,var(--zemin))} .rsvp-sekme{display:flex;flex-wrap:nowrap;gap:var(--aralik-xs);margin:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; padding:6px 32px 6px 4px;padding-inline:4px 32px} .rsvp-sekme::-webkit-scrollbar{display:none} .rsvp-sekme a{flex:none;display:inline-flex;align-items:center;min-height:var(--hedef-dokunma);padding:0 var(--aralik-md); border-radius:var(--yaricap-tam);font-size:15px;text-decoration:none;white-space:nowrap; background:var(--yuzey);color:var(--ink-700);border:1px solid var(--cizgi)} .rsvp-sekme a:hover{border-color:var(--cizgi-koyu);color:var(--ink-900)} .rsvp-sekme a[aria-current]{background:var(--ink-900);color:#fff;border-color:var(--ink-900)} .rsvp-sekme a:focus-visible{outline-offset:1px} /* Yon dugmeli serit (etkinlik paneli): [ok][serit][ok]. Oklar seridin yaninda durur, sekmelerin uzerine binmez; yalnizca tasma varken gorunur, uctaki ok pasif (odaga girmez). Kenar gecisi yalnizca o yonde gizli sekme varken ve dar (metni okunmaz yapmaz). */ .rsvp-sekme-sarmal--kaydir{display:flex;align-items:center;gap:4px} .rsvp-sekme__alan{position:relative;flex:1 1 auto;min-width:0} .rsvp-sekme-sarmal[data-hazir] .rsvp-sekme{padding-inline:4px} .rsvp-sekme__alan::before,.rsvp-sekme__alan::after{content:"";position:absolute;top:0;bottom:0;width:24px; pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:1} .rsvp-sekme__alan::before{inset-inline-start:0;background:linear-gradient(90deg,var(--zemin),transparent)} .rsvp-sekme__alan::after{inset-inline-end:0;background:linear-gradient(270deg,var(--zemin),transparent)} .rsvp-sekme-sarmal[data-rtl] .rsvp-sekme__alan::before{background:linear-gradient(270deg,var(--zemin),transparent)} .rsvp-sekme-sarmal[data-rtl] .rsvp-sekme__alan::after{background:linear-gradient(90deg,var(--zemin),transparent)} .rsvp-sekme-sarmal[data-bas] .rsvp-sekme__alan::before, .rsvp-sekme-sarmal[data-son] .rsvp-sekme__alan::after{opacity:1} .rsvp-sekme__ok{flex:none;display:inline-flex;align-items:center;justify-content:center; width:var(--hedef-dokunma);height:var(--hedef-dokunma);min-width:44px;min-height:44px;padding:0;margin:0; border:1px solid var(--cizgi);border-radius:var(--yaricap-tam);background:var(--yuzey);color:var(--ink-700);cursor:pointer} .rsvp-sekme__ok[hidden]{display:none} .rsvp-sekme__ok:hover:not(:disabled){border-color:var(--cizgi-koyu);color:var(--ink-900)} .rsvp-sekme__ok:disabled{opacity:.35;cursor:default} .rsvp-sekme-sarmal[data-rtl] .rsvp-sekme__ok svg{transform:scaleX(-1)} @media (prefers-reduced-motion:reduce){.rsvp-sekme__alan::before,.rsvp-sekme__alan::after{transition:none}} .rsvp-sekme--kucuk a{padding:0 var(--aralik-sm);font-size:14px} .rsvp-sekme__sayi{margin-left:6px;font-size:12px;font-weight:700;opacity:.7} /* Toplu secim: davet satirinin basindaki kutu. Gercek kutu buyutulur, ayri bir gorsel ogeye gerek yok. */ .rsvp-sec{flex:none;display:inline-flex;align-items:center;justify-content:center; width:var(--hedef-dokunma);height:var(--hedef-dokunma);margin:-10px 0 0 -10px;cursor:pointer} .rsvp-sec input{width:20px;height:20px;accent-color:var(--vurgu-koyu)} .rsvp-sec:has(input:focus-visible){outline:3px solid var(--vurgu-koyu);outline-offset:2px;border-radius:var(--yaricap-md)} /* Satir ici katlanir bolum. */ .rsvp-katla{margin-top:var(--aralik-md);border-top:1px solid var(--cizgi);padding-top:var(--aralik-sm)} .rsvp-katla>summary{cursor:pointer;list-style:none;min-height:var(--hedef-dokunma); display:flex;align-items:center;font-size:15px;color:var(--vurgu-koyu)} .rsvp-katla>summary::-webkit-details-marker{display:none} .rsvp-katla>summary::after{content:"▾";margin-left:6px} .rsvp-katla[open]>summary::after{content:"▴"} .rsvp-katla>summary:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:2px;border-radius:var(--yaricap-md)} .rsvp-katla__ic{padding-top:var(--aralik-sm)} /* Toplu eylem cubugu. Sayfanin altinda kalir; JavaScript kapaliyken de gorunur ve calisir. */ .rsvp-toplu{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:var(--aralik-sm); align-items:center;justify-content:space-between; margin:var(--aralik-md) 0 0;padding:var(--aralik-md); background:var(--yuzey);border:1px solid var(--cizgi-koyu);border-radius:var(--yaricap-lg); box-shadow:0 -6px 20px rgb(28 25 23 / .06)} .rsvp-toplu__sayi{margin:0;font-size:15px;color:var(--ink-700)} /* Uzun e-posta adresi kartin disina tasmasin. */ .rsvp-davet-bilgi{overflow-wrap:anywhere} .rsvp-toplu .rsvp-btn{width:auto;margin:0} /* E-posta onizlemesi: gonderilecek metin oldugu gibi gorunur. */ .rsvp-onizleme-kutu{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.55; color:var(--ink-700);background:var(--yuzey-2);border:1px solid var(--cizgi); border-radius:var(--yaricap-md);padding:var(--aralik-md);max-height:340px;overflow:auto} /* --- 5. Yuzeyler --------------------------------------------------------- */ [hidden]{display:none!important} .rsvp-card{background:var(--yuzey);border:1px solid var(--cizgi); border-radius:var(--yaricap-lg);padding:var(--aralik-lg);margin:0 0 var(--aralik-md)} .rsvp-card--duz{border-radius:var(--yaricap-md);padding:var(--aralik-md)} .rsvp-card--sessiz{background:var(--yuzey-2);border-style:dashed} .rsvp-card>h2,.rsvp-card>h3{margin-bottom:var(--aralik-xs)} .rsvp-uzun-metin>p:first-child{margin-top:0} .rsvp-uzun-metin>p:last-child{margin-bottom:0} .rsvp-program{white-space:normal;line-height:1.75} .rsvp-ucret{display:flex;align-items:baseline;justify-content:space-between;gap:var(--aralik-sm); margin:0 0 var(--aralik-md);padding:var(--aralik-sm) 0;border-bottom:1px solid var(--cizgi)} .rsvp-ucret span{color:var(--ink-600);font-size:14px} .rsvp-ucret strong{font-size:clamp(22px,5vw,30px)} .rsvp-dahil-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--aralik-md);margin-top:var(--aralik-md)} .rsvp-dahil-grid h3{margin:0 0 var(--aralik-xs);font-size:16px} .rsvp-madde-listesi{list-style:none;margin:0;padding:0;display:grid;gap:8px} .rsvp-madde-listesi li{position:relative;padding-left:24px;line-height:1.45} .rsvp-madde-listesi li::before{position:absolute;left:0;top:0;font-weight:700} .rsvp-madde-listesi--dahil li::before{content:"✓";color:var(--olumlu-metin)} .rsvp-madde-listesi--haric li::before{content:"—";color:var(--ink-600)} @media (max-width:599px){.rsvp-dahil-grid{grid-template-columns:1fr}.rsvp-satir{flex-direction:column}} /* Davet bolumleri (0.7.1): ev sahibi, soz, geri sayim, saatli program, kiyafet kodu renkleri, kapanis. Mantiksal ozellikler: RTL'de yansir. */ .rsvp-ev-sahibi{margin:0 0 4px;font-family:var(--baslik-font);font-size:clamp(18px,4.5vw,24px);letter-spacing:.01em} .rsvp-soz{margin:0 0 var(--aralik-md);padding:var(--aralik-md) var(--aralik-lg);text-align:center} .rsvp-soz blockquote{margin:0;font-family:var(--baslik-font);font-style:italic;font-size:clamp(18px,4.2vw,22px);line-height:1.5;white-space:pre-line;color:var(--ink-700)} .rsvp-geri-sayim{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--aralik-xs);margin:0 0 var(--aralik-md); padding:var(--aralik-md);background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--yaricap-lg);text-align:center} .rsvp-geri-sayim[hidden]{display:none} .rsvp-geri-sayim b{display:block;font-size:clamp(22px,6vw,30px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums} .rsvp-geri-sayim small{display:block;font-size:13px;color:var(--ink-600)} .rsvp-cizelge{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative} .rsvp-cizelge li{display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:var(--aralik-sm);align-items:baseline; padding-inline-start:14px;border-inline-start:2px solid var(--cizgi)} .rsvp-cizelge__saat{font-weight:700;font-variant-numeric:tabular-nums;color:var(--vurgu-koyu)} .rsvp-cizelge__metin strong{display:block} .rsvp-cizelge__metin span{display:block;color:var(--ink-600);font-size:15px} .rsvp-cizelge li:not(:has(.rsvp-cizelge__saat)) .rsvp-cizelge__metin{grid-column:1 / -1} .rsvp-renkler{list-style:none;margin:var(--aralik-sm) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--aralik-sm)} .rsvp-renkler li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--ink-600)} .rsvp-renkler__daire{width:40px;height:40px;border-radius:50%;border:1px solid var(--cizgi-koyu);box-shadow:inset 0 0 0 3px var(--yuzey)} .rsvp-kapanis{margin:var(--aralik-lg) 0 0;text-align:center} .rsvp-kapanis p{margin:0;font-family:var(--baslik-font);font-size:clamp(18px,4.2vw,22px);white-space:pre-line} .rsvp-kapanis__imza{margin-top:6px !important;font-style:italic;color:var(--ink-700)} .rsvp-program-giris__satir{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--aralik-xs) var(--aralik-sm);margin:0 0 var(--aralik-sm); padding:var(--aralik-sm);border:1px solid var(--cizgi);border-radius:var(--yaricap-md)} .rsvp-program-giris__satir label{display:block;margin:0} .rsvp-program-giris__aciklama{grid-column:1 / -1} /* Menu baglantisi (Katilim bilgisi karti) ve etkinligi duzenleyen karti. */ .rsvp-menu-baglanti{margin-top:var(--aralik-md)} .rsvp-menu-baglanti h3{margin:0 0 var(--aralik-xs);font-size:16px} .rsvp-duzenleyen__ad{margin:0 0 var(--aralik-sm);font-weight:600;font-size:18px} .rsvp-duzenleyen__liste{margin:0;display:grid;gap:10px} .rsvp-duzenleyen__liste>div{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:var(--aralik-sm);align-items:baseline} .rsvp-duzenleyen__liste dt{color:var(--ink-600);font-size:14px} .rsvp-duzenleyen__liste dd{margin:0;white-space:pre-line;overflow-wrap:anywhere} .rsvp-duzenleyen__liste a{display:inline-flex;align-items:center;min-height:var(--hedef-dokunma);color:inherit;text-underline-offset:3px} .rsvp-card__alt{margin:var(--aralik-md) calc(var(--aralik-lg) * -1) calc(var(--aralik-lg) * -1); padding:var(--aralik-md) var(--aralik-lg);border-top:1px solid var(--cizgi); background:var(--yuzey-2);border-radius:0 0 var(--yaricap-lg) var(--yaricap-lg)} /* Gruplu ayar listesi (Ayarlar, alicilar). */ .rsvp-liste{list-style:none;margin:0 0 var(--aralik-md);padding:0;border:1px solid var(--cizgi); border-radius:var(--yaricap-lg);background:var(--yuzey);overflow:hidden} .rsvp-liste li{display:flex;align-items:center;gap:var(--aralik-sm); padding:var(--aralik-sm) var(--aralik-md);border-top:1px solid var(--cizgi);min-height:60px} .rsvp-liste li:first-child{border-top:0} .rsvp-liste .ad{flex:1;min-width:0} .rsvp-liste .ad strong{display:block;font-weight:600} .rsvp-liste .alt{display:block;font-size:13px;color:var(--ink-600); overflow:hidden;text-overflow:ellipsis} /* --- 6. Yazi ve metin -------------------------------------------------- */ .rsvp-ust-etiket{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--vurgu-koyu);margin:0 0 var(--aralik-xs)} .rsvp-sonuc{color:var(--ink-600);font-size:15px} .rsvp-yardim{font-size:13px;color:var(--ink-600);margin:var(--aralik-xs) 0 0} .rsvp-onemli{font-size:18px;line-height:1.5} /* --- 7. Formlar ---------------------------------------------------------- */ .rsvp-field{margin:0 0 var(--aralik-md)} .rsvp-field__label{display:block;font-size:15px;font-weight:600;color:var(--ink-800); margin:0 0 var(--aralik-2xs)} .rsvp-field__hint{font-size:13px;color:var(--ink-600);margin:var(--aralik-2xs) 0 0} .rsvp-field__hata{font-size:14px;color:var(--hata-metin);font-weight:500;margin:var(--aralik-2xs) 0 0; display:flex;gap:6px;align-items:flex-start} .rsvp-field__hata::before{content:"!";flex:none;display:inline-flex;align-items:center; justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--hata); color:#fff;font-size:12px;font-weight:700;line-height:1;margin-top:2px} .rsvp-input,.rsvp-select{width:100%;min-height:var(--hedef-dokunma);padding:11px 14px; font:inherit;font-size:16px;color:var(--ink-900);background:var(--ink-0); border:1px solid var(--ink-300);border-radius:12px;appearance:none} .rsvp-input::placeholder{color:var(--ink-400)} .rsvp-input:hover,.rsvp-select:hover{border-color:var(--ink-400)} .rsvp-input:focus-visible,.rsvp-select:focus-visible{border-color:var(--vurgu-koyu); outline:3px solid var(--vurgu-koyu);outline-offset:1px} .rsvp-input[aria-invalid="true"]{border-color:var(--hata);border-width:2px} textarea.rsvp-input{min-height:96px;resize:vertical;line-height:1.55} .rsvp-select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-600) 50%), linear-gradient(135deg,var(--ink-600) 50%,transparent 50%); background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} /* Secim karti: radyo/onay kutusu tum satir tiklanabilir. */ .rsvp-secenek{display:flex;gap:var(--aralik-sm);align-items:flex-start; padding:var(--aralik-sm) var(--aralik-md);margin:0 0 var(--aralik-xs);min-height:var(--hedef-dokunma); border:1px solid var(--cizgi);border-radius:var(--yaricap-md);background:var(--ink-0);cursor:pointer} .rsvp-secenek:hover{border-color:var(--cizgi-koyu)} .rsvp-secenek input{flex:none;margin:2px 0 0;width:22px;height:22px;accent-color:var(--vurgu)} .rsvp-secenek:has(input:focus-visible){outline:3px solid var(--vurgu-koyu);outline-offset:2px} .rsvp-secenek:has(input:checked){border-color:var(--vurgu);border-width:2px; background:var(--vurgu-yumusak);padding:calc(var(--aralik-sm) - 1px) calc(var(--aralik-md) - 1px)} .rsvp-secenek strong{display:block;font-weight:600} .rsvp-secenek small{display:block;color:var(--ink-600);line-height:1.45} /* Uc secenekli yanit denetimi (Apple Invites benzeri). */ .rsvp-segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--aralik-2xs); padding:var(--aralik-2xs);background:var(--ink-100);border-radius:var(--yaricap-md);margin:0 0 var(--aralik-xs)} .rsvp-segment label{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px;min-height:60px;padding:var(--aralik-xs) var(--aralik-2xs); border-radius:11px;cursor:pointer;text-align:center;font-size:15px;font-weight:600; color:var(--ink-600);background:transparent;border:2px solid transparent} .rsvp-segment input{position:absolute;opacity:0;width:1px;height:1px} .rsvp-segment label:hover{color:var(--ink-900)} .rsvp-segment label:has(input:focus-visible){outline:3px solid var(--vurgu-koyu);outline-offset:2px} .rsvp-segment label:has(input:checked){background:var(--ink-0);color:var(--vurgu-koyu); border-color:var(--vurgu);box-shadow:var(--golge-1)} .rsvp-segment__im{font-size:18px;line-height:1} /* Acik/kapali anahtari: satirin tamami etiket. */ .rsvp-anahtar{display:flex;align-items:center;gap:var(--aralik-md);padding:var(--aralik-sm) var(--aralik-md); min-height:60px;border-top:1px solid var(--cizgi);cursor:pointer} .rsvp-anahtar:first-child{border-top:0} .rsvp-anahtar__yazi{flex:1;min-width:0} .rsvp-anahtar__yazi strong{display:block;font-weight:600;font-size:16px} .rsvp-anahtar__yazi small{display:block;color:var(--ink-600);line-height:1.45} .rsvp-anahtar input{position:absolute;opacity:0;width:1px;height:1px} .rsvp-anahtar__kol{flex:none;width:50px;height:30px;border-radius:var(--yaricap-tam); background:var(--ink-300);position:relative;transition:background .15s} .rsvp-anahtar__kol::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px; border-radius:50%;background:#fff;box-shadow:var(--golge-1);transition:transform .15s} .rsvp-anahtar:has(input:checked) .rsvp-anahtar__kol{background:var(--olumlu)} .rsvp-anahtar:has(input:checked) .rsvp-anahtar__kol::after{transform:translateX(20px)} .rsvp-anahtar:has(input:focus-visible) .rsvp-anahtar__kol{outline:3px solid var(--vurgu-koyu); outline-offset:2px} /* --- 8. Dugmeler --------------------------------------------------------- */ .rsvp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--aralik-xs); width:100%;min-height:48px;padding:12px 22px;border-radius:var(--yaricap-md); border:1px solid transparent;font:600 17px/1.3 var(--govde-font); text-decoration:none;cursor:pointer;text-align:center} .rsvp-btn--birincil{background:var(--vurgu);color:var(--vurgu-ustu)} .rsvp-btn--birincil:hover{background:var(--vurgu-koyu);color:var(--vurgu-ustu)} .rsvp-btn--ikincil{background:var(--ink-0);color:var(--vurgu-koyu);border-color:var(--cizgi-koyu)} .rsvp-btn--ikincil:hover{background:var(--vurgu-yumusak);color:var(--vurgu-koyu)} .rsvp-btn--sessiz{background:transparent;color:var(--ink-700)} .rsvp-btn--sessiz:hover{background:var(--ink-100);color:var(--ink-900)} .rsvp-btn--tehlike{background:transparent;color:var(--hata-metin);border-color:var(--hata-yumusak)} .rsvp-btn--tehlike:hover{background:var(--hata-yumusak);color:var(--hata-metin)} .rsvp-btn[disabled],.rsvp-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed} .rsvp-btn+.rsvp-btn{margin-top:var(--aralik-xs)} .rsvp-btn--otomatik{width:auto} .rsvp-btn--kucuk{min-height:var(--hedef-dokunma);padding:8px 14px;font-size:15px;width:auto} /* Sayfa altinda sabit birincil eylem (mobilde bas parmak menzili). */ .rsvp-dip{position:sticky;bottom:0;z-index:15;margin:var(--aralik-lg) calc(var(--aralik-md) * -1) 0; padding:var(--aralik-sm) var(--aralik-md) calc(var(--aralik-sm) + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--zemin) 92%,transparent); backdrop-filter:blur(10px);border-top:1px solid var(--cizgi)} @media (min-width:600px){.rsvp-dip{margin-left:calc(var(--aralik-lg) * -1);margin-right:calc(var(--aralik-lg) * -1); padding-left:var(--aralik-lg);padding-right:var(--aralik-lg)}} .rsvp-dip .rsvp-btn{margin-top:0} .rsvp-dip__ikili{display:flex;gap:var(--aralik-xs)} .rsvp-dip__ikili .rsvp-btn{margin-top:0} .rsvp-dip__ikili .rsvp-btn:first-child{flex:0 0 33%} .rsvp-dip__ikili .rsvp-btn:last-child{flex:1} /* --- 9. Geri bildirim ---------------------------------------------------- */ .rsvp-notice{display:flex;gap:var(--aralik-sm);padding:var(--aralik-sm) var(--aralik-md);border-radius:var(--yaricap-md); margin:0 0 var(--aralik-md);font-size:15px;line-height:1.5;border:1px solid transparent} .rsvp-notice::before{flex:none;font-size:17px;line-height:1.4} .rsvp-notice--ok{background:var(--olumlu-yumusak);color:var(--olumlu-metin);border-color:#BBF7D0} .rsvp-notice--ok::before{content:"✓"} .rsvp-notice--hata{background:var(--hata-yumusak);color:var(--hata-metin);border-color:#FECACA} .rsvp-notice--hata::before{content:"!"} .rsvp-notice--uyari{background:var(--uyari-yumusak);color:var(--uyari-metin);border-color:#FDE68A} .rsvp-notice--uyari::before{content:"!"} .rsvp-notice--bilgi{background:var(--bilgi-yumusak);color:var(--bilgi-metin);border-color:#BFDBFE} .rsvp-notice--bilgi::before{content:"i"} .rsvp-notice a:where(:not(.rsvp-btn)){color:inherit;font-weight:600} .rsvp-notice__govde{min-width:0} .rsvp-notice__govde p{margin:0 0 var(--aralik-xs)} .rsvp-rozet{display:inline-flex;align-items:center;gap:5px;padding:4px 10px; border-radius:var(--yaricap-tam);font-size:13px;font-weight:600;white-space:nowrap; margin:0 4px 4px 0} .rsvp-rozet--olumlu{background:var(--olumlu-yumusak);color:var(--olumlu-metin)} .rsvp-rozet--notr{background:var(--ink-100);color:var(--ink-700)} .rsvp-rozet--uyari{background:var(--uyari-yumusak);color:var(--uyari-metin)} .rsvp-rozet--hata{background:var(--hata-yumusak);color:var(--hata-metin)} .rsvp-rozet--bilgi{background:var(--bilgi-yumusak);color:var(--bilgi-metin)} .rsvp-rozet__nokta{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} /* Bos durum: ne oldugu ve siradaki adim birlikte. */ .rsvp-bos{text-align:center;padding:var(--aralik-xl) var(--aralik-lg);background:var(--yuzey); border:1px dashed var(--cizgi-koyu);border-radius:var(--yaricap-lg);margin:0 0 var(--aralik-md)} .rsvp-bos__im{font-size:32px;line-height:1;margin:0 0 var(--aralik-sm)} .rsvp-bos h3{margin:0 0 var(--aralik-xs)} .rsvp-bos p{color:var(--ink-600);font-size:15px;margin:0 auto var(--aralik-md);max-width:36ch} .rsvp-bos p:last-child{margin-bottom:0} .rsvp-bos .rsvp-btn{max-width:280px;margin-left:auto;margin-right:auto} /* Yukleniyor: gercek yukseklikte iskelet, sayfa zıplamasin. */ .rsvp-iskelet{background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-200) 37%,var(--ink-100) 63%); background-size:400% 100%;animation:rsvp-parlama 1.4s ease infinite;border-radius:var(--yaricap-sm)} @keyframes rsvp-parlama{0%{background-position:100% 50%}100%{background-position:0 50%}} .rsvp-iskelet--satir{height:14px;margin:0 0 var(--aralik-xs)} .rsvp-iskelet--baslik{height:22px;width:60%;margin:0 0 var(--aralik-sm)} .rsvp-iskelet--kare{aspect-ratio:1;border-radius:12px} .rsvp-cubuk{height:10px;border-radius:var(--yaricap-tam);background:var(--ink-200);overflow:hidden} .rsvp-cubuk>div{height:100%;border-radius:var(--yaricap-tam);background:var(--vurgu)} .rsvp-sayfalama{display:flex;flex-wrap:wrap;gap:var(--aralik-xs);justify-content:center; margin:var(--aralik-lg) 0 0} .rsvp-sayfalama a,.rsvp-sayfalama span{display:inline-flex;align-items:center; justify-content:center;min-width:var(--hedef-dokunma);min-height:var(--hedef-dokunma);padding:0 12px; border-radius:var(--yaricap-tam);font-size:15px;text-decoration:none; border:1px solid var(--cizgi);color:var(--ink-700);background:var(--yuzey)} .rsvp-sayfalama a:hover{border-color:var(--cizgi-koyu);color:var(--ink-900)} .rsvp-sayfalama .acik{background:var(--ink-900);color:#fff;border-color:var(--ink-900)} /* Tanitim sayfasindaki urun onizlemeleri. Her kart kendi data-stil'ini tasir; boylece dort hazir stil ayni yerde yan yana gorunur ve urunun yalnizca tek bir etkinlik turune ait olmadigi ilk ekranda anlasilir. Gorseller tembel yuklenir ve olculeri yazilidir: LCP artik buyuk bir fotograf degil baslik metni, kartlar da duzeni oynatmaz. */ .rsvp-ornekler{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--aralik-sm)} /* Dorde ancak kart basina ~250 px dustugunde geciliyor. Dar kolonda dort sutun denendiginde alt satirdaki tur adi hecelere bolunuyordu. Genis ekranda serit metin kolonundan tasar: onizlemeler sayfanin en genis ogesidir, paragraf genisligine sigmasi gerekmez. */ @media (min-width:1000px){ .rsvp-ornekler{grid-template-columns:repeat(4,1fr);gap:var(--aralik-md); --serit:min(1160px, calc(100vw - 64px)); width:var(--serit); margin-inline:calc(50% - var(--serit) / 2)} } .rsvp-ornek{background:var(--yuzey);border:1px solid var(--cizgi); border-radius:var(--yaricap-lg);overflow:hidden} .rsvp-ornek__kapak{position:relative;display:block;aspect-ratio:3/2;overflow:hidden; background:var(--yuzey-2)} .rsvp-ornek__kapak img{width:100%;height:100%;object-fit:cover;display:block} /* Yazinin arkasi dolu, ustu gecisli: parlak bir kapakta da okunur. */ .rsvp-ornek__perde{position:absolute;inset:auto 0 0;height:74%;pointer-events:none; background:linear-gradient(to bottom, rgb(var(--kapak-perde) / 0) 0, rgb(var(--kapak-perde) / var(--kapak-perde-alfa)) 58%, rgb(var(--kapak-perde) / var(--kapak-perde-alfa)) 100%)} .rsvp-ornek__metin{position:absolute;left:0;right:0;bottom:0;padding:var(--aralik-sm); display:flex;flex-direction:column;gap:2px;color:#fff} .rsvp-ornek__metin strong{font-family:var(--baslik-font);font-weight:600; font-size:15px;line-height:1.15} [data-stil="night"] .rsvp-ornek__metin strong{font-weight:700;letter-spacing:-.02em} .rsvp-ornek__metin small{font-size:12px;opacity:.94} @media (min-width:1000px){ .rsvp-ornek__metin strong{font-size:18px} .rsvp-ornek__metin small{font-size:13px} } .rsvp-ornek__alt{display:flex;flex-wrap:wrap;align-items:center; gap:var(--aralik-2xs) var(--aralik-xs); margin:0;padding:var(--aralik-sm);font-size:13px;color:var(--ink-700)} .rsvp-ornek__alt>span:first-child{flex:1 1 auto;min-width:0} .rsvp-ornek__rozet{flex:none;background:var(--vurgu-yumusak);color:var(--vurgu-koyu); border-radius:var(--yaricap-tam);padding:5px 10px;font-weight:600;font-size:12px} /* --- 10. Davet yuzu ------------------------------------------------------ */ .rsvp-kapak{position:relative;min-height:190px;display:flex;align-items:flex-end; padding:var(--aralik-lg) var(--aralik-md) var(--aralik-lg);overflow:hidden; background:linear-gradient(155deg,var(--vurgu-yumusak) 0%,var(--cizgi) 55%,var(--yuzey-2) 100%)} @media (min-width:600px){.rsvp-kapak{min-height:260px;padding-left:var(--aralik-lg);padding-right:var(--aralik-lg)}} @media (min-width:1000px){.rsvp-kapak{min-height:360px}} .rsvp-kapak__ic{position:relative;z-index:2;width:100%;max-width:var(--kolon);margin:0 auto} .rsvp-kapak__bos{font-size:13px;color:var(--ink-600)} /* Gorselli kapak. Gorsel tum alani kaplar; odak noktasi sahibin sectigi yerdir, boylece dar ve genis ekranda onemli bolum korunur. */ .rsvp-kapak--gorselli{background:var(--ink-900)} .rsvp-kapak__gorsel{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;z-index:0} /* Karartma perdesi iki katmanli. Birinci katman kutunun tamamina yayilan yumusak bir wash: kapagin altina dogru hafifce koyulasir, fotografi bogmaz. Ikinci katman metne sabitlenmistir. Kutunun yuzdesine bagli tek bir degrade yeterli degildi: tam alfaya ancak kutunun en altinda ulasiyordu, yazi ise dip bosluguyla birlikte daha yukarida duruyordu. Bembeyaz bir fotografta baslik 2.52:1'e, ust etiket 1.92:1'e dusuyordu. Yazinin oturdugu seride tam alfa uygulanarak ve ustunde 72 piksellik bir gecis birakilarak uc stilde de 5:1'in uzerine cikildi; olcum tools/check-contrast.py icinde. */ .rsvp-kapak__perde{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgb(var(--kapak-perde) / 0) 0%, rgb(var(--kapak-perde) / calc(var(--kapak-perde-alfa) * .12)) 45%, rgb(var(--kapak-perde) / calc(var(--kapak-perde-alfa) * .30)) 100%)} .rsvp-kapak--gorselli .rsvp-kapak__ic::before{content:"";position:absolute; z-index:-1;pointer-events:none; inset:-72px -50vw calc(var(--aralik-lg) * -1) -50vw; background:linear-gradient(to bottom, rgb(var(--kapak-perde) / 0) 0, rgb(var(--kapak-perde) / var(--kapak-perde-alfa)) 72px, rgb(var(--kapak-perde) / var(--kapak-perde-alfa)) 100%)} .rsvp-kapak--gorselli .rsvp-kapak__ic h1{color:#fff} .rsvp-kapak--gorselli .rsvp-ust-etiket{color:#fff;opacity:.92} .rsvp-tarih{display:flex;gap:var(--aralik-sm);align-items:center;margin:var(--aralik-md) 0} .rsvp-tarih__cip{flex:none;width:54px;padding:6px 0 8px;text-align:center;background:var(--yuzey); border:1px solid var(--cizgi);border-radius:var(--yaricap-md);line-height:1.1} .rsvp-tarih__ay{display:block;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--vurgu-koyu)} .rsvp-tarih__gun{display:block;font-size:22px;font-weight:700;color:var(--ink-900)} /* Arap yazisinda harf araligi harfleri koparir. */ [dir=rtl] .rsvp-tarih__ay{letter-spacing:0} .rsvp-tarih__yazi strong{display:block;font-size:17px;font-weight:600} .rsvp-tarih__yazi small{color:var(--ink-600);font-size:14px} .rsvp-galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--aralik-xs);margin:0 0 var(--aralik-md)} @media (max-width:420px){.rsvp-galeri{grid-template-columns:repeat(2,1fr)}} .rsvp-galeri a{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden; background:var(--ink-100)} .rsvp-galeri img{width:100%;height:100%;object-fit:cover;display:block} .rsvp-not{padding:var(--aralik-md);border-radius:var(--yaricap-md);background:var(--vurgu-yumusak); margin:0 0 var(--aralik-xs)} .rsvp-not p{margin:0 0 var(--aralik-2xs);font-size:16px;white-space:pre-line} .rsvp-not small{color:var(--ink-600)} /* Yukleyici */ .rsvp-yukleyici{display:none} .rsvp-yukleyici--hazir{display:block} .rsvp-yukleyici__alan{display:block;padding:var(--aralik-lg) var(--aralik-md);text-align:center;cursor:pointer; border:2px dashed var(--cizgi-koyu);border-radius:var(--yaricap-md);background:var(--ink-0)} .rsvp-yukleyici__alan:hover{border-color:var(--vurgu);background:var(--vurgu-yumusak)} .rsvp-yukleyici__alan:focus-within{outline:3px solid var(--vurgu-koyu);outline-offset:2px} .rsvp-yukleyici__alan input{position:absolute;width:1px;height:1px;opacity:0} .rsvp-yukleyici__alan strong{display:block;font-size:17px} .rsvp-yukleyici__alan small{color:var(--ink-600)} .rsvp-yukleyici__alan--selfie{border-style:solid;border-color:var(--vurgu);background:var(--vurgu-yumusak);margin-bottom:var(--aralik-sm)} /* 0.25.1 */ .rsvp-dosyalar{list-style:none;margin:var(--aralik-md) 0 0;padding:0} .rsvp-dosya{padding:var(--aralik-sm) 0;border-top:1px solid var(--cizgi);display:grid; grid-template-columns:1fr auto;gap:6px var(--aralik-sm);align-items:center} .rsvp-dosya__bilgi{min-width:0} .rsvp-dosya__bilgi strong{display:block;font-size:15px;word-break:break-all} .rsvp-dosya__bilgi small{color:var(--ink-600);font-size:13px} .rsvp-dosya__hal{font-size:14px;color:var(--ink-600);white-space:nowrap} .rsvp-dosya__cubuk{grid-column:1/-1;height:6px;border-radius:var(--yaricap-tam); background:var(--ink-200);overflow:hidden} .rsvp-dosya__cubuk div{height:6px;width:0;background:var(--vurgu);transition:width .2s} .rsvp-dosya--tamam .rsvp-dosya__hal{color:var(--olumlu);font-weight:600} .rsvp-dosya--hata .rsvp-dosya__hal{color:var(--hata-metin);font-weight:600} .rsvp-dosya__tekrar{grid-column:1/-1;min-height:var(--hedef-dokunma);font-size:15px;width:100%} /* --- 11. Panel yuzu ------------------------------------------------------ */ .rsvp-ozet{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink-100); border-radius:var(--yaricap-md);padding:var(--aralik-md) 0;margin:var(--aralik-md) 0} /* Dort sayacli ozet dar ekranda 3+1 diye kiriliyordu; 2x2 dengeli durur. */ .rsvp-ozet--dort{grid-template-columns:repeat(2,1fr);row-gap:var(--aralik-md)} @media (min-width:600px){.rsvp-ozet--dort{grid-template-columns:repeat(4,1fr);row-gap:0}} .rsvp-ozet div{text-align:center;padding:0 var(--aralik-2xs)} .rsvp-ozet b{display:block;font-size:24px;font-weight:700;line-height:1.2} .rsvp-ozet small{font-size:13px;color:var(--ink-600);line-height:1.3;display:block} .rsvp-adimlar{display:flex;gap:6px;margin:0 0 var(--aralik-xs)} .rsvp-adimlar span{flex:1;height:6px;border-radius:var(--yaricap-tam);background:var(--ink-200)} .rsvp-adimlar span.acik{background:var(--vurgu)} .rsvp-adim-metin{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-600);margin:0 0 var(--aralik-xs)} .rsvp-mod{display:grid;grid-template-columns:88px 1fr;gap:var(--aralik-sm);padding:var(--aralik-md); border:1px solid var(--cizgi);border-radius:var(--yaricap-md);background:var(--yuzey); margin:0 0 var(--aralik-sm)} .rsvp-mod__gorsel{width:88px;height:88px;border-radius:12px;object-fit:cover; background:var(--ink-100)} .rsvp-mod__govde{min-width:0} .rsvp-mod__metin{background:var(--ink-100);border-radius:10px;padding:10px var(--aralik-sm); font-size:15px;white-space:pre-line;margin:var(--aralik-xs) 0 0} /* Yan yana duran ikincil eylemler: takvime ekle, yol tarifi, hatirlat. Dar ekranda alt satira sarar; her dugme dokunma hedefini korur. */ .rsvp-eylemler{display:flex;flex-wrap:wrap;gap:var(--aralik-xs);margin-top:var(--aralik-md)} .rsvp-eylemler form{display:contents} .rsvp-eylemler .rsvp-btn{width:auto;margin:0} .rsvp-mod__eylem{display:flex;flex-wrap:wrap;gap:var(--aralik-xs);margin-top:var(--aralik-sm)} .rsvp-mod__eylem form{display:contents} .rsvp-mod__eylem .rsvp-btn{width:auto;min-height:var(--hedef-dokunma);padding:8px 14px;font-size:15px;margin:0} .rsvp-kopya{display:flex;gap:var(--aralik-xs);align-items:stretch} .rsvp-kopya .rsvp-input{font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .rsvp-kopya .rsvp-btn{width:auto;flex:none} /* Etkinlik kartindaki kucuk kapak. Buyuk kapak burada indirilmez. */ .rsvp-kart-kapak{width:100%;aspect-ratio:16/9;object-fit:cover;display:block; border-radius:var(--yaricap-md);background:var(--ink-100);margin:0 0 var(--aralik-sm)} /* Kapak yonetimi */ .rsvp-kapak-onizleme{position:relative;border-radius:var(--yaricap-md);overflow:hidden; background:var(--ink-100);aspect-ratio:16/9;margin:0 0 var(--aralik-sm)} .rsvp-kapak-onizleme img{width:100%;height:100%;object-fit:cover;display:block} .rsvp-odak{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--aralik-2xs); max-width:220px;margin:0 0 var(--aralik-sm)} .rsvp-odak label{position:relative;display:flex;align-items:center;justify-content:center; min-height:var(--hedef-dokunma);border:1px solid var(--cizgi);border-radius:var(--yaricap-sm); background:var(--ink-0);cursor:pointer} .rsvp-odak input{position:absolute;opacity:0;width:1px;height:1px} .rsvp-odak label::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink-300)} .rsvp-odak label:has(input:checked){border-color:var(--vurgu);border-width:2px;background:var(--vurgu-yumusak)} .rsvp-odak label:has(input:checked)::after{background:var(--vurgu-koyu)} .rsvp-odak label:has(input:focus-visible){outline:3px solid var(--vurgu-koyu);outline-offset:2px} /* Kirpilmis kapak. Turevler sunucuda tam 3:1 ve 3:2 oraninda uretildigi icin kutu da ayni orani tasir; object-fit burada yalnizca uzun baslik kutuyu uzattiginda devreye girer. */ .rsvp-kapak--kirpik{min-height:0;aspect-ratio:3/2} @media (min-width:600px){.rsvp-kapak--kirpik{min-height:0;aspect-ratio:3/1}} .rsvp-kapak--kirpik picture{position:absolute;inset:0;z-index:0} /* Panelde kirpma sonucu: genis ekran ve telefon yan yana. */ .rsvp-kapak-sonuc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.2fr);gap:var(--aralik-xs); align-items:start;margin:0 0 var(--aralik-sm)} .rsvp-kapak-sonuc figure{margin:0;min-width:0} .rsvp-kapak-sonuc img{display:block;width:100%;height:auto;border-radius:var(--yaricap-md);background:var(--ink-100)} .rsvp-kapak-sonuc__masaustu img{aspect-ratio:3/1} .rsvp-kapak-sonuc__mobil img{aspect-ratio:3/2} .rsvp-kapak-sonuc figcaption{font-size:12px;color:var(--ink-700);margin-top:4px} @media (max-width:479px){.rsvp-kapak-sonuc{grid-template-columns:minmax(0,1fr)} .rsvp-kapak-sonuc__mobil{max-width:240px}} /* Kirpma editoru */ .rsvp-kirpma{width:min(960px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 16px); padding:0;border:0;border-radius:var(--yaricap-lg);background:var(--yuzey);color:var(--ink-900); box-shadow:0 20px 60px rgb(0 0 0 / .35);overflow:auto;overscroll-behavior:contain} .rsvp-kirpma::backdrop{background:rgb(12 10 9 / .72)} .rsvp-kirpma__govde{padding:var(--aralik-md)} @media (max-width:599px){.rsvp-kirpma__govde{padding:var(--aralik-sm)}} .rsvp-kirpma h2{margin:0 0 4px;font-size:20px} .rsvp-kirpma__sekmeler{display:flex;gap:var(--aralik-2xs);margin:var(--aralik-sm) 0 var(--aralik-xs); padding:var(--aralik-2xs);background:var(--ink-100);border-radius:var(--yaricap-md)} .rsvp-kirpma__sekmeler [role=tab]{flex:1 1 0;min-height:var(--hedef-dokunma);border:0;border-radius:var(--yaricap-sm); background:transparent;color:var(--ink-700);font:inherit;font-weight:600;font-size:14px;cursor:pointer} .rsvp-kirpma__sekmeler [role=tab][aria-selected=true]{background:var(--yuzey);color:var(--ink-900); box-shadow:0 1px 3px rgb(0 0 0 / .15)} .rsvp-kirpma__sahne{position:relative;height:clamp(200px,min(52vh,62vw),460px);overflow:hidden; border-radius:var(--yaricap-md);background:#111;touch-action:none;user-select:none;cursor:grab; -webkit-tap-highlight-color:transparent} .rsvp-kirpma__sahne.mobil{height:clamp(240px,min(56vh,82vw),520px)} .rsvp-kirpma__sahne.suruklenirken{cursor:grabbing} .rsvp-kirpma__sahne:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:3px} .rsvp-kirpma__sahne img{position:absolute;max-width:none;display:block;pointer-events:none;-webkit-user-drag:none} /* Maske: cercevenin disi golge ile karartilir, ici tam gorunur. */ .rsvp-kirpma__cerceve{position:absolute;pointer-events:none;border:2px solid #fff; box-shadow:0 0 0 9999px rgb(0 0 0 / .58);border-radius:2px} .rsvp-kirpma__cerceve::before,.rsvp-kirpma__cerceve::after{content:"";position:absolute;inset:0; border:0 solid rgb(255 255 255 / .35)} .rsvp-kirpma__cerceve::before{left:33.333%;right:33.333%;border-left-width:1px;border-right-width:1px} .rsvp-kirpma__cerceve::after{top:33.333%;bottom:33.333%;border-top-width:1px;border-bottom-width:1px} .rsvp-kirpma__kontroller{display:flex;align-items:center;gap:var(--aralik-xs);margin:var(--aralik-xs) 0} .rsvp-kirpma__yuvarlak{flex:none;width:var(--hedef-dokunma);min-width:var(--hedef-dokunma); min-height:var(--hedef-dokunma);padding:0;font-size:22px;line-height:1} .rsvp-kirpma__yakinlik{flex:1 1 auto;display:flex;align-items:center;min-height:var(--hedef-dokunma)} .rsvp-kirpma__yakinlik input{width:100%;min-height:var(--hedef-dokunma);accent-color:var(--vurgu-koyu)} .rsvp-kirpma__yakinlik input:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:2px} .rsvp-kirpma__alt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--aralik-sm); align-items:start} @media (max-width:699px){.rsvp-kirpma__alt{grid-template-columns:minmax(0,1fr)}.rsvp-kirpma__harita{max-width:240px}} .rsvp-kirpma__alt figure{margin:0;min-width:0} .rsvp-kirpma__alt figcaption{font-size:12px;color:var(--ink-700);margin-top:4px} .rsvp-kirpma__harita-ic{position:relative;line-height:0;background:var(--ink-100);border-radius:var(--yaricap-sm);overflow:hidden} .rsvp-kirpma__harita-ic img{width:100%;height:auto;display:block} .rsvp-kirpma__alan{position:absolute;border:2px solid rgb(255 255 255 / .9);box-shadow:0 0 0 1px rgb(0 0 0 / .6)} .rsvp-kirpma__alan--mobil{border-style:dashed} .rsvp-kirpma__alan.etkin{border-color:var(--vurgu);box-shadow:0 0 0 1px rgb(0 0 0 / .6),inset 0 0 0 1px rgb(0 0 0 / .3)} .rsvp-kirpma__onizlemeler{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:var(--aralik-xs);align-items:start} .rsvp-kirpma__onizleme{position:relative;overflow:hidden;border-radius:var(--yaricap-sm);background:var(--ink-100)} .rsvp-kirpma__onizleme--masaustu{aspect-ratio:3/1} .rsvp-kirpma__onizleme--mobil{aspect-ratio:3/2} .rsvp-kirpma__onizleme img{position:absolute;max-width:none;display:block} .rsvp-kirpma__onizleme-baslik{position:absolute;left:8px;right:8px;bottom:6px;color:#fff;font-weight:700; font-size:12px;line-height:1.2;text-shadow:0 1px 3px rgb(0 0 0 / .8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rsvp-kirpma__kalite{margin:6px 0 0;font-size:13px;color:var(--ink-700)} .rsvp-kirpma__kalite.uyari{color:var(--uyari-metin);font-weight:600} .rsvp-kirpma__durum{margin:6px 0 0;font-size:14px;min-height:1.4em} .rsvp-kirpma__eylemler{margin-top:var(--aralik-sm);flex-wrap:wrap} .rsvp-kirpma__eylemler .rsvp-btn{min-height:var(--hedef-dokunma)} .rsvp-kirpma [data-kaydet][aria-busy=true]{opacity:.7;cursor:progress} @media (prefers-reduced-motion:reduce){.rsvp-kirpma *{transition:none!important}} /* --- 12. Tanitim sayfasi ------------------------------------------------- */ body.rsvp--tanitim{--zemin:#FBF7F2} .rsvp-hero{padding:var(--aralik-2xl) var(--aralik-md) var(--aralik-xl);text-align:center; background:linear-gradient(170deg,var(--vurgu-yumusak) 0%,var(--zemin) 70%)} @media (min-width:600px){.rsvp-hero{padding:var(--aralik-3xl) var(--aralik-lg)}} .rsvp-hero__ic{max-width:var(--kolon);margin:0 auto} .rsvp-hero h1{font-size:clamp(32px,9vw,46px);margin:0 0 var(--aralik-md)} .rsvp-hero p{font-size:18px;color:var(--ink-700);max-width:44ch;margin:0 auto var(--aralik-lg)} .rsvp-hero .rsvp-btn{max-width:320px;margin-left:auto;margin-right:auto} .rsvp-kartlar{display:grid;gap:var(--aralik-sm);grid-template-columns:1fr} @media (min-width:640px){.rsvp-kartlar{grid-template-columns:repeat(3,1fr)}} .rsvp-kartlar .rsvp-card{margin:0;height:100%} .rsvp-kartlar__im{font-size:26px;line-height:1;margin:0 0 var(--aralik-sm)} .rsvp-adim-liste{list-style:none;counter-reset:adim;margin:0;padding:0} .rsvp-adim-liste li{counter-increment:adim;display:flex;gap:var(--aralik-md); padding:var(--aralik-md) 0;border-top:1px solid var(--cizgi)} .rsvp-adim-liste li:first-child{border-top:0} .rsvp-adim-liste li::before{content:counter(adim);flex:none;width:34px;height:34px; border-radius:50%;background:var(--vurgu);color:var(--vurgu-ustu); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px} .rsvp-adim-liste strong{display:block;margin:0 0 2px} .rsvp-adim-liste small{color:var(--ink-600);font-size:15px;line-height:1.5} .rsvp-tur-etiket{display:flex;flex-wrap:wrap;gap:var(--aralik-xs);justify-content:center; margin:0 0 var(--aralik-md)} .rsvp-tur-etiket span{padding:7px 14px;border-radius:var(--yaricap-tam);background:var(--yuzey); border:1px solid var(--cizgi);font-size:14px;color:var(--ink-700)} .rsvp-dipnot{border-top:1px solid var(--cizgi);margin-top:var(--aralik-2xl);padding:var(--aralik-lg) var(--aralik-md); text-align:center;color:var(--ink-600);font-size:14px} .rsvp-dipnot a{margin:0 var(--aralik-xs)} /* Davet baglantisi, QR ve afis --------------------------------------------------------------- Kisa baglanti bir kod gibi gosterilir: misafire okunacak bir adres, tiklanacak bir dugme degil. Kopyalama dugmesi yanindadir cunku kullanicinin yapacagi sey neredeyse her zaman kopyalamak. */ .rsvp-baglanti{display:flex;flex-wrap:wrap;gap:var(--aralik-sm);align-items:center; padding:var(--aralik-sm);border:1px solid var(--cizgi);border-radius:var(--yaricap-sm); background:var(--ink-50)} .rsvp-baglanti__adres{flex:1 1 220px;min-width:0;font-size:15px;word-break:break-all; background:none;padding:0;color:var(--ink-900)} .rsvp-baglanti [data-kopyala-durum]{flex:1 1 100%;margin:0} .rsvp-qr{display:flex;flex-wrap:wrap;gap:var(--aralik-md);align-items:center; margin-top:var(--aralik-md);padding-top:var(--aralik-md);border-top:1px solid var(--cizgi)} .rsvp-qr__kod{flex:none;width:132px;height:132px;background:#fff; border:1px solid var(--cizgi);border-radius:var(--yaricap-sm);padding:6px} .rsvp-qr__kod svg{display:block;width:100%;height:100%} .rsvp-qr__yan{flex:1 1 200px;min-width:0} /* Afis dikeydir ve kirpilmaz: tamami gorunsun diye `contain`. */ .rsvp-afis-onizleme{display:flex;justify-content:center;align-items:flex-start; background:var(--ink-100);border-radius:var(--yaricap-md);overflow:hidden; padding:var(--aralik-sm);margin:0 0 var(--aralik-sm)} .rsvp-afis-onizleme img{max-width:min(100%,320px);max-height:420px;width:auto;height:auto; object-fit:contain;display:block;border-radius:var(--yaricap-sm)} /* Davet sayfasindaki afis bolumu. */ .rsvp-afis{margin:0 0 var(--aralik-sm)} .rsvp-afis__cerceve{display:block;border:0;padding:0;background:none;cursor:zoom-in;width:100%} .rsvp-afis__cerceve:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:3px} .rsvp-afis__cerceve img{display:block;width:100%;max-width:420px;height:auto;margin:0 auto; border-radius:var(--yaricap-md);box-shadow:var(--golge-2)} .rsvp-afis__islem{display:flex;flex-wrap:wrap;gap:var(--aralik-sm);justify-content:center; margin-top:var(--aralik-sm)} /* Buyutulmus afis. Odak tuzagi ve Esc davranisi betikte. */ /* `dialog` iki ayri tuzak tasiyor: 1. Kapaliyken tarayici `display:none` verir; buradaki `flex` onu ezip kapali pencereyi sayfanin ortasina cizdiriyordu. 2. Acikken tarayicinin kendi olculeri (`width:fit-content`, `margin:auto`, dar `max-width`) `inset:0`i etkisiz birakir ve pencere icerige gore kucuk kalir. Hepsi acikca ezilmeli. */ .rsvp-buyutec{position:fixed;inset:0;z-index:90;box-sizing:border-box; width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0; align-items:center;justify-content:center;padding:var(--aralik-md); background:rgba(0,0,0,.9);overflow:hidden} .rsvp-buyutec[open]{display:flex} .rsvp-buyutec:not([open]){display:none} .rsvp-buyutec::backdrop{background:rgba(0,0,0,.9)} .rsvp-buyutec img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; border-radius:var(--yaricap-sm)} .rsvp-buyutec__kapat{position:absolute;top:var(--aralik-sm);right:var(--aralik-sm);z-index:1; min-width:var(--hedef-dokunma);min-height:var(--hedef-dokunma)} /* Video cephesi --------------------------------------------------------------- Iframe misafir "oynat" demeden **hic** yuklenmez; bu yuzden saglayicinin kucuk resmi de cekilmez — onu cekmek, kacinmaya calistigimiz istegi zaten yapmak olurdu. Kapak varsa o, yoksa stilin kendi rengi arka plan olur. */ .rsvp-video{position:relative;aspect-ratio:16/9;border-radius:var(--yaricap-md); overflow:hidden;background:var(--ink-900);margin:0 0 var(--aralik-sm)} .rsvp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .rsvp-video__cephe{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:var(--aralik-sm);width:100%; border:0;padding:var(--aralik-md);cursor:pointer;color:#fff; background:var(--ink-900) center/cover no-repeat;text-align:center} .rsvp-video__cephe::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)} .rsvp-video__cephe:focus-visible{outline:3px solid #fff;outline-offset:-4px} /* Zemin donuk beyaz **sabit** bir renk; yazi rengi de sabit olmali. `--ink-900` Gece stilinde acik tona donuyor ve dugme yazisi beyaz uzerine beyaz kaliyordu. */ .rsvp-video__oynat{position:relative;display:flex;align-items:center;gap:var(--aralik-xs); min-height:var(--hedef-dokunma);padding:0 var(--aralik-md);border-radius:999px; background:rgba(255,255,255,.96);color:#111827;font-weight:600;font-size:16px} .rsvp-video__not{position:relative;margin:0;font-size:13px;line-height:1.45; max-width:34ch;color:rgba(255,255,255,.92)} /* E-ink ekran duvari --------------------------------------------------------------- Sabit 10x10 izgara mobilde sayfayi tasirirdi; kartlar masa gruplarinda ve sigdigi kadar sutunda akar. Kart kuculdugunde metin kucultulmez, ekran gorseli kucultulur. */ .rsvp-eink-sayac{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--aralik-sm);margin:0 0 var(--aralik-sm)} .rsvp-eink-sayac div{text-align:center;padding:var(--aralik-sm) var(--aralik-xs); border:1px solid var(--cizgi);border-radius:var(--yaricap-sm);background:var(--ink-50)} .rsvp-eink-sayac b{display:block;font-size:24px;line-height:1.1} .rsvp-eink-sayac small{display:block;margin-top:2px;color:var(--ink-600);font-size:12px;line-height:1.3} .rsvp-eink-filtre{display:flex;align-items:center;gap:var(--aralik-sm);margin:var(--aralik-md) 0} .rsvp-eink-filtre .rsvp-field__label{margin:0} .rsvp-eink-filtre select{max-width:220px} .rsvp-eink-masa{margin:0 0 var(--aralik-lg)} .rsvp-eink-masa[hidden]{display:none} .rsvp-eink-masa__ad{font-size:17px;margin:0 0 var(--aralik-sm)} .rsvp-eink-izgara{display:grid;gap:var(--aralik-sm); grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .rsvp-eink-kart{border:1px solid var(--cizgi);border-radius:var(--yaricap-sm); background:var(--ink-0);overflow:hidden} .rsvp-eink-kart__ekran{aspect-ratio:4/3;background:var(--ink-100); display:flex;align-items:center;justify-content:center} .rsvp-eink-kart__ekran img{width:100%;height:100%;object-fit:contain;display:block;background:#fff} .rsvp-eink-kart__bos{color:var(--ink-600);font-size:13px} .rsvp-eink-kart__alt{display:flex;align-items:center;justify-content:space-between; gap:var(--aralik-xs);padding:var(--aralik-xs) var(--aralik-sm);font-size:13px} .rsvp-eink-kart__detay{border-top:1px solid var(--cizgi);font-size:12px} .rsvp-eink-kart__detay summary{padding:var(--aralik-xs) var(--aralik-sm);cursor:pointer; min-height:var(--hedef-dokunma);display:flex;align-items:center;color:var(--ink-600)} .rsvp-eink-kart__detay dl{margin:0;padding:0 var(--aralik-sm) var(--aralik-sm)} .rsvp-eink-kart__detay dt{color:var(--ink-600);margin-top:6px} .rsvp-eink-kart__detay dd{margin:0;word-break:break-all} .rsvp-eink-rozet{flex:none;padding:2px 8px;border-radius:999px;font-size:11px; background:var(--ink-100);color:var(--ink-700);white-space:nowrap} .rsvp-eink-rozet--olumlu{background:#dcfce7;color:#14532d} .rsvp-eink-rozet--bilgi{background:#dbeafe;color:#1e3a5f} .rsvp-eink-rozet--hata{background:#fee2e2;color:#7f1d1d} /* Buyutulmus ekran: gercek piksel gorunumu. */ .rsvp-eink-kart__ekran img:hover{cursor:zoom-in} @media (prefers-reduced-motion: reduce){ .rsvp-eink-kart, .rsvp-eink-kart__ekran img{transition:none} } /* Oturma plani formlari: dar ekranda alt alta akar. */ .rsvp-seat-form{display:flex;gap:var(--aralik-xs);align-items:center;flex-wrap:wrap} .rsvp-seat-form select{min-width:140px;max-width:200px} /* Yayin gecmisi listesi: guncel ilerleme kartindan ayri durur. */ .rsvp-eink-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rsvp-eink-gecmis li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .rsvp-eink-gecmis li[aria-current] a { font-weight: 700; } .rsvp-eink-gecmis small { color: var(--rsvp-ikincil-metin, #6b7280); } /* --- 20. Cok dil --------------------------------------------------------- */ /* Dil secici: sayfanin ust kosesinde, kapagin uzerinde. RTL'de karsi koseye gecer (inset-inline-end). Bayrak yok; dil adi ve kisa kod. */ .rsvp-dil{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);inset-inline-end:12px;z-index:30} .rsvp-dil__menu{position:relative} .rsvp-dil__dugme{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--hedef-dokunma); min-width:var(--hedef-dokunma);padding:0 14px;border-radius:var(--yaricap-tam);background:var(--yuzey);color:var(--ink-900); border:1px solid var(--cizgi);box-shadow:var(--golge-2);cursor:pointer;font-weight:600;font-size:14px;line-height:1} .rsvp-dil__dugme::-webkit-details-marker{display:none} .rsvp-dil__dugme::marker{content:""} .rsvp-dil__dugme:hover{border-color:var(--cizgi-koyu)} .rsvp-dil__dugme:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:2px} .rsvp-dil__ikon{flex:none;color:var(--vurgu-koyu)} .rsvp-dil__dugme .rsvp-dil__kod{font-size:12px;letter-spacing:.06em} .rsvp-dil__ad--dugme{display:none;font-weight:500;color:var(--ink-700)} @media (min-width:600px){.rsvp-dil{top:16px;inset-inline-end:16px}.rsvp-dil__ad--dugme{display:inline}} .rsvp-dil__liste{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:232px;max-width:calc(100vw - 24px); max-height:min(60vh,440px);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--yuzey); border:1px solid var(--cizgi);border-radius:var(--yaricap-md);box-shadow:var(--golge-2)} .rsvp-dil__secenek{display:flex;align-items:center;gap:10px;min-height:var(--hedef-dokunma);padding:0 12px; border-radius:var(--yaricap-sm);color:var(--ink-900);text-decoration:none;font-size:15px} .rsvp-dil__secenek:hover{background:var(--ink-100)} .rsvp-dil__secenek:focus-visible{outline:3px solid var(--vurgu-koyu);outline-offset:-3px} .rsvp-dil__secenek[aria-current]{background:var(--vurgu-yumusak);font-weight:700} .rsvp-dil__secenek .rsvp-dil__ad{flex:1 1 auto} .rsvp-dil__secenek .rsvp-dil__kod{font-size:12px;letter-spacing:.06em;color:var(--ink-700)} .rsvp-dil__varsayilan{font-size:11px;font-weight:600;color:var(--ink-700);border:1px solid var(--cizgi); border-radius:var(--yaricap-tam);padding:2px 8px} /* GTranslate yontemi: GTranslate'in kendi acilir menusu (tek