/* Redesigned responsive layout - keeps all existing IDs & names */ /* Bu dosyanın kendi :root bloğu KALDIRILDI (Faz 5 / adım 2.2). Tanımladığı 9 token (--bg --surface --card --muted --text --brand --brand-2 --radius --shadow) artık assets/css/tokens.css'ten geliyor; değerleri BİREBİR aynıydı, bu yüzden hesaplanan değer değişmedi. Sayfa aldığı için anlamsal token'lar koyu değerlerine çözülür. tokens.css layout tarafından bu dosyadan ÖNCE yüklenir. TOKEN'LAMA KURALI (adım 2.1'den devralındı): sadece tokens.css'te BİREBİR AYNI değeri olan ham değerler var()'a çevrildi. Eşleşmeyenler (6/10/14/18/20px boşluklar, .95/1.05rem, #d6e6ff/#e2f2ff/#dff7ff, rgba(102,227,208,*) vurguları, rgba(255,255,255,.03/.1/.2/.25)) BİLEREK HAM bırakıldı — çevirmek piksel kaydırırdı. Kısayol (shorthand) bildirimler ancak TÜM uzunluk bileşenleri eşleşiyorsa çevrildi; aksi halde bildirimin tamamı ham kaldı. */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: var(--font-body); background:linear-gradient(180deg, var(--bg), var(--bg-2)); color:var(--text); line-height:var(--lh-body); } a{color:var(--link-color);text-decoration:none} a:hover{text-decoration:underline} .container{ width:min(1100px, 94%); margin:24px auto 64px; } /* Header */ .header{ display:flex;align-items:center;gap:14px; padding:14px 18px; background:rgba(255,255,255,.03); border:1px solid var(--border-soft); border-radius:var(--r-xl); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); } .header img{height:28px} .header h1{margin:0;font-size:var(--fs-lg);letter-spacing:.3px;color:var(--text-soft);font-weight:600} /* Grid */ .grid{ display:grid; gap:20px; grid-template-columns: 1fr; } @media(min-width:980px){ .grid{ grid-template-columns: minmax(0,2fr) minmax(0,1fr);} } .card{ background:var(--card); border:1px solid var(--border-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:18px; } .card h3{margin:0 0 var(--sp-3) 0; font-size:1.05rem; color:#d6e6ff} .muted{color:var(--text-muted)} /* Profile */ .profile{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; } .avatar{ width:104px;height:104px;border-radius:var(--r-circle);overflow:hidden; background:var(--dk-avatar);display:grid;place-items:center; font-weight:800;font-size:34px;color:#dff7ff; border:2px solid var(--border-strong); } .avatar img{width:100%;height:100%;object-fit:cover} .profile-info{flex:1 1 260px; min-width:260px} .profile-row{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap} .profile-row button{ background:transparent;border:1px dashed rgba(255,255,255,.25); color:var(--text-soft); padding:6px 10px; border-radius:10px; cursor:pointer } .profile-row button:hover{border-style:solid} .badges{display:flex; gap:var(--sp-3); margin-top:10px; text-align:center; /*flex-wrap:wrap*/} .badge{ background:var(--dk-fill-2); border:1px solid var(--border); padding:6px 10px; border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--text-soft) } /* Lists */ .list{display:grid; gap:var(--sp-3)} .list a{display:inline-block; padding:6px 8px; border-radius:10px; background:var(--dk-fill-2)} /* Posts */ .post{display:grid; gap:10px; border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:var(--sp-3); background:var(--inset)} /* Visitor-only serif override (was an inline `if (!$is_owner)` inside the .post rule before this file existed). Scoped to the body class the controller sets for /welcome/user/{id}; the owner view has no font-family here and inherits Inter. */ body.profile-visitor .post{font-family: var(--font-serif)} /* home.css/.post-image-style ile aynı düzeltme: `width:100%` küçük görselleri büyütüp bulanıklaştırıyor, dikey görselleri kartı ezecek kadar uzatıyordu. */ .post img{width:auto; height:auto; max-width:100%; max-height:360px; border-radius:10px; display:block} .post .link-preview{ display:grid; grid-template-columns: 120px 1fr; gap:var(--sp-3); background:var(--dk-inset-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; } @media(max-width:540px){ .post .link-preview{ grid-template-columns: 1fr; } } .post .post-actions{display:flex; gap:10px; flex-wrap:wrap} .post .post-actions button{ border:1px solid var(--border-strong); background:var(--dk-fill); color:var(--text-soft);padding:6px 10px;border-radius:10px;cursor:pointer } .quote-symbol{display:inline-block;margin:2px 6px 0 0;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);background:rgba(102,227,208,.12);border:1px solid rgba(102,227,208,.35)} /* Buttons */ .btn-primary, .load-more-btn, .load-more-videos-btn{ display:block;width:100%;padding:12px 14px;border-radius:var(--r-lg); background:linear-gradient(90deg, var(--brand), var(--accent-sky)); color:var(--on-brand);font-weight:700;border:none;cursor:pointer; letter-spacing:.2px } .btn-primary:hover, .load-more-btn:hover, .load-more-videos-btn:hover{filter:brightness(1.05)} /* Videos */ .youtube-video{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--dk-well)} .youtube-video .play-button{ position:absolute; inset:auto auto 10px 10px; padding:6px 10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--text-soft) } /* Utility */ .row{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap} .hidden{display:none} hr{border:none;height:1px;background:var(--border); margin:var(--sp-3) 0} .yt-thumb { width: 100%; height: 90%; border-radius: var(--r-md); display: block; } /* ===== Mini charts ===== */ .mini-grid{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:720px){.mini-grid{grid-template-columns:1fr 1fr}} .tile{background:var(--dk-fill);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3)} .tile h4{margin:0 0 6px 0;font-size:.95rem;color:#e2f2ff} .sparkline{width:100%;height:48px;display:block} .sparkline path{fill:none;stroke:url(#grad);stroke-width:2} .sparkline .bg{fill:rgba(102,227,208,.10)} .mini-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;color:var(--text-muted);font-size:var(--fs-md)} .sparkline polyline.line { fill:none; stroke:url(#grad); stroke-width:2 } .home-page{cursor:pointer;position:fixed;bottom:20px;right:30px;width:30px;height:30px;z-index:var(--z-fab)} .home-page img{display:block;width:30px;height:30px} @media(max-width:768px){.home-page{display:flex;align-items:center;justify-content:center;width:44px;height:44px;right:15px;bottom:15px}.home-page img{width:30px;height:30px}}