/* =========================================================================
   pagespeed.com.tr — arayüz
   ========================================================================= */

:root{
  /* Puan renkleri — anlam taşır (iyi / orta / kötü). Panelden değiştirilebilir. */
  --fast:#0cce6b;      --fast-bg:rgba(12,206,107,.12);    --fast-ink:#08873f;
  --average:#ffa400;   --average-bg:rgba(255,164,0,.14);  --average-ink:#945f00;
  --slow:#ff4e42;      --slow-bg:rgba(255,78,66,.12);     --slow-ink:#b3372e;
  --null:#93a1ae;      --null-bg:rgba(147,161,174,.14);

  /* Marka renkleri — logodan alındı, panelden değiştirilebilir. */
  --blue:#0f518d;      --blue-dark:#0a3c6b;  --blue-bg:#e7eff8;
  --accent:#eb654e;    --teal:#24779a;
  --ink:#1c2b3a;       --ink-2:#566370;      --ink-3:#7d8893;
  --line:#d3dce5;      --line-soft:#e6ecf2;
  --bg:#f5f8fb;        --card:#fff;

  --radius:12px;
  --shadow:0 1px 2px rgba(60,64,67,.16), 0 1px 3px 1px rgba(60,64,67,.08);
  --wrap:1080px;
  --sans:"Google Sans",Roboto,-apple-system,"Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 14px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 8px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
h1{font-size:28px}h2{font-size:20px}h3{font-size:16px}
p{margin:0 0 12px}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skiplink{position:absolute;left:-9999px}
.skiplink:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;box-shadow:var(--shadow)}

/* --------------------------------------------------------------- üst bar -- */
.topbar{background:#fff;border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:20}
.topbar__in{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;flex:none}
.brand:hover{text-decoration:none}
.brand img{display:block;width:auto;max-width:280px;object-fit:contain}
.footer__logo{display:inline-block;margin-bottom:4px}
.footer__logo img{display:block;width:auto;max-width:260px;object-fit:contain}
.topnav{margin-left:auto;display:flex;gap:22px;font-size:14px}
.topnav a{color:var(--ink-2)}
.topsearch{flex:1;max-width:520px;display:flex;align-items:center;background:var(--bg);
  border:1px solid transparent;border-radius:999px;padding:0 6px 0 16px}
.topsearch:focus-within{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.topsearch input{flex:1;border:0;background:none;font:inherit;padding:9px 0;min-width:0;color:var(--ink)}
.topsearch input:focus{outline:none}
.topsearch button{border:0;background:none;padding:6px;cursor:pointer;border-radius:50%;display:flex}
.topsearch button svg{width:20px;height:20px;fill:var(--ink-2)}
.topsearch button:hover{background:var(--line-soft)}

/* ------------------------------------------------------------------ hero -- */
.hero{background:#fff;border-bottom:1px solid var(--line-soft);padding:56px 0 44px}
.hero__in{max-width:720px;text-align:center}
.hero__title{font-size:34px;font-weight:400;letter-spacing:-.02em}
.hero__sub{color:var(--ink-2);font-size:16px;max-width:60ch;margin:0 auto 28px}

.analyze{text-align:left}
.analyze__field{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:0 8px 0 18px;transition:box-shadow .15s,border-color .15s}
.analyze__field:focus-within{border-color:transparent;box-shadow:0 1px 6px rgba(32,33,36,.28)}
.analyze__icon{width:20px;height:20px;fill:var(--ink-3);flex:none}
.analyze__field input{flex:1;border:0;font:inherit;font-size:16px;padding:14px 0;min-width:0;background:none}
.analyze__field input:focus{outline:none}
.analyze__clear{border:0;background:none;cursor:pointer;padding:7px;border-radius:50%;display:flex}
.analyze__clear svg{width:18px;height:18px;fill:var(--ink-2)}
.analyze__clear:hover{background:var(--line-soft)}

.analyze__opts{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.segmented{display:flex;background:var(--bg);border-radius:999px;padding:3px}
.segmented label{position:relative}
.segmented input{position:absolute;inset:0;opacity:0;cursor:pointer}
.segmented span{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer}
.segmented svg{width:16px;height:16px;fill:currentColor}
.segmented input:checked + span{background:#fff;color:var(--blue);box-shadow:var(--shadow)}
.segmented input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}

.analyze__error{background:var(--slow-bg);color:var(--slow-ink);border-radius:8px;padding:12px 14px;
  margin-top:16px;font-size:13.5px}

/* --------------------------------------------------------------- düğmeler -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:999px;padding:10px 22px;font:500 14px/1 var(--sans);cursor:pointer;
  transition:background .15s,box-shadow .15s}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-dark);text-decoration:none;box-shadow:var(--shadow)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--blue)}
.btn--ghost:hover{background:var(--blue-bg);text-decoration:none}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

/* --------------------------------------------------------------- ilerleme -- */
.progress{margin-top:24px;text-align:center}
.progress__bar{height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden;position:relative}
.progress__bar span{position:absolute;inset:0;width:35%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--teal),var(--fast));
  animation:slide 1.6s ease-in-out infinite}
@keyframes slide{0%{left:-35%}100%{left:100%}}
.progress__text{margin:14px 0 2px;font-size:14px;color:var(--ink)}
.progress__hint{font-size:12.5px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.progress__bar span{animation:none;width:100%;opacity:.5;left:0}}

/* --------------------------------------------------------------- anlatım -- */
.explain{padding:48px 20px 8px}
.explain__title{font-size:20px;font-weight:500;margin-bottom:20px}
.explain__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.explain__grid article{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px}
.explain__grid h3{font-size:15px}
.explain__grid p{color:var(--ink-2);margin:0;font-size:13.5px}

/* -------------------------------------------------------- son analizler --- */
.recent{padding:40px 20px 60px}
.recent__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.recent__head p{color:var(--ink-3);font-size:13px;margin:0}
.recent__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.recent__list a{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:10px;padding:12px 14px;color:var(--ink)}
.recent__list a:hover{text-decoration:none;box-shadow:var(--shadow)}
.recent__host{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent__meta{margin-left:auto;color:var(--ink-3);font-size:12px;white-space:nowrap}

.pill{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;
  padding:0 8px;border-radius:6px;font-weight:500;font-size:13px}
.pill--fast{background:var(--fast-bg);color:var(--fast-ink)}
.pill--average{background:var(--average-bg);color:var(--average-ink)}
.pill--slow{background:var(--slow-bg);color:var(--slow-ink)}
.pill--null{background:var(--null-bg);color:var(--ink-2)}

/* ----------------------------------------------------------------- rapor -- */
.report{padding:24px 20px 64px;display:grid;gap:16px}

.rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rhead__label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:2px}
.rhead__url a{font-size:18px;font-weight:500;word-break:break-all}
.rhead__final{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.rhead__actions{display:flex;gap:10px;flex-wrap:wrap}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabs__tab{padding:12px 20px;color:var(--ink-2);font-weight:500;border-bottom:3px solid transparent;
  margin-bottom:-1px;font-size:14px}
.tabs__tab:hover{background:var(--bg);text-decoration:none}
.tabs__tab.is-active{color:var(--blue);border-bottom-color:var(--blue)}
.tabs__new{background:var(--blue-bg);color:var(--blue-dark);font-size:10.5px;padding:2px 6px;
  border-radius:4px;vertical-align:2px}

.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.card__head{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.card__head--plain{align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.card__head h2{margin:0}
.card__sub{color:var(--ink-3);font-size:13px;margin:2px 0 0}
.card__headtext p{color:var(--ink-2);font-size:13.5px;margin:4px 0 0;max-width:60ch}

.assess{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:500}
.assess--pass{background:var(--fast-bg);color:var(--fast-ink)}
.assess--fail{background:var(--slow-bg);color:var(--slow-ink)}

.nodata{background:var(--bg);border-radius:8px;padding:16px;color:var(--ink-2);margin:0;font-size:13.5px}

/* göstergeler */
.gauges{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-around}
.gauges__item{flex:1 1 150px;display:flex;justify-content:center;padding:8px;border-radius:10px}
.gauges__item:hover{background:var(--bg);text-decoration:none}
.gauge{position:relative;width:112px;text-align:center}
.gauge svg{transform:rotate(-90deg);display:block;margin:0 auto}
.gauge__bg{stroke:var(--null-bg)}
.gauge__arc{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.gauge__num{position:absolute;left:0;right:0;top:0;height:112px;display:flex;align-items:center;
  justify-content:center;font-size:30px;font-weight:400}
.gauge__label{display:block;margin-top:8px;font-size:13px;color:var(--ink);font-weight:500}
.gauge--fast .gauge__arc{stroke:var(--fast)}   .gauge--fast .gauge__num{color:var(--fast-ink)}
.gauge--fast .gauge__bg{stroke:var(--fast-bg)}
.gauge--average .gauge__arc{stroke:var(--average)} .gauge--average .gauge__num{color:var(--average-ink)}
.gauge--average .gauge__bg{stroke:var(--average-bg)}
.gauge--slow .gauge__arc{stroke:var(--slow)}   .gauge--slow .gauge__num{color:var(--slow-ink)}
.gauge--slow .gauge__bg{stroke:var(--slow-bg)}
.gauge--null .gauge__arc{stroke:var(--null)}   .gauge--null .gauge__num{color:var(--ink-2)}
.card__head .gauge{width:96px;flex:none}
.card__head .gauge__num{height:96px;font-size:26px}

.scale{display:flex;gap:18px;justify-content:center;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-2)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.dot--fast{background:var(--fast)}.dot--average{background:var(--average)}
.dot--slow{background:var(--slow)}.dot--null{background:var(--null)}

/* alan verisi kartları */
.fmgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.fm{border:1px solid var(--line-soft);border-radius:10px;padding:16px}
.fm__head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.fm__name{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm__val{margin-left:auto;font-size:18px;font-weight:500;white-space:nowrap}
.fm--fast .fm__val{color:var(--fast-ink)}.fm--average .fm__val{color:var(--average-ink)}.fm--slow .fm__val{color:var(--slow-ink)}
.fm__bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line-soft)}
.fm__bar .seg{display:block;height:100%}
.seg--fast{background:var(--fast)}.seg--average{background:var(--average)}.seg--slow{background:var(--slow)}
.fm__legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.fm__legend .dot{width:8px;height:8px;margin-right:4px}
.fm__desc{font-size:12px;color:var(--ink-3);margin:10px 0 0}

.badge{width:11px;height:11px;flex:none;display:inline-block}
.badge--square{background:var(--fast)}
.badge--triangle{width:0;height:0;background:none;border-left:6px solid transparent;
  border-right:6px solid transparent;border-bottom:11px solid var(--average)}
.badge--circle{border-radius:50%;background:var(--slow)}
.badge--null.badge--circle{background:var(--null)}

.more{margin-top:16px}
.more>summary{cursor:pointer;color:var(--blue);font-weight:500;font-size:13.5px;padding:8px 0}
.more[open]>summary{margin-bottom:12px}

/* laboratuvar metrikleri + ekran görüntüsü */
.metrics{display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:start}
.metrics__list{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.lm{padding:12px 0}
.lm__top{display:flex;align-items:center;gap:8px}
.lm__name{font-size:13px;color:var(--ink-2)}
.lm__val{font-size:22px;font-weight:400;margin-top:4px;padding-left:19px}
.lm__val--fast{color:var(--fast-ink)}.lm__val--average{color:var(--average-ink)}.lm__val--slow{color:var(--slow-ink)}
.shot{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.shot img{display:block;width:100%}
.shot figcaption{font-size:11.5px;color:var(--ink-3);padding:8px 10px;border-top:1px solid var(--line-soft)}

/* denetimler */
.subhead{font-size:14px;font-weight:500;margin:22px 0 8px;color:var(--ink)}
.count{background:var(--bg);border-radius:10px;padding:1px 8px;font-size:12px;color:var(--ink-2);margin-left:6px}
.audits{border-top:1px solid var(--line-soft)}
.audit{border-bottom:1px solid var(--line-soft)}
.audit>summary{display:flex;align-items:center;gap:10px;padding:13px 4px;cursor:pointer;list-style:none}
.audit>summary::-webkit-details-marker{display:none}
.audit>summary:hover{background:var(--bg)}
.audit__title{font-size:13.5px;flex:1;min-width:0}
.audit__saving{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.audit--slow .audit__saving{color:var(--slow-ink)}
.audit--average .audit__saving{color:var(--average-ink)}
.audit__chev{width:20px;height:20px;fill:var(--ink-3);flex:none;transition:transform .15s}
.audit[open] .audit__chev{transform:rotate(180deg)}
.audit__body{padding:2px 4px 16px 25px;color:var(--ink-2);font-size:13px;max-width:75ch}
.audit__body p{margin:0}
.passed>summary{cursor:pointer;color:var(--blue);font-weight:500;font-size:13.5px;padding:10px 0}
.allgood{background:var(--fast-bg);color:var(--fast-ink);border-radius:8px;padding:12px 14px;font-size:13.5px;margin:12px 0 0}

.env dl{display:grid;grid-template-columns:200px 1fr;gap:8px 18px;margin:0;font-size:13px}
.env dt{color:var(--ink-3)}
.env dd{margin:0;word-break:break-word}

.missing{text-align:center}
.missing p{color:var(--ink-2);max-width:52ch;margin:0 auto 18px}
.notfound{padding:80px 20px;text-align:center}

/* ------------------------------------------------------- liste / tablo --- */
.listpage,.textpage{padding:32px 20px 64px}
.listpage h1,.textpage h1{margin-bottom:18px}
.filter{display:flex;gap:10px;margin-bottom:18px}
.filter input{flex:1;max-width:320px;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font:inherit}
.table-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-soft)}
.table th{font-weight:500;color:var(--ink-3);font-size:12px;background:var(--bg)}
.table tbody tr:last-child td{border-bottom:0}
.table__url{font-weight:500;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.table__date{color:var(--ink-3);white-space:nowrap}
.textpage .table{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);margin-bottom:24px}
.textpage{max-width:820px}
.textpage h2{font-size:17px;margin-top:28px}
.textpage p{color:var(--ink-2);max-width:70ch}
.pager{display:flex;gap:6px;justify-content:center;margin-top:20px}
.pager a{padding:7px 13px;border-radius:8px;border:1px solid var(--line-soft);background:#fff;color:var(--ink-2)}
.pager a.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pager a:hover{text-decoration:none;box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- footer -- */
.footer{background:#fff;border-top:1px solid var(--line-soft);margin-top:40px;padding:32px 0}
.footer__in{display:grid;gap:12px}
.footer__note{color:var(--ink-3);font-size:12.5px;max-width:70ch;margin:0}
.footer__nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.footer__nav a{color:var(--ink-2)}
.footer__copy{color:var(--ink-3);font-size:12.5px;margin:0}

/* -------------------------------------------------------------- toast ---- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#323232;color:#fff;
  padding:12px 20px;border-radius:8px;font-size:13.5px;z-index:60;box-shadow:var(--shadow)}

/* ------------------------------------------------------------- mobil ----- */
@media (max-width:860px){
  .metrics{grid-template-columns:1fr}
  .shot{max-width:260px}
  .env dl{grid-template-columns:1fr;gap:2px 0}
  .env dt{margin-top:10px}
}
@media (max-width:700px){
  .hero{padding:36px 0 32px}
  .hero__title{font-size:26px}
  .topnav{display:none}
  .topsearch{max-width:none}
  .brand img{max-width:180px;height:32px !important}
  .card{padding:18px 16px}
  .report{padding:16px 14px 48px}
  .rhead__actions{width:100%}
  .rhead__actions .btn{flex:1}
  .tabs__tab{flex:1;text-align:center;padding:12px 8px}
  .gauges__item{flex-basis:calc(50% - 8px)}
  .wrap{padding:0 14px}
}

/* ------------------------------------------------- rapor başlığı (arama) -- */
.rhead{display:block}
.rhead__when{color:var(--ink-3);font-size:13px;margin:0 0 10px}
.rhead__form{display:flex;gap:10px;align-items:center;max-width:720px}
.rhead__form .analyze__field{flex:1;padding-left:16px}
.rhead__form .analyze__field input{font-size:14px;padding:10px 0}
.rhead__final{font-size:12.5px;color:var(--ink-3);margin:8px 0 0}
.rhead__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn--sm{padding:7px 15px;font-size:13px}

/* ------------------------------------------------------------ filmstrip -- */
.filmstrip{display:flex;gap:8px;overflow-x:auto;padding:18px 0 4px;margin-top:8px;
  border-top:1px solid var(--line-soft)}
.filmstrip__frame{margin:0;flex:none;text-align:center}
.filmstrip__frame img{display:block;width:78px;border:1px solid var(--line);border-radius:4px;background:#fff}
.filmstrip__frame figcaption{font-size:11px;color:var(--ink-3);margin-top:5px}

/* ------------------------------------------------------- metrik filtresi -- */
.mfilter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 4px;
  font-size:12.5px;color:var(--ink-2)}
.mfilter span{margin-right:2px}
.mfilter__btn{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
  padding:4px 12px;font:500 12px/1 var(--sans);cursor:pointer}
.mfilter__btn:hover{background:var(--bg)}
.mfilter__btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ------------------------------------------------- kategori alt grupları -- */
.groupname{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 4px}

/* ------------------------------------------------------ ölçüm uyarı kutusu */
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:10px;padding:14px 16px;
  margin:0 0 20px;font-size:13px;line-height:1.55}
.notice svg{width:20px;height:20px;flex:none;margin-top:1px}
.notice strong{display:block;margin-bottom:4px;font-size:13.5px}
.notice p{margin:0 0 6px;max-width:78ch}
.notice p:last-child{margin-bottom:0}
.notice--warn{background:var(--average-bg);color:var(--average-ink)}
.notice--warn svg{fill:var(--average)}

.lm__flag{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  margin-left:6px;border-radius:50%;background:var(--average-bg);color:var(--average-ink);
  font-size:10px;font-weight:700;cursor:help;flex:none}

.env__bench--low{color:var(--average-ink);font-weight:500}
.env__note{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:2px}