/* Optimized CSS - Rüya Tabirleri */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --dark-color: #1a252f;
    --light-color: #ecf0f1;
    --base-font-size: 18px;
    --heading-font-size: 2.25rem;
    --subheading-font-size: 1.5rem;
    --card-title-font-size: 1.25rem;
    --btn-font-size: 1.1rem;
    --tag-font-size: 1rem;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #4fc3f7 0%, #e040fb 100%);
}

/* Base Styles */
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;font-size:var(--base-font-size)}
h1,.display-4,.display-5{font-size:var(--heading-font-size);font-weight:700}
h2,.display-6{font-size:var(--subheading-font-size);font-weight:700}
.card-title,h5{font-size:var(--card-title-font-size)}
.btn,.interactive-button{font-size:var(--btn-font-size)}
.input-group-lg .form-control,.form-select-lg{font-size:var(--btn-font-size)}
img{max-width:100%;height:auto}

/* Hero Section */
.hero-section{background:linear-gradient(135deg,rgba(44,62,80,.9),rgba(52,152,219,.9));background-size:cover;background-attachment:fixed;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');animation:starfield 20s linear infinite}
@keyframes starfield{0%{transform:translateY(0)}100%{transform:translateY(-100px)}}

/* Cards */
.category-card,.dream-card{transition:transform var(--transition-normal),box-shadow var(--transition-normal);border:none;position:relative;overflow:hidden}
.category-card:hover,.dream-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.category-card::before{content:'';position:absolute;top:50%;left:50%;width:100px;height:100px;background:radial-gradient(circle,rgba(52,152,219,.1) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:all var(--transition-normal);z-index:1}
.category-card:hover::before{width:120px;height:120px;background:radial-gradient(circle,rgba(52,152,219,.2) 0%,transparent 70%)}
.dream-card::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}
.dream-card:hover::after{left:100%}

/* Dream Image Placeholder */
.dream-image-placeholder{width:100%;height:200px;background:var(--gradient-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:4rem;margin-bottom:1rem;position:relative;overflow:hidden}
.dream-image-placeholder::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.1) 10px,rgba(255,255,255,.1) 20px);animation:shimmer 3s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Statistics */
.stat-chart{position:relative;height:60px;background:#f8f9fa;border-radius:30px;overflow:hidden;margin:10px 0}
.stat-bar{height:100%;background:linear-gradient(90deg,var(--secondary-color),#2980b9);border-radius:30px;position:relative;transition:width 1s ease-in-out}
.stat-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%);background-size:20px 20px;animation:progress-bar-stripes 1s linear infinite}
@keyframes progress-bar-stripes{0%{background-position:0 0}100%{background-position:20px 0}}

/* Dream Tips Modern */
.dream-tips-modern{background:var(--gradient-secondary);color:#fff;border-radius:1.5rem;box-shadow:var(--shadow-md);margin-bottom:2rem}
.dream-tips-title{font-size:2.1rem;font-weight:700;background:linear-gradient(90deg,#fff 0%,#ffd54f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dream-tip-card{background:rgba(255,255,255,.12);border-radius:1.2rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast);color:#fff;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dream-tip-card:hover{transform:translateY(-6px) scale(1.04);box-shadow:var(--shadow-md);background:rgba(255,255,255,.22)}
.dream-tip-icon{display:inline-block;font-size:2.7rem;margin-bottom:.5rem;background:linear-gradient(135deg,#ffd54f 40%,#e040fb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:font-size var(--transition-fast)}
.dream-tip-card:hover .dream-tip-icon{font-size:3.1rem}

/* Modern Tags */
.modern-tags-title{font-size:2rem;font-weight:700;background:var(--gradient-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem}
.gradient-icon{background:linear-gradient(135deg,#4fc3f7 40%,#e040fb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:2.2rem}
.modern-tag-cloud{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-bottom:1.5rem}
.modern-tag-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.5rem;border-radius:2rem;box-shadow:var(--shadow-sm);font-size:1.15rem;font-weight:500;text-decoration:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast);border:none;cursor:pointer;min-width:110px;background:linear-gradient(135deg,#e0e0e0 60%,#fff 100%)}
.modern-tag-item:hover{transform:scale(1.08);box-shadow:var(--shadow-md);background:var(--gradient-secondary);color:#fff!important}
.modern-tag-icon{font-size:1.5rem;transition:font-size var(--transition-fast)}
.modern-tag-item:hover .modern-tag-icon{font-size:1.8rem;color:#fff}
.modern-tag-text{font-size:1.1rem;font-weight:600}

/* Tag Cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.tag-item{padding:5px 12px;background:var(--gradient-primary);color:#fff;border-radius:20px;font-size:var(--tag-font-size);text-decoration:none;transition:all var(--transition-normal);position:relative;overflow:hidden}
.tag-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}
.tag-item:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,.4);color:#fff}
.tag-item:hover::before{left:100%}

/* Interactive Button */
.interactive-button{position:relative;overflow:hidden;transform:translateZ(0)}
.interactive-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}
.interactive-button:hover::before{left:100%}

/* Search Results */
.search-result-visual{display:flex;align-items:center;padding:15px;border-radius:10px;background:#fff;box-shadow:var(--shadow-sm);margin-bottom:10px;transition:all var(--transition-normal)}
.search-result-visual:hover{transform:translateX(5px);box-shadow:var(--shadow-md)}
.search-result-icon{width:50px;height:50px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;margin-right:15px;font-size:1.2rem}
.search-highlight{background-color:#fff3cd;padding:2px 4px;border-radius:3px}

/* Buttons */
.btn-primary{background-color:var(--secondary-color);border-color:var(--secondary-color)}
.btn-primary:hover{background-color:#2980b9;border-color:#2980b9}
.text-primary{color:var(--secondary-color)!important}
.bg-primary{background-color:var(--primary-color)!important}

/* FAB */
.fab-container{position:fixed;bottom:20px;right:20px;z-index:1000}
.fab-main{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--secondary-color),#2980b9);border:none;color:#fff;box-shadow:0 4px 20px rgba(52,152,219,.4);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.fab-main:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(52,152,219,.6)}

/* Social Links */
.social-links a{transition:color var(--transition-normal)}
.social-links a:hover{color:var(--secondary-color)!important}

/* Loading */
.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--secondary-color);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.dream-item{animation:fadeInUp .6s ease forwards}
.dream-item:nth-child(even){animation-delay:.1s}

/* Alphabet Nav */
.alphabet-nav .btn{transition:all var(--transition-normal)}
.alphabet-nav .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.alphabet-nav .btn.active{background-color:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}

/* Breadcrumb */
.breadcrumb{background-color:transparent;padding:0}
.breadcrumb-visual{background:linear-gradient(90deg,#f8f9fa,#e9ecef);border-radius:25px;padding:10px 20px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}
.breadcrumb-visual .breadcrumb-item+.breadcrumb-item::before{content:"→";color:var(--secondary-color);font-weight:700}

/* Pagination */
.pagination .page-link{border-radius:50px;margin:0 2px;border:none;color:var(--secondary-color)}
.pagination .page-item.active .page-link{background-color:var(--secondary-color);border-color:var(--secondary-color)}

/* Skeleton Loading */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Responsive Design */
@media(max-width:991px){
    .sticky-top{position:static!important}
    .alphabet-nav{max-height:120px;overflow-y:auto}
    .dream-card .row{flex-direction:column}
    .dream-card .col-4{text-align:left!important;margin-top:10px}
}

@media(max-width:768px){
    .hero-section{text-align:center;padding:3rem 0!important;background-attachment:scroll}
    .hero-section .col-lg-6:last-child{margin-top:2rem}
    .display-4{font-size:2rem}
    .display-6{font-size:1.25rem}
    .card-body{padding:1.5rem!important}
    .alphabet-nav .btn{padding:.25rem .5rem;font-size:.875rem}
    .pagination .page-link{padding:.375rem .75rem;font-size:.875rem}
    .dream-image-placeholder{height:150px;font-size:2.5rem}
    .fab-main{width:50px;height:50px;font-size:1.2rem}
    .search-result-icon{width:40px;height:40px;font-size:1rem}
    .dream-tips-title{font-size:1.3rem}
    .dream-tip-card{min-height:120px;padding:1rem}
    .dream-tip-icon{font-size:2rem}
    .modern-tag-item{padding:.5rem 1rem;font-size:1rem;min-width:90px}
    .modern-tag-icon{font-size:1.2rem}
}

@media(max-width:576px){
    .container{padding-left:15px;padding-right:15px}
    body{font-size:16px}
    .btn-lg{padding:.75rem 1.5rem;font-size:.95rem}
    .input-group-lg .form-control{font-size:.95rem}
    .tag-item{font-size:.9rem}
}

/* Dark Mode */
@media(prefers-color-scheme:dark){
    :root{--bs-body-bg:#1a1a1a;--bs-body-color:#e9ecef}
    .card{background-color:#2d2d2d;border-color:#404040}
    .dream-card:hover{background-color:#353535}
}

/* Print */
@media print{
    .navbar,.footer,.btn,.search-section,.alphabet-nav,.filters,.pagination,.sticky-top,.fab-container{display:none!important}
    body{font-size:12pt;line-height:1.4}
    .container{width:100%;max-width:none}
    .dream-card{break-inside:avoid;margin-bottom:1rem}
}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn:focus,.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(52,152,219,.25)}

@media(prefers-contrast:high){
    .dream-card{border:2px solid #000}
    .btn-outline-primary{border-width:2px}
}

@media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--secondary-color);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#2980b9}

/* Critical CSS for above-the-fold content */
.navbar{will-change:transform}
.hero-section,.category-card,.dream-card{will-change:transform,box-shadow}