/* ========================================================= Sohbetfan Sesli Sohbet HOMEPAGE ========================================================= */ :root{ --bg:#f4f7fb; --surface:#ffffff; --surface-soft:#f8f9fc; --dark:#182033; --dark-2:#202941; --text:#364158; --muted:#7b869a; --primary:#625cf2; --primary-2:#776cf7; --purple:#8b5cf6; --blue:#4285f4; --cyan:#3bb7e9; --green:#19b88b; --orange:#f39a42; --pink:#e75ba9; --border:#e5e9f1; --shadow:0 20px 55px rgba(25,35,60,.08); --shadow-soft:0 10px 30px rgba(25,35,60,.06); --radius:22px; --radius-sm:15px; --max:1200px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:"Inter",Arial,sans-serif; line-height:1.6; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } button, input, select{ font:inherit; } button{ cursor:pointer; } .container{ width:min(var(--max),calc(100% - 40px)); margin:auto; } /* ========================================================= HEADER ========================================================= */ .site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); border-bottom:1px solid rgba(229,233,241,.9); } .header-inner{ min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:25px; } .logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:24px; letter-spacing:-.8px; white-space:nowrap; } .logo-mark{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); box-shadow:0 9px 22px rgba(98,92,242,.25); } .logo span{ background:linear-gradient(135deg,var(--primary),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; } .main-nav{ display:flex; align-items:center; gap:5px; } .main-nav a{ padding:10px 13px; border-radius:11px; font-size:14px; font-weight:600; color:#657087; transition:.2s ease; } .main-nav a:hover{ color:var(--primary); background:#f2f2ff; } .header-actions{ display:flex; align-items:center; gap:9px; } .header-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:700; } .header-btn.secondary{ color:var(--dark); background:#f3f5f9; } .header-btn.primary{ color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); box-shadow:0 8px 20px rgba(98,92,242,.2); } .menu-toggle{ display:none; width:42px; height:42px; border:0; border-radius:12px; background:#f2f4f8; color:var(--dark); } /* ========================================================= HERO ========================================================= */ .hero{ padding:48px 0 30px; } .hero-grid{ display:grid; grid-template-columns:365px minmax(0,1fr); gap:22px; align-items:stretch; } /* ========================================================= LOGIN CARD ========================================================= */ .login-card{ background:var(--surface); border:1px solid var(--border); border-radius:25px; box-shadow:var(--shadow); padding:25px; height:100%; } .login-head{ margin-bottom:20px; } .login-head .eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:30px; background:#f0efff; color:var(--primary); font-size:11px; font-weight:800; margin-bottom:11px; } .login-head h1{ margin:0; color:var(--dark); font-size:25px; line-height:1.25; letter-spacing:-.7px; } .login-head p{ margin:8px 0 0; color:var(--muted); font-size:13px; } /* Avatar */ .avatar-box{ display:flex; align-items:center; gap:14px; padding:13px; margin-bottom:20px; border:1px solid var(--border); border-radius:17px; background:var(--surface-soft); } .avatar-preview{ position:relative; flex:0 0 auto; } .avatar-preview img{ width:62px; height:62px; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:0 5px 15px rgba(0,0,0,.1); } .online-dot{ position:absolute; right:1px; bottom:3px; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#22c58b; } .avatar-options{ display:flex; gap:7px; flex-wrap:wrap; } .avatar-opt{ width:38px; height:38px; object-fit:cover; border-radius:50%; cursor:pointer; border:2px solid transparent; opacity:.7; transition:.2s; } .avatar-opt:hover, .avatar-opt.active{ opacity:1; border-color:var(--primary); } /* Form */ .form-group{ margin-bottom:14px; } .form-group label{ display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:#566178; } .input-wrapper{ position:relative; display:flex; align-items:center; } .input-wrapper > i{ position:absolute; left:14px; color:#8a94a7; font-size:13px; z-index:2; } .form-control{ width:100%; height:46px; border:1px solid var(--border); outline:none; border-radius:12px; padding:0 43px 0 40px; background:#fbfcfe; color:var(--dark); font-size:13px; transition:.2s; } .form-control:focus{ border-color:#b9b5ff; box-shadow:0 0 0 4px rgba(98,92,242,.08); background:#fff; } .input-action{ position:absolute; right:6px; top:5px; height:36px; min-width:36px; padding:0 9px; border:0; border-radius:9px; background:#eeedff; color:var(--primary); font-size:11px; font-weight:800; } .nick-action{ min-width:auto; } .mode-selector{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .mode-btn{ height:42px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border); border-radius:11px; color:#778197; background:#fafbfc; font-size:12px; font-weight:700; transition:.2s; } .mode-btn.active{ color:var(--primary); border-color:#c7c3ff; background:#f0efff; } .btn-connect{ width:100%; height:50px; border:0; border-radius:13px; display:flex; justify-content:center; align-items:center; gap:10px; margin-top:6px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); font-weight:800; font-size:14px; box-shadow:0 12px 25px rgba(98,92,242,.22); transition:.2s; } .btn-connect:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(98,92,242,.28); } .login-note{ margin:13px 0 0; text-align:center; font-size:11px; color:#98a1b1; } /* ========================================================= RIGHT HERO SOCIAL AREA ========================================================= */ .hero-social{ position:relative; min-height:650px; overflow:hidden; border-radius:25px; padding:38px; color:#fff; background: radial-gradient(circle at 80% 15%,rgba(125,104,255,.35),transparent 28%), radial-gradient(circle at 10% 90%,rgba(46,160,255,.25),transparent 30%), linear-gradient(135deg,#25244c,#35336e 52%,#292c5a); box-shadow:var(--shadow); } .hero-social:before{ content:""; position:absolute; width:500px; height:500px; right:-180px; top:-220px; border-radius:50%; border:1px solid rgba(255,255,255,.08); } .hero-social:after{ content:""; position:absolute; width:650px; height:650px; left:-360px; bottom:-480px; border-radius:50%; border:1px solid rgba(255,255,255,.07); } .social-content{ position:relative; z-index:3; max-width:640px; } .social-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:30px; background:rgba(255,255,255,.08); color:#e7e5ff; font-size:11px; font-weight:700; } .social-badge i{ color:#8ff3d2; } .social-content h2{ margin:17px 0 10px; max-width:650px; font-size:40px; line-height:1.1; letter-spacing:-1.7px; } .social-content h2 span{ color:#9f9aff; } .social-content p{ max-width:630px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; } /* World graphic */ .network-map{ position:relative; height:280px; margin:12px -10px 0; } .map-svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.82; } .map-dot{ position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.08),0 0 18px rgba(255,255,255,.7); } .map-dot.one{left:18%;top:43%;} .map-dot.two{left:32%;top:58%;} .map-dot.three{left:49%;top:34%;} .map-dot.four{left:64%;top:55%;} .map-dot.five{left:77%;top:35%;} .map-dot.six{left:86%;top:63%;} .map-avatar{ position:absolute; display:flex; align-items:center; gap:8px; padding:6px 9px 6px 6px; border:1px solid rgba(255,255,255,.15); border-radius:30px; background:rgba(255,255,255,.11); backdrop-filter:blur(10px); box-shadow:0 10px 25px rgba(0,0,0,.15); font-size:10px; font-weight:700; } .map-avatar img{ width:27px; height:27px; border-radius:50%; object-fit:cover; } .map-avatar.a{ left:12%; top:18%; } .map-avatar.b{ left:46%; top:7%; } .map-avatar.c{ right:8%; top:48%; } .map-avatar.d{ left:26%; bottom:6%; } /* Small cards replacing old live community */ .hero-mini-cards{ position:relative; z-index:4; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:5px; } .hero-mini-card{ min-height:76px; display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); } .hero-mini-icon{ width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:11px; color:#fff; background:rgba(255,255,255,.13); } .hero-mini-card strong{ display:block; color:#fff; font-size:12px; margin-bottom:2px; } .hero-mini-card span{ display:block; color:rgba(255,255,255,.6); font-size:10px; line-height:1.45; } /* ========================================================= FEATURE CARDS ========================================================= */ .features{ padding:24px 0 50px; } .feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; } .feature{ min-height:94px; display:flex; align-items:center; gap:14px; padding:16px; background:#fff; border:1px solid var(--border); border-radius:17px; box-shadow:var(--shadow-soft); } .feature-icon{ width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:14px; color:var(--primary); background:#f0efff; font-size:18px; } .feature:nth-child(2) .feature-icon{ color:#e55d99; background:#fff0f7; } .feature:nth-child(3) .feature-icon{ color:#3298df; background:#edf7ff; } .feature:nth-child(4) .feature-icon{ color:#18ad83; background:#ebfbf5; } .feature strong{ display:block; margin-bottom:3px; color:var(--dark); font-size:14px; } .feature span{ display:block; color:var(--muted); font-size:11px; line-height:1.5; } /* ========================================================= SECTION COMMON ========================================================= */ .section{ padding:70px 0; } .section-head{ max-width:680px; margin:0 auto 35px; text-align:center; } .section-kicker{ display:inline-block; margin-bottom:8px; color:var(--primary); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px; } .section-head h2{ margin:0; color:var(--dark); font-size:31px; line-height:1.2; letter-spacing:-1px; } .section-head p{ margin:11px 0 0; color:var(--muted); font-size:13px; } /* ========================================================= COMMUNITY MAP SECTION ========================================================= */ .community-section{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .community-layout{ display:grid; grid-template-columns:370px 1fr; gap:45px; align-items:center; } .community-text .section-kicker{ margin-bottom:10px; } .community-text h2{ margin:0;     color: #ffffff; font-size:34px; line-height:1.2; letter-spacing:-1.2px; } .community-text p{ color:var(--muted); font-size:14px; line-height:1.8; } .community-list{ display:grid; gap:10px; margin-top:22px; } .community-list-item{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:13px; } .community-list-item i{ width:37px; height:37px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:#f0efff; } .community-list-item strong{ display:block; color:#ffffff;  font-size:13px; } .community-list-item span{ display:block; color:var(--muted); font-size:11px; } .large-map{ position:relative; height:430px; overflow:hidden; border:1px solid var(--border); border-radius:25px; background: radial-gradient(circle at 50% 50%,rgba(98,92,242,.09),transparent 42%), #f8f9fc; } .large-map svg{ position:absolute; inset:25px; width:calc(100% - 50px); height:calc(100% - 50px); } .map-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82px; height:82px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); box-shadow:0 0 0 14px rgba(98,92,242,.09),0 15px 35px rgba(98,92,242,.25); font-size:25px; } .map-label{ position:absolute; padding:8px 11px; border-radius:10px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-soft); color:var(--dark); font-size:10px; font-weight:700; } .map-label.one{left:11%;top:25%;} .map-label.two{right:12%;top:20%;} .map-label.three{left:17%;bottom:24%;} .map-label.four{right:16%;bottom:18%;} /* ========================================================= ROOMS ========================================================= */ .rooms-section{ background:var(--bg); } .room-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } .room-card{ position:relative; overflow:hidden; min-height:205px; padding:22px; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-soft); transition:.25s; } .room-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .room-icon{ width:48px; height:48px; display:grid; place-items:center; margin-bottom:18px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); } .room-card:nth-child(2) .room-icon{ background:linear-gradient(135deg,#ef669d,#e84c83); } .room-card:nth-child(3) .room-icon{ background:linear-gradient(135deg,#3ba8ed,#4383ed); } .room-card:nth-child(4) .room-icon{ background:linear-gradient(135deg,#1abb91,#27c7a0); } .room-card h3{ margin:0 0 6px; color:var(--dark); font-size:17px; } .room-card p{ margin:0; color:var(--muted); font-size:12px; line-height:1.7; } .room-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--primary); font-size:11px; font-weight:800; } /* ========================================================= VOICE VIDEO SECTION ========================================================= */ .media-section{ padding:80px 0; background:#fff; } .media-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px; } .media-main{ position:relative; overflow:hidden; min-height:365px; padding:40px; border-radius:25px; color:#fff; background: radial-gradient(circle at 80% 20%,rgba(255,255,255,.15),transparent 25%), linear-gradient(135deg,#292752,#5e58cf); } .media-main:after{ content:""; position:absolute; width:280px; height:280px; right:-90px; bottom:-100px; border-radius:50%; border:1px solid rgba(255,255,255,.12); } .media-main .media-icon{ width:57px; height:57px; display:grid; place-items:center; border-radius:17px; background:rgba(255,255,255,.14); font-size:22px; } .media-main h2{ max-width:560px; margin:20px 0 10px; font-size:34px; line-height:1.2; letter-spacing:-1px; } .media-main p{ max-width:560px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.8; } .media-buttons{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; } .media-btn{ padding:11px 15px; border-radius:11px; font-size:12px; font-weight:800; background:#fff; color:var(--primary); } .media-btn.alt{ color:#fff; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); } .media-side{ display:grid; grid-template-rows:1fr 1fr; gap:15px; } .media-card{ display:flex; align-items:center; gap:17px; padding:24px; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:var(--shadow-soft); } .media-card-icon{ width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:15px; background:#f0efff; color:var(--primary); font-size:19px; } .media-card:nth-child(2) .media-card-icon{ color:#e55b95; background:#fff0f6; } .media-card h3{ margin:0 0 5px; color:var(--dark); font-size:15px; } .media-card p{ margin:0; color:var(--muted); font-size:11px; line-height:1.6; } /* ========================================================= HOW IT WORKS ========================================================= */ .how-section{ background:var(--bg); } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .step{ position:relative; padding:28px; background:#fff; border:1px solid var(--border); border-radius:20px; text-align:center; } .step-number{ width:48px; height:48px; display:grid; place-items:center; margin:0 auto 17px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--primary),var(--purple)); font-weight:800; } .step h3{ margin:0 0 7px; color:var(--dark); font-size:16px; } .step p{ margin:0; color:var(--muted); font-size:12px; line-height:1.7; } /* ========================================================= FAQ ========================================================= */ .faq-section{ background:#fff; } .faq-layout{ display:grid; grid-template-columns:330px 1fr; gap:50px; align-items:start; } .faq-intro h2{ margin:0; color:var(--dark); font-size:31px; line-height:1.25; } .faq-intro p{ color:var(--muted); font-size:13px; line-height:1.8; } .faq-contact{ margin-top:20px; padding:17px; border-radius:16px; background:#f5f4ff; } .faq-contact strong{ display:block; color:var(--dark); font-size:13px; margin-bottom:4px; } .faq-contact span{ color:var(--muted); font-size:11px; } .faq-list{ display:grid; gap:10px; } .faq-item{ border:1px solid var(--border); border-radius:15px; background:#fff; overflow:hidden; } .faq-question{ width:100%; min-height:60px; padding:15px 18px; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; gap:15px; color:var(--dark); text-align:left; font-size:13px; font-weight:700; } .faq-question i{ color:var(--primary); transition:.2s; } .faq-answer{ display:none; padding:0 18px 17px; color:var(--muted); font-size:12px; line-height:1.8; } .faq-item.open .faq-answer{ display:block; } .faq-item.open .faq-question i{ transform:rotate(180deg); } /* ========================================================= COMMENTS ========================================================= */ .comments-section{ background:var(--bg); } .comments-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .comment{ padding:23px; border:1px solid var(--border); border-radius:19px; background:#fff; box-shadow:var(--shadow-soft); } .comment-stars{ color:#f2a53d; font-size:11px; margin-bottom:14px; } .comment p{ margin:0 0 18px; color:#5f697d; font-size:12px; line-height:1.8; } .comment-user{ display:flex; align-items:center; gap:10px; } .comment-user img{ width:38px; height:38px; border-radius:50%; object-fit:cover; } .comment-user strong{ display:block; color:var(--dark); font-size:12px; } .comment-user span{ color:var(--muted); font-size:10px; } /* ========================================================= EVENTS ========================================================= */ .events-section{ background:#fff; } .events-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .event-card{ padding:20px; border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:var(--shadow-soft); } .event-date{ display:inline-flex; padding:6px 9px; border-radius:8px; background:#f0efff; color:var(--primary); font-size:10px; font-weight:800; } .event-card h3{ margin:13px 0 6px; color:var(--dark); font-size:15px; } .event-card p{ margin:0; color:var(--muted); font-size:11px; line-height:1.65; } .event-location{ display:flex; align-items:center; gap:6px; margin-top:15px; color:#7c869a; font-size:10px; } /* ========================================================= CTA ========================================================= */ .cta-section{ padding:60px 0; background:var(--bg); } .cta-box{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:40px 45px; border-radius:25px; color:#fff; background: radial-gradient(circle at 90% 20%,rgba(255,255,255,.13),transparent 25%), linear-gradient(135deg,#28264e,#625cf2); } .cta-box:after{ content:""; position:absolute; width:330px; height:330px; right:-120px; bottom:-190px; border:1px solid rgba(255,255,255,.12); border-radius:50%; } .cta-box h2{ position:relative; z-index:2; margin:0 0 7px; font-size:29px; letter-spacing:-.8px; } .cta-box p{ position:relative; z-index:2; margin:0; color:rgba(255,255,255,.7); font-size:12px; } .cta-button{ position:relative; z-index:3; flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:14px 20px; border-radius:12px; color:var(--primary); background:#fff; font-size:12px; font-weight:800; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background:#171b2b; color:#fff; padding:55px 0 0; } .footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:45px; padding-bottom:45px; } .footer-brand p{ max-width:350px; margin:15px 0 0; color:rgba(255,255,255,.55); font-size:12px; line-height:1.8; } .footer-logo{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; } .footer-logo-mark{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--purple)); } .footer-title{ margin:0 0 15px; font-size:13px; } .footer-links{ display:grid; gap:9px; } .footer-links a{ color:rgba(255,255,255,.55); font-size:11px; transition:.2s; } .footer-links a:hover{ color:#fff; } .footer-bottom{ min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.4); font-size:10px; } .footer-social{ display:flex; gap:8px; } .footer-social a{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:rgba(255,255,255,.65); background:rgba(255,255,255,.06); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1100px){ .main-nav{ display:none; } .hero-grid{ grid-template-columns:330px minmax(0,1fr); } .hero-social{ padding:30px; } .social-content h2{ font-size:34px; } .feature-grid, .room-grid, .events-grid{ grid-template-columns:repeat(2,1fr); } .community-layout{ grid-template-columns:1fr; } .community-text{ max-width:700px; } .large-map{ height:390px; } .footer-grid{ grid-template-columns:2fr 1fr 1fr; } } @media(max-width:800px){ .container{ width:min(100% - 28px,var(--max)); } .header-inner{ min-height:68px; } .header-actions .secondary{ display:none; } .menu-toggle{ display:grid; place-items:center; } .hero{ padding-top:25px; } .hero-grid{ grid-template-columns:1fr; } .login-card{ order:1; } .hero-social{ order:2; min-height:auto; } .social-content h2{ font-size:32px; } .network-map{ height:245px; } .media-grid, .faq-layout{ grid-template-columns:1fr; } .faq-intro{ max-width:600px; } .comments-grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .cta-box{ align-items:flex-start; flex-direction:column; padding:32px; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .logo{ font-size:20px; } .logo-mark{ width:38px; height:38px; } .header-btn.primary{ display:none; } .hero-social{ padding:24px 19px; border-radius:20px; } .social-content h2{ font-size:27px; letter-spacing:-1px; } .social-content p{ font-size:12px; } .network-map{ height:210px; } .map-avatar{ transform:scale(.85); } .hero-mini-cards{ grid-template-columns:1fr; } .hero-mini-card{ min-height:62px; } .feature-grid, .room-grid, .events-grid{ grid-template-columns:1fr; } .feature{ min-height:84px; } .section{ padding:55px 0; } .section-head h2, .community-text h2, .faq-intro h2{ font-size:27px; } .large-map{ height:290px; } .large-map svg{ inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); } .map-label{ transform:scale(.85); } .media-main{ padding:28px 24px; min-height:340px; } .media-main h2{ font-size:27px; } .media-side{ grid-template-rows:auto; } .footer-grid{ grid-template-columns:1fr; gap:28px; } .footer-bottom{ padding:18px 0; flex-direction:column; justify-content:center; text-align:center; } .cta-box h2{ font-size:25px; } } 

/* =====================================================
   Sohbetfan GECE MODU
===================================================== */

body.dark-mode {
    --bg: #10121b;
    --surface: #181b27;
    --surface-soft: #202432;
    --dark: #f3f4f8;
    --dark-2: #e7e9f0;
    --text: #d5d9e4;
    --muted: #9da5b7;
    --border: #303545;
}


body.dark-mode {
    background: var(--bg);
    color: var(--text);
}


body.dark-mode .site-header {
    background: #151822;
    border-color: #292d3a;
}


body.dark-mode .login-card,
body.dark-mode .community-text {
    background: var(--surface);
    border-color: var(--border);
}


body.dark-mode .form-control {
    background: #202431;
    color: #f3f4f8;
    border-color: #363b4b;
}


body.dark-mode .form-control::placeholder {
    color: #8991a3;
}


body.dark-mode .community-list-item {
    background: var(--surface-soft);
    border-color: var(--border);
}


body.dark-mode .footer-links a,
body.dark-mode .site-footer p {
    color: #aeb5c5;
}


body.dark-mode .site-footer {
    background: #0d0f16;
}


body.dark-mode .header-btn.secondary {
    background: #252938;
    color: #f3f4f8;
    border-color: #3a4052;
}


body.dark-mode .header-btn.secondary:hover {
    background: #303548;
}


body.dark-mode .section-kicker {
    color: var(--primary-2);
}


body.dark-mode .room-link {
    color: #a9a3ff;
}


body.dark-mode .cta-section {
    background: #11131c;
}