/* ===================================================================== Brolyz — Tasarım Sistemi v2 · "Deep Teal / Analytic Premium" --------------------------------------------------------------------- · Kimlik : Koyu deniz mavisi (abyss teal) + zümrüt (emerald) vurgu · Doku : Glassmorphism — saydam yüzey + backdrop-filter blur · Düzen : Mobile-first (temel stiller mobil, min-width ile büyür) · Not : Tüm sınıf adları korunmuştur; PHP/HTML yapısı değişmez. ===================================================================== */ /* ============================================================ 1) TOKENLAR ------------------------------------------------------------ Üç katmanlı sistem — hiçbir bileşende renk hardcode edilmez: A) Palet katmanı → [data-palette] ile 4 renk ailesi (ham değerler) B) Türetilmiş katman → yüzey/hat/cam/gölge formülleri (palete bağımsız) C) Takma adlar → eski değişken adları (geriye dönük uyum) Palet + mod (dark/light) JS tarafından üzerine yazılır ve localStorage'da saklanır: ============================================================ */ /* --- Palet/moddan BAĞIMSIZ tokenlar --- */ :root{ --radius:18px;--radius-sm:13px;--radius-xs:10px;--maxw:1180px; --blur:18px;--blur-sm:10px; --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,.84,.44,1); --dur:.22s; --font-d:"Space Grotesk",system-ui,sans-serif; --font-serif:"Playfair Display",Georgia,serif; --font-b:"Inter",system-ui,sans-serif; --font-m:"JetBrains Mono",ui-monospace,monospace; --safe-b:env(safe-area-inset-bottom,0px); --bnav-h:64px; } /* ============================================================ A) PALET KATMANI — KOYU MOD Her palet yalnızca ham renkleri tanımlar: --primary/-lt/-deep/-rgb · --accent/-lt/-rgb · --tint (hat tonu) --bg/-2/-3 · --surface* (kart rgb) · --txt/--muted* ============================================================ */ /* 1 — DERİN TEAL (varsayılan): analitik, sakin, premium */ :root,html[data-palette="teal"]{ --primary:#0fb98a;--primary-lt:#3ee0ac;--primary-deep:#087a5b;--primary-rgb:15,185,138; --accent:#14b8c4;--accent-lt:#5eead4;--accent-rgb:20,184,196; --tint:94,234,212; --bg:#04141a;--bg-2:#06202a;--bg-3:#0a2c38; --surface:9,38,48;--surface-2:12,48,60;--surface-nav:4,20,26; --txt:#e8f4f2;--muted:#8aa8ab;--muted-2:#5b7c82; --on-primary:#03181a; --orange:#e0913a;--orange-lt:#f0b264; --green:#10b981;--gold:#d9a441;--red:#e05252;--red-rgb:224,82,82;--gold-rgb:217,164,65; } /* 2 — MOR / NEON: yüksek enerji, gece modu odaklı */ html[data-palette="neon"]{ --primary:#a855f7;--primary-lt:#c99bff;--primary-deep:#7127c4;--primary-rgb:168,85,247; --accent:#22d3ee;--accent-lt:#7ee7fb;--accent-rgb:34,211,238; --tint:192,132,252; --bg:#0a0616;--bg-2:#130c24;--bg-3:#1b1233; --surface:26,16,48;--surface-2:34,22,60;--surface-nav:10,6,22; --txt:#f1ecfb;--muted:#a396c2;--muted-2:#6f6491; --on-primary:#12061f; --orange:#f59e0b;--orange-lt:#fbbf24; --green:#34d399;--gold:#facc15;--red:#f43f5e;--red-rgb:244,63,94;--gold-rgb:250,204,21; } /* 3 — ALTIN / SARI: prestij, ödül ve şampiyonluk vurgusu */ html[data-palette="gold"]{ --primary:#e0b23c;--primary-lt:#f5d78e;--primary-deep:#a37716;--primary-rgb:224,178,60; --accent:#e07c3c;--accent-lt:#f0a868;--accent-rgb:224,124,60; --tint:245,215,142; --bg:#12100a;--bg-2:#1b1810;--bg-3:#262117; --surface:36,31,19;--surface-2:48,41,25;--surface-nav:16,14,9; --txt:#f7f1e2;--muted:#b0a289;--muted-2:#7d715c; --on-primary:#1a1305; --orange:#e07c3c;--orange-lt:#f0a868; --green:#8fbf4d;--gold:#f5d78e;--red:#df5f4a;--red-rgb:223,95,74;--gold-rgb:245,215,142; } /* 4 — TURUNCU: sıcak, hareketli, topluluk enerjisi */ html[data-palette="orange"]{ --primary:#f97316;--primary-lt:#fdaa61;--primary-deep:#b34a06;--primary-rgb:249,115,22; --accent:#f43f5e;--accent-lt:#fb7185;--accent-rgb:244,63,94; --tint:253,170,97; --bg:#140b06;--bg-2:#1e120a;--bg-3:#2a1a0f; --surface:40,23,13;--surface-2:53,31,17;--surface-nav:18,10,5; --txt:#fdf0e6;--muted:#bb9a83;--muted-2:#856a58; --on-primary:#1c0d02; --orange:#f97316;--orange-lt:#fdaa61; --green:#22c55e;--gold:#f0b429;--red:#ef4444;--red-rgb:239,68,68;--gold-rgb:240,180,41; } /* ============================================================ A2) PALET KATMANI — AÇIK MOD Ton kimliği korunur; yüzeyler beyaza, metin koyuya döner. Vurgu rengi kontrast için bir tık koyulaştırılır (WCAG). ============================================================ */ html.light{ --bg:#eef3f4;--bg-2:#e4ecee;--bg-3:#d9e5e7; --surface:255,255,255;--surface-2:240,246,247;--surface-nav:255,255,255; --txt:#06252c;--muted:#4d7076;--muted-2:#7d9aa0; --on-primary:#ffffff; } html.light,html.light[data-palette="teal"]{ --primary:#0a9c74;--primary-lt:#0b8a67;--primary-deep:#076b50;--primary-rgb:10,156,116; --accent:#0d8f9b;--accent-lt:#12a9b7;--accent-rgb:13,143,155; --tint:6,52,62; } html.light[data-palette="neon"]{ --primary:#8b2fd6;--primary-lt:#7423b8;--primary-deep:#5a1691;--primary-rgb:139,47,214; --accent:#0e9bb8;--accent-lt:#12b3d4;--accent-rgb:14,155,184; --tint:60,30,92; --bg:#f4f0fb;--bg-2:#ebe4f7;--bg-3:#e0d6f2; --surface-2:243,238,252; --txt:#1c0f2e;--muted:#61527e;--muted-2:#8b7fa5; } html.light[data-palette="gold"]{ --primary:#a8791a;--primary-lt:#8f6512;--primary-deep:#6f4d0b;--primary-rgb:168,121,26; --accent:#b35f1e;--accent-lt:#c97430;--accent-rgb:179,95,30; --tint:78,58,20; --bg:#faf6ec;--bg-2:#f3ecdc;--bg-3:#ebe1cc; --surface-2:250,245,235; --txt:#2a2109;--muted:#6e6046;--muted-2:#9a8b6d; } html.light[data-palette="orange"]{ --primary:#c2530a;--primary-lt:#a84607;--primary-deep:#853705;--primary-rgb:194,83,10; --accent:#c8253e;--accent-lt:#dc3b53;--accent-rgb:200,37,62; --tint:88,42,12; --bg:#fdf4ed;--bg-2:#f8e9dd;--bg-3:#f2dcca; --surface-2:253,246,240; --txt:#2c1608;--muted:#775844;--muted-2:#a4816a; } /* ============================================================ B) TÜRETİLMİŞ KATMAN — yüzey / hat / cam / gölge formülleri Palet değişince bunlar otomatik yeniden hesaplanır. ============================================================ */ :root{ --glass-bg:rgba(var(--surface),.62); --glass-bg-2:rgba(var(--surface-2),.55); --glass-border:rgba(var(--tint),.16); --glass-blur:var(--blur); --card:var(--glass-bg); --card-2:var(--glass-bg-2); --card-solid:rgb(var(--surface)); --nav-bg:rgba(var(--surface-nav),.72); --line:rgba(var(--tint),.11); --line-strong:rgba(var(--tint),.26); --primary-glow:rgba(var(--primary-rgb),.45); --primary-soft:rgba(var(--primary-rgb),.12); --primary-soft-2:rgba(var(--primary-rgb),.2); --tint-soft:rgba(var(--tint),.06); --tint-soft-2:rgba(var(--tint),.1); --shadow:0 18px 46px -18px rgba(0,0,0,.7); --shadow-sm:0 8px 22px -12px rgba(0,0,0,.55); --shadow-glow:0 0 0 1px var(--line),0 18px 46px -20px rgba(0,0,0,.8); --ring:0 0 0 3px rgba(var(--primary-rgb),.22); /* C) Takma adlar — mevcut sayfalardaki var(--purple) vb. kullanımlar */ --purple:var(--primary);--purple-lt:var(--primary-lt);--purple-deep:var(--primary-deep); --purple-glow:var(--primary-glow);--teal:var(--accent);--teal-lt:var(--accent-lt); } html.light{ --glass-bg:rgba(var(--surface),.72); --glass-bg-2:rgba(var(--surface-2),.8); --line:rgba(var(--tint),.10); --line-strong:rgba(var(--tint),.2); --shadow:0 16px 40px -20px rgba(0,0,0,.28); --shadow-sm:0 6px 18px -10px rgba(0,0,0,.2); --ring:0 0 0 3px rgba(var(--primary-rgb),.18); } /* Palet/mod geçişi: renk sıçraması yerine yumuşak çapraz geçiş */ html.tema-gecis,html.tema-gecis *{ transition:background-color .28s var(--ease),border-color .28s var(--ease), color .28s var(--ease),box-shadow .28s var(--ease)!important; } /* ============================================================ 2) TEMEL ============================================================ */ *{box-sizing:border-box} html,body{margin:0;padding:0} /* [hidden] her zaman kazansın — bileşenlerdeki display:flex/grid bunu ezmesin. Filtre motoru ve boş durumlar görünürlüğü bu öznitelikle yönetir. */ [hidden]{display:none!important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background: radial-gradient(120% 70% at 12% -8%,rgba(var(--primary-rgb),.14),transparent 58%), radial-gradient(100% 60% at 92% 4%,rgba(var(--accent-rgb),.12),transparent 60%), var(--bg); background-attachment:fixed; color:var(--txt);font-family:var(--font-b);-webkit-font-smoothing:antialiased; line-height:1.55;min-height:100vh; padding-bottom:calc(var(--bnav-h) + var(--safe-b) + 18px); transition:background .3s var(--ease),color .3s var(--ease); overscroll-behavior-y:none; } html.light body{ background: radial-gradient(120% 70% at 12% -8%,rgba(var(--primary-rgb),.10),transparent 58%), radial-gradient(100% 60% at 92% 4%,rgba(var(--accent-rgb),.10),transparent 60%), var(--bg); background-attachment:fixed; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} img{display:block;max-width:100%} ::selection{background:var(--purple);color:var(--on-primary)} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px} .mini{font-size:11.5px;color:var(--muted-2);margin:6px 0 0} .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-lt)} /* Cam yüzey — KATMAN 1: sabit arayüz (menü, modal, panel). Tam bulanıklık. */ .glass,header.nav,.ndrop,.udrop,.umenu,.navdrop-menu,.modal,.notif-pop, .tweak-panel,.drawer,.bnav,#cerez-banner,#drawer-more,.toast{ -webkit-backdrop-filter:blur(var(--blur)) saturate(150%); backdrop-filter:blur(var(--blur)) saturate(150%); } /* Cam yüzey — KATMAN 2: liste içeriği (çok sayıda örnek). Hafif bulanıklık; mobilde kaydırma akıcılığı için tamamen kapatılır. */ @media (min-width:768px){ .card,.acard,.stat,.tcard,.cfeed,.board,.hstat,.agw-row,.rep,.sp-card{ -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(140%); backdrop-filter:blur(var(--blur-sm)) saturate(140%); } } /* Bulanıklık desteklenmiyorsa yüzeyler donuk (okunabilirlik garanti) */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--card:#0a2731;--card-2:#0d3341;--nav-bg:#051a21} html.light{--card:#ffffff;--card-2:#eef6f6;--nav-bg:#ffffff} } /* ============================================================ 3) ÜST NAVİGASYON ============================================================ */ header.nav{ position:sticky;top:0;z-index:40; background:var(--nav-bg); border-bottom:1px solid var(--line); transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } header.nav.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.9);border-bottom-color:var(--line-strong)} .nav-row{display:flex;align-items:center;gap:6px;height:60px;padding:0 14px;max-width:1400px;margin:0 auto} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;margin-right:10px;text-decoration:none} .brand .mark{ width:34px;height:34px;flex:0 0 auto;border-radius:11px; background:linear-gradient(140deg,var(--purple),var(--teal)); display:grid;place-items:center; box-shadow:0 0 0 1px rgba(var(--tint),.28),0 6px 18px -8px var(--purple-glow); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .brand:hover .mark{transform:translateY(-1px) rotate(-4deg);box-shadow:0 0 0 1px var(--line-strong),0 10px 24px -8px var(--purple-glow)} .brand .mark img{width:22px;height:22px;object-fit:contain} .brand b{font-size:15px;letter-spacing:.02em;line-height:1.1;color:var(--txt)} .brand small{display:block;font-family:var(--font-b);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .nav-spacer{flex:1} .nav-actions{display:flex;align-items:center;gap:8px} /* Sekmeler */ nav.tabs{display:flex;align-items:center;gap:2px} .ntab{ position:relative;font-family:var(--font-b);font-weight:500;font-size:14px; padding:8px 13px;border-radius:10px;color:var(--muted); transition:color var(--dur) var(--ease),background var(--dur) var(--ease); display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer; } .ntab:hover{color:var(--txt);background:rgba(var(--tint),.07)} .ntab.on{color:var(--txt)} .ntab.on::after{ content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--purple),var(--teal)); animation:tabIn .35s var(--ease) both; } @keyframes tabIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} .ntab.disabled{opacity:.4;cursor:default;pointer-events:none} .ntab .chev{font-size:9px;opacity:.55;transition:transform var(--dur) var(--ease)} .ntab.dropopen .chev{transform:rotate(180deg)} /* Açılır menüler (cam) */ .ndrop{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;display:none;z-index:100;animation:rise .18s var(--ease)} .ntab.dropopen .ndrop,.ntab:focus-within .ndrop,.ntab:hover .ndrop{display:block} .ntab .ndrop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .ndrop-sep{height:1px;background:var(--line);margin:4px 6px} .nditem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--txt);width:100%;text-align:left;transition:background .14s var(--ease),color .14s var(--ease)} .nditem:hover{background:rgba(var(--primary-rgb),.14);color:var(--purple-lt)} .nditem.on{color:var(--purple-lt)} .nditem .ndico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:0 0 auto} .nditem .ndico.trophy{background:rgba(var(--accent-rgb),.15)} .nditem .ndico.list{background:rgba(var(--primary-rgb),.15)} .nditem .ndico.soon{background:rgba(var(--tint),.08);font-size:11px} /* Zil */ .bell{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);background:rgba(var(--tint),.04);transition:all var(--dur) var(--ease)} .bell:hover{background:rgba(var(--tint),.10);color:var(--txt);border-color:var(--line-strong);transform:translateY(-1px)} .bell:active{transform:scale(.94)} .bdot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);box-shadow:0 2px 8px rgba(var(--red-rgb),.5)} /* Kullanıcı çipi */ .user-chip{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:99px;border:1px solid var(--line);cursor:pointer;transition:all var(--dur) var(--ease);position:relative} .user-chip:hover{background:rgba(var(--tint),.08);border-color:var(--line-strong)} .user-chip .uav{width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,var(--purple),var(--teal));display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--on-primary);flex:0 0 auto;overflow:hidden} .user-chip .uav img{width:100%;height:100%;object-fit:cover} .user-chip .uname{font-size:13.5px;font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-chip .uchev{font-size:11px;color:var(--muted);transition:transform var(--dur) var(--ease)} .user-chip.open .uchev{transform:rotate(180deg)} .udrop{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;display:none;z-index:55;animation:rise .18s var(--ease)} .user-chip.open .udrop{display:block} .udrop-head{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px} .udrop-head .udh-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px} .udrop-head .udh-email{font-size:12px;color:var(--muted);margin-top:2px} .uditem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--txt);width:100%;text-align:left;transition:background .14s var(--ease)} .uditem:hover{background:rgba(var(--tint),.09)} .uditem.danger{color:var(--red)} .uditem .udico{font-size:15px;width:20px;text-align:center;flex:0 0 auto} .tip{cursor:help;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(var(--tint),.14);font-size:11px;vertical-align:middle;margin-left:4px;position:relative} .tip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--card-solid);border:1px solid var(--line-strong);color:var(--txt);font-size:12px;font-weight:500;padding:7px 11px;border-radius:9px;white-space:pre-wrap;max-width:240px;box-shadow:var(--shadow);z-index:200;pointer-events:none} /* ============================================================ 4) BUTONLAR — dokunmatik hedefler ≥44px ============================================================ */ .btn{ display:inline-flex;align-items:center;gap:7px;justify-content:center; font-family:var(--font-d);font-weight:600;font-size:13.5px; padding:11px 17px;border-radius:12px;min-height:42px; transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease); white-space:nowrap;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent; } .btn:active{transform:scale(.97)} .btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:var(--on-primary);box-shadow:0 8px 22px -10px var(--purple-glow)} .btn-primary:hover{box-shadow:0 12px 28px -10px var(--purple-glow);transform:translateY(-1px)} .btn-ghost{border:1px solid var(--line-strong);color:var(--txt);background:rgba(var(--tint),.04)} .btn-ghost:hover{background:rgba(var(--tint),.10);border-color:var(--purple)} .btn-danger{border:1px solid rgba(var(--red-rgb),.42);color:var(--red);background:rgba(var(--red-rgb),.06)} .btn-danger:hover{background:rgba(var(--red-rgb),.14)} .btn-orange{background:linear-gradient(135deg,var(--orange),#c97a24);color:#1b1206;box-shadow:0 8px 22px -12px rgba(var(--accent-rgb),.6)} /* Rozetler / etiketler */ .pilltag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px} .pilltag.admin{background:rgba(var(--accent-rgb),.16);color:var(--orange-lt)} .pilltag.mod{background:rgba(var(--primary-rgb),.18);color:var(--purple-lt)} .pilltag.ban{background:rgba(var(--red-rgb),.16);color:#f08b8b} .avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,var(--purple),var(--teal));display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--on-primary);flex:0 0 auto;overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover} /* ============================================================ 5) SAYFA BAŞLIKLARI + İSTATİSTİK KUTULARI (analitik dil) ============================================================ */ .poolhead{padding:22px 0 6px} .ph-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px} .ph-title{font-family:var(--font-d);font-weight:700;font-size:clamp(26px,7vw,42px);margin:8px 0;letter-spacing:-.025em;line-height:1.06} .ph-sub{color:var(--muted);margin:0;font-size:14.5px;max-width:560px;line-height:1.6} .stats-row{display:grid;grid-template-columns:1fr;gap:10px} .stat{ position:relative;border-radius:var(--radius-sm);padding:18px; display:flex;flex-direction:column;justify-content:center; background:var(--card);border:1px solid var(--line);overflow:hidden; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--purple),var(--teal));opacity:.85} .stat:hover{transform:translateY(-2px);border-color:var(--line-strong)} .stat .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;font-weight:600} .stat .num{font-family:var(--font-d);font-weight:700;font-size:30px;line-height:1.05;margin-top:8px;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .stat .num small{font-size:16px;color:var(--muted);font-weight:600;margin-left:4px} .otherprizes{margin-top:8px;font-size:13px;color:var(--muted)} .otherprizes b{color:var(--txt);font-weight:600} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(var(--primary-rgb),.6);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.5)}70%{box-shadow:0 0 0 9px rgba(var(--primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)}} /* ============================================================ 6) ANA SAYFA HERO ============================================================ */ .hero{position:relative;overflow:hidden;text-align:center;padding:48px 16px 0;background:radial-gradient(120% 90% at 50% -10%,rgba(var(--primary-rgb),.26),transparent 62%),transparent} html.light .hero{background:radial-gradient(120% 90% at 50% -10%,rgba(var(--primary-rgb),.16),transparent 62%),transparent} .hero-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden} .hero-confetti i{position:absolute;display:block;width:9px;height:9px;border-radius:2px;opacity:0;animation:floatc linear infinite} @keyframes floatc{0%{opacity:0;transform:translateY(40px) rotate(0)}10%{opacity:.6}90%{opacity:.4}100%{opacity:0;transform:translateY(-60px) rotate(220deg)}} .hero-orb{position:absolute;border-radius:50%;filter:blur(52px);pointer-events:none;opacity:.5;z-index:0} .hero-orb.o1{width:320px;height:320px;background:radial-gradient(circle,rgba(var(--primary-rgb),.55),transparent 70%);top:-70px;left:6%;animation:orbA 16s ease-in-out infinite} .hero-orb.o2{width:290px;height:290px;background:radial-gradient(circle,rgba(var(--accent-rgb),.45),transparent 70%);top:40px;right:4%;animation:orbB 19s ease-in-out infinite} .hero-orb.o3{width:250px;height:250px;background:radial-gradient(circle,rgba(var(--tint),.3),transparent 70%);bottom:-40px;left:38%;animation:orbA 17s ease-in-out infinite reverse} @keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}} @keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,24px) scale(1.08)}} @keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .hero-eyebrow,.hero-sub,.hero-cta,.hero-power,.hero-stats{animation:heroIn .75s var(--ease) both} .hero-sub{animation-delay:.1s}.hero-cta{animation-delay:.18s}.hero-power{animation-delay:.26s}.hero-stats{animation-delay:.34s} .hero-inner{position:relative;max-width:880px;margin:0 auto} .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:8px 17px;background:var(--card);margin-bottom:26px} .hero-eyebrow .hd{width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 14px var(--purple)} .hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(34px,9vw,80px);line-height:1.05;letter-spacing:-.015em;margin:0 0 22px} .hero h1 .it{ font-style:italic;color:var(--purple-lt); background:linear-gradient(100deg,var(--purple-lt),var(--teal-lt),var(--purple-lt)); background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:shine 5s linear infinite; } @keyframes shine{to{background-position:200% center}} .hero-rot{transition:transform .45s var(--ease),opacity .45s var(--ease);will-change:transform,opacity} .hero-rot.out{opacity:0;transform:translateX(-46px)} .hero-rot.in{opacity:0;transform:translateX(46px);transition:none} .hero-sub{max-width:620px;margin:0 auto 30px;color:var(--muted);font-size:clamp(15px,4vw,17px);line-height:1.7} .hero-sub b{color:var(--txt);font-weight:700} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px} .hero-cta .pill{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;padding:15px 26px;border-radius:99px;transition:all var(--dur) var(--ease);cursor:pointer;min-height:52px} .hero-cta .pill.main{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:var(--on-primary);box-shadow:0 12px 34px -12px var(--purple-glow);animation:ctaGlow 3s ease-in-out infinite} .hero-cta .pill.main::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:sweep 3s ease-in-out infinite;pointer-events:none} @keyframes sweep{0%,55%{left:-120%}100%{left:160%}} @keyframes ctaGlow{0%,100%{box-shadow:0 12px 34px -14px var(--purple-glow)}50%{box-shadow:0 14px 44px -12px var(--purple-glow),0 0 0 4px rgba(var(--primary-rgb),.14)}} .hero-cta .pill.main:hover{transform:translateY(-2px)} .hero-cta .pill.ghost{background:var(--card);border:1px solid var(--line-strong);color:var(--txt)} .hero-cta .pill.ghost:hover{border-color:var(--purple);transform:translateY(-2px)} .hero-power{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:720px;margin:0 auto 34px} .hero-power .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:9px 15px;transition:all var(--dur) var(--ease)} .hero-power .chip:hover{border-color:var(--purple);color:var(--txt);transform:translateY(-2px)} .hero-power .chip .e{font-size:15px;display:inline-flex} .hero-power .chip b{color:var(--purple-lt);font-family:var(--font-m);font-weight:700} .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:780px;margin:0 auto;padding-bottom:48px} .hstat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)} .hstat:hover{transform:translateY(-2px);border-color:var(--line-strong)} .hstat .n{font-family:var(--font-d);font-weight:700;font-size:27px;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .hstat .l{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px} /* Şerit (ticker) */ .ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);display:flex;align-items:stretch} .ticker-tag{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-primary);background:linear-gradient(135deg,var(--purple),var(--teal));padding:13px 18px;z-index:2} .ticker-track{flex:0 0 auto;display:flex;gap:44px;white-space:nowrap;animation:tick 30s linear infinite;padding:13px 22px;width:max-content;will-change:transform} .ticker:hover .ticker-track{animation-play-state:paused} .ticker-track a{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;transition:color .14s} .ticker-track a:hover{color:var(--purple-lt)} .ticker-track a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--purple-lt);flex:0 0 auto} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Canlı akış */ .cfeed{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;max-width:680px;margin:0 auto;box-shadow:var(--shadow-sm)} .cfeed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card-2)} .cfeed-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--green)} #cfeed-list{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch} .cfeed-row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--txt);transition:background .14s;animation:cfeedIn .45s var(--ease)} .cfeed-row:last-child{border-bottom:0} .cfeed-row:hover{background:rgba(var(--tint),.06)} .cfeed-ico{font-size:16px;flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(var(--tint),.08);color:var(--purple-lt)} .cfeed-txt{flex:1;min-width:0;font-size:13.5px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfeed-txt b{color:var(--purple-lt);font-weight:700} .cfeed-time{flex:0 0 auto;font-size:11.5px;color:var(--muted-2);font-weight:600} @keyframes cfeedIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ============================================================ 7) TOKEN KARTLARI (VSTR / analitik panel) ============================================================ */ .tok-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;margin-top:6px} .tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)} .tcard.center{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 18px 44px -22px rgba(var(--accent-rgb),.5);position:relative;overflow:hidden} .tcard.center::before{content:"";position:absolute;top:70px;left:0;right:0;margin:0 auto;width:190px;height:190px;background:url('vstr-logo-watermark.png') center/contain no-repeat;opacity:.07;pointer-events:none;z-index:0} .tcard.center>*{position:relative;z-index:1} .tcard-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .tcard-h h3{font-family:var(--font-d);font-weight:700;font-size:18px;margin:0} .tlabel{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .tprice{font-family:var(--font-d);font-weight:700;font-size:clamp(34px,9vw,46px);letter-spacing:-.03em;line-height:1;margin:4px 0 8px;font-variant-numeric:tabular-nums} .trow{display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--line)} .trow .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--tint),.07);font-size:15px;flex:0 0 auto;color:var(--purple-lt)} .trow .tv{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums} .trow .ts{font-size:12px;color:var(--muted)} .tbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .tmini{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);padding:9px 0;border-top:1px solid var(--line)} .tmini b{color:var(--txt);font-family:var(--font-m);font-weight:700} .skel{display:inline-block;height:1em;width:72px;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,var(--line-strong) 37%,var(--line) 63%);background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;vertical-align:middle} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} /* Topluluk vitrini kart görseli */ .cthumb{position:relative;height:150px;margin:-16px -16px 14px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:linear-gradient(135deg,rgba(var(--primary-rgb),.22),rgba(var(--accent-rgb),.16))} .cthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .card:hover .cthumb img{transform:scale(1.04)} .cthumb .cph{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;opacity:.45} .cthumb .ccat{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt);background:rgba(var(--surface-nav),.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px;border:1px solid rgba(var(--tint),.2)} .cleader{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#1a1205;background:linear-gradient(90deg,#f5d78e,#d9a441);padding:4px 10px;border-radius:99px;box-shadow:0 4px 14px rgba(var(--accent-rgb),.45)} .cdrop{border:1.5px dashed var(--line-strong);border-radius:var(--radius-xs);padding:18px;text-align:center;cursor:pointer;transition:all .15s var(--ease);background:rgba(var(--tint),.03)} .cdrop:hover,.cdrop.drag{border-color:var(--purple);background:rgba(var(--primary-rgb),.08)} .cdrop img{max-height:120px;border-radius:8px;margin:0 auto} .teamtag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;background:rgba(var(--primary-rgb),.14);color:var(--purple-lt);padding:5px 9px;border-radius:99px} .teamtag button{background:none;border:0;color:inherit;cursor:pointer;font-size:13px;line-height:1;opacity:.7} .miniav{width:22px;height:22px;border-radius:50%;border:2px solid var(--card-solid);display:grid;place-items:center;font-size:9px;font-weight:700;background:var(--purple);color:var(--on-primary);overflow:hidden} .miniav img{width:100%;height:100%;object-fit:cover} /* ============================================================ 8) BÖLÜMLER + KARTLAR ============================================================ */ main{padding-top:18px} .sec{margin-bottom:32px} .sec-head{display:flex;align-items:center;gap:10px;margin:0 0 14px} .sec-head h2{font-family:var(--font-d);font-weight:700;font-size:17px;margin:0;letter-spacing:.01em;text-transform:uppercase} .sec-head .count{font-size:12px;color:var(--purple-lt);font-weight:700;background:rgba(var(--primary-rgb),.12);padding:3px 9px;border-radius:99px} .grid{display:grid;grid-template-columns:1fr;gap:12px} .sec .grid{content-visibility:auto;contain-intrinsic-size:auto 600px} .card{ position:relative;border-radius:var(--radius);padding:16px; background:var(--card);border:1px solid var(--line);overflow:hidden; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--teal),var(--purple-lt));z-index:2;opacity:.9} .card.no-topbar::before{display:none} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 50% -20%,rgba(var(--tint),.08),transparent 60%);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none} .card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-3px)} .card:hover::after{opacity:1} .card.accent-orange::before{background:linear-gradient(90deg,var(--orange),var(--orange-lt))} .card.accent-green::before{background:linear-gradient(90deg,var(--green),var(--teal-lt))} .card-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .card-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px} .ico{width:54px;height:54px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;font-size:26px;background:linear-gradient(140deg,rgba(var(--primary-rgb),.22),rgba(var(--accent-rgb),.12));border:1px solid var(--line);position:relative} .card.accent-orange .ico{background:linear-gradient(140deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.1))} .card.accent-green .ico{background:linear-gradient(140deg,rgba(var(--primary-rgb),.2),rgba(var(--tint),.1))} .ico img{width:36px;height:36px;object-fit:contain;border-radius:8px} .card-body{flex:1;min-width:0} .card h3{font-family:var(--font-d);font-weight:700;font-size:16.5px;line-height:1.2;margin:2px 0 8px;letter-spacing:-.005em;text-transform:uppercase} .row{display:flex;gap:8px;font-size:13px;margin:5px 0;align-items:baseline} .row .k{color:var(--muted);min-width:80px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600} .row .v{font-weight:700} .row .v.prize{color:var(--txt)} .row .v.mono{font-family:var(--font-m);font-weight:700;font-variant-numeric:tabular-nums} .row .v.green{color:var(--green)} .report-btn{display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);color:var(--muted-2);font-size:12.5px;transition:all var(--dur) var(--ease);flex:0 0 auto;font-weight:600;font-family:var(--font-b);background:transparent} .report-btn:hover{color:var(--red);border-color:rgba(var(--red-rgb),.4);background:rgba(var(--red-rgb),.07)} .card-foot{display:flex;align-items:center;gap:8px;margin-top:14px} .join{ flex:1;background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:var(--on-primary); font-family:var(--font-d);font-weight:700;font-size:14px;letter-spacing:.04em; padding:13px;border-radius:12px;min-height:46px; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease); box-shadow:0 8px 20px -12px var(--purple-glow); } .join:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px var(--purple-glow)} .join:active{transform:scale(.98)} .join.success{background:linear-gradient(135deg,var(--green),#0b8a63)} .icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:all var(--dur) var(--ease);flex:0 0 auto;font-size:16px;background:rgba(var(--tint),.04)} .icon-btn:hover{color:var(--txt);border-color:var(--line-strong);background:rgba(var(--tint),.1)} .icon-btn:active{transform:scale(.94)} .kalan-row{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} .kalan-val{font-family:var(--font-m);font-weight:700;font-size:13px;color:var(--purple-lt);letter-spacing:0;font-variant-numeric:tabular-nums} .urgent .kalan-val{color:var(--red)} .cdgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px} .cdbox{background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center} .cdbox .cdnum{display:block;font-family:var(--font-m);font-weight:800;font-size:19px;color:var(--purple-lt);letter-spacing:0;font-variant-numeric:tabular-nums} .cdbox .cdlbl{display:block;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:4px} .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px} .badge.soon{background:rgba(var(--accent-rgb),.15);color:var(--gold)} .badge.live{background:rgba(var(--primary-rgb),.15);color:var(--green)} .badge.urg{background:rgba(var(--red-rgb),.15);color:#f08b8b} .badge.wait{background:rgba(var(--accent-rgb),.15);color:var(--gold)} .card.is-done{opacity:.72} .card.is-done:hover{transform:none} .winner{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 13px;border-radius:13px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));border:1px solid rgba(var(--accent-rgb),.3);font-weight:600;font-size:13.5px;position:relative;overflow:hidden} .winner .trophy{font-size:22px;flex:0 0 auto;color:var(--gold);display:inline-flex;filter:drop-shadow(0 2px 6px rgba(var(--accent-rgb),.4))} .winner .wtxt{display:flex;flex-direction:column;gap:1px;min-width:0} .winner .wtxt .wlbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;opacity:.9} .winner .wtxt b{color:var(--txt);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .winner b{color:var(--gold)} .check{width:20px;height:20px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:var(--on-primary);font-size:11px;font-weight:900;flex:0 0 auto} .winprompt{margin-top:12px;padding:11px 13px;border-radius:12px;background:rgba(var(--accent-rgb),.08);border:1px dashed rgba(var(--accent-rgb),.32)} .winprompt p{margin:0 0 8px;font-size:13px;color:var(--gold);font-weight:600} .empty{border:1.5px dashed var(--line-strong);border-radius:var(--radius);padding:34px 22px;text-align:center;color:var(--muted);grid-column:1/-1;background:rgba(var(--tint),.02)} .empty b{color:var(--txt);font-family:var(--font-d);display:block;margin-bottom:6px;font-size:16px} /* Liderlik tablosu */ .board{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)} .board .hr,.board .lr{display:grid;grid-template-columns:44px 1fr 74px;gap:8px;padding:13px 14px;align-items:center} .board .hr{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600;background:var(--card-2)} .board .lr{border-bottom:1px solid var(--line);transition:background .14s} .board .lr:hover{background:rgba(var(--tint),.06)} .board .lr:last-child{border-bottom:0} .rank{font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums} .rank.top{color:var(--gold)} .lr .who{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0} .lr .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lr .nv{font-family:var(--font-d);font-weight:700;font-variant-numeric:tabular-nums} .lr .nv.p{color:var(--purple-lt)} /* Panel */ .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap} .mine{display:grid;grid-template-columns:1fr;gap:12px} .manage{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .manage button{font-size:12.5px;font-weight:600;padding:9px 13px;border-radius:10px;border:1px solid var(--line);transition:all var(--dur) var(--ease)} .manage button:hover{border-color:var(--line-strong);background:rgba(var(--tint),.07)} .manage .del:hover{border-color:rgba(var(--red-rgb),.4);color:var(--red);background:rgba(var(--red-rgb),.07)} .manage .win{border-color:rgba(var(--accent-rgb),.4);color:var(--gold)} .notice{border:1px solid rgba(var(--red-rgb),.35);background:rgba(var(--red-rgb),.08);color:#f0a3a3;border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;font-weight:500;margin-bottom:16px} .notice.gold{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);color:#efd79c} .modal.warn .notice,.modal.warn .notice.gold{color:var(--teal-lt)!important;border-color:rgba(var(--primary-rgb),.45)!important;background:rgba(var(--primary-rgb),.14)!important} .modal.warn .notice b{color:inherit!important;font-weight:700} html.light .modal.warn .notice,html.light .modal.warn .notice.gold{color:var(--primary-deep)!important;background:rgba(var(--primary-rgb),.1)!important} /* ============================================================ 9) ADMIN / YÖNETİM BİLEŞENLERİ ============================================================ */ .acard{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)} .acard h3{font-family:var(--font-d);font-weight:700;margin:0 0 4px;font-size:17px} .acard .desc{color:var(--muted);font-size:13px;margin:0 0 16px} .ahdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px} .searchbox{flex:1 1 100%;min-width:0;background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--txt);font-family:inherit;font-size:14px;transition:all var(--dur) var(--ease)} .searchbox:focus{outline:none;border-color:var(--purple);box-shadow:var(--ring)} .searchbox::placeholder{color:var(--muted-2)} .agw-grouplbl{font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;display:flex;align-items:center;gap:8px} .agw-grouplbl:first-child{margin-top:0} .agw-grouplbl .count{font-size:10.5px;background:rgba(var(--tint),.1);color:var(--purple-lt);padding:2px 8px;border-radius:99px} .agw-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:8px;background:var(--card);flex-wrap:wrap;transition:border-color var(--dur) var(--ease)} .agw-row:hover{border-color:var(--line-strong)} .agw-ico{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;font-size:19px;background:rgba(var(--primary-rgb),.12);border:1px solid var(--line)} .agw-ico img{width:30px;height:30px;object-fit:contain;border-radius:7px} .agw-main{flex:1;min-width:150px} .agw-top{display:flex;align-items:center;gap:9px;margin-bottom:3px} .agw-top b{font-family:var(--font-d);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .agw-meta{font-size:12px;color:var(--muted)} .agw-act{display:flex;gap:7px;flex-wrap:wrap;flex:0 0 auto} .agw-act button{font-size:12px;font-weight:600;padding:8px 11px;border-radius:9px;border:1px solid var(--line);white-space:nowrap;transition:all var(--dur) var(--ease)} .agw-act button:hover{border-color:var(--line-strong);background:rgba(var(--tint),.07)} .agw-act .del:hover{border-color:rgba(var(--red-rgb),.4);color:var(--red)} .agw-act .win{border-color:rgba(var(--accent-rgb),.4);color:var(--gold)} .rep{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;background:var(--card-2)} .rep .rh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} .rep .rt{font-family:var(--font-d);font-weight:700;font-size:15px} .cnt{background:rgba(var(--red-rgb),.15);color:#f08b8b;font-weight:700;font-size:12px;padding:3px 9px;border-radius:99px} .reasons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .rtag{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:8px;background:rgba(var(--tint),.08);color:var(--muted)} .reps-by{font-size:12px;color:var(--muted);margin-bottom:10px} .rep-actions,.banbox{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .rep-actions button,.banbox button{font-size:12px;font-weight:600;padding:8px 11px;border-radius:9px;border:1px solid var(--line);transition:all var(--dur) var(--ease)} .rep-actions button:hover,.banbox button:hover{border-color:var(--line-strong);background:rgba(var(--tint),.07)} .daysin{width:64px;background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:9px;padding:8px 9px;color:var(--txt);font-family:inherit;font-size:12.5px} .utable{width:100%;border-collapse:collapse;font-size:13.5px} .utable th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line)} .utable td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top} .utable tr:hover td{background:rgba(var(--tint),.04)} .utable .ua{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .utable .ua button{font-size:11.5px;font-weight:600;padding:7px 10px;border-radius:9px;border:1px solid var(--line);transition:all var(--dur) var(--ease)} .utable .ua button:hover{border-color:var(--line-strong);background:rgba(var(--tint),.07)} .iconlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px;margin-bottom:16px} .iconlib .it{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;background:rgba(var(--tint),.04)} .iconlib .it .g{font-size:25px;height:34px;display:grid;place-items:center} .iconlib .it img{width:30px;height:30px;object-fit:contain;margin:0 auto} .iconlib .it .nm{font-size:10.5px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .iconlib .it .x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--card-solid);border:1px solid rgba(var(--red-rgb),.4);color:var(--red);font-size:11px;display:grid;place-items:center} .addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .addrow .field{margin:0;flex:1;min-width:140px} /* ============================================================ 10) YÜZEN BUTONLAR ============================================================ */ .fab{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(var(--bnav-h) + var(--safe-b) + 14px);z-index:45; width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(140deg,var(--purple),var(--purple-deep));color:var(--on-primary); font-size:28px;font-weight:300; box-shadow:0 12px 30px -8px var(--purple-glow),0 0 0 1px rgba(var(--tint),.25); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .fab:hover{transform:translateX(-50%) translateY(-3px) rotate(90deg);box-shadow:0 16px 38px -8px var(--purple-glow)} .fab:active{transform:translateX(-50%) scale(.94)} .support-fab{ position:fixed;right:14px;bottom:calc(var(--bnav-h) + var(--safe-b) + 14px);z-index:45; display:inline-flex;align-items:center;gap:7px;padding:11px 15px;border-radius:99px; background:linear-gradient(135deg,var(--teal),var(--purple));color:var(--on-primary); font-family:var(--font-d);font-weight:700;font-size:13px; box-shadow:0 12px 28px -10px rgba(var(--accent-rgb),.55); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } html.light .support-fab{color:#fff} .support-fab:hover{transform:translateY(-2px)} /* ============================================================ 11) MODALLAR + FORM ALANLARI ============================================================ */ .overlay{position:fixed;inset:0;z-index:60;background:rgba(var(--surface-nav),.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:20px 12px;overflow:auto;-webkit-overflow-scrolling:touch} .overlay.show{display:flex;animation:fadeIn .18s var(--ease)} .overlay.center{align-items:center} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{width:100%;max-width:520px;border-radius:20px;padding:20px;background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow);animation:rise .24s var(--ease);margin:auto} .modal.sm{max-width:420px} .modal.warn{border-color:rgba(var(--primary-rgb),.45)} @keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .modal h3{font-family:var(--font-d);font-weight:700;font-size:20px;margin:0 0 4px} .modal p.sub{color:var(--muted);font-size:13.5px;margin:0 0 18px} .field{margin-bottom:13px} .field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:600} .field input,.field select,.field textarea{ width:100%;background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:12px; padding:13px;color:var(--txt);font-family:inherit;font-size:16px; /* 16px: iOS zoom engeli */ transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease); } html.light .field input,html.light .field select,html.light .field textarea{background:rgba(var(--tint),.05)} .field textarea{min-height:88px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:var(--ring);background:rgba(var(--primary-rgb),.07)} .field input::placeholder,.field textarea::placeholder{color:var(--muted-2)} .field .ro{opacity:.6;cursor:not-allowed} .two{display:grid;grid-template-columns:1fr;gap:12px} .datepick{display:flex;gap:6px;align-items:stretch} .datepick input{flex:1;min-width:0} input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.65) sepia(.4) hue-rotate(120deg);opacity:.85;cursor:pointer} html.light input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:none} .upbtn{display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(var(--tint),.04);border:1.5px dashed var(--line-strong);border-radius:12px;padding:13px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease)} .upbtn:hover{color:var(--txt);border-color:var(--purple);background:rgba(var(--primary-rgb),.07)} .swatches{display:flex;gap:8px} .swatch{width:34px;height:34px;border-radius:11px;border:2px solid transparent;cursor:pointer;transition:transform var(--dur) var(--ease)} .swatch:hover{transform:scale(1.08)} .swatch.on{border-color:var(--txt);box-shadow:var(--ring)} .swatch.p{background:var(--purple)}.swatch.o{background:var(--orange)}.swatch.g{background:var(--green)} .modal-foot{display:flex;gap:9px;margin-top:18px} .modal-foot .btn{flex:1} .err{color:#f08b8b;font-size:12.5px;margin-top:-4px;margin-bottom:8px;min-height:1px} .hint{font-size:12px;color:var(--muted-2);margin-top:12px;text-align:center} .url-wrap:focus-within{border-color:var(--purple)!important;box-shadow:var(--ring)} .banpreset{font-size:12px;font-weight:600;padding:8px 12px;border-radius:9px;border:1px solid var(--line);color:var(--muted);transition:all .14s var(--ease)} .banpreset:hover,.banpreset.on{background:var(--purple);border-color:var(--purple);color:var(--on-primary)} .linkbtn{background:none;border:0;color:var(--purple-lt);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;margin-top:4px} .iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;max-height:150px;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--tint),.04)} .iconpick .ip{height:52px;border-radius:11px;border:2px solid transparent;display:grid;place-items:center;font-size:22px;background:rgba(var(--tint),.07);cursor:pointer;overflow:hidden;transition:all .14s var(--ease)} .iconpick .ip:hover{background:rgba(var(--tint),.14)} .iconpick .ip img{width:30px;height:30px;object-fit:contain} .iconpick .ip.on{border-color:var(--purple);background:rgba(var(--primary-rgb),.18)} .reasonbtns{display:flex;flex-direction:column;gap:8px} .reasonbtns button{text-align:left;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;font-weight:600;transition:all .14s var(--ease)} .reasonbtns button:hover{border-color:rgba(var(--red-rgb),.35);color:#f0a3a3;background:rgba(var(--red-rgb),.07)} /* ============================================================ 12) GİRİŞ / KAYIT EKRANI ============================================================ */ .authfull{padding:0;align-items:stretch} .authcard{position:relative;width:100%;max-width:1100px;margin:auto;min-height:min(640px,100vh);display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:0;overflow:hidden;box-shadow:var(--shadow)} .authclose{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);color:var(--muted);font-size:14px;display:grid;place-items:center;transition:all var(--dur) var(--ease)} .authclose:hover{color:var(--txt);border-color:var(--line-strong)} .authleft{display:flex;align-items:center;padding:clamp(20px,6vw,56px);background:transparent} .authbox{width:100%;max-width:380px;margin:0 auto} .authh{font-family:var(--font-d);font-weight:700;font-size:clamp(28px,7vw,50px);line-height:1.06;letter-spacing:-.025em;margin:0 0 20px;color:var(--txt);text-wrap:balance} .authsub{color:var(--muted);font-size:14.5px;margin:0 0 18px;line-height:1.5} .authsub b{color:var(--txt)} .bigbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:15.5px;padding:16px;border-radius:14px;min-height:54px;transition:all var(--dur) var(--ease);margin-bottom:12px} .bigbtn:active{transform:scale(.985)} .bigbtn.brolyz{background:linear-gradient(180deg,var(--teal-lt),var(--teal));color:var(--on-primary)} .bigbtn.brolyz:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(var(--accent-rgb),.6)} .bigbtn.dark{background:rgba(var(--tint),.05);color:var(--muted);border:1px solid var(--line)} .bigbtn.dark:hover{border-color:var(--line-strong);color:var(--txt)} .bigbtn.primary{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:var(--on-primary)} .bigbtn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px var(--purple-glow)} .bigbtn .bz-logo{width:24px;height:24px;object-fit:contain} .bigbtn:disabled{opacity:.5;cursor:default;transform:none} .authfield{margin-bottom:12px} .authfield input{width:100%;background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:13px;padding:16px;color:var(--txt);font-family:inherit;font-size:16px;transition:all var(--dur) var(--ease)} html.light .authfield input{background:rgba(var(--tint),.05)} .authfield input:focus{outline:none;border-color:var(--purple);box-shadow:var(--ring)} .authfield input::placeholder{color:var(--muted-2)} .authrow-or{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:13px;margin:4px 0 14px} .authrow-or::before,.authrow-or::after{content:"";flex:1;height:1px;background:var(--line)} .authlinks{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:2px} .authterms{color:var(--muted-2);font-size:11.5px;line-height:1.55;margin:22px 0 0} .authterms a{color:var(--purple-lt)} .authright{position:relative;background:var(--bg);overflow:hidden;display:block;height:32vh;min-height:190px;max-height:270px} .authright img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .auth-img-dark{display:block}.auth-img-light{display:none} html.light .authright{background:var(--bg-2)} html.light .auth-img-dark{display:none} html.light .auth-img-light{display:block} .authright::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -60px 70px -30px var(--bg)} .authleft{min-height:calc(100vh - 240px);align-items:flex-start} /* ============================================================ 13) BİLDİRİMLER + TOAST ============================================================ */ .notif-pop{position:fixed;top:66px;right:10px;left:10px;z-index:62;width:auto;max-height:64vh;overflow:auto;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow);display:none} .notif-pop.show{display:block;animation:rise .2s var(--ease)} .notif-pop .nh{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--font-d);font-weight:700;position:sticky;top:0;background:var(--card-2);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))} .notif-pop .nh button{font-size:12px;color:var(--purple-lt);font-weight:600} .nitem{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;transition:background .14s} .nitem:hover{background:rgba(var(--tint),.05)} .nitem:last-child{border-bottom:0} .nicon{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font-size:15px} .nicon.report{background:rgba(var(--red-rgb),.12);color:#f08b8b} .nicon.warning{background:rgba(var(--accent-rgb),.12);color:var(--gold)} .nicon.ban{background:rgba(var(--red-rgb),.15);color:#f08b8b} .nicon.win{background:rgba(var(--accent-rgb),.15);color:var(--gold)} .nicon.info{background:rgba(var(--primary-rgb),.14);color:var(--purple-lt)} .nbody{flex:1;min-width:0} .nbody p{margin:0;font-size:13px;font-weight:500;line-height:1.45} .nbody .nt{font-size:11px;color:var(--muted-2);margin-top:3px} .nempty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px} .toast{ position:fixed;left:50%;bottom:calc(var(--bnav-h) + var(--safe-b) + 22px); transform:translateX(-50%) translateY(16px);z-index:80; background:var(--card);border:1px solid var(--line-strong); padding:12px 18px;border-radius:14px;font-weight:600;font-size:13.5px; opacity:0;pointer-events:none;transition:all .28s var(--ease); box-shadow:var(--shadow);max-width:92vw; } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================================================ 14) ALT NAVİGASYON (mobil · başparmak bölgesi) ============================================================ */ .bnav{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; gap:2px;padding:8px 6px calc(8px + var(--safe-b)); background:var(--nav-bg);border-top:1px solid var(--line); box-shadow:0 -12px 32px -20px rgba(0,0,0,.9); } .bnav-item{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:6px 2px;border-radius:14px;min-height:48px; color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.02em; text-decoration:none;position:relative; transition:color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease); -webkit-tap-highlight-color:transparent; } .bnav-item .ic{width:21px;height:21px;stroke-width:1.75;transition:transform var(--dur) var(--ease)} .bnav-item:active{transform:scale(.93)} .bnav-item.on{color:var(--purple-lt);background:rgba(var(--primary-rgb),.1)} .bnav-item.on .ic{transform:translateY(-1px)} .bnav-item.on::before{content:"";position:absolute;top:2px;width:18px;height:2.5px;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--teal))} .bnav-item .bdot{top:2px;right:calc(50% - 20px)} /* ============================================================ 15) ALT BİLGİ (footer) ============================================================ */ footer{border-top:1px solid var(--line);margin-top:30px;padding:24px 0 10px} .foot-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .foot-row .links{display:flex;gap:18px;font-size:13px;color:var(--muted)} .foot-row .links a:hover{color:var(--txt)} .foot-note{font-size:12px;color:var(--muted-2);margin-top:12px} .foot-note a{color:var(--purple-lt)} /* ============================================================ 16) AYARLAR SAYFASI ============================================================ */ .settings-page{max-width:580px;margin:24px auto;padding:0 16px 60px} .settings-page h2{font-family:var(--font-d);font-weight:700;font-size:clamp(24px,6vw,28px);margin:0 0 6px;letter-spacing:-.02em} .settings-page .sp-sub{color:var(--muted);margin:0 0 20px;font-size:14.5px} .brolyz-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--purple-lt);margin-bottom:20px;background:rgba(var(--primary-rgb),.08)} .brolyz-badge img{width:16px;height:16px;object-fit:contain} .sp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:12px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))} .sp-card .sp-lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px} .sp-card input{width:100%;background:rgba(var(--tint),.05);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--txt);font-family:inherit;font-size:16px;transition:all var(--dur) var(--ease)} html.light .sp-card input{background:rgba(var(--tint),.05)} .sp-card input:focus{outline:none;border-color:var(--purple);box-shadow:var(--ring)} .sp-card input::placeholder{color:var(--muted-2)} .sp-avatar-row{display:flex;gap:12px;align-items:center} .sp-avatar-row .sp-av{width:58px;height:58px;border-radius:50%;background:linear-gradient(140deg,var(--purple),var(--teal));display:grid;place-items:center;font-weight:700;font-size:22px;color:var(--on-primary);flex:0 0 auto;overflow:hidden} .sp-avatar-row .sp-av img{width:100%;height:100%;object-fit:cover} .sp-avatar-row .sp-upbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(var(--tint),.04);border:1.5px dashed var(--line-strong);border-radius:12px;padding:15px;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease)} .sp-avatar-row .sp-upbtn:hover{color:var(--txt);border-color:var(--purple)} .sp-pref-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .sp-pref-btn{display:flex;align-items:center;gap:6px;padding:11px 15px;border-radius:11px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);transition:all .14s var(--ease);min-height:42px} .sp-pref-btn:hover{border-color:var(--line-strong);color:var(--txt)} .sp-pref-btn.on{background:var(--purple);border-color:var(--purple);color:var(--on-primary)} .sp-foot{display:flex;gap:10px;margin-top:20px} .sp-foot .btn{flex:1;padding:15px;font-size:15px} /* ============================================================ 17) TERCİH PANELİ (tweaks) ============================================================ */ .tweak-gear{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--muted);transition:all var(--dur) var(--ease)} .tweak-gear:hover{border-color:var(--line-strong);background:rgba(var(--tint),.1);transform:rotate(40deg)} .tweak-panel{position:fixed;right:12px;bottom:calc(var(--bnav-h) + var(--safe-b) + 78px);z-index:55;width:290px;max-width:calc(100vw - 24px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow);padding:16px;display:none;animation:rise .2s var(--ease)} .tweak-panel.show{display:block} .tweak-panel .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .tweak-panel .th b{font-family:var(--font-d);font-size:14px} .tweak-panel .th .x{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);font-size:13px;color:var(--muted)} .tweak-panel .th .x:hover{color:var(--txt)} .tw-group{margin-bottom:14px} .tw-group:last-child{margin-bottom:4px} .tw-group>.lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px;display:block} .seg{display:flex;gap:4px;background:rgba(var(--tint),.06);padding:4px;border-radius:12px} .seg button{flex:1;font-family:var(--font-d);font-weight:600;font-size:12px;padding:9px 4px;border-radius:9px;color:var(--muted);transition:all .14s var(--ease)} .seg button:hover{color:var(--txt)} .seg button.on{background:var(--purple);color:var(--on-primary)} .hue-row{display:flex;gap:7px} .hue{flex:1;height:38px;border-radius:11px;border:2px solid transparent;cursor:pointer;transition:transform .13s var(--ease)} .hue.on{border-color:var(--txt)} .hue:hover{transform:translateY(-1px)} /* Yoğunluk / enerji tercihleri */ [data-density="cozy"]{--radius:24px;--radius-sm:18px} [data-density="cozy"] .card{padding:22px} [data-density="compact"]{--radius:12px;--radius-sm:10px} [data-density="compact"] .card{padding:12px} [data-density="compact"] .card h3{font-size:14.5px} [data-energy="calm"] .live-dot{animation:none} [data-energy="calm"] .card:hover{transform:none} [data-energy="max"] .card:hover{transform:translateY(-5px)} [data-energy="max"] .card{box-shadow:inset 0 0 0 1px rgba(var(--tint),.12),0 0 50px -24px var(--purple-glow)} [data-energy="max"] .card.accent-orange{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2),0 0 50px -22px rgba(var(--accent-rgb),.55)} [data-energy="max"] .card.accent-green{box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.2),0 0 50px -22px rgba(var(--primary-rgb),.5)} [data-energy="max"] .live-dot{animation-duration:1.1s} [data-energy="max"] .fab{animation:pulse 2s infinite} /* ============================================================ 18) İKON SİSTEMİ — tek aile (Lucide), tutarlı çizgi kalınlığı ============================================================ */ .ic,[data-lucide]{width:18px;height:18px;flex:0 0 auto;stroke-width:1.75;vertical-align:middle} .ic-sm{width:15px;height:15px} .ic-lg{width:22px;height:22px} .ntab .ic{width:16px;height:16px} .bell .ic{width:19px;height:19px} .btn .ic{width:16px;height:16px} .icon-btn .ic{width:19px;height:19px} .drawer .ditem .ic{width:19px;height:19px} .sec-head .ic{width:18px;height:18px;color:var(--purple-lt)} .stat .lbl .ic{width:14px;height:14px} /* Emoji yerine kullanılan ikon kabı — kart/istatistik/bildirim başlarında */ .iconbox{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.12);color:var(--purple-lt);flex:0 0 auto;border:1px solid var(--line)} .iconbox.gold{background:rgba(var(--accent-rgb),.13);color:var(--gold)} .iconbox.red{background:rgba(var(--red-rgb),.12);color:var(--red)} .iconbox.teal{background:rgba(var(--accent-rgb),.13);color:var(--teal-lt)} .iconbox.lg{width:44px;height:44px;border-radius:14px} .iconbox .ic{width:18px;height:18px} .iconbox.lg .ic{width:22px;height:22px} /* Bağlama göre optik boyut düzeltmeleri (emoji→ikon dönüşümü sonrası) */ .winner .trophy .ic,.winner .trophy>svg{width:22px;height:22px} .cfeed-ico .ic,.cfeed-ico>svg{width:15px;height:15px} .hero-power .chip .ic,.hero-eyebrow .ic{width:15px;height:15px} .badge .ic,.pilltag .ic,.tbadge .ic{width:12px;height:12px;stroke-width:2.25} .ph-title .ic,h1 .ic,h2 .ic{width:.85em;height:.85em} .acard>h3 .ic,.agw-grouplbl .ic{width:17px;height:17px;color:var(--purple-lt)} .empty .ic{width:26px;height:26px;color:var(--muted-2)} .trow .ti .ic{width:16px;height:16px} .field label .ic{width:13px;height:13px} .utable td .ic,.utable th .ic{width:14px;height:14px} .report-btn .ic{width:14px;height:14px} .cdbox .ic{width:14px;height:14px} .nitem .ic{stroke-width:1.75} /* ============================================================ 19) DUYARLI GENİŞLEME (mobile-first → tablet → masaüstü) ============================================================ */ @media (min-width:560px){ .wrap{padding:0 20px} .two{grid-template-columns:1fr 1fr} .stats-row{grid-template-columns:repeat(3,1fr)} .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .mine{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .modal{padding:24px} .board .hr,.board .lr{grid-template-columns:54px 1fr 90px 120px;padding:13px 18px} .searchbox{flex:0 0 auto;width:240px} .acard{padding:20px} .settings-page{margin:32px auto} } @media (min-width:768px){ .hero{padding:64px 20px 0} .hero-stats{grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:64px} .authcard{grid-template-columns:1fr 1fr;border-radius:22px} .authright{height:auto;min-height:0;max-height:none} .authright::after{box-shadow:inset 60px 0 80px -40px var(--bg)} .authleft{min-height:0;align-items:center} .notif-pop{left:auto;right:18px;width:352px;max-height:70vh} .support-fab{bottom:24px;right:18px} .fab{bottom:26px} .tweak-panel{right:18px;bottom:92px} .toast{bottom:96px} body{padding-bottom:40px} /* alt nav gizli → boşluk gerekmez */ .bnav{display:none} .nav-row{padding:0 24px} .tok-grid{grid-template-columns:1fr 1.2fr 1fr;gap:18px} [data-density="cozy"] .grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px} [data-density="compact"] .grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px} } @media (min-width:1024px){ .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .poolhead{padding:28px 0 6px} } /* Küçük telefonlar */ @media (max-width:400px){ .cdgrid{grid-template-columns:repeat(2,1fr)} .hero-cta .pill{width:100%;justify-content:center} .bnav-item{font-size:9.5px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ============================================================ 20) KAYDIRMA ÇUBUKLARI ============================================================ */ #kazananlar-liste,#seffaf-liste,#win-katilimci-list,#urun-liste,#uye-scroll,#cfeed-list, .modal,.notif-pop,.drawer,.iconpick,[data-section]>div[style*="overflow"],.acard div[style*="overflow-y"]{ scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent; } #kazananlar-liste::-webkit-scrollbar,#seffaf-liste::-webkit-scrollbar,#win-katilimci-list::-webkit-scrollbar, #urun-liste::-webkit-scrollbar,#uye-scroll::-webkit-scrollbar,#cfeed-list::-webkit-scrollbar, .modal::-webkit-scrollbar,.notif-pop::-webkit-scrollbar,.drawer::-webkit-scrollbar, .acard div[style*="overflow-y"]::-webkit-scrollbar{width:8px;height:8px} #kazananlar-liste::-webkit-scrollbar-track,#seffaf-liste::-webkit-scrollbar-track,#win-katilimci-list::-webkit-scrollbar-track, #urun-liste::-webkit-scrollbar-track,#uye-scroll::-webkit-scrollbar-track,#cfeed-list::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track,.notif-pop::-webkit-scrollbar-track, .acard div[style*="overflow-y"]::-webkit-scrollbar-track{background:transparent} #kazananlar-liste::-webkit-scrollbar-thumb,#seffaf-liste::-webkit-scrollbar-thumb,#win-katilimci-list::-webkit-scrollbar-thumb, #urun-liste::-webkit-scrollbar-thumb,#uye-scroll::-webkit-scrollbar-thumb,#cfeed-list::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb,.notif-pop::-webkit-scrollbar-thumb, .acard div[style*="overflow-y"]::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid transparent;background-clip:padding-box} #kazananlar-liste::-webkit-scrollbar-thumb:hover,#seffaf-liste::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover,.acard div[style*="overflow-y"]::-webkit-scrollbar-thumb:hover{background:var(--purple)} /* ============================================================ 21) HUB MODÜLLERİ — akış · rozet · yorum · tema seçici Tümü cam yüzey formülünü (--glass-*) kullanır; renk hardcode yok. ============================================================ */ /* ---- 21.1 CANLI SOSYAL AKIŞ ---- */ .feed{ border:1px solid var(--line);border-radius:var(--radius);background:var(--glass-bg); overflow:hidden;box-shadow:var(--shadow-sm); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); backdrop-filter:blur(var(--glass-blur)) saturate(150%); } .feed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--glass-bg-2)} .feed-head b{font-family:var(--font-d);font-size:14.5px;display:flex;align-items:center;gap:8px} .feed-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--green)} .feed-list{max-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch} .feed-row{ display:flex;align-items:center;gap:11px;padding:11px 15px; border-bottom:1px solid var(--line);color:var(--txt);text-decoration:none; transition:background .16s var(--ease); } .feed-row:last-child{border-bottom:0} .feed-row:hover{background:var(--tint-soft)} .feed-row.yeni{animation:feedIn .5s var(--ease)} @keyframes feedIn{ 0%{opacity:0;transform:translateY(-10px);background:var(--primary-soft)} 100%{opacity:1;transform:none;background:transparent} } .feed-ico{ width:32px;height:32px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center; background:var(--primary-soft);color:var(--primary-lt);border:1px solid var(--line);overflow:hidden; } .feed-ico img{width:100%;height:100%;object-fit:cover} .feed-ico .ic{width:16px;height:16px} .feed-row[data-verb="win"] .feed-ico{background:rgba(var(--gold-rgb),.14);color:var(--gold)} .feed-row[data-verb="badge"] .feed-ico{background:rgba(var(--accent-rgb),.14);color:var(--accent-lt)} .feed-row[data-verb="comment"] .feed-ico{background:var(--tint-soft-2);color:var(--muted)} .feed-txt{flex:1;min-width:0;font-size:13.5px;line-height:1.45} .feed-txt b{color:var(--primary-lt);font-weight:700} .feed-txt .fo{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .feed-time{flex:0 0 auto;font-size:11.5px;color:var(--muted-2);font-weight:600;font-variant-numeric:tabular-nums} .feed-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13.5px} .feed-yenile{ display:flex;align-items:center;justify-content:center;gap:7px;width:100%; padding:11px;font-size:12.5px;font-weight:700;color:var(--on-primary); background:linear-gradient(135deg,var(--primary),var(--primary-deep));border:0;cursor:pointer; } /* ---- 21.2 AKILLI BİLDİRİM MERKEZİ ---- */ .nc-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--glass-bg-2);position:sticky;top:46px;z-index:2} .nc-tab{ flex:1;padding:9px 8px;border-radius:9px;font-size:12px;font-weight:700;color:var(--muted); background:transparent;border:0;cursor:pointer;transition:all var(--dur) var(--ease); } .nc-tab:hover{color:var(--txt);background:var(--tint-soft)} .nc-tab.on{background:var(--primary);color:var(--on-primary)} .nc-tab .say{font-size:10.5px;opacity:.85;margin-left:3px} .nc-grup{ padding:10px 16px 5px;font-size:10.5px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2);background:var(--glass-bg-2); } .nitem.okunmamis{background:var(--primary-soft)} .nitem.okunmamis::before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--primary)} .nc-bos{padding:36px 18px;text-align:center;color:var(--muted);font-size:13.5px} .nc-bos .ic{width:30px;height:30px;color:var(--muted-2);margin:0 auto 10px;display:block} /* ---- 21.3 ROZETLER (gamification) ---- */ .bdg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .bdg{ position:relative;display:flex;flex-direction:column;align-items:center;gap:7px; padding:16px 10px;border-radius:var(--radius-sm);text-align:center; border:1px solid var(--line);background:var(--glass-bg);overflow:hidden; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .bdg:hover{transform:translateY(-2px);border-color:var(--line-strong)} .bdg .bdg-ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--primary-soft);color:var(--primary-lt);border:1px solid var(--line); } .bdg .bdg-ico .ic{width:22px;height:22px} .bdg .bdg-ad{font-family:var(--font-d);font-weight:700;font-size:13px;line-height:1.2} .bdg .bdg-ipucu{font-size:11px;color:var(--muted-2);line-height:1.4} .bdg .bdg-tier{ position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:2px 7px;border-radius:99px; } .bdg.kilitli{opacity:.42;filter:grayscale(.7)} .bdg.kilitli .bdg-ico{background:var(--tint-soft-2);color:var(--muted-2)} .bdg.kilitli:hover{transform:none} .bdg[data-tier="bronze"] .bdg-tier{background:rgba(var(--accent-rgb),.16);color:var(--accent-lt)} .bdg[data-tier="silver"] .bdg-tier{background:var(--tint-soft-2);color:var(--muted)} .bdg[data-tier="gold"] .bdg-tier{background:rgba(var(--gold-rgb),.18);color:var(--gold)} .bdg[data-tier="legend"] .bdg-tier{background:var(--primary-soft-2);color:var(--primary-lt)} .bdg[data-tier="legend"]:not(.kilitli){border-color:var(--primary-soft-2)} .bdg[data-tier="legend"]:not(.kilitli)::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 60% at 50% 0%,var(--primary-soft),transparent 65%); } /* Rozet açılış animasyonu (yeni kazanım) */ .bdg-pop{ position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px; background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); animation:fadeIn .2s var(--ease); } .bdg-pop-kart{ width:100%;max-width:320px;text-align:center;padding:28px 22px;border-radius:22px; background:var(--glass-bg);border:1px solid var(--line-strong);box-shadow:var(--shadow); -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur)); animation:bdgIn .5s var(--ease) both; } @keyframes bdgIn{0%{opacity:0;transform:scale(.82) translateY(20px)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}} .bdg-pop-ico{ width:82px;height:82px;margin:0 auto 16px;border-radius:26px;display:grid;place-items:center; background:linear-gradient(140deg,var(--primary),var(--accent));color:var(--on-primary); box-shadow:0 16px 40px -14px var(--primary-glow);animation:bdgSpin 3.2s var(--ease) infinite; } .bdg-pop-ico .ic{width:38px;height:38px;stroke-width:1.75} @keyframes bdgSpin{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.05)}} .bdg-pop-kart h3{font-family:var(--font-d);font-size:19px;margin:0 0 4px} .bdg-pop-kart p{color:var(--muted);font-size:13.5px;margin:0 0 18px} .bdg-pop-xp{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-weight:700;font-size:13px;color:var(--primary-lt);background:var(--primary-soft);padding:6px 13px;border-radius:99px;margin-bottom:16px} /* ---- 21.4 YORUMLAR ---- */ .cmt-blok{border-top:1px solid var(--line);margin-top:14px;padding-top:14px} .cmt-baslik{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:12px} .cmt-baslik .say{background:var(--primary-soft);color:var(--primary-lt);padding:2px 8px;border-radius:99px;font-size:11px} .cmt-liste{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px} .cmt{display:flex;gap:10px;animation:rise .3s var(--ease)} .cmt.yanit{margin-left:34px} .cmt-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(140deg,var(--primary),var(--accent));color:var(--on-primary);font-weight:700;font-size:12px;overflow:hidden} .cmt-av img{width:100%;height:100%;object-fit:cover} .cmt-govde{flex:1;min-width:0;background:var(--glass-bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px} .cmt-ust{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap} .cmt-ad{font-weight:700;font-size:13px} .cmt-zaman{font-size:11px;color:var(--muted-2)} .cmt-metin{font-size:13.5px;line-height:1.55;color:var(--txt);word-break:break-word;white-space:pre-wrap} .cmt-alt{display:flex;align-items:center;gap:12px;margin-top:7px} .cmt-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;padding:3px 0;transition:color .14s var(--ease)} .cmt-btn:hover{color:var(--primary-lt)} .cmt-btn.on{color:var(--red)} .cmt-btn .ic{width:14px;height:14px} .cmt-yaz{display:flex;gap:9px;align-items:flex-end} .cmt-yaz textarea{ flex:1;min-height:46px;max-height:140px;resize:none; background:var(--tint-soft);border:1px solid var(--line);border-radius:var(--radius-sm); padding:12px;color:var(--txt);font-family:inherit;font-size:16px;line-height:1.45; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .cmt-yaz textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)} .cmt-gonder{ width:46px;height:46px;flex:0 0 auto;border-radius:var(--radius-sm);display:grid;place-items:center; background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:var(--on-primary); transition:transform var(--dur) var(--ease); } .cmt-gonder:active{transform:scale(.94)} .cmt-gonder:disabled{opacity:.45;cursor:default} .cmt-giris{text-align:center;padding:16px;font-size:13px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius-sm)} /* ---- 21.5 TEMA / PALET SEÇİCİ ---- */ .pal-row{display:flex;gap:8px;padding:4px 2px} .pal{ flex:1;height:40px;border-radius:12px;border:2px solid transparent;cursor:pointer; position:relative;overflow:hidden;transition:transform .16s var(--ease),border-color .16s var(--ease); } .pal::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--p1),var(--p2))} .pal:hover{transform:translateY(-2px)} .pal.on{border-color:var(--txt)} .pal.on::before{ content:"";position:absolute;z-index:2;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4); } .pal[data-pal="teal"]{--p1:#0fb98a;--p2:#14b8c4} .pal[data-pal="neon"]{--p1:#a855f7;--p2:#22d3ee} .pal[data-pal="gold"]{--p1:#e0b23c;--p2:#f5d78e} .pal[data-pal="orange"]{--p1:#f97316;--p2:#f43f5e} /* ---- 21.6 XP / SEVİYE ŞERİDİ ---- */ .xp-bar{height:8px;border-radius:99px;background:var(--tint-soft-2);overflow:hidden;position:relative} .xp-bar i{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .8s var(--ease);position:relative; } .xp-bar i::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); animation:sweep 2.6s ease-in-out infinite; } @media (min-width:560px){ .bdg-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:900px){ .bdg-grid{grid-template-columns:repeat(4,1fr);gap:12px} } /* ============================================================ 22) ETKİLEŞİM SİSTEMİ ------------------------------------------------------------ Modal/sheet · onay · uyarı · iskelet · boş durum · filtre çubuğu · arama · form doğrulama · giriş animasyonları Renkler yalnızca token üzerinden gelir (palet değişimine duyarlı). ============================================================ */ /* ---- 22.1 MODAL v2 — mobilde alt sayfa (bottom sheet), masaüstünde ortada ---- */ .overlay{ align-items:flex-end;padding:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%); } .overlay.show{animation:orIn .22s var(--ease)} @keyframes orIn{from{opacity:0}to{opacity:1}} .modal{ display:flex;flex-direction:column;max-height:92vh;margin:0;width:100%;max-width:none; border-radius:24px 24px 0 0;border-bottom:0;padding:0; animation:sheetIn .34s var(--ease) both; padding-bottom:var(--safe-b); } @keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}} .overlay.kapaniyor .modal{animation:sheetOut .22s var(--ease) forwards} @keyframes sheetOut{to{transform:translateY(100%);opacity:.6}} /* Sürükleme tutamağı — yalnızca mobil sayfa modunda görünür */ .modal::before{ content:"";display:block;width:38px;height:4px;border-radius:99px; background:var(--line-strong);margin:10px auto 2px;flex:0 0 auto; } .modal-head{ display:flex;align-items:flex-start;gap:12px;padding:12px 20px 14px; border-bottom:1px solid var(--line);flex:0 0 auto; } .modal-head .mh-ic{ width:40px;height:40px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center; background:var(--primary-soft);color:var(--primary-lt);border:1px solid var(--line); } .modal-head .mh-ic .ic{width:20px;height:20px} .modal-head .mh-txt{flex:1;min-width:0} .modal-head h3{font-family:var(--font-d);font-weight:700;font-size:18px;margin:0;letter-spacing:-.01em} .modal-head p{color:var(--muted);font-size:13px;margin:3px 0 0;line-height:1.5} .modal-kapat{ width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center; border:1px solid var(--line);background:var(--tint-soft);color:var(--muted); transition:all var(--dur) var(--ease); } .modal-kapat:hover{color:var(--txt);border-color:var(--line-strong)} .modal-kapat:active{transform:scale(.92)} .modal-body{ flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:18px 20px;overscroll-behavior:contain; } .modal-foot{ display:flex;gap:9px;padding:14px 20px calc(14px + var(--safe-b)); border-top:1px solid var(--line);background:var(--glass-bg-2);flex:0 0 auto;margin-top:0; -webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm)); } .modal-foot .btn{flex:1;padding:14px;font-size:15px} .modal-foot.tek .btn{flex:1} /* ---- Geriye dönük uyum ---- .modal-body kullanmayan (eski yapıdaki) modallar kendi dolgusunu korur ve içeriği doğrudan kaydırılır. İki katmanlı güvence: 1) :has() destekleyen tarayıcılarda otomatik 2) desteklemeyenlerde site.js açılışta .duz sınıfını ekler */ .modal.duz,.modal:not(:has(.modal-body)){ padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:block; } .modal.duz{padding-bottom:calc(20px + var(--safe-b))} @media (min-width:640px){ .modal.duz{padding-bottom:20px} } @media (min-width:640px){ .overlay{align-items:flex-start;padding:32px 16px;overflow:auto} .overlay.center{align-items:center} .modal{ max-width:520px;margin:auto;border-radius:22px;border-bottom:1px solid var(--line-strong); max-height:min(88vh,860px);animation:modalIn .3s var(--ease) both;padding-bottom:0; } .modal.sm{max-width:430px} .modal.lg{max-width:760px} .modal::before{display:none} .modal-foot{padding:14px 20px} .overlay.kapaniyor .modal{animation:modalOut .18s var(--ease) forwards} } @keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}} @keyframes modalOut{to{opacity:0;transform:translateY(10px) scale(.98)}} /* ---- 22.2 ONAY DİYALOĞU ---- */ .onay-ic{text-align:center;padding:26px 22px 6px} .onay-ic .oi{ width:64px;height:64px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center; background:var(--primary-soft);color:var(--primary-lt); } .onay-ic .oi .ic{width:30px;height:30px} .onay-ic.tehlike .oi{background:rgba(var(--red-rgb),.14);color:var(--red)} .onay-ic.uyari .oi{background:rgba(var(--gold-rgb),.16);color:var(--gold)} .onay-ic h3{font-family:var(--font-d);font-size:19px;margin:0 0 6px} .onay-ic p{color:var(--muted);font-size:14px;line-height:1.6;margin:0} /* ---- 22.3 UYARI ŞERİDİ (inline alert) ---- */ .alert{ display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--radius-sm); font-size:13.5px;line-height:1.55;border:1px solid var(--line);background:var(--glass-bg-2); margin-bottom:14px;animation:rise .3s var(--ease); } .alert .ic{width:18px;height:18px;flex:0 0 auto;margin-top:1px} .alert b{font-weight:700;display:block;margin-bottom:2px} .alert-kapat{margin-left:auto;flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:inherit;opacity:.6} .alert-kapat:hover{opacity:1} .alert.bilgi{border-color:var(--primary-soft-2);background:var(--primary-soft);color:var(--primary-lt)} .alert.ok{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:var(--green)} .alert.uyari{border-color:rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.1);color:var(--gold)} .alert.tehlike{border-color:rgba(var(--red-rgb),.35);background:rgba(var(--red-rgb),.1);color:var(--red)} .alert.bilgi b,.alert.ok b,.alert.uyari b,.alert.tehlike b{color:inherit} /* ---- 22.4 İSKELET (skeleton) — "Yükleniyor…" metni yerine ---- */ .sk{ display:block;border-radius:8px; background:linear-gradient(90deg,var(--tint-soft) 25%,var(--tint-soft-2) 37%,var(--tint-soft) 63%); background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite; } .sk-satir{height:12px;margin-bottom:8px} .sk-satir.k{width:62%}.sk-satir.o{width:84%} .sk-daire{border-radius:50%;width:36px;height:36px;flex:0 0 auto} .sk-kart{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--glass-bg)} .sk-satir-grup{display:flex;gap:11px;align-items:center;padding:12px 0} .sk-satir-grup .sk-govde{flex:1;min-width:0;display:block} .sk-liste{padding:8px 14px;display:block} .sk-liste .sk-satir{display:block} /* ---- 22.5 BOŞ DURUM ---- */ .bos{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px; padding:44px 24px;border:1.5px dashed var(--line-strong);border-radius:var(--radius); background:var(--tint-soft);grid-column:1/-1;animation:rise .35s var(--ease); } .bos-ic{ width:64px;height:64px;border-radius:22px;display:grid;place-items:center;margin-bottom:10px; background:var(--primary-soft);color:var(--primary-lt);border:1px solid var(--line); } .bos-ic .ic{width:28px;height:28px} .bos b{font-family:var(--font-d);font-size:16.5px;color:var(--txt)} .bos p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0;max-width:360px} .bos .btn{margin-top:14px} /* ---- 22.6 FİLTRE ÇUBUĞU ---- */ .fbar{ position:sticky;top:58px;z-index:30;margin:0 -16px 16px;padding:10px 0; background:var(--nav-bg);border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%); } .fbar-ust{display:flex;gap:9px;align-items:center;padding:0 16px 10px} .fbar-alt{position:relative} /* Yatay kaydırmalı çip şeridi — kenarlarda soluklaşma */ .fscroll{ display:flex;gap:7px;overflow-x:auto;padding:0 16px 2px; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .fscroll::-webkit-scrollbar{display:none} .fbar-alt::after,.fbar-alt::before{ content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;z-index:2; } .fbar-alt::before{left:0;background:linear-gradient(90deg,rgb(var(--surface-nav)),transparent)} .fbar-alt::after{right:0;background:linear-gradient(270deg,rgb(var(--surface-nav)),transparent)} html.light .fbar-alt::before{background:linear-gradient(90deg,rgb(var(--surface-nav)),transparent)} html.light .fbar-alt::after{background:linear-gradient(270deg,rgb(var(--surface-nav)),transparent)} .fchip{ display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;scroll-snap-align:start; padding:9px 14px;border-radius:99px;border:1px solid var(--line); background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600; white-space:nowrap;cursor:pointer;min-height:38px; transition:all var(--dur) var(--ease); } .fchip .ic{width:15px;height:15px} .fchip:hover{color:var(--txt);border-color:var(--line-strong);background:var(--tint-soft)} .fchip.on{ background:linear-gradient(135deg,var(--primary),var(--primary-deep)); border-color:transparent;color:var(--on-primary); box-shadow:0 6px 16px -9px var(--primary-glow); } .fchip .say{ font-size:11px;font-weight:700;padding:1px 6px;border-radius:99px; background:var(--tint-soft-2);color:var(--muted); } .fchip.on .say{background:rgba(0,0,0,.18);color:inherit} /* Sonuç satırı + temizle */ .fsonuc{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:2px 0 14px;font-size:12.5px;color:var(--muted); } .fsonuc b{color:var(--txt);font-variant-numeric:tabular-nums} .ftemizle{ display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600; color:var(--primary-lt);background:none;border:0;cursor:pointer;padding:4px 0; } .ftemizle .ic{width:14px;height:14px} /* ---- 22.7 ARAMA ALANI ---- */ .arama{ position:relative;display:flex;align-items:center;gap:9px;flex:1;min-width:0; background:var(--tint-soft);border:1px solid var(--line);border-radius:13px; padding:0 12px;height:44px;transition:all var(--dur) var(--ease); } .arama:focus-within{border-color:var(--primary);box-shadow:var(--ring);background:var(--primary-soft)} .arama > .ic{width:17px;height:17px;color:var(--muted-2);flex:0 0 auto} .arama input{ flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--txt); font:inherit;font-size:16px;height:100%; } .arama input::placeholder{color:var(--muted-2)} .arama-temizle{ width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:none;place-items:center; background:var(--tint-soft-2);color:var(--muted); } .arama.dolu .arama-temizle{display:grid} .arama-temizle .ic{width:13px;height:13px} .arama.yukleniyor > .ic{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---- 22.8 SIRALAMA (dropdown) ---- */ .sirala{position:relative;flex:0 0 auto} .sirala-btn{ display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:13px; border:1px solid var(--line);background:var(--tint-soft);color:var(--txt); font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap; transition:all var(--dur) var(--ease); } .sirala-btn:hover{border-color:var(--line-strong)} .sirala-btn .ic{width:16px;height:16px;color:var(--muted)} .sirala-menu{ position:absolute;top:calc(100% + 7px);right:0;min-width:180px;z-index:40;display:none; background:var(--glass-bg);border:1px solid var(--line-strong);border-radius:var(--radius-sm); box-shadow:var(--shadow);padding:6px; -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur)); animation:rise .16s var(--ease); } .sirala.acik .sirala-menu{display:block} .sirala-menu button{ display:flex;align-items:center;gap:9px;width:100%;text-align:left; padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--txt); transition:background .14s var(--ease); } .sirala-menu button:hover{background:var(--tint-soft-2)} .sirala-menu button.on{color:var(--primary-lt);background:var(--primary-soft)} .sirala-menu button .ic{width:15px;height:15px;opacity:.75} /* ---- 22.9 FORM DOĞRULAMA ---- */ .field{position:relative} .field-yardim{font-size:11.5px;color:var(--muted-2);margin-top:6px;line-height:1.5;display:flex;align-items:flex-start;gap:5px} .field-yardim .ic{width:13px;height:13px;flex:0 0 auto;margin-top:1px} .field-sayac{position:absolute;right:2px;top:0;font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums} .field-sayac.asildi{color:var(--red);font-weight:700} .field.hata input,.field.hata textarea,.field.hata select{border-color:var(--red)!important;background:rgba(var(--red-rgb),.06)} .field.hata .field-yardim{color:var(--red)} .field.ok input,.field.ok textarea{border-color:rgba(16,185,129,.55)} .field-durum{position:absolute;right:12px;bottom:13px;pointer-events:none} .field-durum .ic{width:17px;height:17px} .field.ok .field-durum{color:var(--green)} .field.hata .field-durum{color:var(--red)} @keyframes titre{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}} .field.hata.sallan input,.field.hata.sallan textarea{animation:titre .4s var(--ease)} /* Şifre gücü */ .sifre-guc{display:flex;gap:4px;margin-top:8px} .sifre-guc i{flex:1;height:4px;border-radius:99px;background:var(--tint-soft-2);transition:background .3s var(--ease)} .sifre-guc[data-guc="1"] i:nth-child(1){background:var(--red)} .sifre-guc[data-guc="2"] i:nth-child(-n+2){background:var(--gold)} .sifre-guc[data-guc="3"] i:nth-child(-n+3){background:var(--primary)} .sifre-guc[data-guc="4"] i{background:var(--green)} /* ---- 22.10 GİRİŞ ANİMASYONLARI ---- */ @keyframes sayfaGir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} main{animation:sayfaGir .45s var(--ease) both} /* Sıralı beliriş: liste elemanları 45 ms arayla girer */ .stagger > *{animation:sayfaGir .5s var(--ease) both} .stagger > *:nth-child(1){animation-delay:.03s} .stagger > *:nth-child(2){animation-delay:.08s} .stagger > *:nth-child(3){animation-delay:.13s} .stagger > *:nth-child(4){animation-delay:.18s} .stagger > *:nth-child(5){animation-delay:.23s} .stagger > *:nth-child(6){animation-delay:.28s} .stagger > *:nth-child(7){animation-delay:.33s} .stagger > *:nth-child(8){animation-delay:.38s} .stagger > *:nth-child(n+9){animation-delay:.42s} /* Filtre sonucu değişince kartlar yeniden belirir */ @keyframes filtreGir{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .filtre-yenilendi > *{animation:filtreGir .3s var(--ease) both} /* Sayfa kapanış geçişi (link tıklamasında) */ body.sayfa-cikis{opacity:0;transition:opacity .16s var(--ease)} /* ---- 22.11 GERİ BİLDİRİM: buton yükleniyor durumu ---- */ .btn.yukleniyor,.join.yukleniyor,.bigbtn.yukleniyor{position:relative;color:transparent!important;pointer-events:none} .btn.yukleniyor::after,.join.yukleniyor::after,.bigbtn.yukleniyor::after{ content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-9px 0 0 -9px; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; color:var(--on-primary);animation:spin .7s linear infinite; } .btn-ghost.yukleniyor::after{color:var(--txt)} @media (prefers-reduced-motion:reduce){ main,.stagger > *,.filtre-yenilendi > *,.modal,.overlay.show{animation:none!important} }