/* =====================================================
   UBT — SHARED CSS (BASIC VERSION)
   - Tüm sayfalar bunu kullanır
   - Kartlar: .card / .detail-card
   - Renkler: .card-color-1..5
   ===================================================== */

/* ---------- Global reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }

/* ---------- Body background + base font ---------- */
body {
    font-family:'Segoe UI', Tahoma, sans-serif;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
    padding:20px;
    min-height:100vh;
}

/* ---------- Container (mobile-friendly centered layout) ---------- */
.container {
    max-width:420px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-bottom:100px;
}


/* =====================================================
   CARDS ROOT (dynamic cards spacing)
   - card-loader.js buraya kartları inject eder
   - kartlar arası boşluk burada yönetilir
   ===================================================== */
#cards-root{
    display:flex;
    flex-direction:column;
    gap:14px; /* kartlar arası boşluk */
}
/* END of block: Cards Root */


/* =====================================================
   PROJECT CARDS (logos left, text right)
   - Used in Corporate/Private projects
   ===================================================== */
.proj-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.proj-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Logo fixed size, stays left, never shrinks */
.proj-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
/* END of block: Project Cards */

/* =====================================================
   CARD BASE
   - .card  : hero + navigation
   - .detail-card : all content sections
   ===================================================== */
.card, .detail-card {
    background:white;
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    position:relative;
}
/* END of block: Card Base */

/* =====================================================
   HERO
   ===================================================== */
.hero-card {
    background:linear-gradient(135deg,#ff6b35,#f7931e);
    color:white;
}

.hero-top {
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
}

.hero-logo { width:48px; height:48px; border-radius:50%; }
.hero-domain { font-size:16px; font-weight:600; color:white; }
.hero-logo-box { display:flex; align-items:center; gap:8px; }

/* Home icon in hero */
.home-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    padding:6px;
    background:white;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transition:.2s;
}

.home-icon:hover { transform:scale(1.1); }
/* END of block: Hero */

/* ---------- Titles ---------- */
.section-title {
    font-size:19px;
    font-weight:700;
    margin-bottom:12px;
}

/* =====================================================
   5-COLOR CARD PALETTE (Office style)
   - Apply to .detail-card via class
   ===================================================== */
.card-color-1 { background:#00A4EF !important; color:white !important; } /* Blue */
.card-color-2 { background:#7FBA00 !important; color:white !important; } /* Green */
.card-color-3 { background:#F7630C !important; color:white !important; } /* Orange */
.card-color-4 { background:#A700AE !important; color:white !important; } /* Purple */
.card-color-5 { background:#FFB900 !important; color:#222 !important; }  /* Yellow (dark text) */
/* END of block: Card Colors */

/* (Legacy office-* classes — optional) */
.office-orange { background:#D83B01 !important; color:white; }
.office-green  { background:#107C41 !important; color:white; }
.office-blue   { background:#185ABD !important; color:white; }
.office-purple { background:#742774 !important; color:white; }
.office-teams  { background:#005A9E !important; color:white; }
.office-contact{ background:#107C10 !important; color:white; }

/* =====================================================
   NAV CARD (yellow)
   ===================================================== */
.nav-card { background:#FFB900 !important; color:#333; }

.nav-grid {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.nav-item {
    background:white;
    border-radius:16px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
    transition:.15s;
}

.nav-item:hover {
    background:#fff3c4;
    transform:translateX(5px);
}

.nav-icon { font-size:22px; }
.chevron { opacity:.4; }
/* END of block: Navigation */

/* =====================================================
   CARD BUTTONS (Home + Up)
   ===================================================== */
.card-buttons {
    position:absolute;
    right:14px;
    top:14px;
    display:flex;
    gap:10px;
}

.btn-icon {
    width:34px;
    height:34px;
    border-radius:10px;
    padding:5px;
    background:rgba(255,255,255,0.35);
    backdrop-filter:blur(4px);
    box-shadow:0 2px 6px rgba(0,0,0,.22);
    cursor:pointer;
    transition:.15s;
    object-fit:contain; /* icon cropping fix */
}

.btn-icon:hover {
    transform:scale(1.12);
    background:rgba(255,255,255,0.55);
}
/* END of block: Card Buttons */

/* =====================================================
   ACHIEVEMENTS LIST
   ===================================================== */
.ach-list {
    display:flex;
    flex-direction:column;
    gap:14px;
    font-size:14px;
    line-height:1.55;
}
/* END of block: Achievements */

/* =====================================================
   TECH STACK SECTION
   ===================================================== */
.tech-section {
    display:flex;
    flex-direction:column;
    gap:16px;
    font-size:14px;
    line-height:1.55;
}

.tech-section h4 {
    margin:0;
    font-size:15px;
    font-weight:700;
}
/* END of block: Tech Stack */

/* =====================================================
   EXPERIENCE
   ===================================================== */
.exp-section { margin-bottom:32px; }

.exp-header {
    display:flex;
    gap:16px;
    margin-bottom:12px;
}

.exp-logo {
    width:56px;
    height:56px;
    border-radius:14px;
    object-fit:cover;
}

.exp-title { display:flex; flex-direction:column; }

.exp-role { font-size:17px; font-weight:700; margin:0; }
.exp-company { font-size:15px; font-weight:600; margin:2px 0 0 0; }
.exp-sub { font-size:13px; opacity:.75; margin-top:2px; }

.exp-list {
    list-style:none;
    padding:0;
    margin:0;
}

.exp-list li {
    margin-bottom:10px;
    font-size:14px;
    line-height:1.45;
}
/* END of block: Experience */

/* =====================================================
   OVERLAP FIX: give the card bottom space for the widget
   ===================================================== */
.card{ padding-bottom: 74px; } /* widget space */

/* On small screens give a bit more */
@media (max-width:700px){
  .card{ padding-bottom: 96px; }
}

/* Also ensure preview panel has breathing space */
.panel.preview-panel{ padding-bottom: 64px; }


/* Smooth scrolling for anchor jumps */
html { scroll-behavior:smooth; }
/* END of file: ubt-shared.css */

.insights-panel {
  margin-top: 14px;
}

.insight-block {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.insight-block.issues {
  border-left: 4px solid #ff6b6b;
}

.insight-block.fixes {
  border-left: 4px solid #51cf66;
}

.insight-block ul {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--text);
}