/*
Theme Name: Tafkam Portal V3
Version: 3.0.0
Description: Tafkam portal - light glassmorphism reference layout, RTL, left sidebar.
Text Domain: tafkam
*/
:root{
 --bg:#edf4fc;--bg2:#dfeafb;--panel:rgba(255,255,255,.66);--panel2:rgba(246,250,255,.76);
 --line:rgba(94,132,181,.20);--ink:#17253b;--muted:#6f8098;
 --blue:#477cf5;--cyan:#2ab9ed;--violet:#8068ef;--green:#38c99b;--orange:#efad43;--pink:#e85db9;
 --shadow:0 18px 55px rgba(51,79,119,.14);
}
*{box-sizing:border-box}
html{direction:rtl}
body{
 margin:0;min-height:100vh;color:var(--ink);
 font-family:"TafkamSans","Vazirmatn","Noto Sans Arabic",Tahoma,Arial,sans-serif;
 background:
 radial-gradient(850px 500px at 78% 8%,rgba(87,139,255,.18),transparent 66%),
 radial-gradient(750px 500px at 15% 60%,rgba(57,204,238,.10),transparent 68%),
 linear-gradient(145deg,var(--bg),var(--bg2));
}
a{text-decoration:none;color:inherit}
button,input{font-family:inherit}
.shell{max-width:1500px;margin:18px auto;padding:0 18px}
.glass{
 background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(244,249,255,.57));
 border:1px solid rgba(255,255,255,.85);
 box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
 backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)
}

/* top bar */
.header{height:88px;border-radius:26px;display:flex;align-items:center;padding:10px 18px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;min-width:245px}
.brand-logo{width:55px;height:55px}.logo{width:100%;height:100%;filter:drop-shadow(0 8px 13px rgba(66,117,235,.25))}
.brand b{font-size:22px}.brand small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.search-wrap{flex:1;display:flex;justify-content:center}.search{width:min(560px,100%);height:48px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.52);outline:none;padding:0 20px;color:var(--ink);font-size:12px}
.actions{display:flex;gap:9px;direction:ltr}.action{width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.58);color:#50627b;font-size:20px}.profile{height:48px;padding:0 10px;border-radius:16px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.58);border:1px solid var(--line)}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#5e8cff,#8064e8);color:white;font-size:11px;font-weight:bold}.profile small{font-size:9px;color:var(--muted)}.profile b{font-size:12px}

/* IMPORTANT: sidebar is first visual column = LEFT */
.content{display:grid;grid-template-columns:330px minmax(0,1fr);gap:15px;margin-top:15px;direction:ltr}
.main{direction:rtl;min-width:0}.sidebar{direction:rtl;display:flex;flex-direction:column;gap:13px}

/* hero */
.hero{height:330px;border-radius:29px;position:relative;overflow:hidden;direction:rtl}
.hero-copy{position:absolute;right:5%;top:68px;width:51%;z-index:3}
.hero-copy .eyebrow{font-size:15px;font-weight:600}.hero h1{font-size:43px;line-height:1.35;margin:7px 0 13px;letter-spacing:-1px}.hero h1 span{color:var(--blue)}.hero p{font-size:12px;color:var(--muted);line-height:2;margin:0}
.hero-art{position:absolute;left:1%;top:0;width:53%;height:100%;display:grid;place-items:center}
.orbit{position:absolute;width:370px;height:110px;border:1px solid rgba(74,136,243,.36);border-radius:50%;transform:rotate(-9deg);box-shadow:0 0 28px rgba(71,124,245,.17)}
.orbit:after{content:"";position:absolute;inset:20px 45px;border:1px solid rgba(76,177,232,.28);border-radius:50%}
.glass-shape{position:relative;width:270px;height:190px;border:1.5px solid rgba(78,142,244,.62);border-radius:48% 52% 45% 55%;transform:rotate(-14deg);background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(111,163,245,.10));box-shadow:0 0 35px rgba(64,130,242,.23),inset 0 0 30px rgba(255,255,255,.55);animation:float 6s ease-in-out infinite}
.glass-shape:before,.glass-shape:after{content:"";position:absolute;border:1px solid rgba(77,155,245,.36);border-radius:inherit;inset:15px}.glass-shape:after{inset:35px;opacity:.7}
.hero-mark{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(14deg);font-size:64px;color:#4d86f4;text-shadow:0 8px 24px rgba(55,116,244,.28)}
@keyframes float{50%{transform:translateY(-8px) rotate(-10deg)}}

/* sidebar */
.side{border-radius:21px;padding:17px 18px}.side-title{font-size:12px;font-weight:700;margin-bottom:10px}.clockrow{display:flex;align-items:center;justify-content:space-between}.clock{font-size:29px;font-weight:700;letter-spacing:.5px}.date{font-size:9px;color:var(--muted);margin-top:3px}.clock-icon{width:48px;height:48px;border-radius:15px;background:rgba(71,124,245,.09);border:1px solid rgba(71,124,245,.16);display:grid;place-items:center;font-size:23px;color:var(--blue)}
.status{border-top:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;font-size:10px}.ok{color:#2dbb8e}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3dc99a;box-shadow:0 0 8px rgba(61,201,154,.7);margin-left:4px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quick a{height:38px;border:1px solid var(--line);background:rgba(255,255,255,.45);border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;font-size:9px}.qi{width:25px;height:25px;border-radius:8px;background:rgba(71,124,245,.09);color:var(--blue);display:grid;place-items:center}
.support{min-height:108px;position:relative}.support p{font-size:9px;color:var(--muted);margin:3px 0 8px}.phone{font-size:19px;font-weight:700;color:var(--blue);direction:ltr;text-align:right}.call{position:absolute;left:15px;bottom:14px;width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#5a88f8,#5570dc);color:white}

/* systems */
.systems{margin-top:14px}.systems-head{display:flex;justify-content:space-between;align-items:end;margin:0 2px 9px}.systems-head h2{font-size:18px;margin:0}.systems-head p{font-size:9px;color:var(--muted);margin:3px 0 0}.other{border:1px solid rgba(71,124,245,.22);background:rgba(255,255,255,.58);border-radius:12px;padding:9px 12px;color:#48669d;font-size:10px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.view{display:none}.view.active{display:grid}
.card{height:222px;border-radius:22px;padding:18px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.25s}.card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(51,79,119,.20)}.card:after{content:"";position:absolute;width:210px;height:90px;left:50%;bottom:-65px;transform:translateX(-50%);background:radial-gradient(circle,rgba(73,127,246,.12),transparent 68%)}
.icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:25px;border:1px solid currentColor;background:rgba(255,255,255,.38);box-shadow:0 8px 25px currentColor;margin-bottom:13px;position:relative;z-index:1}.card h3{font-size:14px;margin:0 0 7px}.card p{font-size:9.5px;color:var(--muted);line-height:1.9;margin:0;min-height:40px}.enter{height:34px;margin-top:auto;border:1px solid currentColor;border-radius:18px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:9.5px;background:rgba(255,255,255,.24)}.arrow{font-size:17px;direction:ltr}
.violet{color:#8169e9}.blue{color:#4d83ef}.green{color:#35c99b}.orange{color:#eda944}.pink{color:#e85db9}.cyan{color:#29b9e9}
.fade{animation:fade .38s ease}@keyframes fade{from{opacity:.2;transform:translateX(22px)}to{opacity:1;transform:none}}

/* footer */
.footer{height:61px;margin-top:13px;border-radius:20px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px}.secure{display:flex;gap:7px;align-items:center}.secure-dot{width:8px;height:8px;border-radius:50%;background:#39c69a;box-shadow:0 0 8px #39c69a}
@media(max-width:1100px){.content{grid-template-columns:290px minmax(0,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.header{height:auto;flex-wrap:wrap}.search-wrap{order:4;flex-basis:100%}.content{grid-template-columns:1fr}.sidebar{order:2;display:grid;grid-template-columns:repeat(2,1fr)}.main{order:1}}
@media(max-width:620px){.shell{padding:0 9px}.brand{min-width:auto}.profile small,.profile b{display:none}.hero{height:400px}.hero-copy{top:30px;right:7%;width:86%}.hero h1{font-size:30px}.hero-art{width:100%;height:55%;top:45%;left:0}.glass-shape{width:215px;height:150px}.grid{grid-template-columns:1fr}.sidebar{display:flex}.footer{height:auto;padding:12px;gap:8px;flex-direction:column;align-items:flex-start}}