/* ======================
   ecertificate.pro — Premium Site Theme
   ====================== */

:root{
  --primary:#1f4aff;
  --primary-600:#213bd6;
  --secondary:#00c2ff;
  --success:#00b37e;
  --warning:#ffb020;
  --danger:#ef4444;

  --bg:#0f172a;
  --surface:#101827;
  --card:#ffffff;
  --muted:#6b7b8c;
  --text:#0b1220;

  --border:#e9eef5;
  --radius:14px;
  --shadow:0 8px 26px rgba(16,24,39,.10);
  --shadow-lg:0 16px 42px rgba(16,24,39,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* === Arkaplan: gradient + soft pattern (premium) === */
body{
  margin:0;
  font:16px/1.7 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at -10% -10%, #eef3ff 0%, transparent 60%),
    radial-gradient(900px 600px  at 110%  10%, #e9fff6 0%, transparent 55%),
    linear-gradient(#f6f8fc,#f6f8fc);
  background-attachment: fixed;
}
body:after{
  /* çok hafif noktasal doku */
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image: radial-gradient(rgba(31,74,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.45;mix-blend-mode:normal;
}

/* Utilities */
.container{width:92%;max-width:1200px;margin:auto;padding:22px 0}
.container--narrow{max-width:980px}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600)}
.m-0{margin:0} .mt-1{margin-top:6px} .mt-2{margin-top:10px} .mt-3{margin-top:16px}
.mt-4{margin-top:22px} .mt-5{margin-top:28px}
.text-muted{color:var(--muted)} .text-center{text-align:center}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 3px 12px rgba(0,0,0,.06)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:1.7rem;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-toggle{display:none;font-size:1.9rem;border:0;background:none}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--text);font-weight:600;letter-spacing:.2px;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--success);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--secondary),var(--primary));color:#fff;box-shadow:var(--shadow);font-weight:700}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:700;transition:all .25s}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:linear-gradient(90deg,var(--secondary),var(--primary));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef4ff;color:var(--primary);font-weight:700;font-size:.8rem}

/* Cards / Grid / Table */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:.86rem;text-transform:uppercase;color:#8a97a6;letter-spacing:.4px}
.table tbody tr{background:#fff;box-shadow:var(--shadow)}
.table td,.table th{padding:14px 16px}

/* Forms */
.input,.select,.textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#c8d6ff;box-shadow:0 0 0 5px rgba(31,74,255,.12)}
.form-row{display:grid;gap:16px}
.form-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Sections */
.section{padding:64px 0}
.section-muted{background:transparent}
.section-dark{background:#0b1220;color:#fff}
.section-sub{max-width:820px;margin:-8px auto 30px;color:#cbd5e1}

/* Hero */
.hero{position:relative;background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;text-align:center;padding:104px 18px;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.25),rgba(255,255,255,0));
  filter:blur(30px);
}

/* Trustbar (compact) */
.trustbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.trustbar .pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:999px;padding:8px 14px;font-weight:700}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stats .tile{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.stats .k{color:#7b8ca0;font-weight:700;font-size:.86rem}
.stats .v{font-size:1.9rem;font-weight:900;margin-top:6px}

/* Product Cards */
.product{overflow:hidden;padding:0}
.product img{display:block;width:100%;height:210px;object-fit:cover;border-radius:14px 14px 0 0;border-bottom:1px solid var(--border)}
.product .p-body{padding:18px}
.price{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.price .old{text-decoration:line-through;color:#98a4b3}
.price .new{color:var(--success);font-weight:800;font-size:1.2rem}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.step{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.step .cap{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.step .n{min-width:36px;height:36px;border-radius:999px;background:#eef4ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800}

/* Tabs (catalog) */
.tabs{margin-top:8px}
.tabs-nav{display:flex;gap:8px;flex-wrap:wrap}
.tabs-nav button{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700;cursor:pointer}
.tabs-nav button.active{background:linear-gradient(90deg,var(--secondary),var(--primary));color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.tab-pane{display:none;margin-top:16px}
.tab-pane.active{display:block}

/* Horizontal Carousel (Trending) */
.h-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.h-scroll > *{scroll-snap-align:start}
.carousel-ctrls{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.carousel-ctrls .btn{padding:10px 12px}

/* Testimonials */
.testi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quote{background:#fff;border-left:6px solid var(--success);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.quote p{margin:0} .quote .by{margin-top:10px;color:#1f4aff;font-weight:700}

/* CTA Wide */
.cta-wide{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;border-radius:18px;padding:32px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:space-between;gap:18px}
.cta-wide p{margin:0;color:#e7f7ff}

/* FAQ — KOYU BÖLÜMDE BEYAZ KUTU + BEYAZ YAZI DÜZELTİLDİ */
.faq{max-width:980px;margin:auto}
.faq details{border:1px solid var(--border);background:#fff;border-radius:12px;box-shadow:var(--shadow);margin:12px 0;overflow:hidden}
.faq summary{list-style:none;padding:16px 18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--text);background:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq .faq-a{padding:16px 18px;border-top:1px solid var(--border);color:#334155;background:#fafcff}
.section-dark .faq details,
.section-dark .faq summary,
.section-dark .faq .faq-a{color:var(--text);background:#fff} /* <-- kritik fix */

/* Enroll & Dashboard */
.enroll-wrap{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.summary-card .line{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--border)}
.summary-card .line:last-child{border-bottom:0}

/* ==== Yeni Dashboard (Skillify tarzı) ==== */
.dash{display:grid;grid-template-columns:280px 1fr;gap:22px}
.aside-card{position:sticky;top:88px}
.avatar{
  width:86px;height:86px;border-radius:50%;
  background:conic-gradient(from 180deg, #7869ff, #00c2ff, #7869ff);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:30px;box-shadow:var(--shadow);
}
.user-role{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef4ff;color:var(--primary);font-weight:700}
.nav-vertical a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text)}
.nav-vertical a.active,.nav-vertical a:hover{background:#eef4ff;color:var(--primary);font-weight:700}
.head-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.head-kpis .tile{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.head-kpis .k{color:#7b8ca0;font-weight:700;font-size:.86rem}
.head-kpis .v{font-size:1.6rem;font-weight:900;margin-top:6px}

/* Responsive */
@media (max-width:992px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .enroll-wrap{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}
  .aside-card{position:static}
  .head-kpis{grid-template-columns:1fr}
}
@media (max-width:768px){
  .menu-toggle{display:block}
  .nav-links{display:none}
  .nav-links.show{display:flex;flex-direction:column;gap:14px;background:#fff;position:absolute;left:0;right:0;top:64px;padding:14px 18px;border-bottom:1px solid var(--border)}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .form-2{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .testi{grid-template-columns:1fr}
}
/* ======================
   Admin UI — premium sidebar + topbar + badges
   ====================== */

.admin-shell{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 72px)}
.admin-sidebar{
  background:linear-gradient(180deg,#0b1220 0%, #111827 100%);
  color:#cfd7e3; padding:18px; position:sticky; top:72px; height:calc(100vh - 72px); overflow:auto;
  border-right:1px solid rgba(255,255,255,.06)
}
.admin-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:14px}
.admin-brand .dot{width:10px;height:10px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee}

.admin-nav a{
  display:flex;align-items:center;gap:10px;
  color:#cfd7e3;text-decoration:none;padding:10px 12px;border-radius:12px;
  border:1px solid transparent; transition:all .2s
}
.admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.08)}
.admin-nav a.active{background:linear-gradient(90deg,#3b82f6,#22d3ee);color:#0b1220;font-weight:800;border-color:transparent}

.admin-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px; background:#fff; border-bottom:1px solid var(--border)
}
.admin-topbar .crumb{font-weight:800;font-size:1.1rem}
.admin-main{padding:22px}

/* KPI Tiles */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpis .tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.kpis .tile .k{font-size:.85rem;color:#7b8ca0;font-weight:800}
.kpis .tile .v{font-weight:900;font-size:1.6rem;margin-top:6px}

/* Status badges */
.badge--pending{background:#fff7ed;color:#b45309}
.badge--completed{background:#ecfdf5;color:#047857}
.badge--canceled{background:#fee2e2;color:#b91c1c}
.badge--open{background:#eff6ff;color:#1d4ed8}
.badge--answered{background:#eef2ff;color:#4338ca}
.badge--closed{background:#f1f5f9;color:#0f172a}

/* Tables */
.table .actions{display:flex;gap:8px;flex-wrap:wrap}
.table .pill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .input,.filters .select{min-width:180px}

/* Mobile */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:fixed;left:0;top:72px;height:calc(100vh - 72px);width:260px;transform:translateX(-110%);transition:transform .25s;z-index:1001}
  .admin-sidebar.open{transform:translateX(0)}
  .admin-topbar .men
/* ======= Avatar (premium) – iOS conic-gradient taşma KESİN FİX ======= */
.avatar-pro{
  position:relative;
  width:92px; height:92px;
  border-radius:50%;
  overflow:hidden;            /* dışa taşmayı kesin engelle */
  display:inline-block;
  contain:layout paint size;  /* iOS/Safari izolasyon */
}
@media (max-width:480px){
  .avatar-pro{ width:68px; height:68px; }
}

/* 1) Masaüstünde gradient halka (taşmayacak) */
@media (min-width:1025px){
  .avatar-pro::before{
    content:"";
    position:absolute; inset:0;
    border-radius:50%;
    background:conic-gradient(#7c3aed, #00c2ff, #f5b841, #7c3aed);
    /* İçini boşaltıp sadece 5px çerçeve bırak: */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    pointer-events:none;
    z-index:0;
  }
}

/* 2) Mobilde gradient halkayı tamamen gizle, sade çerçeve kalsın */
@media (max-width:1024px){
  .avatar-pro::before{ display:none !important; }
}

/* Görsel/baş harf katmanı */
.avatar-pro img,
.avatar-pro .initials{
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:50%;
  display:block;
  background:#0f141b;
  border:2px solid #fff;           /* mobilde sade beyaz çerçeve */
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.avatar-pro .initials{
  display:flex; align-items:center; justify-content:center;
  color:#FFDD87; font-weight:900; font-size:30px; letter-spacing:1px;
}

/* Kamera butonu */
.avatar-pro .camera{
  position:absolute; right:-4px; bottom:-4px;
  width:30px; height:30px; border-radius:50%;
  background:#111827; color:#fff; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  cursor:pointer; transition:transform .15s ease; z-index:2;
}
.avatar-pro .camera:hover{ transform:translateY(-1px) }
/* === Anti horizontal scroll (mobile & desktop) === */
html, body { max-width: 100%; overflow-x: hidden; }

/* İçerik bölümlerinde taşmayı kes */
main, .section, .container, .royal-noir, .index-mesh { overflow-x: clip; }

/* Yatay kaydırmalı iç bloklar: sayfa kaymasını durdur */
.h-scroll,
.chips {
  -webkit-overflow-scrolling: touch;   /* iOS inertial scroll */
  overscroll-behavior-x: contain;      /* parent'ı etkilemesin */
  touch-action: pan-y;                 /* sadece dikey jestleri al */
}

/* Küçük ekranlarda hero kolaj aşırı geniş olmasın */
@media (max-width: 360px) {
  .ph.a { width: 260px; height: 320px; }
}

/* Güvenlik: tüm img'ler asla genişlik aşmasın */
img { max-width: 100%; height: auto; }

/* Grid'lerin yanında scrollbar taşmalarını önle */
* { box-sizing: border-box; }