/* ============================================================ PlayHub — Ortak iskelet stilleri (topbar + sidebar + main) Tüm sayfalarda içinde header.php ile yüklenir. ============================================================ */ :root{ --bg:#0d0b14; --bg-2:#13101c; --panel:#191527; --panel-2:#211c33; --rail:#0a0810; --line:#272136; --txt:#f3f0fb; --txt-dim:#9b94b3; --accent:#7c4dff; --accent-2:#9a72ff; --pink:#ff5c8a; --green:#37d399; --gold:#ffc24b; --prose:#d4cee6; --muted:#cfc7e6; --sep:#4a4360; --star-off:#3a3354; --hover-bg:#2d2742; --quote:#e7e1f5; --code-txt:#cdbcff; --rail-w:72px; --rail-w-open:248px; --top-h:78px; --ph-sec-gap:30px; --ph-card-size:248px; --ph-card-title-size:15px; --ph-card-radius:16px; --ph-carousel-gap:16px; --ph-cat-height:118px; --ph-cat-width:320px; --ph-cat-gap:18px; --ph-card-shadow:0 4px 14px rgba(0,0,0,.35); --ph-card-shadow-hover:0 4px 14px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.5); --ph-card-hover-y:-4px; --ph-main-pad-y:26px; --ph-main-pad-x:30px; --ph-content-max:none; } *{box-sizing:border-box;margin:0;padding:0} html,body{min-height:100%} body{ font-family:"Nunito",system-ui,sans-serif; background:var(--bg); color:var(--txt); overflow-x:hidden; } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#2c2640;border-radius:20px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#3a3354} h1,h2,h3,.logo-txt{font-family:"Baloo 2",sans-serif} /* ============ TOP BAR ============ */ .topbar{ position:fixed;top:0;left:0;right:0;height:var(--top-h); background:var(--bg-2); display:flex;align-items:center;gap:18px; padding:0 26px 0 18px; z-index:60; border-bottom:1px solid var(--line); } .burger{ width:44px;height:44px;border-radius:12px;border:none;cursor:pointer; background:transparent;color:var(--txt); display:flex;align-items:center;justify-content:center; transition:background .2s; } .burger:hover{background:var(--panel-2)} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--txt)} .brand-mark{ width:46px;height:46px;border-radius:14px; background:linear-gradient(145deg,#8a5bff,#5b2fd6); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(124,77,255,.45); } .brand-mark svg{width:28px;height:28px} .logo-txt{font-weight:800;font-size:24px;line-height:.95} .logo-txt small{display:block;font-size:24px;color:var(--accent-2)} .search{flex:1;max-width:720px;margin:0 auto;position:relative} .search input{ width:100%;height:50px;border-radius:14px;border:1px solid var(--line); background:var(--panel);color:var(--txt); padding:0 52px 0 22px;font-size:16px;font-family:inherit;font-weight:600; transition:border .2s,background .2s; } .search input::placeholder{color:var(--txt-dim);font-weight:600} .search input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)} .search .ico{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--txt-dim)} .topbar-nav{ display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:4px; max-width:min(480px,38vw);overflow-x:auto;scrollbar-width:none; } .topbar-nav::-webkit-scrollbar{display:none} .topbar-nav a{ color:var(--txt-dim);text-decoration:none;font-weight:800;font-size:14px; padding:8px 12px;border-radius:10px;white-space:nowrap;transition:color .15s,background .15s; } .topbar-nav a:hover{color:var(--txt);background:var(--panel-2)} /* ---- canlı arama açılır paneli ---- */ .search{position:relative} .search-results{ position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:80; background:var(--panel);border:1px solid var(--line);border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,.55);overflow:hidden; max-height:min(70vh,520px);overflow-y:auto; opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s,transform .16s; } .search-results.open{opacity:1;transform:translateY(0);pointer-events:auto} .sr-group-label{padding:12px 18px 6px;color:var(--txt-dim);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.5px} .sr-item{display:flex;align-items:center;gap:14px;padding:10px 16px;cursor:pointer;text-decoration:none;color:var(--txt);border:none;background:transparent;width:100%;text-align:left;font-family:inherit} .sr-item:hover,.sr-item.active{background:var(--panel-2)} .sr-thumb{width:46px;height:46px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center; font-family:"Baloo 2",sans-serif;font-weight:800;font-size:18px;color:#fff;overflow:hidden;background:var(--panel-2)} .sr-thumb img{width:100%;height:100%;object-fit:cover;display:block} .sr-thumb.cat{border-radius:11px;font-size:22px;line-height:1} .sr-loading{padding:22px 18px;text-align:center;color:var(--txt-dim);font-weight:700;font-size:14px} .sr-thumb svg{width:22px;height:22px;color:#fff} .sr-body{min-width:0;flex:1} .sr-name{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sr-name b{color:var(--accent-2)} .sr-meta{color:var(--txt-dim);font-weight:700;font-size:12px;margin-top:1px} .sr-arrow{color:var(--txt-dim);flex:0 0 auto} .sr-arrow svg{width:18px;height:18px} .sr-empty{padding:26px 18px;text-align:center;color:var(--txt-dim);font-weight:700;font-size:15px} .sr-foot{display:flex;align-items:center;gap:9px;padding:13px 18px;border-top:1px solid var(--line); color:var(--accent-2);font-weight:800;font-size:14px;cursor:pointer;background:transparent;border-bottom:none;border-left:none;border-right:none;width:100%;font-family:inherit} /* ============ USER MENU (top bar) ============ */ .user-menu{position:relative} .user-btn{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:30px; padding:4px 10px 4px 4px;cursor:pointer;color:var(--txt);font-family:inherit} .user-btn:hover{background:var(--panel-2)} .user-btn .ub-name{font-weight:800;font-size:14px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-btn svg{color:var(--txt-dim)} .uavatar{flex:0 0 auto;overflow:hidden} .user-drop{position:absolute;right:0;top:calc(100% + 10px);width:240px;background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .16s,transform .16s;z-index:90} .user-menu.open .user-drop{opacity:1;transform:none;pointer-events:auto} .ud-head{display:flex;align-items:center;gap:11px;padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .ud-head b{display:block;font-weight:800;font-size:15px} .ud-head small{color:var(--txt-dim);font-weight:700;font-size:12px} .user-drop a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--txt); font-weight:700;font-size:14.5px;text-decoration:none} .user-drop a svg{width:19px;height:19px;color:var(--txt-dim)} .user-drop a:hover{background:var(--panel-2)} .user-drop a.ud-out{color:#ff8a90;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px} .user-drop a.ud-out svg{color:#ff8a90} .sr-foot:hover{background:var(--panel-2)} .sr-foot svg{width:16px;height:16px} .top-actions{display:flex;align-items:center;gap:12px} .icon-btn{ width:48px;height:48px;border-radius:50%;border:none;cursor:pointer; background:var(--panel);color:var(--txt); display:flex;align-items:center;justify-content:center;position:relative; transition:background .2s,transform .15s; } .icon-btn:hover{background:var(--panel-2);transform:translateY(-1px)} .badge{ position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px; background:var(--pink);color:#fff;font-size:11px;font-weight:800; display:flex;align-items:center;justify-content:center;padding:0 5px; border:2px solid var(--bg-2); } .login-btn{ display:inline-flex;align-items:center;justify-content:center; height:48px;padding:0 26px;border:none;border-radius:14px;cursor:pointer; background:linear-gradient(135deg,#9a72ff,#7c4dff 50%,#6a34e0); color:#fff;font-family:inherit;font-weight:800;font-size:16px;line-height:1; text-decoration:none;white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px rgba(124,77,255,.4); transition:transform .15s,box-shadow .2s,filter .15s; } .login-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px rgba(124,77,255,.55)} .login-btn:active{transform:translateY(0);filter:brightness(.96)} /* ============ SIDEBAR RAIL ============ */ .rail{ position:fixed;top:var(--top-h);bottom:0;left:0;width:var(--rail-w); background:var(--rail);z-index:55;overflow:hidden; border-right:1px solid var(--line); transition:width .32s cubic-bezier(.4,.0,.2,1); padding:14px 0; } .rail:hover{width:var(--rail-w-open);box-shadow:18px 0 40px rgba(0,0,0,.5)} body.rail-closed .rail{width:0;border-right-color:transparent} body.rail-closed .rail:hover{box-shadow:none} .rail-inner{height:100%;overflow-y:auto;overflow-x:hidden} .rail-inner::-webkit-scrollbar{width:0} .nav-group{padding:6px 14px} .nav-group + .nav-group{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)} .nav-item{ display:flex;align-items:center;gap:16px;height:48px; border-radius:13px;padding:0 12px;cursor:pointer;color:var(--txt-dim); text-decoration:none;white-space:nowrap;position:relative; transition:background .18s,color .18s; } .nav-item .ni-ico{min-width:44px;display:flex;align-items:center;justify-content:center} .nav-item .ni-ico-emoji{font-size:20px;line-height:1} .nav-item .ni-label{ font-weight:700;font-size:16px;opacity:0;transform:translateX(-6px); transition:opacity .2s .04s,transform .2s .04s; } .rail:hover .ni-label{opacity:1;transform:translateX(0)} /* Collapsed rail — center icons (home, etc.) */ .rail:not(:hover) .nav-group{padding:6px 10px} .rail:not(:hover) .nav-item{justify-content:center;padding:0;gap:0} .rail:not(:hover) .nav-item .ni-label{display:none} .rail:not(:hover) .nav-item .ni-ico{min-width:0;width:44px;height:44px;flex:0 0 44px} .nav-item:hover{background:var(--panel-2);color:var(--txt)} .nav-item.active{color:var(--txt)} .nav-item.active::before{ content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:4px; background:var(--accent);border-radius:0 4px 4px 0; } .rail:not(:hover) .nav-item.active::before{display:none} .nav-item.active .ni-ico{color:var(--accent-2)} /* ============ MAIN ============ */ .skip-link{ position:absolute;left:-9999px;top:8px;z-index:100000; padding:10px 16px;border-radius:10px;background:var(--accent,#7c4dff);color:#fff; font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35); } .skip-link:focus{ left:max(12px,var(--rail-w,12px));outline:2px solid #fff;outline-offset:2px; } .main{ margin-left:var(--rail-w); margin-top:var(--top-h); padding:var(--ph-main-pad-y,26px) var(--ph-main-pad-x,30px) 80px; max-width:var(--ph-content-max,none); transition:margin-left .32s cubic-bezier(.4,.0,.2,1); } body.rail-closed .main{margin-left:0} /* footer, sidebar ile aynı sol boşluğu paylaşsın */ .ph-footer{ margin-left:var(--rail-w); transition:margin-left .32s cubic-bezier(.4,.0,.2,1); } body.rail-closed .ph-footer{margin-left:0} /* ============================================================ FOOTER ============================================================ */ .ph-footer{ --pf-bg:#0a0810;--pf-bg2:#13101c;--pf-line:#272136;--pf-txt:#f3f0fb; --pf-dim:#9b94b3;--pf-accent:#9a72ff;--pf-accent-2:#7c4dff;--pf-green:#37d399; position:relative;background:var(--pf-bg);color:var(--pf-dim); border-top:1px solid var(--pf-line);overflow:hidden; } .ph-footer a{text-decoration:none;color:inherit} .ph-footer::before{content:"";position:absolute;top:-160px;left:8%;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(124,77,255,.22),transparent 65%);pointer-events:none} .ph-footer::after{content:"";position:absolute;bottom:-200px;right:4%;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(55,211,153,.10),transparent 65%);pointer-events:none} .pf-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 32px} .pf-top{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center; padding:56px 0 48px;border-bottom:1px solid var(--pf-line)} .pf-cta h2{font-size:34px;font-weight:800;color:var(--pf-txt);line-height:1.1;letter-spacing:-.5px} .pf-cta p{margin-top:12px;font-size:17px;font-weight:600;max-width:440px;line-height:1.5} .pf-news{display:flex;flex-direction:column;gap:12px} .pf-news .ph-nl-form{width:100%} .pf-news small{font-size:13px;color:var(--pf-dim);font-weight:600} .pf-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;padding:52px 0 44px} .pf-brand-mark{display:flex;align-items:center;gap:11px;margin-bottom:18px;text-decoration:none} .pf-mark{width:48px;height:48px;border-radius:14px;flex:0 0 auto; background:linear-gradient(145deg,#8a5bff,#5b2fd6);display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(124,77,255,.45)} .pf-mark svg{width:29px;height:29px} .pf-logo-txt{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:25px;line-height:.95;color:var(--pf-txt)} .pf-logo-txt small{display:block;font-size:25px;color:var(--pf-accent)} .pf-about{font-size:15px;line-height:1.65;font-weight:600;max-width:330px;margin-bottom:22px} .pf-social{display:flex;gap:10px;flex-wrap:wrap} .pf-social a{width:44px;height:44px;border-radius:12px;background:var(--pf-bg2);border:1px solid var(--pf-line); display:flex;align-items:center;justify-content:center;color:var(--pf-dim); transition:background .18s,color .18s,transform .15s,border-color .18s} .pf-social a:hover{background:var(--pf-accent-2);color:#fff;transform:translateY(-2px);border-color:transparent} .pf-social svg{width:21px;height:21px} .pf-col h3{font-family:"Baloo 2",sans-serif;color:var(--pf-txt);font-size:17px;font-weight:700;margin-bottom:16px} .pf-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .pf-col li a{font-size:15px;font-weight:600;transition:color .16s,padding-left .16s;display:inline-flex;align-items:center;gap:7px} .pf-col li a:hover{color:var(--pf-accent);padding-left:4px} .pf-tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:rgba(55,211,153,.16);color:var(--pf-green); text-transform:uppercase;letter-spacing:.4px} .pf-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; padding:26px 0;border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line)} .pf-apps{display:flex;gap:12px;flex-wrap:wrap} .pf-store{display:flex;align-items:center;gap:11px;height:54px;padding:0 18px;border-radius:13px; background:var(--pf-bg2);border:1px solid var(--pf-line);transition:background .18s,transform .15s,border-color .18s} .pf-store:hover{background:#191527;transform:translateY(-2px);border-color:var(--pf-accent-2)} .pf-store svg{width:26px;height:26px;color:var(--pf-txt)} .pf-store span{display:flex;flex-direction:column;line-height:1.1} .pf-store span small{font-size:11px;color:var(--pf-dim);font-weight:700} .pf-store span b{font-size:16px;color:var(--pf-txt);font-weight:800;font-family:"Baloo 2",sans-serif} .pf-lang{position:relative} .pf-lang select{appearance:none;height:50px;border-radius:12px;border:1px solid var(--pf-line);background:var(--pf-bg2); color:var(--pf-txt);padding:0 44px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer} .pf-lang select:focus{outline:none;border-color:var(--pf-accent)} .pf-lang .globe{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--pf-dim);pointer-events:none} .pf-lang .globe svg{width:20px;height:20px} .pf-lang .chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--pf-dim);pointer-events:none} .pf-lang .chev svg{width:18px;height:18px} .pf-seo{padding:30px 0 6px} .pf-seo h3{font-family:"Baloo 2",sans-serif;color:var(--pf-txt);font-size:15px;font-weight:700;margin-bottom:14px} .pf-seo .pf-tags{display:flex;flex-wrap:wrap;gap:9px} .pf-seo .pf-tags a{font-size:13px;font-weight:700;padding:7px 13px;border-radius:9px;background:var(--pf-bg2); border:1px solid var(--pf-line);transition:background .16s,color .16s,border-color .16s} .pf-seo .pf-tags a:hover{background:var(--pf-accent-2);color:#fff;border-color:transparent} .pf-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px 0 34px} .pf-copy{font-size:14px;font-weight:600;color:var(--pf-dim)} .pf-copy b{color:var(--pf-txt);font-weight:800} .pf-legal{display:flex;gap:22px;flex-wrap:wrap} .pf-legal a{font-size:14px;font-weight:700;transition:color .16s} .pf-legal a:hover{color:var(--pf-accent)} /* ============ MOBILE TOP BAR (two rows: actions + full-width search) ============ */ @media (max-width:900px){ :root{ --top-h:118px; --ph-main-pad-x:12px; --ph-main-pad-y:16px; } .topbar{ height:auto; min-height:var(--top-h); padding:8px 12px 10px; gap:8px 10px; flex-wrap:wrap; align-content:flex-start; } .burger{width:40px;height:40px;flex-shrink:0;order:1} .brand{order:2;flex:0 1 auto;min-width:0;gap:8px;align-items:center} .brand .logo-txt{font-size:19px;line-height:.88;letter-spacing:-.02em} .brand .logo-txt small{font-size:19px;display:block;color:var(--accent-2)} .brand-mark, .brand .brand-mark img{width:40px;height:40px;border-radius:12px} .top-actions{order:3;flex-shrink:0;gap:8px;margin-left:auto} .icon-btn{width:40px;height:40px} .login-btn{height:40px;padding:0 16px;font-size:14px} .user-btn{padding:3px;border-radius:50%} .user-btn .ub-name, .user-btn > svg{display:none} .search{ order:4; flex:1 1 100%; width:100%; max-width:none; margin:0; min-width:0; } .search input{ height:44px; font-size:15px; padding:0 44px 0 14px; border-radius:12px; } .search .ico{right:12px} .search .ico svg{width:20px;height:20px} .search-results{ left:0; right:0; max-height:min(58vh,400px); border-radius:14px; } .topbar-nav{ order:5; flex:1 1 100%; max-width:none; margin:0; padding:2px 0 4px; gap:6px; -webkit-overflow-scrolling:touch; } .topbar-nav a{font-size:13px;padding:6px 11px} } @media (max-width:980px){ .pf-top{grid-template-columns:1fr;gap:28px} .pf-grid{grid-template-columns:1fr 1fr;gap:32px 28px} .pf-brand{grid-column:1 / -1} } @media (max-width:560px){ .pf-inner{padding:0 20px} .pf-grid{grid-template-columns:1fr 1fr} .pf-cta h2{font-size:27px} .pf-bottom{flex-direction:column;align-items:flex-start;gap:14px} .pf-strip{flex-direction:column;align-items:flex-start} } /* ============ TABLET — slimmer icon rail ============ */ @media (min-width:768px) and (max-width:980px){ :root{--rail-w:58px} .rail:not(:hover) .nav-item .ni-ico{width:40px;height:40px;flex:0 0 40px} .rail:not(:hover) .nav-group{padding:6px 8px} } /* ============ MOBILE — full-width content + drawer nav ============ */ @media (max-width:767px){ :root{ --rail-w:0; --ph-main-pad-x:6px!important; --ph-main-pad-y:12px!important; --ph-card-size:152px; --ph-card-title-size:min(var(--ph-card-title-size,15px),13px); --ph-carousel-gap:8px!important; --ph-carousel-edge:4px; --ph-sec-gap:18px; --ph-cat-width:min(86vw,320px); --ph-cat-height:92px; --ph-cat-gap:10px; } .main{ padding:var(--ph-main-pad-y) var(--ph-main-pad-x) 56px!important; width:100%!important; max-width:none!important; box-sizing:border-box; } .rail{ width:min(260px,82vw)!important; transform:translateX(-105%); transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s; box-shadow:none; z-index:70; } .rail:hover{width:min(260px,82vw)!important} body:not(.rail-closed) .rail{ transform:translateX(0); box-shadow:18px 0 40px rgba(0,0,0,.38); } body.rail-closed .rail{ width:min(260px,82vw)!important; border-right-color:var(--line); } /* Drawer: always show labels when open */ body:not(.rail-closed) .rail .nav-group{padding:6px 12px} body:not(.rail-closed) .rail .nav-item{ justify-content:flex-start; padding:0 12px; gap:10px; } body:not(.rail-closed) .rail .nav-item .ni-label{ display:inline; opacity:1; transform:none; } body:not(.rail-closed) .rail .nav-item .ni-ico{ width:40px;height:40px;flex:0 0 40px; } .main, .ph-footer{ margin-left:0!important; width:100%; max-width:none; } .skip-link:focus{left:12px} .rail-backdrop{ position:fixed;inset:0;top:var(--top-h); background:rgba(0,0,0,.45); z-index:66; border:none;padding:0;margin:0; cursor:pointer; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .rail-backdrop[hidden]{display:none!important} body.ph-light .rail-backdrop{background:rgba(26,29,53,.32)} }