/* ============================================================ AŞK MAKAMI — BİRLEŞİK TASARIM SİSTEMİ v3 Tek tema: Modern Romantik. Site tema sistemi kaldırıldı. Otomatik gece/gündüz: cihazın sistem tercihine uyar. Belge temaları (belge kâğıdı) bundan bağımsızdır. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ --pink:#ff5fa2; --pink-deep:#e6408b; --pink-soft:#ffd6e8; --peach:#ffb88a; --bg:linear-gradient(160deg,#fff3f8 0%,#ffe9f2 30%,#fff6ee 65%,#ffeef5 100%); --ink:#3d2438; --ink-soft:#7a5570; --ink-faint:#b394a6; --surface:rgba(255,255,255,.8); --surface-2:#ffffff; --surface-3:#fdf3f7; --line:#f3d5e2; --line-soft:#f7e8ee; --ok-bg:#e2f7ee; --ok-bd:#b9e8d4; --ok-tx:#1d7a56; --warn-bg:#fff4e0; --warn-bd:#f2ddb0; --warn-tx:#a8742a; --err-bg:#fdecec; --err-bd:#f5c9c9; --err-tx:#b34848; --shadow:0 20px 60px -22px rgba(230,64,139,.25); --ghost-bg:rgba(255,255,255,.9); } html.darkmode{ --bg:linear-gradient(160deg,#231627 0%,#2a1a2e 40%,#241a22 75%,#261826 100%); --ink:#f6e8f0; --ink-soft:#c9a9bd; --ink-faint:#8d6f82; --surface:rgba(48,32,48,.82); --surface-2:#372540; --surface-3:#2e1f33; --line:#4d3450; --line-soft:#402c44; --ok-bg:#173a2c; --ok-bd:#245b44; --ok-tx:#7fe0b4; --warn-bg:#3d2f16; --warn-bd:#5c491f; --warn-tx:#f2c14e; --err-bg:#40222a; --err-bd:#66343c; --err-tx:#ff9aa5; --shadow:0 20px 60px -22px rgba(0,0,0,.55); --ghost-bg:rgba(255,255,255,.07); --pink-soft:#5a3350; } /* ============================================================ TİPOGRAFİ SİSTEMİ — modern, tutarlı, mobil öncelikli Sans: Plus Jakarta Sans (gövde/UI) · Serif: Fraunces (başlık) ============================================================ */ :root{ --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif; --font-display:'Fraunces','Iowan Old Style',Georgia,serif; --fs-h1:clamp(25px,5.2vw,36px); --fs-h2:clamp(19px,3.4vw,24px); --fs-h3:clamp(16px,2.6vw,19px); --fs-body:clamp(14.5px,2.1vw,15.5px); --fs-small:13px; --lh-body:1.65; } body{ background:var(--bg)!important;color:var(--ink)!important; font-family:var(--font-sans)!important; font-size:var(--fs-body)!important;line-height:var(--lh-body)!important; font-weight:400!important;letter-spacing:.05px; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;font-feature-settings:'kern','liga','calt'; } body:before{display:none!important} /* Gövde metni sans miras alsın (eski Inter/Arial tanımlarını ez) */ p,span,a,li,td,th,label,button,input,select,textarea,.btn,.wrap,.card,div,summary,figcaption{font-family:var(--font-sans)} /* Başlıklar — Fraunces, optik boyut + zarif sıkılık */ h1,h2,h3,h4,h5,.serif,.am-title,.sec-head h2,.mcard h2,.mhead h1,.brand b{ font-family:var(--font-display)!important;color:var(--ink)!important; font-weight:600!important;font-optical-sizing:auto;line-height:1.15!important; } h1,.mhead h1{font-size:var(--fs-h1)!important;letter-spacing:-.6px!important;line-height:1.08!important} h2{font-size:var(--fs-h2)!important;letter-spacing:-.3px!important} h3{font-size:var(--fs-h3)!important;letter-spacing:-.2px!important} h4{font-size:clamp(14.5px,2.2vw,16px)!important} p{color:inherit;line-height:var(--lh-body)} a{color:var(--pink-deep)} strong,b{font-weight:600} small,.small{font-size:var(--fs-small)} hr{border:none;border-top:1px solid var(--line)} .grad{background:linear-gradient(120deg,var(--pink-deep),var(--peach))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .muted,.lead,.am-sub,.mini,.fine,small{color:var(--ink-soft)!important} .lead{font-size:clamp(15px,2.4vw,17px)!important;line-height:1.6!important} /* Sayılar hizalı görünsün (istatistik/tablo) */ .stat b,.stat-list span,.chartrow b,td,th,.r span,input[type=number]{font-variant-numeric:tabular-nums} /* Butonlar/formlar gövde fontunu net alsın + ölçek */ .btn,button,input,select,textarea{font-family:var(--font-sans)!important;font-size:15px;letter-spacing:.1px} .btn.small,.btn.ghost.small{font-size:13px} /* Aşırı büyük eski başlıkları modern ölçeğe çek (legacy inline clamp'leri ez) */ .wrap>h1,main>h1,.hero h1{font-size:var(--fs-h1)!important} /* Emoji ve ikon fontları korunur (tipografi ezmesin) */ .ico,.emo,.emoji,.baro-emo,.brand-emoji,[class*="ti-"]{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif} /* ---------- Kart yüzeyleri ---------- */ .card,.panel,.stat,.theme,.group,.cardx,.req,.am-feature,.am-step,.rangebox,.visual-preview, .home-ann-card,.home-announcements,.am-dash-card,.am-empty,.box,.login{ background:var(--surface)!important; border:1.5px solid var(--line)!important; box-shadow:var(--shadow)!important; color:var(--ink)!important; backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); background-image:none!important; } .stat b{color:var(--pink-deep)!important} .stat span{color:var(--ink-soft)!important} .badge,.chip{background:var(--ghost-bg)!important;border:1.5px solid var(--line)!important; color:var(--pink-deep)!important;box-shadow:none!important} /* ---------- Form elemanları ---------- */ label{color:var(--ink)!important} input,textarea,select{ background:var(--surface-2)!important;border:1.5px solid var(--line)!important; color:var(--ink)!important;border-radius:14px!important; } input::placeholder,textarea::placeholder{color:var(--ink-faint)!important} input:focus,textarea:focus,select:focus{border-color:var(--pink)!important; box-shadow:0 0 0 4px rgba(255,95,162,.16)!important} input[type=range]{-webkit-appearance:none!important;appearance:none!important;height:10px!important; border-radius:99px!important;background:linear-gradient(90deg,var(--pink-soft),var(--pink))!important; border:none!important;padding:0!important;cursor:pointer;outline:none;min-height:0!important} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%; background:#fff;border:3px solid var(--pink-deep);box-shadow:0 2px 8px rgba(230,64,139,.45);cursor:pointer} input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--pink-soft),var(--pink))} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--pink-deep)} input[type=checkbox],input[type=radio]{accent-color:var(--pink)!important;min-height:0!important} input[type=file]{padding:10px!important} /* ---------- Butonlar (tek stil, tüm sayfalar) ---------- */ .btn,button.btn,a.btn,.okbtn,.danger2{ background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important; color:#fff!important;border:none!important;border-radius:99px!important; box-shadow:0 10px 24px -8px rgba(230,64,139,.5)!important; font-weight:700!important;transition:transform .18s,box-shadow .18s!important; text-decoration:none!important; } .btn,.btn.ghost,.ghost,.funbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px} .btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.98)} .btn.ghost,.ghost,a.ghost,button.ghost,.funbtn{ background:var(--ghost-bg)!important;color:var(--pink-deep)!important; border:1.5px solid var(--line)!important;border-radius:99px!important; box-shadow:none!important;font-weight:700!important; } .btn.okbtn,.okbtn{background:linear-gradient(135deg,#3fbf8f,#2ea87a)!important;color:#fff!important} .btn.danger,.danger{background:var(--err-bg)!important;color:var(--err-tx)!important;border:1.5px solid var(--err-bd)!important;box-shadow:none!important;border-radius:99px!important} /* ---------- Mesajlar & pill'ler ---------- */ .msg{border-radius:14px!important} .msg.ok,.ok{background:var(--ok-bg)!important;border:1.5px solid var(--ok-bd)!important;color:var(--ok-tx)!important} .msg.err,.err,.error{background:var(--err-bg)!important;border:1.5px solid var(--err-bd)!important;color:var(--err-tx)!important} .msg.good,.good{background:var(--ok-bg)!important;border:1.5px solid var(--ok-bd)!important;color:var(--ok-tx)!important} .pill{border-radius:99px!important;font-weight:800!important} .pill.pending,.pending{background:var(--warn-bg)!important;color:var(--warn-tx)!important} .pill.approved,.approved{background:var(--ok-bg)!important;color:var(--ok-tx)!important} .pill.rejected,.rejected{background:var(--err-bg)!important;color:var(--err-tx)!important} /* ---------- Tablolar ---------- */ .tablewrap{border:1.5px solid var(--line)!important;border-radius:16px!important;overflow:auto;-webkit-overflow-scrolling:touch} table{background:var(--surface-2)!important;color:var(--ink)!important} th{background:var(--surface-3)!important;color:var(--ink-soft)!important;border-bottom:1px solid var(--line)!important} td{color:var(--ink)!important;border-bottom:1px solid var(--line-soft)!important} details.modal,.modal{background:var(--surface-3)!important;border:1.5px solid var(--line)!important;color:var(--ink)!important} summary{color:var(--pink-deep)!important;font-weight:800} /* ---------- Liste satırları & belgeler ---------- */ .doc{border-color:var(--line-soft)!important;background:transparent!important} main .card .doc b,.doc b{color:var(--ink)!important} /* Belge kâğıdı: gece modunda bile kâğıt gibi açık kalır (belge temaları bağımsız) */ .doc.paper,.preview .doc,.paper{background:#fffdf9!important;color:#3d2438!important} .paper-line{border-bottom:1px solid #f7e8ee!important} .paper-line b{color:#7a5570!important}.paper-line span{color:#3d2438!important} .sig{border:1px solid #eed4de!important;background:#fffdf9!important} .sig strong{color:#7a5570!important} .sig em{color:#e6408b!important} .paper .fine,.preview .fine{color:#7a5570!important} /* ---------- Am-section / duyurular ---------- */ .am-title{color:var(--ink)!important} .am-feature b,.am-step b,.am-dash-card b{color:var(--ink)!important} .am-feature p,.am-step p,.am-dash-card small{color:var(--ink-soft)!important} .am-tip{background:var(--surface)!important;border:1.5px dashed var(--line)!important;color:var(--ink-soft)!important;border-radius:18px!important} .am-annbar{background:var(--surface)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important;box-shadow:var(--shadow)!important} .am-annbar a{background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important;color:#fff!important} .am-annbar button{background:var(--ghost-bg)!important;border:1px solid var(--line)!important;color:var(--ink)!important} .am-footer{border-top:1px solid var(--line)!important;background:transparent!important;color:var(--ink)!important} .am-footer p,.am-footer a{color:var(--ink-soft)!important} .am-footer a:hover{color:var(--pink-deep)!important} .am-mini-note{background:var(--surface-3)!important;border:1px solid var(--line)!important} .am-modal{background:var(--surface-2)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important} .am-modal p{color:var(--ink-soft)!important} .am-bottom-nav{background:var(--surface)!important;border:1.5px solid var(--line)!important;box-shadow:var(--shadow)!important} .am-bottom-nav a{color:var(--ink)!important} .am-bottom-nav a:active,.am-bottom-nav a.active{background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important;color:#fff!important} .home-ann-ico{background:linear-gradient(135deg,var(--pink-soft),var(--peach))!important} .home-ann-card p{color:var(--ink-soft)!important} /* ---------- Sohbet ---------- */ .bubble,.msg-bubble{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line)!important} .bubble.me,.msg-bubble.me{background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important;color:#fff!important;border:none!important} /* ---------- Grafik / bar ---------- */ .chartbar,.lovebar{background:var(--line-soft)!important;border-radius:99px!important;overflow:hidden} .chartbar i,.lovebar i{background:linear-gradient(90deg,var(--pink),var(--peach))!important} /* ---------- Kod / pre ---------- */ code,pre{background:var(--surface-3)!important;color:var(--ink)!important;border-radius:8px;padding:2px 6px;white-space:pre-wrap;overflow-wrap:anywhere} /* ---------- PWA bildirim butonu ---------- */ #pwaWidget{z-index:2147483000!important} #pwaWidget .pwa-btn{background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important;color:#fff!important;border:none!important;box-shadow:0 12px 30px rgba(230,64,139,.45)!important} #pwaWidget .pwa-badge{background:var(--pink-deep)!important;color:#fff!important} /* ---------- Emoji güvenli font ---------- */ .ico,.emo,.emoji,.baro-emo,.brand-emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif!important} /* ---------- Kaydırma çubuğu ---------- */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line)!important;border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--pink)!important} /* ============================================================ MOBİL UYUM — güvenlik ağı (tüm sayfalar) ============================================================ */ img,video,canvas,svg{max-width:100%;height:auto} .card table,main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .doc b,.crow span,.paper-line span{overflow-wrap:anywhere} @media(max-width:640px){ input,select,textarea{font-size:16px!important} .btn,.funbtn,button{min-height:44px} .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important} .actions .btn{flex:1 1 calc(50% - 8px);justify-content:center;min-width:120px} .grid,.stats,.row,.grid2,.am-feature-grid,.am-steps,.home-ann-grid,.am-dashboard{grid-template-columns:1fr!important} .stats{grid-template-columns:1fr 1fr!important} .wrap{padding-left:12px!important;padding-right:12px!important} h1{font-size:clamp(28px,8vw,40px)!important} .card{padding:16px!important;border-radius:18px!important} .btn{padding:12px 18px!important} } @supports(padding:max(0px)){ body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} main.wrap,footer{padding-bottom:max(24px,env(safe-area-inset-bottom))} } /* ============================================================ GECE MODU GÜVENLİK AĞI — sabit açık renkli iç stilleri yakala (oyun sayfaları ve legacy inline stiller için) ============================================================ */ html.darkmode [style*="background:#fff3f8"], html.darkmode [style*="background:#ffffff"], html.darkmode [style*="background:#fff"], html.darkmode [style*="background:#fffaf3"], html.darkmode [style*="background:#fff1e5"]{background:var(--surface-2)!important;color:var(--ink)!important} html.darkmode [style*="color:#3d2438"],html.darkmode [style*="color:#302331"]{color:var(--ink)!important} html.darkmode [style*="color:#7a5570"],html.darkmode [style*="color:#604b52"]{color:var(--ink-soft)!important} /* oyun tuval/alanları gece modunda hafif koyulaşsın ama okunur kalsın */ html.darkmode .canvas-wrap,html.darkmode .board,html.darkmode .game,html.darkmode .word,html.darkmode .round{background:var(--surface-3)!important;color:var(--ink)!important;border-color:var(--line)!important} html.darkmode canvas{background:#fbf3f7!important} /* belge kâğıdı gece modunda kâğıt kalsın (oyun kuralından muaf) */ html.darkmode .doc,html.darkmode .doc *{} /* ============================================================ DÜZEN NORMALİZASYONU — tüm sayfalar tek geometri (eski sayfaların farklı radius/padding/genişlik değerlerini eşitler) ============================================================ */ :root{ --r-card:20px; --r-inner:14px; --r-pill:99px; --pad-card:20px; --gap:16px; --page-w:1080px; } /* Sayfa kabı */ .wrap{width:min(var(--page-w),100%)!important;margin-inline:auto!important; padding:24px clamp(14px,4vw,24px) 64px!important} .wrap.narrow{width:min(640px,100%)!important} main.wrap>h1:first-child,.wrap>h1{margin-bottom:6px!important} /* Kart ailesi — tek yarıçap, tek dolgu, tek boşluk */ .card,.panel,.req,.group,.cardx,.am-feature,.am-step,.am-dash-card,.am-empty, .home-ann-card,.home-announcements,.visual-preview,.rangebox,.box,.login,.stat{ border-radius:var(--r-card)!important; padding:var(--pad-card)!important; margin:0 0 var(--gap) 0!important; } .stat{padding:16px!important} .card>h2:first-child,.panel>h2:first-child{margin-top:0!important} .card h2,.panel h2{font-size:17px!important;margin-bottom:12px!important} .card h3{font-size:15.5px!important;margin-bottom:8px!important} .card p{margin-bottom:10px} .card p:last-child,.card form:last-child{margin-bottom:0} /* Izgaralar — tek boşluk, mantıklı sarma, eşit yükseklik yok */ .grid,.stats,.row2,.am-feature-grid,.am-steps,.am-dashboard,.home-ann-grid,.charts,.meters{ display:grid!important;gap:var(--gap)!important;align-items:start!important;margin-bottom:var(--gap)!important; } .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important} .am-feature-grid,.am-dashboard,.home-ann-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important} .am-steps{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important} .charts,.meters{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important} /* Butonlar — tek ölçü */ .btn,button.btn,a.btn,.funbtn{ border-radius:var(--r-pill)!important;padding:11px 20px!important; font-size:14.5px!important;min-height:42px;line-height:1.2!important; } .btn.small{padding:8px 15px!important;font-size:13px!important;min-height:36px} .actions{display:flex!important;flex-wrap:wrap!important;gap:9px!important;margin-top:12px} /* Form alanları — tek ölçü */ input,select,textarea{border-radius:var(--r-inner)!important;padding:11px 14px!important;font-size:15px!important} textarea{min-height:76px!important} label{font-size:13px!important;font-weight:600!important} .form,form.form{display:grid!important;gap:12px!important} /* Onay kutulu etiketler yan yana kalsın (grid yapma) */ label:has(input[type=checkbox]),label:has(input[type=radio]){ display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important} label input[type=checkbox],label input[type=radio]{width:18px!important;height:18px!important;flex:none!important;margin:0!important;padding:0!important} /* Liste/satır bileşenleri */ .doc,.row,.task,.line{padding:12px 2px!important} .pill,.badge2{padding:6px 12px!important;font-size:12px!important;border-radius:var(--r-pill)!important} .msg{padding:13px 16px!important;border-radius:var(--r-inner)!important;margin:0 0 var(--gap) 0!important;font-size:14px!important} .tablewrap{border-radius:var(--r-card)!important;margin-bottom:var(--gap)} th,td{padding:11px 12px!important;font-size:13.5px!important} /* İkon / emoji ölçüleri — sayfadan sayfaya zıplamasın */ .ico,.emo,.big,.am-step .ico,.am-dash-card span,.home-ann-ico{font-size:26px!important;line-height:1!important} .am-feature:after{font-size:56px!important} .stat:after{font-size:48px!important} .seal{width:84px!important;height:84px!important;font-size:36px!important} /* Bölüm başlıkları */ .am-section{margin:0 0 22px!important} .am-title{margin-bottom:8px!important} /* ---- Mobil: tüm sayfalar aynı davransın ---- */ @media(max-width:720px){ :root{--r-card:16px; --pad-card:16px; --gap:13px} .wrap{padding:18px 13px 80px!important} .grid,.stats,.charts,.meters,.am-feature-grid,.am-steps,.am-dashboard,.home-ann-grid,.row{ grid-template-columns:1fr!important} .stats{grid-template-columns:1fr 1fr!important} .actions{gap:8px!important} .actions .btn{flex:1 1 calc(50% - 8px);min-width:130px} .btn{padding:11px 16px!important;min-height:44px} .doc{display:block!important} th,td{padding:9px 10px!important;font-size:13px!important} .seal{width:70px!important;height:70px!important;font-size:30px!important} } @media(max-width:420px){ .stats{grid-template-columns:1fr!important} .actions .btn{flex:1 1 100%} } /* ============================================================ GECE MODU YÜZEY TAMAMLAMASI Eski sayfalarda